update links to github

* finishing touches

* finishing touches

* use bash

* remove pro stuff

* update github actions

* fix head.njk

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 contact_links:
   - name: Feature Requests
-    url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
+    url: https://github.com/shoelace-style/webawesome-alpha/discussions/categories/ideas
     about: All requests for new features should go here.
   - name: Help & Support
-    url: https://github.com/shoelace-style/shoelace/discussions/categories/help
+    url: https://github.com/shoelace-style/webawesome-alpha/discussions/categories/help-support
     about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.

.github/workflows/client_tests.yml

@@ -9,6 +9,7 @@ on:
   pull_request:
     branches: [next]
 
+
 jobs:
   client_test:
     runs-on: ubuntu-latest
@@ -30,10 +31,17 @@ jobs:
         run: npm ci
       - name: Lint
         run: npm run prettier
+        working-directory: ./packages/webawesome
+
       - name: Build
-        run: npm run build:alpha
+        run: npm run build
+        working-directory: ./packages/webawesome
+
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
+
       - name: Run CSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" CSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome

.github/workflows/ssr_tests.yml

@@ -1,11 +1,12 @@
-# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
 name: SSR Tests
 
 on:
-  push:
-    branches: [next]
+  # push:
+  #   branches: [next]
+  workflow_dispatch:
 
 jobs:
   ssr_test:
@@ -25,17 +26,17 @@ jobs:
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
-      # Just lint here too. Save some GH Action minutes and not need to use "depends_on" or anything.
-      - name: Lint
-        run: npm run prettier
 
       - name: Build
-        run: npm run build:alpha
+        run: npm run build
+        working-directory: ./packages/webawesome
 
       - name: Install Playwright
         run: npx playwright install --with-deps
+        working-directory: ./packages/webawesome
 
       - name: Run SSR tests
         # FAIL_FAST to fail on first failing test.
         run: FAIL_FAST="true" SSR_ONLY="true" npm run test
+        working-directory: ./packages/webawesome
 

.gitignore

@@ -1,12 +1,12 @@
 _site
 .cache
 .DS_Store
-package.json
-package-lock.json
 dist/
 dist-cdn/
-docs/public/pagefind
 node_modules
-src/react
-.astro
+packages/**/*/src/react
 cdn/
+yarn.lock
+_bundle_
+/packages/webawesome-pro
+/packages/webawesome-app

.prettierignore

@@ -1,5 +1,7 @@
 *.hbs
 *.md
+!docs/docs/patterns/**/*.md
+docs/docs/patterns/blog-news/post-list.md
 .cache
 .github
 cspell.json
@@ -13,3 +15,4 @@ package-lock.json
 tsconfig.json
 cdn
 _site
+docs/assets/scripts/prism-downloaded.js

README.md

@@ -31,6 +31,30 @@ If that's not what you're trying to do, the [documentation website](https://weba
 
 Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
 
+### Understanding the Web Awesome monorepo
+
+Web Awesome uses [NPM workspaces](https://docs.npmjs.com/cli/v11/using-npm/workspaces) for its monorepo structure and is fairly minimal in what it provides.
+
+By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across `webawesome`, `webawesome-pro`, and `webawesome-app`.
+
+Generally, if you plan to only work with the free version of `webawesome` it is easiest to go to `packages/webawesome` and run all commands from there.
+
+### Where do NPM dependencies go?
+
+Any dependencies intended to be used across all packages (IE: `prettier`, `eslint`) that are _NOT_ used at runtime should be in the root `devDependencies` of `package.json`.
+
+```bash
+npm install -D -w prettier
+```
+
+Any dependencies that will be used at runtime by a package should be part of the specific package's `"dependencies"` such as `lit`. This is required because if that dependency is not in the `packages/*/package.json`, it will not be installed when used via NPM.
+
+Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
+
+To do install a package specific to a package, change your working directory to that package's root
+
+IE: `cd packages/webawesome && npm install <package-name>`
+
 ### Forking the Repo
 
 Start by [forking the repo](https://github.com/shoelace-style/webawesome/fork) on GitHub, then clone it locally and install dependencies.
@@ -43,9 +67,10 @@ npm install
 
 ### Developing
 
-Once you've cloned the repo, run the following command.
+Once you've cloned the repo, run the following command from the respective directory within `packages/*`
 
 ```bash
+cd packages/webawesome
 npm start
 ```
 
@@ -56,6 +81,7 @@ This will spin up the dev server. After the initial build, a browser will open a
 To generate a production build, run the following command.
 
 ```bash
+cd packages/webawesome
 npm run build
 ```
 
@@ -66,15 +92,24 @@ You can also run `npm run build:serve` to start an [`http-server`](https://www.n
 To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
 
 ```bash
+cd packages/webawesome
 npm run create wa-tag-name
 ```
 
 This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
 
+### Adding additional packages
+
+Right now the only additional packages are in private repositories.
+
+To add additional packages from other repositories, run: `git clone <url> packages/<package-name>` to clone your repo into `packages/`.
+
+Make sure to run `npm install` at the root of the monorepo after adding your package!
+
 ### Contributing
 
 Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
 
 ## License
 
-Web Awesome is available under the terms of the MIT license.
+Web Awesome is available under the terms of the MIT license.

cspell.json

@@ -15,16 +15,19 @@
     "autoloading",
     "autoplay",
     "bezier",
+    "Blockquotes",
     "boxicons",
     "CACHEABLE",
     "callout",
     "callouts",
+    "canvastext",
     "chatbubble",
     "checkmark",
     "Clippy",
     "codebases",
     "codepen",
     "colocated",
+    "colorjs",
     "colour",
     "combobox",
     "Commonmark",
@@ -58,6 +61,8 @@
     "exportmaps",
     "exportparts",
     "fieldsets",
+    "focusin",
+    "focusout",
     "fontawesome",
     "formaction",
     "formdata",
@@ -67,6 +72,7 @@
     "formtarget",
     "FOUC",
     "FOUCE",
+    "Frontmatter",
     "fullscreen",
     "gestern",
     "giga",
@@ -128,6 +134,7 @@
     "petabit",
     "Preact",
     "preconnect",
+    "prerendered",
     "prismjs",
     "progressbar",
     "radiogroup",
@@ -148,6 +155,7 @@
     "scrollbars",
     "scrollend",
     "scroller",
+    "Scrollers",
     "Segoe",
     "semibold",
     "shadowrootmode",

docs/_data/hues.json

@@ -1 +0,0 @@
-["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]

docs/_data/palettes.js

@@ -1 +0,0 @@
-export { default as default } from '../../src/styles/color/palettes.js';

docs/_includes/breadcrumbs.njk

@@ -1,10 +0,0 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
-  <wa-breadcrumb id="docs-breadcrumbs">
-  {% for crumb in breadcrumbs %}
-    <wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
-  {% endfor %}
-  <wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  {% else %}
-{% endif %}

docs/_includes/contrast-table.njk

@@ -1,40 +0,0 @@
-<table class="colors wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint_bg in tints -%}
-        {% for tint_fg in tints | reverse -%}
-          {% if (tint_fg - tint_bg) | abs == difference %}
-          <th>{{ tint_fg }} on {{ tint_bg }}</th>
-          {% endif %}
-        {%- endfor -%}
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr>
-  <th>{{ hue | capitalize }}</th>
-  {% for tint_bg in tints -%}
-    {% set color_bg = palettes[paletteId][hue][tint_bg] %}
-    {% for tint_fg in tints | reverse -%}
-      {% set color_fg = palettes[paletteId][hue][tint_fg] %}
-      {% if (tint_fg - tint_bg) | abs == difference %}
-      <td>
-        <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
-          {% set contrast_wcag = '' %}
-          {% if color_fg and color_bg %}
-            {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
-          {% endif %}
-          {% if contrast_wcag %}
-          {{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
-          {% else %}
-          {{ tint_fg }} on {{ tint_bg }}
-          {% endif %}
-        </div>
-      </td>
-      {% endif %}
-    {%- endfor -%}
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>

docs/_includes/grouped-pages.njk

@@ -1,12 +0,0 @@
-{# 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

@@ -1,10 +0,0 @@
-{%- 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

@@ -1,22 +0,0 @@
-{# 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] -%}
-  {% set groupUrl %}/docs/{{ tag }}/{% endset %}
-  <wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
-    <h2 slot="summary">
-      {% 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

@@ -1,16 +0,0 @@
-{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
-	<li>
-		<a href="{{ page.url }}">{{ 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

@@ -1,33 +0,0 @@
-{# Getting started #}
-<h2>Getting Started</h2>
-<ul>
-  <li><a href="/docs/installation">Installation</a></li>
-  <li><a href="/docs/usage">Usage</a></li>
-  <li><a href="/docs/customizing">Customizing</a></li>
-  <li><a href="/docs/form-controls">Form Controls</a></li>
-  <li><a href="/docs/localization">Localization</a></li>
-</ul>
-
-{# Resources #}
-<h2>Resources</h2>
-<ul>
-  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
-  <li><a href="/docs/resources/community">Community</a></li>
-  <li><a href="/docs/resources/accessibility">Accessibility</a></li>
-  <li><a href="/docs/resources/contributing">Contributing</a></li>
-  <li><a href="/docs/resources/changelog">Changelog</a></li>
-  <li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
-</ul>
-
-{% for tag, title in {
-  'themes': 'Themes',
-  'components': 'Components',
-  'native': 'Native Styles',
-  'utilities': 'Style Utilities',
-  'layout': 'Layout',
-  'patterns': 'Patterns',
-  'palettes': 'Color Palettes',
-  'tokens': 'Design Tokens'
-} %}
-  {% include 'sidebar-group.njk' %}
-{% endfor %}

docs/_includes/svgs/palette.njk

@@ -1,24 +0,0 @@
-{% set paletteId = page.fileSlug %}
-{% set tints = [80, 60, 40, 20] %}
-{% set width = 20 %}
-{% set height = 13 %}
-{% set gap_x = 3 %}
-{% set gap_y = 3 %}
-
-<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
-<style>
-	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
-	.palette-icon {
-		height: 8ch;
-	}
-</style>
-
-{% for hue in hues -%}
-  {% set hueIndex = loop.index0 %}
-  {% for tint in tints -%}
-    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
-	      width="{{ width }}" height="{{ height }}"
-	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
-  {%- endfor %}
-{% endfor %}
-</svg>

docs/_includes/theme-showcase.njk

@@ -1,144 +0,0 @@
-<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
-  <div class="showcase-examples">
-    <wa-card with-header with-footer>
-      <div slot="header" class="wa-split">
-        <h3 class="wa-heading-m">Your Cart</h3>
-        <wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
-      </div>
-      <div class="wa-stack wa-gap-xl">
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
-            <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Initiate Saber</strong>
-              <strong>$179.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>Green</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-        <wa-divider></wa-divider>
-        <div class="wa-flank">
-          <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
-            <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
-          </wa-avatar>
-          <div class="wa-stack wa-gap-2xs">
-            <div class="wa-split wa-gap-2xs">
-              <strong>Repair Droid</strong>
-              <strong>$3,049.99</strong>
-            </div>
-            <div class="wa-split wa-gap-2xs wa-caption-m">
-              <span>R-series</span>
-              <a href="#" tabindex="-1">Remove</a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="wa-stack">
-        <div class="wa-split">
-          <strong>Subtotal</strong>
-          <strong>$3,229.98</strong>
-        </div>
-        <span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
-        <wa-button tabindex="-1" variant="brand">
-          <wa-icon slot="prefix" name="shopping-bag"></wa-icon>
-          Checkout
-        </wa-button>
-      </div>
-    </wa-card>
-    <wa-card>
-      <wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
-        <wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
-      </wa-avatar>
-      <p class="wa-body-l" style="margin: 0;">&ldquo;All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.&rdquo;</p>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Sign In</h3>
-        <wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
-          <wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-input tabindex="-1" label="Password" type="password">
-          <wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
-        </wa-input>
-        <wa-button tabindex="-1" variant="brand">Sign In</wa-button>
-        <a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
-      </div>
-    </wa-card>
-    <wa-card with-footer>
-      <div class="wa-stack">
-        <div class="wa-split">
-          <h3 class="wa-heading-m">To-Do</h3>
-          <wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
-        </div>
-        <wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
-        <wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
-        <wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
-        <wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
-      </div>
-      <div slot="footer">
-        <a href="" tabindex="-1">View all completed</a>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
-          <img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
-        </div>
-        <div class="wa-flank:end wa-align-items-start">
-          <div class="wa-stack wa-gap-3xs">
-            <div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
-              <strong>The Stone Troll</strong>
-              <small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
-            </div>
-            <span class="wa-caption-m">Samwise G</span>
-          </div>
-          <wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
-        </div>
-        <div class="wa-stack wa-gap-2xs">
-          <wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
-          <div class="wa-split">
-            <span class="wa-caption-xs">1:01</span>
-            <span class="wa-caption-xs">-1:58</span>
-          </div>
-        </div>
-        <div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
-          <wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
-          <wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
-        </div>
-      </div>
-    </wa-card>
-    <wa-card>
-      <div class="wa-stack">
-        <h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-rating value="4.6" read-only></wa-rating>
-          <strong>4.6</strong>
-          <span>(419 reviews)</span>
-        </div>
-        <div class="wa-cluster wa-gap-xs">
-          <div class="wa-cluster wa-gap-3xs">
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-            <wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
-          </div>
-          <span class="wa-caption-m">&bull;</span>
-          <wa-tag size="small">Cocktail Bar</wa-tag>
-          <wa-tag size="small">Gastropub</wa-tag>
-          <wa-tag size="small">Local Fare</wa-tag>
-          <wa-tag size="small">Gluten Free</wa-tag>
-        </div>
-        <div class="wa-flank wa-gap-xs">
-          <wa-icon name="location-dot"></wa-icon>
-          <a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
-        </div>
-      </div>
-    </wa-card>
-  </div>
-</div>

docs/_layouts/page.njk

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

docs/_layouts/palette.njk

@@ -1,119 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_layouts/block.njk' %}
-
-{% set paletteId = page.fileSlug %}
-
-{% block afterContent %}
-<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
-
-{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
-
-<table class="colors wa-palette-{{ paletteId }}">
-  <thead>
-    <tr>
-      <th></th>
-      {% for tint in tints -%}
-      <th>{{ tint }}</th>
-      {%- endfor %}
-    </tr>
-  </thead>
-{% for hue in hues -%}
-<tr>
-  <th>{{ hue | capitalize }}</th>
-  {% for tint in tints -%}
-    <td>
-      <div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
-        <wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
-      </div>
-    </td>
-  {%- endfor -%}
-</tr>
-{%- endfor %}
-</table>
-
-<h2>Used By</h2>
-
-<section class="index-grid">
-{% for page in collections.theme %}
-  {%- if page.data.palette == paletteId -%}
-    {% include "page-card.njk" %}
-  {%- endif -%}
-{% endfor %}
-</section>
-
-{% markdown %}
-## Color Contrast
-
-Web Awesome color scales are designed to guarantee certain contrast ratios,
-both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
-as well as the emergent APCA specification _(planned)_,
-so you can ensure that text is both legible to all users, and legally conformant.
-
-### Level 1
-
-A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
-{% endmarkdown %}
-
-{% set difference = 40 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `45`:
-
-{% endmarkdown %}
-
-{% set difference = 45 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-### Level 2
-
-A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
-{% endmarkdown %}
-
-{% set difference = 50 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `55`:
-
-{% endmarkdown %}
-
-{% set difference = 55 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-### Level 3
-
-A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
-{% endmarkdown %}
-
-{% set difference = 60 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-
-This also goes for a difference of `65`:
-
-{% endmarkdown %}
-
-{% set difference = 65 %}
-{% include "contrast-table.njk" %}
-
-{% markdown %}
-## How to use this palette
-
-If you are using a Web Awesome theme that uses this palette, it will already be included.
-To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-{% endmarkdown %}
-{% endblock %}

docs/_layouts/theme.njk

@@ -1,164 +0,0 @@
-{% set hasSidebar = true %}
-{% set hasOutline = true %}
-{# {% set forceTheme = page.fileSlug %} #}
-
-{% extends '../_includes/base.njk' %}
-
-{% block header %}
-<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
-
-<p id="mix_and_match" class="wa-gap-m">
-  <strong>
-    <wa-icon name="merge" slot="prefix"></wa-icon>
-    Remix
-    <wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
-  </strong>
-  <wa-select name="colors" label="Colors from…" size="small">
-    <wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for theme in collections.theme | sort %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="palette" label="Palette" size="small">
-    <wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for p in collections.palette | sort %}
-      {% if p.fileSlug !== palette %}
-      <wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-  <wa-select name="typography" label="Typography from…" size="small">
-    <wa-icon name="font-case" slot="prefix"></wa-icon>
-    <wa-option value="">(Theme default)</wa-option>
-    <wa-divider></wa-divider>
-    {% for theme in collections.theme | sort %}
-      {% if theme.fileSlug !== page.fileSlug %}
-      <wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
-      {% endif %}
-    {% endfor %}
-  </wa-select>
-
-
-</p>
-<script>
-  document.querySelector('#mix_and_match').addEventListener('change', function(event) {
-    let selects = document.querySelectorAll('#mix_and_match wa-select');
-    let url = new URL(demo.src);
-
-    for (let select of selects) {
-      url.searchParams.set(select.name, select.value);
-    }
-
-    demo.src = url;
-  });
-</script>
-
-<h2>Default Color Palette</h2>
-{% set paletteURL = '/docs/palettes/' + palette + '/' %}
-{% set themePage = page %}
-{% set page = paletteURL | getCollectionItemFromUrl %}
-<div class="index-grid">
-{% include 'page-card.njk' %}
-</div>
-{% set page = themePage %}
-
-{% endblock %}
-
-{% block afterContent %}
-{% markdown %}
-## How to use this theme
-
-You can import this theme from the Web Awesome CDN.
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-### Remixing { #remixing }
-
-If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-<wa-callout variant="warning">
-  <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
-  Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
-</wa-callout>
-
-## Dark mode
-
-To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
-This means you can use different color schemes throughout the page.
-Here, we use the default theme with a dark sidebar:
-
-```html
-<html>
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
-  </head>
-
-  <body>
-    <nav class="wa-dark">
-      <!-- dark-themed sidebar -->
-    </nav>
-
-    <!-- light-themed content -->
-  </body>
-</html>
-```
-
-You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
-
-```html
-<html class="wa-dark">
-  <head>
-    <link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
-    <!-- other links, scripts, and metadata -->
-  </head>
-  <body>
-    <!-- page content -->
-  </body>
-</html>
-```
-### Detecting Color Scheme Preference
-
-Web Awesome's themes have both light and dark styles built in.
-However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
-This should be done at the application level.
-
-As a best practice, to provide a dark theme in your app, you should:
-
-- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
-- Allow the user to override the setting in your app
-- Remember the user's preference and restore it on subsequent logins
-
-Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
-
-Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
-you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
-
-```js
-const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
-const applyDark = function (event = systemDark) {
-  const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
-  document.documentElement.classList.toggle('wa-dark', isDark);
-};
-systemDark.addEventListener('change', applyDark);
-applyDark();
-```
-
-{% endmarkdown %}
-{% endblock %}

docs/_utils/code-examples.js

@@ -1,190 +0,0 @@
-import { parse } from 'node-html-parser';
-import { v4 as uuid } from 'uuid';
-
-const templates = {
-  old(pre, code, { open, buttons, edit }) {
-    const id = `code-example-${uuid().slice(-12)}`;
-    let preview = code.textContent;
-
-    // Run preview scripts as modules to prevent collisions
-    const root = parse(preview, { blockTextElements: { script: true } });
-    root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-    preview = root.toString();
-
-    return `
-      <div class="code-example ${open ? 'open' : ''}">
-        <div class="code-example-preview">
-          ${preview}
-        </div>
-        <div class="code-example-source" id="${id}">
-          ${pre.outerHTML}
-        </div>
-        ${
-          buttons
-            ? `
-            <div class="code-example-buttons">
-              <button
-                class="code-example-toggle"
-                type="button"
-                aria-expanded="${open ? 'true' : 'false'}"
-                aria-controls="${id}"
-              >
-                Code
-                <wa-icon name="chevron-down"></wa-icon>
-              </button>
-              ${
-                edit
-                  ? `
-                    <button class="code-example-pen" type="button">
-                      <wa-icon name="pen-to-square"></wa-icon>
-                      Edit
-                    </button>
-                  `
-                  : ''
-              }
-            `
-            : ''
-        }
-        </div>
-      </div>
-    `;
-  },
-  new(pre, code, { open, first, attributes }) {
-    attributes = {
-      open,
-      include: `link[rel=stylesheet][href^='/dist/']`,
-      ...attributes,
-    };
-
-    const attributesString = Object.entries(attributes)
-      .map(([key, value]) => {
-        if (value === true) {
-          return key;
-        }
-        if (value === false || value === null) {
-          return '';
-        }
-        return `${key}="${value}"`;
-      })
-      .join(' ');
-
-    let includes = '';
-    if (first) {
-      includes = `
-        <template class="wa-code-demo-include-isolated">
-          <script src="/dist/webawesome.loader.js" type="module"></script>
-        </template>`;
-    }
-
-    let preview = '';
-    if (attributes.viewport === undefined) {
-      // Slot in pre-rendered preview
-      preview = `<div style="display:contents" slot="preview">${code.textContent}</div>`;
-
-      // Run preview scripts as modules to prevent collisions
-      const root = parse(preview, { blockTextElements: { script: true } });
-      root.querySelectorAll('script').forEach(script => script.setAttribute('type', 'module'));
-      preview = root.toString();
-    }
-
-    return `${includes}
-      <wa-code-demo ${attributesString}>
-        ${preview}
-        ${pre.outerHTML}
-      </wa-code-demo>
-    `;
-  },
-};
-
-/**
- * Eleventy plugin to turn `<code class="example">` blocks into live examples.
- */
-export function codeExamplesPlugin(eleventyConfig, options = {}) {
-  const defaultOptions = {
-    container: 'body',
-    defaultOpen: (code, { outputPathIndex }) => {
-      return (
-        outputPathIndex === 1 && // is first
-        code.textContent.length < 500
-      ); // is short
-    },
-  };
-  options = { ...defaultOptions, ...options };
-
-  const stats = {
-    inputPaths: {},
-    outputPaths: {},
-  };
-
-  eleventyConfig.addTransform('code-examples', function (content) {
-    const { inputPath, outputPath } = this.page;
-
-    const doc = parse(content, { blockTextElements: { code: true } });
-    const container = doc.querySelector(options.container);
-
-    if (!container) {
-      return content;
-    }
-
-    // Look for external links
-    container.querySelectorAll('code.example').forEach(code => {
-      stats.inputPaths[inputPath] ??= 0;
-      stats.outputPaths[outputPath] ??= 0;
-      stats.inputPaths[inputPath]++;
-      stats.outputPaths[outputPath]++;
-
-      const pre = code.closest('pre');
-      const first = stats.inputPaths[inputPath] === 1;
-
-      const localOptions = {
-        ...options,
-        first,
-
-        // Modifier defaults
-        edit: true,
-        buttons: true,
-        new: true, // comment this line to default back to the old demos
-        attributes: {},
-      };
-
-      for (const prop of ['new', 'open', 'buttons', 'edit']) {
-        if (code.classList.contains(prop)) {
-          localOptions[prop] = true;
-        } else if (code.classList.contains(`no-${prop}`)) {
-          localOptions[prop] = false;
-        }
-      }
-
-      for (const attribute of ['viewport', 'include']) {
-        if (code.hasAttribute(attribute)) {
-          localOptions.attributes[attribute] = code.getAttribute(attribute);
-          code.removeAttribute(attribute);
-        }
-      }
-
-      if (Object.keys(localOptions.attributes).length > 0) {
-        // attributes only work on the new syntax
-        localOptions.new = true;
-      }
-
-      if (localOptions.open === undefined) {
-        if (localOptions.defaultOpen === true) {
-          localOptions.open = localOptions.defaultOpen;
-        } else if (typeof localOptions.defaultOpen === 'function') {
-          localOptions.open = localOptions.defaultOpen(code, {
-            pre,
-            inputPathIndex: stats.inputPaths[inputPath],
-            outputPathIndex: stats.outputPaths[outputPath],
-          });
-        }
-      }
-
-      const template = localOptions.new ? 'new' : 'old';
-      const codeExample = parse(templates[template](pre, code, localOptions));
-
-      pre.replaceWith(codeExample);
-    });
-
-    return doc.toString();
-  });
-}

docs/_utils/copy-code.js

@@ -1,32 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add copy buttons to code blocks.
- */
-export function copyCodePlugin(options = {}) {
-  options = {
-    container: 'body',
-    ...options,
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('copy-code', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-      const container = doc.querySelector(options.container);
-
-      if (!container) {
-        return content;
-      }
-
-      // Look for code blocks
-      container.querySelectorAll('pre > code').forEach(code => {
-        const pre = code.closest('pre');
-
-        // Add a copy button (we set the copy data at runtime to reduce page bloat)
-        pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
-      });
-
-      return doc.toString();
-    });
-  };
-}

docs/_utils/filters.js

@@ -1,284 +0,0 @@
-import { parse } from 'path';
-
-export function stripExtension(string) {
-  return parse(string).name;
-}
-
-export function stripPrefix(content) {
-  return content.replace(/^wa-/, '');
-}
-
-// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-export function trimPipes(content) {
-  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-}
-
-export function keys(obj) {
-  return Object.keys(obj);
-}
-
-export function log(firstArg, ...rest) {
-  console.log(firstArg, ...rest);
-  return firstArg;
-}
-
-function getCollection(name) {
-  // From https://github.com/11ty/eleventy/blob/d3d24ccddb804e6e14773501d8c4e07e2c4b9c2b/src/Filters/GetLocaleCollectionItem.js#L39-L43
-  return this.collections?.[name] || this.ctx?.collections?.[name] || this.context?.environments?.collections?.[name];
-}
-
-export function getCollectionItemFromUrl(url, collection) {
-  collection ??= getCollection.call(this, 'all') || [];
-  return collection.find(item => item.url === url);
-}
-
-export function getTitleFromUrl(url, collection) {
-  const item = getCollectionItemFromUrl.call(this, 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 = split(url, '/');
-  const ret = [];
-
-  while (parts.length) {
-    let partialUrl = '/' + parts.join('/') + '/';
-    let item = getCollectionItemFromUrl.call(this, partialUrl);
-
-    if (item && (partialUrl !== url || withCurrent)) {
-      let title = item.data.title;
-      if (title) {
-        ret.unshift({ url: partialUrl, title });
-      }
-    }
-
-    parts.pop();
-
-    if (item?.data.parent) {
-      let parentURL = item.data.parent;
-      if (!item.data.parent.startsWith('/')) {
-        // Parent is in the same directory
-        parts.push(item.data.parent);
-        parentURL = '/' + parts.join('/') + '/';
-      }
-
-      let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
-      return [...parentBreadcrumbs, ...ret];
-    }
-  }
-  return ret;
-}
-
-export function isObject(value) {
-  return typeof value === 'object' && value !== null && !Array.isArray(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 number(value, options) {
-  if (typeof value !== 'number' && isNaN(value)) {
-    return value;
-  }
-
-  let lang = options?.lang ?? 'en';
-  if (options?.lang) {
-    delete options.lang;
-  }
-
-  if (!options || Object.keys(options).length === 0) {
-    options = { maximumSignificantDigits: 3 };
-  }
-
-  return Number(value).toLocaleString(lang, options);
-}
-
-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 (!collection) {
-    console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(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/_utils/remove-data-alpha-elements.js

@@ -1,23 +0,0 @@
-import { parse } from 'node-html-parser';
-
-/**
- * Eleventy plugin to add remove elements with <div data-alpha="remove"> from the alpha build.
- */
-export function removeDataAlphaElements(options = {}) {
-  options = {
-    isAlpha: false,
-    ...options,
-  };
-
-  return function (eleventyConfig) {
-    eleventyConfig.addTransform('remove-data-alpha-elements', content => {
-      const doc = parse(content, { blockTextElements: { code: true } });
-
-      if (options.isAlpha) {
-        doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
-      }
-
-      return doc.toString();
-    });
-  };
-}

docs/assets/scripts/copy-code.js

@@ -1,15 +0,0 @@
-function setCopyValue() {
-  document.querySelectorAll('.copy-button').forEach(copyButton => {
-    const pre = copyButton.closest('pre');
-    const code = pre?.querySelector('code');
-
-    if (code) {
-      copyButton.value = code.textContent;
-    }
-  });
-}
-
-// Set data for all copy buttons when the page loads
-setCopyValue();
-
-document.addEventListener('turbo:load', setCopyValue);

docs/assets/styles/code-examples.css

@@ -1,87 +0,0 @@
-.code-example {
-  border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-  border-radius: var(--wa-border-radius-l);
-  color: var(--wa-color-text-normal);
-  margin-block-end: var(--wa-flow-spacing);
-}
-
-.code-example-preview {
-  padding: 2rem;
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-
-  > :first-child {
-    margin-block-start: 0;
-  }
-
-  > :last-child {
-    margin-block-end: 0;
-  }
-}
-
-.code-example-source {
-  border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-.code-example:not(.open) .code-example-source {
-  display: none;
-}
-
-.code-example.open .code-example-toggle wa-icon {
-  rotate: 180deg;
-}
-
-.code-example-source pre {
-  position: relative;
-  border-radius: 0;
-  margin: 0;
-  white-space: normal;
-}
-
-.code-example-source:not(:has(+ .code-example-buttons)) {
-  border-bottom: none;
-
-  pre {
-    border-bottom-right-radius: var(--wa-border-radius-l);
-    border-bottom-left-radius: var(--wa-border-radius-l);
-  }
-}
-
-.code-example-buttons {
-  display: flex;
-  align-items: stretch;
-
-  button {
-    all: unset;
-    flex: 1 0 auto;
-    font-size: 0.875rem;
-    color: var(--wa-color-text-quiet);
-    border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-    text-align: center;
-    padding: 0.5rem;
-    cursor: pointer;
-
-    &:first-of-type {
-      border-left: none;
-      border-bottom-left-radius: var(--wa-border-radius-l);
-    }
-
-    &:last-of-type {
-      border-bottom-right-radius: var(--wa-border-radius-l);
-    }
-
-    &:focus-visible {
-      outline: var(--wa-focus-ring);
-    }
-  }
-
-  .code-example-pen {
-    flex: 0 0 100px;
-    white-space: nowrap;
-  }
-
-  wa-icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -2px;
-  }
-}

docs/docs/components/card.md

@@ -1,184 +0,0 @@
----
-title: Card
-description: Cards can be used to group related subjects in a container.
-tags: [organization, layout]
-icon: card
----
-
-```html {.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-```
-
-## Examples
-
-### Basic Card
-
-Basic cards aren't very exciting, but they can display any content you want them to.
-
-```html {.example}
-<wa-card class="card-basic">
-  This is just a basic card. No image, no header, and no footer. Just your content.
-</wa-card>
-
-<style>
-  .card-basic {
-    max-width: 300px;
-  }
-</style>
-```
-
-### Card with Header
-
-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">
-  <div slot="header">
-    Header Title
-    <wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
-  </div>
-
-  This card has a header. You can put all sorts of things in it!
-</wa-card>
-
-<style>
-  .card-header {
-    max-width: 300px;
-  }
-
-  .card-header [slot='header'] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .card-header h3 {
-    margin: 0;
-  }
-
-  .card-header wa-icon-button {
-    font-size: var(--wa-font-size-m);
-  }
-</style>
-```
-
-### Card with Footer
-
-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">
-  This card has a footer. You can put all sorts of things in it!
-
-  <div slot="footer">
-    <wa-rating></wa-rating>
-    <wa-button variant="brand">Preview</wa-button>
-  </div>
-</wa-card>
-
-<style>
-  .card-footer {
-    max-width: 300px;
-  }
-
-  .card-footer [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-```
-
-### Images
-
-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">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
-    alt="A kitten walks towards camera on top of pallet."
-  />
-  This is a kitten, but not just any kitten. This kitten likes walking along pallets.
-</wa-card>
-
-<style>
-  .card-image {
-    max-width: 300px;
-  }
-</style>
-```
-
-### Sizing
-
-Use the `size` attribute to change a card's size.
-
-```html {.example}
-<div class="wa-stack">
-<wa-card with-footer size="small">
-  This is a small card.
-
-  <footer slot="footer" class="wa-flank">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-
-<wa-card with-footer size="medium">
-  This is a medium card (default).
-
-  <footer slot="footer" class="wa-flank">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-
-<wa-card with-footer size="large">
-  This is a large card.
-
-  <footer slot="footer" class="wa-flank">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </footer>
-</wa-card>
-</div>
-
-```
-
-<style>
-</style>

docs/docs/components/code-demo.md

@@ -1,212 +0,0 @@
----
-title: Code Demo
-description: Code demos can be used to render code examples as inline live demos.
-tags: component
-noAlpha: true
----
-
-```html {.example}
-<wa-code-demo>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-This component is used right here in the docs to render code examples.
-
-:::warning
-Do not render untrusted content in a `<wa-code-demo>` element. This component renders the content as HTML, which introduces XSS vulnerabilities if used with untrusted content.
-:::
-
-## Examples
-
-### Open by default
-
-```html {.example}
-<wa-code-demo open>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Custom previews
-
-In some cases you may want to preprocess the code displayed, for example to sanitize HTML, remove irrelevant elements or attributes, fix whitespace, or do server-side rendering (SSR).
-For these cases, you can slot in a custom preview:
-
-```html {.example}
-<wa-code-demo>
-  <wa-button slot="preview">Click me!</wa-button>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Note that this means the preview will be in the light DOM, and can conflict with other things on the page.
-To only render the custom preview within the component’s shadow DOM, or to display raw text, you can wrap it in a `<template>` element:
-
-```html {.example}
-<wa-code-demo>
-  <template slot="preview">
-    <wa-button>Click me!</wa-button>
-  </template>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Including resources (CSS, scripts, etc.)
-
-Demos are rendered in the shadow DOM of the component, so any resources (stylesheets, scripts, etc.) must be included anew.
-The same applies to isolated demos (see below), opening demos in a new tab, or editing them on CodePen.
-
-While you _could_ manually include all of these on every single demo, it would get tedious to write,
-and it would add noise for the reader.
-
-Instead, `<wa-code-demo>` provides several better ways to include resources.
-The core idea is that rather than specifying these resources over and over on each demo,
-you would **point to elements** which would then be cloned into the demo, at the beginning.
-
-There are two ways to point to elements:
-- Add a `wa-code-demo-include` class to them
-- Specify a CSS selector for which resources to look for in the demo’s `include` attribute.
-
-There are certain types of elements that are handled specially:
-- `<template>`: contents are cloned instead of the element itself.
-This is useful for including resources in your demo that you don't want rendered outside the demo.
-
-The following example shows both methods.
-It includes all stylesheets on this page whose URLs start with `/dist/styles/themes/`,
-plus any other elements with the class `.demo-import`, plus a CSS file with the class `wa-code-demo-include`:
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="/dist/webawesome.loader.js"></script>
-  <style>wa-callout { font-size: var(--wa-font-size-2xl) }</style>
-  <script>console.log('Hello!')</script>
-</template>
-<wa-code-demo include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-
-### Isolated viewports
-
-Often you may want to render your demo in a separate viewport, e.g. when it’s about a whole page.
-Or, you may want to sandbox it.
-For these cases, you can use the `viewport` attribute, which renders the demo in an iframe:
-
-```html {.example}
-<wa-code-demo viewport>
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-### Viewport Emulation
-
-When you use the `viewport` attribute, `<wa-code-demo>` uses [`<wa-viewport-demo>`](../viewport-demo/) internally, and passes the value of `viewport` to it.
-This allows you to also also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-code-demo viewport="300">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-Or both a width and a height value:
-
-```html {.example}
-<wa-code-demo viewport="1600 x 1000">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-  </code></pre>
-</wa-code-demo>
-```
-
-If you only provide a width value, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-
-### Isolated demos with resources
-
-Including resources in isolated demos works the same way.
-Any relative URLs are still resolved relative to the host document.
-In addition to the `wa-code-demo-include` class, which specifies resources to be included in *every* demo,
-you can also use the `wa-code-demo-include-isolated` class which specifies resources to be included in every *isolated* demo,
-i.e. the previews of demos using the `viewport` attribute, but also opening demos in a new tab or editing them on CodePen.
-
-```html {.example}
-<template class="wa-code-demo-include-isolated">
-  <script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
-  <style>
-    body {
-      padding: var(--wa-space-l);
-    }
-    wa-callout { font-size: var(--wa-font-size-2xl) }
-  </style>
-  <script>console.log('Hello from iframe!')</script>
-</template>
-<wa-code-demo viewport include="link[rel=stylesheet]">
-  <pre><code class="language-html">
-    &lt;wa-callout&gt;Helloooo!&lt;/wa-callout&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Styling
-
-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-m)">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-The divider width is controlled separately via `--divider-width`:
-
-```html{.example}
-<wa-code-demo open style="border-width: var(--wa-border-width-l); --divider-width: var(--wa-border-width-m);">
-  <pre><code class="language-html">
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  </code></pre>
-</wa-code-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-### High priority
-
-- Make the component dynamic so that when the code changes, the demo is updated
-
-### Low priority
-
-- Horizontal layout
-- Tabbed layout
-- Provide a way to display CSS and JS separately
-- Provide a way to customize the playground used (currently it is hardcoded to CodePen)
-- Provide a way to customize the buttons shown

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

@@ -1,237 +0,0 @@
----
-title: Sample Documentation Page
-description: A sample page for a documentation website using Web Awesome's page component.
-layout: blank
-eleventyExcludeFromCollections: true
----
-
-<style>
-  wa-page {
-    --menu-width: 15rem;
-    --aside-width: 15rem;
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-  wa-page[view='mobile'] [slot='aside'] {
-    display: none;
-  }
-  wa-page[view='mobile'] #brand-name {
-    display: none;
-  }
-  wa-page[view='mobile'] #search {
-    display: none;
-  }
-  [slot='banner'] {
-    --wa-color-text-link: var(--wa-color-neutral-on-loud);
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-  [slot='header'] {
-    --wa-link-decoration-default: none;
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='header'] a {
-    font-weight: var(--wa-font-weight-action);
-  }
-  [slot='subheader'] {
-    background-color: var(--wa-color-surface-lowered);
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-header'] {
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  wa-page[view='desktop'] [slot*='navigation'] {
-    border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-  }
-  [slot='navigation-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='main-header'],
-  main,
-  [slot='main-footer'] {
-    max-inline-size: 60rem;
-    margin-inline: auto;
-  }
-  [slot='main-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='footer'] {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-    font-size: var(--wa-font-size-s);
-  }
-</style>
-
-<wa-page mobile-breakpoint="920">
-  <div slot="banner" class="wa-body-s">
-    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
-      <wa-icon name="gift"></wa-icon>
-      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-    </a>
-  </div>
-  <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>
-      <a href="#">Our Work</a>
-      <a href="#">About Us</a>
-      <a href="#">Discover</a>
-      <a href="#">Get Involved</a>
-    </div>
-    <div class="wa-cluster wa-gap-xs">
-      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-      <wa-button size="small" variant="brand">Donate</wa-button>
-    </div>
-  </header>
-  <nav slot="subheader">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
-      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
-        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-        <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-icon slot="prefix" name="magnifying-glass"></wa-icon>
-    </wa-input>
-  </nav>
-  <nav slot="navigation-header">
-    <div class="wa-flank">
-      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Great Horned Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-      </div>
-    </div>
-  </nav>
-  <nav slot="navigation">
-    <a href="#identification">Identification</a>
-    <a href="#range">Range and Habitat</a>
-    <a href="#behavior">Behavior</a>
-    <a href="#conservation">Conservation</a>
-  </nav>
-  <nav slot="navigation-footer">
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank" style="--flank-size: 1.25em;">
-      <wa-icon name="map-location-dot"></wa-icon>
-      <span>Interactive Range Map</span>
-    </a>
-  </nav>
-  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-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>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-tag size="small">Owls</wa-tag>
-          <wa-tag size="small">Birds of Prey</wa-tag>
-          <wa-tag size="small">Pleistocene Birds</wa-tag>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="ruler"></wa-icon>
-          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="earth-americas"></wa-icon>
-          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="shield-heart"></wa-icon>
-          <span class="wa-caption-m">Least Concern</span>
-        </div>
-      </div>
-      <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>
-  </header>
-  <main class="wa-body-l">
-    <h2 id="identification">Identification</h2>
-    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
-    <h2 id="range">Range and Habitat</h2>
-    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
-    <h2 id="behavior">Behavior</h2>
-    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
-    <h2 id="conservation">Conservation</h2>
-    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
-  </main>
-  <footer slot="main-footer">
-    <section>
-      <h2 class="wa-heading-m">Sources</h2>
-      <ul class="wa-body-s">
-        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
-        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
-        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-      </ul>
-    </section>
-  </footer>
-  <aside slot="aside">
-    <h2 class="wa-heading-m">Discover More Birds</h2>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Long-eared Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Northen Hawk Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Golden Eagle</span>
-        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-      </div>
-    </wa-card>
-  </aside>
-  <footer slot="footer" class="wa-grid wa-gap-xl">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
-      <span class="wa-heading-s">Audubon Worldwide</span>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Our Work</h3>
-      <a href="#">Habitat Restoration</a>
-      <a href="#">Migration Science</a>
-      <a href="#">Advocacy</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">About Us</h3>
-      <a href="#">Our History</a>
-      <a href="#">Leadership</a>
-      <a href="#">Fiscal Reports</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Discover</h3>
-      <a href="#">Field Guides</a>
-      <a href="#">Photo Search</a>
-      <a href="#">Gear and Resources</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Get Involved</h3>
-      <a href="#">Adopt a Bird</a>
-      <a href="#">Your Local Audubon</a>
-      <a href="#">Youth Audubon Camps</a>
-    </div>
-  </footer>
-</wa-page>

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

@@ -1,400 +0,0 @@
----
-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-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl" family="duotone"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <wa-input placeholder="Search" style="max-inline-size: 100%;">
-      <wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
-    </wa-input>
-    <div class="wa-cluster">
-      <wa-button appearance="outlined">Log In</wa-button>
-      <wa-button>Sign Up</wa-button>
-    </div>
-  </header>
-  <div slot="navigation-header" class="wa-split">
-    <h2 class="wa-heading-s">For You</h2>
-    <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-  </div>
-  <nav slot="navigation">
-    <h3 class="wa-heading-xs">Discover</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="house"></wa-icon>
-          <span>Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="sparkles"></wa-icon>
-          <span>New</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="tower-broadcast"></wa-icon>
-          <span>Stations</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Library</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="heart"></wa-icon>
-          <span>Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="list-music"></wa-icon>
-          <span>Playlists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="microphone-stand"></wa-icon>
-          <span>Artists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="grid-2"></wa-icon>
-          <span>Albums</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="podcast"></wa-icon>
-          <span>Podcasts</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Recently Played</h3>
-    <ul id="recent" class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="cassette-tape" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
-          <span>Lo-Fi Station</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="face-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
-          <span>Podcast Awesome</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
-          <div class="wa-stack wa-gap-0">
-            <span>Seasons</span>
-            <span class="wa-caption-s">Blister Soul</span>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-  <div slot="main-header">
-    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
-      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-    </div>
-  </div>
-  <main>
-    <div class="wa-stack wa-gap-3xl">
-      <div class="wa-flank wa-gap-3xl" style="--flank-size: 35%; --content-percentage: 55%;">
-        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
-          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
-        </div>
-        <div class="wa-split:column wa-align-items-start">
-          <div class="wa-stack" style="margin-block: auto;">
-            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-            <a href="#" class="wa-heading-m">The Shire Choir</a>
-            <div class="wa-cluster wa-caption-m wa-gap-2xs">
-              <span>Holiday</span>
-              <span>&bull;</span>
-              <span>2024</span>
-              <span>&bull;</span>
-              <span>12 songs, 41 minutes 9 seconds</span>
-            </div>
-          </div>
-          <div id="play-controls" class="wa-split wa-gap-xl">
-            <div class="wa-cluster wa-gap-xl">
-              <wa-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
-          </div>
-        </div>
-      </div>
-      <ol class="wa-stack wa-gap-0">
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="1"></wa-icon>
-            <span>Fa-La-La-Fellowship</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="2"></wa-icon>
-            <span>Sleigh Ride</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:36</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="3"></wa-icon>
-            <span>All I Want For Christmas Is Stew</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:51</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="4"></wa-icon>
-            <span>Rockin' Around the Christmas Ent</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:05</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="5"></wa-icon>
-            <span>Merry, Did You Know?</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">1:56</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="6"></wa-icon>
-            <span>Run Run Shadowfax</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:32</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="7"></wa-icon>
-            <span>You're a Mean One, Mr. Grima</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:46</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="8"></wa-icon>
-            <span>O Come, All Ye Faithful</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="9"></wa-icon>
-            <span>Do You Hear What I Hear</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:13</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="0"></wa-icon>
-            </span>
-            <span>Carol of the Horns</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:55</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="1"></wa-icon>
-            </span>
-            <span>Silent Night</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:10</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="2"></wa-icon>
-            </span>
-            <span>Wizard Wonderland</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:22</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-      </ol>
-    </div>
-  </main>
-  <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-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-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-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>
-      <span class="wa-caption-s">The Shire Choir</span>
-    </div>
-  </div>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 18rem;
-    --wa-tooltip-arrow-size: 0;
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-  }
-  wa-page,
-  [slot='header'],
-  wa-page[view='desktop'] [slot*='navigation'] {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  wa-page[view='mobile'] [slot*='navigation'] {
-    padding: 0;
-  }
-  wa-page::part(base) {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  [slot='header'] {
-    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-  }
-  [slot='navigation-header'],
-  [slot='main-header'] {
-    padding-block-end: 0;
-  }
-  [slot='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-    --wa-link-decoration-default: none;
-    --wa-link-decoration-hover: none;
-    --flank-size: 2rem;
-    font-weight: var(--wa-font-weight-action);
-    gap: 0.5rem;
-  }
-  [slot='navigation'] ul {
-    list-style: none;
-    margin: 0;
-  }
-  [slot='navigation'] ul a {
-    border-radius: var(--wa-border-radius-m);
-    padding: var(--wa-space-xs);
-  }
-  [slot='navigation'] ul a:hover,
-  main ol li:hover {
-    background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-  }
-  [slot='navigation'] wa-icon {
-    align-items: center;
-    aspect-ratio: 1;
-    color: var(--wa-color-brand-fill-loud);
-    display: flex;
-    height: var(--flank-size);
-    justify-content: center;
-  }
-  [slot='navigation'] #recent wa-icon {
-    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);
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
-  }
-  main,
-  [slot*='main'] {
-    margin-inline: var(--wa-space-m);
-  }
-  main ol li {
-    padding: var(--wa-space-m);
-  }
-  main ol li .wa-flank {
-    --flank-size: 2rem;
-  }
-  main ol li:not(:first-child) {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-footer'] {
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-header'] {
-    background-color: var(--wa-color-surface-raised);
-  }
-  #play-controls wa-icon-button::part(base) {
-    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-    border-radius: var(--wa-border-radius-circle);
-    font-size: 1.5rem;
-  }
-  #play-controls wa-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 1.5rem;
-  }
-</style>

docs/docs/components/page.md

@@ -1,888 +0,0 @@
----
-title: Page
-description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
-tags: [pro, 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.
-
-## Layout Anatomy
-
-This image depicts a page's anatomy, including the default positions of each section. The labels represent the [named slots](#slots) you can use to populate them.
-
-Most slots are optional. Slots that have no content will not be shown, allowing you to opt-in to just the sections you actually need.
-
-{% include "page-demo.njk" %}
-
-<!-- ![Screenshot of Layout Anatomy showing various slots](/assets/images/layout-anatomy.svg) -->
-
-## Using `wa-page`
-
-:::info
-If you're not familiar with how slots work in HTML, you might want to [learn more about slots](/docs/usage/#slots) before using this component.
-:::
-
-A number of sections are available as part of the page component, most of which are optional. Content is populated by [slotting elements](/docs/usage/#slots) into various locations.
-
-This component _does not_ implement any [content sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning) or "semantic elements" internally (such as `<main>`, `<header>`, `<footer>`, etc.). Instead, we recommended that you slot in content sectioning elements wherever you feel they're appropriate.
-
-When using `<wa-page>`, make sure to zero out all paddings and margins on `<html>` and `<body>`, otherwise you may see unexpected gaps. We highly recommend adding the following styles when using `<wa-page>`:
-
-```css
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-```
-
-::info
-If you use [native styles](/docs/native/), this is already taken care of.
-:::
-
-## Examples
-
-:::warning
-Open demos in a new tab to examine their behavior in different window sizes.
-The previews below use simulated zooming which, depending on your browser, may not be accurate.
-:::
-
-### Documentation
-
-A sample documentation page using [all available slots](#slots).
-The navigation menu collapses into a drawer at a custom `mobile-breakpoint` of 920px.
-It can be opened using a button with `[data-toggle-nav]` that appears in the `subheader` slot. The `aside` slot is also hidden below 920px.
-
-```html {.example viewport="1600"}
-<wa-page mobile-breakpoint="920">
-  <div slot="banner" class="wa-body-s">
-    <a href="#" class="wa-cluster wa-align-items-baseline wa-gap-xs" style="flex-wrap: nowrap;">
-      <wa-icon name="gift"></wa-icon>
-      <span>Give a Hoot for the Holidays: Donate now and double your impact.</span>
-    </a>
-  </div>
-  <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 wa-desktop-only">Audubon Worldwide</span>
-      <a href="#">Our Work</a>
-      <a href="#">About Us</a>
-      <a href="#">Discover</a>
-      <a href="#">Get Involved</a>
-    </div>
-    <div class="wa-cluster wa-gap-xs">
-      <wa-button size="small" variant="brand" appearance="outlined">Find Your Local Audubon</wa-button>
-      <wa-button size="small" variant="brand">Donate</wa-button>
-    </div>
-  </header>
-  <nav slot="subheader">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon-button data-toggle-nav name="bars" label="Menu"></wa-icon-button>
-      <wa-breadcrumb style="font-size: var(--wa-font-size-s);">
-        <wa-breadcrumb-item>Field Guides</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Owls</wa-breadcrumb-item>
-        <wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
-      </wa-breadcrumb>
-    </div>
-    <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>
-  <nav slot="navigation-header">
-    <div class="wa-flank">
-      <wa-avatar image="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" label=""></wa-avatar>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Great Horned Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Bubo virginianus</em></span>
-      </div>
-    </div>
-  </nav>
-  <nav slot="navigation">
-    <a href="#identification">Identification</a>
-    <a href="#range">Range and Habitat</a>
-    <a href="#behavior">Behavior</a>
-    <a href="#conservation">Conservation</a>
-  </nav>
-  <nav slot="navigation-footer">
-    <a href="#" class="wa-flank">
-      <wa-icon name="camera"></wa-icon>
-      <span>Photo Gallery</span>
-    </a>
-    <a href="#" class="wa-flank">
-      <wa-icon name="map-location-dot"></wa-icon>
-      <span>Interactive Range Map</span>
-    </a>
-  </nav>
-  <header slot="main-header">
-    <div class="wa-flank:end wa-border-radius-l wa-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>
-        <div class="wa-cluster wa-gap-xs">
-          <wa-tag size="small">Owls</wa-tag>
-          <wa-tag size="small">Birds of Prey</wa-tag>
-          <wa-tag size="small">Pleistocene Birds</wa-tag>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="ruler"></wa-icon>
-          <span class="wa-caption-m">L 21.5" | WS 48.5"</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="earth-americas"></wa-icon>
-          <span class="wa-caption-m">North America (Widespread), Central America (Limited), South America (Limited)</span>
-        </div>
-        <div class="wa-flank">
-          <wa-icon name="shield-heart"></wa-icon>
-          <span class="wa-caption-m">Least Concern</span>
-        </div>
-      </div>
-      <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>
-  </header>
-  <main class="wa-body-l">
-    <h2 id="identification">Identification</h2>
-    <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Eget habitant scelerisque lectus ultrices nascetur aliquet sapien primis. Cursus sapien fusce semper nulla elit sociosqu lectus per sem. Sem ad porttitor dictum nisl pharetra tortor convallis. Sit molestie hendrerit porta dictum tortor posuere euismod magna. Mauris suspendisse pharetra finibus; eleifend etiam ridiculus.</p>
-    <h2 id="range">Range and Habitat</h2>
-    <p>Diam sed ipsum pretium porttitor class cubilia elementum. Blandit felis ligula habitant ultricies vulputate rutrum lacus commodo pulvinar. Nostra semper placerat lectus in dis eu. Sagittis ipsum placerat rhoncus lacus id eget. Erat pharetra aptent enim, augue accumsan ultricies inceptos habitasse. Senectus id maximus parturient tellus; fermentum posuere vulputate luctus. Ac tempus dapibus vehicula ligula ullamcorper sit duis.</p>
-    <h2 id="behavior">Behavior</h2>
-    <p>Erat vitae luctus arcu taciti malesuada pretium arcu justo primis. Cubilia vitae maecenas congue velit id netus arcu. Dictum vel pellentesque taciti fermentum risus consectetur amet. Faucibus commodo habitasse sem maximus praesent purus, dignissim tristique porta. Platea magna justo ipsum ut metus ac facilisi. Imperdiet laoreet pharetra maximus lacus tortor suscipit. Nam quisque iaculis orci porttitor pellentesque rhoncus. Molestie sagittis tincidunt quisque nisi non urna conubia.</p>
-    <h2 id="conservation">Conservation</h2>
-    <p>Nullam magna quam quisque eu varius integer. Inceptos donec facilisi risus himenaeos semper mollis habitasse. Vehicula lacus vivamus euismod pharetra mollis dictum. Ante ex tortor elementum eleifend habitasse orci aliquam. Fames erat senectus fames etiam dapibus cursus.</p>
-  </main>
-  <footer slot="main-footer">
-    <section>
-      <h2 class="wa-heading-m">Sources</h2>
-      <ul class="wa-body-s">
-        <li><cite><a href="https://www.audubon.org/field-guide/bird/great-horned-owl" target="_blank" rel="noopener">Great Horned Owl</a></cite>, National Audubon Society. Retrieved 5 December 2024.</li>
-        <li><cite><a href="https://www.allaboutbirds.org/guide/Great_Horned_Owl/" target="_blank" rel="noopener">Great Horned Owl</a></cite>, All About Birds by CornellLab. Retrieved 5 December 2024.</li>
-        <li>Armistead, G. L. (2015). <cite>Field guide to birds of Pennsylvania</cite>. Scott & Nix, Inc.</li>
-      </ul>
-    </section>
-  </footer>
-  <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">
-        <img src="https://images.unsplash.com/photo-1635254859323-65b78408dcca?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Long-eared Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Asio otus</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1661350356618-f5915c7b6a3c?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Northen Hawk Owl</span>
-        <span class="wa-caption-s" lang="la"><em>Surnia ulula</em></span>
-      </div>
-    </wa-card>
-    <wa-card with-image>
-      <div slot="image" class="wa-frame">
-        <img src="https://images.unsplash.com/photo-1660307777355-f08bced145d3?q=20" alt="" />
-      </div>
-      <div class="wa-stack wa-gap-3xs">
-        <span class="wa-heading-s">Golden Eagle</span>
-        <span class="wa-caption-s" lang="la"><em>Aquila chrysaetos</em></span>
-      </div>
-    </wa-card>
-  </aside>
-  <footer slot="footer" class="wa-grid wa-gap-xl">
-    <div class="wa-cluster" style="flex-wrap: nowrap;">
-      <wa-icon name="feather-pointed" style="font-size: 1.5em;"></wa-icon>
-      <span class="wa-heading-s">Audubon Worldwide</span>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Our Work</h3>
-      <a href="#">Habitat Restoration</a>
-      <a href="#">Migration Science</a>
-      <a href="#">Advocacy</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">About Us</h3>
-      <a href="#">Our History</a>
-      <a href="#">Leadership</a>
-      <a href="#">Fiscal Reports</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Discover</h3>
-      <a href="#">Field Guides</a>
-      <a href="#">Photo Search</a>
-      <a href="#">Gear and Resources</a>
-    </div>
-    <div class="wa-stack">
-      <h3 class="wa-heading-xs">Get Involved</h3>
-      <a href="#">Adopt a Bird</a>
-      <a href="#">Your Local Audubon</a>
-      <a href="#">Youth Audubon Camps</a>
-    </div>
-  </footer>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 15rem;
-    --aside-width: 15rem;
-  }
-  wa-page[view='desktop'] {
-    [slot*='navigation'] {
-      border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    }
-  }
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-    --aside-width: auto;
-  }
-
-  [slot='banner'] {
-    --wa-color-text-link: var(--wa-color-neutral-on-loud);
-    background-color: var(--wa-color-neutral-fill-loud);
-  }
-  [slot='header'] {
-    --wa-link-decoration-default: none;
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot*='header'] a {
-    font-weight: var(--wa-font-weight-action);
-  }
-  [slot='subheader'] {
-    background-color: var(--wa-color-surface-lowered);
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='navigation-header'] {
-    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-
-  [slot*='navigation'] a {
-    --wa-color-text-link: var(--wa-color-text-normal);
-  }
-  [slot='navigation-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-
-    .wa-flank {
-      --flank-size: 1.25em;
-    }
-  }
-  [slot='main-header'],
-  main,
-  [slot='main-footer'] {
-    max-inline-size: 60rem;
-    margin-inline: auto;
-  }
-  [slot='main-footer'] {
-    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  [slot='footer'] {
-    --wa-color-text-link: var(--wa-color-text-quiet);
-    background-color: var(--wa-color-surface-lowered);
-    font-size: var(--wa-font-size-s);
-  }
-</style>
-
-<script>
-  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
-</script>
-```
-
-### Media
-
-A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
-
-```html {.example viewport="1600"}
-<wa-page class="wa-dark">
-  <header slot="header">
-    <div class="wa-cluster">
-      <wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
-      <wa-icon name="record-vinyl"></wa-icon>
-      <span class="wa-heading-m">radiogaga</span>
-    </div>
-    <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">
-      <wa-button appearance="outlined">Log In</wa-button>
-      <wa-button>Sign Up</wa-button>
-    </div>
-  </header>
-  <div slot="navigation-header" class="wa-split">
-    <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">
-      <h2 class="wa-heading-s">For You</h2>
-      <wa-icon-button id="settings" name="gear" label="Settings"></wa-icon-button>
-    </div>
-  </div>
-  <nav slot="navigation">
-    <h3 class="wa-heading-xs">Discover</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="house"></wa-icon>
-          <span>Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="star"></wa-icon>
-          <span>New</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="tower-broadcast"></wa-icon>
-          <span>Stations</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Library</h3>
-    <ul class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="heart"></wa-icon>
-          <span>Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="bars-staggered"></wa-icon>
-          <span>Playlists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="microphone-lines"></wa-icon>
-          <span>Artists</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="layer-group"></wa-icon>
-          <span>Albums</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="podcast"></wa-icon>
-          <span>Podcasts</span>
-        </a>
-      </li>
-    </ul>
-    <h3 class="wa-heading-xs">Recently Played</h3>
-    <ul id="recent" class="wa-stack wa-gap-0">
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="radio" style="background: var(--wa-color-red-90); color: var(--wa-color-red-60);"></wa-icon>
-          <span>Lo-Fi Station</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="font-awesome" style="background: var(--wa-color-blue-30); color: var(--wa-color-yellow-90);"></wa-icon>
-          <span>Podcast Awesome</span>
-        </a>
-      </li>
-      <li>
-        <a href="#" class="wa-flank">
-          <wa-icon name="seedling" style="background: var(--wa-color-green-70); color: var(--wa-color-green-90);"></wa-icon>
-          <div class="wa-stack wa-gap-0">
-            <span>Seasons</span>
-            <span class="wa-caption-s">Blister Soul</span>
-          </div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-  <div slot="main-header">
-    <wa-icon-button id="back" name="chevron-left" label="Back"></wa-icon-button>
-    <wa-tooltip for="back" placement="bottom" distance="2">Back</wa-tooltip>
-    <div class="wa-cluster">
-      <wa-icon-button id="favorite" name="heart" variant="regular" label="Favorite"></wa-icon-button>
-      <wa-tooltip for="favorite" placement="bottom" distance="2">Favorite</wa-tooltip>
-      <wa-icon-button id="options" name="ellipsis" label="Options"></wa-icon-button>
-      <wa-tooltip for="options" placement="bottom" distance="2">Options</wa-tooltip>
-    </div>
-  </div>
-  <main>
-    <div class="wa-stack wa-gap-3xl">
-      <div class="wa-flank wa-gap-3xl" style="--content-percentage: 40%;">
-        <div class="wa-frame wa-border-radius-l" style="max-inline-size: 40ch;">
-          <img src="https://images.unsplash.com/photo-1732430579016-8d5e5ebd3c99?q=20" alt="Home for the Holidays album artwork" />
-        </div>
-        <div class="wa-split:column wa-align-items-start">
-          <div class="wa-stack" style="margin-block: auto;">
-            <h1 class="wa-heading-3xl">Home for the Holidays</h1>
-            <a href="#" class="wa-heading-m">The Shire Choir</a>
-            <div class="wa-cluster wa-caption-m wa-gap-2xs">
-              <span>Holiday</span>
-              <span>&bull;</span>
-              <span>2024</span>
-              <span>&bull;</span>
-              <span>12 songs, 41 minutes 9 seconds</span>
-            </div>
-          </div>
-          <div id="play-controls" class="wa-split wa-gap-xl">
-            <div class="wa-cluster wa-gap-xl">
-              <wa-icon-button name="play" label="Play"></wa-icon-button>
-              <wa-icon-button name="shuffle" label="Shuffle"></wa-icon-button>
-            </div>
-            <wa-icon-button name="plus" label="Add to Library"></wa-icon-button>
-          </div>
-        </div>
-      </div>
-      <ol class="wa-stack wa-gap-0">
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="1"></wa-icon>
-            <span>Fa-La-La-Fellowship</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="2"></wa-icon>
-            <span>Sleigh Ride</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:36</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="3"></wa-icon>
-            <span>All I Want For Christmas Is Stew</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:51</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="4"></wa-icon>
-            <span>Rockin' Around the Christmas Ent</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:05</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="5"></wa-icon>
-            <span>Merry, Did You Know?</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">1:56</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="6"></wa-icon>
-            <span>Run Run Shadowfax</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:32</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="7"></wa-icon>
-            <span>You're a Mean One, Mr. Grima</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:46</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="8"></wa-icon>
-            <span>O Come, All Ye Faithful</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:27</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <wa-icon name="9"></wa-icon>
-            <span>Do You Hear What I Hear</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:13</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="0"></wa-icon>
-            </span>
-            <span>Carol of the Horns</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">2:55</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="1"></wa-icon>
-            </span>
-            <span>Silent Night</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:10</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-        <li class="wa-split">
-          <span class="wa-flank">
-            <span class="wa-cluster wa-gap-3xs">
-              <wa-icon name="1"></wa-icon>
-              <wa-icon name="2"></wa-icon>
-            </span>
-            <span>Wizard Wonderland</span>
-          </span>
-          <span class="wa-cluster">
-            <span class="wa-caption-m">3:22</span>
-            <wa-icon-button name="ellipsis" label="Song Options"></wa-icon-button>
-          </span>
-        </li>
-      </ol>
-    </div>
-  </main>
-  <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-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-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-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>
-      <span class="wa-caption-s">The Shire Choir</span>
-    </div>
-  </div>
-</wa-page>
-
-<style>
-  wa-page {
-    --menu-width: 30ch;
-    --wa-tooltip-arrow-size: 0;
-    background-color: var(--wa-color-surface-lowered);
-  }
-
-  wa-page[view='mobile'] {
-    --menu-width: auto;
-
-    [slot*='main'], main {
-      padding: var(--wa-space-xl);
-    }
-  }
-
-  wa-page,
-  [slot='header'],
-  wa-page[view='desktop'] [slot*='navigation'] {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  wa-page[view='mobile'] [slot*='navigation'] {
-    padding: 0;
-  }
-  wa-page::part(base) {
-    background-color: var(--wa-color-surface-lowered);
-  }
-  [slot='header'] {
-    background: linear-gradient(to bottom, var(--wa-color-surface-raised), var(--wa-color-surface-lowered));
-  }
-  [slot='navigation-header'],
-  [slot='main-header'] {
-    padding-block-end: 0 !important;
-    padding-block-start: var(--wa-space-3xl);
-  }
-  [slot='navigation'] {
-    a {
-      --wa-color-text-link: var(--wa-color-text-normal);
-      --wa-link-decoration-default: none;
-      --wa-link-decoration-hover: none;
-      --flank-size: 2rem;
-      font-weight: var(--wa-font-weight-action);
-      gap: 0.5rem;
-    }
-    ul {
-      list-style: none;
-      margin: 0;
-
-      a {
-        border-radius: var(--wa-border-radius-m);
-        padding: var(--wa-space-xs);
-
-        &:hover {
-          background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-        }
-      }
-    }
-    wa-icon {
-      align-items: center;
-      aspect-ratio: 1;
-      color: var(--wa-color-brand-fill-loud);
-      display: flex;
-      height: var(--flank-size);
-      justify-content: center;
-    }
-    #recent wa-icon {
-      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);
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    border-radius: var(--wa-border-radius-l) var(--wa-border-radius-l) 0 0
-  }
-  main,
-  [slot*='main'] {
-    margin-inline: var(--wa-space-m);
-  }
-  main ol li {
-    padding: var(--wa-space-m);
-
-    &:hover {
-      background-color: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-brand-fill-quiet));
-    }
-
-    &:not(:first-child) {
-      border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-    }
-
-    .wa-flank {
-      --flank-size: 2rem;
-    }
-  }
-  main,
-  [slot='main-footer'] {
-    border-inline: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
-  }
-  main,
-  [slot='main-header'] {
-    background-color: var(--wa-color-surface-raised);
-  }
-  #play-controls wa-icon-button::part(base) {
-    border: var(--wa-border-width-l) var(--wa-border-style) currentColor;
-    border-radius: var(--wa-border-radius-circle);
-    font-size: 1.5rem;
-  }
-  #play-controls wa-icon-button[name="play"]::part(base) {
-    background-color: var(--wa-color-brand-fill-loud);
-    border: none;
-    color: var(--wa-color-brand-on-loud);
-    font-size: 3rem;
-    padding: 0.5em 0.45em 0.5em 0.55em;
-  }
-  [slot='main-footer'].wa-grid > * {
-    max-inline-size: 30ch;
-  }
-</style>
-
-<script>
-  const sectionAnchors = document.querySelectorAll("[slot*='navigation'] a[href*='#']");
-  sectionAnchors.forEach((sectionAnchor) => sectionAnchor.setAttribute("data-drawer", "close"));
-</script>
-```
-
-
-## Customization
-
-### Sticky Sections
-
-The following sections of a page are "sticky" by default, meaning they remain in position as the user scrolls.
-
-- `banner`
-- `header`
-- `sub-header`
-- `menu` (`navigation` itself is not sticky, but its parent `menu` is)
-- `aside`
-
-This is often desirable, but you can change this behavior using the `disable-sticky` attribute. Use a space-delimited list of names to tell the page which sections should not be sticky.
-
-```html
-<wa-page disable-sticky="header aside"> ... </wa-page>
-```
-
-### Skip To Content
-
-The layout provides a "skip to content" link that's visually hidden until the user tabs into it. You don't have to do anything to configure this, unless you want to change the text displayed in the link. In that case, you can slot in your own text using the `skip-to-content` slot.
-
-This example localizes the "skip to content" link for German users.
-
-```html
-<wa-page>
-  ...
-  <span slot="skip-to-content">Zum Inhalt springen</span>
-  ...
-</wa-page>
-```
-
-### Responsiveness
-
-A page isn't very opinionated when it comes to responsive behaviors, but there are tools in place to help make responsiveness easy.
-
-#### Default Slot Styles
-
-Each slot is a [flex container](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) and specifies some flex properties so that your content is reasonably responsive by default.
-
-The following slots specify `justify-content: space-between` and `flex-wrap: wrap` to evenly distribute child elements horizontally and allow them to wrap when space is limited:
-- `header`
-- `subheader`
-- `main-header`
-- `main-footer`
-- `footer`
-
-The following slots specify `flex-direction: column` to arrange child elements vertically:
-- `navigation-header`
-- `navigation` (or `menu`)
-- `navigation-footer`
-- `aside`
-
-And the `banner` slot specifies `justify-content: center` to horizontally center its child elements.
-
-You can override the default display and flex properties for each slot with your own CSS.
-
-#### Responsive Navigation
-
-When you use the `navigation` slot, your slotted content automatically collapses into a drawer on smaller screens.
-The breakpoint at which this occurs is `768px` by default, but you can change it using the `mobile-breakpoint` attribute,
-which takes either a number or a [CSS length](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
-
-```html
-<wa-page mobile-breakpoint="600"> ... </wa-page>
-```
-```html {.example viewport}
-<wa-page mobile-breakpoint="50ch">
-  <div slot=navigation>Nav</div>
-  <header slot=header>
-    <div style="width: 50ch; background: gold">I’m 50ch wide</div>
-  </header>
-</wa-page>
-<style>
-html,
-body {
-  min-height: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-}
-</style>
-```
-
-By default, a "hamburger" button appears in the `header` slot to toggle the navigation menu on smaller screens.
-You can customize what this looks like by slotting your own button in the `toggle-navigation` slot,
-or place the `data-toggle-nav` attribute on any button on your page (This _does not_ have to be a Web Awesome element.).
-The default button not be shown when using either of these methods — if you want to use multiple navigation toggles on your page, simply add the `data-toggle-nav` attribute to multiple elements.
-
-```html
-<wa-page mobile-breakpoint="600">
-  ...
-  <wa-button data-toggle-nav>Menu</wa-button>
-  ...
-</wa-page>
-```
-
-Alternatively, you can apply `nav-state="open"` and `nav-state="closed"` to the layout component to show and hide the navigation, respectively.
-
-```html
-<wa-page nav-state="open"> ... </wa-page>
-```
-
-`<wa-page>` is given the attribute `view="mobile"` or `view="desktop"` when the viewport narrower or wider than the `mobile-breakpoint` value, respectively. You can leverage these attributes to change styles depending on the size of the viewport.
-This is especially useful to hide your `data-toggle-nav` button when the viewport is wider:
-```css
-wa-page[view='desktop'] [data-toggle-nav] {
-  display: none;
-}
-```
-
-::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`.
-
-If you specify `--menu-width` to apply a specific width to your `navigation` slot, space will still be reserved on the page even below the `mobile-breakpoint`. To collapse this space on smaller screens, add the following code to your styles:
-```css
-wa-page[view='mobile'] {
-  --menu-width: auto;
-}
-```
-
-You can use a similar approach for `--aside-width` to hide the `aside` slot on smaller screens. Be sure to also specify `display: none` for the slot:
-```css
-wa-page[view='mobile'] {
-  --aside-width: auto;
-
-   [slot='aside'] {
-    display: none;
-  }
-}
-```
-
-### Spacing
-
-A page specifies default `padding` within each slot and a `gap` between the slot's direct children. You can drop elements into any slot, and reasonable spacing is already applied for you.
-
-You can override the default spacing for each slot with your own CSS. In this example, we're setting custom `gap` and `padding` for the `footer` slot:
-```css
-[slot="footer"] {
-  gap: var(--wa-space-xl);
-  padding: var(--wa-space-xl);
-}
-```
-
-## 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/page/demo-page.css

@@ -1,66 +0,0 @@
-body {
-  padding: 0;
-  margin: 0;
-}
-
-wa-page {
-  margin: var(--wa-space-xs);
-  margin-inline-start: 0;
-  &::part(base),
-  &::part(main),
-  &::part(navigation),
-  &::part(body) {
-    gap: var(--wa-space-xs);
-  }
-}
-
-:is([slot='banner'], [slot='header'], [slot='subheader'], [slot='footer'], [slot*='navigation']) {
-  margin-inline-start: var(--wa-space-xs);
-}
-
-.slot-content[slot='banner'],
-.slot-content[slot='header'],
-.slot-content[slot='subheader'] {
-  outline: 2px solid var(--wa-color-surface-default);
-}
-
-.slot-content {
-  padding: var(--wa-space-m);
-  border-radius: var(--wa-border-radius-m);
-  align-content: center;
-  justify-content: center;
-  text-align: center;
-  height: 100%;
-  box-sizing: border-box;
-  background: var(--wa-color-blue-80);
-  color: var(--wa-color-blue-20);
-
-  &[slot='banner'] {
-    background: var(--wa-color-blue-50);
-    color: white;
-  }
-
-  &[slot='header'] {
-    background: var(--wa-color-blue-60);
-    color: var(--wa-color-blue-10);
-  }
-
-  &[slot^='main'],
-  &[slot=''] {
-    background: var(--wa-color-gray-80);
-    color: var(--wa-color-gray-20);
-  }
-
-  &[slot^='navigation'] {
-    background: var(--wa-color-violet-80);
-    color: var(--wa-color-violet-20);
-  }
-
-  strong {
-    display: block;
-  }
-
-  &:not([slot='']) p {
-    display: none;
-  }
-}

docs/docs/components/page/demo.css

@@ -1,23 +0,0 @@
-#page_slots_demo {
-  display: flex;
-  flex-flow: column;
-  gap: 1em;
-  margin-bottom: var(--wa-space-xl);
-
-  fieldset .options {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
-    gap: 0.2em 1em;
-
-    wa-checkbox {
-      white-space: nowrap;
-    }
-
-    p {
-      display: contents;
-    }
-  }
-
-  wa-viewport-demo {
-  }
-}

docs/docs/components/page/demo.js

@@ -1,51 +0,0 @@
-let container = document.getElementById('page_slots_demo');
-
-let fieldset = container.querySelector('fieldset');
-let iframe = container.querySelector('iframe');
-let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
-  .map(i => i.outerHTML)
-  .join('\n');
-let includes = `${stylesheets}
-  <script src="/dist/webawesome.loader.js" type="module"></script>
-  <link rel="stylesheet" href="./demo-page.css">`;
-
-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 => {
-      let name = slot.getAttribute('value');
-      let description = slot.getAttribute('data-description');
-
-      let tag = 'div';
-      if (name.endsWith('header')) {
-        tag = 'header';
-      }
-      if (name.endsWith('footer')) {
-        tag = 'footer';
-      }
-
-      return `<${tag} class="slot-content" slot="${name}">
-		<strong>${name || 'main <em>(default)</em>'}</strong>
-		<p>${description}</p>
-	</${tag}>`;
-    })
-    .join('\n');
-  let page = iframe.contentDocument?.querySelector('wa-page');
-
-  if (page) {
-    page.innerHTML = slotsHTML;
-  } else {
-    iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
-  }
-}
-await render();
-fieldset?.addEventListener('input', render);

docs/docs/components/radio-button.md

@@ -1,151 +0,0 @@
----
-title: Radio Button
-description: Radios buttons allow the user to select a single option from a group using a button-like control.
-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.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-## Examples
-
-### Checked States
-
-To set the initial value and checked state, use the `value` attribute on the containing radio group.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio button.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2" disabled>Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Sizes
-
-Use the `size` attribute to change a radio button's size.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Pill Buttons
-
-Use the `pill` attribute to give radio buttons rounded edges.
-
-```html {.example}
-<wa-radio-group size="small" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-
-<br />
-
-<wa-radio-group size="large" label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button pill value="1">Option 1</wa-radio-button>
-  <wa-radio-button pill value="2">Option 2</wa-radio-button>
-  <wa-radio-button pill value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-```
-
-### Prefix and Suffix Icons
-
-Use the `prefix` and `suffix` slots to add icons.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal"  name="a" value="1">
-  <wa-radio-button value="1">
-    <wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
-    Option 1
-  </wa-radio-button>
-
-  <wa-radio-button value="2">
-    <wa-icon slot="suffix" name="bag-shopping" variant="solid"></wa-icon>
-    Option 2
-  </wa-radio-button>
-
-  <wa-radio-button value="3">
-    <wa-icon slot="prefix" name="gift" variant="solid"></wa-icon>
-    <wa-icon slot="suffix" name="shopping-cart" variant="solid"></wa-icon>
-    Option 3
-  </wa-radio-button>
-</wa-radio-group>
-```
-
-### Buttons with Icons
-
-You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
-
-```html {.example}
-<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
-  <wa-radio-button value="angry">
-    <wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="sad">
-    <wa-icon name="face-frown" variant="solid" label="Sad"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="neutral">
-    <wa-icon name="face-meh" variant="solid" label="Neutral"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="happy">
-    <wa-icon name="face-smile" variant="solid" label="Happy"></wa-icon>
-  </wa-radio-button>
-
-  <wa-radio-button value="laughing">
-    <wa-icon name="face-laugh" variant="solid" label="Laughing"></wa-icon>
-  </wa-radio-button>
-</wa-radio-group>
-```

docs/docs/components/viewport-demo.md

@@ -1,70 +0,0 @@
----
-title: Viewport Demo
-description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
-tags: component
-noAlpha: true
----
-
-```html {.example}
-<wa-viewport-demo viewport="1200">
-  <iframe src="."></iframe>
-</wa-viewport-demo>
-```
-
-:::warning
-A lot of the functionality of this component will not work on cross-origin iframes.
-:::
-
-## Examples
-
-### Arbitrary HTML content
-
-You can render arbitrary HTML content in the iframe by using the `srcdoc` attribute:
-
-```html {.example}
-<wa-viewport-demo>
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-### Viewport Emulation
-
-You can also provide a width value to emulate and it will be scaled accordingly:
-
-```html {.example}
-<wa-viewport-demo viewport="300">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;wa-button&gt;Click me!&lt;/wa-button&gt;
-  "></iframe>
-</wa-viewport-demo>
-```
-
-By default, the viewport will be rendered to an initial 16:9 aspect ratio,
-which can be changed via resizing.
-You can customize this via the `--viewport-initial-aspect-ratio` property.
-Or, you could add a height value:
-
-```html {.example}
-<wa-viewport-demo viewport="1600 x 1000">
-  <iframe srcdoc="
-    &lt;button&gt;Click me!&lt;/button&gt;
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-    &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus et tortor vel ullamcorper. Fusce tristique et justo quis auctor. In tristique dignissim dignissim. Fusce lacus urna, efficitur vel fringilla sed, hendrerit at ipsum. Donec suscipit ante ac ligula imperdiet varius. Aliquam ullamcorper augue sit amet lectus euismod finibus. Proin semper, diam at rhoncus posuere, diam dui semper turpis, ut faucibus mi ipsum nec ante. Morbi varius nibh ut facilisis varius. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce in blandit velit. Aliquam massa eros, commodo eu vestibulum a, faucibus non risus.
-"></iframe>
-</wa-viewport-demo>
-```
-
-## Roadmap
-
-This component is a work in progress.
-Some of the things that are not yet implemented are listed below.
-It goes without saying that this list is a rough plan and subject to change.
-
-- Non-linear zoom scale
-- Extend to general content, not just iframes
-- Styles for mobile and tablet frames and an attribute to switch between them
-- Automatic iframe height

docs/docs/docs.11tydata.js

@@ -1,10 +0,0 @@
-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/native/button.md

@@ -1,144 +0,0 @@
----
-title: Button
-description: 'Button styles apply your Web Awesome theme to native HTML buttons. Buttons are activated by users to perform actions, such as submitting a form.'
-tags: forms
-component: button
-icon: button
-snippets:
-  '<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
-  '.wa-button': false
-file: styles/native/button.css
----
-
-```html {.example}
-<button>Button</button>
-<input type="button" value="Input (button)">
-<input type="reset" value="Input (reset)">
-<input type="submit" value="Input (submit)">
-```
-
-## Examples
-
-### Variants
-
-Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
-
-```html {.example}
-<button class="wa-neutral">Neutral</button>
-<button class="wa-brand">Brand</button>
-<button class="wa-success">Success</button>
-<button class="wa-warning">Warning</button>
-<button class="wa-danger">Danger</button>
-```
-
-### Appearance
-
-Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
-
-```html {.example}
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-neutral">A + O</button>
-  <button class="wa-accent wa-neutral">Accent</button>
-  <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-filled wa-outlined wa-neutral">F + O</button>
-  <button class="wa-filled wa-neutral">Filled</button>
-  <button class="wa-plain wa-neutral">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-brand">A + O</button>
-  <button class="wa-accent wa-brand">Accent</button>
-  <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-filled wa-outlined wa-brand">F + O</button>
-  <button class="wa-filled wa-brand">Filled</button>
-  <button class="wa-plain wa-brand">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-success">A + O</button>
-  <button class="wa-accent wa-success">Accent</button>
-  <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-filled wa-outlined wa-success">F + O</button>
-  <button class="wa-filled wa-success">Filled</button>
-  <button class="wa-plain wa-success">Plain</button>
-</div>
-<div style="margin-block-end: 1rem;">
-  <button class="wa-accent wa-outlined wa-warning">A + O</button>
-  <button class="wa-accent wa-warning">Accent</button>
-  <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-filled wa-outlined wa-warning">F + O</button>
-  <button class="wa-filled wa-warning">Filled</button>
-  <button class="wa-plain wa-warning">Plain</button>
-</div>
-<div>
-  <button class="wa-accent wa-outlined wa-danger">A + O</button>
-  <button class="wa-accent wa-danger">Accent</button>
-  <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-filled wa-outlined wa-danger">F + O</button>
-  <button class="wa-filled wa-danger">Filled</button>
-  <button class="wa-plain wa-danger">Plain</button>
-</div>
-```
-
-### Sizes
-
-Use the [size utility classes](../utilities/size.md) to change a button's size.
-
-```html {.example}
-<button class="wa-size-s">Small</button>
-<button class="wa-size-m">Medium</button>
-<button class="wa-size-l">Large</button>
-```
-
-### Pill Buttons
-
-Use the `wa-pill` class to give buttons rounded edges.
-
-```html {.example}
-<button class="wa-size-s wa-pill">Small</button>
-<button class="wa-size-m wa-pill">Medium</button>
-<button class="wa-size-l wa-pill">Large</button>
-```
-
-### Link Buttons
-
-It's often helpful to have a link that looks like a button.
-This is possible by adding a `wa-button` class to your link.
-
-```html {.example}
-<a href="https://example.com/" class="wa-button">Link</a>
-<a href="https://example.com/" target="_blank" class="wa-button">New Window</a>
-<a href="/assets/images/logo.svg" download="shoelace.svg" class="wa-button">Download</a>
-```
-
-### Setting a Custom Width
-
-As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
-
-```html {.example}
-<button class="wa-size-s" style="width: 100%; margin-bottom: 1rem;">Small</button>
-<button class="wa-size-m" style="width: 100%; margin-bottom: 1rem;">Medium</button>
-<button class="wa-size-l" style="width: 100%;">Large</button>
-```
-<!--
-
-### Loading
-
-Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
-
-```html {.example}
-<button class="wa-brand" loading>Brand</button>
-<button class="wa-success" loading>Success</button>
-<button class="wa-neutral" loading>Neutral</button>
-<button class="wa-warning" loading>Warning</button>
-<button class="wa-danger" loading>Danger</button>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a button.
-
-```html {.example}
-<button class="wa-brand" disabled>Brand</button>
-<button class="wa-success" disabled>Success</button>
-<button class="wa-neutral" disabled>Neutral</button>
-<button class="wa-warning" disabled>Warning</button>
-``` -->

docs/docs/native/callout.md

@@ -1,118 +0,0 @@
----
-title: Callout
-description: Callouts are used to display important messages inline.
-component: callout
-icon: callout
-snippets: '.wa-callout'
-noAlpha: true
-file: styles/native/callout.css
----
-
-```html {.example}
-<article class="wa-callout">
-  This is a callout style, applied to a standard article element.
-</article>
-```
-
-## Examples
-
-### Variants
-
-Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
-
-```html {.example}
-<article class="wa-callout wa-brand">
-  <strong>This is super informative</strong><br />
-  You can tell by how pretty the callout is.
-</article>
-
-<br />
-
-<article class="wa-callout wa-success">
-  <strong>Your changes have been saved</strong><br />
-  You can safely exit the app now.
-</article>
-
-<br />
-
-<article class="wa-callout wa-neutral">
-  <strong>Your settings have been updated</strong><br />
-  Settings will take effect on next login.
-</article>
-
-<br />
-
-<article class="wa-callout wa-warning">
-  <strong>Your session has ended</strong><br />
-  Please login again to continue.
-</article>
-
-<br />
-
-<article class="wa-callout wa-danger">
-  <strong>Your account has been deleted</strong><br />
-  We're very sorry to see you go!
-</article>
-```
-
-### Appearance
-
-Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
-
-```html {.example}
-<article class="wa-callout wa-brand wa-outlined wa-accent">
-  This <strong>accent</strong> callout is also <strong>outlined</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-accent">
-  This <strong>accent</strong> callout draws attention without an outline
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-outlined wa-filled">
-  This callout is both <strong>filled</strong> and <strong>outlined</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-filled">
-  This callout is only <strong>filled</strong>
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-outlined">
-  Here's an <strong>outlined</strong> callout
-</article>
-
-<br />
-
-<article class="wa-callout wa-brand wa-plain">
-  No bells and whistles on this <strong>plain</strong> callout
-</article>
-```
-
-### Sizes
-
-Use the [size utility classes](../utilities/size.md) to change a callout's size.
-
-```html {.example}
-<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
-  This is meant to be very emphasized.
-</article>
-
-<br />
-
-<article class="wa-callout">
-  Normal-sized callout.
-</article>
-
-<br />
-
-<article class="wa-callout wa-plain wa-plain wa-size-s">
-  Just a small tip!
-</article>
-```

docs/docs/native/checkbox.md

@@ -1,90 +0,0 @@
----
-title: Checkbox
-description: Checkboxes allow the user to toggle an option on or off.
-tags: forms
-component: checkbox
-icon: checkbox
-elements:
-  "<input type=checkbox>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
-file: styles/native/checkbox.css
----
-
-```html {.example}
-<label><input type="checkbox"> Checkbox</label>
-```
-
-## Examples
-
-### Checked
-
-Use the `checked` attribute to activate the checkbox.
-
-```html {.example}
-<label><input type="checkbox" checked> Checked</label>
-```
-
-<!--
-### Indeterminate
-
-Use the `indeterminate` JS property to make the checkbox indeterminate.
-
-```html {.example}
-<label><input type="checkbox" class="indeterminate"> Indeterminate</label>
-<script>
-  document.querySelector(".indeterminate").indeterminate = true;
-</script>
-```
--->
-
-### Disabled
-
-Use the `disabled` attribute to disable the checkbox.
-
-```html {.example}
-<label><input type="checkbox" disabled> Disabled</label>
-```
-
-<!--
-### Sizes
-
-Use the [size utilities](/docs/utilities/size) to change a checkbox's size.
-
-```html {.example}
-<label><input type="checkbox" class="wa-size-s"> Small</label>
-<br />
-<label><input type="checkbox" class="wa-size-m"> Medium</label>
-<br />
-<label><input type="checkbox" class="wa-size-l"> Large</label>
-```
--->
-
-### Custom Validity
-
-Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
-
-```html {.example}
-<form class="custom-validity">
-  <label><input type="checkbox"> Check me</label>
-  <br />
-  <button type="submit" variant="brand" style="margin-top: 1rem;">Submit</button>
-</form>
-<script>
-  const form = document.querySelector('.custom-validity');
-  const checkbox = form.querySelector('input[type=checkbox]');
-  const errorMessage = `Don't forget to check me!`;
-
-  // Set initial validity
-  checkbox.setCustomValidity(errorMessage);
-
-  // Update validity on change
-  checkbox.addEventListener('change', () => {
-    checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
-  });
-
-  // Handle submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
-  });
-</script>
-```

docs/docs/native/content.md

@@ -1,92 +0,0 @@
----
-title: Content
-description: 'Content styles apply your Web Awesome theme to HTML text content, code, and images.'
-tags: content
-layout: element
-icon: skeleton
-elements:
-  "<h1>-<h6>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
-  "<blockquote>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
-  "<strong>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
-  "<em>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
-  "<u>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
-  "<del>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
-  "<ins>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
-  "<s>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
-  "<small>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
-  "<sub>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
-  "<sup>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
-  "<abbr>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
-  "<kbd>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
-  "<mark>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
-  "<a>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
-  "<code>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
-  "<img>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
-file: styles/native/content.css
----
-
-
-## Typography
-
-Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
-
-Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque.
-
-> What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice.
->
-> — Tim Berners-Lee
-
-## Inline Text
-
-```html
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-```
-
-<div class="two-columns">
-  <p><strong>Bold</strong></p>
-  <p><em>Italics</em></p>
-  <p><u>Underline</u></p>
-  <p><del>Deleted</del></p>
-  <p><ins>Inserted</ins></p>
-  <p><s>Strike-through</s></p>
-  <p><small>Small</small></p>
-  <p><span>Text <sub>Sub</sub></span></p>
-  <p><span>Text <sup>Sup</sup></span></p>
-  <p><abbr title="Abbreviation">Abbr.</abbr></p>
-  <p><kbd>Keyboard</kbd></p>
-  <p><mark>Highlighted</mark></p>
-  <p><a href="#">Link text</a></p>
-  <p><code>Inline code</code></p>
-</div>
-
-## Headings
-
-### Heading 3
-
-Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
-
-#### Heading 4
-
-Gravida arcu ac tortor dignissim convallis aenean. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Donec adipiscing tristique risus nec feugiat in.
-
-##### Heading 5
-
-Enim diam vulputate ut pharetra sit. Enim facilisis gravida neque convallis a cras. Enim neque volutpat ac tincidunt vitae semper. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.
-
-###### Heading 6
-
-Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Facilisis mauris sit amet massa vitae. Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum.
-
-
-## Code Blocks
-
-```
-// do a thing
-export function thing() {
-  return true;
-}
-```
-
-## Images
-
-![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)

docs/docs/native/details.md

@@ -1,53 +0,0 @@
----
-title: Details
-description: 'Details styles apply your Web Awesome theme to the HTML `<details>` element. Details show a brief summary and expand to show additional content.'
-tags: apps
-layout: element
-component: details
-icon: details
-elements:
-  "<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
-file: styles/native/details.css
----
-
-```html {.example}
-<details>
-  <summary>Tincidunt nunc pulvinar</summary>
-  <p>Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.</p>
-</details>
-```
-
-## Examples
-
-### Right-to-Left Languages
-
-The details styling automatically adapts to right-to-left languages:
-
-```html {.example}
-<details lang="ar" dir="rtl">
-  <summary>تبديلني</summary>
-  استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
-</details>
-```
-
-## Accordions
-
-In [modern browsers](https://caniuse.com/mdn-html_elements_details_name),
-grouping `<details>` elements via the `name` attribute provides accordion-style functionality:
-
-```html {.example}
-<details name="details-accordion">
-  <summary>Enim diam</summary>
-  <p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Arcu non odio</summary>
-  <p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
-</details>
-
-<details name="details-accordion">
-  <summary>Ut porttitor</summary>
-  <p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
-</details>
-```

docs/docs/native/dialog.md

@@ -1,37 +0,0 @@
----
-title: Dialog
-description: 'Dialog styles apply your Web Awesome theme to the HTML `<dialog>` element. Dialogs, also called "modals", appear above the page and interrupt a user''s focus.'
-tags: apps
-icon: dialog
-elements:
-  "<dialog>":  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
-component: dialog
-file: styles/native/dialog.css
----
-
-```html {.example}
-<dialog id="dialog-overview">
-	<header>
-		<h2>Dialog</h2>
-		<button data-dialog="close" class="wa-plain">✖️</button>
-	</header>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-  <footer>
-	<button class="wa-brand" data-dialog="close">Close</button>
-  </footer>
-</dialog>
-
-<button>Open Dialog</button>
-
-<script>
-  const dialog = document.querySelector('#dialog-overview');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.showModal());
-  dialog.addEventListener('click', event => {
-	if (event.target.closest('[data-dialog="close"]')) {
-		dialog.close();
-	}
-  });
-</script>
-```

docs/docs/native/index.njk

@@ -1,86 +0,0 @@
----
-title: Native Styles
-description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components. 
-  See the [installation instructions](#installation) to use native styles in your project.
-layout: overview
-categories: ['forms', 'apps', 'content']
-override:tags: []
----
-
-{% markdown %}
-Web Awesome works _with_ the platform, rather than trying to reinvent it.
-If all you need is styles, you don’t need to use new `<wa-*>` elements!
-We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
-
-## Installation
-
-To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
-```
-
-Or, to _only_ include styles for native elements:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
-```
-
-## Opting Out of Native Styles
-
-So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do?
-You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
-
-Instead of including Native Styles with a `<link>` element, you can include it like this:
-
-```html
-<style>
-@import url('{% cdnUrl 'styles/webawesome.css' %}') layer(wa);
-
-@layer wa {
-  .wa-off,
-  .wa-off-deep,
-  .wa-off-deep * {
-    all: revert-layer;
-  }
-}
-</style>
-```
-
-Then you can opt-out of Native Styles styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
-
-```html
-<p>
-  <button>I’m Awesome</button>
-  <button class="wa-off">I’m not</button>
-</p>
-
-<blockquote>
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button>I’m also awesome</button>
-</blockquote>
-<blockquote class="wa-off">
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button >I’m also not</button>
-</blockquote>
-<blockquote class="wa-off-deep">
-  <p>Lorem Ipsum dolor sit amet</p>
-  <button>I’m also not</button>
-</blockquote>
-```
-
-You could even design opt-outs for specific elements!
-E.g. to opt-out of `<details>` styling:
-
-```css
-@layer wa {
-  details.wa-details-off,
-  .wa-details-off details,{
-    all: revert-layer;
-  }
-}
-```
-
-If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing.
-You can find instructions for how to do that on the individual Native Styles pages.
-{% endmarkdown %}

docs/docs/native/input.md

@@ -1,85 +0,0 @@
----
-title: Input
-description: Inputs collect data from the user.
-tags: forms
-icon: input
-component: input
-elements:
-  "<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
-file: styles/native/input.css
----
-
-<style>
-wa-code-demo::part(preview) {
-  display: grid;
-  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
-  gap: 2rem;
-}
-</style>
-
-## Text Fields
-
-```html {.example}
-<label>Input (text) <input type="text" placeholder="placeholder"></label>
-<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>
-
-<label>Input (number) <input type="number"></label>
-<wa-input label="WA Input (number)" type="number"></wa-input>
-
-<label>Input (password) <input type="password" required></label>
-<wa-input label="WA Input (password)" type="password" required></wa-input>
-
-<label>Input (email) <input type="email"></label>
-<wa-input label="WA Input (email)" type="email"></wa-input>
-
-<label>Input (search) <input type="search"></label>
-<wa-input label="WA Input (search)" type="search"></wa-input>
-
-<label>Input (tel) <input type="tel"></label>
-<wa-input label="WA Input (tel)" type="tel"></wa-input>
-
-<label>Input (url) <input type="url"></label>
-<wa-input label="WA Input (url)" type="url"></wa-input>
-```
-
-## Color Picker
-
-Basic:
-
-```html {.example}
-<label>Input (color) <input type="color" value="#ff0066"></label>
-<wa-color-picker label="WA Color Picker" value="#ff0066"></wa-color-picker>
-```
-
-With swatches:
-
-```html {.example}
-<label>Input (color) <input type="color" value="#ff0066" list="swatches"></label>
-<datalist id="swatches">
-  <option value="#0070ef">Web Awesome Blue</option>
-  <option>#f5a623</option>
-  <option>#f8e71c</option>
-  <option>#8b572a</option>
-  <option>#7ed321</option>
-  <option>#417505</option>
-  <option>#bd10e0</option>
-  <option>#9013fe</option>
-</datalist>
-
-<wa-color-picker label="WA Color Picker" value="#ff0066"
- swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>
-```
-
-## Time and Date Pickers
-
-```html {.example}
-<label>Input (datetime-local) <input type="datetime-local"></label>
-<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>
-
-<label>Input (date) <input type="date"></label>
-<wa-input label="WA Input (date)" type="date"></wa-input>
-
-<label>Input (time) <input type="time"></label>
-<wa-input label="WA Input (time)" type="time"></wa-input>
-```
-

docs/docs/native/lists.md

@@ -1,38 +0,0 @@
----
-title: Lists
-description: 'List styles apply your Web Awesome theme to HTML lists, such as bulleted, numbered, or description lists.'
-tags: content
-layout: element
-elements:
-  "<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
-  "<ol>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
-  "<dl>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
-file: styles/native/lists.css
----
-
-## Unordered Lists
-
-- List item 1
-- List item 2
-- List item 3
-  - Subitem a
-  - Subitem b
-
-## Ordered Lists
-
-1. List item 1
-2. List item 2
-3. List item 3
-   - Subitem a
-   - Subitem b
-
-## Definition Lists
-
-<dl>
-  <dt>Definition 1</dt>
-  <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
-  <dt>Definition 2</dt>
-  <dd>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
-  <dt>Definition 3</dt>
-  <dd>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</dd>
-</dl>

docs/docs/native/native.json

@@ -1,4 +0,0 @@
-{
-  "layout": "element.njk",
-  "tags": ["native"]
-}

docs/docs/native/progress.md

@@ -1,31 +0,0 @@
----
-title: Progress Bar
-description: Progress bars are used to show the status of an ongoing operation.
-tags: apps
-icon: progress-bar
-status: experimental
-component: progress-bar
-elements:
-  "<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
-file: styles/native/progress.css
----
-
-
-```html {.example}
-<progress value="40" max="100"></progress>
-```
-
-Indeterminate:
-
-
-```html {.example}
-<progress></progress>
-```
-
-### Custom 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>
-```

docs/docs/native/radio.md

@@ -1,77 +0,0 @@
----
-title: Radio
-description: Radios allow the user to select a single option from a group.
-tags: forms
-icon: radio-group
-component: radio
-elements:
-  "<input type=radio>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
-file: styles/native/radio.css
----
-
-<style>
-	label {
-		display: inline-block;
-	}
-
-	label + label {
-		margin-inline-start: var(--wa-space);
-	}
-</style>
-
-```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2"> Option 2</label>
-```
-
-## Examples
-
-### Initial Value
-
-To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
-
-```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2"> Option 2</label>
-<label><input type="radio" name="radio" value="3" checked> Option 3</label>
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a radio.
-
-```html {.example}
-<label><input type="radio" name="radio" value="1"> Option 1</label>
-<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
-<label><input type="radio" name="radio" value="3"> Option 3</label>
-```
-
-### Sizes
-
-Use the [size utilities](/docs/utilities/size) to change the radios' size.
-
-```html {.example}
-<fieldset class="wa-size-s">
-	 <legend>Small</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-
-<br />
-<fieldset class="wa-size-m">
-	 <legend>Medium</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-
-<br />
-
-<fieldset class="wa-size-l">
-	 <legend>Large</legend>
-	<label><input type="radio" name="radio" value="1"> Option 1</label>
-	<label><input type="radio" name="radio" value="2"> Option 2</label>
-	<label><input type="radio" name="radio" value="3"> Option 3</label>
-</fieldset>
-```

docs/docs/native/select.md

@@ -1,72 +0,0 @@
----
-title: Select
-description: Selects allow you to choose items from a menu of predefined options.
-tags: forms
-icon: select
-component: select
-elements:
-  "<select>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
-file: styles/native/select.css
----
-
-```html {.example}
-<label>Select
-  <select id="select">
-    <option value="option-1">Option 1</option>
-    <option value="option-2">Option 2</option>
-    <option value="option-3">Option 3</option>
-  </select>
-</label>
-```
-
-## Examples
-
-### Appearance
-
-Use the [appearance utilities](/docs/utilities/appearance/) to change the select's visual appearance.
-
-```html {.example}
-<label>Select
-  <select id="select" class="wa-filled">
-    <option value="option-1">Option 1</option>
-    <option value="option-2">Option 2</option>
-    <option value="option-3">Option 3</option>
-  </select>
-</label>
-```
-
-### Grouping options
-
-In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
-
-```html {.example}
-<select>
-  <small>Section 1</small>
-  <option value="option-1">Option 1</option>
-  <option value="option-2">Option 2</option>
-  <option value="option-3">Option 3</option>
-  <hr />
-  <small>Section 2</small>
-  <option value="option-4">Option 4</option>
-  <option value="option-5">Option 5</option>
-  <option value="option-6">Option 6</option>
-</select>
-```
-
-To provide labels, you can use the `<optgroup>` element (with or without dividers):
-
-```html {.example}
-<select>
-  <optgroup label="Section 1">
-  <option value="option-1">Option 1</option>
-  <option value="option-2">Option 2</option>
-  <option value="option-3">Option 3</option>
-  </optgroup>
-  <optgroup label="Section 2">
-  <option value="option-4">Option 4</option>
-  <option value="option-5">Option 5</option>
-  <hr />
-  <option value="option-6">Option 6</option>
-  </optgroup>
-</select>
-```

docs/docs/native/slider.md

@@ -1,54 +0,0 @@
----
-title: Slider
-description: Sliders allow the user to select a single value within a given range using a slider.
-tags: forms
-layout: element
-icon: slider
-component: slider
-elements:
-  "<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
-file: styles/native/slider.css
----
-
-```html {.example}
-<label>Select a value: <input type="range"></label>
-```
-
-### Min, Max, and Step
-
-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}
-<input type="range" min="0" max="10" step="1">
-```
-
-### Disabled
-
-Use the `disabled` attribute to disable a slider.
-
-```html {.example}
-<input type="range" disabled>
-```
-
-<!--
-### Custom Track Colors
-
-You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
-
-```html {.example}
-<input type="range"
-  style="
-  --track-color-active: var(--wa-color-brand-fill-loud);
-  --track-color-inactive: var(--wa-color-brand-fill-normal);
-"
->
-```
-
-### Right-to-Left languages
-
-The styles adapt to right-to-left (RTL) languages as you would expect.
-
-```html {.example}
-<input type="range" dir=rtl>
-```
--->

docs/docs/native/table.md

@@ -1,136 +0,0 @@
----
-title: Table
-description: 'Table styles apply your Web Awesome theme to the HTML table content. Tables structure data in rows and columns, making it easy to look up information in a complex data set.'
-tags: content
-elements:
-  "<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
-file: styles/native/tables.css
----
-
-```html {.example}
-<table>
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Alternating Rows
-
-You can use the `wa-zebra-rows` class to add alternating row colors to your table:
-
-```html {.example}
-<table class="wa-zebra-rows">
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## Variants
-
-You can use [color utility classes](/docs/utilities/colors) to apply different colors to your table:
-
-```html {.example}
-<table class="wa-zebra-rows wa-brand">
-  <caption>I'm just a table</caption>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-    <tr>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-      <td>Cell</td>
-    </tr>
-  </tbody>
-</table>
-```

docs/docs/native/textarea.md

@@ -1,38 +0,0 @@
----
-title: Textarea
-description: Textareas collect data from the user and allow multiple lines of text.
-tags: forms
-icon: textarea
-component: textarea
-elements:
-  "<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-file: styles/native/input.css
----
-
-```html {.example}
-<label>Textarea <textarea></textarea></label>
-```
-
-### Placeholders
-
-Use the `placeholder` attribute to add a placeholder.
-
-```html {.example}
-<textarea placeholder="Type something"></textarea>
-```
-
-### Appearance
-
-Use the [appearence utilities](/docs/utilities/appearance/) to change the textarea's visual appearance.
-
-```html {.example}
-<textarea placeholder="Type something" class="wa-filled"></textarea>
-```
-
-### Expand with Content
-
-You can use `field-sizing: content` in [browsers that support it](https://caniuse.com/mdn-css_properties_field-sizing) to make the textarea grow as the user types:
-
-```html {.example}
-<textarea placeholder="Type something" style="field-sizing: content"></textarea>
-```

docs/docs/palettes/anodized.md

@@ -1,5 +0,0 @@
----
-title: Anodized
-isPro: true
-tags: pro
----

docs/docs/palettes/elegant.md

@@ -1,5 +0,0 @@
----
-title: Elegant
-isPro: true
-tags: pro
----

docs/docs/palettes/mild.md

@@ -1,5 +0,0 @@
----
-title: Mild
-isPro: true
-tags: pro
----

docs/docs/palettes/natural.md

@@ -1,5 +0,0 @@
----
-title: Natural
-isPro: true
-tags: pro
----

docs/docs/palettes/rudimentary.md

@@ -1,5 +0,0 @@
----
-title: Rudimentary
-isPro: true
-tags: pro
----

docs/docs/palettes/vogue.md

@@ -1,5 +0,0 @@
----
-title: Vogue
-isPro: true
-tags: pro
----

docs/docs/patterns/blog.md

@@ -1,369 +0,0 @@
----
-title: Blog
-description: TODO
----
-
-TODO Page Description
-
-## Examples
-
-### Hero
-```html{.example}
-<wa-carousel pagination>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #fe53a0;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-5.jpg"
-    />
-      </div>
-      <h2><span>Do you see any Teletubbies in here?</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #5a90f3;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-1.jpg"
-    />
-      </div>
-      <h2><span>The path of the righteous man is beset on all sides</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #8c431e;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-2.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #37b3e6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-3.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <a href="#" class="hero-link">
-      <div style="background: #f993d6;">
-
-      </div>
-      <div style="background: gray;">
-        <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/blog-carousel-4.jpg"
-    />
-      </div>
-      <h2><span>Article Title</span></h2>
-    </a>
-  </wa-carousel-item>
-
-</wa-carousel>
-<style>
-  .hero-link {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    h2 {
-      position: absolute;
-      color: white;
-      top: 25%;
-      left: 15%;
-      width: 200px;
-      padding: .5rem;
-      line-height: 1.15;
-
-      span {
-        background-color: black;
-      }
-    }
-
-    div:first-of-type {
-      width: 30%;
-    }
-    div:last-of-type {
-      width: 70%;
-    }
-  }
-</style>
-```
-
-### Newsletter signup
-```html{.example}
-<wa-card class="news-letter-signup">
-  <h2>Subscribe to our Newsletter</h2>
-  <p>To get the latest and most quality design resources</p>
-  <div class="subscribe-input"> <wa-input></wa-input><wa-button>Subscribe</wa-button></div>
-</wa-card>
-<style>
-  .news-letter-signup {
-        display: block;
-    width: fit-content;
-    margin: 0 auto;
-  }
-  .subscribe-input {
-    display: flex;
-    width: 100%;
-
-    wa-input {
-      width: inherit;
-    }
-
-    wa-button {
-      margin-left: 0.5rem;
-    }
-  }
-</style>
-```
-
-### Posts List
-```html{.example}
-<wa-card with-header>
-  <div slot="header">
-    Recent Articles
-  </div>
-  <div class="body">
-    <div class="post-list">
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"> <wa-icon fixed-width name="mug-hot"></wa-icon> Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img class="last" src="/assets/images/patterns/flower-crop-2.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column; margin-right: 1rem;">
-          <span style="font-size: small;"><wa-icon fixed-width name="user-nurse"> </wa-icon>Health</span>
-          <span style="font-size: larger;font-weight: 600;">That's clear. Your cells react to bacteria</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Mr. Glass</span>
-        </div>
-      </div>
-      <div  class="post-list-item" style="display: flex; align-items: center; flex-direction: row-reverse;justify-content: flex-end">
-        <img style="display:none;" src="#"/>
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;"><wa-icon fixed-width name="football"></wa-icon> Sports</span>
-          <span style="font-size: larger;font-weight: 600;">Do you see any Teletubbies in here?</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Nick Fury</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-3.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-      <div class="post-list-item" style="display: flex; align-items: center;">
-        <img src="/assets/images/patterns/flower-crop-1.jpg" />
-        <div class="post-list-item-info" style="display: flex;flex-direction: column;">
-          <span style="font-size: small;">Lifestyle</span>
-          <span style="font-size: larger;font-weight: 600;">Your bones don't break</span>
-          <span style="font-size: small;font-style: italic; font-weight: 600; color: var(--wa-color-text-quiet)">Jules</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</wa-card>
-<style>
-  .post-list {
-    .post-list-item {
-      border-bottom: 1px solid var(--wa-color-surface-border);
-      margin-bottom: 1rem;
-      padding-bottom: 1rem;
-
-      img {
-        margin-right: 1rem;
-        object-fit: cover;
-        min-width: 50px;
-        min-height: 50px;
-        width: 100px;
-        height: 100px;
-        border-radius: var(--wa-border-radius-circle);
-      }
-      img.last {
-        margin-right: 0;
-      }
-
-      .post-list-item-info span:first-of-type {
-        display: flex;
-        align-items: center;
-      }
-
-      .post-list-item-info span wa-icon {
-        margin-right: 0.25rem;
-      }
-    }
-    .post-list-item:last-of-type {
-      border-bottom: none;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-</style>
-```
-
-### Related Posts
-```html{.example}
-<wa-card with-image with-footer class="card-overview">
-  <img
-    slot="image"
-    src="https://plus.unsplash.com/premium_photo-1661382011487-cd3d6b1d9dff?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1OTAyOTl8MHwxfGFsbHx8fHx8fHx8fDE3MTg2NDc0ODd8&ixlib=rb-4.0.3&q=80&w=1080"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Color Advancements</strong><br />
-  Lot of new and exciting features in web colors<br />
-  <small>2d ago</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>Read More</wa-button>
-
-  </div>
-</wa-card>
-
-
-
-<style>
-  .card-overview {
-    max-width: 300px;
-  }
-
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot='footer'] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-
-```
-### Article footer
-```html{.example}
-<div class="article-footer">
-  <div class="article-tags">
-    <a href="#"><wa-tag size="medium" pill>UX</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Product Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Design</wa-tag></a>
-    <a href="#"><wa-tag size="medium" pill>Prototyping</wa-tag></a>
-  </div>
-  <div class="article-actions">
-    <wa-icon-button name="hands-clapping"></wa-icon-button>
-  </div>
-</div>
-```
-
-## Social Share
-
-### Vertical
-```html{.example}
-<wa-card class="social-share-vertical" style="--border-radius: 4rem;">
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-    <wa-icon-button name="paper-plane" family="solid" variant="solid" label="Edit" href="https://example.com/"></wa-icon-button>
-</wa-card>
-<style>
-  .social-share-vertical {
-    display: block;
-    margin: 0 auto;
-    width: fit-content;
-
-    wa-icon-button {
-      font-size: 2.5rem;
-      display: block;
-      margin-bottom: .5rem;
-    }
-     wa-icon-button:last-of-type {
-      margin-bottom: initial;
-    }
-  }
-</style>
-```
-
-### Horizontal
-```html{.example}
-<wa-card with-header with-footer class="social-share-horizontal">
-  <div slot="header">
-    Share this Article
-  </div>
-  <wa-icon-button name="facebook" family="brands" variant="solid" label="Edit" style="--background: #1877f225; --color: #1877f2"></wa-icon-button>
-   <wa-icon-button name="x-twitter" family="brands" variant="solid" label="Edit" style="--background: #00000025; --color: #000000"></wa-icon-button>
-    <wa-icon-button name="threads" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-        <wa-icon-button name="mastodon" family="brands" variant="solid" label="Edit" style="--background: #6364ff25; --color: #6364ff"></wa-icon-button>
-
-    <wa-icon-button name="instagram" family="brands" variant="solid" label="Edit" style="--background: #c32aa325; --color: #c32aa3"></wa-icon-button>
-
-    <wa-icon-button name="pinterest" family="brands" variant="solid" label="Edit" style="--background: #bd081c25; --color: #bd081c"></wa-icon-button>
-    <wa-icon-button name="linkedin" family="brands" variant="solid" label="Edit" style="--background: #0a66c225; --color: #0a66c2"></wa-icon-button>
-    <div slot="footer">
-      <div class="share-input">
-         <wa-input value="https://fontawesome.com"></wa-input>
-    <wa-button variant="brand"> <wa-icon slot="prefix" name="link" variant="solid"></wa-icon>Copy</wa-button>
-      </div>
-
-  </div>
-</wa-card>
-<style>
-  .social-share-horizontal {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-
-    wa-icon-button {
-      --background: transparent;
-      --color: initial;
-      font-size: 1.5rem;
-      border-radius: .25rem;
-      background: var(--background);
-    }
-    wa-icon-button::part(base) {
-
-      color: var(--color);
-    }
-
-    .share-input {
-    display: flex;
-
-    wa-input {
-          --border-radius: var(--wa-form-control-border-radius) 0 0 var(--wa-form-control-border-radius);
-    }
-    wa-button {
-      --border-radius:  0 var(--wa-form-control-border-radius)  var(--wa-form-control-border-radius) 0;
-    }
-  }
-  }
-
-</style>
-```

docs/docs/patterns/business.md

@@ -1,8 +0,0 @@
----
-title: Business
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/ecommerce-category-filter.md

@@ -1,13 +0,0 @@
----
-title: Category Filter
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With inline actions and expandable sidebar filters
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-category-preview.md

@@ -1,12 +0,0 @@
----
-title: Category Preview
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Three Column (WIP)
-
-```

docs/docs/patterns/ecommerce-order-history.md

@@ -1,14 +0,0 @@
----
-title: Order History
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Invoice panels
-
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-order-summary.md

@@ -1,13 +0,0 @@
----
-title: Product List
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With split image
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-product-detail.md

@@ -1,129 +0,0 @@
----
-title: Product Detail
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With color and size selector
-```html{.example}
-  <div class="with-inline-price">
-   <wa-card with-header>
-    <div class="card-header" slot="header">
-      <span class="card-title">Graphic Tank</span>
-      <wa-icon-button name="close" label="close-modal"></wa-icon-button>
-    </div>
-    <div class="card-body">
-      <img style="border-radius: var(--border-radius)" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      <form class="detail">
-        <span class="price">$32</span>
-        <span class="rating"><wa-rating></wa-rating><a style="margin-left: .5rem; " href="*">36 Reviews</a></span>
-        <wa-radio-group style="margin-bottom: 1rem;" label="Select an option" name="a" value="1">
-  <wa-radio-button value="Black">Black</wa-radio-button>
-  <wa-radio-button value="White">White</wa-radio-button>
-  <wa-radio-button value="Gray">Gray</wa-radio-button>
-</wa-radio-group>
-<wa-select label="Sizes" placeholder="select size">
-  <wa-option value="option-1">Option 1</wa-option>
-  <wa-option value="option-2">Option 2</wa-option>
-  <wa-option value="option-3">Option 3</wa-option>
-</wa-select>
-<wa-button size="medium" style="width: 100%; margin-top: auto;">Medium</wa-button>
-      </form>
-    </div>
-   </wa-card>
-  </div>
-  <style>
-    .with-inline-price {
-      wa-card {
-        width: 100%;
-        .card-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-
-          .card-title {
-            font-size: large;
-            font-weight: 600;
-          }
-        }
-        .card-body {
-          display: grid;
-          grid-template-columns: 35% 1fr;
-          gap: 1rem;
-
-          .detail {
-            display: flex;
-            flex-direction: column;
-
-            .price {
-              font-size: xx-large;
-              font-weight: 600;
-            }
-            .rating {
-              margin-bottom: 1rem;
-            }
-          }
-        }
-      }
-    }
-  </style>
-```
-
-## with large selector
-```html{.example}
-  <wa-card class="large-selector">
-    <div class="card-body">
-      <div style="grid-column: 1/6">
-      <img style="border-radius: var(--border-radius); height: 100%; object-fit: cover;" src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      </div>
-      <div style="grid-column: 6/-1" class="info">
-        <h2>Basic Tank</h2>
-        <wa-icon-button name="close" label="close-modal"></wa-icon-button>
-        <section>
-          <p style="font-size: x-large;font-weight: 600;">$32</p>
-          <div style="display: flex; align-items: flex-start">
-            <p>3.9</p>
-            <wa-rating></wa-rating>
-            <a href="*" style="margin-left: auto;">See all 512 Reviews</a>
-          </div>
-        </section>
-        <section>
-          <form>
-            <wa-radio-group label="Color" hint="Choose the most appropriate option." name="a" value="black" style="margin-bottom: 1rem;">
-              <wa-radio value="black">Black</wa-radio>
-              <wa-radio value="gray">Gray</wa-radio>
-            </wa-radio-group>
-            <wa-radio-group label="Size" hint="Select an option that makes you proud." name="a" value="medium"  style="margin-bottom: 1rem;">
-              <wa-radio-button value="small">S</wa-radio-button>
-              <wa-radio-button value="medium">M</wa-radio-button>
-              <wa-radio-button value="large">L</wa-radio-button>
-              <wa-radio-button value="extra-large">XL</wa-radio-button>
-            </wa-radio-group>
-            <wa-button size="medium" style="width: 100%; margin-top: auto;margin-bottom: 1rem;">Medium</wa-button>
-            <a href="*" style="display: inline-block;width: 100%;text-align: center;">View full details</a>
-          </form>
-        </section>
-      </div>
-    </div>
-  </wa-card>
-<style>
-  .large-selector .card-body {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    gap: 1rem;
-
-    .info {
-      position: relative;
-
-      wa-icon-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    }
-  }
-</style>
-```

docs/docs/patterns/ecommerce-product-list.md

@@ -1,166 +0,0 @@
----
-title: Product Lists
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-## With Product Grid
-
-```html{.example}
-  <div class="with-product-grid">
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-    <div class="grid-item">
-      <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-      <div class="grid-item-name">Shirt</div>
-      <wa-rating label="Rating" readonly value="3"></wa-rating>
-      <a class="grid-item-reviews" href="#">38 Reviews</a>
-      <div class="grid-item-price">$170</div>
-    </div>
-  </div>
-  <style>
-    .with-product-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      border: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-
-      .grid-item {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      .grid-item:nth-of-type(odd) {
-
-        border-right: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-      }
-      .grid-item:not(:nth-last-child(-n + 2)) {
-        border-bottom: var(--wa-panel-border-width) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
-      }
-
-      .grid-item-image {
-        width: 100%;
-        object-fit: cover;
-      }
-
-      .grid-item-name {
-        margin-top: 1rem;
-        font-weight: var(--wa-font-weight-bold);
-      }
-
-      .grid-item wa-rating {
-        --symbol-size: var(--wa-font-size-m);
-        margin-top: .5rem;
-      }
-      .grid-item-reviews {
-        --wa-link-decoration-default: none;
-        --wa-color-text-link: var(--wa-color-gray-50);
-        font-size: var(--wa-font-size-m);
-      }
-      .grid-item-price {
-        font-size: var(--wa-font-size-2xl);
-        font-weight: var(--wa-font-weight-bold);
-      }
-    }
-  </style>
-```
-## Card with full details
-```html{.example}
-  <div class="card-with-details">
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-   <wa-card with-footer>
-    <img class="grid-item-image" src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-    <div slot="footer" class="card-footer details">
-      <span class="detail-name">Basic Tee 8-pack</span>
-      <p class="detail-description">Get the full lineup of our Basic Tees. Have a fresh shirt all week, and an extra for laundry day.</p>
-      <span class="detail-color">8 colors</span>
-      <span class="detail-price">$256</span>
-    </div>
-   </wa-card>
-  </div>
-  <style>
-    .card-with-details {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1rem;
-    }
-    .card-with-details wa-card::part(body) {
-        padding: 0;
-      }
-    .card-with-details .card-footer {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .details {
-      .detail-description {
-        color: var(--wa-color-gray-50);
-      }
-      .detail-name {
-        font-size: var(--wa-font-size-l);
-        font-weight: var(--wa-font-weight-action);
-      }
-      .detail-color {
-        color: var(--wa-color-gray-50);
-        font-style: italic;
-      }
-      .detail-price {
-        font-size: var(--wa-font-size-xl);
-        font-weight: var(--wa-font-weight-action);
-      }
-    }
-
-  </style>
-```
-## With color swatches (WIP)
-```html{.example}
-
-```

docs/docs/patterns/ecommerce-product-review.md

@@ -1,465 +0,0 @@
----
-title: Product Reviews
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## With images grid
-```html{.example}
-<div class="with-image-grid">
-  <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  <div class="image-grid">
-    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-    <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
-    <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
-    <img src="/assets/images/patterns/mad-rabbit-tattoo-7N4FMowSGek-unsplash.jpg" />
-  </div>
-  <div>
-    <h2>Tank top</h2>
-    <p>The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.</p>
-    <h3>Highlights</h3>
-    <ul>
-      <li>Hand cut and sewn locally</li>
-    </ul>
-
-    <h3>Highlights</h3>
-    <p>The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.</p>
-
-    <span>$192</span>
-    <div>
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <a href="#">117 Reviews</a>
-    </div>
-    <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-button>Add to Cart</wa-button>
-  </div>
-</div>
-<style>
-  .with-image-grid {
-    wa-breadcrumb::part(base) {
-      margin-bottom: 1rem;
-    }
-
-    .image-grid {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 1rem;
-    }
-
-    .image-grid img:nth-of-type(1) {
-      grid-column: 1/-1;
-    }
-
-    .image-grid img:nth-of-type(2) {
-      grid-column: 1/7;
-    }
-    .image-grid img:nth-of-type(3) {
-      grid-column: 7/-1;
-    }
-     .image-grid img:nth-of-type(4) {
-      grid-column: 1/-1;
-    }
-  }
-</style>
-```
-
-## With Tiered Images
-
-```html{.example}
-<div class="with-tiered-images">
-  <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-  </wa-breadcrumb>
-  <div>
-    <div class="heading">
-      <h2>Basic Tee</h2>
-      <span style="font-size: var(--wa-font-size-2xl)">$35</span>
-    </div>
-    <div class="rating">
-      <span>3.9</span>
-       <wa-rating label="Rating" precision="0.5" value="3.9"></wa-rating>
-      <a href="#">117 Reviews</a>
-    </div>
-    <div class="tiered-images">
-      <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-      <img src="/assets/images/patterns/gervyn-louis-KXvd7y7AU6Q-unsplash.jpg" />
-      <img src="/assets/images/patterns/gervyn-louis-semwwyXFQho-unsplash.jpg" />
-    </div>
-  </div>
-  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
- <wa-button>Add to Cart</wa-button>
- <h3>Description</h3>
- <p>The Basic tee is an honest new take on a classic. The tee uses super soft, pre-shrunk cotton for true comfort and a dependable fit. They are hand cut and sewn locally, with a special dye technique that gives each tee it's own look.</p>
- <p>Looking to stock your closet? The Basic tee also comes in a 3-pack or 5-pack at a bundle discount.</p>
- <hr />
- <h3>Highlights</h3>
-    <ul>
-      <li>Hand cut and sewn locally</li>
-    </ul>
-  <div>
-    <wa-card>
-      <wa-icon family="solid" name="earth-americas"></wa-icon>
-      <h3>International delivery</h3>
-      <p>Get your order in 2 years</p>
-    </wa-card>
-    <wa-card>
-      <wa-icon family="solid" name="earth-americas"></wa-icon>
-      <h3>International delivery</h3>
-      <p>Get your order in 2 years</p>
-
-    </wa-card>
-  </div>
-</div>
-<style>
-  .with-tiered-images {
-    wa-breadcrumb::part(base) {
-      margin-bottom: 1rem;
-    }
-    .heading {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    .rating {
-      display: flex;
-
-      span {
-        display: inline-block;
-        margin-right: 1rem;
-      }
-
-      wa-rating {
-        margin-right: 1rem;
-      }
-    }
-
-    .tiered-images {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      gap: 1rem;
-    }
-
-    .tiered-images img:nth-of-type(1) {
-      grid-column: 1/-1;
-    }
-
-    .tiered-images img:nth-of-type(2) {
-      grid-column: 1/7;
-    }
-    .tiered-images img:nth-of-type(3) {
-      grid-column: 7/-1;
-  }
-</style>
-```
-## with images and expandable details
-
-```html {.example}
-<wa-carousel class="carousel-thumbnails" navigation loop>
-  <wa-carousel-item>
-    <img
-      alt="The sun shines on the mountains and trees (by Adam Kool on Unsplash)"
-      src="/assets/examples/carousel/pullover-1.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A waterfall in the middle of a forest (by Thomas Kelly on Unsplash)"
-      src="/assets/examples/carousel/pullover-2.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="The sun is setting over a lavender field (by Leonard Cotte on Unsplash)"
-      src="/assets/examples/carousel/pullover-3.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A field of grass with the sun setting in the background (by Sapan Patel on Unsplash)"
-      src="/assets/examples/carousel/pullover-4.jpg"
-    />
-  </wa-carousel-item>
-  <wa-carousel-item>
-    <img
-      alt="A scenic view of a mountain with clouds rolling in (by V2osk on Unsplash)"
-      src="/assets/examples/carousel/pullover-5.jpg"
-    />
-  </wa-carousel-item>
-</wa-carousel>
-
-<div class="thumbnails">
-  <div class="thumbnails__scroller">
-    <img alt="Thumbnail by 1" class="thumbnails__image active" src="/assets/examples/carousel/pullover-1.jpg" />
-    <img alt="Thumbnail by 2" class="thumbnails__image" src="/assets/examples/carousel/pullover-2.jpg" />
-    <img alt="Thumbnail by 3" class="thumbnails__image" src="/assets/examples/carousel/pullover-3.jpg" />
-    <img alt="Thumbnail by 4" class="thumbnails__image" src="/assets/examples/carousel/pullover-4.jpg" />
-    <img alt="Thumbnail by 5" class="thumbnails__image" src="/assets/examples/carousel/pullover-5.jpg" />
-  </div>
-</div>
-<div>
-  <h3 style="--wa-space-xl: 0;">Pullover Sweater</h3>
-  <span class="price-big">$140</span>
-  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
-  <p>The Zip Tote Basket is the perfect midpoint between shopping tote and comfy backpack. With convertible straps, you can hand carry, should sling, or backpack this convenient and spacious bag. The zip top and durable canvas construction keeps your goods protected for all-day use.</p>
-  <wa-radio-group label="Select Color" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1"></wa-radio-button>
-  <wa-radio-button value="2"></wa-radio-button>
-  <wa-radio-button value="3"></wa-radio-button>
-</wa-radio-group>
-<div>
-  <wa-button>Add to cart</wa-button>
-  <wa-icon-button name="gear" label="Settings"></wa-icon-button>
-</div>
-<div class="details-group-example">
-  <wa-details summary="First" open>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Second">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-
-  <wa-details summary="Third">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </wa-details>
-</div>
-</div>
-
-<style>
-  .carousel-thumbnails {
-    --slide-aspect-ratio: 3 / 2;
-  }
-
-  wa-radio-button #shadow-root div .button--medium {
-    padding: var(--wa-space-xs) var(--wa-space-xs);
-  }
-
-  .color-circle {
-    --background: #000;
-    background: var(--background);
-
-    width: 50px;
-    height: 100%;
-  }
-
-  .sweater-rating {
-    margin-bottom: 1rem;
-  }
-  .price-big {
-    display: block;
-    font-size: 32px;
-  }
-
-  .thumbnails {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 1rem;
-  }
-
-  .thumbnails__scroller {
-    display: flex;
-    gap: var(--wa-space-s);
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    scroll-padding: var(--wa-space-s);
-  }
-
-  .thumbnails__scroller::-webkit-scrollbar {
-    display: none;
-  }
-
-  .thumbnails__image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-
-    cursor: pointer;
-  }
-
-  .thumbnails__image.active {
-    opacity: 1;
-  }
-  .details-group-example wa-details:not(:last-of-type) {
-    margin-bottom: var(--wa-space-2xs);
-  }
-</style>
-
-<script>
-  {
-    const carousel = document.querySelector('.carousel-thumbnails');
-    const scroller = document.querySelector('.thumbnails__scroller');
-    const thumbnails = document.querySelectorAll('.thumbnails__image');
-
-    scroller.addEventListener('click', e => {
-      const target = e.target;
-
-      if (target.matches('.thumbnails__image')) {
-        const index = [...thumbnails].indexOf(target);
-        carousel.goToSlide(index);
-      }
-    });
-
-    carousel.addEventListener('wa-slide-change', e => {
-      const slideIndex = e.detail.index;
-
-      [...thumbnails].forEach((thumb, i) => {
-        thumb.classList.toggle('active', i === slideIndex);
-        if (i === slideIndex) {
-          thumb.scrollIntoView({
-            block: 'nearest'
-          });
-        }
-      });
-    });
-  }
-
-    const container = document.querySelector('.details-group-example');
-
-  // Close all other details when one is shown
-  container.addEventListener('wa-show', event => {
-    if (event.target.localName === 'wa-details') {
-      [...container.querySelectorAll('wa-details')].map(details => (details.open = event.target === details));
-    }
-  });
-</script>
-```
-
-## Split with image
-
-```html {.example}
-<div class="split-with-image">
-  <div class="div-1">
-    <wa-breadcrumb>
-    <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Men's</wa-breadcrumb-item>
-    <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
-    </wa-breadcrumb>
-    <h2>Everyday Ruck Snack</h2>
-    <span>
-      <span>$220</span> |
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <span>1624 reviews</span>
-    </span>
-    <p>Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.</p>
-    <span><wa-icon family="solid" name="check"></wa-icon> In stock and ready to ship</span>
-
-
-  </div>
-  <div class="div-2">
-    <img src="/assets/images/patterns/gervyn-louis-IS03ajI00Fc-unsplash.jpg" />
-  </div>
-  <div class="div-3">
-     <wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
-  <wa-radio-button value="1">Option 1</wa-radio-button>
-  <wa-radio-button value="2">Option 2</wa-radio-button>
-  <wa-radio-button value="3">Option 3</wa-radio-button>
-</wa-radio-group>
-  </div>
-</div>
-<style>
-  .split-with-image {
-    display: grid;
-    /* grid-template-columns: repeat(2, 1fr); */
-    /* height: 1000px; */
-    /* gap: 1rem; */
-    .div-1 {
-
-    }
-    .div-2 {
-      /* background-color: black;
-      grid-column-start: 2;
-      grid-row: span 2 / span 2; */
-    }
-    .div-3 {
-
-    }
-  }
-</style>
-```
-## With tabs
-
-```html{.example}
-<div>
-  <wa-rating class="sweater-rating" label="Rating" precision="0.5" value="2.5"></wa-rating>
-  <h2>Application UI Icon Pack</h2>
-  <img alt="Sample of 30 icons with friendly and fun details in outline, filled, and brand color styles." src="https://tailwindui.com/img/ecommerce-images/product-page-05-product-01.jpg" class="aqk aql">
-  <p>The Application UI Icon Pack comes with over 200 icons in 3 styles: outline, filled, and branded. This playful icon pack is tailored for complex application user interfaces with a friendly and legible look.</p>
-  <wa-button variant="brand">Brand</wa-button>
-
-<wa-button variant="success">Success</wa-button>
-<hr />
-<h3>Highlights</h3>
-<ul>
-  <li>200+ SVG icons in 3 unique styles</li>
-  <li>Compatible with Figma, Sketch, and Adobe XD</li>
-  <li>Drawn on 24 x 24 pixel grid</li>
-</ul>
-<hr />
-<h3>License</h3>
-<p>For personal and professional use. You cannot resell or redistribute these icons in their original or modified state. <a href="#">Read full license</a></p>
-<hr />
-<h3>Share</h3>
-
-
-<wa-icon family="brands" name="facebook"></wa-icon>
-<wa-icon family="brands" name="instagram"></wa-icon>
-<wa-icon family="brands" name="x-twitter"></wa-icon>
-  <wa-tab-group>
-  <wa-tab panel="general">General</wa-tab>
-  <wa-tab panel="custom">Custom</wa-tab>
-  <wa-tab panel="advanced">Advanced</wa-tab>
-  <wa-tab panel="disabled" disabled>Disabled</wa-tab>
-
-  <wa-tab-panel name="general">
-    <div></div>
-    <div>
-      <h3>Hector Gibbons</h3>
-      <p>July 12, 2021</p>
-      <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
-      <p>Blown away by how polished this icon pack is. Everything looks so consistent and each SVG is optimized out of the box so I can use it directly with confidence. It would take me several hours to create a single icon this good, so it's a steal at this price.</p>
-    </div>
-  </wa-tab-panel>
-  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
-  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
-  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
-</wa-tab-group>
-
-</div>
-
-```

docs/docs/patterns/ecommerce-shopping-cart.md

@@ -1,10 +0,0 @@
----
-title: Shopping Cart
-description: TODO
-parent: ecommerce
-tags: e-commerce
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/education.md

@@ -1,8 +0,0 @@
----
-title: Business
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/entertainement.md

@@ -1,8 +0,0 @@
----
-title: Entertainment
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/index.njk

@@ -1,8 +0,0 @@
----
-title: Patterns
-description: Patterns are reusable solutions to common design problems.
-layout: overview
-categories: ["e-commerce"]
-listChildren: true
-override:tags: []
----

docs/docs/patterns/membership.md

@@ -1,8 +0,0 @@
----
-title: Membership
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/news.md

@@ -1,159 +0,0 @@
----
-title: News
-description: TODO
----
-
-TODO Page Description
-
-## Examples
-### Paywall
-
-```html{.example}
-<div>
-  <wa-dialog label="You've run out of free articles... loser" with-header class="dialog-header">
-    <wa-button href="#">Register</wa-button>
-  Already a subscriber? <a href="#">Login</a>
-</wa-dialog>
-
-<wa-button>Open Paywall</wa-button>
-
-<script>
-  const dialog = document.querySelector('.dialog-header');
-  const openButton = dialog.nextElementSibling;
-
-  openButton.addEventListener('click', () => dialog.open = true);
-</script>
-
-</div>
-```
-## Related articles
-```html{.example}
-<div>
-  <wa-card>
-    <div class="card-body">
-      <div style="border-bottom: 1px solid var(--wa-color-surface-border);margin-bottom: 1rem; padding-bottom: 1rem;">
-        <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-        <h2 style="margin-bottom: var(--wa-space-s);">Title</h2>
-        <p style="margin-bottom: var(--wa-space-3xs);">Fusce lectus lorem, tincidunt non semper sit amet, laoreet vitae nunc. Morbi egestas, libero vitae elementum pretium, nibh ipsum faucibus lacus, id pretium urna ligula eu mauris. Aliquam erat volutpat. Mauris pharetra lacus rhoncus ligula bibendum, at consectetur erat auctor.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-      </div>
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Etiam et tincidunt est, sollicitudin fermentum ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut suscipit libero at velit fringilla, ac pretium lorem rutrum. Cras luctus blandit semper.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-        <div>
-            <img src="https://img.fortawesome.com/cfa83f3c/article-flower.jpg" alt="">
-
-        <p style="margin-bottom: var(--wa-space-3xs);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in fringilla ante. In mattis sapien ac aliquet mattis.</p>
-
-      <span style="font-size: small;font-weight: 600;font-style: italic;">sub-title</span>
-        </div>
-      </div>
-    </div>
-  </wa-card>
-</div>
-```
-
-## Footer
-```html{.example}
-<div class="news-footer">
-  <div class="container">
-  <!-- <div class="logo"> <wa-icon name="user-secret"></wa-icon> <h1 style="--wa-space-xl: 0;">Daily Snoop</h1></div> -->
-  <div class="nav">
-    <section>
-      <h4 style="--wa-space-xl: 0;">News</h4>
-      <ul>
-      <li><a href="#">U.S.</a></li>
-      <li><a href="#">World</a></li>
-      <li><a href="#">Politics</a></li>
-      <li><a href="#">Education</a></li>
-      <li><a href="#">Sports</a></li>
-      <li><a href="#">Business</a></li>
-      <li><a href="#">Tech</a></li>
-      <li><a href="#">Science</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Arts</h4>
-      <ul>
-      <li><a href="#">Book Review</a></li>
-      <li><a href="#">Dance</a></li>
-      <li><a href="#">Movies</a></li>
-      <li><a href="#">Pop Culture</a></li>
-    </ul>
-    </section>
-    <section>
-      <h4 style="--wa-space-xl: 0;">Subscriptions</h4>
-      <ul class="list">
-      <li><a href="#"><wa-icon fixed-width name="game-board-simple"></wa-icon> Crossword</a></li>
-      <li><a href="#"><wa-icon fixed-width name="paper-plane"></wa-icon> Newsletters</a></li>
-      <li><a href="#"><wa-icon fixed-width name="microphone-lines"></wa-icon> Podcast</a></li>
-    </ul>
-    </section>
-  </div>
-  <div class="social">
-    <a href="">
-      <wa-icon family="brands" name="bluesky"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="instagram"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="facebook"></wa-icon>
-    </a>
-    <a href="">
-      <wa-icon family="brands" name="mastodon"></wa-icon>
-    </a>
-  </div>
-  <div>
-    <img src="https://img.fortawesome.com/cfa83f3c/app_store.svg" alt="">
-    <img src="https://img.fortawesome.com/cfa83f3c/google_play.svg" alt="">
-  </div>
-  <div class="legal">&#169; 2024 All rights reserved.</div>
-  </div>
-</div>
-<style>
-  .news-footer {
-
-    .container {
-      max-width: 960px;
-      margin: auto;
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-    }
-    .nav {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .nav ul {
-      list-style-type: none;
-      margin-left: 0;
-    }
-    .social a {
-      text-decoration: none;
-      display: inline-block;
-    }
-    .social a:not(:last-child) {
-      margin-right: 1rem;
-    }
-    section ul li a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-      --wa-color-text-link: var(--wa-color-gray-20);
-
-      wa-icon {
-        margin-right: .5rem;
-      }
-    }
-  }
-</style>
-```

docs/docs/patterns/non-profit.md

@@ -1,8 +0,0 @@
----
-title: Non-profit
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/patterns.json

@@ -1,6 +0,0 @@
-{
-  "layout": "block.njk",
-  "tags": ["patterns"],
-  "wide": true,
-  "noAlpha": true
-}

docs/docs/patterns/portfolio.md

@@ -1,8 +0,0 @@
----
-title: Portfolio
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/patterns/product-landing.md

@@ -1,8 +0,0 @@
----
-title: Product Landing
-description: TODO
----
-
-TODO Page Description
-
-## Examples

docs/docs/themes/active.md

@@ -1,7 +0,0 @@
----
-title: Active
-description: Energetic and tactile, always in motion.
-isPro: true
-tags: pro
-palette: rudimentary
----

docs/docs/themes/brutalist.md

@@ -1,7 +0,0 @@
----
-title: Brutalist
-description: Sharp, square, and unapologetically bold.
-isPro: true
-tags: pro
-palette: default
----

docs/docs/themes/classic.md

@@ -1,6 +0,0 @@
----
-title: Classic
-description: Timeless elegance that never goes out of style.
-order: 0.1
-palette: classic
----

docs/docs/themes/demo.njk

@@ -1,79 +0,0 @@
----
-layout: blank
-pagination:
-  data: collections.theme
-  size: 1
-  alias: theme
-permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
-eleventyExcludeFromCollections: true
-override:tags: []
-eleventyComputed:
-  forceTheme: "{{ theme.fileSlug }}"
----
-
-<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
-<link rel="stylesheet" href="/docs/themes/showcase.css" />
-
-{% set content %}
-<header>
-  {% include 'breadcrumbs.njk' %}
-  <h1 class="title">{{ theme.data.title }}</h1>
-  <p id="mix_and_match" hidden class="wa-size-s"></p>
-  <p>{% include 'status.njk' %}</p>
-  <p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
-</header>
-{% include 'theme-showcase.njk' %}
-{% endset %}
-
-<wa-image-comparer style="width: 100%" position="90">
-<div slot="after" class="theme-showcase wa-gap-xl">
-{{ content | safe }}
-</div>
-<div slot="before" class="theme-showcase wa-gap-xl wa-invert">
-  {{ content | safe }}
-</div>
-</wa-image-comparer>
-
-<script>
-function updateTheme() {
-  let params = new URLSearchParams(window.location.search);
-  let script = document.currentScript;
-  const stylesheetURLs = {
-    colors: id => `/dist/styles/themes/${ id }/color.css`,
-    palette: id => `/dist/styles/color/${ id }.css`,
-    typography: id => `/dist/styles/themes/${ id }/typography.css`
-  };
-  const icons = {
-    colors: 'palette',
-    palette: 'swatchbook',
-    typography: 'font-case'
-  }
-
-  for (let link of document.querySelectorAll('link.mix-and-match')) {
-    link.remove();
-  }
-
-  let msgs = [];
-
-  for (let name in stylesheetURLs) {
-    if (params.get(name)) {
-      let url = stylesheetURLs[name](params.get(name));
-      script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
-      let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
-      let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
-      let icon = icons[name];
-      msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
-    }
-  }
-
-  for (let p of mix_and_match) {
-    p.hidden = msgs.length === 0;
-    if (msgs.length) {
-      let icon =
-      p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
-        ${ msg }</wa-badge>`).join(' ');
-    }
-  }
-}
-updateTheme();
-</script>

docs/docs/themes/glossy.md

@@ -1,7 +0,0 @@
----
-title: Glossy
-description: Bustling with plenty of luster and shine.
-isPro: true
-tags: pro
-palette: elegant
----

docs/docs/themes/matter.md

@@ -1,85 +0,0 @@
----
-title: Matter
-description: Digital design inspired by the real world.
-isPro: true
-tags: pro
-palette: mild
----
-
-Set the page theme to "{{ title }}" from the top right to preview the following examples.
-
-## Floating Labels
-
-This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select`,
-which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
-
-```html {.example}
-<wa-input label="What is your name?"></wa-input>
-<br>
-<wa-input label="What is your name?" appearance="filled"></wa-input>
-```
-
-## Ripple Effect
-
-This theme implements a ripple effect for buttons, including native buttons.
-Click on the following buttons to observe it:
-
-```html {.example}
-<wa-button variant="brand">Button</wa-button>
-<button class="wa-brand">Button</button>
-```
-
-
-
-### Customization
-
-You can use several properties to customize the ripple effect.
-
-These properties can be set on any ancestor, including the root element:
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `--wa-ripple-start-radius` | `<length>` | `0.1em` | The starting radius of the ripple effect. |
-| `--wa-ripple-start-opacity` | `<number>` | `0.1` | The starting opacity of the ripple effect. |
-| `--wa-ripple-duration` | `<time>` | `calc(2 * var(--wa-transition-slow))` | The duration of the ripple effect transition. |
-
-Any of these can be used to disable the ripple effect:
-
-```css
---wa-ripple-start-radius: 0em;
-```
-```css
---wa-ripple-start-opacity: 0;
-```
-```css
---wa-ripple-duration: 0s;
-```
-
-These properties would only work on the button itself:
-
-| Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `--wa-ripple-center-x` | `<percentage>` | `50%` | The x-coordinate of the ripple center point as a percentage of the button width. |
-| `--wa-ripple-center-y` | `<percentage>` | `50%` | The y-coordinate of the ripple center point as a percentage of the button height. |
-
-### Ripple Center Point
-
-By default the ripple effect starts from the center of the button.
-If you want it to start from the position the button was clicked, you can use this JS snippet:
-
-```js
-document.addEventListener("mousedown", evt => {
-	let target = evt.target;
-
-	if (!target.matches?.('wa-button, button, .wa-button')) {
-		return;
-	}
-
-	let rect = target.getBoundingClientRect();
-	let x = (evt.clientX - rect.left) / rect.width;
-	let y = (evt.clientY - rect.top) / rect.height;
-
-	target.style.setProperty("--mouse-local-x", x);
-	target.style.setProperty("--mouse-local-y", y);
-});
-```

docs/docs/themes/mellow.md

@@ -1,7 +0,0 @@
----
-title: Mellow
-description: Soft and soothing, like a lazy Sunday morning.
-isPro: true
-tags: pro
-palette: natural
----

docs/docs/themes/playful.md

@@ -1,7 +0,0 @@
----
-title: Playful
-description: Cheerful and engaging, like a playground on screen.
-isPro: true
-tags: pro
-palette: rudimentary
----

docs/docs/themes/premium.md

@@ -1,7 +0,0 @@
----
-title: Premium
-description: The ultimate in sophistication and style.
-isPro: true
-tags: pro
-palette: anodized
----

docs/docs/themes/showcase.css

@@ -1,100 +0,0 @@
-html {
-  background: transparent;
-}
-
-html,
-body,
-.theme-showcase {
-  height: 100vh;
-  overflow: hidden;
-}
-
-#mix_and_match {
-  font-weight: var(--wa-font-weight-semibold);
-  color: var(--wa-color-text-quiet);
-
-  wa-icon {
-    vertical-align: middle;
-  }
-}
-
-.theme-showcase {
-  isolation: isolate;
-  background-color: var(--wa-color-surface-lowered);
-  border-radius: var(--wa-border-radius-l);
-  padding: var(--wa-space-xl);
-  box-sizing: border-box;
-  overflow: hidden;
-
-  @media (width < 500px) {
-    flex-flow: column;
-  }
-
-  header {
-    min-width: min(25ch, 100vw);
-    align-self: center;
-
-    h1 {
-      margin-bottom: var(--wa-space-2xs);
-    }
-
-    wa-breadcrumb-item:not(:first-of-type, :last-of-type) {
-      display: none;
-    }
-
-    p:empty {
-      display: none;
-    }
-  }
-}
-
-.showcase-examples-wrapper {
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.showcase-examples {
-  column-gap: var(--wa-space-xl);
-
-  & wa-card {
-    display: inline-block;
-    width: 100%;
-
-    &:has(+ wa-card) {
-      margin-block-end: var(--wa-space-xl);
-    }
-  }
-
-  @supports not (zoom: 1) {
-    column-count: 1;
-
-    @media (width > 750px) {
-      column-count: 2;
-    }
-
-    @media (width > 950px) {
-      column-count: 3;
-    }
-  }
-
-  @supports (zoom: 1) {
-    column-count: 1;
-    zoom: 40%;
-
-    @media (width > 350px) {
-      column-count: 2;
-    }
-
-    @media (width > 450px) {
-      zoom: 55%;
-    }
-
-    @media (width > 750px) {
-      zoom: 70%;
-    }
-
-    @media (width > 950px) {
-      column-count: 3;
-    }
-  }
-}

docs/docs/themes/tailspin.md

@@ -1,7 +0,0 @@
----
-title: Tailspin
-description: Like a bird in flight, guiding you from there to here.
-isPro: true
-tags: pro
-palette: vogue
----

docs/docs/themes/themes.json

@@ -1,5 +0,0 @@
-{
-  "layout": "theme.njk",
-  "wide": true,
-  "tags": ["themes", "theme"]
-}

docs/docs/utilities/appearance.md

@@ -1,99 +0,0 @@
----
-title: Appearance Variants
-description: Appearance utilities apply a collection of properties to achieve certain effects, like making elements accented, outlined, filled, or plain.
-snippets:
-  - .wa-accent
-  - .wa-outlined
-  - .wa-filled
-  - .wa-plain
-file: styles/utilities/appearance.css
----
-
-Some Web Awesome components, like `<wa-button>`, allow you to change their overall style by using an `appearance` attribute:
-
-{% for component in componentsBy.attribute.appearance %}
-- <a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-{%- endfor %}
-
-You can create the same effect on any element by using the appearance utility classes:
-
-- `.wa-accent`
-- `.wa-outlined`
-- `.wa-filled`
-- `.wa-plain`
-
-Using these classes is a two-way handshake:
-they do not directly apply styles, but define custom properties that you can use in styles that should respond to these utilities:
-- `--background-color`
-- `--background-color-hover`
-- `--background-color-active`
-- `--border-color`
-- `--border-color-hover`
-- `--text-color`
-- `--text-color-hover`
-
-Then you can use (some of) these properties in any class that should respond to these.
-
-For example, assume we wanted to make a custom `.badge` class with appearance variants.
-This is all we need to do:
-
-```html { .example }
-<small class="badge wa-accent">Accent</small>
-<small class="badge wa-outlined">Outlined</small>
-<small class="badge wa-filled">Filled</small>
-<small class="badge wa-plain">Plain</small>
-
-<style>
-  .badge {
-	background-color: var(--background-color);
-	border: 1px solid var(--border-color);
-	color: var(--text-color);
-	padding: var(--wa-space-2xs) var(--wa-space-xs);
-	border-radius: var(--wa-border-radius-s);
-  }
-</style>
-```
-
-## With Color Variants
-
-These properties also work well with the [color variants](/docs/utilities/color/) utility classes:
-
-```html { .example }
-<div class="wa-stack">
-	<div class="wa-brand">
-		<small class="badge wa-accent">Accent</small>
-		<small class="badge wa-outlined">Outlined</small>
-		<small class="badge wa-filled">Filled</small>
-		<small class="badge wa-plain">Plain</small>
-	</div>
-	<div class="wa-danger">
-		<small class="badge wa-accent">Accent</small>
-		<small class="badge wa-outlined">Outlined</small>
-		<small class="badge wa-filled">Filled</small>
-		<small class="badge wa-plain">Plain</small>
-	</div>
-	<div class="wa-warning">
-		<small class="badge wa-accent">Accent</small>
-		<small class="badge wa-outlined">Outlined</small>
-		<small class="badge wa-filled">Filled</small>
-		<small class="badge wa-plain">Plain</small>
-	</div>
-	<div class="wa-success">
-		<small class="badge wa-accent">Accent</small>
-		<small class="badge wa-outlined">Outlined</small>
-		<small class="badge wa-filled">Filled</small>
-		<small class="badge wa-plain">Plain</small>
-	</div>
-</div>
-
-<style>
-  .badge {
-	background-color: var(--background-color);
-	border: 1px solid var(--border-color);
-	color: var(--text-color);
-	padding: var(--wa-space-2xs) var(--wa-space-xs);
-	border-radius: var(--wa-border-radius-s);
-  }
-</style>
-```
-

docs/docs/utilities/fouce.njk

@@ -1,131 +0,0 @@
----
-title: Reduce FOUCE
-description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
-file: styles/utilities/fouce.css
-icon: spinner
----
-{% markdown %}
-No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
-
-Here is a comparison of the loading experience with and without this utility,
-with a simulated slow loading time:
-
-{% endmarkdown %}
-
-
-<div class="wa-split wa-align-items-end">
-  <strong>Normal loading</strong>
-  <wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
-    <wa-icon name="refresh"></wa-icon>
-    Refresh
-  </wa-button>
-  <strong>With FOUCE reduction</strong>
-</div>
-
-
-{% set sample_card %}
-<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
-<link rel="stylesheet" href="/dist/styles/webawesome.css">
-<link rel="stylesheet" href="/dist/styles/forms.css">
-<script type=module>
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
-const loadScript = src => new Promise((resolve, reject) => {
-  const script = document.createElement("script");
-  script.src = src;
-  script.type = "module";
-  script.onload = resolve;
-  script.onerror = reject;
-  document.head.appendChild(script);
-});
-
-await delay(500);
-await loadScript("/dist/components/button/button.js");
-await delay(500);
-await loadScript("/dist/components/card/card.js");
-await delay(500);
-await loadScript("/dist/components/rating/rating.js");
-</script>
-
-<wa-card with-footer with-image class="card-overview">
-  <img
-    slot="image"
-    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
-  />
-
-  <strong>Mittens</strong><br />
-  This kitten is as cute as he is playful. Bring him home today!<br />
-  <small>6 weeks old</small>
-
-  <div slot="footer">
-    <wa-button variant="brand" pill>More Info</wa-button>
-    <wa-rating></wa-rating>
-  </div>
-</wa-card>
-
-<style>
-  .card-overview small {
-    color: var(--wa-color-text-quiet);
-  }
-
-  .card-overview [slot=footer] {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-</style>
-{% endset %}
-
-
-<div class="iframes">
-<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
-<iframe srcdoc='{{ sample_card }}'></iframe>
-</div>
-<style>
-.iframes {
-	display: flex;
-	gap: var(--wa-space-m);
-  margin-top: var(--wa-space-l);
-
-	iframe {
-		flex: 1;
-		height: 60ch;
-	}
-}
-</style>
-
-{% markdown %}
-## How does it work?
-
-The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
-- If the element is _ready_ before the timeout, it will appear immediately.
-- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
-- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
-
-An element is considered ready when both of these are true:
-1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
-2. If it’s a Web Awesome component, its contents are also ready
-
-## Customization
-
-You can use the following CSS variables to customize the behavior:
-
-| Variable | Description | Default |
-| --- | --- | --- |
-| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
-| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
-
-The fade duration cannot be longer than the timeout.
-This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
-
-For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
-
-```css
-[ssr] {
-  --wa-fouce-timeout: 0s;
-}
-```
-
-You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
-Applying this class to the root element will disable the utility for the entire page.
-{% endmarkdown %}

docs/docs/utilities/size.md

@@ -1,165 +0,0 @@
----
-title: Size
-description: Size utilities give elements one of three preset sizes (small, medium, or large).
-icon: tokens/space
-status: experimental
-snippets:
-  - .wa-size-s
-  - .wa-size-m
-  - .wa-size-l
----
-
-Some Web Awesome components, like `<wa-button>`, allow you to change their size to one of three presets: `small`, `medium`, and `large` by using a `size` attribute:
-
-{% for component in componentsBy.attribute.size %}
-- <a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
-{%- endfor %}
-
-You can create the same effect on any element by using the size utility classes:
-
-- `.wa-size-s`
-- `.wa-size-m` _(default)_
-- `.wa-size-l`
-
-Using these classes does two things:
-- It sets `font-size` to one of the [size tokens](/docs/tokens/typography/#font-size).
-You can use CSS `em` units to reference that size in other properties.
-- It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
-- It aliases a bunch of other properties that CSS can use:
-
-| Custom Property | Small | Medium | Large |
-| --------------- | ----- | ------ | ----- |
-| `--wa-size` | `--wa-font-size-s` | `--wa-font-size-m` | `--wa-font-size-l` |
-| `--wa-size-smaller` | `--wa-font-size-xs` | `--wa-font-size-s` | `--wa-font-size-m` |
-| `--wa-space` | `--wa-space-s` | `--wa-space-m` | `--wa-space-l` |
-| `--wa-space-smaller` | `--wa-space-xs` | `--wa-space-s` | `--wa-space-m` |
-
-For example, assume we wanted to make a custom `.tag` class with size variants.
-
-```html { .example }
-<span class="tag wa-size-s">Small</span>
-<span class="tag">Default</span>
-<span class="tag wa-size-m">Medium</span>
-<span class="tag wa-size-l">Large</span>
-
-<style>
-  .tag {
-	display: inline-block;
-	padding: var(--wa-space-smaller) var(--wa-space);
-	border-radius: var(--wa-border-radius-m); /* usually fixed across sizes */
-	background-color: var(--wa-color-fill-quiet);
-	border: 1px solid var(--wa-color-border-quiet);
-	color: var(--wa-color-on-quiet);
-  }
-</style>
-```
-
-## Advanced: Customizing Sizes
-
-But what if you are creating a style that should **generally** be smaller (e.g. a badge) or larger (e.g. a pull quote)?
-For example, suppose we wanted to define a custom `.tag2` class just like `.tag` in the previous section,
-but with a different set of sizes.
-
-This is possible, though a bit more involved.
-The first thing you need to do is define these 8 properties in your CSS for your "breakpoints":
-
-| Custom property | Default value |
-| --------------- | ------------- |
-| `--size-xs` | `var(--wa-font-size-xs)` |
-| `--size-s` | `var(--wa-font-size-s)` |
-| `--size-m` | `var(--wa-font-size-m)` |
-| `--size-l` | `var(--wa-font-size-l)` |
-| `--space-xs` | `var(--wa-space-xs)` |
-| `--space-s` | `var(--wa-space-s)` |
-| `--space-m` | `var(--wa-space-m)` |
-| `--space-l` | `var(--wa-space-l)` |
-
-
-It would look like this:
-
-```css
-.tag2 {
-	--size-xs: var(--wa-font-size-2xs);
-	--size-s: var(--wa-font-size-xs);
-	--size-m: var(--wa-font-size-s);
-	--size-l: var(--wa-font-size-m);
-
-	--space-xs: var(--wa-space-2xs);
-	--space-s: var(--wa-space-xs);
-	--space-m: var(--wa-space-s);
-	--space-l: var(--wa-space-m);
-}
-```
-
-That by itself is sufficient to give you sizes when the utility classes are used, though no default size:
-
-```html { .example }
-<span class="tag2 wa-size-s">Small</span>
-<span class="tag2">Default</span>
-<span class="tag2 wa-size-m">Medium</span>
-<span class="tag2 wa-size-l">Large</span>
-
-<style>
-  .tag2 {
-	--size-xs: var(--wa-font-size-2xs);
-	--size-s: var(--wa-font-size-xs);
-	--size-m: var(--wa-font-size-s);
-	--size-l: var(--wa-font-size-m);
-
-	--space-xs: var(--wa-space-2xs);
-	--space-s: var(--wa-space-xs);
-	--space-m: var(--wa-space-s);
-	--space-l: var(--wa-space-m);
-
-	display: inline-block;
-	font-size: var(--wa-size); /* needed for the default size */
-	padding: var(--wa-space-smaller) var(--wa-space);
-	border-radius: var(--wa-border-radius-s); /* usually fixed across sizes */
-	background-color: var(--wa-color-fill-quiet);
-	border: 1px solid var(--wa-color-border-quiet);
-	color: var(--wa-color-on-quiet);
-  }
-</style>
-```
-
-Supporting a default size as well requires a little bit more plumbing:
-
-```html { .example }
-<div>
-	<span class="tag3 wa-size-s">Small</span>
-	<span class="tag3">Default</span>
-	<span class="tag3 wa-size-m">Medium</span>
-	<span class="tag3 wa-size-l">Large</span>
-</div>
-
-<style>
-  .tag3 {
-	--size-xs: var(--wa-font-size-2xs);
-	--size-s: var(--wa-font-size-xs);
-	--size-m: var(--wa-font-size-s);
-	--size-l: var(--wa-font-size-m);
-
-	--space-xs: var(--wa-space-2xs);
-	--space-s: var(--wa-space-xs);
-	--space-m: var(--wa-space-s);
-	--space-l: var(--wa-space-m);
-
-	/* Default size assignments with 0 specificity */
-	:where(&) {
-		--wa-size: var(--size-m);
-		--wa-size-smaller: var(--size-s);
-		--wa-space: var(--space-m);
-		--wa-space-smaller: var(--space-s);
-	}
-
-	display: inline-block;
-	font-size: var(--wa-size); /* needed for the default size */
-	padding: var(--wa-space-smaller) var(--wa-space);
-	border-radius: var(--wa-border-radius-s); /* usually fixed across sizes */
-	background-color: var(--wa-color-fill-quiet);
-	border: 1px solid var(--wa-color-border-quiet);
-	color: var(--wa-color-on-quiet);
-  }
-</style>
-```
-

docs/src/env.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="astro/client" />
-/// <reference path="../.astro/types.d.ts" />

package.json

@@ -1,80 +1,24 @@
 {
-  "name": "@shoelace-style/webawesome",
+  "name": "@webawesome/monorepo",
+  "private": true,
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.13",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
-  "customElements": "dist/custom-elements.json",
-  "web-types": "./dist/web-types.json",
   "type": "module",
-  "types": "dist/webawesome.d.ts",
-  "jsdelivr": "./dist/webawesome.loader.js",
-  "exports": {
-    ".": {
-      "types": "./dist/webawesome.d.ts",
-      "import": "./dist/webawesome.js"
-    },
-    "./dist/custom-elements.json": "./dist/custom-elements.json",
-    "./dist/webawesome.js": "./dist/webawesome.js",
-    "./dist/webawesome.loader.js": "./dist/webawesome.loader.js",
-    "./dist/themes": "./dist/themes",
-    "./dist/themes/*": "./dist/themes/*",
-    "./dist/components": "./dist/components",
-    "./dist/components/*": "./dist/components/*",
-    "./dist/react": "./dist/react/index.js",
-    "./dist/react/*": "./dist/react/*",
-    "./dist/translations": "./dist/translations",
-    "./dist/translations/*": "./dist/translations/*"
-  },
-  "files": [
-    "dist",
-    "cdn"
+  "workspaces": [
+    "packages/*"
   ],
-  "keywords": [
-    "web components",
-    "custom elements",
-    "components"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/shoelace-style/webawesome.git"
-  },
-  "bugs": {
-    "url": "https://github.com/shoelace-style/webawesome/issues"
-  },
   "scripts": {
-    "start": "node scripts/build.js --develop",
-    "build": "node scripts/build.js",
-    "build:serve": "npm run build && npx http-server _site -p 4000",
-    "build:alpha": "node scripts/build.js --alpha",
-    "build:alpha:serve": "npm run build:alpha && npx http-server _site -p 4000",
-    "start:alpha": "node scripts/build.js --alpha --develop",
-    "publish-alpha-cdn": "./publish-alpha-cdn.sh",
-    "create": "plop --plopfile scripts/plop/plopfile.js",
-    "test": "web-test-runner --group default",
-    "test:component": "web-test-runner -- --watch --group",
-    "test:contrast": "cd src/styles/color && node contrast.test.js",
-    "test:watch": "web-test-runner --watch --group default",
-    "prettier": "prettier --check --log-level=warn .",
-    "prettier:fix": "prettier --write --log-level=warn .",
-    "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress",
-    "verify": "npm run prettier && npm run build && npm run test",
-    "prepublishOnly": "npm run verify",
-    "check-updates": "npx npm-check-updates --interactive --format group"
+    "check-updates": "npx npm-check-updates --interactive --format group",
+    "start": "cd packages/webawesome && npm run start",
+    "start:pro": "cd packages/webawesome-pro && npm run start"
   },
   "engines": {
     "node": ">=14.17.0"
   },
-  "dependencies": {
-    "@ctrl/tinycolor": "^4.1.0",
-    "@floating-ui/dom": "^1.6.12",
-    "@shoelace-style/animations": "^1.2.0",
-    "@shoelace-style/localize": "^3.2.1",
-    "composed-offset-position": "^0.0.6",
-    "lit": "^3.2.1",
-    "qr-creator": "^1.0.0"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@11ty/eleventy": "3.0.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
@@ -143,3 +87,4 @@
     ]
   }
 }
+

packages/webawesome/custom-elements-manifest.js

@@ -4,8 +4,11 @@ import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
 import { parse } from 'comment-parser';
 import fs from 'fs';
 import { pascalCase } from 'pascal-case';
+import * as url from 'url';
+import * as path from "node:path"
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
-const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const packageData = JSON.parse(fs.readFileSync(path.join(__dirname, 'package.json'), 'utf8'));
 const { name, description, version, author, homepage, license } = packageData;
 const outdir = 'dist-cdn';
 
@@ -183,3 +186,4 @@ export default {
     // })
   ],
 };
+