@compa11y/web 0.1.0 → 0.1.3

package/dist/compa11y.umd.cjs

@@ -1,533 +0,0 @@
-(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("@compa11y/core")):typeof define=="function"&&define.amd?define(["exports","@compa11y/core"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a.compa11y={},a.compa11yCore))})(this,function(a,o){"use strict";class d extends HTMLElement{constructor(){super(),this._internals=null,this._id=o.generateId(this.tagName.toLowerCase().replace("a11y-","")),"attachInternals"in this&&(this._internals=this.attachInternals())}static get observedAttributes(){return[]}connectedCallback(){this.setupAccessibility(),this.render(),this.setupEventListeners()}disconnectedCallback(){this.cleanupEventListeners()}attributeChangedCallback(e,t,i){t!==i&&this.onAttributeChange(e,t,i)}setupEventListeners(){}cleanupEventListeners(){}onAttributeChange(e,t,i){}emit(e,t){return this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,cancelable:!0}))}getSlot(e){var t;return((t=this.shadowRoot)==null?void 0:t.querySelector(`slot[name="${e}"]`))??null}getSlottedElements(e){var s;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 c(l,e){customElements.get(l)||customElements.define(l,e)}const _=`
-  appearance: none;
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-`,u=`
-  :host {
-    display: block;
-    box-sizing: border-box;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: inherit;
-  }
-
-  
-  :host(:focus-visible),
-  :focus-visible {
-    outline: 2px solid var(--compa11y-focus-color, #0066cc);
-    outline-offset: 2px;
-  }
-
-`,x=`
-  ${u}
-
-  :host {
-    position: fixed;
-    inset: 0;
-    z-index: var(--compa11y-dialog-z-index, 9999);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .overlay {
-    position: absolute;
-    inset: 0;
-    background: var(--compa11y-dialog-overlay-bg, rgba(0, 0, 0, 0.5));
-  }
-
-  .dialog {
-    position: relative;
-    background: var(--compa11y-dialog-bg, white);
-    border-radius: var(--compa11y-dialog-radius, 8px);
-    padding: var(--compa11y-dialog-padding, 1.5rem);
-    max-width: var(--compa11y-dialog-max-width, 500px);
-    max-height: var(--compa11y-dialog-max-height, 85vh);
-    overflow: auto;
-    box-shadow: var(--compa11y-dialog-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
-  }
-
-  ::slotted([slot="title"]) {
-    margin: 0 0 0.5rem 0;
-    font-size: 1.25rem;
-    font-weight: 600;
-  }
-
-  ::slotted([slot="description"]) {
-    margin: 0 0 1rem 0;
-    color: var(--compa11y-dialog-description-color, #666);
-  }
-`,w=`
-  ${u}
-
-  :host {
-    position: relative;
-    display: inline-block;
-  }
-
-  .menu-content {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    z-index: var(--compa11y-menu-z-index, 1000);
-    min-width: var(--compa11y-menu-min-width, 160px);
-    background: var(--compa11y-menu-bg, white);
-    border: var(--compa11y-menu-border, 1px solid #e0e0e0);
-    border-radius: var(--compa11y-menu-radius, 4px);
-    box-shadow: var(--compa11y-menu-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-    padding: var(--compa11y-menu-padding, 0.25rem 0);
-    margin-top: var(--compa11y-menu-offset, 4px);
-  }
-
-  .menu-content[hidden] {
-    display: none;
-  }
-
-  ::slotted([role="menuitem"]) {
-    display: block;
-    width: 100%;
-    padding: 0.5rem 1rem;
-    text-align: left;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font: inherit;
-  }
-
-  ::slotted([role="menuitem"]:hover),
-  ::slotted([role="menuitem"][data-highlighted="true"]) {
-    background: var(--compa11y-menu-item-hover-bg, #f5f5f5);
-  }
-
-  ::slotted([role="menuitem"][aria-disabled="true"]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  ::slotted([role="separator"]) {
-    height: 1px;
-    margin: 0.25rem 0;
-    background: var(--compa11y-menu-separator-color, #e0e0e0);
-  }
-`,E=`
-  ${u}
-
-  .tablist {
-    display: flex;
-    border-bottom: var(--compa11y-tabs-border, 1px solid #e0e0e0);
-    gap: var(--compa11y-tabs-gap, 0);
-  }
-
-  :host([orientation="vertical"]) .tablist {
-    flex-direction: column;
-    border-bottom: none;
-    border-right: var(--compa11y-tabs-border, 1px solid #e0e0e0);
-  }
-
-  ::slotted([role="tab"]) {
-    ${_}
-    padding: var(--compa11y-tab-padding, 0.75rem 1rem);
-    border-bottom: 2px solid transparent;
-    margin-bottom: -1px;
-    font-weight: 500;
-    color: var(--compa11y-tab-color, #666);
-    transition: all 0.15s ease;
-  }
-
-  ::slotted([role="tab"]:hover) {
-    color: var(--compa11y-tab-hover-color, #333);
-  }
-
-  ::slotted([role="tab"][aria-selected="true"]) {
-    color: var(--compa11y-tab-active-color, #0066cc);
-    border-bottom-color: currentColor;
-  }
-
-  ::slotted([role="tab"][aria-disabled="true"]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  ::slotted([role="tabpanel"]) {
-    padding: var(--compa11y-tabpanel-padding, 1rem 0);
-  }
-
-  ::slotted([role="tabpanel"][hidden]) {
-    display: none;
-  }
-`,A=`
-  ${u}
-
-  :host {
-    display: inline-block;
-    position: relative;
-    width: var(--compa11y-combobox-width, 250px);
-  }
-
-  .combobox-wrapper {
-    position: relative;
-  }
-
-  .input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  input {
-    width: 100%;
-    padding: var(--compa11y-combobox-input-padding, 0.5rem 2rem 0.5rem 0.75rem);
-    border: var(--compa11y-combobox-border, 1px solid #ccc);
-    border-radius: var(--compa11y-combobox-radius, 4px);
-    font: inherit;
-    background: var(--compa11y-combobox-bg, white);
-    color: var(--compa11y-combobox-color, inherit);
-  }
-
-  input:focus {
-    outline: 2px solid var(--compa11y-focus-color, #0066cc);
-    outline-offset: -1px;
-    border-color: var(--compa11y-focus-color, #0066cc);
-  }
-
-  input::placeholder {
-    color: var(--compa11y-combobox-placeholder-color, #999);
-  }
-
-  input:disabled {
-    background: var(--compa11y-combobox-disabled-bg, #f5f5f5);
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-
-  .chevron {
-    position: absolute;
-    right: 0.5rem;
-    pointer-events: none;
-    font-size: 0.75rem;
-    color: var(--compa11y-combobox-chevron-color, #666);
-    transition: transform 0.15s ease;
-  }
-
-  :host([open]) .chevron {
-    transform: rotate(180deg);
-  }
-
-  .clear-button {
-    ${_}
-    position: absolute;
-    right: 1.5rem;
-    width: 1.25rem;
-    height: 1.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    font-size: 1rem;
-    color: var(--compa11y-combobox-clear-color, #666);
-  }
-
-  .clear-button:hover {
-    background: var(--compa11y-combobox-clear-hover-bg, rgba(0, 0, 0, 0.1));
-  }
-
-  .clear-button[hidden] {
-    display: none;
-  }
-
-  .listbox {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: var(--compa11y-combobox-z-index, 1000);
-    max-height: var(--compa11y-combobox-max-height, 200px);
-    overflow-y: auto;
-    margin: 0;
-    padding: var(--compa11y-combobox-listbox-padding, 0.25rem 0);
-    background: var(--compa11y-combobox-listbox-bg, white);
-    border: var(--compa11y-combobox-listbox-border, 1px solid #e0e0e0);
-    border-radius: var(--compa11y-combobox-radius, 4px);
-    box-shadow: var(--compa11y-combobox-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
-    list-style: none;
-  }
-
-  /* Flip chevron when listbox is positioned above */
-  :host([data-position="top"]) .chevron {
-    transform: rotate(180deg);
-  }
-
-  :host([data-position="top"][open]) .chevron {
-    transform: rotate(0deg);
-  }
-
-  .listbox[hidden] {
-    display: none;
-  }
-
-  .listbox li[role="option"] {
-    padding: var(--compa11y-combobox-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-combobox-option-hover-bg, #f5f5f5);
-  }
-
-  .listbox li[role="option"][aria-selected="true"] {
-    background: var(--compa11y-combobox-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;
-  }
-
-  .empty-message {
-    padding: var(--compa11y-combobox-option-padding, 0.5rem 0.75rem);
-    color: var(--compa11y-combobox-empty-color, #666);
-    font-style: italic;
-  }
-
-  .options-source {
-    display: none;
-  }
-`,k=`
-  ${u}
-
-  :host {
-    display: inline-block;
-  }
-
-  .switch-wrapper {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--compa11y-switch-gap, 0.5rem);
-  }
-
-  /* Size variants */
-  .switch-wrapper.size-sm .switch-track {
-    width: var(--compa11y-switch-width-sm, 32px);
-    height: var(--compa11y-switch-height-sm, 18px);
-  }
-
-  .switch-wrapper.size-sm .switch-thumb {
-    width: var(--compa11y-switch-thumb-sm, 14px);
-    height: var(--compa11y-switch-thumb-sm, 14px);
-  }
-
-  .switch-wrapper.size-sm .switch-track.checked .switch-thumb {
-    transform: translateX(14px);
-  }
-
-  .switch-wrapper.size-md .switch-track {
-    width: var(--compa11y-switch-width-md, 44px);
-    height: var(--compa11y-switch-height-md, 24px);
-  }
-
-  .switch-wrapper.size-md .switch-thumb {
-    width: var(--compa11y-switch-thumb-md, 20px);
-    height: var(--compa11y-switch-thumb-md, 20px);
-  }
-
-  .switch-wrapper.size-md .switch-track.checked .switch-thumb {
-    transform: translateX(20px);
-  }
-
-  .switch-wrapper.size-lg .switch-track {
-    width: var(--compa11y-switch-width-lg, 56px);
-    height: var(--compa11y-switch-height-lg, 30px);
-  }
-
-  .switch-wrapper.size-lg .switch-thumb {
-    width: var(--compa11y-switch-thumb-lg, 26px);
-    height: var(--compa11y-switch-thumb-lg, 26px);
-  }
-
-  .switch-wrapper.size-lg .switch-track.checked .switch-thumb {
-    transform: translateX(26px);
-  }
-
-  .switch-track {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 2px;
-    border: none;
-    border-radius: var(--compa11y-switch-radius, 9999px);
-    background: var(--compa11y-switch-bg, #d1d5db);
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    outline: none;
-  }
-
-  .switch-track:focus-visible {
-    outline: 2px solid var(--compa11y-focus-color, #0066cc);
-    outline-offset: 2px;
-  }
-
-  .switch-track.checked {
-    background: var(--compa11y-switch-checked-bg, #0066cc);
-  }
-
-  .switch-track:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .switch-thumb {
-    position: absolute;
-    left: 2px;
-    background: var(--compa11y-switch-thumb-bg, white);
-    border-radius: 50%;
-    box-shadow: var(--compa11y-switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
-    transition: transform 0.2s ease;
-    pointer-events: none;
-  }
-
-  .switch-label {
-    user-select: none;
-    cursor: pointer;
-    color: var(--compa11y-switch-label-color, inherit);
-  }
-
-  .switch-label.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`,v='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';class b extends d{constructor(){super(...arguments),this._open=!1,this._previouslyFocused=null,this._triggerElement=null,this.handleTriggerClick=()=>{this.open=!0},this.handleClose=()=>{this.open=!1},this.handleKeyDown=e=>{var t;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 n=i.findIndex(p=>p===s);n===-1&&(n=e.shiftKey?0:i.length-1);let r;e.shiftKey?r=n===0?i.length-1:n-1:r=n===i.length-1?0:n+1;const h=i[r];h&&h.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>${x}</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)}getFocusableElements(){const e=[];return this.querySelectorAll(v).forEach(i=>e.push(i)),this.shadowRoot&&this.shadowRoot.querySelectorAll(v).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",o.announce("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,o.announce("Dialog closed",{politeness:"polite"}),this.emit("a11y-dialog-close")}show(){this.open=!0}close(){this.open=!1}}c("a11y-dialog",b);class m extends d{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>${w}</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,n;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=(n=this.shadowRoot)==null?void 0:n.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 n=this._menuItems[this._highlightedIndex];n==null||n.removeAttribute("data-highlighted")}this._highlightedIndex=e;const i=this._menuItems[e];if(i){i.setAttribute("data-highlighted","true"),t&&i.focus();const n=(s=this.shadowRoot)==null?void 0:s.querySelector('[role="menu"]');n==null||n.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(){this.open=!0}close(){this.open=!1}toggle(){this.open=!this._open}}c("a11y-menu",m);class g extends d{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}`,n=(i==null?void 0:i.id)||`${this._id}-panel-${t}`;e.id=s,e.setAttribute("aria-controls",n),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=n,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 h;if(e.target.getAttribute("role")!=="tab")return;const i=this.orientation==="horizontal",s=i?"ArrowRight":"ArrowDown",n=i?"ArrowLeft":"ArrowUp";let r=this._selectedIndex;switch(e.key){case s:e.preventDefault(),r=(this._selectedIndex+1)%this._tabs.length;break;case n: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}(h=this._tabs[r])==null||h.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,n,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=(n=this.shadowRoot)==null?void 0:n.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 n=(s=this.shadowRoot)==null?void 0:s.querySelector('[role="tablist"]');n==null||n.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];o.announce(`${(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(e){this.selectTab(e)}next(){this.selectTab((this._selectedIndex+1)%this._tabs.length)}previous(){this.selectTab((this._selectedIndex-1+this._tabs.length)%this._tabs.length)}}c("a11y-tabs",g);class f extends d{constructor(){super(...arguments),this._open=!1,this._highlightedIndex=-1,this._options=[],this._filteredOptions=[],this._inputValue="",this._selectedValue=null,this._inputElement=null,this._listboxElement=null,this.updateOptions=()=>{const e=Array.from(this.querySelectorAll("option"));this._options=e.map(t=>({value:t.getAttribute("value")||t.textContent||"",label:t.textContent||"",disabled:t.hasAttribute("disabled"),element:t})),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(n=>n.label.toLowerCase().includes(i)):[...this._options],this.renderOptions(),this.open=!0,this._highlightedIndex=0,this.updateHighlight(),this.updateClearButton();const s=this._filteredOptions.length;o.announce(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...",n=this.hasAttribute("clearable");e.innerHTML=`
-      <style>${A}</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"
-          />
-          ${n?`
-            <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,n,r,h,p;(i=this._inputElement)==null||i.addEventListener("input",this.handleInput),(s=this._inputElement)==null||s.addEventListener("focus",this.handleFocus),(n=this._inputElement)==null||n.addEventListener("blur",this.handleBlur),(r=this._inputElement)==null||r.addEventListener("keydown",this.handleKeyDown);const e=(h=this.shadowRoot)==null?void 0:h.querySelector(".clear-button");e==null||e.addEventListener("click",this.handleClear),document.addEventListener("mousedown",this.handleOutsideClick);const t=(p=this.shadowRoot)==null?void 0:p.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(),o.announce(`${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((n,r)=>{n.classList.toggle("highlighted",r===this._highlightedIndex)}),this._highlightedIndex>=0){const n=`${this._id}-option-${this._highlightedIndex}`;(t=this._inputElement)==null||t.setAttribute("aria-activedescendant",n);const r=(i=this._listboxElement)==null?void 0:i.querySelector(`#${n}`);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),s=t-e.bottom,n=e.top;s<i+8&&n>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)}show(){this.open=!0}close(){this.open=!1}clear(){this.handleClear()}}c("a11y-combobox",f);class y extends d{constructor(){super(...arguments),this._checked=!1,this._button=null,this._label=null,this.handleClick=()=>{this.toggle()},this.handleKeyDown=e=>{this.disabled||(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())},this.handleLabelClick=()=>{var e;this.disabled||(this.toggle(),(e=this._button)==null||e.focus())}}static get observedAttributes(){return["checked","disabled","label","size","aria-label"]}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 disabled(){return this.hasAttribute("disabled")}set disabled(e){this.toggleAttribute("disabled",e),this.updateDisabledState()}get label(){return this.getAttribute("label")||""}set label(e){e?this.setAttribute("label",e):this.removeAttribute("label")}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"),n=i?"":s?`aria-label="${s}"`:"",r=i?`aria-labelledby="${t}"`:"";e.innerHTML=`
-      <style>${k}</style>
-      <div class="switch-wrapper size-${this.size}" part="wrapper">
-        <button
-          type="button"
-          role="switch"
-          aria-checked="${this._checked}"
-          ${n}
-          ${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}}updateVisualState(){this._button&&(this._button.setAttribute("aria-checked",String(this._checked)),this._button.classList.toggle("checked",this._checked))}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)}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}`))}toggle(){if(this.disabled)return;this.checked=!this.checked;const e=this.label||this.getAttribute("aria-label")||"Switch";o.announcePolite(`${e} ${this.checked?"on":"off"}`)}setChecked(e){this.checked=e}}if(c("a11y-switch",y),typeof window<"u"){const l=()=>{o.initAnnouncer(),o.initFocusVisible()};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",l):l(),window.compa11y={A11yDialog:b,A11yMenu:m,A11yTabs:g,A11yCombobox:f,A11ySwitch:y,initAnnouncer:o.initAnnouncer,announce:o.announce,announcePolite:o.announcePolite,announceAssertive:o.announceAssertive,announceStatus:o.announceStatus,announceError:o.announceError,initFocusVisible:o.initFocusVisible,createFocusTrap:o.createFocusTrap,createFocusScope:o.createFocusScope,createRovingTabindex:o.createRovingTabindex,createKeyboardManager:o.createKeyboardManager,KeyboardPatterns:o.KeyboardPatterns,createTypeAhead:o.createTypeAhead,aria:o.aria,buildAriaProps:o.buildAriaProps,hasAccessibleName:o.hasAccessibleName,isBrowser:o.isBrowser,prefersReducedMotion:o.prefersReducedMotion,prefersHighContrast:o.prefersHighContrast,prefersDarkMode:o.prefersDarkMode}}Object.defineProperty(a,"KeyboardPatterns",{enumerable:!0,get:()=>o.KeyboardPatterns}),Object.defineProperty(a,"announce",{enumerable:!0,get:()=>o.announce}),Object.defineProperty(a,"announceAssertive",{enumerable:!0,get:()=>o.announceAssertive}),Object.defineProperty(a,"announceError",{enumerable:!0,get:()=>o.announceError}),Object.defineProperty(a,"announcePolite",{enumerable:!0,get:()=>o.announcePolite}),Object.defineProperty(a,"announceStatus",{enumerable:!0,get:()=>o.announceStatus}),Object.defineProperty(a,"aria",{enumerable:!0,get:()=>o.aria}),Object.defineProperty(a,"buildAriaProps",{enumerable:!0,get:()=>o.buildAriaProps}),Object.defineProperty(a,"createFocusScope",{enumerable:!0,get:()=>o.createFocusScope}),Object.defineProperty(a,"createFocusTrap",{enumerable:!0,get:()=>o.createFocusTrap}),Object.defineProperty(a,"createKeyboardManager",{enumerable:!0,get:()=>o.createKeyboardManager}),Object.defineProperty(a,"createRovingTabindex",{enumerable:!0,get:()=>o.createRovingTabindex}),Object.defineProperty(a,"createTypeAhead",{enumerable:!0,get:()=>o.createTypeAhead}),Object.defineProperty(a,"hasAccessibleName",{enumerable:!0,get:()=>o.hasAccessibleName}),Object.defineProperty(a,"initAnnouncer",{enumerable:!0,get:()=>o.initAnnouncer}),Object.defineProperty(a,"initFocusVisible",{enumerable:!0,get:()=>o.initFocusVisible}),Object.defineProperty(a,"isBrowser",{enumerable:!0,get:()=>o.isBrowser}),Object.defineProperty(a,"prefersDarkMode",{enumerable:!0,get:()=>o.prefersDarkMode}),Object.defineProperty(a,"prefersHighContrast",{enumerable:!0,get:()=>o.prefersHighContrast}),Object.defineProperty(a,"prefersReducedMotion",{enumerable:!0,get:()=>o.prefersReducedMotion}),a.A11yCombobox=f,a.A11yDialog=b,a.A11yMenu=m,a.A11ySwitch=y,a.A11yTabs=g,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
-//# sourceMappingURL=compa11y.umd.cjs.map