@compa11y/web 0.1.9 → 0.1.11

package/dist/compa11y.js

@@ -1,8 +1,8 @@
-import { generateId as dt, announce as v, announcePolite as p, createTypeAhead as q, announceAssertive as O, createComponentWarnings as N, prefersDarkMode as ct, prefersHighContrast as ut, prefersReducedMotion as bt, isBrowser as pt, hasAccessibleName as mt, buildAriaProps as gt, aria as vt, KeyboardPatterns as ft, createKeyboardManager as _t, createRovingTabindex as yt, createFocusScope as xt, createFocusTrap as Et, initFocusVisible as H, announceError as At, announceStatus as kt, initAnnouncer as B } from "@compa11y/core";
-import { KeyboardPatterns as Zt, announce as te, announceAssertive as ee, announceError as ie, announcePolite as se, announceStatus as ae, aria as re, buildAriaProps as oe, createFocusScope as le, createFocusTrap as ne, createKeyboardManager as he, createRovingTabindex as de, createTypeAhead as ce, hasAccessibleName as ue, initAnnouncer as be, initFocusVisible as pe, isBrowser as me, prefersDarkMode as ge, prefersHighContrast as ve, prefersReducedMotion as fe } from "@compa11y/core";
-class h extends HTMLElement {
+import { generateId as kt, announce as v, announcePolite as f, createTypeAhead as O, announceAssertive as R, createComponentWarnings as $, prefersDarkMode as wt, prefersHighContrast as St, prefersReducedMotion as Lt, isBrowser as $t, hasAccessibleName as It, buildAriaProps as Ct, aria as Tt, KeyboardPatterns as zt, createKeyboardManager as Dt, createRovingTabindex as qt, createFocusScope as Ot, createFocusTrap as Rt, initFocusVisible as B, announceError as Ht, announceStatus as Bt, initAnnouncer as M } from "@compa11y/core";
+import { KeyboardPatterns as ke, announce as we, announceAssertive as Se, announceError as Le, announcePolite as $e, announceStatus as Ie, aria as Ce, buildAriaProps as Te, createFocusScope as ze, createFocusTrap as De, createKeyboardManager as qe, createRovingTabindex as Oe, createTypeAhead as Re, hasAccessibleName as He, initAnnouncer as Be, initFocusVisible as Me, isBrowser as Ke, prefersDarkMode as Fe, prefersHighContrast as Pe, prefersReducedMotion as Ne } from "@compa11y/core";
+class u extends HTMLElement {
   constructor() {
-    super(), this._internals = null, this._id = dt(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), this._internals = null, this._id = kt(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
   }
   /**
    * Standard observed attributes
@@ -74,10 +74,10 @@ class h extends HTMLElement {
     return (i == null ? void 0 : i.assignedElements()) ?? [];
   }
 }
-function d(n, t) {
-  customElements.get(n) || customElements.define(n, t);
+function b(l, t) {
+  customElements.get(l) || customElements.define(l, t);
 }
-const F = `
+const V = `
   position: absolute;
   width: 1px;
   height: 1px;
@@ -87,7 +87,7 @@ const F = `
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
-`, T = `
+`, z = `
   appearance: none;
   background: none;
   border: none;
@@ -96,13 +96,13 @@ const F = `
   font: inherit;
   color: inherit;
   cursor: pointer;
-`, wt = `
+`, G = `
   :host(:focus-visible),
   :focus-visible {
     outline: 2px solid var(--compa11y-focus-color, #0066cc);
     outline-offset: 2px;
   }
-`, u = `
+`, g = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -118,9 +118,9 @@ const F = `
     box-sizing: inherit;
   }
 
-  ${wt}
-`, $t = `
-  ${u}
+  ${G}
+`, Mt = `
+  ${g}
 
   :host {
     position: fixed;
@@ -158,8 +158,8 @@ const F = `
     margin: 0 0 1rem 0;
     color: var(--compa11y-dialog-description-color, #666);
   }
-`, Lt = `
-  ${u}
+`, Kt = `
+  ${g}
 
   :host {
     position: relative;
@@ -210,8 +210,8 @@ const F = `
     margin: 0.25rem 0;
     background: var(--compa11y-menu-separator-color, #e0e0e0);
   }
-`, St = `
-  ${u}
+`, Ft = `
+  ${g}
 
   .tablist {
     display: flex;
@@ -226,7 +226,7 @@ const F = `
   }
 
   ::slotted([role="tab"]) {
-    ${T}
+    ${z}
     padding: var(--compa11y-tab-padding, 0.75rem 1rem);
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
@@ -256,8 +256,8 @@ const F = `
   ::slotted([role="tabpanel"][hidden]) {
     display: none;
   }
-`, It = `
-  ${u}
+`, Pt = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -315,7 +315,7 @@ const F = `
   }
 
   .clear-button {
-    ${T}
+    ${z}
     position: absolute;
     right: 1.5rem;
     width: 1.25rem;
@@ -397,8 +397,8 @@ const F = `
   .options-source {
     display: none;
   }
-`, Ct = `
-  ${u}
+`, Nt = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -527,8 +527,8 @@ const F = `
   .options-source {
     display: none;
   }
-`, Tt = `
-  ${u}
+`, jt = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -631,8 +631,8 @@ const F = `
     opacity: 0.5;
     cursor: not-allowed;
   }
-`, zt = `
-  ${u}
+`, Yt = `
+  ${g}
 
   :host {
     display: block;
@@ -710,8 +710,8 @@ const F = `
     color: var(--compa11y-input-error-color, #ef4444);
     font-size: var(--compa11y-input-error-size, 0.8125rem);
   }
-`, Dt = `
-  ${u}
+`, Vt = `
+  ${g}
 
   :host {
     display: block;
@@ -791,8 +791,8 @@ const F = `
     color: var(--compa11y-textarea-error-color, #ef4444);
     font-size: var(--compa11y-textarea-error-size, 0.8125rem);
   }
-`, qt = `
-  ${u}
+`, Gt = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -906,8 +906,8 @@ const F = `
     border-radius: 50%;
     animation: compa11y-spin 0.6s linear infinite;
   }
-`, Ot = `
-  ${u}
+`, Ut = `
+  ${g}
 
   :host {
     display: block;
@@ -940,8 +940,8 @@ const F = `
     max-height: none;
     overflow-y: visible;
   }
-`, Rt = `
-  ${u}
+`, Xt = `
+  ${g}
 
   :host {
     display: block;
@@ -989,8 +989,8 @@ const F = `
   :host([aria-selected="true"]) .check-mark {
     visibility: visible;
   }
-`, Ht = `
-  ${u}
+`, Wt = `
+  ${g}
 
   :host {
     display: block;
@@ -1008,8 +1008,8 @@ const F = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Bt = `
-  ${u}
+`, Jt = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -1171,8 +1171,8 @@ const F = `
       color: HighlightText;
     }
   }
-`, Mt = `
-  ${u}
+`, Qt = `
+  ${g}
 
   :host {
     display: block;
@@ -1213,8 +1213,8 @@ const F = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Kt = `
-  ${u}
+`, Zt = `
+  ${g}
 
   :host {
     display: block;
@@ -1266,8 +1266,8 @@ const F = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Nt = `
-  ${u}
+`, te = `
+  ${g}
 
   :host {
     display: inline-block;
@@ -1386,8 +1386,8 @@ const F = `
       background: HighlightText;
     }
   }
-`, Ft = `
-  ${u}
+`, ee = `
+  ${g}
 
   :host {
     position: fixed;
@@ -1455,7 +1455,7 @@ const F = `
   }
 
   .toast-close {
-    ${T}
+    ${z}
     flex-shrink: 0;
     width: 1.5rem;
     height: 1.5rem;
@@ -1479,7 +1479,7 @@ const F = `
   }
 
   .toast-action {
-    ${T}
+    ${z}
     margin-top: 0.375rem;
     font-size: var(--compa11y-toast-action-size, 0.8125rem);
     font-weight: 500;
@@ -1495,15 +1495,258 @@ const F = `
     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, P = "";
-function Pt() {
-  L === 0 && (P = document.body.style.overflow, document.body.style.overflow = "hidden"), L++;
+`, ie = `
+  a11y-accordion {
+    display: block;
+    border: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);
+    border-radius: var(--compa11y-accordion-radius, 6px);
+    overflow: hidden;
+  }
+
+  a11y-accordion h1,
+  a11y-accordion h2,
+  a11y-accordion h3,
+  a11y-accordion h4,
+  a11y-accordion h5,
+  a11y-accordion h6 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a11y-accordion [data-accordion-trigger] {
+    appearance: none;
+    -webkit-appearance: none;
+    background: var(--compa11y-accordion-trigger-bg, #ffffff);
+    border: none;
+    border-bottom: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);
+    padding: var(--compa11y-accordion-trigger-padding, 1rem);
+    font: inherit;
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--compa11y-accordion-trigger-color, #1a1a1a);
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    transition: background 0.15s ease;
+  }
+
+  a11y-accordion [data-accordion-trigger]:hover {
+    background: var(--compa11y-accordion-trigger-hover-bg, #f9f9f9);
+  }
+
+  a11y-accordion [data-accordion-trigger]:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: -2px;
+  }
+
+  a11y-accordion [data-accordion-trigger][aria-disabled="true"],
+  a11y-accordion [data-accordion-trigger]:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  a11y-accordion [data-accordion-trigger]::after {
+    content: '';
+    flex-shrink: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg) translateY(-2px);
+    transition: transform 0.2s ease;
+  }
+
+  a11y-accordion [data-accordion-trigger][aria-expanded="true"]::after {
+    transform: rotate(-135deg) translateY(-2px);
+  }
+
+  a11y-accordion [data-accordion-panel] {
+    padding: var(--compa11y-accordion-content-padding, 1rem);
+    background: var(--compa11y-accordion-content-bg, #ffffff);
+    border-bottom: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);
+  }
+
+  a11y-accordion [data-accordion-panel][hidden] {
+    display: none;
+  }
+
+  a11y-accordion > *:last-child [data-accordion-trigger],
+  a11y-accordion > [data-accordion-panel]:last-child {
+    border-bottom: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    a11y-accordion [data-accordion-trigger],
+    a11y-accordion [data-accordion-trigger]::after {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    a11y-accordion {
+      border: 2px solid ButtonText;
+    }
+    a11y-accordion [data-accordion-trigger] {
+      border-bottom: 1px solid ButtonText;
+      forced-color-adjust: none;
+    }
+  }
+`, se = `
+  /* ── Host ── */
+  a11y-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* ── Table element ── */
+  a11y-table table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: 0.9375rem;
+    color: var(--compa11y-table-color, #1a1a1a);
+    background: var(--compa11y-table-bg, #ffffff);
+  }
+
+  /* ── Caption ── */
+  a11y-table caption {
+    caption-side: top;
+    text-align: left;
+    font-weight: 600;
+    font-size: 1rem;
+    padding-bottom: 0.5rem;
+    color: var(--compa11y-table-caption-color, #1a1a1a);
+  }
+
+  /* ── Header cells ── */
+  a11y-table th {
+    text-align: left;
+    font-weight: 600;
+    padding: var(--compa11y-table-cell-padding, 0.625rem 0.875rem);
+    background: var(--compa11y-table-head-bg, #f5f5f5);
+    border-bottom: 2px solid var(--compa11y-table-border-color, #d0d0d0);
+    white-space: nowrap;
+  }
+
+  /* ── Data cells ── */
+  a11y-table td {
+    padding: var(--compa11y-table-cell-padding, 0.625rem 0.875rem);
+    border-bottom: 1px solid var(--compa11y-table-border-color, #e8e8e8);
+    vertical-align: top;
+  }
+
+  /* ── Row hover ── */
+  a11y-table tbody tr:hover {
+    background: var(--compa11y-table-row-hover-bg, #fafafa);
+  }
+
+  /* ── Selected row ── */
+  a11y-table tr[aria-selected="true"] {
+    background: var(--compa11y-table-selected-bg, #e8f0fe);
+  }
+  a11y-table tr[aria-selected="true"]:hover {
+    background: var(--compa11y-table-selected-hover-bg, #dde7fd);
+  }
+
+  /* ── Sort button ── */
+  a11y-table [data-sort-btn] {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375em;
+    text-align: left;
+    width: 100%;
+  }
+
+  a11y-table [data-sort-btn]:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  a11y-table [data-sort-icon] {
+    font-size: 0.75em;
+    opacity: 0.6;
+    flex-shrink: 0;
+  }
+
+  /* ── Select checkboxes ── */
+  a11y-table [data-select-cb] {
+    cursor: pointer;
+    width: 1rem;
+    height: 1rem;
+  }
+  a11y-table [data-select-cb]:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* ── Empty / Loading cells ── */
+  a11y-table [data-empty-cell],
+  a11y-table [data-loading-cell] {
+    text-align: center;
+    padding: 2rem 1rem;
+    color: var(--compa11y-table-muted-color, #6b6b6b);
+    font-style: italic;
+  }
+
+  /* ── Footer ── */
+  a11y-table tfoot td,
+  a11y-table tfoot th {
+    background: var(--compa11y-table-foot-bg, #f5f5f5);
+    border-top: 2px solid var(--compa11y-table-border-color, #d0d0d0);
+    border-bottom: none;
+    font-weight: 600;
+  }
+
+  /* ── Reduced motion ── */
+  @media (prefers-reduced-motion: reduce) {
+    a11y-table tr,
+    a11y-table td,
+    a11y-table th {
+      transition: none;
+    }
+  }
+
+  /* ── Windows High Contrast ── */
+  @media (forced-colors: active) {
+    a11y-table table {
+      border: 1px solid ButtonText;
+      forced-color-adjust: none;
+    }
+    a11y-table th,
+    a11y-table td {
+      border: 1px solid ButtonText;
+    }
+    a11y-table tr[aria-selected="true"] {
+      outline: 2px solid Highlight;
+    }
+    a11y-table [data-sort-btn]:focus-visible {
+      outline: 2px solid Highlight;
+    }
+  }
+`, K = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let L = 0, U = "";
+function ae() {
+  L === 0 && (U = document.body.style.overflow, document.body.style.overflow = "hidden"), L++;
 }
-function jt() {
-  L--, L <= 0 && (L = 0, document.body.style.overflow = P);
+function re() {
+  L--, L <= 0 && (L = 0, document.body.style.overflow = U);
 }
-class j extends h {
+class X extends u {
   constructor() {
     super(...arguments), this._open = !1, this._previouslyFocused = null, this._triggerElement = null, this.handleTriggerClick = () => {
       this.open = !0;
@@ -1522,13 +1765,13 @@ class j extends h {
           if (i.length === 0) return;
           const s = ((e = this.shadowRoot) == null ? void 0 : e.activeElement) || document.activeElement;
           let a = i.findIndex(
-            (o) => o === s
+            (n) => n === s
           );
           a === -1 && (a = t.shiftKey ? 0 : i.length - 1);
           let r;
           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();
+          const o = i[r];
+          o && o.focus();
         }
       }
     };
@@ -1548,7 +1791,7 @@ class j extends h {
   render() {
     const t = this.attachShadow({ mode: "open" }), e = `${this._id}-title`, i = `${this._id}-desc`;
     t.innerHTML = `
-      <style>${$t}</style>
+      <style>${Mt}</style>
       <div class="overlay" part="overlay"></div>
       <div
         class="dialog"
@@ -1604,7 +1847,7 @@ class j extends h {
    */
   getFocusableElements() {
     const t = [];
-    return this.querySelectorAll(M).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(M).forEach((s) => {
+    return this.querySelectorAll(K).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(K).forEach((s) => {
       s.classList.contains("overlay") || t.push(s);
     }), t;
   }
@@ -1612,11 +1855,11 @@ class j extends h {
     this._previouslyFocused = document.activeElement, this.style.display = "flex", requestAnimationFrame(() => {
       const e = this.getFocusableElements()[0];
       e && e.focus();
-    }), Pt(), v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
+    }), ae(), v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
   }
   hideDialog() {
     var t;
-    this.style.display = "none", jt(), (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
+    this.style.display = "none", re(), (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
   }
   /**
    * Programmatic open
@@ -1631,8 +1874,8 @@ class j extends h {
     this.open = !1;
   }
 }
-d("a11y-dialog", j);
-class Y extends h {
+b("a11y-dialog", X);
+class W extends u {
   constructor() {
     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(
@@ -1722,7 +1965,7 @@ class Y extends h {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${Lt}</style>
+      <style>${Kt}</style>
       <slot name="trigger"></slot>
       <div
         class="menu-content"
@@ -1797,8 +2040,8 @@ class Y extends h {
     this.open = !this._open;
   }
 }
-d("a11y-menu", Y);
-class U extends h {
+b("a11y-menu", W);
+class J extends u {
   constructor() {
     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(
@@ -1816,7 +2059,7 @@ class U extends h {
         i !== -1 && e.getAttribute("aria-disabled") !== "true" && (this._focusedIndex = i, this.selectTab(i));
       }
     }, this.handleKeyDown = (t) => {
-      var l;
+      var o;
       if (t.target.getAttribute("role") !== "tab") return;
       const i = this.orientation === "horizontal", s = i ? "ArrowRight" : "ArrowDown", a = i ? "ArrowLeft" : "ArrowUp";
       let r = this._focusedIndex;
@@ -1840,7 +2083,7 @@ class U extends h {
         default:
           return;
       }
-      this._focusedIndex = r, (l = this._tabs[r]) == null || l.focus(), this.activationMode === "automatic" && this.selectTab(r);
+      this._focusedIndex = r, (o = this._tabs[r]) == null || o.focus(), this.activationMode === "automatic" && this.selectTab(r);
     };
   }
   static get observedAttributes() {
@@ -1864,7 +2107,7 @@ class U extends h {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${St}</style>
+      <style>${Ft}</style>
       <div class="tablist" role="tablist" aria-orientation="${this.orientation}" part="tablist">
         <slot name="tab"></slot>
       </div>
@@ -1930,8 +2173,8 @@ class U extends h {
     );
   }
 }
-d("a11y-tabs", U);
-class V extends h {
+b("a11y-tabs", J);
+class Q extends u {
   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 t = Array.from(this.querySelectorAll("option"));
@@ -2023,7 +2266,7 @@ class V extends h {
   render() {
     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>${It}</style>
+      <style>${Pt}</style>
       <div class="combobox-wrapper" part="wrapper">
         <div class="input-wrapper" part="input-wrapper">
           <input
@@ -2066,11 +2309,11 @@ class V extends h {
     `, this._inputElement = t.querySelector("input"), this._listboxElement = t.querySelector(".listbox");
   }
   setupEventListeners() {
-    var i, s, a, r, l, o;
+    var i, s, a, r, o, n;
     (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 t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".clear-button");
+    const t = (o = this.shadowRoot) == null ? void 0 : o.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");
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector("slot");
     e == null || e.addEventListener("slotchange", this.updateOptions), this.updateOptions();
   }
   cleanupEventListeners() {
@@ -2156,8 +2399,8 @@ class V extends h {
     this.handleClear();
   }
 }
-d("a11y-combobox", V);
-class G extends h {
+b("a11y-combobox", Q);
+class Z extends u {
   constructor() {
     super(...arguments), this._checked = !1, this._button = null, this._label = null, this.handleClick = () => {
       this.toggle();
@@ -2219,7 +2462,7 @@ class G extends h {
   render() {
     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>${Tt}</style>
+      <style>${jt}</style>
       <div class="switch-wrapper size-${this.size}" part="wrapper">
         <button
           type="button"
@@ -2290,7 +2533,7 @@ class G extends h {
     if (this.disabled) return;
     this.checked = !this.checked;
     const t = this.label || this.getAttribute("aria-label") || "Switch";
-    p(`${t} ${this.checked ? "on" : "off"}`);
+    f(`${t} ${this.checked ? "on" : "off"}`);
   }
   /**
    * Public method to open/close programmatically
@@ -2299,8 +2542,8 @@ class G extends h {
     this.checked = t;
   }
 }
-d("a11y-switch", G);
-class X extends h {
+b("a11y-switch", Z);
+class tt extends u {
   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 t = Array.from(this.querySelectorAll("option"));
@@ -2309,7 +2552,7 @@ class X extends h {
         label: e.textContent || "",
         disabled: e.hasAttribute("disabled"),
         element: e
-      })), this._typeAhead = q(
+      })), this._typeAhead = O(
         this._options.map((e) => e.label),
         { timeout: 500 }
       ), this.renderOptions(), this.updateTriggerText();
@@ -2400,7 +2643,7 @@ class X extends h {
   render() {
     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>${Ct}</style>
+      <style>${Nt}</style>
       <div class="select-wrapper" part="wrapper">
         <button
           id="${e}"
@@ -2551,8 +2794,8 @@ class X extends h {
     this.open = !1;
   }
 }
-d("a11y-select", X);
-class W extends h {
+b("a11y-select", tt);
+class et extends u {
   constructor() {
     super(...arguments), this._value = "", this._inputEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (t) => {
       const e = t.target;
@@ -2632,41 +2875,41 @@ class W extends h {
     ));
   }
   render() {
-    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", c = 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}"` : "", ht = !r && I ? `aria-labelledby="${I}"` : r ? `aria-labelledby="${i}"` : "";
+    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") || "", o = this.getAttribute("hint") || "", n = this.getAttribute("error") || "", d = this.getAttribute("type") || "text", c = this.getAttribute("placeholder") || "", h = this.getAttribute("name") || "", p = this.getAttribute("autocomplete") || "", m = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), y = this.getAttribute("pattern"), w = this.getAttribute("inputmode"), I = this.getAttribute("aria-label") || "", C = this.getAttribute("aria-labelledby") || "", T = this.disabled, A = this.readOnly, x = this.required, E = !!n, k = [];
+    o && k.push(s), E && k.push(a);
+    const D = k.length ? `aria-describedby="${k.join(" ")}"` : "", S = !r && I ? `aria-label="${I}"` : "", Et = !r && C ? `aria-labelledby="${C}"` : r ? `aria-labelledby="${i}"` : "";
     this.setAttribute("data-error", E ? "true" : "false"), t.innerHTML = `
-      <style>${zt}</style>
+      <style>${Yt}</style>
       <div class="input-wrapper" part="wrapper">
         ${r ? `<label id="${i}" for="${e}" class="input-label" part="label">
-                ${r}${y ? '<span class="input-required" aria-hidden="true" part="required">*</span>' : ""}
+                ${r}${x ? '<span class="input-required" aria-hidden="true" part="required">*</span>' : ""}
               </label>` : ""}
         <input
           id="${e}"
-          type="${b}"
+          type="${d}"
           value="${this._value}"
           ${c ? `placeholder="${c}"` : ""}
-          ${m ? `name="${m}"` : ""}
-          ${g ? `autocomplete="${g}"` : ""}
-          ${f ? `maxlength="${f}"` : ""}
+          ${h ? `name="${h}"` : ""}
+          ${p ? `autocomplete="${p}"` : ""}
+          ${m ? `maxlength="${m}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
-          ${k ? `pattern="${k}"` : ""}
+          ${y ? `pattern="${y}"` : ""}
           ${w ? `inputmode="${w}"` : ""}
-          ${$}
-          ${ht}
-          ${z}
+          ${S}
+          ${Et}
+          ${D}
           ${E ? 'aria-invalid="true"' : ""}
-          ${y ? 'aria-required="true"' : ""}
-          ${C ? "disabled" : ""}
-          ${x ? "readonly" : ""}
+          ${x ? 'aria-required="true"' : ""}
+          ${T ? "disabled" : ""}
+          ${A ? "readonly" : ""}
           part="field"
         />
-        ${l ? `<div id="${s}" class="input-hint" part="hint">${l}</div>` : ""}
-        ${E ? `<div id="${a}" class="input-error" role="alert" part="error">${o}</div>` : ""}
+        ${o ? `<div id="${s}" class="input-hint" part="hint">${o}</div>` : ""}
+        ${E ? `<div id="${a}" class="input-error" role="alert" part="error">${n}</div>` : ""}
       </div>
     `, 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);
+    const q = this.getAttribute("value");
+    q && this._inputEl && (this._value = q, this._inputEl.value = q);
   }
   setupEventListeners() {
     var t, e, i, s;
@@ -2740,7 +2983,7 @@ class W extends h {
         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 = t;
         const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".input-wrapper");
-        r == null || r.appendChild(a), this._errorEl = a, O(t);
+        r == null || r.appendChild(a), this._errorEl = a, R(t);
       }
       this.updateAriaDescribedBy();
     } else
@@ -2793,8 +3036,8 @@ class W extends h {
     (t = this._inputEl) == null || t.select();
   }
 }
-d("a11y-input", W);
-class J extends h {
+b("a11y-input", et);
+class it extends u {
   constructor() {
     super(...arguments), this._value = "", this._textareaEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (t) => {
       const e = t.target;
@@ -2873,38 +3116,38 @@ class J extends h {
     ));
   }
   render() {
-    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", c = 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 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>${Dt}</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") || "", o = this.getAttribute("hint") || "", n = this.getAttribute("error") || "", d = this.getAttribute("rows") || "3", c = this.getAttribute("placeholder") || "", h = this.getAttribute("name") || "", p = this.getAttribute("autocomplete") || "", m = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), y = this.getAttribute("aria-label") || "", w = this.getAttribute("aria-labelledby") || "", I = this.disabled, C = this.readOnly, T = this.required, A = !!n, x = [];
+    o && x.push(s), A && x.push(a);
+    const E = x.length ? `aria-describedby="${x.join(" ")}"` : "", k = !r && y ? `aria-label="${y}"` : "", D = !r && w ? `aria-labelledby="${w}"` : r ? `aria-labelledby="${i}"` : "";
+    this.setAttribute("data-error", A ? "true" : "false"), t.innerHTML = `
+      <style>${Vt}</style>
       <div class="textarea-wrapper" part="wrapper">
         ${r ? `<label id="${i}" for="${e}" class="textarea-label" part="label">
-                ${r}${C ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
+                ${r}${T ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
               </label>` : ""}
         <textarea
           id="${e}"
-          rows="${b}"
+          rows="${d}"
           ${c ? `placeholder="${c}"` : ""}
-          ${m ? `name="${m}"` : ""}
-          ${g ? `autocomplete="${g}"` : ""}
-          ${f ? `maxlength="${f}"` : ""}
+          ${h ? `name="${h}"` : ""}
+          ${p ? `autocomplete="${p}"` : ""}
+          ${m ? `maxlength="${m}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
-          ${A}
-          ${z}
+          ${k}
+          ${D}
           ${E}
-          ${x ? 'aria-invalid="true"' : ""}
-          ${C ? 'aria-required="true"' : ""}
-          ${S ? "disabled" : ""}
-          ${I ? "readonly" : ""}
+          ${A ? 'aria-invalid="true"' : ""}
+          ${T ? 'aria-required="true"' : ""}
+          ${I ? "disabled" : ""}
+          ${C ? "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>` : ""}
+        ${o ? `<div id="${s}" class="textarea-hint" part="hint">${o}</div>` : ""}
+        ${A ? `<div id="${a}" class="textarea-error" role="alert" part="error">${n}</div>` : ""}
       </div>
     `, 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 = $);
+    const S = this.getAttribute("value");
+    S && this._textareaEl && (this._value = S, this._textareaEl.value = S);
   }
   setupEventListeners() {
     var t, e, i, s;
@@ -2975,7 +3218,7 @@ class J extends h {
         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 = t;
         const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".textarea-wrapper");
-        r == null || r.appendChild(a), this._errorEl = a, O(t);
+        r == null || r.appendChild(a), this._errorEl = a, R(t);
       }
       this.updateAriaDescribedBy();
     } else
@@ -3028,8 +3271,8 @@ class J extends h {
     (t = this._textareaEl) == null || t.select();
   }
 }
-d("a11y-textarea", J);
-class Q extends h {
+b("a11y-textarea", it);
+class st extends u {
   constructor() {
     super(...arguments), this._buttonEl = null, this.handleClick = (t) => {
       if (this.disabled || this.loading) {
@@ -3094,18 +3337,18 @@ class Q extends h {
     ));
   }
   render() {
-    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, c = r && !l;
+    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, o = this.discoverable, n = this.loading, d = r || n, c = r && !o;
     t.innerHTML = `
-      <style>${qt}</style>
+      <style>${Gt}</style>
       <button
         class="variant-${e} size-${i}"
         type="${s}"
         ${c ? "disabled" : ""}
-        ${b ? 'aria-disabled="true"' : ""}
-        ${o ? 'aria-busy="true"' : ""}
+        ${d ? 'aria-disabled="true"' : ""}
+        ${n ? 'aria-busy="true"' : ""}
         ${a ? `aria-label="${a}"` : ""}
         part="button"
-      >${o ? '<span class="button-spinner" aria-hidden="true" part="spinner"></span>' : ""}<slot></slot></button>
+      >${n ? '<span class="button-spinner" aria-hidden="true" part="spinner"></span>' : ""}<slot></slot></button>
     `, this._buttonEl = t.querySelector("button");
   }
   setupEventListeners() {
@@ -3185,8 +3428,8 @@ class Q extends h {
     (t = this._buttonEl) == null || t.click();
   }
 }
-d("a11y-button", Q);
-class Z extends h {
+b("a11y-button", st);
+class at extends u {
   constructor() {
     super(...arguments), this._label = "", this._disabled = !1;
   }
@@ -3213,7 +3456,7 @@ class Z extends h {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     const t = `${this._id}-label`;
     this.shadowRoot.innerHTML = `
-      <style>${Ht}</style>
+      <style>${Wt}</style>
       <div class="optgroup-wrapper" part="group">
         <div class="optgroup-label" part="label" id="${t}" role="presentation">
           ${this._label}
@@ -3244,7 +3487,7 @@ class Z extends h {
     }
   }
 }
-class tt extends h {
+class rt extends u {
   constructor() {
     super(...arguments), this._value = "", this._disabled = !1, this._selected = !1, this._discoverable = !0, this.handleClick = (t) => {
       if (this.effectivelyDisabled) {
@@ -3304,7 +3547,7 @@ class tt extends h {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>${Rt}</style>
+      <style>${Xt}</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>
@@ -3331,7 +3574,7 @@ class tt extends h {
     }
   }
 }
-class et extends h {
+class ot extends u {
   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;
@@ -3355,12 +3598,12 @@ class et extends h {
       if (this._disabled) return;
       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);
+      const i = this.getAllOptions(), s = i.find((o) => o.value === e);
       if (!s) return;
       const a = i.indexOf(s);
       this._focusedIndex = a, this.updateFocusHighlight(), this.selectOption(s), this.focus();
     }, this.handleKeyDown = (t) => {
-      var a, r, l;
+      var a, r, o;
       if (this._disabled && !this._discoverable) return;
       const e = this.getAllOptions();
       if (e.length === 0) return;
@@ -3387,15 +3630,15 @@ class et extends h {
             break;
           default:
             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 b = e.findIndex(
+              const n = (a = this._typeAhead) == null ? void 0 : a.type(t.key);
+              if (n) {
+                const d = e.findIndex(
                   (c) => {
-                    var m;
-                    return (((m = c.textContent) == null ? void 0 : m.trim()) || "") === o && !c.effectivelyDisabled;
+                    var h;
+                    return (((h = c.textContent) == null ? void 0 : h.trim()) || "") === n && !c.effectivelyDisabled;
                   }
                 );
-                b >= 0 && (i = b, s = !0);
+                d >= 0 && (i = d, s = !0);
               }
             }
             break;
@@ -3416,27 +3659,27 @@ class et extends h {
             break;
           default:
             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 b = e.findIndex(
+              const n = (r = this._typeAhead) == null ? void 0 : r.type(t.key);
+              if (n) {
+                const d = e.findIndex(
                   (c) => {
-                    var m;
-                    return (((m = c.textContent) == null ? void 0 : m.trim()) || "") === o && !c.effectivelyDisabled;
+                    var h;
+                    return (((h = c.textContent) == null ? void 0 : h.trim()) || "") === n && !c.effectivelyDisabled;
                   }
                 );
-                b >= 0 && (i = b, s = !0);
+                d >= 0 && (i = d, s = !0);
               }
             }
             break;
         }
       if (s && (t.preventDefault(), t.stopPropagation()), i !== null && i >= 0) {
         this._focusedIndex = i, this.updateFocusHighlight();
-        const o = e[i];
-        if (!this._multiple && o)
-          this.selectSingle(o);
-        else if (o) {
-          const b = ((l = o.textContent) == null ? void 0 : l.trim()) || o.value, c = this._values.has(o.value);
-          p(`${b}${c ? ", selected" : ""}`);
+        const n = e[i];
+        if (!this._multiple && n)
+          this.selectSingle(n);
+        else if (n) {
+          const d = ((o = n.textContent) == null ? void 0 : o.trim()) || n.value, c = this._values.has(n.value);
+          f(`${d}${c ? ", selected" : ""}`);
         }
       }
     };
@@ -3506,7 +3749,7 @@ class et extends h {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>${Ot}</style>
+      <style>${Ut}</style>
       <div class="listbox-wrapper" part="wrapper">
         <slot></slot>
       </div>
@@ -3577,31 +3820,31 @@ class et extends h {
     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`);
+      this.emit("change", { value: this._value, label: s }), this.emit("a11y-listbox-change", { value: this._value, label: s }), f(`${s} selected`);
     }
   }
   toggleOptionSelection(t) {
     var s;
     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`));
+    this._values.has(t.value) ? (this._values.delete(t.value), t.selected = !1, f(`${e} deselected`)) : (this._values.add(t.value), t.selected = !0, f(`${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(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);
+    for (let o = s; o <= a; o++) {
+      const n = i[o];
+      n && !n.effectivelyDisabled && (this._values.add(n.value), n.selected = !0);
     }
     const r = Array.from(this._values);
-    this.setAttribute("value", r.join(",")), this.emit("change", { value: r }), this.emit("a11y-listbox-change", { value: r }), p(`${a - s + 1} items selected`);
+    this.setAttribute("value", r.join(",")), this.emit("change", { value: r }), this.emit("a11y-listbox-change", { value: r }), f(`${a - s + 1} items selected`);
   }
   toggleSelectAll() {
     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) => {
+    t.every((s) => this._values.has(s.value)) ? (this._values.clear(), this.getAllOptions().forEach((s) => s.selected = !1), f("All deselected")) : (t.forEach((s) => {
       this._values.add(s.value), s.selected = !0;
-    }), p("All selected"));
+    }), f("All selected"));
     const i = Array.from(this._values);
     this.setAttribute("value", i.join(",")), this.emit("change", { value: i }), this.emit("a11y-listbox-change", { value: i });
   }
@@ -3613,7 +3856,7 @@ class et extends h {
         return ((i = e.textContent) == null ? void 0 : i.trim()) || "";
       }
     );
-    this._typeAhead = q(t, { timeout: 500 });
+    this._typeAhead = O(t, { timeout: 500 });
   }
   // ===== Attribute Changes =====
   onAttributeChange(t, e, i) {
@@ -3638,21 +3881,21 @@ class et extends h {
     }
   }
 }
-d("a11y-optgroup", Z);
-d("a11y-option", tt);
-d("a11y-listbox", et);
-const Yt = `<svg class="checkbox-check" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+b("a11y-optgroup", at);
+b("a11y-option", rt);
+b("a11y-listbox", ot);
+const oe = `<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>`, Ut = `<svg class="checkbox-dash" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+</svg>`, ne = `<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 R extends h {
+class H extends u {
   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 t = this.label || this.getAttribute("aria-label") || "Checkbox";
-      p(`${t} ${this._checked ? "checked" : "unchecked"}`);
+      f(`${t} ${this._checked ? "checked" : "unchecked"}`);
     };
   }
   static get observedAttributes() {
@@ -3763,11 +4006,11 @@ class R extends h {
     );
   }
   render() {
-    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"), c = 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}"` : "";
+    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, o = !!this.hint, n = !!this.error, d = this.getAttribute("aria-label"), c = this.getAttribute("name") || "", h = this.getAttribute("aria-describedby") || "", p = [];
+    h && p.push(h), o && p.push(s), n && p.push(a);
+    const m = p.length ? `aria-describedby="${p.join(" ")}"` : "", _ = !r && d ? `aria-label="${d}"` : "";
     t.innerHTML = `
-      <style>${Bt}</style>
+      <style>${Jt}</style>
       <div class="checkbox-wrapper size-${this.size}" part="wrapper">
         <div class="checkbox-control">
           <input
@@ -3779,20 +4022,20 @@ class R extends h {
             ${this._checked ? "checked" : ""}
             ${this.disabled ? "disabled" : ""}
             ${this.required ? 'required aria-required="true"' : ""}
-            ${f}
+            ${m}
             ${_}
-            ${o ? 'aria-invalid="true"' : ""}
+            ${n ? 'aria-invalid="true"' : ""}
             part="input"
           />
           <div class="checkbox-indicator" part="indicator" aria-hidden="true">
-            ${Yt}
-            ${Ut}
+            ${oe}
+            ${ne}
           </div>
         </div>
-        ${r || l || o ? `<div class="checkbox-content">
+        ${r || o || n ? `<div class="checkbox-content">
             ${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>` : ""}
+            ${o ? `<div id="${s}" class="checkbox-hint" part="hint">${this.hint}</div>` : ""}
+            ${n ? `<div id="${a}" class="checkbox-error" role="alert" part="error">${this.error}</div>` : ""}
           </div>` : ""}
       </div>
     `, this._input = t.querySelector("input"), this._input && this._indeterminate && (this._input.indeterminate = !0);
@@ -3857,7 +4100,7 @@ class R extends h {
     if (this.disabled) return;
     this._indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked;
     const t = this.label || this.getAttribute("aria-label") || "Checkbox";
-    p(`${t} ${this.checked ? "checked" : "unchecked"}`);
+    f(`${t} ${this.checked ? "checked" : "unchecked"}`);
   }
   /**
    * Set checked state programmatically
@@ -3866,11 +4109,11 @@ class R extends h {
     this.checked = t;
   }
 }
-class it extends h {
+class nt extends u {
   constructor() {
     super(...arguments), this._value = [], this.handleChildChange = (t) => {
       const e = t.target;
-      if (!(e instanceof R) || e === this) return;
+      if (!(e instanceof H) || 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 }));
     };
@@ -3940,7 +4183,7 @@ class it extends h {
   render() {
     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>${Mt}</style>
+      <style>${Qt}</style>
       <fieldset
         part="fieldset"
         ${a ? `aria-label="${a}"` : ""}
@@ -4006,9 +4249,9 @@ class it extends h {
     t && (this.disabled ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"));
   }
 }
-d("a11y-checkbox", R);
-d("a11y-checkbox-group", it);
-class st extends h {
+b("a11y-checkbox", H);
+b("a11y-checkbox-group", nt);
+class lt extends u {
   constructor() {
     super(...arguments), this._value = "", this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._required = !1, this._name = "", this.handleRadioSelect = (t) => {
       var i;
@@ -4047,7 +4290,7 @@ class st extends h {
             if (a && a.value !== this._value) {
               this.selectRadio(a.value);
               const r = a.getAttribute("label") || a.value;
-              p(`${r} selected`);
+              f(`${r} selected`);
             }
           }
           return;
@@ -4060,7 +4303,7 @@ class st extends h {
         if (a) {
           this.selectRadio(a.value), a.focus();
           const r = a.getAttribute("label") || a.value;
-          p(`${r} selected`);
+          f(`${r} selected`);
         }
       }
     };
@@ -4132,9 +4375,9 @@ class st extends h {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" });
-    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>${Kt}</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` : "", o = [a, r].filter(Boolean).join(" ");
+    o ? this.setAttribute("aria-describedby", o) : this.removeAttribute("aria-describedby"), t.innerHTML = `
+      <style>${Zt}</style>
       <fieldset part="fieldset">
         ${e ? `<legend part="legend">${e}${this._required ? '<span class="radio-group-required" aria-hidden="true"> *</span>' : ""}</legend>` : ""}
         <div class="radio-group-items" part="items">
@@ -4213,7 +4456,7 @@ class st extends h {
       }
   }
 }
-class at extends h {
+class dt extends u {
   constructor() {
     super(...arguments), this._value = "", this._checked = !1, this._disabled = !1, this._discoverable = !0, this.handleClick = (t) => {
       if (this._disabled) {
@@ -4228,7 +4471,7 @@ class at extends h {
         })
       );
       const e = this.getAttribute("label") || this._value;
-      p(`${e} selected`);
+      f(`${e} selected`);
     }, this.handleKeyDown = (t) => {
       if (!this._disabled && t.key === "Enter") {
         t.preventDefault(), this.dispatchEvent(
@@ -4239,7 +4482,7 @@ class at extends h {
           })
         );
         const e = this.getAttribute("label") || this._value;
-        p(`${e} selected`);
+        f(`${e} selected`);
       }
     };
   }
@@ -4284,7 +4527,7 @@ class at extends h {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     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>${Nt}</style>
+      <style>${te}</style>
       <div class="radio-wrapper" part="wrapper">
         <div class="radio-control" part="control">
           <input
@@ -4345,9 +4588,9 @@ class at extends h {
       }
   }
 }
-d("a11y-radio-group", st);
-d("a11y-radio", at);
-class rt extends h {
+b("a11y-radio-group", lt);
+b("a11y-radio", dt);
+class ht extends u {
   constructor() {
     super(...arguments), this._toasts = [], this._counter = 0, this._containerEl = null, this._maxToasts = 5, this._handleClick = (t) => {
       var a;
@@ -4358,7 +4601,7 @@ class rt extends h {
       }
       const s = e.getAttribute("data-action-id");
       if (s) {
-        const r = this._toasts.find((l) => l.id === s);
+        const r = this._toasts.find((o) => o.id === s);
         (a = r == null ? void 0 : r.action) == null || a.onClick(), this.removeToast(s);
       }
     };
@@ -4385,7 +4628,7 @@ class rt extends h {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${Ft}</style>
+      <style>${ee}</style>
       <div
         class="toast-container"
         role="region"
@@ -4485,8 +4728,8 @@ class rt extends h {
     return e.textContent = t, e.innerHTML;
   }
 }
-d("a11y-toast", rt);
-class ot extends h {
+b("a11y-toast", ht);
+class ct extends u {
   static get observedAttributes() {
     return ["focusable"];
   }
@@ -4496,7 +4739,7 @@ class ot extends h {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
       <style>
         :host {
-          ${F}
+          ${V}
         }
 
         :host([hidden]) {
@@ -4524,9 +4767,9 @@ class ot extends h {
   cleanupEventListeners() {
   }
 }
-d("a11y-visually-hidden", ot);
-const Vt = N("SkipLink");
-class lt extends h {
+b("a11y-visually-hidden", ct);
+const le = $("SkipLink");
+class ut extends u {
   constructor() {
     super(...arguments), this.handleClick = (t) => {
       const e = this.getAttribute("target") || "#main-content", i = document.querySelector(e);
@@ -4537,7 +4780,7 @@ class lt extends h {
     return ["target", "label"];
   }
   setupAccessibility() {
-    this.getAttribute("target") || Vt.warning(
+    this.getAttribute("target") || le.warning(
       'Missing "target" attribute. Provide a CSS selector (e.g. target="#main-content") pointing to the skip destination.'
     );
   }
@@ -4555,7 +4798,7 @@ class lt extends h {
         }
 
         .skip-link {
-          ${F}
+          ${V}
           display: inline-block;
           text-decoration: none;
         }
@@ -4605,8 +4848,8 @@ class lt extends h {
     (t === "target" || t === "label") && this.render();
   }
 }
-d("a11y-skip-link", lt);
-const Gt = N("Alert"), Xt = `
+b("a11y-skip-link", ut);
+const de = $("Alert"), he = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -4731,7 +4974,7 @@ const Gt = N("Alert"), Xt = `
       outline: 2px solid Highlight;
     }
   }
-`, K = {
+`, F = {
   info: "ℹ️",
   // ℹ️
   success: "✅",
@@ -4741,7 +4984,7 @@ const Gt = N("Alert"), Xt = `
   error: "❌"
   // ❌
 };
-class nt extends h {
+class bt extends u {
   constructor() {
     super(...arguments), this._closeButton = null, this.handleDismiss = () => {
       this.emit("dismiss", { type: this.alertType }), this.remove();
@@ -4764,15 +5007,15 @@ class nt extends h {
   }
   setupAccessibility() {
     const t = ["info", "success", "warning", "error"], e = this.getAttribute("type");
-    e && !t.includes(e) && Gt.warning(
+    e && !t.includes(e) && de.warning(
       `Invalid type="${e}". Use one of: ${t.join(", ")}.`
     );
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" });
-    const t = this.getAttribute("title"), e = this.hasAttribute("dismissible"), i = K[this.alertType] || K.info;
+    const t = this.getAttribute("title"), e = this.hasAttribute("dismissible"), i = F[this.alertType] || F.info;
     this.shadowRoot.innerHTML = `
-      <style>${Xt}</style>
+      <style>${he}</style>
       <div
         class="alert"
         role="${this.alertRole}"
@@ -4813,99 +5056,1187 @@ class nt extends h {
     this.handleDismiss();
   }
 }
-d("a11y-alert", nt);
+b("a11y-alert", bt);
+const ce = `
+  :host {
+    display: inline;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  a {
+    color: var(--compa11y-link-color, #0066cc);
+    text-decoration: var(--compa11y-link-underline, underline);
+    cursor: pointer;
+    border-radius: 2px;
+  }
+
+  a:hover {
+    color: var(--compa11y-link-color-hover, #004499);
+  }
+
+  a:visited {
+    color: var(--compa11y-link-color-visited, #551a8b);
+  }
+
+  a:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Disabled state */
+  :host([disabled]) a {
+    color: var(--compa11y-link-color-disabled, #999);
+    cursor: not-allowed;
+    pointer-events: none;
+    text-decoration: none;
+  }
+
+  /* External link indicator */
+  .external-icon {
+    display: inline-block;
+    width: 0.75em;
+    height: 0.75em;
+    margin-left: 0.25em;
+    vertical-align: baseline;
+  }
+
+  /* Forced colors / high contrast mode */
+  @media (forced-colors: active) {
+    a {
+      forced-color-adjust: none;
+      color: LinkText;
+    }
+
+    a:visited {
+      color: VisitedText;
+    }
+
+    a:focus-visible {
+      outline: 2px solid Highlight;
+    }
+
+    :host([disabled]) a {
+      color: GrayText;
+    }
+  }
+`;
+class pt extends u {
+  static get observedAttributes() {
+    return ["href", "external", "current", "disabled"];
+  }
+  setupAccessibility() {
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const t = this.getAttribute("href") || "", e = this.hasAttribute("external"), i = this.getAttribute("current"), s = this.hasAttribute("disabled"), a = [];
+    s ? (a.push('role="link"'), a.push('aria-disabled="true"'), a.push('tabindex="-1"')) : a.push(`href="${t}"`), e && !s && (a.push('target="_blank"'), a.push('rel="noopener noreferrer"')), i && a.push(`aria-current="${i}"`);
+    const r = e ? `<svg class="external-icon" part="external-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+          <polyline points="15 3 21 3 21 9"/>
+          <line x1="10" y1="14" x2="21" y2="3"/>
+        </svg>` : "", o = e ? '<span class="sr-only" style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;">(opens in new tab)</span>' : "";
+    this.shadowRoot.innerHTML = `
+      <style>${ce}</style>
+      <a ${a.join(" ")} part="link">
+        <slot></slot>${r}${o}
+      </a>
+    `;
+  }
+  onAttributeChange(t, e, i) {
+    ["href", "external", "current", "disabled"].includes(t) && this.render();
+  }
+}
+b("a11y-link", pt);
+const gt = `
+  :host {
+    display: block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  :host([as="span"]) {
+    display: inline;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Size scale */
+  .size-xs  { font-size: var(--compa11y-text-size-xs, 0.75rem); line-height: 1.5; }
+  .size-sm  { font-size: var(--compa11y-text-size-sm, 0.875rem); line-height: 1.5; }
+  .size-md  { font-size: var(--compa11y-text-size-md, 1rem); line-height: 1.5; }
+  .size-lg  { font-size: var(--compa11y-text-size-lg, 1.125rem); line-height: 1.5; }
+  .size-xl  { font-size: var(--compa11y-text-size-xl, 1.25rem); line-height: 1.4; }
+  .size-2xl { font-size: var(--compa11y-text-size-2xl, 1.5rem); line-height: 1.3; }
+  .size-3xl { font-size: var(--compa11y-text-size-3xl, 1.875rem); line-height: 1.25; }
+
+  /* Color variants */
+  .color-default { color: var(--compa11y-text-color, inherit); }
+  .color-muted   { color: var(--compa11y-text-color-muted, #666); }
+  .color-accent  { color: var(--compa11y-text-color-accent, #0066cc); }
+  .color-error   { color: var(--compa11y-text-color-error, #dc2626); }
+  .color-success { color: var(--compa11y-text-color-success, #16a34a); }
+  .color-warning { color: var(--compa11y-text-color-warning, #d97706); }
+
+  /* Weight */
+  .weight-normal  { font-weight: 400; }
+  .weight-medium  { font-weight: 500; }
+  .weight-semibold { font-weight: 600; }
+  .weight-bold    { font-weight: 700; }
+
+  /* Alignment */
+  .align-left   { text-align: left; }
+  .align-center { text-align: center; }
+  .align-right  { text-align: right; }
+
+  /* Truncation */
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Forced colors */
+  @media (forced-colors: active) {
+    .color-muted,
+    .color-accent,
+    .color-error,
+    .color-success,
+    .color-warning {
+      color: CanvasText;
+    }
+  }
+`, ue = `
+  ${gt}
+
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    font-family: var(--compa11y-heading-font-family, inherit);
+  }
+
+  /* Default heading sizes (when no size attr) */
+  h1 { font-size: var(--compa11y-heading-1-size, 2.25rem); line-height: 1.2; font-weight: 700; }
+  h2 { font-size: var(--compa11y-heading-2-size, 1.875rem); line-height: 1.25; font-weight: 700; }
+  h3 { font-size: var(--compa11y-heading-3-size, 1.5rem); line-height: 1.3; font-weight: 600; }
+  h4 { font-size: var(--compa11y-heading-4-size, 1.25rem); line-height: 1.35; font-weight: 600; }
+  h5 { font-size: var(--compa11y-heading-5-size, 1.125rem); line-height: 1.4; font-weight: 600; }
+  h6 { font-size: var(--compa11y-heading-6-size, 1rem); line-height: 1.5; font-weight: 600; }
+`, be = `
+  ${gt}
+
+  p, span, div, label {
+    margin: 0;
+    font-family: var(--compa11y-text-font-family, inherit);
+  }
+`;
+function mt(l, t) {
+  const e = [], i = l.getAttribute("size"), s = l.getAttribute("color") || "default", a = l.getAttribute("weight"), r = l.getAttribute("align"), o = l.hasAttribute("truncate");
+  return i ? e.push(`size-${i}`) : t && e.push(`size-${t}`), e.push(`color-${s}`), a && e.push(`weight-${a}`), r && e.push(`align-${r}`), o && e.push("truncate"), e.join(" ");
+}
+class ft extends u {
+  static get observedAttributes() {
+    return ["level", "size", "color", "weight", "align", "truncate"];
+  }
+  get headingLevel() {
+    const t = parseInt(this.getAttribute("level") || "2", 10);
+    return t >= 1 && t <= 6 ? t : 2;
+  }
+  setupAccessibility() {
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const t = `h${this.headingLevel}`, e = mt(this), i = this.getAttribute("size") ? `size-${this.getAttribute("size")}` : "", s = e;
+    this.shadowRoot.innerHTML = `
+      <style>${ue}</style>
+      <${t} class="${s}" part="heading">
+        <slot></slot>
+      </${t}>
+    `;
+  }
+  onAttributeChange() {
+    this.render();
+  }
+}
+class vt extends u {
+  static get observedAttributes() {
+    return ["as", "size", "color", "weight", "align", "truncate"];
+  }
+  get tagName_() {
+    const t = this.getAttribute("as");
+    return t && ["p", "span", "div", "label"].includes(t) ? t : "p";
+  }
+  setupAccessibility() {
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const t = this.tagName_, e = mt(this, "md");
+    this.shadowRoot.innerHTML = `
+      <style>${be}</style>
+      <${t} class="${e}" part="text">
+        <slot></slot>
+      </${t}>
+    `;
+  }
+  onAttributeChange() {
+    this.render();
+  }
+}
+b("a11y-heading", ft);
+b("a11y-text", vt);
+const pe = `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  .field-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--compa11y-field-gap, 0.25rem);
+  }
+
+  .field-label {
+    display: block;
+    color: var(--compa11y-field-label-color, inherit);
+    font-size: var(--compa11y-field-label-size, 0.875rem);
+    font-weight: var(--compa11y-field-label-weight, 500);
+  }
+
+  :host([disabled]) .field-label {
+    color: var(--compa11y-field-disabled-color, #999);
+  }
+
+  .field-required {
+    color: var(--compa11y-field-required-color, #ef4444);
+    margin-left: 0.125rem;
+  }
+
+  .field-hint {
+    color: var(--compa11y-field-hint-color, #666);
+    font-size: var(--compa11y-field-hint-size, 0.8125rem);
+  }
+
+  .field-error {
+    color: var(--compa11y-field-error-color, #ef4444);
+    font-size: var(--compa11y-field-error-size, 0.8125rem);
+  }
+
+  /* Forced colors */
+  @media (forced-colors: active) {
+    .field-label {
+      color: CanvasText;
+    }
+
+    :host([disabled]) .field-label {
+      color: GrayText;
+    }
+
+    .field-error {
+      color: LinkText;
+    }
+  }
+`;
+class yt extends u {
+  static get observedAttributes() {
+    return ["label", "hint", "error", "required", "disabled"];
+  }
+  setupAccessibility() {
+    var t;
+    typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && (this.hasAttribute("label") || console.warn(
+      `[compa11y/FormField] FormField has no label. Add label="..." attribute.
+💡 Suggestion: <a11y-form-field label="Email">...</a11y-form-field>`
+    ));
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const t = this.getAttribute("label") || "", e = this.getAttribute("hint") || "", i = this.getAttribute("error") || "", s = this.hasAttribute("required"), a = !!i, r = `${this._id}-label`, o = `${this._id}-hint`, n = `${this._id}-error`;
+    this.setAttribute("data-error", a ? "true" : "false"), this.shadowRoot.innerHTML = `
+      <style>${pe}</style>
+      <div class="field-wrapper" part="wrapper">
+        ${t ? `<label
+                class="field-label"
+                id="${r}"
+                part="label"
+              >${t}${s ? '<span class="field-required" aria-hidden="true" part="required">*</span>' : ""}</label>` : ""}
+        <slot></slot>
+        ${e ? `<div class="field-hint" id="${o}" part="hint">${e}</div>` : ""}
+        ${a ? `<div class="field-error" id="${n}" role="alert" part="error">${i}</div>` : ""}
+      </div>
+    `, this.wireControl();
+  }
+  setupEventListeners() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t == null || t.addEventListener("slotchange", () => this.wireControl());
+  }
+  cleanupEventListeners() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    t == null || t.removeEventListener("slotchange", () => this.wireControl());
+  }
+  /**
+   * Find the first focusable control in the slot and wire ARIA attributes.
+   */
+  wireControl() {
+    var _;
+    const t = (_ = this.shadowRoot) == null ? void 0 : _.querySelector("slot");
+    if (!t) return;
+    const e = t.assignedElements({ flatten: !0 }), i = e.find(
+      (y) => y instanceof HTMLInputElement || y instanceof HTMLSelectElement || y instanceof HTMLTextAreaElement || y.hasAttribute("role") || y.hasAttribute("tabindex")
+    ) || e[0];
+    if (!i) return;
+    const s = this.getAttribute("label") || "", a = this.getAttribute("hint") || "", r = this.getAttribute("error") || "", o = this.hasAttribute("required"), n = this.hasAttribute("disabled"), d = !!r, c = `${this._id}-label`, h = `${this._id}-hint`, p = `${this._id}-error`;
+    s && !i.hasAttribute("aria-label") && i.setAttribute("aria-labelledby", c);
+    const m = [];
+    a && m.push(h), d && m.push(p), m.length ? i.setAttribute("aria-describedby", m.join(" ")) : i.removeAttribute("aria-describedby"), d ? i.setAttribute("aria-invalid", "true") : i.removeAttribute("aria-invalid"), o ? i.setAttribute("aria-required", "true") : i.removeAttribute("aria-required"), n ? ("disabled" in i && (i.disabled = !0), i.setAttribute("aria-disabled", "true")) : ("disabled" in i && (i.disabled = !1), i.removeAttribute("aria-disabled"));
+  }
+  onAttributeChange(t, e, i) {
+    ["label", "hint", "error", "required", "disabled"].includes(t) && (this.render(), this.setupEventListeners());
+  }
+}
+b("a11y-form-field", yt);
+const P = $("Popover");
+function ge(l, t, e, i) {
+  const s = window.innerWidth, a = window.innerHeight, r = t.offsetWidth, o = t.offsetHeight, n = e.indexOf("-"), d = n === -1 ? e : e.slice(0, n), c = n === -1 ? "center" : e.slice(n + 1);
+  let h = 0, p = 0;
+  switch (d) {
+    case "top":
+      h = l.top - o - i;
+      break;
+    case "bottom":
+      h = l.bottom + i;
+      break;
+    case "left":
+      p = l.left - r - i;
+      break;
+    case "right":
+      p = l.right + i;
+      break;
+  }
+  if (d === "top" || d === "bottom")
+    switch (c) {
+      case "start":
+        p = l.left;
+        break;
+      case "end":
+        p = l.right - r;
+        break;
+      default:
+        p = l.left + (l.width - r) / 2;
+    }
+  else
+    switch (c) {
+      case "start":
+        h = l.top;
+        break;
+      case "end":
+        h = l.bottom - o;
+        break;
+      default:
+        h = l.top + (l.height - o) / 2;
+    }
+  d === "bottom" && h + o > a && l.top - o - i > 0 ? h = l.top - o - i : d === "top" && h < 0 && l.bottom + i + o < a ? h = l.bottom + i : d === "right" && p + r > s && l.left - r - i > 0 ? p = l.left - r - i : d === "left" && p < 0 && l.right + i + r < s && (p = l.right + i);
+  const m = 8;
+  return p = Math.max(m, Math.min(p, s - r - m)), h = Math.max(m, Math.min(h, a - o - m)), { top: h, left: p };
+}
+const me = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary', fe = `
+  :host {
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .popover-content {
+    position: fixed;
+    z-index: var(--compa11y-popover-z-index, 1000);
+    background: var(--compa11y-popover-bg, #fff);
+    color: var(--compa11y-popover-color, inherit);
+    border: var(--compa11y-popover-border, 1px solid rgba(0, 0, 0, 0.15));
+    border-radius: var(--compa11y-popover-radius, 0.375rem);
+    box-shadow: var(--compa11y-popover-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
+    padding: var(--compa11y-popover-padding, 1rem);
+    max-width: var(--compa11y-popover-max-width, 320px);
+    min-width: 100px;
+    outline: none;
+    transition: opacity 0.15s ease, transform 0.15s ease;
+    opacity: 0;
+    transform: scale(0.96) translateY(-2px);
+  }
+
+  .popover-content[data-open="true"] {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  .popover-content[hidden] {
+    display: none !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .popover-content {
+      transition: none;
+    }
+  }
+
+  ${G}
+
+  @media (forced-colors: active) {
+    .popover-content {
+      border: 2px solid ButtonText;
+    }
+  }
+`;
+class _t extends u {
+  constructor() {
+    super(...arguments), this._open = !1, this._placement = "bottom", this._offset = 8, this._disabled = !1, this._haspopup = "dialog", this._contentRole = "dialog", this._contentLabel = "", this._focusPolicy = "first", this._triggerEl = null, this._contentEl = null, this._focusOrigin = null, this._weMovedFocus = !1, this._onTriggerSlotChange = () => {
+      const t = `${this._id}-content`;
+      this._wireTrigger(t);
+    }, this._onOutsidePointerDown = (t) => {
+      t.composedPath().includes(this) || (this.open = !1);
+    }, this._onDocumentKeyDown = (t) => {
+      t.key === "Escape" && (t.stopPropagation(), this.open = !1);
+    }, this._onScrollOrResize = () => {
+      this._open && this._updatePosition();
+    }, this._onTriggerClick = () => {
+      this._disabled || (this.open = !this._open);
+    }, this._onTriggerKeyDown = (t) => {
+      this._disabled || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.open = !this._open);
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "open",
+      "placement",
+      "offset",
+      "disabled",
+      "haspopup",
+      "content-role",
+      "content-label",
+      "focus-policy"
+    ];
+  }
+  // ─── Public API ────────────────────────────────────────────────────────────
+  get open() {
+    return this._open;
+  }
+  set open(t) {
+    this._open !== t && (this._open = t, this.toggleAttribute("open", t), t ? this._show() : this._hide());
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(t) {
+    this._disabled = t, this.toggleAttribute("disabled", t), this._updateTriggerDisabled();
+  }
+  // ─── Lifecycle ─────────────────────────────────────────────────────────────
+  setupAccessibility() {
+    this._open = this.hasAttribute("open"), this._placement = this.getAttribute("placement") || "bottom", this._offset = parseInt(this.getAttribute("offset") || "8", 10), this._disabled = this.hasAttribute("disabled"), this._haspopup = this.getAttribute("haspopup") || "dialog", this._contentRole = this.getAttribute("content-role") || "dialog", this._contentLabel = this.getAttribute("content-label") || "", this._focusPolicy = this.getAttribute("focus-policy") || "first";
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const t = `${this._id}-content`, e = this._contentLabel ? `aria-label="${this._contentLabel}"` : "";
+    this.shadowRoot.innerHTML = `
+      <style>${fe}</style>
+      <slot name="trigger" part="trigger-slot"></slot>
+      <div
+        class="popover-content"
+        id="${t}"
+        part="content"
+        role="${this._contentRole}"
+        aria-modal="false"
+        tabindex="-1"
+        ${e}
+        ${this._open ? 'data-open="true"' : ""}
+        ${this._open ? "" : "hidden"}
+      >
+        <slot></slot>
+      </div>
+    `, this._contentEl = this.shadowRoot.querySelector(".popover-content"), this._wireTrigger(t), this._open && requestAnimationFrame(() => this._updatePosition());
+  }
+  setupEventListeners() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="trigger"]');
+    t == null || t.addEventListener("slotchange", this._onTriggerSlotChange);
+  }
+  cleanupEventListeners() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector('slot[name="trigger"]');
+    t == null || t.removeEventListener("slotchange", this._onTriggerSlotChange), this._removeGlobalListeners(), this._detachTriggerListeners();
+  }
+  onAttributeChange(t, e, i) {
+    var s, a, r;
+    switch (t) {
+      case "open":
+        this.open = i !== null;
+        break;
+      case "placement":
+        this._placement = i || "bottom", this._open && this._updatePosition();
+        break;
+      case "offset":
+        this._offset = parseInt(i || "8", 10), this._open && this._updatePosition();
+        break;
+      case "disabled":
+        this._disabled = i !== null, this._updateTriggerDisabled();
+        break;
+      case "haspopup":
+        this._haspopup = i || "dialog", this._updateTriggerAria();
+        break;
+      case "content-role":
+        this._contentRole = i || "dialog", (s = this._contentEl) == null || s.setAttribute("role", this._contentRole);
+        break;
+      case "content-label":
+        this._contentLabel = i || "", this._contentLabel ? (a = this._contentEl) == null || a.setAttribute("aria-label", this._contentLabel) : (r = this._contentEl) == null || r.removeAttribute("aria-label");
+        break;
+      case "focus-policy":
+        this._focusPolicy = i || "first";
+        break;
+    }
+  }
+  // ─── Trigger Wiring ────────────────────────────────────────────────────────
+  _wireTrigger(t) {
+    var a, r;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="trigger"]');
+    if (!e) return;
+    const s = e.assignedElements({ flatten: !0 })[0] || null;
+    typeof process < "u" && ((r = process.env) == null ? void 0 : r.NODE_ENV) !== "production" && (s || P.warning(
+      'Popover has no trigger. Add an element to the "trigger" slot.',
+      '<a11y-popover><button slot="trigger">Open</button>...</a11y-popover>'
+    )), this._detachTriggerListeners(), this._triggerEl = s, s && (this._updateTriggerAria(t), this._updateTriggerDisabled(), s.addEventListener("click", this._onTriggerClick), s.addEventListener("keydown", this._onTriggerKeyDown));
+  }
+  /** Update ARIA attributes on the trigger without re-wiring listeners. */
+  _updateTriggerAria(t) {
+    const e = this._triggerEl;
+    if (!e) return;
+    const i = t || `${this._id}-content`;
+    this._haspopup && this._haspopup !== "false" ? e.setAttribute("aria-haspopup", this._haspopup) : e.removeAttribute("aria-haspopup"), e.setAttribute("aria-expanded", String(this._open)), this._open ? e.setAttribute("aria-controls", i) : e.removeAttribute("aria-controls");
+  }
+  /** Apply disabled state to the trigger element. */
+  _updateTriggerDisabled() {
+    const t = this._triggerEl;
+    t && (this._disabled ? "disabled" in t ? t.disabled = !0 : (t.setAttribute("aria-disabled", "true"), t.setAttribute("tabindex", "-1")) : "disabled" in t ? t.disabled = !1 : (t.removeAttribute("aria-disabled"), t.removeAttribute("tabindex")));
+  }
+  _detachTriggerListeners() {
+    this._triggerEl && (this._triggerEl.removeEventListener("click", this._onTriggerClick), this._triggerEl.removeEventListener("keydown", this._onTriggerKeyDown), this._triggerEl.removeAttribute("aria-haspopup"), this._triggerEl.removeAttribute("aria-expanded"), this._triggerEl.removeAttribute("aria-controls"));
+  }
+  // ─── Open / Close ──────────────────────────────────────────────────────────
+  _show() {
+    var t;
+    this._contentEl && (this._focusOrigin = document.activeElement, this._contentEl.removeAttribute("hidden"), this._updateTriggerAria(), this._updatePosition(), requestAnimationFrame(() => {
+      var e;
+      (e = this._contentEl) == null || e.setAttribute("data-open", "true");
+    }), typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && requestAnimationFrame(() => {
+      const e = this._contentEl;
+      if (!e) return;
+      const i = e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby"), s = !!e.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]');
+      !i && !s && P.warning(
+        'Popover content has no accessible name. Add content-label="..." on <a11y-popover>, or place a heading inside the content.',
+        'Example: <a11y-popover content-label="Filter options">...</a11y-popover>'
+      );
+    }), requestAnimationFrame(() => {
+      const e = this._focusPolicy;
+      if (e === "none") return;
+      const i = this._contentEl;
+      if (!i) return;
+      let s = null;
+      e === "first" && (s = i.querySelector(me)), s || (s = i), this._weMovedFocus = !0, s.focus();
+    }), this._addGlobalListeners(), this.emit("a11y-popover-open"));
+  }
+  _hide() {
+    var s;
+    if (!this._contentEl) return;
+    this._contentEl.removeAttribute("data-open"), this._updateTriggerAria();
+    const t = () => {
+      var a, r;
+      (a = this._contentEl) == null || a.setAttribute("hidden", ""), (r = this._contentEl) == null || r.removeEventListener("transitionend", t);
+    };
+    getComputedStyle(this._contentEl).transitionDuration !== "0s" ? (this._contentEl.addEventListener("transitionend", t), setTimeout(t, 200)) : this._contentEl.setAttribute("hidden", ""), this._removeGlobalListeners();
+    const i = this._weMovedFocus || this._contentEl.contains(document.activeElement);
+    this._weMovedFocus = !1, this._focusOrigin = null, i && ((s = this._triggerEl) == null || s.focus()), this.emit("a11y-popover-close");
+  }
+  // ─── Positioning ───────────────────────────────────────────────────────────
+  _updatePosition() {
+    if (!this._triggerEl || !this._contentEl || !this._open) return;
+    const t = this._triggerEl.getBoundingClientRect(), { top: e, left: i } = ge(
+      t,
+      this._contentEl,
+      this._placement,
+      this._offset
+    );
+    this._contentEl.style.top = `${e}px`, this._contentEl.style.left = `${i}px`;
+  }
+  // ─── Global Dismiss Listeners ──────────────────────────────────────────────
+  _addGlobalListeners() {
+    document.addEventListener("pointerdown", this._onOutsidePointerDown, !0), document.addEventListener("keydown", this._onDocumentKeyDown, !0), window.addEventListener("scroll", this._onScrollOrResize, { passive: !0, capture: !0 }), window.addEventListener("resize", this._onScrollOrResize, { passive: !0 });
+  }
+  _removeGlobalListeners() {
+    document.removeEventListener("pointerdown", this._onOutsidePointerDown, !0), document.removeEventListener("keydown", this._onDocumentKeyDown, !0), window.removeEventListener("scroll", this._onScrollOrResize, !0), window.removeEventListener("resize", this._onScrollOrResize);
+  }
+}
+b("a11y-popover", _t);
+const ve = $("A11yAccordion");
+let N = !1;
+function ye() {
+  if (N || typeof document > "u") return;
+  N = !0;
+  const l = document.createElement("style");
+  l.setAttribute("data-compa11y-accordion", ""), l.textContent = ie, document.head.appendChild(l);
+}
+class xt extends u {
+  constructor() {
+    super(...arguments), this._triggers = [], this._panels = [], this._openItems = /* @__PURE__ */ new Set(), this._defaultSlotEl = null, this.updateItems = () => {
+      this._triggers = Array.from(
+        this.querySelectorAll("[data-accordion-trigger]")
+      ), this._panels = Array.from(
+        this.querySelectorAll("[data-accordion-panel]")
+      ), this._triggers.forEach((t, e) => {
+        const i = this._panels[e], s = t.id || `${this._id}-trigger-${e}`, a = (i == null ? void 0 : i.id) || `${this._id}-panel-${e}`;
+        t.id = s, t.getAttribute("aria-controls") || t.setAttribute("aria-controls", a);
+        const r = this._openItems.has(e);
+        t.setAttribute("aria-expanded", String(r)), i && (i.id = a, i.getAttribute("role") || i.setAttribute("role", "region"), i.getAttribute("aria-labelledby") || i.setAttribute("aria-labelledby", s), i.hidden = !r), ve.checks.accessibleLabel(
+          t,
+          `a11y-accordion trigger[${e}]`
+        );
+      });
+    }, this.handleClick = (t) => {
+      const i = t.target.closest(
+        "[data-accordion-trigger]"
+      );
+      if (!i || i.hasAttribute("disabled") || i.getAttribute("aria-disabled") === "true") return;
+      const a = this._triggers.indexOf(i);
+      a !== -1 && this.toggleItem(a);
+    }, this.handleKeyDown = (t) => {
+      var o, n, d, c;
+      const i = t.target.closest(
+        "[data-accordion-trigger]"
+      );
+      if (!i || this._triggers.indexOf(i) === -1) return;
+      const a = this._triggers.filter(
+        (h) => !h.hasAttribute("disabled") && h.getAttribute("aria-disabled") !== "true"
+      ), r = a.indexOf(i);
+      if (r !== -1)
+        switch (t.key) {
+          case "ArrowDown":
+            t.preventDefault(), (o = a[(r + 1) % a.length]) == null || o.focus();
+            break;
+          case "ArrowUp":
+            t.preventDefault(), (n = a[(r - 1 + a.length) % a.length]) == null || n.focus();
+            break;
+          case "Home":
+            t.preventDefault(), (d = a[0]) == null || d.focus();
+            break;
+          case "End":
+            t.preventDefault(), (c = a[a.length - 1]) == null || c.focus();
+            break;
+        }
+    };
+  }
+  static get observedAttributes() {
+    return ["type", "collapsible"];
+  }
+  /** Whether one or multiple items can be open at once. @default 'single' */
+  get type() {
+    return this.getAttribute("type") || "single";
+  }
+  /** Whether the open item can be collapsed in single mode. */
+  get collapsible() {
+    return this.hasAttribute("collapsible");
+  }
+  setupAccessibility() {
+    ye(), this.updateItems();
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>
+        ${g}
+        :host {
+          display: block;
+        }
+      </style>
+      <slot></slot>
+    `;
+  }
+  setupEventListeners() {
+    var t, e;
+    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown), this._defaultSlotEl = ((t = this.shadowRoot) == null ? void 0 : t.querySelector("slot")) ?? null, (e = this._defaultSlotEl) == null || e.addEventListener("slotchange", this.updateItems);
+  }
+  cleanupEventListeners() {
+    var t;
+    this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown), (t = this._defaultSlotEl) == null || t.removeEventListener(
+      "slotchange",
+      this.updateItems
+    );
+  }
+  onAttributeChange(t, e, i) {
+    t === "type" && (this._openItems.clear(), this.syncState());
+  }
+  toggleItem(t) {
+    var n, d;
+    const e = this._openItems.has(t), i = [];
+    this.type === "single" ? e && this.collapsible ? i.push(t) : e || this._openItems.forEach((c) => i.push(c)) : e && i.push(t);
+    const s = document.activeElement, a = i.find((c) => {
+      const h = this._panels[c];
+      return h && h.contains(s);
+    });
+    this.type === "single" ? e ? this.collapsible && this._openItems.delete(t) : (this._openItems.clear(), this._openItems.add(t)) : e ? this._openItems.delete(t) : this._openItems.add(t), this.syncState(), a !== void 0 && requestAnimationFrame(() => {
+      var c;
+      (c = this._triggers[a]) == null || c.focus();
+    });
+    const r = this._openItems.has(t), o = ((d = (n = this._triggers[t]) == null ? void 0 : n.textContent) == null ? void 0 : d.trim()) || "Section";
+    v(`${o} ${r ? "expanded" : "collapsed"}`), this.emit("a11y-accordion-change", {
+      index: t,
+      expanded: r,
+      trigger: this._triggers[t],
+      panel: this._panels[t]
+    });
+  }
+  syncState() {
+    this._triggers.forEach((t, e) => {
+      const i = this._panels[e], s = this._openItems.has(e);
+      t.setAttribute("aria-expanded", String(s)), i && (i.hidden = !s);
+    });
+  }
+  /** Open an item by index */
+  open(t) {
+    this.type === "single" && this._openItems.clear(), this._openItems.add(t), this.syncState();
+  }
+  /** Close an item by index */
+  close(t) {
+    this._openItems.delete(t), this.syncState();
+  }
+  /** Toggle an item by index */
+  toggle(t) {
+    this.toggleItem(t);
+  }
+}
+b("a11y-accordion", xt);
+const j = $("A11yTable");
+let Y = !1;
+function _e() {
+  if (Y || typeof document > "u") return;
+  Y = !0;
+  const l = document.createElement("style");
+  l.setAttribute("data-compa11y-table", ""), l.textContent = se, document.head.appendChild(l);
+}
+class At extends u {
+  constructor() {
+    super(...arguments), this._columns = [], this._rows = [], this._sortKey = null, this._sortDirection = "none", this._selectedRows = /* @__PURE__ */ new Set(), this._tableEl = null, this.handleClick = (t) => {
+      const i = t.target.closest("[data-sort-btn]");
+      if (i) {
+        const s = i.dataset.sortKey;
+        if (s) {
+          this.sort(s);
+          const a = this._columns.find((n) => n.key === s), r = (a == null ? void 0 : a.label) ?? s, o = this._sortDirection === "none" ? "sort cleared" : `sorted ${this._sortDirection}`;
+          v(`${r} ${o}`), this.emit("a11y-table-sort", {
+            sortKey: this._sortKey,
+            sortDirection: this._sortDirection
+          });
+        }
+      }
+    }, this.handleChange = (t) => {
+      const e = t.target;
+      if (!(!e || e.type !== "checkbox")) {
+        if ("selectAll" in e.dataset) {
+          e.checked ? this.selectAll() : this.deselectAll();
+          const i = this._selectedRows.size;
+          v(
+            i === 0 ? "Selection cleared" : `All ${i} rows selected`
+          );
+          return;
+        }
+        if ("selectRow" in e.dataset) {
+          const i = e.dataset.rowId ?? "";
+          if (!i) return;
+          e.checked ? this._selectedRows.add(i) : this._selectedRows.delete(i), this.syncSelectionState(), this.emitSelectEvent();
+          const s = this._selectedRows.size;
+          v(
+            s === 0 ? "Selection cleared" : `${s} row${s === 1 ? "" : "s"} selected`
+          );
+        }
+      }
+    };
+  }
+  static get observedAttributes() {
+    return ["caption", "sort-key", "sort-direction", "selectable", "loading", "empty-message"];
+  }
+  // ── Attribute-backed getters ──────────────────────────────────────────────
+  get caption() {
+    return this.getAttribute("caption") || "";
+  }
+  set caption(t) {
+    this.setAttribute("caption", t);
+  }
+  get selectable() {
+    return this.hasAttribute("selectable");
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  get emptyMessage() {
+    return this.getAttribute("empty-message") || "No results found";
+  }
+  // ── Property-backed sort state ────────────────────────────────────────────
+  get sortKey() {
+    return this._sortKey;
+  }
+  set sortKey(t) {
+    this._sortKey = t, this.rerenderTable();
+  }
+  get sortDirection() {
+    return this._sortDirection;
+  }
+  set sortDirection(t) {
+    this._sortDirection = t, this.rerenderTable();
+  }
+  // ── Data properties ───────────────────────────────────────────────────────
+  get columns() {
+    return this._columns;
+  }
+  set columns(t) {
+    this._columns = t, this.rerenderTable();
+  }
+  get rows() {
+    return this._rows;
+  }
+  set rows(t) {
+    this._rows = t, this.rerenderTable();
+  }
+  get selectedRows() {
+    return Array.from(this._selectedRows);
+  }
+  set selectedRows(t) {
+    this._selectedRows = new Set(t), this.syncSelectionState();
+  }
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  /**
+   * Re-apply JS properties that were set before the element was upgraded.
+   *
+   * When a custom element is used before its class is registered (e.g. inline
+   * script sets `el.columns = [...]` before the module loads), the value lands
+   * as a plain "own" property on the HTMLElement, shadowing the class
+   * getter/setter. This method detects that, removes the own property, and
+   * re-routes the value through the real setter so private fields are updated.
+   */
+  upgradeProperty(t) {
+    if (Object.prototype.hasOwnProperty.call(this, t)) {
+      const e = this[t];
+      delete this[t], this[t] = e;
+    }
+  }
+  setupAccessibility() {
+    _e(), this.upgradeProperty("columns"), this.upgradeProperty("rows"), this.upgradeProperty("selectedRows"), this.upgradeProperty("sortKey"), this.upgradeProperty("sortDirection");
+    const t = this.getAttribute("sort-key");
+    t && (this._sortKey = t);
+    const e = this.getAttribute("sort-direction");
+    e && (this._sortDirection = e), !this.caption && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && j.warning(
+      "a11y-table must have an accessible name. Provide a caption attribute, aria-label, or aria-labelledby."
+    );
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>
+        ${g}
+        :host { display: block; overflow-x: auto; }
+      </style>
+      <slot></slot>
+    `, this._tableEl || (this._tableEl = document.createElement("table"), this.appendChild(this._tableEl)), this.renderTable();
+  }
+  setupEventListeners() {
+    this.addEventListener("click", this.handleClick), this.addEventListener("change", this.handleChange);
+  }
+  cleanupEventListeners() {
+    this.removeEventListener("click", this.handleClick), this.removeEventListener("change", this.handleChange);
+  }
+  onAttributeChange(t, e, i) {
+    switch (t) {
+      case "caption":
+      case "empty-message":
+        this.rerenderTable();
+        break;
+      case "sort-key":
+        this._sortKey = i, this.rerenderTable();
+        break;
+      case "sort-direction":
+        this._sortDirection = i || "none", this.rerenderTable();
+        break;
+      case "selectable":
+      case "loading":
+        this.rerenderTable();
+        break;
+    }
+  }
+  // ── Public API ────────────────────────────────────────────────────────────
+  /** Sort the table by a column key, cycling direction automatically */
+  sort(t, e) {
+    e ? (this._sortKey = e === "none" ? null : t, this._sortDirection = e) : this._sortKey !== t ? (this._sortKey = t, this._sortDirection = "ascending") : this._sortDirection === "ascending" ? this._sortDirection = "descending" : this._sortDirection === "descending" ? (this._sortKey = null, this._sortDirection = "none") : (this._sortKey = t, this._sortDirection = "ascending"), this.rerenderTable();
+  }
+  selectRow(t) {
+    this._selectedRows.add(t), this.syncSelectionState(), this.emitSelectEvent();
+  }
+  deselectRow(t) {
+    this._selectedRows.delete(t), this.syncSelectionState(), this.emitSelectEvent();
+  }
+  selectAll() {
+    for (const t of this._rows) {
+      const e = String(t.id ?? "");
+      e && this._selectedRows.add(e);
+    }
+    this.syncSelectionState(), this.emitSelectEvent();
+  }
+  deselectAll() {
+    this._selectedRows.clear(), this.syncSelectionState(), this.emitSelectEvent();
+  }
+  // ── Rendering ─────────────────────────────────────────────────────────────
+  /**
+   * Preserve focus on a sort button across full re-renders.
+   * We save the sort-key of the focused sort button, re-render, then
+   * move focus back to the newly rendered sort button.
+   */
+  rerenderTable() {
+    if (!this._tableEl) return;
+    const t = document.activeElement, e = (t == null ? void 0 : t.dataset.sortKey) ?? null, i = this._tableEl.contains(t);
+    this.renderTable(), i && e && requestAnimationFrame(() => {
+      var a;
+      const s = (a = this._tableEl) == null ? void 0 : a.querySelector(
+        `[data-sort-key="${e}"]`
+      );
+      s == null || s.focus();
+    });
+  }
+  renderTable() {
+    if (!this._tableEl) return;
+    const t = this._tableEl;
+    this.loading ? this.setAttribute("aria-busy", "true") : this.removeAttribute("aria-busy");
+    let e = t.querySelector("caption");
+    this.caption ? (e || (e = document.createElement("caption"), t.prepend(e)), e.textContent = this.caption) : e && e.remove();
+    let i = t.querySelector("thead");
+    i || (i = document.createElement("thead"), t.appendChild(i)), this.renderThead(i);
+    let s = t.querySelector("tbody");
+    s || (s = document.createElement("tbody"), t.appendChild(s)), this.renderTbody(s);
+  }
+  renderThead(t) {
+    t.innerHTML = "";
+    const e = document.createElement("tr");
+    if (this.selectable) {
+      const i = document.createElement("th");
+      i.scope = "col", i.style.width = "2.5rem";
+      const s = this._rows.map((d) => String(d.id ?? "")).filter(Boolean), a = s.filter(
+        (d) => this._selectedRows.has(d)
+      ).length, r = s.length > 0 && a === s.length, o = a > 0 && a < s.length, n = document.createElement("input");
+      n.type = "checkbox", n.dataset.selectAll = "", n.setAttribute("data-select-cb", ""), n.setAttribute("aria-label", "Select all rows"), n.checked = r, n.indeterminate = o, i.appendChild(n), e.appendChild(i);
+    }
+    for (const i of this._columns) {
+      const s = document.createElement("th");
+      if (s.scope = "col", i.align && (s.style.textAlign = i.align), i.sortable) {
+        const a = this._sortKey === i.key, r = a ? this._sortDirection : "none";
+        s.setAttribute("aria-sort", r);
+        const o = document.createElement("button");
+        o.type = "button", o.setAttribute("data-sort-btn", ""), o.setAttribute("data-sort-key", i.key);
+        const n = document.createElement("span");
+        n.textContent = i.label;
+        const d = document.createElement("span");
+        d.setAttribute("aria-hidden", "true"), d.setAttribute("data-sort-icon", ""), d.textContent = a && r === "ascending" ? "↑" : a && r === "descending" ? "↓" : "↕", o.appendChild(n), o.appendChild(d), s.appendChild(o);
+      } else
+        s.textContent = i.label;
+      e.appendChild(s);
+    }
+    t.appendChild(e);
+  }
+  renderTbody(t) {
+    if (t.innerHTML = "", this.loading) {
+      const e = document.createElement("tr");
+      e.setAttribute("aria-busy", "true");
+      const i = document.createElement("td");
+      i.setAttribute("data-loading-cell", ""), i.colSpan = this._columns.length + (this.selectable ? 1 : 0), i.textContent = "Loading…", e.appendChild(i), t.appendChild(e);
+      return;
+    }
+    if (this._rows.length === 0) {
+      const e = document.createElement("tr"), i = document.createElement("td");
+      i.setAttribute("data-empty-cell", ""), i.colSpan = this._columns.length + (this.selectable ? 1 : 0), i.textContent = this.emptyMessage, e.appendChild(i), t.appendChild(e);
+      return;
+    }
+    this.selectable && this._rows.some((i) => !i.id) && j.warning(
+      'a11y-table: When selectable is enabled, each row object must have an "id" field.'
+    );
+    for (const e of this._rows) {
+      const i = String(e.id ?? ""), s = i ? this._selectedRows.has(i) : !1, a = document.createElement("tr");
+      if (i && this.selectable && a.setAttribute("aria-selected", String(s)), this.selectable) {
+        const r = document.createElement("td");
+        r.style.width = "2.5rem";
+        const o = document.createElement("input");
+        o.type = "checkbox", o.dataset.rowId = i, o.dataset.selectRow = "", o.setAttribute("data-select-cb", ""), o.checked = s;
+        const n = this._columns[0], d = n ? String(e[n.key] ?? i) : i;
+        o.setAttribute("aria-label", `Select ${d}`), r.appendChild(o), a.appendChild(r);
+      }
+      for (const r of this._columns) {
+        const o = e[r.key], n = o == null ? "" : String(o);
+        if (r.rowHeader) {
+          const d = document.createElement("th");
+          d.scope = "row", r.align && (d.style.textAlign = r.align), d.textContent = n, a.appendChild(d);
+        } else {
+          const d = document.createElement("td");
+          r.align && (d.style.textAlign = r.align), d.textContent = n, a.appendChild(d);
+        }
+      }
+      t.appendChild(a);
+    }
+  }
+  /** Re-sync selection state without full re-render (preserves focus) */
+  syncSelectionState() {
+    if (!this._tableEl) return;
+    const t = this._tableEl.querySelectorAll("tbody tr");
+    for (const i of Array.from(t)) {
+      const s = i.querySelector("[data-select-row]");
+      if (!s) continue;
+      const a = s.dataset.rowId ?? "", r = this._selectedRows.has(a);
+      i.setAttribute("aria-selected", String(r)), s.checked = r;
+    }
+    const e = this._tableEl.querySelector("[data-select-all]");
+    if (e) {
+      const i = this._rows.map((a) => String(a.id ?? "")).filter(Boolean), s = i.filter(
+        (a) => this._selectedRows.has(a)
+      ).length;
+      e.checked = i.length > 0 && s === i.length, e.indeterminate = s > 0 && s < i.length;
+    }
+  }
+  emitSelectEvent() {
+    this.emit("a11y-table-select", {
+      selectedRows: Array.from(this._selectedRows)
+    });
+  }
+}
+b("a11y-table", At);
 if (typeof window < "u") {
-  const n = () => {
-    B(), H();
+  const l = () => {
+    M(), B();
   };
-  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n(), window.compa11y = {
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", l) : l(), window.compa11y = {
     // Components (classes)
-    A11yDialog: j,
-    A11yMenu: Y,
-    A11yTabs: U,
-    A11yCombobox: V,
-    A11ySwitch: G,
-    A11ySelect: X,
-    A11yInput: W,
-    A11yTextarea: J,
-    A11yButton: Q,
-    A11yListbox: et,
-    A11yOption: tt,
-    A11yOptgroup: Z,
-    A11yCheckbox: R,
-    A11yCheckboxGroup: it,
-    A11yRadioGroup: st,
-    A11yRadio: at,
-    A11yToast: rt,
-    A11yVisuallyHidden: ot,
-    A11ySkipLink: lt,
-    A11yAlert: nt,
+    A11yDialog: X,
+    A11yMenu: W,
+    A11yTabs: J,
+    A11yCombobox: Q,
+    A11ySwitch: Z,
+    A11ySelect: tt,
+    A11yInput: et,
+    A11yTextarea: it,
+    A11yButton: st,
+    A11yListbox: ot,
+    A11yOption: rt,
+    A11yOptgroup: at,
+    A11yCheckbox: H,
+    A11yCheckboxGroup: nt,
+    A11yRadioGroup: lt,
+    A11yRadio: dt,
+    A11yToast: ht,
+    A11yVisuallyHidden: ct,
+    A11ySkipLink: ut,
+    A11yAlert: bt,
+    A11yLink: pt,
+    A11yHeading: ft,
+    A11yText: vt,
+    A11yFormField: yt,
+    A11yPopover: _t,
+    A11yAccordion: xt,
+    A11yTable: At,
     // Announcer utilities
-    initAnnouncer: B,
+    initAnnouncer: M,
     announce: v,
-    announcePolite: p,
-    announceAssertive: O,
-    announceStatus: kt,
-    announceError: At,
+    announcePolite: f,
+    announceAssertive: R,
+    announceStatus: Bt,
+    announceError: Ht,
     // Focus utilities
-    initFocusVisible: H,
-    createFocusTrap: Et,
-    createFocusScope: xt,
-    createRovingTabindex: yt,
+    initFocusVisible: B,
+    createFocusTrap: Rt,
+    createFocusScope: Ot,
+    createRovingTabindex: qt,
     // Keyboard utilities
-    createKeyboardManager: _t,
-    KeyboardPatterns: ft,
-    createTypeAhead: q,
+    createKeyboardManager: Dt,
+    KeyboardPatterns: zt,
+    createTypeAhead: O,
     // ARIA utilities
-    aria: vt,
-    buildAriaProps: gt,
-    hasAccessibleName: mt,
+    aria: Tt,
+    buildAriaProps: Ct,
+    hasAccessibleName: It,
     // Platform detection
-    isBrowser: pt,
-    prefersReducedMotion: bt,
-    prefersHighContrast: ut,
-    prefersDarkMode: ct
+    isBrowser: $t,
+    prefersReducedMotion: Lt,
+    prefersHighContrast: St,
+    prefersDarkMode: wt
   };
 }
 export {
-  nt as A11yAlert,
-  Q as A11yButton,
-  R as A11yCheckbox,
-  it as A11yCheckboxGroup,
-  V as A11yCombobox,
-  j as A11yDialog,
-  W as A11yInput,
-  et as A11yListbox,
-  Y as A11yMenu,
-  Z as A11yOptgroup,
-  tt as A11yOption,
-  at as A11yRadio,
-  st as A11yRadioGroup,
-  X as A11ySelect,
-  lt as A11ySkipLink,
-  G as A11ySwitch,
-  U as A11yTabs,
-  J as A11yTextarea,
-  rt as A11yToast,
-  ot as A11yVisuallyHidden,
-  Zt as KeyboardPatterns,
-  te as announce,
-  ee as announceAssertive,
-  ie as announceError,
-  se as announcePolite,
-  ae as announceStatus,
-  re as aria,
-  oe as buildAriaProps,
-  le as createFocusScope,
-  ne as createFocusTrap,
-  he as createKeyboardManager,
-  de as createRovingTabindex,
-  ce as createTypeAhead,
-  ue as hasAccessibleName,
-  be as initAnnouncer,
-  pe as initFocusVisible,
-  me as isBrowser,
-  ge as prefersDarkMode,
-  ve as prefersHighContrast,
-  fe as prefersReducedMotion
+  xt as A11yAccordion,
+  bt as A11yAlert,
+  st as A11yButton,
+  H as A11yCheckbox,
+  nt as A11yCheckboxGroup,
+  Q as A11yCombobox,
+  X as A11yDialog,
+  yt as A11yFormField,
+  ft as A11yHeading,
+  et as A11yInput,
+  pt as A11yLink,
+  ot as A11yListbox,
+  W as A11yMenu,
+  at as A11yOptgroup,
+  rt as A11yOption,
+  _t as A11yPopover,
+  dt as A11yRadio,
+  lt as A11yRadioGroup,
+  tt as A11ySelect,
+  ut as A11ySkipLink,
+  Z as A11ySwitch,
+  At as A11yTable,
+  J as A11yTabs,
+  vt as A11yText,
+  it as A11yTextarea,
+  ht as A11yToast,
+  ct as A11yVisuallyHidden,
+  ke as KeyboardPatterns,
+  we as announce,
+  Se as announceAssertive,
+  Le as announceError,
+  $e as announcePolite,
+  Ie as announceStatus,
+  Ce as aria,
+  Te as buildAriaProps,
+  ze as createFocusScope,
+  De as createFocusTrap,
+  qe as createKeyboardManager,
+  Oe as createRovingTabindex,
+  Re as createTypeAhead,
+  He as hasAccessibleName,
+  Be as initAnnouncer,
+  Me as initFocusVisible,
+  Ke as isBrowser,
+  Fe as prefersDarkMode,
+  Pe as prefersHighContrast,
+  Ne as prefersReducedMotion
 };