[image-comparer] Remove base part

Had to move the keydown listener to the divider, but that seems like a good change *anyway* since if the content is interactive (such as our own theme previews) we don't really want to be listening to key presses on it, we only really want to be listening to key presses on the divider, which is the actual focusable part.
[breadcrumb-item] Drop base part, move styling to host
2026-01-13 20:49:15 +00:00 · 2025-04-23 12:44:33 -04:00 · 2025-04-23 12:33:51 -04:00 · 2025-04-23 11:52:23 -04:00 · 2025-04-21 17:01:09 -04:00 · 2025-04-15 18:07:57 -04:00
96 changed files with 1041 additions and 1661 deletions
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -36,10 +36,16 @@ 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="">
+    <wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
      <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="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
+          <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
+          <wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
        </div>

        <div id="docs-toolbar" class="wa-cluster wa-gap-xs">
          {# Desktop selectors #}
-          <div class="only-desktop wa-cluster wa-gap-xs">
+          <div class="wa-desktop-only 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="only-desktop">/</kbd>
+            <kbd slot="suffix" class="wa-desktop-only">/</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/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.
+    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.
  </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 }}" hoist>
+              <wa-tooltip for="gray-undertone-{{ h }}">
                {{ 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="{{ page.url }}../remix.css" rel="stylesheet">
-<script src="{{ page.url }}../remix.js" type="module"></script>
+<link href="/docs/themes/remix.css" rel="stylesheet">
+<script src="/docs/themes/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" hoist></wa-copy-button>`;
+        <wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
    });

    return doc.toString();
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -1,34 +1,5 @@
-let initialPageLoadComplete = document.readyState === 'complete';
-
-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;
-  }
-}
+import { domChange } from './util/dom-change.js';
+export { domChange };

 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
@@ -0,0 +1,37 @@
+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,13 +608,6 @@ 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 hoist>
+  <wa-dropdown>
    <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" hoist>
+  <wa-dropdown placement="bottom-end">
    <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,6 +3,7 @@ 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,38 +180,3 @@ 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,13 +17,93 @@ 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/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.
+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.

 ```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.
@@ -561,4 +641,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,75 +468,20 @@ 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. 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.
+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.
+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>
+    <wa-popup placement="top" flip active boundary="scroll">
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -592,7 +537,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>
+    <wa-popup placement="top" flip flip-fallback-placements="right bottom" flip-fallback-strategy="initial" active boundary="scroll">
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -626,14 +571,18 @@ 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 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`.
+When a popup is longer than its anchor, it risks overflowing.
+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>
+    <wa-popup placement="top" shift shift-padding="10" active boundary="scroll">
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
@@ -676,7 +625,11 @@ 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 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.
+Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from overflowing.
+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.

@@ -685,7 +638,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>
+    <wa-popup placement="top" auto-size="both" auto-size-padding="10" active boundary="scroll">
      <span slot="anchor"></span>
      <div class="box"></div>
    </wa-popup>
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -425,11 +425,3 @@ 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,25 +152,3 @@ 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,6 +3,7 @@ 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/installation/#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/#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/installation/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/installation/#cherry-picking).
+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 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,6 +2,7 @@
 title: Action Panel
 description: 'Help users complete tasks efficiently with quick access to key actions.'
 icon: action-panel
+isPro: true
 ---

 ## Simple
@@ -25,7 +26,7 @@ icon: action-panel
      <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">New Query</wa-button>
+    <wa-button variant="brand" size="small">New Query</wa-button>
  </div>
 </wa-card>
 ```
@@ -46,14 +47,17 @@ icon: action-panel

 ## 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-0">
+      <div class="wa-stack wa-gap-2xs">
        <span class="wa-heading-s">Super Dog</span>
-        <span class="wa-caption-m">Online</span>
+        <div class="wa-caption-m wa-cluster wa-gap-xs">
+          <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,6 +1,7 @@
 ---
 title: Activity Log
 description: 'Track and organize recent user actions or events.'
+
 ---

 ## Simple
@@ -103,7 +104,7 @@ description: 'Track and organize recent user actions or events.'

 ```html {.example}
 <wa-card style="max-width: 70ch; margin: auto">
-  <h3 class="wa-heading-l">Monthly Activity</h3>
+  <h3 class="wa-heading-m">Monthly Activity</h3>
  <div class="wa-stack">
    <wa-details>
      <span class="wa-heading-m" slot="summary">
@@ -111,7 +112,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-xl)" name="envelope" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -124,7 +125,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-xl)" name="phone" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -143,7 +144,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-xl)" name="video" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -156,7 +157,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-xl)" name="calendar" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -175,7 +176,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-xl)" family="brands" name="intercom" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -188,7 +189,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-xl)" name="list-check" fixed-width></wa-icon>
+          <wa-icon style="font-size: var(--wa-font-size-l)" 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>
@@ -203,4 +204,133 @@ 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,6 +1,7 @@
 ---
 title: Comments
 description: 'Enable users to engage in discussions, provide feedback, or record their thoughts.'
+isPro: true
 ---

 ## Card with Header & Footer
@@ -13,11 +14,11 @@ description: 'Enable users to engage in discussions, provide feedback, or record
    </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">
+      <wa-button appearance="filled" size="small">
        <wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
        Attach a file
      </wa-button>
-      <wa-button variant="brand">Comment</wa-button>
+      <wa-button variant="brand" size="small">Comment</wa-button>
    </div>
  </wa-card>
 </form>
@@ -91,7 +92,7 @@ description: 'Enable users to engage in discussions, provide feedback, or record
        <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>
@@ -107,9 +108,9 @@ description: 'Enable users to engage in discussions, provide feedback, or record
  <div class="wa-stack">
    <div class="wa-flank" style="--flank-size: 3rem">
      <div class="wa-frame:portrait wa-border-radius-s">
-        <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" 
-          alt="" 
+        <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"
+          alt="the cover image for the film"
        />
      </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,40 +1,62 @@
 ---
 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">
+  <div class="wa-grid wa-gap-3xl" style="--min-column-size: 24ch;">
    <div class="wa-stack">
      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon name="sack-dollar"></wa-icon>
+          <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>
-      <div class="wa-heading-2xl">$400,000</div>
+      <wa-format-number class="wa-heading-xl" type="currency" currency="USD" value="175000000" lang="en-US"></wa-format-number>
+
    </div>
    <div class="wa-stack">
      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon name="credit-card"></wa-icon>
+          <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>
-      <div class="wa-heading-2xl">$400,000</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>
    <div class="wa-stack">
      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon name="seedling"></wa-icon>
+          <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>
-      <div class="wa-heading-2xl">$400,000</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>
    <div class="wa-stack">
      <div class="wa-split">
-        <span>Revenue</span>
-        <span>+4.75%</span>
+        <div class="wa-cluster wa-gap-xs">
+          <wa-icon name="landmark"></wa-icon>
+          <span>Mortgages & Loans</span>
+        </div>
      </div>
-      <div class="wa-heading-2xl">$400,000</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>
  </div>
 </wa-card>
@@ -149,4 +171,4 @@ description: 'Convey insights, metrics, and aggregate data at a glance.'
    </article>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/app/description-list.md
+++ b/docs/docs/patterns/app/description-list.md
@@ -1,6 +1,7 @@
 ---
 title: Description List
 description: 'Help users digest detailed information in a structured, easy-to-scan format.'
+isPro: true
 ---

 ## Left Aligned
@@ -249,4 +250,4 @@ description: 'Help users digest detailed information in a structured, easy-to-sc
    </a>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/app/empty-state.md
+++ b/docs/docs/patterns/app/empty-state.md
@@ -1,6 +1,7 @@
 ---
 title: Empty State
 description: 'Guide users with helpful prompts and visuals when no content is available.'
+isPro: true
 ---

 ## Simple
@@ -21,7 +22,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av

 ```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" style="font-size: var(--wa-font-size-3xl)"></wa-icon>
+  <wa-icon name="ufo-beam" class="wa-caption-l" family="sharp" 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>
@@ -38,7 +39,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
    <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">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-yellow-90);color: var(--wa-color-yellow-40);">
          <wa-icon slot="icon" name="note-sticky"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -51,7 +52,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-red-90);color: var(--wa-color-red-40);">
          <wa-icon slot="icon" name="list-check"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -64,7 +65,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        </div>
      </a>
      <a href=""class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-purple-90);color: var(--wa-color-purple-40);">
          <wa-icon slot="icon" name="table-cells"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -77,7 +78,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-orange-90);color: var(--wa-color-orange-40);">
          <wa-icon slot="icon" name="presentation-screen"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -90,7 +91,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-green-90);color: var(--wa-color-green-40);">
          <wa-icon slot="icon" name="pen-field"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -103,7 +104,7 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        </div>
      </a>
      <a href="" class="wa-flank wa-align-items-start wa-link-plain">
-        <wa-avatar shape="rounded">
+        <wa-avatar shape="rounded" style="--background-color: var(--wa-color-blue-90);color: var(--wa-color-blue-40);">
          <wa-icon slot="icon" name="image"></wa-icon>
        </wa-avatar>
        <div class="wa-stack wa-gap-2xs">
@@ -125,29 +126,28 @@ description: 'Guide users with helpful prompts and visuals when no content is av
  </div>
 </wa-card>
 ```
-## Add people 
-```html{.example}
+## Add people
+```html {.example}
 <wa-card style="max-width: 60ch; margin: 0 auto;">
-  <div class="wa-stack">
-    <wa-icon></wa-icon>
-    <h1>Add team members</h1>
-    <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">
+  <div class="wa-stack wa-gap-xs">
+    <h3 class="wa-heading-m">Add team members</h3>
+    <p>This project is awful lonely. Invite some team members to liven up the joint.</p>
+    <div class="wa-flank:end wa-gap-xs">
      <wa-input></wa-input><wa-button>Invite</wa-button>
    </div>
    <div class="wa-stack">
-      <span>Team members previously added to projects</span>
+      <em class="wa-caption-l">Team members previously added to projects</em>
      <wa-divider></wa-divider>
      <section>
        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
+          <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-split">
          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
+            <span class="wa-heading-s">Earl Upton</span>
+            <span class="wa-caption-m">DevOps</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            <wa-icon name="user-plus" slot="prefix"></wa-icon>
            Invite
          </wa-button>
        </div>
@@ -156,14 +156,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
      </section>
      <section>
        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
+          <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>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
+            <span class="wa-heading-s">Steamboat Willie</span>
+            <span class="wa-caption-m">Captain</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            <wa-icon name="user-plus" slot="prefix"></wa-icon>
            Invite
          </wa-button>
        </div>
@@ -172,14 +172,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
      </section>
      <section>
        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
+          <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>
        <div class="wa-split">
          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
+            <span class="wa-heading-s">Melissa Eckers</span>
+            <span class="wa-caption-m">Cloud Engineer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            <wa-icon name="user-plus" slot="prefix"></wa-icon>
            Invite
          </wa-button>
        </div>
@@ -187,14 +187,14 @@ description: 'Guide users with helpful prompts and visuals when no content is av
        <wa-divider></wa-divider>
      </section><section>
        <div class="wa-flank">
-          <wa-avatar></wa-avatar>
+          <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-split">
          <div class="wa-stack wa-gap-0">
-            <span>lindsey Walton</span>
-            <span>Front end Developer</span>
+            <span class="wa-heading-s">Devin Shears</span>
+            <span class="wa-caption-m">UX Writer</span>
          </div>
          <wa-button appearance="plain">
-            <wa-icon name="plus" slot="prefix"></wa-icon>  
+            <wa-icon name="user-plus" slot="prefix"></wa-icon>
            Invite
          </wa-button>
        </div>
--- a/docs/docs/patterns/app/faq.md
+++ b/docs/docs/patterns/app/faq.md
@@ -1,6 +1,7 @@
 ---
 title: FAQ
 description: 'Empower users to learn more with a structured list of questions and answers.'
+isPro: true
 ---

 ## With Flanked Heading & Description
@@ -74,7 +75,7 @@ description: 'Empower users to learn more with a structured list of questions an
 </div>
 ```

-## 3 Column
+## Multiple Columns
 ```html{.example}
 <div>

@@ -86,7 +87,7 @@ description: 'Empower users to learn more with a structured list of questions an
      <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>
@@ -103,16 +104,16 @@ description: 'Empower users to learn more with a structured list of questions an
        </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
@@ -1,287 +0,0 @@
---
-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,6 +1,7 @@
 ---
 title: Grid List
 description: 'Improve browsing and selection by organizing data in a structured grid layout.'
+isPro: true
 ---

 ## Cards with Footer Actions
@@ -130,17 +131,17 @@ description: 'Improve browsing and selection by organizing data in a structured
 </div>
 ```

-## Cards with Footer Actions
+## Cards with Footer Actions & Large Image

 ```html {.example}
 <div class="wa-grid" style="--min-column-size: 29ch;">
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
      <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">Product Designer</p>
+        <p class="wa-caption-l">DevOps</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -154,12 +155,12 @@ description: 'Improve browsing and selection by organizing data in a structured
    </div>
  </wa-card>
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
      <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" />
+        <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" />
         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
+        <h2 class="wa-heading-m">Kaitlin Moore</h2>
+        <p class="wa-caption-l">Systems Engineer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -173,12 +174,12 @@ description: 'Improve browsing and selection by organizing data in a structured
    </div>
  </wa-card>
  <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
      <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" />
+        <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" />
         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
+        <h2 class="wa-heading-m">Nessa Riley</h2>
+        <p class="wa-caption-l">Cloud Engineer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -192,12 +193,12 @@ description: 'Improve browsing and selection by organizing data in a structured
    </div>
  </wa-card>
 <wa-card with-footer>
-    <div class="wa-stack wa-align-items-center">
+    <div class="wa-stack wa-align-items-center wa-gap-xs">
      <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" />
+        <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" />
         </div>
-        <h2 class="wa-heading-m">Scott Summers</h2>
-        <p class="wa-caption-l">Product Designer</p>
+        <h2 class="wa-heading-m">Veronica Staley</h2>
+        <p class="wa-caption-l">Machine Learning Engineer</p>
    </div>
    <div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
      <wa-button appearance="outlined">
@@ -216,81 +217,81 @@ description: 'Improve browsing and selection by organizing data in a structured
 ```html {.example}
 <div class="wa-grid">
  <article class="wa-stack">
-    <div class="wa-frame">
+    <div class="wa-frame wa-border-radius-l">
      <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">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Jeff Hanks</span>
+      <span>Product Designer</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <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 class="wa-frame wa-border-radius-l">
+      <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" />
    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Allen Bryant</span>
+      <span>Staff Engineer</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <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 class="wa-frame wa-border-radius-l">
+      <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" />
    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Mariah Greene</span>
+      <span>DevOps</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <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 class="wa-frame wa-border-radius-l">
+      <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" />
    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Beverly Winslow</span>
+      <span>Design Systems Lead</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <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 class="wa-frame wa-border-radius-l">
+      <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" />
    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Eric Masterson</span>
+      <span>Copy Writer</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
  <article class="wa-stack">
-    <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 class="wa-frame wa-border-radius-l">
+      <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" />
    </div>
-    <div class="wa-stack">
-      <span>Lindsay Walton</span>
-      <span>Developer</span>
+    <div class="wa-stack wa-gap-3xs">
+      <span>Stephen Coffee</span>
+      <span>Visual Designer</span>
    </div>
-    <div class="wa-cluster">
-      <wa-icon-button name="bluesky" family="brands"></wa-icon-button>
-      <wa-icon-button name="dribbble" family="brands"></wa-icon-button>
+    <div class="wa-cluster wa-gap-3xs">
+      <wa-icon-button name="bluesky" family="brands" label="link to Blusky profile"></wa-icon-button>
+      <wa-icon-button name="dribbble" family="brands" label="link to Dribbble profile"></wa-icon-button>
    </div>
  </article>
 </div>
@@ -397,8 +398,8 @@ description: 'Improve browsing and selection by organizing data in a structured
    <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">
@@ -418,20 +419,20 @@ description: 'Improve browsing and selection by organizing data in a structured
                <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-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
+              <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>
          </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">
@@ -451,8 +452,8 @@ description: 'Improve browsing and selection by organizing data in a structured
                <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-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
-  label="Avatar of a gray tabby kitten looking down"></wa-avatar>
+              <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>
          </wa-card>
          <wa-card>
@@ -474,14 +475,14 @@ description: 'Improve browsing and selection by organizing data in a structured
                <wa-badge appearance="outlined" pill>Design</wa-badge>  <wa-badge variant="danger" appearance="outlined" pill>Priority: High</wa-badge>
                </div>
              </div>
-              <wa-avatar></wa-avatar>
+              <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>
          </wa-card>
      <wa-button appearance="plain">
        <wa-icon name="plus"></wa-icon>
        Add Task
        </wa-button>
-      
+
    </div>

    <div class="wa-stack">
@@ -508,18 +509,17 @@ description: 'Improve browsing and selection by organizing data in a structured
              <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,4 +5,5 @@ 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,6 +1,7 @@
 ---
 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,6 +1,7 @@
 ---
 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,6 +1,7 @@
 ---
 title: Permissions
 description: 'Permission patterns provide or restrict access to users.'
+isPro: true
 ---

 ## With Form Inputs
@@ -118,7 +119,7 @@ description: 'Permission patterns provide or restrict access to users.'
    <wa-button size="small" variant="brand" pill>Generate</wa-button>
  </div>
  </div>
-  
+
 </wa-card>
 ```

@@ -170,7 +171,7 @@ description: 'Permission patterns provide or restrict access to users.'
          <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>
@@ -222,7 +223,7 @@ description: 'Permission patterns provide or restrict access to users.'
  </tbody>
 </table>
  </wa-tab-panel>
- 
+
 </wa-tab-group>
 </div>
 ```
--- a/docs/docs/patterns/app/pricing.md
+++ b/docs/docs/patterns/app/pricing.md
@@ -1,6 +1,7 @@
 ---
 title: Pricing
 description: 'Help users make informed purchasing decisions with clear, structured pricing.'
+isPro: true
 ---

 ## Three Tiers
@@ -164,4 +165,4 @@ description: 'Help users make informed purchasing decisions with clear, structur
    </wa-callout>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/blog.md
+++ b/docs/docs/patterns/blog.md
@@ -2,6 +2,7 @@
 title: Blog
 description: TODO
 unlisted: true
+isPro: true
 ---

 TODO Page Description
@@ -367,4 +368,4 @@ TODO Page Description
  }

 </style>
-```
+```
--- a/docs/docs/patterns/business.md
+++ b/docs/docs/patterns/business.md
@@ -2,8 +2,9 @@
 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,6 +2,7 @@
 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
@@ -80,4 +81,4 @@ icon: checkbox
  </div>
  <div class="wa-placeholder"></div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/category-preview.md
+++ b/docs/docs/patterns/ecommerce/category-preview.md
@@ -2,6 +2,7 @@
 title: Category Preview
 description: 'Help shoppers discover your product offerings with showcases of product categories.'
 icon: preview
+isPro: true
 ---

 ## Split with Image Grid
@@ -159,4 +160,4 @@ icon: preview
  </div>
 </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/checkout-form.md
+++ b/docs/docs/patterns/ecommerce/checkout-form.md
@@ -1,6 +1,7 @@
 ---
 title: Checkout Form
 description: 'Let shoppers checkout with ease with streamlined forms to capture shipping and payment info.'
+isPro: true
 ---


@@ -241,4 +242,4 @@ description: 'Let shoppers checkout with ease with streamlined forms to capture
    </div>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/incentives.md
+++ b/docs/docs/patterns/ecommerce/incentives.md
@@ -1,6 +1,7 @@
 ---
 title: Incentives
 description: 'Encourage shoppers to buy your products with value propositions, discounts, and promotions.'
+isPro: true
 ---

 ## 3 Column
@@ -9,29 +10,29 @@ description: 'Encourage shoppers to buy your products with value propositions, d
 <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">Get the Best Instruction from our Educators.</span>
-      <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>
+      <span class="wa-heading-xl">Unlock your Superpower</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>
    </div>
    <div class="wa-frame wa-border-radius-l">
-      <img src="https://uploads.webawesome.com/online-learning.jpg" />
+      <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" />
    </div>

  </div>
  <div class="wa-grid">
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="stopwatch" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Learn at your Speed</span>
-      <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>
+      <wa-icon name="briefcase" variant="light" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Career Opportunities</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>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="chart-line" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Track Progress</span>
-      <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>
+      <wa-icon name="laptop-code" variant="light" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Flexibility of Online Learning</span>
+      <p class="wa-caption-m">Perfect for people balancing school, work, or other responsibilities—no need to attend in-person classes</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="people-group" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Active Community</span>
-      <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>
+      <wa-icon name="palette" variant="light" style="font-size: 32px;"></wa-icon>
+      <span class="wa-heading-s">Creative & Practical Skillset</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>
    </div>
  </div>
 </div>
@@ -39,7 +40,7 @@ description: 'Encourage shoppers to buy your products with value propositions, d
 ## 2 Column with Cards

 ```html{.example}
-<div class="wa-grid" style="--min-column-size: 41ch;">
+<div class="wa-grid" style="--min-column-size: 24ch;">
  <wa-card>
    <div class="wa-flank">
    <div>
@@ -97,27 +98,27 @@ description: 'Encourage shoppers to buy your products with value propositions, d

 ```html{.example}
 <div>
-<div class="wa-grid">
+<div class="wa-grid" style="--min-column-size: 16ch;">
  <div class="wa-stack wa-gap-xs">
-      <wa-icon name="magnifying-glass" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">SEO Consulting</span>
-      <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>
+      <wa-icon family="duotone" name="magnifying-glass" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <span class="wa-heading-s">In-Demand Skills</span>
+      <p class="wa-caption-m">Learn skills that lead to well-paying jobs, freelance work, or remote opportunities.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="chalkboard-user" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">In Person Training</span>
-      <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>
+      <wa-icon family="duotone" name="chalkboard-user" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <span class="wa-heading-s">Learn Anytime, Anywhere</span>
+      <p class="wa-caption-m">Flexible learning fits into any schedule—perfect for students, parents, or full-time workers.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="people-arrows" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">1 on 1 Sessions</span>
-      <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>
+      <wa-icon family="duotone" name="people-arrows" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <span class="wa-heading-s">Build and Launch Your Own Projects</span>
+      <p class="wa-caption-m">You’re not just learning theory—you’re creating real, functional websites and apps.</p>
    </div>
    <div class="wa-stack wa-gap-xs">
-      <wa-icon name="code" style="font-size: 32px;"></wa-icon>
-      <span class="wa-heading-s">Web Development</span>
-      <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>
+      <wa-icon family="duotone" name="code" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
+      <span class="wa-heading-s">Low-Cost Entry</span>
+      <p class="wa-caption-m">You don’t need a tech degree or expensive tools to get started</p>
    </div>
 </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/index.njk
+++ b/docs/docs/patterns/ecommerce/index.njk
@@ -4,4 +4,5 @@ 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,6 +1,7 @@
 ---
 title: Order History
 description: 'Empower your customers to view past purchases and track upcoming orders with comprehensive order histories.'
+isPro: true
 ---

 ## List
@@ -193,12 +194,14 @@ description: 'Empower your customers to view past purchases and track upcoming o
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-icon family="brands" name="amazon"></wa-icon>
+          <wa-avatar shape="rounded" label="Avatar with an image 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: 1rem;"></wa-progress-bar>
+          <wa-progress-bar value="75" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
@@ -210,16 +213,18 @@ description: 'Empower your customers to view past purchases and track upcoming o
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-icon family="brands" name="amazon"></wa-icon>
-          <span class="wa-heading-s">Amazon</span>
+          <wa-avatar shape="rounded" label="Avatar with an image icon">
+            <wa-icon slot="icon" family="sharp" variant="light" name="shirt"></wa-icon>
+          </wa-avatar>
+          <span class="wa-heading-s">T-shirt Depot</span>
        </div>
        <div class="wa-stack wa-gap-xs">
-          <span>Expected Tomorrow</span>
-          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+          <span>Out for Delivery</span>
+          <wa-progress-bar value="95" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <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" />
+        <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" />
      </div>
    </div>
  </wa-card>
@@ -227,16 +232,18 @@ description: 'Empower your customers to view past purchases and track upcoming o
    <div class="wa-flank:end">
      <div class="wa-stack">
        <div class="wa-cluster wa-gap-xs">
-          <wa-icon family="brands" name="amazon"></wa-icon>
-          <span class="wa-heading-s">Amazon</span>
+          <wa-avatar shape="rounded" label="Avatar with an image icon">
+            <wa-icon slot="icon"  variant="duotone" name="gamepad-modern"></wa-icon>
+          </wa-avatar>
+          <span class="wa-heading-s">Game Theory</span>
        </div>
        <div class="wa-stack wa-gap-xs">
-          <span>Expected Tomorrow</span>
-          <wa-progress-bar value="75" label="delivery progress" style="height: 1rem;"></wa-progress-bar>
+          <span>Shipping Soon</span>
+          <wa-progress-bar value="15" label="delivery progress" style="height: 0.5rem;"></wa-progress-bar>
        </div>
      </div>
      <div class="wa-frame wa-border-radius-m" style="max-width: 6rem;">
-        <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" />
+        <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" />
      </div>
    </div>
  </wa-card>
--- a/docs/docs/patterns/ecommerce/order-summary.md
+++ b/docs/docs/patterns/ecommerce/order-summary.md
@@ -1,6 +1,7 @@
 ---
 title: Order Summary
 description: 'Give shoppers confidence in their purchases with summaries of everything included in their order.'
+isPro: true
 ---

 ## Simple
@@ -291,4 +292,4 @@ description: 'Give shoppers confidence in their purchases with summaries of ever
    </div>
  </wa-callout>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-list.md
+++ b/docs/docs/patterns/ecommerce/product-list.md
@@ -1,6 +1,7 @@
 ---
 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
@@ -179,4 +180,4 @@ description: 'Let shoppers browse and compare products with detailed lists of th
    </a>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-overview.md
+++ b/docs/docs/patterns/ecommerce/product-overview.md
@@ -1,6 +1,7 @@
 ---
 title: Product Overview
 description: 'Showcase your products with overviews including images, ratings, features, options, and more.'
+isPro: true
 ---

 ## Split with Image
@@ -426,4 +427,4 @@ description: 'Showcase your products with overviews including images, ratings, f
      </ul>
  </div>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/product-preview.md
+++ b/docs/docs/patterns/ecommerce/product-preview.md
@@ -2,6 +2,7 @@
 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
@@ -157,4 +158,4 @@ icon: preview
    </div>
  </div>
 </wa-card>
-```
+```
--- a/docs/docs/patterns/ecommerce/review.md
+++ b/docs/docs/patterns/ecommerce/review.md
@@ -1,6 +1,7 @@
 ---
 title: Product Reviews
 description: 'Help shoppers make informed decisions with ratings, reviews, and testimonials from your customers.'
+isPro: true
 ---
 ## Multi column

@@ -11,13 +12,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
  <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>
-      <span class="wa-caption-m"><em>September 23rd, 2023</em></span>
+      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
    </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">Rating Title</span>
-      <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>
+      <span class="wa-heading-s">Solid treadmill for home workouts!</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>
    </div>
    </div>
  </div>
@@ -25,13 +26,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
  <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>
-      <span class="wa-caption-m"><em>May 5th, 2023</em></span>
+      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
    </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">Rating Title</span>
-      <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>
+      <span class="wa-heading-s">Good value, a few minor flaws</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>
    </div>
    </div>
  </div>
@@ -39,13 +40,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
  <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>
-      <span class="wa-caption-m"><em>March 3rd, 2023</em></span>
+      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
    </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">Rating Title</span>
-      <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>
+      <span class="wa-heading-s">Decent, but could use upgrades</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>
    </div>
    </div>
  </div>
@@ -53,13 +54,13 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
  <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>
-      <span class="wa-caption-m"><em>February 26th, 2023</em></span>
+      <wa-relative-time date="2020-07-15T09:17:00-04:00" class="wa-caption-m"></wa-relative-time>
    </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">Rating Title</span>
-      <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>
+      <span class="wa-heading-s">Perfect for small spaces</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>
    </div>
    </div>
  </div>
@@ -78,31 +79,31 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
          <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>
-          <span>63%</span>
+          <wa-format-number type="percent" value=".63"></wa-format-number>
        </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>
-          <span>17%</span>
+          <wa-format-number type="percent" value=".17"></wa-format-number>
        </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>
-          <span>15%</span>
+          <wa-format-number type="percent" value=".15"></wa-format-number>
        </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>
-          <span>3%</span>
+          <wa-format-number type="percent" value=".03"></wa-format-number>
        </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>
-          <span>2%</span>
+          <wa-format-number type="percent" value=".02"></wa-format-number>
        </span>
      </div>
    </div>
@@ -111,44 +112,44 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
        <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">Emily Selman</span>
+            <span class="wa-heading-s">Michelle Jasper</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <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>
+        <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>
      </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">Emily Selman</span>
+            <span class="wa-heading-s">Doug Michaels</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <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>
+        <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>
      </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">Emily Selman</span>
+            <span class="wa-heading-s">Stephanie Hurst</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <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>
+        <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>
      </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">Emily Selman</span>
+            <span class="wa-heading-s">Miles Rogers</span>
            <wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
          </div>
        </div>
-        <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>
+        <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>
      </div>
    </div>
  </div>
@@ -164,8 +165,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
      <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" style="color: var(--wa-color-success-fill-loud);"></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>
+      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -180,8 +181,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
      <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" style="color: var(--wa-color-success-fill-loud);"></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>
+      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -196,8 +197,8 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
      <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" style="color: var(--wa-color-success-fill-loud);"></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>
+      <wa-icon-button name="thumbs-up" label="I don't like this review"></wa-icon-button>
+      <wa-icon-button name="thumbs-down" label="I like this review"></wa-icon-button>
    </div>
    </div>
    <div>
@@ -208,4 +209,4 @@ description: 'Help shoppers make informed decisions with ratings, reviews, and t
  </div>
  <wa-divider></wa-divider>
 </div>
-```
+```
--- a/docs/docs/patterns/ecommerce/shopping-cart.md
+++ b/docs/docs/patterns/ecommerce/shopping-cart.md
@@ -1,6 +1,7 @@
 ---
 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
@@ -274,4 +275,4 @@ description: 'Give shoppers an overview of selected items with shopping carts th
    </wa-button>
  </div>
 </wa-drawer>
-```
+```
--- a/docs/docs/patterns/ecommerce/store-navigation.md
+++ b/docs/docs/patterns/ecommerce/store-navigation.md
@@ -2,6 +2,7 @@
 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
@@ -81,4 +82,4 @@ unlisted: true


 </style>
-```
+```
--- a/docs/docs/patterns/education.md
+++ b/docs/docs/patterns/education.md
@@ -2,8 +2,9 @@
 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,8 +2,9 @@
 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,6 +3,7 @@ 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">
@@ -21,7 +22,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/installation) 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/) 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
@@ -1,47 +0,0 @@
---
-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
@@ -1,87 +0,0 @@
---
-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
@@ -1,8 +0,0 @@
---
-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
@@ -1,3 +0,0 @@
-{
-  "tags": ["information"]
-}
--- a/docs/docs/patterns/information/login.md
+++ b/docs/docs/patterns/information/login.md
@@ -1,76 +0,0 @@
---
-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
@@ -1,110 +0,0 @@
---
-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
@@ -1,122 +0,0 @@
---
-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
@@ -1,198 +0,0 @@
---
-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
@@ -1,101 +0,0 @@
---
-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,8 +2,9 @@
 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,6 +2,7 @@
 title: News
 description: TODO
 unlisted: true
+isPro: true
 ---

 TODO Page Description
@@ -157,4 +158,4 @@ TODO Page Description
    }
  }
 </style>
-```
+```
--- a/docs/docs/patterns/non-profit.md
+++ b/docs/docs/patterns/non-profit.md
@@ -2,8 +2,9 @@
 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,5 +2,6 @@
  "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,8 +2,9 @@
 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,8 +2,9 @@
 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
@@ -0,0 +1,71 @@
+---
+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'),
-    css: codeSnippets.querySelector('code.language-css'),
+    html: codeSnippets?.querySelector('code.language-html'),
+    css: codeSnippets?.querySelector('code.language-css'),
  };

  data = {
@@ -73,11 +73,10 @@ function init() {

  Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());

-  return { selects, codeSnippets, data, computed, render };
+  globalThis.remixApp = { selects, codeSnippets, data, computed, render };
 }

-globalThis.remixApp = init();
-
+init();
 // Async load CSS for other themes *before* current theme stylesheet
 let themeStylesheet = document.querySelector('#theme-stylesheet');

@@ -151,12 +150,14 @@ 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', event => {
-  remixApp = init();
-});
+addEventListener('turbo:render', init);
--- a/docs/docs/tokens/focus.md
+++ b/docs/docs/tokens/focus.md
@@ -27,6 +27,7 @@ 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/installation" appearance="outlined" class="tile">
+      <wa-button href="/docs/" 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,12 +10,13 @@
      "license": "MIT",
      "dependencies": {
        "@ctrl/tinycolor": "^4.1.0",
-        "@floating-ui/dom": "^1.6.12",
+        "@floating-ui/dom": "^1.6.13",
        "@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",
@@ -1632,18 +1633,20 @@
      }
    },
    "node_modules/@floating-ui/dom": {
-      "version": "1.6.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
      "dependencies": {
        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.8"
+        "@floating-ui/utils": "^0.2.9"
      }
    },
    "node_modules/@floating-ui/utils": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
    },
    "node_modules/@github/catalyst": {
      "version": "1.6.0",
@@ -13085,6 +13088,12 @@
        "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,12 +68,13 @@
  },
  "dependencies": {
    "@ctrl/tinycolor": "^4.1.0",
-    "@floating-ui/dom": "^1.6.12",
+    "@floating-ui/dom": "^1.6.13",
    "@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,14 +1,6 @@
 :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);
@@ -16,6 +8,10 @@
  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,7 +17,6 @@ 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.
@@ -72,47 +71,45 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {

  render() {
    return html`
-      <div part="base" class="breadcrumb-item">
-        <span part="prefix" class="prefix">
-          <slot name="prefix"></slot>
-        </span>
+      <span part="prefix" class="prefix">
+        <slot name="prefix"></slot>
+      </span>

-        ${this.renderType === 'link'
-          ? html`
-              <a
-                part="label"
-                class="label label--link"
-                href="${this.href!}"
-                target="${ifDefined(this.target ? this.target : undefined)}"
-                rel=${ifDefined(this.target ? this.rel : undefined)}
-              >
-                <slot></slot>
-              </a>
-            `
-          : ''}
-        ${this.renderType === 'button'
-          ? html`
-              <button part="label" type="button" class="label label--button">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </button>
-            `
-          : ''}
-        ${this.renderType === 'dropdown'
-          ? html`
-              <div part="label" class="label label--dropdown">
-                <slot @slotchange=${this.handleSlotChange}></slot>
-              </div>
-            `
-          : ''}
+      ${this.renderType === 'link'
+        ? html`
+            <a
+              part="label"
+              class="label label--link"
+              href="${this.href!}"
+              target="${ifDefined(this.target ? this.target : undefined)}"
+              rel=${ifDefined(this.target ? this.rel : undefined)}
+            >
+              <slot></slot>
+            </a>
+          `
+        : ''}
+      ${this.renderType === 'button'
+        ? html`
+            <button part="label" type="button" class="label label--button">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </button>
+          `
+        : ''}
+      ${this.renderType === 'dropdown'
+        ? html`
+            <div part="label" class="label label--dropdown">
+              <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+          `
+        : ''}

-        <span part="suffix" class="suffix">
-          <slot name="suffix"></slot>
-        </span>
+      <span part="suffix" class="suffix">
+        <slot name="suffix"></slot>
+      </span>

-        <span part="separator" class="separator" aria-hidden="true">
-          <slot name="separator"></slot>
-        </span>
-      </div>
+      <span part="separator" class="separator" aria-hidden="true">
+        <slot name="separator"></slot>
+      </span>
    `;
  }
 }
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,11 +1,7 @@
 :host {
-  display: contents;
-  position: relative;
-}
+  --display: inline-flex;

-:where([part~='base']) {
-  all: inherit;
-  display: inline-flex;
+  position: relative;
 }

 /*
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -7,6 +7,7 @@ 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';
@@ -39,6 +40,7 @@ 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.
@@ -51,7 +53,7 @@ import styles from './button.css';
 */
@customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [passthroughStyles, 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,12 +210,6 @@ 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;

@@ -1097,7 +1091,6 @@ 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,13 +97,6 @@ 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;
@@ -220,7 +213,6 @@ 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,13 +1,10 @@
 :host {
  --show-duration: 200ms;
  --hide-duration: 200ms;
-
-  display: contents !important;
+  --display: block;
 }

 details {
-  all: inherit;
-  display: block;
  overflow-anchor: none;
 }

--- a/src/components/details/details.ts
+++ b/src/components/details/details.ts
@@ -9,6 +9,7 @@ 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';
@@ -43,10 +44,11 @@ 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 = [appearanceStyles, nativeStyles, styles];
+  static shadowStyle = [passthroughStyles, 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,12 +95,6 @@ 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.
   */
@@ -415,7 +409,6 @@ 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({ reflect: true }) name?: string;
+  @property({ cssProperty: '--wa-icon-name' }) 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({ reflect: true }) family: string;
+  @property({ cssProperty: '--wa-icon-family' }) 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({ reflect: true }) variant: string;
+  @property({ cssProperty: '--wa-icon-variant' }) variant: string;

  /** Draws the icon in a fixed-width both. */
  @property({ attribute: 'fixed-width', type: Boolean, reflect: true }) fixedWidth: false;
@@ -80,14 +80,16 @@ export default class WaIcon extends WebAwesomeElement {
  @property() label = '';

  /** The name of a registered custom icon library. */
-  @property({ reflect: true }) library = 'default';
+  @property({ cssProperty: '--wa-icon-library', default: 'default' }) library = 'default';

  connectedCallback() {
    super.connectedCallback();
+
    watchIcon(this);
  }

-  firstUpdated() {
+  firstUpdated(changedProperties: PropertyValues<this>) {
+    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,9 +6,6 @@

  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,7 +23,6 @@ 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.
@@ -40,19 +39,18 @@ 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.base.getBoundingClientRect();
+    const { width } = this.getBoundingClientRect();
    const isRtl = this.localize.dir() === 'rtl';

    event.preventDefault();

-    drag(this.base, {
+    drag(this, {
      onMove: x => {
        this.position = parseFloat(clamp((x / width) * 100, 0, 100).toFixed(2));
        if (isRtl) this.position = 100 - this.position;
@@ -98,46 +96,45 @@ export default class WaImageComparer extends WebAwesomeElement {
    const isRtl = this.hasUpdated ? this.localize.dir() === 'rtl' : this.dir === 'rtl';

    return html`
-      <div part="base" id="image-comparer" class="image-comparer" @keydown=${this.handleKeyDown}>
-        <div class="image">
-          <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 class="image">
+        <div part="before" class="before">
+          <slot name="before"></slot>
        </div>

        <div
-          part="divider"
-          class="divider"
+          part="after"
+          class="after"
          style=${styleMap({
-            left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
+            clipPath: isRtl ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`,
          })}
-          @mousedown=${this.handleDrag}
-          @touchstart=${this.handleDrag}
        >
-          <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>
+          <slot name="after"></slot>
+        </div>
+      </div>
+
+      <div
+        part="divider"
+        class="divider"
+        style=${styleMap({
+          left: isRtl ? `${100 - this.position}%` : `${this.position}%`,
+        })}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <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,7 +275,6 @@ 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,6 +19,19 @@
  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,4 +1,14 @@
-import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
+import {
+  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';
@@ -23,6 +33,8 @@ 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
@@ -97,11 +109,8 @@ export default class WaPopup extends WebAwesomeElement {
    | 'left-start'
    | 'left-end' = 'top';

-  /**
-   * 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';
+  /** Which bounding box to use for flipping, shifting, and auto-sizing? */
+  @property() boundary: 'viewport' | 'scroll' = 'viewport';

  /** The distance in pixels from which to offset the panel away from its anchor. */
  @property({ type: Number }) distance = 0;
@@ -281,6 +290,8 @@ export default class WaPopup extends WebAwesomeElement {
      return;
    }

+    this.popup.showPopover?.();
+
    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
      this.reposition();
    });
@@ -288,6 +299,8 @@ 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;
@@ -334,11 +347,21 @@ 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,
+          boundary: this.flipBoundary || defaultBoundary,
          // @ts-expect-error - We're converting a string attribute to an array here
          fallbackPlacements: this.flipFallbackPlacements,
          fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',
@@ -351,7 +374,7 @@ export default class WaPopup extends WebAwesomeElement {
    if (this.shift) {
      middleware.push(
        shift({
-          boundary: this.shiftBoundary,
+          boundary: this.shiftBoundary || defaultBoundary,
          padding: this.shiftPadding,
        }),
      );
@@ -361,7 +384,7 @@ export default class WaPopup extends WebAwesomeElement {
    if (this.autoSize) {
      middleware.push(
        size({
-          boundary: this.autoSizeBoundary,
+          boundary: this.autoSizeBoundary || defaultBoundary,
          padding: this.autoSizePadding,
          apply: ({ availableWidth, availableHeight }) => {
            if (this.autoSize === 'vertical' || this.autoSize === 'both') {
@@ -399,15 +422,14 @@ export default class WaPopup extends WebAwesomeElement {
    //
    // More info: https://github.com/shoelace-style/shoelace/issues/1135
    //
-    const getOffsetParent =
-      this.strategy === 'absolute'
-        ? (element: Element) => platform.getOffsetParent(element, offsetParent)
-        : platform.getOffsetParent;
+    const getOffsetParent = SUPPORTS_POPOVER
+      ? (element: Element) => platform.getOffsetParent(element, offsetParent)
+      : platform.getOffsetParent;

    computePosition(this.anchorEl, this.popup, {
      placement: this.placement,
      middleware,
-      strategy: this.strategy,
+      strategy: SUPPORTS_POPOVER ? 'absolute' : 'fixed',
      platform: {
        ...platform,
        getOffsetParent,
@@ -563,11 +585,12 @@ export default class WaPopup extends WebAwesomeElement {
      ></span>

      <div
+        popover="manual"
        part="popup"
        class=${classMap({
          popup: true,
          'popup--active': this.active,
-          'popup--fixed': this.strategy === 'fixed',
+          'popup--fixed': !SUPPORTS_POPOVER,
          '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,8 +9,6 @@
 }

 .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,6 +4,7 @@ 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';

@@ -20,10 +21,11 @@ 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 = styles;
+  static shadowStyle = [passthroughStyles, 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,10 +1,5 @@
 :host {
-  display: contents;
-}
-
-:where([part~='base']) {
-  all: inherit;
-  display: inline-flex;
+  --display: inline-flex;
 }

 .prefix,
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -6,6 +6,7 @@ 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';
@@ -45,10 +46,11 @@ 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 = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [passthroughStyles, 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.orientation === 'vertical',
+            'wa-button-group-vertical': this.hasRadioButtons && this.orientation === 'vertical',
          })}
          @slotchange=${this.syncRadioElements}
        ></slot>
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -229,12 +229,6 @@ 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';

@@ -891,7 +885,6 @@ 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,13 +92,6 @@ 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;
@@ -290,7 +283,7 @@ export default class WaTooltip extends WebAwesomeElement {
    this.anchor = newAnchor;
  }

-  @watch(['distance', 'hoist', 'placement', 'skidding'])
+  @watch(['distance', 'placement', 'skidding'])
  async handleOptionsChange() {
    if (this.hasUpdated) {
      await this.updateComplete;
@@ -340,7 +333,6 @@ 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,7 +1,9 @@
 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' {
@@ -11,6 +13,11 @@ declare module 'lit' {
     */
    default?: any;
    initial?: any;
+
+    /**
+     * Indicates whether the property should reflect to a CSS custom property.
+     */
+    cssProperty?: string;
  }
 }

@@ -72,6 +79,99 @@ 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(
@@ -115,6 +215,50 @@ 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);
@@ -230,6 +374,11 @@ 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) {
@@ -256,8 +405,18 @@ 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
@@ -0,0 +1,25 @@
+/**
+ * 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
Lea Verou	9328feed19	[image-comparer] Remove `base` part Had to move the keydown listener to the divider, but that seems like a good change anyway since if the content is interactive (such as our own theme previews) we don't really want to be listening to key presses on it, we only really want to be listening to key presses on the divider, which is the actual focusable part.	2025-04-23 12:44:33 -04:00
Lea Verou	2542354d5c	[breadcrumb-item] Drop `base` part, move styling to host	2025-04-23 12:33:51 -04:00
Lea Verou	cfc3f181a3	Fix broken demo, improve passthrough CSS (#879 ) Fixes several issues for components using the `display: contents` technique: - Introduce `--display` CSS property to make it possible to override internal display value of base part. - Ensure `display: contents` is always applied with `!important` to avoid rendering glitches like the one here - Ensure non-inherited custom properties are also inherited - Ensure the `hidden` attribute still works.	2025-04-23 11:52:23 -04:00
Konnor Rogers	7545f04c46	remove all references to /docs/installation (#872 )	2025-04-21 17:01:09 -04:00
Lea Verou	38bd6528fe	Only apply `wa-button-group-vertical` class when `<wa-radio-group>` is a radio button group, fixes #870	2025-04-15 18:07:57 -04:00
Lea Verou	2202ea9642	CSS custom properties to set certain component attributes (#447 )	2025-04-15 17:56:38 -04:00
Konnor Rogers	58fbcede51	update patterns to isPro (#869 )	2025-04-14 14:59:27 -04:00
Lea Verou	971200cc88	Move `domChange()` to separate module (#868 )	2025-04-14 12:52:00 -04:00
Konnor Rogers	b75d3b615c	fix login media query and leaking variables with Turbo (#867 ) * fix media queries to use wa-desktop-only * fix errors in remix.js when changing pages * prettier	2025-04-14 11:11:08 -04:00
Kelsey Jackson	9d1c47449e	Kj/first pattern launch (#861 ) * dividing up e-commerce patterns * started invoice table * building out the filter * Initial Commit * switching machines * switching machines * started split image pattern: * commiting to merge in next * commiting to switch machines * upated the product detail patterns * updated product list patterns * updated some patterns * filter work * added utilities to order history * added utilities to order-summary * updated width of container * switching machines * switching machines * fixing conflicts * editing descriptions * updated descriptions * adding some polish * more filter work * updated prouct preview * Revisions to "Product Features" * "Category Filters" revisions + `wa-placeholder` utility * cleaned up product list * tweaked product overview * tweaked order history * tweak category preview * "Checkout Form" revisions * Re-add `navigation` to "Product Features" carousel * cleaned up shopping cart * tweaked order summary * Add missing file extension * Fix typo in file name * Revert checkout form changes in attempt to improve diff * Reimplement checkout form revisions * cleaned up checkout form * Add "What's a Pattern?" and "Using Patterns" to index * Update category descriptions and headings * Add docs layout for patterns with stylesheet * tweaked customer review * Add checkout form example * a little more polish * more tweaks * switching branches to merge * created e-commerce index * unlisted links * updtated content * updated content for category preview * updated order history * committing to bring branches up to next * inital commit * Reorganize app patterns into separate pages * switching machines * Add link style utilities * Refactor product list patterns * more polish * Refactor product overview patterns * switching machines * Refactor shopping cart patterns * committing to pull down changes * updated product preview * updated image * updated incentives * Clean up utility usage and code formatting for category previews * started updating with style utilities * Clean up utilities and formatting, replace placeholder text in order history * updated incentive images * updated reviews * added review variant * more polish * some heavy duty updates * removed store navigation * switching machines : * Clean up utility usage and code formatting for order summaries * Clean up utility usage and code formatting for product previews * big switchover * removed old file * working on sidebar * updated sidebar * created info category * splitting up the old blog page * a little cleanup and adding detail * got three done * updated social share * Quick formatting adjustment * initial paywalls * 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> * some newsletter signups * added login patterns * reworked feeds' * a few more * added a few more * add more app patterns * 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 * switching machines * catching up with next * added permissions pattern * switching machines * added post articles * having local browset issues * a few more app patterns * took out info patterns * spiffed up the action panels * gave the action panels a once over * added content to data display * updated a few patterns * clean up a few e-commerce patterns * added time componen to reviews --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Lea Verou <lea@verou.me> Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>	2025-04-14 11:10:54 -04:00
Lea Verou	003fd28cb0	Mark code-demo and viewport-demo as pro	2025-04-10 10:57:06 -05:00
Lea Verou	2f300d8930	[Popup] Use viewport as default boundary for `flip` too (#865 )	2025-04-10 10:52:15 -05:00
Lea Verou	f13deb87bb	Drop `hoist` from public API, use Popover API where supported (#351 ) * First stab at using the Popover API for PE * fix popup * First stab at using the Popover API for PE * fix popup * Prettier * Fix TS error * Remove workaround * Default to `strategy = fixed` if Popover API is not supported * Clear out default UA styles for popovers * Kill `hoist` with fire 🔥 * Refactor * Update `@floating-ui/dom` * Fix flipping and shofting * Fix autosize * Use `defaultBoundary` for `flip` too That way we get the previous behavior for it. * Remove `strategy`, just use `SUPPORTS_POPOVER` check where relevant * Remove uses of `strategy` * Use viewport as the default boundary for shifting and autosizing and add `boundary=scroll` to override --------- Co-authored-by: konnorrogers <konnor5456@gmail.com>	2025-04-09 16:47:40 -05:00
Konnor Rogers	deb9fd70b3	fix pass through copying (#860 ) * fix pass through copying * prettier	2025-04-04 13:46:41 -04:00