Automate listing in components index page

2026-01-12 04:09:12 +00:00 · 2024-12-23 02:15:48 -05:00
parent 51a416718d
commit 3b10933151
64 changed files with 215 additions and 509 deletions
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -1,13 +1,13 @@
 {# Cards for pages listed by category #}

+<section id="grid" class="index-grid">
 {% for category, pages in allPages | groupByTags(categories) -%}
-<section id="{{ category }}" class="index-grid">
-  <h2 class="index-category">{{ category | capitalize }}</h2>
+  <h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
    {%- for page in pages -%}
-      {%- if not page.data.unlisted -%}
+      {%- if not page.data.unlisted and not page.data.parent -%}
        {% include "page-card.njk" %}
      {%- endif -%}
    {%- endfor -%}
-</section>
 {%- endfor -%}
+</section>

--- a/docs/_includes/page-card.njk
+++ b/docs/_includes/page-card.njk
@@ -1,4 +1,4 @@
-<a href="{{ page.url }}">
+<a href="{{ page.url }}" data-keywords="{{ page.data.keywords }}">
 	<wa-card with-header>
 		<div slot="header">
 		{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
--- a/docs/_utils/filters.js
+++ b/docs/_utils/filters.js
@@ -134,7 +134,24 @@ export function sort(arr, keys = ['data.order', 'data.title']) {
  });
 }

+/**
+ * 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 = [];

@@ -162,3 +179,22 @@ export function groupByTags(collection, tags) {

  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);
+}
--- a/docs/docs/components/animated-image.md
+++ b/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}
--- a/docs/docs/components/animation.md
+++ b/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>
-```
--- a/docs/docs/components/avatar.md
+++ b/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.
--- a/docs/docs/components/badge.md
+++ b/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>
-```
--- a/docs/docs/components/breadcrumb.md
+++ b/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>
-```
--- a/docs/docs/components/button-group.md
+++ b/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}
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -1,8 +1,9 @@
 ---
 title: Button
 description: Buttons represent actions that are available to the user.
-tags: component
+tags: [actions, forms]
 native: button
+icon: button
 ---

 ```html {.example}
--- a/docs/docs/components/callout.md
+++ b/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}
--- a/docs/docs/components/card.md
+++ b/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}
--- a/docs/docs/components/carousel-item.md
+++ b/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}
--- a/docs/docs/components/carousel.md
+++ b/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}
--- a/docs/docs/components/checkbox.md
+++ b/docs/docs/components/checkbox.md
@@ -1,7 +1,7 @@
 ---
 title: Checkbox
 description: Checkboxes allow the user to toggle an option on or off.
-tags: component
+tags: [inputs, forms]
 native: checkbox
 ---

@@ -93,4 +93,4 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
    });
  });
 </script>
-```
+```
--- a/docs/docs/components/color-picker.md
+++ b/docs/docs/components/color-picker.md
@@ -1,8 +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}
--- a/docs/docs/components/copy-button.md
+++ b/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}
--- a/docs/docs/components/details.md
+++ b/docs/docs/components/details.md
@@ -1,7 +1,8 @@
 ---
 title: Details
 description: Details show a brief summary and expand to show additional content.
-tags: component
+tags: [organization, apps, content, disclosure]
+icon: details
 native: details
 ---

--- a/docs/docs/components/dialog.md
+++ b/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
+tags: [organization, apps, disclosure]
+icon: dialog
 native: dialog
+keywords: modal
 ---

 <!-- cspell:dictionaries lorem-ipsum -->
--- a/docs/docs/components/divider.md
+++ b/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}
--- a/docs/docs/components/drawer.md
+++ b/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 -->
--- a/docs/docs/components/dropdown.md
+++ b/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.
--- a/docs/docs/components/format-bytes.md
+++ b/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}
--- a/docs/docs/components/format-date.md
+++ b/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.
--- a/docs/docs/components/format-number.md
+++ b/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.
--- a/docs/docs/components/icon-button.md
+++ b/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).
--- a/docs/docs/components/icon.md
+++ b/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).
--- a/docs/docs/components/image-comparer.md
+++ b/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.)
--- a/docs/docs/components/include.md
+++ b/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.
--- a/docs/docs/components/index.md
+++ b/docs/docs/components/index.md
@@ -1,414 +1,24 @@
 ---
 title: Components
-description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
+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: page-outline
+categories:
+  - actions
+  - feedback: 'Feedback & Status'
+  - imagery
+  - inputs
+  - navigation
+  - organization
+  - helpers: 'Utilities'
+override:tags: []
 ---

-<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>
-</div>
+{% set allPages = collections.components %}
+{% include "grouped-pages.njk" %}

 <div id="component-filter-empty" hidden>
  No results
@@ -417,7 +27,7 @@ layout: page-outline
 <script type="module">
  const container = document.getElementById('component-filter');
  const empty = document.getElementById('component-filter-empty');
-  const grid = document.getElementById('component-grid');
+  const grid = document.getElementById('content');
  const input = container.querySelector('wa-input');

  function updateResults() {
@@ -429,15 +39,16 @@ layout: page-outline
    });

    // Show matching components
-    grid.querySelectorAll('a').forEach(link => {
+    grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
+      console.log(link);
      const content = link.textContent.toLowerCase();
      const keywords = link.getAttribute('data-keywords') || '';
      const isMatch = filter === '' || (content + keywords).includes(filter);
-      link.classList.toggle('hidden', !isMatch);
+      link.hidden = !isMatch;
    });

    // Show empty state when there's a search filter and no results
-    if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
+    if (filter !== '' && grid.querySelector('a:not([hidden])') === null) {
      empty.hidden = false;
    } else {
      empty.hidden = true;
@@ -454,22 +65,8 @@ layout: page-outline
    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 {
+    margin-block-end: var(--wa-space-xl);
  }

  #component-filter-empty {
--- a/docs/docs/components/input.md
+++ b/docs/docs/components/input.md
@@ -1,8 +1,9 @@
 ---
 title: Input
 description: Inputs collect data from the user.
-tags: component
+tags: [inputs, forms]
 native: input
+keywords: textfield text field
 ---

 ```html {.example}
@@ -164,4 +165,4 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
    }
  }
 </style>
-```
+```
--- a/docs/docs/components/menu-item.md
+++ b/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}
--- a/docs/docs/components/menu-label.md
+++ b/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}
--- a/docs/docs/components/menu.md
+++ b/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.
--- a/docs/docs/components/mutation-observer.md
+++ b/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.
--- a/docs/docs/components/option.md
+++ b/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}
--- a/docs/docs/components/page-samples/documentation.md
+++ b/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>
--- a/docs/docs/components/page-samples/media-app.md
+++ b/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">
--- a/docs/docs/components/page.md
+++ b/docs/docs/components/page.md
@@ -1,9 +1,10 @@
 ---
 title: Page
 description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: ["component", "layout"]
+tags: [organization, layout]
 isPro: true
 order: 1
+# 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.
--- a/docs/docs/components/popup.md
+++ b/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.
--- a/docs/docs/components/progress-bar.md
+++ b/docs/docs/components/progress-bar.md
@@ -1,12 +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="40"></wa-progress-bar>
+<wa-progress-bar value="40">
+  <wa-icon slot="prefix" name="tasks"></wa-icon>
+</wa-progress-bar>
 ```

 ## Examples
@@ -14,8 +17,6 @@ native: progress
 ### Labels

 Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
-This will not be visible to sighted users.
-
 ```html {.example}
 <wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
 ```
--- a/docs/docs/components/progress-ring.md
+++ b/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}
--- a/docs/docs/components/qr-code.md
+++ b/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>
--- a/docs/docs/components/radio-button.md
+++ b/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.
--- a/docs/docs/components/radio-group.md
+++ b/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}
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -4,6 +4,7 @@ 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).
--- a/docs/docs/components/range.md
+++ b/docs/docs/components/range.md
@@ -1,8 +1,9 @@
 ---
 title: Range
 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: range
 ---

 ```html {.example}
@@ -114,4 +115,4 @@ The component adapts to right-to-left (RTL) languages as you would expect.
  label="مقدار"
  hint="التحكم في مستوى صوت الأغنية الحالية."
  style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
-```
+```
--- a/docs/docs/components/rating.md
+++ b/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}
--- a/docs/docs/components/relative-time.md
+++ b/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.
--- a/docs/docs/components/resize-observer.md
+++ b/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.
--- a/docs/docs/components/select.md
+++ b/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
+tags: [inputs, forms]
 native: select
+icon: select
 ---

 ```html {.example}
@@ -420,4 +421,4 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
  // TODO - remove once we switch to the Popover API
  //
  document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
-</script>
+</script>
--- a/docs/docs/components/skeleton.md
+++ b/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.
--- a/docs/docs/components/spinner.md
+++ b/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}
--- a/docs/docs/components/split-panel.md
+++ b/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}
--- a/docs/docs/components/switch.md
+++ b/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}
--- a/docs/docs/components/tab-group.md
+++ b/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.
--- a/docs/docs/components/tab-panel.md
+++ b/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}
--- a/docs/docs/components/tab.md
+++ b/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
--- a/docs/docs/components/tag.md
+++ b/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}
--- a/docs/docs/components/textarea.md
+++ b/docs/docs/components/textarea.md
@@ -1,7 +1,7 @@
 ---
 title: Textarea
 description: Textareas collect data from the user and allow multiple lines of text.
-tags: component
+tags: [inputs, forms]
 icon: textarea
 native: input
 ---
@@ -114,4 +114,4 @@ Textareas can be made to resize both vertically and horizontally when `resize` i

 ```html {.example}
 <wa-textarea resize="both"></wa-textarea>
-```
+```
--- a/docs/docs/components/tooltip.md
+++ b/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
 ---


--- a/docs/docs/components/tree-item.md
+++ b/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}
--- a/docs/docs/components/tree.md
+++ b/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}
--- a/docs/docs/native/checkbox.md
+++ b/docs/docs/native/checkbox.md
@@ -28,7 +28,7 @@ Use the `checked` attribute to activate the checkbox.
 Use the `indeterminate` JS property to make the checkbox indeterminate.

 ```html {.example}
-<label><input type="checkbox" checked class="indeterminate"> Indeterminate</label>
+<label><input type="checkbox" class="indeterminate"> Indeterminate</label>
 <script>
  document.querySelector(".indeterminate").indeterminate = true;
 </script>