@compa11y/web 0.1.11 → 0.1.12

package/dist/compa11y.js

@@ -1,8 +1,8 @@
-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";
+import { generateId as wt, announce as v, announcePolite as f, createTypeAhead as R, announceAssertive as O, createComponentWarnings as w, prefersDarkMode as St, prefersHighContrast as $t, prefersReducedMotion as Lt, isBrowser as It, hasAccessibleName as Tt, buildAriaProps as Ct, aria as zt, KeyboardPatterns as Dt, createKeyboardManager as qt, createRovingTabindex as Rt, createFocusScope as Ot, createFocusTrap as Ht, initFocusVisible as P, announceError as Pt, announceStatus as Bt, initAnnouncer as B } from "@compa11y/core";
+import { KeyboardPatterns as Le, announce as Ie, announceAssertive as Te, announceError as Ce, announcePolite as ze, announceStatus as De, aria as qe, buildAriaProps as Re, createFocusScope as Oe, createFocusTrap as He, createKeyboardManager as Pe, createRovingTabindex as Be, createTypeAhead as Me, hasAccessibleName as Fe, initAnnouncer as Ke, initFocusVisible as Ne, isBrowser as je, prefersDarkMode as Ye, prefersHighContrast as Ue, prefersReducedMotion as Ge } from "@compa11y/core";
 class u extends HTMLElement {
   constructor() {
-    super(), this._internals = null, this._id = kt(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), this._internals = null, this._id = wt(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
   }
   /**
    * Standard observed attributes
@@ -74,10 +74,10 @@ class u extends HTMLElement {
     return (i == null ? void 0 : i.assignedElements()) ?? [];
   }
 }
-function b(l, t) {
+function p(l, t) {
   customElements.get(l) || customElements.define(l, t);
 }
-const V = `
+const U = `
   position: absolute;
   width: 1px;
   height: 1px;
@@ -158,7 +158,7 @@ const V = `
     margin: 0 0 1rem 0;
     color: var(--compa11y-dialog-description-color, #666);
   }
-`, Kt = `
+`, Ft = `
   ${g}
 
   :host {
@@ -210,7 +210,7 @@ const V = `
     margin: 0.25rem 0;
     background: var(--compa11y-menu-separator-color, #e0e0e0);
   }
-`, Ft = `
+`, Kt = `
   ${g}
 
   .tablist {
@@ -256,7 +256,7 @@ const V = `
   ::slotted([role="tabpanel"][hidden]) {
     display: none;
   }
-`, Pt = `
+`, Nt = `
   ${g}
 
   :host {
@@ -397,7 +397,7 @@ const V = `
   .options-source {
     display: none;
   }
-`, Nt = `
+`, jt = `
   ${g}
 
   :host {
@@ -527,7 +527,7 @@ const V = `
   .options-source {
     display: none;
   }
-`, jt = `
+`, Yt = `
   ${g}
 
   :host {
@@ -631,7 +631,7 @@ const V = `
     opacity: 0.5;
     cursor: not-allowed;
   }
-`, Yt = `
+`, Ut = `
   ${g}
 
   :host {
@@ -710,7 +710,7 @@ const V = `
     color: var(--compa11y-input-error-color, #ef4444);
     font-size: var(--compa11y-input-error-size, 0.8125rem);
   }
-`, Vt = `
+`, Gt = `
   ${g}
 
   :host {
@@ -791,7 +791,7 @@ const V = `
     color: var(--compa11y-textarea-error-color, #ef4444);
     font-size: var(--compa11y-textarea-error-size, 0.8125rem);
   }
-`, Gt = `
+`, Vt = `
   ${g}
 
   :host {
@@ -906,7 +906,7 @@ const V = `
     border-radius: 50%;
     animation: compa11y-spin 0.6s linear infinite;
   }
-`, Ut = `
+`, Wt = `
   ${g}
 
   :host {
@@ -989,7 +989,7 @@ const V = `
   :host([aria-selected="true"]) .check-mark {
     visibility: visible;
   }
-`, Wt = `
+`, Jt = `
   ${g}
 
   :host {
@@ -1008,7 +1008,7 @@ const V = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Jt = `
+`, Qt = `
   ${g}
 
   :host {
@@ -1171,7 +1171,7 @@ const V = `
       color: HighlightText;
     }
   }
-`, Qt = `
+`, Zt = `
   ${g}
 
   :host {
@@ -1213,7 +1213,7 @@ const V = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, Zt = `
+`, te = `
   ${g}
 
   :host {
@@ -1266,7 +1266,7 @@ const V = `
   :host([disabled]) {
     opacity: 0.5;
   }
-`, te = `
+`, ee = `
   ${g}
 
   :host {
@@ -1386,7 +1386,7 @@ const V = `
       background: HighlightText;
     }
   }
-`, ee = `
+`, ie = `
   ${g}
 
   :host {
@@ -1495,7 +1495,7 @@ const V = `
     outline: 2px solid var(--compa11y-focus-color, #0066cc);
     outline-offset: 2px;
   }
-`, ie = `
+`, se = `
   a11y-accordion {
     display: block;
     border: 1px solid var(--compa11y-accordion-border-color, #e0e0e0);
@@ -1596,7 +1596,7 @@ const V = `
       forced-color-adjust: none;
     }
   }
-`, se = `
+`, ae = `
   /* ── Host ── */
   a11y-table {
     display: block;
@@ -1738,15 +1738,187 @@ const V = `
       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++;
+`, re = `
+  ${g}
+
+  :host {
+    display: block;
+  }
+
+  /* Visually hidden — live region always in DOM */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--compa11y-pagination-gap, 0.5rem);
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--compa11y-pagination-btn-gap, 2px);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  [data-compa11y-pagination-btn] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--compa11y-pagination-btn-size, 44px);
+    min-height: var(--compa11y-pagination-btn-size, 44px);
+    padding: var(--compa11y-pagination-btn-padding, 0.25rem 0.5rem);
+    border: var(--compa11y-pagination-btn-border, 1px solid #d1d5db);
+    border-radius: var(--compa11y-pagination-btn-radius, 4px);
+    background: var(--compa11y-pagination-btn-bg, transparent);
+    color: var(--compa11y-pagination-btn-color, inherit);
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.15s ease, border-color 0.15s ease;
+  }
+
+  [data-compa11y-pagination-btn]:not([disabled]):hover {
+    background: var(--compa11y-pagination-btn-hover-bg, #f3f4f6);
+    border-color: var(--compa11y-pagination-btn-hover-border, #9ca3af);
+  }
+
+  [data-compa11y-pagination-btn]:focus-visible {
+    outline: var(--compa11y-focus-width, 2px) solid
+      var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  [data-compa11y-pagination-btn][disabled] {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Current page — background + border so color is not the only indicator */
+  [data-compa11y-pagination-page][data-current="true"] {
+    background: var(--compa11y-pagination-current-bg, #0066cc);
+    color: var(--compa11y-pagination-current-color, #fff);
+    border-color: var(--compa11y-pagination-current-bg, #0066cc);
+    font-weight: 600;
+    text-decoration: underline;
+  }
+
+  [aria-hidden="true"] span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--compa11y-pagination-btn-size, 44px);
+    min-height: var(--compa11y-pagination-btn-size, 44px);
+    color: var(--compa11y-pagination-ellipsis-color, #9ca3af);
+    user-select: none;
+  }
+
+  /* Rows-per-page selector */
+  .page-size-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .page-size-wrapper label {
+    white-space: nowrap;
+    font-size: 0.875rem;
+  }
+
+  [data-compa11y-pagination-pagesize] {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font: inherit;
+    font-size: 0.875rem;
+    background: var(--compa11y-pagination-select-bg, #fff);
+    cursor: pointer;
+  }
+
+  [data-compa11y-pagination-pagesize]:focus-visible {
+    outline: var(--compa11y-focus-width, 2px) solid
+      var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Jump-to-page input */
+  .jump-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .jump-wrapper label {
+    white-space: nowrap;
+    font-size: 0.875rem;
+  }
+
+  [data-compa11y-pagination-jump] {
+    width: 5rem;
+    padding: 0.25rem 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    font: inherit;
+    font-size: 0.875rem;
+    background: var(--compa11y-pagination-input-bg, #fff);
+  }
+
+  [data-compa11y-pagination-jump]:focus-visible {
+    outline: var(--compa11y-focus-width, 2px) solid
+      var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+    border-color: var(--compa11y-focus-color, #0066cc);
+  }
+
+  [data-compa11y-pagination-error] {
+    color: var(--compa11y-pagination-error-color, #dc2626);
+    font-size: 0.75rem;
+    width: 100%;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-compa11y-pagination-btn] {
+      transition: none !important;
+    }
+  }
+
+  /* Forced colours / high contrast */
+  @media (forced-colors: active) {
+    [data-compa11y-pagination-page][data-current="true"] {
+      border: 2px solid ButtonText;
+      forced-color-adjust: none;
+    }
+
+    [data-compa11y-pagination-btn]:focus-visible {
+      outline: 2px solid Highlight;
+    }
+  }
+`, M = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+let L = 0, V = "";
+function oe() {
+  L === 0 && (V = document.body.style.overflow, document.body.style.overflow = "hidden"), L++;
 }
-function re() {
-  L--, L <= 0 && (L = 0, document.body.style.overflow = U);
+function ne() {
+  L--, L <= 0 && (L = 0, document.body.style.overflow = V);
 }
-class X extends u {
+class W extends u {
   constructor() {
     super(...arguments), this._open = !1, this._previouslyFocused = null, this._triggerElement = null, this.handleTriggerClick = () => {
       this.open = !0;
@@ -1847,7 +2019,7 @@ class X extends u {
    */
   getFocusableElements() {
     const t = [];
-    return this.querySelectorAll(K).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(K).forEach((s) => {
+    return this.querySelectorAll(M).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(M).forEach((s) => {
       s.classList.contains("overlay") || t.push(s);
     }), t;
   }
@@ -1855,11 +2027,11 @@ class X extends u {
     this._previouslyFocused = document.activeElement, this.style.display = "flex", requestAnimationFrame(() => {
       const e = this.getFocusableElements()[0];
       e && e.focus();
-    }), ae(), v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
+    }), oe(), v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
   }
   hideDialog() {
     var t;
-    this.style.display = "none", re(), (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
+    this.style.display = "none", ne(), (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
   }
   /**
    * Programmatic open
@@ -1874,8 +2046,8 @@ class X extends u {
     this.open = !1;
   }
 }
-b("a11y-dialog", X);
-class W extends u {
+p("a11y-dialog", W);
+class X 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(
@@ -1965,7 +2137,7 @@ class W extends u {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${Kt}</style>
+      <style>${Ft}</style>
       <slot name="trigger"></slot>
       <div
         class="menu-content"
@@ -2040,7 +2212,7 @@ class W extends u {
     this.open = !this._open;
   }
 }
-b("a11y-menu", W);
+p("a11y-menu", X);
 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 = () => {
@@ -2107,7 +2279,7 @@ class J extends u {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${Ft}</style>
+      <style>${Kt}</style>
       <div class="tablist" role="tablist" aria-orientation="${this.orientation}" part="tablist">
         <slot name="tab"></slot>
       </div>
@@ -2173,7 +2345,7 @@ class J extends u {
     );
   }
 }
-b("a11y-tabs", J);
+p("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 = () => {
@@ -2266,7 +2438,7 @@ class Q extends u {
   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>${Pt}</style>
+      <style>${Nt}</style>
       <div class="combobox-wrapper" part="wrapper">
         <div class="input-wrapper" part="input-wrapper">
           <input
@@ -2399,7 +2571,7 @@ class Q extends u {
     this.handleClear();
   }
 }
-b("a11y-combobox", Q);
+p("a11y-combobox", Q);
 class Z extends u {
   constructor() {
     super(...arguments), this._checked = !1, this._button = null, this._label = null, this.handleClick = () => {
@@ -2462,7 +2634,7 @@ class Z extends u {
   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>${jt}</style>
+      <style>${Yt}</style>
       <div class="switch-wrapper size-${this.size}" part="wrapper">
         <button
           type="button"
@@ -2542,7 +2714,7 @@ class Z extends u {
     this.checked = t;
   }
 }
-b("a11y-switch", Z);
+p("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 = () => {
@@ -2552,7 +2724,7 @@ class tt extends u {
         label: e.textContent || "",
         disabled: e.hasAttribute("disabled"),
         element: e
-      })), this._typeAhead = O(
+      })), this._typeAhead = R(
         this._options.map((e) => e.label),
         { timeout: 500 }
       ), this.renderOptions(), this.updateTriggerText();
@@ -2643,7 +2815,7 @@ class tt extends u {
   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>${Nt}</style>
+      <style>${jt}</style>
       <div class="select-wrapper" part="wrapper">
         <button
           id="${e}"
@@ -2794,7 +2966,7 @@ class tt extends u {
     this.open = !1;
   }
 }
-b("a11y-select", tt);
+p("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) => {
@@ -2875,11 +3047,11 @@ class et extends u {
     ));
   }
   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") || "", 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 = [];
+    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", h = this.getAttribute("placeholder") || "", c = this.getAttribute("name") || "", b = this.getAttribute("autocomplete") || "", m = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), y = this.getAttribute("pattern"), S = this.getAttribute("inputmode"), I = this.getAttribute("aria-label") || "", T = this.getAttribute("aria-labelledby") || "", C = 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}"` : "";
+    const D = k.length ? `aria-describedby="${k.join(" ")}"` : "", $ = !r && I ? `aria-label="${I}"` : "", kt = !r && T ? `aria-labelledby="${T}"` : r ? `aria-labelledby="${i}"` : "";
     this.setAttribute("data-error", E ? "true" : "false"), t.innerHTML = `
-      <style>${Yt}</style>
+      <style>${Ut}</style>
       <div class="input-wrapper" part="wrapper">
         ${r ? `<label id="${i}" for="${e}" class="input-label" part="label">
                 ${r}${x ? '<span class="input-required" aria-hidden="true" part="required">*</span>' : ""}
@@ -2888,19 +3060,19 @@ class et extends u {
           id="${e}"
           type="${d}"
           value="${this._value}"
-          ${c ? `placeholder="${c}"` : ""}
-          ${h ? `name="${h}"` : ""}
-          ${p ? `autocomplete="${p}"` : ""}
+          ${h ? `placeholder="${h}"` : ""}
+          ${c ? `name="${c}"` : ""}
+          ${b ? `autocomplete="${b}"` : ""}
           ${m ? `maxlength="${m}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
           ${y ? `pattern="${y}"` : ""}
-          ${w ? `inputmode="${w}"` : ""}
-          ${S}
-          ${Et}
+          ${S ? `inputmode="${S}"` : ""}
+          ${$}
+          ${kt}
           ${D}
           ${E ? 'aria-invalid="true"' : ""}
           ${x ? 'aria-required="true"' : ""}
-          ${T ? "disabled" : ""}
+          ${C ? "disabled" : ""}
           ${A ? "readonly" : ""}
           part="field"
         />
@@ -2983,7 +3155,7 @@ class et extends u {
         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, R(t);
+        r == null || r.appendChild(a), this._errorEl = a, O(t);
       }
       this.updateAriaDescribedBy();
     } else
@@ -3036,7 +3208,7 @@ class et extends u {
     (t = this._inputEl) == null || t.select();
   }
 }
-b("a11y-input", et);
+p("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) => {
@@ -3116,38 +3288,38 @@ class it extends u {
     ));
   }
   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") || "", 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 = [];
+    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", h = this.getAttribute("placeholder") || "", c = this.getAttribute("name") || "", b = this.getAttribute("autocomplete") || "", m = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), y = this.getAttribute("aria-label") || "", S = this.getAttribute("aria-labelledby") || "", I = this.disabled, T = this.readOnly, C = 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}"` : "";
+    const E = x.length ? `aria-describedby="${x.join(" ")}"` : "", k = !r && y ? `aria-label="${y}"` : "", D = !r && S ? `aria-labelledby="${S}"` : r ? `aria-labelledby="${i}"` : "";
     this.setAttribute("data-error", A ? "true" : "false"), t.innerHTML = `
-      <style>${Vt}</style>
+      <style>${Gt}</style>
       <div class="textarea-wrapper" part="wrapper">
         ${r ? `<label id="${i}" for="${e}" class="textarea-label" part="label">
-                ${r}${T ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
+                ${r}${C ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
               </label>` : ""}
         <textarea
           id="${e}"
           rows="${d}"
-          ${c ? `placeholder="${c}"` : ""}
-          ${h ? `name="${h}"` : ""}
-          ${p ? `autocomplete="${p}"` : ""}
+          ${h ? `placeholder="${h}"` : ""}
+          ${c ? `name="${c}"` : ""}
+          ${b ? `autocomplete="${b}"` : ""}
           ${m ? `maxlength="${m}"` : ""}
           ${_ ? `minlength="${_}"` : ""}
           ${k}
           ${D}
           ${E}
           ${A ? 'aria-invalid="true"' : ""}
-          ${T ? 'aria-required="true"' : ""}
+          ${C ? 'aria-required="true"' : ""}
           ${I ? "disabled" : ""}
-          ${C ? "readonly" : ""}
+          ${T ? "readonly" : ""}
           part="field"
         >${this._value}</textarea>
         ${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 S = this.getAttribute("value");
-    S && this._textareaEl && (this._value = S, this._textareaEl.value = S);
+    const $ = this.getAttribute("value");
+    $ && this._textareaEl && (this._value = $, this._textareaEl.value = $);
   }
   setupEventListeners() {
     var t, e, i, s;
@@ -3218,7 +3390,7 @@ class it extends u {
         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, R(t);
+        r == null || r.appendChild(a), this._errorEl = a, O(t);
       }
       this.updateAriaDescribedBy();
     } else
@@ -3271,7 +3443,7 @@ class it extends u {
     (t = this._textareaEl) == null || t.select();
   }
 }
-b("a11y-textarea", it);
+p("a11y-textarea", it);
 class st extends u {
   constructor() {
     super(...arguments), this._buttonEl = null, this.handleClick = (t) => {
@@ -3337,13 +3509,13 @@ class st extends u {
     ));
   }
   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, o = this.discoverable, n = this.loading, d = r || n, c = r && !o;
+    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, h = r && !o;
     t.innerHTML = `
-      <style>${Gt}</style>
+      <style>${Vt}</style>
       <button
         class="variant-${e} size-${i}"
         type="${s}"
-        ${c ? "disabled" : ""}
+        ${h ? "disabled" : ""}
         ${d ? 'aria-disabled="true"' : ""}
         ${n ? 'aria-busy="true"' : ""}
         ${a ? `aria-label="${a}"` : ""}
@@ -3428,7 +3600,7 @@ class st extends u {
     (t = this._buttonEl) == null || t.click();
   }
 }
-b("a11y-button", st);
+p("a11y-button", st);
 class at extends u {
   constructor() {
     super(...arguments), this._label = "", this._disabled = !1;
@@ -3456,7 +3628,7 @@ class at extends u {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     const t = `${this._id}-label`;
     this.shadowRoot.innerHTML = `
-      <style>${Wt}</style>
+      <style>${Jt}</style>
       <div class="optgroup-wrapper" part="group">
         <div class="optgroup-label" part="label" id="${t}" role="presentation">
           ${this._label}
@@ -3633,9 +3805,9 @@ class ot extends u {
               const n = (a = this._typeAhead) == null ? void 0 : a.type(t.key);
               if (n) {
                 const d = e.findIndex(
-                  (c) => {
-                    var h;
-                    return (((h = c.textContent) == null ? void 0 : h.trim()) || "") === n && !c.effectivelyDisabled;
+                  (h) => {
+                    var c;
+                    return (((c = h.textContent) == null ? void 0 : c.trim()) || "") === n && !h.effectivelyDisabled;
                   }
                 );
                 d >= 0 && (i = d, s = !0);
@@ -3662,9 +3834,9 @@ class ot extends u {
               const n = (r = this._typeAhead) == null ? void 0 : r.type(t.key);
               if (n) {
                 const d = e.findIndex(
-                  (c) => {
-                    var h;
-                    return (((h = c.textContent) == null ? void 0 : h.trim()) || "") === n && !c.effectivelyDisabled;
+                  (h) => {
+                    var c;
+                    return (((c = h.textContent) == null ? void 0 : c.trim()) || "") === n && !h.effectivelyDisabled;
                   }
                 );
                 d >= 0 && (i = d, s = !0);
@@ -3678,8 +3850,8 @@ class ot extends u {
         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" : ""}`);
+          const d = ((o = n.textContent) == null ? void 0 : o.trim()) || n.value, h = this._values.has(n.value);
+          f(`${d}${h ? ", selected" : ""}`);
         }
       }
     };
@@ -3749,7 +3921,7 @@ class ot extends u {
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
-      <style>${Ut}</style>
+      <style>${Wt}</style>
       <div class="listbox-wrapper" part="wrapper">
         <slot></slot>
       </div>
@@ -3856,7 +4028,7 @@ class ot extends u {
         return ((i = e.textContent) == null ? void 0 : i.trim()) || "";
       }
     );
-    this._typeAhead = O(t, { timeout: 500 });
+    this._typeAhead = R(t, { timeout: 500 });
   }
   // ===== Attribute Changes =====
   onAttributeChange(t, e, i) {
@@ -3881,12 +4053,12 @@ class ot extends u {
     }
   }
 }
-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">
+p("a11y-optgroup", at);
+p("a11y-option", rt);
+p("a11y-listbox", ot);
+const le = `<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>`, ne = `<svg class="checkbox-dash" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+</svg>`, de = `<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 H extends u {
@@ -4006,18 +4178,18 @@ class H extends u {
     );
   }
   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, 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}"` : "";
+    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"), h = this.getAttribute("name") || "", c = this.getAttribute("aria-describedby") || "", b = [];
+    c && b.push(c), o && b.push(s), n && b.push(a);
+    const m = b.length ? `aria-describedby="${b.join(" ")}"` : "", _ = !r && d ? `aria-label="${d}"` : "";
     t.innerHTML = `
-      <style>${Jt}</style>
+      <style>${Qt}</style>
       <div class="checkbox-wrapper size-${this.size}" part="wrapper">
         <div class="checkbox-control">
           <input
             type="checkbox"
             class="checkbox-input"
             id="${e}"
-            ${c ? `name="${c}"` : ""}
+            ${h ? `name="${h}"` : ""}
             ${this.value ? `value="${this.value}"` : ""}
             ${this._checked ? "checked" : ""}
             ${this.disabled ? "disabled" : ""}
@@ -4028,8 +4200,8 @@ class H extends u {
             part="input"
           />
           <div class="checkbox-indicator" part="indicator" aria-hidden="true">
-            ${oe}
-            ${ne}
+            ${le}
+            ${de}
           </div>
         </div>
         ${r || o || n ? `<div class="checkbox-content">
@@ -4183,7 +4355,7 @@ class nt extends u {
   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>${Qt}</style>
+      <style>${Zt}</style>
       <fieldset
         part="fieldset"
         ${a ? `aria-label="${a}"` : ""}
@@ -4249,8 +4421,8 @@ class nt extends u {
     t && (this.disabled ? t.setAttribute("disabled", "") : t.removeAttribute("disabled"));
   }
 }
-b("a11y-checkbox", H);
-b("a11y-checkbox-group", nt);
+p("a11y-checkbox", H);
+p("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) => {
@@ -4377,7 +4549,7 @@ class lt extends u {
     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` : "", o = [a, r].filter(Boolean).join(" ");
     o ? this.setAttribute("aria-describedby", o) : this.removeAttribute("aria-describedby"), t.innerHTML = `
-      <style>${Zt}</style>
+      <style>${te}</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">
@@ -4527,7 +4699,7 @@ class dt extends u {
     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>${te}</style>
+      <style>${ee}</style>
       <div class="radio-wrapper" part="wrapper">
         <div class="radio-control" part="control">
           <input
@@ -4588,9 +4760,9 @@ class dt extends u {
       }
   }
 }
-b("a11y-radio-group", lt);
-b("a11y-radio", dt);
-class ht extends u {
+p("a11y-radio-group", lt);
+p("a11y-radio", dt);
+class ct extends u {
   constructor() {
     super(...arguments), this._toasts = [], this._counter = 0, this._containerEl = null, this._maxToasts = 5, this._handleClick = (t) => {
       var a;
@@ -4628,7 +4800,7 @@ class ht extends u {
   render() {
     const t = this.attachShadow({ mode: "open" });
     t.innerHTML = `
-      <style>${ee}</style>
+      <style>${ie}</style>
       <div
         class="toast-container"
         role="region"
@@ -4728,8 +4900,8 @@ class ht extends u {
     return e.textContent = t, e.innerHTML;
   }
 }
-b("a11y-toast", ht);
-class ct extends u {
+p("a11y-toast", ct);
+class ht extends u {
   static get observedAttributes() {
     return ["focusable"];
   }
@@ -4739,7 +4911,7 @@ class ct extends u {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
       <style>
         :host {
-          ${V}
+          ${U}
         }
 
         :host([hidden]) {
@@ -4767,8 +4939,8 @@ class ct extends u {
   cleanupEventListeners() {
   }
 }
-b("a11y-visually-hidden", ct);
-const le = $("SkipLink");
+p("a11y-visually-hidden", ht);
+const ce = w("SkipLink");
 class ut extends u {
   constructor() {
     super(...arguments), this.handleClick = (t) => {
@@ -4780,7 +4952,7 @@ class ut extends u {
     return ["target", "label"];
   }
   setupAccessibility() {
-    this.getAttribute("target") || le.warning(
+    this.getAttribute("target") || ce.warning(
       'Missing "target" attribute. Provide a CSS selector (e.g. target="#main-content") pointing to the skip destination.'
     );
   }
@@ -4798,7 +4970,7 @@ class ut extends u {
         }
 
         .skip-link {
-          ${V}
+          ${U}
           display: inline-block;
           text-decoration: none;
         }
@@ -4848,8 +5020,8 @@ class ut extends u {
     (t === "target" || t === "label") && this.render();
   }
 }
-b("a11y-skip-link", ut);
-const de = $("Alert"), he = `
+p("a11y-skip-link", ut);
+const he = w("Alert"), ue = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -4984,7 +5156,7 @@ const de = $("Alert"), he = `
   error: "❌"
   // ❌
 };
-class bt extends u {
+class pt extends u {
   constructor() {
     super(...arguments), this._closeButton = null, this.handleDismiss = () => {
       this.emit("dismiss", { type: this.alertType }), this.remove();
@@ -5007,7 +5179,7 @@ class bt extends u {
   }
   setupAccessibility() {
     const t = ["info", "success", "warning", "error"], e = this.getAttribute("type");
-    e && !t.includes(e) && de.warning(
+    e && !t.includes(e) && he.warning(
       `Invalid type="${e}". Use one of: ${t.join(", ")}.`
     );
   }
@@ -5015,7 +5187,7 @@ class bt extends u {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     const t = this.getAttribute("title"), e = this.hasAttribute("dismissible"), i = F[this.alertType] || F.info;
     this.shadowRoot.innerHTML = `
-      <style>${he}</style>
+      <style>${ue}</style>
       <div
         class="alert"
         role="${this.alertRole}"
@@ -5056,8 +5228,8 @@ class bt extends u {
     this.handleDismiss();
   }
 }
-b("a11y-alert", bt);
-const ce = `
+p("a11y-alert", pt);
+const pe = `
   :host {
     display: inline;
   }
@@ -5123,7 +5295,7 @@ const ce = `
     }
   }
 `;
-class pt extends u {
+class bt extends u {
   static get observedAttributes() {
     return ["href", "external", "current", "disabled"];
   }
@@ -5139,7 +5311,7 @@ class pt extends u {
           <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>
+      <style>${pe}</style>
       <a ${a.join(" ")} part="link">
         <slot></slot>${r}${o}
       </a>
@@ -5149,7 +5321,7 @@ class pt extends u {
     ["href", "external", "current", "disabled"].includes(t) && this.render();
   }
 }
-b("a11y-link", pt);
+p("a11y-link", bt);
 const gt = `
   :host {
     display: block;
@@ -5214,7 +5386,7 @@ const gt = `
       color: CanvasText;
     }
   }
-`, ue = `
+`, be = `
   ${gt}
 
   h1, h2, h3, h4, h5, h6 {
@@ -5229,7 +5401,7 @@ const gt = `
   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 = `
+`, ge = `
   ${gt}
 
   p, span, div, label {
@@ -5255,7 +5427,7 @@ class ft extends u {
     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>
+      <style>${be}</style>
       <${t} class="${s}" part="heading">
         <slot></slot>
       </${t}>
@@ -5279,7 +5451,7 @@ class vt extends u {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     const t = this.tagName_, e = mt(this, "md");
     this.shadowRoot.innerHTML = `
-      <style>${be}</style>
+      <style>${ge}</style>
       <${t} class="${e}" part="text">
         <slot></slot>
       </${t}>
@@ -5289,9 +5461,9 @@ class vt extends u {
     this.render();
   }
 }
-b("a11y-heading", ft);
-b("a11y-text", vt);
-const pe = `
+p("a11y-heading", ft);
+p("a11y-text", vt);
+const me = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -5369,7 +5541,7 @@ class yt extends u {
     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>
+      <style>${me}</style>
       <div class="field-wrapper" part="wrapper">
         ${t ? `<label
                 class="field-label"
@@ -5403,61 +5575,61 @@ class yt extends u {
       (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 s = this.getAttribute("label") || "", a = this.getAttribute("hint") || "", r = this.getAttribute("error") || "", o = this.hasAttribute("required"), n = this.hasAttribute("disabled"), d = !!r, h = `${this._id}-label`, c = `${this._id}-hint`, b = `${this._id}-error`;
+    s && !i.hasAttribute("aria-label") && i.setAttribute("aria-labelledby", h);
     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"));
+    a && m.push(c), d && m.push(b), 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;
+p("a11y-form-field", yt);
+const K = w("Popover");
+function fe(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), h = n === -1 ? "center" : e.slice(n + 1);
+  let c = 0, b = 0;
   switch (d) {
     case "top":
-      h = l.top - o - i;
+      c = l.top - o - i;
       break;
     case "bottom":
-      h = l.bottom + i;
+      c = l.bottom + i;
       break;
     case "left":
-      p = l.left - r - i;
+      b = l.left - r - i;
       break;
     case "right":
-      p = l.right + i;
+      b = l.right + i;
       break;
   }
   if (d === "top" || d === "bottom")
-    switch (c) {
+    switch (h) {
       case "start":
-        p = l.left;
+        b = l.left;
         break;
       case "end":
-        p = l.right - r;
+        b = l.right - r;
         break;
       default:
-        p = l.left + (l.width - r) / 2;
+        b = l.left + (l.width - r) / 2;
     }
   else
-    switch (c) {
+    switch (h) {
       case "start":
-        h = l.top;
+        c = l.top;
         break;
       case "end":
-        h = l.bottom - o;
+        c = l.bottom - o;
         break;
       default:
-        h = l.top + (l.height - o) / 2;
+        c = 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);
+  d === "bottom" && c + o > a && l.top - o - i > 0 ? c = l.top - o - i : d === "top" && c < 0 && l.bottom + i + o < a ? c = l.bottom + i : d === "right" && b + r > s && l.left - r - i > 0 ? b = l.left - r - i : d === "left" && b < 0 && l.right + i + r < s && (b = 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 };
+  return b = Math.max(m, Math.min(b, s - r - m)), c = Math.max(m, Math.min(c, a - o - m)), { top: c, left: b };
 }
-const me = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary', fe = `
+const ve = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), details > summary', ye = `
   :host {
     display: inline-block;
   }
@@ -5514,7 +5686,7 @@ const me = 'button:not([disabled]), [href], input:not([disabled]), select:not([d
 `;
 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 = () => {
+    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._weMovedFocus = !1, this._onTriggerSlotChange = () => {
       const t = `${this._id}-content`;
       this._wireTrigger(t);
     }, this._onOutsidePointerDown = (t) => {
@@ -5562,7 +5734,7 @@ class _t extends u {
     this.shadowRoot || this.attachShadow({ mode: "open" });
     const t = `${this._id}-content`, e = this._contentLabel ? `aria-label="${this._contentLabel}"` : "";
     this.shadowRoot.innerHTML = `
-      <style>${fe}</style>
+      <style>${ye}</style>
       <slot name="trigger" part="trigger-slot"></slot>
       <div
         class="popover-content"
@@ -5624,7 +5796,7 @@ class _t extends u {
     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(
+    typeof process < "u" && ((r = process.env) == null ? void 0 : r.NODE_ENV) !== "production" && (s || K.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));
@@ -5647,14 +5819,14 @@ class _t extends u {
   // ─── Open / Close ──────────────────────────────────────────────────────────
   _show() {
     var t;
-    this._contentEl && (this._focusOrigin = document.activeElement, this._contentEl.removeAttribute("hidden"), this._updateTriggerAria(), this._updatePosition(), requestAnimationFrame(() => {
+    this._contentEl && (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(
+      !i && !s && K.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>'
       );
@@ -5664,7 +5836,7 @@ class _t extends u {
       const i = this._contentEl;
       if (!i) return;
       let s = null;
-      e === "first" && (s = i.querySelector(me)), s || (s = i), this._weMovedFocus = !0, s.focus();
+      e === "first" && (s = i.querySelector(ve)), s || (s = i), this._weMovedFocus = !0, s.focus();
     }), this._addGlobalListeners(), this.emit("a11y-popover-open"));
   }
   _hide() {
@@ -5677,12 +5849,12 @@ class _t extends u {
     };
     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");
+    this._weMovedFocus = !1, 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(
+    const t = this._triggerEl.getBoundingClientRect(), { top: e, left: i } = fe(
       t,
       this._contentEl,
       this._placement,
@@ -5698,14 +5870,14 @@ class _t extends u {
     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");
+p("a11y-popover", _t);
+const _e = w("A11yAccordion");
 let N = !1;
-function ye() {
+function xe() {
   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);
+  l.setAttribute("data-compa11y-accordion", ""), l.textContent = se, document.head.appendChild(l);
 }
 class xt extends u {
   constructor() {
@@ -5718,7 +5890,7 @@ class xt extends u {
         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.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), _e.checks.accessibleLabel(
           t,
           `a11y-accordion trigger[${e}]`
         );
@@ -5731,13 +5903,13 @@ class xt extends u {
       const a = this._triggers.indexOf(i);
       a !== -1 && this.toggleItem(a);
     }, this.handleKeyDown = (t) => {
-      var o, n, d, c;
+      var o, n, d, h;
       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"
+        (c) => !c.hasAttribute("disabled") && c.getAttribute("aria-disabled") !== "true"
       ), r = a.indexOf(i);
       if (r !== -1)
         switch (t.key) {
@@ -5751,7 +5923,7 @@ class xt extends u {
             t.preventDefault(), (d = a[0]) == null || d.focus();
             break;
           case "End":
-            t.preventDefault(), (c = a[a.length - 1]) == null || c.focus();
+            t.preventDefault(), (h = a[a.length - 1]) == null || h.focus();
             break;
         }
     };
@@ -5768,7 +5940,7 @@ class xt extends u {
     return this.hasAttribute("collapsible");
   }
   setupAccessibility() {
-    ye(), this.updateItems();
+    xe(), this.updateItems();
   }
   render() {
     this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
@@ -5798,14 +5970,14 @@ class xt extends u {
   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 ? i.push(t) : e || this._openItems.forEach((h) => i.push(h)) : e && i.push(t);
+    const s = document.activeElement, a = i.find((h) => {
+      const c = this._panels[h];
+      return c && c.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();
+      var h;
+      (h = this._triggers[a]) == null || h.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", {
@@ -5834,14 +6006,14 @@ class xt extends u {
     this.toggleItem(t);
   }
 }
-b("a11y-accordion", xt);
-const j = $("A11yTable");
+p("a11y-accordion", xt);
+const j = w("A11yTable");
 let Y = !1;
-function _e() {
+function Ae() {
   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);
+  l.setAttribute("data-compa11y-table", ""), l.textContent = ae, document.head.appendChild(l);
 }
 class At extends u {
   constructor() {
@@ -5949,7 +6121,7 @@ class At extends u {
     }
   }
   setupAccessibility() {
-    _e(), this.upgradeProperty("columns"), this.upgradeProperty("rows"), this.upgradeProperty("selectedRows"), this.upgradeProperty("sortKey"), this.upgradeProperty("sortDirection");
+    Ae(), 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");
@@ -6130,15 +6302,403 @@ class At extends u {
     });
   }
 }
-b("a11y-table", At);
+p("a11y-table", At);
+const Ee = w("Pagination");
+function ke(l, t, e, i) {
+  if (t <= 0) return [];
+  if (t === 1) return [1];
+  const s = /* @__PURE__ */ new Set();
+  for (let o = 1; o <= Math.min(i, t); o++)
+    s.add(o);
+  for (let o = Math.max(t - i + 1, 1); o <= t; o++)
+    s.add(o);
+  for (let o = Math.max(l - e, 1); o <= Math.min(l + e, t); o++)
+    s.add(o);
+  const a = Array.from(s).sort((o, n) => o - n), r = [];
+  for (let o = 0; o < a.length; o++) {
+    const n = a[o], d = a[o - 1];
+    if (n !== void 0) {
+      if (d !== void 0) {
+        const h = n - d;
+        if (h === 2)
+          r.push(d + 1);
+        else if (h > 2) {
+          const c = (d + n) / 2;
+          r.push(c < l ? "ellipsis-start" : "ellipsis-end");
+        }
+      }
+      r.push(n);
+    }
+  }
+  return r;
+}
+class Et extends u {
+  constructor() {
+    super(...arguments), this._currentPage = 1, this._totalPages = 1, this._totalItems = null, this._pageSize = 25, this._siblingCount = 1, this._boundaryCount = 1, this._showFirstLast = !1, this._showPageSize = !1, this._showJumpTo = !1, this._disabled = !1, this._pageSizeOptions = [10, 25, 50], this._handleClick = (t) => {
+      const e = t.target.closest(
+        "button[data-action]"
+      );
+      if (!e || e.disabled) return;
+      switch (e.dataset.action) {
+        case "first":
+          this._goToPage(1, "first");
+          break;
+        case "prev":
+          this._goToPage(this._currentPage - 1, "prev");
+          break;
+        case "page": {
+          const s = parseInt(e.dataset.page ?? "", 10);
+          isNaN(s) || this._goToPage(s, "page");
+          break;
+        }
+        case "next":
+          this._goToPage(this._currentPage + 1, "next");
+          break;
+        case "last":
+          this._goToPage(this._totalPages, "last");
+          break;
+      }
+    }, this._handleChange = (t) => {
+      const e = t.target;
+      if (!e.matches("[data-compa11y-pagination-pagesize]")) return;
+      const i = parseInt(e.value, 10);
+      this._pageSize = i, this._recomputeTotalPages(), this._currentPage = 1, this._syncUI(), this._totalItems != null ? f(
+        `Showing 1–${Math.min(i, this._totalItems)} of ${this._totalItems}`
+      ) : f(`Page 1 of ${this._totalPages}`), this.emit("page-change", { page: 1 }), this.emit("page-size-change", { pageSize: i });
+    }, this._handleKeyDown = (t) => {
+      var r;
+      const e = t.target;
+      if (!e.matches("[data-compa11y-pagination-jump]") || t.key !== "Enter") return;
+      const i = e, s = parseInt(i.value, 10), a = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+        "[data-compa11y-pagination-error]"
+      );
+      if (isNaN(s) || s < 1 || s > this._totalPages) {
+        a && (a.textContent = `Enter a page between 1 and ${this._totalPages}`, a.style.display = "", i.setAttribute("aria-describedby", `${this._id}-jump-error`));
+        return;
+      }
+      a && (a.textContent = "", a.style.display = "none", i.removeAttribute("aria-describedby")), this._goToPage(s, "page"), i.value = "";
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "current-page",
+      "total-pages",
+      "total-items",
+      "page-size",
+      "page-size-options",
+      "show-first-last",
+      "show-page-size",
+      "show-jump-to",
+      "sibling-count",
+      "boundary-count",
+      "disabled",
+      "aria-label"
+    ];
+  }
+  // ------------------------------------------------------------------
+  // Attribute-backed properties
+  // ------------------------------------------------------------------
+  get currentPage() {
+    return this._currentPage;
+  }
+  set currentPage(t) {
+    const e = Math.max(1, Math.min(t, this._totalPages));
+    e !== this._currentPage && (this._currentPage = e, this._syncUI());
+  }
+  get totalPages() {
+    return this._totalPages;
+  }
+  set totalPages(t) {
+    this._totalPages = Math.max(1, t), this._syncUI();
+  }
+  // ------------------------------------------------------------------
+  // Lifecycle
+  // ------------------------------------------------------------------
+  setupAccessibility() {
+    this._readAttributes();
+  }
+  render() {
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${re}</style>
+      <nav part="nav" data-compa11y-pagination>
+        <div
+          class="sr-only"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          part="live-region"
+        ></div>
+        <ul part="list"></ul>
+        <div class="extras" part="extras"></div>
+      </nav>
+    `, this._syncUI();
+  }
+  setupEventListeners() {
+    const t = this.shadowRoot;
+    t == null || t.addEventListener("click", this._handleClick), t == null || t.addEventListener("change", this._handleChange), t == null || t.addEventListener("keydown", this._handleKeyDown);
+  }
+  cleanupEventListeners() {
+    const t = this.shadowRoot;
+    t == null || t.removeEventListener("click", this._handleClick), t == null || t.removeEventListener("change", this._handleChange), t == null || t.removeEventListener("keydown", this._handleKeyDown);
+  }
+  onAttributeChange(t, e, i) {
+    var s;
+    switch (t) {
+      case "current-page":
+        this._currentPage = Math.max(
+          1,
+          Math.min(parseInt(i ?? "1", 10), this._totalPages)
+        );
+        break;
+      case "total-pages":
+        this._totalPages = Math.max(1, parseInt(i ?? "1", 10));
+        break;
+      case "total-items":
+        this._totalItems = i != null ? parseInt(i, 10) : null, this._recomputeTotalPages();
+        break;
+      case "page-size":
+        this._pageSize = Math.max(1, parseInt(i ?? "25", 10)), this._recomputeTotalPages();
+        break;
+      case "page-size-options":
+        i && (this._pageSizeOptions = i.split(",").map((a) => parseInt(a.trim(), 10)).filter((a) => !isNaN(a) && a > 0));
+        break;
+      case "show-first-last":
+        this._showFirstLast = i !== null;
+        break;
+      case "show-page-size":
+        this._showPageSize = i !== null;
+        break;
+      case "show-jump-to":
+        this._showJumpTo = i !== null;
+        break;
+      case "sibling-count":
+        this._siblingCount = Math.max(0, parseInt(i ?? "1", 10));
+        break;
+      case "boundary-count":
+        this._boundaryCount = Math.max(0, parseInt(i ?? "1", 10));
+        break;
+      case "disabled":
+        this._disabled = i !== null;
+        break;
+      case "aria-label": {
+        const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector("nav");
+        a && a.setAttribute("aria-label", i ?? "Pagination");
+        return;
+      }
+    }
+    this._syncUI();
+  }
+  // ------------------------------------------------------------------
+  // Internal helpers
+  // ------------------------------------------------------------------
+  _readAttributes() {
+    const t = (i) => this.getAttribute(i);
+    this._currentPage = Math.max(1, parseInt(t("current-page") ?? "1", 10)), this._totalPages = Math.max(1, parseInt(t("total-pages") ?? "1", 10)), this._totalItems = t("total-items") != null ? parseInt(t("total-items"), 10) : null, this._pageSize = Math.max(1, parseInt(t("page-size") ?? "25", 10)), this._siblingCount = Math.max(
+      0,
+      parseInt(t("sibling-count") ?? "1", 10)
+    ), this._boundaryCount = Math.max(
+      0,
+      parseInt(t("boundary-count") ?? "1", 10)
+    ), this._showFirstLast = this.hasAttribute("show-first-last"), this._showPageSize = this.hasAttribute("show-page-size"), this._showJumpTo = this.hasAttribute("show-jump-to"), this._disabled = this.hasAttribute("disabled");
+    const e = t("page-size-options");
+    e && (this._pageSizeOptions = e.split(",").map((i) => parseInt(i.trim(), 10)).filter((i) => !isNaN(i) && i > 0)), this._recomputeTotalPages(), this._devWarnings();
+  }
+  _recomputeTotalPages() {
+    this._totalItems != null && (this._totalPages = Math.max(
+      1,
+      Math.ceil(this._totalItems / this._pageSize)
+    ));
+  }
+  _devWarnings() {
+    this.hasAttribute("total-pages") || this.hasAttribute("total-items") || Ee.error(
+      "Either total-pages or total-items attribute is required.",
+      'Add total-pages="n" or total-items="n" to <a11y-pagination>.'
+    );
+  }
+  _ariaLabel() {
+    return this.getAttribute("aria-label") ?? "Pagination";
+  }
+  _announce(t) {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('[role="status"]');
+    e && (e.textContent = t, setTimeout(() => {
+      e.textContent = "";
+    }, 1e3));
+  }
+  _goToPage(t, e) {
+    if (!(t < 1 || t > this._totalPages || t === this._currentPage)) {
+      if (this._currentPage = t, this._syncUI(), e !== void 0) {
+        const i = e;
+        requestAnimationFrame(() => this._restoreFocus(i, t));
+      }
+      this._announce(`Page ${t} of ${this._totalPages}`), this.emit("page-change", { page: t });
+    }
+  }
+  _restoreFocus(t, e) {
+    if (!this.shadowRoot) return;
+    let i = null;
+    t === "page" ? i = this.shadowRoot.querySelector(`button[data-page="${e}"]`) : (i = this.shadowRoot.querySelector(`button[data-action="${t}"]`), i && i.disabled && (t === "prev" || t === "first" ? i = this.shadowRoot.querySelector('button[data-action="next"]:not([disabled])') ?? this.shadowRoot.querySelector('button[data-action="last"]:not([disabled])') : i = this.shadowRoot.querySelector('button[data-action="prev"]:not([disabled])') ?? this.shadowRoot.querySelector('button[data-action="first"]:not([disabled])'))), i == null || i.focus();
+  }
+  // ------------------------------------------------------------------
+  // Full UI sync
+  // ------------------------------------------------------------------
+  _syncUI() {
+    if (!this.shadowRoot) return;
+    const t = this.shadowRoot.querySelector("nav");
+    t && t.setAttribute("aria-label", this._ariaLabel()), this._renderList(), this._renderExtras();
+  }
+  _renderList() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("ul");
+    if (!t) return;
+    const e = this._currentPage <= 1, i = this._currentPage >= this._totalPages, s = this._disabled, a = [];
+    this._showFirstLast && a.push(
+      `<li>
+          <button
+            type="button"
+            aria-label="First page"
+            data-compa11y-pagination-btn
+            data-action="first"
+            ${e || s ? "disabled" : ""}
+            part="btn btn-first"
+          >«</button>
+        </li>`
+    ), a.push(
+      `<li>
+        <button
+          type="button"
+          aria-label="Previous page"
+          data-compa11y-pagination-btn
+          data-action="prev"
+          ${e || s ? "disabled" : ""}
+          part="btn btn-prev"
+        >‹</button>
+      </li>`
+    );
+    const r = ke(
+      this._currentPage,
+      this._totalPages,
+      this._siblingCount,
+      this._boundaryCount
+    );
+    for (const n of r) {
+      if (n === "ellipsis-start" || n === "ellipsis-end") {
+        a.push(
+          '<li aria-hidden="true" part="ellipsis"><span>…</span></li>'
+        );
+        continue;
+      }
+      const d = n === this._currentPage;
+      a.push(
+        `<li>
+          <button
+            type="button"
+            aria-label="Page ${n}"
+            ${d ? 'aria-current="page"' : ""}
+            ${s ? "disabled" : ""}
+            data-compa11y-pagination-btn
+            data-compa11y-pagination-page
+            data-current="${d}"
+            data-action="page"
+            data-page="${n}"
+            part="btn btn-page${d ? " btn-current" : ""}"
+          >${n}</button>
+        </li>`
+      );
+    }
+    a.push(
+      `<li>
+        <button
+          type="button"
+          aria-label="Next page"
+          data-compa11y-pagination-btn
+          data-action="next"
+          ${i || s ? "disabled" : ""}
+          part="btn btn-next"
+        >›</button>
+      </li>`
+    ), this._showFirstLast && a.push(
+      `<li>
+          <button
+            type="button"
+            aria-label="Last page"
+            data-compa11y-pagination-btn
+            data-action="last"
+            ${i || s ? "disabled" : ""}
+            part="btn btn-last"
+          >»</button>
+        </li>`
+    ), t.innerHTML = a.join("");
+  }
+  _renderExtras() {
+    var i;
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".extras");
+    if (!t) return;
+    const e = [];
+    if (this._showPageSize) {
+      const s = this._pageSizeOptions.map(
+        (a) => `<option value="${a}"${a === this._pageSize ? " selected" : ""}>${a}</option>`
+      ).join("");
+      e.push(
+        `<div class="page-size-wrapper" part="page-size-wrapper">
+          <label for="${this._id}-pagesize">Rows per page</label>
+          <select
+            id="${this._id}-pagesize"
+            data-compa11y-pagination-pagesize
+            ${this._disabled ? "disabled" : ""}
+            part="page-size-select"
+          >${s}</select>
+        </div>`
+      );
+    }
+    this._showJumpTo && e.push(
+      `<div class="jump-wrapper" part="jump-wrapper">
+          <label for="${this._id}-jump">Go to page</label>
+          <input
+            id="${this._id}-jump"
+            type="number"
+            min="1"
+            max="${this._totalPages}"
+            data-compa11y-pagination-jump
+            ${this._disabled ? "disabled" : ""}
+            part="jump-input"
+          />
+          <span
+            id="${this._id}-jump-error"
+            role="alert"
+            data-compa11y-pagination-error
+            part="jump-error"
+            style="display:none"
+          ></span>
+        </div>`
+    ), t.innerHTML = e.join("");
+  }
+  // ------------------------------------------------------------------
+  // Public API
+  // ------------------------------------------------------------------
+  /** Navigate to a specific page. */
+  goTo(t) {
+    this._goToPage(t);
+  }
+  /** Navigate to the next page. */
+  next() {
+    this._goToPage(this._currentPage + 1);
+  }
+  /** Navigate to the previous page. */
+  previous() {
+    this._goToPage(this._currentPage - 1);
+  }
+}
+p("a11y-pagination", Et);
 if (typeof window < "u") {
   const l = () => {
-    M(), B();
+    B(), P();
   };
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", l) : l(), window.compa11y = {
     // Components (classes)
-    A11yDialog: X,
-    A11yMenu: W,
+    A11yDialog: W,
+    A11yMenu: X,
     A11yTabs: J,
     A11yCombobox: Q,
     A11ySwitch: Z,
@@ -6153,60 +6713,62 @@ if (typeof window < "u") {
     A11yCheckboxGroup: nt,
     A11yRadioGroup: lt,
     A11yRadio: dt,
-    A11yToast: ht,
-    A11yVisuallyHidden: ct,
+    A11yToast: ct,
+    A11yVisuallyHidden: ht,
     A11ySkipLink: ut,
-    A11yAlert: bt,
-    A11yLink: pt,
+    A11yAlert: pt,
+    A11yLink: bt,
     A11yHeading: ft,
     A11yText: vt,
     A11yFormField: yt,
     A11yPopover: _t,
     A11yAccordion: xt,
     A11yTable: At,
+    A11yPagination: Et,
     // Announcer utilities
-    initAnnouncer: M,
+    initAnnouncer: B,
     announce: v,
     announcePolite: f,
-    announceAssertive: R,
+    announceAssertive: O,
     announceStatus: Bt,
-    announceError: Ht,
+    announceError: Pt,
     // Focus utilities
-    initFocusVisible: B,
-    createFocusTrap: Rt,
+    initFocusVisible: P,
+    createFocusTrap: Ht,
     createFocusScope: Ot,
-    createRovingTabindex: qt,
+    createRovingTabindex: Rt,
     // Keyboard utilities
-    createKeyboardManager: Dt,
-    KeyboardPatterns: zt,
-    createTypeAhead: O,
+    createKeyboardManager: qt,
+    KeyboardPatterns: Dt,
+    createTypeAhead: R,
     // ARIA utilities
-    aria: Tt,
+    aria: zt,
     buildAriaProps: Ct,
-    hasAccessibleName: It,
+    hasAccessibleName: Tt,
     // Platform detection
-    isBrowser: $t,
+    isBrowser: It,
     prefersReducedMotion: Lt,
-    prefersHighContrast: St,
-    prefersDarkMode: wt
+    prefersHighContrast: $t,
+    prefersDarkMode: St
   };
 }
 export {
   xt as A11yAccordion,
-  bt as A11yAlert,
+  pt as A11yAlert,
   st as A11yButton,
   H as A11yCheckbox,
   nt as A11yCheckboxGroup,
   Q as A11yCombobox,
-  X as A11yDialog,
+  W as A11yDialog,
   yt as A11yFormField,
   ft as A11yHeading,
   et as A11yInput,
-  pt as A11yLink,
+  bt as A11yLink,
   ot as A11yListbox,
-  W as A11yMenu,
+  X as A11yMenu,
   at as A11yOptgroup,
   rt as A11yOption,
+  Et as A11yPagination,
   _t as A11yPopover,
   dt as A11yRadio,
   lt as A11yRadioGroup,
@@ -6217,26 +6779,26 @@ export {
   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
+  ct as A11yToast,
+  ht as A11yVisuallyHidden,
+  Le as KeyboardPatterns,
+  Ie as announce,
+  Te as announceAssertive,
+  Ce as announceError,
+  ze as announcePolite,
+  De as announceStatus,
+  qe as aria,
+  Re as buildAriaProps,
+  Oe as createFocusScope,
+  He as createFocusTrap,
+  Pe as createKeyboardManager,
+  Be as createRovingTabindex,
+  Me as createTypeAhead,
+  Fe as hasAccessibleName,
+  Ke as initAnnouncer,
+  Ne as initFocusVisible,
+  je as isBrowser,
+  Ye as prefersDarkMode,
+  Ue as prefersHighContrast,
+  Ge as prefersReducedMotion
 };