@compa11y/web 0.1.2 → 0.1.5

package/dist/compa11y.js

@@ -1,8 +1,8 @@
-import { generateId as te, announce as v, announcePolite as p, createTypeAhead as q, announceAssertive as D, prefersDarkMode as ie, prefersHighContrast as se, prefersReducedMotion as ae, isBrowser as re, hasAccessibleName as oe, buildAriaProps as le, aria as ne, KeyboardPatterns as he, createKeyboardManager as de, createRovingTabindex as ce, createFocusScope as ue, createFocusTrap as be, initFocusVisible as T, announceError as pe, announceStatus as ge, initAnnouncer as R } from "@compa11y/core";
-import { KeyboardPatterns as He, announce as Me, announceAssertive as Ke, announceError as Fe, announcePolite as Ne, announceStatus as Pe, aria as je, buildAriaProps as Ue, createFocusScope as Ye, createFocusTrap as Ge, createKeyboardManager as Xe, createRovingTabindex as Ve, createTypeAhead as We, hasAccessibleName as Je, initAnnouncer as Qe, initFocusVisible as Ze, isBrowser as et, prefersDarkMode as tt, prefersHighContrast as it, prefersReducedMotion as st } from "@compa11y/core";
-class c extends HTMLElement {
+import { generateId as at, announce as v, announcePolite as p, createTypeAhead as q, announceAssertive as O, prefersDarkMode as rt, prefersHighContrast as ot, prefersReducedMotion as lt, isBrowser as nt, hasAccessibleName as ht, buildAriaProps as dt, aria as ct, KeyboardPatterns as ut, createKeyboardManager as bt, createRovingTabindex as pt, createFocusScope as mt, createFocusTrap as gt, initFocusVisible as H, announceError as vt, announceStatus as ft, initAnnouncer as B } from "@compa11y/core";
+import { KeyboardPatterns as jt, announce as Ut, announceAssertive as Yt, announceError as Gt, announcePolite as Vt, announceStatus as Xt, aria as Wt, buildAriaProps as Jt, createFocusScope as Qt, createFocusTrap as Zt, createKeyboardManager as te, createRovingTabindex as ee, createTypeAhead as ie, hasAccessibleName as se, initAnnouncer as ae, initFocusVisible as re, isBrowser as oe, prefersDarkMode as le, prefersHighContrast as ne, prefersReducedMotion as he } from "@compa11y/core";
+class d extends HTMLElement {
   constructor() {
-    super(), this._internals = null, this._id = te(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), this._internals = null, this._id = at(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
   }
   /**
    * Standard observed attributes
@@ -25,8 +25,8 @@ class c extends HTMLElement {
   /**
    * Called when observed attributes change
    */
-  attributeChangedCallback(e, t, i) {
-    t !== i && this.onAttributeChange(e, t, i);
+  attributeChangedCallback(t, e, i) {
+    e !== i && this.onAttributeChange(t, e, i);
   }
   /**
    * Set up event listeners
@@ -41,15 +41,15 @@ class c extends HTMLElement {
   /**
    * Handle attribute changes
    */
-  onAttributeChange(e, t, i) {
+  onAttributeChange(t, e, i) {
   }
   /**
    * Emit a custom event
    */
-  emit(e, t) {
+  emit(t, e) {
     return this.dispatchEvent(
-      new CustomEvent(e, {
-        detail: t,
+      new CustomEvent(t, {
+        detail: e,
         bubbles: !0,
         composed: !0,
         cancelable: !0
@@ -59,25 +59,25 @@ class c extends HTMLElement {
   /**
    * Query a slot
    */
-  getSlot(e) {
-    var t;
-    return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(`slot[name="${e}"]`)) ?? null;
+  getSlot(t) {
+    var e;
+    return ((e = this.shadowRoot) == null ? void 0 : e.querySelector(`slot[name="${t}"]`)) ?? null;
   }
   /**
    * Get slotted elements
    */
-  getSlottedElements(e) {
+  getSlottedElements(t) {
     var s;
-    const t = e ? `slot[name="${e}"]` : "slot:not([name])", i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
-      t
+    const e = t ? `slot[name="${t}"]` : "slot:not([name])", i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+      e
     );
     return (i == null ? void 0 : i.assignedElements()) ?? [];
   }
 }
-function u(n, e) {
-  customElements.get(n) || customElements.define(n, e);
+function c(n, t) {
+  customElements.get(n) || customElements.define(n, t);
 }
-const H = `
+const T = `
   appearance: none;
   background: none;
   border: none;
@@ -86,13 +86,13 @@ const H = `
   font: inherit;
   color: inherit;
   cursor: pointer;
-`, me = `
+`, _t = `
   :host(:focus-visible),
   :focus-visible {
     outline: 2px solid var(--compa11y-focus-color, #0066cc);
     outline-offset: 2px;
   }
-`, b = `
+`, u = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -108,9 +108,9 @@ const H = `
     box-sizing: inherit;
   }
 
-  ${me}
-`, ve = `
-  ${b}
+  ${_t}
+`, yt = `
+  ${u}
 
   :host {
     position: fixed;
@@ -148,8 +148,8 @@ const H = `
     margin: 0 0 1rem 0;
     color: var(--compa11y-dialog-description-color, #666);
   }
-`, fe = `
-  ${b}
+`, xt = `
+  ${u}
 
   :host {
     position: relative;
@@ -200,8 +200,8 @@ const H = `
     margin: 0.25rem 0;
     background: var(--compa11y-menu-separator-color, #e0e0e0);
   }
-`, _e = `
-  ${b}
+`, Et = `
+  ${u}
 
   .tablist {
     display: flex;
@@ -216,7 +216,7 @@ const H = `
   }
 
   ::slotted([role="tab"]) {
-    ${H}
+    ${T}
     padding: var(--compa11y-tab-padding, 0.75rem 1rem);
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
@@ -246,8 +246,8 @@ const H = `
   ::slotted([role="tabpanel"][hidden]) {
     display: none;
   }
-`, ye = `
-  ${b}
+`, At = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -305,7 +305,7 @@ const H = `
   }
 
   .clear-button {
-    ${H}
+    ${T}
     position: absolute;
     right: 1.5rem;
     width: 1.25rem;
@@ -387,8 +387,8 @@ const H = `
   .options-source {
     display: none;
   }
-`, xe = `
-  ${b}
+`, kt = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -517,8 +517,8 @@ const H = `
   .options-source {
     display: none;
   }
-`, Ae = `
-  ${b}
+`, wt = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -621,8 +621,8 @@ const H = `
     opacity: 0.5;
     cursor: not-allowed;
   }
-`, Ee = `
-  ${b}
+`, $t = `
+  ${u}
 
   :host {
     display: block;
@@ -700,8 +700,8 @@ const H = `
     color: var(--compa11y-input-error-color, #ef4444);
     font-size: var(--compa11y-input-error-size, 0.8125rem);
   }
-`, ke = `
-  ${b}
+`, Lt = `
+  ${u}
 
   :host {
     display: block;
@@ -781,8 +781,8 @@ const H = `
     color: var(--compa11y-textarea-error-color, #ef4444);
     font-size: var(--compa11y-textarea-error-size, 0.8125rem);
   }
-`, we = `
-  ${b}
+`, St = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -896,8 +896,8 @@ const H = `
     border-radius: 50%;
     animation: compa11y-spin 0.6s linear infinite;
   }
-`, $e = `
-  ${b}
+`, It = `
+  ${u}
 
   :host {
     display: block;
@@ -918,9 +918,10 @@ const H = `
     cursor: not-allowed;
   }
 
+  /* Focus indicator lives on the active option (via data-focused),
+     not on the container, to avoid a double focus ring. */
   :host(:focus-visible) .listbox-wrapper {
-    outline: 2px solid var(--compa11y-focus-color, #0066cc);
-    outline-offset: 2px;
+    outline: none;
   }
 
   :host([orientation="horizontal"]) .listbox-wrapper {
@@ -929,8 +930,8 @@ const H = `
     max-height: none;
     overflow-y: visible;
   }
-`, Le = `
-  ${b}
+`, Ct = `
+  ${u}
 
   :host {
     display: block;
@@ -978,8 +979,8 @@ const H = `
   :host([aria-selected="true"]) .check-mark {
     visibility: visible;
   }
-`, Se = `
-  ${b}
+`, Tt = `
+  ${u}
 
   :host {
     display: block;
@@ -997,8 +998,8 @@ const H = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Ie = `
-  ${b}
+`, zt = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -1160,8 +1161,8 @@ const H = `
       color: HighlightText;
     }
   }
-`, Ce = `
-  ${b}
+`, Dt = `
+  ${u}
 
   :host {
     display: block;
@@ -1202,8 +1203,8 @@ const H = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, ze = `
-  ${b}
+`, qt = `
+  ${u}
 
   :host {
     display: block;
@@ -1255,8 +1256,8 @@ const H = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, qe = `
-  ${b}
+`, Ot = `
+  ${u}
 
   :host {
     display: inline-block;
@@ -1375,31 +1376,147 @@ const H = `
       background: HighlightText;
     }
   }
-`, B = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-class M extends c {
+`, Rt = `
+  ${u}
+
+  :host {
+    position: fixed;
+    z-index: var(--compa11y-toast-z-index, 9999);
+    padding: var(--compa11y-toast-viewport-padding, 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--compa11y-toast-gap, 0.5rem);
+    pointer-events: none;
+  }
+
+  /* Position variants */
+  :host([position="top-left"]) { top: 0; left: 0; }
+  :host([position="top-center"]) { top: 0; left: 50%; transform: translateX(-50%); }
+  :host([position="top-right"]) { top: 0; right: 0; }
+  :host([position="bottom-left"]) { bottom: 0; left: 0; }
+  :host(:not([position])),
+  :host([position="bottom-right"]) { bottom: 0; right: 0; }
+  :host([position="bottom-center"]) { bottom: 0; left: 50%; transform: translateX(-50%); }
+
+  .toast {
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: var(--compa11y-toast-padding, 0.75rem 1rem);
+    background: var(--compa11y-toast-bg, white);
+    border: var(--compa11y-toast-border, 1px solid #e0e0e0);
+    border-radius: var(--compa11y-toast-radius, 6px);
+    box-shadow: var(--compa11y-toast-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));
+    min-width: var(--compa11y-toast-min-width, 250px);
+    max-width: var(--compa11y-toast-max-width, 420px);
+  }
+
+  .toast[data-type="error"] {
+    border-left: 4px solid var(--compa11y-toast-error-color, #ef4444);
+  }
+
+  .toast[data-type="warning"] {
+    border-left: 4px solid var(--compa11y-toast-warning-color, #f59e0b);
+  }
+
+  .toast[data-type="success"] {
+    border-left: 4px solid var(--compa11y-toast-success-color, #22c55e);
+  }
+
+  .toast[data-type="info"] {
+    border-left: 4px solid var(--compa11y-toast-info-color, #3b82f6);
+  }
+
+  .toast-content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .toast-title {
+    font-weight: var(--compa11y-toast-title-weight, 600);
+    font-size: var(--compa11y-toast-title-size, 0.875rem);
+  }
+
+  .toast-description {
+    color: var(--compa11y-toast-description-color, #666);
+    font-size: var(--compa11y-toast-description-size, 0.8125rem);
+    margin-top: 0.125rem;
+  }
+
+  .toast-close {
+    ${T}
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--compa11y-toast-close-radius, 4px);
+    color: var(--compa11y-toast-close-color, #999);
+    font-size: 1.125rem;
+    line-height: 1;
+  }
+
+  .toast-close:hover {
+    background: var(--compa11y-toast-close-hover-bg, rgba(0, 0, 0, 0.05));
+    color: var(--compa11y-toast-close-hover-color, #333);
+  }
+
+  .toast-close:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  .toast-action {
+    ${T}
+    margin-top: 0.375rem;
+    font-size: var(--compa11y-toast-action-size, 0.8125rem);
+    font-weight: 500;
+    color: var(--compa11y-toast-action-color, #0066cc);
+    text-decoration: underline;
+  }
+
+  .toast-action:hover {
+    color: var(--compa11y-toast-action-hover-color, #0052a3);
+  }
+
+  .toast-action:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+`, M = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let L = 0, K = "";
+function Ht() {
+  L === 0 && (K = document.body.style.overflow, document.body.style.overflow = "hidden"), L++;
+}
+function Bt() {
+  L--, L <= 0 && (L = 0, document.body.style.overflow = K);
+}
+class N extends d {
   constructor() {
     super(...arguments), this._open = !1, this._previouslyFocused = null, this._triggerElement = null, this.handleTriggerClick = () => {
       this.open = !0;
     }, this.handleClose = () => {
       this.open = !1;
-    }, this.handleKeyDown = (e) => {
-      var t;
+    }, this.handleKeyDown = (t) => {
+      var e;
       if (this._open) {
-        if (e.key === "Escape") {
-          this.getAttribute("close-on-escape") !== "false" && (e.preventDefault(), this.handleClose());
+        if (t.key === "Escape") {
+          this.getAttribute("close-on-escape") !== "false" && (t.preventDefault(), this.handleClose());
           return;
         }
-        if (e.key === "Tab") {
-          e.preventDefault();
+        if (t.key === "Tab") {
+          t.preventDefault();
           const i = this.getFocusableElements();
           if (i.length === 0) return;
-          const s = ((t = this.shadowRoot) == null ? void 0 : t.activeElement) || document.activeElement;
+          const s = ((e = this.shadowRoot) == null ? void 0 : e.activeElement) || document.activeElement;
           let a = i.findIndex(
             (o) => o === s
           );
-          a === -1 && (a = e.shiftKey ? 0 : i.length - 1);
+          a === -1 && (a = t.shiftKey ? 0 : i.length - 1);
           let r;
-          e.shiftKey ? r = a === 0 ? i.length - 1 : a - 1 : r = a === i.length - 1 ? 0 : a + 1;
+          t.shiftKey ? r = a === 0 ? i.length - 1 : a - 1 : r = a === i.length - 1 ? 0 : a + 1;
           const l = i[r];
           l && l.focus();
         }
@@ -1412,26 +1529,26 @@ class M extends c {
   get open() {
     return this._open;
   }
-  set open(e) {
-    const t = this._open;
-    this._open = e, e !== t && (e ? this.showDialog() : this.hideDialog()), this.toggleAttribute("open", e);
+  set open(t) {
+    const e = this._open;
+    this._open = t, t !== e && (t ? this.showDialog() : this.hideDialog()), this.toggleAttribute("open", t);
   }
   setupAccessibility() {
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-title`, i = `${this._id}-desc`;
-    e.innerHTML = `
-      <style>${ve}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-title`, i = `${this._id}-desc`;
+    t.innerHTML = `
+      <style>${yt}</style>
       <div class="overlay" part="overlay"></div>
       <div
         class="dialog"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="${t}"
+        aria-labelledby="${e}"
         aria-describedby="${i}"
         part="dialog"
       >
-        <div id="${t}" part="title">
+        <div id="${e}" part="title">
           <slot name="title"></slot>
         </div>
         <div id="${i}" part="description">
@@ -1448,10 +1565,10 @@ class M extends c {
   }
   setupEventListeners() {
     var i;
-    const e = this.getAttribute("trigger");
-    if (e) {
+    const t = this.getAttribute("trigger");
+    if (t) {
       const s = () => {
-        this._triggerElement = document.querySelector(e), this._triggerElement && (this._triggerElement.addEventListener(
+        this._triggerElement = document.querySelector(t), this._triggerElement && (this._triggerElement.addEventListener(
           "click",
           this.handleTriggerClick
         ), this._triggerElement.hasAttribute("tabindex") || this._triggerElement.setAttribute("tabindex", "0"));
@@ -1460,15 +1577,15 @@ class M extends c {
         s(), this._triggerElement || setTimeout(s, 0);
       });
     }
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".overlay");
-    this.getAttribute("close-on-outside-click") !== "false" && (t == null || t.addEventListener("click", this.handleClose)), this.addEventListener("keydown", this.handleKeyDown);
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".overlay");
+    this.getAttribute("close-on-outside-click") !== "false" && (e == null || e.addEventListener("click", this.handleClose)), this.addEventListener("keydown", this.handleKeyDown);
   }
   cleanupEventListeners() {
-    var e;
-    (e = this._triggerElement) == null || e.removeEventListener("click", this.handleTriggerClick), this.removeEventListener("keydown", this.handleKeyDown);
+    var t;
+    (t = this._triggerElement) == null || t.removeEventListener("click", this.handleTriggerClick), this.removeEventListener("keydown", this.handleKeyDown);
   }
-  onAttributeChange(e, t, i) {
-    e === "open" && (this.open = i !== null);
+  onAttributeChange(t, e, i) {
+    t === "open" && (this.open = i !== null);
   }
   /**
    * Get all focusable elements in the dialog (light DOM first, then shadow DOM)
@@ -1476,20 +1593,20 @@ class M extends c {
    * close button should be last in tab order
    */
   getFocusableElements() {
-    const e = [];
-    return this.querySelectorAll(B).forEach((i) => e.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(B).forEach((s) => {
-      s.classList.contains("overlay") || e.push(s);
-    }), e;
+    const t = [];
+    return this.querySelectorAll(M).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(M).forEach((s) => {
+      s.classList.contains("overlay") || t.push(s);
+    }), t;
   }
   showDialog() {
     this._previouslyFocused = document.activeElement, this.style.display = "flex", requestAnimationFrame(() => {
-      const t = this.getFocusableElements()[0];
-      t && t.focus();
-    }), document.body.style.overflow = "hidden", v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
+      const e = this.getFocusableElements()[0];
+      e && e.focus();
+    }), Ht(), v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
   }
   hideDialog() {
-    var e;
-    this.style.display = "none", document.body.style.overflow = "", (e = this._previouslyFocused) == null || e.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
+    var t;
+    this.style.display = "none", Bt(), (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
   }
   /**
    * Programmatic open
@@ -1504,78 +1621,78 @@ class M extends c {
     this.open = !1;
   }
 }
-u("a11y-dialog", M);
-class K extends c {
+c("a11y-dialog", N);
+class F extends d {
   constructor() {
-    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._menuItems = [], this.updateMenuItems = () => {
+    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._menuItems = [], this._triggerEl = null, this._triggerSlotEl = null, this._defaultSlotEl = null, this.updateMenuItems = () => {
       this._menuItems = Array.from(
         this.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
-      ), this._menuItems.forEach((e, t) => {
-        e.id = e.id || `${this._id}-item-${t}`, e.setAttribute("tabindex", "-1");
+      ), this._menuItems.forEach((t, e) => {
+        t.id = t.id || `${this._id}-item-${e}`, t.setAttribute("tabindex", "-1");
       });
     }, this._lastClickTime = 0, this.handleTriggerClick = () => {
-      const e = Date.now();
-      e - this._lastClickTime < 50 || (this._lastClickTime = e, this.toggle());
-    }, this.handleTriggerKeyDown = (e) => {
-      switch (e.key) {
+      const t = Date.now();
+      t - this._lastClickTime < 50 || (this._lastClickTime = t, this.toggle());
+    }, this.handleTriggerKeyDown = (t) => {
+      switch (t.key) {
         case "Enter":
         case " ":
-          e.preventDefault(), this.toggle(), this._open && this.highlightItem(0);
+          t.preventDefault(), this.toggle(), this._open && this.highlightItem(0);
           break;
         case "ArrowDown":
-          e.preventDefault(), this._open || this.show(), this.highlightItem(0);
+          t.preventDefault(), this._open || this.show(), this.highlightItem(0);
           break;
         case "ArrowUp":
-          e.preventDefault(), this._open || this.show(), this.highlightItem(this._menuItems.length - 1);
+          t.preventDefault(), this._open || this.show(), this.highlightItem(this._menuItems.length - 1);
           break;
       }
-    }, this.handleMenuKeyDown = (e) => {
+    }, this.handleMenuKeyDown = (t) => {
       if (!this._open) return;
-      const t = e.target;
-      if (!(!t.hasAttribute("role") || t.getAttribute("role") !== "menuitem"))
-        switch (e.key) {
+      const e = t.target;
+      if (!(!e.hasAttribute("role") || e.getAttribute("role") !== "menuitem"))
+        switch (t.key) {
           case "ArrowDown":
-            e.preventDefault(), this.highlightItem(
+            t.preventDefault(), this.highlightItem(
               (this._highlightedIndex + 1) % this._menuItems.length
             );
             break;
           case "ArrowUp":
-            e.preventDefault(), this.highlightItem(
+            t.preventDefault(), this.highlightItem(
               (this._highlightedIndex - 1 + this._menuItems.length) % this._menuItems.length
             );
             break;
           case "Home":
-            e.preventDefault(), this.highlightItem(0);
+            t.preventDefault(), this.highlightItem(0);
             break;
           case "End":
-            e.preventDefault(), this.highlightItem(this._menuItems.length - 1);
+            t.preventDefault(), this.highlightItem(this._menuItems.length - 1);
             break;
           case "Enter":
           case " ":
-            e.preventDefault(), this.selectItem(this._highlightedIndex);
+            t.preventDefault(), this.selectItem(this._highlightedIndex);
             break;
           case "Escape":
-            e.preventDefault(), this.close();
+            t.preventDefault(), this.close();
             break;
           case "Tab":
             this.close();
             break;
         }
-    }, this.handleItemClick = (e) => {
-      const t = e.target;
-      if (t.getAttribute("role") === "menuitem" && t.getAttribute("aria-disabled") !== "true") {
-        const i = this._menuItems.indexOf(t);
+    }, this.handleItemClick = (t) => {
+      const e = t.target;
+      if (e.getAttribute("role") === "menuitem" && e.getAttribute("aria-disabled") !== "true") {
+        const i = this._menuItems.indexOf(e);
         this.selectItem(i);
       }
-    }, this.handleMouseOver = (e) => {
-      const t = e.target;
-      if (t.getAttribute("role") === "menuitem") {
-        const i = this._menuItems.indexOf(t);
+    }, this.handleMouseOver = (t) => {
+      const e = t.target;
+      if (e.getAttribute("role") === "menuitem") {
+        const i = this._menuItems.indexOf(e);
         i !== -1 && this.highlightItem(i, !1);
       }
-    }, this.handleOutsideClick = (e) => {
+    }, this.handleOutsideClick = (t) => {
       if (!this._open) return;
-      e.composedPath().includes(this) || this.close();
+      t.composedPath().includes(this) || this.close();
     };
   }
   static get observedAttributes() {
@@ -1584,18 +1701,18 @@ class K extends c {
   get open() {
     return this._open;
   }
-  set open(e) {
-    const t = this._open;
-    this._open = e, e !== t && this.updateMenuVisibility(), this.toggleAttribute("open", e);
+  set open(t) {
+    const e = this._open;
+    this._open = t, t !== e && this.updateMenuVisibility(), this.toggleAttribute("open", t);
   }
   setupAccessibility() {
-    const e = this.querySelector('[slot="trigger"]');
-    e && (e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", String(this._open)), e.id = e.id || `${this._id}-trigger`, e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"));
+    const t = this.querySelector('[slot="trigger"]');
+    t && (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this._open)), t.id = t.id || `${this._id}-trigger`, t.hasAttribute("tabindex") || t.setAttribute("tabindex", "0"));
   }
   render() {
-    const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `
-      <style>${fe}</style>
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${xt}</style>
       <slot name="trigger"></slot>
       <div
         class="menu-content"
@@ -1610,47 +1727,46 @@ class K extends c {
     `;
   }
   setupEventListeners() {
-    var s, a;
-    const e = this.querySelector('[slot="trigger"]');
-    e == null || e.addEventListener("click", this.handleTriggerClick), e == null || e.addEventListener(
+    var t, e, i, s, a, r;
+    this._triggerEl = this.querySelector('[slot="trigger"]'), (t = this._triggerEl) == null || t.addEventListener("click", this.handleTriggerClick), (e = this._triggerEl) == null || e.addEventListener(
       "keydown",
       this.handleTriggerKeyDown
-    );
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="trigger"]');
-    t == null || t.addEventListener("click", this.handleTriggerClick), this.addEventListener("click", this.handleItemClick), this.addEventListener("keydown", this.handleMenuKeyDown), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("mousedown", this.handleOutsideClick);
-    const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
-    i == null || i.addEventListener("slotchange", this.updateMenuItems), this.updateMenuItems();
+    ), this._triggerSlotEl = ((i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="trigger"]')) ?? null, (s = this._triggerSlotEl) == null || s.addEventListener("click", this.handleTriggerClick), this.addEventListener("click", this.handleItemClick), this.addEventListener("keydown", this.handleMenuKeyDown), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("mousedown", this.handleOutsideClick), this._defaultSlotEl = ((a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])")) ?? null, (r = this._defaultSlotEl) == null || r.addEventListener("slotchange", this.updateMenuItems), this.updateMenuItems();
   }
   cleanupEventListeners() {
-    document.removeEventListener("mousedown", this.handleOutsideClick);
+    var t, e, i, s;
+    (t = this._triggerEl) == null || t.removeEventListener("click", this.handleTriggerClick), (e = this._triggerEl) == null || e.removeEventListener(
+      "keydown",
+      this.handleTriggerKeyDown
+    ), (i = this._triggerSlotEl) == null || i.removeEventListener("click", this.handleTriggerClick), this.removeEventListener("click", this.handleItemClick), this.removeEventListener("keydown", this.handleMenuKeyDown), this.removeEventListener("mouseover", this.handleMouseOver), document.removeEventListener("mousedown", this.handleOutsideClick), (s = this._defaultSlotEl) == null || s.removeEventListener("slotchange", this.updateMenuItems);
   }
-  onAttributeChange(e, t, i) {
-    e === "open" && (this.open = i !== null);
+  onAttributeChange(t, e, i) {
+    t === "open" && (this.open = i !== null);
   }
-  highlightItem(e, t = !0) {
+  highlightItem(t, e = !0) {
     var s;
     if (this._highlightedIndex >= 0) {
       const a = this._menuItems[this._highlightedIndex];
       a == null || a.removeAttribute("data-highlighted");
     }
-    this._highlightedIndex = e;
-    const i = this._menuItems[e];
+    this._highlightedIndex = t;
+    const i = this._menuItems[t];
     if (i) {
-      i.setAttribute("data-highlighted", "true"), t && i.focus();
+      i.setAttribute("data-highlighted", "true"), e && i.focus();
       const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="menu"]');
       a == null || a.setAttribute("aria-activedescendant", i.id);
     }
   }
-  selectItem(e) {
-    const t = this._menuItems[e];
-    t && (this.emit("a11y-menu-select", { item: t, index: e }), t.click()), this.close();
+  selectItem(t) {
+    const e = this._menuItems[t];
+    e && (this.emit("a11y-menu-select", { item: e, index: t }), e.click()), this.close();
   }
   updateMenuVisibility() {
     var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu-content"), t = this.querySelector('[slot="trigger"]');
-    this._open ? (e == null || e.removeAttribute("hidden"), t == null || t.setAttribute("aria-expanded", "true"), this.updateMenuItems(), this.emit("a11y-menu-open")) : (e == null || e.setAttribute("hidden", ""), t == null || t.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this._menuItems.forEach((s) => {
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu-content"), e = this.querySelector('[slot="trigger"]');
+    this._open ? (t == null || t.removeAttribute("hidden"), e == null || e.setAttribute("aria-expanded", "true"), this.updateMenuItems(), this.emit("a11y-menu-open")) : (t == null || t.setAttribute("hidden", ""), e == null || e.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this._menuItems.forEach((s) => {
       s.removeAttribute("data-highlighted");
-    }), t == null || t.focus(), this.emit("a11y-menu-close"));
+    }), e == null || e.focus(), this.emit("a11y-menu-close"));
   }
   /**
    * Show the menu
@@ -1671,46 +1787,50 @@ class K extends c {
     this.open = !this._open;
   }
 }
-u("a11y-menu", K);
-class F extends c {
+c("a11y-menu", F);
+class P extends d {
   constructor() {
-    super(...arguments), this._tabs = [], this._panels = [], this._selectedIndex = 0, this.updateTabsAndPanels = () => {
+    super(...arguments), this._tabs = [], this._panels = [], this._selectedIndex = 0, this._focusedIndex = 0, this._tabSlotEl = null, this._panelSlotEl = null, this._defaultSlotEl = null, this.updateTabsAndPanels = () => {
       this._tabs = Array.from(
         this.querySelectorAll('[role="tab"]')
       ), this._panels = Array.from(
         this.querySelectorAll('[role="tabpanel"]')
-      ), this._tabs.forEach((e, t) => {
-        const i = this._panels[t], s = e.id || `${this._id}-tab-${t}`, a = (i == null ? void 0 : i.id) || `${this._id}-panel-${t}`;
-        e.id = s, e.setAttribute("aria-controls", a), e.setAttribute("tabindex", t === this._selectedIndex ? "0" : "-1"), e.setAttribute("aria-selected", String(t === this._selectedIndex)), e.hasAttribute("slot") || e.setAttribute("slot", "tab"), i && (i.id = a, i.setAttribute("aria-labelledby", s), i.setAttribute("tabindex", "0"), i.hidden = t !== this._selectedIndex, i.hasAttribute("slot") || i.setAttribute("slot", "panel"));
+      ), this._tabs.forEach((t, e) => {
+        const i = this._panels[e], s = t.id || `${this._id}-tab-${e}`, a = (i == null ? void 0 : i.id) || `${this._id}-panel-${e}`;
+        t.id = s, t.setAttribute("aria-controls", a), t.setAttribute("tabindex", e === this._selectedIndex ? "0" : "-1"), t.setAttribute("aria-selected", String(e === this._selectedIndex)), t.hasAttribute("slot") || t.setAttribute("slot", "tab"), i && (i.id = a, i.setAttribute("aria-labelledby", s), i.setAttribute("tabindex", "0"), i.hidden = e !== this._selectedIndex, i.hasAttribute("slot") || i.setAttribute("slot", "panel"));
       }), this.updateSelection();
-    }, this.handleClick = (e) => {
-      const t = e.target;
-      if (t.getAttribute("role") === "tab") {
-        const i = this._tabs.indexOf(t);
-        i !== -1 && t.getAttribute("aria-disabled") !== "true" && this.selectTab(i);
+    }, this.handleClick = (t) => {
+      const e = t.target;
+      if (e.getAttribute("role") === "tab") {
+        const i = this._tabs.indexOf(e);
+        i !== -1 && e.getAttribute("aria-disabled") !== "true" && (this._focusedIndex = i, this.selectTab(i));
       }
-    }, this.handleKeyDown = (e) => {
+    }, this.handleKeyDown = (t) => {
       var l;
-      if (e.target.getAttribute("role") !== "tab") return;
+      if (t.target.getAttribute("role") !== "tab") return;
       const i = this.orientation === "horizontal", s = i ? "ArrowRight" : "ArrowDown", a = i ? "ArrowLeft" : "ArrowUp";
-      let r = this._selectedIndex;
-      switch (e.key) {
+      let r = this._focusedIndex;
+      switch (t.key) {
         case s:
-          e.preventDefault(), r = (this._selectedIndex + 1) % this._tabs.length;
+          t.preventDefault(), r = (this._focusedIndex + 1) % this._tabs.length;
           break;
         case a:
-          e.preventDefault(), r = (this._selectedIndex - 1 + this._tabs.length) % this._tabs.length;
+          t.preventDefault(), r = (this._focusedIndex - 1 + this._tabs.length) % this._tabs.length;
           break;
         case "Home":
-          e.preventDefault(), r = 0;
+          t.preventDefault(), r = 0;
           break;
         case "End":
-          e.preventDefault(), r = this._tabs.length - 1;
+          t.preventDefault(), r = this._tabs.length - 1;
           break;
+        case "Enter":
+        case " ":
+          t.preventDefault(), this.selectTab(this._focusedIndex);
+          return;
         default:
           return;
       }
-      (l = this._tabs[r]) == null || l.focus(), this.activationMode === "automatic" && this.selectTab(r);
+      this._focusedIndex = r, (l = this._tabs[r]) == null || l.focus(), this.activationMode === "automatic" && this.selectTab(r);
     };
   }
   static get observedAttributes() {
@@ -1719,8 +1839,8 @@ class F extends c {
   get selectedIndex() {
     return this._selectedIndex;
   }
-  set selectedIndex(e) {
-    e >= 0 && e < this._tabs.length && (this._selectedIndex = e, this.updateSelection());
+  set selectedIndex(t) {
+    t >= 0 && t < this._tabs.length && (this._selectedIndex = t, this.updateSelection());
   }
   get orientation() {
     return this.getAttribute("orientation") || "horizontal";
@@ -1732,9 +1852,9 @@ class F extends c {
     this.updateTabsAndPanels();
   }
   render() {
-    const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `
-      <style>${_e}</style>
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${Et}</style>
       <div class="tablist" role="tablist" aria-orientation="${this.orientation}" part="tablist">
         <slot name="tab"></slot>
       </div>
@@ -1745,43 +1865,45 @@ class F extends c {
     `;
   }
   setupEventListeners() {
-    var s, a, r;
-    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="tab"]'), t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="panel"]'), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
-    e == null || e.addEventListener("slotchange", this.updateTabsAndPanels), t == null || t.addEventListener("slotchange", this.updateTabsAndPanels), i == null || i.addEventListener("slotchange", this.updateTabsAndPanels);
+    var t, e, i, s, a, r;
+    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this._tabSlotEl = ((t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="tab"]')) ?? null, this._panelSlotEl = ((e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="panel"]')) ?? null, this._defaultSlotEl = ((i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])")) ?? null, (s = this._tabSlotEl) == null || s.addEventListener("slotchange", this.updateTabsAndPanels), (a = this._panelSlotEl) == null || a.addEventListener("slotchange", this.updateTabsAndPanels), (r = this._defaultSlotEl) == null || r.addEventListener("slotchange", this.updateTabsAndPanels);
   }
-  onAttributeChange(e, t, i) {
+  cleanupEventListeners() {
+    var t, e, i;
+    this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown), (t = this._tabSlotEl) == null || t.removeEventListener("slotchange", this.updateTabsAndPanels), (e = this._panelSlotEl) == null || e.removeEventListener("slotchange", this.updateTabsAndPanels), (i = this._defaultSlotEl) == null || i.removeEventListener("slotchange", this.updateTabsAndPanels);
+  }
+  onAttributeChange(t, e, i) {
     var s;
-    if (e === "orientation") {
+    if (t === "orientation") {
       const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="tablist"]');
       a == null || a.setAttribute("aria-orientation", i || "horizontal");
     }
-    e === "selected-index" && i && (this.selectedIndex = parseInt(i, 10));
+    t === "selected-index" && i && (this.selectedIndex = parseInt(i, 10));
   }
-  selectTab(e) {
-    const t = this._selectedIndex;
-    if (this._selectedIndex = e, this.updateSelection(), t !== e) {
-      const i = this._tabs[e];
+  selectTab(t) {
+    const e = this._selectedIndex;
+    if (this._selectedIndex = t, this._focusedIndex = t, this.updateSelection(), e !== t) {
+      const i = this._tabs[t];
       v(`${(i == null ? void 0 : i.textContent) || "Tab"} selected`), this.emit("a11y-tabs-change", {
-        index: e,
-        tab: this._tabs[e],
-        panel: this._panels[e]
+        index: t,
+        tab: this._tabs[t],
+        panel: this._panels[t]
       });
     }
   }
   updateSelection() {
-    this._tabs.forEach((e, t) => {
-      const i = t === this._selectedIndex;
-      e.setAttribute("aria-selected", String(i)), e.setAttribute("tabindex", i ? "0" : "-1");
-    }), this._panels.forEach((e, t) => {
-      e.hidden = t !== this._selectedIndex;
+    this._tabs.forEach((t, e) => {
+      const i = e === this._selectedIndex;
+      t.setAttribute("aria-selected", String(i)), t.setAttribute("tabindex", i ? "0" : "-1");
+    }), this._panels.forEach((t, e) => {
+      t.hidden = e !== this._selectedIndex;
     });
   }
   /**
    * Select a tab by index
    */
-  select(e) {
-    this.selectTab(e);
+  select(t) {
+    this.selectTab(t);
   }
   /**
    * Select next tab
@@ -1798,20 +1920,20 @@ class F extends c {
     );
   }
 }
-u("a11y-tabs", F);
-class N extends c {
+c("a11y-tabs", P);
+class j extends d {
   constructor() {
     super(...arguments), this._open = !1, this._highlightedIndex = -1, this._options = [], this._filteredOptions = [], this._inputValue = "", this._selectedValue = null, this._inputElement = null, this._listboxElement = null, this.updateOptions = () => {
-      const e = Array.from(this.querySelectorAll("option"));
-      this._options = e.map((t) => ({
-        value: t.getAttribute("value") || t.textContent || "",
-        label: t.textContent || "",
-        disabled: t.hasAttribute("disabled"),
-        element: t
+      const t = Array.from(this.querySelectorAll("option"));
+      this._options = t.map((e) => ({
+        value: e.getAttribute("value") || e.textContent || "",
+        label: e.textContent || "",
+        disabled: e.hasAttribute("disabled"),
+        element: e
       })), this._filteredOptions = [...this._options], this.renderOptions();
-    }, this.handleInput = (e) => {
-      const t = e.target;
-      this._inputValue = t.value;
+    }, this.handleInput = (t) => {
+      const e = t.target;
+      this._inputValue = e.value;
       const i = this._inputValue.toLowerCase();
       this._filteredOptions = i ? this._options.filter((a) => a.label.toLowerCase().includes(i)) : [...this._options], this.renderOptions(), this.open = !0, this._highlightedIndex = 0, this.updateHighlight(), this.updateClearButton();
       const s = this._filteredOptions.length;
@@ -1822,50 +1944,50 @@ class N extends c {
       this.open = !0;
     }, this.handleBlur = () => {
       setTimeout(() => {
-        var e;
-        (e = this.shadowRoot) != null && e.activeElement || (this.open = !1);
+        var t;
+        (t = this.shadowRoot) != null && t.activeElement || (this.open = !1);
       }, 150);
-    }, this.handleKeyDown = (e) => {
-      switch (e.key) {
+    }, this.handleKeyDown = (t) => {
+      switch (t.key) {
         case "ArrowDown":
-          e.preventDefault(), this._open ? this._highlightedIndex = Math.min(
+          t.preventDefault(), this._open ? this._highlightedIndex = Math.min(
             this._highlightedIndex + 1,
             this._filteredOptions.length - 1
           ) : (this.open = !0, this._highlightedIndex = 0), this.updateHighlight();
           break;
         case "ArrowUp":
-          e.preventDefault(), this._open ? this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0) : (this.open = !0, this._highlightedIndex = this._filteredOptions.length - 1), this.updateHighlight();
+          t.preventDefault(), this._open ? this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0) : (this.open = !0, this._highlightedIndex = this._filteredOptions.length - 1), this.updateHighlight();
           break;
         case "Enter":
-          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
-            const t = this._filteredOptions[this._highlightedIndex];
-            t && !t.disabled && this.selectOption(t);
+          if (t.preventDefault(), this._open && this._highlightedIndex >= 0) {
+            const e = this._filteredOptions[this._highlightedIndex];
+            e && !e.disabled && this.selectOption(e);
           }
           break;
         case "Escape":
-          e.preventDefault(), this.open = !1, this._highlightedIndex = -1;
+          t.preventDefault(), this.open = !1, this._highlightedIndex = -1;
           break;
         case "Home":
-          this._open && (e.preventDefault(), this._highlightedIndex = 0, this.updateHighlight());
+          this._open && (t.preventDefault(), this._highlightedIndex = 0, this.updateHighlight());
           break;
         case "End":
-          this._open && (e.preventDefault(), this._highlightedIndex = this._filteredOptions.length - 1, this.updateHighlight());
+          this._open && (t.preventDefault(), this._highlightedIndex = this._filteredOptions.length - 1, this.updateHighlight());
           break;
         case "Tab":
           this._open && (this.open = !1, this._highlightedIndex = -1);
           break;
       }
-    }, this.handleOptionClick = (e) => {
-      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._filteredOptions[i];
+    }, this.handleOptionClick = (t) => {
+      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._filteredOptions[i];
       s && !s.disabled && this.selectOption(s);
-    }, this.handleOptionHover = (e) => {
-      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._filteredOptions[i];
+    }, this.handleOptionHover = (t) => {
+      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._filteredOptions[i];
       s && !s.disabled && (this._highlightedIndex = i, this.updateHighlight());
     }, this.handleClear = () => {
       this._inputValue = "", this._selectedValue = null, this._inputElement && (this._inputElement.value = "", this._inputElement.focus()), this._filteredOptions = [...this._options], this.renderOptions(), this.updateClearButton(), this.emit("a11y-combobox-clear"), this.emit("a11y-combobox-change", { value: null, label: null });
-    }, this.handleOutsideClick = (e) => {
+    }, this.handleOutsideClick = (t) => {
       if (!this._open) return;
-      e.composedPath().includes(this) || (this.open = !1);
+      t.composedPath().includes(this) || (this.open = !1);
     };
   }
   static get observedAttributes() {
@@ -1874,28 +1996,28 @@ class N extends c {
   get open() {
     return this._open;
   }
-  set open(e) {
-    const t = this._open;
-    this._open = e, e !== t && this.updateListboxVisibility(), this.toggleAttribute("open", e);
+  set open(t) {
+    const e = this._open;
+    this._open = t, t !== e && this.updateListboxVisibility(), this.toggleAttribute("open", t);
   }
   get value() {
     return this._selectedValue;
   }
-  set value(e) {
-    this._selectedValue = e;
-    const t = this._options.find((i) => i.value === e);
-    t && (this._inputValue = t.label, this._inputElement && (this._inputElement.value = t.label)), this.setAttribute("value", e || "");
+  set value(t) {
+    this._selectedValue = t;
+    const e = this._options.find((i) => i.value === t);
+    e && (this._inputValue = e.label, this._inputElement && (this._inputElement.value = e.label)), this.setAttribute("value", t || "");
   }
   setupAccessibility() {
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-input`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Search...", a = this.hasAttribute("clearable");
-    e.innerHTML = `
-      <style>${ye}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-input`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Search...", a = this.hasAttribute("clearable");
+    t.innerHTML = `
+      <style>${At}</style>
       <div class="combobox-wrapper" part="wrapper">
         <div class="input-wrapper" part="input-wrapper">
           <input
-            id="${t}"
+            id="${e}"
             type="text"
             role="combobox"
             autocomplete="off"
@@ -1921,7 +2043,7 @@ class N extends c {
         <ul
           id="${i}"
           role="listbox"
-          aria-labelledby="${t}"
+          aria-labelledby="${e}"
           class="listbox"
           tabindex="-1"
           hidden
@@ -1931,56 +2053,56 @@ class N extends c {
       <div class="options-source" hidden>
         <slot></slot>
       </div>
-    `, this._inputElement = e.querySelector("input"), this._listboxElement = e.querySelector(".listbox");
+    `, this._inputElement = t.querySelector("input"), this._listboxElement = t.querySelector(".listbox");
   }
   setupEventListeners() {
     var i, s, a, r, l, o;
     (i = this._inputElement) == null || i.addEventListener("input", this.handleInput), (s = this._inputElement) == null || s.addEventListener("focus", this.handleFocus), (a = this._inputElement) == null || a.addEventListener("blur", this.handleBlur), (r = this._inputElement) == null || r.addEventListener("keydown", this.handleKeyDown);
-    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".clear-button");
-    e == null || e.addEventListener("click", this.handleClear), document.addEventListener("mousedown", this.handleOutsideClick);
-    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
-    t == null || t.addEventListener("slotchange", this.updateOptions), this.updateOptions();
+    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".clear-button");
+    t == null || t.addEventListener("click", this.handleClear), document.addEventListener("mousedown", this.handleOutsideClick);
+    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    e == null || e.addEventListener("slotchange", this.updateOptions), this.updateOptions();
   }
   cleanupEventListeners() {
     document.removeEventListener("mousedown", this.handleOutsideClick);
   }
-  onAttributeChange(e, t, i) {
-    e === "open" && (this.open = i !== null), e === "value" && (this.value = i), e === "disabled" && this._inputElement && (this._inputElement.disabled = i !== null), e === "placeholder" && this._inputElement && (this._inputElement.placeholder = i || "Search...");
+  onAttributeChange(t, e, i) {
+    t === "open" && (this.open = i !== null), t === "value" && (this.value = i), t === "disabled" && this._inputElement && (this._inputElement.disabled = i !== null), t === "placeholder" && this._inputElement && (this._inputElement.placeholder = i || "Search...");
   }
   renderOptions() {
     this._listboxElement && (this._listboxElement.innerHTML = this._filteredOptions.length === 0 ? '<li role="presentation" class="empty-message" part="empty">No results found</li>' : this._filteredOptions.map(
-      (e, t) => `
+      (t, e) => `
           <li
-            id="${this._id}-option-${t}"
+            id="${this._id}-option-${e}"
             role="option"
-            aria-selected="${this._selectedValue === e.value}"
-            aria-disabled="${e.disabled}"
-            data-value="${e.value}"
-            data-index="${t}"
+            aria-selected="${this._selectedValue === t.value}"
+            aria-disabled="${t.disabled}"
+            data-value="${t.value}"
+            data-index="${e}"
             part="option"
-            ${e.disabled ? 'class="disabled"' : ""}
-          >${e.label}</li>
+            ${t.disabled ? 'class="disabled"' : ""}
+          >${t.label}</li>
         `
-    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((e) => {
-      e.addEventListener("click", this.handleOptionClick), e.addEventListener("mouseenter", this.handleOptionHover);
+    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((t) => {
+      t.addEventListener("click", this.handleOptionClick), t.addEventListener("mouseenter", this.handleOptionHover);
     }));
   }
-  selectOption(e) {
-    this._selectedValue = e.value, this._inputValue = e.label, this._inputElement && (this._inputElement.value = e.label), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), this.updateClearButton(), v(`${e.label} selected`), this.emit("a11y-combobox-select", {
-      value: e.value,
-      label: e.label
+  selectOption(t) {
+    this._selectedValue = t.value, this._inputValue = t.label, this._inputElement && (this._inputElement.value = t.label), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), this.updateClearButton(), v(`${t.label} selected`), this.emit("a11y-combobox-select", {
+      value: t.value,
+      label: t.label
     }), this.emit("a11y-combobox-change", {
-      value: e.value,
-      label: e.label
+      value: t.value,
+      label: t.label
     });
   }
   updateHighlight() {
-    var e, t, i, s;
-    if ((e = this._listboxElement) == null || e.querySelectorAll('[role="option"]').forEach((a, r) => {
+    var t, e, i, s;
+    if ((t = this._listboxElement) == null || t.querySelectorAll('[role="option"]').forEach((a, r) => {
       a.classList.toggle("highlighted", r === this._highlightedIndex);
     }), this._highlightedIndex >= 0) {
       const a = `${this._id}-option-${this._highlightedIndex}`;
-      (t = this._inputElement) == null || t.setAttribute("aria-activedescendant", a);
+      (e = this._inputElement) == null || e.setAttribute("aria-activedescendant", a);
       const r = (i = this._listboxElement) == null ? void 0 : i.querySelector(`#${a}`);
       r == null || r.scrollIntoView({ block: "nearest", behavior: "smooth" });
     } else
@@ -1991,19 +2113,19 @@ class N extends c {
   }
   updateListboxPosition() {
     if (!this._listboxElement || !this._inputElement) return;
-    const e = this._inputElement.getBoundingClientRect(), t = window.innerHeight, i = Math.min(
+    const t = this._inputElement.getBoundingClientRect(), e = window.innerHeight, i = Math.min(
       this._listboxElement.scrollHeight,
       200
       // max-height from CSS
-    ), s = t - e.bottom, a = e.top;
+    ), s = e - t.bottom, a = t.top;
     s < i + 8 && a > s ? (this._listboxElement.style.top = "auto", this._listboxElement.style.bottom = "100%", this._listboxElement.style.marginTop = "0", this._listboxElement.style.marginBottom = "4px", this.setAttribute("data-position", "top")) : (this._listboxElement.style.top = "100%", this._listboxElement.style.bottom = "auto", this._listboxElement.style.marginTop = "4px", this._listboxElement.style.marginBottom = "0", this.setAttribute("data-position", "bottom"));
   }
   updateClearButton() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
       ".clear-button"
     );
-    e && (e.hidden = !this._inputValue);
+    t && (t.hidden = !this._inputValue);
   }
   /**
    * Programmatic open
@@ -2024,16 +2146,16 @@ class N extends c {
     this.handleClear();
   }
 }
-u("a11y-combobox", N);
-class P extends c {
+c("a11y-combobox", j);
+class U extends d {
   constructor() {
     super(...arguments), this._checked = !1, this._button = null, this._label = null, this.handleClick = () => {
       this.toggle();
-    }, this.handleKeyDown = (e) => {
-      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+    }, this.handleKeyDown = (t) => {
+      this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
     }, this.handleLabelClick = () => {
-      var e;
-      this.disabled || (this.toggle(), (e = this._button) == null || e.focus());
+      var t;
+      this.disabled || (this.toggle(), (t = this._button) == null || t.focus());
     };
   }
   static get observedAttributes() {
@@ -2045,9 +2167,9 @@ class P extends c {
   get checked() {
     return this._checked;
   }
-  set checked(e) {
-    const t = this._checked;
-    this._checked = e, this.toggleAttribute("checked", e), e !== t && (this.updateVisualState(), this.emit("change", { checked: e }));
+  set checked(t) {
+    const e = this._checked;
+    this._checked = t, this.toggleAttribute("checked", t), t !== e && (this.updateVisualState(), this.emit("change", { checked: t }));
   }
   /**
    * Get/set the disabled state
@@ -2055,8 +2177,8 @@ class P extends c {
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e), this.updateDisabledState();
+  set disabled(t) {
+    this.toggleAttribute("disabled", t), this.updateDisabledState();
   }
   /**
    * Get/set the visible label
@@ -2064,30 +2186,30 @@ class P extends c {
   get label() {
     return this.getAttribute("label") || "";
   }
-  set label(e) {
-    e ? this.setAttribute("label", e) : this.removeAttribute("label");
+  set label(t) {
+    t ? this.setAttribute("label", t) : this.removeAttribute("label");
   }
   /**
    * Get/set the size variant
    */
   get size() {
-    const e = this.getAttribute("size");
-    return e === "sm" || e === "lg" ? e : "md";
+    const t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
   }
-  set size(e) {
-    this.setAttribute("size", e);
+  set size(t) {
+    this.setAttribute("size", t);
   }
   setupAccessibility() {
-    var e;
-    this.getAttribute("role"), typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
+    var t;
+    this.getAttribute("role"), typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
       `[compa11y/Switch] Switch has no accessible label. Add label="..." or aria-label="..." attribute.
 💡 Suggestion: <a11y-switch label="Enable feature"></a11y-switch>`
     );
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-label`, i = !!this.label, s = this.getAttribute("aria-label"), a = i ? "" : s ? `aria-label="${s}"` : "", r = i ? `aria-labelledby="${t}"` : "";
-    e.innerHTML = `
-      <style>${Ae}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-label`, i = !!this.label, s = this.getAttribute("aria-label"), a = i ? "" : s ? `aria-label="${s}"` : "", r = i ? `aria-labelledby="${e}"` : "";
+    t.innerHTML = `
+      <style>${wt}</style>
       <div class="switch-wrapper size-${this.size}" part="wrapper">
         <button
           type="button"
@@ -2102,20 +2224,20 @@ class P extends c {
         >
           <span class="switch-thumb" part="thumb" aria-hidden="true"></span>
         </button>
-        ${i ? `<label id="${t}" class="switch-label ${this.disabled ? "disabled" : ""}" part="label">${this.label}</label>` : ""}
+        ${i ? `<label id="${e}" class="switch-label ${this.disabled ? "disabled" : ""}" part="label">${this.label}</label>` : ""}
       </div>
-    `, this._button = e.querySelector("button"), this._label = e.querySelector("label");
+    `, this._button = t.querySelector("button"), this._label = t.querySelector("label");
   }
   setupEventListeners() {
-    var e, t, i;
-    (e = this._button) == null || e.addEventListener("click", this.handleClick), (t = this._button) == null || t.addEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.addEventListener("click", this.handleLabelClick);
+    var t, e, i;
+    (t = this._button) == null || t.addEventListener("click", this.handleClick), (e = this._button) == null || e.addEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.addEventListener("click", this.handleLabelClick);
   }
   cleanupEventListeners() {
-    var e, t, i;
-    (e = this._button) == null || e.removeEventListener("click", this.handleClick), (t = this._button) == null || t.removeEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.removeEventListener("click", this.handleLabelClick);
+    var t, e, i;
+    (t = this._button) == null || t.removeEventListener("click", this.handleClick), (e = this._button) == null || e.removeEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.removeEventListener("click", this.handleLabelClick);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "checked":
         this._checked = i !== null, this.updateVisualState();
         break;
@@ -2147,9 +2269,9 @@ class P extends c {
    * Update the size class
    */
   updateSizeClass() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".switch-wrapper");
-    e && (e.classList.remove("size-sm", "size-md", "size-lg"), e.classList.add(`size-${this.size}`));
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".switch-wrapper");
+    t && (t.classList.remove("size-sm", "size-md", "size-lg"), t.classList.add(`size-${this.size}`));
   }
   /**
    * Public method to toggle the switch programmatically
@@ -2157,69 +2279,69 @@ class P extends c {
   toggle() {
     if (this.disabled) return;
     this.checked = !this.checked;
-    const e = this.label || this.getAttribute("aria-label") || "Switch";
-    p(`${e} ${this.checked ? "on" : "off"}`);
+    const t = this.label || this.getAttribute("aria-label") || "Switch";
+    p(`${t} ${this.checked ? "on" : "off"}`);
   }
   /**
    * Public method to open/close programmatically
    */
-  setChecked(e) {
-    this.checked = e;
+  setChecked(t) {
+    this.checked = t;
   }
 }
-u("a11y-switch", P);
-class j extends c {
+c("a11y-switch", U);
+class Y extends d {
   constructor() {
     super(...arguments), this._open = !1, this._highlightedIndex = -1, this._options = [], this._selectedValue = null, this._triggerElement = null, this._listboxElement = null, this._typeAhead = null, this.updateOptions = () => {
-      const e = Array.from(this.querySelectorAll("option"));
-      this._options = e.map((t) => ({
-        value: t.getAttribute("value") || t.textContent || "",
-        label: t.textContent || "",
-        disabled: t.hasAttribute("disabled"),
-        element: t
+      const t = Array.from(this.querySelectorAll("option"));
+      this._options = t.map((e) => ({
+        value: e.getAttribute("value") || e.textContent || "",
+        label: e.textContent || "",
+        disabled: e.hasAttribute("disabled"),
+        element: e
       })), this._typeAhead = q(
-        this._options.map((t) => t.label),
+        this._options.map((e) => e.label),
         { timeout: 500 }
       ), this.renderOptions(), this.updateTriggerText();
     }, this.handleTriggerClick = () => {
-      var e;
-      (e = this._triggerElement) != null && e.disabled || (this._open ? (this.open = !1, this._highlightedIndex = -1) : this.openAndHighlight());
-    }, this.handleKeyDown = (e) => {
       var t;
-      switch (e.key) {
+      (t = this._triggerElement) != null && t.disabled || (this._open ? (this.open = !1, this._highlightedIndex = -1) : this.openAndHighlight());
+    }, this.handleKeyDown = (t) => {
+      var e;
+      switch (t.key) {
         case "ArrowDown":
-          e.preventDefault(), this._open ? this.highlightNext() : this.openAndHighlight();
+          t.preventDefault(), this._open ? this.highlightNext() : this.openAndHighlight();
           break;
         case "ArrowUp":
-          e.preventDefault(), this._open ? this.highlightPrevious() : this.openAndHighlight(!0);
+          t.preventDefault(), this._open ? this.highlightPrevious() : this.openAndHighlight(!0);
           break;
         case "Enter":
-          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
+          if (t.preventDefault(), this._open && this._highlightedIndex >= 0) {
             const i = this._options[this._highlightedIndex];
             i && !i.disabled && this.selectOption(i);
           } else this._open || this.openAndHighlight();
           break;
         case " ":
-          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
+          if (t.preventDefault(), this._open && this._highlightedIndex >= 0) {
             const i = this._options[this._highlightedIndex];
             i && !i.disabled && this.selectOption(i);
           } else this._open || this.openAndHighlight();
           break;
         case "Escape":
-          e.preventDefault(), this._open && (this.open = !1, this._highlightedIndex = -1);
+          t.preventDefault(), this._open && (this.open = !1, this._highlightedIndex = -1);
           break;
         case "Home":
-          this._open && (e.preventDefault(), this._highlightedIndex = this.findFirstEnabled(), this.updateHighlight());
+          this._open && (t.preventDefault(), this._highlightedIndex = this.findFirstEnabled(), this.updateHighlight());
           break;
         case "End":
-          this._open && (e.preventDefault(), this._highlightedIndex = this.findLastEnabled(), this.updateHighlight());
+          this._open && (t.preventDefault(), this._highlightedIndex = this.findLastEnabled(), this.updateHighlight());
           break;
         case "Tab":
           this._open && (this.open = !1, this._highlightedIndex = -1);
           break;
         default:
-          if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-            const i = (t = this._typeAhead) == null ? void 0 : t.type(e.key);
+          if (t.key.length === 1 && !t.ctrlKey && !t.altKey && !t.metaKey) {
+            const i = (e = this._typeAhead) == null ? void 0 : e.type(t.key);
             if (i) {
               const s = this._options.findIndex(
                 (a) => a.label === i && !a.disabled
@@ -2231,20 +2353,20 @@ class j extends c {
       }
     }, this.handleBlur = () => {
       setTimeout(() => {
-        var e;
-        (e = this.shadowRoot) != null && e.activeElement || (this.open = !1, this._highlightedIndex = -1);
+        var t;
+        (t = this.shadowRoot) != null && t.activeElement || (this.open = !1, this._highlightedIndex = -1);
       }, 150);
-    }, this.handleListboxMouseDown = (e) => {
-      e.preventDefault();
-    }, this.handleOptionClick = (e) => {
-      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._options[i];
+    }, this.handleListboxMouseDown = (t) => {
+      t.preventDefault();
+    }, this.handleOptionClick = (t) => {
+      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._options[i];
       s && !s.disabled && this.selectOption(s);
-    }, this.handleOptionHover = (e) => {
-      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._options[i];
+    }, this.handleOptionHover = (t) => {
+      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._options[i];
       s && !s.disabled && (this._highlightedIndex = i, this.updateHighlight());
-    }, this.handleOutsideClick = (e) => {
+    }, this.handleOutsideClick = (t) => {
       if (!this._open) return;
-      e.composedPath().includes(this) || (this.open = !1, this._highlightedIndex = -1);
+      t.composedPath().includes(this) || (this.open = !1, this._highlightedIndex = -1);
     };
   }
   static get observedAttributes() {
@@ -2253,25 +2375,25 @@ class j extends c {
   get open() {
     return this._open;
   }
-  set open(e) {
-    const t = this._open;
-    this._open = e, e !== t && this.updateListboxVisibility(), this.toggleAttribute("open", e);
+  set open(t) {
+    const e = this._open;
+    this._open = t, t !== e && this.updateListboxVisibility(), this.toggleAttribute("open", t);
   }
   get value() {
     return this._selectedValue;
   }
-  set value(e) {
-    this._selectedValue = e, this.updateTriggerText(), this.setAttribute("value", e || "");
+  set value(t) {
+    this._selectedValue = t, this.updateTriggerText(), this.setAttribute("value", t || "");
   }
   setupAccessibility() {
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-trigger`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Select an option...", a = this.getAttribute("aria-label") || "", r = this.getAttribute("aria-labelledby") || "";
-    e.innerHTML = `
-      <style>${xe}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-trigger`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Select an option...", a = this.getAttribute("aria-label") || "", r = this.getAttribute("aria-labelledby") || "";
+    t.innerHTML = `
+      <style>${kt}</style>
       <div class="select-wrapper" part="wrapper">
         <button
-          id="${t}"
+          id="${e}"
           type="button"
           role="combobox"
           aria-expanded="false"
@@ -2288,7 +2410,7 @@ class j extends c {
         <ul
           id="${i}"
           role="listbox"
-          aria-labelledby="${t}"
+          aria-labelledby="${e}"
           class="listbox"
           tabindex="-1"
           hidden
@@ -2298,105 +2420,105 @@ class j extends c {
       <div class="options-source" hidden>
         <slot></slot>
       </div>
-    `, this._triggerElement = e.querySelector(".select-trigger"), this._listboxElement = e.querySelector(".listbox");
+    `, this._triggerElement = t.querySelector(".select-trigger"), this._listboxElement = t.querySelector(".listbox");
   }
   setupEventListeners() {
-    var t, i, s, a, r;
-    (t = this._triggerElement) == null || t.addEventListener("click", this.handleTriggerClick), (i = this._triggerElement) == null || i.addEventListener("keydown", this.handleKeyDown), (s = this._triggerElement) == null || s.addEventListener("blur", this.handleBlur), (a = this._listboxElement) == null || a.addEventListener(
+    var e, i, s, a, r;
+    (e = this._triggerElement) == null || e.addEventListener("click", this.handleTriggerClick), (i = this._triggerElement) == null || i.addEventListener("keydown", this.handleKeyDown), (s = this._triggerElement) == null || s.addEventListener("blur", this.handleBlur), (a = this._listboxElement) == null || a.addEventListener(
       "mousedown",
       this.handleListboxMouseDown
     ), document.addEventListener("mousedown", this.handleOutsideClick);
-    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
-    e == null || e.addEventListener("slotchange", this.updateOptions), this.updateOptions();
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
+    t == null || t.addEventListener("slotchange", this.updateOptions), this.updateOptions();
   }
   cleanupEventListeners() {
     document.removeEventListener("mousedown", this.handleOutsideClick);
   }
-  onAttributeChange(e, t, i) {
-    e === "open" && (this.open = i !== null), e === "value" && (this.value = i), e === "disabled" && this._triggerElement && (this._triggerElement.disabled = i !== null), e === "placeholder" && this.updateTriggerText();
+  onAttributeChange(t, e, i) {
+    t === "open" && (this.open = i !== null), t === "value" && (this.value = i), t === "disabled" && this._triggerElement && (this._triggerElement.disabled = i !== null), t === "placeholder" && this.updateTriggerText();
   }
   renderOptions() {
     this._listboxElement && (this._listboxElement.innerHTML = this._options.map(
-      (e, t) => `
+      (t, e) => `
         <li
-          id="${this._id}-option-${t}"
+          id="${this._id}-option-${e}"
           role="option"
-          aria-selected="${this._selectedValue === e.value}"
-          aria-disabled="${e.disabled}"
-          data-value="${e.value}"
-          data-index="${t}"
+          aria-selected="${this._selectedValue === t.value}"
+          aria-disabled="${t.disabled}"
+          data-value="${t.value}"
+          data-index="${e}"
           part="option"
-          ${e.disabled ? 'class="disabled"' : ""}
+          ${t.disabled ? 'class="disabled"' : ""}
         >
-          <span class="option-text">${e.label}</span>
-          ${this._selectedValue === e.value ? '<span class="check-mark" aria-hidden="true">&#10003;</span>' : ""}
+          <span class="option-text">${t.label}</span>
+          ${this._selectedValue === t.value ? '<span class="check-mark" aria-hidden="true">&#10003;</span>' : ""}
         </li>
       `
-    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((e) => {
-      e.addEventListener("click", this.handleOptionClick), e.addEventListener("mouseenter", this.handleOptionHover);
+    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((t) => {
+      t.addEventListener("click", this.handleOptionClick), t.addEventListener("mouseenter", this.handleOptionHover);
     }));
   }
-  openAndHighlight(e = !1) {
+  openAndHighlight(t = !1) {
     this.open = !0;
-    const t = this._options.findIndex(
+    const e = this._options.findIndex(
       (i) => i.value === this._selectedValue
     );
-    t >= 0 ? this._highlightedIndex = t : this._highlightedIndex = e ? this.findLastEnabled() : this.findFirstEnabled(), this.updateHighlight(), v(
+    e >= 0 ? this._highlightedIndex = e : this._highlightedIndex = t ? this.findLastEnabled() : this.findFirstEnabled(), this.updateHighlight(), v(
       `${this._options.length} option${this._options.length === 1 ? "" : "s"} available`
     );
   }
-  selectOption(e) {
-    this._selectedValue = e.value, this.updateTriggerText(), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), v(`${e.label} selected`), this.emit("a11y-select-change", {
-      value: e.value,
-      label: e.label
+  selectOption(t) {
+    this._selectedValue = t.value, this.updateTriggerText(), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), v(`${t.label} selected`), this.emit("a11y-select-change", {
+      value: t.value,
+      label: t.label
     }), this.emit("change", {
-      value: e.value,
-      label: e.label
+      value: t.value,
+      label: t.label
     });
   }
   updateTriggerText() {
     var s;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".select-value");
-    if (!e) return;
-    const t = this._options.find(
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".select-value");
+    if (!t) return;
+    const e = this._options.find(
       (a) => a.value === this._selectedValue
     ), i = this.getAttribute("placeholder") || "Select an option...";
-    t ? (e.textContent = t.label, e.classList.remove("placeholder")) : (e.textContent = i, e.classList.add("placeholder"));
+    e ? (t.textContent = e.label, t.classList.remove("placeholder")) : (t.textContent = i, t.classList.add("placeholder"));
   }
   highlightNext() {
-    const e = this.findNextEnabled(this._highlightedIndex, 1);
-    e >= 0 && (this._highlightedIndex = e, this.updateHighlight());
+    const t = this.findNextEnabled(this._highlightedIndex, 1);
+    t >= 0 && (this._highlightedIndex = t, this.updateHighlight());
   }
   highlightPrevious() {
-    const e = this.findNextEnabled(this._highlightedIndex, -1);
-    e >= 0 && (this._highlightedIndex = e, this.updateHighlight());
+    const t = this.findNextEnabled(this._highlightedIndex, -1);
+    t >= 0 && (this._highlightedIndex = t, this.updateHighlight());
   }
-  findNextEnabled(e, t) {
+  findNextEnabled(t, e) {
     var r;
     const i = this._options.length;
-    let s = e + t;
+    let s = t + e;
     s < 0 && (s = i - 1), s >= i && (s = 0);
     const a = s;
     for (; (r = this._options[s]) != null && r.disabled; )
-      if (s += t, s < 0 && (s = i - 1), s >= i && (s = 0), s === a) return -1;
+      if (s += e, s < 0 && (s = i - 1), s >= i && (s = 0), s === a) return -1;
     return s;
   }
   findFirstEnabled() {
-    return this._options.findIndex((e) => !e.disabled);
+    return this._options.findIndex((t) => !t.disabled);
   }
   findLastEnabled() {
-    var e;
-    for (let t = this._options.length - 1; t >= 0; t--)
-      if (!((e = this._options[t]) != null && e.disabled)) return t;
+    var t;
+    for (let e = this._options.length - 1; e >= 0; e--)
+      if (!((t = this._options[e]) != null && t.disabled)) return e;
     return -1;
   }
   updateHighlight() {
-    var e, t, i, s;
-    if ((e = this._listboxElement) == null || e.querySelectorAll('[role="option"]').forEach((a, r) => {
+    var t, e, i, s;
+    if ((t = this._listboxElement) == null || t.querySelectorAll('[role="option"]').forEach((a, r) => {
       a.classList.toggle("highlighted", r === this._highlightedIndex);
     }), this._highlightedIndex >= 0) {
       const a = `${this._id}-option-${this._highlightedIndex}`;
-      (t = this._triggerElement) == null || t.setAttribute("aria-activedescendant", a);
+      (e = this._triggerElement) == null || e.setAttribute("aria-activedescendant", a);
       const r = (i = this._listboxElement) == null ? void 0 : i.querySelector(`#${a}`);
       r == null || r.scrollIntoView({ block: "nearest", behavior: "smooth" });
     } else
@@ -2407,7 +2529,7 @@ class j extends c {
   }
   updateListboxPosition() {
     if (!this._listboxElement || !this._triggerElement) return;
-    const e = this._triggerElement.getBoundingClientRect(), t = window.innerHeight, i = Math.min(this._listboxElement.scrollHeight, 200), s = t - e.bottom, a = e.top;
+    const t = this._triggerElement.getBoundingClientRect(), e = window.innerHeight, i = Math.min(this._listboxElement.scrollHeight, 200), s = e - t.bottom, a = t.top;
     s < i + 8 && a > s ? (this._listboxElement.style.top = "auto", this._listboxElement.style.bottom = "100%", this._listboxElement.style.marginTop = "0", this._listboxElement.style.marginBottom = "4px", this.setAttribute("data-position", "top")) : (this._listboxElement.style.top = "100%", this._listboxElement.style.bottom = "auto", this._listboxElement.style.marginTop = "4px", this._listboxElement.style.marginBottom = "0", this.setAttribute("data-position", "bottom"));
   }
   /** Programmatic open */
@@ -2419,15 +2541,15 @@ class j extends c {
     this.open = !1;
   }
 }
-u("a11y-select", j);
-class U extends c {
+c("a11y-select", Y);
+class G extends d {
   constructor() {
-    super(...arguments), this._value = "", this._inputEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (e) => {
-      const t = e.target;
-      this._value = t.value, this.emit("input", { value: this._value });
-    }, this.handleChange = (e) => {
-      const t = e.target;
-      this._value = t.value, this.emit("change", { value: this._value });
+    super(...arguments), this._value = "", this._inputEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (t) => {
+      const e = t.target;
+      this._value = e.value, this.emit("input", { value: this._value });
+    }, this.handleChange = (t) => {
+      const e = t.target;
+      this._value = e.value, this.emit("change", { value: this._value });
     }, this.handleFocus = () => {
       this.emit("a11y-input-focus");
     }, this.handleBlur = () => {
@@ -2461,91 +2583,91 @@ class U extends c {
   get value() {
     return this._value;
   }
-  set value(e) {
-    const t = this._value;
-    this._value = e, this._inputEl && this._inputEl.value !== e && (this._inputEl.value = e), e !== t && this.setAttribute("value", e);
+  set value(t) {
+    const e = this._value;
+    this._value = t, this._inputEl && this._inputEl.value !== t && (this._inputEl.value = t), t !== e && this.setAttribute("value", t);
   }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e);
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
   }
   get readOnly() {
     return this.hasAttribute("readonly");
   }
-  set readOnly(e) {
-    this.toggleAttribute("readonly", e);
+  set readOnly(t) {
+    this.toggleAttribute("readonly", t);
   }
   get required() {
     return this.hasAttribute("required");
   }
-  set required(e) {
-    this.toggleAttribute("required", e);
+  set required(t) {
+    this.toggleAttribute("required", t);
   }
   get error() {
     return this.getAttribute("error") || "";
   }
-  set error(e) {
-    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  set error(t) {
+    t ? this.setAttribute("error", t) : this.removeAttribute("error");
   }
   // =========================================================================
   // Lifecycle
   // =========================================================================
   setupAccessibility() {
-    var e;
-    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+    var t;
+    typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
       `[compa11y/Input] Input has no accessible label. Add label="...", aria-label="...", or aria-labelledby="..." attribute.
 💡 Suggestion: <a11y-input label="Full Name"></a11y-input>`
     ));
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", d = this.getAttribute("type") || "text", h = this.getAttribute("placeholder") || "", g = this.getAttribute("name") || "", m = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("pattern"), w = this.getAttribute("inputmode"), L = this.getAttribute("aria-label") || "", S = this.getAttribute("aria-labelledby") || "", I = this.disabled, x = this.readOnly, y = this.required, A = !!o, E = [];
-    l && E.push(s), A && E.push(a);
-    const C = E.length ? `aria-describedby="${E.join(" ")}"` : "", $ = !r && L ? `aria-label="${L}"` : "", ee = !r && S ? `aria-labelledby="${S}"` : r ? `aria-labelledby="${i}"` : "";
-    this.setAttribute("data-error", A ? "true" : "false"), e.innerHTML = `
-      <style>${Ee}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", b = this.getAttribute("type") || "text", h = this.getAttribute("placeholder") || "", m = this.getAttribute("name") || "", g = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("pattern"), w = this.getAttribute("inputmode"), S = this.getAttribute("aria-label") || "", I = this.getAttribute("aria-labelledby") || "", C = this.disabled, x = this.readOnly, y = this.required, E = !!o, A = [];
+    l && A.push(s), E && A.push(a);
+    const z = A.length ? `aria-describedby="${A.join(" ")}"` : "", $ = !r && S ? `aria-label="${S}"` : "", st = !r && I ? `aria-labelledby="${I}"` : r ? `aria-labelledby="${i}"` : "";
+    this.setAttribute("data-error", E ? "true" : "false"), t.innerHTML = `
+      <style>${$t}</style>
       <div class="input-wrapper" part="wrapper">
-        ${r ? `<label id="${i}" for="${t}" class="input-label" part="label">
+        ${r ? `<label id="${i}" for="${e}" class="input-label" part="label">
                 ${r}${y ? '<span class="input-required" aria-hidden="true" part="required">*</span>' : ""}
               </label>` : ""}
         <input
-          id="${t}"
-          type="${d}"
+          id="${e}"
+          type="${b}"
           value="${this._value}"
           ${h ? `placeholder="${h}"` : ""}
-          ${g ? `name="${g}"` : ""}
-          ${m ? `autocomplete="${m}"` : ""}
+          ${m ? `name="${m}"` : ""}
+          ${g ? `autocomplete="${g}"` : ""}
           ${f ? `maxlength="${f}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
           ${k ? `pattern="${k}"` : ""}
           ${w ? `inputmode="${w}"` : ""}
           ${$}
-          ${ee}
-          ${C}
-          ${A ? 'aria-invalid="true"' : ""}
+          ${st}
+          ${z}
+          ${E ? 'aria-invalid="true"' : ""}
           ${y ? 'aria-required="true"' : ""}
-          ${I ? "disabled" : ""}
+          ${C ? "disabled" : ""}
           ${x ? "readonly" : ""}
           part="field"
         />
         ${l ? `<div id="${s}" class="input-hint" part="hint">${l}</div>` : ""}
-        ${A ? `<div id="${a}" class="input-error" role="alert" part="error">${o}</div>` : ""}
+        ${E ? `<div id="${a}" class="input-error" role="alert" part="error">${o}</div>` : ""}
       </div>
-    `, this._inputEl = e.querySelector("input"), this._labelEl = e.querySelector("label"), this._hintEl = e.querySelector(".input-hint"), this._errorEl = e.querySelector(".input-error");
-    const z = this.getAttribute("value");
-    z && this._inputEl && (this._value = z, this._inputEl.value = z);
+    `, this._inputEl = t.querySelector("input"), this._labelEl = t.querySelector("label"), this._hintEl = t.querySelector(".input-hint"), this._errorEl = t.querySelector(".input-error");
+    const D = this.getAttribute("value");
+    D && this._inputEl && (this._value = D, this._inputEl.value = D);
   }
   setupEventListeners() {
-    var e, t, i, s;
-    (e = this._inputEl) == null || e.addEventListener("input", this.handleInput), (t = this._inputEl) == null || t.addEventListener("change", this.handleChange), (i = this._inputEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.addEventListener("blur", this.handleBlur);
+    var t, e, i, s;
+    (t = this._inputEl) == null || t.addEventListener("input", this.handleInput), (e = this._inputEl) == null || e.addEventListener("change", this.handleChange), (i = this._inputEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.addEventListener("blur", this.handleBlur);
   }
   cleanupEventListeners() {
-    var e, t, i, s;
-    (e = this._inputEl) == null || e.removeEventListener("input", this.handleInput), (t = this._inputEl) == null || t.removeEventListener("change", this.handleChange), (i = this._inputEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.removeEventListener("blur", this.handleBlur);
+    var t, e, i, s;
+    (t = this._inputEl) == null || t.removeEventListener("input", this.handleInput), (e = this._inputEl) == null || e.removeEventListener("change", this.handleChange), (i = this._inputEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.removeEventListener("blur", this.handleBlur);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "value":
         this._value = i || "", this._inputEl && this._inputEl.value !== this._value && (this._inputEl.value = this._value);
         break;
@@ -2598,31 +2720,31 @@ class U extends c {
   // =========================================================================
   // DOM update helpers
   // =========================================================================
-  updateError(e) {
+  updateError(t) {
     var i;
-    const t = !!e;
-    if (this.setAttribute("data-error", t ? "true" : "false"), this._inputEl && (t ? this._inputEl.setAttribute("aria-invalid", "true") : this._inputEl.removeAttribute("aria-invalid")), t) {
+    const e = !!t;
+    if (this.setAttribute("data-error", e ? "true" : "false"), this._inputEl && (e ? this._inputEl.setAttribute("aria-invalid", "true") : this._inputEl.removeAttribute("aria-invalid")), e) {
       if (this._errorEl)
-        this._errorEl.textContent = e;
+        this._errorEl.textContent = t;
       else {
         const s = `${this._id}-error`, a = document.createElement("div");
-        a.id = s, a.className = "input-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = e;
+        a.id = s, a.className = "input-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = t;
         const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".input-wrapper");
-        r == null || r.appendChild(a), this._errorEl = a, D(e);
+        r == null || r.appendChild(a), this._errorEl = a, O(t);
       }
       this.updateAriaDescribedBy();
     } else
       this._errorEl && (this._errorEl.remove(), this._errorEl = null), this.updateAriaDescribedBy();
   }
-  updateHint(e) {
-    var t;
-    if (e)
+  updateHint(t) {
+    var e;
+    if (t)
       if (this._hintEl)
-        this._hintEl.textContent = e;
+        this._hintEl.textContent = t;
       else {
         const i = `${this._id}-hint`, s = document.createElement("div");
-        s.id = i, s.className = "input-hint", s.setAttribute("part", "hint"), s.textContent = e;
-        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".input-wrapper");
+        s.id = i, s.className = "input-hint", s.setAttribute("part", "hint"), s.textContent = t;
+        const a = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".input-wrapper");
         this._errorEl ? a == null || a.insertBefore(s, this._errorEl) : a == null || a.appendChild(s), this._hintEl = s;
       }
     else
@@ -2631,45 +2753,45 @@ class U extends c {
   }
   updateAriaDescribedBy() {
     if (!this._inputEl) return;
-    const e = [];
-    this._hintEl && e.push(this._hintEl.id), this._errorEl && e.push(this._errorEl.id), e.length > 0 ? this._inputEl.setAttribute("aria-describedby", e.join(" ")) : this._inputEl.removeAttribute("aria-describedby");
+    const t = [];
+    this._hintEl && t.push(this._hintEl.id), this._errorEl && t.push(this._errorEl.id), t.length > 0 ? this._inputEl.setAttribute("aria-describedby", t.join(" ")) : this._inputEl.removeAttribute("aria-describedby");
   }
-  updateRequiredIndicator(e) {
+  updateRequiredIndicator(t) {
     if (!this._labelEl) return;
-    const t = this._labelEl.querySelector(".input-required");
-    if (e && !t) {
+    const e = this._labelEl.querySelector(".input-required");
+    if (t && !e) {
       const i = document.createElement("span");
       i.className = "input-required", i.setAttribute("aria-hidden", "true"), i.setAttribute("part", "required"), i.textContent = "*", this._labelEl.appendChild(i);
-    } else !e && t && t.remove();
+    } else !t && e && e.remove();
   }
   // =========================================================================
   // Public methods
   // =========================================================================
   /** Focus the input element */
   focus() {
-    var e;
-    (e = this._inputEl) == null || e.focus();
+    var t;
+    (t = this._inputEl) == null || t.focus();
   }
   /** Blur the input element */
   blur() {
-    var e;
-    (e = this._inputEl) == null || e.blur();
+    var t;
+    (t = this._inputEl) == null || t.blur();
   }
   /** Select all text in the input */
   select() {
-    var e;
-    (e = this._inputEl) == null || e.select();
+    var t;
+    (t = this._inputEl) == null || t.select();
   }
 }
-u("a11y-input", U);
-class Y extends c {
+c("a11y-input", G);
+class V extends d {
   constructor() {
-    super(...arguments), this._value = "", this._textareaEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (e) => {
-      const t = e.target;
-      this._value = t.value, this.emit("input", { value: this._value });
-    }, this.handleChange = (e) => {
-      const t = e.target;
-      this._value = t.value, this.emit("change", { value: this._value });
+    super(...arguments), this._value = "", this._textareaEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (t) => {
+      const e = t.target;
+      this._value = e.value, this.emit("input", { value: this._value });
+    }, this.handleChange = (t) => {
+      const e = t.target;
+      this._value = e.value, this.emit("change", { value: this._value });
     }, this.handleFocus = () => {
       this.emit("a11y-textarea-focus");
     }, this.handleBlur = () => {
@@ -2702,88 +2824,88 @@ class Y extends c {
   get value() {
     return this._value;
   }
-  set value(e) {
-    const t = this._value;
-    this._value = e, this._textareaEl && this._textareaEl.value !== e && (this._textareaEl.value = e), e !== t && this.setAttribute("value", e);
+  set value(t) {
+    const e = this._value;
+    this._value = t, this._textareaEl && this._textareaEl.value !== t && (this._textareaEl.value = t), t !== e && this.setAttribute("value", t);
   }
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e);
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
   }
   get readOnly() {
     return this.hasAttribute("readonly");
   }
-  set readOnly(e) {
-    this.toggleAttribute("readonly", e);
+  set readOnly(t) {
+    this.toggleAttribute("readonly", t);
   }
   get required() {
     return this.hasAttribute("required");
   }
-  set required(e) {
-    this.toggleAttribute("required", e);
+  set required(t) {
+    this.toggleAttribute("required", t);
   }
   get error() {
     return this.getAttribute("error") || "";
   }
-  set error(e) {
-    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  set error(t) {
+    t ? this.setAttribute("error", t) : this.removeAttribute("error");
   }
   // =========================================================================
   // Lifecycle
   // =========================================================================
   setupAccessibility() {
-    var e;
-    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+    var t;
+    typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
       `[compa11y/Textarea] Textarea has no accessible label. Add label="...", aria-label="...", or aria-labelledby="..." attribute.
 💡 Suggestion: <a11y-textarea label="Description"></a11y-textarea>`
     ));
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", d = this.getAttribute("rows") || "3", h = this.getAttribute("placeholder") || "", g = this.getAttribute("name") || "", m = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("aria-label") || "", w = this.getAttribute("aria-labelledby") || "", L = this.disabled, S = this.readOnly, I = this.required, x = !!o, y = [];
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", b = this.getAttribute("rows") || "3", h = this.getAttribute("placeholder") || "", m = this.getAttribute("name") || "", g = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("aria-label") || "", w = this.getAttribute("aria-labelledby") || "", S = this.disabled, I = this.readOnly, C = this.required, x = !!o, y = [];
     l && y.push(s), x && y.push(a);
-    const A = y.length ? `aria-describedby="${y.join(" ")}"` : "", E = !r && k ? `aria-label="${k}"` : "", C = !r && w ? `aria-labelledby="${w}"` : r ? `aria-labelledby="${i}"` : "";
-    this.setAttribute("data-error", x ? "true" : "false"), e.innerHTML = `
-      <style>${ke}</style>
+    const E = y.length ? `aria-describedby="${y.join(" ")}"` : "", A = !r && k ? `aria-label="${k}"` : "", z = !r && w ? `aria-labelledby="${w}"` : r ? `aria-labelledby="${i}"` : "";
+    this.setAttribute("data-error", x ? "true" : "false"), t.innerHTML = `
+      <style>${Lt}</style>
       <div class="textarea-wrapper" part="wrapper">
-        ${r ? `<label id="${i}" for="${t}" class="textarea-label" part="label">
-                ${r}${I ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
+        ${r ? `<label id="${i}" for="${e}" class="textarea-label" part="label">
+                ${r}${C ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
               </label>` : ""}
         <textarea
-          id="${t}"
-          rows="${d}"
+          id="${e}"
+          rows="${b}"
           ${h ? `placeholder="${h}"` : ""}
-          ${g ? `name="${g}"` : ""}
-          ${m ? `autocomplete="${m}"` : ""}
+          ${m ? `name="${m}"` : ""}
+          ${g ? `autocomplete="${g}"` : ""}
           ${f ? `maxlength="${f}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
-          ${E}
-          ${C}
           ${A}
+          ${z}
+          ${E}
           ${x ? 'aria-invalid="true"' : ""}
-          ${I ? 'aria-required="true"' : ""}
-          ${L ? "disabled" : ""}
-          ${S ? "readonly" : ""}
+          ${C ? 'aria-required="true"' : ""}
+          ${S ? "disabled" : ""}
+          ${I ? "readonly" : ""}
           part="field"
         >${this._value}</textarea>
         ${l ? `<div id="${s}" class="textarea-hint" part="hint">${l}</div>` : ""}
         ${x ? `<div id="${a}" class="textarea-error" role="alert" part="error">${o}</div>` : ""}
       </div>
-    `, this._textareaEl = e.querySelector("textarea"), this._labelEl = e.querySelector("label"), this._hintEl = e.querySelector(".textarea-hint"), this._errorEl = e.querySelector(".textarea-error");
+    `, this._textareaEl = t.querySelector("textarea"), this._labelEl = t.querySelector("label"), this._hintEl = t.querySelector(".textarea-hint"), this._errorEl = t.querySelector(".textarea-error");
     const $ = this.getAttribute("value");
     $ && this._textareaEl && (this._value = $, this._textareaEl.value = $);
   }
   setupEventListeners() {
-    var e, t, i, s;
-    (e = this._textareaEl) == null || e.addEventListener("input", this.handleInput), (t = this._textareaEl) == null || t.addEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.addEventListener("blur", this.handleBlur);
+    var t, e, i, s;
+    (t = this._textareaEl) == null || t.addEventListener("input", this.handleInput), (e = this._textareaEl) == null || e.addEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.addEventListener("blur", this.handleBlur);
   }
   cleanupEventListeners() {
-    var e, t, i, s;
-    (e = this._textareaEl) == null || e.removeEventListener("input", this.handleInput), (t = this._textareaEl) == null || t.removeEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.removeEventListener("blur", this.handleBlur);
+    var t, e, i, s;
+    (t = this._textareaEl) == null || t.removeEventListener("input", this.handleInput), (e = this._textareaEl) == null || e.removeEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.removeEventListener("blur", this.handleBlur);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "value":
         this._value = i || "", this._textareaEl && this._textareaEl.value !== this._value && (this._textareaEl.value = this._value);
         break;
@@ -2833,31 +2955,31 @@ class Y extends c {
   // =========================================================================
   // DOM update helpers
   // =========================================================================
-  updateError(e) {
+  updateError(t) {
     var i;
-    const t = !!e;
-    if (this.setAttribute("data-error", t ? "true" : "false"), this._textareaEl && (t ? this._textareaEl.setAttribute("aria-invalid", "true") : this._textareaEl.removeAttribute("aria-invalid")), t) {
+    const e = !!t;
+    if (this.setAttribute("data-error", e ? "true" : "false"), this._textareaEl && (e ? this._textareaEl.setAttribute("aria-invalid", "true") : this._textareaEl.removeAttribute("aria-invalid")), e) {
       if (this._errorEl)
-        this._errorEl.textContent = e;
+        this._errorEl.textContent = t;
       else {
         const s = `${this._id}-error`, a = document.createElement("div");
-        a.id = s, a.className = "textarea-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = e;
+        a.id = s, a.className = "textarea-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = t;
         const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".textarea-wrapper");
-        r == null || r.appendChild(a), this._errorEl = a, D(e);
+        r == null || r.appendChild(a), this._errorEl = a, O(t);
       }
       this.updateAriaDescribedBy();
     } else
       this._errorEl && (this._errorEl.remove(), this._errorEl = null), this.updateAriaDescribedBy();
   }
-  updateHint(e) {
-    var t;
-    if (e)
+  updateHint(t) {
+    var e;
+    if (t)
       if (this._hintEl)
-        this._hintEl.textContent = e;
+        this._hintEl.textContent = t;
       else {
         const i = `${this._id}-hint`, s = document.createElement("div");
-        s.id = i, s.className = "textarea-hint", s.setAttribute("part", "hint"), s.textContent = e;
-        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".textarea-wrapper");
+        s.id = i, s.className = "textarea-hint", s.setAttribute("part", "hint"), s.textContent = t;
+        const a = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".textarea-wrapper");
         this._errorEl ? a == null || a.insertBefore(s, this._errorEl) : a == null || a.appendChild(s), this._hintEl = s;
       }
     else
@@ -2866,42 +2988,42 @@ class Y extends c {
   }
   updateAriaDescribedBy() {
     if (!this._textareaEl) return;
-    const e = [];
-    this._hintEl && e.push(this._hintEl.id), this._errorEl && e.push(this._errorEl.id), e.length > 0 ? this._textareaEl.setAttribute("aria-describedby", e.join(" ")) : this._textareaEl.removeAttribute("aria-describedby");
+    const t = [];
+    this._hintEl && t.push(this._hintEl.id), this._errorEl && t.push(this._errorEl.id), t.length > 0 ? this._textareaEl.setAttribute("aria-describedby", t.join(" ")) : this._textareaEl.removeAttribute("aria-describedby");
   }
-  updateRequiredIndicator(e) {
+  updateRequiredIndicator(t) {
     if (!this._labelEl) return;
-    const t = this._labelEl.querySelector(".textarea-required");
-    if (e && !t) {
+    const e = this._labelEl.querySelector(".textarea-required");
+    if (t && !e) {
       const i = document.createElement("span");
       i.className = "textarea-required", i.setAttribute("aria-hidden", "true"), i.setAttribute("part", "required"), i.textContent = "*", this._labelEl.appendChild(i);
-    } else !e && t && t.remove();
+    } else !t && e && e.remove();
   }
   // =========================================================================
   // Public methods
   // =========================================================================
   /** Focus the textarea element */
   focus() {
-    var e;
-    (e = this._textareaEl) == null || e.focus();
+    var t;
+    (t = this._textareaEl) == null || t.focus();
   }
   /** Blur the textarea element */
   blur() {
-    var e;
-    (e = this._textareaEl) == null || e.blur();
+    var t;
+    (t = this._textareaEl) == null || t.blur();
   }
   /** Select all text in the textarea */
   select() {
-    var e;
-    (e = this._textareaEl) == null || e.select();
+    var t;
+    (t = this._textareaEl) == null || t.select();
   }
 }
-u("a11y-textarea", Y);
-class G extends c {
+c("a11y-textarea", V);
+class X extends d {
   constructor() {
-    super(...arguments), this._buttonEl = null, this.handleClick = (e) => {
+    super(...arguments), this._buttonEl = null, this.handleClick = (t) => {
       if (this.disabled || this.loading) {
-        e.preventDefault(), e.stopPropagation();
+        t.preventDefault(), t.stopPropagation();
         return;
       }
       this.emit("a11y-button-click");
@@ -2924,68 +3046,68 @@ class G extends c {
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e);
+  set disabled(t) {
+    this.toggleAttribute("disabled", t);
   }
   get discoverable() {
     return this.hasAttribute("discoverable");
   }
-  set discoverable(e) {
-    this.toggleAttribute("discoverable", e);
+  set discoverable(t) {
+    this.toggleAttribute("discoverable", t);
   }
   get loading() {
     return this.hasAttribute("loading");
   }
-  set loading(e) {
-    this.toggleAttribute("loading", e);
+  set loading(t) {
+    this.toggleAttribute("loading", t);
   }
   get variant() {
     return this.getAttribute("variant") || "secondary";
   }
-  set variant(e) {
-    this.setAttribute("variant", e);
+  set variant(t) {
+    this.setAttribute("variant", t);
   }
   get size() {
     return this.getAttribute("size") || "md";
   }
-  set size(e) {
-    this.setAttribute("size", e);
+  set size(t) {
+    this.setAttribute("size", t);
   }
   // =========================================================================
   // Lifecycle
   // =========================================================================
   setupAccessibility() {
-    var e, t;
-    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && ((t = this.textContent) != null && t.trim() || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+    var t, e;
+    typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && ((e = this.textContent) != null && e.trim() || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
       `[compa11y/Button] Button has no accessible label. Add text content, aria-label="...", or aria-labelledby="..." attribute.
 💡 Suggestion: <a11y-button>Click me</a11y-button>`
     ));
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = this.variant, i = this.size, s = this.getAttribute("type") || "button", a = this.getAttribute("aria-label") || "", r = this.disabled, l = this.discoverable, o = this.loading, d = r || o, h = r && !l;
-    e.innerHTML = `
-      <style>${we}</style>
+    const t = this.attachShadow({ mode: "open" }), e = this.variant, i = this.size, s = this.getAttribute("type") || "button", a = this.getAttribute("aria-label") || "", r = this.disabled, l = this.discoverable, o = this.loading, b = r || o, h = r && !l;
+    t.innerHTML = `
+      <style>${St}</style>
       <button
-        class="variant-${t} size-${i}"
+        class="variant-${e} size-${i}"
         type="${s}"
         ${h ? "disabled" : ""}
-        ${d ? 'aria-disabled="true"' : ""}
+        ${b ? 'aria-disabled="true"' : ""}
         ${o ? 'aria-busy="true"' : ""}
         ${a ? `aria-label="${a}"` : ""}
         part="button"
       >${o ? '<span class="button-spinner" aria-hidden="true" part="spinner"></span>' : ""}<slot></slot></button>
-    `, this._buttonEl = e.querySelector("button");
+    `, this._buttonEl = t.querySelector("button");
   }
   setupEventListeners() {
-    var e;
-    (e = this._buttonEl) == null || e.addEventListener("click", this.handleClick);
+    var t;
+    (t = this._buttonEl) == null || t.addEventListener("click", this.handleClick);
   }
   cleanupEventListeners() {
-    var e;
-    (e = this._buttonEl) == null || e.removeEventListener("click", this.handleClick);
+    var t;
+    (t = this._buttonEl) == null || t.removeEventListener("click", this.handleClick);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "variant": {
         if (!this._buttonEl) break;
         const a = this._buttonEl.className.split(" ").filter((r) => !r.startsWith("variant-"));
@@ -3018,20 +3140,20 @@ class G extends c {
   // =========================================================================
   updateDisabledState() {
     if (!this._buttonEl) return;
-    const e = this.disabled, t = this.discoverable, i = this.loading, s = e && !t, a = e || i;
+    const t = this.disabled, e = this.discoverable, i = this.loading, s = t && !e, a = t || i;
     s ? this._buttonEl.setAttribute("disabled", "") : this._buttonEl.removeAttribute("disabled"), a ? this._buttonEl.setAttribute("aria-disabled", "true") : this._buttonEl.removeAttribute("aria-disabled");
   }
   updateLoadingState() {
     if (!this._buttonEl) return;
     if (this.loading) {
       if (this._buttonEl.setAttribute("aria-busy", "true"), this._buttonEl.setAttribute("aria-disabled", "true"), !this._buttonEl.querySelector(".button-spinner")) {
-        const t = document.createElement("span");
-        t.className = "button-spinner", t.setAttribute("aria-hidden", "true"), t.setAttribute("part", "spinner"), this._buttonEl.insertBefore(t, this._buttonEl.firstChild);
+        const e = document.createElement("span");
+        e.className = "button-spinner", e.setAttribute("aria-hidden", "true"), e.setAttribute("part", "spinner"), this._buttonEl.insertBefore(e, this._buttonEl.firstChild);
       }
     } else {
       this._buttonEl.removeAttribute("aria-busy");
-      const t = this._buttonEl.querySelector(".button-spinner");
-      t == null || t.remove(), this.updateDisabledState();
+      const e = this._buttonEl.querySelector(".button-spinner");
+      e == null || e.remove(), this.updateDisabledState();
     }
   }
   // =========================================================================
@@ -3039,22 +3161,22 @@ class G extends c {
   // =========================================================================
   /** Focus the button element */
   focus() {
-    var e;
-    (e = this._buttonEl) == null || e.focus();
+    var t;
+    (t = this._buttonEl) == null || t.focus();
   }
   /** Blur the button element */
   blur() {
-    var e;
-    (e = this._buttonEl) == null || e.blur();
+    var t;
+    (t = this._buttonEl) == null || t.blur();
   }
   /** Programmatically click the button */
   click() {
-    var e;
-    (e = this._buttonEl) == null || e.click();
+    var t;
+    (t = this._buttonEl) == null || t.click();
   }
 }
-u("a11y-button", G);
-class X extends c {
+c("a11y-button", X);
+class W extends d {
   constructor() {
     super(...arguments), this._label = "", this._disabled = !1;
   }
@@ -3064,60 +3186,59 @@ class X extends c {
   get label() {
     return this._label;
   }
-  set label(e) {
-    this._label = e, this.setAttribute("label", e), this.updateLabel();
+  set label(t) {
+    this._label = t, this.setAttribute("label", t), this.updateLabel();
   }
   get disabled() {
     return this._disabled;
   }
-  set disabled(e) {
-    const t = !!e;
-    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  set disabled(t) {
+    const e = !!t;
+    this._disabled !== e && (this._disabled = e, e ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
   }
   setupAccessibility() {
     this.setAttribute("role", "group"), this._label = this.getAttribute("label") || "", this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" });
-    const e = `${this._id}-label`;
+    const t = `${this._id}-label`;
     this.shadowRoot.innerHTML = `
-      <style>${Se}</style>
+      <style>${Tt}</style>
       <div class="optgroup-wrapper" part="group">
-        <div class="optgroup-label" part="label" id="${e}" role="presentation">
+        <div class="optgroup-label" part="label" id="${t}" role="presentation">
           ${this._label}
         </div>
         <div class="optgroup-options" part="options" role="none">
           <slot></slot>
         </div>
       </div>
-    `, this.setAttribute("aria-labelledby", e);
+    `, this.setAttribute("aria-labelledby", t);
   }
   setupEventListeners() {
   }
   cleanupEventListeners() {
   }
   updateLabel() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".optgroup-label");
-    e && (e.textContent = this._label);
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".optgroup-label");
+    t && (t.textContent = this._label);
   }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "label":
-          this._label = i || "", this.updateLabel();
-          break;
-        case "disabled":
-          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
-          break;
-      }
+  onAttributeChange(t, e, i) {
+    switch (t) {
+      case "label":
+        this._label = i || "", this.updateLabel();
+        break;
+      case "disabled":
+        this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+        break;
+    }
   }
 }
-class V extends c {
+class J extends d {
   constructor() {
-    super(...arguments), this._value = "", this._disabled = !1, this._selected = !1, this._discoverable = !0, this.handleClick = (e) => {
+    super(...arguments), this._value = "", this._disabled = !1, this._selected = !1, this._discoverable = !0, this.handleClick = (t) => {
       if (this.effectivelyDisabled) {
-        e.preventDefault();
+        t.preventDefault();
         return;
       }
       this.dispatchEvent(
@@ -3135,45 +3256,45 @@ class V extends c {
   get value() {
     return this._value;
   }
-  set value(e) {
-    this._value = e, this.setAttribute("value", e);
+  set value(t) {
+    this._value = t, this.setAttribute("value", t);
   }
   get disabled() {
     return this._disabled;
   }
-  set disabled(e) {
-    const t = !!e;
-    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  set disabled(t) {
+    const e = !!t;
+    this._disabled !== e && (this._disabled = e, e ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
   }
   get selected() {
     return this._selected;
   }
-  set selected(e) {
-    const t = !!e;
-    this._selected !== t && (this._selected = t, this.setAttribute("aria-selected", String(t)));
+  set selected(t) {
+    const e = !!t;
+    this._selected !== e && (this._selected = e, this.setAttribute("aria-selected", String(e)));
   }
   get discoverable() {
     return this._discoverable;
   }
-  set discoverable(e) {
-    this._discoverable = !!e;
+  set discoverable(t) {
+    this._discoverable = !!t;
   }
   /**
    * Whether this option is effectively disabled (own disabled or group disabled)
    */
   get effectivelyDisabled() {
     if (this._disabled) return !0;
-    const e = this.closest("a11y-optgroup");
-    return (e == null ? void 0 : e.disabled) ?? !1;
+    const t = this.closest("a11y-optgroup");
+    return (t == null ? void 0 : t.disabled) ?? !1;
   }
   setupAccessibility() {
     this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false"), this._value = this.getAttribute("value") || "", this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
-    const e = this.getAttribute("discoverable");
-    (e === "false" || e === "0") && (this._discoverable = !1);
+    const t = this.getAttribute("discoverable");
+    (t === "false" || t === "0") && (this._discoverable = !1);
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>${Le}</style>
+      <style>${Ct}</style>
       <div class="option-wrapper" part="option">
         <span class="option-content" part="content"><slot></slot></span>
         <span class="check-mark" part="check" aria-hidden="true">&#10003;</span>
@@ -3186,92 +3307,91 @@ class V extends c {
   cleanupEventListeners() {
     this.removeEventListener("click", this.handleClick);
   }
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "value":
-          this._value = i || "";
-          break;
-        case "disabled":
-          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
-          break;
-        case "discoverable":
-          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
-          break;
-      }
+  onAttributeChange(t, e, i) {
+    switch (t) {
+      case "value":
+        this._value = i || "";
+        break;
+      case "disabled":
+        this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+        break;
+      case "discoverable":
+        i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
+        break;
+    }
   }
 }
-class W extends c {
+class Q extends d {
   constructor() {
     super(...arguments), this._value = null, this._values = /* @__PURE__ */ new Set(), this._multiple = !1, this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._focusedIndex = -1, this._typeAhead = null, this.handleFocus = () => {
       if (this._focusedIndex >= 0) return;
-      const e = this.getAllOptions();
+      const t = this.getAllOptions();
       if (!this._multiple && this._value) {
-        const t = e.findIndex((i) => i.value === this._value);
-        if (t >= 0) {
-          this._focusedIndex = t, this.updateFocusHighlight();
+        const e = t.findIndex((i) => i.value === this._value);
+        if (e >= 0) {
+          this._focusedIndex = e, this.updateFocusHighlight();
           return;
         }
       } else if (this._multiple && this._values.size > 0) {
-        const t = e.findIndex((i) => this._values.has(i.value));
-        if (t >= 0) {
-          this._focusedIndex = t, this.updateFocusHighlight();
+        const e = t.findIndex((i) => this._values.has(i.value));
+        if (e >= 0) {
+          this._focusedIndex = e, this.updateFocusHighlight();
           return;
         }
       }
       this._focusedIndex = this.findFirstEnabled(), this.updateFocusHighlight();
-    }, this.handleOptionSelect = (e) => {
+    }, this.handleOptionSelect = (t) => {
       var r;
       if (this._disabled) return;
-      const t = (r = e.detail) == null ? void 0 : r.value;
-      if (t === void 0) return;
-      const i = this.getAllOptions(), s = i.find((l) => l.value === t);
+      const e = (r = t.detail) == null ? void 0 : r.value;
+      if (e === void 0) return;
+      const i = this.getAllOptions(), s = i.find((l) => l.value === e);
       if (!s) return;
       const a = i.indexOf(s);
       this._focusedIndex = a, this.updateFocusHighlight(), this.selectOption(s), this.focus();
-    }, this.handleKeyDown = (e) => {
+    }, this.handleKeyDown = (t) => {
       var a, r, l;
       if (this._disabled && !this._discoverable) return;
-      const t = this.getAllOptions();
-      if (t.length === 0) return;
+      const e = this.getAllOptions();
+      if (e.length === 0) return;
       let i = null, s = !1;
       if (this._multiple)
-        switch (e.key) {
+        switch (t.key) {
           case "ArrowDown":
-            e.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, 1), i >= 0 && this.toggleOptionSelection(t[i])) : i = this.findNextEnabled(this._focusedIndex, 1), s = !0;
+            t.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, 1), i >= 0 && this.toggleOptionSelection(e[i])) : i = this.findNextEnabled(this._focusedIndex, 1), s = !0;
             break;
           case "ArrowUp":
-            e.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, -1), i >= 0 && this.toggleOptionSelection(t[i])) : i = this.findNextEnabled(this._focusedIndex, -1), s = !0;
+            t.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, -1), i >= 0 && this.toggleOptionSelection(e[i])) : i = this.findNextEnabled(this._focusedIndex, -1), s = !0;
             break;
           case " ":
-            this._focusedIndex >= 0 && t[this._focusedIndex] != null && this.toggleOptionSelection(t[this._focusedIndex]), s = !0;
+            this._focusedIndex >= 0 && e[this._focusedIndex] != null && this.toggleOptionSelection(e[this._focusedIndex]), s = !0;
             break;
           case "Home":
-            e.ctrlKey && e.shiftKey ? (this.selectRange(this.findFirstEnabled(), this._focusedIndex), i = this.findFirstEnabled()) : i = this.findFirstEnabled(), s = !0;
+            t.ctrlKey && t.shiftKey ? (this.selectRange(this.findFirstEnabled(), this._focusedIndex), i = this.findFirstEnabled()) : i = this.findFirstEnabled(), s = !0;
             break;
           case "End":
-            e.ctrlKey && e.shiftKey ? (this.selectRange(this._focusedIndex, this.findLastEnabled()), i = this.findLastEnabled()) : i = this.findLastEnabled(), s = !0;
+            t.ctrlKey && t.shiftKey ? (this.selectRange(this._focusedIndex, this.findLastEnabled()), i = this.findLastEnabled()) : i = this.findLastEnabled(), s = !0;
             break;
           case "a":
-            (e.ctrlKey || e.metaKey) && (this.toggleSelectAll(), s = !0);
+            (t.ctrlKey || t.metaKey) && (this.toggleSelectAll(), s = !0);
             break;
           default:
-            if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-              const o = (a = this._typeAhead) == null ? void 0 : a.type(e.key);
+            if (t.key.length === 1 && !t.ctrlKey && !t.altKey && !t.metaKey) {
+              const o = (a = this._typeAhead) == null ? void 0 : a.type(t.key);
               if (o) {
-                const d = t.findIndex(
+                const b = e.findIndex(
                   (h) => {
-                    var g;
-                    return (((g = h.textContent) == null ? void 0 : g.trim()) || "") === o && !h.effectivelyDisabled;
+                    var m;
+                    return (((m = h.textContent) == null ? void 0 : m.trim()) || "") === o && !h.effectivelyDisabled;
                   }
                 );
-                d >= 0 && (i = d, s = !0);
+                b >= 0 && (i = b, s = !0);
               }
             }
             break;
         }
       else
-        switch (e.key) {
+        switch (t.key) {
           case "ArrowDown":
             i = this.findNextEnabled(this._focusedIndex, 1), s = !0;
             break;
@@ -3285,28 +3405,28 @@ class W extends c {
             i = this.findLastEnabled(), s = !0;
             break;
           default:
-            if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
-              const o = (r = this._typeAhead) == null ? void 0 : r.type(e.key);
+            if (t.key.length === 1 && !t.ctrlKey && !t.altKey && !t.metaKey) {
+              const o = (r = this._typeAhead) == null ? void 0 : r.type(t.key);
               if (o) {
-                const d = t.findIndex(
+                const b = e.findIndex(
                   (h) => {
-                    var g;
-                    return (((g = h.textContent) == null ? void 0 : g.trim()) || "") === o && !h.effectivelyDisabled;
+                    var m;
+                    return (((m = h.textContent) == null ? void 0 : m.trim()) || "") === o && !h.effectivelyDisabled;
                   }
                 );
-                d >= 0 && (i = d, s = !0);
+                b >= 0 && (i = b, s = !0);
               }
             }
             break;
         }
-      if (s && (e.preventDefault(), e.stopPropagation()), i !== null && i >= 0) {
+      if (s && (t.preventDefault(), t.stopPropagation()), i !== null && i >= 0) {
         this._focusedIndex = i, this.updateFocusHighlight();
-        const o = t[i];
+        const o = e[i];
         if (!this._multiple && o)
           this.selectSingle(o);
         else if (o) {
-          const d = ((l = o.textContent) == null ? void 0 : l.trim()) || o.value, h = this._values.has(o.value);
-          p(`${d}${h ? ", selected" : ""}`);
+          const b = ((l = o.textContent) == null ? void 0 : l.trim()) || o.value, h = this._values.has(o.value);
+          p(`${b}${h ? ", selected" : ""}`);
         }
       }
     };
@@ -3326,49 +3446,49 @@ class W extends c {
   get value() {
     return this._multiple ? Array.from(this._values) : this._value || "";
   }
-  set value(e) {
+  set value(t) {
     if (this._multiple) {
-      const t = Array.isArray(e) ? e : String(e).split(",").filter(Boolean);
-      this._values = new Set(t), this.setAttribute("value", t.join(","));
+      const e = Array.isArray(t) ? t : String(t).split(",").filter(Boolean);
+      this._values = new Set(e), this.setAttribute("value", e.join(","));
     } else {
-      const t = Array.isArray(e) ? e[0] || "" : String(e);
-      this._value = t, this.setAttribute("value", t);
+      const e = Array.isArray(t) ? t[0] || "" : String(t);
+      this._value = e, this.setAttribute("value", e);
     }
     this.syncOptionStates();
   }
   get multiple() {
     return this._multiple;
   }
-  set multiple(e) {
-    const t = !!e;
-    this._multiple !== t && (this._multiple = t, t ? (this.setAttribute("multiple", ""), this.setAttribute("aria-multiselectable", "true")) : (this.removeAttribute("multiple"), this.removeAttribute("aria-multiselectable")));
+  set multiple(t) {
+    const e = !!t;
+    this._multiple !== e && (this._multiple = e, e ? (this.setAttribute("multiple", ""), this.setAttribute("aria-multiselectable", "true")) : (this.removeAttribute("multiple"), this.removeAttribute("aria-multiselectable")));
   }
   get disabled() {
     return this._disabled;
   }
-  set disabled(e) {
-    const t = !!e;
-    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  set disabled(t) {
+    const e = !!t;
+    this._disabled !== e && (this._disabled = e, e ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
   }
   get discoverable() {
     return this._discoverable;
   }
-  set discoverable(e) {
-    this._discoverable = !!e;
+  set discoverable(t) {
+    this._discoverable = !!t;
   }
   get orientation() {
     return this._orientation;
   }
-  set orientation(e) {
-    this._orientation = e, this.setAttribute("orientation", e), this.setAttribute("aria-orientation", e);
+  set orientation(t) {
+    this._orientation = t, this.setAttribute("orientation", t), this.setAttribute("aria-orientation", t);
   }
   // ===== Lifecycle =====
   setupAccessibility() {
     this.setAttribute("role", "listbox"), this.setAttribute("aria-orientation", this._orientation), !(this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) && process.env.NODE_ENV !== "production" && console.warn(
       "[Compa11y Listbox]: Listbox has no accessible label. Use aria-label or aria-labelledby."
     ), this._multiple = this.hasAttribute("multiple"), this._multiple && this.setAttribute("aria-multiselectable", "true"), this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
-    const t = this.getAttribute("orientation");
-    (t === "horizontal" || t === "vertical") && (this._orientation = t);
+    const e = this.getAttribute("orientation");
+    (e === "horizontal" || e === "vertical") && (this._orientation = e);
     const i = this.getAttribute("discoverable");
     (i === "false" || i === "0") && (this._discoverable = !1);
     const s = this.getAttribute("value");
@@ -3376,17 +3496,17 @@ class W extends c {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>${$e}</style>
+      <style>${It}</style>
       <div class="listbox-wrapper" part="wrapper">
         <slot></slot>
       </div>
     `;
   }
   setupEventListeners() {
-    var t;
+    var e;
     this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("focus", this.handleFocus), this.addEventListener("option-select", this.handleOptionSelect);
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
-    e && e.addEventListener("slotchange", () => {
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t && t.addEventListener("slotchange", () => {
       this.rebuildTypeAhead(), this.syncOptionStates();
     }), this.rebuildTypeAhead(), this.syncOptionStates();
   }
@@ -3398,68 +3518,68 @@ class W extends c {
     return Array.from(this.querySelectorAll("a11y-option"));
   }
   getEnabledOptions() {
-    return this.getAllOptions().filter((e) => !e.effectivelyDisabled);
+    return this.getAllOptions().filter((t) => !t.effectivelyDisabled);
   }
   getEnabledIndices() {
-    const e = this.getAllOptions(), t = [];
-    return e.forEach((i, s) => {
-      i.effectivelyDisabled || t.push(s);
-    }), t;
+    const t = this.getAllOptions(), e = [];
+    return t.forEach((i, s) => {
+      i.effectivelyDisabled || e.push(s);
+    }), e;
   }
   // ===== State Sync =====
   syncOptionStates() {
-    this.getAllOptions().forEach((t) => {
-      this._multiple ? t.selected = this._values.has(t.value) : t.selected = t.value === this._value;
+    this.getAllOptions().forEach((e) => {
+      this._multiple ? e.selected = this._values.has(e.value) : e.selected = e.value === this._value;
     });
   }
   updateFocusHighlight() {
-    const e = this.getAllOptions();
-    e.forEach((i, s) => {
+    const t = this.getAllOptions();
+    t.forEach((i, s) => {
       s === this._focusedIndex ? i.toggleAttribute("data-focused", !0) : i.removeAttribute("data-focused");
     });
-    const t = this._focusedIndex >= 0 ? e[this._focusedIndex] : void 0;
-    t ? (this.setAttribute("aria-activedescendant", t.id), t.scrollIntoView({ block: "nearest" })) : this.removeAttribute("aria-activedescendant");
+    const e = this._focusedIndex >= 0 ? t[this._focusedIndex] : void 0;
+    e ? (this.setAttribute("aria-activedescendant", e.id), e.scrollIntoView({ block: "nearest" })) : this.removeAttribute("aria-activedescendant");
   }
   // ===== Navigation Helpers =====
-  findNextEnabled(e, t) {
+  findNextEnabled(t, e) {
     const i = this.getEnabledIndices();
     if (i.length === 0) return -1;
-    const s = i.indexOf(e);
+    const s = i.indexOf(t);
     if (s === -1)
-      return t === 1 ? i[0] : i[i.length - 1];
-    const a = s + t;
+      return e === 1 ? i[0] : i[i.length - 1];
+    const a = s + e;
     return a < 0 || a >= i.length ? -1 : i[a];
   }
   findFirstEnabled() {
-    const e = this.getEnabledIndices();
-    return e.length > 0 ? e[0] : -1;
+    const t = this.getEnabledIndices();
+    return t.length > 0 ? t[0] : -1;
   }
   findLastEnabled() {
-    const e = this.getEnabledIndices();
-    return e.length > 0 ? e[e.length - 1] : -1;
+    const t = this.getEnabledIndices();
+    return t.length > 0 ? t[t.length - 1] : -1;
   }
   // ===== Selection =====
-  selectOption(e) {
-    e.effectivelyDisabled || this._disabled || (this._multiple ? this.toggleOptionSelection(e) : this.selectSingle(e));
+  selectOption(t) {
+    t.effectivelyDisabled || this._disabled || (this._multiple ? this.toggleOptionSelection(t) : this.selectSingle(t));
   }
-  selectSingle(e) {
+  selectSingle(t) {
     var i;
-    const t = this._value;
-    if (this._value = e.value, this.setAttribute("value", e.value), this.syncOptionStates(), t !== this._value) {
-      const s = ((i = e.textContent) == null ? void 0 : i.trim()) || e.value;
+    const e = this._value;
+    if (this._value = t.value, this.setAttribute("value", t.value), this.syncOptionStates(), e !== this._value) {
+      const s = ((i = t.textContent) == null ? void 0 : i.trim()) || t.value;
       this.emit("change", { value: this._value, label: s }), this.emit("a11y-listbox-change", { value: this._value, label: s }), p(`${s} selected`);
     }
   }
-  toggleOptionSelection(e) {
+  toggleOptionSelection(t) {
     var s;
-    if (e.effectivelyDisabled || this._disabled) return;
-    const t = ((s = e.textContent) == null ? void 0 : s.trim()) || e.value;
-    this._values.has(e.value) ? (this._values.delete(e.value), e.selected = !1, p(`${t} deselected`)) : (this._values.add(e.value), e.selected = !0, p(`${t} selected`));
+    if (t.effectivelyDisabled || this._disabled) return;
+    const e = ((s = t.textContent) == null ? void 0 : s.trim()) || t.value;
+    this._values.has(t.value) ? (this._values.delete(t.value), t.selected = !1, p(`${e} deselected`)) : (this._values.add(t.value), t.selected = !0, p(`${e} selected`));
     const i = Array.from(this._values);
     this.setAttribute("value", i.join(",")), this.emit("change", { value: i }), this.emit("a11y-listbox-change", { value: i });
   }
-  selectRange(e, t) {
-    const i = this.getAllOptions(), s = Math.min(e, t), a = Math.max(e, t);
+  selectRange(t, e) {
+    const i = this.getAllOptions(), s = Math.min(t, e), a = Math.max(t, e);
     for (let l = s; l <= a; l++) {
       const o = i[l];
       o && !o.effectivelyDisabled && (this._values.add(o.value), o.selected = !0);
@@ -3468,8 +3588,8 @@ class W extends c {
     this.setAttribute("value", r.join(",")), this.emit("change", { value: r }), this.emit("a11y-listbox-change", { value: r }), p(`${a - s + 1} items selected`);
   }
   toggleSelectAll() {
-    const e = this.getEnabledOptions();
-    e.every((s) => this._values.has(s.value)) ? (this._values.clear(), this.getAllOptions().forEach((s) => s.selected = !1), p("All deselected")) : (e.forEach((s) => {
+    const t = this.getEnabledOptions();
+    t.every((s) => this._values.has(s.value)) ? (this._values.clear(), this.getAllOptions().forEach((s) => s.selected = !1), p("All deselected")) : (t.forEach((s) => {
       this._values.add(s.value), s.selected = !0;
     }), p("All selected"));
     const i = Array.from(this._values);
@@ -3477,53 +3597,52 @@ class W extends c {
   }
   // ===== Type-ahead =====
   rebuildTypeAhead() {
-    const e = this.getAllOptions().map(
-      (t) => {
+    const t = this.getAllOptions().map(
+      (e) => {
         var i;
-        return ((i = t.textContent) == null ? void 0 : i.trim()) || "";
+        return ((i = e.textContent) == null ? void 0 : i.trim()) || "";
       }
     );
-    this._typeAhead = q(e, { timeout: 500 });
+    this._typeAhead = q(t, { timeout: 500 });
   }
   // ===== Attribute Changes =====
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
-        case "value":
-          this._multiple ? this._values = new Set(
-            (i || "").split(",").filter(Boolean)
-          ) : this._value = i || null, this.syncOptionStates();
-          break;
-        case "multiple":
-          this._multiple = i !== null, this._multiple ? (this.setAttribute("aria-multiselectable", "true"), this._value && (this._values = /* @__PURE__ */ new Set([this._value]), this._value = null)) : (this.removeAttribute("aria-multiselectable"), this._values.size > 0 && (this._value = Array.from(this._values)[0] ?? null, this._values.clear())), this.syncOptionStates();
-          break;
-        case "disabled":
-          this._disabled = i !== null, this._disabled ? (this.setAttribute("aria-disabled", "true"), this._discoverable || this.setAttribute("tabindex", "-1")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
-          break;
-        case "discoverable":
-          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
-          break;
-        case "orientation":
-          (i === "horizontal" || i === "vertical") && (this._orientation = i, this.setAttribute("aria-orientation", i));
-          break;
-      }
+  onAttributeChange(t, e, i) {
+    switch (t) {
+      case "value":
+        this._multiple ? this._values = new Set(
+          (i || "").split(",").filter(Boolean)
+        ) : this._value = i || null, this.syncOptionStates();
+        break;
+      case "multiple":
+        this._multiple = i !== null, this._multiple ? (this.setAttribute("aria-multiselectable", "true"), this._value && (this._values = /* @__PURE__ */ new Set([this._value]), this._value = null)) : (this.removeAttribute("aria-multiselectable"), this._values.size > 0 && (this._value = Array.from(this._values)[0] ?? null, this._values.clear())), this.syncOptionStates();
+        break;
+      case "disabled":
+        this._disabled = i !== null, this._disabled ? (this.setAttribute("aria-disabled", "true"), this._discoverable || this.setAttribute("tabindex", "-1")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
+        break;
+      case "discoverable":
+        i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
+        break;
+      case "orientation":
+        (i === "horizontal" || i === "vertical") && (this._orientation = i, this.setAttribute("aria-orientation", i));
+        break;
+    }
   }
 }
-u("a11y-optgroup", X);
-u("a11y-option", V);
-u("a11y-listbox", W);
-const De = `<svg class="checkbox-check" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+c("a11y-optgroup", W);
+c("a11y-option", J);
+c("a11y-listbox", Q);
+const Mt = `<svg class="checkbox-check" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
   <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`, Oe = `<svg class="checkbox-dash" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+</svg>`, Kt = `<svg class="checkbox-dash" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
   <path d="M3 6H9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
 </svg>`;
-class O extends c {
+class R extends d {
   constructor() {
     super(...arguments), this._checked = !1, this._indeterminate = !1, this._input = null, this.handleChange = () => {
       if (!this._input) return;
       this._checked = this._input.checked, this.toggleAttribute("checked", this._checked), this._indeterminate && (this._indeterminate = !1, this.removeAttribute("indeterminate"), this._input.indeterminate = !1), this.updateVisualState(), this.emit("change", { checked: this._checked, value: this.value });
-      const e = this.label || this.getAttribute("aria-label") || "Checkbox";
-      p(`${e} ${this._checked ? "checked" : "unchecked"}`);
+      const t = this.label || this.getAttribute("aria-label") || "Checkbox";
+      p(`${t} ${this._checked ? "checked" : "unchecked"}`);
     };
   }
   static get observedAttributes() {
@@ -3548,9 +3667,9 @@ class O extends c {
   get checked() {
     return this._checked;
   }
-  set checked(e) {
-    const t = this._checked;
-    this._checked = e, this.toggleAttribute("checked", e), e !== t && (this.updateVisualState(), this.emit("change", { checked: e, value: this.value }));
+  set checked(t) {
+    const e = this._checked;
+    this._checked = t, this.toggleAttribute("checked", t), t !== e && (this.updateVisualState(), this.emit("change", { checked: t, value: this.value }));
   }
   /**
    * Get/set the indeterminate state
@@ -3558,9 +3677,9 @@ class O extends c {
   get indeterminate() {
     return this._indeterminate;
   }
-  set indeterminate(e) {
-    const t = this._indeterminate;
-    this._indeterminate = e, this.toggleAttribute("indeterminate", e), e !== t && this.updateVisualState();
+  set indeterminate(t) {
+    const e = this._indeterminate;
+    this._indeterminate = t, this.toggleAttribute("indeterminate", t), t !== e && this.updateVisualState();
   }
   /**
    * Get/set the disabled state
@@ -3568,8 +3687,8 @@ class O extends c {
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e), this.updateDisabledState();
+  set disabled(t) {
+    this.toggleAttribute("disabled", t), this.updateDisabledState();
   }
   /**
    * Get/set the value
@@ -3577,8 +3696,8 @@ class O extends c {
   get value() {
     return this.getAttribute("value") || "";
   }
-  set value(e) {
-    e ? this.setAttribute("value", e) : this.removeAttribute("value");
+  set value(t) {
+    t ? this.setAttribute("value", t) : this.removeAttribute("value");
   }
   /**
    * Get/set the visible label
@@ -3586,8 +3705,8 @@ class O extends c {
   get label() {
     return this.getAttribute("label") || "";
   }
-  set label(e) {
-    e ? this.setAttribute("label", e) : this.removeAttribute("label");
+  set label(t) {
+    t ? this.setAttribute("label", t) : this.removeAttribute("label");
   }
   /**
    * Get/set the hint text
@@ -3595,8 +3714,8 @@ class O extends c {
   get hint() {
     return this.getAttribute("hint") || "";
   }
-  set hint(e) {
-    e ? this.setAttribute("hint", e) : this.removeAttribute("hint");
+  set hint(t) {
+    t ? this.setAttribute("hint", t) : this.removeAttribute("hint");
   }
   /**
    * Get/set the error message
@@ -3604,18 +3723,18 @@ class O extends c {
   get error() {
     return this.getAttribute("error") || "";
   }
-  set error(e) {
-    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  set error(t) {
+    t ? this.setAttribute("error", t) : this.removeAttribute("error");
   }
   /**
    * Get/set the size variant
    */
   get size() {
-    const e = this.getAttribute("size");
-    return e === "sm" || e === "lg" ? e : "md";
+    const t = this.getAttribute("size");
+    return t === "sm" || t === "lg" ? t : "md";
   }
-  set size(e) {
-    this.setAttribute("size", e);
+  set size(t) {
+    this.setAttribute("size", t);
   }
   /**
    * Get/set required state
@@ -3623,28 +3742,28 @@ class O extends c {
   get required() {
     return this.hasAttribute("required");
   }
-  set required(e) {
-    this.toggleAttribute("required", e);
+  set required(t) {
+    this.toggleAttribute("required", t);
   }
   setupAccessibility() {
-    var e;
-    this._checked = this.hasAttribute("checked"), this._indeterminate = this.hasAttribute("indeterminate"), typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
+    var t;
+    this._checked = this.hasAttribute("checked"), this._indeterminate = this.hasAttribute("indeterminate"), typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
       `[compa11y/Checkbox] Checkbox has no accessible label. Add label="..." or aria-label="..." attribute.
 💡 Suggestion: <a11y-checkbox label="Accept terms"></a11y-checkbox>`
     );
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-input`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = !!this.label, l = !!this.hint, o = !!this.error, d = this.getAttribute("aria-label"), h = this.getAttribute("name") || "", g = this.getAttribute("aria-describedby") || "", m = [];
-    g && m.push(g), l && m.push(s), o && m.push(a);
-    const f = m.length ? `aria-describedby="${m.join(" ")}"` : "", _ = !r && d ? `aria-label="${d}"` : "";
-    e.innerHTML = `
-      <style>${Ie}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-input`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = !!this.label, l = !!this.hint, o = !!this.error, b = this.getAttribute("aria-label"), h = this.getAttribute("name") || "", m = this.getAttribute("aria-describedby") || "", g = [];
+    m && g.push(m), l && g.push(s), o && g.push(a);
+    const f = g.length ? `aria-describedby="${g.join(" ")}"` : "", _ = !r && b ? `aria-label="${b}"` : "";
+    t.innerHTML = `
+      <style>${zt}</style>
       <div class="checkbox-wrapper size-${this.size}" part="wrapper">
         <div class="checkbox-control">
           <input
             type="checkbox"
             class="checkbox-input"
-            id="${t}"
+            id="${e}"
             ${h ? `name="${h}"` : ""}
             ${this.value ? `value="${this.value}"` : ""}
             ${this._checked ? "checked" : ""}
@@ -3656,28 +3775,28 @@ class O extends c {
             part="input"
           />
           <div class="checkbox-indicator" part="indicator" aria-hidden="true">
-            ${De}
-            ${Oe}
+            ${Mt}
+            ${Kt}
           </div>
         </div>
         ${r || l || o ? `<div class="checkbox-content">
-            ${r ? `<label for="${t}" id="${i}" class="checkbox-label" part="label">${this.label}${this.required ? '<span class="checkbox-required" aria-hidden="true">*</span>' : ""}</label>` : ""}
+            ${r ? `<label for="${e}" id="${i}" class="checkbox-label" part="label">${this.label}${this.required ? '<span class="checkbox-required" aria-hidden="true">*</span>' : ""}</label>` : ""}
             ${l ? `<div id="${s}" class="checkbox-hint" part="hint">${this.hint}</div>` : ""}
             ${o ? `<div id="${a}" class="checkbox-error" role="alert" part="error">${this.error}</div>` : ""}
           </div>` : ""}
       </div>
-    `, this._input = e.querySelector("input"), this._input && this._indeterminate && (this._input.indeterminate = !0);
+    `, this._input = t.querySelector("input"), this._input && this._indeterminate && (this._input.indeterminate = !0);
   }
   setupEventListeners() {
-    var e;
-    (e = this._input) == null || e.addEventListener("change", this.handleChange);
+    var t;
+    (t = this._input) == null || t.addEventListener("change", this.handleChange);
   }
   cleanupEventListeners() {
-    var e;
-    (e = this._input) == null || e.removeEventListener("change", this.handleChange);
+    var t;
+    (t = this._input) == null || t.removeEventListener("change", this.handleChange);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "checked":
         this._checked = i !== null, this.updateVisualState();
         break;
@@ -3717,9 +3836,9 @@ class O extends c {
    * Update size class
    */
   updateSizeClass() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".checkbox-wrapper");
-    e && (e.classList.remove("size-sm", "size-md", "size-lg"), e.classList.add(`size-${this.size}`));
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".checkbox-wrapper");
+    t && (t.classList.remove("size-sm", "size-md", "size-lg"), t.classList.add(`size-${this.size}`));
   }
   /**
    * Toggle the checkbox programmatically
@@ -3727,23 +3846,23 @@ class O extends c {
   toggle() {
     if (this.disabled) return;
     this._indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked;
-    const e = this.label || this.getAttribute("aria-label") || "Checkbox";
-    p(`${e} ${this.checked ? "checked" : "unchecked"}`);
+    const t = this.label || this.getAttribute("aria-label") || "Checkbox";
+    p(`${t} ${this.checked ? "checked" : "unchecked"}`);
   }
   /**
    * Set checked state programmatically
    */
-  setChecked(e) {
-    this.checked = e;
+  setChecked(t) {
+    this.checked = t;
   }
 }
-class J extends c {
+class Z extends d {
   constructor() {
-    super(...arguments), this._value = [], this.handleChildChange = (e) => {
-      const t = e.target;
-      if (!(t instanceof O) || t === this) return;
-      const i = t.value;
-      i && (t.checked ? this._value.includes(i) || (this._value = [...this._value, i]) : this._value = this._value.filter((s) => s !== i), this.emit("change", { value: this._value }));
+    super(...arguments), this._value = [], this.handleChildChange = (t) => {
+      const e = t.target;
+      if (!(e instanceof R) || e === this) return;
+      const i = e.value;
+      i && (e.checked ? this._value.includes(i) || (this._value = [...this._value, i]) : this._value = this._value.filter((s) => s !== i), this.emit("change", { value: this._value }));
     };
   }
   static get observedAttributes() {
@@ -3762,8 +3881,8 @@ class J extends c {
   get value() {
     return [...this._value];
   }
-  set value(e) {
-    this._value = [...e], this.syncCheckboxStates();
+  set value(t) {
+    this._value = [...t], this.syncCheckboxStates();
   }
   /**
    * Get/set the disabled state
@@ -3771,8 +3890,8 @@ class J extends c {
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(e) {
-    this.toggleAttribute("disabled", e), this.syncDisabledState();
+  set disabled(t) {
+    this.toggleAttribute("disabled", t), this.syncDisabledState();
   }
   /**
    * Get/set the legend text
@@ -3780,8 +3899,8 @@ class J extends c {
   get legend() {
     return this.getAttribute("legend") || "";
   }
-  set legend(e) {
-    e ? this.setAttribute("legend", e) : this.removeAttribute("legend");
+  set legend(t) {
+    t ? this.setAttribute("legend", t) : this.removeAttribute("legend");
   }
   /**
    * Get/set the error message
@@ -3789,8 +3908,8 @@ class J extends c {
   get error() {
     return this.getAttribute("error") || "";
   }
-  set error(e) {
-    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  set error(t) {
+    t ? this.setAttribute("error", t) : this.removeAttribute("error");
   }
   /**
    * Get/set the orientation
@@ -3798,32 +3917,32 @@ class J extends c {
   get orientation() {
     return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
   }
-  set orientation(e) {
-    this.setAttribute("orientation", e);
+  set orientation(t) {
+    this.setAttribute("orientation", t);
   }
   setupAccessibility() {
-    var e;
-    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.legend && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && console.warn(
+    var t;
+    typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && !this.legend && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && console.warn(
       `[compa11y/CheckboxGroup] CheckboxGroup has no accessible label. Add legend="..." or aria-label="..." attribute.
 💡 Suggestion: <a11y-checkbox-group legend="Select options"></a11y-checkbox-group>`
     ), this.initValueFromChildren();
   }
   render() {
-    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-error`, i = !!this.legend, s = !!this.error, a = this.getAttribute("aria-label"), r = this.getAttribute("aria-labelledby");
-    e.innerHTML = `
-      <style>${Ce}</style>
+    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-error`, i = !!this.legend, s = !!this.error, a = this.getAttribute("aria-label"), r = this.getAttribute("aria-labelledby");
+    t.innerHTML = `
+      <style>${Dt}</style>
       <fieldset
         part="fieldset"
         ${a ? `aria-label="${a}"` : ""}
         ${r ? `aria-labelledby="${r}"` : ""}
-        ${s ? `aria-describedby="${t}"` : ""}
+        ${s ? `aria-describedby="${e}"` : ""}
         ${this.disabled ? "disabled" : ""}
       >
         ${i ? `<legend part="legend">${this.legend}</legend>` : ""}
         <div class="checkbox-group-items" part="items">
           <slot></slot>
         </div>
-        ${s ? `<div id="${t}" class="checkbox-group-error" role="alert" part="error">${this.error}</div>` : ""}
+        ${s ? `<div id="${e}" class="checkbox-group-error" role="alert" part="error">${this.error}</div>` : ""}
       </fieldset>
     `;
   }
@@ -3833,8 +3952,8 @@ class J extends c {
   cleanupEventListeners() {
     this.removeEventListener("change", this.handleChildChange);
   }
-  onAttributeChange(e, t, i) {
-    switch (e) {
+  onAttributeChange(t, e, i) {
+    switch (t) {
       case "disabled":
         this.syncDisabledState();
         break;
@@ -3851,10 +3970,10 @@ class J extends c {
    */
   initValueFromChildren() {
     requestAnimationFrame(() => {
-      const e = this.querySelectorAll("a11y-checkbox"), t = [];
-      e.forEach((i) => {
-        i.hasAttribute("checked") && i.getAttribute("value") && t.push(i.getAttribute("value"));
-      }), this._value = t;
+      const t = this.querySelectorAll("a11y-checkbox"), e = [];
+      t.forEach((i) => {
+        i.hasAttribute("checked") && i.getAttribute("value") && e.push(i.getAttribute("value"));
+      }), this._value = e;
     });
   }
   /**
@@ -3863,56 +3982,56 @@ class J extends c {
   syncCheckboxStates() {
     this.querySelectorAll(
       "a11y-checkbox"
-    ).forEach((t) => {
-      const i = t.value;
-      i && (t.checked = this._value.includes(i));
+    ).forEach((e) => {
+      const i = e.value;
+      i && (e.checked = this._value.includes(i));
     });
   }
   /**
    * Sync disabled state to children
    */
   syncDisabledState() {
-    var t;
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("fieldset");
-    e && (this.disabled ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("fieldset");
+    t && (this.disabled ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"));
   }
 }
-u("a11y-checkbox", O);
-u("a11y-checkbox-group", J);
-class Q extends c {
+c("a11y-checkbox", R);
+c("a11y-checkbox-group", Z);
+class tt extends d {
   constructor() {
-    super(...arguments), this._value = "", this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._required = !1, this._name = "", this.handleRadioSelect = (e) => {
+    super(...arguments), this._value = "", this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._required = !1, this._name = "", this.handleRadioSelect = (t) => {
       var i;
       if (this._disabled) return;
-      const t = (i = e.detail) == null ? void 0 : i.value;
-      t !== void 0 && this.selectRadio(t);
-    }, this.handleKeyDown = (e) => {
+      const e = (i = t.detail) == null ? void 0 : i.value;
+      e !== void 0 && this.selectRadio(e);
+    }, this.handleKeyDown = (t) => {
       if (this._disabled) return;
-      const t = this.getEnabledRadios();
-      if (t.length === 0) return;
-      const i = t.findIndex(
+      const e = this.getEnabledRadios();
+      if (e.length === 0) return;
+      const i = e.findIndex(
         (a) => a.value === this._value
       );
       let s = null;
-      switch (e.key) {
+      switch (t.key) {
         case "ArrowDown":
         case "ArrowRight":
-          s = i < 0 ? 0 : (i + 1) % t.length;
+          s = i < 0 ? 0 : (i + 1) % e.length;
           break;
         case "ArrowUp":
         case "ArrowLeft":
-          s = i < 0 ? t.length - 1 : (i - 1 + t.length) % t.length;
+          s = i < 0 ? e.length - 1 : (i - 1 + e.length) % e.length;
           break;
         case "Home":
           s = 0;
           break;
         case "End":
-          s = t.length - 1;
+          s = e.length - 1;
           break;
         case " ":
-          e.preventDefault(), e.stopPropagation();
+          t.preventDefault(), t.stopPropagation();
           {
-            const a = t.find(
+            const a = e.find(
               (r) => r === document.activeElement || r.contains(document.activeElement)
             );
             if (a && a.value !== this._value) {
@@ -3926,8 +4045,8 @@ class Q extends c {
           return;
       }
       if (s !== null) {
-        e.preventDefault(), e.stopPropagation();
-        const a = t[s];
+        t.preventDefault(), t.stopPropagation();
+        const a = e[s];
         if (a) {
           this.selectRadio(a.value), a.focus();
           const r = a.getAttribute("label") || a.value;
@@ -3955,47 +4074,47 @@ class Q extends c {
   get value() {
     return this._value;
   }
-  set value(e) {
-    this._value !== e && (this._value = e, this.setAttribute("value", e), this.syncRadioStates());
+  set value(t) {
+    this._value !== t && (this._value = t, this.setAttribute("value", t), this.syncRadioStates());
   }
   get disabled() {
     return this._disabled;
   }
-  set disabled(e) {
-    const t = !!e;
-    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")), this.syncRadioStates());
+  set disabled(t) {
+    const e = !!t;
+    this._disabled !== e && (this._disabled = e, e ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")), this.syncRadioStates());
   }
   get discoverable() {
     return this._discoverable;
   }
-  set discoverable(e) {
-    this._discoverable = !!e;
+  set discoverable(t) {
+    this._discoverable = !!t;
   }
   get required() {
     return this._required;
   }
-  set required(e) {
-    this._required = !!e, this._required ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
+  set required(t) {
+    this._required = !!t, this._required ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
   }
   get name() {
     return this._name;
   }
-  set name(e) {
-    this._name = e, this.setAttribute("name", e);
+  set name(t) {
+    this._name = t, this.setAttribute("name", t);
   }
   get orientation() {
     return this._orientation;
   }
-  set orientation(e) {
-    this._orientation = e, this.setAttribute("orientation", e), this.setAttribute("aria-orientation", e);
+  set orientation(t) {
+    this._orientation = t, this.setAttribute("orientation", t), this.setAttribute("aria-orientation", t);
   }
   // ===== Lifecycle =====
   setupAccessibility() {
     this.setAttribute("role", "radiogroup"), this.setAttribute("aria-orientation", this._orientation), !(this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.hasAttribute("legend")) && process.env.NODE_ENV !== "production" && console.warn(
       "[Compa11y RadioGroup]: RadioGroup has no accessible label. Use legend, aria-label, or aria-labelledby."
     );
-    const t = this.getAttribute("value");
-    t && (this._value = t), this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
+    const e = this.getAttribute("value");
+    e && (this._value = e), this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
     const i = this.getAttribute("orientation");
     (i === "horizontal" || i === "vertical") && (this._orientation = i), this._required = this.hasAttribute("required"), this._required && this.setAttribute("aria-required", "true"), this._name = this.getAttribute("name") || this._id;
     const s = this.getAttribute("discoverable");
@@ -4003,11 +4122,11 @@ class Q extends c {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" });
-    const e = this.shadowRoot, t = this.getAttribute("legend") || "", i = this.getAttribute("hint") || "", s = this.getAttribute("error") || "", a = i ? `${this._id}-hint` : "", r = s ? `${this._id}-error` : "", l = [a, r].filter(Boolean).join(" ");
-    l ? this.setAttribute("aria-describedby", l) : this.removeAttribute("aria-describedby"), e.innerHTML = `
-      <style>${ze}</style>
+    const t = this.shadowRoot, e = this.getAttribute("legend") || "", i = this.getAttribute("hint") || "", s = this.getAttribute("error") || "", a = i ? `${this._id}-hint` : "", r = s ? `${this._id}-error` : "", l = [a, r].filter(Boolean).join(" ");
+    l ? this.setAttribute("aria-describedby", l) : this.removeAttribute("aria-describedby"), t.innerHTML = `
+      <style>${qt}</style>
       <fieldset part="fieldset">
-        ${t ? `<legend part="legend">${t}${this._required ? '<span class="radio-group-required" aria-hidden="true"> *</span>' : ""}</legend>` : ""}
+        ${e ? `<legend part="legend">${e}${this._required ? '<span class="radio-group-required" aria-hidden="true"> *</span>' : ""}</legend>` : ""}
         <div class="radio-group-items" part="items">
           <slot></slot>
         </div>
@@ -4017,13 +4136,13 @@ class Q extends c {
     `;
   }
   setupEventListeners() {
-    var t;
+    var e;
     this.addEventListener("keydown", this.handleKeyDown), this.addEventListener(
       "radio-select",
       this.handleRadioSelect
     );
-    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
-    e && e.addEventListener("slotchange", () => {
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t && t.addEventListener("slotchange", () => {
       this.syncRadioStates();
     });
   }
@@ -4039,23 +4158,23 @@ class Q extends c {
   }
   getEnabledRadios() {
     return this.getRadios().filter(
-      (e) => !e.disabled && !this._disabled
+      (t) => !t.disabled && !this._disabled
     );
   }
   syncRadioStates() {
-    const e = this.getRadios(), t = this.getEnabledRadios();
-    e.forEach((i) => {
+    const t = this.getRadios(), e = this.getEnabledRadios();
+    t.forEach((i) => {
       const s = i.value === this._value;
-      i.checked = s, s || !this._value && t[0] === i ? i.setAttribute("tabindex", "0") : i.setAttribute("tabindex", "-1");
+      i.checked = s, s || !this._value && e[0] === i ? i.setAttribute("tabindex", "0") : i.setAttribute("tabindex", "-1");
     });
   }
-  selectRadio(e) {
-    this._disabled || (this._value = e, this.setAttribute("value", e), this.syncRadioStates(), this.hasAttribute("aria-invalid") && this.removeAttribute("aria-invalid"), this.emit("change", { value: e }), this.emit("a11y-radiogroup-change", { value: e }));
+  selectRadio(t) {
+    this._disabled || (this._value = t, this.setAttribute("value", t), this.syncRadioStates(), this.hasAttribute("aria-invalid") && this.removeAttribute("aria-invalid"), this.emit("change", { value: t }), this.emit("a11y-radiogroup-change", { value: t }));
   }
   // ===== Attribute Changes =====
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
         case "value":
           this._value = i || "", this.syncRadioStates();
           break;
@@ -4084,11 +4203,11 @@ class Q extends c {
       }
   }
 }
-class Z extends c {
+class et extends d {
   constructor() {
-    super(...arguments), this._value = "", this._checked = !1, this._disabled = !1, this._discoverable = !0, this.handleClick = (e) => {
+    super(...arguments), this._value = "", this._checked = !1, this._disabled = !1, this._discoverable = !0, this.handleClick = (t) => {
       if (this._disabled) {
-        e.preventDefault();
+        t.preventDefault();
         return;
       }
       this.dispatchEvent(
@@ -4098,19 +4217,19 @@ class Z extends c {
           composed: !0
         })
       );
-      const t = this.getAttribute("label") || this._value;
-      p(`${t} selected`);
-    }, this.handleKeyDown = (e) => {
-      if (!this._disabled && e.key === "Enter") {
-        e.preventDefault(), this.dispatchEvent(
+      const e = this.getAttribute("label") || this._value;
+      p(`${e} selected`);
+    }, this.handleKeyDown = (t) => {
+      if (!this._disabled && t.key === "Enter") {
+        t.preventDefault(), this.dispatchEvent(
           new CustomEvent("radio-select", {
             detail: { value: this._value },
             bubbles: !0,
             composed: !0
           })
         );
-        const t = this.getAttribute("label") || this._value;
-        p(`${t} selected`);
+        const e = this.getAttribute("label") || this._value;
+        p(`${e} selected`);
       }
     };
   }
@@ -4121,41 +4240,41 @@ class Z extends c {
   get value() {
     return this._value;
   }
-  set value(e) {
-    this._value = e, this.setAttribute("value", e);
+  set value(t) {
+    this._value = t, this.setAttribute("value", t);
   }
   get checked() {
     return this._checked;
   }
-  set checked(e) {
-    const t = !!e;
-    this._checked !== t && (this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.setAttribute("aria-checked", String(t)), this.updateVisual());
+  set checked(t) {
+    const e = !!t;
+    this._checked !== e && (this._checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.setAttribute("aria-checked", String(e)), this.updateVisual());
   }
   get disabled() {
     return this._disabled;
   }
-  set disabled(e) {
-    const t = !!e;
-    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  set disabled(t) {
+    const e = !!t;
+    this._disabled !== e && (this._disabled = e, e ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
   }
   get discoverable() {
     return this._discoverable;
   }
-  set discoverable(e) {
-    let t;
-    typeof e == "string" ? t = e !== "false" && e !== "0" : t = !!e, this._discoverable !== t && (this._discoverable = t, t ? this.setAttribute("discoverable", "") : this.removeAttribute("discoverable"));
+  set discoverable(t) {
+    let e;
+    typeof t == "string" ? e = t !== "false" && t !== "0" : e = !!t, this._discoverable !== e && (this._discoverable = e, e ? this.setAttribute("discoverable", "") : this.removeAttribute("discoverable"));
   }
   // ===== Lifecycle =====
   setupAccessibility() {
     this.setAttribute("role", "radio"), this.setAttribute("aria-checked", "false"), this._value = this.getAttribute("value") || "", this._checked = this.hasAttribute("checked"), this._disabled = this.hasAttribute("disabled"), this._checked && this.setAttribute("aria-checked", "true"), this._disabled && this.setAttribute("aria-disabled", "true");
-    const e = this.getAttribute("discoverable");
-    (e === "false" || e === "0") && (this._discoverable = !1), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
+    const t = this.getAttribute("discoverable");
+    (t === "false" || t === "0") && (this._discoverable = !1), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" });
-    const e = this.shadowRoot, t = this.getAttribute("label") || "", i = this.getAttribute("hint") || "", s = t ? `${this._id}-label` : "", a = i ? `${this._id}-hint` : "";
-    s && this.setAttribute("aria-labelledby", s), a && this.setAttribute("aria-describedby", a), e.innerHTML = `
-      <style>${qe}</style>
+    const t = this.shadowRoot, e = this.getAttribute("label") || "", i = this.getAttribute("hint") || "", s = e ? `${this._id}-label` : "", a = i ? `${this._id}-hint` : "";
+    s && this.setAttribute("aria-labelledby", s), a && this.setAttribute("aria-describedby", a), t.innerHTML = `
+      <style>${Ot}</style>
       <div class="radio-wrapper" part="wrapper">
         <div class="radio-control" part="control">
           <input
@@ -4169,8 +4288,8 @@ class Z extends c {
             <div class="radio-dot" part="dot" aria-hidden="true"></div>
           </div>
         </div>
-        ${t || i ? `<div class="radio-content">
-                ${t ? `<span class="radio-label" id="${s}" part="label">${t}</span>` : ""}
+        ${e || i ? `<div class="radio-content">
+                ${e ? `<span class="radio-label" id="${s}" part="label">${e}</span>` : ""}
                 ${i ? `<span class="radio-hint" id="${a}" part="hint">${i}</span>` : ""}
               </div>` : ""}
         <slot></slot>
@@ -4186,17 +4305,17 @@ class Z extends c {
   // ===== Visual Update =====
   updateVisual() {
     if (!this.shadowRoot) return;
-    const e = this.shadowRoot.querySelector(".radio-dot");
-    e && (e.style.opacity = this._checked ? "1" : "0", e.style.transform = this._checked ? "scale(1)" : "scale(0)");
-    const t = this.shadowRoot.querySelector(
+    const t = this.shadowRoot.querySelector(".radio-dot");
+    t && (t.style.opacity = this._checked ? "1" : "0", t.style.transform = this._checked ? "scale(1)" : "scale(0)");
+    const e = this.shadowRoot.querySelector(
       ".radio-circle"
     );
-    t && (this._checked ? (t.style.background = "var(--compa11y-radio-checked-bg, #0066cc)", t.style.borderColor = "var(--compa11y-radio-checked-border, #0066cc)") : (t.style.background = "var(--compa11y-radio-bg, white)", t.style.borderColor = ""));
+    e && (this._checked ? (e.style.background = "var(--compa11y-radio-checked-bg, #0066cc)", e.style.borderColor = "var(--compa11y-radio-checked-border, #0066cc)") : (e.style.background = "var(--compa11y-radio-bg, white)", e.style.borderColor = ""));
   }
   // ===== Attribute Changes =====
-  attributeChangedCallback(e, t, i) {
-    if (t !== i)
-      switch (e) {
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
         case "value":
           this._value = i || "";
           break;
@@ -4216,93 +4335,233 @@ class Z extends c {
       }
   }
 }
-u("a11y-radio-group", Q);
-u("a11y-radio", Z);
+c("a11y-radio-group", tt);
+c("a11y-radio", et);
+class it extends d {
+  constructor() {
+    super(...arguments), this._toasts = [], this._counter = 0, this._containerEl = null, this._maxToasts = 5, this._handleClick = (t) => {
+      var a;
+      const e = t.target, i = e.getAttribute("data-close-id");
+      if (i) {
+        this.remove(i);
+        return;
+      }
+      const s = e.getAttribute("data-action-id");
+      if (s) {
+        const r = this._toasts.find((l) => l.id === s);
+        (a = r == null ? void 0 : r.action) == null || a.onClick(), this.remove(s);
+      }
+    };
+  }
+  static get observedAttributes() {
+    return ["position", "duration", "max-toasts", "label"];
+  }
+  get position() {
+    return this.getAttribute("position") || "bottom-right";
+  }
+  get duration() {
+    const t = this.getAttribute("duration");
+    return t ? parseInt(t, 10) : 5e3;
+  }
+  get maxToasts() {
+    const t = this.getAttribute("max-toasts");
+    return t ? parseInt(t, 10) : 5;
+  }
+  get label() {
+    return this.getAttribute("label") || "Notifications";
+  }
+  setupAccessibility() {
+  }
+  render() {
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${Rt}</style>
+      <div
+        class="toast-container"
+        role="region"
+        aria-label="${this.label}"
+        aria-live="polite"
+        aria-relevant="additions removals"
+      ></div>
+    `, this._containerEl = t.querySelector(".toast-container");
+  }
+  setupEventListeners() {
+    var t;
+    (t = this._containerEl) == null || t.addEventListener("click", this._handleClick);
+  }
+  cleanupEventListeners() {
+    var t;
+    (t = this._containerEl) == null || t.removeEventListener("click", this._handleClick);
+    for (const e of this._toasts)
+      e.timerId && clearTimeout(e.timerId);
+    this._toasts = [];
+  }
+  onAttributeChange(t, e, i) {
+    t === "max-toasts" && i && (this._maxToasts = parseInt(i, 10)), t === "label" && this._containerEl && this._containerEl.setAttribute("aria-label", i || "Notifications");
+  }
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+  /**
+   * Add a toast notification. Returns the toast ID.
+   */
+  add(t) {
+    const e = `toast-${++this._counter}`, i = t.duration ?? this.duration, s = {
+      id: e,
+      type: t.type || "info",
+      title: t.title,
+      description: t.description,
+      duration: i,
+      action: t.action,
+      timerId: null,
+      remaining: i,
+      startTime: Date.now()
+    };
+    for (this._toasts.push(s); this._toasts.length > this._maxToasts; ) {
+      const a = this._toasts.shift();
+      a && (a.timerId && clearTimeout(a.timerId), this._removeElement(a.id));
+    }
+    return this._renderToast(s), this._startTimer(s), this.emit("a11y-toast-add", { id: e, ...t }), e;
+  }
+  /**
+   * Remove a toast by ID.
+   */
+  remove(t) {
+    const e = this._toasts.findIndex((s) => s.id === t);
+    if (e === -1) return;
+    const i = this._toasts[e];
+    i.timerId && clearTimeout(i.timerId), this._toasts.splice(e, 1), this._removeElement(t), this.emit("a11y-toast-remove", { id: t });
+  }
+  /**
+   * Remove all toasts.
+   */
+  clear() {
+    for (const t of this._toasts)
+      t.timerId && clearTimeout(t.timerId);
+    this._toasts = [], this._containerEl && (this._containerEl.innerHTML = "");
+  }
+  // ---------------------------------------------------------------------------
+  // Internal
+  // ---------------------------------------------------------------------------
+  _renderToast(t) {
+    if (!this._containerEl) return;
+    const e = t.type === "error" || t.type === "warning", i = document.createElement("div");
+    i.className = "toast", i.setAttribute("data-toast-id", t.id), i.setAttribute("data-type", t.type), i.setAttribute("role", e ? "alert" : "status"), i.setAttribute("aria-atomic", "true"), i.setAttribute("tabindex", "0");
+    let s = '<div class="toast-content">';
+    t.title && (s += `<div class="toast-title">${this._escapeHtml(t.title)}</div>`), t.description && (s += `<div class="toast-description">${this._escapeHtml(t.description)}</div>`), t.action && (s += `<button type="button" class="toast-action" data-action-id="${t.id}" tabindex="0">${this._escapeHtml(t.action.label)}</button>`), s += "</div>", s += `<button type="button" class="toast-close" aria-label="Dismiss" data-close-id="${t.id}" tabindex="0">×</button>`, i.innerHTML = s, i.addEventListener("mouseenter", () => this._pauseTimer(t)), i.addEventListener("mouseleave", () => this._resumeTimer(t)), i.addEventListener("keydown", (a) => {
+      a.key === "Escape" && this.remove(t.id);
+    }), this._containerEl.appendChild(i);
+  }
+  _removeElement(t) {
+    var i;
+    const e = (i = this._containerEl) == null ? void 0 : i.querySelector(
+      `[data-toast-id="${t}"]`
+    );
+    e == null || e.remove();
+  }
+  _startTimer(t) {
+    t.duration !== 0 && (t.startTime = Date.now(), t.timerId = setTimeout(() => {
+      this.remove(t.id);
+    }, t.remaining));
+  }
+  _pauseTimer(t) {
+    t.timerId && (clearTimeout(t.timerId), t.timerId = null, t.remaining -= Date.now() - t.startTime);
+  }
+  _resumeTimer(t) {
+    this._startTimer(t);
+  }
+  _escapeHtml(t) {
+    const e = document.createElement("div");
+    return e.textContent = t, e.innerHTML;
+  }
+}
+c("a11y-toast", it);
 if (typeof window < "u") {
   const n = () => {
-    R(), T();
+    B(), H();
   };
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n(), window.compa11y = {
     // Components (classes)
-    A11yDialog: M,
-    A11yMenu: K,
-    A11yTabs: F,
-    A11yCombobox: N,
-    A11ySwitch: P,
-    A11ySelect: j,
-    A11yInput: U,
-    A11yTextarea: Y,
-    A11yButton: G,
-    A11yListbox: W,
-    A11yOption: V,
-    A11yOptgroup: X,
-    A11yCheckbox: O,
-    A11yCheckboxGroup: J,
-    A11yRadioGroup: Q,
-    A11yRadio: Z,
+    A11yDialog: N,
+    A11yMenu: F,
+    A11yTabs: P,
+    A11yCombobox: j,
+    A11ySwitch: U,
+    A11ySelect: Y,
+    A11yInput: G,
+    A11yTextarea: V,
+    A11yButton: X,
+    A11yListbox: Q,
+    A11yOption: J,
+    A11yOptgroup: W,
+    A11yCheckbox: R,
+    A11yCheckboxGroup: Z,
+    A11yRadioGroup: tt,
+    A11yRadio: et,
+    A11yToast: it,
     // Announcer utilities
-    initAnnouncer: R,
+    initAnnouncer: B,
     announce: v,
     announcePolite: p,
-    announceAssertive: D,
-    announceStatus: ge,
-    announceError: pe,
+    announceAssertive: O,
+    announceStatus: ft,
+    announceError: vt,
     // Focus utilities
-    initFocusVisible: T,
-    createFocusTrap: be,
-    createFocusScope: ue,
-    createRovingTabindex: ce,
+    initFocusVisible: H,
+    createFocusTrap: gt,
+    createFocusScope: mt,
+    createRovingTabindex: pt,
     // Keyboard utilities
-    createKeyboardManager: de,
-    KeyboardPatterns: he,
+    createKeyboardManager: bt,
+    KeyboardPatterns: ut,
     createTypeAhead: q,
     // ARIA utilities
-    aria: ne,
-    buildAriaProps: le,
-    hasAccessibleName: oe,
+    aria: ct,
+    buildAriaProps: dt,
+    hasAccessibleName: ht,
     // Platform detection
-    isBrowser: re,
-    prefersReducedMotion: ae,
-    prefersHighContrast: se,
-    prefersDarkMode: ie
+    isBrowser: nt,
+    prefersReducedMotion: lt,
+    prefersHighContrast: ot,
+    prefersDarkMode: rt
   };
 }
 export {
-  G as A11yButton,
-  O as A11yCheckbox,
-  J as A11yCheckboxGroup,
-  N as A11yCombobox,
-  M as A11yDialog,
-  U as A11yInput,
-  W as A11yListbox,
-  K as A11yMenu,
-  X as A11yOptgroup,
-  V as A11yOption,
-  Z as A11yRadio,
-  Q as A11yRadioGroup,
-  j as A11ySelect,
-  P as A11ySwitch,
-  F as A11yTabs,
-  Y as A11yTextarea,
-  He as KeyboardPatterns,
-  Me as announce,
-  Ke as announceAssertive,
-  Fe as announceError,
-  Ne as announcePolite,
-  Pe as announceStatus,
-  je as aria,
-  Ue as buildAriaProps,
-  Ye as createFocusScope,
-  Ge as createFocusTrap,
-  Xe as createKeyboardManager,
-  Ve as createRovingTabindex,
-  We as createTypeAhead,
-  Je as hasAccessibleName,
-  Qe as initAnnouncer,
-  Ze as initFocusVisible,
-  et as isBrowser,
-  tt as prefersDarkMode,
-  it as prefersHighContrast,
-  st as prefersReducedMotion
+  X as A11yButton,
+  R as A11yCheckbox,
+  Z as A11yCheckboxGroup,
+  j as A11yCombobox,
+  N as A11yDialog,
+  G as A11yInput,
+  Q as A11yListbox,
+  F as A11yMenu,
+  W as A11yOptgroup,
+  J as A11yOption,
+  et as A11yRadio,
+  tt as A11yRadioGroup,
+  Y as A11ySelect,
+  U as A11ySwitch,
+  P as A11yTabs,
+  V as A11yTextarea,
+  it as A11yToast,
+  jt as KeyboardPatterns,
+  Ut as announce,
+  Yt as announceAssertive,
+  Gt as announceError,
+  Vt as announcePolite,
+  Xt as announceStatus,
+  Wt as aria,
+  Jt as buildAriaProps,
+  Qt as createFocusScope,
+  Zt as createFocusTrap,
+  te as createKeyboardManager,
+  ee as createRovingTabindex,
+  ie as createTypeAhead,
+  se as hasAccessibleName,
+  ae as initAnnouncer,
+  re as initFocusVisible,
+  oe as isBrowser,
+  le as prefersDarkMode,
+  ne as prefersHighContrast,
+  he as prefersReducedMotion
 };
-//# sourceMappingURL=compa11y.js.map