@editora/ui-core 0.1.20 → 0.1.22

package/dist/drawer.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const O=require("./ElementBase-EV6mVBUV.js"),m=require("./overlayManager-CSy3fJmJ.js");function F(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function _(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const E='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',S=new Set(["side","dismissible","headless","variant","density","shape","elevation","tone","size","inset","close-on-overlay","close-on-esc","lock-while-loading","show-close","state","role","aria-label","aria-labelledby","aria-describedby","initial-focus"]),T=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("./ElementBase-EV6mVBUV.js"),v=require("./overlayManager-CSy3fJmJ.js");function k(i){return typeof requestAnimationFrame=="function"?requestAnimationFrame(()=>i()):window.setTimeout(i,16)}function F(i){if(i){if(typeof cancelAnimationFrame=="function"){cancelAnimationFrame(i);return}window.clearTimeout(i)}}const L='button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',D=new Set(["side","dismissible","headless","variant","density","shape","elevation","tone","size","inset","close-on-overlay","close-on-esc","lock-while-loading","show-close","state","role","aria-label","aria-labelledby","aria-describedby","initial-focus"]),$=`
   :host {
     position: fixed;
     inset: 0;
@@ -15,7 +15,7 @@
       color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 20%, var(--ui-color-surface, #ffffff)) 100%
     );
     --ui-drawer-color: var(--ui-color-text, #0f172a);
-    --ui-drawer-muted: var(--ui-color-muted, #64748b);
+    --ui-drawer-muted: var(--ui-color-muted, #526175);
     --ui-drawer-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-drawer-border: 1px solid var(--ui-drawer-border-color);
     --ui-drawer-shadow: none;
@@ -370,13 +370,13 @@
   }
 
   :host([tone='success']) {
-    --ui-drawer-focus-ring: var(--ui-color-success, #16a34a);
-    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
+    --ui-drawer-focus-ring: var(--ui-color-success, #15803d);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
   }
 
   :host([tone='warning']) {
-    --ui-drawer-focus-ring: var(--ui-color-warning, #d97706);
-    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-warning, #d97706) 16%, transparent);
+    --ui-drawer-focus-ring: var(--ui-color-warning, #b45309);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-warning, #b45309) 16%, transparent);
   }
 
   :host([state='error']) .panel {
@@ -384,7 +384,7 @@
   }
 
   :host([state='success']) .panel {
-    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, var(--ui-drawer-border-color));
+    border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, var(--ui-drawer-border-color));
   }
 
   :host([state='loading']) .body {
@@ -498,25 +498,25 @@
       display: none;
     }
   }
-`;function w(i,e){if(i==null)return e;const t=i.trim().toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function v(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function C(i,e){return i==="top"||i==="bottom"||i==="left"||i==="right"?i:i==="start"?e==="rtl"?"right":"left":i==="end"?e==="rtl"?"left":"right":"left"}function A(i,e){const t=i.querySelector(`[slot="${e}"]`);return t?t.textContent?.trim().length!==0||t.children.length>0:!1}function L(){return typeof window<"u"&&typeof document<"u"}class I extends O.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,10),this._isOpen=!1,this._restoreFocusEl=null,this._globalListenersBound=!1,this._closeReason="programmatic",this._focusInitialFrame=0,this._focusTrapFrame=0,this._restoreFocusFrame=0,this._onRootClick=this._onRootClick.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentFocusIn=this._onDocumentFocusIn.bind(this)}static get observedAttributes(){return["open","side","dismissible","headless","variant","density","shape","elevation","tone","size","inset","close-on-overlay","close-on-esc","lock-while-loading","show-close","state","title","description","aria-label","aria-labelledby","aria-describedby","initial-focus"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._unbindGlobalListeners(),this._cancelScheduledFocusWork(),this._releaseOpenResources(),this._restoreFocusEl=null,this._isOpen=!1,super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}if(S.has(e)){this._syncLiveUi(),this._isOpen&&(e==="initial-focus"||e==="dismissible"||e==="show-close")&&this._scheduleEnsureFocusTrap();return}this.isConnected&&this.requestRender()}}open(){this.setAttribute("open","")}close(e="programmatic"){this._closeReason=e,this.removeAttribute("open")}closeDrawer(e="programmatic"){if(this.hasAttribute("open")){if(e==="programmatic"){this.close("programmatic");return}this._requestClose(e)}}toggle(){this.hasAttribute("open")?this.close("programmatic"):this.open()}get dismissible(){const e=this.getAttribute("dismissible");return e==null?!1:w(e,!0)}set dismissible(e){e?this.setAttribute("dismissible",""):this.removeAttribute("dismissible")}get closeOnOverlay(){return w(this.getAttribute("close-on-overlay"),!0)}set closeOnOverlay(e){this.setAttribute("close-on-overlay",String(e))}get closeOnEsc(){return w(this.getAttribute("close-on-esc"),!0)}set closeOnEsc(e){this.setAttribute("close-on-esc",String(e))}get lockWhileLoading(){return w(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(e){this.setAttribute("lock-while-loading",String(e))}get showClose(){return this.hasAttribute("show-close")?w(this.getAttribute("show-close"),!0):this.dismissible}set showClose(e){this.setAttribute("show-close",String(e))}get state(){const e=this.getAttribute("state");return e==="loading"||e==="error"||e==="success"?e:"idle"}set state(e){if(e==="idle"){this.removeAttribute("state");return}this.setAttribute("state",e)}get inset(){return this.hasAttribute("inset")}set inset(e){e?this.setAttribute("inset",""):this.removeAttribute("inset")}_getPanel(){return this.root.querySelector(".panel")}_getOverlay(){return this.root.querySelector(".overlay")}_getHeader(){return this.root.querySelector(".header")}_titleId(){return`ui-drawer-title-${this._uid}`}_descriptionId(){return`ui-drawer-description-${this._uid}`}_bodyId(){return`ui-drawer-body-${this._uid}`}_resolvedSide(){const e=this.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr";return C(this.getAttribute("side"),e==="rtl"?"rtl":"ltr")}_isTopMost(){const e=m.OverlayManager.top();return e?e===this:!0}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_isNodeInsideDrawer(e){if(!e)return!1;const t=this._getPanel();return t&&t.contains(e)?!0:this.contains(e)}_isFocusable(e){if(!e||!e.isConnected||e.disabled||e.matches('[inert], [aria-hidden="true"]')||e.closest('[inert], [aria-hidden="true"]'))return!1;if(!L())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_collectFocusable(){const e=this._getPanel(),t=[],r=s=>{this._isFocusable(s)&&(t.includes(s)||t.push(s))};return this.querySelectorAll(E).forEach(r),e&&e.querySelectorAll(E).forEach(r),t}_cancelScheduledFocusWork(){this._focusInitialFrame&&(_(this._focusInitialFrame),this._focusInitialFrame=0),this._focusTrapFrame&&(_(this._focusTrapFrame),this._focusTrapFrame=0),this._restoreFocusFrame&&(_(this._restoreFocusFrame),this._restoreFocusFrame=0)}_scheduleFocusInitial(){this._isOpen&&(this._focusInitialFrame||(this._focusInitialFrame=F(()=>{this._focusInitialFrame=0,this._focusInitial()})))}_scheduleEnsureFocusTrap(){this._isOpen&&(this._focusTrapFrame||(this._focusTrapFrame=F(()=>{this._focusTrapFrame=0,this._ensureFocusTrap()})))}_scheduleRestoreFocus(e){!e||!this._canRestoreFocus(e)||(this._restoreFocusFrame&&_(this._restoreFocusFrame),this._restoreFocusFrame=F(()=>{this._restoreFocusFrame=0;try{this._canRestoreFocus(e)&&e.focus({preventScroll:!0})}catch{try{this._canRestoreFocus(e)&&e.focus()}catch{}}}))}_syncLiveUi(){const e=this.hasAttribute("open"),t=this._getOverlay(),r=this._getPanel(),s=this._getHeader(),a=this.root.querySelector(".close-btn");if(t&&t.setAttribute("aria-hidden",e?"false":"true"),!r)return;const o=this._resolvedSide();r.classList.remove("side-left","side-right","side-top","side-bottom"),r.classList.add(`side-${o}`);const n=this.state==="loading";n?r.setAttribute("aria-busy","true"):r.removeAttribute("aria-busy");const y=this.getAttribute("role")||"dialog";r.setAttribute("role",y);const u=(this.getAttribute("title")||"").trim(),h=(this.getAttribute("description")||"").trim(),b=A(this,"header"),p=this.showClose,x=p||b||!!u||!!h;s&&s.classList.toggle("empty",!x),a&&(a.hidden=!p,a.disabled=n&&this.lockWhileLoading);const f=this.getAttribute("aria-label")||"",g=this.getAttribute("aria-labelledby")||"",l=this.getAttribute("aria-describedby")||"",c=g||(!f&&(b||u)?this._titleId():""),d=[];l?d.push(l):(h&&d.push(this._descriptionId()),d.push(this._bodyId()));const k=f||(c?"":"Drawer");k?r.setAttribute("aria-label",k):r.removeAttribute("aria-label"),c?r.setAttribute("aria-labelledby",c):r.removeAttribute("aria-labelledby"),d.length?r.setAttribute("aria-describedby",d.join(" ")):r.removeAttribute("aria-describedby")}_focusInitial(){if(!this._isOpen)return;const e=this._getPanel();if(!e)return;const t=this.getAttribute("initial-focus")||"";if(t){const o=this.querySelector(t)||e.querySelector(t);if(o&&this._isFocusable(o))try{o.focus({preventScroll:!0});return}catch{try{o.focus();return}catch{}}}const r=this._collectFocusable(),a=r.find(o=>o.hasAttribute("autofocus"))||r[0]||e;a===e&&!a.hasAttribute("tabindex")&&a.setAttribute("tabindex","-1");try{a.focus({preventScroll:!0})}catch{try{a.focus()}catch{}}}_ensureFocusTrap(){if(!this._isOpen||!this._isTopMost())return;const e=document.activeElement;this._isNodeInsideDrawer(e)||this._focusInitial()}_releaseOpenResources(){try{m.OverlayManager.unregister(this),m.OverlayManager.releaseLock()}catch{}}_canRestoreFocus(e){if(!e||!e.isConnected||e.disabled)return!1;if(!L())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_syncOpenState(){const e=this.hasAttribute("open");if(this._syncLiveUi(),e===this._isOpen){e?(this._bindGlobalListeners(),this._scheduleEnsureFocusTrap()):(this._unbindGlobalListeners(),this._cancelScheduledFocusWork());return}if(this._isOpen=e,e){this._cancelScheduledFocusWork(),this._bindGlobalListeners(),this._restoreFocusEl=document.activeElement||null,this._closeReason="programmatic";try{m.OverlayManager.register(this),m.OverlayManager.acquireLock()}catch{}this._scheduleFocusInitial(),this._scheduleEnsureFocusTrap(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("show",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0,reason:"programmatic"}}));return}this._unbindGlobalListeners(),this._cancelScheduledFocusWork(),this._releaseOpenResources();const t=this._closeReason;this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}));const r=this._restoreFocusEl;this._restoreFocusEl=null,this._closeReason="programmatic",this._scheduleRestoreFocus(r)}_requestClose(e){if(!this._isOpen||this._isInteractionLocked())return;const t=new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t);const r=new CustomEvent("ui-request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r),!(t.defaultPrevented||r.defaultPrevented)&&this.close(e)}_onRootClick(e){const t=e.target;if(!t||!this._isOpen)return;if(t.closest(".close-btn")){this._requestClose("button");return}t.closest(".overlay")&&(!this.dismissible||!this.closeOnOverlay||this._isTopMost()&&this._requestClose("overlay"))}_handleTab(e){const t=this._getPanel();if(!t)return;const r=this._collectFocusable();if(!r.length){e.preventDefault(),t.focus();return}const s=r[0],a=r[r.length-1],o=document.activeElement,n=!!o&&this._isNodeInsideDrawer(o);if(e.shiftKey){if(!n||o===s){e.preventDefault();try{a.focus({preventScroll:!0})}catch{a.focus()}}return}if(!n||o===a){e.preventDefault();try{s.focus({preventScroll:!0})}catch{s.focus()}}}_onDocumentKeyDown(e){if(!(!this._isOpen||!this._isTopMost())){if(e.key==="Escape"){if(!this.dismissible||!this.closeOnEsc||this._isInteractionLocked())return;e.preventDefault(),e.stopPropagation(),this._requestClose("escape");return}e.key==="Tab"&&this._handleTab(e)}}_onDocumentFocusIn(e){if(!this._isOpen||!this._isTopMost())return;const t=e.target,r=this._getPanel(),s=typeof e.composedPath=="function"?e.composedPath():[];t&&this._isNodeInsideDrawer(t)||s.includes(this)||r&&s.includes(r)||this._scheduleFocusInitial()}render(){const e=this.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr",t=C(this.getAttribute("side"),e==="rtl"?"rtl":"ltr"),r=this.showClose,s=A(this,"header"),a=A(this,"footer"),o=(this.getAttribute("title")||"").trim(),n=(this.getAttribute("description")||"").trim(),y=r||s||!!o||!!n,u=`ui-drawer-title-${this._uid}`,h=`ui-drawer-description-${this._uid}`,b=`ui-drawer-body-${this._uid}`,p=this.getAttribute("aria-label")||"",x=this.getAttribute("aria-labelledby")||"",f=this.getAttribute("aria-describedby")||"",g=x||(!p&&(s||o)?u:""),l=[];f?l.push(f):(n&&l.push(h),l.push(b));const c=p||(g?"":"Drawer"),d=this.state==="loading";this.setContent(`
-      <style>${T}</style>
+`;function _(i,e){if(i==null)return e;const t=i.trim().toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function y(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function S(i,e){return i==="top"||i==="bottom"||i==="left"||i==="right"?i:i==="start"?e==="rtl"?"right":"left":i==="end"?e==="rtl"?"left":"right":"left"}function C(i,e){const t=i.querySelector(`[slot="${e}"]`);return t?t.textContent?.trim().length!==0||t.children.length>0:!1}function I(){return typeof window<"u"&&typeof document<"u"}class O extends T.ElementBase{constructor(){super(),this._uid=Math.random().toString(36).slice(2,10),this._isOpen=!1,this._restoreFocusEl=null,this._globalListenersBound=!1,this._closeReason="programmatic",this._focusInitialFrame=0,this._focusTrapFrame=0,this._restoreFocusFrame=0,this._onRootClick=this._onRootClick.bind(this),this._onDocumentKeyDown=this._onDocumentKeyDown.bind(this),this._onDocumentFocusIn=this._onDocumentFocusIn.bind(this)}static get observedAttributes(){return["open","side","dismissible","headless","variant","density","shape","elevation","tone","size","inset","close-on-overlay","close-on-esc","lock-while-loading","show-close","state","title","description","aria-label","aria-labelledby","aria-describedby","initial-focus"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onRootClick),this._syncOpenState()}disconnectedCallback(){this.root.removeEventListener("click",this._onRootClick),this._unbindGlobalListeners(),this._cancelScheduledFocusWork(),this._releaseOpenResources(),this._restoreFocusEl=null,this._isOpen=!1,super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}if(D.has(e)){this._syncLiveUi(),this._isOpen&&(e==="initial-focus"||e==="dismissible"||e==="show-close")&&this._scheduleEnsureFocusTrap();return}this.isConnected&&this.requestRender()}}open(){this.setAttribute("open","")}close(e="programmatic"){this._closeReason=e,this.removeAttribute("open")}closeDrawer(e="programmatic"){if(this.hasAttribute("open")){if(e==="programmatic"){this.close("programmatic");return}this._requestClose(e)}}toggle(){this.hasAttribute("open")?this.close("programmatic"):this.open()}get dismissible(){const e=this.getAttribute("dismissible");return e==null?!1:_(e,!0)}set dismissible(e){e?this.setAttribute("dismissible",""):this.removeAttribute("dismissible")}get closeOnOverlay(){return _(this.getAttribute("close-on-overlay"),!0)}set closeOnOverlay(e){this.setAttribute("close-on-overlay",String(e))}get closeOnEsc(){return _(this.getAttribute("close-on-esc"),!0)}set closeOnEsc(e){this.setAttribute("close-on-esc",String(e))}get lockWhileLoading(){return _(this.getAttribute("lock-while-loading"),!0)}set lockWhileLoading(e){this.setAttribute("lock-while-loading",String(e))}get showClose(){return this.hasAttribute("show-close")?_(this.getAttribute("show-close"),!0):this.dismissible}set showClose(e){this.setAttribute("show-close",String(e))}get state(){const e=this.getAttribute("state");return e==="loading"||e==="error"||e==="success"?e:"idle"}set state(e){if(e==="idle"){this.removeAttribute("state");return}this.setAttribute("state",e)}get inset(){return this.hasAttribute("inset")}set inset(e){e?this.setAttribute("inset",""):this.removeAttribute("inset")}_getPanel(){return this.root.querySelector(".panel")}_getOverlay(){return this.root.querySelector(".overlay")}_getHeader(){return this.root.querySelector(".header")}_titleId(){return`ui-drawer-title-${this._uid}`}_descriptionId(){return`ui-drawer-description-${this._uid}`}_bodyId(){return`ui-drawer-body-${this._uid}`}_resolvedSide(){const e=this.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr";return S(this.getAttribute("side"),e==="rtl"?"rtl":"ltr")}_isTopMost(){const e=v.OverlayManager.top();return e?e===this:!0}_isInteractionLocked(){return this.state==="loading"&&this.lockWhileLoading}_isNodeInsideDrawer(e){if(!e)return!1;const t=this._getPanel();return t&&t.contains(e)?!0:this.contains(e)}_isFocusable(e){if(!e||!e.isConnected||e.disabled||e.matches('[inert], [aria-hidden="true"]')||e.closest('[inert], [aria-hidden="true"]'))return!1;if(!I())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_collectFocusable(){const e=this._getPanel(),t=[],r=s=>{this._isFocusable(s)&&(t.includes(s)||t.push(s))};return this.querySelectorAll(L).forEach(r),e&&e.querySelectorAll(L).forEach(r),t}_cancelScheduledFocusWork(){this._focusInitialFrame&&(F(this._focusInitialFrame),this._focusInitialFrame=0),this._focusTrapFrame&&(F(this._focusTrapFrame),this._focusTrapFrame=0),this._restoreFocusFrame&&(F(this._restoreFocusFrame),this._restoreFocusFrame=0)}_scheduleFocusInitial(){this._isOpen&&(this._focusInitialFrame||(this._focusInitialFrame=k(()=>{this._focusInitialFrame=0,this._focusInitial()})))}_scheduleEnsureFocusTrap(){this._isOpen&&(this._focusTrapFrame||(this._focusTrapFrame=k(()=>{this._focusTrapFrame=0,this._ensureFocusTrap()})))}_scheduleRestoreFocus(e){!e||!this._canRestoreFocus(e)||(this._restoreFocusFrame&&F(this._restoreFocusFrame),this._restoreFocusFrame=k(()=>{this._restoreFocusFrame=0;try{this._canRestoreFocus(e)&&e.focus({preventScroll:!0})}catch{try{this._canRestoreFocus(e)&&e.focus()}catch{}}}))}_syncLiveUi(){const e=this.hasAttribute("open"),t=this._getOverlay(),r=this._getPanel(),s=this._getHeader(),a=this.root.querySelector(".close-btn");if(t&&t.setAttribute("aria-hidden",e?"false":"true"),!r)return;const o=this._resolvedSide();r.classList.remove("side-left","side-right","side-top","side-bottom"),r.classList.add(`side-${o}`);const n=this.state==="loading";n?r.setAttribute("aria-busy","true"):r.removeAttribute("aria-busy");const A=this.getAttribute("role")||"dialog";r.setAttribute("role",A);const u=(this.getAttribute("title")||"").trim(),g=(this.getAttribute("description")||"").trim(),c=C(this,"header"),h=this.showClose,x=h||c||!!u||!!g;s&&s.classList.toggle("empty",!x),a&&(a.hidden=!h,a.disabled=n&&this.lockWhileLoading);const b=this.getAttribute("aria-label")||"",m=this.getAttribute("aria-labelledby")||"",w=this.getAttribute("aria-describedby")||"",p=c?(this.querySelector('[slot="header"]')?.textContent||"").replace(/\s+/g," ").trim():"",l=!b&&!m&&!!p,f=m||(!b&&!l&&(c||u)?this._titleId():""),d=[];w?d.push(w):(g&&d.push(this._descriptionId()),d.push(this._bodyId()));const E=b||(l?p:f?"":"Drawer");E?r.setAttribute("aria-label",E):r.removeAttribute("aria-label"),f?r.setAttribute("aria-labelledby",f):r.removeAttribute("aria-labelledby"),d.length?r.setAttribute("aria-describedby",d.join(" ")):r.removeAttribute("aria-describedby")}_focusInitial(){if(!this._isOpen)return;const e=this._getPanel();if(!e)return;const t=this.getAttribute("initial-focus")||"";if(t){const o=this.querySelector(t)||e.querySelector(t);if(o&&this._isFocusable(o))try{o.focus({preventScroll:!0});return}catch{try{o.focus();return}catch{}}}const r=this._collectFocusable(),a=r.find(o=>o.hasAttribute("autofocus"))||r[0]||e;a===e&&!a.hasAttribute("tabindex")&&a.setAttribute("tabindex","-1");try{a.focus({preventScroll:!0})}catch{try{a.focus()}catch{}}}_ensureFocusTrap(){if(!this._isOpen||!this._isTopMost())return;const e=document.activeElement;this._isNodeInsideDrawer(e)||this._focusInitial()}_releaseOpenResources(){try{v.OverlayManager.unregister(this),v.OverlayManager.releaseLock()}catch{}}_canRestoreFocus(e){if(!e||!e.isConnected||e.disabled)return!1;if(!I())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_syncOpenState(){const e=this.hasAttribute("open");if(this._syncLiveUi(),e===this._isOpen){e?(this._bindGlobalListeners(),this._scheduleEnsureFocusTrap()):(this._unbindGlobalListeners(),this._cancelScheduledFocusWork());return}if(this._isOpen=e,e){this._cancelScheduledFocusWork(),this._bindGlobalListeners(),this._restoreFocusEl=document.activeElement||null,this._closeReason="programmatic";try{v.OverlayManager.register(this),v.OverlayManager.acquireLock()}catch{}this._scheduleFocusInitial(),this._scheduleEnsureFocusTrap(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("show",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0,reason:"programmatic"}}));return}this._unbindGlobalListeners(),this._cancelScheduledFocusWork(),this._releaseOpenResources();const t=this._closeReason;this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("hide",{bubbles:!0,composed:!0,detail:{reason:t}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:t}}));const r=this._restoreFocusEl;this._restoreFocusEl=null,this._closeReason="programmatic",this._scheduleRestoreFocus(r)}_requestClose(e){if(!this._isOpen||this._isInteractionLocked())return;const t=new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t);const r=new CustomEvent("ui-request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r),!(t.defaultPrevented||r.defaultPrevented)&&this.close(e)}_onRootClick(e){const t=e.target;if(!t||!this._isOpen)return;if(t.closest(".close-btn")){this._requestClose("button");return}t.closest(".overlay")&&(!this.dismissible||!this.closeOnOverlay||this._isTopMost()&&this._requestClose("overlay"))}_handleTab(e){const t=this._getPanel();if(!t)return;const r=this._collectFocusable();if(!r.length){e.preventDefault(),t.focus();return}const s=r[0],a=r[r.length-1],o=document.activeElement,n=!!o&&this._isNodeInsideDrawer(o);if(e.shiftKey){if(!n||o===s){e.preventDefault();try{a.focus({preventScroll:!0})}catch{a.focus()}}return}if(!n||o===a){e.preventDefault();try{s.focus({preventScroll:!0})}catch{s.focus()}}}_onDocumentKeyDown(e){if(!(!this._isOpen||!this._isTopMost())){if(e.key==="Escape"){if(!this.dismissible||!this.closeOnEsc||this._isInteractionLocked())return;e.preventDefault(),e.stopPropagation(),this._requestClose("escape");return}e.key==="Tab"&&this._handleTab(e)}}_onDocumentFocusIn(e){if(!this._isOpen||!this._isTopMost())return;const t=e.target,r=this._getPanel(),s=typeof e.composedPath=="function"?e.composedPath():[];t&&this._isNodeInsideDrawer(t)||s.includes(this)||r&&s.includes(r)||this._scheduleFocusInitial()}render(){const e=this.getAttribute("dir")||document.documentElement.getAttribute("dir")||"ltr",t=S(this.getAttribute("side"),e==="rtl"?"rtl":"ltr"),r=this.showClose,s=C(this,"header"),a=C(this,"footer"),o=(this.getAttribute("title")||"").trim(),n=(this.getAttribute("description")||"").trim(),A=r||s||!!o||!!n,u=`ui-drawer-title-${this._uid}`,g=`ui-drawer-description-${this._uid}`,c=`ui-drawer-body-${this._uid}`,h=this.getAttribute("aria-label")||"",x=this.getAttribute("aria-labelledby")||"",b=this.getAttribute("aria-describedby")||"",m=s?(this.querySelector('[slot="header"]')?.textContent||"").replace(/\s+/g," ").trim():"",w=!h&&!x&&!!m,p=x||(!h&&!w&&(s||o)?u:""),l=[];b?l.push(b):(n&&l.push(g),l.push(c));const f=h||(w?m:p?"":"Drawer"),d=this.state==="loading";this.setContent(`
+      <style>${$}</style>
       <div class="overlay" part="overlay" aria-hidden="true"></div>
-      <aside
+      <div
         class="panel side-${t}"
         part="panel"
         role="dialog"
         aria-modal="true"
-        ${c?`aria-label="${v(c)}"`:""}
-        ${g?`aria-labelledby="${v(g)}"`:""}
-        ${l.length?`aria-describedby="${v(l.join(" "))}"`:""}
+        ${f?`aria-label="${y(f)}"`:""}
+        ${p?`aria-labelledby="${y(p)}"`:""}
+        ${l.length?`aria-describedby="${y(l.join(" "))}"`:""}
         ${d?'aria-busy="true"':""}
         tabindex="-1"
       >
-        <header class="header ${y?"":"empty"}" part="header">
+        <header class="header ${A?"":"empty"}" part="header">
           <div class="header-main">
             ${s?`<slot name="header" id="${u}"></slot>`:""}
-            ${!s&&o?`<h2 class="title" id="${u}">${v(o)}</h2>`:""}
-            ${n?`<p class="subtitle" id="${h}">${v(n)}</p>`:""}
+            ${!s&&o?`<h2 class="title" id="${u}">${y(o)}</h2>`:""}
+            ${n?`<p class="subtitle" id="${g}">${y(n)}</p>`:""}
           </div>
           <button
             type="button"
@@ -532,7 +532,7 @@
             </svg>
           </button>
         </header>
-        <div class="body" part="body" id="${b}"><slot></slot></div>
+        <div class="body" part="body" id="${c}"><slot></slot></div>
         <footer class="footer ${a?"":"empty"}" part="footer"><slot name="footer"></slot></footer>
-      </aside>
-    `),this._syncLiveUi(),this._isOpen&&this._scheduleEnsureFocusTrap()}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onDocumentKeyDown,!0),document.addEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onDocumentKeyDown,!0),document.removeEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!1)}}typeof customElements<"u"&&!customElements.get("ui-drawer")&&customElements.define("ui-drawer",I);exports.UIDrawer=I;
+      </div>
+    `),this._syncLiveUi(),this._isOpen&&this._scheduleEnsureFocusTrap()}_bindGlobalListeners(){this._globalListenersBound||(document.addEventListener("keydown",this._onDocumentKeyDown,!0),document.addEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!0)}_unbindGlobalListeners(){this._globalListenersBound&&(document.removeEventListener("keydown",this._onDocumentKeyDown,!0),document.removeEventListener("focusin",this._onDocumentFocusIn,!0),this._globalListenersBound=!1)}}typeof customElements<"u"&&!customElements.get("ui-drawer")&&customElements.define("ui-drawer",O);exports.UIDrawer=O;

package/dist/drawer.esm.js

@@ -1,9 +1,9 @@
-import { E as I } from "./ElementBase-YlTLMsGk.mjs";
-import { O as m } from "./overlayManager-BJjU1VA8.mjs";
-function F(i) {
+import { E as O } from "./ElementBase-YlTLMsGk.mjs";
+import { O as v } from "./overlayManager-BJjU1VA8.mjs";
+function k(i) {
   return typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => i()) : window.setTimeout(i, 16);
 }
-function _(i) {
+function F(i) {
   if (i) {
     if (typeof cancelAnimationFrame == "function") {
       cancelAnimationFrame(i);
@@ -12,7 +12,7 @@ function _(i) {
     window.clearTimeout(i);
   }
 }
-const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', S = /* @__PURE__ */ new Set([
+const L = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', T = /* @__PURE__ */ new Set([
   "side",
   "dismissible",
   "headless",
@@ -33,7 +33,7 @@ const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
   "aria-labelledby",
   "aria-describedby",
   "initial-focus"
-]), O = `
+]), D = `
   :host {
     position: fixed;
     inset: 0;
@@ -50,7 +50,7 @@ const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
       color-mix(in srgb, var(--ui-color-surface-elevated, #f8fafc) 20%, var(--ui-color-surface, #ffffff)) 100%
     );
     --ui-drawer-color: var(--ui-color-text, #0f172a);
-    --ui-drawer-muted: var(--ui-color-muted, #64748b);
+    --ui-drawer-muted: var(--ui-color-muted, #526175);
     --ui-drawer-border-color: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
     --ui-drawer-border: 1px solid var(--ui-drawer-border-color);
     --ui-drawer-shadow: none;
@@ -405,13 +405,13 @@ const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
   }
 
   :host([tone='success']) {
-    --ui-drawer-focus-ring: var(--ui-color-success, #16a34a);
-    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
+    --ui-drawer-focus-ring: var(--ui-color-success, #15803d);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
   }
 
   :host([tone='warning']) {
-    --ui-drawer-focus-ring: var(--ui-color-warning, #d97706);
-    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-warning, #d97706) 16%, transparent);
+    --ui-drawer-focus-ring: var(--ui-color-warning, #b45309);
+    --ui-drawer-control-bg-hover: color-mix(in srgb, var(--ui-color-warning, #b45309) 16%, transparent);
   }
 
   :host([state='error']) .panel {
@@ -419,7 +419,7 @@ const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
   }
 
   :host([state='success']) .panel {
-    border-color: color-mix(in srgb, var(--ui-color-success, #16a34a) 40%, var(--ui-drawer-border-color));
+    border-color: color-mix(in srgb, var(--ui-color-success, #15803d) 40%, var(--ui-drawer-border-color));
   }
 
   :host([state='loading']) .body {
@@ -534,25 +534,25 @@ const E = 'button:not([disabled]), [href], input:not([disabled]), select:not([di
     }
   }
 `;
-function w(i, e) {
+function _(i, e) {
   if (i == null) return e;
   const t = i.trim().toLowerCase();
   return t !== "false" && t !== "0" && t !== "off";
 }
-function v(i) {
+function y(i) {
   return i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function C(i, e) {
+function I(i, e) {
   return i === "top" || i === "bottom" || i === "left" || i === "right" ? i : i === "start" ? e === "rtl" ? "right" : "left" : i === "end" ? e === "rtl" ? "left" : "right" : "left";
 }
-function A(i, e) {
+function C(i, e) {
   const t = i.querySelector(`[slot="${e}"]`);
   return t ? t.textContent?.trim().length !== 0 || t.children.length > 0 : !1;
 }
-function L() {
+function S() {
   return typeof window < "u" && typeof document < "u";
 }
-class T extends I {
+class $ extends O {
   constructor() {
     super(), this._uid = Math.random().toString(36).slice(2, 10), this._isOpen = !1, this._restoreFocusEl = null, this._globalListenersBound = !1, this._closeReason = "programmatic", this._focusInitialFrame = 0, this._focusTrapFrame = 0, this._restoreFocusFrame = 0, this._onRootClick = this._onRootClick.bind(this), this._onDocumentKeyDown = this._onDocumentKeyDown.bind(this), this._onDocumentFocusIn = this._onDocumentFocusIn.bind(this);
   }
@@ -594,7 +594,7 @@ class T extends I {
         this._syncOpenState();
         return;
       }
-      if (S.has(e)) {
+      if (T.has(e)) {
         this._syncLiveUi(), this._isOpen && (e === "initial-focus" || e === "dismissible" || e === "show-close") && this._scheduleEnsureFocusTrap();
         return;
       }
@@ -621,31 +621,31 @@ class T extends I {
   }
   get dismissible() {
     const e = this.getAttribute("dismissible");
-    return e == null ? !1 : w(e, !0);
+    return e == null ? !1 : _(e, !0);
   }
   set dismissible(e) {
     e ? this.setAttribute("dismissible", "") : this.removeAttribute("dismissible");
   }
   get closeOnOverlay() {
-    return w(this.getAttribute("close-on-overlay"), !0);
+    return _(this.getAttribute("close-on-overlay"), !0);
   }
   set closeOnOverlay(e) {
     this.setAttribute("close-on-overlay", String(e));
   }
   get closeOnEsc() {
-    return w(this.getAttribute("close-on-esc"), !0);
+    return _(this.getAttribute("close-on-esc"), !0);
   }
   set closeOnEsc(e) {
     this.setAttribute("close-on-esc", String(e));
   }
   get lockWhileLoading() {
-    return w(this.getAttribute("lock-while-loading"), !0);
+    return _(this.getAttribute("lock-while-loading"), !0);
   }
   set lockWhileLoading(e) {
     this.setAttribute("lock-while-loading", String(e));
   }
   get showClose() {
-    return this.hasAttribute("show-close") ? w(this.getAttribute("show-close"), !0) : this.dismissible;
+    return this.hasAttribute("show-close") ? _(this.getAttribute("show-close"), !0) : this.dismissible;
   }
   set showClose(e) {
     this.setAttribute("show-close", String(e));
@@ -687,10 +687,10 @@ class T extends I {
   }
   _resolvedSide() {
     const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr";
-    return C(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr");
+    return I(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr");
   }
   _isTopMost() {
-    const e = m.top();
+    const e = v.top();
     return e ? e === this : !0;
   }
   _isInteractionLocked() {
@@ -703,7 +703,7 @@ class T extends I {
   }
   _isFocusable(e) {
     if (!e || !e.isConnected || e.disabled || e.matches('[inert], [aria-hidden="true"]') || e.closest('[inert], [aria-hidden="true"]')) return !1;
-    if (!L()) return !0;
+    if (!S()) return !0;
     const t = window.getComputedStyle(e);
     return t.display !== "none" && t.visibility !== "hidden";
   }
@@ -711,23 +711,23 @@ class T extends I {
     const e = this._getPanel(), t = [], r = (s) => {
       this._isFocusable(s) && (t.includes(s) || t.push(s));
     };
-    return this.querySelectorAll(E).forEach(r), e && e.querySelectorAll(E).forEach(r), t;
+    return this.querySelectorAll(L).forEach(r), e && e.querySelectorAll(L).forEach(r), t;
   }
   _cancelScheduledFocusWork() {
-    this._focusInitialFrame && (_(this._focusInitialFrame), this._focusInitialFrame = 0), this._focusTrapFrame && (_(this._focusTrapFrame), this._focusTrapFrame = 0), this._restoreFocusFrame && (_(this._restoreFocusFrame), this._restoreFocusFrame = 0);
+    this._focusInitialFrame && (F(this._focusInitialFrame), this._focusInitialFrame = 0), this._focusTrapFrame && (F(this._focusTrapFrame), this._focusTrapFrame = 0), this._restoreFocusFrame && (F(this._restoreFocusFrame), this._restoreFocusFrame = 0);
   }
   _scheduleFocusInitial() {
-    this._isOpen && (this._focusInitialFrame || (this._focusInitialFrame = F(() => {
+    this._isOpen && (this._focusInitialFrame || (this._focusInitialFrame = k(() => {
       this._focusInitialFrame = 0, this._focusInitial();
     })));
   }
   _scheduleEnsureFocusTrap() {
-    this._isOpen && (this._focusTrapFrame || (this._focusTrapFrame = F(() => {
+    this._isOpen && (this._focusTrapFrame || (this._focusTrapFrame = k(() => {
       this._focusTrapFrame = 0, this._ensureFocusTrap();
     })));
   }
   _scheduleRestoreFocus(e) {
-    !e || !this._canRestoreFocus(e) || (this._restoreFocusFrame && _(this._restoreFocusFrame), this._restoreFocusFrame = F(() => {
+    !e || !this._canRestoreFocus(e) || (this._restoreFocusFrame && F(this._restoreFocusFrame), this._restoreFocusFrame = k(() => {
       this._restoreFocusFrame = 0;
       try {
         this._canRestoreFocus(e) && e.focus({ preventScroll: !0 });
@@ -746,14 +746,14 @@ class T extends I {
     r.classList.remove("side-left", "side-right", "side-top", "side-bottom"), r.classList.add(`side-${o}`);
     const n = this.state === "loading";
     n ? r.setAttribute("aria-busy", "true") : r.removeAttribute("aria-busy");
-    const y = this.getAttribute("role") || "dialog";
-    r.setAttribute("role", y);
-    const u = (this.getAttribute("title") || "").trim(), h = (this.getAttribute("description") || "").trim(), p = A(this, "header"), b = this.showClose, x = b || p || !!u || !!h;
-    s && s.classList.toggle("empty", !x), a && (a.hidden = !b, a.disabled = n && this.lockWhileLoading);
-    const f = this.getAttribute("aria-label") || "", g = this.getAttribute("aria-labelledby") || "", l = this.getAttribute("aria-describedby") || "", c = g || (!f && (p || u) ? this._titleId() : ""), d = [];
-    l ? d.push(l) : (h && d.push(this._descriptionId()), d.push(this._bodyId()));
-    const k = f || (c ? "" : "Drawer");
-    k ? r.setAttribute("aria-label", k) : r.removeAttribute("aria-label"), c ? r.setAttribute("aria-labelledby", c) : r.removeAttribute("aria-labelledby"), d.length ? r.setAttribute("aria-describedby", d.join(" ")) : r.removeAttribute("aria-describedby");
+    const A = this.getAttribute("role") || "dialog";
+    r.setAttribute("role", A);
+    const u = (this.getAttribute("title") || "").trim(), g = (this.getAttribute("description") || "").trim(), c = C(this, "header"), h = this.showClose, x = h || c || !!u || !!g;
+    s && s.classList.toggle("empty", !x), a && (a.hidden = !h, a.disabled = n && this.lockWhileLoading);
+    const p = this.getAttribute("aria-label") || "", m = this.getAttribute("aria-labelledby") || "", w = this.getAttribute("aria-describedby") || "", b = c ? (this.querySelector('[slot="header"]')?.textContent || "").replace(/\s+/g, " ").trim() : "", l = !p && !m && !!b, f = m || (!p && !l && (c || u) ? this._titleId() : ""), d = [];
+    w ? d.push(w) : (g && d.push(this._descriptionId()), d.push(this._bodyId()));
+    const E = p || (l ? b : f ? "" : "Drawer");
+    E ? r.setAttribute("aria-label", E) : r.removeAttribute("aria-label"), f ? r.setAttribute("aria-labelledby", f) : r.removeAttribute("aria-labelledby"), d.length ? r.setAttribute("aria-describedby", d.join(" ")) : r.removeAttribute("aria-describedby");
   }
   _focusInitial() {
     if (!this._isOpen) return;
@@ -792,13 +792,13 @@ class T extends I {
   }
   _releaseOpenResources() {
     try {
-      m.unregister(this), m.releaseLock();
+      v.unregister(this), v.releaseLock();
     } catch {
     }
   }
   _canRestoreFocus(e) {
     if (!e || !e.isConnected || e.disabled) return !1;
-    if (!L()) return !0;
+    if (!S()) return !0;
     const t = window.getComputedStyle(e);
     return t.display !== "none" && t.visibility !== "hidden";
   }
@@ -811,7 +811,7 @@ class T extends I {
     if (this._isOpen = e, e) {
       this._cancelScheduledFocusWork(), this._bindGlobalListeners(), this._restoreFocusEl = document.activeElement || null, this._closeReason = "programmatic";
       try {
-        m.register(this), m.acquireLock();
+        v.register(this), v.acquireLock();
       } catch {
       }
       this._scheduleFocusInitial(), this._scheduleEnsureFocusTrap(), this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("show", { bubbles: !0, composed: !0 })), this.dispatchEvent(
@@ -918,28 +918,28 @@ class T extends I {
     t && this._isNodeInsideDrawer(t) || s.includes(this) || r && s.includes(r) || this._scheduleFocusInitial();
   }
   render() {
-    const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr", t = C(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr"), r = this.showClose, s = A(this, "header"), a = A(this, "footer"), o = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("description") || "").trim(), y = r || s || !!o || !!n, u = `ui-drawer-title-${this._uid}`, h = `ui-drawer-description-${this._uid}`, p = `ui-drawer-body-${this._uid}`, b = this.getAttribute("aria-label") || "", x = this.getAttribute("aria-labelledby") || "", f = this.getAttribute("aria-describedby") || "", g = x || (!b && (s || o) ? u : ""), l = [];
-    f ? l.push(f) : (n && l.push(h), l.push(p));
-    const c = b || (g ? "" : "Drawer"), d = this.state === "loading";
+    const e = this.getAttribute("dir") || document.documentElement.getAttribute("dir") || "ltr", t = I(this.getAttribute("side"), e === "rtl" ? "rtl" : "ltr"), r = this.showClose, s = C(this, "header"), a = C(this, "footer"), o = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("description") || "").trim(), A = r || s || !!o || !!n, u = `ui-drawer-title-${this._uid}`, g = `ui-drawer-description-${this._uid}`, c = `ui-drawer-body-${this._uid}`, h = this.getAttribute("aria-label") || "", x = this.getAttribute("aria-labelledby") || "", p = this.getAttribute("aria-describedby") || "", m = s ? (this.querySelector('[slot="header"]')?.textContent || "").replace(/\s+/g, " ").trim() : "", w = !h && !x && !!m, b = x || (!h && !w && (s || o) ? u : ""), l = [];
+    p ? l.push(p) : (n && l.push(g), l.push(c));
+    const f = h || (w ? m : b ? "" : "Drawer"), d = this.state === "loading";
     this.setContent(`
-      <style>${O}</style>
+      <style>${D}</style>
       <div class="overlay" part="overlay" aria-hidden="true"></div>
-      <aside
+      <div
         class="panel side-${t}"
         part="panel"
         role="dialog"
         aria-modal="true"
-        ${c ? `aria-label="${v(c)}"` : ""}
-        ${g ? `aria-labelledby="${v(g)}"` : ""}
-        ${l.length ? `aria-describedby="${v(l.join(" "))}"` : ""}
+        ${f ? `aria-label="${y(f)}"` : ""}
+        ${b ? `aria-labelledby="${y(b)}"` : ""}
+        ${l.length ? `aria-describedby="${y(l.join(" "))}"` : ""}
         ${d ? 'aria-busy="true"' : ""}
         tabindex="-1"
       >
-        <header class="header ${y ? "" : "empty"}" part="header">
+        <header class="header ${A ? "" : "empty"}" part="header">
           <div class="header-main">
             ${s ? `<slot name="header" id="${u}"></slot>` : ""}
-            ${!s && o ? `<h2 class="title" id="${u}">${v(o)}</h2>` : ""}
-            ${n ? `<p class="subtitle" id="${h}">${v(n)}</p>` : ""}
+            ${!s && o ? `<h2 class="title" id="${u}">${y(o)}</h2>` : ""}
+            ${n ? `<p class="subtitle" id="${g}">${y(n)}</p>` : ""}
           </div>
           <button
             type="button"
@@ -955,9 +955,9 @@ class T extends I {
             </svg>
           </button>
         </header>
-        <div class="body" part="body" id="${p}"><slot></slot></div>
+        <div class="body" part="body" id="${c}"><slot></slot></div>
         <footer class="footer ${a ? "" : "empty"}" part="footer"><slot name="footer"></slot></footer>
-      </aside>
+      </div>
     `), this._syncLiveUi(), this._isOpen && this._scheduleEnsureFocusTrap();
   }
   _bindGlobalListeners() {
@@ -967,7 +967,7 @@ class T extends I {
     this._globalListenersBound && (document.removeEventListener("keydown", this._onDocumentKeyDown, !0), document.removeEventListener("focusin", this._onDocumentFocusIn, !0), this._globalListenersBound = !1);
   }
 }
-typeof customElements < "u" && !customElements.get("ui-drawer") && customElements.define("ui-drawer", T);
+typeof customElements < "u" && !customElements.get("ui-drawer") && customElements.define("ui-drawer", $);
 export {
-  T as UIDrawer
+  $ as UIDrawer
 };

package/dist/dropdown.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-EV6mVBUV.js"),y=require("./menu-item-styles-CbNUEwP2.js"),l=['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", "),k=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("./ElementBase-EV6mVBUV.js"),y=require("./trigger-DkPsKxsP.js"),k=require("./menu-item-styles-B4onAr4C.js"),l=['[role="menuitem"]','[role="menuitemcheckbox"]','[role="menuitemradio"]',".item","[data-menu-item]"].join(", "),A=`
   :host {
     --ui-dropdown-bg: var(
       --ui-dropdown-menu-bg,
@@ -243,7 +243,7 @@
   }
 
   .menu[data-tone='neutral'] {
-    --ui-dropdown-ring: color-mix(in srgb, var(--ui-color-muted, #64748b) 60%, var(--ui-dropdown-color));
+    --ui-dropdown-ring: color-mix(in srgb, var(--ui-color-muted, #526175) 60%, var(--ui-dropdown-color));
   }
 
   .menu[data-tone='danger'] {
@@ -254,20 +254,20 @@
   }
 
   .menu[data-tone='success'] {
-    --ui-dropdown-ring: var(--ui-color-success, #16a34a);
-    --ui-dropdown-item-hover-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 12%, transparent);
-    --ui-dropdown-item-active-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 18%, transparent);
-    --ui-dropdown-item-checked-bg: color-mix(in srgb, var(--ui-color-success, #16a34a) 16%, transparent);
+    --ui-dropdown-ring: var(--ui-color-success, #15803d);
+    --ui-dropdown-item-hover-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 12%, transparent);
+    --ui-dropdown-item-active-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 18%, transparent);
+    --ui-dropdown-item-checked-bg: color-mix(in srgb, var(--ui-color-success, #15803d) 16%, transparent);
   }
 
   .menu[data-tone='warning'] {
-    --ui-dropdown-ring: var(--ui-color-warning, #d97706);
-    --ui-dropdown-item-hover-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 15%, transparent);
-    --ui-dropdown-item-active-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 20%, transparent);
-    --ui-dropdown-item-checked-bg: color-mix(in srgb, var(--ui-color-warning, #d97706) 17%, transparent);
+    --ui-dropdown-ring: var(--ui-color-warning, #b45309);
+    --ui-dropdown-item-hover-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 15%, transparent);
+    --ui-dropdown-item-active-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 20%, transparent);
+    --ui-dropdown-item-checked-bg: color-mix(in srgb, var(--ui-color-warning, #b45309) 17%, transparent);
   }
 
-  ${y.createSharedMenuItemCss({scopes:[".menu"],prefix:"--ui-dropdown",shortcutSelectors:[".shortcut",".meta"],activeStateSelectors:['.item[data-active="true"]','[role="menuitem"][data-active="true"]','[role="menuitemcheckbox"][data-active="true"]','[role="menuitemradio"][data-active="true"]','[data-menu-item][data-active="true"]']})}
+  ${k.createSharedMenuItemCss({scopes:[".menu"],prefix:"--ui-dropdown",shortcutSelectors:[".shortcut",".meta"],activeStateSelectors:['.item[data-active="true"]','[role="menuitem"][data-active="true"]','[role="menuitemcheckbox"][data-active="true"]','[role="menuitemradio"][data-active="true"]','[data-menu-item][data-active="true"]']})}
 
   .menu [role='menuitem'],
   .menu [role='menuitemcheckbox'],
@@ -488,8 +488,8 @@
       color: HighlightText;
     }
   }
-`;function A(i){return i==="top"||i==="left"||i==="right"?i:"bottom"}function S(i){const e=(i||"").trim().toLowerCase();return e==="sm"||e==="1"||e==="compact"?"sm":e==="lg"||e==="3"||e==="comfortable"?"lg":"md"}function C(i){const e=(i||"").trim().toLowerCase();return!e||e==="default"?null:e==="none"?"0px":e==="sm"?"8px":e==="md"?"12px":e==="lg"||e==="large"?"16px":e==="full"||e==="pill"?"999px":e==="square"?"6px":e==="soft"||e==="rounded"?"14px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(e)?e:i}function h(i,e){return i.getAttribute(e)||""}function f(i,e){if(i==null)return e;const t=i.trim().toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function p(){return typeof window<"u"&&typeof document<"u"}function b(i){return i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true"||i.disabled===!0}function E(i){return(i.getAttribute("aria-label")||i.textContent||"").trim()}function g(i){if(i)try{i.focus({preventScroll:!0})}catch{i.focus()}}function I(i,e){const t=i.offsetTop,r=t+i.offsetHeight,o=e.scrollTop,a=o+e.clientHeight;if(t<o){e.scrollTop=t;return}r>a&&(e.scrollTop=Math.max(0,r-e.clientHeight))}function T(i){return w(i)}function w(i){if(i.nodeType===Node.TEXT_NODE)return document.createTextNode(i.textContent||"");if(!(i instanceof HTMLElement))return i.cloneNode(!1);const e=i.tagName==="UI-BOX",t=document.createElement(e?"div":i.tagName.toLowerCase());return Array.from(i.attributes).forEach(r=>{r.name!=="slot"&&t.setAttribute(r.name,r.value)}),Array.from(i.childNodes).forEach(r=>{t.appendChild(w(r))}),t}function M(i,e,t){for(let r=e+t;r>=0&&r<i.length;r+=t)if(!b(i[r]))return r;return-1}function O(i,e,t){if(!e)return null;const r=i.filter(a=>!b(a));if(!r.length)return null;const o=t?r.indexOf(t):-1;for(let a=1;a<=r.length;a+=1){const n=r[(o+a+r.length)%r.length];if(E(n).toLowerCase().startsWith(e))return n}return null}const P=new Set(["variant","density","shape","elevation","tone","size","radius"]),D=new Set(["aria-label","aria-labelledby","aria-describedby"]),F=["--ui-dropdown-bg","--ui-dropdown-color","--ui-dropdown-muted","--ui-dropdown-border-color","--ui-dropdown-border","--ui-dropdown-shadow","--ui-dropdown-radius","--ui-dropdown-padding","--ui-dropdown-min-width","--ui-dropdown-gap","--ui-dropdown-ring","--ui-dropdown-backdrop","--ui-dropdown-item-radius","--ui-dropdown-item-font-weight","--ui-dropdown-item-hover-bg","--ui-dropdown-item-active-bg","--ui-dropdown-item-checked-bg","--ui-dropdown-item-active-color","--ui-dropdown-duration","--ui-dropdown-easing"];class _ extends x.ElementBase{constructor(){super(),this._isOpen=!1,this._panelEl=null,this._portalEl=null,this._restoreFocusEl=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._placement="bottom",this._openListenersBound=!1,this._openFrame=0,this._checkboxState=new Map,this._radioState=new Map,this._menuId=`ui-dropdown-menu-${Math.random().toString(36).slice(2,10)}`,this._triggerId=`ui-dropdown-trigger-${Math.random().toString(36).slice(2,10)}`,this._onHostClick=this._onHostClick.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","disabled","placement","variant","size","density","radius","shape","elevation","tone","close-on-select","close-on-scroll","typeahead","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this.addEventListener("keydown",this._onHostKeyDown),this.root.addEventListener("slotchange",this._onSlotChange),this._syncOpenState(),this._syncTriggerA11y()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this.removeEventListener("keydown",this._onHostKeyDown),this.root.removeEventListener("slotchange",this._onSlotChange),this._teardownOpenListeners(),this._openFrame&&cancelAnimationFrame(this._openFrame),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}if(!(e==="close-on-select"||e==="close-on-scroll"||e==="typeahead")){if(e==="disabled"){this.hasAttribute("disabled")&&this._isOpen&&this.close("disabled"),this._syncTriggerA11y();return}if(this._isOpen&&(e==="placement"||P.has(e))){this._syncMenuPresentation(),this._schedulePanelSync();return}this._isOpen&&D.has(e)&&this._syncMenuA11y()}}}open(){this.hasAttribute("disabled")||this.hasAttribute("open")||this.setAttribute("open","")}close(e="programmatic"){!this.hasAttribute("open")&&!this._isOpen||this._close(e)}closeDropdown(e="programmatic"){if(!(!this.hasAttribute("open")&&!this._isOpen)){if(e==="programmatic"){this.close(e);return}this._requestClose(e)}}toggle(){if(this._isOpen){this._requestClose("trigger");return}this.open()}get closeOnSelect(){return f(this.getAttribute("close-on-select"),!0)}set closeOnSelect(e){this.setAttribute("close-on-select",e?"true":"false")}get closeOnScroll(){return f(this.getAttribute("close-on-scroll"),!0)}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get typeahead(){return f(this.getAttribute("typeahead"),!0)}set typeahead(e){this.setAttribute("typeahead",e?"true":"false")}_getTrigger(){return this.querySelector('[slot="trigger"]')}_getContentSource(){return this.querySelector('[slot="content"]')}_getMenu(){return this._portalEl}_isFocusable(e){if(!e||!e.isConnected||e.disabled||e.getAttribute("aria-hidden")==="true")return!1;if(!p())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_currentFocusedItem(){const e=this.root.activeElement||document.activeElement;return e instanceof HTMLElement?e.closest(l):null}_queryItems(e=!0){const t=this._getMenu();if(!t)return[];const r=Array.from(t.querySelectorAll(l));return e?r:r.filter(o=>!b(o))}_requestClose(e){if(!this._isOpen)return;const t=new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t);const r=new CustomEvent("ui-request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r),!(t.defaultPrevented||r.defaultPrevented)&&this.close(e)}_close(e,t={}){if(this._openFrame&&cancelAnimationFrame(this._openFrame),this._openFrame=0,this._isOpen=!1,this._teardownOpenListeners(),this.hasAttribute("open")&&this.removeAttribute("open"),this._syncControlState(),this._syncTriggerA11y(),this._clearActiveItem(),this._clearMenuContent(),this._resetTypeahead(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:e}})),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:e}})),t.restoreFocus!==!1){const r=this._getTrigger();r&&this._isFocusable(r)?g(r):this._restoreFocusEl&&this._isFocusable(this._restoreFocusEl)&&g(this._restoreFocusEl)}this._restoreFocusEl=null}_syncOpenState(){const e=this.hasAttribute("open")&&!this.hasAttribute("disabled");if(e===this._isOpen){this._syncControlState(),this._syncTriggerA11y(),e&&(this._syncMenuPresentation(),this._syncMenuA11y(),this._schedulePanelSync());return}if(e){this._isOpen=!0,this._restoreFocusEl=document.activeElement,this._renderMenuContent(),this._syncMenuPresentation(),this._syncMenuA11y(),this._syncControlState(),this._syncTriggerA11y(),this._attachOpenListeners(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}})),this._schedulePanelSync("first");return}this._close("programmatic",{restoreFocus:!1})}_attachOpenListeners(){this._openListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),this._openListenersBound=!0)}_teardownOpenListeners(){this._openListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),this._openListenersBound=!1)}_syncTriggerA11y(){const e=this._getTrigger();if(e){if(e.id||(e.id=this._triggerId),e.setAttribute("aria-haspopup","menu"),e.setAttribute("aria-expanded",this._isOpen?"true":"false"),this._isOpen?e.setAttribute("aria-controls",this._menuId):e.removeAttribute("aria-controls"),this.hasAttribute("disabled")){e.setAttribute("aria-disabled","true"),e.setAttribute("tabindex","-1");return}e.getAttribute("aria-disabled")==="true"&&e.removeAttribute("aria-disabled"),e.getAttribute("tabindex")==="-1"&&e.removeAttribute("tabindex")}}_renderMenuContent(){const e=this._getMenu();if(!e)return;e.replaceChildren();const t=this._getContentSource();if(t&&e.appendChild(T(t)),!e.querySelector(l)){const r=document.createElement("div");r.className="empty-state",r.textContent="No items",e.appendChild(r)}this._syncMenuItemSemantics()}_syncMenuItemSemantics(){this._queryItems(!0).forEach((e,t)=>{e.getAttribute("role")||e.setAttribute("role","menuitem"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","-1"),e.dataset.sourceIndex=String(t),e.hasAttribute("disabled")&&e.getAttribute("aria-disabled")!=="true"&&e.setAttribute("aria-disabled","true");const r=e.getAttribute("role");(r==="menuitemcheckbox"||r==="menuitemradio")&&!e.hasAttribute("aria-checked")&&e.setAttribute("aria-checked","false"),this._applyStoredItemState(e,t)})}_clearMenuContent(){const e=this._getMenu();e&&e.replaceChildren()}_applyStoredItemState(e,t){const r=e.getAttribute("role");if(r==="menuitemcheckbox"){if(!this._checkboxState.has(t))return;const n=this._checkboxState.get(t)===!0;e.setAttribute("aria-checked",n?"true":"false"),e.setAttribute("data-state",n?"checked":"unchecked");return}if(r!=="menuitemradio")return;const o=e.getAttribute("data-group")||e.getAttribute("name")||"__default__";if(!this._radioState.has(o))return;const a=this._radioState.get(o)===t;e.setAttribute("aria-checked",a?"true":"false"),e.setAttribute("data-state",a?"checked":"unchecked")}_syncMenuPresentation(){const e=this._getMenu();if(!e)return;const t=p()?window.getComputedStyle(this):null;t&&F.forEach(c=>{const m=t.getPropertyValue(c).trim();m?e.style.setProperty(c,m):e.style.removeProperty(c)});const r=h(this,"variant"),o=S(this.getAttribute("size")||this.getAttribute("density")),a=h(this,"density"),n=h(this,"shape"),u=h(this,"elevation"),s=h(this,"tone"),d=C(this.getAttribute("radius")||n||null);if(r&&r!=="default"?e.setAttribute("data-variant",r):e.removeAttribute("data-variant"),o!=="md"?e.setAttribute("data-size",o):e.removeAttribute("data-size"),a&&a!=="default"?e.setAttribute("data-density",a):e.removeAttribute("data-density"),n&&n!=="default"?e.setAttribute("data-shape",n):e.removeAttribute("data-shape"),u&&u!=="default"?e.setAttribute("data-elevation",u):e.removeAttribute("data-elevation"),s&&s!=="default"&&s!=="brand"?e.setAttribute("data-tone",s):e.removeAttribute("data-tone"),d){e.style.setProperty("--ui-dropdown-radius",d),e.style.setProperty("--ui-dropdown-item-radius",d==="999px"?"999px":`max(0px, calc(${d} - 2px))`);return}e.style.removeProperty("--ui-dropdown-radius"),e.style.removeProperty("--ui-dropdown-item-radius")}_syncMenuA11y(){const e=this._getMenu();if(!e)return;const t=this._getTrigger(),r=this.getAttribute("aria-label")||"",o=this.getAttribute("aria-labelledby")||"",a=this.getAttribute("aria-describedby")||"",n=o||(!r&&t?.id?t.id:"");r?e.setAttribute("aria-label",r):e.removeAttribute("aria-label"),n?e.setAttribute("aria-labelledby",n):e.removeAttribute("aria-labelledby"),a?e.setAttribute("aria-describedby",a):e.removeAttribute("aria-describedby")}_syncControlState(){const e=this._panelEl,t=this._getMenu();!e||!t||(e.hidden=!this._isOpen,e.setAttribute("data-placement",this._placement))}_schedulePanelSync(e){this._openFrame&&cancelAnimationFrame(this._openFrame),this._openFrame=requestAnimationFrame(()=>{this._openFrame=0,this._syncPanelState(),e==="first"&&this._focusFirstItem(),e==="last"&&this._focusLastItem()})}_syncPanelState(){const e=this._panelEl;!e||!this._isOpen||(this._placement=this._resolvePlacement(),e.setAttribute("data-placement",this._placement),this.style.setProperty("--ui-dropdown-available-width",`${Math.max(0,Math.floor(this._availableWidth(this._placement)))}px`),this.style.setProperty("--ui-dropdown-available-height",`${Math.max(0,Math.floor(this._availableHeight(this._placement)))}px`))}_availableWidth(e){const t=this._getTrigger();if(!t||!p())return 380;const r=t.getBoundingClientRect(),o=window.innerWidth||document.documentElement.clientWidth||0;return e==="left"?r.left-12:e==="right"?o-r.right-12:o-r.left-12}_availableHeight(e){const t=this._getTrigger();if(!t||!p())return 440;const r=t.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight||0;return e==="top"?r.top-12:o-r.bottom-12}_resolvePlacement(){const e=A(this.getAttribute("placement")),t=this._getTrigger(),r=this._getMenu();if(!t||!r||!p())return e;const o=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth||0,n=window.innerHeight||document.documentElement.clientHeight||0,u=Math.max(0,n-o.bottom-12),s=Math.max(0,o.top-12),d=Math.max(0,a-o.right-12),c=Math.max(0,o.left-12),m=Math.min(Math.max(r.scrollHeight,r.offsetHeight)+4,320),v=Math.min(Math.max(r.scrollWidth,r.offsetWidth)+4,360);return e==="top"?s>=m||s>u?"top":"bottom":e==="left"?c>=v||c>d?"left":"right":e==="right"?d>=v||d>=c?"right":"left":u>=m||u>=s?"bottom":"top"}_clearActiveItem(){this._queryItems(!0).forEach(e=>e.removeAttribute("data-active"))}_setActiveItem(e,t={}){if(this._clearActiveItem(),!!e&&(e.setAttribute("data-active","true"),t.focus&&g(e),t.scroll)){const r=this._getMenu();r&&I(e,r)}}_focusFirstItem(){const e=this._queryItems(!1);this._setActiveItem(e[0]||null,{focus:!0,scroll:!0})}_focusLastItem(){const e=this._queryItems(!1);this._setActiveItem(e[e.length-1]||null,{focus:!0,scroll:!0})}_moveFocus(e){const t=this._queryItems(!0);if(!t.length)return;const r=this._currentFocusedItem()||this._queryItems(!0).find(n=>n.getAttribute("data-active")==="true")||null,o=r?t.indexOf(r):e>0?-1:t.length,a=M(t,o,e);if(a>=0){this._setActiveItem(t[a],{focus:!0,scroll:!0});return}e>0?this._focusFirstItem():this._focusLastItem()}_resetTypeahead(){this._typeaheadBuffer="",this._typeaheadTimer!=null&&(window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null)}_isTypeaheadKey(e){return e.ctrlKey||e.metaKey||e.altKey?!1:e.key.length===1&&/\S/.test(e.key)}_handleTypeahead(e){if(!this.typeahead||!this._isTypeaheadKey(e))return!1;const t=e.key.toLowerCase();this._typeaheadBuffer=`${this._typeaheadBuffer}${t}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>this._resetTypeahead(),460);const r=O(this._queryItems(!0),this._typeaheadBuffer,this._currentFocusedItem());return r?(this._setActiveItem(r,{focus:!0,scroll:!0}),e.preventDefault(),!0):!1}_querySourceItems(){const e=this._getContentSource();return e?Array.from(e.querySelectorAll(l)):[]}_applySelectionBehavior(e){const t=e.getAttribute("role"),r=Number(e.dataset.sourceIndex||"-1");if(t==="menuitemcheckbox"){const n=e.getAttribute("aria-checked")!=="true";e.setAttribute("aria-checked",n?"true":"false"),e.setAttribute("data-state",n?"checked":"unchecked"),r>=0&&this._checkboxState.set(r,n);return}if(t!=="menuitemradio")return;const a=e.getAttribute("data-group")||e.getAttribute("name")||""||"__default__";r>=0&&this._radioState.set(a,r),this._queryItems(!0).filter(n=>n.getAttribute("role")==="menuitemradio").forEach(n=>{if((n.getAttribute("data-group")||n.getAttribute("name")||""||"__default__")!==a)return;const s=n===e;n.setAttribute("aria-checked",s?"true":"false"),n.setAttribute("data-state",s?"checked":"unchecked")})}_findMenuItemFromEvent(e){const t=typeof e.composedPath=="function"?e.composedPath():[];for(const o of t)if(o instanceof HTMLElement&&o.matches(l))return o;const r=e.target;return r instanceof HTMLElement?r.closest(l):null}_isEventInsideTrigger(e){const t=this._getTrigger();return t?(typeof e.composedPath=="function"?e.composedPath():[]).includes(t):!1}_emitSelect(e){const t={value:e.getAttribute("data-value")||e.getAttribute("value")||void 0,label:e.getAttribute("aria-label")||e.textContent?.trim()||void 0,checked:e.getAttribute("aria-checked")==="true",item:e};this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:t}))}_onHostClick(e){if(this.hasAttribute("disabled"))return;const t=this._isOpen?this._findMenuItemFromEvent(e):null;if(t&&this._getMenu()?.contains(t)&&!b(t)){this._applySelectionBehavior(t),this._setActiveItem(t,{focus:!0,scroll:!0}),this._emitSelect(t),this.closeOnSelect&&this._requestClose("select");return}if(this._isEventInsideTrigger(e)){if(e.preventDefault(),this._isOpen){this._requestClose("trigger");return}this.open()}}_onHostKeyDown(e){if(!this._isOpen){if(!this._isEventInsideTrigger(e)||!["ArrowDown","ArrowUp","Enter"," "].includes(e.key))return;e.preventDefault(),this.open(),this._schedulePanelSync(e.key==="ArrowUp"?"last":"first");return}if(!this._handleTypeahead(e)){if(e.key==="Escape"){e.preventDefault(),this._requestClose("escape");return}if(e.key==="ArrowDown"){e.preventDefault(),this._moveFocus(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this._moveFocus(-1);return}if(e.key==="Home"){e.preventDefault(),this._focusFirstItem();return}if(e.key==="End"){e.preventDefault(),this._focusLastItem();return}if(e.key==="Tab"){this._requestClose("tab");return}if(e.key==="Enter"||e.key===" "){const t=this._currentFocusedItem();if(!t||!this._getMenu()?.contains(t)||b(t))return;e.preventDefault(),t.click()}}}_onDocumentPointerDown(e){!this._isOpen||(typeof e.composedPath=="function"?e.composedPath():[]).includes(this)||this._requestClose("outside")}_onSlotChange(){this._syncTriggerA11y(),this._isOpen&&(this._renderMenuContent(),this._syncMenuPresentation(),this._syncMenuA11y(),this._schedulePanelSync())}render(){this.setContent(`
-      <style>${k}</style>
+`;function S(i){return i==="top"||i==="left"||i==="right"?i:"bottom"}function C(i){const e=(i||"").trim().toLowerCase();return e==="sm"||e==="1"||e==="compact"?"sm":e==="lg"||e==="3"||e==="comfortable"?"lg":"md"}function E(i){const e=(i||"").trim().toLowerCase();return!e||e==="default"?null:e==="none"?"0px":e==="sm"?"8px":e==="md"?"12px":e==="lg"||e==="large"?"16px":e==="full"||e==="pill"?"999px":e==="square"?"6px":e==="soft"||e==="rounded"?"14px":/^\d+(\.\d+)?$/.test(e)?`${e}px`:/^\d+(\.\d+)?(px|rem|em|%)$/.test(e)?e:i}function p(i,e){return i.getAttribute(e)||""}function f(i,e){if(i==null)return e;const t=i.trim().toLowerCase();return t!=="false"&&t!=="0"&&t!=="off"}function h(){return typeof window<"u"&&typeof document<"u"}function b(i){return i.hasAttribute("disabled")||i.getAttribute("aria-disabled")==="true"||i.disabled===!0}function I(i){return(i.getAttribute("aria-label")||i.textContent||"").trim()}function g(i){if(i)try{i.focus({preventScroll:!0})}catch{i.focus()}}function T(i,e){const t=i.offsetTop,r=t+i.offsetHeight,o=e.scrollTop,a=o+e.clientHeight;if(t<o){e.scrollTop=t;return}r>a&&(e.scrollTop=Math.max(0,r-e.clientHeight))}function M(i){return w(i)}function w(i){if(i.nodeType===Node.TEXT_NODE)return document.createTextNode(i.textContent||"");if(!(i instanceof HTMLElement))return i.cloneNode(!1);const e=i.tagName==="UI-BOX",t=document.createElement(e?"div":i.tagName.toLowerCase());return Array.from(i.attributes).forEach(r=>{r.name!=="slot"&&t.setAttribute(r.name,r.value)}),Array.from(i.childNodes).forEach(r=>{t.appendChild(w(r))}),t}function O(i,e,t){for(let r=e+t;r>=0&&r<i.length;r+=t)if(!b(i[r]))return r;return-1}function P(i,e,t){if(!e)return null;const r=i.filter(a=>!b(a));if(!r.length)return null;const o=t?r.indexOf(t):-1;for(let a=1;a<=r.length;a+=1){const n=r[(o+a+r.length)%r.length];if(I(n).toLowerCase().startsWith(e))return n}return null}const D=new Set(["variant","density","shape","elevation","tone","size","radius"]),F=new Set(["aria-label","aria-labelledby","aria-describedby"]),L=["--ui-dropdown-bg","--ui-dropdown-color","--ui-dropdown-muted","--ui-dropdown-border-color","--ui-dropdown-border","--ui-dropdown-shadow","--ui-dropdown-radius","--ui-dropdown-padding","--ui-dropdown-min-width","--ui-dropdown-gap","--ui-dropdown-ring","--ui-dropdown-backdrop","--ui-dropdown-item-radius","--ui-dropdown-item-font-weight","--ui-dropdown-item-hover-bg","--ui-dropdown-item-active-bg","--ui-dropdown-item-checked-bg","--ui-dropdown-item-active-color","--ui-dropdown-duration","--ui-dropdown-easing"];class _ extends x.ElementBase{constructor(){super(),this._isOpen=!1,this._panelEl=null,this._portalEl=null,this._restoreFocusEl=null,this._typeaheadBuffer="",this._typeaheadTimer=null,this._placement="bottom",this._openListenersBound=!1,this._openFrame=0,this._checkboxState=new Map,this._radioState=new Map,this._menuId=`ui-dropdown-menu-${Math.random().toString(36).slice(2,10)}`,this._triggerId=`ui-dropdown-trigger-${Math.random().toString(36).slice(2,10)}`,this._onHostClick=this._onHostClick.bind(this),this._onHostKeyDown=this._onHostKeyDown.bind(this),this._onDocumentPointerDown=this._onDocumentPointerDown.bind(this),this._onSlotChange=this._onSlotChange.bind(this)}static get observedAttributes(){return["open","disabled","placement","variant","size","density","radius","shape","elevation","tone","close-on-select","close-on-scroll","typeahead","aria-label","aria-labelledby","aria-describedby"]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._onHostClick),this.addEventListener("keydown",this._onHostKeyDown),this.root.addEventListener("slotchange",this._onSlotChange),this._syncOpenState(),this._syncTriggerA11y()}disconnectedCallback(){this.removeEventListener("click",this._onHostClick),this.removeEventListener("keydown",this._onHostKeyDown),this.root.removeEventListener("slotchange",this._onSlotChange),this._teardownOpenListeners(),this._openFrame&&cancelAnimationFrame(this._openFrame),super.disconnectedCallback()}attributeChangedCallback(e,t,r){if(t!==r){if(e==="open"){this._syncOpenState();return}if(!(e==="close-on-select"||e==="close-on-scroll"||e==="typeahead")){if(e==="disabled"){this.hasAttribute("disabled")&&this._isOpen&&this.close("disabled"),this._syncTriggerA11y();return}if(this._isOpen&&(e==="placement"||D.has(e))){this._syncMenuPresentation(),this._schedulePanelSync();return}this._isOpen&&F.has(e)&&this._syncMenuA11y()}}}open(){this.hasAttribute("disabled")||this.hasAttribute("open")||this.setAttribute("open","")}close(e="programmatic"){!this.hasAttribute("open")&&!this._isOpen||this._close(e)}closeDropdown(e="programmatic"){if(!(!this.hasAttribute("open")&&!this._isOpen)){if(e==="programmatic"){this.close(e);return}this._requestClose(e)}}toggle(){if(this._isOpen){this._requestClose("trigger");return}this.open()}get closeOnSelect(){return f(this.getAttribute("close-on-select"),!0)}set closeOnSelect(e){this.setAttribute("close-on-select",e?"true":"false")}get closeOnScroll(){return f(this.getAttribute("close-on-scroll"),!0)}set closeOnScroll(e){this.setAttribute("close-on-scroll",e?"true":"false")}get typeahead(){return f(this.getAttribute("typeahead"),!0)}set typeahead(e){this.setAttribute("typeahead",e?"true":"false")}_getTrigger(){return this.querySelector('[slot="trigger"]')}_getContentSource(){return this.querySelector('[slot="content"]')}_getMenu(){return this._portalEl}_isFocusable(e){if(!e||!e.isConnected||e.disabled||e.getAttribute("aria-hidden")==="true")return!1;if(!h())return!0;const t=window.getComputedStyle(e);return t.display!=="none"&&t.visibility!=="hidden"}_currentFocusedItem(){const e=this.root.activeElement||document.activeElement;return e instanceof HTMLElement?e.closest(l):null}_queryItems(e=!0){const t=this._getMenu();if(!t)return[];const r=Array.from(t.querySelectorAll(l));return e?r:r.filter(o=>!b(o))}_requestClose(e){if(!this._isOpen)return;const t=new CustomEvent("request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(t);const r=new CustomEvent("ui-request-close",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});this.dispatchEvent(r),!(t.defaultPrevented||r.defaultPrevented)&&this.close(e)}_close(e,t={}){if(this._openFrame&&cancelAnimationFrame(this._openFrame),this._openFrame=0,this._isOpen=!1,this._teardownOpenListeners(),this.hasAttribute("open")&&this.removeAttribute("open"),this._syncControlState(),this._syncTriggerA11y(),this._clearActiveItem(),this._clearMenuContent(),this._resetTypeahead(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!1,reason:e}})),this.dispatchEvent(new CustomEvent("close",{bubbles:!0,composed:!0,detail:{reason:e}})),t.restoreFocus!==!1){const r=this._getTrigger();r&&this._isFocusable(r)?g(r):this._restoreFocusEl&&this._isFocusable(this._restoreFocusEl)&&g(this._restoreFocusEl)}this._restoreFocusEl=null}_syncOpenState(){const e=this.hasAttribute("open")&&!this.hasAttribute("disabled");if(e===this._isOpen){this._syncControlState(),this._syncTriggerA11y(),e&&(this._syncMenuPresentation(),this._syncMenuA11y(),this._schedulePanelSync());return}if(e){this._isOpen=!0,this._restoreFocusEl=document.activeElement,this._renderMenuContent(),this._syncMenuPresentation(),this._syncMenuA11y(),this._syncControlState(),this._syncTriggerA11y(),this._attachOpenListeners(),this.dispatchEvent(new CustomEvent("open",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{open:!0}})),this._schedulePanelSync("first");return}this._close("programmatic",{restoreFocus:!1})}_attachOpenListeners(){this._openListenersBound||(document.addEventListener("pointerdown",this._onDocumentPointerDown,!0),this._openListenersBound=!0)}_teardownOpenListeners(){this._openListenersBound&&(document.removeEventListener("pointerdown",this._onDocumentPointerDown,!0),this._openListenersBound=!1)}_syncTriggerA11y(){const e=this._getTrigger();if(!e)return;const t=y.resolveTriggerControl(e);if(t.id||(t.id=this._triggerId),t.setAttribute("aria-haspopup","menu"),t.setAttribute("aria-expanded",this._isOpen?"true":"false"),this._isOpen?t.setAttribute("aria-controls",this._menuId):t.removeAttribute("aria-controls"),this.hasAttribute("disabled")){t.setAttribute("aria-disabled","true"),t.setAttribute("tabindex","-1");return}t.getAttribute("aria-disabled")==="true"&&t.removeAttribute("aria-disabled"),t.getAttribute("tabindex")==="-1"&&t.removeAttribute("tabindex")}_renderMenuContent(){const e=this._getMenu();if(!e)return;e.replaceChildren();const t=this._getContentSource();if(t&&e.appendChild(M(t)),!e.querySelector(l)){const r=document.createElement("div");r.className="empty-state",r.textContent="No items",e.appendChild(r)}this._syncMenuItemSemantics()}_syncMenuItemSemantics(){this._queryItems(!0).forEach((e,t)=>{e.getAttribute("role")||e.setAttribute("role","menuitem"),e.hasAttribute("tabindex")||e.setAttribute("tabindex","-1"),e.dataset.sourceIndex=String(t),e.hasAttribute("disabled")&&e.getAttribute("aria-disabled")!=="true"&&e.setAttribute("aria-disabled","true");const r=e.getAttribute("role");(r==="menuitemcheckbox"||r==="menuitemradio")&&!e.hasAttribute("aria-checked")&&e.setAttribute("aria-checked","false"),this._applyStoredItemState(e,t)})}_clearMenuContent(){const e=this._getMenu();e&&e.replaceChildren()}_applyStoredItemState(e,t){const r=e.getAttribute("role");if(r==="menuitemcheckbox"){if(!this._checkboxState.has(t))return;const n=this._checkboxState.get(t)===!0;e.setAttribute("aria-checked",n?"true":"false"),e.setAttribute("data-state",n?"checked":"unchecked");return}if(r!=="menuitemradio")return;const o=e.getAttribute("data-group")||e.getAttribute("name")||"__default__";if(!this._radioState.has(o))return;const a=this._radioState.get(o)===t;e.setAttribute("aria-checked",a?"true":"false"),e.setAttribute("data-state",a?"checked":"unchecked")}_syncMenuPresentation(){const e=this._getMenu();if(!e)return;const t=h()?window.getComputedStyle(this):null;t&&L.forEach(c=>{const m=t.getPropertyValue(c).trim();m?e.style.setProperty(c,m):e.style.removeProperty(c)});const r=p(this,"variant"),o=C(this.getAttribute("size")||this.getAttribute("density")),a=p(this,"density"),n=p(this,"shape"),u=p(this,"elevation"),s=p(this,"tone"),d=E(this.getAttribute("radius")||n||null);if(r&&r!=="default"?e.setAttribute("data-variant",r):e.removeAttribute("data-variant"),o!=="md"?e.setAttribute("data-size",o):e.removeAttribute("data-size"),a&&a!=="default"?e.setAttribute("data-density",a):e.removeAttribute("data-density"),n&&n!=="default"?e.setAttribute("data-shape",n):e.removeAttribute("data-shape"),u&&u!=="default"?e.setAttribute("data-elevation",u):e.removeAttribute("data-elevation"),s&&s!=="default"&&s!=="brand"?e.setAttribute("data-tone",s):e.removeAttribute("data-tone"),d){e.style.setProperty("--ui-dropdown-radius",d),e.style.setProperty("--ui-dropdown-item-radius",d==="999px"?"999px":`max(0px, calc(${d} - 2px))`);return}e.style.removeProperty("--ui-dropdown-radius"),e.style.removeProperty("--ui-dropdown-item-radius")}_syncMenuA11y(){const e=this._getMenu();if(!e)return;const t=this._getTrigger(),r=this.getAttribute("aria-label")||"",o=this.getAttribute("aria-labelledby")||"",a=this.getAttribute("aria-describedby")||"",n=o||(!r&&t?.id?t.id:"");r?e.setAttribute("aria-label",r):e.removeAttribute("aria-label"),n?e.setAttribute("aria-labelledby",n):e.removeAttribute("aria-labelledby"),a?e.setAttribute("aria-describedby",a):e.removeAttribute("aria-describedby")}_syncControlState(){const e=this._panelEl,t=this._getMenu();!e||!t||(e.hidden=!this._isOpen,e.setAttribute("data-placement",this._placement))}_schedulePanelSync(e){this._openFrame&&cancelAnimationFrame(this._openFrame),this._openFrame=requestAnimationFrame(()=>{this._openFrame=0,this._syncPanelState(),e==="first"&&this._focusFirstItem(),e==="last"&&this._focusLastItem()})}_syncPanelState(){const e=this._panelEl;!e||!this._isOpen||(this._placement=this._resolvePlacement(),e.setAttribute("data-placement",this._placement),this.style.setProperty("--ui-dropdown-available-width",`${Math.max(0,Math.floor(this._availableWidth(this._placement)))}px`),this.style.setProperty("--ui-dropdown-available-height",`${Math.max(0,Math.floor(this._availableHeight(this._placement)))}px`))}_availableWidth(e){const t=this._getTrigger();if(!t||!h())return 380;const r=t.getBoundingClientRect(),o=window.innerWidth||document.documentElement.clientWidth||0;return e==="left"?r.left-12:e==="right"?o-r.right-12:o-r.left-12}_availableHeight(e){const t=this._getTrigger();if(!t||!h())return 440;const r=t.getBoundingClientRect(),o=window.innerHeight||document.documentElement.clientHeight||0;return e==="top"?r.top-12:o-r.bottom-12}_resolvePlacement(){const e=S(this.getAttribute("placement")),t=this._getTrigger(),r=this._getMenu();if(!t||!r||!h())return e;const o=t.getBoundingClientRect(),a=window.innerWidth||document.documentElement.clientWidth||0,n=window.innerHeight||document.documentElement.clientHeight||0,u=Math.max(0,n-o.bottom-12),s=Math.max(0,o.top-12),d=Math.max(0,a-o.right-12),c=Math.max(0,o.left-12),m=Math.min(Math.max(r.scrollHeight,r.offsetHeight)+4,320),v=Math.min(Math.max(r.scrollWidth,r.offsetWidth)+4,360);return e==="top"?s>=m||s>u?"top":"bottom":e==="left"?c>=v||c>d?"left":"right":e==="right"?d>=v||d>=c?"right":"left":u>=m||u>=s?"bottom":"top"}_clearActiveItem(){this._queryItems(!0).forEach(e=>e.removeAttribute("data-active"))}_setActiveItem(e,t={}){if(this._clearActiveItem(),!!e&&(e.setAttribute("data-active","true"),t.focus&&g(e),t.scroll)){const r=this._getMenu();r&&T(e,r)}}_focusFirstItem(){const e=this._queryItems(!1);this._setActiveItem(e[0]||null,{focus:!0,scroll:!0})}_focusLastItem(){const e=this._queryItems(!1);this._setActiveItem(e[e.length-1]||null,{focus:!0,scroll:!0})}_moveFocus(e){const t=this._queryItems(!0);if(!t.length)return;const r=this._currentFocusedItem()||this._queryItems(!0).find(n=>n.getAttribute("data-active")==="true")||null,o=r?t.indexOf(r):e>0?-1:t.length,a=O(t,o,e);if(a>=0){this._setActiveItem(t[a],{focus:!0,scroll:!0});return}e>0?this._focusFirstItem():this._focusLastItem()}_resetTypeahead(){this._typeaheadBuffer="",this._typeaheadTimer!=null&&(window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=null)}_isTypeaheadKey(e){return e.ctrlKey||e.metaKey||e.altKey?!1:e.key.length===1&&/\S/.test(e.key)}_handleTypeahead(e){if(!this.typeahead||!this._isTypeaheadKey(e))return!1;const t=e.key.toLowerCase();this._typeaheadBuffer=`${this._typeaheadBuffer}${t}`.slice(0,24),this._typeaheadTimer!=null&&window.clearTimeout(this._typeaheadTimer),this._typeaheadTimer=window.setTimeout(()=>this._resetTypeahead(),460);const r=P(this._queryItems(!0),this._typeaheadBuffer,this._currentFocusedItem());return r?(this._setActiveItem(r,{focus:!0,scroll:!0}),e.preventDefault(),!0):!1}_querySourceItems(){const e=this._getContentSource();return e?Array.from(e.querySelectorAll(l)):[]}_applySelectionBehavior(e){const t=e.getAttribute("role"),r=Number(e.dataset.sourceIndex||"-1");if(t==="menuitemcheckbox"){const n=e.getAttribute("aria-checked")!=="true";e.setAttribute("aria-checked",n?"true":"false"),e.setAttribute("data-state",n?"checked":"unchecked"),r>=0&&this._checkboxState.set(r,n);return}if(t!=="menuitemradio")return;const a=e.getAttribute("data-group")||e.getAttribute("name")||""||"__default__";r>=0&&this._radioState.set(a,r),this._queryItems(!0).filter(n=>n.getAttribute("role")==="menuitemradio").forEach(n=>{if((n.getAttribute("data-group")||n.getAttribute("name")||""||"__default__")!==a)return;const s=n===e;n.setAttribute("aria-checked",s?"true":"false"),n.setAttribute("data-state",s?"checked":"unchecked")})}_findMenuItemFromEvent(e){const t=typeof e.composedPath=="function"?e.composedPath():[];for(const o of t)if(o instanceof HTMLElement&&o.matches(l))return o;const r=e.target;return r instanceof HTMLElement?r.closest(l):null}_isEventInsideTrigger(e){const t=this._getTrigger();return t?(typeof e.composedPath=="function"?e.composedPath():[]).includes(t):!1}_emitSelect(e){const t={value:e.getAttribute("data-value")||e.getAttribute("value")||void 0,label:e.getAttribute("aria-label")||e.textContent?.trim()||void 0,checked:e.getAttribute("aria-checked")==="true",item:e};this.dispatchEvent(new CustomEvent("select",{bubbles:!0,composed:!0,detail:t}))}_onHostClick(e){if(this.hasAttribute("disabled"))return;const t=this._isOpen?this._findMenuItemFromEvent(e):null;if(t&&this._getMenu()?.contains(t)&&!b(t)){this._applySelectionBehavior(t),this._setActiveItem(t,{focus:!0,scroll:!0}),this._emitSelect(t),this.closeOnSelect&&this._requestClose("select");return}if(this._isEventInsideTrigger(e)){if(e.preventDefault(),this._isOpen){this._requestClose("trigger");return}this.open()}}_onHostKeyDown(e){if(!this._isOpen){if(!this._isEventInsideTrigger(e)||!["ArrowDown","ArrowUp","Enter"," "].includes(e.key))return;e.preventDefault(),this.open(),this._schedulePanelSync(e.key==="ArrowUp"?"last":"first");return}if(!this._handleTypeahead(e)){if(e.key==="Escape"){e.preventDefault(),this._requestClose("escape");return}if(e.key==="ArrowDown"){e.preventDefault(),this._moveFocus(1);return}if(e.key==="ArrowUp"){e.preventDefault(),this._moveFocus(-1);return}if(e.key==="Home"){e.preventDefault(),this._focusFirstItem();return}if(e.key==="End"){e.preventDefault(),this._focusLastItem();return}if(e.key==="Tab"){this._requestClose("tab");return}if(e.key==="Enter"||e.key===" "){const t=this._currentFocusedItem();if(!t||!this._getMenu()?.contains(t)||b(t))return;e.preventDefault(),t.click()}}}_onDocumentPointerDown(e){!this._isOpen||(typeof e.composedPath=="function"?e.composedPath():[]).includes(this)||this._requestClose("outside")}_onSlotChange(){this._syncTriggerA11y(),this._isOpen&&(this._renderMenuContent(),this._syncMenuPresentation(),this._syncMenuA11y(),this._schedulePanelSync())}render(){this.setContent(`
+      <style>${A}</style>
       <div class="root" part="root">
         <div class="trigger" part="trigger">
           <slot name="trigger"></slot>