Separate WebAwesomeFormAssociatedElement (and friends) into a separate file

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>

.github/workflows/client_tests.js.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Lint
         run: npm run prettier
       - name: Build
-        run: npm run build
+        run: npm run build:alpha
       - name: Install Playwright
         run: npx playwright install --with-deps
       - name: Run CSR tests

.github/workflows/ssr_tests.js.yml

@@ -30,7 +30,7 @@ jobs:
         run: npm run prettier
 
       - name: Build
-        run: npm run build
+        run: npm run build:alpha
 
       - name: Install Playwright
         run: npx playwright install --with-deps

docs/.eleventy.js

@@ -43,20 +43,14 @@ export default function (eleventyConfig) {
     eleventyConfig.addFilter(name, filters[name]);
   }
 
-  eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
-    key = key.split('.');
-    return arr.sort((a, b) => {
-      let aVal = key.reduce((obj, i) => obj?.[i], a);
-      let bVal = key.reduce((obj, i) => obj?.[i], b);
-      return aVal.localeCompare(bVal);
-    });
-  });
-
   // Shortcodes - {% shortCode arg1, arg2 %}
   eleventyConfig.addShortcode('cdnUrl', location => {
     return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
   });
 
+  // Paired shortcodes - {% shortCode %}content{% endShortCode %}
+  eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
+
   // Helpers
 
   // Remove elements that have [data-alpha="remove"]

docs/_includes/base-wide.njk

@@ -23,7 +23,7 @@
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.loader.js"></script>
     <link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/applied.css" />
+    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
     <link rel="stylesheet" href="/dist/styles/forms.css" />
 

docs/_includes/base.njk

@@ -32,7 +32,7 @@
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
     <link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
-    <link rel="stylesheet" href="/dist/styles/applied.css" />
+    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
     <link rel="stylesheet" href="/dist/styles/forms.css" />
 
@@ -94,8 +94,8 @@
           </wa-button>
 
           <a href="/" aria-label="Web Awesome">
-            <span class="only-desktop">{% include "logo.njk" %}</span>
-            <span class="only-mobile">{% include "logo-simple.njk" %}</span>
+            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
+            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
           <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
@@ -120,7 +120,7 @@
       {# Sidebar #}
       {% if hasSidebar %}
         {# Mobile selectors #}
-        <div class="only-mobile" slot="navigation-header">
+        <div class="wa-mobile-only" slot="navigation-header">
           <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
             {% include "preset-theme-selector.njk" %}
             {% include "color-scheme-selector.njk" %}

docs/_includes/grouped-pages.njk

@@ -0,0 +1,12 @@
+{# Cards for pages listed by category #}
+
+<section id="grid" class="index-grid">
+{% for category, pages in allPages | groupByTags(categories) -%}
+  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
+    {%- for page in pages -%}
+      {%- if not page.data.parent or listChildren -%}
+        {% include "page-card.njk" %}
+      {%- endif -%}
+    {%- endfor -%}
+{%- endfor -%}
+</section>

docs/_includes/page-card.njk

@@ -0,0 +1,10 @@
+{%- if not page.data.unlisted -%}
+<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
+	<wa-card with-header>
+		<div slot="header">
+		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+		</div>
+		<span class="page-name">{{ page.data.title }}</span>
+	</wa-card>
+</a>
+{% endif %}

docs/_includes/sidebar-group.njk

@@ -0,0 +1,22 @@
+{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
+{% if collections[tag] -%}
+  <wa-details {{ (('/' + tag + '/') in page.url) | attr('open') }}>
+    <h2 slot="summary">
+      {% set groupUrl %}/docs/{{ tag }}/{% endset %}
+      {% if groupUrl | getCollectionItemFromUrl %}
+        <a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
+          <wa-icon name="grid-2"></wa-icon>
+        </a>
+      {% else %}
+        {{ title or (tag | capitalize) }}
+      {% endif %}
+    </h2>
+    <ul>
+      {% for page in collections[tag] | sort %}
+        {% if not page.data.parent -%}
+          {% include 'sidebar-link.njk' %}
+        {%- endif %}
+      {% endfor %}
+    </ul>
+  </wa-details>
+{%- endif %}

docs/_includes/sidebar-link.njk

@@ -0,0 +1,16 @@
+{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
+	<li>
+		<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ page.data.title }}</a>
+		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
+		{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
+
+		{% set children = page.data.children %}
+		{% if children.length > 0 %}
+			<ul>
+				{% for page in children %}
+					{% include 'sidebar-link.njk' %}
+				{% endfor %}
+			</ul>
+		{% endif %}
+	</li>
+{%- endif %}

docs/_includes/sidebar.njk

@@ -19,132 +19,13 @@
   <li><a href="/docs/resources/changelog">Changelog</a></li>
 </ul>
 
-{# Components #}
-<wa-details{{ ' open' if '/components/' in page.url }}>
-  <h2 slot=summary>
-    <a href="/docs/components/" title="Overview">Components
-      <wa-icon name="grid-2"></wa-icon>
-    </a>
-  </h2>
-
-  <ul>
-    {% for component in collections.component | sort %}
-    {% if not component.data.parent and not (isAlpha and component.data.isAlpha) %}
-    <li>
-      <a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
-
-      {% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
-      {% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-      <ul>
-      {% for child in collections.component | sort %}
-        {% if child.data.parent == component.fileSlug and not (isAlpha and child.data.isAlpha) %}
-          <li>
-            <a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
-          </li>
-        {% endif %}
-      {% endfor %}
-      </ul>
-    </li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-</wa-details>
-
-<wa-details{{ ' open' if '/natives/' in page.url }}>
-  <h2 slot=summary>
-    <a href="/docs/natives/" title="Overview">Natives
-      <wa-icon name="grid-2"></wa-icon>
-    </a>
-  </h2>
-  <ul>
-    {% for page in collections.natives | sort %}
-    <li>
-      <a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
-    </li>
-    {% endfor %}
-  </ul>
-</wa-details>
-
-{# Layout #}
-{% if not isAlpha %}
-<h2>
-  <a href="/docs/layout" title="Overview">Layout
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  <li><a href="/docs/components/page">Page</a></li>
-  <li><a href="/docs/layout/cluster">Cluster</a></li>
-  <li><a href="/docs/layout/flank">Flank</a></li>
-  <li><a href="/docs/layout/frame">Frame</a></li>
-  <li><a href="/docs/layout/grid">Grid</a></li>
-  <li><a href="/docs/layout/split">Split</a></li>
-  <li><a href="/docs/layout/stack">Stack</a></li>
-</ul>
-{% endif %}
-
-{# Patterns #}
-{% if not isAlpha %}
-<h2>Patterns</h2>
-<ul>
-  <li><a href="/docs/patterns/app">Web App</a></li>
-  <li><a href="/docs/patterns/ecommerce">E-commerce</a>
-    <ul>
-      <li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
-      <li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
-      <li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
-       <li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
-      <li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
-      <li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
-    </ul>
-  </li>
-  <li><a href="/docs/patterns/blog">Blog</a></li>
-  <li><a href="/docs/patterns/news">News</a></li>
-</ul>
-{% endif %}
-
-{# Theming #}
-<h2>
-  <a href="/docs/theming" title="Overview">Theming
-    <wa-icon name="grid-2"></wa-icon>
-  </a>
-</h2>
-<ul>
-  <li>
-    <a href="/docs/theming/color">Color</a>
-  </li>
-  <li>
-    <a href="/docs/theming/typography">Typography</a>
-  </li>
-  <li>
-    <a href="/docs/theming/space">Space</a>
-  </li>
-  <li>
-    <a href="/docs/theming/borders">Borders</a>
-  </li>
-  <li>
-    <a href="/docs/theming/focus">Focus</a>
-  </li>
-  <li>
-    <a href="/docs/theming/shadows">Shadows</a>
-  </li>
-  <li>
-    <a href="/docs/theming/transitions">Transitions</a>
-  </li>
-  <li>
-    <a href="/docs/theming/component-groups">Component Groups</a>
-  </li>
-</ul>
-
-{# Style Utilities #}
-{% if not isAlpha %}
-<h2>Style Utilities</h2>
-<ul>
-  <li><a href="/docs/style-utilities/align-items">Align Items</a></li>
-  <li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
-  <li><a href="/docs/style-utilities/gap">Gap</a></li>
-  <li><a href="/docs/style-utilities/text">Text</a></li>
-</ul>
-{% endif %}
+{% for tag, title in {
+  'components': 'Components',
+  'native': 'Native Styles',
+  'utilities': 'Style Utilities',
+  'layout': 'Layout',
+  'patterns': 'Patterns',
+  'theming': 'Theming'
+} %}
+  {% include 'sidebar-group.njk' %}
+{% endfor %}

docs/_includes/status.njk

@@ -0,0 +1,25 @@
+{% if since -%}
+	<wa-badge variant="neutral">Since {{ since }}</wa-badge>
+{%- endif %}
+
+{% if status -%}
+	{%- if status == "wip" %}
+	<wa-badge variant="danger">
+		<wa-icon name="pickaxe"></wa-icon>
+		Work In Progress
+	</wa-badge>
+	{%- elif status == "experimental" -%}
+	<wa-badge variant="warning">
+		<wa-icon name="flask"></wa-icon>
+		Experimental
+	</wa-badge>
+	{%- elif status == "stable" -%}
+	<wa-badge variant="brand">Stable</wa-badge>
+	{%- else %}
+	<wa-badge>{{ status}}</wa-badge>
+	{%- endif %}
+{%- endif %}
+
+{% if isPro -%}
+	<wa-badge class="pro">PRO</wa-badge>
+{%- endif %}

docs/_layouts/blank.njk

@@ -21,7 +21,7 @@
     {# Web Awesome #}
     <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
     <link rel="stylesheet" id="theme-stylesheet" />
-    <link rel="stylesheet" href="/dist/styles/applied.css" />
+    <link rel="stylesheet" href="/dist/styles/webawesome.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
     <link rel="stylesheet" href="/dist/styles/forms.css" />
 

docs/_layouts/block.njk

@@ -0,0 +1,37 @@
+{% set hasSidebar = true %}
+{% set hasOutline = true %}
+
+{% extends '../_includes/base.njk' %}
+
+{# Component header #}
+{% block beforeContent %}
+  <h1 class="title">{{ title }}</h1>
+  <div class="block-info">
+    {% set snippets = (elements or element or snippets or snippet) | dict  %}
+
+    {% for snippet, link in snippets %}
+      {% if snippet %}
+        <code class="class">
+          {%- if link -%}
+            <a href="{{ link }}">{{ snippet }}</a>
+          {%- else -%}
+            {{ snippet }}
+          {%- endif-%}
+        </code>
+      {%- endif %}
+    {% endfor %}
+
+    {% include '../_includes/status.njk' %}
+  </div>
+  {% if description %}
+  <p class="summary">
+    {{ description | inlineMarkdown | safe }}
+  </p>
+  {% endif %}
+  {% block notes %}{% endblock %}
+{% endblock %}
+
+{# Content #}
+{% block content %}
+  {{ content | safe }}
+{% endblock %}

docs/_layouts/component.njk

@@ -1,42 +1,17 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
+{% extends '../_layouts/block.njk' %}
 {% set component = components[page.fileSlug] %}
-{% set description = component.summary %}
-
-{% extends '../_includes/base.njk' %}
 
 {# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    <code class="tag">&lt;{{ component.tagName }}&gt;</code>
-    <wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
-    <wa-badge
-      {% if component.status == 'stable' %}variant="brand"{% endif %}
-      {% if component.status == 'experimental' %}variant="warning"{% endif %}
-    >
-      {{ component.status }}
-    </wa-badge>
-
-    {% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
-  </div>
-  <p class="summary">
-    {{ component.summary | inlineMarkdown | safe }}
-  </p>
-  {% if natives %}
+{% block notes %}
+  {% if native %}
   <wa-callout variant="success">
     <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
     Just want the styles?
-    Check out <a href="/docs/natives/{{ natives }}/">{{ ('/docs/natives/' + natives + '/') | getTitleFromUrl }} natives</a>!
+    Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
   </wa-callout>
   {% endif %}
 {% endblock %}
 
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
-
 {# Component API #}
 {% block afterContent %}
   {# Slots #}

docs/_layouts/element.njk

@@ -1,54 +1,23 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends '../_includes/base.njk' %}
+{% extends '../_layouts/block.njk' %}
 
 {# Component header #}
-{% block beforeContent %}
-  <h1 class="title">{{ title }}</h1>
-  <div class="component-info">
-    {% for tag, url in elements %}
-      <code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
-    {% endfor %}
-    {% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
-    {% if status %}
-      <wa-badge
-        {% if status == 'stable' %}variant="brand"{% endif %}
-        {% if status == 'experimental' %}variant="warning"{% endif %}
-      >
-        {{ status }}
-      </wa-badge>
-    {% endif %}
-
-    {% if isPro %}
-      <wa-badge class="pro">PRO</wa-badge>
-    {% endif %}
-  </div>
-  {% if description -%}
-    <p class="summary">{{ description | inlineMarkdown | safe }}</p>
-  {%- endif %}
+{% block notes %}
   {% if component %}
   <wa-callout variant="success">
     <wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
     Want to do more?
-    Check out the {% for name in (component | toArray) -%}
+    Check out the {% for name in (component | toList) -%}
       {{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code>&lt;wa-{{ name }}&gt;</code></a>{{ ', ' if not loop.last }}
-      {%- endfor %} component{{ 's' if (component | isArray) }}</a>!
+      {%- endfor %} component{{ 's' if (component | isList) }}</a>!
   </wa-callout>
   {% endif %}
 {% endblock %}
 
-{# Content #}
-{% block content %}
-  {{ content | safe }}
-{% endblock %}
-
-{# Component API #}
 {% block afterContent %}
   {# Slots #}
   {% if css_file %}
     <h2>Using these styles</h2>
-    <p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>
+    <p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
 
 
   {% endif %}

docs/_layouts/overview.njk

@@ -0,0 +1,25 @@
+---
+layout: page-outline
+tags: ["overview"]
+---
+{% set forTag = forTag or (page.url | split('/') | last) %}
+{% if description %}
+  <div class="index-summary">{{ description | markdown | safe }}</div>
+{% endif %}
+
+<div id="block-filter">
+  <wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
+	<wa-icon slot="prefix" name="search"></wa-icon>
+  </wa-input>
+</div>
+
+{% set allPages = collections[forTag] %}
+{% include "grouped-pages.njk" %}
+
+<link href="/assets/styles/filter.css" rel="stylesheet">
+<script type="module" src="/assets/scripts/filter.js"></script>
+
+{% if content | trim %}
+<br> {# Temp fix for spacing issue #}
+{{ content | safe }}
+{% endif %}

docs/_layouts/pattern.njk

@@ -1,4 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-
-{% extends "../_includes/base.njk" %}

docs/_utils/filters.js

@@ -38,8 +38,12 @@ export function getTitleFromUrl(url, collection) {
   return item?.data.title || '';
 }
 
+export function split(text, separator) {
+  return (text + '').split(separator).filter(Boolean);
+}
+
 export function breadcrumbs(url, { withCurrent = false } = {}) {
-  const parts = url.split('/').filter(Boolean);
+  const parts = split(url, '/');
   const ret = [];
 
   while (parts.length) {
@@ -70,10 +74,191 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
   return ret;
 }
 
-export function isArray(value) {
-  return Array.isArray(value);
+export function isObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-export function toArray(value) {
-  return isArray(value) ? value : [value];
+export function isList(value) {
+  return Array.isArray(value) || value instanceof Set;
+}
+
+/** Get an Array or Set */
+export function toList(value) {
+  return isList(value) ? value : [value];
+}
+
+/**
+ * Convert any value to something that can be iterated over with a for key, value loop.
+ * Arrays and sets will be converted to a Map of value -> undefined
+ */
+export function dict(value) {
+  if (value instanceof Map || isObject(value)) {
+    return value;
+  }
+
+  let list = toList(value);
+  return new Map([...list].map(item => [item, undefined]));
+}
+
+export function deepValue(obj, key) {
+  key = Array.isArray(key) ? key : key.split('.');
+  return key.reduce((subObj, property) => subObj?.[property], obj);
+}
+
+export function isNumeric(value) {
+  return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
+}
+
+export function isString(value) {
+  return typeof value === 'string';
+}
+
+export function isEmpty(value) {
+  return value === null || value === undefined || value === '';
+}
+
+function compare(a, b) {
+  let isEmptyA = isEmpty(a);
+  let isEmptyB = isEmpty(b);
+
+  if (isEmptyA) {
+    if (isEmptyB) {
+      return 0;
+    } else {
+      return 1;
+    }
+  } else if (isEmptyB) {
+    return -1;
+  }
+
+  // Both strings, and at least one non-numeric
+  if (isNumeric(a) || isNumeric(b)) {
+    return a - b;
+  }
+
+  return (a + '').localeCompare(b);
+}
+
+/** Sort an array of objects by one or more of their properties */
+export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
+  let keys = Array.isArray(by) ? by : Object.keys(by);
+
+  return arr.sort((a, b) => {
+    let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
+    let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
+
+    for (let i = 0; i < aValues.length; i++) {
+      let aVal = aValues[i];
+      let bVal = bValues[i];
+      let result = compare(aVal, bVal);
+
+      // They are not equal in terms of comparison OR we're at the last key
+      if (result !== 0 || i === aValues.length - 1) {
+        return result;
+      }
+    }
+  });
+}
+
+/**
+ * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
+ * @param {object[]} collection
+ * @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
+ * @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
+ */
+export function groupByTags(collection, tags) {
+  if (!tags) {
+    // Default to grouping by union of all tags
+    tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
+  } else if (Array.isArray(tags)) {
+    // May contain objects of one-off tag -> label mappings
+    tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
+  } else if (typeof tags === 'object') {
+    // tags is an object of tags to labels, so we just want the keys
+    tags = Object.keys(tags);
+  }
+
+  let ret = Object.fromEntries(tags.map(tag => [tag, []]));
+  ret.other = [];
+
+  for (let item of collection) {
+    let categorized = false;
+
+    for (let tag of tags) {
+      if (item.data.tags.includes(tag)) {
+        ret[tag].push(item);
+        categorized = true;
+      }
+    }
+
+    if (!categorized) {
+      ret.other.push(item);
+    }
+  }
+
+  // Remove empty categories
+  for (let category in ret) {
+    if (ret[category].length === 0) {
+      delete ret[category];
+    }
+  }
+
+  return ret;
+}
+
+export function getCategoryTitle(category, categories) {
+  let title;
+  if (Array.isArray(categories)) {
+    // Find relevant entry
+    // [{id: "Title"}, id2, ...]
+    title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
+  } else if (typeof categories === 'object') {
+    // {id: "Title", id2: "Title 2", ...}
+    title = categories[category];
+  }
+
+  if (title) {
+    return title;
+  }
+
+  // Capitalized
+  return category.charAt(0).toUpperCase() + category.slice(1);
+}
+
+const IDENTITY = x => x;
+
+/**
+ * Helper to print out one or more HTML attributes, especially conditional ones.
+ * Usage in 11ty:
+ * - Single attribute: `<foo{{ value | attr(name) }}>`
+ * - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
+ *
+ * @overload
+ * @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
+ * @param {string} name - The name of the attribute
+ *
+ * @overload
+ * @param {Object<string, any>} obj - Map of attribute names to values
+ *
+ * @returns {string} The attribute string. No `| safe` is needed.
+ */
+export function attr(value, name) {
+  const safe = this?.env.filters.safe ?? IDENTITY;
+
+  if (arguments.length === 1 && value && typeof value === 'object') {
+    // Called with a single object argument of names to values
+    let ret = Object.entries(obj)
+      .map(([name, value]) => attr(value, name))
+      .join('');
+    return safe(ret);
+  }
+
+  if (!value) {
+    // false, "", null, undefined
+    return '';
+  }
+
+  let ret = ' ' + name + (value === true ? '' : `="${value}"`);
+
+  return safe(ret);
 }

docs/assets/examples/page-demo/demo.js

@@ -1,4 +1,3 @@
-await customElements.whenDefined('wa-checkbox');
 let container = document.getElementById('page_slots_demo');
 
 let fieldset = container.querySelector('fieldset');
@@ -10,7 +9,16 @@ let includes = `${stylesheets}
   <script src="/dist/webawesome.loader.js" type="module"></script>
   <link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
 
-function render() {
+async function render() {
+  await customElements.whenDefined('wa-checkbox');
+
+  // Let checkboxes update their "state"
+  await Promise.allSettled(
+    Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
+      return checkbox.updateComplete;
+    }),
+  );
+
   let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
   let slotsHTML = slots
     .map(slot => {
@@ -39,5 +47,5 @@ function render() {
     iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
   }
 }
+await render();
 fieldset?.addEventListener('input', render);
-render();

docs/assets/examples/page-demo/page.css

@@ -26,7 +26,7 @@ wa-page {
 
 .slot-content {
   padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-s);
+  border-radius: var(--wa-border-radius-m);
   align-content: center;
   justify-content: center;
   text-align: center;

docs/assets/scripts/code-examples.js

@@ -19,10 +19,10 @@ document.addEventListener('click', event => {
     const html =
       `<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}styles/applied.css">\n` +
+      `<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
       `<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
       `${code.textContent}`;
-    const css = 'html > body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
+    const css = 'html > body {\n  padding: 2rem !important;\n}';
     const js = '';
 
     const form = document.createElement('form');

docs/assets/scripts/filter.js

@@ -0,0 +1,25 @@
+function updateResults(input) {
+  const filter = input.value.toLowerCase().trim();
+  let filtered = Boolean(filter);
+
+  for (let grid of document.querySelectorAll('.index-grid')) {
+    grid.classList.toggle('filtered', filtered);
+
+    for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
+      let isMatch = true;
+
+      if (filter) {
+        const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
+        isMatch = content.includes(filter);
+      }
+
+      item.hidden = !isMatch;
+    }
+  }
+}
+
+document.documentElement.addEventListener('wa-input', e => {
+  if (e.target?.matches('#block-filter wa-input')) {
+    updateResults(e.target);
+  }
+});

docs/assets/styles/code-examples.css

@@ -1,6 +1,6 @@
 .code-example {
   border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-l);
   color: var(--wa-color-text-normal);
   margin-block-end: var(--wa-flow-spacing);
 }
@@ -41,8 +41,8 @@
   border-bottom: none;
 
   pre {
-    border-bottom-right-radius: var(--wa-border-radius-m);
-    border-bottom-left-radius: var(--wa-border-radius-m);
+    border-bottom-right-radius: var(--wa-border-radius-l);
+    border-bottom-left-radius: var(--wa-border-radius-l);
   }
 }
 
@@ -62,11 +62,11 @@
 
     &:first-of-type {
       border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-m);
+      border-bottom-left-radius: var(--wa-border-radius-l);
     }
 
     &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-m);
+      border-bottom-right-radius: var(--wa-border-radius-l);
     }
 
     &:focus-visible {

docs/assets/styles/copy-code.css

@@ -6,7 +6,7 @@ wa-copy-button.copy-button {
   right: 0.25rem;
   font-family: var(--wa-font-family-body);
   color: var(--wa-color-gray-80);
-  border-radius: var(--wa-border-radius-s);
+  border-radius: var(--wa-border-radius-m);
   padding: 0.25rem;
 
   &:hover {

docs/assets/styles/docs.css

@@ -104,17 +104,9 @@ wa-page > header {
   wa-details {
     border: none;
     background: none;
-  }
-
-  wa-details::part(header) {
     padding: 0;
   }
 
-  wa-details::part(content) {
-    padding-inline: 0;
-    padding-block-end: 0;
-  }
-
   ul {
     border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
     font-size: var(--wa-font-size-s);
@@ -238,7 +230,7 @@ h1.title wa-badge {
   }
 }
 
-.component-info {
+.block-info {
   margin-block-end: var(--wa-flow-spacing);
 }
 
@@ -269,7 +261,7 @@ h1.title wa-badge {
   display: flex;
   gap: 1rem;
   border: var(--wa-border-style) var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-l);
   padding: 1rem;
   margin-block-end: var(--wa-flow-spacing);
 
@@ -329,8 +321,45 @@ wa-page > main:has(> .index-grid) {
 
 .index-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
   gap: var(--wa-space-2xl);
+
+  a {
+    border-radius: var(--wa-border-radius-l);
+  }
+
+  wa-card {
+    --box-shadow: none;
+    --spacing: var(--wa-space-m);
+    inline-size: 100%;
+
+    &:hover {
+      --border-color: var(--wa-color-brand-border-loud);
+      --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+
+      .page-name {
+        color: var(--wa-color-brand-on-quiet);
+      }
+    }
+
+    [slot='header'] {
+      display: flex;
+    }
+
+    &::part(header) {
+      background-color: var(--wa-color-neutral-fill-quiet);
+      border-bottom: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-block-size: calc(6rem + var(--spacing));
+    }
+  }
+
+  .page-name {
+    font-size: var(--wa-font-size-s);
+    font-weight: var(--wa-font-weight-action);
+  }
 }
 
 .index-category {
@@ -339,107 +368,13 @@ wa-page > main:has(> .index-grid) {
   margin-block-start: var(--wa-space-2xl);
 }
 
-.index-grid a {
-  border-radius: var(--wa-border-radius-m);
-}
-
-.index-grid wa-card {
-  --box-shadow: none;
-  --spacing: var(--wa-space-m);
-  inline-size: 100%;
-}
-
-.index-grid wa-card:hover {
-  --border-color: var(--wa-color-brand-border-loud);
-  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-  & .page-name {
-    color: var(--wa-color-brand-on-quiet);
-  }
-}
-
-.index-grid wa-card [slot='header'] {
-  display: flex;
-}
-
-.index-grid wa-card::part(header) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-bottom: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: calc(6rem + var(--spacing));
-}
-
-.index-grid .page-name {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-action);
-}
-
-/* Index Pages */
-wa-page > main:has(> .index-grid) {
-  max-width: 120ch;
-  margin-inline: auto;
-}
-
-.index-summary {
-  max-inline-size: 80ch;
-}
-
-.index-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
-  gap: var(--wa-space-2xl);
-}
-
-.index-category {
-  grid-column: 1 / -1;
-  margin-block-end: 0;
-  margin-block-start: var(--wa-space-2xl);
-}
-
-.index-grid a {
-  border-radius: var(--wa-border-radius-m);
-}
-
-.index-grid wa-card {
-  --box-shadow: none;
-  --spacing: var(--wa-space-m);
-  inline-size: 100%;
-}
-
-.index-grid wa-card:hover {
-  --border-color: var(--wa-color-brand-border-loud);
-  --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
-  & .page-name {
-    color: var(--wa-color-brand-on-quiet);
-  }
-}
-
-.index-grid wa-card [slot='header'] {
-  display: flex;
-}
-
-.index-grid wa-card::part(header) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-bottom: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-block-size: calc(6rem + var(--spacing));
-}
-
-.index-grid .page-name {
-  font-size: var(--wa-font-size-s);
-  font-weight: var(--wa-font-weight-action);
-}
-
 /* Swatches */
 .swatch {
   background-color: transparent;
   border-color: var(--wa-color-neutral-border-normal);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
-  border-radius: var(--wa-border-radius-s);
+  border-radius: var(--wa-border-radius-m);
   box-sizing: border-box;
   line-height: 2.5;
   height: 2.5em;
@@ -449,13 +384,13 @@ wa-page > main:has(> .index-grid) {
 /* Layout Examples */
 .layout-example-boundary {
   border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-border-radius-l);
   padding: var(--wa-space-s);
 }
 
 .layout-example-block {
   background-color: var(--wa-color-indigo-60);
-  border-radius: var(--wa-border-radius-s);
+  border-radius: var(--wa-border-radius-m);
   min-block-size: 4rem;
   min-inline-size: 4rem;
 }
@@ -491,11 +426,6 @@ wa-page > main:has(> .index-grid) {
 
 /** desktop */
 @media screen and not (max-width: 768px) {
-  wa-page [data-toggle-nav],
-  wa-page .only-mobile {
-    display: none;
-  }
-
   /* Navigation sidebar */
   wa-page::part(navigation) {
     border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);

docs/assets/styles/filter.css

@@ -0,0 +1,37 @@
+wa-card#drawer-card::part(header) {
+  --spacing: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+
+#block-filter {
+  margin-block-end: var(--wa-space-xl);
+}
+
+.index-grid.filtered {
+  h2 {
+    /* Hide headings while filtering */
+    display: none;
+  }
+
+  &:not(:has(> a:not([hidden]))) {
+    /* We’re filtering and there are no results */
+
+    &::before {
+      content: var(--empty-message);
+      grid-column: 1 / -1;
+      color: var(--wa-color-on-quiet);
+      font-style: italic;
+      font-weight: var(--wa-font-weight-action);
+    }
+
+    /* Show empty state when there's a search filter and no results */
+    &[data-empty] {
+      --empty-message: attr(data-empty);
+    }
+
+    &:not([data-empty]) {
+      --empty-message: 'No results';
+    }
+  }
+}

docs/assets/styles/hydration-errors.css

@@ -18,7 +18,7 @@
 .diff-grid > * {
   height: 100%;
 }
-.diff-dialog::part(dialog) {
+.diff-dialog {
   max-width: 90vw;
   width: 90vw;
 }

docs/assets/styles/outline.css

@@ -42,5 +42,6 @@
 
   #outline-expandable {
     display: block;
+    margin-block-end: var(--wa-space-xl);
   }
 }

docs/assets/styles/search.css

@@ -1,13 +1,14 @@
 #site-search {
-  --width: 38rem;
+  width: 38rem;
+  position: absolute;
+  top: 0;
+  border-radius: var(--wa-border-radius-l);
+  padding: 0;
+  margin: 0 auto;
+  overflow: hidden;
 
-  &::part(dialog) {
-    position: absolute;
-    top: 0;
-    border-radius: var(--wa-border-radius-m);
-    padding: 0;
-    margin: 10rem auto;
-    overflow: hidden;
+  &::part(base) {
+    margin-block: 10rem;
   }
 
   &::part(body) {
@@ -18,21 +19,22 @@
     justify-content: center;
     gap: 0.5rem;
   }
+
+  @media screen and (max-width: 900px) {
+    max-width: calc(100% - 2rem);
+
+    &::part(base) {
+      margin-block: 1rem;
+    }
+  }
 }
 
 #site-search-container {
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 20rem);
-}
 
-@media screen and (max-width: 900px) {
-  #site-search::part(dialog) {
-    max-width: calc(100% - 2rem);
-    margin-block: 1rem;
-  }
-
-  #site-search-container {
+  @media screen and (max-width: 900px) {
     max-height: calc(100dvh - 2rem);
   }
 }
@@ -229,8 +231,8 @@ header {
   gap: 2rem;
   color: var(--wa-color-text-quiet);
   border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-bottom-left-radius: var(--wa-border-radius-m);
-  border-bottom-right-radius: var(--wa-border-radius-m);
+  border-bottom-left-radius: var(--wa-border-radius-l);
+  border-bottom-right-radius: var(--wa-border-radius-l);
   padding: 1rem;
 
   kbd {

docs/docs/components/animated-image.md

@@ -1,7 +1,8 @@
 ---
 title: Animated Image
 description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
-tags: component
+tags: [imagery, niche]
+icon: animated-image
 ---
 
 ```html {.example}

docs/docs/components/animation.md

@@ -1,7 +1,8 @@
 ---
 title: Animation
 description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
-tags: component
+tags: [helpers, primitives]
+icon: animation
 ---
 
 To animate an element, wrap it in `<wa-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
@@ -196,4 +197,3 @@ Animations won't play until you apply the `play` attribute. You can omit it init
     animation.play = true;
   });
 </script>
-```

docs/docs/components/avatar.md

@@ -1,7 +1,8 @@
 ---
 title: Avatar
 description: Avatars are used to represent a person or object.
-tags: component
+tags: [imagery, apps, content]
+icon: avatar
 ---
 
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.

docs/docs/components/badge.md

@@ -1,7 +1,8 @@
 ---
 title: Badge
 description: Badges are used to draw attention and display statuses or counts.
-tags: component
+tags: [feedback, content]
+icon: badge
 ---
 
 ```html {.example}
@@ -127,4 +128,3 @@ When including badges in menu items, use the `suffix` slot to make sure they're
   <wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
   <wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
 </wa-menu>
-```

docs/docs/components/breadcrumb.md

@@ -1,7 +1,8 @@
 ---
 title: Breadcrumb
 description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
-tags: component
+tags: [navigation]
+icon: breadcrumb
 ---
 
 Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
@@ -171,4 +172,3 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
     </wa-dropdown>
   </wa-breadcrumb-item>
 </wa-breadcrumb>
-```

docs/docs/components/button-group.md

@@ -1,7 +1,8 @@
 ---
 title: Button Group
 description: Button groups can be used to group related buttons into sections.
-tags: component
+tags: [actions, forms, apps]
+icon: button-group
 ---
 
 ```html {.example}
@@ -139,15 +140,17 @@ Pill buttons are supported through the button's `pill` attribute.
 </wa-button-group>
 ```
 
-### Dropdowns in Button Groups
+### Dropdowns and Native Buttons in Button Groups
 
-Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
+Other elements can also be placed inside button groups:
+- Native buttons as long as their [native styles](/docs/native/button) are included
+- Dropdowns as long as the trigger is either a `<wa-button>`, or a `<button>` with [native styles](/docs/native/button) included.
 
 ```html {.example}
 <wa-button-group label="Example Button Group">
   <wa-button>Button</wa-button>
-  <wa-button>Button</wa-button>
-  <wa-dropdown>
+  <button>Native Button</button>
+  <wa-dropdown hoist>
     <wa-button slot="trigger" caret>Dropdown</wa-button>
     <wa-menu>
       <wa-menu-item>Item 1</wa-menu-item>
@@ -165,9 +168,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
 ```html {.example}
 <wa-button-group label="Example Button Group">
   <wa-button variant="brand">Save</wa-button>
-  <wa-dropdown placement="bottom-end">
+  <wa-dropdown placement="bottom-end" hoist>
     <wa-button slot="trigger" variant="brand" caret>
-      <wa-visually-hidden>More options</wa-visually-hidden>
+      <span class="wa-visually-hidden">More options</span>
     </wa-button>
     <wa-menu>
       <wa-menu-item>Save</wa-menu-item>

docs/docs/components/button.md

@@ -1,8 +1,9 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-tags: component
-natives: button
+tags: [actions, forms]
+native: button
+icon: button
 ---
 
 ```html {.example}
@@ -28,35 +29,37 @@ Use the `variant` attribute to set the button's semantic variant.
 Use the `appearance` attribute to change the button's visual appearance.
 
 ```html {.example}
-<div style="margin-block-end: 1rem;">
-  <wa-button appearance="accent" variant="neutral">Accent</wa-button>
-  <wa-button appearance="filled" variant="neutral">Filled</wa-button>
-  <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
-  <wa-button appearance="plain" variant="neutral">Text</wa-button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-button appearance="accent" variant="brand">Accent</wa-button>
-  <wa-button appearance="filled" variant="brand">Filled</wa-button>
-  <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
-  <wa-button appearance="plain" variant="brand">Text</wa-button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-button appearance="accent" variant="success">Accent</wa-button>
-  <wa-button appearance="filled" variant="success">Filled</wa-button>
-  <wa-button appearance="outlined" variant="success">Outlined</wa-button>
-  <wa-button appearance="plain" variant="success">Text</wa-button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <wa-button appearance="accent" variant="warning">Accent</wa-button>
-  <wa-button appearance="filled" variant="warning">Filled</wa-button>
-  <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
-  <wa-button appearance="plain" variant="warning">Text</wa-button>
-</div>
-<div>
-  <wa-button appearance="accent" variant="danger">Accent</wa-button>
-  <wa-button appearance="filled" variant="danger">Filled</wa-button>
-  <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
-  <wa-button appearance="plain" variant="danger">Text</wa-button>
+<div class="wa-stack">
+  <div class="wa-gap-m">
+    <wa-button appearance="accent" variant="neutral">Accent</wa-button>
+    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
+    <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+    <wa-button appearance="plain" variant="neutral">Plain</wa-button>
+  </div>
+  <div class="wa-gap-m">
+    <wa-button appearance="accent" variant="brand">Accent</wa-button>
+    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
+    <wa-button appearance="filled" variant="brand">Filled</wa-button>
+    <wa-button appearance="plain" variant="brand">Plain</wa-button>
+  </div>
+  <div class="wa-gap-m">
+    <wa-button appearance="accent" variant="success">Accent</wa-button>
+    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
+    <wa-button appearance="filled" variant="success">Filled</wa-button>
+    <wa-button appearance="plain" variant="success">Plain</wa-button>
+  </div>
+  <div class="wa-gap-m">
+    <wa-button appearance="accent" variant="warning">Accent</wa-button>
+    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
+    <wa-button appearance="filled" variant="warning">Filled</wa-button>
+    <wa-button appearance="plain" variant="warning">Plain</wa-button>
+  </div>
+  <div class="wa-gap-m">
+    <wa-button appearance="accent" variant="danger">Accent</wa-button>
+    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
+    <wa-button appearance="filled" variant="danger">Filled</wa-button>
+    <wa-button appearance="plain" variant="danger">Plain</wa-button>
+  </div>
 </div>
 ```
 

docs/docs/components/callout.md

@@ -1,7 +1,8 @@
 ---
 title: Callout
 description: Callouts are used to display important messages inline.
-tags: component
+tags: [feedback, content]
+icon: callout
 ---
 
 ```html {.example}
@@ -57,6 +58,71 @@ Set the `variant` attribute to change the callout's variant.
 </wa-callout>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent">
+  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="accent">
+  <wa-icon slot="icon" name="square-check"></wa-icon>
+  This <strong>accent</strong> callout draws attention without an outline
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined filled">
+  <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="filled">
+  <wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
+  This callout is only <strong>filled</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined">
+  <wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
+  Here's an <strong>outlined</strong> callout
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="plain">
+  <wa-icon slot="icon" name="font" variant="regular"></wa-icon>
+  No bells and whistles on this <strong>plain</strong> callout
+</wa-callout>
+```
+
+### Sizes
+
+Use the `size` attribute to change a callout's size.
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent" size="large">
+  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
+  This is meant to be very emphasized.
+</wa-callout>
+<wa-callout>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Normal-sized callout.
+</wa-callout>
+<wa-callout variant="plain" appearance="plain" size="small">
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Just a small tip!
+</wa-callout>
+```
+
 ### Without Icons
 
 Icons are optional. Simply omit the `icon` slot if you don't want them.

docs/docs/components/card.md

@@ -1,7 +1,8 @@
 ---
 title: Card
 description: Cards can be used to group related subjects in a container.
-tags: component
+tags: [organization, layout]
+icon: card
 ---
 
 ```html {.example}
@@ -59,7 +60,8 @@ Basic cards aren't very exciting, but they can display any content you want them
 
 ### Card with Header
 
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
+Headers can be used to display titles and more.
+If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
 
 ```html {.example}
 <wa-card with-header class="card-header">
@@ -94,7 +96,8 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 
 ### Card with Footer
 
-Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
+Footers can be used to display actions, summaries, or other relevant content.
+If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
 
 ```html {.example}
 <wa-card with-footer class="card-footer">
@@ -121,7 +124,8 @@ Footers can be used to display actions, summaries, or other relevant content. Us
 
 ### Images
 
-Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
+Card images are displayed atop the card and will stretch to fit.
+If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
 
 ```html {.example}
 <wa-card with-image class="card-image">

docs/docs/components/carousel-item.md

@@ -3,6 +3,7 @@ title: Carousel Item
 description: A carousel item represent a slide within a carousel.
 tags: component
 parent: carousel
+icon: carousel-item
 ---
 
 ```html {.example}

docs/docs/components/carousel.md

@@ -1,7 +1,8 @@
 ---
 title: Carousel
 description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
-tags: component
+tags: [imagery, disclosure]
+icon: carousel
 ---
 
 ```html {.example}

docs/docs/components/cheatsheet.njk

@@ -1,6 +1,7 @@
 ---
 title: Component Cheatsheet
 layout: docs
+unlisted: true
 ---
 
 <style>
@@ -64,15 +65,21 @@ table code {
 	<tr>
 		<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
 		<td>
+      {% set componentLinks = [] %}
+			{% for component in thingComponents  %}
+			  {%- set link -%}
+				  <a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
+				{%- endset -%}
+				{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
+        {% set componentLinks = (componentLinks.push(link), componentLinks) %}
+			{%- endfor -%}
 			{% if thingComponents.length > 1 %}
 				<details open>
 					<summary><strong>{{ thingComponents.length }}</strong> components</summary>
-			{% endif %}
-			{% for component in thingComponents  %}
-				<a href="../{{ component.slug }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-			{%- endfor -%}
-			{% if thingComponents.length > 1 %}
+					{{ componentLinks | safe }}
 				</details>
+			{% else %}
+				{{ componentLinks | safe }}
 			{% endif %}
 		</td>
 	</tr>

docs/docs/components/checkbox.md

@@ -1,7 +1,9 @@
 ---
 title: Checkbox
 description: Checkboxes allow the user to toggle an option on or off.
-tags: component
+tags: [inputs, forms]
+native: checkbox
+icon: checkbox
 ---
 
 ```html {.example}

docs/docs/components/code-demo.md

@@ -174,7 +174,7 @@ i.e. the previews of demos using the `viewport` attribute, but also opening demo
 Just setting `border-radius` or `border` should work as expected:
 
 ```html{.example}
-<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-s)">
+<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
   <pre><code class="language-html">
     &lt;button&gt;Click me!&lt;/button&gt;
     &lt;wa-button&gt;Click me!&lt;/wa-button&gt;

docs/docs/components/color-picker.md

@@ -1,7 +1,9 @@
 ---
 title: Color Picker
 description: Color pickers allow the user to select a color.
-tags: component
+tags: [inputs, forms]
+native: input
+icon: color-picker
 ---
 
 ```html {.example}
@@ -37,10 +39,12 @@ Set the color picker's format with the `format` attribute. Valid options include
 To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
 
 ```html {.example}
-<wa-color-picker format="hex" value="#4a90e2" label="Select a color"></wa-color-picker>
-<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></wa-color-picker>
-<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></wa-color-picker>
-<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></wa-color-picker>
+<div class="wa-grid" style="--min-column-size: 12ch;">
+  <wa-color-picker format="hex" value="#4a90e2" label="Pick a hex color"></wa-color-picker>
+  <wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Pick an RGB color"></wa-color-picker>
+  <wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Pick an HSL color"></wa-color-picker>
+  <wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Pick an HSV color"></wa-color-picker>
+</div>
 ```
 
 ### Swatches

docs/docs/components/components.json

@@ -1,3 +1,11 @@
 {
-  "layout": "component.njk"
+  "layout": "component.njk",
+  "tags": ["components"],
+  "eleventyComputed": {
+    "component": "{{ components[page.fileSlug] }}",
+    "description": "{{ components[page.fileSlug].summary }}",
+    "status": "{{ components[page.fileSlug].status }}",
+    "since": "{{ components[page.fileSlug].since }}",
+    "element": "<{{ components[page.fileSlug].tagName }}>"
+  }
 }

docs/docs/components/copy-button.md

@@ -1,7 +1,8 @@
 ---
 title: Copy Button
 description: Copies data to the clipboard when the user clicks the button.
-tags: component
+tags: [actions, apps]
+icon: copy-button
 ---
 
 ```html {.example}

docs/docs/components/details.md

@@ -1,8 +1,9 @@
 ---
 title: Details
 description: Details show a brief summary and expand to show additional content.
-tags: component
-natives: details
+tags: [organization, apps, content, disclosure]
+icon: details
+native: details
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/dialog.md

@@ -1,8 +1,10 @@
 ---
 title: Dialog
 description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
-tags: component
-natives: dialog
+tags: [organization, apps, disclosure]
+icon: dialog
+native: dialog
+keywords: modal
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/divider.md

@@ -1,7 +1,8 @@
 ---
 title: Divider
 description: Dividers are used to visually separate or group elements.
-tags: component
+tags: [organization, content, forms]
+icon: divider
 ---
 
 ```html {.example}

docs/docs/components/drawer.md

@@ -1,7 +1,8 @@
 ---
 title: Drawer
 description: Drawers slide in from a container to expose additional options and information.
-tags: component
+tags: [organization, disclosure]
+icon: drawer
 ---
 
 <!-- cspell:dictionaries lorem-ipsum -->

docs/docs/components/dropdown.md

@@ -1,7 +1,8 @@
 ---
 title: Dropdown
 description: 'Dropdowns expose additional content that "drops down" in a panel.'
-tags: component
+tags: [actions, apps]
+icon: dropdown
 ---
 
 Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it.

docs/docs/components/format-bytes.md

@@ -1,7 +1,8 @@
 ---
 title: Format Bytes
 description: Formats a number as a human readable bytes value.
-tags: component
+tags: [helpers, content, inline]
+icon: format-bytes
 ---
 
 ```html {.example}

docs/docs/components/format-date.md

@@ -1,7 +1,8 @@
 ---
 title: Format Date
 description: Formats a date/time using the specified locale and options.
-tags: component
+tags: [helpers, content, inline]
+icon: format-date
 ---
 
 Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required.

docs/docs/components/format-number.md

@@ -1,7 +1,8 @@
 ---
 title: Format Number
 description: Formats a number using the specified locale and options.
-tags: component
+tags: [helpers, content, inline]
+icon: format-number
 ---
 
 Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.

docs/docs/components/icon-button.md

@@ -1,7 +1,8 @@
 ---
 title: Icon Button
 description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
-tags: component
+tags: [actions, apps]
+icon: icon-button
 ---
 
 For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).

docs/docs/components/icon.md

@@ -1,7 +1,8 @@
 ---
 title: Icon
 description: Icons are symbols that can be used to represent various options within an application.
-tags: component
+tags: [imagery, apps, popular]
+icon: icon
 ---
 
 Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library).

docs/docs/components/image-comparer.md

@@ -1,7 +1,8 @@
 ---
 title: Image Comparer
 description: Compare visual differences between similar photos with a sliding panel.
-tags: component
+tags: [imagery, niche]
+icon: image-comparer
 ---
 
 For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.)

docs/docs/components/include.md

@@ -1,7 +1,8 @@
 ---
 title: Include
 description: Includes give you the power to embed external HTML files into the page.
-tags: component
+tags: [helpers, primitives]
+icon: include
 ---
 
 Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made.

docs/docs/components/index.md

@@ -1,492 +0,0 @@
----
-title: Components
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
-layout: page-outline
----
-
-<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
-
-<div id="component-filter">
-  <wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
-</div>
-
-<div id="component-grid" class="index-grid">
-  <h2 class="index-category">Actions</h2>
-  <a href="/docs/components/button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/button.njk" %}
-      </div>
-      <span class="page-name">Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/button-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/button-group.njk" %}
-      </div>
-      <span class="page-name">Button Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/copy-button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/copy-button.njk" %}
-      </div>
-      <span class="page-name">Copy Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/dropdown">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/dropdown.njk" %}
-      </div>
-      <span class="page-name">Dropdown</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/icon-button">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/icon-button.njk" %}
-      </div>
-      <span class="page-name">Icon Button</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/menu">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/menu.njk" %}
-      </div>
-      <span class="page-name">Menu</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/qr-code">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/qr-code.njk" %}
-      </div>
-      <span class="page-name">QR Code</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category" style="grid-column: 1 / -1">Feedback and Status</h2>
-  <a href="/docs/components/badge">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/badge.njk" %}
-      </div>
-      <span class="page-name">Badge</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/callout">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/callout.njk" %}
-      </div>
-      <span class="page-name">Callout</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/progress-bar">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/progress-bar.njk" %}
-      </div>
-      <span class="page-name">Progress Bar</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/progress-ring">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/progress-ring.njk" %}
-      </div>
-      <span class="page-name">Progress Ring</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/skeleton">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/skeleton.njk" %}
-      </div>
-      <span class="page-name">Skeleton</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/spinner" data-keywords="loader">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/spinner.njk" %}
-      </div>
-      <span class="page-name">Spinner</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tag">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tag.njk" %}
-      </div>
-      <span class="page-name">Tag</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tooltip">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tooltip.njk" %}
-      </div>
-      <span class="page-name">Tooltip</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Imagery</h2>
-  <a href="/docs/components/animated-image">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/animated-image.njk" %}
-      </div>
-      <span class="page-name">Animated Image</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/avatar">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/avatar.njk" %}
-      </div>
-      <span class="page-name">Avatar</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/carousel">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/carousel.njk" %}
-      </div>
-      <span class="page-name">Carousel</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/icon">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/icon.njk" %}
-      </div>
-      <span class="page-name">Icon</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/image-comparer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/image-comparer.njk" %}
-      </div>
-      <span class="page-name">Image Comparer</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Inputs</h2>
-  <a href="/docs/components/checkbox">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/checkbox.njk" %}
-      </div>
-      <span class="page-name">Checkbox</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/color-picker">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/color-picker.njk" %}
-      </div>
-      <span class="page-name">Color Picker</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/input" data-keywords="textfield text field">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/input.njk" %}
-      </div>
-      <span class="page-name">Input</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/radio-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/radio-group.njk" %}
-      </div>
-      <span class="page-name">Radio Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/range">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/range.njk" %}
-      </div>
-      <span class="page-name">Range</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/rating">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/rating.njk" %}
-      </div>
-      <span class="page-name">Rating</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/select">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/select.njk" %}
-      </div>
-      <span class="page-name">Select</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/switch" data-keywords="toggle">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/switch.njk" %}
-      </div>
-      <span class="page-name">Switch</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/textarea">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/textarea.njk" %}
-      </div>
-      <span class="page-name">Textarea</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Navigation</h2>
-  <a href="/docs/components/breadcrumb">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/breadcrumb.njk" %}
-      </div>
-      <span class="page-name">Breadcrumb</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tab-group">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tab-group.njk" %}
-      </div>
-      <span class="page-name">Tab Group</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/tree">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/tree.njk" %}
-      </div>
-      <span class="page-name">Tree</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Organization</h2>
-  <a href="/docs/components/card">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/card.njk" %}
-      </div>
-      <span class="page-name">Card</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/details">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/details.njk" %}
-      </div>
-      <span class="page-name">Details</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/dialog" data-keywords="modal">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/dialog.njk" %}
-      </div>
-      <span class="page-name">Dialog</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/divider">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/divider.njk" %}
-      </div>
-      <span class="page-name">Divider</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/drawer">
-    <wa-card with-header id="drawer-card">
-      <div slot="header">
-        {% include "svgs/drawer.njk" %}
-      </div>
-      <span class="page-name">Drawer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/page">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/page.njk" %}
-      </div>
-      <span class="page-name">Page</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/split-panel">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/split-panel.njk" %}
-      </div>
-      <span class="page-name">Split Panel</span>
-    </wa-card>
-  </a>
-
-  <h2 class="index-category">Utilities</h2>
-  <a href="/docs/components/animation">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/animation.njk" %}
-      </div>
-      <span class="page-name">Animation</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-bytes">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-bytes.njk" %}
-      </div>
-      <span class="page-name">Format Bytes</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-date">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-date.njk" %}
-      </div>
-      <span class="page-name">Format Date</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/format-number">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/format-number.njk" %}
-      </div>
-      <span class="page-name">Format Number</span>
-    </wa-card>
-  </a>
-    <a href="/docs/components/include">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/include.njk" %}
-      </div>
-      <span class="page-name">Include</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/mutation-observer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/mutation-observer.njk" %}
-      </div>
-      <span class="page-name">Mutation Observer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/popup">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/popup.njk" %}
-      </div>
-      <span class="page-name">Popup</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/relative-time">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/relative-time.njk" %}
-      </div>
-      <span class="page-name">Relative Time</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/resize-observer">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/resize-observer.njk" %}
-      </div>
-      <span class="page-name">Resize Observer</span>
-    </wa-card>
-  </a>
-  <a href="/docs/components/visually-hidden">
-    <wa-card with-header>
-      <div slot="header">
-        {% include "svgs/visually-hidden.njk" %}
-      </div>
-      <span class="page-name">Visually Hidden</span>
-    </wa-card>
-  </a>
-</div>
-
-<div id="component-filter-empty" hidden>
-  No results
-</div>
-
-<script type="module">
-  const container = document.getElementById('component-filter');
-  const empty = document.getElementById('component-filter-empty');
-  const grid = document.getElementById('component-grid');
-  const input = container.querySelector('wa-input');
-
-  function updateResults() {
-    const filter = input.value.toLowerCase().trim();
-    
-    // Hide headings while filtering
-    grid.querySelectorAll('h2').forEach(heading => {
-      heading.hidden = filter === '' ? false : true;
-    });
-
-    // Show matching components
-    grid.querySelectorAll('a').forEach(link => {
-      const content = link.textContent.toLowerCase();
-      const keywords = link.getAttribute('data-keywords') || '';
-      const isMatch = filter === '' || (content + keywords).includes(filter);
-      link.classList.toggle('hidden', !isMatch);
-    });
-
-    // Show empty state when there's a search filter and no results
-    if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
-      empty.hidden = false;
-    } else {
-      empty.hidden = true;
-    }
-  }
-
-  input.addEventListener('wa-input', updateResults);
-</script>
-
-<style>
-  wa-card#drawer-card::part(header) {
-    --spacing: 0;
-    justify-content: flex-end;
-    overflow: hidden;
-  }
-
-  #component-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: var(--wa-space-m);
-    margin-block-start: var(--wa-space-2xl);
-
-    > a {
-      position: static;
-      visibility: visible;
-
-      &.hidden {
-        display: block;  
-        position: absolute;
-        visibility: hidden;
-      }
-    }    
-  }
-
-  #component-filter-empty {
-    border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
-    border-radius: var(--wa-border-radius-m);
-    font-size: var(--wa-font-size-l);
-    color: var(--wa-color-text-quiet);
-    text-align: center;
-    padding-block: var(--wa-space-2xl);
-    margin-block-start: 0
-  }
-</style>

docs/docs/components/index.njk

@@ -0,0 +1,14 @@
+---
+title: Components
+description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
+layout: overview
+categories:
+  - actions
+  - feedback: 'Feedback & Status'
+  - imagery
+  - inputs
+  - navigation
+  - organization
+  - helpers: 'Utilities'
+override:tags: []
+---

docs/docs/components/input.md

@@ -1,8 +1,10 @@
 ---
 title: Input
 description: Inputs collect data from the user.
-tags: component
-natives: input
+tags: [inputs, forms]
+icon: input
+native: input
+keywords: textfield text field
 ---
 
 ```html {.example}
@@ -133,33 +135,35 @@ Use the `prefix` and `suffix` slots to add icons.
 Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
 
 ```html {.example}
-<wa-input class="label-on-left" label="Name" hint="Enter your name"></wa-input>
-<wa-input class="label-on-left" label="Email" type="email" hint="Enter your email"></wa-input>
-<wa-textarea class="label-on-left" label="Bio" hint="Tell us something about yourself"></wa-textarea>
+<div class="label-on-left">
+  <wa-input label="Name" hint="Enter your name"></wa-input>
+  <wa-input label="Email" type="email" hint="Enter your email"></wa-input>
+  <wa-textarea label="Bio" hint="Tell us something about yourself"></wa-textarea>
+</div>
 
 <style>
   .label-on-left {
-    --label-width: 3.75rem;
-    --gap-width: 1rem;
-  }
-
-  .label-on-left + .label-on-left {
-    margin-top: var(--wa-space-m);
-  }
-
-  .label-on-left::part(form-control) {
     display: grid;
-    grid: auto / var(--label-width) 1fr;
-    gap: var(--wa-space-3xs) var(--gap-width);
+    grid-template-columns: auto 1fr;
+    gap: var(--wa-space-l);
     align-items: center;
-  }
 
-  .label-on-left::part(form-control-label) {
-    text-align: right;
-  }
+    wa-input, wa-textarea {
+      grid-column: 1 / -1;
+      grid-row-end: span 2;
+      display: grid;
+      grid-template-columns: subgrid;
+      gap: 0 var(--wa-space-l);
+      align-items: center;
+    }
 
-  .label-on-left::part(hint) {
-    grid-column-start: 2;
+    ::part(label) {
+      text-align: right;
+    }
+
+    ::part(hint) {
+      grid-column: 2;
+    }
   }
 </style>
 ```

docs/docs/components/menu-item.md

@@ -3,6 +3,7 @@ title: Menu Item
 description: Menu items provide options for the user to pick from in a menu.
 tags: component
 parent: menu
+icon: menu
 ---
 
 ```html {.example}

docs/docs/components/menu-label.md

@@ -3,6 +3,7 @@ title: Menu Label
 description: Menu labels are used to describe a group of menu items.
 tags: component
 parent: menu
+icon: menu
 ---
 
 ```html {.example}

docs/docs/components/menu.md

@@ -1,7 +1,8 @@
 ---
 title: Menu
 description: Menus provide a list of options for the user to choose from.
-tags: component
+tags: [actions, apps]
+icon: menu
 ---
 
 You can use [menu items](/docs/components/menu-item), [menu labels](/docs/components/menu-label), and [dividers](/docs/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.

docs/docs/components/mutation-observer.md

@@ -1,7 +1,8 @@
 ---
 title: Mutation Observer
 description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
-tags: component
+tags: [helpers, primitives]
+icon: mutation-observer
 ---
 
 The mutation observer will report changes to the content it wraps through the `wa-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed.

docs/docs/components/option.md

@@ -3,6 +3,7 @@ title: Option
 description: Options define the selectable items within various form controls such as select.
 tags: component
 parent: select
+icon: option
 ---
 
 ```html {.example}

docs/docs/components/page-samples/documentation.md

@@ -2,6 +2,7 @@
 title: Sample Documentation Page
 description: A sample page for a documentation website using Web Awesome's page component.
 layout: blank
+eleventyExcludeFromCollections: true
 ---
 
 <style>
@@ -126,7 +127,7 @@ layout: blank
     </a>
   </nav>
   <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+    <div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
       <div class="wa-stack" style="margin: var(--wa-space-2xl);">
         <h1>Great Horned Owl</h1>
         <wa-divider></wa-divider>
@@ -148,7 +149,7 @@ layout: blank
           <span class="wa-caption-m">Least Concern</span>
         </div>
       </div>
-      <div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
+      <div class="wa-frame" style="wa-border-radius-l max-inline-size: 40ch;">
         <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
       </div>
     </div>

docs/docs/components/page-samples/media-app.md

@@ -2,6 +2,7 @@
 title: Sample Media App Page
 description: A sample page for a media app using Web Awesome's page component.
 layout: blank
+eleventyExcludeFromCollections: true
 ---
 
 <wa-page class="wa-theme-default-dark">
@@ -276,21 +277,21 @@ layout: blank
   <div slot="main-footer" class="wa-grid wa-gap-xl">
     <h2 class="wa-heading-2xl">More You Might Like</h2>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Festival of Lights</span>
       <span class="wa-caption-s">Station</span>
     </div>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Holiday Cheer</span>
       <span class="wa-caption-s">Essential Playlist</span>
     </div>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
@@ -340,7 +341,7 @@ layout: blank
     margin: 0;
   }
   [slot='navigation'] ul a {
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
     padding: var(--wa-space-xs);
   }
   [slot='navigation'] ul a:hover,
@@ -356,7 +357,7 @@ layout: blank
     justify-content: center;
   }
   [slot='navigation'] #recent wa-icon {
-    border-radius: var(--wa-border-radius-xs);
+    border-radius: var(--wa-border-radius-s);
   }
   [slot='main-header'] {
     border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);

docs/docs/components/page.md

@@ -1,8 +1,10 @@
 ---
 title: Page
 description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: component
+tags: [organization, layout]
 isPro: true
+order: 0
+# icon: page
 ---
 
 The page component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation.
@@ -39,6 +41,10 @@ body {
 }
 ```
 
+::info
+If you use [native styles](/docs/native/), this is already taken care of.
+:::
+
 ## Examples
 
 :::warning
@@ -63,7 +69,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   <header slot="header" class="wa-split">
     <div class="wa-cluster">
       <wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
-      <span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
+      <span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
       <a href="#">Our Work</a>
       <a href="#">About Us</a>
       <a href="#">Discover</a>
@@ -83,7 +89,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
         <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
       </wa-breadcrumb>
     </div>
-    <wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
+    <wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
       <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
     </wa-input>
   </nav>
@@ -113,7 +119,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
     </a>
   </nav>
   <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
+    <div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
       <div class="wa-stack" style="margin: var(--wa-space-2xl);">
         <h1>Great Horned Owl</h1>
         <wa-divider></wa-divider>
@@ -135,7 +141,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
           <span class="wa-caption-m">Least Concern</span>
         </div>
       </div>
-      <div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
+      <div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch;">
         <img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
       </div>
     </div>
@@ -160,7 +166,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
       </ul>
     </section>
   </footer>
-  <aside slot="aside">
+  <aside slot="aside" class="wa-desktop-only">
     <h2 class="wa-heading-m">Discover More Birds</h2>
     <wa-card with-image>
       <div slot="image" class="wa-frame">
@@ -228,10 +234,6 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
     --aside-width: 15rem;
   }
   wa-page[view='desktop'] {
-    [data-toggle-nav] {
-      display: none;
-    }
-
     [slot*='navigation'] {
       border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
     }
@@ -239,12 +241,6 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   wa-page[view='mobile'] {
     --menu-width: auto;
     --aside-width: auto;
-
-    [slot='aside'],
-    #brand-name,
-    #search {
-      display: none;
-    }
   }
 
   [slot='banner'] {
@@ -271,9 +267,10 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
   }
   [slot='navigation-footer'] {
     border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-footer'] .wa-flank {
-    --flank-size: 1.25em;
+
+    .wa-flank {
+      --flank-size: 1.25em;
+    }
   }
   [slot='main-header'],
   main,
@@ -309,7 +306,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
       <wa-icon name="record-vinyl"></wa-icon>
       <span class="wa-heading-m">radiogaga</span>
     </div>
-    <wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
+    <wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
       <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
     </wa-input>
     <div class="wa-cluster">
@@ -318,7 +315,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     </div>
   </header>
   <div slot="navigation-header" class="wa-split">
-    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
+    <wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
       <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
     </wa-input>
     <div class="wa-split">
@@ -579,21 +576,21 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
   <div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
     <h2 class="wa-heading-2xl">More You Might Like</h2>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Festival of Lights</span>
       <span class="wa-caption-s">Station</span>
     </div>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Holiday Cheer</span>
       <span class="wa-caption-s">Essential Playlist</span>
     </div>
     <div class="wa-stack wa-gap-xs">
-      <div class="wa-frame wa-border-radius-m">
+      <div class="wa-frame wa-border-radius-l">
         <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
       </div>
       <span class="wa-heading-s">Nursery Rhymes from the Shire</span>
@@ -608,17 +605,10 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
     --wa-tooltip-arrow-size: 0;
     background-color: var(--wa-color-surface-lowered);
   }
-  wa-page[view='desktop'] {
-    :is([data-toggle-nav], #search-nav-drawer) {
-      display: none;
-    }
-  }
+
   wa-page[view='mobile'] {
     --menu-width: auto;
 
-    #search-header {
-      display: none;
-    }
     [slot*='main'], main {
       padding: var(--wa-space-xl);
     }
@@ -657,7 +647,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
       margin: 0;
 
       a {
-        border-radius: var(--wa-border-radius-s);
+        border-radius: var(--wa-border-radius-m);
         padding: var(--wa-space-xs);
 
         &:hover {
@@ -674,7 +664,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
       justify-content: center;
     }
     #recent wa-icon {
-      border-radius: var(--wa-border-radius-xs);
+      border-radius: var(--wa-border-radius-s);
     }
   }
 
@@ -845,6 +835,10 @@ wa-page[view='desktop'] [data-toggle-nav] {
 }
 ```
 
+::info
+If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
+:::
+
 #### Custom Widths
 
 You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
@@ -879,3 +873,16 @@ You can override the default spacing for each slot with your own CSS. In this ex
 }
 ```
 
+## Utility classes
+
+[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
+two utility classes you can use for common responsive design tasks:
+- `.wa-mobile-only` hides an element on the desktop view
+- `.wa-desktop-only` hides an element on the mobile view
+
+
+If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
+
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
+```

docs/docs/components/popup.md

@@ -1,7 +1,8 @@
 ---
 title: Popup
 description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
-tags: component
+tags: [helpers, primitives]
+icon: popup
 ---
 
 This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.
@@ -77,7 +78,7 @@ Popup is a low-level utility built specifically for positioning elements. Do not
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
   .popup-overview-options {
@@ -135,7 +136,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 
@@ -172,7 +173,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 ```
@@ -219,7 +220,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
   .popup-placement wa-select {
@@ -247,7 +248,7 @@ Use the `distance` attribute to change the distance between the popup and its an
     <div class="box"></div>
   </wa-popup>
 
-  <wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
 </div>
 
 <style>
@@ -263,10 +264,10 @@ Use the `distance` attribute to change the distance between the popup and its an
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-distance wa-range {
+  .popup-distance wa-slider {
     max-width: 260px;
   }
 </style>
@@ -274,7 +275,7 @@ Use the `distance` attribute to change the distance between the popup and its an
 <script>
   const container = document.querySelector('.popup-distance');
   const popup = container.querySelector('wa-popup');
-  const distance = container.querySelector('wa-range');
+  const distance = container.querySelector('wa-slider');
 
   distance.addEventListener('wa-input', () => (popup.distance = distance.value));
 </script>
@@ -291,7 +292,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     <div class="box"></div>
   </wa-popup>
 
-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
 
 <style>
@@ -307,10 +308,10 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-skidding wa-range {
+  .popup-skidding wa-slider {
     max-width: 260px;
   }
 </style>
@@ -318,7 +319,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 <script>
   const container = document.querySelector('.popup-skidding');
   const popup = container.querySelector('wa-popup');
-  const skidding = container.querySelector('wa-range');
+  const skidding = container.querySelector('wa-slider');
 
   skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
 </script>
@@ -382,7 +383,7 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
       width: 100px;
       height: 50px;
       background: var(--wa-color-brand-fill-loud);
-      border-radius: var(--wa-border-radius-s);
+      border-radius: var(--wa-border-radius-m);
     }
 
     .popup-arrow-options {
@@ -449,7 +450,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
     min-width: 50px;
     min-height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
   .popup-sync wa-select {
@@ -509,7 +510,7 @@ Toggle the switch and scroll the container to see the difference.
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
   .popup-strategy wa-switch {
@@ -565,7 +566,7 @@ Scroll the container to see how the popup flips to prevent clipping.
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 
@@ -618,7 +619,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 ```
@@ -660,7 +661,7 @@ Toggle the switch to see the difference.
     width: 300px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 
@@ -712,7 +713,7 @@ Scroll the container to see the popup resize as its available space changes.
 
   .popup-auto-size .box {
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
 
     /* This sets the preferred size of the popup's content */
     width: 100px;
@@ -746,8 +747,8 @@ When a gap exists between the anchor and the popup element, this option will add
   </wa-popup>
   <br>
   <wa-switch checked>Hover Bridge</wa-switch><br>
-  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
-  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+  <wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
+  <wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
 </div>
 <style>
   .popup-hover-bridge span[slot='anchor'] {
@@ -762,10 +763,10 @@ When a gap exists between the anchor and the popup element, this option will add
     width: 100px;
     height: 50px;
     background: var(--wa-color-brand-fill-loud);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
   }
 
-  .popup-hover-bridge wa-range {
+  .popup-hover-bridge wa-slider {
     max-width: 260px;
     margin-top: .5rem;
   }
@@ -779,8 +780,8 @@ When a gap exists between the anchor and the popup element, this option will add
   const container = document.querySelector('.popup-hover-bridge');
   const popup = container.querySelector('wa-popup');
   const hoverBridge = container.querySelector('wa-switch');
-  const distance = container.querySelector('wa-range[label="Distance"]');
-  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  const distance = container.querySelector('wa-slider[label="Distance"]');
+  const skidding = container.querySelector('wa-slider[label="Skidding"]');
   distance.addEventListener('wa-input', () => (popup.distance = distance.value));
   skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
   hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));

docs/docs/components/progress-bar.md

@@ -1,11 +1,15 @@
 ---
 title: Progress Bar
 description: Progress bars are used to show the status of an ongoing operation.
-tags: component
+tags: [feedback, apps]
+native: progress
+icon: progress-bar
 ---
 
 ```html {.example}
-<wa-progress-bar value="50"></wa-progress-bar>
+<wa-progress-bar value="40">
+  <wa-icon slot="prefix" name="tasks"></wa-icon>
+</wa-progress-bar>
 ```
 
 ## Examples
@@ -13,17 +17,16 @@ tags: component
 ### Labels
 
 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
-
 ```html {.example}
 <wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
 ```
 
 ### Custom Height
 
-Use the `--height` custom property to set the progress bar's height.
+Use the `height` CSS property to set the progress bar's height.
 
 ```html {.example}
-<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
+<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
 ```
 
 ### Showing Values
@@ -31,17 +34,19 @@ Use the `--height` custom property to set the progress bar's height.
 Use the default slot to show a value.
 
 ```html {.example}
-<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>
+<div class="wa-stack">
+  <wa-progress-bar value="50" id="progress-bar-demo">50%</wa-progress-bar>
 
-<br />
-
-<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
-<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
+  <div>
+    <wa-icon-button pill name="minus" label="Decrease"></wa-icon-button>
+    <wa-icon-button pill name="plus" label="Increase"></wa-icon-button>
+  </div>
+</div>
 
 <script>
-  const progressBar = document.querySelector('.progress-bar-values');
-  const subtractButton = progressBar.nextElementSibling.nextElementSibling;
-  const addButton = subtractButton.nextElementSibling;
+  const progressBar = document.querySelector('#progress-bar-demo');
+  const subtractButton = document.querySelector('wa-icon-button[name="minus"]');
+  const addButton = document.querySelector('wa-icon-button[name="plus"]');
 
   addButton.addEventListener('click', () => {
     const value = Math.min(100, progressBar.value + 10);

docs/docs/components/progress-ring.md

@@ -1,11 +1,14 @@
 ---
 title: Progress Ring
 description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
-tags: component
+tags: [feedback, apps]
+icon: progress-ring
 ---
 
 ```html {.example}
-<wa-progress-ring value="25"></wa-progress-ring>
+<wa-progress-ring value="25">
+  <wa-icon slot="prefix" name="circle-notch"></wa-icon>
+</wa-progress-ring>
 ```
 
 ## Examples
@@ -15,7 +18,9 @@ tags: component
 Use the `--size` custom property to set the diameter of the progress ring.
 
 ```html {.example}
-<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
+<wa-progress-ring value="50" style="--size: 200px;">
+  <wa-icon slot="prefix" name="expand"></wa-icon>
+</wa-progress-ring>
 ```
 
 ### Track and Indicator Width
@@ -23,7 +28,9 @@ Use the `--size` custom property to set the diameter of the progress ring.
 Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
 
 ```html {.example}
-<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
+<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
+  <wa-icon slot="prefix" name="arrows-alt"></wa-icon>
+</wa-progress-ring>
 ```
 
 ### Colors
@@ -37,19 +44,13 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
     --track-color: pink;
     --indicator-color: deeppink;
   "
-></wa-progress-ring>
+>
+  <wa-icon slot="prefix" name="palette"></wa-icon>
+</wa-progress-ring>
 ```
 
 ### Labels
 
-Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
-
-```html {.example}
-<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
-```
-
-### Showing Values
-
 Use the default slot to show a label inside the progress ring.
 
 ```html {.example}

docs/docs/components/qr-code.md

@@ -1,7 +1,8 @@
 ---
 title: QR Code
 description: Generates a QR code and renders it using the Canvas API.
-tags: component
+tags: [actions, apps, niche]
+icon: qr-code
 ---
 
 QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc.
@@ -11,7 +12,9 @@ QR codes are useful for providing small pieces of information to users who can q
   <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
   <br />
 
-  <wa-input maxlength="255" clearable label="Value"></wa-input>
+  <wa-input maxlength="255" clearable label="Value">
+    <wa-icon slot="prefix" name="link"></wa-icon>
+  </wa-input>
 </div>
 
 <script>
@@ -43,7 +46,9 @@ QR codes are useful for providing small pieces of information to users who can q
 Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
+  <wa-icon slot="prefix" name="palette"></wa-icon>
+</wa-qr-code>
 ```
 
 ### Size
@@ -51,7 +56,9 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
 Use the `size` attribute to change the size of the QR code.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" size="64">
+  <wa-icon slot="prefix" name="expand"></wa-icon>
+</wa-qr-code>
 ```
 
 ### Radius
@@ -59,7 +66,9 @@ Use the `size` attribute to change the size of the QR code.
 Create a rounded effect with the `radius` attribute.
 
 ```html {.example}
-<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
+<wa-qr-code value="https://shoelace.style/" radius="0.5">
+  <wa-icon slot="prefix" name="circle"></wa-icon>
+</wa-qr-code>
 ```
 
 ### Error Correction
@@ -68,10 +77,18 @@ QR codes can be rendered with various levels of [error correction](https://www.q
 
 ```html {.example}
 <div class="qr-error-correction">
-  <wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
-  <wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="L">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="M">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="Q">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
+  <wa-qr-code value="https://shoelace.style/" error-correction="H">
+    <wa-icon slot="prefix" name="shield"></wa-icon>
+  </wa-qr-code>
 </div>
 
 <style>

docs/docs/components/radio-button.md

@@ -1,8 +1,9 @@
 ---
 title: Radio Button
 description: Radios buttons allow the user to select a single option from a group using a button-like control.
-tags: component
+tags: forms
 parent: radio-group
+icon: radio-group
 ---
 
 Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.

docs/docs/components/radio-group.md

@@ -1,7 +1,8 @@
 ---
 title: Radio Group
 description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control.
-tags: component
+tags: [inputs, forms]
+icon: radio-group
 ---
 
 ```html {.example}

docs/docs/components/radio.md

@@ -3,6 +3,8 @@ title: Radio
 description: Radios allow the user to select a single option from a group.
 tags: component
 parent: radio-group
+native: radio
+icon: radio-group
 ---
 
 Radios are designed to be used with [radio groups](/docs/components/radio-group).
@@ -45,7 +47,7 @@ Use the `disabled` attribute to disable a radio.
 </wa-radio-group>
 ```
 
-## Sizes
+### Sizes
 
 Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
 

docs/docs/components/rating.md

@@ -1,7 +1,8 @@
 ---
 title: Rating
 description: Ratings give users a way to quickly view and provide feedback.
-tags: component
+tags: [inputs, interactive]
+icon: rating
 ---
 
 ```html {.example}
@@ -90,7 +91,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
     position: relative;
     top: -4px;
     left: 8px;
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
     background: var(--wa-color-neutral-fill-loud);
     color: var(--wa-color-neutral-on-loud);
     text-align: center;

docs/docs/components/relative-time.md

@@ -1,7 +1,8 @@
 ---
 title: Relative Time
 description: Outputs a localized time phrase relative to the current date and time.
-tags: component
+tags: [helpers, inline, content]
+icon: relative-time
 ---
 
 Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.

docs/docs/components/resize-observer.md

@@ -1,7 +1,8 @@
 ---
 title: Resize Observer
 description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
-tags: component
+tags: [helpers, primitives]
+icon: resize-observer
 ---
 
 The resize observer will report changes to the dimensions of the elements it wraps through the `wa-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions.

docs/docs/components/select.md

@@ -1,8 +1,9 @@
 ---
 title: Select
 description: Selects allow you to choose items from a menu of predefined options.
-tags: component
-natives: input
+tags: [inputs, forms]
+native: select
+icon: select
 ---
 
 ```html {.example}
@@ -414,3 +415,10 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
   container.addEventListener("submit", handleLazySubmit)
 </script>
 ```
+
+<script type="module">
+  //
+  // TODO - remove once we switch to the Popover API
+  //
+  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
+</script>

docs/docs/components/skeleton.md

@@ -1,7 +1,8 @@
 ---
 title: Skeleton
 description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
-tags: component
+tags: [feedback, apps, content]
+icon: skeleton
 ---
 
 These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations.
@@ -139,7 +140,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
   }
 
   .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-border-radius-s);
+    --border-radius: var(--wa-border-radius-m);
   }
 </style>
 ```
@@ -165,7 +166,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-border-radius-s);
+    --border-radius: var(--wa-border-radius-m);
   }
 
   .skeleton-shapes .circle::part(indicator) {

docs/docs/components/slider.md

@@ -1,11 +1,13 @@
 ---
-title: Range
+title: Slider
 description: Ranges allow the user to select a single value within a given range using a slider.
-tags: component
+tags: [inputs, forms]
+native: slider
+icon: slider
 ---
 
 ```html {.example}
-<wa-range></wa-range>
+<wa-slider></wa-slider>
 ```
 
 :::info
@@ -19,7 +21,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
 Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
 
 ```html {.example}
-<wa-range label="Volume" min="0" max="100"></wa-range>
+<wa-slider label="Volume" min="0" max="100"></wa-slider>
 ```
 
 ### Hint
@@ -27,7 +29,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
 Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 
 ```html {.example}
-<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
+<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
 ```
 
 ### Min, Max, and Step
@@ -35,7 +37,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
 
 ```html {.example}
-<wa-range min="0" max="10" step="1"></wa-range>
+<wa-slider min="0" max="10" step="1"></wa-slider>
 ```
 
 ### Disabled
@@ -43,7 +45,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
 Use the `disabled` attribute to disable a slider.
 
 ```html {.example}
-<wa-range disabled></wa-range>
+<wa-slider disabled></wa-slider>
 ```
 
 ### Tooltip Placement
@@ -51,7 +53,7 @@ Use the `disabled` attribute to disable a slider.
 By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
 
 ```html {.example}
-<wa-range tooltip="bottom"></wa-range>
+<wa-slider tooltip="bottom"></wa-slider>
 ```
 
 ### Disable the Tooltip
@@ -59,7 +61,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
 To disable the tooltip, set `tooltip` to `none`.
 
 ```html {.example}
-<wa-range tooltip="none"></wa-range>
+<wa-slider tooltip="none"></wa-slider>
 ```
 
 ### Custom Track Colors
@@ -67,12 +69,12 @@ To disable the tooltip, set `tooltip` to `none`.
 You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
 
 ```html {.example}
-<wa-range
+<wa-slider
   style="
   --track-color-active: var(--wa-color-brand-fill-loud);
   --track-color-inactive: var(--wa-color-brand-fill-normal);
 "
-></wa-range>
+></wa-slider>
 ```
 
 ### Custom Track Offset
@@ -80,7 +82,7 @@ You can customize the active and inactive portions of the track using the `--tra
 You can customize the initial offset of the active track using the `--track-active-offset` custom property.
 
 ```html {.example}
-<wa-range
+<wa-slider
   min="-100"
   max="100"
   style="
@@ -88,7 +90,7 @@ You can customize the initial offset of the active track using the `--track-acti
   --track-color-inactive: var(--wa-color-brand-fill-normal);
   --track-active-offset: 50%;
 "
-></wa-range>
+></wa-slider>
 ```
 
 ### Custom Tooltip Formatter
@@ -96,10 +98,21 @@ You can customize the initial offset of the active track using the `--track-acti
 You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
 
 ```html {.example}
-<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
+<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>
 
 <script>
   const range = document.querySelector('.range-with-custom-formatter');
   range.tooltipFormatter = value => `Total - ${value}%`;
 </script>
 ```
+
+### Right-to-Left languages
+
+The component adapts to right-to-left (RTL) languages as you would expect.
+
+```html {.example}
+<wa-slider dir="rtl"
+  label="مقدار"
+  hint="التحكم في مستوى صوت الأغنية الحالية."
+  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
+```

docs/docs/components/spinner.md

@@ -1,7 +1,9 @@
 ---
 title: Spinner
 description: Spinners are used to show the progress of an indeterminate operation.
-tags: component
+tags: [feedback, apps]
+keywords: loader
+icon: spinner
 ---
 
 ```html {.example}

docs/docs/components/split-panel.md

@@ -1,7 +1,8 @@
 ---
 title: Split Panel
 description: Split panels display two adjacent panels, allowing the user to reposition them.
-tags: component
+tags: [organization, layout, apps]
+icon: split-panel
 ---
 
 ```html {.example}

docs/docs/components/switch.md

@@ -1,7 +1,9 @@
 ---
 title: Switch
 description: Switches allow the user to toggle an option on or off.
-tags: component
+tags: [inputs, forms]
+icon: switch
+keywords: toggle
 ---
 
 ```html {.example}

docs/docs/components/tab-group.md

@@ -1,7 +1,8 @@
 ---
 title: Tab Group
 description: Tab groups organize content into a container that shows one section at a time.
-tags: component
+tags: [navigation, disclosure]
+icon: tab-group
 ---
 
 Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each panel should have a name that's unique within the tab group, and tabs should have a `panel` attribute that points to the respective panel's name.
@@ -100,7 +101,7 @@ You can make a tab closable by adding a close button next to the tab and inside
 <wa-tab-group class="tabs-closable">
   <wa-tab panel="general">General</wa-tab>
   <wa-tab panel="closable">Closable</wa-tab>
-  <wa-icon-button tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
+  <wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
   <wa-tab panel="closable-2">Advanced</wa-tab>
 
   <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>

docs/docs/components/tab-panel.md

@@ -3,6 +3,7 @@ title: Tab Panel
 description: Tab panels are used inside tab groups to display tabbed content.
 tags: component
 parent: tab-group
+icon: tab-panel
 ---
 
 ```html {.example}

docs/docs/components/tab.md

@@ -3,6 +3,7 @@ title: Tab
 description: Tabs are used inside tab groups to represent and activate tab panels.
 tags: component
 parent: tab-group
+icon: tab
 ---
 
 :::info

docs/docs/components/tag.md

@@ -1,7 +1,8 @@
 ---
 title: Tag
 description: Tags are used as labels to organize things or to indicate a selection.
-tags: component
+tags: [feedback, content, apps]
+icon: tag
 ---
 
 ```html {.example}
@@ -14,9 +15,50 @@ tags: component
 
 ## Examples
 
+### Appearance
+
+Use the `size` attribute to change a tag's visual appearance.
+The default appearance is `outlined filled`.
+
+```html {.example}
+<div class="wa-stack">
+<p>
+  <wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
+</p>
+<p>
+  <wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="success" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="success" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
+<p>
+  <wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
+  <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
+  <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
+  <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
+  <wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
+</div>
+```
+
 ### Sizes
 
-Use the `size` attribute to change a tab's size.
+Use the `size` attribute to change a tag's size.
 
 ```html {.example}
 <wa-tag size="small">Small</wa-tag>

docs/docs/components/textarea.md

@@ -1,8 +1,9 @@
 ---
 title: Textarea
 description: Textareas collect data from the user and allow multiple lines of text.
-tags: component
-natives: input
+tags: [inputs, forms]
+icon: textarea
+native: input
 ---
 
 ```html {.example}
@@ -63,6 +64,14 @@ Use the `disabled` attribute to disable a textarea.
 <wa-textarea placeholder="Textarea" disabled></wa-textarea>
 ```
 
+### Value
+
+Use the `value` attribute to set an initial value.
+
+```html {.example}
+<wa-textarea value="Write something awesome!"></wa-textarea>
+```
+
 ### Sizes
 
 Use the `size` attribute to change a textarea's size.
@@ -90,3 +99,19 @@ Textareas will automatically resize to expand to fit their content when `resize`
 ```html {.example}
 <wa-textarea resize="auto"></wa-textarea>
 ```
+
+### Resize horizontal
+
+Textareas can be made to resize horizontally when `resize` is set to `"horizontal"`
+
+```html {.example}
+<wa-textarea resize="horizontal"></wa-textarea>
+```
+
+### Resize both
+
+Textareas can be made to resize both vertically and horizontally when `resize` is set to `"both"`
+
+```html {.example}
+<wa-textarea resize="both"></wa-textarea>
+```

docs/docs/components/tooltip.md

@@ -1,7 +1,8 @@
 ---
 title: Tooltip
 description: Tooltips display additional information based on a specific action.
-tags: component
+tags: [feedback, apps, disclosure]
+icon: tooltip
 ---
 
 

docs/docs/components/tree-item.md

@@ -1,7 +1,8 @@
 ---
 title: Tree Item
 description: A tree item serves as a hierarchical node that lives inside a tree.
-tags: component
+tags: [navigation, disclosure, apps]
+icon: tree
 ---
 
 ```html {.example}

docs/docs/components/tree.md

@@ -1,7 +1,8 @@
 ---
 title: Tree
 description: Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.
-tags: component
+tags: [navigation, disclosure, apps]
+icon: tree
 ---
 
 ```html {.example}

docs/docs/components/visually-hidden.md

@@ -1,45 +0,0 @@
----
-title: Visually Hidden
-description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
-tags: component
----
-
-According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
-
-Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
-
-```html {.example}
-<div style="min-height: 1.875rem;">
-  <wa-visually-hidden>
-    <a href="#">Skip to main content</a>
-  </wa-visually-hidden>
-</div>
-```
-
-## Examples
-
-### Links That Open in New Windows
-
-In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
-
-```html {.example}
-<a href="https://example.com/" target="_blank">
-  Visit External Page
-  <wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
-  <wa-visually-hidden>opens in a new window</wa-visually-hidden>
-</a>
-```
-
-### Content Conveyed By Context
-
-Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
-
-```html {.example}
-<wa-card style="width: 100%; max-width: 360px;">
-  <header>
-    <wa-visually-hidden>Personal Info</wa-visually-hidden>
-  </header>
-  <wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
-  <wa-input label="Email" type="email"></wa-input>
-</wa-card>
-```

docs/docs/docs.11tydata.js

@@ -0,0 +1,10 @@
+export default {
+  eleventyComputed: {
+    children(data) {
+      let mainTag = data.tags?.[0];
+      let collection = data.collections[mainTag] ?? [];
+
+      return collection.filter(item => item.data.parent === data.page.fileSlug);
+    },
+  },
+};

docs/docs/experimental/form-validation.md

@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
       <wa-option>Well, maybe two is OK</wa-option>
     </wa-select>
     <wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
     <wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
     <wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
     <wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
       <wa-option>Well, maybe two is OK</wa-option>
     </wa-select>
     <wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
-    <wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
+    <wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
     <wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
     <wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
     <wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>

docs/docs/experimental/sandbox.md

@@ -132,7 +132,7 @@ layout: page
 <br />
 <wa-switch checked>Switch on</wa-switch>
 <br /><br />
-<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
+<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
 <br /><br />
 <wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
 <br />
@@ -167,7 +167,6 @@ layout: page
     width: 4rem;
   }
   </style>
-<div class="shadow" style="box-shadow: var(--wa-shadow-xs);"></div>
 <div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
 <div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
 <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
@@ -240,7 +239,7 @@ layout: page
     <wa-badge>OCBS</wa-badge>
     <wa-avatar></wa-avatar>
     <wa-rating></wa-rating>
-    <wa-range></wa-range>
+    <wa-slider></wa-slider>
     <wa-icon-button name="gear" label="Settings"></wa-icon-button>
     <wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
     <wa-spinner></wa-spinner>

docs/docs/experimental/themer.md

@@ -120,10 +120,9 @@ hasOutline: false
     --wa-panel-border-width: var(--wa-border-width-s);
 
     --wa-border-radius-scale: 0.375;
-    --wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 1rem * 0.75);
-    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem * 1);
-    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem * 2);
-    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 1rem * 3);
+    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem * 0.75);
+    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem * 1);
+    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 1rem * 2);
 
     --wa-shadow-blur-scale: 0.125;
     --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
@@ -154,7 +153,7 @@ hasOutline: false
 
     --wa-form-control-background-color: var(--wa-color-surface-default);
 
-    --wa-form-control-border-radius: var(--wa-border-radius-s);
+    --wa-form-control-border-radius: var(--wa-border-radius-m);
 
     --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
     --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
@@ -183,7 +182,7 @@ hasOutline: false
     --wa-form-control-required-content-color: inherit;
     --wa-form-control-required-content-offset: -0.1em;
 
-    --wa-panel-border-radius: var(--wa-border-radius-m);
+    --wa-panel-border-radius: var(--wa-border-radius-l);
 
     font-family: var(--wa-font-family-code);
     font-size: 1rem;
@@ -288,7 +287,7 @@ hasOutline: false
 
   #knobs wa-radio-group[name="color"] wa-radio {
     border: 0.0625em solid var(--wa-color-neutral-border-quiet);
-    border-radius: var(--wa-border-radius-m);
+    border-radius: var(--wa-border-radius-l);
     box-shadow: inset 0 0 0 0 transparent;
     padding: 1em;
     transition: box-shadow var(--wa-transition-normal) var(--wa-transition-easing);
@@ -379,12 +378,8 @@ hasOutline: false
     background-color: var(--wa-color-neutral-fill-quiet);
   }
 
-  /**
-  <wa-visually-hidden>, but without the :not(:focus-within),
-  the reason is that it shows the default browser file uploader.
-*/
-  .hidden-label::part(form-control-label),
-  .file-uploader input {
+  /** Visually hidden */
+  .hidden-label::part(form-control-label) {
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
@@ -419,7 +414,7 @@ hasOutline: false
   }
 
   wa-radio-group[name="project-logo-selector"] wa-radio-button:last-of-type::part(button) {
-    border-radius: 0 var(--wa-border-radius-s) var(--wa-border-radius-s) 0;
+    border-radius: 0 var(--wa-border-radius-m) var(--wa-border-radius-m) 0;
   }
 
   wa-radio-group[name="project-logo-selector"] wa-tooltip {
@@ -447,7 +442,7 @@ hasOutline: false
 
   .icon-search {
     border: solid 1px var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-s);
+    border-radius: var(--wa-border-radius-m);
     padding: var(--wa-space-m);
   }
 
@@ -522,7 +517,7 @@ hasOutline: false
     <wa-icon name="minus" library="fa-classic-regular" slot="collapse-icon"></wa-icon>
     <wa-input name="project-name" value="" placeholder="Project name" label="What are you working on?"></wa-input>
     <div>
-      <label class="file-uploader" style="display: block;" aria-describedby="file-uploader-description">
+      <label class="file-uploader wa-visually-hidden-force" style="display: block;" aria-describedby="file-uploader-description">
         <input name="project-logo" type="file" accept="image/*">
         Add logo
       </label>
@@ -537,7 +532,7 @@ hasOutline: false
           <wa-button value="[choose]" appearance="plain" id="icon-chooser-trigger" class="logo-chooser">
             <wa-tooltip for="icon-chooser-trigger" distance="-3" hoist>Browse Icons</wa-tooltip>
             <wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
-            <wa-visually-hidden>Browse icons</wa-visually-hidden>
+            <span class="wa-visually-hidden">Browse icons</span>
           </wa-button>
           <small slot="hint" style="display: inline-block; line-height: var(--wa-line-height-condensed);">It's dangerous to go alone. Take these!</small>
       </wa-radio-group>
@@ -666,10 +661,10 @@ hasOutline: false
       <wa-option value="dotted">Dotted</wa-option>
       <wa-option value="double">Double</wa-option>
     </wa-select>
-    <wa-range name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
-    <wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
-    <wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
-    <wa-range name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-range>
+    <wa-slider name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-slider>
+    <wa-slider name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-slider>
+    <wa-slider name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-slider>
+    <wa-slider name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-slider>
   </wa-details>
 </form>
 
@@ -1708,7 +1703,7 @@ hasOutline: false
     overflow: hidden;
 
     &:not(wa-card *) {
-      border-radius: calc(var(--wa-border-radius-m) - var(--wa-panel-border-width));
+      border-radius: calc(var(--wa-border-radius-l) - var(--wa-panel-border-width));
     }
 
     & > img {
@@ -2270,17 +2265,17 @@ hasOutline: false
       <table style="margin-bottom: 0;">
         <thead>
           <tr>
-            <th><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Check all</wa-visually-hidden></wa-checkbox></th>
+            <th><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Check all</span></wa-checkbox></th>
             <th>Customer</th>
             <th>Conversation</th>
             <th>Assigned To</th>
             <th style="text-align: center;">Status</th>
-            <th><wa-visually-hidden>Actions</wa-visually-hidden></th>
+            <th><span class="wa-visually-hidden">Actions</span></th>
           </tr>
         </thead>
         <tbody>
           <tr>
-            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
+            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
             <td>Keanu Reeves</td>
             <td class="desc"><span style="font-weight: bold">Am I dead?</span><br><span class="excerpt">Okey dokey... free my mind. Right, no problem, free my mind, free my mind, no problem, right...</span></td>
             <td><wa-avatar  image="/assets/images/themer/avatar-chad.jpg"  label="Chad" style="margin-right: var(--wa-space-xs)"></wa-avatar>  Chad Stahelski</td>
@@ -2310,7 +2305,7 @@ hasOutline: false
             </td>
           </tr>
           <tr>
-            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
+            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
             <td>Lawrence Fishburne</td>
             <td class="desc"><span style="font-weight: bold">We have a rule</span><br><span class="excerpt">We never free a mind once it's reached a certain age. It's dangerous, the mind has trouble letting go.</span></td>
             <td><wa-avatar image="/assets/images/themer/avatar-char.jpg"  label="Char" style="margin-right: var(--wa-space-xs)"></wa-avatar>  Char McCoy</td>
@@ -2340,7 +2335,7 @@ hasOutline: false
             </td>
           </tr>
           <tr>
-            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)" checked><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
+            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)" checked><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
             <td>Carrie-Ann Moss</td>
             <td class="desc"><span style="font-weight: bold">Was it the same cat?</span><br><span class="excerpt">A déjà vu is usually a glitch in the Matrix. It happens when they change something.</span></td>
             <td><wa-avatar initials="DE" label="Avatar with initials: DE" style="margin-right: var(--wa-space-xs)"></wa-avatar>  Debbie Evans</td>
@@ -2370,7 +2365,7 @@ hasOutline: false
             </td>
           </tr>
           <tr>
-            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
+            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
             <td>Joe Pantoliano</td>
             <td class="desc"><span style="font-weight: bold">Ignorance is bliss</span><br><span class="excerpt">Why oh why didn't I take the blue pill?</span></td>
             <td></td>
@@ -2400,7 +2395,7 @@ hasOutline: false
             </td>
           </tr>
           <tr>
-            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><wa-visually-hidden>Completed</wa-visually-hidden></wa-checkbox></td>
+            <td><wa-checkbox size="large" style="padding-left: var(--wa-space-s)"><span class="wa-visually-hidden">Completed</span></wa-checkbox></td>
             <td>Hugo Weaving</td>
             <td class="desc"><span style="font-weight: bold">I'd like to share a revelation</span><br><span class="excerpt">I need the codes, I have to get inside Zion and you have to tell me how.</span></td>
             <td><wa-avatar  image="/assets/images/themer/avatar-dara.jpg"  label="Dara" style="margin-right: var(--wa-space-xs)"></wa-avatar> Dara Prescott</td>

docs/docs/installation.md

@@ -8,8 +8,6 @@ Welcome to the Web Awesome alpha release for early backers! 👋
 
 ==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
 
-==To be clear, this release _only_ includes a preview the components in Web Awesome Free!==
-
 Thank you so much for backing us!
 
 - [Report a bug](https://github.com/shoelace-style/webawesome-alpha/issues)