luxen-ui 0.1.2 → 0.2.1

package/dist/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/dist/elements/dialog/dialog.css

@@ -1,6 +1,7 @@
 :host {
   --width: 31rem;
   --border-radius: 6px;
+  --padding: 1.5rem;
   --show-duration: 200ms;
   --hide-duration: 200ms;
   --backdrop: var(--l-backdrop);
@@ -58,7 +59,7 @@ dialog {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  padding: 1.5rem;
+  padding: var(--padding);
 }
 
 [part='title'] {
@@ -69,7 +70,7 @@ dialog {
 }
 
 [part='body'] {
-  padding: 0 1.5rem;
+  padding-inline: var(--padding);
   overflow-y: auto;
 }
 
@@ -77,7 +78,7 @@ dialog {
   display: flex;
   place-content: end;
   gap: 0.5rem;
-  padding: 1.5rem;
+  padding: var(--padding);
 }
 
 ::slotted(menu[slot='footer']) {

package/dist/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/dist/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/dist/elements/dialog/dialog.js

@@ -28,6 +28,7 @@ if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
  * 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.
  *
@@ -39,6 +40,7 @@ if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
  *
  * @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.
@@ -58,6 +60,8 @@ export class LuxenDialog extends LuxenElement {
         this.open = false;
         /** Close when the backdrop is clicked. */
         this.lightDismiss = false;
+        /** Hide the header entirely (title and close slot). */
+        this.withoutHeader = false;
         this._mouseDownTarget = null;
         this._commandListener = {
             handleEvent: (e) => this._onCommand(e),
@@ -175,10 +179,16 @@ export class LuxenDialog extends LuxenElement {
         part="dialog"
         closedby=${closedby}
       >
-        <header part="header">
-          <h2 part="title">${this.title}</h2>
-          <slot name="close"></slot>
-        </header>
+        ${this.withoutHeader
+            ? nothing
+            : html `
+              <header part="header">
+                <slot name="title">
+                  ${this.title ? html `<h2 part="title">${this.title}</h2>` : nothing}
+                </slot>
+                <slot name="close"></slot>
+              </header>
+            `}
         <div part="body">
           <slot></slot>
         </div>
@@ -199,6 +209,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })
 ], LuxenDialog.prototype, "lightDismiss", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'without-header' })
+], LuxenDialog.prototype, "withoutHeader", void 0);
 __decorate([
     query('dialog')
 ], LuxenDialog.prototype, "dialog", void 0);

package/dist/elements/dropdown/dropdown.css

@@ -1,7 +1,7 @@
 :host {
   --background: var(--l-color-bg-surface, Canvas);
-  --radius: 8px;
-  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --radius: 6px;
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --show-duration: 150;
   --hide-duration: 150;
 
@@ -19,9 +19,9 @@
   box-sizing: border-box;
   width: max-content;
   min-width: anchor-size(width);
-  padding: 4px 0;
+  padding: 0.25rem;
   margin: 0;
-  border: 1px solid var(--l-color-border, light-dark(#e5e7eb, #374151));
+  border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
   border-radius: var(--radius);
   background: var(--background);
   color: var(--l-color-text-primary, CanvasText);

package/dist/elements/dropdown-item/dropdown-item.css

@@ -11,9 +11,10 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 16px;
+  padding: 0.375rem 0.5rem;
   cursor: pointer;
   outline: none;
+  border-radius: 4px;
   font-size: 0.875rem;
   line-height: 1.5;
   color: var(--l-color-text-primary, CanvasText);

package/dist/elements/input-stepper/input-stepper.d.ts

@@ -14,6 +14,9 @@ export type InputStepperSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  * ```
  *
  * @event change - Fired when the value changes. Detail: `{ value: number }`.
+ *
+ * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.
+ * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.
  */
 export declare class LuxenInputStepper extends LuxenElement {
     createRenderRoot(): this;

package/dist/elements/input-stepper/input-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;GAcG;AACH,qBAAa,iBAAkB,SAAQ,YAAY;IACxC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}
+{"version":3,"file":"input-stepper.d.ts","sourceRoot":"","sources":["../../../src/html/elements/input-stepper/input-stepper.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,iBAAkB,SAAQ,YAAY;IACxC,gBAAgB;IAIzB,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,wEAAwE;IAExE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,kEAAkE;IAElE,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IAEpB,IAAI,EAAE,gBAAgB,CAAQ;IAE9B,iDAAiD;IAEjD,UAAU,UAAS;IAEnB,0CAA0C;IAE1C,aAAa,SAAkB;IAE/B,0CAA0C;IAE1C,aAAa,SAAiB;IAE9B,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,aAAa,CAA+B;IACpD,OAAO,CAAC,MAAM,CAA+B;IAC7C,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,eAAe,CAAS;IAEvB,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAS9C,sCAAsC;IACtC,SAAS;IAOT,sCAAsC;IACtC,SAAS;IAST,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,mBAAmB;IAa3B,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,cAAc,CAWpB;CACH"}

package/dist/elements/input-stepper/input-stepper.js

@@ -20,6 +20,9 @@ import { LuxenElement } from '../../shared/luxen-element';
  * ```
  *
  * @event change - Fired when the value changes. Detail: `{ value: number }`.
+ *
+ * @cssproperty --border-color - Border color of the stepper container (default appearance) and of each button (rounded appearance). Defaults to `--l-color-border`.
+ * @cssproperty --border-radius - Border radius of the stepper container (default appearance). Defaults to `--radius-md`.
  */
 export class LuxenInputStepper extends LuxenElement {
     constructor() {

package/dist/elements/popover/popover.css

@@ -1,14 +1,14 @@
 :host {
   --background: var(--l-color-bg-surface, Canvas);
   --color: inherit;
-  --radius: 8px;
+  --border-radius: 6px;
   --max-width: 320px;
-  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --arrow-size: 8px;
   --show-duration: 150ms;
   --hide-duration: 150ms;
 
-  --_border-color: var(--l-color-border, light-dark(#e5e7eb, #374151));
+  --_border-color: var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
 
   display: contents;
 }
@@ -20,9 +20,8 @@
   box-sizing: border-box;
   width: max-content;
   max-width: var(--max-width);
-  padding: 12px 16px;
   border: 1px solid var(--_border-color);
-  border-radius: var(--radius);
+  border-radius: var(--border-radius);
   background: var(--background);
   color: var(--color);
   font-size: 0.875rem;
@@ -30,6 +29,11 @@
   box-shadow: var(--shadow);
 }
 
+:host([full-width]) [popover] {
+  width: 100vw;
+  max-width: none;
+}
+
 i {
   position: absolute;
   display: block;

package/dist/elements/popover/popover.d.ts

@@ -12,7 +12,7 @@ import type { Placement } from '@floating-ui/dom';
  *
  * @cssproperty --background - Background color. Default: `Canvas`.
  * @cssproperty --color - Text color. Default: inherited.
- * @cssproperty --radius - Border radius. Default `8px`.
+ * @cssproperty --border-radius - Border radius. Default `8px`.
  * @cssproperty --max-width - Maximum width. Default `320px`.
  * @cssproperty --shadow - Box shadow.
  * @cssproperty --arrow-size - Arrow size. Default `8px`.
@@ -33,6 +33,8 @@ export declare class LuxenPopover extends LuxenElement {
     accessor open: boolean;
     /** Hide the directional arrow. */
     accessor withoutArrow: boolean;
+    /** Stretch the popover to the viewport width. Useful for mega menus. */
+    accessor fullWidth: boolean;
     /** Space-separated list of trigger modes: `click`, `hover`, `focus`, `manual`. */
     accessor trigger: string;
     private _hasTrigger;

package/dist/elements/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAOd;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAY;IAEzC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAW;IAE3B,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IA0B/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/html/elements/popover/popover.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQlD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,UAAU,CAAuB;IAEzC,OAAO,CAAC,SAAS,CAOd;IAEH,yDAAyD;IAEzD,QAAQ,CAAC,GAAG,SAAM;IAElB,8CAA8C;IAE9C,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAY;IAEzC,sDAAsD;IAEtD,QAAQ,CAAC,QAAQ,SAAK;IAEtB,6CAA6C;IAE7C,QAAQ,CAAC,IAAI,UAAS;IAEtB,kCAAkC;IAElC,QAAQ,CAAC,YAAY,UAAS;IAE9B,wEAAwE;IAExE,QAAQ,CAAC,SAAS,UAAS;IAE3B,kFAAkF;IAElF,QAAQ,CAAC,OAAO,SAAW;IAE3B,OAAO,CAAC,WAAW;IAInB,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,YAAY;IAKX,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAU9C,IAAI;IAIJ,IAAI;IAIJ,MAAM;YAIQ,iBAAiB;IA8B/B,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAGrB;IAEF,OAAO,CAAC,UAAU,CAEhB;IACF,OAAO,CAAC,WAAW,CAEjB;IACF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,UAAU,CAKhB;IAEF,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,uBAAuB;IAOtB,MAAM;CAoBhB"}