Merge pull request #859 from shoelace-style/kj/patterns-home-stretch

Kj/patterns home stretch
a few more app patterns
2026-01-19 07:29:14 +00:00 · 2025-04-04 12:17:39 -05:00 · 2025-04-04 12:16:21 -05:00 · 2025-04-04 11:10:40 -05:00 · 2025-04-03 21:53:50 -05:00 · 2025-04-03 19:14:19 -05:00
96 changed files with 1661 additions and 1041 deletions
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -36,16 +36,10 @@ const globalData = {
  },
 };
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
 const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
 export default function (eleventyConfig) {
  /**
   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these passthrough extensions
   * will also need to be updated in the Web Awesome App.
   */
  const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
  const baseDir = process.env.BASE_DIR || 'docs';
  const passThrough = [...passThroughExtensions.map(ext => path.join(baseDir, '**/*.' + ext))];
  /**
   * This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
   */
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -20,7 +20,7 @@
  </head>
  <body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
    <!-- use view="desktop" as default to reduce layout jank on desktop site. -->
-    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
+    <wa-page view="desktop" disable-navigation-toggle="">
      <header slot="header" class="wa-split">
        {# Logo #}
        <div id="docs-branding">
@@ -33,13 +33,13 @@
            <span class="wa-desktop-only">{% include "logo.njk" %}</span>
            <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
          </a>
-          <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
+          <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
+          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
        </div>
        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
          {# Desktop selectors #}
-          <div class="wa-desktop-only wa-cluster wa-gap-xs">
+          <div class="only-desktop wa-cluster wa-gap-xs">
            {% include "preset-theme-selector.njk" %}
            {% include "color-scheme-selector.njk" %}
          </div>
@@ -48,7 +48,7 @@
          <wa-button id="search-trigger" appearance="outlined" size="small" data-search>
            <wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
            Search
-            <kbd slot="suffix" class="wa-desktop-only">/</kbd>
+            <kbd slot="suffix" class="only-desktop">/</kbd>
          </wa-button>
          {# Login #}
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -255,7 +255,7 @@
  {# Importing #}
  <h2>Importing</h2>
  <p>
-    The <a href="/docs/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
+    The <a href="/docs/installation/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
  </p>
  <wa-tab-group label="How would you like to import this component?">
--- a/docs/_layouts/palette.njk
+++ b/docs/_layouts/palette.njk
@@ -126,7 +126,7 @@
          {% for h in hues -%}
            {%- if h !== 'gray' -%}
              <wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
-              <wa-tooltip for="gray-undertone-{{ h }}">
+              <wa-tooltip for="gray-undertone-{{ h }}" hoist>
                {{ h | capitalize }}
              </wa-tooltip>
            {%- endif -%}
--- a/docs/_layouts/theme.njk
+++ b/docs/_layouts/theme.njk
@@ -25,8 +25,8 @@ wa_data.palettes = {
  {% endfor %}
 };
 </script>
-<link href="/docs/themes/remix.css" rel="stylesheet">
+<link href="{{ page.url }}../remix.css" rel="stylesheet">
-<script src="/docs/themes/remix.js" type="module"></script>
+<script src="{{ page.url }}../remix.js" type="module"></script>
 {% endblock %}
 {% block header %}
--- a/docs/_utils/copy-code.js
+++ b/docs/_utils/copy-code.js
@@ -33,7 +33,7 @@ export function copyCodePlugin(eleventyConfig, options = {}) {
      // Add a copy button
      pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
-        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
+        <wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
    });
    return doc.toString();
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -1,5 +1,34 @@
-import { domChange } from './util/dom-change.js';
+let initialPageLoadComplete = document.readyState === 'complete';
-export { domChange };
+
 if (!initialPageLoadComplete) {
  window.addEventListener('load', () => {
    initialPageLoadComplete = true;
  });
 }
 // Helper for view transitions
 export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
  const canUseViewTransitions =
    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // Skip transitions on initial page load
  if (!initialPageLoadComplete && ignoreInitialLoad) {
    fn(false);
    return null;
  }
  if (canUseViewTransitions && behavior === 'smooth') {
    const transition = document.startViewTransition(() => {
      fn(true);
      // Wait a brief delay before finishing the transition to prevent jumpiness
      return new Promise(resolve => setTimeout(resolve, 200));
    });
    return transition;
  } else {
    fn(false);
    return null;
  }
 }
 export function nextFrame() {
  return new Promise(resolve => requestAnimationFrame(resolve));
--- a/docs/assets/scripts/util/dom-change.js
+++ b/docs/assets/scripts/util/dom-change.js
@@ -1,37 +0,0 @@
 let initialPageLoadComplete = document.readyState === 'complete';
 if (!initialPageLoadComplete) {
  window.addEventListener('load', () => {
    initialPageLoadComplete = true;
  });
 }
 /**
 * Helper for performing a DOM change using a view transition, wherever supported and reduced motion is not desired.
 * @param {function} fn - Function to perform the DOM change. If async, must resolve when the change is complete.
 * @param {object} [options] - Options for the transition
 * @param {'smooth' | 'instant'} [options.behavior] - Transition behavior. Defaults to 'smooth'. 'instant' will skip the transition.
 * @param {boolean} [options.ignoreInitialLoad] - If true, will skip the transition on initial page load. Defaults to true.
 */
 export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
  const canUseViewTransitions =
    document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // Skip transitions on initial page load
  if (!initialPageLoadComplete && ignoreInitialLoad) {
    fn(false);
    return null;
  }
  if (canUseViewTransitions && behavior === 'smooth') {
    const transition = document.startViewTransition(() => {
      fn(true);
      // Wait a brief delay before finishing the transition to prevent jumpiness
      return new Promise(resolve => setTimeout(resolve, 200));
    });
    return transition;
  } else {
    fn(false);
    return null;
  }
 }
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -608,6 +608,13 @@ table.colors {
  margin-block-end: var(--wa-flow-spacing);
 }
 /** mobile */
@media screen and (max-width: 768px) {
  wa-page .only-desktop {
    display: none;
  }
 }
 /** desktop */
@media screen and not (max-width: 768px) {
  /* Navigation sidebar */
--- a/docs/docs/components/button-group.md
+++ b/docs/docs/components/button-group.md
@@ -167,7 +167,7 @@ Other elements can also be placed inside button groups:
 <wa-button-group label="Example Button Group">
  <wa-button>Button</wa-button>
  <button>Native Button</button>
-  <wa-dropdown>
+  <wa-dropdown hoist>
    <wa-button slot="trigger" caret>Dropdown</wa-button>
    <wa-menu>
      <wa-menu-item>Item 1</wa-menu-item>
@@ -185,7 +185,7 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
 ```html {.example}
 <wa-button-group label="Example Button Group">
  <wa-button variant="brand">Save</wa-button>
-  <wa-dropdown placement="bottom-end">
+  <wa-dropdown placement="bottom-end" hoist>
    <wa-button slot="trigger" variant="brand" caret>
      <span class="wa-visually-hidden">More options</span>
    </wa-button>
--- a/docs/docs/components/code-demo.md
+++ b/docs/docs/components/code-demo.md
@@ -3,7 +3,6 @@ title: Code Demo
 description: Code demos can be used to render code examples as inline live demos.
 tags: component
 noAlpha: true
 isPro: true
 ---
 ```html {.example}
--- a/docs/docs/components/dropdown.md
+++ b/docs/docs/components/dropdown.md
@@ -180,3 +180,38 @@ To create a submenu, nest an `<wa-menu slot="submenu">` element in a [menu item]
 :::warning
 As a UX best practice, avoid using more than one level of submenu when possible.
 :::
 ### Hoisting
 Dropdown panels will be clipped if they're inside a container that has `overflow: auto|hidden`. The `hoist` attribute forces the panel to use a fixed positioning strategy, allowing it to break out of the container. In this case, the panel will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
 ```html {.example}
 <div class="dropdown-hoist">
  <wa-dropdown>
    <wa-button slot="trigger" caret>No Hoist</wa-button>
    <wa-menu>
      <wa-menu-item>Item 1</wa-menu-item>
      <wa-menu-item>Item 2</wa-menu-item>
      <wa-menu-item>Item 3</wa-menu-item>
    </wa-menu>
  </wa-dropdown>
  <wa-dropdown hoist>
    <wa-button slot="trigger" caret>Hoist</wa-button>
    <wa-menu>
      <wa-menu-item>Item 1</wa-menu-item>
      <wa-menu-item>Item 2</wa-menu-item>
      <wa-menu-item>Item 3</wa-menu-item>
    </wa-menu>
  </wa-dropdown>
 </div>
 <style>
  .dropdown-hoist {
    position: relative;
    border: solid 2px var(--wa-color-surface-border);
    padding: var(--wa-space-m);
    overflow: hidden;
  }
 </style>
 ```
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -17,93 +17,13 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
 The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp` and `duotone`. For these icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/installation/#using-font-awesome-kit-codes) to unlock additional families, including `sharp` and `duotone`. For these icon families, use the `variant` attribute to set the variant.
 ```html {.example}
 <wa-icon family="brands" name="font-awesome"></wa-icon>
 <wa-icon family="brands" name="web-awesome"></wa-icon>
 ```
 ### Setting defaults via CSS
 You can use certain CSS custom properties to set icon defaults, not just on the icon itself, but any ancestor.
 This can be useful when you want certain parameters to vary based on context, e.g. icons inside callouts or all icons for a given theme.
 :::warning
 These CSS properties are intended to set **defaults**, and thus only make a difference when the corresponding attributes are not set.
 In future versions of Web Awesome, we may change this behavior to allow CSS properties to override attributes if `!important` is used.
 :::
 For example, here is how you can use CSS custom properties to set a default icon for each type of callout:
 ```html {.example}
 <wa-callout>
  <!-- Look ma, no attributes! -->
  <wa-icon slot="icon"></wa-icon>
  This is a normal callout.
 </wa-callout>
 <wa-callout variant="danger">
  <wa-icon slot="icon" name="dumpster-fire" variant="solid"></wa-icon>
  This is a callout with an explicit icon, which overrides these defaults.
 </wa-callout>
 <wa-callout variant="warning">
  <!-- Look ma, no attributes! -->
  <wa-icon slot="icon"></wa-icon>
  Here be dragons.
 </wa-callout>
 <wa-callout variant="danger">
  <!-- Look ma, no attributes! -->
  <wa-icon slot="icon"></wa-icon>
  Here be more dragons.
 </wa-callout>
 <wa-callout variant="success">
  <!-- Look ma, no attributes! -->
  <wa-icon slot="icon"></wa-icon>
  Success!
 </wa-callout>
 <style>
 wa-callout {
  --wa-icon-variant: regular;
  --wa-icon-name: info-circle;
  &[variant="warning"] {
    --wa-icon-name: triangle-exclamation;
  }
  &[variant="danger"] {
    --wa-icon-name: circle-exclamation;
  }
  &[variant="success"] {
    --wa-icon-name: circle-check;
  }
 }
 </style>
 ```
 You can even set icons dynamically, as a response to user interaction or media queries.
 For example, here's how we can change the icon on hover:
 ```html {.example}
 <wa-button class="github" href="https://github.com/webawesome/webawesome"><wa-icon slot="prefix" fixed-width></wa-icon> GitHub Repo</wa-button>
 <style>
 .github {
  --wa-icon-name: github;
  --wa-icon-family: brands;
  &:hover {
    --wa-icon-name: arrow-up-right-from-square;
    --wa-icon-family: classic;
  }
 }
 </style>
 ```
 ### Colors
 Icons inherit their color from the current text color. Thus, you can set the `color` property on the `<wa-icon>` element or an ancestor to change the color.
@@ -641,4 +561,4 @@ If you want to change the icons Web Awesome uses internally, you can register an
    resolver: name => `/path/to/custom/icons/${name}.svg`
  });
 </script>
-```
+```
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -468,20 +468,75 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
 </script>
 ```
 ### Positioning Strategy
 By default, the popup is positioned using an absolute positioning strategy. However, if your anchor is fixed or exists within a container that has `overflow: auto|hidden`, the popup risks being clipped. To work around this, you can use a fixed positioning strategy by setting the `strategy` attribute to `fixed`.
 The fixed positioning strategy reduces jumpiness when the anchor is fixed and allows the popup to break out containers that clip. When using this strategy, it's important to note that the content will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
 In this example, you can see how the popup breaks out of the overflow container when it's fixed. The fixed positioning strategy tends to be less performant than absolute, so avoid using it unnecessarily.
 Toggle the switch and scroll the container to see the difference.
 ```html {.example}
 <div class="popup-strategy">
  <div class="overflow">
    <wa-popup placement="top" strategy="fixed" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
  </div>
  <wa-switch checked>Fixed</wa-switch>
 </div>
 <style>
  .popup-strategy .overflow {
    position: relative;
    height: 300px;
    border: solid 2px var(--wa-color-surface-border);
    overflow: auto;
  }
  .popup-strategy span[slot='anchor'] {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: dashed 2px var(--wa-color-neutral-fill-loud);
    margin: 150px 50px;
  }
  .popup-strategy .box {
    width: 100px;
    height: 50px;
    background: var(--wa-color-brand-fill-loud);
    border-radius: var(--wa-border-radius-m);
  }
  .popup-strategy wa-switch {
    margin-top: 1rem;
  }
 </style>
 <script>
  const container = document.querySelector('.popup-strategy');
  const popup = container.querySelector('wa-popup');
  const fixed = container.querySelector('wa-switch');
  fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
 </script>
 ```
 ### Flip
-When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view and visually connected to its anchor.
+When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view. To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
 To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
 By default, flip takes effect when the popup would overflow the viewport.
 You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
 Scroll the container to see how the popup flips to prevent clipping.
 ```html {.example}
 <div class="popup-flip">
  <div class="overflow">
-    <wa-popup placement="top" flip active boundary="scroll">
+    <wa-popup placement="top" flip active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -537,7 +592,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
 ```html {.example}
 <div class="popup-flip-fallbacks">
  <div class="overflow">
-    <wa-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active boundary="scroll">
+    <wa-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -571,18 +626,14 @@ Scroll the container to see how the popup changes it's fallback placement to pre
 ### Shift
-When a popup is longer than its anchor, it risks overflowing.
+When a popup is longer than its anchor, it risks being clipped by an overflowing container. In this case, use the `shift` attribute to shift the popup along its axis and back into view. You can customize the shift behavior using `shiftBoundary` and `shift-padding`.
 In this case, use the `shift` attribute to shift the popup along its axis and back into view. You can customize the shift behavior using `shiftBoundary` and `shift-padding`.
 By default, auto-size takes effect when the popup would overflow the viewport.
 You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
 Toggle the switch to see the difference.
 ```html {.example}
 <div class="popup-shift">
  <div class="overflow">
-    <wa-popup placement="top" shift shift-padding="10" active boundary="scroll">
+    <wa-popup placement="top" shift shift-padding="10" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -625,11 +676,7 @@ Toggle the switch to see the difference.
 ### Auto-size
-Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from overflowing.
+Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
 Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
 By default, auto-size takes effect when the popup would overflow the viewport.
 You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
 When using `auto-size`, one or both of `--auto-size-available-width` and `--auto-size-available-height` will be applied to the host element. These values determine the available space the popover has before clipping will occur. Since they cascade, you can use them to set a max-width/height on your popup's content and easily control its overflow.
@@ -638,7 +685,7 @@ Scroll the container to see the popup resize as its available space changes.
 ```html {.example}
 <div class="popup-auto-size">
  <div class="overflow">
-    <wa-popup placement="top" auto-size="both" auto-size-padding="10" active boundary="scroll">
+    <wa-popup placement="top" auto-size="both" auto-size-padding="10" active>
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -425,3 +425,11 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
 </script>
 ```
 <script type="module">
  //
  // TODO - remove once we switch to the Popover API
  //
  customElements.whenDefined('wa-select').then(() => {
    document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
  });
 </script>
--- a/docs/docs/components/tooltip.md
+++ b/docs/docs/components/tooltip.md
@@ -152,3 +152,25 @@ Use the `--max-width` custom property to change the width the tooltip can grow t
 <wa-button id="wrapping-tooltip">Hover me</wa-button>
 ```
 ### Hoisting
 Tooltips will be clipped if they're inside a container that has `overflow: auto|hidden|scroll`. The `hoist` attribute forces the tooltip to use a fixed positioning strategy, allowing it to break out of the container. In this case, the tooltip will be positioned relative to its [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block), which is usually the viewport unless an ancestor uses a `transform`, `perspective`, or `filter`. [Refer to this page](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed) for more details.
 ```html {.example}
 <div class="tooltip-hoist">
  <wa-tooltip for="no-hoist">This is a tooltip</wa-tooltip>
  <wa-button id="no-hoist">No Hoist</wa-button>
  <wa-tooltip for="hoist" hoist>This is a tooltip</wa-tooltip>
  <wa-button id="hoist">Hoist</wa-button>
 </div>
 <style>
  .tooltip-hoist {
    position: relative;
    overflow: hidden;
    border: solid 2px var(--wa-color-surface-border);
    padding: var(--wa-space-m);
  }
 </style>
 ```
--- a/docs/docs/components/viewport-demo.md
+++ b/docs/docs/components/viewport-demo.md
@@ -3,7 +3,6 @@ title: Viewport Demo
 description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
 tags: component
 noAlpha: true
 isPro: true
 ---
 ```html {.example}
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -10,7 +10,7 @@ You can customize the look and feel of Web Awesome at a high level with themes.
 Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
-To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
+To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/installation/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
 ```html
 <link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
@@ -197,7 +197,7 @@ For example, we can give all outlined callouts a thick left border, regardless o
 <style>
  wa-callout:is(
-    [appearance~="outlined"],
+    [appearance~="outlined"], 
    .wa-outlined
  ) {
    border-left-width: var(--wa-panel-border-radius);
--- a/docs/docs/layout.njk
+++ b/docs/docs/layout.njk
@@ -10,7 +10,7 @@ override:tags: []
 {% markdown %}
 ## Installation
-Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/#cherry-picking).
+Layout components are included in Web Awesome's [autoloader](/docs/installation/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/installation/#cherry-picking).
 Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/native/)) by including the following stylesheet in your project:
--- a/docs/docs/patterns/app/action-panel.md
+++ b/docs/docs/patterns/app/action-panel.md
@@ -2,7 +2,6 @@
 title: Action Panel
 description: 'Help users complete tasks efficiently with quick access to key actions.'
 icon: action-panel
 isPro: true
 ---
 ## Simple
@@ -26,7 +25,7 @@ isPro: true
      <h3 class="wa-heading-m">Query with SQL Runner</h3>
      <p>Access your database to run ad hoc queries.</p>
    </div>
-    <wa-button variant="brand" size="small">New Query</wa-button>
+    <wa-button variant="brand">New Query</wa-button>
  </div>
 </wa-card>
 ```
@@ -47,17 +46,14 @@ isPro: true
 ## Avatar and Quick actions
-```html {.example}
+```html{.example}
 <wa-card style="margin: 0 auto; max-width: 45ch;">
  <div class="wa-flank">
    <wa-avatar image="https://images.unsplash.com/photo-1532202802379-df93d543bac3?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile-image"></wa-avatar>
    <div class="wa-split">
-      <div class="wa-stack wa-gap-2xs">
+      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Super Dog</span>
-        <div class="wa-caption-m wa-cluster wa-gap-xs">
+        <span class="wa-caption-m">Online</span>
          <span>Online</span>
          <wa-icon name="circle" style="color: var(--wa-color-green); font-size: 10px;"></wa-icon>
        </div>
      </div>
      <div class="wa-cluster" style="font-size: var(--wa-font-size-l);">
        <wa-icon-button name="microphone" label="audio-input"></wa-icon-button>
--- a/docs/docs/patterns/app/activity-log.md
+++ b/docs/docs/patterns/app/activity-log.md
@@ -1,7 +1,6 @@
 ---
 title: Activity Log
 description: 'Track and organize recent user actions or events.'
 ---
 ## Simple
@@ -104,7 +103,7 @@ description: 'Track and organize recent user actions or events.'
 ```html {.example}
 <wa-card style="max-width: 70ch; margin: auto">
-  <h3 class="wa-heading-m">Monthly Activity</h3>
+  <h3 class="wa-heading-l">Monthly Activity</h3>
  <div class="wa-stack">
    <wa-details>
      <span class="wa-heading-m" slot="summary">
@@ -112,7 +111,7 @@ description: 'Track and organize recent user actions or events.'
      </span>
      <div class="wa-stack">
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" name="envelope" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Email blasts</span>
@@ -125,7 +124,7 @@ description: 'Track and organize recent user actions or events.'
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" name="phone" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Spoke with the Pope</span>
@@ -144,7 +143,7 @@ description: 'Track and organize recent user actions or events.'
      </span>
      <div class="wa-stack">
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" name="video" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="video" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Zoom Call with Northeast office</span>
@@ -157,7 +156,7 @@ description: 'Track and organize recent user actions or events.'
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" name="calendar" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Scheduled birthday party</span>
@@ -176,7 +175,7 @@ description: 'Track and organize recent user actions or events.'
      </span>
      <div class="wa-stack">
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" family="brands" name="intercom" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Got new lead</span>
@@ -189,7 +188,7 @@ description: 'Track and organize recent user actions or events.'
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank">
-          <wa-icon style="font-size: var(--wa-font-size-l)" name="list-check" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check" fixed-width></wa-icon>
          <div class="wa-split">
            <div class="wa-stack wa-gap-0">
              <span class="wa-heading-s">Completed Todo</span>
@@ -204,133 +203,4 @@ description: 'Track and organize recent user actions or events.'
    </wa-details>
  </div>
 </wa-card>
 ```
 ## Card Separated
 ```html {.example}
 <div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
  <div class="wa-stack">
    <wa-card>
      <div class="wa-flank">
        <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
        <div class="wa-stack wa-gap-0">
          <div class="wa-split">
            <span class="wa-heading-s">Isaiah Hamilton</span>
            <wa-relative-time class="wa-caption-s" date="2025-01-15T09:17:00-04:00"></wa-relative-time>
          </div>
          <p>Who's on first?</p>
          <a href="#" class="wa-cluster wa-gap-2xs">
            <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
            <span>Reply</span>
          </a>
        </div>
      </div>
    </wa-card>
    <div class="wa-flank wa-gap-xl">
      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
      <ul class="wa-stack">
      <li class="wa-stack wa-gap-2xs">
        <wa-card>
      <div class="wa-flank">
        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
        <div class="wa-stack wa-gap-0">
          <div class="wa-split">
            <span class="wa-heading-s">Melvin Hurst</span>
            <wa-relative-time class="wa-caption-s" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
          </div>
          <p>What's on second?</p>
          <a href="#" class="wa-cluster wa-gap-2xs">
            <wa-icon name="reply" family="sharp" variant="regular"></wa-icon>
            <span>Reply</span>
          </a>
        </div>
      </div>
    </wa-card>
      </li>
      <li class="wa-stack wa-gap-2xs">
        <wa-card>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar image="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
        <div class="wa-stack wa-gap-xs">
          <div class="wa-split">
            <span class="wa-heading-s">Vanessa Wright</span>
          </div>
          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
        </div>
      </div>
    </wa-card>
      </li>
    </ul>
    </div>
  </div>
 </div>
 ```
 ## Divider Separated
 ```html {.example}
 <wa-card with-header style="max-width: 54ch; margin: 0 auto;">
  <div slot="header" class="wa-split">
    <div>
      <span>Notifications</span>
      <wa-badge appearance="filled" variant="success" pill>2</wa-badge>
    </div>
    <wa-icon name="close"></wa-icon>
  </div>
  <div class="wa-stack">
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
        <div class="wa-stack wa-gap-2xs">
          <div class="wa-split">
            <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
            <wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 3:12PM</span>
            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
          </div>
          <wa-callout variant="neutral">
            Really love this approach. I think this is the best solution for the sync issue.
          </wa-callout>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
        <div class="wa-stack wa-gap-2xs">
          <div class="wa-split">
            <span><strong>Charlotte</strong> followed you</span>
            <wa-icon name="circle" style="color: var(--wa-color-green);"></wa-icon>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 3:04PM</span>
            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
          </div>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar image="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="Profile image"></wa-avatar>
        <div class="wa-stack wa-gap-2xs">
          <div class="wa-split">
            <span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 2:22PM</span>
            <wa-relative-time class="wa-caption-m" date="2025-02-15T09:17:00-04:00"></wa-relative-time>
          </div>
          <div class="wa-cluster wa-gap-xs">
            <wa-button appearance="outlined" size="small">Decline</wa-button>
            <wa-button variant="brand" size="small">Accept</wa-button>
          </div>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
  </div>
 </wa-card>
 ```
--- a/docs/docs/patterns/app/comments.md
+++ b/docs/docs/patterns/app/comments.md
@@ -1,7 +1,6 @@
 ---
 title: Comments
 description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
 isPro: true
 ---
 ## Card with Header & Footer
@@ -14,11 +13,11 @@ isPro: true
    </div>
    <wa-textarea aria-labelledby="comment-area-label"></wa-textarea>
    <div slot="footer" class="wa-cluster" style="justify-content: flex-end">
-      <wa-button appearance="filled" size="small">
+      <wa-button appearance="filled">
        <wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
        Attach a file
      </wa-button>
-      <wa-button variant="brand" size="small">Comment</wa-button>
+      <wa-button variant="brand">Comment</wa-button>
    </div>
  </wa-card>
 </form>
@@ -92,7 +91,7 @@ isPro: true
        <wa-icon-button name="face-smile" label="Add Sticker" id="sticker-button"></wa-icon-button>
        <wa-tooltip for="sticker-button">Add Sticker</wa-tooltip>
      </div>
-      <wa-button variant="brand">Comment</wa-button>
+      <wa-button variant="brand">Comment</wa-button>  
    </div>
  </div>
 </div>
@@ -108,9 +107,9 @@ isPro: true
  <div class="wa-stack">
    <div class="wa-flank" style="--flank-size: 3rem">
      <div class="wa-frame:portrait wa-border-radius-s">
-        <img
+        <img 
-          src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          src="https://images.unsplash.com/photo-1607675742178-f616ae75044b?q=80&w=3435&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
-          alt="the cover image for the film"
+          alt="" 
        />
      </div>
      <span class="wa-heading-l">Heretic</span>
--- a/docs/docs/patterns/app/data-display.md
+++ b/docs/docs/patterns/app/data-display.md
@@ -1,62 +1,40 @@
 ---
 title: Data Display
 description: 'Convey insights, metrics, and aggregate data at a glance.'
 isPro: true
 ---
-## Simple
+## Simple 
 ```html {.example}
 <wa-card>
-  <div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
+  <div class="wa-grid wa-gap-3xl">
    <div class="wa-stack">
      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
+        <span>Revenue</span>
-          <wa-icon name="sack-dollar"></wa-icon>
+        <span>+4.75%</span>
          <span>Incomes</span>
        </div>
        <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
          <wa-icon name="arrow-trend-up"></wa-icon>
          <wa-format-number class="wa-heading-s" type="percent" value=".475"></wa-format-number>
        </div>
      </div>
-      <wa-format-number class="wa-heading-xl" type="currency" currency="USD" value="175000000" lang="en-US"></wa-format-number>
+      <div class="wa-heading-2xl">$400,000</div>
    </div>
    <div class="wa-stack">
      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
+        <span>Revenue</span>
-          <wa-icon name="credit-card"></wa-icon>
+        <span>+4.75%</span>
          <span>Expenses</span>
        </div>
         <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-red);">
          <wa-icon name="arrow-trend-down"></wa-icon>
          <wa-format-number class="wa-heading-s" type="percent" value=".27"></wa-format-number>
        </div>
      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="289472" lang="en-US"></wa-format-number>
+      <div class="wa-heading-2xl">$400,000</div>
    </div>
    <div class="wa-stack">
      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
+        <span>Revenue</span>
-          <wa-icon name="seedling"></wa-icon>
+        <span>+4.75%</span>
          <span>Investments</span>
        </div>
        <div class="wa-cluster wa-gap-xs" style="color: var(--wa-color-green);">
          <wa-icon name="arrow-trend-up"></wa-icon>
          <wa-format-number class="wa-heading-s" type="percent" value=".14"></wa-format-number>
        </div>
      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="569213" lang="en-US"></wa-format-number>
+      <div class="wa-heading-2xl">$400,000</div>
    </div>
    <div class="wa-stack">
      <div class="wa-split">
-        <div class="wa-cluster wa-gap-xs">
+        <span>Revenue</span>
-          <wa-icon name="landmark"></wa-icon>
+        <span>+4.75%</span>
          <span>Mortgages & Loans</span>
        </div>
      </div>
-      <wa-format-number class="wa-heading-xl" class="wa-heading-xl" type="currency" currency="USD" value="23904" lang="en-US"></wa-format-number>
+      <div class="wa-heading-2xl">$400,000</div>
    </div>
  </div>
 </wa-card>
@@ -171,4 +149,4 @@ isPro: true
    </article>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/app/description-list.md
+++ b/docs/docs/patterns/app/description-list.md
@@ -1,7 +1,6 @@
 ---
 title: Description List
 description: 'Help users digest detailed information in a structured, easy-to-scan format.'
 isPro: true
 ---
 ## Left Aligned
@@ -250,4 +249,4 @@ isPro: true
    </a>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/app/empty-state.md
+++ b/docs/docs/patterns/app/empty-state.md
@@ -1,7 +1,6 @@
 ---
 title: Empty State
 description: 'Guide users with helpful prompts and visuals when no content is available.'
 isPro: true
 ---
 ## Simple
@@ -22,7 +21,7 @@ isPro: true
 ```html {.example}
 <a href="" class="wa-stack wa-align-items-center wa-placeholder wa-link-plain" style="max-width: 60ch; margin: auto">
-  <wa-icon name="ufo-beam" class="wa-caption-l" family="sharp" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
+  <wa-icon name="ufo-beam" class="wa-caption-l" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
  <p class="wa-heading-m">No Custom Icons</p>
  <p style="text-align: center">Add your own icon or logo to get started.</p>
 </a>
@@ -39,7 +38,7 @@ isPro: true
    <p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start with a blank canvas.</p>
    <div class="wa-grid wa-gap-xl" style="--min-column-size: 30ch;">
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="note-sticky"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -52,7 +51,7 @@ isPro: true
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="list-check"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -65,7 +64,7 @@ isPro: true
        </div>
      </a>
      <a href=""class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="table-cells"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -78,7 +77,7 @@ isPro: true
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="presentation-screen"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -91,7 +90,7 @@ isPro: true
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="pen-field"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -104,7 +103,7 @@ isPro: true
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-40);">
+        <wa-avatar shape="rounded">
          <wa-icon slot="icon" name="image"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -126,28 +125,29 @@ isPro: true
  </div>
 </wa-card>
 ```
-## Add people
+## Add people 
-```html {.example}
+```html{.example}
 <wa-card style="max-width: 60ch; margin: 0 auto;">
-  <div class="wa-stack wa-gap-xs">
+  <div class="wa-stack">
-    <h3 class="wa-heading-m">Add team members</h3>
+    <wa-icon></wa-icon>
-    <p>This project is awful lonely. Invite some team members to liven up the joint.</p>
+    <h1>Add team members</h1>
-    <div class="wa-flank:end wa-gap-xs">
+    <p>You haven’t added any team members to your project yet. As the owner of this project, you can manage team member permissions.</p>
    <div class="wa-flank:end">
      <wa-input></wa-input><wa-button>Invite</wa-button>
    </div>
    <div class="wa-stack">
-      <em class="wa-caption-l">Team members previously added to projects</em>
+      <span>Team members previously added to projects</span>
      <wa-divider></wa-divider>
      <section>
        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+          <wa-avatar></wa-avatar>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Earl Upton</span>
+            <span>lindsey Walton</span>
-            <span class="wa-caption-m">DevOps</span>
+            <span>Front end Developer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
            Invite
          </wa-button>
        </div>
@@ -156,14 +156,14 @@ isPro: true
      </section>
      <section>
        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" lable="profile image"></wa-avatar>
+          <wa-avatar></wa-avatar>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Steamboat Willie</span>
+            <span>lindsey Walton</span>
-            <span class="wa-caption-m">Captain</span>
+            <span>Front end Developer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
            Invite
          </wa-button>
        </div>
@@ -172,14 +172,14 @@ isPro: true
      </section>
      <section>
        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1678582967399-bf558533f5eb?q=80&w=3029&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+          <wa-avatar></wa-avatar>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Melissa Eckers</span>
+            <span>lindsey Walton</span>
-            <span class="wa-caption-m">Cloud Engineer</span>
+            <span>Front end Developer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
            Invite
          </wa-button>
        </div>
@@ -187,14 +187,14 @@ isPro: true
        <wa-divider></wa-divider>
      </section><section>
        <div class="wa-flank">
-          <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+          <wa-avatar></wa-avatar>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span class="wa-heading-s">Devin Shears</span>
+            <span>lindsey Walton</span>
-            <span class="wa-caption-m">UX Writer</span>
+            <span>Front end Developer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="user-plus" slot="prefix"></wa-icon>
+            <wa-icon name="plus" slot="prefix"></wa-icon>  
            Invite
          </wa-button>
        </div>
--- a/docs/docs/patterns/app/faq.md
+++ b/docs/docs/patterns/app/faq.md
@@ -1,7 +1,6 @@
 ---
 title: FAQ
 description: 'Empower users to learn more with a structured list of questions and answers.'
 isPro: true
 ---
 ## With Flanked Heading & Description
@@ -75,7 +74,7 @@ isPro: true
 </div>
 ```
-## Multiple Columns
+## 3 Column
 ```html{.example}
 <div>
@@ -87,7 +86,7 @@ isPro: true
      <dt class="wa-heading-m">How often do you update your courses?</dt>
      <dd>A course is updated once there is a fundamental shift in the language or library’s underlying API. You can check our <a href="#">workshop</a> list to see if a new version of a given course is on the schedule. You may also write to us as <a href="#">support@frontendmasters.com</a> with suggestions for updates.</dd>
    </div>
-
+   
    <div class="wa-stack wa-gap-xs">
      <dt class="wa-heading-m">Do you offer certificates of completion?</dt>
      <dd>You can download certificates of completion from the <a href="#">Completed Courses</a> list in your Learning Library. Click the diploma icon next to the course to download the certificate in light or dark mode. A link to your Public Profile is included on each certificate if you’ve created one. Public Profiles showcase your learning journey and are a fantastic way to share progress with friends, co-workers, or employers. Public Profiles are available to members with an active Frontend Masters subscription who have watched ten or more hours of content. Visit the <a href="#">Public Profile</a> section in My Account to get started.</dd>
@@ -104,16 +103,16 @@ isPro: true
        </ul>
      </dd>
    </div>
-
+   
    <div class="wa-stack wa-gap-xs">
      <dt class="wa-heading-m">Do you have discounts for students?</dt>
      <dd>We are part of the <a href="#">GitHub Student Developer Pack</a>, allowing students six months of free access to the entire platform.</dd>
    </div>
-
+   
    <div class="wa-stack wa-gap-xs">
      <dt class="wa-heading-m">How do I cancel my plan?</dt>
      <dd>You can cancel your Frontend Masters subscription by visiting the <a href="#">Subscription tab</a> in your My Account area.</dd>
    </div>
  </dl>
 </div>
-```
+```
--- a/docs/docs/patterns/app/feed.md
+++ b/docs/docs/patterns/app/feed.md
@@ -0,0 +1,287 @@
 ---
 title: Feed
 description: TODO
 ---
 ## Comment Section
 ```html{.example}
 <wa-card style="max-width: 60ch; margin: 0 auto;">
  <div class="wa-stack">
  <h1 class="wa-heading-m">Activity</h1>
  <wa-textarea></wa-textarea>
  <wa-divider></wa-divider>
  <section class="wa-stack">
    <div class="wa-flank">
      <wa-avatar label="User avatar"></wa-avatar>
      <div>
        <span class="wa-heading-s">Robert Fox</span>
        <span class="wa-caption-m">commented 32 min ago</span>
      </div>
    </div>
    <ul class="wa-stack wa-gap-xl" style="list-style-type: none; margin-inline-start: 1em;">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec. Suspendisse potenti. Pellentesque lobortis pulvinar nulla non tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
      <li class="wa-stack wa-gap-2xs">
        <div class="wa-flank">
          <wa-avatar label="User avatar"></wa-avatar>
          <div>
            <span>Robert Fox</span>
            <span class="wa-caption-m">commented 32 min ago</span>
          </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
      </li>
       <li class="wa-stack wa-gap-2xs">
        <div class="wa-flank">
          <wa-avatar label="User avatar"></wa-avatar>
          <div>
            <span>Robert Fox</span>
            <span class="wa-caption-m">commented 32 min ago</span>
          </div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis mollis nunc, vel tempor sem faucibus nec.</p>
      </li>
       <li class="wa-stack wa-gap-2xs">
        <div class="wa-flank">
          <wa-icon name="reply"></wa-icon>
          <a href="#">Leave Comment</a>
        </div>
      </li>
    </ul>
  </section>
  </div>
 </wa-card>
 ```
 ## With Summary Components
 ```html{.example}
 <wa-card style="max-width: 68ch; margin: 0 auto;">
  <h1 class="wa-heading-l">Monthly Activity</h1>
  <div class="wa-stack">
  <wa-details>
  <span class="wa-heading-m" slot="summary">
    February
  </span>
  <div class="wa-stack">
  <section class="wa-flank wa-gap-xs">
    <wa-icon style="font-size: var(--wa-font-size-xl)" name="envelope"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Email blasts</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">Nick Burkhart</a><span>sent to</span><a href="#">likely customers</a>
        </div>
      </div>
      <span class="wa-caption-m">Feb 28th</span>
    </div>
  </section>
   <wa-divider></wa-divider>
  <section class="wa-flank wa-gap-xs">
    <wa-icon style="font-size: var(--wa-font-size-xl)" name="phone"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Spoke with the Pope</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">Artur Fleck</a><span>for 1 hour</span>
        </div>
      </div>
      <span class="wa-caption-m">Feb 23rd</span>
    </div>
  </section>
  </div>
 </wa-details>
 <wa-details>
  <span class="wa-heading-m" slot="summary">
    March
  </span>
  <div class="wa-stack">
  <section class="wa-flank wa-gap-xs">
    <wa-icon style="font-size: var(--wa-font-size-xl)" name="video"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Zoom Call with Northeast office</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">Axel Foley</a><span>for 47 minutes</span>
        </div>
      </div>
      <span class="wa-caption-m">Mar 15th</span>
    </div>
  </section>
   <wa-divider></wa-divider>
  <section class="wa-flank wa-gap-s">
    <wa-icon style="font-size: var(--wa-font-size-xl)" name="calendar"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Scheduled birthday party</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">John Blaze</a><span>in</span><a href="#">Social Events</a>
        </div>
      </div>
      <span class="wa-caption-m">Mar 3rd</span>
    </div>
  </section>
  </div>
 </wa-details>
 <wa-details>
  <span class="wa-heading-m" slot="summary">
    April
  </span>
  <div class="wa-stack">
  <section class="wa-flank wa-gap-s">
    <wa-icon style="font-size: var(--wa-font-size-xl)" family="brands" name="intercom"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Got new lead</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">Jack Carter</a><span>on Intercom switchboard</span>
        </div>
      </div>
      <span class="wa-caption-m">Apr 18th</span>
    </div>
  </section>
   <wa-divider></wa-divider>
  <section class="wa-flank wa-gap-s">
    <wa-icon style="font-size: var(--wa-font-size-xl)" name="list-check"></wa-icon>
    <div class="wa-split">
      <div class="wa-stack wa-gap-0">
        <span class="wa-heading-s">Completed Todo</span>
        <div class="wa-cluster wa-gap-2xs">
          <a href="#">Huey Freeman</a><span>marked complete on</span><a href="#">Daily Tasks</a>
        </div>
      </div>
      <span class="wa-caption-m">Apr 2nd</span>
    </div>
  </section>
  </div>
 </wa-details>
 </div>
 </wa-card>
 ```
 ## Card Separated
 ```html{.example}
 <div class="wa-stack" style="max-width: 45ch; margin: 0 auto;">
  <div class="wa-stack">
    <wa-card>
      <div class="wa-flank">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-0">
          <div class="wa-split">
            <span class="wa-heading-s">Charlotte Parker</span>
            <span class="wa-caption-s">4h</span>
          </div>
          <p>Who's on first?</p>
          <a href="#" class="wa-cluster wa-gap-2xs">
            <wa-icon name="reply"></wa-icon>
            <span>Reply</span>
          </a>
        </div>
      </div>
    </wa-card>
    <div class="wa-flank wa-gap-xl">
      <wa-divider vertical style="height: auto; align-self: stretch"></wa-divider>
      <ul class="wa-stack">
      <li class="wa-stack wa-gap-2xs">
        <wa-card>
      <div class="wa-flank">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-0">
          <div class="wa-split">
            <span class="wa-heading-s">Charlotte Parker</span>
            <span class="wa-caption-s">1h</span>
          </div>
          <p>What's on second?</p>
          <a href="#" class="wa-cluster wa-gap-2xs">
            <wa-icon name="reply"></wa-icon>
            <span>Reply</span>
          </a>
        </div>
      </div>
    </wa-card>
      </li>
      <li class="wa-stack wa-gap-2xs">
        <wa-card>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-xs">
          <div class="wa-split">
            <span class="wa-heading-s">Charlotte Parker</span>
          </div>
          <wa-textarea size="small" aria-label="Add Your Comment"></wa-textarea>
        </div>
      </div>
    </wa-card>
      </li>
    </ul>
    </div>
  </div>
 </div>
 ```
 ## Divider Separated
 ```html{.example}
 <wa-card with-header style="max-width: 54ch; margin: 0 auto;">
  <div slot="header" class="wa-split">
    <div>
      <span>Notifications</span>
      <wa-badge appearance="filled" variant="success" pill>2</wa-badge>
    </div>
    <wa-icon name="close"></wa-icon>
  </div>
  <div class="wa-stack">
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-xs">
          <div class="wa-split">
            <span><strong>Happy</strong> commented in <a href="#">Reporting Dashboard</a></span>
            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 3:12PM</span>
            <span class="wa-caption-m">2 hours ago</span>
          </div>
          <wa-callout variant="neutral">
            Really love this approach. I think this is the best solution for the sync issue.
          </wa-callout>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-xs">
          <div class="wa-split">
            <span><strong>Charlotte</strong> followed you</span>
            <wa-icon name="circle-dot" style="color: var(--wa-color-green-50);"></wa-icon>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 3:04PM</span>
            <span class="wa-caption-m">2 hours ago</span>
          </div>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
    <article>
      <div class="wa-flank wa-align-items-start">
        <wa-avatar></wa-avatar>
        <div class="wa-stack wa-gap-xs">
          <div class="wa-split">
            <span><strong>Tavitian</strong> invited you to <a href="#">Homepage Redesign</a></span>
          </div>
          <div class="wa-split">
            <span class="wa-caption-m">Friday 2:22PM</span>
            <span class="wa-caption-m">3 hours ago</span>
          </div>
          <div class="wa-cluster wa-gap-xs">
            <wa-button appearance="outlined" size="small">Decline</wa-button>
            <wa-button variant="brand" size="small">Accept</wa-button>
          </div>
        </div>
      </div>
      <wa-divider></wa-divider>
    </article>
  </div>
 </wa-card>
 ```
--- a/docs/docs/patterns/app/grid-list.md
+++ b/docs/docs/patterns/app/grid-list.md
@@ -1,7 +1,6 @@
 ---
 title: Grid List
 description: 'Improve browsing and selection by organizing data in a structured grid layout.'
 isPro: true
 ---
 ## Cards with Footer Actions
@@ -131,17 +130,17 @@ isPro: true
 </div>
 ```
-## Cards with Footer Actions & Large Image
+## Cards with Footer Actions
 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 29ch;">
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center wa-gap-xs">
+    <div class="wa-stack wa-align-items-center">
      <div class="wa-frame wa-border-radius-circle">
        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
         </div>
        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">DevOps</p>
+        <p class="wa-caption-l">Product Designer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -155,12 +154,12 @@ isPro: true
    </div>
  </wa-card>
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center wa-gap-xs">
+    <div class="wa-stack wa-align-items-center">
      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
         </div>
-        <h2 class="wa-heading-m">Kaitlin Moore</h2>
+        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Systems Engineer</p>
+        <p class="wa-caption-l">Product Designer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -174,12 +173,12 @@ isPro: true
    </div>
  </wa-card>
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center wa-gap-xs">
+    <div class="wa-stack wa-align-items-center">
      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
         </div>
-        <h2 class="wa-heading-m">Nessa Riley</h2>
+        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Cloud Engineer</p>
+        <p class="wa-caption-l">Product Designer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -193,12 +192,12 @@ isPro: true
    </div>
  </wa-card>
 <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center wa-gap-xs">
+    <div class="wa-stack wa-align-items-center">
      <div class="wa-frame wa-border-radius-circle">
-        <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
         </div>
-        <h2 class="wa-heading-m">Veronica Staley</h2>
+        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Machine Learning Engineer</p>
+        <p class="wa-caption-l">Product Designer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -217,81 +216,81 @@ isPro: true
 ```html {.example}
 <div class="wa-grid">
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Jeff Hanks</span>
+      <span>Lindsay Walton</span>
-      <span>Product Designer</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1674044494331-8db2ecf18d46?q=80&w=3019&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Allen Bryant</span>
+      <span>Lindsay Walton</span>
-      <span>Staff Engineer</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1645288059073-af3e9eb62a29?q=80&w=2936&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Mariah Greene</span>
+      <span>Lindsay Walton</span>
-      <span>DevOps</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Beverly Winslow</span>
+      <span>Lindsay Walton</span>
-      <span>Design Systems Lead</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Eric Masterson</span>
+      <span>Lindsay Walton</span>
-      <span>Copy Writer</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <div class="wa-frame wa-border-radius-l">
+    <div class="wa-frame">
-      <img src="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
-    <div class="wa-stack wa-gap-3xs">
+    <div class="wa-stack">
-      <span>Stephen Coffee</span>
+      <span>Lindsay Walton</span>
-      <span>Visual Designer</span>
+      <span>Developer</span>
    </div>
-    <div class="wa-cluster wa-gap-3xs">
+    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
    </div>
  </article>
 </div>
@@ -398,8 +397,8 @@ isPro: true
    <div class="wa-stack">
      <div class="wa-cluster wa-gap-s"><span>Draft</span>  <wa-badge appearance="filled outlined" variant="neutral">1</wa-badge></div>
-
+       
-
+     
          <wa-card>
            <div class="wa-flank:end">
              <div class="wa-stack wa-gap-2xs">
@@ -419,20 +418,20 @@ isPro: true
                <wa-badge appearance="outlined" pill>DevOps</wa-badge>  <wa-badge variant="neutral" appearance="outlined" pill>Priority: Low</wa-badge>
                </div>
              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1559188286-a173792c8340?q=80&w=2906&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="profile image"></wa-avatar>
+  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
            </div>
          </wa-card>
      <wa-button appearance="plain">
        <wa-icon name="plus"></wa-icon>
        Add Task
        </wa-button>
-
+      
    </div>
    <div class="wa-stack">
      <div class="wa-cluster wa-gap-s"><span>In Progress</span>  <wa-badge appearance="filled outlined" variant="neutral">2</wa-badge></div>
-
+      
          <wa-card>
            <div class="wa-flank:end">
              <div class="wa-stack wa-gap-2xs">
@@ -452,8 +451,8 @@ isPro: true
                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="warning" appearance="outlined" pill>Priority: Medium</wa-badge>
                </div>
              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1613428800237-c86372070fab?q=80&w=3017&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+              <wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="profile image"></wa-avatar>
+  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
            </div>
          </wa-card>
          <wa-card>
@@ -475,14 +474,14 @@ isPro: true
                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
                </div>
              </div>
-              <wa-avatar image="https://images.unsplash.com/photo-1614807547811-4174d3582092?q=80&w=2932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="profile image"></wa-avatar>
+              <wa-avatar></wa-avatar>
            </div>
          </wa-card>
      <wa-button appearance="plain">
        <wa-icon name="plus"></wa-icon>
        Add Task
        </wa-button>
-
+      
    </div>
    <div class="wa-stack">
@@ -509,17 +508,18 @@ isPro: true
              <wa-avatar initials="KK" label="Avatar with initials: KK"></wa-avatar>
            </div>
          </wa-card>
-
+     
-
+        
      <wa-button appearance="plain">
        <wa-icon name="plus"></wa-icon>
        Add Task
        </wa-button>
-
+      
    </div>
-
+  
  </div>
 </div>
 ```
--- a/docs/docs/patterns/app/index.njk
+++ b/docs/docs/patterns/app/index.njk
@@ -5,5 +5,4 @@ parent: patterns
 layout: overview
 override:tags: []
 listChildren: true
 isPro: false
 ---
--- a/docs/docs/patterns/app/leaderboard.md
+++ b/docs/docs/patterns/app/leaderboard.md
@@ -1,7 +1,6 @@
 ---
 title: Leaderboard
 description: 'Engage and motivate users by highlighting top performers, scores, and achievements.'
 isPro: true
 ---
 ## Simple
--- a/docs/docs/patterns/app/pagination.md
+++ b/docs/docs/patterns/app/pagination.md
@@ -1,7 +1,6 @@
 ---
 title: Pagination
 description: 'Improve navigation and performance by breaking long lists or content into manageable pages.'
 isPro: true
 ---
 ## Simple
--- a/docs/docs/patterns/app/permissions.md
+++ b/docs/docs/patterns/app/permissions.md
@@ -1,7 +1,6 @@
 ---
 title: Permissions
 description: 'Permission patterns provide or restrict access to users.'
 isPro: true
 ---
 ## With Form Inputs
@@ -119,7 +118,7 @@ isPro: true
    <wa-button size="small" variant="brand" pill>Generate</wa-button>
  </div>
  </div>
-
+  
 </wa-card>
 ```
@@ -171,7 +170,7 @@ isPro: true
          <wa-option value="moderator">Moderator</wa-option>
          <wa-option value="contributor">Contributor</wa-option>
          <wa-option value="reader">Reader</wa-option>
-        </wa-select>
+        </wa-select>  
      </td>
    </tr>
    <tr>
@@ -223,7 +222,7 @@ isPro: true
  </tbody>
 </table>
  </wa-tab-panel>
-
+ 
 </wa-tab-group>
 </div>
 ```
--- a/docs/docs/patterns/app/pricing.md
+++ b/docs/docs/patterns/app/pricing.md
@@ -1,7 +1,6 @@
 ---
 title: Pricing
 description: 'Help users make informed purchasing decisions with clear, structured pricing.'
 isPro: true
 ---
 ## Three Tiers
@@ -165,4 +164,4 @@ isPro: true
    </wa-callout>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -2,7 +2,6 @@
 title: Blog
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
@@ -368,4 +367,4 @@ TODO Page Description
  }
 </style>
-```
+```
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -2,9 +2,8 @@
 title: Business
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/ecommerce/category-filter.md
+++ b/docs/docs/patterns/ecommerce/category-filter.md
@@ -2,7 +2,6 @@
 title: Category Filter
 description: 'Helps the user find the right products with filters to refine search results by specific attributes.'
 icon: checkbox
 isPro: true
 ---
 ## Sidebar with Checkboxes & Expandable Filters
@@ -81,4 +80,4 @@ isPro: true
  </div>
  <div class="wa-placeholder"></div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/category-preview.md
+++ b/docs/docs/patterns/ecommerce/category-preview.md
@@ -2,7 +2,6 @@
 title: Category Preview
 description: 'Help shoppers discover your product offerings with showcases of product categories.'
 icon: preview
 isPro: true
 ---
 ## Split with Image Grid
@@ -160,4 +159,4 @@ isPro: true
  </div>
 </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/checkout-form.md
+++ b/docs/docs/patterns/ecommerce/checkout-form.md
@@ -1,7 +1,6 @@
 ---
 title: Checkout Form
 description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
 isPro: true
 ---
@@ -242,4 +241,4 @@ isPro: true
    </div>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/incentives.md
+++ b/docs/docs/patterns/ecommerce/incentives.md
@@ -1,7 +1,6 @@
 ---
 title: Incentives
 description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
 isPro: true
 ---
 ## 3 Column
@@ -10,29 +9,29 @@ isPro: true
 <div class="wa-gap-3xl wa-stack" style="max-width: 960px; margin: 0 auto;">
  <div class="wa-align-items-center wa-grid">
    <div>
-      <span class="wa-heading-xl">Unlock your Superpower</span>
+      <span class="wa-heading-xl">Get the Best Instruction from our Educators.</span>
-      <p class="wa-caption-l">Web development is like a superpower—you can turn your ideas into actual products online, and learning it from home means you don’t need a fancy degree or expensive tuition to start building your future.</p>
+      <p class="wa-caption-l">At the beginning at least, but then we realized we could make a lot more money if we kinda stopped caring about that. Our new strategy is to write a bunch of things that look really good in the headlines, then clarify in the small print but hope people don't actually read it.</p>
    </div>
    <div class="wa-frame wa-border-radius-l">
-      <img src="https://images.unsplash.com/photo-1551981878-4c70c3e64135?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+      <img src="https://uploads.webawesome.com/online-learning.jpg" />
    </div>
  </div>
  <div class="wa-grid">
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="briefcase" variant="light" style="font-size: 32px;"></wa-icon>
+      <wa-icon name="stopwatch" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Career Opportunities</span>
+      <span class="wa-heading-s">Learn at your Speed</span>
-      <p class="wa-caption-m">Mastering web development can lead to high-paying jobs, freelancing gigs, or even launching your own business or app.</p>
+      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="laptop-code" variant="light" style="font-size: 32px;"></wa-icon>
+      <wa-icon name="chart-line" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Flexibility of Online Learning</span>
+      <span class="wa-heading-s">Track Progress</span>
-      <p class="wa-caption-m">Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes</p>
+      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="palette" variant="light" style="font-size: 32px;"></wa-icon>
+      <wa-icon name="people-group" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Creative & Practical Skillset</span>
+      <span class="wa-heading-s">Active Community</span>
-      <p class="wa-caption-m">You can build real, functional things like personal portfolios, blogs, or web apps—and immediately see your progress.</p>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
    </div>
  </div>
 </div>
@@ -40,7 +39,7 @@ isPro: true
 ## 2 Column with Cards
 ```html{.example}
-<div class="wa-grid" style="--min-column-size: 24ch;">
+<div class="wa-grid" style="--min-column-size: 41ch;">
  <wa-card>
    <div class="wa-flank">
    <div>
@@ -98,27 +97,27 @@ isPro: true
 ```html{.example}
 <div>
-<div class="wa-grid" style="--min-column-size: 16ch;">
+<div class="wa-grid">
  <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="magnifying-glass" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <wa-icon name="magnifying-glass" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">In-Demand Skills</span>
+      <span class="wa-heading-s">SEO Consulting</span>
-      <p class="wa-caption-m">Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.</p>
+      <p class="wa-caption-m">It's not actually free we just price it into the products. Someone's paying for it, and it's not us.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="chalkboard-user" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <wa-icon name="chalkboard-user" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Learn Anytime, Anywhere</span>
+      <span class="wa-heading-s">In Person Training</span>
-      <p class="wa-caption-m">Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.</p>
+      <p class="wa-caption-m">If it breaks in the first 10 years we'll replace it. After that you're on your own though.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="people-arrows" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <wa-icon name="people-arrows" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Build and Launch Your Own Projects</span>
+      <span class="wa-heading-s">1 on 1 Sessions</span>
-      <p class="wa-caption-m">You’re not just learning theory—you’re creating real, functional websites and apps.</p>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon family="duotone" name="code" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <wa-icon name="code" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Low-Cost Entry</span>
+      <span class="wa-heading-s">Web Development</span>
-      <p class="wa-caption-m">You don’t need a tech degree or expensive tools to get started</p>
+      <p class="wa-caption-m">If you don't like it, trade it to one of your friends for something of theirs. Don't send it here though.</p>
    </div>
 </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/index.njk
+++ b/docs/docs/patterns/ecommerce/index.njk
@@ -4,5 +4,4 @@ description: Pre-built product overviews, shopping carts, and more to help you b
 parent: patterns
 layout: overview
 override:tags: []
 isPro: false
 ---
--- a/docs/docs/patterns/ecommerce/order-history.md
+++ b/docs/docs/patterns/ecommerce/order-history.md
@@ -1,7 +1,6 @@
 ---
 title: Order History
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
 isPro: true
 ---
 ## List
@@ -194,14 +193,12 @@ isPro: true
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-avatar shape="rounded" label="Avatar with an image icon">
+          <wa-icon family="brands" name="amazon"></wa-icon>
            <wa-icon slot="icon"family="brands" name="amazon"></wa-icon>
          </wa-avatar>
          <span class="wa-heading-s">Amazon</span>
        </div>
        <div class="wa-stack wa-gap-xs">
          <span>Expected Tomorrow</span>
-          <wa-progress-bar value="75" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
@@ -213,18 +210,16 @@ isPro: true
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-avatar shape="rounded" label="Avatar with an image icon">
+          <wa-icon family="brands" name="amazon"></wa-icon>
-            <wa-icon slot="icon" family="sharp" variant="light" name="shirt"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
          </wa-avatar>
          <span class="wa-heading-s">T-shirt Depot</span>
        </div>
        <div class="wa-stack wa-gap-xs">
-          <span>Out for Delivery</span>
+          <span>Expected Tomorrow</span>
-          <wa-progress-bar value="95" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=2400&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
      </div>
    </div>
  </wa-card>
@@ -232,18 +227,16 @@ isPro: true
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-avatar shape="rounded" label="Avatar with an image icon">
+          <wa-icon family="brands" name="amazon"></wa-icon>
-            <wa-icon slot="icon"  variant="duotone" name="gamepad-modern"></wa-icon>
+          <span class="wa-heading-s">Amazon</span>
          </wa-avatar>
          <span class="wa-heading-s">Game Theory</span>
        </div>
        <div class="wa-stack wa-gap-xs">
-          <span>Shipping Soon</span>
+          <span>Expected Tomorrow</span>
-          <wa-progress-bar value="15" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <img src="https://images.unsplash.com/photo-1627421383054-488d9c9828f5?q=80&w=2960&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
+        <img src="https://images.unsplash.com/photo-1589810635657-232948472d98?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
      </div>
    </div>
  </wa-card>
--- a/docs/docs/patterns/ecommerce/order-summary.md
+++ b/docs/docs/patterns/ecommerce/order-summary.md
@@ -1,7 +1,6 @@
 ---
 title: Order Summary
 description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
 isPro: true
 ---
 ## Simple
@@ -292,4 +291,4 @@ isPro: true
    </div>
  </wa-callout>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-list.md
+++ b/docs/docs/patterns/ecommerce/product-list.md
@@ -1,7 +1,6 @@
 ---
 title: Product Lists
 description: 'Let shoppers browse and compare products with detailed lists of the products in your store.'
 isPro: true
 ---
 ## Simple Grid with Ratings
@@ -180,4 +179,4 @@ isPro: true
    </a>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-overview.md
+++ b/docs/docs/patterns/ecommerce/product-overview.md
@@ -1,7 +1,6 @@
 ---
 title: Product Overview
 description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
 isPro: true
 ---
 ## Split with Image
@@ -427,4 +426,4 @@ isPro: true
      </ul>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-preview.md
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -2,7 +2,6 @@
 title: Product Preview
 description: 'Give shoppers a quick look at your products as they browse with modal previews.'
 icon: preview
 isPro: true
 ---
 ## With Product Options
@@ -158,4 +157,4 @@ isPro: true
    </div>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/ecommerce/review.md
+++ b/docs/docs/patterns/ecommerce/review.md
@@ -1,7 +1,6 @@
 ---
 title: Product Reviews
 description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
 isPro: true
 ---
 ## Multi column
@@ -12,13 +11,13 @@ isPro: true
  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
    <div class="wa-stack wa-gap-2xs">
      <span class="wa-heading-s">Viktor Vaughn</span>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
+      <span class="wa-caption-m"><em>September 23rd, 2023</em></span>
    </div>
    <div class="wa-flank">
      <wa-rating label="Rating" readonly value="5"></wa-rating>
    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Solid treadmill for home workouts!</span>
+      <span class="wa-heading-s">Rating Title</span>
-      <p>Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
+      <p class="wa-caption-m">Best treadmill I've ever owned! It has a sleek design, and the features are top-notch. I use it daily for my cardio workouts, and the motor is powerful enough to keep up with my running. It’s easy to adjust the speed and incline, and the display is clear and simple to read. Worth every penny!</p>
    </div>
    </div>
  </div>
@@ -26,13 +25,13 @@ isPro: true
  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
    <div class="wa-stack wa-gap-2xs">
      <span class="wa-heading-s">Ben Grimm</span>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
+      <span class="wa-caption-m"><em>May 5th, 2023</em></span>
    </div>
    <div class="wa-flank">
      <wa-rating label="Rating" readonly value="4"></wa-rating>
    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Good value, a few minor flaws</span>
+      <span class="wa-heading-s">Rating Title</span>
-      <p>Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
+      <p class="wa-caption-m">Decent treadmill for the price, but I feel like the belt could be a little wider for comfort. The cushioning is good, but sometimes I experience a slight wobble when running at high speeds. For casual walking, it's fine, but I’m not sure it’s built for intense runners.</p>
    </div>
    </div>
  </div>
@@ -40,13 +39,13 @@ isPro: true
  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
    <div class="wa-stack wa-gap-2xs">
      <span class="wa-heading-s">Johnny Storm</span>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
+      <span class="wa-caption-m"><em>March 3rd, 2023</em></span>
    </div>
    <div class="wa-flank">
      <wa-rating label="Rating" readonly value="4"></wa-rating>
    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Decent, but could use upgrades</span>
+      <span class="wa-heading-s">Rating Title</span>
-      <p>This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
+      <p class="wa-caption-m">This treadmill has been a great addition to my home gym. It's sturdy, easy to use, and I like that it tracks my steps and heart rate. The only downside is that it's a bit bulky, so I had to rearrange my space to make room for it. Overall, I'm happy with the performance and would recommend it.</p>
    </div>
    </div>
  </div>
@@ -54,13 +53,13 @@ isPro: true
  <div class="wa-flank wa-gap-s" style="--flank-size: 20%">
    <div class="wa-stack wa-gap-2xs">
      <span class="wa-heading-s">Sue Storm</span>
-      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
+      <span class="wa-caption-m"><em>February 26th, 2023</em></span>
    </div>
    <div class="wa-flank">
      <wa-rating label="Rating" readonly value="4"></wa-rating>
    <div class="wa-stack wa-gap-2xs">
-      <span class="wa-heading-s">Perfect for small spaces</span>
+      <span class="wa-heading-s">Rating Title</span>
-      <p>I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
+      <p class="wa-caption-m">I absolutely love my new treadmill! It’s perfect for my daily workouts. The setup was quick, and it’s so quiet that I can use it while watching TV without any interruptions. The different incline levels really help mix up my routine, and the built-in programs keep things interesting. Highly recommend for anyone looking to stay fit at home!</p>
    </div>
    </div>
  </div>
@@ -79,31 +78,31 @@ isPro: true
          <span>5</span>
          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
          <wa-progress-bar value="63" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
-          <wa-format-number type="percent" value=".63"></wa-format-number>
+          <span>63%</span>
        </span>
        <span class="wa-cluster wa-gap-2xs">
          <span>4</span>
          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
          <wa-progress-bar value="17" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
-          <wa-format-number type="percent" value=".17"></wa-format-number>
+          <span>17%</span>
        </span>
        <span class="wa-cluster wa-gap-2xs">
          <span>3</span>
          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
          <wa-progress-bar value="15" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
-          <wa-format-number type="percent" value=".15"></wa-format-number>
+          <span>15%</span>
        </span>
        <span class="wa-cluster wa-gap-2xs">
          <span>2</span>
          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
          <wa-progress-bar value="3" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
-          <wa-format-number type="percent" value=".03"></wa-format-number>
+          <span>3%</span>
        </span>
        <span class="wa-cluster wa-gap-2xs">
          <span>1</span>
          <wa-icon name="star" style="font-size: 12px;"></wa-icon>
          <wa-progress-bar value="2" label="Upload progress" style="height: 6px; width: 50%"></wa-progress-bar>
-          <wa-format-number type="percent" value=".02"></wa-format-number>
+          <span>2%</span>
        </span>
      </div>
    </div>
@@ -112,44 +111,44 @@ isPro: true
        <div class="wa-flank">
          <wa-avatar image="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
          <div class="wa-stack wa-gap-2xs">
-            <span class="wa-heading-s">Michelle Jasper</span>
+            <span class="wa-heading-s">Emily Selman</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <p>I bought this grow light for my herbs and succulents, and wow—what a difference. After just a week, my basil perked up, and new leaves started popping up. Super easy to set up and doesn’t get too hot. Highly recommend for anyone growing indoors!</p>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
      </div>
      <wa-divider></wa-divider>
      <div>
        <div class="wa-flank">
          <wa-avatar image="https://images.unsplash.com/photo-1599566150163-29194dcaad36?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
          <div class="wa-stack wa-gap-2xs">
-            <span class="wa-heading-s">Doug Michaels</span>
+            <span class="wa-heading-s">Emily Selman</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <p>This light really helps my plants grow during the winter months. The brightness is strong, and I love the adjustable height. The only downside is the timer—it resets if you unplug it. Otherwise, great value for the price!</p>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
      </div>
      <wa-divider></wa-divider>
      <div>
        <div class="wa-flank">
          <wa-avatar image="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=2561&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
          <div class="wa-stack wa-gap-2xs">
-            <span class="wa-heading-s">Stephanie Hurst</span>
+            <span class="wa-heading-s">Emily Selman</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <p>I don’t get much natural light in my apartment, so this grow light has been a game-changer. I’m using it for my small tomato plants and some lettuce, and they’re growing faster than expected. Plus, the light isn’t too harsh on the eyes</p>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
      </div>
      <wa-divider></wa-divider>
      <div>
        <div class="wa-flank">
          <wa-avatar image="https://images.unsplash.com/photo-1566492031773-4f4e44671857?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
          <div class="wa-stack wa-gap-2xs">
-            <span class="wa-heading-s">Miles Rogers</span>
+            <span class="wa-heading-s">Emily Selman</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <p>I’ve tried a few grow lights, and this one is my favorite. It stays cool, uses less power, and my peace lilies and spider plants are growing beautifully. I just wish it came in more color options for the stand, but performance-wise, it’s excellent.</p>
+        <p class="wa-caption-l"><em>This is the bag of my dreams. I took it on my last vacation and was able to fit an absurd amount of snacks for the many long and hungry flights.</em></p>
      </div>
    </div>
  </div>
@@ -165,8 +164,8 @@ isPro: true
      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1607746882042-944635dfe10e?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
      <p>Ripley</p>
      <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -181,8 +180,8 @@ isPro: true
      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
      <p>Kane</p>
      <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -197,8 +196,8 @@ isPro: true
      <wa-avatar label="User avatar" image="https://images.unsplash.com/photo-1728577740843-5f29c7586afe?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></wa-avatar>
      <p>Parker</p>
      <div>
-      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-up" label="I don't like this review" style="color: var(--wa-color-success-fill-loud);"></wa-icon-button>
-      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review" style="color: var(--wa-color-danger-fill-loud);"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -209,4 +208,4 @@ isPro: true
  </div>
  <wa-divider></wa-divider>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/shopping-cart.md
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -1,7 +1,6 @@
 ---
 title: Shopping Cart
 description: 'Give shoppers an overview of selected items with shopping carts that let them edit items and proceed to checkout.'
 isPro: true
 ---
 ## Two Columns with Summary Card
@@ -275,4 +274,4 @@ isPro: true
    </wa-button>
  </div>
 </wa-drawer>
-```
+```
--- a/docs/docs/patterns/ecommerce/store-navigation.md
+++ b/docs/docs/patterns/ecommerce/store-navigation.md
@@ -2,7 +2,6 @@
 title: Store Navigation
 description: 'Help shoppers explore categories and find products with all of the links they need to navigate your store.'
 unlisted: true
 isPro: true
 ---
 ## Popup Menu
@@ -82,4 +81,4 @@ isPro: true
 </style>
-```
+```
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -2,9 +2,8 @@
 title: Business
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/entertainement.md
+++ b/docs/docs/patterns/entertainement.md
@@ -2,9 +2,8 @@
 title: Entertainment
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/index.njk
+++ b/docs/docs/patterns/index.njk
@@ -3,7 +3,6 @@ title: Patterns
 description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
 layout: overview
 override:tags: []
 isPro: false
 ---
 <div class="max-line-length">
@@ -22,7 +21,7 @@ Patterns are written as standard HTML, so you can use them just as you would any
 To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project.
-Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/) to set up all of these features in your project.
+Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/installation) to set up all of these features in your project.
 {% endmarkdown %}
 </div>
--- a/docs/docs/patterns/information/call-to-action.md
+++ b/docs/docs/patterns/information/call-to-action.md
@@ -0,0 +1,47 @@
 ---
 title: Call To Action
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
 parent: information
 tags: information
 ---
 ## Simple
 ```html {.example}
 <div style="margin-block: 5rem;">
    <h2 style="font-size: 3rem;">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
    <div class="wa-cluster wa-gap-xs">
        <wa-button>Get Started</wa-button>
        <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
    </div>
 </div>
 ```
 ## Centered
 ```html {.example}
 <div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: 5rem;">
    <h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
    <div class="wa-cluster wa-gap-xs">
        <wa-button>Get Started</wa-button>
        <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
    </div>
 </div>
 ```
 ## 2 Column
 ```html {.example}
 <div style="margin-block: 5rem;">
    <div class="wa-grid wa-align-items-center">
        <div  class="wa-stack wa-align-items-center wa-gap-3xl">
            <h2 style="font-size: 3rem; text-align: center">Unlock Your Future: <br/>Start Learning Web Development Today!</h2>
            <div class="wa-cluster wa-gap-xs">
                <wa-button>Get Started</wa-button>
                <wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
            </div>
        </div>
        <div class="wa-frame wa-border-radius-l">
            <img src="https://images.unsplash.com/photo-1586864387634-2f33030dab41?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
         </div>
    </div>
 </div>
 ```
--- a/docs/docs/patterns/information/footer.md
+++ b/docs/docs/patterns/information/footer.md
@@ -0,0 +1,87 @@
 ---
 title: Footer
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
 parent: information
 tags: information
 ---
 ## Simple
 ```html {.example}
 <div class="wa-stack wa-gap-xl" style="max-width: 102ch; margin: 0 auto;">
    <div class="wa-split">
        <div class="wa-cluster wa-gap-xs wa-heading-xl">
            <wa-icon name="gears"></wa-icon>
            <span>Widget UI</span>
        </div>
        <form class="wa-flank:end wa-gap-xs">
            <wa-input placeholder="Enter your email" type="email"></wa-input>
            <wa-button>Subscribe</wa-button>
        </form>
    </div>
    <wa-divider></wa-divider>
    <div class="wa-cluster" style="justify-content: flex-end">
        <p>© 2025 All Rights reserved.</p>
    </div>
 </div>
 ```
 ## Centered
 ```html {.example}
 <div class="wa-stack wa-align-items-center">
    <div class="wa-cluster wa-gap-xl">
        <a href="#">Home</a>
            <a href="#">Get Started</a>
            <a href="#">Services</a>
            <a href="#">Portfolio</a>
    </div>
    <div class="wa-cluster wa-gap-s">
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
        </div>
    <p>© 2025 All Rights reserved.</p>
 </div>
 ```
 ## Corporate
 ```html{.example}
 <div>
    <div class="wa-flank wa-align-items-baseline wa-gap-3xl" style="--flank-size: 36ch;">
        <div>
            <p>We are committed to providing you with the best products and services. If you have any questions or need assistance, feel free to reach out to our team. Stay connected with us through our social media channels for updates, news, and more. Your satisfaction is our top priority, and we look forward to serving you again soon!</p>
        </div>
        <div class="wa-grid">
        <section class="wa-stack wa-gap-xs">
            <h2 class="wa-heading-s">Links</h2>
            <a href="#">Home</a>
            <a href="#">Get Started</a>
            <a href="#">Services</a>
            <a href="#">Portfolio</a>
        </section>
        <section class="wa-stack wa-gap-xs">
            <h2 class="wa-heading-s">Others</h2>
            <a href="#">Corporate</a>
            <a href="#">Terms of Service</a>
            <a href="#">Privacy Policy</a>
        </section>
        <section class="wa-stack">
            <h2 class="wa-heading-s">Social</h2>
            <div class="wa-cluster">
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button></a>
                <a href="#"><wa-icon-button style="font-size: var(--wa-font-size-l);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button></a>
            </div>
        </section>
        </div>
    </div>
    <wa-divider></wa-divider>
    <div class="wa-split">
        <p>© 2025 All Rights reserved.</p>
        <wa-select label="Language" value="english">
  <wa-option value="english">English</wa-option>
  <wa-option value="spanish">Spanish</wa-option>
  <wa-option value="french">French</wa-option>
 </wa-select>
    </div>
 </div>
 ```
--- a/docs/docs/patterns/information/index.njk
+++ b/docs/docs/patterns/information/index.njk
@@ -0,0 +1,8 @@
 ---
 title: Information
 description: ''
 parent: patterns
 layout: overview
 override:tags: []
 listChildren: true
 ---
--- a/docs/docs/patterns/information/information.json
+++ b/docs/docs/patterns/information/information.json
@@ -0,0 +1,3 @@
 {
  "tags": ["information"]
 }
--- a/docs/docs/patterns/information/login.md
+++ b/docs/docs/patterns/information/login.md
@@ -0,0 +1,76 @@
 ---
 title: Login
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
 parent: information
 tags: information
 ---
 ## Login/ Sign Up
 ```html{.example}
 <wa-card style="max-width: 45ch; margin: 0 auto">
    <div class="wa-stack">
        <h2 class="wa-heading-m">Agent Login</h2>
        <wa-input placeholder="email" type="email"></wa-input>
        <wa-input placeholder="password" type="password"></wa-input>
        <a href="#">Having trouble signing in?</a>
        <wa-button>Sign in</wa-button>
        <wa-divider></wa-divider>
        <p>Or sign in with:</p>
        <div class="wa-grid" style="--min-column-size: 12ch;">
            <wa-button appearance="outlined">
                <wa-icon slot="prefix" name="google" family="brands"></wa-icon>
                Google
            </wa-button>
            <wa-button appearance="outlined">
                <wa-icon slot="prefix" name="apple" family="brands"></wa-icon>
                Apple ID
            </wa-button>
            <wa-button appearance="outlined">
                <wa-icon slot="prefix" name="facebook" family="brands"></wa-icon>
                Facebook
            </wa-button>
        </div>
        <p>Don't have an account? <a href="#">Request Now</a>
    </div>
 </wa-card>
 ```
 ## Password Recovery
 ```html{.example}
 <wa-card style="max-width: 45ch; margin: 0 auto">
    <div class="wa-stack wa-gap-l">
        <h2 class="wa-heading-m">Password Recovery</h2>
        <wa-radio-group
            label="Choose your recovery method"
            orientation="horizontal"
            name="recovery-method"
            value="crypto-keys"
        >
            <wa-radio-button value="qr-code">QR Code</wa-radio-button>
            <wa-radio-button value="crypto-keys">Crypto Keys</wa-radio-button>
        </wa-radio-group>
        <p class="wa-caption-m">Store your keys in a password manager to back them up in case you need to restore your account.</p>
        <div class="wa-stack">
            <wa-input label="Public Key" value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
            <wa-input label="Secret Key" value="dfkdfkdfdsofkdsofjs" disabled></wa-input>
        </div>
        <wa-button>Submit</wa-button>
        <wa-button appearance="outlined">Or try to login again</wa-button>
    </div>
 </wa-card>
 ```
 ## Two Factor Authentication
 ```html{.example}
 <wa-card style="max-width: 45ch; margin: 0 auto">
    <div class="wa-stack wa-gap-l wa-align-items-center">
        <h2 class="wa-heading-m">Set up using an Authenticator app</h2>
         <p class="wa-caption-m">Use an authenticator app to get the authentication codes</p>
        <wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
        <p class="wa-caption-m">If you can't scan the QR Code above, enter this text instead</p>
        <wa-input value="dsjfaklsjfkwejrl4wj5646uotue789f7ew8rtuewfsd" disabled></wa-input>
        <h3 class="wa-heading-s">Set up using an Authenticator app</h3>
        <p class="wa-caption-m">After scanning the QR Code image, the app will display a code that you can enter.</p>
        <span class="wa-heading-3xl">123466</span>
    </div>
 </wa-card>
 ```
--- a/docs/docs/patterns/information/newsletter.md
+++ b/docs/docs/patterns/information/newsletter.md
@@ -0,0 +1,110 @@
 ---
 title: Newsletter
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
 parent: information
 tags: information
 ---
 ## Simple
 ```html{.example}
 <wa-card style="margin: 0 auto; max-width: 45ch;">
  <div class="wa-stack">
    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
    <p>To get the latest and most quality design resources</p>
    <form class="wa-flank:end wa-gap-2xs">
      <wa-input placeholder="email@example.com"></wa-input>
      <wa-button>Subscribe</wa-button>
    </form>
  </div>
 </wa-card>
 ```
 ## 2 Column
 ```html{.example}
 <wa-card style="margin: 0 auto; max-width: 75ch;">
  <div class="wa-grid">
    <div class="wa-stack wa-gap-2xs">
    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
    <p>To get the latest and most quality design resources</p>
    </div>
    <form class="wa-flank:end wa-gap-2xs">
      <wa-input placeholder="email@example.com"></wa-input>
      <wa-button>Subscribe</wa-button>
    </form>
  </div>
 </wa-card>
 ```
 ## With Incentives
 ```html {.example}
 <wa-card style="margin: 0 auto; max-width: 75ch;">
    <div class="wa-grid">
    <dl class="wa-stack">
      <div class="wa-cluster wa-gap-xs">
        <dt><wa-icon name="calendar"></wa-icon></dt><dd>Daily News in your Inbox</dd>
      </div>
       <div class="wa-cluster wa-gap-xs">
        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Spam Free</dd>
      </div>
      <div class="wa-cluster wa-gap-xs">
        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>The Most trusted source in the industry.</dd>
      </div>
       <div class="wa-cluster wa-gap-xs">
        <dt><wa-icon name="shield-halved"></wa-icon></dt><dd>Easy to Unsubscribe</dd>
      </div>
    </dl>
  <div class="wa-stack">
    <h2 class="wa-heading-m">Subscribe to our Newsletter</h2>
    <p>To get the latest and most quality design resources</p>
    <form class="wa-flank:end wa-gap-2xs">
      <wa-input placeholder="email@example.com"></wa-input>
      <wa-button>Subscribe</wa-button>
    </form>
  </div>
  </div>
 </wa-card>
 ```
 ## With Image card
 ```html{.example}
 <wa-card with-image style="max-width: 45ch; margin: 0 auto">
  <img slot="image" src="https://images.unsplash.com/photo-1595087012935-124877078142?q=80&w=2574&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="mailbox" />
  <div class="wa-stack wa-align-items-center wa-gap-2xl">
    <div class="wa-stack wa-align-items-center wa-gap-xs">
      <h2 class="wa-heading-l">Subscribe!</h2>
      <p class="wa-caption-l" style="text-align: center; word-break: break-word">Get the best new products in your inbox, everyday. Get the latest content first.</p>
    </div>
    <form class="wa-flank:end wa-gap-2xs">
      <wa-input placeholder="email@example.com"></wa-input>
      <wa-button appearance="outlined">Signup</wa-button>
    </form>
  </div>
 </wa-card>
 ```
 ## 2 column
 ```html{.example}
 <wa-card style="margin: 0 auto; max-width: 84ch;">
  <div class="wa-grid wa-align-items-center">
    <form class="wa-stack wa-align-items-center wa-gap-2xl">
      <h2 class="wa-heading-xl" style="text-align: center;">Be the first to know</h2>
      <p class="wa-caption-xl" style="text-align: center;">Don't miss out on exclusive savings, new arrivals, and more.</p>
      <div class="wa-stack">
      <wa-input placeholder="email address (required)"></wa-input>
      <wa-input type="tel" placeholder="phone number (optional)"></wa-input>
      <wa-checkbox>
        <p class="wa-caption-s" style="margin: 0"> Enter your mobile number and select to receive automated marketing text messages about new items, great savings and more. You understand that consent is not required to make a purchase. Message and data rates may apply. Message frequency varies. Wireless Carriers are not liable for delayed or undelivered messages. Text HELP for help and STOP to cancel.
 For questions, Please <a href="#">contact us</a>. <a href="#">Terms</a></div>
      </wa-checkbox>
      </div>
      <div class="wa-stack wa-align-items-center wa-gap-s">
        <wa-button appearance="outlined">Sign up now</wa-button>
        <a href="#">no, thanks</a>
      </div>
    </form>
    <div class="wa-frame:portrait wa-border-radius-l">
      <img src="https://images.unsplash.com/photo-1552558636-f6a8f071c2b3?q=80&w=2268&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
    </div>
  </div>
 </wa-card>
 ```
--- a/docs/docs/patterns/information/paywall.md
+++ b/docs/docs/patterns/information/paywall.md
@@ -0,0 +1,122 @@
 ---
 title: Paywall
 description: ''
 parent: information
 tags: information
 ---
 ## Meter
 ```html {.example}
 <div style="max-width: 45ch; margin: 0 auto;">
  <wa-card>
    <div class="wa-flank">
      <wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-80); --text-color: var(--wa-color-purple-40)">
          <wa-icon slot="icon" name="newspaper" family="regular"></wa-icon>
        </wa-avatar>
      <div class="wa-stack wa-gap-2xs">
        <p class="wa-caption-m">You've read <span style="font-weight: var(--wa-font-weight-bold);">9 out of 10 articles</span> this month.</p>
        <p>Already a subscriber? <a href="#">Log in here</a>.</p>
        <a href="#">Get Unlimited access for just 99¢</a>
      </div>
    </div>
  </wa-card>
 </div>
 ```
 ## Modal
 ```html {.example viewport}
 <div style="position: relative;">
  <div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
    <h2>The Great Gatsby</h2>
    <p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
    <p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
    <p>He didn’t say any more but we’ve always been unusually
    communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
    <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
  </div>
 <div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
  <wa-card style="max-width: 84ch;margin: 10% auto 0;">
    <div class="wa-stack wa-gap-xl">
      <h2 class="wa-heading-m">Want to subscribe or continue using our Products for free with ads?</h2>
      <p>Laws are changing in your region, so we're introducing a new choice about how we use your info for ads. You'll learn more about what each option means for you before you confirm your choice.</p>
      <p>Your choice will apply to the <a href="#">accounts in this Accounts Center</a>.</p>
      <div class="wa-grid">
      <article class="wa-stack wa-gap-s">
        <span class="wa-heading-s">Subscribe without ads</span>
          <p>Subscribe to our accounts without ads, starting at 5.99/month (inclusive of applicable taxes). Your info won't be use for ads.</p>
          <wa-button variant="success">Subscribe</wa-button>
      </article>
      <article class="wa-stack wa-gap-s">
        <span class="wa-heading-s">Free with ads</span>
        <p>Discover products and brands through personalized ads, while using your accounts for free. Your info will be used for ads</p>
        <wa-button appearance="outlined">Use for Free</wa-button>
      </article>
      </div>
    </div>
  </wa-card>
 </div>
 </div>
 ```
 ## Footer
 ```html {.example viewport}
 <div style="position: relative;">
  <div style="max-width: 90ch; margin: 0 auto; filter: blur(5px); padding: var(--wa-size)">
    <h2>The Great Gatsby</h2>
    <p>In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.</p>
    <p>‘Whenever you feel like criticizing any one,’ he told me, ‘just remember that all the people in this world haven’t had the advantages that you’ve had.’</p>
    <p>He didn’t say any more but we’ve always been unusually
    communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence I’m inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores. The abnormal mind is quick to detect and attach itself to this quality when it appears in a normal person, and so it came about that in college I was unjustly accused of being a politician, because I was privy to the secret griefs of wild, unknown men. Most of the confidences were unsought—frequently I have feigned sleep, preoccupation, or a hostile levity when I realized by some unmistakable sign that an intimate revelation was quivering on the horizon—for the intimate revelations of young men or at least the terms in which they express them are usually plagiaristic and marred by obvious suppressions. Reserving judgments is a matter of infinite hope. I am still a little afraid of missing something if I forget that, as my father snobbishly suggested, and I snobbishly repeat a sense of the fundamental decencies is parcelled out unequally at birth.</p>
    <p>And, after boasting this way of my tolerance, I come to the admission that it has a limit. Conduct may be founded on the hard rock or the wet marshes but after a certain point I don’t care what it’s founded on. When I came back from the East last autumn I felt that I wanted the world to be in uniform and at a sort of moral attention forever; I wanted no more riotous excursions with privileged glimpses into the human heart. Only Gatsby, the man who gives his name to this book, was exempt from my reaction—Gatsby who represented everything for which I have an unaffected scorn. If personality is an unbroken series of successful gestures, then there was something gorgeous about him, some heightened sensitivity to the promises of life, as if he were related to one of those intricate machines that register earthquakes ten thousand miles away. This responsiveness had nothing to do with that flabby impressionability which is dignified under the name of the ‘creative temperament’— it was an extraordinary gift for hope, a romantic readiness such as I have never found in any other person and which it is not likely I shall ever find again. No—Gatsby turned out all right at the end; it is what preyed on Gatsby, what foul dust floated in the wake of his dreams that temporarily closed out my interest in the abortive sorrows and shortwinded elations of men.</p>
  </div>
 <div style="background:rgba(24, 49, 83, 0.5);position: fixed; top: 0; right: 0; width: 100%; height: 100%;z-index: 1;">
  <wa-card class="wa-border-radius-square" style="width: 75%;position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
    <div>
      <h2 class="wa-heading-m">You've hit your free article limit.</h2>
      <wa-divider></wa-divider>
      <div class="wa-grid">
        <div class="wa-stack wa-gap-s wa-align-items-start">
          <span class="wa-heading-s">Standard Digital</span>
          <span class="wa-heading-xl">$45/month</span>
          <p>Essential digital access to quality journalism on any device. Makes a great gift.</p>
          <wa-button size="small" variant="brand">Select</wa-button>
          <a href="#">What's Included?</a>
        </div>
        <div class="wa-stack wa-gap-s wa-align-items-start">
          <span class="wa-heading-s">Premium Digital</span>
          <span class="wa-heading-xl">$75/month</span>
          <p>Complete digital access to quality journalism with expert analysis from industry leaders.</p>
          <wa-button size="small" variant="brand">Select</wa-button>
          <a href="#">What's Included?</a>
        </div>
      </div>
    </div>
  </wa-card>
 </div>
 </div>
 ```
 <!-- ### Paywall
 ```html {.example viewport}
 <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>
 ``` -->
--- a/docs/docs/patterns/information/post-list.md
+++ b/docs/docs/patterns/information/post-list.md
@@ -0,0 +1,198 @@
 ---
 title: Post List
 description: ''
 parent: information
 tags: information
 ---
 ## Text Based
 ```html {.example}
 <div class="wa-stack wa-gap-2xl" style="max-width: 60ch; margin: 0 auto;">
    <div class="wa-split">
        <h2 class="wa-heading-l">Trending Articles</h2>
        <span class="wa-cluster">
            <wa-icon name="search"></wa-icon>
            <a href="#">See all</a>
        </span>
    </div>
    <article class="wa-stack wa-gap-s">
        <section class="wa-stack wa-gap-xs">
            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Worst Idioms</a></h3>
            <span class="wa-caption-m">by <strong><em><a href="#">Paisley Darts</a></em></strong> • 4 min</span>
        </section>
        <p>"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
        <wa-divider></wa-divider>
    </article>
    <article class="wa-stack wa-gap-s">
        <section class="wa-stack wa-gap-xs">
            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Boost Your Productivity with These 5 Simple Habits</a></h3>
            <span class="wa-caption-m">by <strong><em><a href="#">Michael Sur</a></em></strong> • 3 min</span>
        </section>
        <p>Small changes, big results—master the art of productivity in your daily routine.</p>
        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
        <wa-divider></wa-divider>
    </article>
    <article class="wa-stack wa-gap-s">
        <section class="wa-stack wa-gap-xs">
            <h3 class="wa-heading-m"><a href="#" style="text-decoration: none;">Why Sustainable Fashion Is the Future of the Industry</a></h3>
            <span class="wa-caption-m">by <strong><em><a href="#">Stacy Magnolia</a></em></strong> • 7 min</span>
        </section>
        <p>From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
        <a href="#" class="wa-cluster wa-gap-2xs"><span>Read More</span><wa-icon name="angle-right"></wa-icon></a>
        <wa-divider></wa-divider>
    </article>
 </div>
 ```
 ## Single Column with Images
 ```html {.example}
 <div class="wa-stack" style="max-width: 78ch; margin: 0 auto;">
    <div class="wa-split">
        <h2 class="wa-heading-l">Trending Articles</h2>
        <span class="wa-cluster">
            <wa-icon name="search"></wa-icon>
            <a href="#">See all</a>
        </span>
    </div>
    <div>
        <article class="wa-flank:end wa-align-items-center">
            <div class="wa-stack wa-gap-s wa-align-items-start">
                <h3 class="wa-heading-m">Worst Idioms <span class="wa-caption-s">4 min</span></h3>
                <div class="wa-stack wa-gap-2xs">
                    <p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
                    <span class="wa-caption-m">by <a href="#"><strong><em>Paisley Darts</em></strong></a></span>
                </div>
                <wa-tag size="small" appearance="filled">Opinion</wa-tag>
            </div>
            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
                <img src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </div>
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank:end wa-align-items-center">
            <div class="wa-stack wa-gap-s wa-align-items-start">
                <h3 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits <span class="wa-caption-s">3 min</span></h3>
                <div class="wa-stack wa-gap-2xs">
                    <p class="wa-caption-l">"Small changes, big results—master the art of productivity in your daily routine.</p>
                    <span class="wa-caption-m">by <a href="#"><strong><em>Michael Sur</em></strong></a></span>
                </div>
                <div class="wa-cluster">
                <wa-tag size="small" appearance="filled">Self Improvement</wa-tag>
                </div>
            </div>
            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
                <img src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </div>
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank:end wa-align-items-center">
            <div class="wa-stack wa-gap-s wa-align-items-start">
                <h3 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry <span class="wa-caption-s">7 min</span></h3>
                <div class="wa-stack wa-gap-2xs">
                    <p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
                    <span class="wa-caption-m">by <a href="#"><strong><em>Stacy Magnolia</em></strong></a></span>
                </div>
                <div class="wa-cluster wa-gap-xs">
                    <wa-tag size="small" appearance="filled">Style</wa-tag><wa-tag size="small" appearance="filled">Environmental</wa-tag>
                </div>
            </div>
            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
                <img src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </div>
        </article>
        <wa-divider></wa-divider>
        <article class="wa-flank:end wa-align-items-center">
            <div class="wa-stack wa-gap-s wa-align-items-start">
                <h3 class="wa-heading-m">The Power of Mindfulness <span class="wa-caption-s">5 min</span></h3>
                <div class="wa-stack wa-gap-2xs">
                    <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
                    <span class="wa-caption-m">by <a href="#"><strong><em>Desean Ivy</em></strong></a></span>
                </div>
                <div class="wa-cluster wa-gap-xs">
                    <wa-tag size="small" appearance="filled">Meditation</wa-tag><wa-tag size="small" appearance="filled">Self Care</wa-tag>
                </div>
            </div>
            <div class="wa-frame wa-border-radius-m" style="width: 10ch;">
                <img src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
            </div>
        </article>
        <wa-divider></wa-divider>
    </div>
 </div>
 ```
 ## With Image Card
 ```html {.example}
 <div class="wa-stack wa-align-items-center" style="max-width: 105ch; margin: 0 auto;">
    <h2 class="wa-heading-l">Trending Articles</h2>
    <wa-input placeholder="Search Articles">
        <wa-icon name="search" slot="suffix"></wa-icon>
    </wa-input>
    <div class="wa-grid" style="--min-column-size: 40ch;">
    <a href="#" style="text-decoration: none;">
        <wa-card with-image>
            <img slot="image" src="https://images.unsplash.com/photo-1720170060678-7c30a36937cd?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            <div class="wa-stack">
                <h2 class="wa-heading-m">Worst Idioms</h2>
                <p class="wa-caption-l">"You can't have your cake and eat it too"... This on needs to be buried in a shallow grave.</p>
                <div class="wa-cluster wa-gap-s">
                    <wa-avatar image="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
                    <div class="wa-stack wa-gap-2xs">
                        <span class="wa-heading-s">Paisley Darts</span>
                        <span class="wa-caption-s">March 12th 2023</span>
                    </div>
                </div>
            </div>
        </wa-card>
    </a>
     <a href="#" style="text-decoration: none;">
        <wa-card with-image>
            <img slot="image" src="https://images.unsplash.com/photo-1507099985932-87a4520ed1d5?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            <div class="wa-stack">
                <h2 class="wa-heading-m">Boost Your Productivity with These 5 Simple Habits</h2>
                <p class="wa-caption-l">Small changes, big results—master the art of productivity in your daily routine.</p>
                <div class="wa-cluster wa-gap-s">
                    <wa-avatar image="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
                    <div class="wa-stack wa-gap-2xs">
                        <span class="wa-heading-s">Michael Sur</span>
                        <span class="wa-caption-s">March 13th 2023</span>
                    </div>
                </div>
            </div>
        </wa-card>
    </a>
     <a href="#" style="text-decoration: none;">
        <wa-card with-image>
            <img slot="image" src="https://images.unsplash.com/photo-1631775512414-160ae648c209?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            <div class="wa-stack">
                <h2 class="wa-heading-m">Sustainable Fashion Is the Future of the Industry</h2>
                <p class="wa-caption-l">From eco-friendly materials to ethical brands, sustainability is shaping the way we dress.</p>
                <div class="wa-cluster wa-gap-s">
                    <wa-avatar image="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
                    <div class="wa-stack wa-gap-2xs">
                        <span class="wa-heading-s">Stacy Magnolia</span>
                        <span class="wa-caption-s">March 14th 2023</span>
                    </div>
                </div>
            </div>
        </wa-card>
    </a>
     <a href="#" style="text-decoration: none;">
        <wa-card with-image>
            <img slot="image" src="https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="">
            <div class="wa-stack">
                <h2 class="wa-heading-m">The Power of Mindfulness</h2>
                <p class="wa-caption-l">Discover how being present in the moment can lead to lasting mental well being.</p>
                <div class="wa-cluster wa-gap-s">
                    <wa-avatar image="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=2680&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="author avatar"></wa-avatar>
                    <div class="wa-stack wa-gap-2xs">
                        <span class="wa-heading-s">Desean Ivy</span>
                        <span class="wa-caption-s">March 12th 2023</span>
                    </div>
                </div>
            </div>
        </wa-card>
    </a>
    </div>
    <a href="#" style="text-align: center;">See All</a>
 </div>
 ```
--- a/docs/docs/patterns/information/social-share.md
+++ b/docs/docs/patterns/information/social-share.md
@@ -0,0 +1,101 @@
 ---
 title: Social Share
 description: 'Allow users to easily share content with social networks and platform.'
 parent: information
 tags: information
 ---
 ## Horizontal
 ```html{.example}
 <wa-card style="max-width: fit-content; margin: 0 auto;">
  <div class="wa-stack">
    <span class="wa-heading-s">Share Video</span>
    <div class="wa-cluster">
      <span class="wa-align-items-center wa-stack wa-gap-2xs">
        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
        <span class="wa-caption-s">Embed</span>
      </span>
      <span class="wa-align-items-center wa-stack wa-gap-2xs">
        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
        <span class="wa-caption-s">Facebook</span>
      </span>
      <span class="wa-align-items-center wa-stack wa-gap-2xs">
        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
        <span class="wa-caption-s">Bluesky</span>
      </span>
      <span class="wa-align-items-center wa-stack wa-gap-2xs">
        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
        <span class="wa-caption-s">LinkedIn</span>
      </span>
      <span class="wa-align-items-center wa-stack wa-gap-2xs">
        <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="Share with email" href="#" target="_blank"></wa-icon-button>
        <span class="wa-caption-s">Email</span>
      </span>
    </div>
    <wa-button appearance="outlined">
      <wa-icon slot="prefix" name="link"></wa-icon>
      Copy Link
    </wa-button>
  </div>
 </wa-card>
 ```
 ## Vertical
 ```html{.example}
 <wa-card class="wa-border-radius-pill" style="max-width: 8ch; margin: 0 auto;">
  <div class="wa-stack">
    <span class="wa-align-items-center wa-stack wa-gap-2xs">
      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="code" label="Embed video" href="#" target="_blank"></wa-icon-button>
      <span class="wa-caption-s">Embed</span>
    </span>
    <span class="wa-align-items-center wa-stack wa-gap-2xs">
      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="facebook" href="#" target="_blank"></wa-icon-button>
      <span class="wa-caption-s">Facebook</span>
    </span>
    <span class="wa-align-items-center wa-stack wa-gap-2xs">
      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="bluesky" href="#" target="_blank"></wa-icon-button>
      <span class="wa-caption-s">Bluesky</span>
    </span>
    <span class="wa-align-items-center wa-stack wa-gap-2xs">
      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="LinkedIn" href="#" target="_blank"></wa-icon-button>
      <span class="wa-caption-s">LinkedIn</span>
    </span>
    <span class="wa-align-items-center wa-stack wa-gap-2xs">
      <wa-icon-button style="font-size: var(--wa-font-size-2xl);" name="envelope-open" label="email" href="#" target="_blank"></wa-icon-button>
      <span class="wa-caption-s">Email</span>
    </span>
  </div>
 </wa-card>
 ```
 ## With Image Card
 ```html {.example}
 <wa-card with-image style="max-width: 45ch; margin: 0 auto;">
  <img
    slot="image"
    src="https://images.unsplash.com/photo-1578269174936-2709b6aeb913?q=80&w=2671&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Super special awesome trophy"
  />
  <div class="wa-stack wa-align-items-center">
      <div class="wa-stack wa-gap-2xs wa-align-items-center">
        <h2 class="wa-heading-l">Flawless!</h2>
        <span class="wa-caption-l">
          10 of 10</span>
      </div>
    <p style="text-align: center;">You got a perfect score in this section. Tell your friends, family, really... just anyone who will listen.</p>
    <div class="wa-cluster" style="margin-top: var(--wa-font-size-xl);">
      <wa-avatar label="Avatar with an image icon">
        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="facebook" family="brands" label="Share on Facebook" href="#" target="_blank"></wa-icon-button>
      </wa-avatar>
      <wa-avatar label="Avatar with an image icon">
        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="bluesky" family="brands" label="Share on Bluesky" href="#" target="_blank"></wa-icon-button>
      </wa-avatar>
      <wa-avatar label="Avatar with an image icon">
        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="instagram" family="brands" label="Share on Instagram" href="#" target="_blank"></wa-icon-button>
      </wa-avatar>
      <wa-avatar label="Avatar with an image icon">
        <wa-icon-button slot="icon" style="font-size: var(--wa-font-size-2xl);" name="linkedin" family="brands" label="Share on LinkedIn" href="#" target="_blank"></wa-icon-button>
      </wa-avatar>
    </div>
  </div>
 </wa-card>
 ```
--- a/docs/docs/patterns/membership.md
+++ b/docs/docs/patterns/membership.md
@@ -2,9 +2,8 @@
 title: Membership
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/news.md
+++ b/docs/docs/patterns/news.md
@@ -2,7 +2,6 @@
 title: News
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
@@ -158,4 +157,4 @@ TODO Page Description
    }
  }
 </style>
-```
+```
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -2,9 +2,8 @@
 title: Non-profit
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/patterns.json
+++ b/docs/docs/patterns/patterns.json
@@ -2,6 +2,5 @@
  "layout": "patterns.njk",
  "tags": ["patterns"],
  "wide": true,
-  "noAlpha": true,
+  "noAlpha": true
  "isPro": true
 }
--- a/docs/docs/patterns/portfolio.md
+++ b/docs/docs/patterns/portfolio.md
@@ -2,9 +2,8 @@
 title: Portfolio
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/patterns/product-landing.md
+++ b/docs/docs/patterns/product-landing.md
@@ -2,9 +2,8 @@
 title: Product Landing
 description: TODO
 unlisted: true
 isPro: true
 ---
 TODO Page Description
-## Examples
+## Examples
--- a/docs/docs/test/benchmark.njk
+++ b/docs/docs/test/benchmark.njk
@@ -1,71 +0,0 @@
 ---
 title: CSS Properties Benchmark
 unlisted: true
 wide: true
 ---
 {% set icons = {
    check: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>',
    'chevron-down': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>',
    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>',
    'chevron-right': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>',
    circle: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>',
    'eye-dropper': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>',
    'grip-vertical': '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>',
    indeterminate: '<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>',
    minus: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>',
    pause: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>',
    play: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>',
    star: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>',
    user: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>',
    xmark: '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>'
 } %}
 <style>
 .icon-tests {
 	font-size: .5rem;
 	line-height: 1;
 }
 wa-icon {
 	transition: 1s font-size;
 	&:hover {
 		font-size: 1rem;
 	}
 }
 </style>
 {% set repetitions = 200 %}
 <h2>Setting everything via attributes</h2>
 <div class="icon-tests">
 {% for icon, svg in icons %}
 	{% for i in range(repetitions) %}
 	<wa-icon name="{{ icon }}" variant="solid" family="classic"></wa-icon>
 	{% endfor %}
 {% endfor %}
 </div>
 <h2>Setting variant & family via CSS</h2>
 <div class="icon-tests" style="--wa-icon-variant: regular; --wa-icon-family: classic">
 {% for icon, svg in icons %}
 	{% for i in range(repetitions) %}
 	<wa-icon name="{{ icon }}"></wa-icon>
 	{% endfor %}
 {% endfor %}
 </div>
 <h2>Setting name via CSS</h2>
 <div class="icon-tests">
 {% for icon, svg in icons %}
 <span style="--wa-icon-name: {{ icon }}">
 	{% for i in range(repetitions) %}
 	<wa-icon variant="solid" family="classic"></wa-icon>
 	{% endfor %}
 </span>
 {% endfor %}
 </div>
--- a/docs/docs/themes/remix.js
+++ b/docs/docs/themes/remix.js
@@ -30,8 +30,8 @@ function init() {
  codeSnippets = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code:first-of-type');
  codeSnippets = {
-    html: codeSnippets?.querySelector('code.language-html'),
+    html: codeSnippets.querySelector('code.language-html'),
-    css: codeSnippets?.querySelector('code.language-css'),
+    css: codeSnippets.querySelector('code.language-css'),
  };
  data = {
@@ -73,10 +73,11 @@ function init() {
  Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());
-  globalThis.remixApp = { selects, codeSnippets, data, computed, render };
+  return { selects, codeSnippets, data, computed, render };
 }
-init();
+globalThis.remixApp = init();
 // Async load CSS for other themes *before* current theme stylesheet
 let themeStylesheet = document.querySelector('#theme-stylesheet');
@@ -150,14 +151,12 @@ function render(changedAspect) {
  // Update code snippets
  for (let language in codeSnippets) {
    let codeSnippet = codeSnippets[language];
    if (!codeSnippet) {
      continue;
    }
    let code = getThemeCode(data.baseTheme, data.params, { language, cdnUrl });
    codeSnippet.textContent = code;
    Prism.highlightElement(codeSnippet);
  }
 }
-addEventListener('turbo:render', init);
+addEventListener('turbo:render', event => {
  remixApp = init();
 });
--- a/docs/docs/tokens/focus.md
+++ b/docs/docs/tokens/focus.md
@@ -27,7 +27,6 @@ See your theme's focus ring in action by navigating this form example with your
 <style>
  form > * + * {
    display: block;
    --display: block;
    width: fit-content;
    margin-block-start: var(--wa-space-m);
  }
--- a/docs/index.md
+++ b/docs/index.md
@@ -286,7 +286,7 @@ layout: page
      </wa-callout>
    </div>
    <div>
-      <wa-button href="/docs/" appearance="outlined" class="tile">
+      <wa-button href="/docs/installation" appearance="outlined" class="tile">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
          <div class="icon-heading" style="margin-block-end: 0;">
            <wa-icon name="pen-ruler" fixed-width></wa-icon>
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,13 +10,12 @@
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
-        "@floating-ui/dom": "^1.6.13",
+        "@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",
+        "qr-creator": "^1.0.0"
        "style-observer": "^0.0.7"
      },
      "devDependencies": {
        "@11ty/eleventy": "3.0.0",
@@ -1633,20 +1632,18 @@
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.6.13",
+      "version": "1.6.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
      "license": "MIT",
      "dependencies": {
        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.9"
+        "@floating-ui/utils": "^0.2.8"
      }
    },
    "node_modules/@floating-ui/utils": {
-      "version": "0.2.9",
+      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
      "license": "MIT"
    },
    "node_modules/@github/catalyst": {
      "version": "1.6.0",
@@ -13088,12 +13085,6 @@
        "node": ">=0.8.0"
      }
    },
    "node_modules/style-observer": {
      "version": "0.0.7",
      "resolved": "https://registry.npmjs.org/style-observer/-/style-observer-0.0.7.tgz",
      "integrity": "sha512-t75H3CRy+vd5q3yqyrf/De4tkz33hPQTiCcfh0NTesI5G7kJnZ227LEYTwqjKTtaFOCJvqZcYFHpJlF8bsk3bQ==",
      "license": "MIT"
    },
    "node_modules/supports-color": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -68,13 +68,12 @@
  },
  "dependencies": {
    "@ctrl/tinycolor": "^4.1.0",
-    "@floating-ui/dom": "^1.6.13",
+    "@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",
+    "qr-creator": "^1.0.0"
    "style-observer": "^0.0.7"
  },
  "devDependencies": {
    "@11ty/eleventy": "3.0.0",
--- a/src/components/breadcrumb-item/breadcrumb-item.css
+++ b/src/components/breadcrumb-item/breadcrumb-item.css
@@ -1,6 +1,14 @@
 :host {
  color: var(--wa-color-text-link);
  display: inline-flex;
 }
 :host(:last-of-type) {
  color: var(--wa-color-text-quiet);
 }
 .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: var(--wa-font-weight-action);
@@ -8,10 +16,6 @@
  white-space: nowrap;
 }
 :host(:last-of-type) {
  color: var(--wa-color-text-quiet);
 }
 .label {
  display: inline-block;
  font: inherit;
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -17,6 +17,7 @@ import styles from './breadcrumb-item.css';
 * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
 * you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
 *
 * @csspart base - The component's base wrapper.
 * @csspart label - The breadcrumb item's label.
 * @csspart prefix - The container that wraps the prefix.
 * @csspart suffix - The container that wraps the suffix.
@@ -71,45 +72,47 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
  render() {
    return html`
-      <span part="prefix" class="prefix">
+      <div part="base" class="breadcrumb-item">
-        <slot name="prefix"></slot>
+        <span part="prefix" class="prefix">
-      </span>
+          <slot name="prefix"></slot>
        </span>
-      ${this.renderType === 'link'
+        ${this.renderType === 'link'
-        ? html`
+          ? html`
-            <a
+              <a
-              part="label"
+                part="label"
-              class="label label--link"
+                class="label label--link"
-              href="${this.href!}"
+                href="${this.href!}"
-              target="${ifDefined(this.target ? this.target : undefined)}"
+                target="${ifDefined(this.target ? this.target : undefined)}"
-              rel=${ifDefined(this.target ? this.rel : undefined)}
+                rel=${ifDefined(this.target ? this.rel : undefined)}
-            >
+              >
-              <slot></slot>
+                <slot></slot>
-            </a>
+              </a>
-          `
+            `
-        : ''}
+          : ''}
-      ${this.renderType === 'button'
+        ${this.renderType === 'button'
-        ? html`
+          ? html`
-            <button part="label" type="button" class="label label--button">
+              <button part="label" type="button" class="label label--button">
-              <slot @slotchange=${this.handleSlotChange}></slot>
+                <slot @slotchange=${this.handleSlotChange}></slot>
-            </button>
+              </button>
-          `
+            `
-        : ''}
+          : ''}
-      ${this.renderType === 'dropdown'
+        ${this.renderType === 'dropdown'
-        ? html`
+          ? html`
-            <div part="label" class="label label--dropdown">
+              <div part="label" class="label label--dropdown">
-              <slot @slotchange=${this.handleSlotChange}></slot>
+                <slot @slotchange=${this.handleSlotChange}></slot>
-            </div>
+              </div>
-          `
+            `
-        : ''}
+          : ''}
-      <span part="suffix" class="suffix">
+        <span part="suffix" class="suffix">
-        <slot name="suffix"></slot>
+          <slot name="suffix"></slot>
-      </span>
+        </span>
-      <span part="separator" class="separator" aria-hidden="true">
+        <span part="separator" class="separator" aria-hidden="true">
-        <slot name="separator"></slot>
+          <slot name="separator"></slot>
-      </span>
+        </span>
      </div>
    `;
  }
 }
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,9 +1,13 @@
 :host {
-  --display: inline-flex;
+  display: contents;
  position: relative;
 }
 :where([part~='base']) {
  all: inherit;
  display: inline-flex;
 }
 /*
 * Label
 */
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -7,7 +7,6 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import passthroughStyles from '../../styles/shadow/passthrough.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
@@ -40,7 +39,6 @@ import styles from './button.css';
 * @csspart caret - The button's caret icon, a `<wa-icon>` element.
 * @csspart spinner - The spinner that shows when the button is in the loading state.
 *
 * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
 * @cssproperty --background-color - The button's background color when the button is not being interacted with.
 * @cssproperty --background-color-active - The button's background color when active.
 * @cssproperty --background-color-hover - The button's background color on hover.
@@ -53,7 +51,7 @@ import styles from './button.css';
 */
@customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [passthroughStyles, variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
  static rectProxy = 'button';
  static get validators() {
--- a/src/components/color-picker/color-picker.ts
+++ b/src/components/color-picker/color-picker.ts
@@ -210,6 +210,12 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
  /** Disables the color picker. */
  @property({ type: Boolean }) disabled = false;
  /**
   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
  @property({ type: Boolean }) hoist = false;
  /** Shows the opacity slider. Enabling this will cause the formatted value to be HEXA, RGBA, or HSLA. */
  @property({ type: Boolean }) opacity = false;
@@ -1091,6 +1097,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
        aria-disabled=${this.disabled ? 'true' : 'false'}
        .containingElement=${this}
        ?disabled=${this.disabled}
        ?hoist=${this.hoist}
        @wa-after-show=${this.handleAfterShow}
        @wa-after-hide=${this.handleAfterHide}
      >
--- a/src/components/copy-button/copy-button.ts
+++ b/src/components/copy-button/copy-button.ts
@@ -97,6 +97,13 @@ export default class WaCopyButton extends WebAwesomeElement {
  /** The preferred placement of the tooltip. */
  @property({ attribute: 'tooltip-placement' }) tooltipPlacement: 'top' | 'right' | 'bottom' | 'left' = 'top';
  /**
   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
   * scenarios.
   */
  @property({ type: Boolean }) hoist = false;
  private async handleCopy() {
    if (this.disabled || this.isCopying) {
      return;
@@ -213,6 +220,7 @@ export default class WaCopyButton extends WebAwesomeElement {
          for="copy-button"
          placement=${this.tooltipPlacement}
          ?disabled=${this.disabled}
          ?hoist=${this.hoist}
          exportparts="
            base:tooltip__base,
            base__popup:tooltip__base__popup,
--- a/src/components/details/details.css
+++ b/src/components/details/details.css
@@ -1,10 +1,13 @@
 :host {
  --show-duration: 200ms;
  --hide-duration: 200ms;
-  --display: block;
+
  display: contents !important;
 }
 details {
  all: inherit;
  display: block;
  overflow-anchor: none;
 }
--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -9,7 +9,6 @@ import { getTargetElement, waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/details.css';
 import passthroughStyles from '../../styles/shadow/passthrough.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -44,11 +43,10 @@ import styles from './details.css';
 * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
 * @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
 * @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
 * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
 */
@customElement('wa-details')
 export default class WaDetails extends WebAwesomeElement {
-  static shadowStyle = [passthroughStyles, appearanceStyles, nativeStyles, styles];
+  static shadowStyle = [appearanceStyles, nativeStyles, styles];
  private detailsObserver: MutationObserver;
  private readonly localize = new LocalizeController(this);
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -95,6 +95,12 @@ export default class WaDropdown extends WebAwesomeElement {
  /** The distance in pixels from which to offset the panel along its trigger. */
  @property({ type: Number }) skidding = 0;
  /**
   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
  @property({ type: Boolean }) hoist = false;
  /**
   * Syncs the popup width or height to that of the trigger element.
   */
@@ -409,6 +415,7 @@ export default class WaDropdown extends WebAwesomeElement {
        placement=${this.placement}
        distance=${this.distance}
        skidding=${this.skidding}
        strategy=${this.hoist ? 'fixed' : 'absolute'}
        flip
        shift
        auto-size="vertical"
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -48,21 +48,21 @@ export default class WaIcon extends WebAwesomeElement {
  @state() private svg: SVGElement | HTMLTemplateResult | null = null;
  /** The name of the icon to draw. Available names depend on the icon library being used. */
-  @property({ cssProperty: '--wa-icon-name' }) name?: string;
+  @property({ reflect: true }) name?: string;
  /**
   * The family of icons to choose from. For Font Awesome Free (default), valid options include `classic` and `brands`.
   * For Font Awesome Pro subscribers, valid options include, `classic`, `sharp`, `duotone`, and `brands`. Custom icon
   * libraries may or may not use this property.
   */
-  @property({ cssProperty: '--wa-icon-family' }) family: string;
+  @property({ reflect: true }) family: string;
  /**
   * The name of the icon's variant. For Font Awesome, valid options include `thin`, `light`, `regular`, and `solid` for
   * the `classic` and `sharp` families. Some variants require a Font Awesome Pro subscription. Custom icon libraries
   * may or may not use this property.
   */
-  @property({ cssProperty: '--wa-icon-variant' }) variant: string;
+  @property({ reflect: true }) variant: string;
  /** Draws the icon in a fixed-width both. */
  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,16 +80,14 @@ export default class WaIcon extends WebAwesomeElement {
  @property() label = '';
  /** The name of a registered custom icon library. */
-  @property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';
+  @property({ reflect: true }) library = 'default';
  connectedCallback() {
    super.connectedCallback();
    watchIcon(this);
  }
-  firstUpdated(changedProperties: PropertyValues<this>) {
+  firstUpdated() {
    super.firstUpdated(changedProperties);
    this.initialRender = true;
    this.setIcon();
  }
--- a/src/components/image-comparer/image-comparer.css
+++ b/src/components/image-comparer/image-comparer.css
@@ -6,6 +6,9 @@
  display: inline-block;
  position: relative;
 }
 .image-comparer {
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
--- a/src/components/image-comparer/image-comparer.ts
+++ b/src/components/image-comparer/image-comparer.ts
@@ -23,6 +23,7 @@ import styles from './image-comparer.css';
 *
 * @event change - Emitted when the position changes.
 *
 * @csspart base - The component's base wrapper.
 * @csspart before - The container that wraps the before image.
 * @csspart after - The container that wraps the after image.
 * @csspart divider - The divider that separates the images.
@@ -39,18 +40,19 @@ export default class WaImageComparer extends WebAwesomeElement {
  private readonly localize = new LocalizeController(this);
  @query('.image-comparer') base: HTMLElement;
  @query('.handle') handle: HTMLElement;
  /** The position of the divider as a percentage. */
  @property({ type: Number, reflect: true }) position = 50;
  private handleDrag(event: PointerEvent) {
-    const { width } = this.getBoundingClientRect();
+    const { width } = this.base.getBoundingClientRect();
    const isRtl = this.localize.dir() === 'rtl';
    event.preventDefault();
-    drag(this, {
+    drag(this.base, {
      onMove: x => {
        this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2));
        if (isRtl) this.position = 100 - this.position;
@@ -96,45 +98,46 @@ export default class WaImageComparer extends WebAwesomeElement {
    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';
    return html`
-      <div class="image">
+      <div part="base" id="image-comparer" class="image-comparer" @keydown=${this.handleKeyDown}>
-        <div part="before" class="before">
+        <div class="image">
-          <slot name="before"></slot>
+          <div part="before" class="before">
            <slot name="before"></slot>
          </div>
          <div
            part="after"
            class="after"
            style=${styleMap({
              clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
            })}
          >
            <slot name="after"></slot>
          </div>
        </div>
        <div
-          part="after"
+          part="divider"
-          class="after"
+          class="divider"
          style=${styleMap({
-            clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
+            left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
          })}
          @mousedown=${this.handleDrag}
          @touchstart=${this.handleDrag}
        >
-          <slot name="after"></slot>
+          <div
-        </div>
+            part="handle"
-      </div>
+            class="handle"
-
+            role="scrollbar"
-      <div
+            aria-valuenow=${this.position}
-        part="divider"
+            aria-valuemin="0"
-        class="divider"
+            aria-valuemax="100"
-        style=${styleMap({
+            aria-controls="image-comparer"
-          left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
+            tabindex="0"
-        })}
+          >
-        @keydown=${this.handleKeyDown}
+            <slot name="handle">
-        @mousedown=${this.handleDrag}
+              <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
-        @touchstart=${this.handleDrag}
+            </slot>
-      >
+          </div>
        <div
          part="handle"
          class="handle"
          role="scrollbar"
          aria-valuenow=${this.position}
          aria-valuemin="0"
          aria-valuemax="100"
          aria-controls="image-comparer"
          tabindex="0"
        >
          <slot name="handle">
            <wa-icon library="system" name="grip-vertical" variant="solid"></wa-icon>
          </slot>
        </div>
      </div>
    `;
--- a/src/components/menu-item/submenu-controller.ts
+++ b/src/components/menu-item/submenu-controller.ts
@@ -275,6 +275,7 @@ export class SubmenuController implements ReactiveController {
        flip
        flip-fallback-strategy="best-fit"
        skidding="${this.skidding}"
        strategy="fixed"
        auto-size="vertical"
        auto-size-padding="10"
      >
--- a/src/components/popup/popup.css
+++ b/src/components/popup/popup.css
@@ -19,19 +19,6 @@
  isolation: isolate;
  max-width: var(--auto-size-available-width, none);
  max-height: var(--auto-size-available-height, none);
  /* Clear UA styles for [popover] */
  :where(&) {
    inset: unset;
    padding: unset;
    margin: unset;
    width: unset;
    height: unset;
    color: unset;
    background: unset;
    border: unset;
    overflow: unset;
  }
 }
 .popup--fixed {
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -1,14 +1,4 @@
-import {
+import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
  arrow,
  autoUpdate,
  computePosition,
  flip,
  getOverflowAncestors,
  offset,
  platform,
  shift,
  size,
 } from '@floating-ui/dom';
 import { offsetParent } from 'composed-offset-position';
 import type { PropertyValues } from 'lit';
 import { html } from 'lit';
@@ -33,8 +23,6 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  );
 }
 const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popover');
 /**
 * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
 * @documentation https://backers.webawesome.com/docs/components/popup
@@ -109,8 +97,11 @@ export default class WaPopup extends WebAwesomeElement {
    | 'left-start'
    | 'left-end' = 'top';
-  /** Which bounding box to use for flipping, shifting, and auto-sizing? */
+  /**
-  @property() boundary: 'viewport' | 'scroll' = 'viewport';
+   * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is
   * clipped, using a `fixed` position strategy can often workaround it.
   */
  @property({ reflect: true }) strategy: 'absolute' | 'fixed' = 'absolute';
  /** The distance in pixels from which to offset the panel away from its anchor. */
  @property({ type: Number }) distance = 0;
@@ -290,8 +281,6 @@ export default class WaPopup extends WebAwesomeElement {
      return;
    }
    this.popup.showPopover?.();
    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
      this.reposition();
    });
@@ -299,8 +288,6 @@ export default class WaPopup extends WebAwesomeElement {
  private async stop(): Promise<void> {
    return new Promise(resolve => {
      this.popup.hidePopover?.();
      if (this.cleanup) {
        this.cleanup();
        this.cleanup = undefined;
@@ -347,21 +334,11 @@ export default class WaPopup extends WebAwesomeElement {
      this.popup.style.height = '';
    }
    let defaultBoundary;
    if (SUPPORTS_POPOVER && !isVirtualElement(this.anchor) && this.boundary === 'scroll') {
      // When using the Popover API, the floating element is no longer in the same DOM context
      // as the overflow ancestors so Floating-UI can't find them.
      // For flip, `elementContext: 'reference'` gets it to use the anchor element instead,
      // but the option is not available for shift() or size(), so we basically need to implement it ourselves.
      defaultBoundary = getOverflowAncestors(this.anchorEl as Element).filter(el => el instanceof Element);
    }
    // Then we flip
    if (this.flip) {
      middleware.push(
        flip({
-          boundary: this.flipBoundary || defaultBoundary,
+          boundary: this.flipBoundary,
          // @ts-expect-error - We're converting a string attribute to an array here
          fallbackPlacements: this.flipFallbackPlacements,
          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
@@ -374,7 +351,7 @@ export default class WaPopup extends WebAwesomeElement {
    if (this.shift) {
      middleware.push(
        shift({
-          boundary: this.shiftBoundary || defaultBoundary,
+          boundary: this.shiftBoundary,
          padding: this.shiftPadding,
        }),
      );
@@ -384,7 +361,7 @@ export default class WaPopup extends WebAwesomeElement {
    if (this.autoSize) {
      middleware.push(
        size({
-          boundary: this.autoSizeBoundary || defaultBoundary,
+          boundary: this.autoSizeBoundary,
          padding: this.autoSizePadding,
          apply: ({ availableWidth, availableHeight }) => {
            if (this.autoSize === 'vertical' || this.autoSize === 'both') {
@@ -422,14 +399,15 @@ export default class WaPopup extends WebAwesomeElement {
    //
    // More info: https://github.com/shoelace-style/shoelace/issues/1135
    //
-    const getOffsetParent = SUPPORTS_POPOVER
+    const getOffsetParent =
-      ? (element: Element) => platform.getOffsetParent(element, offsetParent)
+      this.strategy === 'absolute'
-      : platform.getOffsetParent;
+        ? (element: Element) => platform.getOffsetParent(element, offsetParent)
        : platform.getOffsetParent;
    computePosition(this.anchorEl, this.popup, {
      placement: this.placement,
      middleware,
-      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',
+      strategy: this.strategy,
      platform: {
        ...platform,
        getOffsetParent,
@@ -585,12 +563,11 @@ export default class WaPopup extends WebAwesomeElement {
      ></span>
      <div
        popover="manual"
        part="popup"
        class=${classMap({
          popup: true,
          'popup--active': this.active,
-          'popup--fixed': !SUPPORTS_POPOVER,
+          'popup--fixed': this.strategy === 'fixed',
          'popup--has-arrow': this.arrow,
        })}
      >
--- a/src/components/progress-bar/progress-bar.css
+++ b/src/components/progress-bar/progress-bar.css
@@ -1,7 +1,7 @@
 :host {
  --indicator-color: var(--wa-color-brand-fill-loud);
  --display: flex;
  display: contents;
  height: 1.25rem;
  border-radius: var(--wa-border-radius-pill);
  background-color: var(--wa-color-neutral-fill-normal);
@@ -9,6 +9,8 @@
 }
 .progress-bar {
  all: inherit;
  display: flex;
  position: relative;
  overflow: hidden;
 }
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -4,7 +4,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { clamp } from '../../internal/math.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import passthroughStyles from '../../styles/shadow/passthrough.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import styles from './progress-bar.css';
@@ -21,11 +20,10 @@ import styles from './progress-bar.css';
 * @csspart label - The progress bar's label.
 *
 * @cssproperty --indicator-color - The color of the indicator.
 * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
 */
@customElement('wa-progress-bar')
 export default class WaProgressBar extends WebAwesomeElement {
-  static shadowStyle = [passthroughStyles, styles];
+  static shadowStyle = styles;
  private readonly localize = new LocalizeController(this);
  /** The current progress as a percentage, 0 to 100. */
--- a/src/components/radio-button/radio-button.css
+++ b/src/components/radio-button/radio-button.css
@@ -1,5 +1,10 @@
 :host {
-  --display: inline-flex;
+  display: contents;
 }
 :where([part~='base']) {
  all: inherit;
  display: inline-flex;
 }
 .prefix,
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -6,7 +6,6 @@ import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import passthroughStyles from '../../styles/shadow/passthrough.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
@@ -46,11 +45,10 @@ import styles from './radio-button.css';
 * @csspart prefix - The container that wraps the prefix.
 * @csspart label - The container that wraps the radio button's label.
 * @csspart suffix - The container that wraps the suffix.
 * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
 */
@customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [passthroughStyles, variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
  static rectProxy = 'input';
  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -356,7 +356,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
          part="form-control-input"
          class=${classMap({
            'wa-button-group': this.hasRadioButtons,
-            'wa-button-group-vertical': this.hasRadioButtons && this.orientation === 'vertical',
+            'wa-button-group-vertical': this.orientation === 'vertical',
          })}
          @slotchange=${this.syncRadioElements}
        ></slot>
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -229,6 +229,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
   */
  @property({ type: Boolean, reflect: true }) open = false;
  /**
   * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
   */
  @property({ type: Boolean }) hoist = false;
  /** The select's visual appearance. */
  @property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
@@ -885,6 +891,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
              'placeholder-visible': isPlaceholderVisible,
            })}
            placement=${this.placement}
            strategy=${this.hoist ? 'fixed' : 'absolute'}
            flip
            shift
            sync="width"
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -92,6 +92,13 @@ export default class WaTooltip extends WebAwesomeElement {
   */
  @property() trigger = 'hover focus';
  /**
   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
   * scenarios.
   */
  @property({ type: Boolean }) hoist = false;
  @property() for: string | null = null;
  @state() anchor: null | Element = null;
@@ -283,7 +290,7 @@ export default class WaTooltip extends WebAwesomeElement {
    this.anchor = newAnchor;
  }
-  @watch(['distance', 'placement', 'skidding'])
+  @watch(['distance', 'hoist', 'placement', 'skidding'])
  async handleOptionsChange() {
    if (this.hasUpdated) {
      await this.updateComplete;
@@ -333,6 +340,7 @@ export default class WaTooltip extends WebAwesomeElement {
        placement=${this.placement}
        distance=${this.distance}
        skidding=${this.skidding}
        strategy=${this.hoist ? 'fixed' : 'absolute'}
        flip
        shift
        arrow
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -1,9 +1,7 @@
 import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } from 'lit';
 import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ElementStyleObserver } from 'style-observer';
 import componentStyles from '../styles/shadow/component.css';
 import { getComputedStyle } from './computedStyle.js';
 // Augment Lit's module
 declare module 'lit' {
@@ -13,11 +11,6 @@ declare module 'lit' {
     */
    default?: any;
    initial?: any;
    /**
     * Indicates whether the property should reflect to a CSS custom property.
     */
    cssProperty?: string;
  }
 }
@@ -79,99 +72,6 @@ export default class WebAwesomeElement extends LitElement {
  internals: ElementInternals;
  /** Metadata about CSS-settable props on this element */
  private cssProps: Record<PropertyKey, { setVia?: 'css' | 'attribute' | 'js'; updating?: boolean }> = {};
  private computedStyle: CSSStyleDeclaration | null = null;
  private styleObserver: ElementStyleObserver | null = null;
  connectedCallback(): void {
    super.connectedCallback();
    // Set the initial computed styles
    const Self = this.constructor as typeof WebAwesomeElement;
    let cssProps = Object.keys(Self.cssProps);
    if (cssProps.length > 0) {
      let properties: string[] = [];
      if (Object.keys(this.cssProps).length === 0) {
        // First time connected, initialize
        this.cssProps = Object.fromEntries(
          cssProps.map(property => {
            let setVia = this.getSetVia(property);
            return [property, { setVia }];
          }),
        );
      }
      for (let property in this.cssProps) {
        let setVia = this.cssProps[property].setVia;
        if (!setVia || setVia === 'css') {
          // No attribute set, observe CSS property
          properties.push(property);
        }
      }
      this.handleCSSPropertyChange(properties);
      this.styleObserver ??= new ElementStyleObserver(this, (records: object[]) => {
        let cssProperties = new Set(records.map((record: { property: string }) => record.property));
        // Map CSS properties to prop names
        let properties = cssProps.filter(property => {
          let cssProperty = Self.cssProps[property].cssProperty as string;
          return cssProperties.has(cssProperty);
        });
        this.handleCSSPropertyChange(properties);
      });
      this.styleObserver.unobserve();
      this.styleObserver.observe(properties.map(property => Self.cssProps[property].cssProperty as string));
    }
  }
  /**
   * Respond to CSS property changes for CSS properties reflecting props
   * @param [properties] - Prop names. Defaults to all CSS-reflected props.
   * @void
   */
  handleCSSPropertyChange(properties?: PropertyKey | PropertyKey[]) {
    const Self = this.constructor as typeof WebAwesomeElement;
    properties ??= Object.keys(Self.cssProps);
    properties = Array.isArray(properties) ? properties : [properties];
    if (properties.length === 0) {
      return;
    }
    this.computedStyle ??= getComputedStyle(this);
    for (let property of properties) {
      let propOptions = Self.cssProps[property];
      let cssProperty = propOptions?.cssProperty;
      let meta = this.cssProps[property];
      if (!cssProperty || (meta.setVia && meta.setVia !== 'css')) {
        continue;
      }
      const value = this.computedStyle?.getPropertyValue(cssProperty);
      // if (property === 'variant' && !value) debugger;
      if (value) {
        meta.setVia = 'css';
        meta.updating = true;
        // @ts-ignore
        this[property] = value.trim();
        this.updateComplete.then(() => {
          meta.updating = false;
        });
      }
    }
  }
  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
    if (!this.#hasRecordedInitialProperties) {
      (this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
@@ -215,50 +115,6 @@ export default class WebAwesomeElement extends LitElement {
    }
  }
  /**
   * Get how a prop was set
   * @param property - The property to check
   */
  private getSetVia(property: PropertyKey): 'css' | 'js' | 'attribute' | undefined {
    let Self = this.constructor as typeof WebAwesomeElement;
    let setVia;
    let propOptions = Self.cssProps[property];
    let attribute = typeof propOptions.attribute === 'string' ? propOptions.attribute : (property as string);
    if (propOptions.attribute !== false && this.hasAttribute(attribute)) {
      setVia = 'attribute';
    } else {
      // @ts-ignore
      let value = this[property as PropertyKey];
      if (value !== undefined && value !== propOptions.default) {
        setVia = 'js';
      }
    }
    return setVia as 'attribute' | 'js' | 'css' | undefined;
  }
  protected updated(changedProperties: PropertyValues<this>) {
    super.updated(changedProperties);
    let Self = this.constructor as typeof WebAwesomeElement;
    let cssProps = Object.keys(Self.cssProps);
    if (cssProps.length === 0) {
      return;
    }
    for (let [property] of changedProperties) {
      let meta = this.cssProps[property];
      if (meta && typeof property === 'string' && !(meta.setVia === 'css' && meta.updating)) {
        // A prop is being set via JS or an attribute that was previously set via CSS
        // and it's not because we're in the middle of an update
        meta.setVia = this.getSetVia(property);
      }
    }
  }
  protected update(changedProperties: PropertyValues<this>): void {
    try {
      super.update(changedProperties);
@@ -374,11 +230,6 @@ export default class WebAwesomeElement extends LitElement {
   */
  static rectProxy: undefined | string;
  /**
   * Props that can be set via CSS custom properties
   */
  static cssProps: Record<PropertyKey, PropertyDeclaration> = {};
  static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
    if (options) {
      if (options.initial !== undefined && options.default === undefined) {
@@ -405,18 +256,8 @@ export default class WebAwesomeElement extends LitElement {
    super.createProperty(name, options);
    // Wrap the default accessor with logic to return the default value if the value is null
    if (options) {
      if (options.cssProperty) {
        // Add to the set of CSS-settable props
        if (this.cssProps === WebAwesomeElement.cssProps) {
          // Each class needs its own, otherwise they'd share the same object
          this.cssProps = {};
        }
        this.cssProps[name] = options;
      }
      // Wrap the default accessor with logic to return the default value if the value is null
      if (options.default !== undefined) {
        const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
--- a/src/styles/shadow/passthrough.css
+++ b/src/styles/shadow/passthrough.css
@@ -1,25 +0,0 @@
 /**
 * Styles for elements that need to use display: contents on the host to enable styling with regular CSS properties (see #207, #259).
 * To use, make sure that the element that needs to inherit properties set on the host has a part of base or a class of .styling-host.
 */
@property --display {
  syntax: '*';
  inherits: false;
 }
 :host {
  display: contents !important;
 }
 :where([part~='base'], .styling-host) {
  all: inherit;
  /* Add any non-inherited custom properties here, as all: inherit won't cover them */
  --display: inherit;
  display: var(--display, inline);
 }
 :host([hidden]) {
  display: none !important;
 }
Author	SHA1	Message	Date
Kelsey Jackson	3b30f9f39e	Merge pull request #859 from shoelace-style/kj/patterns-home-stretch Kj/patterns home stretch	2025-04-04 12:17:39 -05:00
Kelsey Jackson	1999b65591	a few more app patterns	2025-04-04 12:16:21 -05:00
Kelsey Jackson	444e0d3e46	having local browset issues	2025-04-04 11:10:40 -05:00
Kelsey Jackson	5aeedceb2d	added post articles	2025-04-03 21:53:50 -05:00
Kelsey Jackson	1e1cd2406e	switching machines	2025-04-03 19:14:19 -05:00
Kelsey Jackson	e72f2c1847	added permissions pattern	2025-04-03 09:47:12 -05:00
Kelsey Jackson	910c6cb3fb	Merge branch 'pattern-main' into kj/patterns-home-stretch	2025-04-02 17:24:17 -05:00
Kelsey Jackson	55edcd2470	Merge branch 'next' into pattern-main	2025-04-02 17:23:49 -05:00
Kelsey Jackson	952a44b5eb	catching up with next	2025-04-02 17:23:06 -05:00
Kelsey Jackson	2ca8422bc8	switching machines	2025-04-02 16:05:09 -05:00
Kelsey Jackson	beb88fac56	fixed conflicts	2025-04-01 13:00:16 -05:00
Lindsay M	a588194b95	App pattern tweaks (#827 ) * Fix `patterns.css` reference * Tweaks to action panel patterns * Tweaks to comments patterns * Progress on data display patterns * Progress on empty state patterns * Use email-related data from recent update in `pattern-main` (altered slightly) * Tweaks to data display patterns * Tweaks to empty state patterns * Tweaks to FAQ patterns * Tweaks to feed patterns * Tweaks to grid patterns * Tweaks to pagination patterns * Tweaks to pricing patterns * Tweaks to description list patterns * Tweaks to leaderboard patterns * Add and update names and descriptions * Ensure comments fields have labels * Tweak recent additions	2025-04-01 13:45:26 -04:00
Kelsey Jackson	a1ba80fe8d	add more app patterns	2025-04-01 00:36:12 -05:00
Kelsey Jackson	a3edcaf27d	added a few more	2025-03-30 23:54:39 -05:00
Kelsey Jackson	595c40c0fa	Merge pull request #820 from shoelace-style/kj/info-patterns got three done	2025-03-28 04:18:46 -05:00
Kelsey Jackson	7e2f32a965	a few more	2025-03-28 04:17:12 -05:00
Kelsey Jackson	7b3bd8e027	fixed conflicts	2025-03-28 01:58:11 -05:00
Kelsey Jackson	5711819e9c	Merge pull request #847 from shoelace-style/kj/pattern-additions reworked feeds'	2025-03-28 01:55:02 -05:00
Kelsey Jackson	760c09781d	reworked feeds'	2025-03-28 01:52:57 -05:00
Kelsey Jackson	5b59bee2ff	added login patterns	2025-03-27 22:50:00 -05:00
Kelsey Jackson	ec1ffcefdc	some newsletter signups	2025-03-27 15:35:18 -05:00
Lea Verou	d828dd3600	Use overviews in pattern subcategories (#826 ) * Do not error if no pages * Automatically set parents and tags for patterns * Update overview.njk * [WIP] Use overview pages for pattern listings * Remove explicit parents --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>	2025-03-26 15:22:48 -04:00
lindsaym-fa	0984cde1c5	Merge branch 'next' into pattern-main	2025-03-26 15:14:42 -04:00
Kelsey Jackson	5edad481f0	Merge branch 'kj/info-patterns' of github.com:shoelace-style/webawesome into kj/info-patterns	2025-03-26 13:49:29 -05:00
Kelsey Jackson	aab221dcb1	initial paywalls	2025-03-26 13:49:23 -05:00
lindsaym-fa	bbe6b4c6b3	Quick formatting adjustment	2025-03-24 16:45:19 -04:00
Kelsey Jackson	6ee5c27b9d	updated social share	2025-03-24 14:24:26 -05:00
Lea Verou	c3af1174ca	Merge branch 'next' into pattern-main	2025-03-21 17:43:21 -04:00
Kelsey Jackson	db5b967390	Merge pull request #822 from shoelace-style/kj/pattern-polish a little cleanup and adding detail	2025-03-21 10:45:55 -05:00
Kelsey Jackson	8e3ffc4abe	got three done	2025-03-20 17:16:22 -05:00
Kelsey Jackson	b5523c33b7	a little cleanup and adding detail	2025-03-19 17:17:02 -05:00
Kelsey Jackson	f031cab138	splitting up the old blog page	2025-03-19 12:09:42 -05:00
Kelsey Jackson	67c46a21dd	created info category	2025-03-18 18:56:23 -05:00
Kelsey Jackson	c310ee1072	Merge pull request #804 from shoelace-style/kj/pattern-sidebar Kj/pattern sidebar	2025-03-18 13:40:39 -05:00
Kelsey Jackson	8fff50d3d8	updated sidebar	2025-03-18 13:28:41 -05:00
Kelsey Jackson	944f9002c7	working on sidebar	2025-03-18 09:38:39 -05:00
Kelsey Jackson	eba2a75ffb	Merge pull request #775 from shoelace-style/kj/app-pattern App Patterns	2025-03-14 16:04:09 -05:00
Kelsey Jackson	c3de5a8915	removed old file	2025-03-14 16:02:39 -05:00
Kelsey Jackson	c18aa23d76	merging pattern-maiin	2025-03-14 16:00:32 -05:00
Kelsey Jackson	54e14a20c0	Merge pull request #703 from shoelace-style/kj/e-commerce-patterns Kj/e commerce patterns	2025-03-14 15:57:58 -05:00
Kelsey Jackson	97b8e96a6e	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-03-14 15:56:08 -05:00
Kelsey Jackson	55a362b741	Merge branch 'pattern-main' into kj/app-pattern	2025-03-14 15:55:45 -05:00
Kelsey Jackson	d9cafdafb7	Merge branch 'next' into pattern-main	2025-03-14 15:55:15 -05:00
Kelsey Jackson	81bf6865ec	big switchover	2025-03-14 06:10:40 -05:00
lindsaym-fa	873eb47d18	Clean up utility usage and code formatting for product previews	2025-03-11 17:20:07 -04:00
lindsaym-fa	a564d3061f	Clean up utility usage and code formatting for order summaries	2025-03-11 14:22:04 -04:00
Kelsey Jackson	ef865396f2	switching machines :	2025-03-11 09:26:58 -05:00
Kelsey Jackson	903085257d	removed store navigation	2025-03-07 11:12:39 -06:00
Kelsey Jackson	27237441a1	some heavy duty updates	2025-03-07 10:59:24 -06:00
Kelsey Jackson	b0291653f8	more polish	2025-03-06 22:43:13 -06:00
Kelsey Jackson	3962c50844	added review variant	2025-03-06 12:59:44 -06:00
Kelsey Jackson	314801c368	updated reviews	2025-03-05 16:40:36 -06:00
Kelsey Jackson	dc30ed8503	updated incentive images	2025-03-05 16:37:49 -06:00
lindsaym-fa	e12be798b8	Clean up utilities and formatting, replace placeholder text in order history	2025-03-04 14:30:00 -05:00
Kelsey Jackson	7f29f1b4ea	started updating with style utilities	2025-03-04 13:09:41 -06:00
lindsaym-fa	3563d6a2dd	Clean up utility usage and code formatting for category previews	2025-03-04 12:14:48 -05:00
Kelsey Jackson	007d93077f	updated incentives	2025-03-04 11:04:31 -06:00
Kelsey Jackson	80b78aeb16	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-03-04 10:14:31 -06:00
Kelsey Jackson	8bc8ea85a5	Merge branch 'next' into pattern-main	2025-03-04 10:14:14 -06:00
Kelsey Jackson	61a6cd9fb9	updated image	2025-03-03 14:46:54 -06:00
Kelsey Jackson	7fb3fd5982	updated product preview	2025-03-03 14:22:45 -06:00
Kelsey Jackson	dc580b3351	committing to pull down changes	2025-03-03 10:38:10 -06:00
lindsaym-fa	74719d4c06	Refactor shopping cart patterns	2025-02-28 15:46:06 -05:00
Kelsey Jackson	47a7cdedd0	switching machines	2025-02-28 09:37:05 -06:00
lindsaym-fa	d906940726	Refactor product overview patterns	2025-02-27 17:04:10 -05:00
Kelsey Jackson	a782470c6a	more polish	2025-02-27 11:47:56 -06:00
lindsaym-fa	de175ed4a1	Refactor product list patterns	2025-02-26 11:39:41 -05:00
lindsaym-fa	3612f8fdfa	Add link style utilities	2025-02-26 11:39:11 -05:00
Kelsey Jackson	bc76df4b31	switching machines	2025-02-26 07:31:36 -06:00
lindsaym-fa	9ad7f4a6be	Reorganize app patterns into separate pages	2025-02-25 12:02:29 -05:00
Kelsey Jackson	a7457630aa	inital commit	2025-02-24 16:45:27 -06:00
Kelsey Jackson	e19928123f	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-02-24 11:05:08 -06:00
Kelsey Jackson	e644862f58	Merge branch 'next' into pattern-main	2025-02-24 11:04:45 -06:00
Kelsey Jackson	76529c628e	committing to bring branches up to next	2025-02-24 11:04:07 -06:00
Kelsey Jackson	62ded7b15a	updated order history	2025-02-21 15:27:43 -06:00
Kelsey Jackson	65af9980f1	updated content for category preview	2025-02-21 10:08:33 -06:00
Kelsey Jackson	db592194fd	updtated content	2025-02-21 09:45:19 -06:00
Kelsey Jackson	0f9ea14033	unlisted links	2025-02-19 11:12:05 -06:00
Kelsey Jackson	057b76a10a	created e-commerce index	2025-02-19 10:09:42 -06:00
Kelsey Jackson	b466ba9d0f	Merge pull request #748 from shoelace-style/lm/ecommerce-patterns-revisions Suggested Revisions to E-commerce Patterns	2025-02-18 13:34:45 -06:00
Kelsey Jackson	9c979931da	fixed conflicts	2025-02-18 13:33:46 -06:00
Kelsey Jackson	898311590a	switching branches to merge	2025-02-18 13:31:53 -06:00
Kelsey Jackson	5f4510f355	more tweaks	2025-02-18 09:56:49 -06:00
Kelsey Jackson	b8eeb3db23	a little more polish	2025-02-14 07:42:36 -06:00
lindsaym-fa	8574270340	Add checkout form example	2025-02-13 23:06:50 -05:00
lindsaym-fa	aa042a0a6e	Merge branch 'kj/e-commerce-patterns' into lm/ecommerce-patterns-revisions	2025-02-13 21:53:47 -05:00
Kelsey Jackson	fe81a41a6b	Merge branch 'kj/e-commerce-patterns' of github.com:shoelace-style/webawesome into kj/e-commerce-patterns	2025-02-13 15:09:27 -06:00
Kelsey Jackson	f3628ad2d8	tweaked customer review	2025-02-13 15:08:30 -06:00
lindsaym-fa	169337077d	Add docs layout for patterns with stylesheet	2025-02-13 15:49:09 -05:00
lindsaym-fa	406d9a9708	Update category descriptions and headings	2025-02-13 15:47:21 -05:00
lindsaym-fa	faaf75c0a2	Add "What's a Pattern?" and "Using Patterns" to index	2025-02-13 13:22:46 -05:00
Kelsey Jackson	13b67db869	Merge branch 'kj/e-commerce-patterns' of github.com:shoelace-style/webawesome into kj/e-commerce-patterns	2025-02-13 10:35:40 -06:00
Kelsey Jackson	b7fdda4b03	cleaned up checkout form	2025-02-13 10:35:31 -06:00
lindsaym-fa	d60e675702	Reimplement checkout form revisions	2025-02-13 10:23:46 -05:00
lindsaym-fa	414a318f0b	Revert checkout form changes in attempt to improve diff	2025-02-13 10:00:45 -05:00
lindsaym-fa	ff8ed89645	Merge branch 'kj/e-commerce-patterns' into lm/ecommerce-patterns-revisions	2025-02-13 09:55:45 -05:00
lindsaym-fa	e027ab1291	Fix typo in file name	2025-02-13 09:52:56 -05:00
lindsaym-fa	d8f97b15b4	Add missing file extension	2025-02-13 09:52:00 -05:00
Kelsey Jackson	a8ed6f2c19	tweaked order summary	2025-02-12 16:14:21 -06:00
Kelsey Jackson	c7f5dc69ad	cleaned up shopping cart	2025-02-12 15:07:03 -06:00
lindsaym-fa	42381722c5	Re-add `navigation` to "Product Features" carousel	2025-02-12 15:10:42 -05:00
lindsaym-fa	b2f9ec573f	Merge branch 'kj/e-commerce-patterns' into lm/ecommerce-patterns-revisions	2025-02-12 15:05:33 -05:00
lindsaym-fa	b85e59b8ca	"Checkout Form" revisions	2025-02-12 15:01:29 -05:00
Kelsey Jackson	8bd69694ce	tweak category preview	2025-02-12 13:28:00 -06:00
Kelsey Jackson	7672923479	tweaked order history	2025-02-12 12:05:43 -06:00
Kelsey Jackson	c94006c6aa	tweaked product overview	2025-02-12 11:21:17 -06:00
Kelsey Jackson	91ce2f2271	cleaned up product list	2025-02-12 10:08:51 -06:00
lindsaym-fa	9c609e44de	"Category Filters" revisions + `wa-placeholder` utility	2025-02-11 17:06:40 -05:00
lindsaym-fa	28a8e4250a	Revisions to "Product Features"	2025-02-11 17:05:38 -05:00
Kelsey Jackson	656a38cd3d	updated prouct preview	2025-02-11 11:58:52 -06:00
Kelsey Jackson	9b90e56b45	more filter work	2025-02-11 10:57:29 -06:00
Kelsey Jackson	0c84a2ff37	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-02-11 09:11:36 -06:00
Kelsey Jackson	511cca7931	Merge branch 'next' into pattern-main	2025-02-11 09:10:58 -06:00
Kelsey Jackson	2069d223f0	adding some polish	2025-02-11 09:10:18 -06:00
Kelsey Jackson	37d2455965	updated descriptions	2025-02-10 14:37:00 -06:00
Kelsey Jackson	85b05fc655	editing descriptions	2025-02-07 15:50:15 -06:00
Kelsey Jackson	52328d9805	fixing conflicts	2025-02-07 14:24:40 -06:00
Kelsey Jackson	2c89c5f510	switching machines	2025-02-07 11:42:00 -06:00
Kelsey Jackson	5ac9e8cff1	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-02-05 12:16:50 -06:00
Kelsey Jackson	e238e35b3b	Merge branch 'next' into pattern-main	2025-02-05 12:16:22 -06:00
Kelsey Jackson	c6d8d37871	switching machines	2025-01-31 09:43:40 -06:00
Kelsey Jackson	4dddb183fd	updated width of container	2025-01-29 13:39:51 -06:00
Kelsey Jackson	d49ed53e9a	added utilities to order-summary	2025-01-29 13:33:48 -06:00
Kelsey Jackson	99e2ffc17b	added utilities to order history	2025-01-29 13:06:14 -06:00
Kelsey Jackson	97c79c29b9	Merge branch 'kj/e-commerce-patterns' of github.com:shoelace-style/webawesome into kj/e-commerce-patterns	2025-01-29 12:32:10 -06:00
Kelsey Jackson	7da9f53e27	filter work	2025-01-28 15:04:03 -06:00
Kelsey Jackson	a9cc02193f	updated some patterns	2025-01-27 13:30:18 -06:00
Kelsey Jackson	9ad1c8f060	updated product list patterns	2025-01-27 13:17:09 -06:00
Kelsey Jackson	e0eaea2024	upated the product detail patterns	2025-01-27 11:20:40 -06:00
Kelsey Jackson	a8b7b6a93f	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-01-23 08:56:50 -06:00
Kelsey Jackson	581e47043a	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-01-22 18:50:38 -06:00
Kelsey Jackson	9ffe0cfe3c	Merge branch 'next' into pattern-main	2025-01-22 18:50:11 -06:00
Kelsey Jackson	45df4a924f	commiting to switch machines	2025-01-22 14:08:14 -06:00
Kelsey Jackson	43eed9d15e	Merge branch 'next' into kj/e-commerce-patterns	2025-01-22 12:30:32 -06:00
Kelsey Jackson	a0ff411463	commiting to merge in next	2025-01-22 12:27:47 -06:00
Kelsey Jackson	04cd027c7e	started split image pattern:	2025-01-17 14:44:14 -06:00
Kelsey Jackson	a68a157ebc	switching machines	2025-01-15 16:41:13 -06:00
Kelsey Jackson	b2a24a3b52	Merge branch 'pattern-main' into kj/e-commerce-patterns	2025-01-09 11:31:46 -06:00
Kelsey Jackson	cbb456ffda	switching machines	2025-01-09 11:29:32 -06:00
Kelsey Jackson	e0038c3125	Initial Commit	2025-01-09 10:59:33 -06:00
Kelsey Jackson	3e5d3120b1	Merge branch 'next' into kj/e-commerce-patterns	2025-01-08 16:19:29 -06:00
Kelsey Jackson	020f4cbaed	building out the filter	2025-01-07 11:26:29 -06:00
Kelsey Jackson	9106bb88cf	fixed merge conflicts	2025-01-06 10:34:51 -06:00
Kelsey Jackson	a822ab98c8	Merge branch 'next' into kj/e-commerce-patterns	2025-01-02 11:57:42 -06:00
Kelsey Jackson	026777c085	started invoice table	2024-12-18 09:53:15 -06:00
Kelsey Jackson	6d87b9b24a	Merge branch 'next' into kj/e-commerce-patterns	2024-12-17 12:23:27 -06:00
Kelsey Jackson	d5affa01e9	dividing up e-commerce patterns	2024-12-11 15:06:01 -06:00