luxen-ui 0.1.2 → 0.2.1

package/cdn/custom-elements.json

@@ -2048,7 +2048,7 @@
         {
           "kind": "variable",
           "name": "u",
-          "default": "class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e` <dialog part=\"dialog\" closedby=${this.lightDismiss&&c?`any`:t} > <header part=\"header\"> <h2 part=\"title\">${this.title}</h2> <slot name=\"close\"></slot> </header> <div part=\"body\"> <slot></slot> </div> <footer part=\"footer\"> <slot name=\"footer\"></slot> </footer> </dialog> `}}"
+          "default": "class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this.withoutHeader=!1,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e` <dialog part=\"dialog\" closedby=${this.lightDismiss&&c?`any`:t} > ${this.withoutHeader?t:e` <header part=\"header\"> <slot name=\"title\"> ${this.title?e`<h2 part=\"title\">${this.title}</h2>`:t} </slot> <slot name=\"close\"></slot> </header> `} <div part=\"body\"> <slot></slot> </div> <footer part=\"footer\"> <slot name=\"footer\"></slot> </footer> </dialog> `}}"
         }
       ],
       "exports": [
@@ -2294,7 +2294,7 @@
         {
           "kind": "variable",
           "name": "u",
-          "default": "class extends i{constructor(...t){super(...t),this._popoverId=e(`popover`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popoverEl,getArrowElement:()=>this._arrowEl,onPlacementChange:e=>{this.dataset.placement=e}}),this.#e=``,this.#t=`bottom`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=`click`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1)}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get trigger(){return this.#a}set trigger(e){this.#a=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popoverEl(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popoverEl;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-expanded`,`true`),this._trigger?.setAttribute(`aria-controls`,this._popoverId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.setAttribute(`aria-expanded`,`false`),this._trigger?.removeAttribute(`aria-controls`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n` <div id=${this._popoverId} popover=\"auto\" part=\"body\" @toggle=${this._onToggle} > ${this.withoutArrow?r:n` <i part=\"arrow\" role=\"presentation\" ></i> `} <slot></slot> </div> `}}"
+          "default": "class extends i{constructor(...t){super(...t),this._popoverId=e(`popover`),this._floating=new c(this,{getTriggerElement:()=>this._trigger,getFloatingElement:()=>this._popoverEl,getArrowElement:()=>this._arrowEl,onPlacementChange:e=>{this.dataset.placement=e}}),this.#e=``,this.#t=`bottom`,this.#n=8,this.#r=!1,this.#i=!1,this.#a=!1,this.#o=`click`,this._onPointerEnter=()=>{this._hasTrigger(`hover`)&&(this._floating.cleanupSafePolygon(),this.show())},this._onPointerLeave=e=>{!this._hasTrigger(`hover`)||!this.open||this._floating.handlePointerLeave(e,()=>this.hide())},this._onFocusIn=()=>{this._hasTrigger(`focus`)&&this.show()},this._onFocusOut=()=>{this._hasTrigger(`focus`)&&this.hide()},this._onClick=()=>{this._hasTrigger(`click`)&&this.toggle()},this._onKeyDown=e=>{this.open&&e.key===`Escape`&&(e.stopPropagation(),this.hide())},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1)}}static{this.styles=[s,l]}#e;get for(){return this.#e}set for(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get open(){return this.#r}set open(e){this.#r=e}#i;get withoutArrow(){return this.#i}set withoutArrow(e){this.#i=e}#a;get fullWidth(){return this.#a}set fullWidth(e){this.#a=e}#o;get trigger(){return this.#o}set trigger(e){this.#o=e}_hasTrigger(e){return this.trigger.split(` `).includes(e)}get _trigger(){return this.for?this.getRootNode().getElementById(this.for):null}get _popoverEl(){return this.shadowRoot.querySelector(`[popover]`)}get _arrowEl(){return this.withoutArrow?null:this.shadowRoot.querySelector(`i`)}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}connectedCallback(){super.connectedCallback(),requestAnimationFrame(()=>this._addTriggerListeners())}disconnectedCallback(){super.disconnectedCallback(),this._removeTriggerListeners()}updated(e){e.has(`open`)&&this._handleOpenChange(),e.has(`for`)&&(this._removeTriggerListeners(e.get(`for`)),this._addTriggerListeners())}show(){this.open||=!0}hide(){this.open&&=!1}toggle(){this.open=!this.open}async _handleOpenChange(){let e=this._popoverEl;if(!e)return;let t={placement:this.placement,distance:this.distance,fullWidth:this.fullWidth};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._trigger?.setAttribute(`aria-expanded`,`true`),this._trigger?.setAttribute(`aria-controls`,this._popoverId)}else this._floating.stopPositioning(),this._floating.cleanupSafePolygon(),this._trigger?.setAttribute(`aria-expanded`,`false`),this._trigger?.removeAttribute(`aria-controls`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover()}_addTriggerListeners(){this._floating.addTriggerListeners({onPointerEnter:this._onPointerEnter,onPointerLeave:this._onPointerLeave,onFocusIn:this._onFocusIn,onFocusOut:this._onFocusOut,onClick:this._onClick,onKeyDown:this._onKeyDown})}_removeTriggerListeners(e){let t=e?this.getRootNode().getElementById(e):void 0;this._floating.removeTriggerListeners(t)}render(){return n` <div id=${this._popoverId} popover=\"auto\" part=\"body\" @toggle=${this._onToggle} > ${this.withoutArrow?r:n` <i part=\"arrow\" role=\"presentation\" ></i> `} <slot></slot> </div> `}}"
         }
       ],
       "exports": [
@@ -2544,7 +2544,7 @@
         {
           "kind": "variable",
           "name": "Je",
-          "default": "class{constructor(e,t){this._currentPlacement=``,this._host=e,this._config=t,e.addController(this)}hostConnected(){}hostDisconnected(){this.stopPositioning(),this.cleanupSafePolygon(),this.removeTriggerListeners()}get currentPlacement(){return this._currentPlacement}async updatePosition(e){let t=this._config.getTriggerElement(),n=this._config.getFloatingElement(),r=this._config.getArrowElement();if(!t||!n)return;let i=[Re(e.distance),Be(),ze(),...r?[Ve({element:r,padding:8})]:[]],{x:a,y:o,placement:s,middlewareData:c}=await He(t,n,{placement:e.placement,strategy:`fixed`,middleware:i});if(Object.assign(n.style,{position:`fixed`,left:`${a}px`,top:`${o}px`}),s!==this._currentPlacement&&(this._currentPlacement=s,this._config.onPlacementChange?.(s)),c.arrow&&r){let{x:e,y:t}=c.arrow,n=Ke[s.split(`-`)[0]];Object.assign(r.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`,[n]:`${-r.offsetWidth/2}px`})}}startPositioning(e){let t=this._config.getTriggerElement(),n=this._config.getFloatingElement();!t||!n||(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=Le(t,n,()=>this.updatePosition(e)))}stopPositioning(){this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0}handlePointerLeave(e,t){let n=this._config.getFloatingElement(),r=this._config.getTriggerElement();if(!n||!r){t();return}let i=e.clientX,a=e.clientY,o=e=>{let{clientX:o,clientY:c}=e,l=[o,c],u=n.getBoundingClientRect(),d=r.getBoundingClientRect(),f=this._currentPlacement.split(`-`)[0];if(!We(l,u)&&!We(l,d)){if(f===`top`&&a>=d.bottom-1||f===`bottom`&&a<=d.top+1||f===`left`&&i>=d.right-1||f===`right`&&i<=d.left+1){s(),t();return}Ue(l,Ge(i,a,u,d,this._currentPlacement))||(s(),t())}},s=()=>{document.removeEventListener(`pointermove`,o)};document.addEventListener(`pointermove`,o),this._cleanupSafePolygon?.(),this._cleanupSafePolygon=s}cleanupSafePolygon(){this._cleanupSafePolygon?.(),this._cleanupSafePolygon=void 0}addTriggerListeners(e){let t=this._config.getTriggerElement();t&&(this._handlers=e,this._triggerElement=t,e.onPointerEnter&&t.addEventListener(`pointerenter`,e.onPointerEnter),e.onPointerLeave&&t.addEventListener(`pointerleave`,e.onPointerLeave),e.onFocusIn&&t.addEventListener(`focusin`,e.onFocusIn),e.onFocusOut&&t.addEventListener(`focusout`,e.onFocusOut),e.onClick&&t.addEventListener(`click`,e.onClick),e.onKeyDown&&t.addEventListener(`keydown`,e.onKeyDown))}removeTriggerListeners(e){let t=e??this._triggerElement,n=this._handlers;!t||!n||(n.onPointerEnter&&t.removeEventListener(`pointerenter`,n.onPointerEnter),n.onPointerLeave&&t.removeEventListener(`pointerleave`,n.onPointerLeave),n.onFocusIn&&t.removeEventListener(`focusin`,n.onFocusIn),n.onFocusOut&&t.removeEventListener(`focusout`,n.onFocusOut),n.onClick&&t.removeEventListener(`click`,n.onClick),n.onKeyDown&&t.removeEventListener(`keydown`,n.onKeyDown),e||(this._handlers=void 0,this._triggerElement=void 0))}async animateShow(e,t,n){let r=qe?.matches?0:t;e.getAnimations().forEach(e=>e.cancel()),e.animate(n??[{opacity:0,scale:.96},{opacity:1,scale:1}],{duration:r,fill:`forwards`})}async animateHide(e,t,n){let r=qe?.matches?0:t;await e.animate(n??[{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:r,fill:`forwards`}).finished}}"
+          "default": "class{constructor(e,t){this._currentPlacement=``,this._host=e,this._config=t,e.addController(this)}hostConnected(){}hostDisconnected(){this.stopPositioning(),this.cleanupSafePolygon(),this.removeTriggerListeners()}get currentPlacement(){return this._currentPlacement}async updatePosition(e){let t=this._config.getTriggerElement(),n=this._config.getFloatingElement(),r=this._config.getArrowElement();if(!t||!n)return;let i=[Re(e.distance),Be(),ze(),...r?[Ve({element:r,padding:8})]:[]],{x:a,y:o,placement:s,middlewareData:c}=await He(t,n,{placement:e.placement,strategy:`fixed`,middleware:i});if(Object.assign(n.style,{position:`fixed`,left:e.fullWidth?`0px`:`${a}px`,top:`${o}px`,width:e.fullWidth?`100vw`:``}),s!==this._currentPlacement&&(this._currentPlacement=s,this._config.onPlacementChange?.(s)),c.arrow&&r){let{x:e,y:t}=c.arrow,n=Ke[s.split(`-`)[0]];Object.assign(r.style,{left:e==null?``:`${e}px`,top:t==null?``:`${t}px`,[n]:`${-r.offsetWidth/2}px`})}}startPositioning(e){let t=this._config.getTriggerElement(),n=this._config.getFloatingElement();!t||!n||(this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=Le(t,n,()=>this.updatePosition(e)))}stopPositioning(){this._cleanupAutoUpdate?.(),this._cleanupAutoUpdate=void 0}handlePointerLeave(e,t){let n=this._config.getFloatingElement(),r=this._config.getTriggerElement();if(!n||!r){t();return}let i=e.clientX,a=e.clientY,o=e=>{let{clientX:o,clientY:c}=e,l=[o,c],u=n.getBoundingClientRect(),d=r.getBoundingClientRect(),f=this._currentPlacement.split(`-`)[0];if(!We(l,u)&&!We(l,d)){if(f===`top`&&a>=d.bottom-1||f===`bottom`&&a<=d.top+1||f===`left`&&i>=d.right-1||f===`right`&&i<=d.left+1){s(),t();return}Ue(l,Ge(i,a,u,d,this._currentPlacement))||(s(),t())}},s=()=>{document.removeEventListener(`pointermove`,o)};document.addEventListener(`pointermove`,o),this._cleanupSafePolygon?.(),this._cleanupSafePolygon=s}cleanupSafePolygon(){this._cleanupSafePolygon?.(),this._cleanupSafePolygon=void 0}addTriggerListeners(e){let t=this._config.getTriggerElement();t&&(this._handlers=e,this._triggerElement=t,e.onPointerEnter&&t.addEventListener(`pointerenter`,e.onPointerEnter),e.onPointerLeave&&t.addEventListener(`pointerleave`,e.onPointerLeave),e.onFocusIn&&t.addEventListener(`focusin`,e.onFocusIn),e.onFocusOut&&t.addEventListener(`focusout`,e.onFocusOut),e.onClick&&t.addEventListener(`click`,e.onClick),e.onKeyDown&&t.addEventListener(`keydown`,e.onKeyDown))}removeTriggerListeners(e){let t=e??this._triggerElement,n=this._handlers;!t||!n||(n.onPointerEnter&&t.removeEventListener(`pointerenter`,n.onPointerEnter),n.onPointerLeave&&t.removeEventListener(`pointerleave`,n.onPointerLeave),n.onFocusIn&&t.removeEventListener(`focusin`,n.onFocusIn),n.onFocusOut&&t.removeEventListener(`focusout`,n.onFocusOut),n.onClick&&t.removeEventListener(`click`,n.onClick),n.onKeyDown&&t.removeEventListener(`keydown`,n.onKeyDown),e||(this._handlers=void 0,this._triggerElement=void 0))}async animateShow(e,t,n){let r=qe?.matches?0:t;e.getAnimations().forEach(e=>e.cancel()),e.animate(n??[{opacity:0,scale:.96},{opacity:1,scale:1}],{duration:r,fill:`forwards`})}async animateHide(e,t,n){let r=qe?.matches?0:t;await e.animate(n??[{opacity:1,scale:1},{opacity:0,scale:.96}],{duration:r,fill:`forwards`}).finished}}"
         }
       ],
       "exports": [
@@ -3251,6 +3251,10 @@
               "description": "Dialog border radius. Default `6px`.",
               "name": "--border-radius"
             },
+            {
+              "description": "Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).",
+              "name": "--padding"
+            },
             {
               "description": "Open transition duration. Default `200ms`.",
               "name": "--show-duration"
@@ -3295,6 +3299,10 @@
               "description": "Body content.",
               "name": ""
             },
+            {
+              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property.",
+              "name": "title"
+            },
             {
               "description": "Close button (typically `<button class=\"l-close\">`).",
               "name": "close"
@@ -3380,6 +3388,15 @@
               "description": "Close when the backdrop is clicked.",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "withoutHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Hide the header entirely (title and close slot).",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_mouseDownTarget",
@@ -3644,6 +3661,14 @@
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
+            {
+              "description": "Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).",
+              "name": "--padding",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "description": "Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.",
               "name": "--backdrop-blur",
@@ -3719,6 +3744,14 @@
                 "name": "LuxenDialog",
                 "module": "src/html/elements/dialog/dialog.ts"
               }
+            },
+            {
+              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property.",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "events": [
@@ -3798,6 +3831,19 @@
                 "name": "LuxenDialog",
                 "module": "src/html/elements/dialog/dialog.ts"
               }
+            },
+            {
+              "name": "without-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "fieldName": "withoutHeader",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "members": [
@@ -3845,6 +3891,21 @@
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "withoutHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "attribute": "without-header",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "dialog",
@@ -4700,6 +4761,16 @@
           "kind": "class",
           "description": "A stepper control that enhances a native `<input type=\"number\">` with\ndecrement/increment buttons and an optional animated number track.",
           "name": "LuxenInputStepper",
+          "cssProperties": [
+            {
+              "description": "Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.",
+              "name": "--border-color"
+            },
+            {
+              "description": "Border radius of the stepper container (default appearance). Defaults to `--radius-md`.",
+              "name": "--border-radius"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -4965,7 +5036,7 @@
             },
             {
               "description": "Border radius. Default `8px`.",
-              "name": "--radius"
+              "name": "--border-radius"
             },
             {
               "description": "Maximum width. Default `320px`.",
@@ -5030,6 +5101,11 @@
               "name": "withoutArrow",
               "description": "Hide the directional arrow."
             },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "description": "Stretch the popover to the viewport width. Useful for mega menus."
+            },
             {
               "kind": "field",
               "name": "trigger",
@@ -8968,6 +9044,10 @@
               "description": "Dialog border radius. Default `6px`.",
               "name": "--border-radius"
             },
+            {
+              "description": "Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).",
+              "name": "--padding"
+            },
             {
               "description": "Open transition duration. Default `200ms`.",
               "name": "--show-duration"
@@ -9012,6 +9092,10 @@
               "description": "Body content.",
               "name": ""
             },
+            {
+              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property.",
+              "name": "title"
+            },
             {
               "description": "Close button (typically `<button class=\"l-close\">`).",
               "name": "close"
@@ -9054,6 +9138,17 @@
               "attribute": "light-dismiss",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "withoutHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "attribute": "without-header",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "dialog",
@@ -9231,6 +9326,15 @@
               "default": "false",
               "description": "Close when the backdrop is clicked.",
               "fieldName": "lightDismiss"
+            },
+            {
+              "name": "without-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "fieldName": "withoutHeader"
             }
           ],
           "superclass": {
@@ -9448,6 +9552,14 @@
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
+            {
+              "description": "Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).",
+              "name": "--padding",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "description": "Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.",
               "name": "--backdrop-blur",
@@ -9523,6 +9635,14 @@
                 "name": "LuxenDialog",
                 "module": "src/html/elements/dialog/dialog.ts"
               }
+            },
+            {
+              "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property.",
+              "name": "title",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "members": [
@@ -9580,6 +9700,21 @@
                 "module": "src/html/elements/dialog/dialog.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "withoutHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "attribute": "without-header",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "dialog",
@@ -9837,6 +9972,19 @@
                 "name": "LuxenDialog",
                 "module": "src/html/elements/dialog/dialog.ts"
               }
+            },
+            {
+              "name": "without-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide the header entirely (title and close slot).",
+              "fieldName": "withoutHeader",
+              "inheritedFrom": {
+                "name": "LuxenDialog",
+                "module": "src/html/elements/dialog/dialog.ts"
+              }
             }
           ],
           "superclass": {
@@ -10780,6 +10928,16 @@
           "kind": "class",
           "description": "A stepper control that enhances a native `<input type=\"number\">` with\ndecrement/increment buttons and an optional animated number track.",
           "name": "LuxenInputStepper",
+          "cssProperties": [
+            {
+              "description": "Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.",
+              "name": "--border-color"
+            },
+            {
+              "description": "Border radius of the stepper container (default appearance). Defaults to `--radius-md`.",
+              "name": "--border-radius"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -11175,7 +11333,7 @@
             },
             {
               "description": "Border radius. Default `8px`.",
-              "name": "--radius"
+              "name": "--border-radius"
             },
             {
               "description": "Maximum width. Default `320px`.",
@@ -11278,6 +11436,17 @@
               "attribute": "without-arrow",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch the popover to the viewport width. Useful for mega menus.",
+              "attribute": "full-width",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "trigger",
@@ -11496,6 +11665,15 @@
               "description": "Hide the directional arrow.",
               "fieldName": "withoutArrow"
             },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch the popover to the viewport width. Useful for mega menus.",
+              "fieldName": "fullWidth"
+            },
             {
               "name": "trigger",
               "type": {

package/cdn/elements/dialog/dialog.d.ts

@@ -7,6 +7,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * Invoker commands). There are no public `show()` / `close()` methods.
  *
  * @slot - Body content.
+ * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property.
  * @slot close - Close button (typically `<button class="l-close">`).
  * @slot footer - Footer actions.
  *
@@ -18,6 +19,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  *
  * @cssproperty --width - Dialog width. Default `31rem`.
  * @cssproperty --border-radius - Dialog border radius. Default `6px`.
+ * @cssproperty --padding - Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).
  * @cssproperty --show-duration - Open transition duration. Default `200ms`.
  * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
  * @cssproperty --backdrop - Backdrop color.
@@ -36,6 +38,8 @@ export declare class LuxenDialog extends LuxenElement {
     open: boolean;
     /** Close when the backdrop is clicked. */
     lightDismiss: boolean;
+    /** Hide the header entirely (title and close slot). */
+    withoutHeader: boolean;
     dialog: HTMLDialogElement;
     private _mouseDownTarget;
     private _commandListener;

package/cdn/elements/dialog/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAGrB,MAAM,EAAG,iBAAiB,CAAC;IAE3B,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CAoBP"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAwB1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,4BAAwB;IAErC,2CAA2C;IAE3C,KAAK,SAAM;IAEX,kCAAkC;IAElC,IAAI,UAAS;IAEb,0CAA0C;IAE1C,YAAY,UAAS;IAErB,uDAAuD;IAEvD,aAAa,UAAS;IAGtB,MAAM,EAAG,iBAAiB,CAAC;IAE3B,OAAO,CAAC,gBAAgB,CAA4B;IAEpD,OAAO,CAAC,gBAAgB,CAEtB;IAIF,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IASZ,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IA0BrC,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,eAAe,CAAC,CAAY;IAEpC,OAAO,CAAC,aAAa;YAcP,UAAU;IAUxB,OAAO,CAAC,qBAAqB;IAK7B,MAAM;CA0BP"}

package/cdn/elements/dialog/dialog.js

@@ -1,12 +1,16 @@
-import{i as e,n as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{a as r,r as i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";import s from"./dialog.styles.js";var c=typeof HTMLDialogElement<`u`&&`closedBy`in HTMLDialogElement.prototype,l=Symbol.for(`luxen-dialog-scroll-lock`);if(typeof document<`u`&&!(l in document)){let e=new CSSStyleSheet;e.replaceSync(`html:has([data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`),document.adoptedStyleSheets.push(e),Object.defineProperty(document,l,{value:e})}var u=class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e`
+import{i as e,n as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{a as r,r as i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";import s from"./dialog.styles.js";var c=typeof HTMLDialogElement<`u`&&`closedBy`in HTMLDialogElement.prototype,l=Symbol.for(`luxen-dialog-scroll-lock`);if(typeof document<`u`&&!(l in document)){let e=new CSSStyleSheet;e.replaceSync(`html:has([data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`),document.adoptedStyleSheets.push(e),Object.defineProperty(document,l,{value:e})}var u=class extends n{constructor(...e){super(...e),this.title=``,this.open=!1,this.lightDismiss=!1,this.withoutHeader=!1,this._mouseDownTarget=null,this._commandListener={handleEvent:e=>this._onCommand(e)}}static{this.styles=[o,s]}connectedCallback(){super.connectedCallback(),this.addEventListener(`command`,this._commandListener)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`command`,this._commandListener)}firstUpdated(){this.dialog.addEventListener(`cancel`,e=>this._onCancel(e)),this.dialog.addEventListener(`close`,()=>this._onNativeClose()),this.dialog.addEventListener(`mousedown`,e=>{this._mouseDownTarget=e.target}),this.dialog.addEventListener(`click`,e=>this._onDialogClick(e))}updated(e){if(e.has(`open`)){if(this.open&&!this.dialog.open)this.emit(`show`),this.toggleAttribute(`data-modal`,!0),this.dialog.showModal(),this._focusAutofocusTarget(),this._emitAfter(`after-show`);else if(!this.open&&this.dialog.open){if(!this.emit(`hide`,{cancelable:!0})){this.open=!0;return}this.dialog.close()}}}_onCommand(e){switch(e.command){case`--hide`:this.open=!1;break;case`--show`:this.open=!0;break}}_onCancel(e){this.emit(`hide`,{cancelable:!0})||e.preventDefault()}_onNativeClose(){this.open=!1,this.removeAttribute(`data-modal`),this._emitAfter(`after-hide`)}_onDialogClick(e){let t=e.target===this.dialog&&this._mouseDownTarget===this.dialog;if(this._mouseDownTarget=null,t){if(this.lightDismiss){c||(this.open=!1);return}this._nudgeDismiss()}}_nudgeDismiss(){matchMedia(`(prefers-reduced-motion: reduce)`).matches||(this._nudgeAnimation?.cancel(),this._nudgeAnimation=this.dialog.animate([{transform:`scale(1)`},{transform:`scale(1.02)`},{transform:`scale(1)`}],{duration:250,easing:`ease-in-out`}))}async _emitAfter(e){await new Promise(e=>requestAnimationFrame(()=>e(null)));let t=this.dialog.getAnimations({subtree:!1});await Promise.all(t.map(e=>e.finished.catch(()=>{}))),e===`after-show`===this.open&&this.emit(e)}_focusAutofocusTarget(){this.querySelector(`[autofocus]`)?.focus({preventScroll:!0})}render(){return e`
       <dialog
         part="dialog"
         closedby=${this.lightDismiss&&c?`any`:t}
       >
-        <header part="header">
-          <h2 part="title">${this.title}</h2>
-          <slot name="close"></slot>
-        </header>
+        ${this.withoutHeader?t:e`
+              <header part="header">
+                <slot name="title">
+                  ${this.title?e`<h2 part="title">${this.title}</h2>`:t}
+                </slot>
+                <slot name="close"></slot>
+              </header>
+            `}
         <div part="body">
           <slot></slot>
         </div>
@@ -14,5 +18,5 @@ import{i as e,n as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../
           <slot name="footer"></slot>
         </footer>
       </dialog>
-    `}};a([r()],u.prototype,`title`,void 0),a([r({type:Boolean,reflect:!0})],u.prototype,`open`,void 0),a([r({type:Boolean,reflect:!0,attribute:`light-dismiss`})],u.prototype,`lightDismiss`,void 0),a([i(`dialog`)],u.prototype,`dialog`,void 0);export{u as LuxenDialog};
+    `}};a([r()],u.prototype,`title`,void 0),a([r({type:Boolean,reflect:!0})],u.prototype,`open`,void 0),a([r({type:Boolean,reflect:!0,attribute:`light-dismiss`})],u.prototype,`lightDismiss`,void 0),a([r({type:Boolean,reflect:!0,attribute:`without-header`})],u.prototype,`withoutHeader`,void 0),a([i(`dialog`)],u.prototype,`dialog`,void 0);export{u as LuxenDialog};
 //# sourceMappingURL=dialog.js.map

package/cdn/elements/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport hostStyles from '../../shared/styles/host.styles';\nimport styles from './dialog.styles';\n\ninterface CommandEventLike extends Event {\n  command: string;\n  source: Element | null;\n}\n\nconst supportsClosedBy =\n  typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;\n\n// Native <dialog> doesn't lock body scroll. Inject a global rule that uses\n// `:has()` to freeze the root scroll container whenever any modal l-dialog\n// is open. Purely declarative — no manual lock/unlock bookkeeping.\n// Symbol guard makes the injection idempotent across HMR reloads.\nconst SCROLL_LOCK_SHEET = Symbol.for('luxen-dialog-scroll-lock');\nif (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(`html:has([data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`);\n  document.adoptedStyleSheets.push(sheet);\n  Object.defineProperty(document, SCROLL_LOCK_SHEET, { value: sheet });\n}\n\n/**\n * A modal dialog rendered in the top layer via the native `<dialog>` element.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). There are no public `show()` / `close()` methods.\n *\n * @slot - Body content.\n * @slot close - Close button (typically `<button class=\"l-close\">`).\n * @slot footer - Footer actions.\n *\n * @csspart dialog - The native `<dialog>` element.\n * @csspart header - The header wrapper containing the title and close slot.\n * @csspart title - The dialog title heading.\n * @csspart body - The body wrapper around the default slot.\n * @csspart footer - The footer wrapper around the footer slot.\n *\n * @cssproperty --width - Dialog width. Default `31rem`.\n * @cssproperty --border-radius - Dialog border radius. Default `6px`.\n * @cssproperty --show-duration - Open transition duration. Default `200ms`.\n * @cssproperty --hide-duration - Close transition duration. Default `200ms`.\n * @cssproperty --backdrop - Backdrop color.\n * @cssproperty --backdrop-blur - Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.\n *\n * @event show - Fired when the dialog opens. Not cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.\n * @event after-hide - Fired after the close animation completes.\n */\nexport class LuxenDialog extends LuxenElement {\n  static styles = [hostStyles, styles];\n\n  /** Dialog title rendered in the header. */\n  @property()\n  title = '';\n\n  /** Whether the dialog is open. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Close when the backdrop is clicked. */\n  @property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })\n  lightDismiss = false;\n\n  @query('dialog')\n  dialog!: HTMLDialogElement;\n\n  private _mouseDownTarget: EventTarget | null = null;\n\n  private _commandListener: EventListenerObject = {\n    handleEvent: (e: Event) => this._onCommand(e as CommandEventLike),\n  };\n\n  // --- Lifecycle ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('command', this._commandListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this._commandListener);\n  }\n\n  firstUpdated() {\n    this.dialog.addEventListener('cancel', (e) => this._onCancel(e));\n    this.dialog.addEventListener('close', () => this._onNativeClose());\n    this.dialog.addEventListener('mousedown', (e) => {\n      this._mouseDownTarget = e.target;\n    });\n    this.dialog.addEventListener('click', (e) => this._onDialogClick(e));\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (!changed.has('open')) return;\n\n    if (this.open && !this.dialog.open) {\n      // Opening — not cancelable.\n      this.emit('show');\n      this.toggleAttribute('data-modal', true);\n      this.dialog.showModal();\n      this._focusAutofocusTarget();\n      this._emitAfter('after-show');\n    } else if (!this.open && this.dialog.open) {\n      // Closing — cancelable. Revert the property if consumer prevents.\n      if (!this.emit('hide', { cancelable: true })) {\n        this.open = true;\n        return;\n      }\n      this.dialog.close();\n      // `after-hide` is emitted from `_onNativeClose` (runs for every close path).\n    }\n  }\n\n  // --- Event handlers ---\n\n  // Custom commands on a custom element must start with `--`.\n  // Built-in commands like \"close\" are reserved for native elements\n  // and won't fire here.\n  private _onCommand(e: CommandEventLike) {\n    switch (e.command) {\n      case '--hide':\n        this.open = false;\n        break;\n      case '--show':\n        this.open = true;\n        break;\n    }\n  }\n\n  // Fires on Escape and on `closedby=\"any\"` close requests.\n  // Does NOT fire when script calls `.close()`, so `updated()`'s cancelable\n  // `hide` emit doesn't collide with this one.\n  private _onCancel(e: Event) {\n    if (!this.emit('hide', { cancelable: true })) {\n      e.preventDefault();\n    }\n  }\n\n  private _onNativeClose() {\n    this.open = false;\n    this.removeAttribute('data-modal');\n    this._emitAfter('after-hide');\n  }\n\n  private _onDialogClick(e: MouseEvent) {\n    // With `dialog { padding: 0 }`, `e.target === this.dialog` only fires\n    // for backdrop clicks. The mousedown guard prevents drag-out dismissal.\n    const clickedBackdrop = e.target === this.dialog && this._mouseDownTarget === this.dialog;\n    this._mouseDownTarget = null;\n    if (!clickedBackdrop) return;\n\n    if (this.lightDismiss) {\n      // When `supportsClosedBy`, the native `closedby=\"any\"` already closed.\n      if (!supportsClosedBy) this.open = false;\n      return;\n    }\n    this._nudgeDismiss();\n  }\n\n  private _nudgeAnimation?: Animation;\n\n  private _nudgeDismiss() {\n    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n    this._nudgeAnimation?.cancel();\n    this._nudgeAnimation = this.dialog.animate(\n      [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }],\n      { duration: 250, easing: 'ease-in-out' },\n    );\n  }\n\n  // Awaits every active animation on the dialog (transitions + @keyframes)\n  // and then emits. Resolves immediately when no animations are running,\n  // which covers `prefers-reduced-motion` and consumers that zero the\n  // duration custom properties — cases where `transitionend` never fires.\n  // Waits one frame first so @starting-style transitions have registered.\n  private async _emitAfter(name: 'after-show' | 'after-hide') {\n    await new Promise((r) => requestAnimationFrame(() => r(null)));\n    const anims = this.dialog.getAnimations({ subtree: false });\n    await Promise.all(anims.map((a) => a.finished.catch(() => {})));\n    if ((name === 'after-show') !== this.open) return;\n    this.emit(name);\n  }\n\n  // Firefox/Safari don't reliably resolve `[autofocus]` when `<dialog>`\n  // is in shadow DOM and the target is in light DOM. Resolve it manually.\n  private _focusAutofocusTarget() {\n    const target = this.querySelector<HTMLElement>('[autofocus]');\n    target?.focus({ preventScroll: true });\n  }\n\n  render() {\n    const closedby = this.lightDismiss && supportsClosedBy ? 'any' : nothing;\n    return html`\n      <dialog\n        part=\"dialog\"\n        closedby=${closedby}\n      >\n        <header part=\"header\">\n          <h2 part=\"title\">${this.title}</h2>\n          <slot name=\"close\"></slot>\n        </header>\n        <div part=\"body\">\n          <slot></slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.ts"],"sourcesContent":["import { html, nothing, type PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport hostStyles from '../../shared/styles/host.styles';\nimport styles from './dialog.styles';\n\ninterface CommandEventLike extends Event {\n  command: string;\n  source: Element | null;\n}\n\nconst supportsClosedBy =\n  typeof HTMLDialogElement !== 'undefined' && 'closedBy' in HTMLDialogElement.prototype;\n\n// Native <dialog> doesn't lock body scroll. Inject a global rule that uses\n// `:has()` to freeze the root scroll container whenever any modal l-dialog\n// is open. Purely declarative — no manual lock/unlock bookkeeping.\n// Symbol guard makes the injection idempotent across HMR reloads.\nconst SCROLL_LOCK_SHEET = Symbol.for('luxen-dialog-scroll-lock');\nif (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(`html:has([data-modal]) { overflow: hidden; scrollbar-gutter: stable; }`);\n  document.adoptedStyleSheets.push(sheet);\n  Object.defineProperty(document, SCROLL_LOCK_SHEET, { value: sheet });\n}\n\n/**\n * A modal dialog rendered in the top layer via the native `<dialog>` element.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). There are no public `show()` / `close()` methods.\n *\n * @slot - Body content.\n * @slot title - Custom heading element. Overrides the default `<h2>` rendered from the `title` property.\n * @slot close - Close button (typically `<button class=\"l-close\">`).\n * @slot footer - Footer actions.\n *\n * @csspart dialog - The native `<dialog>` element.\n * @csspart header - The header wrapper containing the title and close slot.\n * @csspart title - The dialog title heading.\n * @csspart body - The body wrapper around the default slot.\n * @csspart footer - The footer wrapper around the footer slot.\n *\n * @cssproperty --width - Dialog width. Default `31rem`.\n * @cssproperty --border-radius - Dialog border radius. Default `6px`.\n * @cssproperty --padding - Padding applied to the header, footer, and inline-padding of the body. Default `1.5rem`. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media).\n * @cssproperty --show-duration - Open transition duration. Default `200ms`.\n * @cssproperty --hide-duration - Close transition duration. Default `200ms`.\n * @cssproperty --backdrop - Backdrop color.\n * @cssproperty --backdrop-blur - Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.\n *\n * @event show - Fired when the dialog opens. Not cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.\n * @event after-hide - Fired after the close animation completes.\n */\nexport class LuxenDialog extends LuxenElement {\n  static styles = [hostStyles, styles];\n\n  /** Dialog title rendered in the header. */\n  @property()\n  title = '';\n\n  /** Whether the dialog is open. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Close when the backdrop is clicked. */\n  @property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })\n  lightDismiss = false;\n\n  /** Hide the header entirely (title and close slot). */\n  @property({ type: Boolean, reflect: true, attribute: 'without-header' })\n  withoutHeader = false;\n\n  @query('dialog')\n  dialog!: HTMLDialogElement;\n\n  private _mouseDownTarget: EventTarget | null = null;\n\n  private _commandListener: EventListenerObject = {\n    handleEvent: (e: Event) => this._onCommand(e as CommandEventLike),\n  };\n\n  // --- Lifecycle ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('command', this._commandListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this._commandListener);\n  }\n\n  firstUpdated() {\n    this.dialog.addEventListener('cancel', (e) => this._onCancel(e));\n    this.dialog.addEventListener('close', () => this._onNativeClose());\n    this.dialog.addEventListener('mousedown', (e) => {\n      this._mouseDownTarget = e.target;\n    });\n    this.dialog.addEventListener('click', (e) => this._onDialogClick(e));\n  }\n\n  updated(changed: PropertyValues<this>) {\n    if (!changed.has('open')) return;\n\n    if (this.open && !this.dialog.open) {\n      // Opening — not cancelable.\n      this.emit('show');\n      this.toggleAttribute('data-modal', true);\n      this.dialog.showModal();\n      this._focusAutofocusTarget();\n      this._emitAfter('after-show');\n    } else if (!this.open && this.dialog.open) {\n      // Closing — cancelable. Revert the property if consumer prevents.\n      if (!this.emit('hide', { cancelable: true })) {\n        this.open = true;\n        return;\n      }\n      this.dialog.close();\n      // `after-hide` is emitted from `_onNativeClose` (runs for every close path).\n    }\n  }\n\n  // --- Event handlers ---\n\n  // Custom commands on a custom element must start with `--`.\n  // Built-in commands like \"close\" are reserved for native elements\n  // and won't fire here.\n  private _onCommand(e: CommandEventLike) {\n    switch (e.command) {\n      case '--hide':\n        this.open = false;\n        break;\n      case '--show':\n        this.open = true;\n        break;\n    }\n  }\n\n  // Fires on Escape and on `closedby=\"any\"` close requests.\n  // Does NOT fire when script calls `.close()`, so `updated()`'s cancelable\n  // `hide` emit doesn't collide with this one.\n  private _onCancel(e: Event) {\n    if (!this.emit('hide', { cancelable: true })) {\n      e.preventDefault();\n    }\n  }\n\n  private _onNativeClose() {\n    this.open = false;\n    this.removeAttribute('data-modal');\n    this._emitAfter('after-hide');\n  }\n\n  private _onDialogClick(e: MouseEvent) {\n    // With `dialog { padding: 0 }`, `e.target === this.dialog` only fires\n    // for backdrop clicks. The mousedown guard prevents drag-out dismissal.\n    const clickedBackdrop = e.target === this.dialog && this._mouseDownTarget === this.dialog;\n    this._mouseDownTarget = null;\n    if (!clickedBackdrop) return;\n\n    if (this.lightDismiss) {\n      // When `supportsClosedBy`, the native `closedby=\"any\"` already closed.\n      if (!supportsClosedBy) this.open = false;\n      return;\n    }\n    this._nudgeDismiss();\n  }\n\n  private _nudgeAnimation?: Animation;\n\n  private _nudgeDismiss() {\n    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n    this._nudgeAnimation?.cancel();\n    this._nudgeAnimation = this.dialog.animate(\n      [{ transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' }],\n      { duration: 250, easing: 'ease-in-out' },\n    );\n  }\n\n  // Awaits every active animation on the dialog (transitions + @keyframes)\n  // and then emits. Resolves immediately when no animations are running,\n  // which covers `prefers-reduced-motion` and consumers that zero the\n  // duration custom properties — cases where `transitionend` never fires.\n  // Waits one frame first so @starting-style transitions have registered.\n  private async _emitAfter(name: 'after-show' | 'after-hide') {\n    await new Promise((r) => requestAnimationFrame(() => r(null)));\n    const anims = this.dialog.getAnimations({ subtree: false });\n    await Promise.all(anims.map((a) => a.finished.catch(() => {})));\n    if ((name === 'after-show') !== this.open) return;\n    this.emit(name);\n  }\n\n  // Firefox/Safari don't reliably resolve `[autofocus]` when `<dialog>`\n  // is in shadow DOM and the target is in light DOM. Resolve it manually.\n  private _focusAutofocusTarget() {\n    const target = this.querySelector<HTMLElement>('[autofocus]');\n    target?.focus({ preventScroll: true });\n  }\n\n  render() {\n    const closedby = this.lightDismiss && supportsClosedBy ? 'any' : nothing;\n    return html`\n      <dialog\n        part=\"dialog\"\n        closedby=${closedby}\n      >\n        ${this.withoutHeader\n          ? nothing\n          : html`\n              <header part=\"header\">\n                <slot name=\"title\">\n                  ${this.title ? html`<h2 part=\"title\">${this.title}</h2>` : nothing}\n                </slot>\n                <slot name=\"close\"></slot>\n              </header>\n            `}\n        <div part=\"body\">\n          <slot></slot>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n"],"mappings":"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"}

package/cdn/elements/dialog/dialog.styles.js

@@ -1,2 +1,2 @@
-import{c as e}from"../../chunks/lit.js";var t=e(`:host{--width:31rem;--border-radius:6px;--show-duration:.2s;--hide-duration:.2s;--backdrop:var(--l-backdrop);--backdrop-blur:0;display:contents}dialog{box-sizing:border-box;width:var(--width);max-inline-size:min(90vw, var(--width));border-radius:var(--border-radius);background-color:var(--l-color-surface-overlay);max-block-size:min(80dvb,100%);color:var(--l-color-text-primary);opacity:0;transition-property:opacity,display,overlay;transition-duration:var(--hide-duration);transition-behavior:allow-discrete;border:0;margin:auto;padding:0;position:fixed;inset:0}dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur))}dialog[open]{opacity:1;transition-duration:var(--show-duration);grid-template-rows:auto minmax(0,1fr) auto;display:grid}@starting-style{dialog[open]{opacity:0}}[part=header]{justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem;display:flex}[part=title]{margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}[part=body]{padding:0 1.5rem;overflow-y:auto}[part=footer]{place-content:end;gap:.5rem;padding:1.5rem;display:flex}::slotted(menu[slot=footer]){display:contents}@media (prefers-reduced-motion:reduce){:host{--show-duration:0s;--hide-duration:0s}}`);export{t as default};
+import{c as e}from"../../chunks/lit.js";var t=e(`:host{--width:31rem;--border-radius:6px;--padding:1.5rem;--show-duration:.2s;--hide-duration:.2s;--backdrop:var(--l-backdrop);--backdrop-blur:0;display:contents}dialog{box-sizing:border-box;width:var(--width);max-inline-size:min(90vw, var(--width));border-radius:var(--border-radius);background-color:var(--l-color-surface-overlay);max-block-size:min(80dvb,100%);color:var(--l-color-text-primary);opacity:0;transition-property:opacity,display,overlay;transition-duration:var(--hide-duration);transition-behavior:allow-discrete;border:0;margin:auto;padding:0;position:fixed;inset:0}dialog::backdrop{background:var(--backdrop);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur))}dialog[open]{opacity:1;transition-duration:var(--show-duration);grid-template-rows:auto minmax(0,1fr) auto;display:grid}@starting-style{dialog[open]{opacity:0}}[part=header]{padding:var(--padding);justify-content:space-between;align-items:center;gap:1rem;display:flex}[part=title]{margin:0;font-size:1.125rem;font-weight:600;line-height:1.4}[part=body]{padding-inline:var(--padding);overflow-y:auto}[part=footer]{padding:var(--padding);place-content:end;gap:.5rem;display:flex}::slotted(menu[slot=footer]){display:contents}@media (prefers-reduced-motion:reduce){:host{--show-duration:0s;--hide-duration:0s}}`);export{t as default};
 //# sourceMappingURL=dialog.styles.js.map

package/cdn/elements/dialog/dialog.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.styles.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.css?inline","../../../src/html/elements/dialog/dialog.styles.ts"],"sourcesContent":[":host {\n  --width: 31rem;\n  --border-radius: 6px;\n  --show-duration: 200ms;\n  --hide-duration: 200ms;\n  --backdrop: var(--l-backdrop);\n  --backdrop-blur: 0;\n\n  display: contents;\n}\n\ndialog {\n  position: fixed;\n  inset: 0;\n  box-sizing: border-box;\n  width: var(--width);\n  max-inline-size: min(90vw, var(--width));\n  max-block-size: min(80dvb, 100%);\n  margin: auto;\n  padding: 0;\n  border: 0;\n  border-radius: var(--border-radius);\n  background-color: var(--l-color-surface-overlay);\n  color: var(--l-color-text-primary);\n\n  /* EXIT STATE */\n  opacity: 0;\n\n  transition-property: opacity, display, overlay;\n  transition-duration: var(--hide-duration);\n  transition-behavior: allow-discrete;\n\n  &::backdrop {\n    background: var(--backdrop);\n    backdrop-filter: blur(var(--backdrop-blur));\n  }\n\n  /* OPEN STATE */\n  /* grid layout pins header/footer; the middle row (body) scrolls via\n     overflow on [part='body'] and minmax(0, 1fr) allowing it to shrink. */\n  &[open] {\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n    opacity: 1;\n    transition-duration: var(--show-duration);\n  }\n\n  /* BEFORE-OPEN STATE */\n  @starting-style {\n    &[open] {\n      opacity: 0;\n    }\n  }\n}\n\n[part='header'] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  padding: 1.5rem;\n}\n\n[part='title'] {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n[part='body'] {\n  padding: 0 1.5rem;\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: 1.5rem;\n}\n\n::slotted(menu[slot='footer']) {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --show-duration: 0ms;\n    --hide-duration: 0ms;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport raw from './dialog.css?inline';\n\n/**\n * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.\n * `unsafeCSS()` is called once here so both importers share the same\n * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).\n */\nexport default unsafeCSS(raw);\n"],"mappings":"wCCQA,IAAA,EAAe,qwCAAc"}
+{"version":3,"file":"dialog.styles.js","names":[],"sources":["../../../src/html/elements/dialog/dialog.css?inline","../../../src/html/elements/dialog/dialog.styles.ts"],"sourcesContent":[":host {\n  --width: 31rem;\n  --border-radius: 6px;\n  --padding: 1.5rem;\n  --show-duration: 200ms;\n  --hide-duration: 200ms;\n  --backdrop: var(--l-backdrop);\n  --backdrop-blur: 0;\n\n  display: contents;\n}\n\ndialog {\n  position: fixed;\n  inset: 0;\n  box-sizing: border-box;\n  width: var(--width);\n  max-inline-size: min(90vw, var(--width));\n  max-block-size: min(80dvb, 100%);\n  margin: auto;\n  padding: 0;\n  border: 0;\n  border-radius: var(--border-radius);\n  background-color: var(--l-color-surface-overlay);\n  color: var(--l-color-text-primary);\n\n  /* EXIT STATE */\n  opacity: 0;\n\n  transition-property: opacity, display, overlay;\n  transition-duration: var(--hide-duration);\n  transition-behavior: allow-discrete;\n\n  &::backdrop {\n    background: var(--backdrop);\n    backdrop-filter: blur(var(--backdrop-blur));\n  }\n\n  /* OPEN STATE */\n  /* grid layout pins header/footer; the middle row (body) scrolls via\n     overflow on [part='body'] and minmax(0, 1fr) allowing it to shrink. */\n  &[open] {\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n    opacity: 1;\n    transition-duration: var(--show-duration);\n  }\n\n  /* BEFORE-OPEN STATE */\n  @starting-style {\n    &[open] {\n      opacity: 0;\n    }\n  }\n}\n\n[part='header'] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 1rem;\n  padding: var(--padding);\n}\n\n[part='title'] {\n  margin: 0;\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1.4;\n}\n\n[part='body'] {\n  padding-inline: var(--padding);\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: var(--padding);\n}\n\n::slotted(menu[slot='footer']) {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    --show-duration: 0ms;\n    --hide-duration: 0ms;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport raw from './dialog.css?inline';\n\n/**\n * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.\n * `unsafeCSS()` is called once here so both importers share the same\n * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).\n */\nexport default unsafeCSS(raw);\n"],"mappings":"wCCQA,IAAA,EAAe,mzCAAc"}

package/cdn/elements/dropdown/dropdown.js

@@ -1,4 +1,4 @@
-import{tagName as e}from"../../registry.js";import{c as t,i as n}from"../../chunks/lit.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{a as i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";import{PopoverController as s}from"../../shared/controllers/popover.js";var c=t(`:host{--background:var(--l-color-bg-surface,Canvas);--radius:8px;--shadow:0 4px 16px #0000001f;--show-duration:150;--hide-duration:150;display:inline-block;position:relative}.trigger{display:contents}[popover]{inset:unset;box-sizing:border-box;width:max-content;min-width:anchor-size(width);border:1px solid var(--l-color-border,var(--lightningcss-light,#e5e7eb)var(--lightningcss-dark,#374151));border-radius:var(--radius);background:var(--background);color:var(--l-color-text-primary,CanvasText);box-shadow:var(--shadow);margin:0;padding:4px 0;font-size:.875rem;line-height:1.5;overflow:visible}`),l=class extends r{constructor(...t){super(...t),this._floating=new s(this,{getTriggerElement:()=>this._triggerEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._typeaheadBuffer=``,this._typeaheadTimeout=0,this.#e=!1,this.#t=`bottom-start`,this.#n=4,this.#r=!1,this._onTriggerClick=()=>{this.disabled||this.toggle()},this._onTriggerKeyDown=e=>{this.disabled||(e.key===`ArrowDown`?(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusFirstItem())):e.key===`ArrowUp`&&(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusLastItem())))},this._onPanelKeyDown=e=>{switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusNextItem();break;case`ArrowUp`:e.preventDefault(),this._focusPreviousItem();break;case`Home`:e.preventDefault(),this._focusFirstItem();break;case`End`:e.preventDefault(),this._focusLastItem();break;case`Escape`:e.preventDefault(),this.hide(),this._triggerEl?.focus();break;case`Enter`:case` `:e.preventDefault(),this._selectCurrentItem();break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&this._handleTypeahead(e.key)}},this._onItemClick=t=>{let n=t.target.closest(e(`dropdown-item`));n&&!n.disabled&&this._selectItem(n)},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1,this._triggerEl?.setAttribute(`aria-expanded`,`false`))}}static{this.styles=[o,c]}#e;get open(){return this.#e}set open(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}get _triggerEl(){return this.shadowRoot.querySelector(`.trigger slot`)?.assignedElements()[0]??null}get _panelEl(){return this.shadowRoot.querySelector(`[popover]`)}_getItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}_getAllItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()):[]}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}show(){this.open||this.disabled||this.emit(`show`,{cancelable:!0})&&(this.open=!0)}hide(){this.open&&this.emit(`hide`,{cancelable:!0})&&(this.open=!1)}toggle(){this.open?this.hide():this.show()}updated(e){e.has(`open`)&&this._handleOpenChange()}async _handleOpenChange(){let e=this._panelEl;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._triggerEl?.setAttribute(`aria-expanded`,`true`),this.emit(`after-show`)}else this._floating.stopPositioning(),this._triggerEl?.setAttribute(`aria-expanded`,`false`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover(),this.emit(`after-hide`)}_setActiveItem(e){let t=e.shadowRoot.querySelector(`.item`);if(t){for(let e of this._getAllItems())e.shadowRoot.querySelector(`.item`)?.setAttribute(`tabindex`,`-1`);t.setAttribute(`tabindex`,`0`),t.focus()}}_focusFirstItem(){let e=this._getItems();e.length&&this._setActiveItem(e[0])}_focusLastItem(){let e=this._getItems();e.length&&this._setActiveItem(e[e.length-1])}_getCurrentItem(){return this._getItems().find(e=>{let t=e.shadowRoot.querySelector(`.item`);return t?.getAttribute(`tabindex`)===`0`&&e.shadowRoot.activeElement===t})??null}_focusNextItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):-1)+1)%e.length];n&&this._setActiveItem(n)}_focusPreviousItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):0)-1+e.length)%e.length];n&&this._setActiveItem(n)}_handleTypeahead(e){clearTimeout(this._typeaheadTimeout),this._typeaheadBuffer+=e.toLowerCase(),this._typeaheadTimeout=window.setTimeout(()=>{this._typeaheadBuffer=``},500);let t=this._getItems().find(e=>e.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer));t&&this._setActiveItem(t)}_selectCurrentItem(){let e=this._getCurrentItem();e&&this._selectItem(e)}_selectItem(e){e.type===`checkbox`&&(e.checked=!e.checked),this.emit(`select`,{detail:{item:e}}),e.type!==`checkbox`&&(this.hide(),this._triggerEl?.focus())}render(){return n`
+import{tagName as e}from"../../registry.js";import{c as t,i as n}from"../../chunks/lit.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{a as i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";import{PopoverController as s}from"../../shared/controllers/popover.js";var c=t(`:host{--background:var(--l-color-bg-surface,Canvas);--radius:6px;--shadow:0 4px 6px -1px #00000014, 0 2px 4px -2px #0000000f;--show-duration:150;--hide-duration:150;display:inline-block;position:relative}.trigger{display:contents}[popover]{inset:unset;box-sizing:border-box;width:max-content;min-width:anchor-size(width);border:1px solid var(--l-color-border-overlay,var(--lightningcss-light,#e5e7eb)var(--lightningcss-dark,#374151));border-radius:var(--radius);background:var(--background);color:var(--l-color-text-primary,CanvasText);box-shadow:var(--shadow);margin:0;padding:.25rem;font-size:.875rem;line-height:1.5;overflow:visible}`),l=class extends r{constructor(...t){super(...t),this._floating=new s(this,{getTriggerElement:()=>this._triggerEl,getFloatingElement:()=>this._panelEl,getArrowElement:()=>null}),this._typeaheadBuffer=``,this._typeaheadTimeout=0,this.#e=!1,this.#t=`bottom-start`,this.#n=4,this.#r=!1,this._onTriggerClick=()=>{this.disabled||this.toggle()},this._onTriggerKeyDown=e=>{this.disabled||(e.key===`ArrowDown`?(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusFirstItem())):e.key===`ArrowUp`&&(e.preventDefault(),this.show(),requestAnimationFrame(()=>this._focusLastItem())))},this._onPanelKeyDown=e=>{switch(e.key){case`ArrowDown`:e.preventDefault(),this._focusNextItem();break;case`ArrowUp`:e.preventDefault(),this._focusPreviousItem();break;case`Home`:e.preventDefault(),this._focusFirstItem();break;case`End`:e.preventDefault(),this._focusLastItem();break;case`Escape`:e.preventDefault(),this.hide(),this._triggerEl?.focus();break;case`Enter`:case` `:e.preventDefault(),this._selectCurrentItem();break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&this._handleTypeahead(e.key)}},this._onItemClick=t=>{let n=t.target.closest(e(`dropdown-item`));n&&!n.disabled&&this._selectItem(n)},this._onToggle=e=>{e.newState===`closed`&&this.open&&(this.open=!1,this._triggerEl?.setAttribute(`aria-expanded`,`false`))}}static{this.styles=[o,c]}#e;get open(){return this.#e}set open(e){this.#e=e}#t;get placement(){return this.#t}set placement(e){this.#t=e}#n;get distance(){return this.#n}set distance(e){this.#n=e}#r;get disabled(){return this.#r}set disabled(e){this.#r=e}get _triggerEl(){return this.shadowRoot.querySelector(`.trigger slot`)?.assignedElements()[0]??null}get _panelEl(){return this.shadowRoot.querySelector(`[popover]`)}_getItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()&&!t.disabled):[]}_getAllItems(){let t=this.shadowRoot.querySelector(`slot:not([name])`);return t?t.assignedElements().filter(t=>t.tagName===e(`dropdown-item`).toUpperCase()):[]}_getDuration(e){let t=parseFloat(getComputedStyle(this).getPropertyValue(e));return Number.isNaN(t)?150:t}show(){this.open||this.disabled||this.emit(`show`,{cancelable:!0})&&(this.open=!0)}hide(){this.open&&this.emit(`hide`,{cancelable:!0})&&(this.open=!1)}toggle(){this.open?this.hide():this.show()}updated(e){e.has(`open`)&&this._handleOpenChange()}async _handleOpenChange(){let e=this._panelEl;if(!e)return;let t={placement:this.placement,distance:this.distance};if(this.open){if(e.showPopover(),await this._floating.updatePosition(t),!this.open)return;await this._floating.animateShow(e,this._getDuration(`--show-duration`)),this._floating.startPositioning(t),this._triggerEl?.setAttribute(`aria-expanded`,`true`),this.emit(`after-show`)}else this._floating.stopPositioning(),this._triggerEl?.setAttribute(`aria-expanded`,`false`),await this._floating.animateHide(e,this._getDuration(`--hide-duration`)),e.matches(`:popover-open`)&&e.hidePopover(),this.emit(`after-hide`)}_setActiveItem(e){let t=e.shadowRoot.querySelector(`.item`);if(t){for(let e of this._getAllItems())e.shadowRoot.querySelector(`.item`)?.setAttribute(`tabindex`,`-1`);t.setAttribute(`tabindex`,`0`),t.focus()}}_focusFirstItem(){let e=this._getItems();e.length&&this._setActiveItem(e[0])}_focusLastItem(){let e=this._getItems();e.length&&this._setActiveItem(e[e.length-1])}_getCurrentItem(){return this._getItems().find(e=>{let t=e.shadowRoot.querySelector(`.item`);return t?.getAttribute(`tabindex`)===`0`&&e.shadowRoot.activeElement===t})??null}_focusNextItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):-1)+1)%e.length];n&&this._setActiveItem(n)}_focusPreviousItem(){let e=this._getItems(),t=this._getCurrentItem(),n=e[((t?e.indexOf(t):0)-1+e.length)%e.length];n&&this._setActiveItem(n)}_handleTypeahead(e){clearTimeout(this._typeaheadTimeout),this._typeaheadBuffer+=e.toLowerCase(),this._typeaheadTimeout=window.setTimeout(()=>{this._typeaheadBuffer=``},500);let t=this._getItems().find(e=>e.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer));t&&this._setActiveItem(t)}_selectCurrentItem(){let e=this._getCurrentItem();e&&this._selectItem(e)}_selectItem(e){e.type===`checkbox`&&(e.checked=!e.checked),this.emit(`select`,{detail:{item:e}}),e.type!==`checkbox`&&(this.hide(),this._triggerEl?.focus())}render(){return n`
       <div
         class="trigger"
         @click=${this._onTriggerClick}