@compa11y/web 0.1.0 → 0.1.2

package/dist/compa11y.js

@@ -1,8 +1,8 @@
-import { generateId as E, announce as r, announcePolite as g, prefersDarkMode as k, prefersHighContrast as A, prefersReducedMotion as I, isBrowser as L, hasAccessibleName as S, buildAriaProps as C, aria as $, createTypeAhead as T, KeyboardPatterns as D, createKeyboardManager as O, createRovingTabindex as z, createFocusScope as q, createFocusTrap as M, initFocusVisible as p, announceError as R, announceStatus as H, announceAssertive as V, initAnnouncer as b } from "@compa11y/core";
-import { KeyboardPatterns as G, announce as W, announceAssertive as J, announceError as Q, announcePolite as Z, announceStatus as tt, aria as et, buildAriaProps as it, createFocusScope as st, createFocusTrap as ot, createKeyboardManager as at, createRovingTabindex as nt, createTypeAhead as lt, hasAccessibleName as rt, initAnnouncer as ht, initFocusVisible as dt, isBrowser as ct, prefersDarkMode as ut, prefersHighContrast as pt, prefersReducedMotion as bt } from "@compa11y/core";
-class h extends HTMLElement {
+import { generateId as te, announce as v, announcePolite as p, createTypeAhead as q, announceAssertive as D, prefersDarkMode as ie, prefersHighContrast as se, prefersReducedMotion as ae, isBrowser as re, hasAccessibleName as oe, buildAriaProps as le, aria as ne, KeyboardPatterns as he, createKeyboardManager as de, createRovingTabindex as ce, createFocusScope as ue, createFocusTrap as be, initFocusVisible as T, announceError as pe, announceStatus as ge, initAnnouncer as R } from "@compa11y/core";
+import { KeyboardPatterns as He, announce as Me, announceAssertive as Ke, announceError as Fe, announcePolite as Ne, announceStatus as Pe, aria as je, buildAriaProps as Ue, createFocusScope as Ye, createFocusTrap as Ge, createKeyboardManager as Xe, createRovingTabindex as Ve, createTypeAhead as We, hasAccessibleName as Je, initAnnouncer as Qe, initFocusVisible as Ze, isBrowser as et, prefersDarkMode as tt, prefersHighContrast as it, prefersReducedMotion as st } from "@compa11y/core";
+class c extends HTMLElement {
   constructor() {
-    super(), this._internals = null, this._id = E(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), this._internals = null, this._id = te(this.tagName.toLowerCase().replace("a11y-", "")), "attachInternals" in this && (this._internals = this.attachInternals());
   }
   /**
    * Standard observed attributes
@@ -25,8 +25,8 @@ class h extends HTMLElement {
   /**
    * Called when observed attributes change
    */
-  attributeChangedCallback(t, e, i) {
-    e !== i && this.onAttributeChange(t, e, i);
+  attributeChangedCallback(e, t, i) {
+    t !== i && this.onAttributeChange(e, t, i);
   }
   /**
    * Set up event listeners
@@ -41,15 +41,15 @@ class h extends HTMLElement {
   /**
    * Handle attribute changes
    */
-  onAttributeChange(t, e, i) {
+  onAttributeChange(e, t, i) {
   }
   /**
    * Emit a custom event
    */
-  emit(t, e) {
+  emit(e, t) {
     return this.dispatchEvent(
-      new CustomEvent(t, {
-        detail: e,
+      new CustomEvent(e, {
+        detail: t,
         bubbles: !0,
         composed: !0,
         cancelable: !0
@@ -59,25 +59,25 @@ class h extends HTMLElement {
   /**
    * Query a slot
    */
-  getSlot(t) {
-    var e;
-    return ((e = this.shadowRoot) == null ? void 0 : e.querySelector(`slot[name="${t}"]`)) ?? null;
+  getSlot(e) {
+    var t;
+    return ((t = this.shadowRoot) == null ? void 0 : t.querySelector(`slot[name="${e}"]`)) ?? null;
   }
   /**
    * Get slotted elements
    */
-  getSlottedElements(t) {
+  getSlottedElements(e) {
     var s;
-    const e = t ? `slot[name="${t}"]` : "slot:not([name])", i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
-      e
+    const t = e ? `slot[name="${e}"]` : "slot:not([name])", i = (s = this.shadowRoot) == null ? void 0 : s.querySelector(
+      t
     );
     return (i == null ? void 0 : i.assignedElements()) ?? [];
   }
 }
-function d(n, t) {
-  customElements.get(n) || customElements.define(n, t);
+function u(n, e) {
+  customElements.get(n) || customElements.define(n, e);
 }
-const f = `
+const H = `
   appearance: none;
   background: none;
   border: none;
@@ -86,13 +86,13 @@ const f = `
   font: inherit;
   color: inherit;
   cursor: pointer;
-`, K = `
+`, me = `
   :host(:focus-visible),
   :focus-visible {
     outline: 2px solid var(--compa11y-focus-color, #0066cc);
     outline-offset: 2px;
   }
-`, c = `
+`, b = `
   :host {
     display: block;
     box-sizing: border-box;
@@ -108,9 +108,9 @@ const f = `
     box-sizing: inherit;
   }
 
-  ${K}
-`, B = `
-  ${c}
+  ${me}
+`, ve = `
+  ${b}
 
   :host {
     position: fixed;
@@ -148,8 +148,8 @@ const f = `
     margin: 0 0 1rem 0;
     color: var(--compa11y-dialog-description-color, #666);
   }
-`, F = `
-  ${c}
+`, fe = `
+  ${b}
 
   :host {
     position: relative;
@@ -200,8 +200,8 @@ const f = `
     margin: 0.25rem 0;
     background: var(--compa11y-menu-separator-color, #e0e0e0);
   }
-`, P = `
-  ${c}
+`, _e = `
+  ${b}
 
   .tablist {
     display: flex;
@@ -216,7 +216,7 @@ const f = `
   }
 
   ::slotted([role="tab"]) {
-    ${f}
+    ${H}
     padding: var(--compa11y-tab-padding, 0.75rem 1rem);
     border-bottom: 2px solid transparent;
     margin-bottom: -1px;
@@ -246,8 +246,8 @@ const f = `
   ::slotted([role="tabpanel"][hidden]) {
     display: none;
   }
-`, N = `
-  ${c}
+`, ye = `
+  ${b}
 
   :host {
     display: inline-block;
@@ -305,7 +305,7 @@ const f = `
   }
 
   .clear-button {
-    ${f}
+    ${H}
     position: absolute;
     right: 1.5rem;
     width: 1.25rem;
@@ -387,8 +387,138 @@ const f = `
   .options-source {
     display: none;
   }
-`, U = `
-  ${c}
+`, xe = `
+  ${b}
+
+  :host {
+    display: inline-block;
+    position: relative;
+    width: var(--compa11y-select-width, 250px);
+  }
+
+  .select-wrapper {
+    position: relative;
+  }
+
+  .select-trigger {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--compa11y-select-trigger-padding, 0.5rem 2rem 0.5rem 0.75rem);
+    border: var(--compa11y-select-border, 1px solid #ccc);
+    border-radius: var(--compa11y-select-radius, 4px);
+    font: inherit;
+    background: var(--compa11y-select-bg, white);
+    color: var(--compa11y-select-color, inherit);
+    cursor: pointer;
+    text-align: left;
+    position: relative;
+    appearance: none;
+  }
+
+  .select-trigger:focus {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: -1px;
+    border-color: var(--compa11y-focus-color, #0066cc);
+  }
+
+  .select-trigger:disabled {
+    background: var(--compa11y-select-disabled-bg, #f5f5f5);
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  .select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-value.placeholder {
+    color: var(--compa11y-select-placeholder-color, #999);
+  }
+
+  .chevron {
+    position: absolute;
+    right: 0.5rem;
+    pointer-events: none;
+    font-size: 0.75rem;
+    color: var(--compa11y-select-chevron-color, #666);
+    transition: transform 0.15s ease;
+  }
+
+  :host([open]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  :host([data-position="top"]) .chevron {
+    transform: rotate(180deg);
+  }
+
+  :host([data-position="top"][open]) .chevron {
+    transform: rotate(0deg);
+  }
+
+  .listbox {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: var(--compa11y-select-z-index, 1000);
+    max-height: var(--compa11y-select-max-height, 200px);
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--compa11y-select-listbox-padding, 0.25rem 0);
+    background: var(--compa11y-select-listbox-bg, white);
+    border: var(--compa11y-select-listbox-border, 1px solid #e0e0e0);
+    border-radius: var(--compa11y-select-radius, 4px);
+    box-shadow: var(--compa11y-select-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+    list-style: none;
+    margin-top: 4px;
+  }
+
+  .listbox[hidden] {
+    display: none;
+  }
+
+  .listbox li[role="option"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--compa11y-select-option-padding, 0.5rem 0.75rem);
+    cursor: pointer;
+    transition: background 0.1s ease;
+  }
+
+  .listbox li[role="option"]:hover,
+  .listbox li[role="option"].highlighted {
+    background: var(--compa11y-select-option-hover-bg, #f5f5f5);
+  }
+
+  .listbox li[role="option"][aria-selected="true"] {
+    background: var(--compa11y-select-option-selected-bg, #e6f0ff);
+    font-weight: 500;
+  }
+
+  .listbox li[role="option"].disabled,
+  .listbox li[role="option"][aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .check-mark {
+    font-size: 0.875rem;
+    color: var(--compa11y-select-check-color, #0066cc);
+    margin-left: 0.5rem;
+  }
+
+  .options-source {
+    display: none;
+  }
+`, Ae = `
+  ${b}
 
   :host {
     display: inline-block;
@@ -491,669 +621,2926 @@ const f = `
     opacity: 0.5;
     cursor: not-allowed;
   }
-`, m = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-class y extends h {
-  constructor() {
-    super(...arguments), this._open = !1, this._previouslyFocused = null, this._triggerElement = null, this.handleTriggerClick = () => {
-      this.open = !0;
-    }, this.handleClose = () => {
-      this.open = !1;
-    }, this.handleKeyDown = (t) => {
-      var e;
-      if (this._open) {
-        if (t.key === "Escape") {
-          this.getAttribute("close-on-escape") !== "false" && (t.preventDefault(), this.handleClose());
-          return;
-        }
-        if (t.key === "Tab") {
-          t.preventDefault();
-          const i = this.getFocusableElements();
-          if (i.length === 0) return;
-          const s = ((e = this.shadowRoot) == null ? void 0 : e.activeElement) || document.activeElement;
-          let o = i.findIndex(
-            (u) => u === s
-          );
-          o === -1 && (o = t.shiftKey ? 0 : i.length - 1);
-          let a;
-          t.shiftKey ? a = o === 0 ? i.length - 1 : o - 1 : a = o === i.length - 1 ? 0 : o + 1;
-          const l = i[a];
-          l && l.focus();
-        }
-      }
-    };
+`, Ee = `
+  ${b}
+
+  :host {
+    display: block;
+    width: var(--compa11y-input-width, 100%);
   }
-  static get observedAttributes() {
-    return ["open", "trigger", "close-on-outside-click", "close-on-escape"];
+
+  .input-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
   }
-  get open() {
-    return this._open;
+
+  .input-label {
+    display: block;
+    color: var(--compa11y-input-label-color, inherit);
+    font-size: var(--compa11y-input-label-size, 0.875rem);
+    font-weight: var(--compa11y-input-label-weight, 500);
   }
-  set open(t) {
-    const e = this._open;
-    this._open = t, t !== e && (t ? this.showDialog() : this.hideDialog()), this.toggleAttribute("open", t);
+
+  :host([disabled]) .input-label {
+    color: var(--compa11y-input-disabled-color, #999);
   }
-  setupAccessibility() {
+
+  .input-required {
+    color: var(--compa11y-input-required-color, #ef4444);
+    margin-left: 0.125rem;
   }
-  render() {
-    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-title`, i = `${this._id}-desc`;
-    t.innerHTML = `
-      <style>${B}</style>
-      <div class="overlay" part="overlay"></div>
-      <div
-        class="dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby="${e}"
-        aria-describedby="${i}"
-        part="dialog"
-      >
-        <div id="${e}" part="title">
-          <slot name="title"></slot>
-        </div>
-        <div id="${i}" part="description">
-          <slot name="description"></slot>
-        </div>
-        <div part="content">
-          <slot></slot>
-        </div>
-        <div part="actions">
-          <slot name="actions"></slot>
-        </div>
-      </div>
-    `, this._open || (this.style.display = "none");
+
+  input {
+    width: 100%;
+    padding: var(--compa11y-input-padding, 0.5rem 0.75rem);
+    border: var(--compa11y-input-border, 1px solid #ccc);
+    border-radius: var(--compa11y-input-radius, 4px);
+    font: inherit;
+    font-size: var(--compa11y-input-font-size, 0.875rem);
+    background: var(--compa11y-input-bg, white);
+    color: inherit;
   }
-  setupEventListeners() {
-    var i;
-    const t = this.getAttribute("trigger");
-    if (t) {
-      const s = () => {
-        this._triggerElement = document.querySelector(t), this._triggerElement && (this._triggerElement.addEventListener(
-          "click",
-          this.handleTriggerClick
-        ), this._triggerElement.hasAttribute("tabindex") || this._triggerElement.setAttribute("tabindex", "0"));
-      };
-      s(), this._triggerElement || requestAnimationFrame(() => {
-        s(), this._triggerElement || setTimeout(s, 0);
-      });
-    }
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".overlay");
-    this.getAttribute("close-on-outside-click") !== "false" && (e == null || e.addEventListener("click", this.handleClose)), this.addEventListener("keydown", this.handleKeyDown);
+
+  input:focus {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: -1px;
+    border-color: var(--compa11y-input-border-focus, #0066cc);
   }
-  cleanupEventListeners() {
-    var t;
-    (t = this._triggerElement) == null || t.removeEventListener("click", this.handleTriggerClick), this.removeEventListener("keydown", this.handleKeyDown);
+
+  input::placeholder {
+    color: var(--compa11y-input-placeholder-color, #999);
   }
-  onAttributeChange(t, e, i) {
-    t === "open" && (this.open = i !== null);
+
+  input:disabled {
+    background: var(--compa11y-input-disabled-bg, #f5f5f5);
+    cursor: not-allowed;
+    opacity: var(--compa11y-input-disabled-opacity, 0.7);
   }
-  /**
-   * Get all focusable elements in the dialog (light DOM first, then shadow DOM)
-   * Per WAI-ARIA best practices: focus should go to dialog content first,
-   * close button should be last in tab order
-   */
-  getFocusableElements() {
-    const t = [];
-    return this.querySelectorAll(m).forEach((i) => t.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(m).forEach((s) => {
-      s.classList.contains("overlay") || t.push(s);
-    }), t;
+
+  input[readonly] {
+    background: var(--compa11y-input-readonly-bg, #f9f9f9);
   }
-  showDialog() {
-    this._previouslyFocused = document.activeElement, this.style.display = "flex", requestAnimationFrame(() => {
-      const e = this.getFocusableElements()[0];
-      e && e.focus();
-    }), document.body.style.overflow = "hidden", r("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
+
+  :host([data-error="true"]) input {
+    border-color: var(--compa11y-input-border-error, #ef4444);
   }
-  hideDialog() {
-    var t;
-    this.style.display = "none", document.body.style.overflow = "", (t = this._previouslyFocused) == null || t.focus(), this._previouslyFocused = null, r("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
+
+  :host([data-error="true"]) input:focus {
+    outline-color: var(--compa11y-input-border-error, #ef4444);
+    border-color: var(--compa11y-input-border-error, #ef4444);
   }
-  /**
-   * Programmatic open
-   */
-  show() {
-    this.open = !0;
+
+  .input-hint {
+    color: var(--compa11y-input-hint-color, #666);
+    font-size: var(--compa11y-input-hint-size, 0.8125rem);
   }
-  /**
-   * Programmatic close
-   */
-  close() {
-    this.open = !1;
+
+  .input-error {
+    color: var(--compa11y-input-error-color, #ef4444);
+    font-size: var(--compa11y-input-error-size, 0.8125rem);
   }
-}
-d("a11y-dialog", y);
-class _ extends h {
-  constructor() {
-    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._menuItems = [], this.updateMenuItems = () => {
-      this._menuItems = Array.from(
-        this.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
-      ), this._menuItems.forEach((t, e) => {
-        t.id = t.id || `${this._id}-item-${e}`, t.setAttribute("tabindex", "-1");
-      });
-    }, this._lastClickTime = 0, this.handleTriggerClick = () => {
-      const t = Date.now();
-      t - this._lastClickTime < 50 || (this._lastClickTime = t, this.toggle());
-    }, this.handleTriggerKeyDown = (t) => {
-      switch (t.key) {
-        case "Enter":
-        case " ":
-          t.preventDefault(), this.toggle(), this._open && this.highlightItem(0);
-          break;
-        case "ArrowDown":
-          t.preventDefault(), this._open || this.show(), this.highlightItem(0);
-          break;
-        case "ArrowUp":
-          t.preventDefault(), this._open || this.show(), this.highlightItem(this._menuItems.length - 1);
-          break;
-      }
-    }, this.handleMenuKeyDown = (t) => {
-      if (!this._open) return;
-      const e = t.target;
-      if (!(!e.hasAttribute("role") || e.getAttribute("role") !== "menuitem"))
-        switch (t.key) {
-          case "ArrowDown":
-            t.preventDefault(), this.highlightItem(
-              (this._highlightedIndex + 1) % this._menuItems.length
-            );
-            break;
-          case "ArrowUp":
-            t.preventDefault(), this.highlightItem(
-              (this._highlightedIndex - 1 + this._menuItems.length) % this._menuItems.length
-            );
-            break;
-          case "Home":
-            t.preventDefault(), this.highlightItem(0);
-            break;
-          case "End":
-            t.preventDefault(), this.highlightItem(this._menuItems.length - 1);
-            break;
-          case "Enter":
-          case " ":
-            t.preventDefault(), this.selectItem(this._highlightedIndex);
-            break;
-          case "Escape":
-            t.preventDefault(), this.close();
-            break;
-          case "Tab":
-            this.close();
-            break;
-        }
-    }, this.handleItemClick = (t) => {
-      const e = t.target;
-      if (e.getAttribute("role") === "menuitem" && e.getAttribute("aria-disabled") !== "true") {
-        const i = this._menuItems.indexOf(e);
-        this.selectItem(i);
-      }
-    }, this.handleMouseOver = (t) => {
-      const e = t.target;
-      if (e.getAttribute("role") === "menuitem") {
-        const i = this._menuItems.indexOf(e);
-        i !== -1 && this.highlightItem(i, !1);
-      }
-    }, this.handleOutsideClick = (t) => {
-      if (!this._open) return;
-      t.composedPath().includes(this) || this.close();
-    };
+`, ke = `
+  ${b}
+
+  :host {
+    display: block;
+    width: var(--compa11y-textarea-width, 100%);
   }
-  static get observedAttributes() {
-    return ["open"];
+
+  .textarea-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
   }
-  get open() {
-    return this._open;
+
+  .textarea-label {
+    display: block;
+    color: var(--compa11y-textarea-label-color, inherit);
+    font-size: var(--compa11y-textarea-label-size, 0.875rem);
+    font-weight: var(--compa11y-textarea-label-weight, 500);
   }
-  set open(t) {
-    const e = this._open;
-    this._open = t, t !== e && this.updateMenuVisibility(), this.toggleAttribute("open", t);
+
+  :host([disabled]) .textarea-label {
+    color: var(--compa11y-textarea-disabled-color, #999);
   }
-  setupAccessibility() {
-    const t = this.querySelector('[slot="trigger"]');
-    t && (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this._open)), t.id = t.id || `${this._id}-trigger`, t.hasAttribute("tabindex") || t.setAttribute("tabindex", "0"));
+
+  .textarea-required {
+    color: var(--compa11y-textarea-required-color, #ef4444);
+    margin-left: 0.125rem;
+  }
+
+  textarea {
+    width: 100%;
+    padding: var(--compa11y-textarea-padding, 0.5rem 0.75rem);
+    border: var(--compa11y-textarea-border, 1px solid #ccc);
+    border-radius: var(--compa11y-textarea-radius, 4px);
+    font: inherit;
+    font-size: var(--compa11y-textarea-font-size, 0.875rem);
+    line-height: 1.5;
+    background: var(--compa11y-textarea-bg, white);
+    color: inherit;
+    resize: var(--compa11y-textarea-resize, vertical);
+  }
+
+  textarea:focus {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: -1px;
+    border-color: var(--compa11y-textarea-border-focus, #0066cc);
+  }
+
+  textarea::placeholder {
+    color: var(--compa11y-textarea-placeholder-color, #999);
+  }
+
+  textarea:disabled {
+    background: var(--compa11y-textarea-disabled-bg, #f5f5f5);
+    cursor: not-allowed;
+    opacity: var(--compa11y-textarea-disabled-opacity, 0.7);
+  }
+
+  textarea[readonly] {
+    background: var(--compa11y-textarea-readonly-bg, #f9f9f9);
+  }
+
+  :host([data-error="true"]) textarea {
+    border-color: var(--compa11y-textarea-border-error, #ef4444);
+  }
+
+  :host([data-error="true"]) textarea:focus {
+    outline-color: var(--compa11y-textarea-border-error, #ef4444);
+    border-color: var(--compa11y-textarea-border-error, #ef4444);
+  }
+
+  .textarea-hint {
+    color: var(--compa11y-textarea-hint-color, #666);
+    font-size: var(--compa11y-textarea-hint-size, 0.8125rem);
+  }
+
+  .textarea-error {
+    color: var(--compa11y-textarea-error-color, #ef4444);
+    font-size: var(--compa11y-textarea-error-size, 0.8125rem);
+  }
+`, we = `
+  ${b}
+
+  :host {
+    display: inline-block;
+  }
+
+  @keyframes compa11y-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: var(--compa11y-button-radius, 4px);
+    font: inherit;
+    font-weight: var(--compa11y-button-font-weight, 500);
+    line-height: 1.5;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+    appearance: none;
+    text-decoration: none;
+  }
+
+  button:focus-visible {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Sizes */
+  button.size-sm {
+    padding: var(--compa11y-button-padding-sm, 0.25rem 0.5rem);
+    font-size: var(--compa11y-button-font-size-sm, 0.75rem);
+  }
+
+  button.size-md {
+    padding: var(--compa11y-button-padding-md, 0.5rem 1rem);
+    font-size: var(--compa11y-button-font-size-md, 0.875rem);
+  }
+
+  button.size-lg {
+    padding: var(--compa11y-button-padding-lg, 0.75rem 1.5rem);
+    font-size: var(--compa11y-button-font-size-lg, 1rem);
+  }
+
+  /* Variants */
+  button.variant-primary {
+    background: var(--compa11y-button-primary-bg, #0066cc);
+    color: var(--compa11y-button-primary-color, white);
+    border: var(--compa11y-button-primary-border, 1px solid #0066cc);
+  }
+
+  button.variant-primary:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--compa11y-button-primary-hover-bg, #0052a3);
+  }
+
+  button.variant-secondary {
+    background: var(--compa11y-button-secondary-bg, white);
+    color: var(--compa11y-button-secondary-color, #333);
+    border: var(--compa11y-button-secondary-border, 1px solid #ccc);
+  }
+
+  button.variant-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--compa11y-button-secondary-hover-bg, #f0f0f0);
+  }
+
+  button.variant-danger {
+    background: var(--compa11y-button-danger-bg, #ef4444);
+    color: var(--compa11y-button-danger-color, white);
+    border: var(--compa11y-button-danger-border, 1px solid #ef4444);
+  }
+
+  button.variant-danger:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--compa11y-button-danger-hover-bg, #dc2626);
+  }
+
+  button.variant-outline {
+    background: var(--compa11y-button-outline-bg, transparent);
+    color: var(--compa11y-button-outline-color, #0066cc);
+    border: var(--compa11y-button-outline-border, 1px solid #0066cc);
+  }
+
+  button.variant-outline:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--compa11y-button-outline-hover-bg, rgba(0, 102, 204, 0.05));
+  }
+
+  button.variant-ghost {
+    background: var(--compa11y-button-ghost-bg, transparent);
+    color: var(--compa11y-button-ghost-color, #333);
+    border: var(--compa11y-button-ghost-border, 1px solid transparent);
+  }
+
+  button.variant-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
+    background: var(--compa11y-button-ghost-hover-bg, rgba(0, 0, 0, 0.05));
+  }
+
+  /* Disabled */
+  button:disabled,
+  button[aria-disabled="true"] {
+    opacity: var(--compa11y-button-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+
+  /* Loading spinner */
+  .button-spinner {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: compa11y-spin 0.6s linear infinite;
+  }
+`, $e = `
+  ${b}
+
+  :host {
+    display: block;
+    width: var(--compa11y-listbox-width, 250px);
+  }
+
+  .listbox-wrapper {
+    max-height: var(--compa11y-listbox-max-height, 300px);
+    overflow-y: auto;
+    border: var(--compa11y-listbox-border, 1px solid #e0e0e0);
+    border-radius: var(--compa11y-listbox-radius, 4px);
+    background: var(--compa11y-listbox-bg, white);
+    padding: var(--compa11y-listbox-padding, 0.25rem 0);
+  }
+
+  :host([disabled]) .listbox-wrapper {
+    opacity: var(--compa11y-listbox-disabled-opacity, 0.5);
+    cursor: not-allowed;
+  }
+
+  :host(:focus-visible) .listbox-wrapper {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  :host([orientation="horizontal"]) .listbox-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: none;
+    overflow-y: visible;
+  }
+`, Le = `
+  ${b}
+
+  :host {
+    display: block;
+  }
+
+  .option-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--compa11y-listbox-option-padding, 0.5rem 0.75rem);
+    cursor: pointer;
+    transition: background 0.1s ease;
+    user-select: none;
+  }
+
+  :host([data-focused]) .option-wrapper {
+    background: var(--compa11y-listbox-option-hover-bg, #f5f5f5);
+  }
+
+  :host([aria-selected="true"]) .option-wrapper {
+    background: var(--compa11y-listbox-option-selected-bg, #e6f0ff);
+    font-weight: 500;
+  }
+
+  :host([aria-selected="true"][data-focused]) .option-wrapper {
+    background: var(--compa11y-listbox-option-selected-hover-bg, #cce0ff);
+  }
+
+  :host([aria-disabled="true"]) .option-wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option-content {
+    flex: 1;
+  }
+
+  .check-mark {
+    font-size: 0.875rem;
+    color: var(--compa11y-listbox-check-color, #0066cc);
+    margin-left: 0.5rem;
+    visibility: hidden;
+  }
+
+  :host([aria-selected="true"]) .check-mark {
+    visibility: visible;
+  }
+`, Se = `
+  ${b}
+
+  :host {
+    display: block;
+  }
+
+  .optgroup-label {
+    padding: var(--compa11y-listbox-group-label-padding, 0.5rem 0.75rem 0.25rem);
+    font-size: var(--compa11y-listbox-group-label-size, 0.75rem);
+    font-weight: var(--compa11y-listbox-group-label-weight, 600);
+    color: var(--compa11y-listbox-group-label-color, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+`, Ie = `
+  ${b}
+
+  :host {
+    display: inline-block;
+  }
+
+  .checkbox-wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--compa11y-checkbox-gap, 0.5rem);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host([disabled]) .checkbox-wrapper {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .checkbox-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .checkbox-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: inherit;
+    z-index: 1;
+  }
+
+  .checkbox-indicator {
+    width: var(--compa11y-checkbox-size, 1.25rem);
+    height: var(--compa11y-checkbox-size, 1.25rem);
+    min-width: 24px;
+    min-height: 24px;
+    border: var(--compa11y-checkbox-border, 2px solid #666);
+    border-radius: var(--compa11y-checkbox-radius, 3px);
+    background: var(--compa11y-checkbox-bg, white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    pointer-events: none;
+  }
+
+  :host([checked]) .checkbox-indicator {
+    background: var(--compa11y-checkbox-checked-bg, #0066cc);
+    border-color: var(--compa11y-checkbox-checked-border, #0066cc);
+  }
+
+  :host([indeterminate]) .checkbox-indicator {
+    background: var(--compa11y-checkbox-checked-bg, #0066cc);
+    border-color: var(--compa11y-checkbox-checked-border, #0066cc);
+  }
+
+  /* Size variants */
+  .checkbox-wrapper.size-sm .checkbox-indicator {
+    width: var(--compa11y-checkbox-size-sm, 1rem);
+    height: var(--compa11y-checkbox-size-sm, 1rem);
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  .checkbox-wrapper.size-lg .checkbox-indicator {
+    width: var(--compa11y-checkbox-size-lg, 1.5rem);
+    height: var(--compa11y-checkbox-size-lg, 1.5rem);
+  }
+
+  /* Check mark SVG */
+  .checkbox-check {
+    opacity: 0;
+    transform: scale(0);
+    transition: all 0.15s ease;
+    color: var(--compa11y-checkbox-check-color, white);
+  }
+
+  :host([checked]) .checkbox-check {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :host([indeterminate]) .checkbox-check {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  /* Indeterminate dash */
+  .checkbox-dash {
+    opacity: 0;
+    transition: all 0.15s ease;
+    color: var(--compa11y-checkbox-check-color, white);
+  }
+
+  :host([indeterminate]) .checkbox-dash {
+    opacity: 1;
+  }
+
+  /* Focus visible on indicator when input is focused */
+  .checkbox-input:focus-visible + .checkbox-indicator {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Hover */
+  .checkbox-wrapper:hover:not([disabled]) .checkbox-indicator {
+    border-color: var(--compa11y-checkbox-hover-border, #0066cc);
+  }
+
+  /* Label and text */
+  .checkbox-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding-top: 0.125rem;
+  }
+
+  .checkbox-label {
+    color: var(--compa11y-checkbox-label-color, inherit);
+    font-size: var(--compa11y-checkbox-label-size, 1rem);
+    cursor: inherit;
+  }
+
+  .checkbox-hint {
+    color: var(--compa11y-checkbox-hint-color, #666);
+    font-size: var(--compa11y-checkbox-hint-size, 0.8125rem);
+  }
+
+  .checkbox-error {
+    color: var(--compa11y-checkbox-error-color, #ef4444);
+    font-size: var(--compa11y-checkbox-error-size, 0.8125rem);
+  }
+
+  .checkbox-required {
+    color: var(--compa11y-checkbox-required-color, #ef4444);
+    margin-left: 0.125rem;
+  }
+
+  /* Forced colors / high contrast mode */
+  @media (forced-colors: active) {
+    .checkbox-indicator {
+      border: 2px solid ButtonText;
+    }
+
+    :host([checked]) .checkbox-indicator,
+    :host([indeterminate]) .checkbox-indicator {
+      background: Highlight;
+      border-color: Highlight;
+    }
+
+    .checkbox-check,
+    .checkbox-dash {
+      color: HighlightText;
+    }
+  }
+`, Ce = `
+  ${b}
+
+  :host {
+    display: block;
+  }
+
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+
+  legend {
+    padding: 0;
+    margin-bottom: var(--compa11y-checkbox-group-legend-gap, 0.5rem);
+    font-weight: var(--compa11y-checkbox-group-legend-weight, 600);
+    color: var(--compa11y-checkbox-group-legend-color, inherit);
+    font-size: var(--compa11y-checkbox-group-legend-size, 1rem);
+  }
+
+  .checkbox-group-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--compa11y-checkbox-group-gap, 0.75rem);
+  }
+
+  :host([orientation="horizontal"]) .checkbox-group-items {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .checkbox-group-error {
+    color: var(--compa11y-checkbox-group-error-color, #ef4444);
+    font-size: var(--compa11y-checkbox-group-error-size, 0.8125rem);
+    margin-top: 0.25rem;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+`, ze = `
+  ${b}
+
+  :host {
+    display: block;
+  }
+
+  fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+  }
+
+  legend {
+    padding: 0;
+    margin-bottom: var(--compa11y-radio-group-legend-gap, 0.5rem);
+    font-weight: var(--compa11y-radio-group-legend-weight, 600);
+    color: var(--compa11y-radio-group-legend-color, inherit);
+    font-size: var(--compa11y-radio-group-legend-size, 1rem);
+  }
+
+  .radio-group-items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--compa11y-radio-group-gap, 0.75rem);
+  }
+
+  :host([orientation="horizontal"]) .radio-group-items {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .radio-group-hint {
+    color: var(--compa11y-radio-group-hint-color, #666);
+    font-size: var(--compa11y-radio-group-hint-size, 0.8125rem);
+    margin-top: 0.25rem;
+  }
+
+  .radio-group-error {
+    color: var(--compa11y-radio-group-error-color, #ef4444);
+    font-size: var(--compa11y-radio-group-error-size, 0.8125rem);
+    margin-top: 0.25rem;
+  }
+
+  .radio-group-required {
+    color: var(--compa11y-radio-group-required-color, #ef4444);
+    margin-left: 0.125rem;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+`, qe = `
+  ${b}
+
+  :host {
+    display: inline-block;
+  }
+
+  .radio-wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: var(--compa11y-radio-gap, 0.5rem);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :host([disabled]) .radio-wrapper {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .radio-control {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: inherit;
+    z-index: 1;
+  }
+
+  .radio-circle {
+    width: var(--compa11y-radio-size, 1.25rem);
+    height: var(--compa11y-radio-size, 1.25rem);
+    min-width: 24px;
+    min-height: 24px;
+    border: var(--compa11y-radio-border, 2px solid #666);
+    border-radius: 50%;
+    background: var(--compa11y-radio-bg, white);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    pointer-events: none;
+  }
+
+  :host([checked]) .radio-circle {
+    background: var(--compa11y-radio-checked-bg, #0066cc);
+    border-color: var(--compa11y-radio-checked-border, #0066cc);
+  }
+
+  /* Focus visible on circle when input is focused */
+  .radio-input:focus-visible + .radio-circle {
+    outline: 2px solid var(--compa11y-focus-color, #0066cc);
+    outline-offset: 2px;
+  }
+
+  /* Hover */
+  .radio-wrapper:hover:not([disabled]) .radio-circle {
+    border-color: var(--compa11y-radio-hover-border, #0066cc);
+  }
+
+  /* Inner dot */
+  .radio-dot {
+    width: var(--compa11y-radio-dot-size, 0.5rem);
+    height: var(--compa11y-radio-dot-size, 0.5rem);
+    border-radius: 50%;
+    background: var(--compa11y-radio-dot-color, white);
+    opacity: 0;
+    transform: scale(0);
+    transition: all 0.15s ease;
+  }
+
+  :host([checked]) .radio-dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  /* Label and text */
+  .radio-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding-top: 0.125rem;
+  }
+
+  .radio-label {
+    color: var(--compa11y-radio-label-color, inherit);
+    font-size: var(--compa11y-radio-label-size, 1rem);
+    cursor: inherit;
+  }
+
+  .radio-hint {
+    color: var(--compa11y-radio-hint-color, #666);
+    font-size: var(--compa11y-radio-hint-size, 0.8125rem);
+  }
+
+  /* Forced colors / high contrast mode */
+  @media (forced-colors: active) {
+    .radio-circle {
+      border: 2px solid ButtonText;
+    }
+
+    :host([checked]) .radio-circle {
+      background: Highlight;
+      border-color: Highlight;
+    }
+
+    .radio-dot {
+      background: HighlightText;
+    }
+  }
+`, B = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+class M extends c {
+  constructor() {
+    super(...arguments), this._open = !1, this._previouslyFocused = null, this._triggerElement = null, this.handleTriggerClick = () => {
+      this.open = !0;
+    }, this.handleClose = () => {
+      this.open = !1;
+    }, this.handleKeyDown = (e) => {
+      var t;
+      if (this._open) {
+        if (e.key === "Escape") {
+          this.getAttribute("close-on-escape") !== "false" && (e.preventDefault(), this.handleClose());
+          return;
+        }
+        if (e.key === "Tab") {
+          e.preventDefault();
+          const i = this.getFocusableElements();
+          if (i.length === 0) return;
+          const s = ((t = this.shadowRoot) == null ? void 0 : t.activeElement) || document.activeElement;
+          let a = i.findIndex(
+            (o) => o === s
+          );
+          a === -1 && (a = e.shiftKey ? 0 : i.length - 1);
+          let r;
+          e.shiftKey ? r = a === 0 ? i.length - 1 : a - 1 : r = a === i.length - 1 ? 0 : a + 1;
+          const l = i[r];
+          l && l.focus();
+        }
+      }
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "trigger", "close-on-outside-click", "close-on-escape"];
+  }
+  get open() {
+    return this._open;
+  }
+  set open(e) {
+    const t = this._open;
+    this._open = e, e !== t && (e ? this.showDialog() : this.hideDialog()), this.toggleAttribute("open", e);
+  }
+  setupAccessibility() {
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-title`, i = `${this._id}-desc`;
+    e.innerHTML = `
+      <style>${ve}</style>
+      <div class="overlay" part="overlay"></div>
+      <div
+        class="dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="${t}"
+        aria-describedby="${i}"
+        part="dialog"
+      >
+        <div id="${t}" part="title">
+          <slot name="title"></slot>
+        </div>
+        <div id="${i}" part="description">
+          <slot name="description"></slot>
+        </div>
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `, this._open || (this.style.display = "none");
+  }
+  setupEventListeners() {
+    var i;
+    const e = this.getAttribute("trigger");
+    if (e) {
+      const s = () => {
+        this._triggerElement = document.querySelector(e), this._triggerElement && (this._triggerElement.addEventListener(
+          "click",
+          this.handleTriggerClick
+        ), this._triggerElement.hasAttribute("tabindex") || this._triggerElement.setAttribute("tabindex", "0"));
+      };
+      s(), this._triggerElement || requestAnimationFrame(() => {
+        s(), this._triggerElement || setTimeout(s, 0);
+      });
+    }
+    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".overlay");
+    this.getAttribute("close-on-outside-click") !== "false" && (t == null || t.addEventListener("click", this.handleClose)), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  cleanupEventListeners() {
+    var e;
+    (e = this._triggerElement) == null || e.removeEventListener("click", this.handleTriggerClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  onAttributeChange(e, t, i) {
+    e === "open" && (this.open = i !== null);
+  }
+  /**
+   * Get all focusable elements in the dialog (light DOM first, then shadow DOM)
+   * Per WAI-ARIA best practices: focus should go to dialog content first,
+   * close button should be last in tab order
+   */
+  getFocusableElements() {
+    const e = [];
+    return this.querySelectorAll(B).forEach((i) => e.push(i)), this.shadowRoot && this.shadowRoot.querySelectorAll(B).forEach((s) => {
+      s.classList.contains("overlay") || e.push(s);
+    }), e;
+  }
+  showDialog() {
+    this._previouslyFocused = document.activeElement, this.style.display = "flex", requestAnimationFrame(() => {
+      const t = this.getFocusableElements()[0];
+      t && t.focus();
+    }), document.body.style.overflow = "hidden", v("Dialog opened", { politeness: "polite" }), this.emit("a11y-dialog-open");
+  }
+  hideDialog() {
+    var e;
+    this.style.display = "none", document.body.style.overflow = "", (e = this._previouslyFocused) == null || e.focus(), this._previouslyFocused = null, v("Dialog closed", { politeness: "polite" }), this.emit("a11y-dialog-close");
+  }
+  /**
+   * Programmatic open
+   */
+  show() {
+    this.open = !0;
+  }
+  /**
+   * Programmatic close
+   */
+  close() {
+    this.open = !1;
+  }
+}
+u("a11y-dialog", M);
+class K extends c {
+  constructor() {
+    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._menuItems = [], this.updateMenuItems = () => {
+      this._menuItems = Array.from(
+        this.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')
+      ), this._menuItems.forEach((e, t) => {
+        e.id = e.id || `${this._id}-item-${t}`, e.setAttribute("tabindex", "-1");
+      });
+    }, this._lastClickTime = 0, this.handleTriggerClick = () => {
+      const e = Date.now();
+      e - this._lastClickTime < 50 || (this._lastClickTime = e, this.toggle());
+    }, this.handleTriggerKeyDown = (e) => {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault(), this.toggle(), this._open && this.highlightItem(0);
+          break;
+        case "ArrowDown":
+          e.preventDefault(), this._open || this.show(), this.highlightItem(0);
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this._open || this.show(), this.highlightItem(this._menuItems.length - 1);
+          break;
+      }
+    }, this.handleMenuKeyDown = (e) => {
+      if (!this._open) return;
+      const t = e.target;
+      if (!(!t.hasAttribute("role") || t.getAttribute("role") !== "menuitem"))
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), this.highlightItem(
+              (this._highlightedIndex + 1) % this._menuItems.length
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault(), this.highlightItem(
+              (this._highlightedIndex - 1 + this._menuItems.length) % this._menuItems.length
+            );
+            break;
+          case "Home":
+            e.preventDefault(), this.highlightItem(0);
+            break;
+          case "End":
+            e.preventDefault(), this.highlightItem(this._menuItems.length - 1);
+            break;
+          case "Enter":
+          case " ":
+            e.preventDefault(), this.selectItem(this._highlightedIndex);
+            break;
+          case "Escape":
+            e.preventDefault(), this.close();
+            break;
+          case "Tab":
+            this.close();
+            break;
+        }
+    }, this.handleItemClick = (e) => {
+      const t = e.target;
+      if (t.getAttribute("role") === "menuitem" && t.getAttribute("aria-disabled") !== "true") {
+        const i = this._menuItems.indexOf(t);
+        this.selectItem(i);
+      }
+    }, this.handleMouseOver = (e) => {
+      const t = e.target;
+      if (t.getAttribute("role") === "menuitem") {
+        const i = this._menuItems.indexOf(t);
+        i !== -1 && this.highlightItem(i, !1);
+      }
+    }, this.handleOutsideClick = (e) => {
+      if (!this._open) return;
+      e.composedPath().includes(this) || this.close();
+    };
+  }
+  static get observedAttributes() {
+    return ["open"];
+  }
+  get open() {
+    return this._open;
+  }
+  set open(e) {
+    const t = this._open;
+    this._open = e, e !== t && this.updateMenuVisibility(), this.toggleAttribute("open", e);
+  }
+  setupAccessibility() {
+    const e = this.querySelector('[slot="trigger"]');
+    e && (e.setAttribute("aria-haspopup", "menu"), e.setAttribute("aria-expanded", String(this._open)), e.id = e.id || `${this._id}-trigger`, e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"));
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" });
+    e.innerHTML = `
+      <style>${fe}</style>
+      <slot name="trigger"></slot>
+      <div
+        class="menu-content"
+        role="menu"
+        aria-labelledby="${this._id}-trigger"
+        tabindex="-1"
+        hidden
+        part="menu"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+  setupEventListeners() {
+    var s, a;
+    const e = this.querySelector('[slot="trigger"]');
+    e == null || e.addEventListener("click", this.handleTriggerClick), e == null || e.addEventListener(
+      "keydown",
+      this.handleTriggerKeyDown
+    );
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="trigger"]');
+    t == null || t.addEventListener("click", this.handleTriggerClick), this.addEventListener("click", this.handleItemClick), this.addEventListener("keydown", this.handleMenuKeyDown), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("mousedown", this.handleOutsideClick);
+    const i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
+    i == null || i.addEventListener("slotchange", this.updateMenuItems), this.updateMenuItems();
+  }
+  cleanupEventListeners() {
+    document.removeEventListener("mousedown", this.handleOutsideClick);
+  }
+  onAttributeChange(e, t, i) {
+    e === "open" && (this.open = i !== null);
+  }
+  highlightItem(e, t = !0) {
+    var s;
+    if (this._highlightedIndex >= 0) {
+      const a = this._menuItems[this._highlightedIndex];
+      a == null || a.removeAttribute("data-highlighted");
+    }
+    this._highlightedIndex = e;
+    const i = this._menuItems[e];
+    if (i) {
+      i.setAttribute("data-highlighted", "true"), t && i.focus();
+      const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="menu"]');
+      a == null || a.setAttribute("aria-activedescendant", i.id);
+    }
+  }
+  selectItem(e) {
+    const t = this._menuItems[e];
+    t && (this.emit("a11y-menu-select", { item: t, index: e }), t.click()), this.close();
+  }
+  updateMenuVisibility() {
+    var i;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu-content"), t = this.querySelector('[slot="trigger"]');
+    this._open ? (e == null || e.removeAttribute("hidden"), t == null || t.setAttribute("aria-expanded", "true"), this.updateMenuItems(), this.emit("a11y-menu-open")) : (e == null || e.setAttribute("hidden", ""), t == null || t.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this._menuItems.forEach((s) => {
+      s.removeAttribute("data-highlighted");
+    }), t == null || t.focus(), this.emit("a11y-menu-close"));
+  }
+  /**
+   * Show the menu
+   */
+  show() {
+    this.open = !0;
+  }
+  /**
+   * Hide the menu
+   */
+  close() {
+    this.open = !1;
+  }
+  /**
+   * Toggle the menu
+   */
+  toggle() {
+    this.open = !this._open;
+  }
+}
+u("a11y-menu", K);
+class F extends c {
+  constructor() {
+    super(...arguments), this._tabs = [], this._panels = [], this._selectedIndex = 0, this.updateTabsAndPanels = () => {
+      this._tabs = Array.from(
+        this.querySelectorAll('[role="tab"]')
+      ), this._panels = Array.from(
+        this.querySelectorAll('[role="tabpanel"]')
+      ), this._tabs.forEach((e, t) => {
+        const i = this._panels[t], s = e.id || `${this._id}-tab-${t}`, a = (i == null ? void 0 : i.id) || `${this._id}-panel-${t}`;
+        e.id = s, e.setAttribute("aria-controls", a), e.setAttribute("tabindex", t === this._selectedIndex ? "0" : "-1"), e.setAttribute("aria-selected", String(t === this._selectedIndex)), e.hasAttribute("slot") || e.setAttribute("slot", "tab"), i && (i.id = a, i.setAttribute("aria-labelledby", s), i.setAttribute("tabindex", "0"), i.hidden = t !== this._selectedIndex, i.hasAttribute("slot") || i.setAttribute("slot", "panel"));
+      }), this.updateSelection();
+    }, this.handleClick = (e) => {
+      const t = e.target;
+      if (t.getAttribute("role") === "tab") {
+        const i = this._tabs.indexOf(t);
+        i !== -1 && t.getAttribute("aria-disabled") !== "true" && this.selectTab(i);
+      }
+    }, this.handleKeyDown = (e) => {
+      var l;
+      if (e.target.getAttribute("role") !== "tab") return;
+      const i = this.orientation === "horizontal", s = i ? "ArrowRight" : "ArrowDown", a = i ? "ArrowLeft" : "ArrowUp";
+      let r = this._selectedIndex;
+      switch (e.key) {
+        case s:
+          e.preventDefault(), r = (this._selectedIndex + 1) % this._tabs.length;
+          break;
+        case a:
+          e.preventDefault(), r = (this._selectedIndex - 1 + this._tabs.length) % this._tabs.length;
+          break;
+        case "Home":
+          e.preventDefault(), r = 0;
+          break;
+        case "End":
+          e.preventDefault(), r = this._tabs.length - 1;
+          break;
+        default:
+          return;
+      }
+      (l = this._tabs[r]) == null || l.focus(), this.activationMode === "automatic" && this.selectTab(r);
+    };
+  }
+  static get observedAttributes() {
+    return ["orientation", "activation-mode", "selected-index"];
+  }
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  set selectedIndex(e) {
+    e >= 0 && e < this._tabs.length && (this._selectedIndex = e, this.updateSelection());
+  }
+  get orientation() {
+    return this.getAttribute("orientation") || "horizontal";
+  }
+  get activationMode() {
+    return this.getAttribute("activation-mode") || "automatic";
+  }
+  setupAccessibility() {
+    this.updateTabsAndPanels();
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" });
+    e.innerHTML = `
+      <style>${_e}</style>
+      <div class="tablist" role="tablist" aria-orientation="${this.orientation}" part="tablist">
+        <slot name="tab"></slot>
+      </div>
+      <div class="panels" part="panels">
+        <slot name="panel"></slot>
+      </div>
+      <slot></slot>
+    `;
+  }
+  setupEventListeners() {
+    var s, a, r;
+    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="tab"]'), t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="panel"]'), i = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot:not([name])");
+    e == null || e.addEventListener("slotchange", this.updateTabsAndPanels), t == null || t.addEventListener("slotchange", this.updateTabsAndPanels), i == null || i.addEventListener("slotchange", this.updateTabsAndPanels);
+  }
+  onAttributeChange(e, t, i) {
+    var s;
+    if (e === "orientation") {
+      const a = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="tablist"]');
+      a == null || a.setAttribute("aria-orientation", i || "horizontal");
+    }
+    e === "selected-index" && i && (this.selectedIndex = parseInt(i, 10));
+  }
+  selectTab(e) {
+    const t = this._selectedIndex;
+    if (this._selectedIndex = e, this.updateSelection(), t !== e) {
+      const i = this._tabs[e];
+      v(`${(i == null ? void 0 : i.textContent) || "Tab"} selected`), this.emit("a11y-tabs-change", {
+        index: e,
+        tab: this._tabs[e],
+        panel: this._panels[e]
+      });
+    }
+  }
+  updateSelection() {
+    this._tabs.forEach((e, t) => {
+      const i = t === this._selectedIndex;
+      e.setAttribute("aria-selected", String(i)), e.setAttribute("tabindex", i ? "0" : "-1");
+    }), this._panels.forEach((e, t) => {
+      e.hidden = t !== this._selectedIndex;
+    });
+  }
+  /**
+   * Select a tab by index
+   */
+  select(e) {
+    this.selectTab(e);
+  }
+  /**
+   * Select next tab
+   */
+  next() {
+    this.selectTab((this._selectedIndex + 1) % this._tabs.length);
+  }
+  /**
+   * Select previous tab
+   */
+  previous() {
+    this.selectTab(
+      (this._selectedIndex - 1 + this._tabs.length) % this._tabs.length
+    );
+  }
+}
+u("a11y-tabs", F);
+class N extends c {
+  constructor() {
+    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._options = [], this._filteredOptions = [], this._inputValue = "", this._selectedValue = null, this._inputElement = null, this._listboxElement = null, this.updateOptions = () => {
+      const e = Array.from(this.querySelectorAll("option"));
+      this._options = e.map((t) => ({
+        value: t.getAttribute("value") || t.textContent || "",
+        label: t.textContent || "",
+        disabled: t.hasAttribute("disabled"),
+        element: t
+      })), this._filteredOptions = [...this._options], this.renderOptions();
+    }, this.handleInput = (e) => {
+      const t = e.target;
+      this._inputValue = t.value;
+      const i = this._inputValue.toLowerCase();
+      this._filteredOptions = i ? this._options.filter((a) => a.label.toLowerCase().includes(i)) : [...this._options], this.renderOptions(), this.open = !0, this._highlightedIndex = 0, this.updateHighlight(), this.updateClearButton();
+      const s = this._filteredOptions.length;
+      v(
+        s === 0 ? "No results" : `${s} result${s === 1 ? "" : "s"} available`
+      );
+    }, this.handleFocus = () => {
+      this.open = !0;
+    }, this.handleBlur = () => {
+      setTimeout(() => {
+        var e;
+        (e = this.shadowRoot) != null && e.activeElement || (this.open = !1);
+      }, 150);
+    }, this.handleKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this._open ? this._highlightedIndex = Math.min(
+            this._highlightedIndex + 1,
+            this._filteredOptions.length - 1
+          ) : (this.open = !0, this._highlightedIndex = 0), this.updateHighlight();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this._open ? this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0) : (this.open = !0, this._highlightedIndex = this._filteredOptions.length - 1), this.updateHighlight();
+          break;
+        case "Enter":
+          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
+            const t = this._filteredOptions[this._highlightedIndex];
+            t && !t.disabled && this.selectOption(t);
+          }
+          break;
+        case "Escape":
+          e.preventDefault(), this.open = !1, this._highlightedIndex = -1;
+          break;
+        case "Home":
+          this._open && (e.preventDefault(), this._highlightedIndex = 0, this.updateHighlight());
+          break;
+        case "End":
+          this._open && (e.preventDefault(), this._highlightedIndex = this._filteredOptions.length - 1, this.updateHighlight());
+          break;
+        case "Tab":
+          this._open && (this.open = !1, this._highlightedIndex = -1);
+          break;
+      }
+    }, this.handleOptionClick = (e) => {
+      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._filteredOptions[i];
+      s && !s.disabled && this.selectOption(s);
+    }, this.handleOptionHover = (e) => {
+      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._filteredOptions[i];
+      s && !s.disabled && (this._highlightedIndex = i, this.updateHighlight());
+    }, this.handleClear = () => {
+      this._inputValue = "", this._selectedValue = null, this._inputElement && (this._inputElement.value = "", this._inputElement.focus()), this._filteredOptions = [...this._options], this.renderOptions(), this.updateClearButton(), this.emit("a11y-combobox-clear"), this.emit("a11y-combobox-change", { value: null, label: null });
+    }, this.handleOutsideClick = (e) => {
+      if (!this._open) return;
+      e.composedPath().includes(this) || (this.open = !1);
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "value", "placeholder", "disabled", "clearable"];
+  }
+  get open() {
+    return this._open;
+  }
+  set open(e) {
+    const t = this._open;
+    this._open = e, e !== t && this.updateListboxVisibility(), this.toggleAttribute("open", e);
+  }
+  get value() {
+    return this._selectedValue;
+  }
+  set value(e) {
+    this._selectedValue = e;
+    const t = this._options.find((i) => i.value === e);
+    t && (this._inputValue = t.label, this._inputElement && (this._inputElement.value = t.label)), this.setAttribute("value", e || "");
+  }
+  setupAccessibility() {
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-input`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Search...", a = this.hasAttribute("clearable");
+    e.innerHTML = `
+      <style>${ye}</style>
+      <div class="combobox-wrapper" part="wrapper">
+        <div class="input-wrapper" part="input-wrapper">
+          <input
+            id="${t}"
+            type="text"
+            role="combobox"
+            autocomplete="off"
+            aria-expanded="false"
+            aria-controls="${i}"
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+            placeholder="${s}"
+            part="input"
+          />
+          ${a ? `
+            <button
+              type="button"
+              class="clear-button"
+              aria-label="Clear selection"
+              tabindex="-1"
+              hidden
+              part="clear-button"
+            >×</button>
+          ` : ""}
+          <span class="chevron" aria-hidden="true" part="chevron">▼</span>
+        </div>
+        <ul
+          id="${i}"
+          role="listbox"
+          aria-labelledby="${t}"
+          class="listbox"
+          tabindex="-1"
+          hidden
+          part="listbox"
+        ></ul>
+      </div>
+      <div class="options-source" hidden>
+        <slot></slot>
+      </div>
+    `, this._inputElement = e.querySelector("input"), this._listboxElement = e.querySelector(".listbox");
+  }
+  setupEventListeners() {
+    var i, s, a, r, l, o;
+    (i = this._inputElement) == null || i.addEventListener("input", this.handleInput), (s = this._inputElement) == null || s.addEventListener("focus", this.handleFocus), (a = this._inputElement) == null || a.addEventListener("blur", this.handleBlur), (r = this._inputElement) == null || r.addEventListener("keydown", this.handleKeyDown);
+    const e = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".clear-button");
+    e == null || e.addEventListener("click", this.handleClear), document.addEventListener("mousedown", this.handleOutsideClick);
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot");
+    t == null || t.addEventListener("slotchange", this.updateOptions), this.updateOptions();
+  }
+  cleanupEventListeners() {
+    document.removeEventListener("mousedown", this.handleOutsideClick);
+  }
+  onAttributeChange(e, t, i) {
+    e === "open" && (this.open = i !== null), e === "value" && (this.value = i), e === "disabled" && this._inputElement && (this._inputElement.disabled = i !== null), e === "placeholder" && this._inputElement && (this._inputElement.placeholder = i || "Search...");
+  }
+  renderOptions() {
+    this._listboxElement && (this._listboxElement.innerHTML = this._filteredOptions.length === 0 ? '<li role="presentation" class="empty-message" part="empty">No results found</li>' : this._filteredOptions.map(
+      (e, t) => `
+          <li
+            id="${this._id}-option-${t}"
+            role="option"
+            aria-selected="${this._selectedValue === e.value}"
+            aria-disabled="${e.disabled}"
+            data-value="${e.value}"
+            data-index="${t}"
+            part="option"
+            ${e.disabled ? 'class="disabled"' : ""}
+          >${e.label}</li>
+        `
+    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((e) => {
+      e.addEventListener("click", this.handleOptionClick), e.addEventListener("mouseenter", this.handleOptionHover);
+    }));
+  }
+  selectOption(e) {
+    this._selectedValue = e.value, this._inputValue = e.label, this._inputElement && (this._inputElement.value = e.label), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), this.updateClearButton(), v(`${e.label} selected`), this.emit("a11y-combobox-select", {
+      value: e.value,
+      label: e.label
+    }), this.emit("a11y-combobox-change", {
+      value: e.value,
+      label: e.label
+    });
+  }
+  updateHighlight() {
+    var e, t, i, s;
+    if ((e = this._listboxElement) == null || e.querySelectorAll('[role="option"]').forEach((a, r) => {
+      a.classList.toggle("highlighted", r === this._highlightedIndex);
+    }), this._highlightedIndex >= 0) {
+      const a = `${this._id}-option-${this._highlightedIndex}`;
+      (t = this._inputElement) == null || t.setAttribute("aria-activedescendant", a);
+      const r = (i = this._listboxElement) == null ? void 0 : i.querySelector(`#${a}`);
+      r == null || r.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    } else
+      (s = this._inputElement) == null || s.removeAttribute("aria-activedescendant");
+  }
+  updateListboxVisibility() {
+    !this._listboxElement || !this._inputElement || (this._open ? (this._listboxElement.hidden = !1, this._inputElement.setAttribute("aria-expanded", "true"), this.updateListboxPosition(), this.emit("a11y-combobox-open")) : (this._listboxElement.hidden = !0, this._inputElement.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this.updateHighlight(), this._listboxElement.style.top = "", this._listboxElement.style.bottom = "", this.removeAttribute("data-position"), this.emit("a11y-combobox-close")));
+  }
+  updateListboxPosition() {
+    if (!this._listboxElement || !this._inputElement) return;
+    const e = this._inputElement.getBoundingClientRect(), t = window.innerHeight, i = Math.min(
+      this._listboxElement.scrollHeight,
+      200
+      // max-height from CSS
+    ), s = t - e.bottom, a = e.top;
+    s < i + 8 && a > s ? (this._listboxElement.style.top = "auto", this._listboxElement.style.bottom = "100%", this._listboxElement.style.marginTop = "0", this._listboxElement.style.marginBottom = "4px", this.setAttribute("data-position", "top")) : (this._listboxElement.style.top = "100%", this._listboxElement.style.bottom = "auto", this._listboxElement.style.marginTop = "4px", this._listboxElement.style.marginBottom = "0", this.setAttribute("data-position", "bottom"));
+  }
+  updateClearButton() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(
+      ".clear-button"
+    );
+    e && (e.hidden = !this._inputValue);
+  }
+  /**
+   * Programmatic open
+   */
+  show() {
+    this.open = !0;
+  }
+  /**
+   * Programmatic close
+   */
+  close() {
+    this.open = !1;
+  }
+  /**
+   * Clear the selection
+   */
+  clear() {
+    this.handleClear();
+  }
+}
+u("a11y-combobox", N);
+class P extends c {
+  constructor() {
+    super(...arguments), this._checked = !1, this._button = null, this._label = null, this.handleClick = () => {
+      this.toggle();
+    }, this.handleKeyDown = (e) => {
+      this.disabled || (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.toggle());
+    }, this.handleLabelClick = () => {
+      var e;
+      this.disabled || (this.toggle(), (e = this._button) == null || e.focus());
+    };
+  }
+  static get observedAttributes() {
+    return ["checked", "disabled", "label", "size", "aria-label"];
+  }
+  /**
+   * Get/set the checked state
+   */
+  get checked() {
+    return this._checked;
+  }
+  set checked(e) {
+    const t = this._checked;
+    this._checked = e, this.toggleAttribute("checked", e), e !== t && (this.updateVisualState(), this.emit("change", { checked: e }));
+  }
+  /**
+   * Get/set the disabled state
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e), this.updateDisabledState();
+  }
+  /**
+   * Get/set the visible label
+   */
+  get label() {
+    return this.getAttribute("label") || "";
+  }
+  set label(e) {
+    e ? this.setAttribute("label", e) : this.removeAttribute("label");
+  }
+  /**
+   * Get/set the size variant
+   */
+  get size() {
+    const e = this.getAttribute("size");
+    return e === "sm" || e === "lg" ? e : "md";
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  setupAccessibility() {
+    var e;
+    this.getAttribute("role"), typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
+      `[compa11y/Switch] Switch has no accessible label. Add label="..." or aria-label="..." attribute.
+💡 Suggestion: <a11y-switch label="Enable feature"></a11y-switch>`
+    );
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-label`, i = !!this.label, s = this.getAttribute("aria-label"), a = i ? "" : s ? `aria-label="${s}"` : "", r = i ? `aria-labelledby="${t}"` : "";
+    e.innerHTML = `
+      <style>${Ae}</style>
+      <div class="switch-wrapper size-${this.size}" part="wrapper">
+        <button
+          type="button"
+          role="switch"
+          aria-checked="${this._checked}"
+          ${a}
+          ${r}
+          ${this.disabled ? "disabled" : ""}
+          class="switch-track ${this._checked ? "checked" : ""}"
+          part="track"
+          tabindex="${this.disabled ? "-1" : "0"}"
+        >
+          <span class="switch-thumb" part="thumb" aria-hidden="true"></span>
+        </button>
+        ${i ? `<label id="${t}" class="switch-label ${this.disabled ? "disabled" : ""}" part="label">${this.label}</label>` : ""}
+      </div>
+    `, this._button = e.querySelector("button"), this._label = e.querySelector("label");
+  }
+  setupEventListeners() {
+    var e, t, i;
+    (e = this._button) == null || e.addEventListener("click", this.handleClick), (t = this._button) == null || t.addEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.addEventListener("click", this.handleLabelClick);
+  }
+  cleanupEventListeners() {
+    var e, t, i;
+    (e = this._button) == null || e.removeEventListener("click", this.handleClick), (t = this._button) == null || t.removeEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.removeEventListener("click", this.handleLabelClick);
+  }
+  onAttributeChange(e, t, i) {
+    switch (e) {
+      case "checked":
+        this._checked = i !== null, this.updateVisualState();
+        break;
+      case "disabled":
+        this.updateDisabledState();
+        break;
+      case "label":
+      case "aria-label":
+        this.shadowRoot && (this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
+        break;
+      case "size":
+        this.updateSizeClass();
+        break;
+    }
+  }
+  /**
+   * Update the visual state (checked class and aria-checked)
+   */
+  updateVisualState() {
+    this._button && (this._button.setAttribute("aria-checked", String(this._checked)), this._button.classList.toggle("checked", this._checked));
+  }
+  /**
+   * Update the disabled state
+   */
+  updateDisabledState() {
+    this._button && (this.disabled ? (this._button.setAttribute("disabled", ""), this._button.setAttribute("tabindex", "-1")) : (this._button.removeAttribute("disabled"), this._button.setAttribute("tabindex", "0"))), this._label && this._label.classList.toggle("disabled", this.disabled);
+  }
+  /**
+   * Update the size class
+   */
+  updateSizeClass() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".switch-wrapper");
+    e && (e.classList.remove("size-sm", "size-md", "size-lg"), e.classList.add(`size-${this.size}`));
+  }
+  /**
+   * Public method to toggle the switch programmatically
+   */
+  toggle() {
+    if (this.disabled) return;
+    this.checked = !this.checked;
+    const e = this.label || this.getAttribute("aria-label") || "Switch";
+    p(`${e} ${this.checked ? "on" : "off"}`);
+  }
+  /**
+   * Public method to open/close programmatically
+   */
+  setChecked(e) {
+    this.checked = e;
+  }
+}
+u("a11y-switch", P);
+class j extends c {
+  constructor() {
+    super(...arguments), this._open = !1, this._highlightedIndex = -1, this._options = [], this._selectedValue = null, this._triggerElement = null, this._listboxElement = null, this._typeAhead = null, this.updateOptions = () => {
+      const e = Array.from(this.querySelectorAll("option"));
+      this._options = e.map((t) => ({
+        value: t.getAttribute("value") || t.textContent || "",
+        label: t.textContent || "",
+        disabled: t.hasAttribute("disabled"),
+        element: t
+      })), this._typeAhead = q(
+        this._options.map((t) => t.label),
+        { timeout: 500 }
+      ), this.renderOptions(), this.updateTriggerText();
+    }, this.handleTriggerClick = () => {
+      var e;
+      (e = this._triggerElement) != null && e.disabled || (this._open ? (this.open = !1, this._highlightedIndex = -1) : this.openAndHighlight());
+    }, this.handleKeyDown = (e) => {
+      var t;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), this._open ? this.highlightNext() : this.openAndHighlight();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), this._open ? this.highlightPrevious() : this.openAndHighlight(!0);
+          break;
+        case "Enter":
+          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
+            const i = this._options[this._highlightedIndex];
+            i && !i.disabled && this.selectOption(i);
+          } else this._open || this.openAndHighlight();
+          break;
+        case " ":
+          if (e.preventDefault(), this._open && this._highlightedIndex >= 0) {
+            const i = this._options[this._highlightedIndex];
+            i && !i.disabled && this.selectOption(i);
+          } else this._open || this.openAndHighlight();
+          break;
+        case "Escape":
+          e.preventDefault(), this._open && (this.open = !1, this._highlightedIndex = -1);
+          break;
+        case "Home":
+          this._open && (e.preventDefault(), this._highlightedIndex = this.findFirstEnabled(), this.updateHighlight());
+          break;
+        case "End":
+          this._open && (e.preventDefault(), this._highlightedIndex = this.findLastEnabled(), this.updateHighlight());
+          break;
+        case "Tab":
+          this._open && (this.open = !1, this._highlightedIndex = -1);
+          break;
+        default:
+          if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+            const i = (t = this._typeAhead) == null ? void 0 : t.type(e.key);
+            if (i) {
+              const s = this._options.findIndex(
+                (a) => a.label === i && !a.disabled
+              );
+              s >= 0 && (this._open || (this.open = !0), this._highlightedIndex = s, this.updateHighlight());
+            }
+          }
+          break;
+      }
+    }, this.handleBlur = () => {
+      setTimeout(() => {
+        var e;
+        (e = this.shadowRoot) != null && e.activeElement || (this.open = !1, this._highlightedIndex = -1);
+      }, 150);
+    }, this.handleListboxMouseDown = (e) => {
+      e.preventDefault();
+    }, this.handleOptionClick = (e) => {
+      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._options[i];
+      s && !s.disabled && this.selectOption(s);
+    }, this.handleOptionHover = (e) => {
+      const t = e.currentTarget, i = parseInt(t.dataset.index || "0", 10), s = this._options[i];
+      s && !s.disabled && (this._highlightedIndex = i, this.updateHighlight());
+    }, this.handleOutsideClick = (e) => {
+      if (!this._open) return;
+      e.composedPath().includes(this) || (this.open = !1, this._highlightedIndex = -1);
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "value", "placeholder", "disabled"];
+  }
+  get open() {
+    return this._open;
+  }
+  set open(e) {
+    const t = this._open;
+    this._open = e, e !== t && this.updateListboxVisibility(), this.toggleAttribute("open", e);
+  }
+  get value() {
+    return this._selectedValue;
+  }
+  set value(e) {
+    this._selectedValue = e, this.updateTriggerText(), this.setAttribute("value", e || "");
+  }
+  setupAccessibility() {
   }
   render() {
-    const t = this.attachShadow({ mode: "open" });
-    t.innerHTML = `
-      <style>${F}</style>
-      <slot name="trigger"></slot>
-      <div
-        class="menu-content"
-        role="menu"
-        aria-labelledby="${this._id}-trigger"
-        tabindex="-1"
-        hidden
-        part="menu"
-      >
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-trigger`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Select an option...", a = this.getAttribute("aria-label") || "", r = this.getAttribute("aria-labelledby") || "";
+    e.innerHTML = `
+      <style>${xe}</style>
+      <div class="select-wrapper" part="wrapper">
+        <button
+          id="${t}"
+          type="button"
+          role="combobox"
+          aria-expanded="false"
+          aria-controls="${i}"
+          aria-haspopup="listbox"
+          ${a ? `aria-label="${a}"` : ""}
+          ${r ? `aria-labelledby="${r}"` : ""}
+          class="select-trigger"
+          part="trigger"
+        >
+          <span class="select-value placeholder" part="value">${s}</span>
+          <span class="chevron" aria-hidden="true" part="chevron">&#9660;</span>
+        </button>
+        <ul
+          id="${i}"
+          role="listbox"
+          aria-labelledby="${t}"
+          class="listbox"
+          tabindex="-1"
+          hidden
+          part="listbox"
+        ></ul>
+      </div>
+      <div class="options-source" hidden>
         <slot></slot>
       </div>
-    `;
+    `, this._triggerElement = e.querySelector(".select-trigger"), this._listboxElement = e.querySelector(".listbox");
   }
   setupEventListeners() {
-    var s, o;
-    const t = this.querySelector('[slot="trigger"]');
-    t == null || t.addEventListener("click", this.handleTriggerClick), t == null || t.addEventListener(
-      "keydown",
-      this.handleTriggerKeyDown
-    );
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="trigger"]');
-    e == null || e.addEventListener("click", this.handleTriggerClick), this.addEventListener("click", this.handleItemClick), this.addEventListener("keydown", this.handleMenuKeyDown), this.addEventListener("mouseover", this.handleMouseOver), document.addEventListener("mousedown", this.handleOutsideClick);
-    const i = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot:not([name])");
-    i == null || i.addEventListener("slotchange", this.updateMenuItems), this.updateMenuItems();
+    var t, i, s, a, r;
+    (t = this._triggerElement) == null || t.addEventListener("click", this.handleTriggerClick), (i = this._triggerElement) == null || i.addEventListener("keydown", this.handleKeyDown), (s = this._triggerElement) == null || s.addEventListener("blur", this.handleBlur), (a = this._listboxElement) == null || a.addEventListener(
+      "mousedown",
+      this.handleListboxMouseDown
+    ), document.addEventListener("mousedown", this.handleOutsideClick);
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
+    e == null || e.addEventListener("slotchange", this.updateOptions), this.updateOptions();
   }
   cleanupEventListeners() {
     document.removeEventListener("mousedown", this.handleOutsideClick);
   }
-  onAttributeChange(t, e, i) {
-    t === "open" && (this.open = i !== null);
+  onAttributeChange(e, t, i) {
+    e === "open" && (this.open = i !== null), e === "value" && (this.value = i), e === "disabled" && this._triggerElement && (this._triggerElement.disabled = i !== null), e === "placeholder" && this.updateTriggerText();
+  }
+  renderOptions() {
+    this._listboxElement && (this._listboxElement.innerHTML = this._options.map(
+      (e, t) => `
+        <li
+          id="${this._id}-option-${t}"
+          role="option"
+          aria-selected="${this._selectedValue === e.value}"
+          aria-disabled="${e.disabled}"
+          data-value="${e.value}"
+          data-index="${t}"
+          part="option"
+          ${e.disabled ? 'class="disabled"' : ""}
+        >
+          <span class="option-text">${e.label}</span>
+          ${this._selectedValue === e.value ? '<span class="check-mark" aria-hidden="true">&#10003;</span>' : ""}
+        </li>
+      `
+    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((e) => {
+      e.addEventListener("click", this.handleOptionClick), e.addEventListener("mouseenter", this.handleOptionHover);
+    }));
+  }
+  openAndHighlight(e = !1) {
+    this.open = !0;
+    const t = this._options.findIndex(
+      (i) => i.value === this._selectedValue
+    );
+    t >= 0 ? this._highlightedIndex = t : this._highlightedIndex = e ? this.findLastEnabled() : this.findFirstEnabled(), this.updateHighlight(), v(
+      `${this._options.length} option${this._options.length === 1 ? "" : "s"} available`
+    );
+  }
+  selectOption(e) {
+    this._selectedValue = e.value, this.updateTriggerText(), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), v(`${e.label} selected`), this.emit("a11y-select-change", {
+      value: e.value,
+      label: e.label
+    }), this.emit("change", {
+      value: e.value,
+      label: e.label
+    });
   }
-  highlightItem(t, e = !0) {
+  updateTriggerText() {
     var s;
-    if (this._highlightedIndex >= 0) {
-      const o = this._menuItems[this._highlightedIndex];
-      o == null || o.removeAttribute("data-highlighted");
+    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".select-value");
+    if (!e) return;
+    const t = this._options.find(
+      (a) => a.value === this._selectedValue
+    ), i = this.getAttribute("placeholder") || "Select an option...";
+    t ? (e.textContent = t.label, e.classList.remove("placeholder")) : (e.textContent = i, e.classList.add("placeholder"));
+  }
+  highlightNext() {
+    const e = this.findNextEnabled(this._highlightedIndex, 1);
+    e >= 0 && (this._highlightedIndex = e, this.updateHighlight());
+  }
+  highlightPrevious() {
+    const e = this.findNextEnabled(this._highlightedIndex, -1);
+    e >= 0 && (this._highlightedIndex = e, this.updateHighlight());
+  }
+  findNextEnabled(e, t) {
+    var r;
+    const i = this._options.length;
+    let s = e + t;
+    s < 0 && (s = i - 1), s >= i && (s = 0);
+    const a = s;
+    for (; (r = this._options[s]) != null && r.disabled; )
+      if (s += t, s < 0 && (s = i - 1), s >= i && (s = 0), s === a) return -1;
+    return s;
+  }
+  findFirstEnabled() {
+    return this._options.findIndex((e) => !e.disabled);
+  }
+  findLastEnabled() {
+    var e;
+    for (let t = this._options.length - 1; t >= 0; t--)
+      if (!((e = this._options[t]) != null && e.disabled)) return t;
+    return -1;
+  }
+  updateHighlight() {
+    var e, t, i, s;
+    if ((e = this._listboxElement) == null || e.querySelectorAll('[role="option"]').forEach((a, r) => {
+      a.classList.toggle("highlighted", r === this._highlightedIndex);
+    }), this._highlightedIndex >= 0) {
+      const a = `${this._id}-option-${this._highlightedIndex}`;
+      (t = this._triggerElement) == null || t.setAttribute("aria-activedescendant", a);
+      const r = (i = this._listboxElement) == null ? void 0 : i.querySelector(`#${a}`);
+      r == null || r.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    } else
+      (s = this._triggerElement) == null || s.removeAttribute("aria-activedescendant");
+  }
+  updateListboxVisibility() {
+    !this._listboxElement || !this._triggerElement || (this._open ? (this._listboxElement.hidden = !1, this._triggerElement.setAttribute("aria-expanded", "true"), this.updateListboxPosition(), this.emit("a11y-select-open")) : (this._listboxElement.hidden = !0, this._triggerElement.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this.updateHighlight(), this._listboxElement.style.top = "", this._listboxElement.style.bottom = "", this.removeAttribute("data-position"), this.emit("a11y-select-close")));
+  }
+  updateListboxPosition() {
+    if (!this._listboxElement || !this._triggerElement) return;
+    const e = this._triggerElement.getBoundingClientRect(), t = window.innerHeight, i = Math.min(this._listboxElement.scrollHeight, 200), s = t - e.bottom, a = e.top;
+    s < i + 8 && a > s ? (this._listboxElement.style.top = "auto", this._listboxElement.style.bottom = "100%", this._listboxElement.style.marginTop = "0", this._listboxElement.style.marginBottom = "4px", this.setAttribute("data-position", "top")) : (this._listboxElement.style.top = "100%", this._listboxElement.style.bottom = "auto", this._listboxElement.style.marginTop = "4px", this._listboxElement.style.marginBottom = "0", this.setAttribute("data-position", "bottom"));
+  }
+  /** Programmatic open */
+  show() {
+    this.open = !0;
+  }
+  /** Programmatic close */
+  close() {
+    this.open = !1;
+  }
+}
+u("a11y-select", j);
+class U extends c {
+  constructor() {
+    super(...arguments), this._value = "", this._inputEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (e) => {
+      const t = e.target;
+      this._value = t.value, this.emit("input", { value: this._value });
+    }, this.handleChange = (e) => {
+      const t = e.target;
+      this._value = t.value, this.emit("change", { value: this._value });
+    }, this.handleFocus = () => {
+      this.emit("a11y-input-focus");
+    }, this.handleBlur = () => {
+      this.emit("a11y-input-blur");
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "label",
+      "hint",
+      "error",
+      "type",
+      "placeholder",
+      "value",
+      "disabled",
+      "readonly",
+      "required",
+      "name",
+      "autocomplete",
+      "maxlength",
+      "minlength",
+      "pattern",
+      "inputmode",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  // =========================================================================
+  // Properties
+  // =========================================================================
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    const t = this._value;
+    this._value = e, this._inputEl && this._inputEl.value !== e && (this._inputEl.value = e), e !== t && this.setAttribute("value", e);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e);
+  }
+  get readOnly() {
+    return this.hasAttribute("readonly");
+  }
+  set readOnly(e) {
+    this.toggleAttribute("readonly", e);
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(e) {
+    this.toggleAttribute("required", e);
+  }
+  get error() {
+    return this.getAttribute("error") || "";
+  }
+  set error(e) {
+    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  }
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+  setupAccessibility() {
+    var e;
+    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+      `[compa11y/Input] Input has no accessible label. Add label="...", aria-label="...", or aria-labelledby="..." attribute.
+💡 Suggestion: <a11y-input label="Full Name"></a11y-input>`
+    ));
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", d = this.getAttribute("type") || "text", h = this.getAttribute("placeholder") || "", g = this.getAttribute("name") || "", m = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("pattern"), w = this.getAttribute("inputmode"), L = this.getAttribute("aria-label") || "", S = this.getAttribute("aria-labelledby") || "", I = this.disabled, x = this.readOnly, y = this.required, A = !!o, E = [];
+    l && E.push(s), A && E.push(a);
+    const C = E.length ? `aria-describedby="${E.join(" ")}"` : "", $ = !r && L ? `aria-label="${L}"` : "", ee = !r && S ? `aria-labelledby="${S}"` : r ? `aria-labelledby="${i}"` : "";
+    this.setAttribute("data-error", A ? "true" : "false"), e.innerHTML = `
+      <style>${Ee}</style>
+      <div class="input-wrapper" part="wrapper">
+        ${r ? `<label id="${i}" for="${t}" class="input-label" part="label">
+                ${r}${y ? '<span class="input-required" aria-hidden="true" part="required">*</span>' : ""}
+              </label>` : ""}
+        <input
+          id="${t}"
+          type="${d}"
+          value="${this._value}"
+          ${h ? `placeholder="${h}"` : ""}
+          ${g ? `name="${g}"` : ""}
+          ${m ? `autocomplete="${m}"` : ""}
+          ${f ? `maxlength="${f}"` : ""}
+          ${_ ? `minlength="${_}"` : ""}
+          ${k ? `pattern="${k}"` : ""}
+          ${w ? `inputmode="${w}"` : ""}
+          ${$}
+          ${ee}
+          ${C}
+          ${A ? 'aria-invalid="true"' : ""}
+          ${y ? 'aria-required="true"' : ""}
+          ${I ? "disabled" : ""}
+          ${x ? "readonly" : ""}
+          part="field"
+        />
+        ${l ? `<div id="${s}" class="input-hint" part="hint">${l}</div>` : ""}
+        ${A ? `<div id="${a}" class="input-error" role="alert" part="error">${o}</div>` : ""}
+      </div>
+    `, this._inputEl = e.querySelector("input"), this._labelEl = e.querySelector("label"), this._hintEl = e.querySelector(".input-hint"), this._errorEl = e.querySelector(".input-error");
+    const z = this.getAttribute("value");
+    z && this._inputEl && (this._value = z, this._inputEl.value = z);
+  }
+  setupEventListeners() {
+    var e, t, i, s;
+    (e = this._inputEl) == null || e.addEventListener("input", this.handleInput), (t = this._inputEl) == null || t.addEventListener("change", this.handleChange), (i = this._inputEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.addEventListener("blur", this.handleBlur);
+  }
+  cleanupEventListeners() {
+    var e, t, i, s;
+    (e = this._inputEl) == null || e.removeEventListener("input", this.handleInput), (t = this._inputEl) == null || t.removeEventListener("change", this.handleChange), (i = this._inputEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._inputEl) == null || s.removeEventListener("blur", this.handleBlur);
+  }
+  onAttributeChange(e, t, i) {
+    switch (e) {
+      case "value":
+        this._value = i || "", this._inputEl && this._inputEl.value !== this._value && (this._inputEl.value = this._value);
+        break;
+      case "error":
+        this.updateError(i || "");
+        break;
+      case "hint":
+        this.updateHint(i || "");
+        break;
+      case "disabled":
+        this._inputEl && (i !== null ? this._inputEl.setAttribute("disabled", "") : this._inputEl.removeAttribute("disabled"));
+        break;
+      case "readonly":
+        this._inputEl && (i !== null ? this._inputEl.setAttribute("readonly", "") : this._inputEl.removeAttribute("readonly"));
+        break;
+      case "required":
+        this._inputEl && (i !== null ? this._inputEl.setAttribute("aria-required", "true") : this._inputEl.removeAttribute("aria-required")), this.updateRequiredIndicator(i !== null);
+        break;
+      case "placeholder":
+        this._inputEl && (i ? this._inputEl.setAttribute("placeholder", i) : this._inputEl.removeAttribute("placeholder"));
+        break;
+      case "type":
+        this._inputEl && (this._inputEl.type = i || "text");
+        break;
+      case "name":
+        this._inputEl && (i ? this._inputEl.setAttribute("name", i) : this._inputEl.removeAttribute("name"));
+        break;
+      case "autocomplete":
+        this._inputEl && (i ? this._inputEl.setAttribute("autocomplete", i) : this._inputEl.removeAttribute("autocomplete"));
+        break;
+      case "maxlength":
+        this._inputEl && (i ? this._inputEl.setAttribute("maxlength", i) : this._inputEl.removeAttribute("maxlength"));
+        break;
+      case "minlength":
+        this._inputEl && (i ? this._inputEl.setAttribute("minlength", i) : this._inputEl.removeAttribute("minlength"));
+        break;
+      case "pattern":
+        this._inputEl && (i ? this._inputEl.setAttribute("pattern", i) : this._inputEl.removeAttribute("pattern"));
+        break;
+      case "inputmode":
+        this._inputEl && (i ? this._inputEl.setAttribute("inputmode", i) : this._inputEl.removeAttribute("inputmode"));
+        break;
+      case "label":
+      case "aria-label":
+      case "aria-labelledby":
+        this.shadowRoot && (this.cleanupEventListeners(), this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
+        break;
     }
-    this._highlightedIndex = t;
-    const i = this._menuItems[t];
-    if (i) {
-      i.setAttribute("data-highlighted", "true"), e && i.focus();
-      const o = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="menu"]');
-      o == null || o.setAttribute("aria-activedescendant", i.id);
+  }
+  // =========================================================================
+  // DOM update helpers
+  // =========================================================================
+  updateError(e) {
+    var i;
+    const t = !!e;
+    if (this.setAttribute("data-error", t ? "true" : "false"), this._inputEl && (t ? this._inputEl.setAttribute("aria-invalid", "true") : this._inputEl.removeAttribute("aria-invalid")), t) {
+      if (this._errorEl)
+        this._errorEl.textContent = e;
+      else {
+        const s = `${this._id}-error`, a = document.createElement("div");
+        a.id = s, a.className = "input-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = e;
+        const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".input-wrapper");
+        r == null || r.appendChild(a), this._errorEl = a, D(e);
+      }
+      this.updateAriaDescribedBy();
+    } else
+      this._errorEl && (this._errorEl.remove(), this._errorEl = null), this.updateAriaDescribedBy();
+  }
+  updateHint(e) {
+    var t;
+    if (e)
+      if (this._hintEl)
+        this._hintEl.textContent = e;
+      else {
+        const i = `${this._id}-hint`, s = document.createElement("div");
+        s.id = i, s.className = "input-hint", s.setAttribute("part", "hint"), s.textContent = e;
+        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".input-wrapper");
+        this._errorEl ? a == null || a.insertBefore(s, this._errorEl) : a == null || a.appendChild(s), this._hintEl = s;
+      }
+    else
+      this._hintEl && (this._hintEl.remove(), this._hintEl = null);
+    this.updateAriaDescribedBy();
+  }
+  updateAriaDescribedBy() {
+    if (!this._inputEl) return;
+    const e = [];
+    this._hintEl && e.push(this._hintEl.id), this._errorEl && e.push(this._errorEl.id), e.length > 0 ? this._inputEl.setAttribute("aria-describedby", e.join(" ")) : this._inputEl.removeAttribute("aria-describedby");
+  }
+  updateRequiredIndicator(e) {
+    if (!this._labelEl) return;
+    const t = this._labelEl.querySelector(".input-required");
+    if (e && !t) {
+      const i = document.createElement("span");
+      i.className = "input-required", i.setAttribute("aria-hidden", "true"), i.setAttribute("part", "required"), i.textContent = "*", this._labelEl.appendChild(i);
+    } else !e && t && t.remove();
+  }
+  // =========================================================================
+  // Public methods
+  // =========================================================================
+  /** Focus the input element */
+  focus() {
+    var e;
+    (e = this._inputEl) == null || e.focus();
+  }
+  /** Blur the input element */
+  blur() {
+    var e;
+    (e = this._inputEl) == null || e.blur();
+  }
+  /** Select all text in the input */
+  select() {
+    var e;
+    (e = this._inputEl) == null || e.select();
+  }
+}
+u("a11y-input", U);
+class Y extends c {
+  constructor() {
+    super(...arguments), this._value = "", this._textareaEl = null, this._labelEl = null, this._hintEl = null, this._errorEl = null, this.handleInput = (e) => {
+      const t = e.target;
+      this._value = t.value, this.emit("input", { value: this._value });
+    }, this.handleChange = (e) => {
+      const t = e.target;
+      this._value = t.value, this.emit("change", { value: this._value });
+    }, this.handleFocus = () => {
+      this.emit("a11y-textarea-focus");
+    }, this.handleBlur = () => {
+      this.emit("a11y-textarea-blur");
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "label",
+      "hint",
+      "error",
+      "rows",
+      "resize",
+      "placeholder",
+      "value",
+      "disabled",
+      "readonly",
+      "required",
+      "name",
+      "autocomplete",
+      "maxlength",
+      "minlength",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  // =========================================================================
+  // Properties
+  // =========================================================================
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    const t = this._value;
+    this._value = e, this._textareaEl && this._textareaEl.value !== e && (this._textareaEl.value = e), e !== t && this.setAttribute("value", e);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e);
+  }
+  get readOnly() {
+    return this.hasAttribute("readonly");
+  }
+  set readOnly(e) {
+    this.toggleAttribute("readonly", e);
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(e) {
+    this.toggleAttribute("required", e);
+  }
+  get error() {
+    return this.getAttribute("error") || "";
+  }
+  set error(e) {
+    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  }
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+  setupAccessibility() {
+    var e;
+    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && (this.hasAttribute("label") || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+      `[compa11y/Textarea] Textarea has no accessible label. Add label="...", aria-label="...", or aria-labelledby="..." attribute.
+💡 Suggestion: <a11y-textarea label="Description"></a11y-textarea>`
+    ));
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-field`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = this.getAttribute("label") || "", l = this.getAttribute("hint") || "", o = this.getAttribute("error") || "", d = this.getAttribute("rows") || "3", h = this.getAttribute("placeholder") || "", g = this.getAttribute("name") || "", m = this.getAttribute("autocomplete") || "", f = this.getAttribute("maxlength"), _ = this.getAttribute("minlength"), k = this.getAttribute("aria-label") || "", w = this.getAttribute("aria-labelledby") || "", L = this.disabled, S = this.readOnly, I = this.required, x = !!o, y = [];
+    l && y.push(s), x && y.push(a);
+    const A = y.length ? `aria-describedby="${y.join(" ")}"` : "", E = !r && k ? `aria-label="${k}"` : "", C = !r && w ? `aria-labelledby="${w}"` : r ? `aria-labelledby="${i}"` : "";
+    this.setAttribute("data-error", x ? "true" : "false"), e.innerHTML = `
+      <style>${ke}</style>
+      <div class="textarea-wrapper" part="wrapper">
+        ${r ? `<label id="${i}" for="${t}" class="textarea-label" part="label">
+                ${r}${I ? '<span class="textarea-required" aria-hidden="true" part="required">*</span>' : ""}
+              </label>` : ""}
+        <textarea
+          id="${t}"
+          rows="${d}"
+          ${h ? `placeholder="${h}"` : ""}
+          ${g ? `name="${g}"` : ""}
+          ${m ? `autocomplete="${m}"` : ""}
+          ${f ? `maxlength="${f}"` : ""}
+          ${_ ? `minlength="${_}"` : ""}
+          ${E}
+          ${C}
+          ${A}
+          ${x ? 'aria-invalid="true"' : ""}
+          ${I ? 'aria-required="true"' : ""}
+          ${L ? "disabled" : ""}
+          ${S ? "readonly" : ""}
+          part="field"
+        >${this._value}</textarea>
+        ${l ? `<div id="${s}" class="textarea-hint" part="hint">${l}</div>` : ""}
+        ${x ? `<div id="${a}" class="textarea-error" role="alert" part="error">${o}</div>` : ""}
+      </div>
+    `, this._textareaEl = e.querySelector("textarea"), this._labelEl = e.querySelector("label"), this._hintEl = e.querySelector(".textarea-hint"), this._errorEl = e.querySelector(".textarea-error");
+    const $ = this.getAttribute("value");
+    $ && this._textareaEl && (this._value = $, this._textareaEl.value = $);
+  }
+  setupEventListeners() {
+    var e, t, i, s;
+    (e = this._textareaEl) == null || e.addEventListener("input", this.handleInput), (t = this._textareaEl) == null || t.addEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.addEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.addEventListener("blur", this.handleBlur);
+  }
+  cleanupEventListeners() {
+    var e, t, i, s;
+    (e = this._textareaEl) == null || e.removeEventListener("input", this.handleInput), (t = this._textareaEl) == null || t.removeEventListener("change", this.handleChange), (i = this._textareaEl) == null || i.removeEventListener("focus", this.handleFocus), (s = this._textareaEl) == null || s.removeEventListener("blur", this.handleBlur);
+  }
+  onAttributeChange(e, t, i) {
+    switch (e) {
+      case "value":
+        this._value = i || "", this._textareaEl && this._textareaEl.value !== this._value && (this._textareaEl.value = this._value);
+        break;
+      case "error":
+        this.updateError(i || "");
+        break;
+      case "hint":
+        this.updateHint(i || "");
+        break;
+      case "disabled":
+        this._textareaEl && (i !== null ? this._textareaEl.setAttribute("disabled", "") : this._textareaEl.removeAttribute("disabled"));
+        break;
+      case "readonly":
+        this._textareaEl && (i !== null ? this._textareaEl.setAttribute("readonly", "") : this._textareaEl.removeAttribute("readonly"));
+        break;
+      case "required":
+        this._textareaEl && (i !== null ? this._textareaEl.setAttribute("aria-required", "true") : this._textareaEl.removeAttribute("aria-required")), this.updateRequiredIndicator(i !== null);
+        break;
+      case "placeholder":
+        this._textareaEl && (i ? this._textareaEl.setAttribute("placeholder", i) : this._textareaEl.removeAttribute("placeholder"));
+        break;
+      case "rows":
+        this._textareaEl && (this._textareaEl.rows = parseInt(i || "3", 10));
+        break;
+      case "name":
+        this._textareaEl && (i ? this._textareaEl.setAttribute("name", i) : this._textareaEl.removeAttribute("name"));
+        break;
+      case "autocomplete":
+        this._textareaEl && (i ? this._textareaEl.setAttribute("autocomplete", i) : this._textareaEl.removeAttribute("autocomplete"));
+        break;
+      case "maxlength":
+        this._textareaEl && (i ? this._textareaEl.setAttribute("maxlength", i) : this._textareaEl.removeAttribute("maxlength"));
+        break;
+      case "minlength":
+        this._textareaEl && (i ? this._textareaEl.setAttribute("minlength", i) : this._textareaEl.removeAttribute("minlength"));
+        break;
+      case "resize":
+        this._textareaEl && (this._textareaEl.style.resize = i || "vertical");
+        break;
+      case "label":
+      case "aria-label":
+      case "aria-labelledby":
+        this.shadowRoot && (this.cleanupEventListeners(), this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
+        break;
+    }
+  }
+  // =========================================================================
+  // DOM update helpers
+  // =========================================================================
+  updateError(e) {
+    var i;
+    const t = !!e;
+    if (this.setAttribute("data-error", t ? "true" : "false"), this._textareaEl && (t ? this._textareaEl.setAttribute("aria-invalid", "true") : this._textareaEl.removeAttribute("aria-invalid")), t) {
+      if (this._errorEl)
+        this._errorEl.textContent = e;
+      else {
+        const s = `${this._id}-error`, a = document.createElement("div");
+        a.id = s, a.className = "textarea-error", a.setAttribute("role", "alert"), a.setAttribute("part", "error"), a.textContent = e;
+        const r = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".textarea-wrapper");
+        r == null || r.appendChild(a), this._errorEl = a, D(e);
+      }
+      this.updateAriaDescribedBy();
+    } else
+      this._errorEl && (this._errorEl.remove(), this._errorEl = null), this.updateAriaDescribedBy();
+  }
+  updateHint(e) {
+    var t;
+    if (e)
+      if (this._hintEl)
+        this._hintEl.textContent = e;
+      else {
+        const i = `${this._id}-hint`, s = document.createElement("div");
+        s.id = i, s.className = "textarea-hint", s.setAttribute("part", "hint"), s.textContent = e;
+        const a = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".textarea-wrapper");
+        this._errorEl ? a == null || a.insertBefore(s, this._errorEl) : a == null || a.appendChild(s), this._hintEl = s;
+      }
+    else
+      this._hintEl && (this._hintEl.remove(), this._hintEl = null);
+    this.updateAriaDescribedBy();
+  }
+  updateAriaDescribedBy() {
+    if (!this._textareaEl) return;
+    const e = [];
+    this._hintEl && e.push(this._hintEl.id), this._errorEl && e.push(this._errorEl.id), e.length > 0 ? this._textareaEl.setAttribute("aria-describedby", e.join(" ")) : this._textareaEl.removeAttribute("aria-describedby");
+  }
+  updateRequiredIndicator(e) {
+    if (!this._labelEl) return;
+    const t = this._labelEl.querySelector(".textarea-required");
+    if (e && !t) {
+      const i = document.createElement("span");
+      i.className = "textarea-required", i.setAttribute("aria-hidden", "true"), i.setAttribute("part", "required"), i.textContent = "*", this._labelEl.appendChild(i);
+    } else !e && t && t.remove();
+  }
+  // =========================================================================
+  // Public methods
+  // =========================================================================
+  /** Focus the textarea element */
+  focus() {
+    var e;
+    (e = this._textareaEl) == null || e.focus();
+  }
+  /** Blur the textarea element */
+  blur() {
+    var e;
+    (e = this._textareaEl) == null || e.blur();
+  }
+  /** Select all text in the textarea */
+  select() {
+    var e;
+    (e = this._textareaEl) == null || e.select();
+  }
+}
+u("a11y-textarea", Y);
+class G extends c {
+  constructor() {
+    super(...arguments), this._buttonEl = null, this.handleClick = (e) => {
+      if (this.disabled || this.loading) {
+        e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      this.emit("a11y-button-click");
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "variant",
+      "size",
+      "disabled",
+      "discoverable",
+      "loading",
+      "type",
+      "aria-label"
+    ];
+  }
+  // =========================================================================
+  // Properties
+  // =========================================================================
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e);
+  }
+  get discoverable() {
+    return this.hasAttribute("discoverable");
+  }
+  set discoverable(e) {
+    this.toggleAttribute("discoverable", e);
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(e) {
+    this.toggleAttribute("loading", e);
+  }
+  get variant() {
+    return this.getAttribute("variant") || "secondary";
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get size() {
+    return this.getAttribute("size") || "md";
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+  setupAccessibility() {
+    var e, t;
+    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && ((t = this.textContent) != null && t.trim() || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || console.warn(
+      `[compa11y/Button] Button has no accessible label. Add text content, aria-label="...", or aria-labelledby="..." attribute.
+💡 Suggestion: <a11y-button>Click me</a11y-button>`
+    ));
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = this.variant, i = this.size, s = this.getAttribute("type") || "button", a = this.getAttribute("aria-label") || "", r = this.disabled, l = this.discoverable, o = this.loading, d = r || o, h = r && !l;
+    e.innerHTML = `
+      <style>${we}</style>
+      <button
+        class="variant-${t} size-${i}"
+        type="${s}"
+        ${h ? "disabled" : ""}
+        ${d ? 'aria-disabled="true"' : ""}
+        ${o ? 'aria-busy="true"' : ""}
+        ${a ? `aria-label="${a}"` : ""}
+        part="button"
+      >${o ? '<span class="button-spinner" aria-hidden="true" part="spinner"></span>' : ""}<slot></slot></button>
+    `, this._buttonEl = e.querySelector("button");
+  }
+  setupEventListeners() {
+    var e;
+    (e = this._buttonEl) == null || e.addEventListener("click", this.handleClick);
+  }
+  cleanupEventListeners() {
+    var e;
+    (e = this._buttonEl) == null || e.removeEventListener("click", this.handleClick);
+  }
+  onAttributeChange(e, t, i) {
+    switch (e) {
+      case "variant": {
+        if (!this._buttonEl) break;
+        const a = this._buttonEl.className.split(" ").filter((r) => !r.startsWith("variant-"));
+        a.push(`variant-${i || "secondary"}`), this._buttonEl.className = a.join(" ");
+        break;
+      }
+      case "size": {
+        if (!this._buttonEl) break;
+        const a = this._buttonEl.className.split(" ").filter((r) => !r.startsWith("size-"));
+        a.push(`size-${i || "md"}`), this._buttonEl.className = a.join(" ");
+        break;
+      }
+      case "disabled":
+      case "discoverable":
+        this.updateDisabledState();
+        break;
+      case "loading":
+        this.updateLoadingState();
+        break;
+      case "type":
+        this._buttonEl && (this._buttonEl.type = i || "button");
+        break;
+      case "aria-label":
+        this._buttonEl && (i ? this._buttonEl.setAttribute("aria-label", i) : this._buttonEl.removeAttribute("aria-label"));
+        break;
+    }
+  }
+  // =========================================================================
+  // DOM update helpers
+  // =========================================================================
+  updateDisabledState() {
+    if (!this._buttonEl) return;
+    const e = this.disabled, t = this.discoverable, i = this.loading, s = e && !t, a = e || i;
+    s ? this._buttonEl.setAttribute("disabled", "") : this._buttonEl.removeAttribute("disabled"), a ? this._buttonEl.setAttribute("aria-disabled", "true") : this._buttonEl.removeAttribute("aria-disabled");
+  }
+  updateLoadingState() {
+    if (!this._buttonEl) return;
+    if (this.loading) {
+      if (this._buttonEl.setAttribute("aria-busy", "true"), this._buttonEl.setAttribute("aria-disabled", "true"), !this._buttonEl.querySelector(".button-spinner")) {
+        const t = document.createElement("span");
+        t.className = "button-spinner", t.setAttribute("aria-hidden", "true"), t.setAttribute("part", "spinner"), this._buttonEl.insertBefore(t, this._buttonEl.firstChild);
+      }
+    } else {
+      this._buttonEl.removeAttribute("aria-busy");
+      const t = this._buttonEl.querySelector(".button-spinner");
+      t == null || t.remove(), this.updateDisabledState();
     }
   }
-  selectItem(t) {
-    const e = this._menuItems[t];
-    e && (this.emit("a11y-menu-select", { item: e, index: t }), e.click()), this.close();
+  // =========================================================================
+  // Public methods
+  // =========================================================================
+  /** Focus the button element */
+  focus() {
+    var e;
+    (e = this._buttonEl) == null || e.focus();
+  }
+  /** Blur the button element */
+  blur() {
+    var e;
+    (e = this._buttonEl) == null || e.blur();
+  }
+  /** Programmatically click the button */
+  click() {
+    var e;
+    (e = this._buttonEl) == null || e.click();
+  }
+}
+u("a11y-button", G);
+class X extends c {
+  constructor() {
+    super(...arguments), this._label = "", this._disabled = !1;
+  }
+  static get observedAttributes() {
+    return ["label", "disabled"];
+  }
+  get label() {
+    return this._label;
+  }
+  set label(e) {
+    this._label = e, this.setAttribute("label", e), this.updateLabel();
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    const t = !!e;
+    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  }
+  setupAccessibility() {
+    this.setAttribute("role", "group"), this._label = this.getAttribute("label") || "", this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
   }
-  updateMenuVisibility() {
-    var i;
-    const t = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".menu-content"), e = this.querySelector('[slot="trigger"]');
-    this._open ? (t == null || t.removeAttribute("hidden"), e == null || e.setAttribute("aria-expanded", "true"), this.updateMenuItems(), this.emit("a11y-menu-open")) : (t == null || t.setAttribute("hidden", ""), e == null || e.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this._menuItems.forEach((s) => {
-      s.removeAttribute("data-highlighted");
-    }), e == null || e.focus(), this.emit("a11y-menu-close"));
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const e = `${this._id}-label`;
+    this.shadowRoot.innerHTML = `
+      <style>${Se}</style>
+      <div class="optgroup-wrapper" part="group">
+        <div class="optgroup-label" part="label" id="${e}" role="presentation">
+          ${this._label}
+        </div>
+        <div class="optgroup-options" part="options" role="none">
+          <slot></slot>
+        </div>
+      </div>
+    `, this.setAttribute("aria-labelledby", e);
   }
-  /**
-   * Show the menu
-   */
-  show() {
-    this.open = !0;
+  setupEventListeners() {
   }
-  /**
-   * Hide the menu
-   */
-  close() {
-    this.open = !1;
+  cleanupEventListeners() {
   }
-  /**
-   * Toggle the menu
-   */
-  toggle() {
-    this.open = !this._open;
+  updateLabel() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".optgroup-label");
+    e && (e.textContent = this._label);
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "label":
+          this._label = i || "", this.updateLabel();
+          break;
+        case "disabled":
+          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+          break;
+      }
   }
 }
-d("a11y-menu", _);
-class x extends h {
+class V extends c {
   constructor() {
-    super(...arguments), this._tabs = [], this._panels = [], this._selectedIndex = 0, this.updateTabsAndPanels = () => {
-      this._tabs = Array.from(
-        this.querySelectorAll('[role="tab"]')
-      ), this._panels = Array.from(
-        this.querySelectorAll('[role="tabpanel"]')
-      ), this._tabs.forEach((t, e) => {
-        const i = this._panels[e], s = t.id || `${this._id}-tab-${e}`, o = (i == null ? void 0 : i.id) || `${this._id}-panel-${e}`;
-        t.id = s, t.setAttribute("aria-controls", o), t.setAttribute("tabindex", e === this._selectedIndex ? "0" : "-1"), t.setAttribute("aria-selected", String(e === this._selectedIndex)), t.hasAttribute("slot") || t.setAttribute("slot", "tab"), i && (i.id = o, i.setAttribute("aria-labelledby", s), i.setAttribute("tabindex", "0"), i.hidden = e !== this._selectedIndex, i.hasAttribute("slot") || i.setAttribute("slot", "panel"));
-      }), this.updateSelection();
-    }, this.handleClick = (t) => {
-      const e = t.target;
-      if (e.getAttribute("role") === "tab") {
-        const i = this._tabs.indexOf(e);
-        i !== -1 && e.getAttribute("aria-disabled") !== "true" && this.selectTab(i);
-      }
-    }, this.handleKeyDown = (t) => {
-      var l;
-      if (t.target.getAttribute("role") !== "tab") return;
-      const i = this.orientation === "horizontal", s = i ? "ArrowRight" : "ArrowDown", o = i ? "ArrowLeft" : "ArrowUp";
-      let a = this._selectedIndex;
-      switch (t.key) {
-        case s:
-          t.preventDefault(), a = (this._selectedIndex + 1) % this._tabs.length;
-          break;
-        case o:
-          t.preventDefault(), a = (this._selectedIndex - 1 + this._tabs.length) % this._tabs.length;
-          break;
-        case "Home":
-          t.preventDefault(), a = 0;
-          break;
-        case "End":
-          t.preventDefault(), a = this._tabs.length - 1;
-          break;
-        default:
-          return;
+    super(...arguments), this._value = "", this._disabled = !1, this._selected = !1, this._discoverable = !0, this.handleClick = (e) => {
+      if (this.effectivelyDisabled) {
+        e.preventDefault();
+        return;
       }
-      (l = this._tabs[a]) == null || l.focus(), this.activationMode === "automatic" && this.selectTab(a);
+      this.dispatchEvent(
+        new CustomEvent("option-select", {
+          detail: { value: this._value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
     };
   }
   static get observedAttributes() {
-    return ["orientation", "activation-mode", "selected-index"];
-  }
-  get selectedIndex() {
-    return this._selectedIndex;
+    return ["value", "disabled", "discoverable"];
   }
-  set selectedIndex(t) {
-    t >= 0 && t < this._tabs.length && (this._selectedIndex = t, this.updateSelection());
+  get value() {
+    return this._value;
   }
-  get orientation() {
-    return this.getAttribute("orientation") || "horizontal";
+  set value(e) {
+    this._value = e, this.setAttribute("value", e);
   }
-  get activationMode() {
-    return this.getAttribute("activation-mode") || "automatic";
+  get disabled() {
+    return this._disabled;
   }
-  setupAccessibility() {
-    this.updateTabsAndPanels();
+  set disabled(e) {
+    const t = !!e;
+    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
   }
-  render() {
-    const t = this.attachShadow({ mode: "open" });
-    t.innerHTML = `
-      <style>${P}</style>
-      <div class="tablist" role="tablist" aria-orientation="${this.orientation}" part="tablist">
-        <slot name="tab"></slot>
-      </div>
-      <div class="panels" part="panels">
-        <slot name="panel"></slot>
-      </div>
-      <slot></slot>
-    `;
+  get selected() {
+    return this._selected;
   }
-  setupEventListeners() {
-    var s, o, a;
-    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
-    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector('slot[name="tab"]'), e = (o = this.shadowRoot) == null ? void 0 : o.querySelector('slot[name="panel"]'), i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
-    t == null || t.addEventListener("slotchange", this.updateTabsAndPanels), e == null || e.addEventListener("slotchange", this.updateTabsAndPanels), i == null || i.addEventListener("slotchange", this.updateTabsAndPanels);
+  set selected(e) {
+    const t = !!e;
+    this._selected !== t && (this._selected = t, this.setAttribute("aria-selected", String(t)));
   }
-  onAttributeChange(t, e, i) {
-    var s;
-    if (t === "orientation") {
-      const o = (s = this.shadowRoot) == null ? void 0 : s.querySelector('[role="tablist"]');
-      o == null || o.setAttribute("aria-orientation", i || "horizontal");
-    }
-    t === "selected-index" && i && (this.selectedIndex = parseInt(i, 10));
-  }
-  selectTab(t) {
-    const e = this._selectedIndex;
-    if (this._selectedIndex = t, this.updateSelection(), e !== t) {
-      const i = this._tabs[t];
-      r(`${(i == null ? void 0 : i.textContent) || "Tab"} selected`), this.emit("a11y-tabs-change", {
-        index: t,
-        tab: this._tabs[t],
-        panel: this._panels[t]
-      });
-    }
+  get discoverable() {
+    return this._discoverable;
   }
-  updateSelection() {
-    this._tabs.forEach((t, e) => {
-      const i = e === this._selectedIndex;
-      t.setAttribute("aria-selected", String(i)), t.setAttribute("tabindex", i ? "0" : "-1");
-    }), this._panels.forEach((t, e) => {
-      t.hidden = e !== this._selectedIndex;
-    });
+  set discoverable(e) {
+    this._discoverable = !!e;
   }
   /**
-   * Select a tab by index
+   * Whether this option is effectively disabled (own disabled or group disabled)
    */
-  select(t) {
-    this.selectTab(t);
+  get effectivelyDisabled() {
+    if (this._disabled) return !0;
+    const e = this.closest("a11y-optgroup");
+    return (e == null ? void 0 : e.disabled) ?? !1;
   }
-  /**
-   * Select next tab
-   */
-  next() {
-    this.selectTab((this._selectedIndex + 1) % this._tabs.length);
+  setupAccessibility() {
+    this.setAttribute("role", "option"), this.setAttribute("aria-selected", "false"), this._value = this.getAttribute("value") || "", this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
+    const e = this.getAttribute("discoverable");
+    (e === "false" || e === "0") && (this._discoverable = !1);
   }
-  /**
-   * Select previous tab
-   */
-  previous() {
-    this.selectTab(
-      (this._selectedIndex - 1 + this._tabs.length) % this._tabs.length
-    );
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>${Le}</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>
+      </div>
+    `;
   }
-}
-d("a11y-tabs", x);
-class v extends h {
-  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"));
-      this._options = t.map((e) => ({
-        value: e.getAttribute("value") || e.textContent || "",
-        label: e.textContent || "",
-        disabled: e.hasAttribute("disabled"),
-        element: e
-      })), this._filteredOptions = [...this._options], this.renderOptions();
-    }, this.handleInput = (t) => {
-      const e = t.target;
-      this._inputValue = e.value;
-      const i = this._inputValue.toLowerCase();
-      this._filteredOptions = i ? this._options.filter((o) => o.label.toLowerCase().includes(i)) : [...this._options], this.renderOptions(), this.open = !0, this._highlightedIndex = 0, this.updateHighlight(), this.updateClearButton();
-      const s = this._filteredOptions.length;
-      r(
-        s === 0 ? "No results" : `${s} result${s === 1 ? "" : "s"} available`
-      );
-    }, this.handleFocus = () => {
-      this.open = !0;
-    }, this.handleBlur = () => {
-      setTimeout(() => {
-        var t;
-        (t = this.shadowRoot) != null && t.activeElement || (this.open = !1);
-      }, 150);
-    }, this.handleKeyDown = (t) => {
-      switch (t.key) {
-        case "ArrowDown":
-          t.preventDefault(), this._open ? this._highlightedIndex = Math.min(
-            this._highlightedIndex + 1,
-            this._filteredOptions.length - 1
-          ) : (this.open = !0, this._highlightedIndex = 0), this.updateHighlight();
-          break;
-        case "ArrowUp":
-          t.preventDefault(), this._open ? this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0) : (this.open = !0, this._highlightedIndex = this._filteredOptions.length - 1), this.updateHighlight();
-          break;
-        case "Enter":
-          if (t.preventDefault(), this._open && this._highlightedIndex >= 0) {
-            const e = this._filteredOptions[this._highlightedIndex];
-            e && !e.disabled && this.selectOption(e);
-          }
-          break;
-        case "Escape":
-          t.preventDefault(), this.open = !1, this._highlightedIndex = -1;
-          break;
-        case "Home":
-          this._open && (t.preventDefault(), this._highlightedIndex = 0, this.updateHighlight());
+  setupEventListeners() {
+    this.addEventListener("click", this.handleClick);
+  }
+  cleanupEventListeners() {
+    this.removeEventListener("click", this.handleClick);
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "value":
+          this._value = i || "";
           break;
-        case "End":
-          this._open && (t.preventDefault(), this._highlightedIndex = this._filteredOptions.length - 1, this.updateHighlight());
+        case "disabled":
+          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
           break;
-        case "Tab":
-          this._open && (this.open = !1, this._highlightedIndex = -1);
+        case "discoverable":
+          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
           break;
       }
-    }, this.handleOptionClick = (t) => {
-      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._filteredOptions[i];
-      s && !s.disabled && this.selectOption(s);
-    }, this.handleOptionHover = (t) => {
-      const e = t.currentTarget, i = parseInt(e.dataset.index || "0", 10), s = this._filteredOptions[i];
-      s && !s.disabled && (this._highlightedIndex = i, this.updateHighlight());
-    }, this.handleClear = () => {
-      this._inputValue = "", this._selectedValue = null, this._inputElement && (this._inputElement.value = "", this._inputElement.focus()), this._filteredOptions = [...this._options], this.renderOptions(), this.updateClearButton(), this.emit("a11y-combobox-clear"), this.emit("a11y-combobox-change", { value: null, label: null });
-    }, this.handleOutsideClick = (t) => {
-      if (!this._open) return;
-      t.composedPath().includes(this) || (this.open = !1);
+  }
+}
+class W extends c {
+  constructor() {
+    super(...arguments), this._value = null, this._values = /* @__PURE__ */ new Set(), this._multiple = !1, this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._focusedIndex = -1, this._typeAhead = null, this.handleFocus = () => {
+      if (this._focusedIndex >= 0) return;
+      const e = this.getAllOptions();
+      if (!this._multiple && this._value) {
+        const t = e.findIndex((i) => i.value === this._value);
+        if (t >= 0) {
+          this._focusedIndex = t, this.updateFocusHighlight();
+          return;
+        }
+      } else if (this._multiple && this._values.size > 0) {
+        const t = e.findIndex((i) => this._values.has(i.value));
+        if (t >= 0) {
+          this._focusedIndex = t, this.updateFocusHighlight();
+          return;
+        }
+      }
+      this._focusedIndex = this.findFirstEnabled(), this.updateFocusHighlight();
+    }, this.handleOptionSelect = (e) => {
+      var r;
+      if (this._disabled) return;
+      const t = (r = e.detail) == null ? void 0 : r.value;
+      if (t === void 0) return;
+      const i = this.getAllOptions(), s = i.find((l) => l.value === t);
+      if (!s) return;
+      const a = i.indexOf(s);
+      this._focusedIndex = a, this.updateFocusHighlight(), this.selectOption(s), this.focus();
+    }, this.handleKeyDown = (e) => {
+      var a, r, l;
+      if (this._disabled && !this._discoverable) return;
+      const t = this.getAllOptions();
+      if (t.length === 0) return;
+      let i = null, s = !1;
+      if (this._multiple)
+        switch (e.key) {
+          case "ArrowDown":
+            e.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, 1), i >= 0 && this.toggleOptionSelection(t[i])) : i = this.findNextEnabled(this._focusedIndex, 1), s = !0;
+            break;
+          case "ArrowUp":
+            e.shiftKey ? (i = this.findNextEnabled(this._focusedIndex, -1), i >= 0 && this.toggleOptionSelection(t[i])) : i = this.findNextEnabled(this._focusedIndex, -1), s = !0;
+            break;
+          case " ":
+            this._focusedIndex >= 0 && t[this._focusedIndex] != null && this.toggleOptionSelection(t[this._focusedIndex]), s = !0;
+            break;
+          case "Home":
+            e.ctrlKey && e.shiftKey ? (this.selectRange(this.findFirstEnabled(), this._focusedIndex), i = this.findFirstEnabled()) : i = this.findFirstEnabled(), s = !0;
+            break;
+          case "End":
+            e.ctrlKey && e.shiftKey ? (this.selectRange(this._focusedIndex, this.findLastEnabled()), i = this.findLastEnabled()) : i = this.findLastEnabled(), s = !0;
+            break;
+          case "a":
+            (e.ctrlKey || e.metaKey) && (this.toggleSelectAll(), s = !0);
+            break;
+          default:
+            if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+              const o = (a = this._typeAhead) == null ? void 0 : a.type(e.key);
+              if (o) {
+                const d = t.findIndex(
+                  (h) => {
+                    var g;
+                    return (((g = h.textContent) == null ? void 0 : g.trim()) || "") === o && !h.effectivelyDisabled;
+                  }
+                );
+                d >= 0 && (i = d, s = !0);
+              }
+            }
+            break;
+        }
+      else
+        switch (e.key) {
+          case "ArrowDown":
+            i = this.findNextEnabled(this._focusedIndex, 1), s = !0;
+            break;
+          case "ArrowUp":
+            i = this.findNextEnabled(this._focusedIndex, -1), s = !0;
+            break;
+          case "Home":
+            i = this.findFirstEnabled(), s = !0;
+            break;
+          case "End":
+            i = this.findLastEnabled(), s = !0;
+            break;
+          default:
+            if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+              const o = (r = this._typeAhead) == null ? void 0 : r.type(e.key);
+              if (o) {
+                const d = t.findIndex(
+                  (h) => {
+                    var g;
+                    return (((g = h.textContent) == null ? void 0 : g.trim()) || "") === o && !h.effectivelyDisabled;
+                  }
+                );
+                d >= 0 && (i = d, s = !0);
+              }
+            }
+            break;
+        }
+      if (s && (e.preventDefault(), e.stopPropagation()), i !== null && i >= 0) {
+        this._focusedIndex = i, this.updateFocusHighlight();
+        const o = t[i];
+        if (!this._multiple && o)
+          this.selectSingle(o);
+        else if (o) {
+          const d = ((l = o.textContent) == null ? void 0 : l.trim()) || o.value, h = this._values.has(o.value);
+          p(`${d}${h ? ", selected" : ""}`);
+        }
+      }
     };
   }
   static get observedAttributes() {
-    return ["open", "value", "placeholder", "disabled", "clearable"];
+    return [
+      "value",
+      "multiple",
+      "disabled",
+      "discoverable",
+      "orientation",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  // ===== Getters/Setters =====
+  get value() {
+    return this._multiple ? Array.from(this._values) : this._value || "";
+  }
+  set value(e) {
+    if (this._multiple) {
+      const t = Array.isArray(e) ? e : String(e).split(",").filter(Boolean);
+      this._values = new Set(t), this.setAttribute("value", t.join(","));
+    } else {
+      const t = Array.isArray(e) ? e[0] || "" : String(e);
+      this._value = t, this.setAttribute("value", t);
+    }
+    this.syncOptionStates();
   }
-  get open() {
-    return this._open;
+  get multiple() {
+    return this._multiple;
   }
-  set open(t) {
-    const e = this._open;
-    this._open = t, t !== e && this.updateListboxVisibility(), this.toggleAttribute("open", t);
+  set multiple(e) {
+    const t = !!e;
+    this._multiple !== t && (this._multiple = t, t ? (this.setAttribute("multiple", ""), this.setAttribute("aria-multiselectable", "true")) : (this.removeAttribute("multiple"), this.removeAttribute("aria-multiselectable")));
   }
-  get value() {
-    return this._selectedValue;
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    const t = !!e;
+    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  }
+  get discoverable() {
+    return this._discoverable;
+  }
+  set discoverable(e) {
+    this._discoverable = !!e;
   }
-  set value(t) {
-    this._selectedValue = t;
-    const e = this._options.find((i) => i.value === t);
-    e && (this._inputValue = e.label, this._inputElement && (this._inputElement.value = e.label)), this.setAttribute("value", t || "");
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(e) {
+    this._orientation = e, this.setAttribute("orientation", e), this.setAttribute("aria-orientation", e);
   }
+  // ===== Lifecycle =====
   setupAccessibility() {
+    this.setAttribute("role", "listbox"), this.setAttribute("aria-orientation", this._orientation), !(this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) && process.env.NODE_ENV !== "production" && console.warn(
+      "[Compa11y Listbox]: Listbox has no accessible label. Use aria-label or aria-labelledby."
+    ), this._multiple = this.hasAttribute("multiple"), this._multiple && this.setAttribute("aria-multiselectable", "true"), this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
+    const t = this.getAttribute("orientation");
+    (t === "horizontal" || t === "vertical") && (this._orientation = t);
+    const i = this.getAttribute("discoverable");
+    (i === "false" || i === "0") && (this._discoverable = !1);
+    const s = this.getAttribute("value");
+    s && (this._multiple ? this._values = new Set(s.split(",").filter(Boolean)) : this._value = s), this._disabled && !this._discoverable ? this.setAttribute("tabindex", "-1") : this.setAttribute("tabindex", "0");
   }
   render() {
-    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-input`, i = `${this._id}-listbox`, s = this.getAttribute("placeholder") || "Search...", o = this.hasAttribute("clearable");
-    t.innerHTML = `
-      <style>${N}</style>
-      <div class="combobox-wrapper" part="wrapper">
-        <div class="input-wrapper" part="input-wrapper">
-          <input
-            id="${e}"
-            type="text"
-            role="combobox"
-            autocomplete="off"
-            aria-expanded="false"
-            aria-controls="${i}"
-            aria-haspopup="listbox"
-            aria-autocomplete="list"
-            placeholder="${s}"
-            part="input"
-          />
-          ${o ? `
-            <button
-              type="button"
-              class="clear-button"
-              aria-label="Clear selection"
-              tabindex="-1"
-              hidden
-              part="clear-button"
-            >×</button>
-          ` : ""}
-          <span class="chevron" aria-hidden="true" part="chevron">▼</span>
-        </div>
-        <ul
-          id="${i}"
-          role="listbox"
-          aria-labelledby="${e}"
-          class="listbox"
-          tabindex="-1"
-          hidden
-          part="listbox"
-        ></ul>
-      </div>
-      <div class="options-source" hidden>
+    this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+      <style>${$e}</style>
+      <div class="listbox-wrapper" part="wrapper">
         <slot></slot>
       </div>
-    `, this._inputElement = t.querySelector("input"), this._listboxElement = t.querySelector(".listbox");
+    `;
   }
   setupEventListeners() {
-    var i, s, o, a, l, u;
-    (i = this._inputElement) == null || i.addEventListener("input", this.handleInput), (s = this._inputElement) == null || s.addEventListener("focus", this.handleFocus), (o = this._inputElement) == null || o.addEventListener("blur", this.handleBlur), (a = this._inputElement) == null || a.addEventListener("keydown", this.handleKeyDown);
-    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelector(".clear-button");
-    t == null || t.addEventListener("click", this.handleClear), document.addEventListener("mousedown", this.handleOutsideClick);
-    const e = (u = this.shadowRoot) == null ? void 0 : u.querySelector("slot");
-    e == null || e.addEventListener("slotchange", this.updateOptions), this.updateOptions();
+    var t;
+    this.addEventListener("keydown", this.handleKeyDown), this.addEventListener("focus", this.handleFocus), this.addEventListener("option-select", this.handleOptionSelect);
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
+    e && e.addEventListener("slotchange", () => {
+      this.rebuildTypeAhead(), this.syncOptionStates();
+    }), this.rebuildTypeAhead(), this.syncOptionStates();
   }
   cleanupEventListeners() {
-    document.removeEventListener("mousedown", this.handleOutsideClick);
-  }
-  onAttributeChange(t, e, i) {
-    t === "open" && (this.open = i !== null), t === "value" && (this.value = i), t === "disabled" && this._inputElement && (this._inputElement.disabled = i !== null), t === "placeholder" && this._inputElement && (this._inputElement.placeholder = i || "Search...");
-  }
-  renderOptions() {
-    this._listboxElement && (this._listboxElement.innerHTML = this._filteredOptions.length === 0 ? '<li role="presentation" class="empty-message" part="empty">No results found</li>' : this._filteredOptions.map(
-      (t, e) => `
-          <li
-            id="${this._id}-option-${e}"
-            role="option"
-            aria-selected="${this._selectedValue === t.value}"
-            aria-disabled="${t.disabled}"
-            data-value="${t.value}"
-            data-index="${e}"
-            part="option"
-            ${t.disabled ? 'class="disabled"' : ""}
-          >${t.label}</li>
-        `
-    ).join(""), this._listboxElement.querySelectorAll('[role="option"]').forEach((t) => {
-      t.addEventListener("click", this.handleOptionClick), t.addEventListener("mouseenter", this.handleOptionHover);
-    }));
-  }
-  selectOption(t) {
-    this._selectedValue = t.value, this._inputValue = t.label, this._inputElement && (this._inputElement.value = t.label), this.open = !1, this._highlightedIndex = -1, this.renderOptions(), this.updateClearButton(), r(`${t.label} selected`), this.emit("a11y-combobox-select", {
-      value: t.value,
-      label: t.label
-    }), this.emit("a11y-combobox-change", {
-      value: t.value,
-      label: t.label
-    });
-  }
-  updateHighlight() {
-    var t, e, i, s;
-    if ((t = this._listboxElement) == null || t.querySelectorAll('[role="option"]').forEach((o, a) => {
-      o.classList.toggle("highlighted", a === this._highlightedIndex);
-    }), this._highlightedIndex >= 0) {
-      const o = `${this._id}-option-${this._highlightedIndex}`;
-      (e = this._inputElement) == null || e.setAttribute("aria-activedescendant", o);
-      const a = (i = this._listboxElement) == null ? void 0 : i.querySelector(`#${o}`);
-      a == null || a.scrollIntoView({ block: "nearest", behavior: "smooth" });
-    } else
-      (s = this._inputElement) == null || s.removeAttribute("aria-activedescendant");
-  }
-  updateListboxVisibility() {
-    !this._listboxElement || !this._inputElement || (this._open ? (this._listboxElement.hidden = !1, this._inputElement.setAttribute("aria-expanded", "true"), this.updateListboxPosition(), this.emit("a11y-combobox-open")) : (this._listboxElement.hidden = !0, this._inputElement.setAttribute("aria-expanded", "false"), this._highlightedIndex = -1, this.updateHighlight(), this._listboxElement.style.top = "", this._listboxElement.style.bottom = "", this.removeAttribute("data-position"), this.emit("a11y-combobox-close")));
+    this.removeEventListener("keydown", this.handleKeyDown), this.removeEventListener("focus", this.handleFocus), this.removeEventListener("option-select", this.handleOptionSelect);
   }
-  updateListboxPosition() {
-    if (!this._listboxElement || !this._inputElement) return;
-    const t = this._inputElement.getBoundingClientRect(), e = window.innerHeight, i = Math.min(
-      this._listboxElement.scrollHeight,
-      200
-      // max-height from CSS
-    ), s = e - t.bottom, o = t.top;
-    s < i + 8 && o > s ? (this._listboxElement.style.top = "auto", this._listboxElement.style.bottom = "100%", this._listboxElement.style.marginTop = "0", this._listboxElement.style.marginBottom = "4px", this.setAttribute("data-position", "top")) : (this._listboxElement.style.top = "100%", this._listboxElement.style.bottom = "auto", this._listboxElement.style.marginTop = "4px", this._listboxElement.style.marginBottom = "0", this.setAttribute("data-position", "bottom"));
+  // ===== Option Queries =====
+  getAllOptions() {
+    return Array.from(this.querySelectorAll("a11y-option"));
   }
-  updateClearButton() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(
-      ".clear-button"
-    );
-    t && (t.hidden = !this._inputValue);
+  getEnabledOptions() {
+    return this.getAllOptions().filter((e) => !e.effectivelyDisabled);
   }
-  /**
-   * Programmatic open
-   */
-  show() {
-    this.open = !0;
+  getEnabledIndices() {
+    const e = this.getAllOptions(), t = [];
+    return e.forEach((i, s) => {
+      i.effectivelyDisabled || t.push(s);
+    }), t;
   }
-  /**
-   * Programmatic close
-   */
-  close() {
-    this.open = !1;
+  // ===== State Sync =====
+  syncOptionStates() {
+    this.getAllOptions().forEach((t) => {
+      this._multiple ? t.selected = this._values.has(t.value) : t.selected = t.value === this._value;
+    });
   }
-  /**
-   * Clear the selection
-   */
-  clear() {
-    this.handleClear();
+  updateFocusHighlight() {
+    const e = this.getAllOptions();
+    e.forEach((i, s) => {
+      s === this._focusedIndex ? i.toggleAttribute("data-focused", !0) : i.removeAttribute("data-focused");
+    });
+    const t = this._focusedIndex >= 0 ? e[this._focusedIndex] : void 0;
+    t ? (this.setAttribute("aria-activedescendant", t.id), t.scrollIntoView({ block: "nearest" })) : this.removeAttribute("aria-activedescendant");
+  }
+  // ===== Navigation Helpers =====
+  findNextEnabled(e, t) {
+    const i = this.getEnabledIndices();
+    if (i.length === 0) return -1;
+    const s = i.indexOf(e);
+    if (s === -1)
+      return t === 1 ? i[0] : i[i.length - 1];
+    const a = s + t;
+    return a < 0 || a >= i.length ? -1 : i[a];
+  }
+  findFirstEnabled() {
+    const e = this.getEnabledIndices();
+    return e.length > 0 ? e[0] : -1;
+  }
+  findLastEnabled() {
+    const e = this.getEnabledIndices();
+    return e.length > 0 ? e[e.length - 1] : -1;
+  }
+  // ===== Selection =====
+  selectOption(e) {
+    e.effectivelyDisabled || this._disabled || (this._multiple ? this.toggleOptionSelection(e) : this.selectSingle(e));
+  }
+  selectSingle(e) {
+    var i;
+    const t = this._value;
+    if (this._value = e.value, this.setAttribute("value", e.value), this.syncOptionStates(), t !== this._value) {
+      const s = ((i = e.textContent) == null ? void 0 : i.trim()) || e.value;
+      this.emit("change", { value: this._value, label: s }), this.emit("a11y-listbox-change", { value: this._value, label: s }), p(`${s} selected`);
+    }
+  }
+  toggleOptionSelection(e) {
+    var s;
+    if (e.effectivelyDisabled || this._disabled) return;
+    const t = ((s = e.textContent) == null ? void 0 : s.trim()) || e.value;
+    this._values.has(e.value) ? (this._values.delete(e.value), e.selected = !1, p(`${t} deselected`)) : (this._values.add(e.value), e.selected = !0, p(`${t} selected`));
+    const i = Array.from(this._values);
+    this.setAttribute("value", i.join(",")), this.emit("change", { value: i }), this.emit("a11y-listbox-change", { value: i });
+  }
+  selectRange(e, t) {
+    const i = this.getAllOptions(), s = Math.min(e, t), a = Math.max(e, t);
+    for (let l = s; l <= a; l++) {
+      const o = i[l];
+      o && !o.effectivelyDisabled && (this._values.add(o.value), o.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`);
+  }
+  toggleSelectAll() {
+    const e = this.getEnabledOptions();
+    e.every((s) => this._values.has(s.value)) ? (this._values.clear(), this.getAllOptions().forEach((s) => s.selected = !1), p("All deselected")) : (e.forEach((s) => {
+      this._values.add(s.value), s.selected = !0;
+    }), p("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 });
+  }
+  // ===== Type-ahead =====
+  rebuildTypeAhead() {
+    const e = this.getAllOptions().map(
+      (t) => {
+        var i;
+        return ((i = t.textContent) == null ? void 0 : i.trim()) || "";
+      }
+    );
+    this._typeAhead = q(e, { timeout: 500 });
+  }
+  // ===== Attribute Changes =====
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "value":
+          this._multiple ? this._values = new Set(
+            (i || "").split(",").filter(Boolean)
+          ) : this._value = i || null, this.syncOptionStates();
+          break;
+        case "multiple":
+          this._multiple = i !== null, this._multiple ? (this.setAttribute("aria-multiselectable", "true"), this._value && (this._values = /* @__PURE__ */ new Set([this._value]), this._value = null)) : (this.removeAttribute("aria-multiselectable"), this._values.size > 0 && (this._value = Array.from(this._values)[0] ?? null, this._values.clear())), this.syncOptionStates();
+          break;
+        case "disabled":
+          this._disabled = i !== null, this._disabled ? (this.setAttribute("aria-disabled", "true"), this._discoverable || this.setAttribute("tabindex", "-1")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
+          break;
+        case "discoverable":
+          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
+          break;
+        case "orientation":
+          (i === "horizontal" || i === "vertical") && (this._orientation = i, this.setAttribute("aria-orientation", i));
+          break;
+      }
   }
 }
-d("a11y-combobox", v);
-class w extends h {
+u("a11y-optgroup", X);
+u("a11y-option", V);
+u("a11y-listbox", W);
+const De = `<svg class="checkbox-check" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+  <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`, Oe = `<svg class="checkbox-dash" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+  <path d="M3 6H9" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+class O extends c {
   constructor() {
-    super(...arguments), this._checked = !1, this._button = null, this._label = null, this.handleClick = () => {
-      this.toggle();
-    }, this.handleKeyDown = (t) => {
-      this.disabled || (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.toggle());
-    }, this.handleLabelClick = () => {
-      var t;
-      this.disabled || (this.toggle(), (t = this._button) == null || t.focus());
+    super(...arguments), this._checked = !1, this._indeterminate = !1, this._input = null, this.handleChange = () => {
+      if (!this._input) return;
+      this._checked = this._input.checked, this.toggleAttribute("checked", this._checked), this._indeterminate && (this._indeterminate = !1, this.removeAttribute("indeterminate"), this._input.indeterminate = !1), this.updateVisualState(), this.emit("change", { checked: this._checked, value: this.value });
+      const e = this.label || this.getAttribute("aria-label") || "Checkbox";
+      p(`${e} ${this._checked ? "checked" : "unchecked"}`);
     };
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "label", "size", "aria-label"];
+    return [
+      "checked",
+      "indeterminate",
+      "disabled",
+      "label",
+      "hint",
+      "error",
+      "value",
+      "name",
+      "required",
+      "size",
+      "aria-label",
+      "aria-describedby"
+    ];
   }
   /**
    * Get/set the checked state
@@ -1161,9 +3548,19 @@ class w extends h {
   get checked() {
     return this._checked;
   }
-  set checked(t) {
-    const e = this._checked;
-    this._checked = t, this.toggleAttribute("checked", t), t !== e && (this.updateVisualState(), this.emit("change", { checked: t }));
+  set checked(e) {
+    const t = this._checked;
+    this._checked = e, this.toggleAttribute("checked", e), e !== t && (this.updateVisualState(), this.emit("change", { checked: e, value: this.value }));
+  }
+  /**
+   * Get/set the indeterminate state
+   */
+  get indeterminate() {
+    return this._indeterminate;
+  }
+  set indeterminate(e) {
+    const t = this._indeterminate;
+    this._indeterminate = e, this.toggleAttribute("indeterminate", e), e !== t && this.updateVisualState();
   }
   /**
    * Get/set the disabled state
@@ -1171,8 +3568,17 @@ class w extends h {
   get disabled() {
     return this.hasAttribute("disabled");
   }
-  set disabled(t) {
-    this.toggleAttribute("disabled", t), this.updateDisabledState();
+  set disabled(e) {
+    this.toggleAttribute("disabled", e), this.updateDisabledState();
+  }
+  /**
+   * Get/set the value
+   */
+  get value() {
+    return this.getAttribute("value") || "";
+  }
+  set value(e) {
+    e ? this.setAttribute("value", e) : this.removeAttribute("value");
   }
   /**
    * Get/set the visible label
@@ -1180,67 +3586,115 @@ class w extends h {
   get label() {
     return this.getAttribute("label") || "";
   }
-  set label(t) {
-    t ? this.setAttribute("label", t) : this.removeAttribute("label");
+  set label(e) {
+    e ? this.setAttribute("label", e) : this.removeAttribute("label");
+  }
+  /**
+   * Get/set the hint text
+   */
+  get hint() {
+    return this.getAttribute("hint") || "";
+  }
+  set hint(e) {
+    e ? this.setAttribute("hint", e) : this.removeAttribute("hint");
+  }
+  /**
+   * Get/set the error message
+   */
+  get error() {
+    return this.getAttribute("error") || "";
+  }
+  set error(e) {
+    e ? this.setAttribute("error", e) : this.removeAttribute("error");
   }
   /**
    * Get/set the size variant
    */
   get size() {
-    const t = this.getAttribute("size");
-    return t === "sm" || t === "lg" ? t : "md";
+    const e = this.getAttribute("size");
+    return e === "sm" || e === "lg" ? e : "md";
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  /**
+   * Get/set required state
+   */
+  get required() {
+    return this.hasAttribute("required");
   }
-  set size(t) {
-    this.setAttribute("size", t);
+  set required(e) {
+    this.toggleAttribute("required", e);
   }
   setupAccessibility() {
-    var t;
-    this.getAttribute("role"), typeof process < "u" && ((t = process.env) == null ? void 0 : t.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
-      `[compa11y/Switch] Switch has no accessible label. Add label="..." or aria-label="..." attribute.
-💡 Suggestion: <a11y-switch label="Enable feature"></a11y-switch>`
+    var e;
+    this._checked = this.hasAttribute("checked"), this._indeterminate = this.hasAttribute("indeterminate"), typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.label && !this.getAttribute("aria-label") && console.warn(
+      `[compa11y/Checkbox] Checkbox has no accessible label. Add label="..." or aria-label="..." attribute.
+💡 Suggestion: <a11y-checkbox label="Accept terms"></a11y-checkbox>`
     );
   }
   render() {
-    const t = this.attachShadow({ mode: "open" }), e = `${this._id}-label`, i = !!this.label, s = this.getAttribute("aria-label"), o = i ? "" : s ? `aria-label="${s}"` : "", a = i ? `aria-labelledby="${e}"` : "";
-    t.innerHTML = `
-      <style>${U}</style>
-      <div class="switch-wrapper size-${this.size}" part="wrapper">
-        <button
-          type="button"
-          role="switch"
-          aria-checked="${this._checked}"
-          ${o}
-          ${a}
-          ${this.disabled ? "disabled" : ""}
-          class="switch-track ${this._checked ? "checked" : ""}"
-          part="track"
-          tabindex="${this.disabled ? "-1" : "0"}"
-        >
-          <span class="switch-thumb" part="thumb" aria-hidden="true"></span>
-        </button>
-        ${i ? `<label id="${e}" class="switch-label ${this.disabled ? "disabled" : ""}" part="label">${this.label}</label>` : ""}
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-input`, i = `${this._id}-label`, s = `${this._id}-hint`, a = `${this._id}-error`, r = !!this.label, l = !!this.hint, o = !!this.error, d = this.getAttribute("aria-label"), h = this.getAttribute("name") || "", g = this.getAttribute("aria-describedby") || "", m = [];
+    g && m.push(g), l && m.push(s), o && m.push(a);
+    const f = m.length ? `aria-describedby="${m.join(" ")}"` : "", _ = !r && d ? `aria-label="${d}"` : "";
+    e.innerHTML = `
+      <style>${Ie}</style>
+      <div class="checkbox-wrapper size-${this.size}" part="wrapper">
+        <div class="checkbox-control">
+          <input
+            type="checkbox"
+            class="checkbox-input"
+            id="${t}"
+            ${h ? `name="${h}"` : ""}
+            ${this.value ? `value="${this.value}"` : ""}
+            ${this._checked ? "checked" : ""}
+            ${this.disabled ? "disabled" : ""}
+            ${this.required ? 'required aria-required="true"' : ""}
+            ${f}
+            ${_}
+            ${o ? 'aria-invalid="true"' : ""}
+            part="input"
+          />
+          <div class="checkbox-indicator" part="indicator" aria-hidden="true">
+            ${De}
+            ${Oe}
+          </div>
+        </div>
+        ${r || l || o ? `<div class="checkbox-content">
+            ${r ? `<label for="${t}" id="${i}" class="checkbox-label" part="label">${this.label}${this.required ? '<span class="checkbox-required" aria-hidden="true">*</span>' : ""}</label>` : ""}
+            ${l ? `<div id="${s}" class="checkbox-hint" part="hint">${this.hint}</div>` : ""}
+            ${o ? `<div id="${a}" class="checkbox-error" role="alert" part="error">${this.error}</div>` : ""}
+          </div>` : ""}
       </div>
-    `, this._button = t.querySelector("button"), this._label = t.querySelector("label");
+    `, this._input = e.querySelector("input"), this._input && this._indeterminate && (this._input.indeterminate = !0);
   }
   setupEventListeners() {
-    var t, e, i;
-    (t = this._button) == null || t.addEventListener("click", this.handleClick), (e = this._button) == null || e.addEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.addEventListener("click", this.handleLabelClick);
+    var e;
+    (e = this._input) == null || e.addEventListener("change", this.handleChange);
   }
   cleanupEventListeners() {
-    var t, e, i;
-    (t = this._button) == null || t.removeEventListener("click", this.handleClick), (e = this._button) == null || e.removeEventListener("keydown", this.handleKeyDown), (i = this._label) == null || i.removeEventListener("click", this.handleLabelClick);
+    var e;
+    (e = this._input) == null || e.removeEventListener("change", this.handleChange);
   }
-  onAttributeChange(t, e, i) {
-    switch (t) {
+  onAttributeChange(e, t, i) {
+    switch (e) {
       case "checked":
         this._checked = i !== null, this.updateVisualState();
         break;
+      case "indeterminate":
+        this._indeterminate = i !== null, this.updateVisualState();
+        break;
       case "disabled":
         this.updateDisabledState();
         break;
       case "label":
+      case "hint":
+      case "error":
       case "aria-label":
-        this.shadowRoot && (this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
+      case "aria-describedby":
+      case "required":
+      case "name":
+        this.shadowRoot && (this.cleanupEventListeners(), this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
         break;
       case "size":
         this.updateSizeClass();
@@ -1248,105 +3702,607 @@ class w extends h {
     }
   }
   /**
-   * Update the visual state (checked class and aria-checked)
+   * Update visual state of indicator
    */
   updateVisualState() {
-    this._button && (this._button.setAttribute("aria-checked", String(this._checked)), this._button.classList.toggle("checked", this._checked));
+    this._input && (this._input.checked = this._checked, this._input.indeterminate = this._indeterminate);
   }
   /**
-   * Update the disabled state
+   * Update disabled state
    */
   updateDisabledState() {
-    this._button && (this.disabled ? (this._button.setAttribute("disabled", ""), this._button.setAttribute("tabindex", "-1")) : (this._button.removeAttribute("disabled"), this._button.setAttribute("tabindex", "0"))), this._label && this._label.classList.toggle("disabled", this.disabled);
+    this._input && (this.disabled ? this._input.setAttribute("disabled", "") : this._input.removeAttribute("disabled"));
   }
   /**
-   * Update the size class
+   * Update size class
    */
   updateSizeClass() {
-    var e;
-    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".switch-wrapper");
-    t && (t.classList.remove("size-sm", "size-md", "size-lg"), t.classList.add(`size-${this.size}`));
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector(".checkbox-wrapper");
+    e && (e.classList.remove("size-sm", "size-md", "size-lg"), e.classList.add(`size-${this.size}`));
   }
   /**
-   * Public method to toggle the switch programmatically
+   * Toggle the checkbox programmatically
    */
   toggle() {
     if (this.disabled) return;
-    this.checked = !this.checked;
-    const t = this.label || this.getAttribute("aria-label") || "Switch";
-    g(`${t} ${this.checked ? "on" : "off"}`);
+    this._indeterminate ? (this.indeterminate = !1, this.checked = !0) : this.checked = !this.checked;
+    const e = this.label || this.getAttribute("aria-label") || "Checkbox";
+    p(`${e} ${this.checked ? "checked" : "unchecked"}`);
   }
   /**
-   * Public method to open/close programmatically
+   * Set checked state programmatically
+   */
+  setChecked(e) {
+    this.checked = e;
+  }
+}
+class J extends c {
+  constructor() {
+    super(...arguments), this._value = [], this.handleChildChange = (e) => {
+      const t = e.target;
+      if (!(t instanceof O) || t === this) return;
+      const i = t.value;
+      i && (t.checked ? this._value.includes(i) || (this._value = [...this._value, i]) : this._value = this._value.filter((s) => s !== i), this.emit("change", { value: this._value }));
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "disabled",
+      "legend",
+      "error",
+      "orientation",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  /**
+   * Get/set the selected values as an array
+   */
+  get value() {
+    return [...this._value];
+  }
+  set value(e) {
+    this._value = [...e], this.syncCheckboxStates();
+  }
+  /**
+   * Get/set the disabled state
+   */
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(e) {
+    this.toggleAttribute("disabled", e), this.syncDisabledState();
+  }
+  /**
+   * Get/set the legend text
+   */
+  get legend() {
+    return this.getAttribute("legend") || "";
+  }
+  set legend(e) {
+    e ? this.setAttribute("legend", e) : this.removeAttribute("legend");
+  }
+  /**
+   * Get/set the error message
+   */
+  get error() {
+    return this.getAttribute("error") || "";
+  }
+  set error(e) {
+    e ? this.setAttribute("error", e) : this.removeAttribute("error");
+  }
+  /**
+   * Get/set the orientation
+   */
+  get orientation() {
+    return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
+  }
+  set orientation(e) {
+    this.setAttribute("orientation", e);
+  }
+  setupAccessibility() {
+    var e;
+    typeof process < "u" && ((e = process.env) == null ? void 0 : e.NODE_ENV) !== "production" && !this.legend && !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && console.warn(
+      `[compa11y/CheckboxGroup] CheckboxGroup has no accessible label. Add legend="..." or aria-label="..." attribute.
+💡 Suggestion: <a11y-checkbox-group legend="Select options"></a11y-checkbox-group>`
+    ), this.initValueFromChildren();
+  }
+  render() {
+    const e = this.attachShadow({ mode: "open" }), t = `${this._id}-error`, i = !!this.legend, s = !!this.error, a = this.getAttribute("aria-label"), r = this.getAttribute("aria-labelledby");
+    e.innerHTML = `
+      <style>${Ce}</style>
+      <fieldset
+        part="fieldset"
+        ${a ? `aria-label="${a}"` : ""}
+        ${r ? `aria-labelledby="${r}"` : ""}
+        ${s ? `aria-describedby="${t}"` : ""}
+        ${this.disabled ? "disabled" : ""}
+      >
+        ${i ? `<legend part="legend">${this.legend}</legend>` : ""}
+        <div class="checkbox-group-items" part="items">
+          <slot></slot>
+        </div>
+        ${s ? `<div id="${t}" class="checkbox-group-error" role="alert" part="error">${this.error}</div>` : ""}
+      </fieldset>
+    `;
+  }
+  setupEventListeners() {
+    this.addEventListener("change", this.handleChildChange);
+  }
+  cleanupEventListeners() {
+    this.removeEventListener("change", this.handleChildChange);
+  }
+  onAttributeChange(e, t, i) {
+    switch (e) {
+      case "disabled":
+        this.syncDisabledState();
+        break;
+      case "legend":
+      case "error":
+      case "aria-label":
+      case "aria-labelledby":
+        this.shadowRoot && (this.cleanupEventListeners(), this.shadowRoot.innerHTML = "", this.render(), this.setupEventListeners());
+        break;
+    }
+  }
+  /**
+   * Initialize value array from currently checked children
+   */
+  initValueFromChildren() {
+    requestAnimationFrame(() => {
+      const e = this.querySelectorAll("a11y-checkbox"), t = [];
+      e.forEach((i) => {
+        i.hasAttribute("checked") && i.getAttribute("value") && t.push(i.getAttribute("value"));
+      }), this._value = t;
+    });
+  }
+  /**
+   * Sync checkbox checked states from value array
+   */
+  syncCheckboxStates() {
+    this.querySelectorAll(
+      "a11y-checkbox"
+    ).forEach((t) => {
+      const i = t.value;
+      i && (t.checked = this._value.includes(i));
+    });
+  }
+  /**
+   * Sync disabled state to children
    */
-  setChecked(t) {
-    this.checked = t;
+  syncDisabledState() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("fieldset");
+    e && (this.disabled ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"));
+  }
+}
+u("a11y-checkbox", O);
+u("a11y-checkbox-group", J);
+class Q extends c {
+  constructor() {
+    super(...arguments), this._value = "", this._disabled = !1, this._discoverable = !0, this._orientation = "vertical", this._required = !1, this._name = "", this.handleRadioSelect = (e) => {
+      var i;
+      if (this._disabled) return;
+      const t = (i = e.detail) == null ? void 0 : i.value;
+      t !== void 0 && this.selectRadio(t);
+    }, this.handleKeyDown = (e) => {
+      if (this._disabled) return;
+      const t = this.getEnabledRadios();
+      if (t.length === 0) return;
+      const i = t.findIndex(
+        (a) => a.value === this._value
+      );
+      let s = null;
+      switch (e.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          s = i < 0 ? 0 : (i + 1) % t.length;
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          s = i < 0 ? t.length - 1 : (i - 1 + t.length) % t.length;
+          break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = t.length - 1;
+          break;
+        case " ":
+          e.preventDefault(), e.stopPropagation();
+          {
+            const a = t.find(
+              (r) => r === document.activeElement || r.contains(document.activeElement)
+            );
+            if (a && a.value !== this._value) {
+              this.selectRadio(a.value);
+              const r = a.getAttribute("label") || a.value;
+              p(`${r} selected`);
+            }
+          }
+          return;
+        default:
+          return;
+      }
+      if (s !== null) {
+        e.preventDefault(), e.stopPropagation();
+        const a = t[s];
+        if (a) {
+          this.selectRadio(a.value), a.focus();
+          const r = a.getAttribute("label") || a.value;
+          p(`${r} selected`);
+        }
+      }
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "disabled",
+      "discoverable",
+      "orientation",
+      "required",
+      "name",
+      "legend",
+      "hint",
+      "error",
+      "aria-label",
+      "aria-labelledby"
+    ];
+  }
+  // ===== Getters/Setters =====
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    this._value !== e && (this._value = e, this.setAttribute("value", e), this.syncRadioStates());
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    const t = !!e;
+    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")), this.syncRadioStates());
+  }
+  get discoverable() {
+    return this._discoverable;
+  }
+  set discoverable(e) {
+    this._discoverable = !!e;
+  }
+  get required() {
+    return this._required;
+  }
+  set required(e) {
+    this._required = !!e, this._required ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
+  }
+  get name() {
+    return this._name;
+  }
+  set name(e) {
+    this._name = e, this.setAttribute("name", e);
+  }
+  get orientation() {
+    return this._orientation;
+  }
+  set orientation(e) {
+    this._orientation = e, this.setAttribute("orientation", e), this.setAttribute("aria-orientation", e);
+  }
+  // ===== Lifecycle =====
+  setupAccessibility() {
+    this.setAttribute("role", "radiogroup"), this.setAttribute("aria-orientation", this._orientation), !(this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby") || this.hasAttribute("legend")) && process.env.NODE_ENV !== "production" && console.warn(
+      "[Compa11y RadioGroup]: RadioGroup has no accessible label. Use legend, aria-label, or aria-labelledby."
+    );
+    const t = this.getAttribute("value");
+    t && (this._value = t), this._disabled = this.hasAttribute("disabled"), this._disabled && this.setAttribute("aria-disabled", "true");
+    const i = this.getAttribute("orientation");
+    (i === "horizontal" || i === "vertical") && (this._orientation = i), this._required = this.hasAttribute("required"), this._required && this.setAttribute("aria-required", "true"), this._name = this.getAttribute("name") || this._id;
+    const s = this.getAttribute("discoverable");
+    (s === "false" || s === "0") && (this._discoverable = !1), this.hasAttribute("error") && this.getAttribute("error") && this.setAttribute("aria-invalid", "true");
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const e = this.shadowRoot, t = this.getAttribute("legend") || "", i = this.getAttribute("hint") || "", s = this.getAttribute("error") || "", a = i ? `${this._id}-hint` : "", r = s ? `${this._id}-error` : "", l = [a, r].filter(Boolean).join(" ");
+    l ? this.setAttribute("aria-describedby", l) : this.removeAttribute("aria-describedby"), e.innerHTML = `
+      <style>${ze}</style>
+      <fieldset part="fieldset">
+        ${t ? `<legend part="legend">${t}${this._required ? '<span class="radio-group-required" aria-hidden="true"> *</span>' : ""}</legend>` : ""}
+        <div class="radio-group-items" part="items">
+          <slot></slot>
+        </div>
+        ${i ? `<div class="radio-group-hint" id="${a}" part="hint">${i}</div>` : ""}
+        ${s ? `<div class="radio-group-error" id="${r}" part="error" role="alert">${s}</div>` : ""}
+      </fieldset>
+    `;
+  }
+  setupEventListeners() {
+    var t;
+    this.addEventListener("keydown", this.handleKeyDown), this.addEventListener(
+      "radio-select",
+      this.handleRadioSelect
+    );
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
+    e && e.addEventListener("slotchange", () => {
+      this.syncRadioStates();
+    });
+  }
+  cleanupEventListeners() {
+    this.removeEventListener("keydown", this.handleKeyDown), this.removeEventListener(
+      "radio-select",
+      this.handleRadioSelect
+    );
+  }
+  // ===== Radio Management =====
+  getRadios() {
+    return Array.from(this.querySelectorAll("a11y-radio"));
+  }
+  getEnabledRadios() {
+    return this.getRadios().filter(
+      (e) => !e.disabled && !this._disabled
+    );
+  }
+  syncRadioStates() {
+    const e = this.getRadios(), t = this.getEnabledRadios();
+    e.forEach((i) => {
+      const s = i.value === this._value;
+      i.checked = s, s || !this._value && t[0] === i ? i.setAttribute("tabindex", "0") : i.setAttribute("tabindex", "-1");
+    });
+  }
+  selectRadio(e) {
+    this._disabled || (this._value = e, this.setAttribute("value", e), this.syncRadioStates(), this.hasAttribute("aria-invalid") && this.removeAttribute("aria-invalid"), this.emit("change", { value: e }), this.emit("a11y-radiogroup-change", { value: e }));
+  }
+  // ===== Attribute Changes =====
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "value":
+          this._value = i || "", this.syncRadioStates();
+          break;
+        case "disabled":
+          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"), this.syncRadioStates();
+          break;
+        case "discoverable":
+          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
+          break;
+        case "orientation":
+          (i === "horizontal" || i === "vertical") && (this._orientation = i, this.setAttribute("aria-orientation", i));
+          break;
+        case "required":
+          this._required = i !== null, this._required ? this.setAttribute("aria-required", "true") : this.removeAttribute("aria-required");
+          break;
+        case "name":
+          this._name = i || "";
+          break;
+        case "error":
+          i ? this.setAttribute("aria-invalid", "true") : this.removeAttribute("aria-invalid"), this.render();
+          break;
+        case "legend":
+        case "hint":
+          this.render();
+          break;
+      }
+  }
+}
+class Z extends c {
+  constructor() {
+    super(...arguments), this._value = "", this._checked = !1, this._disabled = !1, this._discoverable = !0, this.handleClick = (e) => {
+      if (this._disabled) {
+        e.preventDefault();
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("radio-select", {
+          detail: { value: this._value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+      const t = this.getAttribute("label") || this._value;
+      p(`${t} selected`);
+    }, this.handleKeyDown = (e) => {
+      if (!this._disabled && e.key === "Enter") {
+        e.preventDefault(), this.dispatchEvent(
+          new CustomEvent("radio-select", {
+            detail: { value: this._value },
+            bubbles: !0,
+            composed: !0
+          })
+        );
+        const t = this.getAttribute("label") || this._value;
+        p(`${t} selected`);
+      }
+    };
+  }
+  static get observedAttributes() {
+    return ["value", "label", "hint", "disabled", "discoverable", "checked"];
+  }
+  // ===== Getters/Setters =====
+  get value() {
+    return this._value;
+  }
+  set value(e) {
+    this._value = e, this.setAttribute("value", e);
+  }
+  get checked() {
+    return this._checked;
+  }
+  set checked(e) {
+    const t = !!e;
+    this._checked !== t && (this._checked = t, t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.setAttribute("aria-checked", String(t)), this.updateVisual());
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(e) {
+    const t = !!e;
+    this._disabled !== t && (this._disabled = t, t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled")));
+  }
+  get discoverable() {
+    return this._discoverable;
+  }
+  set discoverable(e) {
+    let t;
+    typeof e == "string" ? t = e !== "false" && e !== "0" : t = !!e, this._discoverable !== t && (this._discoverable = t, t ? this.setAttribute("discoverable", "") : this.removeAttribute("discoverable"));
+  }
+  // ===== Lifecycle =====
+  setupAccessibility() {
+    this.setAttribute("role", "radio"), this.setAttribute("aria-checked", "false"), this._value = this.getAttribute("value") || "", this._checked = this.hasAttribute("checked"), this._disabled = this.hasAttribute("disabled"), this._checked && this.setAttribute("aria-checked", "true"), this._disabled && this.setAttribute("aria-disabled", "true");
+    const e = this.getAttribute("discoverable");
+    (e === "false" || e === "0") && (this._discoverable = !1), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "-1");
+  }
+  render() {
+    this.shadowRoot || this.attachShadow({ mode: "open" });
+    const e = this.shadowRoot, t = this.getAttribute("label") || "", i = this.getAttribute("hint") || "", s = t ? `${this._id}-label` : "", a = i ? `${this._id}-hint` : "";
+    s && this.setAttribute("aria-labelledby", s), a && this.setAttribute("aria-describedby", a), e.innerHTML = `
+      <style>${qe}</style>
+      <div class="radio-wrapper" part="wrapper">
+        <div class="radio-control" part="control">
+          <input
+            type="radio"
+            class="radio-input"
+            tabindex="-1"
+            aria-hidden="true"
+            ${this._disabled ? "disabled" : ""}
+          />
+          <div class="radio-circle" part="circle">
+            <div class="radio-dot" part="dot" aria-hidden="true"></div>
+          </div>
+        </div>
+        ${t || i ? `<div class="radio-content">
+                ${t ? `<span class="radio-label" id="${s}" part="label">${t}</span>` : ""}
+                ${i ? `<span class="radio-hint" id="${a}" part="hint">${i}</span>` : ""}
+              </div>` : ""}
+        <slot></slot>
+      </div>
+    `;
+  }
+  setupEventListeners() {
+    this.addEventListener("click", this.handleClick), this.addEventListener("keydown", this.handleKeyDown);
+  }
+  cleanupEventListeners() {
+    this.removeEventListener("click", this.handleClick), this.removeEventListener("keydown", this.handleKeyDown);
+  }
+  // ===== Visual Update =====
+  updateVisual() {
+    if (!this.shadowRoot) return;
+    const e = this.shadowRoot.querySelector(".radio-dot");
+    e && (e.style.opacity = this._checked ? "1" : "0", e.style.transform = this._checked ? "scale(1)" : "scale(0)");
+    const t = this.shadowRoot.querySelector(
+      ".radio-circle"
+    );
+    t && (this._checked ? (t.style.background = "var(--compa11y-radio-checked-bg, #0066cc)", t.style.borderColor = "var(--compa11y-radio-checked-border, #0066cc)") : (t.style.background = "var(--compa11y-radio-bg, white)", t.style.borderColor = ""));
+  }
+  // ===== Attribute Changes =====
+  attributeChangedCallback(e, t, i) {
+    if (t !== i)
+      switch (e) {
+        case "value":
+          this._value = i || "";
+          break;
+        case "checked":
+          this._checked = i !== null, this.setAttribute("aria-checked", String(this._checked)), this.updateVisual();
+          break;
+        case "disabled":
+          this._disabled = i !== null, this._disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
+          break;
+        case "discoverable":
+          i === null ? this._discoverable = !0 : i === "false" || i === "0" ? this._discoverable = !1 : this._discoverable = !0;
+          break;
+        case "label":
+        case "hint":
+          this.render();
+          break;
+      }
   }
 }
-d("a11y-switch", w);
+u("a11y-radio-group", Q);
+u("a11y-radio", Z);
 if (typeof window < "u") {
   const n = () => {
-    b(), p();
+    R(), T();
   };
   document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", n) : n(), window.compa11y = {
     // Components (classes)
-    A11yDialog: y,
-    A11yMenu: _,
-    A11yTabs: x,
-    A11yCombobox: v,
-    A11ySwitch: w,
+    A11yDialog: M,
+    A11yMenu: K,
+    A11yTabs: F,
+    A11yCombobox: N,
+    A11ySwitch: P,
+    A11ySelect: j,
+    A11yInput: U,
+    A11yTextarea: Y,
+    A11yButton: G,
+    A11yListbox: W,
+    A11yOption: V,
+    A11yOptgroup: X,
+    A11yCheckbox: O,
+    A11yCheckboxGroup: J,
+    A11yRadioGroup: Q,
+    A11yRadio: Z,
     // Announcer utilities
-    initAnnouncer: b,
-    announce: r,
-    announcePolite: g,
-    announceAssertive: V,
-    announceStatus: H,
-    announceError: R,
+    initAnnouncer: R,
+    announce: v,
+    announcePolite: p,
+    announceAssertive: D,
+    announceStatus: ge,
+    announceError: pe,
     // Focus utilities
-    initFocusVisible: p,
-    createFocusTrap: M,
-    createFocusScope: q,
-    createRovingTabindex: z,
+    initFocusVisible: T,
+    createFocusTrap: be,
+    createFocusScope: ue,
+    createRovingTabindex: ce,
     // Keyboard utilities
-    createKeyboardManager: O,
-    KeyboardPatterns: D,
-    createTypeAhead: T,
+    createKeyboardManager: de,
+    KeyboardPatterns: he,
+    createTypeAhead: q,
     // ARIA utilities
-    aria: $,
-    buildAriaProps: C,
-    hasAccessibleName: S,
+    aria: ne,
+    buildAriaProps: le,
+    hasAccessibleName: oe,
     // Platform detection
-    isBrowser: L,
-    prefersReducedMotion: I,
-    prefersHighContrast: A,
-    prefersDarkMode: k
+    isBrowser: re,
+    prefersReducedMotion: ae,
+    prefersHighContrast: se,
+    prefersDarkMode: ie
   };
 }
 export {
-  v as A11yCombobox,
-  y as A11yDialog,
-  _ as A11yMenu,
-  w as A11ySwitch,
-  x as A11yTabs,
-  G as KeyboardPatterns,
-  W as announce,
-  J as announceAssertive,
-  Q as announceError,
-  Z as announcePolite,
-  tt as announceStatus,
-  et as aria,
-  it as buildAriaProps,
-  st as createFocusScope,
-  ot as createFocusTrap,
-  at as createKeyboardManager,
-  nt as createRovingTabindex,
-  lt as createTypeAhead,
-  rt as hasAccessibleName,
-  ht as initAnnouncer,
-  dt as initFocusVisible,
-  ct as isBrowser,
-  ut as prefersDarkMode,
-  pt as prefersHighContrast,
-  bt as prefersReducedMotion
+  G as A11yButton,
+  O as A11yCheckbox,
+  J as A11yCheckboxGroup,
+  N as A11yCombobox,
+  M as A11yDialog,
+  U as A11yInput,
+  W as A11yListbox,
+  K as A11yMenu,
+  X as A11yOptgroup,
+  V as A11yOption,
+  Z as A11yRadio,
+  Q as A11yRadioGroup,
+  j as A11ySelect,
+  P as A11ySwitch,
+  F as A11yTabs,
+  Y as A11yTextarea,
+  He as KeyboardPatterns,
+  Me as announce,
+  Ke as announceAssertive,
+  Fe as announceError,
+  Ne as announcePolite,
+  Pe as announceStatus,
+  je as aria,
+  Ue as buildAriaProps,
+  Ye as createFocusScope,
+  Ge as createFocusTrap,
+  Xe as createKeyboardManager,
+  Ve as createRovingTabindex,
+  We as createTypeAhead,
+  Je as hasAccessibleName,
+  Qe as initAnnouncer,
+  Ze as initFocusVisible,
+  et as isBrowser,
+  tt as prefersDarkMode,
+  it as prefersHighContrast,
+  st as prefersReducedMotion
 };
 //# sourceMappingURL=compa11y.js.map