Demo for mixing and matching (#565)

docs/_layouts/theme.njk

@@ -5,7 +5,61 @@
 {% extends '../_includes/base.njk' %}
 
 {% block header %}
-<iframe src='{{ page.url }}demo.html'></iframe>
+<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
+
+<p id="mix_and_match" class="wa-gap-m">
+  <strong>
+    <wa-icon name="merge" slot="prefix"></wa-icon>
+    Remix
+    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
+  </strong>
+  <wa-select name="colors" label="Colors from…" size="small">
+    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="palette" label="Palette" size="small">
+    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for p in collections.palette | sort %}
+      {% if p.fileSlug !== palette %}
+      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+  <wa-select name="typography" label="Typography from…" size="small">
+    <wa-icon name="font-case" slot="prefix"></wa-icon>
+    <wa-option value="">(Theme default)</wa-option>
+    <wa-divider></wa-divider>
+    {% for theme in collections.theme | sort %}
+      {% if theme.fileSlug !== page.fileSlug %}
+      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
+      {% endif %}
+    {% endfor %}
+  </wa-select>
+
+
+</p>
+<script>
+  document.querySelector('#mix_and_match').addEventListener('wa-change', function(event) {
+    let selects = document.querySelectorAll('#mix_and_match wa-select');
+    let url = new URL(demo.src);
+
+    for (let select of selects) {
+      url.searchParams.set(select.name, select.value);
+    }
+
+    demo.src = url;
+  });
+</script>
 
 <h2>Default Color Palette</h2>
 {% set paletteURL = '/docs/palettes/' + palette + '/' %}
@@ -27,14 +81,14 @@ You can import this theme from the Web Awesome CDN.
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
 {% include 'import-stylesheet-code.md.njk' %}
 
-### Mixing & Matching
+### Remixing { #remixing }
 
-If you want to combine the colors from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
 
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
 {% include 'import-stylesheet-code.md.njk' %}
 
-To use the typography from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
 
 {% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
 {% include 'import-stylesheet-code.md.njk' %}

docs/assets/styles/docs.css

@@ -536,4 +536,23 @@ table.colors {
     height: 65vh;
     max-height: 21lh;
   }
+
+  #mix_and_match {
+    strong {
+      display: flex;
+      align-items: center;
+      gap: var(--wa-space-2xs);
+      margin-top: 1.2em;
+    }
+
+    wa-select::part(label) {
+      margin-block-end: 0;
+    }
+
+    wa-select[value='']::part(display-input),
+    wa-option[value=''] {
+      font-style: italic;
+      color: var(--wa-color-text-quiet);
+    }
+  }
 }

docs/docs/native/select.md

@@ -33,3 +33,39 @@ Use the [appearance utilities](/docs/utilities/appearance/) to change the select
   </select>
 </label>
 ```
+
+### Grouping options
+
+In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
+
+```html {.example}
+<select>
+  <small>Section 1</small>
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  <hr />
+  <small>Section 2</small>
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <option value="option-6">Option 6</option>
+</select>
+```
+
+To provide labels, you can use the `<optgroup>` element (with or without dividers):
+
+```html {.example}
+<select>
+  <optgroup label="Section 1">
+  <option value="option-1">Option 1</option>
+  <option value="option-2">Option 2</option>
+  <option value="option-3">Option 3</option>
+  </optgroup>
+  <optgroup label="Section 2">
+  <option value="option-4">Option 4</option>
+  <option value="option-5">Option 5</option>
+  <hr />
+  <option value="option-6">Option 6</option>
+  </optgroup>
+</select>
+```

docs/docs/themes/demo.njk

@@ -10,12 +10,6 @@ override:tags: []
 eleventyComputed:
   forceTheme: "{{ theme.fileSlug }}"
 ---
-<script>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>
-<script type=module>
-  document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
-</script>
 
 <link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
 <link rel="stylesheet" href="/docs/themes/showcase.css" />
@@ -24,6 +18,7 @@ eleventyComputed:
 <header>
   {% include 'breadcrumbs.njk' %}
   <h1 class="title">{{ theme.data.title }}</h1>
+  <p id="mix_and_match" hidden class="wa-size-s"></p>
   <p>{% include 'status.njk' %}</p>
   <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
 </header>
@@ -38,3 +33,47 @@ eleventyComputed:
   {{ content | safe }}
 </div>
 </wa-image-comparer>
+
+<script>
+function updateTheme() {
+  let params = new URLSearchParams(window.location.search);
+  let script = document.currentScript;
+  const stylesheetURLs = {
+    colors: id => `/dist/styles/themes/${ id }/color.css`,
+    palette: id => `/dist/styles/color/${ id }.css`,
+    typography: id => `/dist/styles/themes/${ id }/typography.css`
+  };
+  const icons = {
+    colors: 'palette',
+    palette: 'swatchbook',
+    typography: 'font-case'
+  }
+
+  for (let link of document.querySelectorAll('link.mix-and-match')) {
+    link.remove();
+  }
+
+  let msgs = [];
+
+  for (let name in stylesheetURLs) {
+    if (params.get(name)) {
+      let url = stylesheetURLs[name](params.get(name));
+      script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
+      let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
+      let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
+      let icon = icons[name];
+      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
+    }
+  }
+
+  for (let p of mix_and_match) {
+    p.hidden = msgs.length === 0;
+    if (msgs.length) {
+      let icon =
+      p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
+        ${ msg }</wa-badge>`).join(' ');
+    }
+  }
+}
+updateTheme();
+</script>

docs/docs/themes/showcase.css

@@ -9,6 +9,15 @@ body,
   overflow: hidden;
 }
 
+#mix_and_match {
+  font-weight: var(--wa-font-weight-semibold);
+  color: var(--wa-color-text-quiet);
+
+  wa-icon {
+    vertical-align: middle;
+  }
+}
+
 .theme-showcase {
   isolation: isolate;
   background-color: var(--wa-color-surface-lowered);

src/components/image-comparer/image-comparer.css

@@ -17,16 +17,13 @@
 .before,
 .after {
   display: block;
-  pointer-events: none;
-}
 
-.before::slotted(img),
-.after::slotted(img),
-.before::slotted(svg),
-.after::slotted(svg) {
-  display: block;
-  max-width: 100% !important;
-  height: auto;
+  &::slotted(img),
+  &::slotted(svg) {
+    display: block;
+    max-width: 100% !important;
+    height: auto;
+  }
 }
 
 .after {