From 6d4c8e5942721a317c3dab746d652f06f8fdcdc2 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 13:21:27 -0500
Subject: [PATCH 01/41] Simplify Classic theme using the new CSS files

---
 src/styles/themes/classic.css            | 277 ++++++++++++-----------
 src/styles/themes/classic_components.css | 154 -------------
 2 files changed, 145 insertions(+), 286 deletions(-)
 delete mode 100644 src/styles/themes/classic_components.css

diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 76534caf9..d0eba8210 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -1,4 +1,8 @@
-@import 'classic_components.css';
+@import url('default/typography.css');
+@import url('default/space.css');
+@import url('default/outlines.css');
+@import url('default/shadows.css');
+@import url('default/groups.css');
 
 :root,
 :host,
@@ -203,123 +207,21 @@
   --wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
   --wa-font-family-longform: Georgia, 'Times New Roman', serif;
 
-  /* The default type scale is roughly based on the Major Second scale (x1.125),
-   * with each value rounded to the nearest whole pixel based on a 16px root font size.
-   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
-   * A multiplier is provided to uniformly increase or decrease all font sizes. */
-  --wa-font-size-scale: 1;
-  --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
-  --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
-  --wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
-  --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
-  --wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
-  --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
-  --wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
-  --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
-  --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
-
-  --wa-font-weight-light: 300;
-  --wa-font-weight-normal: 400;
-  --wa-font-weight-semibold: 500;
-  --wa-font-weight-bold: 600;
-
-  --wa-font-weight-body: var(--wa-font-weight-normal);
-  --wa-font-weight-heading: var(--wa-font-weight-semibold);
-  --wa-font-weight-action: var(--wa-font-weight-semibold);
-
-  --wa-line-height-condensed: 1.2;
-  --wa-line-height-normal: 1.6;
-  --wa-line-height-expanded: 2;
-
   --wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
-  --wa-link-decoration-hover: underline;
-
-  /**
-   * Spacing
-   */
-
-  /* A multiplier is provided to uniformly increase or decrease all spacing. */
-  --wa-space-scale: 1;
-  --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
-  --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
-  --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
-  --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
-  --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-  --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
-  --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-  --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-  --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
-
-  /**
-   * Borders
-   */
-  --wa-border-style: solid;
-
-  /* A multiplier is provided to uniformly increase or decrease all border widths. */
-  --wa-border-width-scale: 0.0625;
-  --wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
-  --wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
-  --wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
-
-  /* A multiplier is provided to uniformly increase or decrease all border radii. */
-  --wa-border-radius-scale: 0.25;
-  --wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
-  --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
-  --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
-  --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
-
-  /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
-  --wa-border-radius-pill: 9999px;
-  --wa-border-radius-circle: 50%;
-  --wa-border-radius-square: 0px;
 
   /**
    * Focus
    */
-  --wa-focus-ring-style: solid;
-  --wa-focus-ring-width: 0.1875rem; /* 3px */
   --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
     color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
-  --wa-focus-ring-offset: 0.0625rem; /* 1px */
 
   /**
    * Shadows
    * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
    * A multiplier is provided for each shadow quality to uniformly scale all related values.
    */
-
-  --wa-shadow-offset-x-scale: 0;
-  --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
-  --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
-  --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
-  --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
-
   --wa-shadow-offset-y-scale: 0.0625;
-  --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
-  --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
-  --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
-  --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
-
-  --wa-shadow-blur-scale: 0.125;
-  --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
-  --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
-  --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
-  --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
-
   --wa-shadow-spread-scale: 0;
-  --wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
-  --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
-  --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
-  --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
-
-  --wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
-    var(--wa-shadow-spread-xs) var(--wa-color-shadow);
-  --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
-    var(--wa-shadow-spread-s) var(--wa-color-shadow);
-  --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
-    var(--wa-shadow-spread-m) var(--wa-color-shadow);
-  --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
-    var(--wa-shadow-spread-l) var(--wa-color-shadow);
 
   /**
    * Transitions
@@ -335,48 +237,19 @@
    */
 
   /* Form controls */
-  --wa-form-control-background-color: var(--wa-color-surface-default);
-
-  --wa-form-control-border-style: var(--wa-border-style);
-  --wa-form-control-border-width: var(--wa-border-width-s);
-  --wa-form-control-border-radius: var(--wa-border-radius-s);
-
-  --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
   --wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
-
-  --wa-form-control-label-color: var(--wa-color-text-normal);
-  --wa-form-control-label-font-weight: var(--wa-font-weight-normal);
   --wa-form-control-label-line-height: var(--wa-line-height-normal);
 
-  --wa-form-control-value-color: var(--wa-color-text-normal);
-  --wa-form-control-value-font-weight: var(--wa-font-weight-body);
-  --wa-form-control-value-line-height: var(--wa-line-height-condensed);
-
-  --wa-form-control-placeholder-color: var(--wa-color-gray-60);
-
   --wa-form-control-height-s: 1.875rem;
   --wa-form-control-height-m: 2.5rem;
   --wa-form-control-height-l: 3.125rem;
 
-  --wa-form-control-required-content: '*';
-  --wa-form-control-required-content-color: inherit;
-  --wa-form-control-required-content-offset: -0.1em;
-
   /* Panels */
-  --wa-panel-border-style: var(--wa-border-style);
-  --wa-panel-border-width: var(--wa-border-width-s);
   --wa-panel-border-radius: var(--wa-border-radius-s);
 
   /* Tooltips */
-  --wa-tooltip-arrow-size: 0.375rem;
-
   --wa-tooltip-background-color: var(--wa-color-text-normal);
-
-  --wa-tooltip-border-radius: var(--wa-border-radius-s);
-
   --wa-tooltip-content-color: var(--wa-color-surface-default);
-  --wa-tooltip-font-size: var(--wa-font-size-s);
-  --wa-tooltip-line-height: var(--wa-line-height-normal);
 }
 
 .wa-theme-classic-dark,
@@ -462,3 +335,143 @@
   --wa-color-neutral-on-normal: var(--wa-color-gray-70);
   --wa-color-neutral-on-loud: var(--wa-color-gray-05);
 }
+
+/**
+ * Component style overrides
+ */
+wa-avatar {
+  --background-color: var(--wa-color-neutral-fill-loud);
+  --content-color: var(--wa-color-neutral-on-loud);
+}
+
+wa-button,
+wa-radio-button {
+  &[size='small'] {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  &[size='medium'] {
+    font-size: var(--wa-font-size-s);
+  }
+
+  &[size='large'] {
+    font-size: var(--wa-font-size-m);
+  }
+}
+
+wa-radio-button {
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+  --background-color-hover: var(--wa-form-control-activated-color);
+  --border-color: var(--wa-form-control-resting-color);
+  --border-color-active: var(--background-color-active);
+  --border-color-hover: var(--background-color-hover);
+  --label-color-active: var(--label-color-hover);
+  --label-color-hover: var(--wa-color-brand-on-loud);
+  --indicator-color: var(--wa-background-color);
+
+  &[checked] {
+    --background-color: var(--wa-form-control-activated-color);
+    --border-color: var(--background-color);
+    --label-color: var(--wa-color-brand-on-loud);
+  }
+}
+
+wa-breadcrumb {
+  font-size: var(--wa-font-size-s);
+}
+
+/* #region Callouts */
+wa-callout {
+  --background-color: var(--wa-color-surface-raised);
+  --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+  --content-color: var(--wa-color-text-normal);
+  --spacing: var(--wa-space-l);
+
+  font-size: var(--wa-font-size-s);
+
+  &[variant='brand'] {
+    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-brand-fill-loud);
+  }
+
+  &[variant='success'] {
+    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-success-fill-loud);
+  }
+
+  &[variant='neutral'] {
+    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-neutral-fill-loud);
+  }
+
+  &[variant='warning'] {
+    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-warning-fill-loud);
+  }
+
+  &[variant='danger'] {
+    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+      var(--wa-color-surface-border);
+    --icon-color: var(--wa-color-danger-fill-loud);
+  }
+}
+
+wa-card {
+  --background-color: var(--wa-color-surface-raised);
+}
+
+wa-carousel {
+  --box-shadow: var(--wa-shadow-xs);
+  --pagination-color-active: var(--wa-color-neutral-fill-loud);
+}
+
+wa-dialog,
+wa-drawer {
+  --spacing: var(--wa-space-l);
+}
+
+wa-input:not([filled]),
+wa-select:not([filled]),
+wa-textarea:not([filled]) {
+  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
+    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
+  --wa-focus-ring-offset: 0;
+}
+
+wa-radio {
+  --background-color-checked: var(--border-color-checked);
+  --checked-icon-color: var(--wa-color-surface-default);
+  --checked-icon-scale: 0.4;
+}
+
+wa-range {
+  --thumb-gap: 0;
+}
+
+wa-switch {
+  --background-color: var(--wa-color-gray-50);
+  --border-color: var(--background-color);
+  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+  --thumb-color: var(--wa-color-surface-default);
+  --thumb-size: calc(var(--height) + 4px);
+  --width: calc(var(--height) * 2);
+
+  &::part(thumb) {
+    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+  }
+  &[checked]::part(thumb) {
+    border-color: var(--background-color-checked);
+  }
+}
+
+wa-progress-bar {
+  --height: 1rem;
+}
+
+wa-tab {
+  font-size: var(--wa-font-size-s);
+}
diff --git a/src/styles/themes/classic_components.css b/src/styles/themes/classic_components.css
deleted file mode 100644
index 18fd9883e..000000000
--- a/src/styles/themes/classic_components.css
+++ /dev/null
@@ -1,154 +0,0 @@
-/* #region Avatars */
-wa-avatar {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
-}
-/* #endregion */
-
-/* #region Buttons */
-wa-button,
-wa-radio-button {
-  &[size='small'] {
-    font-size: var(--wa-font-size-xs);
-  }
-
-  &[size='medium'] {
-    font-size: var(--wa-font-size-s);
-  }
-
-  &[size='large'] {
-    font-size: var(--wa-font-size-m);
-  }
-}
-
-wa-radio-button {
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
-  --background-color-hover: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-resting-color);
-  --border-color-active: var(--background-color-active);
-  --border-color-hover: var(--background-color-hover);
-  --label-color-active: var(--label-color-hover);
-  --label-color-hover: var(--wa-color-brand-on-loud);
-  --indicator-color: var(--wa-background-color);
-}
-
-wa-radio-button[checked] {
-  --background-color: var(--wa-form-control-activated-color);
-  --border-color: var(--background-color);
-  --label-color: var(--wa-color-brand-on-loud);
-}
-/* #endregion */
-
-/* #region Breadcrumbs */
-wa-breadcrumb {
-  font-size: var(--wa-font-size-s);
-}
-
-/* #region Callouts */
-wa-callout {
-  --background-color: var(--wa-color-surface-raised);
-  --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-  --content-color: var(--wa-color-text-normal);
-  --spacing: var(--wa-space-l);
-
-  font-size: var(--wa-font-size-s);
-
-  &[variant='brand'] {
-    --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-brand-fill-loud);
-  }
-
-  &[variant='success'] {
-    --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-success-fill-loud);
-  }
-
-  &[variant='neutral'] {
-    --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-neutral-fill-loud);
-  }
-
-  &[variant='warning'] {
-    --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-warning-fill-loud);
-  }
-
-  &[variant='danger'] {
-    --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
-      var(--wa-color-surface-border);
-    --icon-color: var(--wa-color-danger-fill-loud);
-  }
-}
-/* #endregion */
-
-/* #region Cards */
-wa-card {
-  --background-color: var(--wa-color-surface-raised);
-}
-/* #endregion */
-
-/* #region Carousel */
-wa-carousel {
-  --box-shadow: var(--wa-shadow-xs);
-  --pagination-color-active: var(--wa-color-neutral-fill-loud);
-}
-/* #endregion */
-
-/* #region Modals */
-wa-dialog,
-wa-drawer {
-  --spacing: var(--wa-space-l);
-}
-/* #endregion */
-
-/* #region Inputs */
-wa-input:not([filled]),
-wa-select:not([filled]),
-wa-textarea:not([filled]) {
-  --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
-    color-mix(in oklab, var(--wa-color-focus), transparent 50%);
-  --wa-focus-ring-offset: 0;
-}
-
-wa-radio {
-  --background-color-checked: var(--border-color-checked);
-  --checked-icon-color: var(--wa-color-surface-default);
-  --checked-icon-scale: 0.4;
-}
-
-wa-range {
-  --thumb-gap: 0;
-}
-
-wa-switch {
-  --background-color: var(--wa-color-gray-50);
-  --border-color: var(--background-color);
-  --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-  --thumb-color: var(--wa-color-surface-default);
-  --thumb-size: calc(var(--height) + 4px);
-  --width: calc(var(--height) * 2);
-
-  &::part(thumb) {
-    border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
-  }
-  &[checked]::part(thumb) {
-    border-color: var(--background-color-checked);
-  }
-}
-/* #endregion */
-
-/* #region Progress Indicators */
-wa-progress-bar {
-  --height: 1rem;
-}
-/* #endregion */
-
-/* #region Tabs */
-wa-tab {
-  font-size: var(--wa-font-size-s);
-}
-/* #endregion */

From 70fab26e6b72821a8691b2a0b2a6f072a2ac3806 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 16 Dec 2024 14:38:22 -0500
Subject: [PATCH 02/41] empty styles for these components

---
 src/components/format-bytes/format-bytes.ts   | 6 +++++-
 src/components/format-date/format-date.ts     | 6 +++++-
 src/components/format-number/format-number.ts | 6 +++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 71ab333ff..7aecb7902 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -10,6 +10,10 @@ import { LocalizeController } from '../../utilities/localize.js';
  */
 @customElement('wa-format-bytes')
 export default class WaFormatBytes extends WebAwesomeElement {
+  static get styles() {
+    return [];
+  }
+
   private readonly localize = new LocalizeController(this);
 
   /** The number to format in bytes. */
@@ -36,7 +40,7 @@ export default class WaFormatBytes extends WebAwesomeElement {
     return this.localize.number(valueToFormat, {
       style: 'unit',
       unit,
-      unitDisplay: this.display,
+      unitDisplay: this.display
     });
   }
 }
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index 91bffd9be..1f6c615d3 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -11,6 +11,10 @@ import { LocalizeController } from '../../utilities/localize.js';
  */
 @customElement('wa-format-date')
 export default class WaFormatDate extends WebAwesomeElement {
+  static get styles() {
+    return [];
+  }
+
   private readonly localize = new LocalizeController(this);
 
   /**
@@ -75,7 +79,7 @@ export default class WaFormatDate extends WebAwesomeElement {
           second: this.second,
           timeZoneName: this.timeZoneName,
           timeZone: this.timeZone,
-          hour12: hour12,
+          hour12: hour12
         })}
       </time>
     `;
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index ba527dc4c..9991b4474 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -10,6 +10,10 @@ import { LocalizeController } from '../../utilities/localize.js';
  */
 @customElement('wa-format-number')
 export default class WaFormatNumber extends WebAwesomeElement {
+  static get styles() {
+    return [];
+  }
+
   private readonly localize = new LocalizeController(this);
 
   /** The number to format. */
@@ -56,7 +60,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
       minimumFractionDigits: this.minimumFractionDigits,
       maximumFractionDigits: this.maximumFractionDigits,
       minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits,
+      maximumSignificantDigits: this.maximumSignificantDigits
     });
   }
 }

From 6996d175317cff6f6624aaa14888cf0c74b2a264 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 15:02:08 -0500
Subject: [PATCH 03/41] Replace font-size variable with `1em`

Revert "Replace font-size variable with `1em`"

This reverts commit 1ac70f31abe2bab310bbfbdbb3aa5d4498c5648d.

Replace font-size vars with 1em when calculating form control height
---
 docs/docs/experimental/themer.md      |  6 +++---
 docs/docs/theming/component-groups.md |  8 ++++----
 src/styles/themes/active.css          | 12 +++---------
 src/styles/themes/brutalist.css       | 12 +++---------
 src/styles/themes/default/groups.css  | 12 +++---------
 src/styles/themes/fa.css              | 21 ++++++---------------
 src/styles/themes/glassy.css          | 12 +++---------
 src/styles/themes/mellow.css          | 12 +++---------
 src/styles/themes/migration.css       | 12 +++---------
 src/styles/themes/playful.css         | 12 +++---------
 src/styles/themes/premium.css         | 12 +++---------
 11 files changed, 37 insertions(+), 94 deletions(-)

diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 4d7412d66..0247e71ad 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -170,13 +170,13 @@ hasOutline: false
     --wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
 
     --wa-form-control-height-s: calc(
-      var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
+      var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
     );
     --wa-form-control-height-m: calc(
-      var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
+      var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
     );
     --wa-form-control-height-l: calc(
-      var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
+      var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
     );
 
     --wa-form-control-required-content: '*';
diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md
index d2b55dd1a..2203c11ef 100644
--- a/docs/docs/theming/component-groups.md
+++ b/docs/docs/theming/component-groups.md
@@ -27,9 +27,9 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
 | `--wa-form-control-value-font-weight`       | `var(--wa-font-weight-body)`                                                                      |
 | `--wa-form-control-value-line-height`       | `var(--wa-line-height-condensed)`                                                                 |
 | `--wa-form-control-placeholder-color`       | `var(--wa-color-gray-60)`                                                                         |
-| `--wa-form-control-height-s`                | `calc(var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height))` |
-| `--wa-form-control-height-m`                | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))`  |
-| `--wa-form-control-height-l`                | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))`  |
+| `--wa-form-control-height-s`                | `calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height))` |
+| `--wa-form-control-height-m`                | `calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height))`  |
+| `--wa-form-control-height-l`                | `calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height))`  |
 | `--wa-form-control-required-content`        | `'*'`                                                                                             |
 | `--wa-form-control-required-content-color`  | `inherit`                                                                                         |
 | `--wa-form-control-required-content-offset` | `-0.1em`                                                                                          |
@@ -114,4 +114,4 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
 ```html {.example}
 <wa-icon-button id="bullseye-example" label="Button" name="bullseye"></wa-icon-button>
 <wa-tooltip for="bullseye-example" open trigger="manual">This is a tooltip</wa-tooltip>
-```
\ No newline at end of file
+```
diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css
index 6bb53c736..3e8704c9a 100644
--- a/src/styles/themes/active.css
+++ b/src/styles/themes/active.css
@@ -327,15 +327,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css
index 74b3a0550..cbceb13f3 100644
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -328,15 +328,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/default/groups.css b/src/styles/themes/default/groups.css
index f1fc68ef1..e3b5e7bff 100644
--- a/src/styles/themes/default/groups.css
+++ b/src/styles/themes/default/groups.css
@@ -23,15 +23,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-gray-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css
index 8f62b28ff..5f288b55e 100644
--- a/src/styles/themes/fa.css
+++ b/src/styles/themes/fa.css
@@ -332,15 +332,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
@@ -598,16 +592,13 @@
   wa-input,
   wa-select {
     --wa-form-control-height-s: calc(
-      var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height) +
-        var(--wa-shadow-offset-y-s)
+      var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
     );
     --wa-form-control-height-m: calc(
-      var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height) +
-        var(--wa-shadow-offset-y-s)
+      var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
     );
     --wa-form-control-height-l: calc(
-      var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height) +
-        var(--wa-shadow-offset-y-s)
+      var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
     );
 
     & > wa-icon {
diff --git a/src/styles/themes/glassy.css b/src/styles/themes/glassy.css
index e44fc2791..dbfaf4557 100644
--- a/src/styles/themes/glassy.css
+++ b/src/styles/themes/glassy.css
@@ -326,15 +326,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css
index 9c1d55a5e..076d4049f 100644
--- a/src/styles/themes/mellow.css
+++ b/src/styles/themes/mellow.css
@@ -326,15 +326,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/migration.css b/src/styles/themes/migration.css
index c652e7960..3e155ccdd 100644
--- a/src/styles/themes/migration.css
+++ b/src/styles/themes/migration.css
@@ -329,15 +329,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css
index 9b31bf58c..bd5bfbccd 100644
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -341,15 +341,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
index 073a121d5..53a74a66b 100644
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -329,15 +329,9 @@
 
   --wa-form-control-placeholder-color: var(--wa-color-base-60);
 
-  --wa-form-control-height-s: calc(
-    var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-m: calc(
-    var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
-  );
-  --wa-form-control-height-l: calc(
-    var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
-  );
+  --wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
+  --wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
 
   --wa-form-control-required-content: '*';
   --wa-form-control-required-content-color: inherit;

From 1ffdc1930587cc5c466f7883e3ea4889f30a0ebe Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 15:28:26 -0500
Subject: [PATCH 04/41] Add `variants.css` (not yet linked from anywhere)

---
 src/styles/utilities/variants.css | 69 +++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/styles/utilities/variants.css

diff --git a/src/styles/utilities/variants.css b/src/styles/utilities/variants.css
new file mode 100644
index 000000000..219c2a5a1
--- /dev/null
+++ b/src/styles/utilities/variants.css
@@ -0,0 +1,69 @@
+.wa-neutral {
+  --color-fill-loud: var(--wa-color-neutral-fill-loud);
+  --color-fill-normal: var(--wa-color-neutral-fill-normal);
+  --color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+
+  --color-border-loud: var(--wa-color-neutral-border-loud);
+  --color-border-normal: var(--wa-color-neutral-border-normal);
+  --color-border-quiet: var(--wa-color-neutral-border-quiet);
+
+  --color-on-loud: var(--wa-color-neutral-on-loud);
+  --color-on-normal: var(--wa-color-neutral-on-normal);
+  --color-on-quiet: var(--wa-color-neutral-on-quiet);
+}
+
+.wa-brand {
+  --color-fill-loud: var(--wa-color-brand-fill-loud);
+  --color-fill-normal: var(--wa-color-brand-fill-normal);
+  --color-fill-quiet: var(--wa-color-brand-fill-quiet);
+
+  --color-border-loud: var(--wa-color-brand-border-loud);
+  --color-border-normal: var(--wa-color-brand-border-normal);
+  --color-border-quiet: var(--wa-color-brand-border-quiet);
+
+  --color-on-loud: var(--wa-color-brand-on-loud);
+  --color-on-normal: var(--wa-color-brand-on-normal);
+  --color-on-quiet: var(--wa-color-brand-on-quiet);
+}
+
+.wa-success {
+  --color-fill-loud: var(--wa-color-success-fill-loud);
+  --color-fill-normal: var(--wa-color-success-fill-normal);
+  --color-fill-quiet: var(--wa-color-success-fill-quiet);
+
+  --color-border-loud: var(--wa-color-success-border-loud);
+  --color-border-normal: var(--wa-color-success-border-normal);
+  --color-border-quiet: var(--wa-color-success-border-quiet);
+
+  --color-on-loud: var(--wa-color-success-on-loud);
+  --color-on-normal: var(--wa-color-success-on-normal);
+  --color-on-quiet: var(--wa-color-success-on-quiet);
+}
+
+.wa-warning {
+  --color-fill-loud: var(--wa-color-warning-fill-loud);
+  --color-fill-normal: var(--wa-color-warning-fill-normal);
+  --color-fill-quiet: var(--wa-color-warning-fill-quiet);
+
+  --color-border-loud: var(--wa-color-warning-border-loud);
+  --color-border-normal: var(--wa-color-warning-border-normal);
+  --color-border-quiet: var(--wa-color-warning-border-quiet);
+
+  --color-on-loud: var(--wa-color-warning-on-loud);
+  --color-on-normal: var(--wa-color-warning-on-normal);
+  --color-on-quiet: var(--wa-color-warning-on-quiet);
+}
+
+.wa-danger {
+  --color-fill-loud: var(--wa-color-danger-fill-loud);
+  --color-fill-normal: var(--wa-color-danger-fill-normal);
+  --color-fill-quiet: var(--wa-color-danger-fill-quiet);
+
+  --color-border-loud: var(--wa-color-danger-border-loud);
+  --color-border-normal: var(--wa-color-danger-border-normal);
+  --color-border-quiet: var(--wa-color-danger-border-quiet);
+
+  --color-on-loud: var(--wa-color-danger-on-loud);
+  --color-on-normal: var(--wa-color-danger-on-normal);
+  --color-on-quiet: var(--wa-color-danger-on-quiet);
+}

From 5e2081451dd53287c95357210c41ab5823e9e3e1 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 15:28:46 -0500
Subject: [PATCH 05/41] Add `--space-smaller` to size utility

---
 src/styles/shadow/size.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/shadow/size.css b/src/styles/shadow/size.css
index ad6b4dd6b..9d901234b 100644
--- a/src/styles/shadow/size.css
+++ b/src/styles/shadow/size.css
@@ -19,6 +19,7 @@
   font-size: var(--size-m);
   --size-smaller: var(--size-s);
   --space: var(--space-m);
+  --space-smaller: var(--space-s);
 }
 
 :host([size='small']),
@@ -26,6 +27,7 @@
   font-size: var(--size-s);
   --size-smaller: var(--size-xs);
   --space: var(--space-s);
+  --space-smaller: var(--space-xs);
 }
 
 :host([size='large']),
@@ -33,4 +35,5 @@
   font-size: var(--size-l);
   --size-smaller: var(--size-m);
   --space: var(--space-l);
+  --space-smaller: var(--space-m);
 }

From 74ae7588190a3b73c1aae6ca8f3b60f93320c290 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Mon, 16 Dec 2024 19:32:35 -0500
Subject: [PATCH 06/41] Add native input styles and share with `<wa-input>`

---
 docs/docs/components/input.md         |  2 +-
 docs/docs/experimental/style-guide.md | 33 +++++++--
 src/components/input/input.css        | 84 +----------------------
 src/components/input/input.ts         | 19 +++---
 src/styles/native.css                 |  2 +
 src/styles/native/form-control.css    | 13 ++++
 src/styles/native/input.css           | 98 +++++++++++++++++++++++++++
 src/styles/shadow/form-control.css    |  6 +-
 8 files changed, 158 insertions(+), 99 deletions(-)
 create mode 100644 src/styles/native/form-control.css
 create mode 100644 src/styles/native/input.css

diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md
index 2e6442c7a..1ef889d49 100644
--- a/docs/docs/components/input.md
+++ b/docs/docs/components/input.md
@@ -157,7 +157,7 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
     text-align: right;
   }
 
-  .label-on-left::part(form-control-hint) {
+  .label-on-left::part(hint) {
     grid-column-start: 2;
   }
 </style>
diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md
index d3c0667ec..559cee802 100644
--- a/docs/docs/experimental/style-guide.md
+++ b/docs/docs/experimental/style-guide.md
@@ -22,9 +22,9 @@ The styles shown below can be all yours by adding Web Awesome's applied styleshe
 <wa-button>WA Button</wa-button>
 
 <label for="input-text">Input (text)</label>
-<input type="text" id="input-text"></input>
+<input type="text" id="input-text" placeholder="placeholder"></input>
 
-<wa-input label="WA Input (text)" type="text"></wa-input>
+<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>
 
 <label for="input-number">Input (number)</label>
 <input type="number" id="input-number"></input>
@@ -32,9 +32,34 @@ The styles shown below can be all yours by adding Web Awesome's applied styleshe
 <wa-input label="WA Input (number)" type="number"></wa-input>
 
 <label for="input-password">Input (password)</label>
-<input type="password" id="input-password"></input>
+<input type="password" id="input-password" required></input>
 
-<wa-input label="WA Input (password)" type="password"></wa-input>
+<wa-input label="WA Input (password)" type="password" required></wa-input>
+
+<label for="input-datetime-local">Input (datetime-local)</label>
+<input type="datetime-local" id="input-datetime-local"></input>
+
+<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>
+
+<label for="input-email">Input (email)</label>
+<input type="email" id="input-email"></input>
+
+<wa-input label="WA Input (email)" type="email"></wa-input>
+
+<label for="input-search">Input (search)</label>
+<input type="search" id="input-search"></input>
+
+<wa-input label="WA Input (search)" type="search"></wa-input>
+
+<label for="input-tel">Input (tel)</label>
+<input type="tel" id="input-tel"></input>
+
+<wa-input label="WA Input (tel)" type="tel"></wa-input>
+
+<label for="input-url">Input (url)</label>
+<input type="url" id="input-url"></input>
+
+<wa-input label="WA Input (url)" type="url"></wa-input>
 
 <input type="checkbox" id="input-checkbox"></input>
 <label for="input-checkbox">Input (checkbox)</label>
diff --git a/src/components/input/input.css b/src/components/input/input.css
index 26e0c360f..4fec1fe57 100644
--- a/src/components/input/input.css
+++ b/src/components/input/input.css
@@ -1,63 +1,13 @@
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --border-color: var(--wa-form-control-resting-color);
-  --border-radius: var(--wa-form-control-border-radius);
-  --border-style: var(--wa-form-control-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
-
   display: block;
 }
 
-:host([filled]) {
-  --background-color: var(--wa-color-neutral-fill-quiet);
-  --border-color: var(--background-color);
-}
-
 .input {
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
   flex: 1 1 auto;
-  display: inline-flex;
+  display: flex;
   align-items: stretch;
   justify-content: start;
   position: relative;
-  width: 100%;
-  font: inherit;
-  vertical-align: middle;
-  overflow: hidden;
-  cursor: text;
-  transition:
-    background var(--wa-transition-normal) var(--wa-transition-easing),
-    border var(--wa-transition-normal) var(--wa-transition-easing),
-    outline var(--wa-transition-fast) var(--wa-transition-easing);
-}
-
-/* Standard inputs */
-.input--standard.input--focused:not(.input--disabled) {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-  border-color: var(--wa-form-control-activated-color);
-}
-
-.input--standard.input--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* Filled inputs */
-.input--filled.input--focused:not(.input--disabled) {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.input--filled.input--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .input__control {
@@ -65,8 +15,6 @@
   min-width: 0;
   height: 100%;
   font: inherit;
-  line-height: var(--wa-form-control-value-line-height);
-  color: var(--wa-form-control-value-color);
   border: none;
   /* prettier-ignore */
   background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
@@ -84,28 +32,6 @@
   -webkit-appearance: none;
 }
 
-.input__control:-webkit-autofill,
-.input__control:-webkit-autofill:hover,
-.input__control:-webkit-autofill:focus,
-.input__control:-webkit-autofill:active {
-  box-shadow: none;
-  -webkit-text-fill-color: var(--wa-color-brand-on-normal);
-  caret-color: var(--wa-form-control-value-color);
-}
-
-.input--filled .input__control:-webkit-autofill,
-.input--filled .input__control:-webkit-autofill:hover,
-.input--filled .input__control:-webkit-autofill:focus,
-.input--filled .input__control:-webkit-autofill:active {
-  box-shadow: none;
-}
-
-.input__control::placeholder {
-  color: var(--wa-form-control-placeholder-color);
-  user-select: none;
-  -webkit-user-select: none;
-}
-
 .input__control:focus {
   outline: none;
 }
@@ -195,14 +121,6 @@
   }
 }
 
-/*
- * Pill modifier
- */
-
-.input--pill {
-  border-radius: var(--wa-border-radius-pill);
-}
-
 /*
    * Clearable + Password Toggle
    */
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 6ec900581..132c02791 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -12,6 +12,7 @@ import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/input.css';
 import formControlStyles from '../../styles/shadow/form-control.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import type WaButton from '../button/button.js';
@@ -61,7 +62,7 @@ import styles from './input.css';
  */
 @customElement('wa-input')
 export default class WaInput extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, styles];
+  static shadowStyle = [formControlStyles, nativeStyles, styles];
 
   static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
 
@@ -206,8 +207,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
       fromAttribute: value => (!value || value === 'false' ? false : true),
-      toAttribute: value => (value ? 'true' : 'false'),
-    },
+      toAttribute: value => (value ? 'true' : 'false')
+    }
   })
   spellcheck = true;
 
@@ -289,7 +290,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           }
 
           const button = formElements.find(
-            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled'),
+            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled')
           ) as undefined | HTMLButtonElement | WaButton;
 
           // No button found, don't submit.
@@ -339,7 +340,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   setSelectionRange(
     selectionStart: number,
     selectionEnd: number,
-    selectionDirection: 'forward' | 'backward' | 'none' = 'none',
+    selectionDirection: 'forward' | 'backward' | 'none' = 'none'
   ) {
     this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
   }
@@ -349,7 +350,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     replacement: string,
     start?: number,
     end?: number,
-    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',
+    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
   ) {
     const selectionStart = start ?? this.input.selectionStart!;
     const selectionEnd = end ?? this.input.selectionEnd!;
@@ -410,7 +411,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           'form-control--small': this.size === 'small',
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
-          'form-control--has-label': hasLabel,
+          'form-control--has-label': hasLabel
         })}
       >
         <label
@@ -440,7 +441,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,
               'input--empty': !this.value,
-              'input--no-spin-buttons': this.noSpinButtons,
+              'input--no-spin-buttons': this.noSpinButtons
             })}
           >
             <span part="prefix" class="input__prefix">
@@ -531,7 +532,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint,
+            'has-slotted': hasHint
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot
diff --git a/src/styles/native.css b/src/styles/native.css
index 66cf741e4..2d6e7864b 100644
--- a/src/styles/native.css
+++ b/src/styles/native.css
@@ -1 +1,3 @@
 @import url('./native/button.css');
+@import url('./native/form-control.css');
+@import url('./native/input.css');
diff --git a/src/styles/native/form-control.css b/src/styles/native/form-control.css
new file mode 100644
index 000000000..205c85df6
--- /dev/null
+++ b/src/styles/native/form-control.css
@@ -0,0 +1,13 @@
+label {
+  display: inline-block;
+  color: var(--wa-form-control-label-color);
+  font-weight: var(--wa-form-control-label-font-weight);
+  line-height: var(--wa-form-control-label-line-height);
+  margin-bottom: var(--wa-space-xs);
+}
+
+label:has(+ input:required)::after {
+  content: var(--wa-form-control-required-content);
+  margin-inline-start: var(--wa-form-control-required-content-offset);
+  color: var(--wa-form-control-required-content-color);
+}
diff --git a/src/styles/native/input.css b/src/styles/native/input.css
new file mode 100644
index 000000000..cda03fcb9
--- /dev/null
+++ b/src/styles/native/input.css
@@ -0,0 +1,98 @@
+/* Exclude inputs that don't accept text, referenced in subsequent rules with :where(&) */
+:not(
+    [type='button'],
+    [type='checkbox'],
+    [type='color'],
+    [type='file'],
+    [type='hidden'],
+    [type='image'],
+    [type='radio'],
+    [type='range'],
+    [type='reset'],
+    [type='submit']
+  ) {
+  /* Set custom properties for native and WA inputs */
+  input:where(:not(:host input)):where(&),
+  :host(&) {
+    --background-color: var(--wa-form-control-background-color);
+    --border-color: var(--wa-form-control-resting-color);
+    --border-radius: var(--wa-form-control-border-radius);
+    --border-style: var(--wa-form-control-border-style);
+    --border-width: var(--wa-form-control-border-width);
+    --box-shadow: initial;
+  }
+
+  /* Set custom properties for filled input variants via class="wa-filled" or <wa-input filled> */
+  input:where(:not(:host input)).wa-filled:where(&),
+  :host(.wa-filled:where(&)),
+  :host([filled]:where(&)) {
+    --background-color: var(--wa-color-neutral-fill-quiet);
+    --border-color: var(--background-color);
+  }
+
+  /* Set custom properties for pill input variants via class="wa-pill" or <wa-input pill> */
+  input:where(:not(:host input)).wa-pill:where(&),
+  :host(.wa-pill:where(&)),
+  :host([pill]:where(&)) {
+    --border-radius: var(--wa-border-radius-pill);
+  }
+
+  /* Style text controls of inputs, including within <wa-input> */
+  :is(input):where(&) {
+    color: var(--wa-form-control-value-color);
+    font-size: var(--wa-font-size-m);
+    line-height: var(--wa-form-control-value-line-height);
+    padding: 0 var(--wa-space-m);
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      box-shadow: none;
+      caret-color: var(--wa-form-control-value-color);
+    }
+
+    &::placeholder {
+      color: var(--wa-form-control-placeholder-color);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+
+  /* Style native inputs and <wa-input>'s visible container */
+  :is(input:where(:not(:host input)), :host .input):where(&) {
+    background-color: var(--background-color);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    box-shadow: var(--box-shadow);
+    cursor: text;
+    font-family: inherit;
+    line-height: var(--wa-form-control-value-line-height);
+    overflow: hidden;
+    vertical-align: middle;
+    width: 100%;
+    transition:
+      background-color var(--wa-transition-normal),
+      border var(--wa-transition-normal),
+      outline var(--wa-transition-fast);
+    transition-timing-function: var(--wa-transition-easing);
+
+    &:not(.input--small, .input--large) {
+      height: var(--wa-form-control-height-m);
+    }
+  }
+
+  /* Style focused inputs */
+  :is(input:where(:not(:host input)):focus, :host .input--focused:not(.input--disabled)):where(&) {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  /* Style disabled inputs */
+  :is(input:where(:not(:host input)):disabled, :host .input--disabled):where(&) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
diff --git a/src/styles/shadow/form-control.css b/src/styles/shadow/form-control.css
index 9f445d3e3..f5d26a220 100644
--- a/src/styles/shadow/form-control.css
+++ b/src/styles/shadow/form-control.css
@@ -8,7 +8,7 @@
   color: var(--wa-form-control-label-color);
   font-weight: var(--wa-form-control-label-font-weight);
   line-height: var(--wa-form-control-label-line-height);
-  margin-bottom: var(--wa-space-3xs);
+  margin-block-end: var(--wa-space-xs);
 
   &:is(.form-control--small *) {
     font-size: var(--wa-font-size-s);
@@ -32,9 +32,11 @@
 /* Help text */
 [part~='form-control-hint'],
 [part~='hint'] {
+  display: inline-block;
   color: var(--wa-color-text-quiet);
-  margin-top: var(--wa-space-3xs);
+  margin-block-start: var(--wa-space-xs);
   font-size: var(--size-smaller, 85%);
+  line-height: var(--wa-form-control-label-line-height);
 
   &:is(.form-control--small *) {
     font-size: var(--wa-font-size-xs);

From 771a1559efbd4064d0c5f2b9c4b83e7582082871 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 16 Dec 2024 22:08:38 -0500
Subject: [PATCH 07/41] Fix typo

---
 docs/docs/components/button.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index e63579b87..ef3506bbb 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -91,7 +91,7 @@ It's often helpful to have a button that works like a link. This is possible by
 
 ### Setting a Custom Width
 
-As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
+As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
 
 ```html {.example}
 <wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>

From aade89b66e67677e204a0f80017275172b3440f2 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 01:54:32 -0500
Subject: [PATCH 08/41] Remove unused class

---
 src/components/radio-group/radio-group.css | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/radio-group/radio-group.css b/src/components/radio-group/radio-group.css
index db2e7fe50..0aa46c352 100644
--- a/src/components/radio-group/radio-group.css
+++ b/src/components/radio-group/radio-group.css
@@ -17,15 +17,3 @@
   content: var(--wa-form-control-required-content);
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

From 7a7a7abe78836dc958c30625537906ca5b70ce26 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 01:55:17 -0500
Subject: [PATCH 09/41] Add size & variant utils to Applied CSS

---
 src/styles/applied.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/styles/applied.css b/src/styles/applied.css
index 9b44bb199..fadc9b0fe 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -8,6 +8,9 @@
 @import url('native/tables.css');
 @import url('native/blockquote.css');
 
+@import url('shadow/size.css');
+@import url('utilities/variants.css');
+
 /**
  * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
  * Web Awesome's design tokens.

From 426a242d26c42dc48dc1ecf0199d2f42ae4dd6ae Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 01:57:48 -0500
Subject: [PATCH 10/41] Define button-group util and use it in button-group and
 radio-group

---
 src/components/button-group/button-group.css | 16 -----
 src/components/button-group/button-group.ts  | 14 ++--
 src/components/button/button.css             | 70 --------------------
 src/components/radio-group/radio-group.css   |  4 ++
 src/components/radio-group/radio-group.ts    | 20 +++---
 src/styles/utilities/button-group.css        | 57 ++++++++++++++++
 6 files changed, 76 insertions(+), 105 deletions(-)
 create mode 100644 src/styles/utilities/button-group.css

diff --git a/src/components/button-group/button-group.css b/src/components/button-group/button-group.css
index e835cadcb..feb4b28f5 100644
--- a/src/components/button-group/button-group.css
+++ b/src/components/button-group/button-group.css
@@ -1,19 +1,3 @@
 :host {
   display: inline-flex;
 }
-
-.button-group {
-  display: flex;
-  position: relative;
-  flex-wrap: wrap;
-  isolation: isolate;
-}
-
-:host([orientation='vertical']) .button-group {
-  flex-direction: column;
-}
-
-/* Show the focus indicator above other buttons */
-::slotted(:focus) {
-  z-index: 1 !important;
-}
diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts
index 656a3bd2e..bf188cd52 100644
--- a/src/components/button-group/button-group.ts
+++ b/src/components/button-group/button-group.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import buttonGroupStyles from '../../styles/utilities/button-group.css';
 import styles from './button-group.css';
 
 /**
@@ -15,7 +16,7 @@ import styles from './button-group.css';
  */
 @customElement('wa-button-group')
 export default class WaButtonGroup extends WebAwesomeElement {
-  static shadowStyle = styles;
+  static shadowStyle = [buttonGroupStyles, styles];
 
   @query('slot') defaultSlot: HTMLSlotElement;
 
@@ -82,20 +83,19 @@ export default class WaButtonGroup extends WebAwesomeElement {
   }
 
   render() {
-    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
     return html`
-      <div
+      <slot
         part="base"
-        class="button-group"
+        class="wa-button-group"
         role="${this.disableRole ? 'presentation' : 'group'}"
         aria-label=${this.label}
+        aria-orientation=${this.orientation}
         @focusout=${this.handleBlur}
         @focusin=${this.handleFocus}
         @mouseover=${this.handleMouseOver}
         @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
+        @slotchange=${this.handleSlotChange}
+      ></slot>
     `;
   }
 }
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 326384048..b230a3967 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -397,76 +397,6 @@
   }
   */
 
-:host(.wa-button-group__button--inner) .button {
-  border-radius: 0;
-}
-
-:host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-:host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-:host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
-}
-
-:host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
-  border-start-start-radius: 0;
-  border-start-end-radius: 0;
-}
-
-/* All except the first */
-:host(
-    .wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
-  ) {
-  margin-inline-start: calc(-1 * var(--border-width));
-}
-
-:host(
-    .wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
-  ) {
-  margin-block-start: calc(-1 * var(--border-width));
-}
-
-/* Add a visual separator between filled buttons */
-:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
-  content: '';
-  position: absolute;
-  z-index: 2; /* Keep separators visible on hover */
-}
-
-:host(
-    .wa-button-group-horizontal.wa-button-group__button:not(
-        .wa-button-group__button--first,
-        .wa-button-group__button--radio
-      )
-  )
-  .button:after {
-  top: 0;
-  bottom: 0;
-  inset-inline-start: 0;
-  border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
-}
-
-:host(
-    .wa-button-group-vertical.wa-button-group__button:not(
-        .wa-button-group__button--first,
-        .wa-button-group__button--radio
-      )
-  )
-  .button:after {
-  left: 0;
-  right: 0;
-  inset-block-start: 0;
-  border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
-}
-
 /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
 :host(.wa-button-group__button--hover) {
   z-index: 1;
diff --git a/src/components/radio-group/radio-group.css b/src/components/radio-group/radio-group.css
index 0aa46c352..b3b244f0a 100644
--- a/src/components/radio-group/radio-group.css
+++ b/src/components/radio-group/radio-group.css
@@ -17,3 +17,7 @@
   content: var(--wa-form-control-required-content);
   margin-inline-start: var(--wa-form-control-required-content-offset);
 }
+
+.wa-button-group {
+  display: flex;
+}
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 1f78b9ef9..8be532030 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -9,7 +9,8 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import '../button-group/button-group.js';
+import sizeStyles from '../../styles/shadow/size.css';
+import buttonGroupStyles from '../../styles/utilities/button-group.css';
 import type WaRadioButton from '../radio-button/radio-button.js';
 import '../radio/radio.js';
 import type WaRadio from '../radio/radio.js';
@@ -41,7 +42,7 @@ import styles from './radio-group.css';
  */
 @customElement('wa-radio-group')
 export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, styles];
+  static shadowStyle = [sizeStyles, buttonGroupStyles, formControlStyles, styles];
 
   static get validators() {
     const validators = isServer
@@ -314,7 +315,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
     const hasHintSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHint;
     const hasLabel = this.label ? true : !!hasLabelSlot;
     const hasHint = this.hint ? true : !!hasHintSlot;
-    const defaultSlot = html` <slot @slotchange=${this.syncRadioElements}></slot> `;
 
     return html`
       <fieldset
@@ -342,15 +342,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div part="form-control-input" class="form-control-input" role="presentation">
-          ${this.hasButtonGroup
-            ? html`
-                <wa-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
-                  ${defaultSlot}
-                </wa-button-group>
-              `
-            : defaultSlot}
-        </div>
+        <slot
+          part="form-control-input"
+          class=${classMap({ 'wa-button-group': this.hasButtonGroup })}
+          @slotchange=${this.syncRadioElements}
+        ></slot>
 
         <slot
           name="hint"
diff --git a/src/styles/utilities/button-group.css b/src/styles/utilities/button-group.css
new file mode 100644
index 000000000..9d7c04edd
--- /dev/null
+++ b/src/styles/utilities/button-group.css
@@ -0,0 +1,57 @@
+.wa-button-group {
+  display: inline-flex;
+  position: relative;
+  flex-wrap: wrap;
+  isolation: isolate;
+
+  > :hover,
+  &::slotted(:hover) {
+    z-index: 1;
+  }
+
+  /* Focus and checked are always on top */
+  > :focus,
+  &::slotted(:focus),
+  > [aria-checked='true'],
+  > [checked],
+  &::slotted([aria-checked='true']),
+  &::slotted([checked]) {
+    z-index: 2 !important;
+  }
+}
+
+/* Horizontal */
+.wa-button-group:not([aria-orientation='vertical']) {
+  > :not(:first-child),
+  &::slotted(:not(:first-child)) {
+    border-start-start-radius: 0 !important;
+    border-end-start-radius: 0 !important;
+    border-inline-start-color: var(--border-color, rgb(0 0 0 / 0.3));
+    margin-inline-start: calc(-1 * var(--border-width, 1px));
+  }
+
+  > :not(:last-child),
+  &::slotted(:not(:last-child)) {
+    border-start-end-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+  }
+}
+
+/* Vertical */
+.wa-button-group[aria-orientation='vertical'] {
+  flex-direction: column;
+
+  > :not(:first-child),
+  &::slotted(:not(:first-child)) {
+    border-start-start-radius: 0 !important;
+    border-start-end-radius: 0 !important;
+    border-block-start-color: var(--border-color, rgb(0 0 0 / 0.3));
+    margin-block-start: calc(-1 * var(--border-width, 1px));
+  }
+
+  > :not(:last-child),
+  &::slotted(:not(:last-child)) {
+    border-end-start-radius: 0 !important;
+    border-end-end-radius: 0 !important;
+  }
+}

From 27c58637ebfcbb5eecbbef91f6ed6c78d9107dc5 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 02:02:30 -0500
Subject: [PATCH 11/41] Revamp button styles

- More style sharing between native buttons & button component
- Fix radio button styling
- Better ability to style button from the outside (without `::part(base)`)
- Orthogonal variant + appearance
---
 src/components/button/button.css             | 411 +++----------------
 src/components/button/button.ts              |  69 ++--
 src/components/radio-button/radio-button.css |  32 +-
 src/components/radio-button/radio-button.ts  |  72 ++--
 src/styles/native/button.css                 | 167 ++++++--
 src/styles/utilities/variants.css            |  16 +-
 6 files changed, 282 insertions(+), 485 deletions(-)

diff --git a/src/components/button/button.css b/src/components/button/button.css
index b230a3967..2b48f6eec 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -1,409 +1,106 @@
 :host {
-  display: inline-block;
+  display: contents;
   position: relative;
-  width: auto;
-  cursor: pointer;
 }
 
-/*
-   * Filled buttons
-   */
-
-:host([appearance='filled'][variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --label-color: var(--wa-color-neutral-on-loud);
-}
-
-:host([appearance='filled'][variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-loud);
-  --label-color: var(--wa-color-brand-on-loud);
-}
-
-:host([appearance='filled'][variant='success']) {
-  --background-color: var(--wa-color-success-fill-loud);
-  --label-color: var(--wa-color-success-on-loud);
-}
-
-:host([appearance='filled'][variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-loud);
-  --label-color: var(--wa-color-warning-on-loud);
-}
-
-:host([appearance='filled'][variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-loud);
-  --label-color: var(--wa-color-danger-on-loud);
-}
-
-/*
-   * Tinted buttons
-   */
-
-:host([appearance='tinted']) {
-  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
-  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
-}
-
-:host([appearance='tinted'][variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-normal);
-  --label-color: var(--wa-color-neutral-on-normal);
-}
-
-:host([appearance='tinted'][variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-normal);
-  --label-color: var(--wa-color-brand-on-normal);
-}
-
-:host([appearance='tinted'][variant='success']) {
-  --background-color: var(--wa-color-success-fill-normal);
-  --label-color: var(--wa-color-success-on-normal);
-}
-
-:host([appearance='tinted'][variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-normal);
-  --label-color: var(--wa-color-warning-on-normal);
-}
-
-:host([appearance='tinted'][variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-normal);
-  --label-color: var(--wa-color-danger-on-normal);
-}
-
-/*
-   * Outlined buttons
-   */
-
-:host([appearance='outlined']),
-:host(.wa-button-group__button--radio:not([checked])) {
-  --background-color: transparent;
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-}
-
-:host([appearance='outlined'][variant='neutral']),
-:host(.wa-button-group__button--radio:not([checked])) {
-  --background-color-hover: var(--wa-color-neutral-fill-quiet);
-  --border-color: var(--wa-color-neutral-border-loud);
-  --label-color: var(--wa-color-neutral-on-quiet);
-}
-
-:host([appearance='outlined'][variant='brand']) {
-  --background-color-hover: var(--wa-color-brand-fill-quiet);
-  --border-color: var(--wa-color-brand-border-loud);
-  --label-color: var(--wa-color-brand-on-quiet);
-}
-
-:host([appearance='outlined'][variant='success']) {
-  --background-color-hover: var(--wa-color-success-fill-quiet);
-  --border-color: var(--wa-color-success-border-loud);
-  --label-color: var(--wa-color-success-on-quiet);
-}
-
-:host([appearance='outlined'][variant='warning']) {
-  --background-color-hover: var(--wa-color-warning-fill-quiet);
-  --border-color: var(--wa-color-warning-border-loud);
-  --label-color: var(--wa-color-warning-on-quiet);
-}
-
-:host([appearance='outlined'][variant='danger']) {
-  --background-color-hover: var(--wa-color-danger-fill-quiet);
-  --border-color: var(--wa-color-danger-border-loud);
-  --label-color: var(--wa-color-danger-on-quiet);
-}
-
-/*
-   * Text buttons
-   */
-
-:host([appearance='text']) {
-  --background-color: transparent;
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-}
-
-:host([appearance='text'][variant='neutral']) {
-  --label-color: var(--wa-color-neutral-on-quiet);
-  --background-color-hover: var(--wa-color-neutral-fill-quiet);
-}
-
-:host([appearance='text'][variant='brand']) {
-  --label-color: var(--wa-color-brand-on-quiet);
-  --background-color-hover: var(--wa-color-brand-fill-quiet);
-}
-
-:host([appearance='text'][variant='success']) {
-  --label-color: var(--wa-color-success-on-quiet);
-  --background-color-hover: var(--wa-color-success-fill-quiet);
-}
-
-:host([appearance='text'][variant='warning']) {
-  --label-color: var(--wa-color-warning-on-quiet);
-  --background-color-hover: var(--wa-color-warning-fill-quiet);
-}
-
-:host([appearance='text'][variant='danger']) {
-  --label-color: var(--wa-color-danger-on-quiet);
-  --background-color-hover: var(--wa-color-danger-fill-quiet);
-}
-
-/*
-   * Checked buttons
-   */
-
-:host([checked]) {
-  --background-color: var(--wa-color-brand-fill-quiet);
-  --background-color-hover: var(--background-color);
-  --border-color: var(--wa-form-control-activated-color);
-  --label-color: var(--wa-color-brand-on-normal);
-  --indicator-color: var(--border-color);
-  --indicator-width: var(--wa-border-width-s);
-}
-
-/*
-   * Internal
-   */
-
-.button {
+:where([part~='base']) {
+  all: inherit;
   display: inline-flex;
-  align-items: stretch;
-  justify-content: center;
-  width: 100%;
-}
-
-.button--checked {
-  box-shadow:
-    var(--box-shadow, 0 0 transparent),
-    inset 0 0 0 var(--indicator-width) var(--indicator-color);
 }
 
 /*
-   * States
-   */
+ * Label
+ */
 
-.button::-moz-focus-inner {
-  border: 0;
-}
-
-.button:focus {
-  outline: none;
-}
-
-.button:focus-visible {
-  outline: var(--wa-focus-ring);
-  outline-offset: var(--wa-focus-ring-offset);
-}
-
-.button--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* When disabled, prevent mouse events from bubbling up from children */
-.button--disabled * {
-  pointer-events: none;
-}
-
-@media (forced-colors: active) {
-  .button.button--outlined.button--checked:not(.button--disabled) {
-    outline: solid 2px transparent;
-  }
-}
-
-/*
-   * Label
-   */
-
-.button__prefix,
-.button__suffix {
+.prefix,
+.suffix {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   pointer-events: none;
 }
 
-.button__label {
+.label {
   display: inline-block;
 }
 
-.button__label::slotted(wa-icon) {
+.label::slotted(wa-icon) {
   vertical-align: -2px;
 }
 
 /*
-   * Size modifiers
-   */
+ * Caret modifier
+ */
 
-.button--small {
-  font-size: var(--wa-font-size-s);
-  height: var(--wa-form-control-height-s);
-  line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
-}
-
-.button--medium {
-  font-size: var(--wa-font-size-m);
-  height: var(--wa-form-control-height-m);
-  line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
-}
-
-.button--large {
-  font-size: var(--wa-font-size-l);
-  height: var(--wa-form-control-height-l);
-  line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
-}
-
-/*
-   * Pill modifier
-   */
-
-.button--pill {
-  border-radius: var(--wa-border-radius-pill);
-}
-
-/*
-   * Caret modifier
-   */
-
-.button--caret .button__suffix {
-  display: none;
-}
-
-.button--caret .button__caret {
+wa-icon[part~='caret'] {
   display: flex;
   align-self: center;
   align-items: center;
-}
 
-.button--caret .button__caret::part(svg) {
-  width: 0.875em;
-  height: 0.875em;
+  &::part(svg) {
+    width: 0.875em;
+    height: 0.875em;
+  }
+
+  .wa-button:has(&) .suffix {
+    display: none;
+  }
 }
 
 /*
-   * Loading modifier
-   */
+ * Loading modifier
+ */
 
-.button--loading {
+.loading {
   position: relative;
   cursor: wait;
-}
 
-.button--loading .button__prefix,
-.button--loading .button__label,
-.button--loading .button__suffix,
-.button--loading .button__caret {
-  visibility: hidden;
-}
+  .prefix,
+  .label,
+  .suffix,
+  .caret {
+    visibility: hidden;
+  }
 
-.button--loading wa-spinner {
-  --indicator-color: currentColor;
-  --track-color: color-mix(in oklab, currentColor, transparent 90%);
-  position: absolute;
-  font-size: 1em;
-  height: 1em;
-  width: 1em;
-  top: calc(50% - 0.5em);
-  left: calc(50% - 0.5em);
+  wa-spinner {
+    --indicator-color: currentColor;
+    --track-color: color-mix(in oklab, currentColor, transparent 90%);
+
+    position: absolute;
+    font-size: 1em;
+    height: 1em;
+    width: 1em;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
 }
 
 /*
-   * Badges
-   */
+ * Badges
+ */
 
-.button ::slotted(wa-badge) {
-  --border-color: var(--wa-color-surface-default);
+button ::slotted(wa-badge) {
+  border-color: var(--wa-color-surface-default);
   position: absolute;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
   translate: 50% -50%;
   pointer-events: none;
 }
 
-.button--rtl ::slotted(wa-badge) {
-  right: auto;
-  left: 0;
+:host(:dir(rtl)) ::slotted(wa-badge) {
   translate: -50% -50%;
 }
 
 /*
-   * Button spacing
-   */
+* Button spacing
+*/
 
-.button--small {
-  padding: 0 var(--wa-space-s);
+slot[name='prefix']::slotted(*) {
+  margin-inline-end: var(--space);
 }
 
-.button--medium {
-  padding: 0 var(--wa-space-m);
-}
-
-.button--large {
-  padding: 0 var(--wa-space-l);
-}
-
-.button--small ::slotted([slot='prefix']) {
-  margin-inline-end: var(--wa-space-s);
-}
-
-.button--medium ::slotted([slot='prefix']) {
-  margin-inline-end: var(--wa-space-m);
-}
-
-.button--large ::slotted([slot='prefix']) {
-  margin-inline-end: var(--wa-space-l);
-}
-
-.button--small ::slotted([slot='suffix']),
-.button--small.button--caret:not(.button--visually-hidden-label) .button__caret {
-  margin-inline-start: var(--wa-space-s);
-}
-
-.button--medium ::slotted([slot='suffix']),
-.button--medium.button--caret:not(.button--visually-hidden-label) .button__caret {
-  margin-inline-start: var(--wa-space-m);
-}
-
-.button--large ::slotted([slot='suffix']),
-.button--large.button--caret:not(.button--visually-hidden-label) .button__caret {
-  margin-inline-start: var(--wa-space-l);
-}
-
-/*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
-   */
-
-/*
-  :host([data-button-group-middle]) #button {
-    border-radius: 0;
-  }
-
-  :host([data-button-group-horizontal][data-button-group-first]) #button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-button-group-horizontal][data-button-group-last]) #button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  :host([data-button-group-vertical][data-button-group-first]) #button {
-    border-end-start-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-button-group-vertical][data-button-group-last]) #button {
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-  }
-  */
-
-/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-:host(.wa-button-group__button--hover) {
-  z-index: 1;
-}
-
-/* Focus and checked are always on top */
-:host(.wa-button-group__button--focus),
-:host(.wa-button-group__button[checked]) {
-  z-index: 2;
+slot[name='suffix']::slotted(*),
+.wa-button:not(.visually-hidden-label) [part~='caret'] {
+  margin-inline-start: var(--space);
 }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 9cf45168d..a03ad120e 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -9,6 +9,8 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/button.css';
+import sizeStyles from '../../styles/shadow/size.css';
+import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import '../spinner/spinner.js';
@@ -38,23 +40,19 @@ 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 --background-color - The button's background color.
+ * @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.
- * @cssproperty --border-color - The color of the button's border.
+ * @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
  * @cssproperty --border-color-active - The color of the button's border when active.
  * @cssproperty --border-color-hover - The color of the button's border on hover.
- * @cssproperty --border-radius - The radius of the button's corners.
- * @cssproperty --border-style - The style of the button's border.
- * @cssproperty --border-width - The width of the button's border. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the button.
- * @cssproperty --label-color - The color of the button's label.
+ * @cssproperty --label-color - The color of the button's label when the button is not being interacted with.
  * @cssproperty --label-color-active - The color of the button's label when active.
  * @cssproperty --label-color-hover - The color of the button's label on hover.
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [nativeStyles, styles];
+  static shadowStyle = [variantStyles, sizeStyles, nativeStyles, styles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
@@ -63,7 +61,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
   assumeInteractionOn = ['click'];
   private readonly localize = new LocalizeController(this);
 
-  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
+  @query('.wa-button') button: HTMLButtonElement | HTMLLinkElement;
 
   @state() private hasFocus = false;
   @state() visuallyHiddenLabel = false;
@@ -236,6 +234,17 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
     this.button.blur();
   }
 
+  getBoundingClientRect(): DOMRect {
+    let rect = super.getBoundingClientRect();
+    let buttonRect = this.button.getBoundingClientRect();
+
+    if (rect.width === 0 && buttonRect.width > 0) {
+      return buttonRect;
+    }
+
+    return rect;
+  }
+
   render() {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
@@ -247,25 +256,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         part="base"
         class=${classMap({
           button: true,
-          'button--brand': this.variant === 'brand',
-          'button--success': this.variant === 'success',
-          'button--neutral': this.variant === 'neutral',
-          'button--warning': this.variant === 'warning',
-          'button--danger': this.variant === 'danger',
-          'button--small': this.size === 'small',
-          'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
-          'button--caret': this.caret,
-          'button--disabled': this.disabled,
-          'button--focused': this.hasFocus,
-          'button--loading': this.loading,
-          'button--filled': this.appearance === 'filled',
-          'button--tinted': this.appearance === 'tinted',
-          'button--outlined': this.appearance === 'outlined',
-          'button--text': this.appearance === 'text',
-          'button--pill': this.pill,
-          'button--rtl': this.localize.dir() === 'rtl',
-          'button--visually-hidden-label': this.visuallyHiddenLabel,
+          'wa-button': true,
+          caret: this.caret,
+          disabled: this.disabled,
+          focused: this.hasFocus,
+          loading: this.loading,
+          rtl: this.localize.dir() === 'rtl',
+          'visually-hidden-label': this.visuallyHiddenLabel,
         })}
         ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
         type=${ifDefined(isLink ? undefined : this.type)}
@@ -284,27 +281,19 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
         @invalid=${this.isButton() ? this.handleInvalid : null}
         @click=${this.handleClick}
       >
-        <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        <slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        <slot name="prefix" part="prefix" class="prefix"></slot>
+        <slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
+        <slot name="suffix" part="suffix" class="suffix"></slot>
         ${
           this.caret
             ? html`
-                <wa-icon
-                  part="caret"
-                  class="button__caret"
-                  library="system"
-                  name="chevron-down"
-                  variant="solid"
-                ></wa-icon>
+                <wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
               `
             : ''
         }
         ${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
       </${tag}>
     `;
-    /* eslint-enable lit/no-invalid-html */
-    /* eslint-enable lit/binding-positions */
   }
 }
 declare global {
diff --git a/src/components/radio-button/radio-button.css b/src/components/radio-button/radio-button.css
index 69f0a0fbe..d34b0674f 100644
--- a/src/components/radio-button/radio-button.css
+++ b/src/components/radio-button/radio-button.css
@@ -1,6 +1,15 @@
-.button__prefix,
-.button__suffix,
-.button__label {
+:host {
+  display: contents;
+}
+
+:where([part~='base']) {
+  all: inherit;
+  display: inline-flex;
+}
+
+.prefix,
+.suffix,
+.label {
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -19,3 +28,20 @@
   opacity: 0;
   z-index: -1;
 }
+
+/*
+ * Checked buttons
+ */
+
+:host([checked]) {
+  --background-color: var(--wa-color-brand-fill-quiet);
+  --background-color-hover: var(--background-color);
+  --border-color: var(--wa-form-control-activated-color);
+  --label-color: var(--wa-color-brand-on-normal);
+  --indicator-color: var(--border-color);
+  --indicator-width: var(--wa-border-width-s);
+
+  box-shadow:
+    var(--box-shadow, 0 0 transparent),
+    inset 0 0 0 var(--indicator-width) var(--indicator-color);
+}
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 698c90305..1981f8018 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -7,6 +7,9 @@ import { WaFocusEvent } from '../../events/focus.js';
 import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/button.css';
+import sizeStyles from '../../styles/shadow/size.css';
+import variantStyles from '../../styles/utilities/variants.css';
 import buttonStyles from '../button/button.css';
 import styles from './radio-button.css';
 
@@ -39,20 +42,19 @@ import styles from './radio-button.css';
  * @cssproperty --label-color-active - The color of the button's label when active.
  * @cssproperty --label-color-hover - The color of the button's label on hover.
  *
- * @csspart base - The component's base wrapper.
- * @csspart button - The internal `<button>` element.
- * @csspart button--checked - The internal button element when the radio button is checked.
+ * @csspart base - The internal `<button>` element.
+ * @csspart checked - The internal button element when the radio button is checked.
  * @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.
  */
 @customElement('wa-radio-button')
 export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [buttonStyles, styles];
+  static shadowStyle = [variantStyles, sizeStyles, nativeStyles, buttonStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
 
-  @query('.button') input: HTMLInputElement;
+  @query('button') input: HTMLButtonElement;
   @query('.hidden-input') hiddenInput: HTMLInputElement;
 
   @state() protected hasFocus = false;
@@ -147,39 +149,33 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
     const hasSuffix = this.hasUpdated ? this.hasSlotController.test('suffix') : this.withSuffix;
 
     return html`
-      <div part="base" role="presentation">
-        <button
-          part="${`button${this.checked ? ' button--checked' : ''}`}"
-          role="radio"
-          aria-checked="${this.checked}"
-          class=${classMap({
-            button: true,
-            'button--neutral': !this.checked,
-            'button--brand': this.checked,
-            'button--small': this.size === 'small',
-            'button--medium': this.size === 'medium',
-            'button--large': this.size === 'large',
-            'button--checked': this.checked,
-            'button--disabled': this.disabled,
-            'button--focused': this.hasFocus,
-            'button--outlined': true,
-            'button--pill': this.pill,
-            'button--has-label': hasLabel,
-            'button--has-prefix': hasPrefix,
-            'button--has-suffix': hasSuffix,
-          })}
-          aria-disabled=${this.disabled}
-          type="button"
-          value=${ifDefined(this.value)}
-          @blur=${this.handleBlur}
-          @focus=${this.handleFocus}
-          @click=${this.handleClick}
-        >
-          <slot name="prefix" part="prefix" class="button__prefix"></slot>
-          <slot part="label" class="button__label"></slot>
-          <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        </button>
-      </div>
+      <button
+        part="base${this.checked ? ' checked' : ''}"
+        role="radio"
+        aria-checked="${this.checked}"
+        class=${classMap({
+          'wa-neutral': !this.checked,
+          'wa-brand': this.checked,
+          disabled: this.disabled,
+          focused: this.hasFocus,
+          'wa-outlined': true,
+          'wa-tinted': this.checked,
+          'wa-pill': this.pill,
+          'has-label': hasLabel,
+          'has-prefix': hasPrefix,
+          'has-suffix': hasSuffix,
+        })}
+        aria-disabled=${this.disabled}
+        type="button"
+        value=${ifDefined(this.value)}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <slot name="prefix" part="prefix" class="prefix"></slot>
+        <slot part="label" class="label"></slot>
+        <slot name="suffix" part="suffix" class="suffix"></slot>
+      </button>
     `;
   }
 }
diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index bd3ab5ff7..6a9507e33 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -1,59 +1,142 @@
-:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)),
-:host {
-  --background-color: var(--wa-color-neutral-fill-loud);
+:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *, .wa-off, .wa-off *)),
+:host,
+.wa-button:where(:not([part~='base'])) {
+  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-  --border-color: initial;
+
+  --border-color: transparent;
   --border-color-hover: var(--border-color);
   --border-color-active: var(--border-color);
-  --border-radius: var(--wa-form-control-border-radius);
-  --border-style: var(--wa-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
-  --label-color: var(--wa-color-neutral-on-loud);
+  --border-width: max(1px, var(--wa-form-control-border-width));
+
+  --label-color: var(--color-on-loud, var(--wa-color-neutral-on-loud));
   --label-color-hover: var(--label-color);
   --label-color-active: var(--label-color);
-}
 
-button,
-input:is([type='button'], [type='reset'], [type='submit']),
-:host([href]) a {
-  background-color: var(--background-color);
-  border-color: var(--border-color, var(--background-color));
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: max(1px, var(--border-width));
-  box-shadow: var(--box-shadow);
-  color: var(--label-color);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--wa-font-size-m);
-  font-weight: var(--wa-font-weight-action);
-  height: var(--wa-form-control-height-m);
-  line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
-  padding: 0 var(--wa-space-m);
+  border-radius: var(--wa-form-control-border-radius);
+  border-style: var(--wa-border-style);
+  border-width: var(--border-width);
+  align-items: center;
+  justify-content: center;
   text-decoration: none;
   user-select: none;
   -webkit-user-select: none;
   white-space: nowrap;
   vertical-align: middle;
-  transition:
-    background var(--wa-transition-fast) var(--wa-transition-easing),
-    border var(--wa-transition-fast) var(--wa-transition-easing),
-    box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
-    color var(--wa-transition-fast) var(--wa-transition-easing);
+  transition-property: background, border, box-shadow, color;
+  transition-duration: var(--wa-transition-fast);
+  transition-timing-function: var(--wa-transition-easing);
+  cursor: pointer;
+  padding: 0 var(--space, var(--wa-space-m));
+  font-family: inherit;
+  font-size: var(--size, var(--wa-font-size-m));
+  font-weight: var(--wa-font-weight-action);
+  --form-control-height: calc(
+    2 * var(--space-smaller, var(--wa-space-s)) + 1em * var(--wa-form-control-value-line-height)
+  );
+  height: var(--form-control-height);
+  line-height: calc(var(--form-control-height) - var(--border-width) * 2);
 }
 
-:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)):hover,
-:is(:host button, :host([href]) a):hover:not(.button--disabled, .button--loading) {
-  background-color: var(--background-color-hover, var(--background-color));
-  border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-  color: var(--label-color-hover, var(--label-color));
+button,
+input:is([type='button'], [type='reset'], [type='submit']),
+.wa-button:not([part~='base']) {
+  display: inline-flex;
+  background-color: var(--background-color);
+  border-color: var(--border-color, var(--background-color));
+  color: var(--label-color);
+
+  /* Interactive */
+  &:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
+    &:hover {
+      background-color: var(--background-color-hover, var(--background-color));
+      border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
+      color: var(--label-color-hover, var(--label-color));
+    }
+
+    &:active {
+      background-color: var(--background-color-active, var(--background-color));
+      border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
+      color: var(--label-color-active, var(--label-color));
+    }
+  }
+
+  /*
+   * States
+   */
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    /* When disabled, prevent mouse events from bubbling up from children */
+    * {
+      pointer-events: none;
+    }
+  }
 }
 
-:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)):active,
-:is(:host button, :host([href]) a):active:not(.button--disabled, .button--loading) {
-  background-color: var(--background-color-active, var(--background-color));
-  border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
-  color: var(--label-color-active, var(--label-color));
+/**
+ * Utilities
+ */
+
+/* Styles */
+
+.wa-outlined,
+:host([appearance~='outlined']) {
+  --background-color: transparent;
+  --background-color-hover: var(--color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+
+  --border-color: var(--color-border-loud);
+  --border-color-hover: var(--color-border-loud);
+
+  --label-color: var(--color-on-quiet);
+  --label-color-hover: var(--color-on-quiet);
+}
+
+.wa-filled,
+:host([appearance~='filled']) {
+  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
+  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
+
+  --label-color: var(--color-on-loud, var(--wa-color-neutral-on-loud));
+}
+
+.wa-tinted,
+:host([appearance~='tinted']) {
+  --background-color: var(--color-fill-normal, var(--wa-color-neutral-fill-normal));
+  --label-color: var(--color-on-normal, var(--wa-color-neutral-on-normal));
+
+  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
+  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
+}
+
+.wa-text,
+:host([appearance~='text']) {
+  --background-color: transparent;
+  --label-color: var(--color-on-quiet);
+
+  --background-color-hover: var(--color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+}
+
+.wa-pill,
+:host([pill]) {
+  border-radius: var(--wa-border-radius-pill);
 }
diff --git a/src/styles/utilities/variants.css b/src/styles/utilities/variants.css
index 219c2a5a1..ff05a7e19 100644
--- a/src/styles/utilities/variants.css
+++ b/src/styles/utilities/variants.css
@@ -1,4 +1,6 @@
-.wa-neutral {
+.wa-neutral,
+:host([variant='neutral']),
+:root {
   --color-fill-loud: var(--wa-color-neutral-fill-loud);
   --color-fill-normal: var(--wa-color-neutral-fill-normal);
   --color-fill-quiet: var(--wa-color-neutral-fill-quiet);
@@ -12,7 +14,8 @@
   --color-on-quiet: var(--wa-color-neutral-on-quiet);
 }
 
-.wa-brand {
+.wa-brand,
+:host([variant='brand']) {
   --color-fill-loud: var(--wa-color-brand-fill-loud);
   --color-fill-normal: var(--wa-color-brand-fill-normal);
   --color-fill-quiet: var(--wa-color-brand-fill-quiet);
@@ -26,7 +29,8 @@
   --color-on-quiet: var(--wa-color-brand-on-quiet);
 }
 
-.wa-success {
+.wa-success,
+:host([variant='success']) {
   --color-fill-loud: var(--wa-color-success-fill-loud);
   --color-fill-normal: var(--wa-color-success-fill-normal);
   --color-fill-quiet: var(--wa-color-success-fill-quiet);
@@ -40,7 +44,8 @@
   --color-on-quiet: var(--wa-color-success-on-quiet);
 }
 
-.wa-warning {
+.wa-warning,
+:host([variant='warning']) {
   --color-fill-loud: var(--wa-color-warning-fill-loud);
   --color-fill-normal: var(--wa-color-warning-fill-normal);
   --color-fill-quiet: var(--wa-color-warning-fill-quiet);
@@ -54,7 +59,8 @@
   --color-on-quiet: var(--wa-color-warning-on-quiet);
 }
 
-.wa-danger {
+.wa-danger,
+:host([variant='danger']) {
   --color-fill-loud: var(--wa-color-danger-fill-loud);
   --color-fill-normal: var(--wa-color-danger-fill-normal);
   --color-fill-quiet: var(--wa-color-danger-fill-quiet);

From 1fb8088fc8102277a8f96008c8d0a8f6105f44b1 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 02:03:01 -0500
Subject: [PATCH 12/41] Essentials page for button

---
 docs/docs/essentials/button.md       | 123 +++++++++++++++++++++++++++
 docs/docs/essentials/essentials.json |   3 +
 2 files changed, 126 insertions(+)
 create mode 100644 docs/docs/essentials/button.md
 create mode 100644 docs/docs/essentials/essentials.json

diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md
new file mode 100644
index 000000000..23bc72f1d
--- /dev/null
+++ b/docs/docs/essentials/button.md
@@ -0,0 +1,123 @@
+---
+title: Button
+---
+
+```html {.example}
+<button>Button</button>
+```
+
+## Examples
+
+### Variants
+
+Use the `variant` attribute to set the button's semantic variant.
+
+```html {.example}
+<button class="wa-neutral">Neutral</button>
+<button class="wa-brand">Brand</button>
+<button class="wa-success">Success</button>
+<button class="wa-warning">Warning</button>
+<button class="wa-danger">Danger</button>
+```
+
+### Appearance
+
+Use the `appearance` attribute to change the button's visual appearance.
+
+```html {.example}
+<div style="margin-block-end: 1rem;">
+  <button class="wa-filled wa-neutral">Filled</button>
+  <button class="wa-tinted wa-neutral">Tinted</button>
+  <button class="wa-outlined wa-neutral">Outlined</button>
+  <button class="wa-text wa-neutral">Text</button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <button class="wa-filled wa-brand">Filled</button>
+  <button class="wa-tinted wa-brand">Tinted</button>
+  <button class="wa-outlined wa-brand">Outlined</button>
+  <button class="wa-text wa-brand">Text</button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <button class="wa-filled wa-success">Filled</button>
+  <button class="wa-tinted wa-success">Tinted</button>
+  <button class="wa-outlined wa-success">Outlined</button>
+  <button class="wa-text wa-success">Text</button>
+</div>
+<div style="margin-block-end: 1rem;">
+  <button class="wa-filled wa-warning">Filled</button>
+  <button class="wa-tinted wa-warning">Tinted</button>
+  <button class="wa-outlined wa-warning">Outlined</button>
+  <button class="wa-text wa-warning">Text</button>
+</div>
+<div>
+  <button class="wa-filled wa-danger">Filled</button>
+  <button class="wa-tinted wa-danger">Tinted</button>
+  <button class="wa-outlined wa-danger">Outlined</button>
+  <button class="wa-text wa-danger">Text</button>
+</div>
+```
+
+### Sizes
+
+Use `wa-size-*` classes to change a button's size.
+
+```html {.example}
+<button class="wa-size-s">Small</button>
+<button class="wa-size-m">Medium</button>
+<button class="wa-size-l">Large</button>
+```
+
+### Pill Buttons
+
+Use the `wa-pill` class to give buttons rounded edges.
+
+```html {.example}
+<button class="wa-size-s wa-pill">Small</button>
+<button class="wa-size-m wa-pill">Medium</button>
+<button class="wa-size-l wa-pill">Large</button>
+```
+
+### Link Buttons
+
+It's often helpful to have a link that looks like a button.
+This is possible by adding a `wa-button` class to your link.
+
+```html {.example}
+<a href="https://example.com/" class="wa-button">Link</a>
+<a href="https://example.com/" target="_blank" class="wa-button">New Window</a>
+<a href="/assets/images/logo.svg" download="shoelace.svg" class="wa-button">Download</a>
+```
+
+### Setting a Custom Width
+
+As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
+
+```html {.example}
+<button class="wa-size-s" style="width: 100%; margin-bottom: 1rem;">Small</button>
+<button class="wa-size-m" style="width: 100%; margin-bottom: 1rem;">Medium</button>
+<button class="wa-size-l" style="width: 100%;">Large</button>
+```
+<!--
+
+### Loading
+
+Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
+
+```html {.example}
+<button class="wa-brand" loading>Brand</button>
+<button class="wa-success" loading>Success</button>
+<button class="wa-neutral" loading>Neutral</button>
+<button class="wa-warning" loading>Warning</button>
+<button class="wa-danger" loading>Danger</button>
+```
+
+### Disabled
+
+Use the `disabled` attribute to disable a button.
+
+```html {.example}
+<button class="wa-brand" disabled>Brand</button>
+<button class="wa-success" disabled>Success</button>
+<button class="wa-neutral" disabled>Neutral</button>
+<button class="wa-warning" disabled>Warning</button>
+``` -->
diff --git a/docs/docs/essentials/essentials.json b/docs/docs/essentials/essentials.json
new file mode 100644
index 000000000..8e3becca3
--- /dev/null
+++ b/docs/docs/essentials/essentials.json
@@ -0,0 +1,3 @@
+{
+  "layout": "docs.njk"
+}

From 87621ef1096b1c6ffa41e13f765ac513de49e927 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 02:22:08 -0500
Subject: [PATCH 13/41] Rename variant color tokens to be `wa-` prefixed, since
 we specify them on `:root` too

---
 src/styles/native/button.css      | 26 ++++-----
 src/styles/utilities/variants.css | 90 +++++++++++++++----------------
 2 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index 6a9507e33..8aa8e9e73 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -1,7 +1,7 @@
 :is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *, .wa-off, .wa-off *)),
 :host,
 .wa-button:where(:not([part~='base'])) {
-  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
@@ -10,7 +10,7 @@
   --border-color-active: var(--border-color);
   --border-width: max(1px, var(--wa-form-control-border-width));
 
-  --label-color: var(--color-on-loud, var(--wa-color-neutral-on-loud));
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
   --label-color-hover: var(--label-color);
   --label-color-active: var(--label-color);
 
@@ -99,29 +99,29 @@ input:is([type='button'], [type='reset'], [type='submit']),
 .wa-outlined,
 :host([appearance~='outlined']) {
   --background-color: transparent;
-  --background-color-hover: var(--color-fill-quiet);
+  --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
 
-  --border-color: var(--color-border-loud);
-  --border-color-hover: var(--color-border-loud);
+  --border-color: var(--wa-color-border-loud);
+  --border-color-hover: var(--wa-color-border-loud);
 
-  --label-color: var(--color-on-quiet);
-  --label-color-hover: var(--color-on-quiet);
+  --label-color: var(--wa-color-on-quiet);
+  --label-color-hover: var(--wa-color-on-quiet);
 }
 
 .wa-filled,
 :host([appearance~='filled']) {
-  --background-color: var(--color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
-  --label-color: var(--color-on-loud, var(--wa-color-neutral-on-loud));
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 }
 
 .wa-tinted,
 :host([appearance~='tinted']) {
-  --background-color: var(--color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--color-on-normal, var(--wa-color-neutral-on-normal));
+  --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 
   --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
   --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
@@ -130,9 +130,9 @@ input:is([type='button'], [type='reset'], [type='submit']),
 .wa-text,
 :host([appearance~='text']) {
   --background-color: transparent;
-  --label-color: var(--color-on-quiet);
+  --label-color: var(--wa-color-on-quiet);
 
-  --background-color-hover: var(--color-fill-quiet);
+  --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
 }
 
diff --git a/src/styles/utilities/variants.css b/src/styles/utilities/variants.css
index ff05a7e19..475b681ef 100644
--- a/src/styles/utilities/variants.css
+++ b/src/styles/utilities/variants.css
@@ -1,75 +1,75 @@
 .wa-neutral,
 :host([variant='neutral']),
 :root {
-  --color-fill-loud: var(--wa-color-neutral-fill-loud);
-  --color-fill-normal: var(--wa-color-neutral-fill-normal);
-  --color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
 
-  --color-border-loud: var(--wa-color-neutral-border-loud);
-  --color-border-normal: var(--wa-color-neutral-border-normal);
-  --color-border-quiet: var(--wa-color-neutral-border-quiet);
+  --wa-color-border-loud: var(--wa-color-neutral-border-loud);
+  --wa-color-border-normal: var(--wa-color-neutral-border-normal);
+  --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
 
-  --color-on-loud: var(--wa-color-neutral-on-loud);
-  --color-on-normal: var(--wa-color-neutral-on-normal);
-  --color-on-quiet: var(--wa-color-neutral-on-quiet);
+  --wa-color-on-loud: var(--wa-color-neutral-on-loud);
+  --wa-color-on-normal: var(--wa-color-neutral-on-normal);
+  --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
 }
 
 .wa-brand,
 :host([variant='brand']) {
-  --color-fill-loud: var(--wa-color-brand-fill-loud);
-  --color-fill-normal: var(--wa-color-brand-fill-normal);
-  --color-fill-quiet: var(--wa-color-brand-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
 
-  --color-border-loud: var(--wa-color-brand-border-loud);
-  --color-border-normal: var(--wa-color-brand-border-normal);
-  --color-border-quiet: var(--wa-color-brand-border-quiet);
+  --wa-color-border-loud: var(--wa-color-brand-border-loud);
+  --wa-color-border-normal: var(--wa-color-brand-border-normal);
+  --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
 
-  --color-on-loud: var(--wa-color-brand-on-loud);
-  --color-on-normal: var(--wa-color-brand-on-normal);
-  --color-on-quiet: var(--wa-color-brand-on-quiet);
+  --wa-color-on-loud: var(--wa-color-brand-on-loud);
+  --wa-color-on-normal: var(--wa-color-brand-on-normal);
+  --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
 }
 
 .wa-success,
 :host([variant='success']) {
-  --color-fill-loud: var(--wa-color-success-fill-loud);
-  --color-fill-normal: var(--wa-color-success-fill-normal);
-  --color-fill-quiet: var(--wa-color-success-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-success-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-success-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
 
-  --color-border-loud: var(--wa-color-success-border-loud);
-  --color-border-normal: var(--wa-color-success-border-normal);
-  --color-border-quiet: var(--wa-color-success-border-quiet);
+  --wa-color-border-loud: var(--wa-color-success-border-loud);
+  --wa-color-border-normal: var(--wa-color-success-border-normal);
+  --wa-color-border-quiet: var(--wa-color-success-border-quiet);
 
-  --color-on-loud: var(--wa-color-success-on-loud);
-  --color-on-normal: var(--wa-color-success-on-normal);
-  --color-on-quiet: var(--wa-color-success-on-quiet);
+  --wa-color-on-loud: var(--wa-color-success-on-loud);
+  --wa-color-on-normal: var(--wa-color-success-on-normal);
+  --wa-color-on-quiet: var(--wa-color-success-on-quiet);
 }
 
 .wa-warning,
 :host([variant='warning']) {
-  --color-fill-loud: var(--wa-color-warning-fill-loud);
-  --color-fill-normal: var(--wa-color-warning-fill-normal);
-  --color-fill-quiet: var(--wa-color-warning-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
 
-  --color-border-loud: var(--wa-color-warning-border-loud);
-  --color-border-normal: var(--wa-color-warning-border-normal);
-  --color-border-quiet: var(--wa-color-warning-border-quiet);
+  --wa-color-border-loud: var(--wa-color-warning-border-loud);
+  --wa-color-border-normal: var(--wa-color-warning-border-normal);
+  --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
 
-  --color-on-loud: var(--wa-color-warning-on-loud);
-  --color-on-normal: var(--wa-color-warning-on-normal);
-  --color-on-quiet: var(--wa-color-warning-on-quiet);
+  --wa-color-on-loud: var(--wa-color-warning-on-loud);
+  --wa-color-on-normal: var(--wa-color-warning-on-normal);
+  --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
 }
 
 .wa-danger,
 :host([variant='danger']) {
-  --color-fill-loud: var(--wa-color-danger-fill-loud);
-  --color-fill-normal: var(--wa-color-danger-fill-normal);
-  --color-fill-quiet: var(--wa-color-danger-fill-quiet);
+  --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
+  --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
+  --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
 
-  --color-border-loud: var(--wa-color-danger-border-loud);
-  --color-border-normal: var(--wa-color-danger-border-normal);
-  --color-border-quiet: var(--wa-color-danger-border-quiet);
+  --wa-color-border-loud: var(--wa-color-danger-border-loud);
+  --wa-color-border-normal: var(--wa-color-danger-border-normal);
+  --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
 
-  --color-on-loud: var(--wa-color-danger-on-loud);
-  --color-on-normal: var(--wa-color-danger-on-normal);
-  --color-on-quiet: var(--wa-color-danger-on-quiet);
+  --wa-color-on-loud: var(--wa-color-danger-on-loud);
+  --wa-color-on-normal: var(--wa-color-danger-on-normal);
+  --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
 }

From 4852f5614f1ea202e3d28404ae419bbd5c957837 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 02:22:28 -0500
Subject: [PATCH 14/41] Use variant helper to simplify badge styles

---
 src/components/badge/badge.css | 27 ++-------------------------
 src/components/badge/badge.ts  |  8 ++------
 2 files changed, 4 insertions(+), 31 deletions(-)

diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index 07fdb6928..ed1a0a8d6 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -3,35 +3,12 @@
   --border-radius: var(--wa-border-radius-xs);
   --border-style: var(--wa-border-style);
   --border-width: var(--wa-border-width-s);
+  --background-color: var(--wa-color-fill-loud);
+  --content-color: var(--wa-color-on-loud);
 
   display: inline-flex;
 }
 
-:host([variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-loud);
-  --content-color: var(--wa-color-brand-on-loud);
-}
-
-:host([variant='success']) {
-  --background-color: var(--wa-color-success-fill-loud);
-  --content-color: var(--wa-color-success-on-loud);
-}
-
-:host([variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-loud);
-  --content-color: var(--wa-color-warning-on-loud);
-}
-
-:host([variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
-}
-
-:host([variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-loud);
-  --content-color: var(--wa-color-danger-on-loud);
-}
-
 .badge {
   display: inline-flex;
   align-items: center;
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index dca1a1573..b50f3f39e 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import variantStyles from '../../styles/utilities/variants.css';
 import styles from './badge.css';
 
 /**
@@ -23,7 +24,7 @@ import styles from './badge.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = styles;
+  static shadowStyle = [variantStyles, styles];
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
@@ -40,11 +41,6 @@ export default class WaBadge extends WebAwesomeElement {
         part="base"
         class=${classMap({
           badge: true,
-          'badge--brand': this.variant === 'brand',
-          'badge--success': this.variant === 'success',
-          'badge--neutral': this.variant === 'neutral',
-          'badge--warning': this.variant === 'warning',
-          'badge--danger': this.variant === 'danger',
           'badge--pill': this.pill,
           'badge--pulse': this.pulse,
         })}

From 8a321951d3bedaf6c0f746dd293de8dfddcbf87d Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:03:28 -0500
Subject: [PATCH 15/41] Fix wording

---
 docs/docs/essentials/button.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/docs/essentials/button.md b/docs/docs/essentials/button.md
index 23bc72f1d..785b47933 100644
--- a/docs/docs/essentials/button.md
+++ b/docs/docs/essentials/button.md
@@ -10,7 +10,7 @@ title: Button
 
 ### Variants
 
-Use the `variant` attribute to set the button's semantic variant.
+Use the variant utility classes to set the button's semantic variant.
 
 ```html {.example}
 <button class="wa-neutral">Neutral</button>
@@ -22,7 +22,7 @@ Use the `variant` attribute to set the button's semantic variant.
 
 ### Appearance
 
-Use the `appearance` attribute to change the button's visual appearance.
+Use the appearance utility classes to change the button's visual appearance:
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">

From cbab3b09e51c0272a290c7d59a0fc18550c70262 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:03:55 -0500
Subject: [PATCH 16/41] Move appearance utils to separate file

---
 src/components/button/button.ts     |  3 ++-
 src/styles/applied.css              |  1 +
 src/styles/native/button.css        | 40 -----------------------------
 src/styles/utilities/appearance.css | 39 ++++++++++++++++++++++++++++
 4 files changed, 42 insertions(+), 41 deletions(-)
 create mode 100644 src/styles/utilities/appearance.css

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a03ad120e..a6eb62b82 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -10,6 +10,7 @@ import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/button.css';
 import sizeStyles from '../../styles/shadow/size.css';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -52,7 +53,7 @@ import styles from './button.css';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [variantStyles, sizeStyles, nativeStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
diff --git a/src/styles/applied.css b/src/styles/applied.css
index fadc9b0fe..8fd9ce9da 100644
--- a/src/styles/applied.css
+++ b/src/styles/applied.css
@@ -10,6 +10,7 @@
 
 @import url('shadow/size.css');
 @import url('utilities/variants.css');
+@import url('utilities/appearance.css');
 
 /**
  * Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index 8aa8e9e73..e7016fd1d 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -96,46 +96,6 @@ input:is([type='button'], [type='reset'], [type='submit']),
 
 /* Styles */
 
-.wa-outlined,
-:host([appearance~='outlined']) {
-  --background-color: transparent;
-  --background-color-hover: var(--wa-color-fill-quiet);
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-
-  --border-color: var(--wa-color-border-loud);
-  --border-color-hover: var(--wa-color-border-loud);
-
-  --label-color: var(--wa-color-on-quiet);
-  --label-color-hover: var(--wa-color-on-quiet);
-}
-
-.wa-filled,
-:host([appearance~='filled']) {
-  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
-  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-}
-
-.wa-tinted,
-:host([appearance~='tinted']) {
-  --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-
-  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
-  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
-}
-
-.wa-text,
-:host([appearance~='text']) {
-  --background-color: transparent;
-  --label-color: var(--wa-color-on-quiet);
-
-  --background-color-hover: var(--wa-color-fill-quiet);
-  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-}
-
 .wa-pill,
 :host([pill]) {
   border-radius: var(--wa-border-radius-pill);
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
new file mode 100644
index 000000000..7e4512548
--- /dev/null
+++ b/src/styles/utilities/appearance.css
@@ -0,0 +1,39 @@
+.wa-outlined,
+:host([appearance~='outlined']) {
+  --background-color: transparent;
+  --background-color-hover: var(--wa-color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+
+  --border-color: var(--wa-color-border-loud);
+  --border-color-hover: var(--wa-color-border-loud);
+
+  --label-color: var(--wa-color-on-quiet);
+  --label-color-hover: var(--wa-color-on-quiet);
+}
+
+.wa-filled,
+:host([appearance~='filled']) {
+  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
+  --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
+
+  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+}
+
+.wa-tinted,
+:host([appearance~='tinted']) {
+  --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+
+  --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
+  --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
+}
+
+.wa-text,
+:host([appearance~='text']) {
+  --background-color: transparent;
+  --label-color: var(--wa-color-on-quiet);
+
+  --background-color-hover: var(--wa-color-fill-quiet);
+  --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
+}

From 84909930fb5247a2bc040df8ab3b96922d06626b Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:04:36 -0500
Subject: [PATCH 17/41] Simplify badge HTML & styles

---
 src/components/badge/badge.css | 27 ++++++++-------------------
 src/components/badge/badge.ts  | 17 ++++-------------
 2 files changed, 12 insertions(+), 32 deletions(-)

diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index ed1a0a8d6..1977f4e9f 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -1,27 +1,16 @@
 :host {
-  --border-color: var(--background-color);
-  --border-radius: var(--wa-border-radius-xs);
-  --border-style: var(--wa-border-style);
-  --border-width: var(--wa-border-width-s);
-  --background-color: var(--wa-color-fill-loud);
-  --content-color: var(--wa-color-on-loud);
-
-  display: inline-flex;
-}
-
-.badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: max(var(--wa-font-size-2xs), 0.75em);
   font-weight: var(--wa-font-weight-semibold);
   line-height: 1;
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  color: var(--content-color);
+  background-color: var(--background-color, var(--wa-color-fill-loud));
+  border-color: var(--border-color, transparent);
+  border-radius: var(--wa-border-radius-xs);
+  border-style: var(--wa-border-style);
+  border-width: var(--wa-border-width-s);
+  color: var(--label-color, var(--wa-color-on-loud));
   white-space: nowrap;
   padding: 0.375em 0.625em;
   user-select: none;
@@ -30,12 +19,12 @@
 }
 
 /* Pill modifier */
-.badge--pill {
+:host([pill]) {
   border-radius: var(--wa-border-radius-pill);
 }
 
 /* Pulse modifier */
-.badge--pulse {
+:host([pulse]) {
   --pulse-color: var(--background-color);
 
   animation: pulse 1.5s infinite;
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index b50f3f39e..16abe27a6 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -29,6 +29,9 @@ export default class WaBadge extends WebAwesomeElement {
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
 
+  /** The badge's visual appearance. */
+  @property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' = 'filled';
+
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
 
@@ -36,19 +39,7 @@ export default class WaBadge extends WebAwesomeElement {
   @property({ type: Boolean, reflect: true }) pulse = false;
 
   render() {
-    return html`
-      <span
-        part="base"
-        class=${classMap({
-          badge: true,
-          'badge--pill': this.pill,
-          'badge--pulse': this.pulse,
-        })}
-        role="status"
-      >
-        <slot></slot>
-      </span>
-    `;
+    return html` <slot part="base" role="status"></slot>`;
   }
 }
 

From 0a796d618f61f103174cb6fb64e93fa0ea7fb1e8 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:04:44 -0500
Subject: [PATCH 18/41] Badge appearances!

---
 docs/docs/components/badge.md | 37 +++++++++++++++++++++++++++++++++++
 src/components/badge/badge.ts |  3 ++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index 5f6001210..dd37b8558 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -22,6 +22,43 @@ Set the `variant` attribute to change the badge's variant.
 <wa-badge variant="danger">Danger</wa-badge>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the badge's visual appearance.
+
+```html {.example}
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="neutral">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="brand">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="success">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="success">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
+</div>
+<div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="warning">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
+</div>
+<div>
+  <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="danger">Both</wa-badge>
+  <wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
+  <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
+</div>
+```
+
 ### Pill Badges
 
 Use the `pill` attribute to give badges rounded edges.
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 16abe27a6..10c028e41 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import styles from './badge.css';
 
@@ -24,7 +25,7 @@ import styles from './badge.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, styles];
 
   /** The badge's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';

From 0d003c030953e76203ff459ffd7a972e0b3a2653 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:06:18 -0500
Subject: [PATCH 19/41] Fix build

---
 src/components/badge/badge.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 10c028e41..76faed79c 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';

From 78432c41d895c6f558fa0640b0a7bb0363d35102 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:22:31 -0500
Subject: [PATCH 20/41] Better appearance combinations

---
 docs/docs/components/badge.md       | 15 ++++++++++-----
 src/styles/utilities/appearance.css | 10 +++++++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index dd37b8558..a095a28bb 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -28,32 +28,37 @@ Use the `appearance` attribute to change the badge's visual appearance.
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
   <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
-  <wa-badge appearance="tinted outlined" variant="neutral">Both</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="neutral">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
   <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
-  <wa-badge appearance="tinted outlined" variant="brand">Both</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="brand">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
   <wa-badge appearance="filled" variant="success">Filled</wa-badge>
-  <wa-badge appearance="tinted outlined" variant="success">Both</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="success">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
+  <wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
   <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
-  <wa-badge appearance="tinted outlined" variant="warning">Both</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="warning">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
 </div>
 <div>
+  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
   <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
-  <wa-badge appearance="tinted outlined" variant="danger">Both</wa-badge>
+  <wa-badge appearance="tinted outlined" variant="danger">T+O</wa-badge>
   <wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
   <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
 </div>
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index 7e4512548..4e248a0ad 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -13,11 +13,15 @@
 
 .wa-filled,
 :host([appearance~='filled']) {
-  --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+  --background-color: var(--wa-color-fill-loud);
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
   --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+
+  &:is(.wa-outlined, :host([appearance~='outlined'])) {
+    --border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
+  }
 }
 
 .wa-tinted,
@@ -27,6 +31,10 @@
 
   --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
   --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
+
+  &:is(.wa-outlined, :host([appearance~='outlined'])) {
+    --border-color: var(--wa-color-border-normal);
+  }
 }
 
 .wa-text,

From dbfaa4299ff36fa69c4e47f43cd2812b33ac2e96 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:40:28 -0500
Subject: [PATCH 21/41] [Avatar] Drop BEM

---
 src/components/avatar/avatar.css | 15 +++++++--------
 src/components/avatar/avatar.ts  | 12 ++++++------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index 0ce9455da..f2e34991a 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -22,21 +22,20 @@
   vertical-align: middle;
 }
 
-.avatar--circle,
-.avatar--circle .avatar__image {
+:host([shape='circle']) {
   border-radius: var(--wa-border-radius-circle);
 }
 
-.avatar--rounded,
-.avatar--rounded .avatar__image {
+.rounded,
+.rounded .image {
   border-radius: var(--wa-border-radius-s);
 }
 
-.avatar--square {
+.square {
   border-radius: 0;
 }
 
-.avatar__icon {
+.icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -47,12 +46,12 @@
   height: 100%;
 }
 
-.avatar__initials {
+.initials {
   line-height: 1;
   text-transform: uppercase;
 }
 
-.avatar__image {
+.image {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index b95c1354d..0130c7ec0 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -65,7 +65,7 @@ export default class WaAvatar extends WebAwesomeElement {
     const avatarWithImage = html`
       <img
         part="image"
-        class="avatar__image"
+        class="image"
         src="${this.image}"
         loading="${this.loading}"
         alt=""
@@ -76,10 +76,10 @@ export default class WaAvatar extends WebAwesomeElement {
     let avatarWithoutImage = html``;
 
     if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+      avatarWithoutImage = html`<div part="initials" class="initials">${this.initials}</div>`;
     } else {
       avatarWithoutImage = html`
-        <div part="icon" class="avatar__icon" aria-hidden="true">
+        <div part="icon" class="icon" aria-hidden="true">
           <slot name="icon">
             <wa-icon name="user" library="system" variant="solid"></wa-icon>
           </slot>
@@ -92,9 +92,9 @@ export default class WaAvatar extends WebAwesomeElement {
         part="base"
         class=${classMap({
           avatar: true,
-          'avatar--circle': this.shape === 'circle',
-          'avatar--rounded': this.shape === 'rounded',
-          'avatar--square': this.shape === 'square',
+          circle: this.shape === 'circle',
+          rounded: this.shape === 'rounded',
+          square: this.shape === 'square',
         })}
         role="img"
         aria-label=${this.label}

From a31de87882f66d60e187bc1dbde2585e3ccd1b6e Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 03:58:58 -0500
Subject: [PATCH 22/41] [Avatar] Simplify HTML & CSS, drop `base` (rel #207)

---
 docs/docs/components/avatar.md   |  2 +-
 src/components/avatar/avatar.css | 17 +++++------------
 src/components/avatar/avatar.ts  | 30 ++++++++----------------------
 3 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
index cd2b53f68..5c4081f07 100644
--- a/docs/docs/components/avatar.md
+++ b/docs/docs/components/avatar.md
@@ -97,7 +97,7 @@ You can group avatars with a few lines of CSS.
     margin-left: calc(-1 * var(--wa-space-m));
   }
 
-  .avatar-group wa-avatar::part(base) {
+  .avatar-group wa-avatar {
     border: solid 2px var(--wa-color-surface-default);
   }
 </style>
diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index f2e34991a..5029f036e 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -3,10 +3,6 @@
   --content-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
-  display: inline-block;
-}
-
-.avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -20,19 +16,15 @@
   user-select: none;
   -webkit-user-select: none;
   vertical-align: middle;
-}
-
-:host([shape='circle']) {
   border-radius: var(--wa-border-radius-circle);
 }
 
-.rounded,
-.rounded .image {
-  border-radius: var(--wa-border-radius-s);
+:host([shape='square']) {
+  border-radius: 0;
 }
 
-.square {
-  border-radius: 0;
+:host([shape='rounded']) {
+  border-radius: var(--wa-border-radius-s);
 }
 
 .icon {
@@ -59,4 +51,5 @@
   height: 100%;
   object-fit: cover;
   overflow: hidden;
+  border-radius: inherit;
 }
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 0130c7ec0..317f35c56 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -1,6 +1,5 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { WaErrorEvent } from '../../events/error.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -69,6 +68,7 @@ export default class WaAvatar extends WebAwesomeElement {
         src="${this.image}"
         loading="${this.loading}"
         alt=""
+        aria-label=${this.label}
         @error="${this.handleImageLoadError}"
       />
     `;
@@ -76,32 +76,18 @@ export default class WaAvatar extends WebAwesomeElement {
     let avatarWithoutImage = html``;
 
     if (this.initials) {
-      avatarWithoutImage = html`<div part="initials" class="initials">${this.initials}</div>`;
+      avatarWithoutImage = html`<div part="initials" class="initials" role="img" aria-label=${this.label}>
+        ${this.initials}
+      </div>`;
     } else {
       avatarWithoutImage = html`
-        <div part="icon" class="icon" aria-hidden="true">
-          <slot name="icon">
-            <wa-icon name="user" library="system" variant="solid"></wa-icon>
-          </slot>
-        </div>
+        <slot name="icon" part="icon" class="icon" role="img" aria-label=${this.label}>
+          <wa-icon name="user" library="system" variant="solid"></wa-icon>
+        </slot>
       `;
     }
 
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          avatar: true,
-          circle: this.shape === 'circle',
-          rounded: this.shape === 'rounded',
-          square: this.shape === 'square',
-        })}
-        role="img"
-        aria-label=${this.label}
-      >
-        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
-      </div>
-    `;
+    return html` ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage} `;
   }
 }
 

From 8e01281c122b08296d40703ec7044378f6aa113b Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:01:24 -0500
Subject: [PATCH 23/41] Leftover

---
 src/styles/themes/brutalist.css | 2 +-
 src/styles/themes/premium.css   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css
index cbceb13f3..b47bdebb5 100644
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -704,7 +704,7 @@
   }
 
   /* imitating the rounded avatar */
-  .blog wa-avatar::part(base) {
+  .blog wa-avatar {
     background-color: transparent;
   }
 
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
index 53a74a66b..5dd26853e 100644
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -563,7 +563,7 @@
     font-style: italic;
   }
 
-  .blog wa-avatar::part(base) {
+  .blog wa-avatar {
     border-radius: var(--wa-border-radius-circle);
     overflow: hidden;
   }

From a6b71e119cacfa7bf430694cf5faa1c7543fe851 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:06:47 -0500
Subject: [PATCH 24/41] Use variant helper in tag & callout

---
 src/components/callout/callout.css | 33 +++--------------------------
 src/components/callout/callout.ts  |  3 ++-
 src/components/tag/tag.css         | 34 ++++--------------------------
 src/components/tag/tag.ts          |  3 ++-
 4 files changed, 11 insertions(+), 62 deletions(-)

diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css
index 8bf187924..6b52d0074 100644
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -2,6 +2,9 @@
   --icon-color: currentColor;
   --icon-size: var(--wa-font-size-l);
   --spacing: var(--wa-space-m);
+  --background-color: var(--wa-color-fill-quiet);
+  --border-color: var(--wa-color-border-quiet);
+  --content-color: var(--wa-color-on-normal);
 
   position: relative;
   display: flex;
@@ -15,36 +18,6 @@
   padding: var(--spacing);
 }
 
-:host([variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-quiet);
-  --border-color: var(--wa-color-brand-border-quiet);
-  --content-color: var(--wa-color-brand-on-normal);
-}
-
-:host([variant='success']) {
-  --background-color: var(--wa-color-success-fill-quiet);
-  --border-color: var(--wa-color-success-border-quiet);
-  --content-color: var(--wa-color-success-on-normal);
-}
-
-:host([variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-quiet);
-  --border-color: var(--wa-color-neutral-border-quiet);
-  --content-color: var(--wa-color-neutral-on-normal);
-}
-
-:host([variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-quiet);
-  --border-color: var(--wa-color-warning-border-quiet);
-  --content-color: var(--wa-color-warning-on-normal);
-}
-
-:host([variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-quiet);
-  --border-color: var(--wa-color-danger-border-quiet);
-  --content-color: var(--wa-color-danger-on-normal);
-}
-
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;
diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts
index ddbf4d944..dae596097 100644
--- a/src/components/callout/callout.ts
+++ b/src/components/callout/callout.ts
@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import variantStyles from '../../styles/utilities/variants.css';
 import styles from './callout.css';
 
 /**
@@ -21,7 +22,7 @@ import styles from './callout.css';
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
-  static shadowStyle = styles;
+  static shadowStyle = [variantStyles, styles];
 
   /** The callout's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index 2590abe48..6ee0fb197 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -3,39 +3,13 @@
   --border-style: var(--wa-border-style);
   --border-width: var(--wa-border-width-s);
 
+  --background-color: var(--wa-color-fill-quiet);
+  --border-color: var(--wa-color-border-normal);
+  --content-color: var(--wa-color-on-normal);
+
   display: inline-block;
 }
 
-:host([variant='brand']) {
-  --background-color: var(--wa-color-brand-fill-quiet);
-  --border-color: var(--wa-color-brand-border-normal);
-  --content-color: var(--wa-color-brand-on-normal);
-}
-
-:host([variant='success']) {
-  --background-color: var(--wa-color-success-fill-quiet);
-  --border-color: var(--wa-color-success-border-normal);
-  --content-color: var(--wa-color-success-on-normal);
-}
-
-:host([variant='warning']) {
-  --background-color: var(--wa-color-warning-fill-quiet);
-  --border-color: var(--wa-color-warning-border-normal);
-  --content-color: var(--wa-color-warning-on-normal);
-}
-
-:host([variant='neutral']) {
-  --background-color: var(--wa-color-neutral-fill-quiet);
-  --border-color: var(--wa-color-neutral-border-normal);
-  --content-color: var(--wa-color-neutral-on-normal);
-}
-
-:host([variant='danger']) {
-  --background-color: var(--wa-color-danger-fill-quiet);
-  --border-color: var(--wa-color-danger-border-normal);
-  --content-color: var(--wa-color-danger-on-normal);
-}
-
 .tag {
   display: flex;
   align-items: center;
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 973200bf0..20f600f3e 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { WaRemoveEvent } from '../../events/remove.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
 import styles from './tag.css';
@@ -33,7 +34,7 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static shadowStyle = styles;
+  static shadowStyle = [variantStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 

From e60a5032dafd04b17ce661fe207c63843101e3fd Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:07:45 -0500
Subject: [PATCH 25/41] Remove classes no longer needed

---
 src/components/tag/tag.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 20f600f3e..793bca70d 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -61,14 +61,6 @@ export default class WaTag extends WebAwesomeElement {
         class=${classMap({
           tag: true,
 
-          // Types
-          'tag--brand': this.variant === 'brand',
-          'tag--success': this.variant === 'success',
-          'tag--neutral': this.variant === 'neutral',
-          'tag--warning': this.variant === 'warning',
-          'tag--danger': this.variant === 'danger',
-          'tag--text': this.variant === 'text',
-
           // Sizes
           'tag--small': this.size === 'small',
           'tag--medium': this.size === 'medium',

From 6bb6bcc53808be0c956b53a953a50954b00e8f5b Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:27:32 -0500
Subject: [PATCH 26/41] Simplify tag

- Drop `base`, rel #207
- Use size helper
- Drop classes duplicating attributes
---
 src/components/tag/tag.css | 78 ++++++++++----------------------------
 src/components/tag/tag.ts  | 52 +++++++++----------------
 2 files changed, 39 insertions(+), 91 deletions(-)

diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index 6ee0fb197..68dc6af1f 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -1,79 +1,43 @@
 :host {
-  --border-radius: var(--wa-border-radius-xs);
-  --border-style: var(--wa-border-style);
-  --border-width: var(--wa-border-width-s);
-
-  --background-color: var(--wa-color-fill-quiet);
-  --border-color: var(--wa-color-border-normal);
-  --content-color: var(--wa-color-on-normal);
-
-  display: inline-block;
-}
-
-.tag {
-  display: flex;
+  display: inline-flex;
+  border-radius: var(--wa-border-radius-s);
   align-items: center;
-  background-color: var(--background-color);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  color: var(--content-color);
+  background-color: var(--wa-color-fill-quiet);
+  border-color: var(--wa-color-border-normal);
+  border-style: var(--wa-border-style);
+  border-width: var(--wa-border-width-s);
+  color: var(--wa-color-on-normal);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
+  --size-s: var(--wa-font-size-xs);
+  --size-m: var(--wa-font-size-s);
+  --size-l: var(--wa-font-size-m);
+  --form-control-height: calc(var(--space-smaller) * 2 + 1em * var(--wa-form-control-value-line-height));
+  height: calc(var(--form-control-height) * 0.8);
+  line-height: calc(var(--form-control-height) - var(--wa-form-control-border-width) * 2);
+  padding: 0 var(--space-smaller);
 }
 
-.tag__remove::part(base) {
+[part='remove-button'] {
   color: inherit;
   padding: 0;
+  margin-inline-start: 0.75em;
 }
 
-.tag:hover > wa-icon-button {
+:host(:hover) > wa-icon-button {
   color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
 }
 
-.tag:active > wa-icon-button {
+:host(:active) > wa-icon-button {
   color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
 }
 
 /*
-   * Size modifiers
-   */
+ * Pill modifier
+ */
 
-.tag--small {
-  font-size: var(--wa-font-size-xs);
-  height: calc(var(--wa-form-control-height-s) * 0.8);
-  line-height: calc(var(--wa-form-control-height-s) - var(--wa-form-control-border-width) * 2);
-  border-radius: var(--wa-border-radius-s);
-  padding: 0 var(--wa-space-xs);
-}
-
-.tag--medium {
-  font-size: var(--wa-font-size-s);
-  height: calc(var(--wa-form-control-height-m) * 0.8);
-  line-height: calc(var(--wa-form-control-height-m) - var(--wa-form-control-border-width) * 2);
-  border-radius: var(--wa-border-radius-s);
-  padding: 0 var(--wa-space-s);
-}
-
-.tag--large {
-  font-size: var(--wa-font-size-m);
-  height: calc(var(--wa-form-control-height-l) * 0.8);
-  line-height: calc(var(--wa-form-control-height-l) - var(--wa-form-control-border-width) * 2);
-  border-radius: var(--wa-border-radius-s);
-  padding: 0 var(--wa-space-m);
-}
-
-.tag__remove {
-  margin-inline-start: 0.75em;
-}
-
-/*
-   * Pill modifier
-   */
-
-.tag--pill {
+:host([pill]) {
   border-radius: var(--wa-border-radius-pill);
 }
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 793bca70d..4555321a7 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -1,8 +1,8 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { WaRemoveEvent } from '../../events/remove.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import sizeStyles from '../../styles/shadow/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
@@ -34,7 +34,7 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, styles];
+  static shadowStyle = [sizeStyles, variantStyles, styles];
 
   private readonly localize = new LocalizeController(this);
 
@@ -56,39 +56,23 @@ export default class WaTag extends WebAwesomeElement {
 
   render() {
     return html`
-      <span
-        part="base"
-        class=${classMap({
-          tag: true,
+      <slot part="content" class="tag__content"></slot>
 
-          // Sizes
-          'tag--small': this.size === 'small',
-          'tag--medium': this.size === 'medium',
-          'tag--large': this.size === 'large',
-
-          // Modifiers
-          'tag--pill': this.pill,
-          'tag--removable': this.removable,
-        })}
-      >
-        <slot part="content" class="tag__content"></slot>
-
-        ${this.removable
-          ? html`
-              <wa-icon-button
-                part="remove-button"
-                exportparts="base:remove-button__base"
-                name="xmark"
-                library="system"
-                variant="solid"
-                label=${this.localize.term('remove')}
-                class="tag__remove"
-                @click=${this.handleRemoveClick}
-                tabindex="-1"
-              ></wa-icon-button>
-            `
-          : ''}
-      </span>
+      ${this.removable
+        ? html`
+            <wa-icon-button
+              part="remove-button"
+              exportparts="base:remove-button__base"
+              name="xmark"
+              library="system"
+              variant="solid"
+              label=${this.localize.term('remove')}
+              class="tag__remove"
+              @click=${this.handleRemoveClick}
+              tabindex="-1"
+            ></wa-icon-button>
+          `
+        : ''}
     `;
   }
 }

From d9b8fc6806fd4f86f2ad3c190daaa2bda73bc966 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:29:37 -0500
Subject: [PATCH 27/41] Prettier

---
 src/components/format-bytes/format-bytes.ts   |  2 +-
 src/components/format-date/format-date.ts     |  2 +-
 src/components/format-number/format-number.ts |  2 +-
 src/components/input/input.ts                 | 16 ++++++++--------
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/format-bytes/format-bytes.ts b/src/components/format-bytes/format-bytes.ts
index 7aecb7902..1dcb34f68 100644
--- a/src/components/format-bytes/format-bytes.ts
+++ b/src/components/format-bytes/format-bytes.ts
@@ -40,7 +40,7 @@ export default class WaFormatBytes extends WebAwesomeElement {
     return this.localize.number(valueToFormat, {
       style: 'unit',
       unit,
-      unitDisplay: this.display
+      unitDisplay: this.display,
     });
   }
 }
diff --git a/src/components/format-date/format-date.ts b/src/components/format-date/format-date.ts
index 1f6c615d3..f0448c4b0 100644
--- a/src/components/format-date/format-date.ts
+++ b/src/components/format-date/format-date.ts
@@ -79,7 +79,7 @@ export default class WaFormatDate extends WebAwesomeElement {
           second: this.second,
           timeZoneName: this.timeZoneName,
           timeZone: this.timeZone,
-          hour12: hour12
+          hour12: hour12,
         })}
       </time>
     `;
diff --git a/src/components/format-number/format-number.ts b/src/components/format-number/format-number.ts
index 9991b4474..3a065f7f0 100644
--- a/src/components/format-number/format-number.ts
+++ b/src/components/format-number/format-number.ts
@@ -60,7 +60,7 @@ export default class WaFormatNumber extends WebAwesomeElement {
       minimumFractionDigits: this.minimumFractionDigits,
       maximumFractionDigits: this.maximumFractionDigits,
       minimumSignificantDigits: this.minimumSignificantDigits,
-      maximumSignificantDigits: this.maximumSignificantDigits
+      maximumSignificantDigits: this.maximumSignificantDigits,
     });
   }
 }
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 132c02791..ed7842180 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -207,8 +207,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     converter: {
       // Allow "true|false" attribute values but keep the property boolean
       fromAttribute: value => (!value || value === 'false' ? false : true),
-      toAttribute: value => (value ? 'true' : 'false')
-    }
+      toAttribute: value => (value ? 'true' : 'false'),
+    },
   })
   spellcheck = true;
 
@@ -290,7 +290,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           }
 
           const button = formElements.find(
-            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled')
+            (el: HTMLButtonElement) => el.type === 'submit' && !el.matches(':disabled'),
           ) as undefined | HTMLButtonElement | WaButton;
 
           // No button found, don't submit.
@@ -340,7 +340,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
   setSelectionRange(
     selectionStart: number,
     selectionEnd: number,
-    selectionDirection: 'forward' | 'backward' | 'none' = 'none'
+    selectionDirection: 'forward' | 'backward' | 'none' = 'none',
   ) {
     this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
   }
@@ -350,7 +350,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
     replacement: string,
     start?: number,
     end?: number,
-    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'
+    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',
   ) {
     const selectionStart = start ?? this.input.selectionStart!;
     const selectionEnd = end ?? this.input.selectionEnd!;
@@ -411,7 +411,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           'form-control--small': this.size === 'small',
           'form-control--medium': this.size === 'medium',
           'form-control--large': this.size === 'large',
-          'form-control--has-label': hasLabel
+          'form-control--has-label': hasLabel,
         })}
       >
         <label
@@ -441,7 +441,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,
               'input--empty': !this.value,
-              'input--no-spin-buttons': this.noSpinButtons
+              'input--no-spin-buttons': this.noSpinButtons,
             })}
           >
             <span part="prefix" class="input__prefix">
@@ -532,7 +532,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
           name="hint"
           part="hint"
           class=${classMap({
-            'has-slotted': hasHint
+            'has-slotted': hasHint,
           })}
           aria-hidden=${hasHint ? 'false' : 'true'}
           >${this.hint}</slot

From ef4cbd915dd8eb9a11fa3a47c2b75189c00f6112 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:31:46 -0500
Subject: [PATCH 28/41] Tidy up

---
 src/components/tag/tag.css | 9 +++++----
 src/components/tag/tag.ts  | 7 -------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index 68dc6af1f..a39e9ed0a 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -1,4 +1,9 @@
 :host {
+  --size-s: var(--wa-font-size-xs);
+  --size-m: var(--wa-font-size-s);
+  --size-l: var(--wa-font-size-m);
+  --form-control-height: calc(var(--space-smaller) * 2 + 1em * var(--wa-form-control-value-line-height));
+
   display: inline-flex;
   border-radius: var(--wa-border-radius-s);
   align-items: center;
@@ -11,10 +16,6 @@
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
-  --size-s: var(--wa-font-size-xs);
-  --size-m: var(--wa-font-size-s);
-  --size-l: var(--wa-font-size-m);
-  --form-control-height: calc(var(--space-smaller) * 2 + 1em * var(--wa-form-control-value-line-height));
   height: calc(var(--form-control-height) * 0.8);
   line-height: calc(var(--form-control-height) - var(--wa-form-control-border-width) * 2);
   padding: 0 var(--space-smaller);
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 4555321a7..338df48bb 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -24,13 +24,6 @@ import styles from './tag.css';
  * @csspart content - The tag's content.
  * @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
  * @csspart remove-button__base - The remove button's exported `base` part.
- *
- * @cssproperty --background-color - The tag's background color.
- * @cssproperty --border-color - The color of the tag's border.
- * @cssproperty --border-radius - The radius of the tag's corners.
- * @cssproperty --border-style - The style of the tag's border.
- * @cssproperty --border-width - The width of the tag's border.
- * @cssproperty --content-color - The color of the tag's content.
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {

From 4b6baa93a6b59e75c3879876dd20e8e94e80097c Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 17 Dec 2024 10:13:54 -0500
Subject: [PATCH 29/41] remove AI note

---
 docs/docs/resources/contributing.md | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docs/docs/resources/contributing.md b/docs/docs/resources/contributing.md
index 9d98cdd8f..0db66a230 100644
--- a/docs/docs/resources/contributing.md
+++ b/docs/docs/resources/contributing.md
@@ -23,12 +23,6 @@ A common misconception about contributing to an open source project is that you
 
 Please take a moment to review these guidelines to make the contribution process as easy as possible for both yourself and the project's maintainers.
 
-## AI-generated Code
-
-As an open source maintainer, I respectfully ask that you refrain from using AI-generated code when contributing to this project. This includes code generated by tools such as GitHub Copilot, even if you make alterations to it afterwards. While some of Copilot's features are indeed convenient, the ethics surrounding which codebases the AI has been trained on and their corresponding software licenses remain very questionable and have yet to be tested in a legal context.
-
-I realize that one cannot reasonably enforce this any more than one can enforce not copying licensed code from other codebases, nor do I wish to expend energy policing contributors. I would, however, like to avoid all ethical and legal challenges that result from using AI-generated code. As such, I respectfully ask that you refrain from using such tools when contributing to this project. At this time, I will not knowingly accept any code that has been generated in such a manner.
-
 ## Using the Issue Tracker
 
 The [issue tracker](https://github.com/shoelace-style/webawesome-alpha/issues) is for bug reports, feature requests, and pull requests.

From 2136fed4cb89729a24e477e16774f424ef80ab79 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 10:39:47 -0500
Subject: [PATCH 30/41] =?UTF-8?q?`--label-color`=20=E2=9E=A1=EF=B8=8F=20`-?=
 =?UTF-8?q?-text-color`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As we move towards using these helpers more widely, `--label-color` doesn't quite make sense
---
 docs/assets/styles/docs.css                  |  2 +-
 docs/assets/styles/theme-headers.css         |  2 +-
 docs/docs/experimental/themer.md             |  6 +++---
 src/components/badge/badge.css               |  2 +-
 src/components/button/button.ts              |  6 +++---
 src/components/menu-item/menu-item.css       |  6 +++---
 src/components/menu-item/menu-item.ts        |  2 +-
 src/components/option/option.css             |  8 ++++----
 src/components/option/option.ts              |  4 ++--
 src/components/progress-bar/progress-bar.css |  4 ++--
 src/components/progress-bar/progress-bar.ts  |  2 +-
 src/components/radio-button/radio-button.css |  2 +-
 src/components/radio-button/radio-button.ts  |  6 +++---
 src/styles/native/button.css                 | 12 ++++++------
 src/styles/themes/active.css                 |  2 +-
 src/styles/themes/classic.css                |  6 +++---
 src/styles/themes/fa.css                     |  8 ++++----
 src/styles/themes/migration.css              |  4 ++--
 src/styles/themes/playful.css                |  8 ++++----
 src/styles/utilities/appearance.css          | 10 +++++-----
 20 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 4368fc4ae..32d5d2858 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -46,7 +46,7 @@ wa-page > header {
   }
 
   wa-button[data-toggle-nav] {
-    --label-color: currentColor;
+    --text-color: currentColor;
     font-size: 1rem;
     margin-inline-start: -0.875rem;
     margin-inline-end: 0;
diff --git a/docs/assets/styles/theme-headers.css b/docs/assets/styles/theme-headers.css
index a48700312..595b7acbd 100644
--- a/docs/assets/styles/theme-headers.css
+++ b/docs/assets/styles/theme-headers.css
@@ -23,7 +23,7 @@
 
   .hero wa-button[variant='brand'] {
     --background: var(--wa-color-neutral-fill-quiet);
-    --label-color: var(--wa-color-neutral-on-normal);
+    --text-color: var(--wa-color-neutral-on-normal);
   }
 
   .project-header {
diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md
index 0247e71ad..a25c6a1cd 100644
--- a/docs/docs/experimental/themer.md
+++ b/docs/docs/experimental/themer.md
@@ -429,9 +429,9 @@ hasOutline: false
 
   #icon-chooser-trigger {
     --button-group-separator-border: none;
-    --label-color: var(--wa-color-neutral-on-quiet);
-    --label-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
-    --label-color-active: var(--label-color-hover);
+    --text-color: var(--wa-color-neutral-on-quiet);
+    --text-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
+    --text-color-active: var(--text-color-hover);
   }
 
   #icon-chooser::part(dialog) {
diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index 1977f4e9f..2adfb032f 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -10,7 +10,7 @@
   border-radius: var(--wa-border-radius-xs);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
-  color: var(--label-color, var(--wa-color-on-loud));
+  color: var(--text-color, var(--wa-color-on-loud));
   white-space: nowrap;
   padding: 0.375em 0.625em;
   user-select: none;
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index a6eb62b82..9ca6e1364 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -47,9 +47,9 @@ import styles from './button.css';
  * @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
  * @cssproperty --border-color-active - The color of the button's border when active.
  * @cssproperty --border-color-hover - The color of the button's border on hover.
- * @cssproperty --label-color - The color of the button's label when the button is not being interacted with.
- * @cssproperty --label-color-active - The color of the button's label when active.
- * @cssproperty --label-color-hover - The color of the button's label on hover.
+ * @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
+ * @cssproperty --text-color-active - The color of the button's label when active.
+ * @cssproperty --text-color-hover - The color of the button's label on hover.
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
diff --git a/src/components/menu-item/menu-item.css b/src/components/menu-item/menu-item.css
index fe3996db9..2be893157 100644
--- a/src/components/menu-item/menu-item.css
+++ b/src/components/menu-item/menu-item.css
@@ -1,6 +1,6 @@
 :host {
   --background-color-hover: var(--wa-color-neutral-fill-normal);
-  --label-color-hover: var(--wa-color-neutral-on-normal);
+  --text-color-hover: var(--wa-color-neutral-on-normal);
   --submenu-offset: -0.125rem;
 
   display: block;
@@ -100,14 +100,14 @@
 :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
 .menu-item--submenu-expanded {
   background-color: var(--background-color-hover);
-  color: var(--label-color-hover);
+  color: var(--text-color-hover);
 }
 
 :host(:focus-visible) .menu-item {
   outline: var(--wa-focus-ring);
   outline-offset: calc(-1 * var(--wa-focus-ring-width));
   background: var(--background-color-hover);
-  color: var(--label-color-hover);
+  color: var(--text-color-hover);
   opacity: 1;
 }
 
diff --git a/src/components/menu-item/menu-item.ts b/src/components/menu-item/menu-item.ts
index 20c081d81..17b8f8009 100644
--- a/src/components/menu-item/menu-item.ts
+++ b/src/components/menu-item/menu-item.ts
@@ -36,7 +36,7 @@ import { SubmenuController } from './submenu-controller.js';
  * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
  *
  * @cssproperty --background-color-hover - The menu item's background color on hover.
- * @cssproperty --label-color-hover - The label color on hover.
+ * @cssproperty --text-color-hover - The label color on hover.
  * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
  */
 @customElement('wa-menu-item')
diff --git a/src/components/option/option.css b/src/components/option/option.css
index cced8cdc4..27a4bbf53 100644
--- a/src/components/option/option.css
+++ b/src/components/option/option.css
@@ -1,8 +1,8 @@
 :host {
   --background-color-current: var(--wa-color-brand-fill-loud);
   --background-color-hover: var(--wa-color-neutral-fill-normal);
-  --label-color-current: var(--wa-color-brand-on-loud);
-  --label-color-hover: var(--wa-color-neutral-on-normal);
+  --text-color-current: var(--wa-color-brand-on-loud);
+  --text-color-hover: var(--wa-color-neutral-on-normal);
 
   display: block;
   color: var(--wa-color-text-normal);
@@ -27,13 +27,13 @@
 
 .option--hover:not(.option--current):not(.option--disabled) {
   background-color: var(--background-color-hover);
-  color: var(--label-color-hover);
+  color: var(--text-color-hover);
 }
 
 .option--current,
 .option--current.option--disabled {
   background-color: var(--background-color-current);
-  color: var(--label-color-current);
+  color: var(--text-color-current);
   opacity: 1;
 }
 
diff --git a/src/components/option/option.ts b/src/components/option/option.ts
index 46a946f9f..9ab6cf61a 100644
--- a/src/components/option/option.ts
+++ b/src/components/option/option.ts
@@ -21,8 +21,8 @@ import styles from './option.css';
  *
  * @cssproperty --background-color-current - The current option's background color.
  * @cssproperty --background-color-hover - The options's background color on hover.
- * @cssproperty --label-color-current - The current option's label color.
- * @cssproperty --label-color-hover - The label color on hover.
+ * @cssproperty --text-color-current - The current option's label color.
+ * @cssproperty --text-color-hover - The label color on hover.
  *
  * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
  * @csspart base - The component's base wrapper.
diff --git a/src/components/progress-bar/progress-bar.css b/src/components/progress-bar/progress-bar.css
index b1ebf5c37..36c4a3452 100644
--- a/src/components/progress-bar/progress-bar.css
+++ b/src/components/progress-bar/progress-bar.css
@@ -2,7 +2,7 @@
   --height: 1.25rem;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
-  --label-color: var(--wa-color-brand-on-loud);
+  --text-color: var(--wa-color-brand-on-loud);
   --box-shadow: none;
 
   display: block;
@@ -21,7 +21,7 @@
   height: 100%;
   font: inherit;
   background-color: var(--indicator-color);
-  color: var(--label-color);
+  color: var(--text-color);
   text-align: center;
   line-height: var(--height);
   white-space: nowrap;
diff --git a/src/components/progress-bar/progress-bar.ts b/src/components/progress-bar/progress-bar.ts
index db57468d2..7b8c642e6 100644
--- a/src/components/progress-bar/progress-bar.ts
+++ b/src/components/progress-bar/progress-bar.ts
@@ -22,7 +22,7 @@ import styles from './progress-bar.css';
  * @cssproperty --height - The progress bar's height.
  * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --label-color - The color of the label.
+ * @cssproperty --text-color - The color of the label.
  * @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
  */
 @customElement('wa-progress-bar')
diff --git a/src/components/radio-button/radio-button.css b/src/components/radio-button/radio-button.css
index d34b0674f..8b1267082 100644
--- a/src/components/radio-button/radio-button.css
+++ b/src/components/radio-button/radio-button.css
@@ -37,7 +37,7 @@
   --background-color: var(--wa-color-brand-fill-quiet);
   --background-color-hover: var(--background-color);
   --border-color: var(--wa-form-control-activated-color);
-  --label-color: var(--wa-color-brand-on-normal);
+  --text-color: var(--wa-color-brand-on-normal);
   --indicator-color: var(--border-color);
   --indicator-width: var(--wa-border-width-s);
 
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 1981f8018..d04012666 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -38,9 +38,9 @@ import styles from './radio-button.css';
  * @cssproperty --box-shadow - The shadow effects around the edges of the button.
  * @cssproperty --indicator-color - The color of the checked button indicator.
  * @cssproperty --indicator-width - The width of the checked button indicator.
- * @cssproperty --label-color - The color of the button's label.
- * @cssproperty --label-color-active - The color of the button's label when active.
- * @cssproperty --label-color-hover - The color of the button's label on hover.
+ * @cssproperty --text-color - The color of the button's label.
+ * @cssproperty --text-color-active - The color of the button's label when active.
+ * @cssproperty --text-color-hover - The color of the button's label on hover.
  *
  * @csspart base - The internal `<button>` element.
  * @csspart checked - The internal button element when the radio button is checked.
diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index e7016fd1d..e6c1182e3 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -10,9 +10,9 @@
   --border-color-active: var(--border-color);
   --border-width: max(1px, var(--wa-form-control-border-width));
 
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-  --label-color-hover: var(--label-color);
-  --label-color-active: var(--label-color);
+  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  --text-color-hover: var(--text-color);
+  --text-color-active: var(--text-color);
 
   border-radius: var(--wa-form-control-border-radius);
   border-style: var(--wa-border-style);
@@ -45,20 +45,20 @@ input:is([type='button'], [type='reset'], [type='submit']),
   display: inline-flex;
   background-color: var(--background-color);
   border-color: var(--border-color, var(--background-color));
-  color: var(--label-color);
+  color: var(--text-color);
 
   /* Interactive */
   &:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
     &:hover {
       background-color: var(--background-color-hover, var(--background-color));
       border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-      color: var(--label-color-hover, var(--label-color));
+      color: var(--text-color-hover, var(--text-color));
     }
 
     &:active {
       background-color: var(--background-color-active, var(--background-color));
       border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
-      color: var(--label-color-active, var(--label-color));
+      color: var(--text-color-active, var(--text-color));
     }
   }
 
diff --git a/src/styles/themes/active.css b/src/styles/themes/active.css
index 3e8704c9a..9fbe96086 100644
--- a/src/styles/themes/active.css
+++ b/src/styles/themes/active.css
@@ -462,7 +462,7 @@
 
   .hero wa-button[variant='brand'] {
     --background: var(--wa-color-neutral-fill-quiet);
-    --label-color: var(--wa-color-neutral-on-normal);
+    --text-color: var(--wa-color-neutral-on-normal);
   }
 
   wa-rating {
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index d0eba8210..41f296be0 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -365,14 +365,14 @@ wa-radio-button {
   --border-color: var(--wa-form-control-resting-color);
   --border-color-active: var(--background-color-active);
   --border-color-hover: var(--background-color-hover);
-  --label-color-active: var(--label-color-hover);
-  --label-color-hover: var(--wa-color-brand-on-loud);
+  --text-color-active: var(--text-color-hover);
+  --text-color-hover: var(--wa-color-brand-on-loud);
   --indicator-color: var(--wa-background-color);
 
   &[checked] {
     --background-color: var(--wa-form-control-activated-color);
     --border-color: var(--background-color);
-    --label-color: var(--wa-color-brand-on-loud);
+    --text-color: var(--wa-color-brand-on-loud);
   }
 }
 
diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css
index 5f288b55e..c08a67f8f 100644
--- a/src/styles/themes/fa.css
+++ b/src/styles/themes/fa.css
@@ -505,12 +505,12 @@
   }
 
   wa-button:not([appearance='text']) {
-    --border-color: var(--label-color);
+    --border-color: var(--text-color);
     --border-color-hover: var(--border-color);
     --border-color-active: var(--border-color);
     --box-shadow-color: var(--border-color);
     --background-active: var(--border-color);
-    --label-color-active: var(--background);
+    --text-color-active: var(--background);
 
     &[appearance='outlined'] {
       --background: var(--wa-color-surface-default);
@@ -564,13 +564,13 @@
     --background-active: var(--wa-color-neutral-on-quiet);
     --border-color-active: var(--background-active);
     --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
-    --label-color-active: var(--wa-color-surface-default);
+    --text-color-active: var(--wa-color-surface-default);
 
     &:active,
     &[checked] {
       --background: var(--wa-color-neutral-on-quiet);
       --box-shadow: none;
-      --label-color: var(--wa-color-surface-default);
+      --text-color: var(--wa-color-surface-default);
       transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
     }
   }
diff --git a/src/styles/themes/migration.css b/src/styles/themes/migration.css
index 3e155ccdd..088c84804 100644
--- a/src/styles/themes/migration.css
+++ b/src/styles/themes/migration.css
@@ -537,7 +537,7 @@
   }
 
   wa-button[appearance='outline'] {
-    --border-color: color-mix(in oklab, var(--label-color), transparent 75%);
+    --border-color: color-mix(in oklab, var(--text-color), transparent 75%);
   }
 
   wa-input,
@@ -550,7 +550,7 @@
 
   wa-radio-button:not([checked]) {
     --border-color: var(--wa-color-neutral-border-normal);
-    --label-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
   }
 
   wa-switch {
diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css
index bd5bfbccd..f0086a070 100644
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -566,7 +566,7 @@
       --button-shadow-inner-a: var(--wa-color-primary-30);
       --button-shadow-inner-b: var(--wa-color-primary-80);
       --button-text-shadow: var(--wa-color-primary-40);
-      --label-color: var(--wa-color-primary-95);
+      --text-color: var(--wa-color-primary-95);
     }
 
     &[variant='success'] {
@@ -634,8 +634,8 @@
   wa-button[appearance='outlined'] {
     --box-shadow: none;
     --border-width: var(--wa-form-control-border-width);
-    --label-color: var(--wa-color-neutral-on-normal);
-    --label-color-hover: var(--wa-color-neutral-on-loud);
+    --text-color: var(--wa-color-neutral-on-normal);
+    --text-color-hover: var(--wa-color-neutral-on-loud);
 
     &::part(label) {
       text-shadow: none;
@@ -861,7 +861,7 @@
         --button-shadow-inner-a: var(--wa-color-primary-30);
         --button-shadow-inner-b: var(--wa-color-primary-80);
         --button-text-shadow: var(--wa-color-primary-40);
-        --label-color: var(--wa-color-primary-95);
+        --text-color: var(--wa-color-primary-95);
       }
 
       &[variant='success'] {
diff --git a/src/styles/utilities/appearance.css b/src/styles/utilities/appearance.css
index 4e248a0ad..484541ac0 100644
--- a/src/styles/utilities/appearance.css
+++ b/src/styles/utilities/appearance.css
@@ -7,8 +7,8 @@
   --border-color: var(--wa-color-border-loud);
   --border-color-hover: var(--wa-color-border-loud);
 
-  --label-color: var(--wa-color-on-quiet);
-  --label-color-hover: var(--wa-color-on-quiet);
+  --text-color: var(--wa-color-on-quiet);
+  --text-color-hover: var(--wa-color-on-quiet);
 }
 
 .wa-filled,
@@ -17,7 +17,7 @@
   --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
   --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
 
-  --label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
 
   &:is(.wa-outlined, :host([appearance~='outlined'])) {
     --border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
@@ -27,7 +27,7 @@
 .wa-tinted,
 :host([appearance~='tinted']) {
   --background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-  --label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+  --text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
 
   --background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
   --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
@@ -40,7 +40,7 @@
 .wa-text,
 :host([appearance~='text']) {
   --background-color: transparent;
-  --label-color: var(--wa-color-on-quiet);
+  --text-color: var(--wa-color-on-quiet);
 
   --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);

From 1e1877c9548aefe6e4f75ffbe3e91b03f7fed536 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 10:41:51 -0500
Subject: [PATCH 31/41] =?UTF-8?q?`--content-color`=20=E2=9E=A1=EF=B8=8F=20?=
 =?UTF-8?q?`--text-color`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Harmonize with other properties for the same thing
---
 docs/assets/styles/docs.css        |  2 +-
 src/components/avatar/avatar.css   |  4 ++--
 src/components/avatar/avatar.ts    |  2 +-
 src/components/badge/badge.ts      |  2 +-
 src/components/callout/callout.css |  4 ++--
 src/components/tag/tag.css         |  4 ++--
 src/components/tooltip/tooltip.ts  |  2 +-
 src/styles/themes/brutalist.css    |  4 ++--
 src/styles/themes/classic.css      |  4 ++--
 src/styles/themes/fa.css           |  2 +-
 src/styles/themes/migration.css    | 10 +++++-----
 src/styles/themes/playful.css      | 10 +++++-----
 src/styles/themes/premium.css      | 10 +++++-----
 13 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 32d5d2858..2eb6967ea 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -77,7 +77,7 @@ wa-page > header {
   }
   #version-number + wa-badge {
     --background-color: var(--wa-color-warning-fill-quiet);
-    --content-color: var(--wa-color-warning-on-quiet);
+    --text-color: var(--wa-color-warning-on-quiet);
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }
diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index 5029f036e..87ae833df 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -1,6 +1,6 @@
 :host {
   --background-color: var(--wa-color-neutral-fill-normal);
-  --content-color: var(--wa-color-neutral-on-normal);
+  --text-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
   display: inline-flex;
@@ -12,7 +12,7 @@
   background-color: var(--background-color);
   font: inherit;
   font-size: calc(var(--size) * 0.4);
-  color: var(--content-color);
+  color: var(--text-color);
   user-select: none;
   -webkit-user-select: none;
   vertical-align: middle;
diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
index 317f35c56..bd8c286ed 100644
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -25,7 +25,7 @@ import styles from './avatar.css';
  * @csspart image - The avatar image. Only shown when the `image` attribute is set.
  *
  * @cssproperty --background-color - The avatar's background color.
- * @cssproperty --content-color - The color of the avatar's content.
+ * @cssproperty --text-color - The color of the avatar's content.
  * @cssproperty --size - The size of the avatar.
  */
 @customElement('wa-avatar')
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 76faed79c..502e43a97 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -20,7 +20,7 @@ import styles from './badge.css';
  * @cssproperty --border-radius - The radius of the badge's corners.
  * @cssproperty --border-style - The style of the badge's border.
  * @cssproperty --border-width - The width of the badge's border.
- * @cssproperty --content-color - The color of the badge's content.
+ * @cssproperty --text-color - The color of the badge's content.
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css
index 6b52d0074..bb691ef27 100644
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -4,7 +4,7 @@
   --spacing: var(--wa-space-m);
   --background-color: var(--wa-color-fill-quiet);
   --border-color: var(--wa-color-border-quiet);
-  --content-color: var(--wa-color-on-normal);
+  --text-color: var(--wa-color-on-normal);
 
   position: relative;
   display: flex;
@@ -14,7 +14,7 @@
   border-color: var(--border-color);
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
-  color: var(--content-color);
+  color: var(--text-color);
   padding: var(--spacing);
 }
 
diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index a39e9ed0a..e6c5dbd88 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -28,11 +28,11 @@
 }
 
 :host(:hover) > wa-icon-button {
-  color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
+  color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-hover));
 }
 
 :host(:active) > wa-icon-button {
-  color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
+  color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-active));
 }
 
 /*
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index d5cfe4918..2a8f64743 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -35,7 +35,7 @@ import styles from './tooltip.css';
  *
  * @cssproperty --background-color - The tooltip's background color.
  * @cssproperty --border-radius - The radius of the tooltip's corners.
- * @cssproperty --content-color - The color of the tooltip's content.
+ * @cssproperty --text-color - The color of the tooltip's content.
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
  * @cssproperty --padding - The padding within the tooltip.
  * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
diff --git a/src/styles/themes/brutalist.css b/src/styles/themes/brutalist.css
index b47bdebb5..176a52d1c 100644
--- a/src/styles/themes/brutalist.css
+++ b/src/styles/themes/brutalist.css
@@ -500,7 +500,7 @@
 
   wa-alert {
     --border-width: 0 0 0 var(--wa-panel-border-width);
-    --content-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
     --padding: var(--wa-space-s) var(--wa-space-m);
 
     &::part(icon) {
@@ -545,7 +545,7 @@
 
   wa-badge {
     --border-color: var(--wa-color-surface-border);
-    --content-color: var(--wa-color-base-10);
+    --text-color: var(--wa-color-base-10);
     text-transform: uppercase;
 
     &::part(base) {
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 41f296be0..9e44c8598 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -341,7 +341,7 @@
  */
 wa-avatar {
   --background-color: var(--wa-color-neutral-fill-loud);
-  --content-color: var(--wa-color-neutral-on-loud);
+  --text-color: var(--wa-color-neutral-on-loud);
 }
 
 wa-button,
@@ -384,7 +384,7 @@ wa-breadcrumb {
 wa-callout {
   --background-color: var(--wa-color-surface-raised);
   --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
-  --content-color: var(--wa-color-text-normal);
+  --text-color: var(--wa-color-text-normal);
   --spacing: var(--wa-space-l);
 
   font-size: var(--wa-font-size-s);
diff --git a/src/styles/themes/fa.css b/src/styles/themes/fa.css
index c08a67f8f..ef736192f 100644
--- a/src/styles/themes/fa.css
+++ b/src/styles/themes/fa.css
@@ -471,7 +471,7 @@
   }
 
   wa-alert {
-    --content-color: var(--wa-color-text-normal);
+    --text-color: var(--wa-color-text-normal);
     --icon-color: var(--border-color);
 
     .wa-theme-fa-dark & {
diff --git a/src/styles/themes/migration.css b/src/styles/themes/migration.css
index 088c84804..a9bc021d7 100644
--- a/src/styles/themes/migration.css
+++ b/src/styles/themes/migration.css
@@ -516,23 +516,23 @@
 
     &[variant='brand'] {
       --background: var(--wa-color-brand-fill-normal);
-      --content-color: var(--wa-color-brand-on-normal);
+      --text-color: var(--wa-color-brand-on-normal);
     }
     &[variant='success'] {
       --background: var(--wa-color-success-fill-normal);
-      --content-color: var(--wa-color-success-on-normal);
+      --text-color: var(--wa-color-success-on-normal);
     }
     &[variant='warning'] {
       --background: var(--wa-color-warning-fill-normal);
-      --content-color: var(--wa-color-warning-on-normal);
+      --text-color: var(--wa-color-warning-on-normal);
     }
     &[variant='danger'] {
       --background: var(--wa-color-danger-fill-normal);
-      --content-color: var(--wa-color-danger-on-normal);
+      --text-color: var(--wa-color-danger-on-normal);
     }
     &[variant='neutral'] {
       --background: var(--wa-color-neutral-fill-normal);
-      --content-color: var(--wa-color-neutral-on-normal);
+      --text-color: var(--wa-color-neutral-on-normal);
     }
   }
 
diff --git a/src/styles/themes/playful.css b/src/styles/themes/playful.css
index f0086a070..080311c8e 100644
--- a/src/styles/themes/playful.css
+++ b/src/styles/themes/playful.css
@@ -688,23 +688,23 @@
 
     &[variant='brand'] {
       --background: var(--wa-color-primary-80);
-      --content-color: var(--wa-color-primary-20);
+      --text-color: var(--wa-color-primary-20);
     }
     &[variant='success'] {
       --background: var(--wa-color-green-80);
-      --content-color: var(--wa-color-green-20);
+      --text-color: var(--wa-color-green-20);
     }
     &[variant='warning'] {
       --background: var(--wa-color-yellow-80);
-      --content-color: var(--wa-color-yellow-20);
+      --text-color: var(--wa-color-yellow-20);
     }
     &[variant='danger'] {
       --background: var(--wa-color-red-80);
-      --content-color: var(--wa-color-red-20);
+      --text-color: var(--wa-color-red-20);
     }
     &[variant='neutral'] {
       --background: white;
-      --content-color: var(--wa-color-base-30);
+      --text-color: var(--wa-color-base-30);
     }
   }
 
diff --git a/src/styles/themes/premium.css b/src/styles/themes/premium.css
index 5dd26853e..f7190145b 100644
--- a/src/styles/themes/premium.css
+++ b/src/styles/themes/premium.css
@@ -525,23 +525,23 @@
   wa-badge {
     &[variant='brand'] {
       --background: var(--wa-color-primary-80);
-      --content-color: var(--wa-color-primary-20);
+      --text-color: var(--wa-color-primary-20);
     }
     &[variant='success'] {
       --background: var(--wa-color-green-80);
-      --content-color: var(--wa-color-green-20);
+      --text-color: var(--wa-color-green-20);
     }
     &[variant='warning'] {
       --background: var(--wa-color-yellow-80);
-      --content-color: var(--wa-color-yellow-20);
+      --text-color: var(--wa-color-yellow-20);
     }
     &[variant='danger'] {
       --background: var(--wa-color-red-80);
-      --content-color: var(--wa-color-red-20);
+      --text-color: var(--wa-color-red-20);
     }
     &[variant='neutral'] {
       --background: white;
-      --content-color: var(--wa-color-base-30);
+      --text-color: var(--wa-color-base-30);
     }
   }
 

From a6bf9ea58cc72d6a24b7273135f5fdf49499460d Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 17 Dec 2024 10:44:11 -0500
Subject: [PATCH 32/41] add terms

---
 cspell.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/cspell.json b/cspell.json
index e5894543a..17411b008 100644
--- a/cspell.json
+++ b/cspell.json
@@ -39,6 +39,7 @@
     "crutchcorn",
     "csspart",
     "cssproperty",
+    "cssstate",
     "datetime",
     "describedby",
     "Docsify",
@@ -46,6 +47,7 @@
     "dropdowns",
     "easings",
     "ecommerce",
+    "endfor",
     "endraw",
     "endregion",
     "enterkeyhint",
@@ -160,11 +162,13 @@
     "tabler",
     "tablist",
     "tabpanel",
+    "tbody",
     "templating",
     "tera",
     "testid",
     "textareas",
     "textfield",
+    "thead",
     "Themer",
     "tinycolor",
     "transitionend",

From 45cb5598fc36aed74df64dead34f35ae66521d62 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 17 Dec 2024 10:44:28 -0500
Subject: [PATCH 33/41] add update script and update non-breaking deps

---
 package-lock.json | 2026 +++++++++++++++++++++++++++++----------------
 package.json      |   56 +-
 2 files changed, 1321 insertions(+), 761 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f6de47a55..510f9d6a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,26 +9,26 @@
       "version": "3.0.0-alpha.5",
       "license": "MIT",
       "dependencies": {
-        "@ctrl/tinycolor": "^4.0.2",
-        "@floating-ui/dom": "^1.5.3",
-        "@shoelace-style/animations": "^1.1.0",
+        "@ctrl/tinycolor": "^4.1.0",
+        "@floating-ui/dom": "^1.6.12",
+        "@shoelace-style/animations": "^1.2.0",
         "@shoelace-style/localize": "^3.2.1",
-        "composed-offset-position": "^0.0.4",
-        "lit": "^3.0.0",
+        "composed-offset-position": "^0.0.6",
+        "lit": "^3.2.1",
         "qr-creator": "^1.0.0"
       },
       "devDependencies": {
-        "@11ty/eleventy": "3.0.0-alpha.5",
-        "@custom-elements-manifest/analyzer": "^0.9.4",
+        "@11ty/eleventy": "3.0.0",
+        "@custom-elements-manifest/analyzer": "^0.10.4",
         "@konnorr/esbuild-plugin-lit-css": "^1.0.1",
         "@lit-labs/eleventy-plugin-lit": "^1.0.3",
-        "@lit-labs/testing": "^0.2.4",
-        "@lit/react": "^1.0.0",
+        "@lit-labs/testing": "^0.2.5",
+        "@lit/react": "^1.0.6",
         "@open-wc/testing": "^3.2.0",
-        "@types/mocha": "^10.0.2",
+        "@types/mocha": "^10.0.10",
         "@types/react": "^18.2.28",
         "@web/dev-server-esbuild": "^0.3.6",
-        "@web/test-runner": "^0.18.1",
+        "@web/test-runner": "^0.19.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "browser-sync": "^2.29.3",
@@ -36,43 +36,44 @@
         "change-case": "^4.1.2",
         "chokidar": "^3.5.3",
         "command-line-args": "^5.2.1",
-        "comment-parser": "^1.4.0",
+        "comment-parser": "^1.4.1",
         "cspell": "^6.18.1",
-        "custom-element-jet-brains-integration": "^1.4.0",
-        "custom-element-vs-code-integration": "^1.2.1",
-        "custom-element-vuejs-integration": "^1.0.0",
+        "custom-element-jet-brains-integration": "^1.6.2",
+        "custom-element-vs-code-integration": "^1.4.1",
+        "custom-element-vuejs-integration": "^1.3.3",
         "del": "^7.1.0",
         "download": "^8.0.0",
-        "esbuild": "^0.19.4",
+        "esbuild": "^0.24.0",
         "esbuild-plugin-replace": "^1.4.0",
         "front-matter": "^4.0.2",
-        "get-port": "^7.0.0",
+        "get-port": "^7.1.0",
         "globby": "^13.2.2",
         "husky": "^8.0.3",
         "lint-staged": "^14.0.1",
         "lunr": "^2.3.9",
         "markdown-it": "^14.1.0",
-        "markdown-it-attrs": "^4.1.6",
+        "markdown-it-attrs": "^4.3.0",
         "markdown-it-container": "^3.0.0",
         "markdown-it-ins": "^3.0.1",
         "markdown-it-kbd": "^2.2.2",
         "markdown-it-mark": "^3.0.1",
         "marked": "^11.1.0",
         "node-html-parser": "^6.1.13",
-        "ora": "^8.0.1",
+        "npm-check-updates": "^17.1.11",
+        "ora": "^8.1.1",
         "pascal-case": "^3.1.2",
-        "playwright": "^1.46.1",
-        "plop": "^4.0.0",
-        "prettier": "^3.0.3",
+        "playwright": "^1.49.1",
+        "plop": "^4.0.1",
+        "prettier": "^3.4.2",
         "prettier-plugin-organize-imports": "^4.1.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "recursive-copy": "^2.0.14",
         "sinon": "^16.1.0",
         "source-map": "^0.7.4",
-        "tslib": "^2.6.2",
-        "typescript": "^5.2.2",
-        "user-agent-data-types": "^0.3.1",
+        "tslib": "^2.8.1",
+        "typescript": "^5.7.2",
+        "user-agent-data-types": "^0.4.2",
         "uuid": "^9.0.1"
       },
       "engines": {
@@ -80,9 +81,9 @@
       }
     },
     "node_modules/@11ty/dependency-tree": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-3.0.0.tgz",
-      "integrity": "sha512-+M+/KdAptDTK4USkI124CKoScvt2y0v1EoLBjS2rUi9zydjWgEC7+EJJ7Eu1DXuObe0JmY09LORjdBGKNPxgtg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/dependency-tree/-/dependency-tree-3.0.1.tgz",
+      "integrity": "sha512-aZizxcL4Z/clm3KPRx8i9ohW9R2gLssXfUSy7qQmQRXb4CUOyvmqk2gKeJqRmXIfMi2bB9w03SgtN5v1YwqpiA==",
       "dev": true,
       "dependencies": {
         "@11ty/eleventy-utils": "^1.0.2"
@@ -101,43 +102,48 @@
       }
     },
     "node_modules/@11ty/eleventy": {
-      "version": "3.0.0-alpha.5",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0-alpha.5.tgz",
-      "integrity": "sha512-JRWRqoAalwkiWIb9dQHmSX40kSOD6vhUwt73df/PWZPYzlAPxx27Gfi96TzR2bE+lmZ8IwgQzhYEBenL9tJ9Ow==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy/-/eleventy-3.0.0.tgz",
+      "integrity": "sha512-0P0ZsJXVW2QiNdhd7z+GYy6n+ivh0enx1DRdua5ta6NlzY2AhbkeWBY6U+FKA8lPS3H4+XsTpfLLfIScpPZLaQ==",
       "dev": true,
       "dependencies": {
-        "@11ty/dependency-tree": "^3.0.0",
+        "@11ty/dependency-tree": "^3.0.1",
         "@11ty/dependency-tree-esm": "^1.0.0",
-        "@11ty/eleventy-dev-server": "^1.0.4",
-        "@11ty/eleventy-utils": "^1.0.2",
+        "@11ty/eleventy-dev-server": "^2.0.4",
+        "@11ty/eleventy-plugin-bundle": "^3.0.0",
+        "@11ty/eleventy-utils": "^1.0.3",
         "@11ty/lodash-custom": "^4.17.21",
         "@11ty/posthtml-urls": "^1.0.0",
+        "@11ty/recursive-copy": "^3.0.0",
         "@sindresorhus/slugify": "^2.2.1",
         "bcp-47-normalize": "^2.3.0",
+        "chardet": "^2.0.0",
         "chokidar": "^3.6.0",
         "cross-spawn": "^7.0.3",
-        "debug": "^4.3.4",
-        "dependency-graph": "^0.11.0",
+        "debug": "^4.3.7",
+        "dependency-graph": "^1.0.0",
+        "entities": "^5.0.0",
         "fast-glob": "^3.3.2",
+        "filesize": "^10.1.6",
         "graceful-fs": "^4.2.11",
         "gray-matter": "^4.0.3",
         "is-glob": "^4.0.3",
-        "iso-639-1": "^3.1.0",
+        "iso-639-1": "^3.1.3",
+        "js-yaml": "^4.1.0",
         "kleur": "^4.1.5",
-        "liquidjs": "^10.10.0",
-        "luxon": "^3.4.4",
-        "markdown-it": "^14.0.0",
-        "micromatch": "^4.0.5",
+        "liquidjs": "^10.17.0",
+        "luxon": "^3.5.0",
+        "markdown-it": "^14.1.0",
+        "micromatch": "^4.0.8",
         "minimist": "^1.2.8",
         "moo": "^0.5.2",
-        "multimatch": "^7.0.0",
-        "node-retrieve-globals": "^5.0.0",
+        "node-retrieve-globals": "^6.0.0",
         "normalize-path": "^3.0.0",
         "nunjucks": "^3.2.4",
         "please-upgrade-node": "^3.2.0",
         "posthtml": "^0.16.6",
-        "recursive-copy": "^2.0.14",
-        "semver": "^7.6.0",
+        "posthtml-match-helper": "^2.0.2",
+        "semver": "^7.6.3",
         "slugify": "^1.6.6"
       },
       "bin": {
@@ -152,28 +158,146 @@
       }
     },
     "node_modules/@11ty/eleventy-dev-server": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-1.0.4.tgz",
-      "integrity": "sha512-qVBmV2G1KF/0o5B/3fITlrrDHy4bONUI2YuN3/WJ3BNw4NU1d/we8XhKrlgq13nNvHoBx5czYp3LZt8qRG53Fg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-dev-server/-/eleventy-dev-server-2.0.4.tgz",
+      "integrity": "sha512-d0CuufX6yPtVz+RW0oJZg1pVoxo1jOrPmpXYacoiKLJm0MMC9MkPQOCXlimguHVaceHejFo5+aZB9/aGB2RR0A==",
       "dev": true,
       "dependencies": {
-        "@11ty/eleventy-utils": "^1.0.1",
-        "chokidar": "^3.5.3",
-        "debug": "^4.3.4",
+        "@11ty/eleventy-utils": "^1.0.3",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.7",
         "dev-ip": "^1.0.1",
-        "finalhandler": "^1.2.0",
+        "finalhandler": "^1.3.0",
         "mime": "^3.0.0",
         "minimist": "^1.2.8",
-        "morphdom": "^2.7.0",
+        "morphdom": "^2.7.4",
         "please-upgrade-node": "^3.2.0",
-        "ssri": "^8.0.1",
-        "ws": "^8.13.0"
+        "send": "^0.19.0",
+        "ssri": "^11.0.0",
+        "urlpattern-polyfill": "^10.0.0",
+        "ws": "^8.18.0"
       },
       "bin": {
         "eleventy-dev-server": "cmd.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dev": true,
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/send": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.1.tgz",
+      "integrity": "sha512-p4rRk4f23ynFEfcD9LA0xRYngj+IyGiEYyqqOak8kaN0TvNmuxC2dcVeBn62GpCeR2CpWqyHCNScTP91QbAVFg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/@11ty/eleventy-dev-server/node_modules/send/node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@11ty/eleventy-plugin-bundle": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-bundle/-/eleventy-plugin-bundle-3.0.0.tgz",
+      "integrity": "sha512-JSnqehT+sWSPi6e44jTXUW+KiV9284YF9fzPQvfGB4cXlk/m/SJk17CavHCleIvKXDN+jrUw9TZkwAwr85ONWQ==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "posthtml-match-helper": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=18"
       },
       "funding": {
         "type": "opencollective",
@@ -181,9 +305,9 @@
       }
     },
     "node_modules/@11ty/eleventy-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
-      "integrity": "sha512-Zy2leMK1DQR6Q6ZPSagv7QpJaAz9uVbb+RmVetYFp3foMeQtOSZx7w2u5daRFmP+PeNq9vO9H4xtBToYFWZwHA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
+      "integrity": "sha512-nULO91om7vQw4Y/UBjM8i7nJ1xl+/nyK4rImZ41lFxiY2d+XUz7ChAj1CDYFjrLZeu0utAYJTZ45LlcHTkUG4g==",
       "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0"
@@ -196,6 +320,69 @@
         "url": "https://opencollective.com/11ty"
       }
     },
+    "node_modules/@11ty/eleventy/node_modules/chardet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-2.0.0.tgz",
+      "integrity": "sha512-xVgPpulCooDjY6zH4m9YW3jbkaBe3FKIAvF5sj5t7aBNsVl2ljIE+xwJ4iNgiDZHFQvNIpjdKdVOQvvk5ZfxbQ==",
+      "dev": true
+    },
+    "node_modules/@11ty/eleventy/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/dependency-graph": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-1.0.0.tgz",
+      "integrity": "sha512-cW3gggJ28HZ/LExwxP2B++aiKxhJXMSIt9K48FOXQkm+vuG5gyatXnLsONRJdzO/7VfjDIiaOOa/bs4l464Lwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/entities": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-5.0.0.tgz",
+      "integrity": "sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/@11ty/eleventy/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/@11ty/lodash-custom": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/@11ty/lodash-custom/-/lodash-custom-4.17.21.tgz",
@@ -225,6 +412,71 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@11ty/recursive-copy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@11ty/recursive-copy/-/recursive-copy-3.0.1.tgz",
+      "integrity": "sha512-suoSv7CanyKXIwwtLlzP43n3Mm3MTR7UzaLgnG+JP9wAdg4uCIUJiAhhgs/nkwtkvsuqfrGWrUiaG1K9mEoiPg==",
+      "dev": true,
+      "dependencies": {
+        "errno": "^0.1.2",
+        "graceful-fs": "^4.2.11",
+        "junk": "^1.0.1",
+        "maximatch": "^0.1.0",
+        "mkdirp": "^3.0.1",
+        "pify": "^2.3.0",
+        "promise": "^7.0.1",
+        "rimraf": "^5.0.7",
+        "slash": "^1.0.0"
+      }
+    },
+    "node_modules/@11ty/recursive-copy/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@11ty/recursive-copy/node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@11ty/recursive-copy/node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^10.3.7"
+      },
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@11ty/recursive-copy/node_modules/slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@75lb/deep-merge": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
@@ -838,17 +1090,17 @@
       }
     },
     "node_modules/@ctrl/tinycolor": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.0.3.tgz",
-      "integrity": "sha512-e9nEVehVJwkymQpkGhdSNzLT2Lr9UTTby+JePq4Z2SxBbOQjY7pLgSouAaXvfaGQVSAaY0U4eJdwfSDmCbItcw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz",
+      "integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==",
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@custom-elements-manifest/analyzer": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.9.4.tgz",
-      "integrity": "sha512-XPjEbfkq71oQl6tIfDy1ashdvOf42p3BtqebEaUohqTEPAyBuShGwQiB2B7xjsUwi3VfSQCnPlGwmigIDPjtWg==",
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@custom-elements-manifest/analyzer/-/analyzer-0.10.4.tgz",
+      "integrity": "sha512-hse8o20Jd82BwWank29/J9OC4PmSTwUoEmll3LEjDF3WLY/Lc8g3TUYSib/3GARCS8Q5myT2RPqEWfRa+6bkIg==",
       "dev": true,
       "dependencies": {
         "@custom-elements-manifest/find-dependencies": "^0.0.5",
@@ -950,6 +1202,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/@custom-elements-manifest/analyzer/node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/@custom-elements-manifest/find-dependencies": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/@custom-elements-manifest/find-dependencies/-/find-dependencies-0.0.5.tgz",
@@ -966,9 +1231,9 @@
       "dev": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz",
-      "integrity": "sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
       "cpu": [
         "ppc64"
       ],
@@ -978,13 +1243,13 @@
         "aix"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz",
-      "integrity": "sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
       "cpu": [
         "arm"
       ],
@@ -994,13 +1259,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz",
-      "integrity": "sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
       "cpu": [
         "arm64"
       ],
@@ -1010,13 +1275,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz",
-      "integrity": "sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
       "cpu": [
         "x64"
       ],
@@ -1026,13 +1291,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz",
-      "integrity": "sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
       "cpu": [
         "arm64"
       ],
@@ -1042,13 +1307,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz",
-      "integrity": "sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
       "cpu": [
         "x64"
       ],
@@ -1058,13 +1323,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz",
-      "integrity": "sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
       "cpu": [
         "arm64"
       ],
@@ -1074,13 +1339,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz",
-      "integrity": "sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
       "cpu": [
         "x64"
       ],
@@ -1090,13 +1355,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz",
-      "integrity": "sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
       "cpu": [
         "arm"
       ],
@@ -1106,13 +1371,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz",
-      "integrity": "sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
       "cpu": [
         "arm64"
       ],
@@ -1122,13 +1387,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz",
-      "integrity": "sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
       "cpu": [
         "ia32"
       ],
@@ -1138,13 +1403,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz",
-      "integrity": "sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
       "cpu": [
         "loong64"
       ],
@@ -1154,13 +1419,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz",
-      "integrity": "sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
       "cpu": [
         "mips64el"
       ],
@@ -1170,13 +1435,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz",
-      "integrity": "sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1186,13 +1451,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz",
-      "integrity": "sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
       "cpu": [
         "riscv64"
       ],
@@ -1202,13 +1467,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz",
-      "integrity": "sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
       "cpu": [
         "s390x"
       ],
@@ -1218,13 +1483,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz",
-      "integrity": "sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
       "cpu": [
         "x64"
       ],
@@ -1234,13 +1499,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
       "cpu": [
         "x64"
       ],
@@ -1250,13 +1515,29 @@
         "netbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz",
-      "integrity": "sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
       "cpu": [
         "x64"
       ],
@@ -1266,13 +1547,13 @@
         "openbsd"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz",
-      "integrity": "sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
       "cpu": [
         "x64"
       ],
@@ -1282,13 +1563,13 @@
         "sunos"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz",
-      "integrity": "sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
       "cpu": [
         "arm64"
       ],
@@ -1298,13 +1579,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz",
-      "integrity": "sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
       "cpu": [
         "ia32"
       ],
@@ -1314,13 +1595,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz",
-      "integrity": "sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
       "cpu": [
         "x64"
       ],
@@ -1330,7 +1611,7 @@
         "win32"
       ],
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       }
     },
     "node_modules/@esm-bundle/chai": {
@@ -1343,26 +1624,26 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
-      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.8"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
-      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
       "dependencies": {
-        "@floating-ui/core": "^1.5.3",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
-      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+      "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=="
     },
     "node_modules/@github/catalyst": {
       "version": "1.6.0",
@@ -1370,6 +1651,46 @@
       "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==",
       "dev": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
+    },
+    "node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
@@ -1519,9 +1840,9 @@
       }
     },
     "node_modules/@lit-labs/testing": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@lit-labs/testing/-/testing-0.2.4.tgz",
-      "integrity": "sha512-NasNKbELasyfA1vIcfMwM0H/2mE98uFsyf/yDWtcl9fAEsTpRRWrmPdQDrHDyim5LKnsQutCzBP3Fof83hSCIA==",
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@lit-labs/testing/-/testing-0.2.5.tgz",
+      "integrity": "sha512-VVYPhnpYhTgmZ3pWGQV8ZN/c81/aUlxSya+G94pNhlAiKUqsAwJZAkQCEZLncF8WHWg9jhas3eswxe9G3oQr1Q==",
       "dev": true,
       "dependencies": {
         "@lit-labs/ssr": "^3.1.8",
@@ -1629,9 +1950,9 @@
       }
     },
     "node_modules/@lit/react": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.2.tgz",
-      "integrity": "sha512-UJ5TQ46DPcJDIzyjbwbj6Iye0XcpCxL2yb03zcWq1BpWchpXS3Z0BPVhg7zDfZLF6JemPml8u/gt/+KwJ/23sg==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.6.tgz",
+      "integrity": "sha512-QIss8MPh6qUoFJmuaF4dSHts3qCsA36S3HcOLiNPShxhgYPr4XJRnCBKPipk85sR9xr6TQrOcDMfexwbNdJHYA==",
       "dev": true,
       "peerDependencies": {
         "@types/react": "17 || 18"
@@ -1782,20 +2103,45 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/@puppeteer/browsers": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.1.0.tgz",
-      "integrity": "sha512-xloWvocjvryHdUjDam/ZuGMh7zn4Sn3ZAaV4Ah2e2EwEt90N3XphZlSsU3n0VDc1F7kggCjMuH0UuxfPQ5mD9w==",
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@prettier/sync": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@prettier/sync/-/sync-0.5.2.tgz",
+      "integrity": "sha512-Yb569su456XNx5BsH/Vyem7xD6g/y9iLmLUzRKM1a/dhU/D7HqqvkAG72znulXlMXztbV0iiu9O5AL8K98TzZQ==",
       "dev": true,
       "dependencies": {
-        "debug": "4.3.4",
-        "extract-zip": "2.0.1",
-        "progress": "2.0.3",
-        "proxy-agent": "6.4.0",
-        "semver": "7.6.0",
-        "tar-fs": "3.0.5",
-        "unbzip2-stream": "1.4.3",
-        "yargs": "17.7.2"
+        "make-synchronized": "^0.2.8"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier-synchronized?sponsor=1"
+      },
+      "peerDependencies": {
+        "prettier": "*"
+      }
+    },
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.6.1.tgz",
+      "integrity": "sha512-aBSREisdsGH890S2rQqK82qmQYU3uFpSH8wcZWHgHzl3LfzsxAKbLNiAG9mO8v1Y0UICBeClICxPJvyr0rcuxg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.4.0",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.5.0",
+        "semver": "^7.6.3",
+        "tar-fs": "^3.0.6",
+        "unbzip2-stream": "^1.4.3",
+        "yargs": "^17.7.2"
       },
       "bin": {
         "browsers": "lib/cjs/main-cli.js"
@@ -1804,30 +2150,28 @@
         "node": ">=18"
       }
     },
-    "node_modules/@puppeteer/browsers/node_modules/tar-fs": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-      "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+    "node_modules/@puppeteer/browsers/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
       "dev": true,
       "dependencies": {
-        "pump": "^3.0.0",
-        "tar-stream": "^3.1.5"
+        "ms": "^2.1.3"
       },
-      "optionalDependencies": {
-        "bare-fs": "^2.1.1",
-        "bare-path": "^2.1.0"
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@puppeteer/browsers/node_modules/tar-stream": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
-      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
-      "dev": true,
-      "dependencies": {
-        "b4a": "^1.6.4",
-        "fast-fifo": "^1.2.0",
-        "streamx": "^2.15.0"
-      }
+    "node_modules/@puppeteer/browsers/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
     },
     "node_modules/@pwrs/lit-css": {
       "version": "3.0.0",
@@ -2062,9 +2406,9 @@
       ]
     },
     "node_modules/@shoelace-style/animations": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.1.0.tgz",
-      "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/animations/-/animations-1.2.0.tgz",
+      "integrity": "sha512-avvo1xxkLbv2dgtabdewBbqcJfV0e0zCwFqkPMnHFGbJbBHorRFfMAHh1NG9ymmXn0jW95ibUVH03E1NYXD6Gw==",
       "funding": {
         "type": "individual",
         "url": "https://github.com/sponsors/claviska"
@@ -2445,9 +2789,9 @@
       "dev": true
     },
     "node_modules/@types/mocha": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.6.tgz",
-      "integrity": "sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==",
+      "version": "10.0.10",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.10.tgz",
+      "integrity": "sha512-xPyYSz1cMPnJQhl0CLMH68j3gprKZaTjG3s5Vi+fDgx+uhG9NOXwbVt52eFS8ECyXhyKcjDLCBEqBExKuiZb7Q==",
       "dev": true
     },
     "node_modules/@types/node": {
@@ -3278,15 +3622,15 @@
       }
     },
     "node_modules/@web/test-runner": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.18.1.tgz",
-      "integrity": "sha512-jB/9vrpGVtcLY6/7sPpKpSheQ3wWY9P5aQcz2SK2gMHTq3gNpa51NAyec0Al7EFpHvJ1wKYTGRLB2gPyEoJeDg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.19.0.tgz",
+      "integrity": "sha512-qLUupi88OK1Kl52cWPD/2JewUCRUxYsZ1V1DyLd05P7u09zCdrUYrtkB/cViWyxlBe/TOvqkSNpcTv6zLJ9GoA==",
       "dev": true,
       "dependencies": {
         "@web/browser-logs": "^0.4.0",
         "@web/config-loader": "^0.3.0",
         "@web/dev-server": "^0.4.0",
-        "@web/test-runner-chrome": "^0.16.0",
+        "@web/test-runner-chrome": "^0.17.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-mocha": "^0.9.0",
@@ -3309,16 +3653,16 @@
       }
     },
     "node_modules/@web/test-runner-chrome": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.16.0.tgz",
-      "integrity": "sha512-Edc6Y49aVB6k18S5IOj9OCX3rEf8F3jptIu0p95+imqxmcutFEh1GNmlAk2bQGnXS0U6uVY7Xbf61fiaXUQqhg==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.17.0.tgz",
+      "integrity": "sha512-Il5N9z41NKWCrQM1TVgRaDWWYoJtG5Ha4fG+cN1MWL2OlzBS4WoOb4lFV3EylZ7+W3twZOFr1zy2Rx61yDYd/A==",
       "dev": true,
       "dependencies": {
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-coverage-v8": "^0.8.0",
         "async-mutex": "0.4.0",
         "chrome-launcher": "^0.15.0",
-        "puppeteer-core": "^22.0.0"
+        "puppeteer-core": "^23.2.0"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -3602,14 +3946,26 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+      "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
       "dev": true,
+      "dependencies": {
+        "acorn": "^8.11.0"
+      },
       "engines": {
         "node": ">=0.4.0"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz",
+      "integrity": "sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/aggregate-error": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-4.0.1.tgz",
@@ -3726,18 +4082,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/array-differ": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-4.0.0.tgz",
-      "integrity": "sha512-Q6VPTLMsmXZ47ENG3V+wQyZS1ZxXMxFyYzA+Z/GMrJ6yIutAIEf9wTyroTzmGjNfox9/h3GdGBCVh43GVFx4Uw==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/array-each": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
@@ -3844,9 +4188,9 @@
       }
     },
     "node_modules/b4a": {
-      "version": "1.6.4",
-      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
-      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
+      "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
       "dev": true
     },
     "node_modules/balanced-match": {
@@ -3856,42 +4200,51 @@
       "dev": true
     },
     "node_modules/bare-events": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.1.tgz",
-      "integrity": "sha512-9GYPpsPFvrWBkelIhOhTWtkeZxVxZOdb3VnFTCzlOo3OjvmTvzLoZFUT8kNFACx0vJej6QPney1Cf9BvzCNE/A==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz",
+      "integrity": "sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==",
       "dev": true,
       "optional": true
     },
     "node_modules/bare-fs": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.1.tgz",
-      "integrity": "sha512-+CjmZANQDFZWy4PGbVdmALIwmt33aJg8qTkVjClU6X4WmZkTPBDxRHiBn7fpqEWEfF3AC2io++erpViAIQbSjg==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+      "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
       "dev": true,
       "optional": true,
       "dependencies": {
         "bare-events": "^2.0.0",
-        "bare-os": "^2.0.0",
         "bare-path": "^2.0.0",
-        "streamx": "^2.13.0"
+        "bare-stream": "^2.0.0"
       }
     },
     "node_modules/bare-os": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.0.tgz",
-      "integrity": "sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+      "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
       "dev": true,
       "optional": true
     },
     "node_modules/bare-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.0.tgz",
-      "integrity": "sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
       "dev": true,
       "optional": true,
       "dependencies": {
         "bare-os": "^2.1.0"
       }
     },
+    "node_modules/bare-stream": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.1.tgz",
+      "integrity": "sha512-eVZbtKM+4uehzrsj49KtCy3Pbg7kO1pJ3SKZ1SFrIH/0pnj9scuGGgUlNDf/7qS8WKtGdiJY5Kyhs/ivYPTB/g==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.21.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4000,12 +4353,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -4533,41 +4886,15 @@
         "node": ">=12.13.0"
       }
     },
-    "node_modules/chrome-launcher/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/chrome-launcher/node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/chromium-bidi": {
-      "version": "0.5.12",
-      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.12.tgz",
-      "integrity": "sha512-sZMgEBWKbupD0Q7lyFu8AWkrE+rs5ycE12jFkGwIgD/VS8lDPtelPlXM7LYaq4zrkZ/O2L3f4afHUHL0ICdKog==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.8.0.tgz",
+      "integrity": "sha512-uJydbGdTw0DEUjhoogGveneJVWX/9YuqkWePzMmkBYwtdAqo5d3J/ovNKFr+/2hWXYmYCr6it8mSSTIj6SS6Ug==",
       "dev": true,
       "dependencies": {
         "mitt": "3.0.1",
-        "urlpattern-polyfill": "10.0.0"
+        "urlpattern-polyfill": "10.0.0",
+        "zod": "3.23.8"
       },
       "peerDependencies": {
         "devtools-protocol": "*"
@@ -4944,9 +5271,12 @@
       }
     },
     "node_modules/composed-offset-position": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.4.tgz",
-      "integrity": "sha512-vMlvu1RuNegVE0YsCDSV/X4X10j56mq7PCIyOKK74FxkXzGLwhOUmdkJLSdOBOMwWycobGUMgft2lp+YgTe8hw=="
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/composed-offset-position/-/composed-offset-position-0.0.6.tgz",
+      "integrity": "sha512-Q7dLompI6lUwd7LWyIcP66r4WcS9u7AL2h8HaeipiRfCRPLMWqRx8fYsjb4OHi6UQFifO7XtNC2IlEJ1ozIFxw==",
+      "peerDependencies": {
+        "@floating-ui/utils": "^0.2.5"
+      }
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -5134,15 +5464,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/cross-fetch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
-      "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
-      "dev": true,
-      "dependencies": {
-        "node-fetch": "^2.6.12"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -5631,75 +5952,30 @@
       "dev": true
     },
     "node_modules/custom-element-jet-brains-integration": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.4.3.tgz",
-      "integrity": "sha512-UMNI6/c5bO2lPlKpaYZHoiAMcmUdECT4BjIoBs0RLrBmBHGECoN+ppTVl9WLs4m/NUR70iXbTIYN6srXmC+m9w==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/custom-element-jet-brains-integration/-/custom-element-jet-brains-integration-1.6.2.tgz",
+      "integrity": "sha512-V3jixEhQG+dg+uwn7bfb+q49MWQmWMCxGw6uT5mwHEEuIxAwtv46xf9Co1WP5h31n8yVJReEl3b7qCNvZPqcpA==",
       "dev": true,
       "dependencies": {
-        "prettier": "^2.8.0"
-      }
-    },
-    "node_modules/custom-element-jet-brains-integration/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "@prettier/sync": "^0.5.2"
       }
     },
     "node_modules/custom-element-vs-code-integration": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.2.2.tgz",
-      "integrity": "sha512-nts++86m/ujE4PZ8HSsxQ6a8ukrWF0J4LdCTFqCnErELCfCO+qozUDGcZ9Ufm5CnL7fYEygproFAZObEmJE8og==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/custom-element-vs-code-integration/-/custom-element-vs-code-integration-1.4.1.tgz",
+      "integrity": "sha512-aOQpNayEzXHUg7JRo/eIS8aCMiOPLuMwhANj4iFdAz3NnHy5Y0Us7uS/qSeJhYbl+5NddygQvp3is8L0ggxMbQ==",
       "dev": true,
       "dependencies": {
-        "prettier": "^2.7.1"
-      }
-    },
-    "node_modules/custom-element-vs-code-integration/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "@prettier/sync": "^0.5.2"
       }
     },
     "node_modules/custom-element-vuejs-integration": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.0.1.tgz",
-      "integrity": "sha512-whoB5DqPNIxaltlvTuOXrP543o5dHKV1ae3a3qFHwKKKwDSCU9vtTOIZpZ4NdRmBPDbaCOgQvYxCJmjdDXrC+g==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/custom-element-vuejs-integration/-/custom-element-vuejs-integration-1.3.3.tgz",
+      "integrity": "sha512-LANqSfeNb8MDLyMh0Gqs4E+H3LlA36TR9zsuAm8M5KQqMAwrl3s+4GAmtJMJwU+ylBAFwsSXWpXYea6vf2NHcw==",
       "dev": true,
       "dependencies": {
-        "prettier": "^2.7.1"
-      }
-    },
-    "node_modules/custom-element-vuejs-integration/node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin-prettier.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
+        "@prettier/sync": "^0.5.2"
       }
     },
     "node_modules/custom-elements-manifest": {
@@ -6125,9 +6401,9 @@
       }
     },
     "node_modules/devtools-protocol": {
-      "version": "0.0.1249869",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1249869.tgz",
-      "integrity": "sha512-Ctp4hInA0BEavlUoRy9mhGq0i+JSo/AwVyX2EFgZmV1kYB+Zq+EMBAn52QWu6FbRr10hRb6pBl420upbp4++vg==",
+      "version": "0.0.1367902",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1367902.tgz",
+      "integrity": "sha512-XxtPuC3PGakY6PD7dG66/o8KwJ/LkH2/EKe19Dcw58w53dv4/vSQEkn/SzuyhHE2q4zPgCkxQBxus3VV4ql+Pg==",
       "dev": true
     },
     "node_modules/diff": {
@@ -6374,9 +6650,9 @@
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
-      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
       "dev": true
     },
     "node_modules/encodeurl": {
@@ -6594,41 +6870,42 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz",
-      "integrity": "sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.19.12",
-        "@esbuild/android-arm": "0.19.12",
-        "@esbuild/android-arm64": "0.19.12",
-        "@esbuild/android-x64": "0.19.12",
-        "@esbuild/darwin-arm64": "0.19.12",
-        "@esbuild/darwin-x64": "0.19.12",
-        "@esbuild/freebsd-arm64": "0.19.12",
-        "@esbuild/freebsd-x64": "0.19.12",
-        "@esbuild/linux-arm": "0.19.12",
-        "@esbuild/linux-arm64": "0.19.12",
-        "@esbuild/linux-ia32": "0.19.12",
-        "@esbuild/linux-loong64": "0.19.12",
-        "@esbuild/linux-mips64el": "0.19.12",
-        "@esbuild/linux-ppc64": "0.19.12",
-        "@esbuild/linux-riscv64": "0.19.12",
-        "@esbuild/linux-s390x": "0.19.12",
-        "@esbuild/linux-x64": "0.19.12",
-        "@esbuild/netbsd-x64": "0.19.12",
-        "@esbuild/openbsd-x64": "0.19.12",
-        "@esbuild/sunos-x64": "0.19.12",
-        "@esbuild/win32-arm64": "0.19.12",
-        "@esbuild/win32-ia32": "0.19.12",
-        "@esbuild/win32-x64": "0.19.12"
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
       }
     },
     "node_modules/esbuild-plugin-replace": {
@@ -7035,10 +7312,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/filesize": {
+      "version": "10.1.6",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz",
+      "integrity": "sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.4.0"
+      }
+    },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -7048,13 +7334,13 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dev": true,
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -7074,6 +7360,15 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/finalhandler/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -7209,6 +7504,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/foreground-child/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -7336,9 +7659,9 @@
       }
     },
     "node_modules/get-east-asian-width": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
-      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
+      "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==",
       "dev": true,
       "engines": {
         "node": ">=18"
@@ -7367,9 +7690,9 @@
       }
     },
     "node_modules/get-port": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/get-port/-/get-port-7.0.0.tgz",
-      "integrity": "sha512-mDHFgApoQd+azgMdwylJrv2DX47ywGq1i5VFJE7fZ0dttNq3iQMfsU4IvEgBHojA3KqEudyu7Vq+oN8kNaNkWw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-7.1.0.tgz",
+      "integrity": "sha512-QB9NKEeDg3xxVwCCwJQ9+xycaz6pBB6iQ76wiWMl1927n0Kir6alPiP+yuiICLLU4jpMe08dXfpebuQppFA2zw==",
       "dev": true,
       "engines": {
         "node": ">=16"
@@ -7403,53 +7726,37 @@
       }
     },
     "node_modules/get-uri": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.3.tgz",
-      "integrity": "sha512-BzUrJBS9EcUb4cFol8r4W3v1cPsSyajLSthNkz5BxbpDcHN5tIrM10E2eNvfnvBn3DaT3DUgx0OpsBKkaOpanw==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.4.tgz",
+      "integrity": "sha512-E1b1lFFLvLgak2whF2xDBcOy6NLVGZBqqjJjsIhvopKfWWEi64pLVTWWehV8KlLerZkfNTA95sTe2OdJKm1OzQ==",
       "dev": true,
       "dependencies": {
         "basic-ftp": "^5.0.2",
         "data-uri-to-buffer": "^6.0.2",
-        "debug": "^4.3.4",
-        "fs-extra": "^11.2.0"
+        "debug": "^4.3.4"
       },
       "engines": {
         "node": ">= 14"
       }
     },
-    "node_modules/get-uri/node_modules/fs-extra": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
-      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/get-uri/node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/get-uri/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
@@ -7902,6 +8209,32 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/husky": {
       "version": "8.0.3",
       "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz",
@@ -8326,6 +8659,25 @@
       "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
+    "node_modules/ip-address": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
+      "integrity": "sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==",
+      "dev": true,
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ip-address/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "dev": true
+    },
     "node_modules/is-absolute": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
@@ -8418,6 +8770,21 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -8655,6 +9022,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/isbinaryfile": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.0.tgz",
@@ -8674,9 +9053,9 @@
       "dev": true
     },
     "node_modules/iso-639-1": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.2.tgz",
-      "integrity": "sha512-Le7BRl3Jt9URvaiEHJCDEdvPZCfhiQoXnFgLAWNRhzFMwRFdWO7/5tLRQbiPzE394I9xd7KdRCM7S6qdOhwG5A==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/iso-639-1/-/iso-639-1-3.1.3.tgz",
+      "integrity": "sha512-1jz0Wh9hyLMRwqEPchb/KZCiTqfFWtc9R3nm7GHPygBAKS8wdKJ3FH4lvLsri6UtAE5Kz5SnowtXZa//6bqMyw==",
       "dev": true,
       "engines": {
         "node": ">=6.0"
@@ -8761,6 +9140,21 @@
         "node": ">= 4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8779,6 +9173,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
+      "integrity": "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==",
+      "dev": true
+    },
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -9116,9 +9516,9 @@
       }
     },
     "node_modules/liquidjs": {
-      "version": "10.10.0",
-      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.10.0.tgz",
-      "integrity": "sha512-f4gPvCq4uV4Fm5YezVUQoAMPmBMEuIE2LvgCnzyWoPRx+ZefH6b8DU2eb7znltRqATHF8zYvOsd5FD2z1spJgg==",
+      "version": "10.19.0",
+      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.19.0.tgz",
+      "integrity": "sha512-dNINmbNJ/bp3B8n25BtZQV/GbrmFf0o2InGdMdfQXa+LxfzTFXOkUnBsOLZUb82sLzxaiWv5Jc381Kn4zHjTsQ==",
       "dev": true,
       "dependencies": {
         "commander": "^10.0.0"
@@ -9274,9 +9674,9 @@
       }
     },
     "node_modules/lit": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz",
-      "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.1.tgz",
+      "integrity": "sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==",
       "dependencies": {
         "@lit/reactive-element": "^2.0.4",
         "lit-element": "^4.1.0",
@@ -9694,9 +10094,9 @@
       "dev": true
     },
     "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
       "dev": true,
       "engines": {
         "node": ">=12"
@@ -9738,6 +10138,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/make-synchronized": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/make-synchronized/-/make-synchronized-0.2.9.tgz",
+      "integrity": "sha512-4wczOs8SLuEdpEvp3vGo83wh8rjJ78UsIk7DIX5fxdfmfMJGog4bQzxfvOwq7Q3yCHLC4jp1urPHIxRS/A93gA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fisker/make-synchronized?sponsor=1"
+      }
+    },
     "node_modules/map-cache": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
@@ -9765,9 +10174,9 @@
       }
     },
     "node_modules/markdown-it-attrs": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.1.6.tgz",
-      "integrity": "sha512-O7PDKZlN8RFMyDX13JnctQompwrrILuz2y43pW2GagcwpIIElkAdfeek+erHfxUOlXWPsjFeWmZ8ch1xtRLWpA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-attrs/-/markdown-it-attrs-4.3.0.tgz",
+      "integrity": "sha512-SQpN8q5LCYtRNuzHaWVLThuJmArN+H3b+jykwaK8AS8XlxyosRvge/7wT9N0XaXCJ5STHGl3gAc6/PXx37cbiQ==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -9995,6 +10404,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mimic-response": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
@@ -10005,9 +10426,9 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
@@ -10028,6 +10449,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/mitt": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-1.2.0.tgz",
@@ -10053,9 +10483,9 @@
       "dev": true
     },
     "node_modules/morphdom": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.2.tgz",
-      "integrity": "sha512-Dqb/lHFyTi7SZpY0a5R4I/0Edo+iPMbaUexsHHsLAByyixCDiLHPHyVoKVmrpL0THcT7V9Cgev9y21TQYq6wQg==",
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/morphdom/-/morphdom-2.7.4.tgz",
+      "integrity": "sha512-ATTbWMgGa+FaMU3FhnFYB6WgulCqwf6opOll4CBzmVDTLvPMmUPrEv8CudmLPK0MESa64+6B89fWOxP3+YIlxQ==",
       "dev": true
     },
     "node_modules/ms": {
@@ -10064,35 +10494,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/multimatch": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-7.0.0.tgz",
-      "integrity": "sha512-SYU3HBAdF4psHEL/+jXDKHO95/m5P2RvboHT2Y0WtTttvJLP4H/2WS9WlQPFvF6C8d6SpLw8vjCnQOnVIVOSJQ==",
-      "dev": true,
-      "dependencies": {
-        "array-differ": "^4.0.0",
-        "array-union": "^3.0.1",
-        "minimatch": "^9.0.3"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/multimatch/node_modules/array-union": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-3.0.1.tgz",
-      "integrity": "sha512-1OvF9IbWwaeiM9VhzYXVQacMibxpXOMYVNIvMtKRyX9SImBXpKcFr8XvFDeEslCyuH/t6KRt7HEO94AlP8Iatw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/mute-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-1.0.0.tgz",
@@ -10300,13 +10701,13 @@
       "license": "MIT"
     },
     "node_modules/node-retrieve-globals": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-5.0.0.tgz",
-      "integrity": "sha512-C4R0rtPEoxJaeo8RnLWx3VMvFgs0fAePFvI6WHBS2BS/aNxuHwL9IK922UBOjHnD5UKVfY1Xef9qk/BkmLrWiw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/node-retrieve-globals/-/node-retrieve-globals-6.0.0.tgz",
+      "integrity": "sha512-VoEp6WMN/JcbBrJr6LnFE11kdzpKiBKNPFrHCEK2GgFWtiYpeL85WgcZpZFFnWxAU0O65+b+ipQAy4Oxy/+Pdg==",
       "dev": true,
       "dependencies": {
-        "acorn": "^8.8.2",
-        "acorn-walk": "^8.3.1",
+        "acorn": "^8.1.3",
+        "acorn-walk": "^8.3.2",
         "esm-import-transformer": "^3.0.2"
       }
     },
@@ -10333,6 +10734,20 @@
         "node": ">=4"
       }
     },
+    "node_modules/npm-check-updates": {
+      "version": "17.1.11",
+      "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-17.1.11.tgz",
+      "integrity": "sha512-TR2RuGIH7P3Qrb0jfdC/nT7JWqXPKjDlxuNQt3kx4oNVf1Pn5SBRB7KLypgYZhruivJthgTtfkkyK4mz342VjA==",
+      "dev": true,
+      "bin": {
+        "ncu": "build/cli.js",
+        "npm-check-updates": "build/cli.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || >=20.0.0",
+        "npm": ">=8.12.1"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
@@ -10546,33 +10961,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/open/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/open/node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/openurl": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/openurl/-/openurl-1.1.1.tgz",
@@ -10601,19 +10989,19 @@
       }
     },
     "node_modules/ora": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-8.0.1.tgz",
-      "integrity": "sha512-ANIvzobt1rls2BDny5fWZ3ZVKyD6nscLvfFRpQgfWsythlcsVUC9kL0zq6j2Z5z9wwp1kd7wpsD/T9qNPVLCaQ==",
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-8.1.1.tgz",
+      "integrity": "sha512-YWielGi1XzG1UTvOaCFaNgEnuhZVMSHYkW/FQ7UX8O26PtlpdM84c0f7wLPlkvx2RfiQmnzd61d/MGxmpQeJPw==",
       "dev": true,
       "dependencies": {
         "chalk": "^5.3.0",
-        "cli-cursor": "^4.0.0",
+        "cli-cursor": "^5.0.0",
         "cli-spinners": "^2.9.2",
         "is-interactive": "^2.0.0",
         "is-unicode-supported": "^2.0.0",
         "log-symbols": "^6.0.0",
-        "stdin-discarder": "^0.2.1",
-        "string-width": "^7.0.0",
+        "stdin-discarder": "^0.2.2",
+        "string-width": "^7.2.0",
         "strip-ansi": "^7.1.0"
       },
       "engines": {
@@ -10624,15 +11012,15 @@
       }
     },
     "node_modules/ora/node_modules/cli-cursor": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
-      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
       "dev": true,
       "dependencies": {
-        "restore-cursor": "^4.0.0"
+        "restore-cursor": "^5.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -10650,46 +11038,49 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ora/node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/ora/node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
       "dev": true,
       "dependencies": {
-        "mimic-fn": "^2.1.0"
+        "mimic-function": "^5.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/ora/node_modules/restore-cursor": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
-      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
       "dev": true,
       "dependencies": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ora/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -10808,71 +11199,19 @@
       }
     },
     "node_modules/pac-proxy-agent": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
-      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.1.0.tgz",
+      "integrity": "sha512-Z5FnLVVZSnX7WjBg0mhDtydeRZ1xMcATZThjySQUHqr+0ksP8kqaw23fNKkaaN/Z8gwLUs/W7xdl0I75eP2Xyw==",
       "dev": true,
       "dependencies": {
         "@tootallnate/quickjs-emscripten": "^0.23.0",
-        "agent-base": "^7.0.2",
+        "agent-base": "^7.1.2",
         "debug": "^4.3.4",
         "get-uri": "^6.0.1",
         "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.2",
-        "pac-resolver": "^7.0.0",
-        "socks-proxy-agent": "^8.0.2"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/pac-proxy-agent/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/pac-proxy-agent/node_modules/http-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/pac-proxy-agent/node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/pac-proxy-agent/node_modules/socks-proxy-agent": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz",
-      "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "^4.3.4",
-        "socks": "^2.7.1"
+        "https-proxy-agent": "^7.0.6",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.5"
       },
       "engines": {
         "node": ">= 14"
@@ -10891,6 +11230,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -11049,6 +11394,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true
+    },
     "node_modules/path-to-regexp": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
@@ -11132,12 +11499,12 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.46.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.1.tgz",
-      "integrity": "sha512-oPcr1yqoXLCkgKtD5eNUPLiN40rYEM39odNpIb6VE6S7/15gJmA1NzVv6zJYusV0e7tzvkU/utBFNa/Kpxmwng==",
+      "version": "1.49.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz",
+      "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==",
       "dev": true,
       "dependencies": {
-        "playwright-core": "1.46.1"
+        "playwright-core": "1.49.1"
       },
       "bin": {
         "playwright": "cli.js"
@@ -11150,9 +11517,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.46.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.1.tgz",
-      "integrity": "sha512-h9LqIQaAv+CYvWzsZ+h3RsrqCStkBHlgo6/TJlFst3cOTlLghBQlJwPOZKQJTKNaD3QIB7aAVQ+gfWbN3NXB7A==",
+      "version": "1.49.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz",
+      "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==",
       "dev": true,
       "bin": {
         "playwright-core": "cli.js"
@@ -11771,6 +12138,18 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/posthtml-match-helper": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/posthtml-match-helper/-/posthtml-match-helper-2.0.3.tgz",
+      "integrity": "sha512-p9oJgTdMF2dyd7WE54QI1LvpBIkNkbSiiECKezNnDVYhGhD1AaOnAkw0Uh0y5TW+OHO8iBdSqnd8Wkpb6iUqmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "posthtml": "^0.16.6"
+      }
+    },
     "node_modules/posthtml-parser": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.11.0.tgz",
@@ -11805,9 +12184,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
-      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
+      "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -11870,57 +12249,19 @@
       }
     },
     "node_modules/proxy-agent": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.4.0.tgz",
-      "integrity": "sha512-u0piLU+nCOHMgGjRbimiXmA9kM/L9EHh3zL81xCdp7m+Y2pHIsnmbdDoEDoAz5geaonNR6q6+yOPQs6n4T6sBQ==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
+      "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==",
       "dev": true,
       "dependencies": {
-        "agent-base": "^7.0.2",
+        "agent-base": "^7.1.2",
         "debug": "^4.3.4",
         "http-proxy-agent": "^7.0.1",
-        "https-proxy-agent": "^7.0.3",
+        "https-proxy-agent": "^7.0.6",
         "lru-cache": "^7.14.1",
-        "pac-proxy-agent": "^7.0.1",
+        "pac-proxy-agent": "^7.1.0",
         "proxy-from-env": "^1.1.0",
-        "socks-proxy-agent": "^8.0.2"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/proxy-agent/node_modules/agent-base": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
-      "integrity": "sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/proxy-agent/node_modules/http-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "node_modules/proxy-agent/node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "4"
+        "socks-proxy-agent": "^8.0.5"
       },
       "engines": {
         "node": ">= 14"
@@ -11935,20 +12276,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/proxy-agent/node_modules/socks-proxy-agent": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.2.tgz",
-      "integrity": "sha512-8zuqoLv1aP/66PHF5TqwJ7Czm3Yv32urJQHrVyhD7mmA6d61Zv8cIXQYPTWwmg6qlupnPvs/QKDmfa4P/qct2g==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "^4.3.4",
-        "socks": "^2.7.1"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -11990,22 +12317,45 @@
       }
     },
     "node_modules/puppeteer-core": {
-      "version": "22.4.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.4.0.tgz",
-      "integrity": "sha512-MZttAbttrxi6O/B//rY6zQihjFe/vXeCLb5YvKH2xG6yrcVESo0Hc5/Cv49omwZyZzAJ1BK8BnDeatDsj+3hMw==",
+      "version": "23.10.4",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.10.4.tgz",
+      "integrity": "sha512-pQAY7+IFAndWDkDodsQGguW1/ifV5OMlGXJDspwtK49Asb7poJZ/V5rXJxVSpq57bWrJasjQBZ1X27z1oWVq4Q==",
       "dev": true,
       "dependencies": {
-        "@puppeteer/browsers": "2.1.0",
-        "chromium-bidi": "0.5.12",
-        "cross-fetch": "4.0.0",
-        "debug": "4.3.4",
-        "devtools-protocol": "0.0.1249869",
-        "ws": "8.16.0"
+        "@puppeteer/browsers": "2.6.1",
+        "chromium-bidi": "0.8.0",
+        "debug": "^4.4.0",
+        "devtools-protocol": "0.0.1367902",
+        "typed-query-selector": "^2.12.0",
+        "ws": "^8.18.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
+    "node_modules/puppeteer-core/node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/qr-creator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/qr-creator/-/qr-creator-1.0.0.tgz",
@@ -12722,13 +13072,10 @@
       "dev": true
     },
     "node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -13179,19 +13526,33 @@
       }
     },
     "node_modules/socks": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/socks/-/socks-2.7.1.tgz",
-      "integrity": "sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==",
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
+      "integrity": "sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==",
       "dev": true,
       "dependencies": {
-        "ip": "^2.0.0",
+        "ip-address": "^9.0.5",
         "smart-buffer": "^4.2.0"
       },
       "engines": {
-        "node": ">= 10.13.0",
+        "node": ">= 10.0.0",
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sort-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
@@ -13261,27 +13622,15 @@
       "dev": true
     },
     "node_modules/ssri": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
-      "integrity": "sha512-97qShzy1AiyxvPNIkLWoGua7xoQzzPjQ0HAH4B0rWKo7SZ6USuPcrUiAFrws0UH8RrbWmgq3LMTObhPIHbbBeQ==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-11.0.0.tgz",
+      "integrity": "sha512-aZpUoMN/Jj2MqA4vMCeiKGnc/8SuSyHbGSBdgFbZxP8OJGF/lFkIuElzPxsN0q8TQQ+prw3P4EDfB3TBHHgfXw==",
       "dev": true,
       "dependencies": {
-        "minipass": "^3.1.1"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/ssri/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
     "node_modules/statuses": {
@@ -13337,13 +13686,17 @@
       "dev": true
     },
     "node_modules/streamx": {
-      "version": "2.15.6",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.6.tgz",
-      "integrity": "sha512-q+vQL4AAz+FdfT137VF69Cc/APqUbxy+MDOImRrMvchJpigHj9GksgDU2LYbO9rx7RX6osWgxJB2WxhYv4SZAw==",
+      "version": "2.21.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.21.1.tgz",
+      "integrity": "sha512-PhP9wUnFLa+91CPy3N6tiQsK+gnYyUNuk15S3YG/zjYE7RuPeCjJngqnzpC31ow0lzBHQ+QGO4cNJnd0djYUsw==",
       "dev": true,
       "dependencies": {
-        "fast-fifo": "^1.1.0",
-        "queue-tick": "^1.0.1"
+        "fast-fifo": "^1.3.2",
+        "queue-tick": "^1.0.1",
+        "text-decoder": "^1.1.0"
+      },
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
       }
     },
     "node_modules/strict-uri-encode": {
@@ -13380,9 +13733,9 @@
       }
     },
     "node_modules/string-width": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
-      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
       "dev": true,
       "dependencies": {
         "emoji-regex": "^10.3.0",
@@ -13396,6 +13749,57 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -13411,6 +13815,28 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
@@ -13587,6 +14013,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+      "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^2.1.1",
+        "bare-path": "^2.1.0"
+      }
+    },
+    "node_modules/tar-fs/node_modules/tar-stream": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
+      "integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
+      "dev": true,
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
@@ -13615,6 +14066,15 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "node_modules/text-decoder": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
+      "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+      "dev": true,
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -13712,9 +14172,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "dev": true
     },
     "node_modules/tsscmp": {
@@ -13748,6 +14208,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
+      "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
+      "dev": true
+    },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -13758,9 +14224,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
-      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -13978,9 +14444,9 @@
       "dev": true
     },
     "node_modules/user-agent-data-types": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.3.1.tgz",
-      "integrity": "sha512-vS7pZmuEVPlf2CQf+PfNbwWJZA4aQAEa8sH7xhMrjZ1zXNvW7HHEdzmSvI7z/qyyIRVD50DEi4ckuzZcebKHGg==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/user-agent-data-types/-/user-agent-data-types-0.4.2.tgz",
+      "integrity": "sha512-jXep3kO/dGNmDOkbDa8ccp4QArgxR4I76m3QVcJ1aOF0B9toc+YtSXtX5gLdDTZXyWlpQYQrABr6L1L2GZOghw==",
       "dev": true
     },
     "node_modules/util-deprecate": {
@@ -14142,6 +14608,89 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/wrap-ansi/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -14184,9 +14733,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -14350,6 +14899,15 @@
       "engines": {
         "node": ">= 4.0.0"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 2ec089e79..2edb442d7 100644
--- a/package.json
+++ b/package.json
@@ -57,32 +57,33 @@
     "prettier:fix": "prettier --write --log-level=warn .",
     "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress",
     "verify": "npm run prettier && npm run build && npm run test",
-    "prepublishOnly": "npm run verify"
+    "prepublishOnly": "npm run verify",
+    "check-updates": "npx npm-check-updates --interactive --format group"
   },
   "engines": {
     "node": ">=14.17.0"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^4.0.2",
-    "@floating-ui/dom": "^1.5.3",
-    "@shoelace-style/animations": "^1.1.0",
+    "@ctrl/tinycolor": "^4.1.0",
+    "@floating-ui/dom": "^1.6.12",
+    "@shoelace-style/animations": "^1.2.0",
     "@shoelace-style/localize": "^3.2.1",
-    "composed-offset-position": "^0.0.4",
-    "lit": "^3.0.0",
+    "composed-offset-position": "^0.0.6",
+    "lit": "^3.2.1",
     "qr-creator": "^1.0.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "3.0.0-alpha.5",
-    "@custom-elements-manifest/analyzer": "^0.9.4",
+    "@11ty/eleventy": "3.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@konnorr/esbuild-plugin-lit-css": "^1.0.1",
     "@lit-labs/eleventy-plugin-lit": "^1.0.3",
-    "@lit-labs/testing": "^0.2.4",
-    "@lit/react": "^1.0.0",
+    "@lit-labs/testing": "^0.2.5",
+    "@lit/react": "^1.0.6",
     "@open-wc/testing": "^3.2.0",
-    "@types/mocha": "^10.0.2",
+    "@types/mocha": "^10.0.10",
     "@types/react": "^18.2.28",
     "@web/dev-server-esbuild": "^0.3.6",
-    "@web/test-runner": "^0.18.1",
+    "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "browser-sync": "^2.29.3",
@@ -90,47 +91,48 @@
     "change-case": "^4.1.2",
     "chokidar": "^3.5.3",
     "command-line-args": "^5.2.1",
-    "comment-parser": "^1.4.0",
+    "comment-parser": "^1.4.1",
     "cspell": "^6.18.1",
-    "custom-element-jet-brains-integration": "^1.4.0",
-    "custom-element-vs-code-integration": "^1.2.1",
-    "custom-element-vuejs-integration": "^1.0.0",
+    "custom-element-jet-brains-integration": "^1.6.2",
+    "custom-element-vs-code-integration": "^1.4.1",
+    "custom-element-vuejs-integration": "^1.3.3",
     "del": "^7.1.0",
     "download": "^8.0.0",
-    "esbuild": "^0.19.4",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-replace": "^1.4.0",
     "front-matter": "^4.0.2",
-    "get-port": "^7.0.0",
+    "get-port": "^7.1.0",
     "globby": "^13.2.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "lunr": "^2.3.9",
     "markdown-it": "^14.1.0",
-    "markdown-it-attrs": "^4.1.6",
+    "markdown-it-attrs": "^4.3.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-kbd": "^2.2.2",
     "markdown-it-mark": "^3.0.1",
     "marked": "^11.1.0",
     "node-html-parser": "^6.1.13",
-    "ora": "^8.0.1",
+    "npm-check-updates": "^17.1.11",
+    "ora": "^8.1.1",
     "pascal-case": "^3.1.2",
-    "playwright": "^1.46.1",
-    "plop": "^4.0.0",
-    "prettier": "^3.0.3",
+    "playwright": "^1.49.1",
+    "plop": "^4.0.1",
+    "prettier": "^3.4.2",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "recursive-copy": "^2.0.14",
     "sinon": "^16.1.0",
     "source-map": "^0.7.4",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "user-agent-data-types": "^0.3.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "user-agent-data-types": "^0.4.2",
     "uuid": "^9.0.1"
   },
   "overrides": {
-    "playwright": "^1.46.1"
+    "playwright": "^1.49.1"
   },
   "lint-staged": {
     "*.{ts,js}": [

From 25ee6ef1ad0436134885088bf086ad8cf78d46be Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 17 Dec 2024 10:44:40 -0500
Subject: [PATCH 34/41] fix ts errors

---
 src/internal/webawesome-element.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/internal/webawesome-element.ts b/src/internal/webawesome-element.ts
index e585ba361..17e2364ed 100644
--- a/src/internal/webawesome-element.ts
+++ b/src/internal/webawesome-element.ts
@@ -226,6 +226,7 @@ export class WebAwesomeFormAssociatedElement
       this.addEventListener('invalid', this.emitInvalid);
     }
   }
+  states: CustomStateSet;
 
   connectedCallback() {
     super.connectedCallback();
@@ -493,7 +494,6 @@ export class WebAwesomeFormAssociatedElement
   // Custom states
   addCustomState(state: string) {
     try {
-      // @ts-expect-error CustomStateSet doesn't exist in TS yet.
       (this.internals.states as Set<string>).add(state);
     } catch (_) {
       // Without this, test suite errors.
@@ -504,7 +504,6 @@ export class WebAwesomeFormAssociatedElement
 
   deleteCustomState(state: string) {
     try {
-      // @ts-expect-error CustomStateSet doesn't exist in TS yet.
       (this.internals.states as Set<string>).delete(state);
     } catch (_) {
       // Without this, test suite errors.
@@ -531,7 +530,6 @@ export class WebAwesomeFormAssociatedElement
     let bool = false;
 
     try {
-      // @ts-expect-error CustomStateSet doesn't exist in TS yet.
       bool = (this.internals.states as Set<string>).has(state);
     } catch (_) {
       // Without this, test suite errors.

From f8e367a5e7ce0f0e23a2e4ec21c4ae6cd063d62e Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 10:46:40 -0500
Subject: [PATCH 35/41] Move size utils to `style/utilities/`

---
 src/components/button/button.ts             | 2 +-
 src/components/checkbox/checkbox.ts         | 2 +-
 src/components/radio-button/radio-button.ts | 2 +-
 src/components/radio-group/radio-group.ts   | 2 +-
 src/components/radio/radio.ts               | 2 +-
 src/components/select/select.ts             | 2 +-
 src/components/tag/tag.ts                   | 2 +-
 src/components/textarea/textarea.ts         | 2 +-
 src/styles/{shadow => utilities}/size.css   | 0
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename src/styles/{shadow => utilities}/size.css (100%)

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 9ca6e1364..22d4235ee 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -9,8 +9,8 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/button.css';
-import sizeStyles from '../../styles/shadow/size.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index 3d279fe3e..0780a8d7f 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -13,7 +13,7 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';
 import styles from './checkbox.css';
 
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index d04012666..a8556e390 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/src/components/radio-button/radio-button.ts
@@ -8,7 +8,7 @@ import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import nativeStyles from '../../styles/native/button.css';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import buttonStyles from '../button/button.css';
 import styles from './radio-button.css';
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index 8be532030..caac4fa05 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -9,8 +9,8 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import sizeStyles from '../../styles/shadow/size.css';
 import buttonGroupStyles from '../../styles/utilities/button-group.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import type WaRadioButton from '../radio-button/radio-button.js';
 import '../radio/radio.js';
 import type WaRadio from '../radio/radio.js';
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 8847c64a8..119e145a6 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -5,7 +5,7 @@ import { WaBlurEvent } from '../../events/blur.js';
 import { WaFocusEvent } from '../../events/focus.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import '../icon/icon.js';
 import styles from './radio.css';
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index c91e151cf..13736e957 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -21,7 +21,7 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import type WaOption from '../option/option.js';
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 338df48bb..5896bd883 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { WaRemoveEvent } from '../../events/remove.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon-button/icon-button.js';
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index f01159112..2af72b01b 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -12,7 +12,7 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
-import sizeStyles from '../../styles/shadow/size.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import styles from './textarea.css';
 
 /**
diff --git a/src/styles/shadow/size.css b/src/styles/utilities/size.css
similarity index 100%
rename from src/styles/shadow/size.css
rename to src/styles/utilities/size.css

From 5293f0fa63cf6c9bc2704866933614a7f8d9a6ae Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 17 Dec 2024 10:57:23 -0500
Subject: [PATCH 36/41] downgrade esbuild

---
 package-lock.json | 200 +++++++++++++++++++++++-----------------------
 package.json      |   2 +-
 2 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 510f9d6a2..c4e9b45c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "custom-element-vuejs-integration": "^1.3.3",
         "del": "^7.1.0",
         "download": "^8.0.0",
-        "esbuild": "^0.24.0",
+        "esbuild": "0.23.1",
         "esbuild-plugin-replace": "^1.4.0",
         "front-matter": "^4.0.2",
         "get-port": "^7.1.0",
@@ -1231,9 +1231,9 @@
       "dev": true
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
-      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
+      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1247,9 +1247,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
-      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
+      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
       "cpu": [
         "arm"
       ],
@@ -1263,9 +1263,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
-      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
+      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
       "cpu": [
         "arm64"
       ],
@@ -1279,9 +1279,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
-      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
+      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
       "cpu": [
         "x64"
       ],
@@ -1295,9 +1295,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
-      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
+      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
       "cpu": [
         "arm64"
       ],
@@ -1311,9 +1311,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
-      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
+      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
       "cpu": [
         "x64"
       ],
@@ -1327,9 +1327,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
-      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
       "cpu": [
         "arm64"
       ],
@@ -1343,9 +1343,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
-      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
+      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
       "cpu": [
         "x64"
       ],
@@ -1359,9 +1359,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
-      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
+      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
       "cpu": [
         "arm"
       ],
@@ -1375,9 +1375,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
-      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
+      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
       "cpu": [
         "arm64"
       ],
@@ -1391,9 +1391,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
-      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
+      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
       "cpu": [
         "ia32"
       ],
@@ -1407,9 +1407,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
-      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
+      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
       "cpu": [
         "loong64"
       ],
@@ -1423,9 +1423,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
-      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
+      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
       "cpu": [
         "mips64el"
       ],
@@ -1439,9 +1439,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
-      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
+      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
       "cpu": [
         "ppc64"
       ],
@@ -1455,9 +1455,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
-      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
+      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
       "cpu": [
         "riscv64"
       ],
@@ -1471,9 +1471,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
-      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
+      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
       "cpu": [
         "s390x"
       ],
@@ -1487,9 +1487,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
-      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
+      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
       "cpu": [
         "x64"
       ],
@@ -1503,9 +1503,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
-      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
       "cpu": [
         "x64"
       ],
@@ -1519,9 +1519,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
-      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
+      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
       "cpu": [
         "arm64"
       ],
@@ -1535,9 +1535,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
-      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
+      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
       "cpu": [
         "x64"
       ],
@@ -1551,9 +1551,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
-      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
+      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
       "cpu": [
         "x64"
       ],
@@ -1567,9 +1567,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
-      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
+      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
       "cpu": [
         "arm64"
       ],
@@ -1583,9 +1583,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
-      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
+      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
       "cpu": [
         "ia32"
       ],
@@ -1599,9 +1599,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
-      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
+      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
       "cpu": [
         "x64"
       ],
@@ -6870,9 +6870,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
-      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+      "version": "0.23.1",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
+      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -6882,30 +6882,30 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.24.0",
-        "@esbuild/android-arm": "0.24.0",
-        "@esbuild/android-arm64": "0.24.0",
-        "@esbuild/android-x64": "0.24.0",
-        "@esbuild/darwin-arm64": "0.24.0",
-        "@esbuild/darwin-x64": "0.24.0",
-        "@esbuild/freebsd-arm64": "0.24.0",
-        "@esbuild/freebsd-x64": "0.24.0",
-        "@esbuild/linux-arm": "0.24.0",
-        "@esbuild/linux-arm64": "0.24.0",
-        "@esbuild/linux-ia32": "0.24.0",
-        "@esbuild/linux-loong64": "0.24.0",
-        "@esbuild/linux-mips64el": "0.24.0",
-        "@esbuild/linux-ppc64": "0.24.0",
-        "@esbuild/linux-riscv64": "0.24.0",
-        "@esbuild/linux-s390x": "0.24.0",
-        "@esbuild/linux-x64": "0.24.0",
-        "@esbuild/netbsd-x64": "0.24.0",
-        "@esbuild/openbsd-arm64": "0.24.0",
-        "@esbuild/openbsd-x64": "0.24.0",
-        "@esbuild/sunos-x64": "0.24.0",
-        "@esbuild/win32-arm64": "0.24.0",
-        "@esbuild/win32-ia32": "0.24.0",
-        "@esbuild/win32-x64": "0.24.0"
+        "@esbuild/aix-ppc64": "0.23.1",
+        "@esbuild/android-arm": "0.23.1",
+        "@esbuild/android-arm64": "0.23.1",
+        "@esbuild/android-x64": "0.23.1",
+        "@esbuild/darwin-arm64": "0.23.1",
+        "@esbuild/darwin-x64": "0.23.1",
+        "@esbuild/freebsd-arm64": "0.23.1",
+        "@esbuild/freebsd-x64": "0.23.1",
+        "@esbuild/linux-arm": "0.23.1",
+        "@esbuild/linux-arm64": "0.23.1",
+        "@esbuild/linux-ia32": "0.23.1",
+        "@esbuild/linux-loong64": "0.23.1",
+        "@esbuild/linux-mips64el": "0.23.1",
+        "@esbuild/linux-ppc64": "0.23.1",
+        "@esbuild/linux-riscv64": "0.23.1",
+        "@esbuild/linux-s390x": "0.23.1",
+        "@esbuild/linux-x64": "0.23.1",
+        "@esbuild/netbsd-x64": "0.23.1",
+        "@esbuild/openbsd-arm64": "0.23.1",
+        "@esbuild/openbsd-x64": "0.23.1",
+        "@esbuild/sunos-x64": "0.23.1",
+        "@esbuild/win32-arm64": "0.23.1",
+        "@esbuild/win32-ia32": "0.23.1",
+        "@esbuild/win32-x64": "0.23.1"
       }
     },
     "node_modules/esbuild-plugin-replace": {
diff --git a/package.json b/package.json
index 2edb442d7..efede1452 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "custom-element-vuejs-integration": "^1.3.3",
     "del": "^7.1.0",
     "download": "^8.0.0",
-    "esbuild": "^0.24.0",
+    "esbuild": "0.23.1",
     "esbuild-plugin-replace": "^1.4.0",
     "front-matter": "^4.0.2",
     "get-port": "^7.1.0",

From 49eeca1617c4129a42c81d3fbc7f284eb1f3b12c Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 11:20:54 -0500
Subject: [PATCH 37/41] Update callout.css

---
 src/components/callout/callout.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css
index bb691ef27..efc3a76d0 100644
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -2,19 +2,16 @@
   --icon-color: currentColor;
   --icon-size: var(--wa-font-size-l);
   --spacing: var(--wa-space-m);
-  --background-color: var(--wa-color-fill-quiet);
-  --border-color: var(--wa-color-border-quiet);
-  --text-color: var(--wa-color-on-normal);
 
   position: relative;
   display: flex;
   align-items: stretch;
   border-radius: var(--wa-panel-border-radius);
-  background-color: var(--background-color);
-  border-color: var(--border-color);
+  background-color: var(--background-color, var(--wa-color-fill-quiet));
+  border-color: var(--border-color, var(--wa-color-border-quiet));
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
-  color: var(--text-color);
+  color: var(--text-color, var(--wa-color-on-normal));
   padding: var(--spacing);
 }
 

From c1153708f65b5a9aa8c43cd61dc4be23f71c5143 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 17 Dec 2024 11:47:59 -0500
Subject: [PATCH 38/41] Fix link button appearance

---
 src/styles/native/button.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/native/button.css b/src/styles/native/button.css
index e6c1182e3..cb512e37c 100644
--- a/src/styles/native/button.css
+++ b/src/styles/native/button.css
@@ -41,6 +41,7 @@
 
 button,
 input:is([type='button'], [type='reset'], [type='submit']),
+:host([href]) a,
 .wa-button:not([part~='base']) {
   display: inline-flex;
   background-color: var(--background-color);

From d08b95378abb0e9c93edcca1b8e6e2f46971c482 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 17 Dec 2024 11:50:50 -0500
Subject: [PATCH 39/41] Fix custom button styles

---
 docs/index.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index 1cbec4c91..94253b059 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -86,13 +86,13 @@ layout: page
       flex: 1 1 67%;
     }
     & wa-button {
-      --wa-form-control-height-s: 2.5rem;
       --border-color: black;
       --border-width: 0.125rem;
-      --box-shadow: 0 0.25rem 0 0 var(--border-color);
+      box-shadow: 0 0.25rem 0 0 var(--border-color);
       flex: 1 1 auto;
+      height: 2.5rem;
       &:active:not([disabled]) {
-        --box-shadow: 0 0 0 0 transparent;
+        box-shadow: 0 0 0 0 transparent;
         transform: translateY(0.25rem);
       }
     }
@@ -190,8 +190,7 @@ layout: page
         gap: 0.5rem;
       }
       & wa-button {
-        --wa-form-control-height-m: 1.5rem;
-        display: inline-flex;
+        height: 1.5rem;
         font-size: 0.75rem;
       }
     }

From 9c4e4a22801f88e184a32982f7b0d194e31df5f5 Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Tue, 17 Dec 2024 11:57:32 -0500
Subject: [PATCH 40/41] =?UTF-8?q?Use=20`appearance`=20for=20alpha=20badge?=
 =?UTF-8?q?=20=F0=9F=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/_includes/base.njk     | 2 +-
 docs/assets/styles/docs.css | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 24d3c80cc..987d6e35f 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -98,7 +98,7 @@
             <span class="only-mobile">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="only-desktop">{{ package.version }}</small>
-          <wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
+          <wa-badge variant="warning" appearance="tinted" class="only-desktop">Alpha</wa-badge>
         </div>
 
         <div id="docs-toolbar">
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 2eb6967ea..13adb0761 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -76,8 +76,6 @@ wa-page > header {
     margin-block-start: var(--wa-space-2xs);
   }
   #version-number + wa-badge {
-    --background-color: var(--wa-color-warning-fill-quiet);
-    --text-color: var(--wa-color-warning-on-quiet);
     font-size: var(--wa-font-size-2xs);
     text-transform: uppercase;
   }

From 1bf83499b028abc8ff643c0d41ade383d6d01252 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 12:08:41 -0500
Subject: [PATCH 41/41] Refactor: Move 11ty filters to separate file

---
 docs/.eleventy.js      | 18 +++++-------------
 docs/_utils/filters.js | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 docs/_utils/filters.js

diff --git a/docs/.eleventy.js b/docs/.eleventy.js
index d55b0fb10..5d3122df3 100644
--- a/docs/.eleventy.js
+++ b/docs/.eleventy.js
@@ -1,4 +1,3 @@
-import { parse } from 'path';
 import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
 import { codeExamplesPlugin } from './_utils/code-examples.js';
 import { copyCodePlugin } from './_utils/copy-code.js';
@@ -10,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
 import litPlugin from '@lit-labs/eleventy-plugin-lit';
 import { readFile } from 'fs/promises';
 import componentList from './_data/componentList.js';
+import * as filters from './_utils/filters.js';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
@@ -38,18 +38,10 @@ export default function (eleventyConfig) {
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
-  eleventyConfig.addFilter('stripExtension', string => parse(string).name);
-  eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
-  eleventyConfig.addFilter('trimPipes', content => {
-    // Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
-    // With Prettier 3, this means a leading pipe will exist be present when the line wraps.
-    return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
-  });
-  eleventyConfig.addFilter('keys', obj => Object.keys(obj));
-  eleventyConfig.addFilter('log', (firstArg, ...rest) => {
-    console.log(firstArg, ...rest);
-    return firstArg;
-  });
+
+  for (let name in filters) {
+    eleventyConfig.addFilter(name, filters[name]);
+  }
 
   eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
     key = key.split('.');
diff --git a/docs/_utils/filters.js b/docs/_utils/filters.js
new file mode 100644
index 000000000..2bec1ff86
--- /dev/null
+++ b/docs/_utils/filters.js
@@ -0,0 +1,24 @@
+import { parse } from 'path';
+
+export function stripExtension(string) {
+  return parse(string).name;
+}
+
+export function stripPrefix(content) {
+  return content.replace(/^wa-/, '');
+}
+
+// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
+// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
+export function trimPipes(content) {
+  return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
+}
+
+export function keys(obj) {
+  return Object.keys(obj);
+}
+
+export function log(firstArg, ...rest) {
+  console.log(firstArg, ...rest);
+  return firstArg;
+}