luxen-ui 0.3.0 → 0.5.0

package/cdn/elements/carousel-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,iBAAiB,CAAC;KACtC;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/carousel-item/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,cAAc,iBAAiB,CAAC;AAGhC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,YAAY,CAAC;KACjC;CACF"}

package/cdn/elements/carousel-item/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenCarouselItem as t}from"./carousel-item.js";e(`carousel-item`,t);
+import{define as e}from"../../define.js";import{CarouselItem as t}from"./carousel-item.js";e(`carousel-item`,t);
 //# sourceMappingURL=index.js.map

package/cdn/elements/carousel-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/carousel-item/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenCarouselItem } from './carousel-item';\nexport * from './carousel-item';\ndefine('carousel-item', LuxenCarouselItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-carousel-item': LuxenCarouselItem;\n  }\n}\n"],"mappings":"gGAGA,EAAO,gBAAiB,EAAkB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/carousel-item/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { CarouselItem } from './carousel-item';\nexport * from './carousel-item';\ndefine('carousel-item', CarouselItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-carousel-item': CarouselItem;\n  }\n}\n"],"mappings":"2FAGA,EAAO,gBAAiB,EAAa"}

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

@@ -30,7 +30,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  * @event hide - Fired when the dialog is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
  */
-export declare class LuxenDialog extends LuxenElement {
+export declare class Dialog extends LuxenElement {
     static styles: import('lit').CSSResult[];
     /** Dialog title rendered in the header. */
     title: string;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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,MAAO,SAAQ,YAAY;IACtC,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,4 +1,4 @@
-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`
+import{i as e,n as t}from"../../chunks/lit.js";import{LuxenElement as n}from"../../shared/luxen-element.js";import{i as r,n 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}
@@ -18,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([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};
+    `}};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 Dialog};
 //# 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 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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"}
+{"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 Dialog 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      void 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    void 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.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  --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/* Pin body and footer so the layout stays correct when [without-header]\n   removes the header and only two children auto-place into the grid. */\n[part='body'] {\n  grid-row: 2;\n  padding-inline: var(--padding);\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  grid-row: 3;\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: var(--padding);\n}\n\n/* Without a header, the body has to provide its own block-start padding\n   (normally inherited visually from the header padding above it). */\n:host([without-header]) [part='body'] {\n  padding-block-start: 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,g5CAAc"}
+{"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/* Pin body and footer so the layout stays correct when [without-header]\n   removes the header and only two children auto-place into the grid. */\n[part='body'] {\n  grid-row: 2;\n  padding-inline: var(--padding);\n  overflow-y: auto;\n}\n\n[part='footer'] {\n  grid-row: 3;\n  display: flex;\n  place-content: end;\n  gap: 0.5rem;\n  padding: var(--padding);\n}\n\n/* Without a header, the body has to provide its own block-start padding\n   (normally inherited visually from the header padding above it). */\n:host([without-header]) [part='body'] {\n  padding-block-start: 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,EAAU,84CAAI"}

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

@@ -1,8 +1,8 @@
-import { LuxenDialog } from './dialog';
+import { Dialog } from './dialog';
 export * from './dialog';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-dialog': LuxenDialog;
+        'l-dialog': Dialog;
     }
 }
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,WAAW,CAAC;KACzB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/cdn/elements/dialog/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenDialog as t}from"./dialog.js";e(`dialog`,t);
+import{define as e}from"../../define.js";import{Dialog as t}from"./dialog.js";e(`dialog`,t);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/dialog/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenDialog } from './dialog';\nexport * from './dialog';\ndefine('dialog', LuxenDialog);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-dialog': LuxenDialog;\n  }\n}\n"],"mappings":"mFAGA,EAAO,SAAU,EAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/dialog/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Dialog } from './dialog';\nexport * from './dialog';\ndefine('dialog', Dialog);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-dialog': Dialog;\n  }\n}\n"],"mappings":"8EAGA,EAAO,SAAU,EAAO"}

package/cdn/elements/divider/divider.d.ts

@@ -11,7 +11,7 @@ export type DividerOrientation = 'horizontal' | 'vertical';
  *
  * @customElement l-divider
  */
-export declare class LuxenDivider extends LuxenElement {
+export declare class Divider extends LuxenElement {
     createRenderRoot(): this;
     /** The divider's orientation. */
     orientation: DividerOrientation;

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

@@ -1 +1 @@
-{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/html/elements/divider/divider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,qBAAa,YAAa,SAAQ,YAAY;IACnC,gBAAgB;IAIzB,iCAAiC;IAEjC,WAAW,EAAE,kBAAkB,CAAgB;IAE/C,2DAA2D;IAE3D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEN,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAS/C"}
+{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../../src/html/elements/divider/divider.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,qBAAa,OAAQ,SAAQ,YAAY;IAC9B,gBAAgB;IAIzB,iCAAiC;IAEjC,WAAW,EAAE,kBAAkB,CAAgB;IAE/C,2DAA2D;IAE3D,KAAK,CAAC,EAAE,MAAM,CAAC;IAEN,iBAAiB;IAKjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAS/C"}

package/cdn/elements/divider/divider.js

@@ -1,2 +1,2 @@
-import{LuxenElement as e}from"../../shared/luxen-element.js";import{a as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this.orientation=`horizontal`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`separator`)}updated(e){e.has(`orientation`)&&(this.orientation===`vertical`?this.setAttribute(`aria-orientation`,`vertical`):this.removeAttribute(`aria-orientation`))}};n([t({reflect:!0})],r.prototype,`orientation`,void 0),n([t({reflect:!0})],r.prototype,`label`,void 0);export{r as LuxenDivider};
+import{LuxenElement as e}from"../../shared/luxen-element.js";import{i as t,t as n}from"../../chunks/decorate.js";var r=class extends e{constructor(...e){super(...e),this.orientation=`horizontal`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute(`role`,`separator`)}updated(e){e.has(`orientation`)&&(this.orientation===`vertical`?this.setAttribute(`aria-orientation`,`vertical`):this.removeAttribute(`aria-orientation`))}};n([t({reflect:!0})],r.prototype,`orientation`,void 0),n([t({reflect:!0})],r.prototype,`label`,void 0);export{r as Divider};
 //# sourceMappingURL=divider.js.map

package/cdn/elements/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","names":[],"sources":["../../../src/html/elements/divider/divider.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * @summary Dividers visually separate or group elements.\n *\n * @example <l-divider></l-divider>\n *\n * @cssproperty --color - The color of the divider line.\n * @cssproperty --width - The thickness of the divider line.\n * @cssproperty --spacing - The spacing between the divider and its neighboring elements.\n *\n * @customElement l-divider\n */\nexport class LuxenDivider extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** The divider's orientation. */\n  @property({ reflect: true })\n  orientation: DividerOrientation = 'horizontal';\n\n  /** Optional text label displayed over the divider line. */\n  @property({ reflect: true })\n  label?: string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'separator');\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('orientation')) {\n      if (this.orientation === 'vertical') {\n        this.setAttribute('aria-orientation', 'vertical');\n      } else {\n        this.removeAttribute('aria-orientation');\n      }\n    }\n  }\n}\n"],"mappings":"iHAgBA,IAAa,EAAb,cAAkC,CAAa,gDAOX,aANlC,kBAA4B,CAC1B,OAAO,KAWT,mBAA6B,CAC3B,MAAM,mBAAmB,CACzB,KAAK,aAAa,OAAQ,YAAY,CAGxC,QAAiB,EAA+B,CAC1C,EAAQ,IAAI,cAAc,GACxB,KAAK,cAAgB,WACvB,KAAK,aAAa,mBAAoB,WAAW,CAEjD,KAAK,gBAAgB,mBAAmB,OAjB7C,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IAI3B,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,QAAA,IAAA,GAAA"}
+{"version":3,"file":"divider.js","names":[],"sources":["../../../src/html/elements/divider/divider.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n/**\n * @summary Dividers visually separate or group elements.\n *\n * @example <l-divider></l-divider>\n *\n * @cssproperty --color - The color of the divider line.\n * @cssproperty --width - The thickness of the divider line.\n * @cssproperty --spacing - The spacing between the divider and its neighboring elements.\n *\n * @customElement l-divider\n */\nexport class Divider extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  /** The divider's orientation. */\n  @property({ reflect: true })\n  orientation: DividerOrientation = 'horizontal';\n\n  /** Optional text label displayed over the divider line. */\n  @property({ reflect: true })\n  label?: string;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'separator');\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('orientation')) {\n      if (this.orientation === 'vertical') {\n        this.setAttribute('aria-orientation', 'vertical');\n      } else {\n        this.removeAttribute('aria-orientation');\n      }\n    }\n  }\n}\n"],"mappings":"iHAgBA,IAAa,EAAb,cAA6B,CAAa,gDAON,aANlC,kBAA4B,CAC1B,OAAO,KAWT,mBAA6B,CAC3B,MAAM,mBAAmB,CACzB,KAAK,aAAa,OAAQ,YAAY,CAGxC,QAAiB,EAA+B,CAC1C,EAAQ,IAAI,cAAc,GACxB,KAAK,cAAgB,WACvB,KAAK,aAAa,mBAAoB,WAAW,CAEjD,KAAK,gBAAgB,mBAAmB,OAjB7C,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,cAAA,IAAA,GAAA,IAI3B,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,QAAA,IAAA,GAAA"}

package/cdn/elements/divider/index.d.ts

@@ -1,8 +1,8 @@
-import { LuxenDivider } from './divider';
+import { Divider } from './divider';
 export * from './divider';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-divider': LuxenDivider;
+        'l-divider': Divider;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/cdn/elements/divider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/divider/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,YAAY,CAAC;KAC3B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/divider/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,WAAW,CAAC;AAG1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,OAAO,CAAC;KACtB;CACF"}

package/cdn/elements/divider/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenDivider as t}from"./divider.js";e(`divider`,t);
+import{define as e}from"../../define.js";import{Divider as t}from"./divider.js";e(`divider`,t);
 //# sourceMappingURL=index.js.map

package/cdn/elements/divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/divider/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenDivider } from './divider';\nexport * from './divider';\ndefine('divider', LuxenDivider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-divider': LuxenDivider;\n  }\n}\n"],"mappings":"qFAGA,EAAO,UAAW,EAAa"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/divider/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Divider } from './divider';\nexport * from './divider';\ndefine('divider', Divider);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-divider': Divider;\n  }\n}\n"],"mappings":"gFAGA,EAAO,UAAW,EAAQ"}

package/cdn/elements/drawer/drawer.d.ts

@@ -1,4 +1,4 @@
-import { LuxenDialog } from '../dialog/dialog';
+import { Dialog } from '../dialog/dialog';
 /**
  * A drawer that slides in from a screen edge. Extends `<l-dialog>`.
  *
@@ -26,7 +26,7 @@ import { LuxenDialog } from '../dialog/dialog';
  * @event hide - Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.
  * @event after-hide - Fired after the close animation completes.
  */
-export declare class LuxenDrawer extends LuxenDialog {
+export declare class Drawer extends Dialog {
     static styles: import('lit').CSSResult[];
     /** Edge the drawer slides in from. Defaults to the start (inline-start) edge. */
     placement?: 'start' | 'end' | 'bottom';

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/drawer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAM/C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,WAAY,SAAQ,WAAW;IAC1C,OAAgB,MAAM,4BAA4C;IAElE,iFAAiF;IAEjF,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/drawer.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAM1C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAO,SAAQ,MAAM;IAChC,OAAgB,MAAM,4BAA4C;IAElE,iFAAiF;IAEjF,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;CACxC"}

package/cdn/elements/drawer/drawer.js

@@ -1,2 +1,2 @@
-import{c as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/decorate.js";import r from"../../shared/styles/host.styles.js";import i from"../dialog/dialog.styles.js";import{LuxenDialog as a}from"../dialog/dialog.js";var o=e(`:host{--size:320px;--border-radius:.75rem}dialog{width:min(var(--size), 100dvw);max-inline-size:100dvw;height:100dvh;border-radius:0 var(--border-radius) var(--border-radius) 0;opacity:1;max-block-size:100dvh;margin:0;transition-property:translate,display,overlay;inset:0;translate:-100%}dialog[open]{translate:0}@starting-style{dialog[open]{translate:-100%}}:host([placement=end]) dialog{border-radius:var(--border-radius) 0 0 var(--border-radius);margin-inline-start:auto;translate:100%}:host([placement=end]) dialog[open]{translate:0}@starting-style{:host([placement=end]) dialog[open]{translate:100%}}:host([placement=bottom]) dialog{width:100dvw;max-inline-size:100dvw;height:min(var(--size), 100dvh);border-radius:var(--border-radius) var(--border-radius) 0 0;max-block-size:100dvh;margin-block-start:auto;translate:0 100%}:host([placement=bottom]) dialog[open]{translate:0}@starting-style{:host([placement=bottom]) dialog[open]{translate:0 100%}}`),s=class extends a{static{this.styles=[r,i,o]}};n([t({reflect:!0})],s.prototype,`placement`,void 0);export{s as LuxenDrawer};
+import{c as e}from"../../chunks/lit.js";import{i as t,t as n}from"../../chunks/decorate.js";import r from"../../shared/styles/host.styles.js";import i from"../dialog/dialog.styles.js";import{Dialog as a}from"../dialog/dialog.js";var o=e(`:host{--size:320px;--border-radius:.75rem}dialog{width:min(var(--size), 100dvw);max-inline-size:100dvw;height:100dvh;border-radius:0 var(--border-radius) var(--border-radius) 0;opacity:1;max-block-size:100dvh;margin:0;transition-property:translate,display,overlay;inset:0;translate:-100%}dialog[open]{translate:0}@starting-style{dialog[open]{translate:-100%}}:host([placement=end]) dialog{border-radius:var(--border-radius) 0 0 var(--border-radius);margin-inline-start:auto;translate:100%}:host([placement=end]) dialog[open]{translate:0}@starting-style{:host([placement=end]) dialog[open]{translate:100%}}:host([placement=bottom]) dialog{width:100dvw;max-inline-size:100dvw;height:min(var(--size), 100dvh);border-radius:var(--border-radius) var(--border-radius) 0 0;max-block-size:100dvh;margin-block-start:auto;translate:0 100%}:host([placement=bottom]) dialog[open]{translate:0}@starting-style{:host([placement=bottom]) dialog[open]{translate:0 100%}}`),s=class extends a{static{this.styles=[r,i,o]}};n([t({reflect:!0})],s.prototype,`placement`,void 0);export{s as Drawer};
 //# sourceMappingURL=drawer.js.map

package/cdn/elements/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":[],"sources":["../../../src/html/elements/drawer/drawer.css?inline","../../../src/html/elements/drawer/drawer.ts"],"sourcesContent":[":host {\n  --size: 320px;\n  --border-radius: 0.75rem;\n}\n\n/* Override dialog's opacity fade with a slide from the inline-start edge. */\ndialog {\n  inset: 0;\n  margin: 0;\n  width: min(var(--size), 100dvw);\n  max-inline-size: 100dvw;\n  height: 100dvh;\n  max-block-size: 100dvh;\n  border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  opacity: 1;\n  translate: -100% 0;\n  transition-property: translate, display, overlay;\n}\n\ndialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  dialog[open] {\n    translate: -100% 0;\n  }\n}\n\n/* Inline-end edge */\n:host([placement='end']) dialog {\n  border-radius: var(--border-radius) 0 0 var(--border-radius);\n  margin-inline-start: auto;\n  translate: 100% 0;\n}\n\n:host([placement='end']) dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  :host([placement='end']) dialog[open] {\n    translate: 100% 0;\n  }\n}\n\n/* Block-end (bottom) edge */\n:host([placement='bottom']) dialog {\n  width: 100dvw;\n  max-inline-size: 100dvw;\n  height: min(var(--size), 100dvh);\n  max-block-size: 100dvh;\n  margin-block-start: auto;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  translate: 0 100%;\n}\n\n:host([placement='bottom']) dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  :host([placement='bottom']) dialog[open] {\n    translate: 0 100%;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles';\nimport { LuxenDialog } from '../dialog/dialog';\nimport dialogStyles from '../dialog/dialog.styles';\nimport rawDrawerStyles from './drawer.css?inline';\n\nconst drawerStyles = unsafeCSS(rawDrawerStyles);\n\n/**\n * A drawer that slides in from a screen edge. Extends `<l-dialog>`.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). Always opens as modal.\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 drawer 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 --size - Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`.\n * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.75rem`.\n * @cssproperty --show-duration - Open transition duration. Default `200ms`.\n * @cssproperty --hide-duration - Close transition duration. Default `200ms`.\n * @cssproperty --backdrop - Backdrop color.\n *\n * @event show - Fired when the drawer opens. Not cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired when the drawer 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 LuxenDrawer extends LuxenDialog {\n  static override styles = [hostStyles, dialogStyles, drawerStyles];\n\n  /** Edge the drawer slides in from. Defaults to the start (inline-start) edge. */\n  @property({ reflect: true })\n  placement?: 'start' | 'end' | 'bottom';\n}\n"],"mappings":"0OCOA,IAAM,EAAe,87BAA0B,CA6BlC,EAAb,cAAiC,CAAY,oBAClB,CAAC,EAAY,EAAc,EAAa,MAGhE,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,YAAA,IAAA,GAAA"}
+{"version":3,"file":"drawer.js","names":[],"sources":["../../../src/html/elements/drawer/drawer.css?inline","../../../src/html/elements/drawer/drawer.ts"],"sourcesContent":[":host {\n  --size: 320px;\n  --border-radius: 0.75rem;\n}\n\n/* Override dialog's opacity fade with a slide from the inline-start edge. */\ndialog {\n  inset: 0;\n  margin: 0;\n  width: min(var(--size), 100dvw);\n  max-inline-size: 100dvw;\n  height: 100dvh;\n  max-block-size: 100dvh;\n  border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  opacity: 1;\n  translate: -100% 0;\n  transition-property: translate, display, overlay;\n}\n\ndialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  dialog[open] {\n    translate: -100% 0;\n  }\n}\n\n/* Inline-end edge */\n:host([placement='end']) dialog {\n  border-radius: var(--border-radius) 0 0 var(--border-radius);\n  margin-inline-start: auto;\n  translate: 100% 0;\n}\n\n:host([placement='end']) dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  :host([placement='end']) dialog[open] {\n    translate: 100% 0;\n  }\n}\n\n/* Block-end (bottom) edge */\n:host([placement='bottom']) dialog {\n  width: 100dvw;\n  max-inline-size: 100dvw;\n  height: min(var(--size), 100dvh);\n  max-block-size: 100dvh;\n  margin-block-start: auto;\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  translate: 0 100%;\n}\n\n:host([placement='bottom']) dialog[open] {\n  translate: 0 0;\n}\n\n@starting-style {\n  :host([placement='bottom']) dialog[open] {\n    translate: 0 100%;\n  }\n}\n","import { unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles';\nimport { Dialog } from '../dialog/dialog';\nimport dialogStyles from '../dialog/dialog.styles';\nimport rawDrawerStyles from './drawer.css?inline';\n\nconst drawerStyles = unsafeCSS(rawDrawerStyles);\n\n/**\n * A drawer that slides in from a screen edge. Extends `<l-dialog>`.\n *\n * Open and close by toggling the `open` property (or the `--show` / `--hide`\n * Invoker commands). Always opens as modal.\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 drawer 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 --size - Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`.\n * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.75rem`.\n * @cssproperty --show-duration - Open transition duration. Default `200ms`.\n * @cssproperty --hide-duration - Close transition duration. Default `200ms`.\n * @cssproperty --backdrop - Backdrop color.\n *\n * @event show - Fired when the drawer opens. Not cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired when the drawer 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 Drawer extends Dialog {\n  static override styles = [hostStyles, dialogStyles, drawerStyles];\n\n  /** Edge the drawer slides in from. Defaults to the start (inline-start) edge. */\n  @property({ reflect: true })\n  placement?: 'start' | 'end' | 'bottom';\n}\n"],"mappings":"qOCOA,IAAM,EAAe,EAAU,47BAAgB,CA6BlC,EAAb,cAA4B,CAAO,oBACR,CAAC,EAAY,EAAc,EAAa,MAGhE,EAAS,CAAE,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,YAAA,IAAA,GAAA"}

package/cdn/elements/drawer/index.d.ts

@@ -1,8 +1,8 @@
-import { LuxenDrawer } from './drawer';
+import { Drawer } from './drawer';
 export * from './drawer';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-drawer': LuxenDrawer;
+        'l-drawer': Drawer;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/cdn/elements/drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,WAAW,CAAC;KACzB;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/drawer/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,cAAc,UAAU,CAAC;AAGzB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,MAAM,CAAC;KACpB;CACF"}

package/cdn/elements/drawer/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenDrawer as t}from"./drawer.js";e(`drawer`,t);
+import{define as e}from"../../define.js";import{Drawer as t}from"./drawer.js";e(`drawer`,t);
 //# sourceMappingURL=index.js.map

package/cdn/elements/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/drawer/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenDrawer } from './drawer';\nexport * from './drawer';\ndefine('drawer', LuxenDrawer);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-drawer': LuxenDrawer;\n  }\n}\n"],"mappings":"mFAGA,EAAO,SAAU,EAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/drawer/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Drawer } from './drawer';\nexport * from './drawer';\ndefine('drawer', Drawer);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-drawer': Drawer;\n  }\n}\n"],"mappings":"8EAGA,EAAO,SAAU,EAAO"}

package/cdn/elements/dropdown/dropdown.d.ts

@@ -5,12 +5,15 @@ import { Placement } from '@floating-ui/dom';
  * A dropdown menu anchored to a trigger element.
  *
  * @slot trigger - The element that triggers the dropdown.
- * @slot - Menu content (`l-dropdown-item` elements).
+ * @slot header - Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.
+ * @slot - Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.
+ * @slot footer - Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.
  *
  * @csspart panel - The floating menu container.
  *
  * @cssproperty --background - Panel background color.
- * @cssproperty --radius - Panel border radius. Default `8px`.
+ * @cssproperty --border-radius - Panel border radius. Default `8px`.
+ * @cssproperty --padding - Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.
  * @cssproperty --shadow - Panel box shadow.
  * @cssproperty --show-duration - Show animation duration in ms. Default `150`.
  * @cssproperty --hide-duration - Hide animation duration in ms. Default `150`.
@@ -19,9 +22,9 @@ import { Placement } from '@floating-ui/dom';
  * @event after-show - Fired after the open animation completes.
  * @event hide - Fired before the dropdown closes. Cancelable.
  * @event after-hide - Fired after the close animation completes.
- * @event select - Fired when an item is selected. Detail: `{ item: LuxenDropdownItem }`.
+ * @event select - Fired when an item is selected. Detail: `{ item: DropdownItem }`.
  */
-export declare class LuxenDropdown extends LuxenElement {
+export declare class Dropdown extends LuxenElement {
     static styles: import('lit').CSSResult[];
     private _floating;
     private _typeaheadBuffer;

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,aAAc,SAAQ,YAAY;IAC7C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAqBhB"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,QAAS,SAAQ,YAAY;IACxC,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,SAAS,CAId;IAEH,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,iBAAiB,CAAK;IAE9B,oCAAoC;IAEpC,QAAQ,CAAC,IAAI,UAAS;IAEtB,wCAAwC;IAExC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAkB;IAE/C,2CAA2C;IAE3C,QAAQ,CAAC,QAAQ,SAAK;IAEtB,qCAAqC;IAErC,QAAQ,CAAC,QAAQ,UAAS;IAE1B,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAOpB,IAAI;IAKJ,IAAI;IAKJ,MAAM;IAOG,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;YAQhC,iBAAiB;IAyB/B,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,eAAe,CAQrB;IAEF,OAAO,CAAC,iBAAiB,CAYvB;IAEF,OAAO,CAAC,eAAe,CAiCrB;IAEF,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAWnB,2DAA2D;IAC3D,OAAO,CAAC,SAAS,CAMf;IAEO,MAAM;CAwBhB"}

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: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`
+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{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{--padding:.25rem;--background:var(--l-color-bg-surface,Canvas);--border-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);padding:var(--padding);border:1px solid var(--l-color-border-overlay,var(--lightningcss-light,#e5e7eb)var(--lightningcss-dark,#374151));border-radius:var(--border-radius);background:var(--background);color:var(--l-color-text-primary,CanvasText);box-shadow:var(--shadow);margin:0;font-size:.875rem;line-height:1.5;overflow:visible}::slotted(hr){height:1px;margin-block:var(--padding);margin-inline:calc(var(--padding) * -1);background:var(--l-color-divider);border:0}`),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=e=>{this.disabled||(this.toggle(),this.open&&e.detail===0&&requestAnimationFrame(()=>this._focusFirstItem()))},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}
@@ -9,12 +9,15 @@ import{tagName as e}from"../../registry.js";import{c as t,i as n}from"../../chun
       <div
         popover="auto"
         part="panel"
-        role="menu"
         @keydown=${this._onPanelKeyDown}
         @click=${this._onItemClick}
         @toggle=${this._onToggle}
       >
-        <slot></slot>
+        <slot name="header"></slot>
+        <div role="menu">
+          <slot></slot>
+        </div>
+        <slot name="footer"></slot>
       </div>
-    `}};a([i({type:Boolean,reflect:!0})],l.prototype,`open`,null),a([i()],l.prototype,`placement`,null),a([i({type:Number})],l.prototype,`distance`,null),a([i({type:Boolean,reflect:!0})],l.prototype,`disabled`,null);export{l as LuxenDropdown};
+    `}};a([i({type:Boolean,reflect:!0})],l.prototype,`open`,null),a([i()],l.prototype,`placement`,null),a([i({type:Number})],l.prototype,`distance`,null),a([i({type:Boolean,reflect:!0})],l.prototype,`disabled`,null);export{l as Dropdown};
 //# sourceMappingURL=dropdown.js.map

package/cdn/elements/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":[],"sources":["../../../src/html/elements/dropdown/dropdown.css?inline","../../../src/html/elements/dropdown/dropdown.ts"],"sourcesContent":[":host {\n  --background: var(--l-color-bg-surface, Canvas);\n  --radius: 6px;\n  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);\n  --show-duration: 150;\n  --hide-duration: 150;\n\n  display: inline-block;\n  position: relative;\n}\n\n.trigger {\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: anchor-size(width);\n  padding: 0.25rem;\n  margin: 0;\n  border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));\n  border-radius: var(--radius);\n  background: var(--background);\n  color: var(--l-color-text-primary, CanvasText);\n  box-shadow: var(--shadow);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n","import { html, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover';\nimport { tagName } from '../../registry';\nimport type { LuxenDropdownItem } from '../dropdown-item/dropdown-item';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './dropdown.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A dropdown menu anchored to a trigger element.\n *\n * @slot trigger - The element that triggers the dropdown.\n * @slot - Menu content (`l-dropdown-item` elements).\n *\n * @csspart panel - The floating menu container.\n *\n * @cssproperty --background - Panel background color.\n * @cssproperty --radius - Panel border radius. Default `8px`.\n * @cssproperty --shadow - Panel box shadow.\n * @cssproperty --show-duration - Show animation duration in ms. Default `150`.\n * @cssproperty --hide-duration - Hide animation duration in ms. Default `150`.\n *\n * @event show - Fired before the dropdown opens. Cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired before the dropdown closes. Cancelable.\n * @event after-hide - Fired after the close animation completes.\n * @event select - Fired when an item is selected. Detail: `{ item: LuxenDropdownItem }`.\n */\nexport class LuxenDropdown extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._triggerEl,\n    getFloatingElement: () => this._panelEl,\n    getArrowElement: () => null,\n  });\n\n  private _typeaheadBuffer = '';\n  private _typeaheadTimeout = 0;\n\n  /** Whether the dropdown is open. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Preferred placement of the panel. */\n  @property()\n  accessor placement: Placement = 'bottom-start';\n\n  /** Distance in pixels from the trigger. */\n  @property({ type: Number })\n  accessor distance = 4;\n\n  /** Disables the dropdown trigger. */\n  @property({ type: Boolean, reflect: true })\n  accessor disabled = false;\n\n  private get _triggerEl(): HTMLElement | null {\n    const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('.trigger slot');\n    return (slot?.assignedElements()[0] as HTMLElement) ?? null;\n  }\n\n  private get _panelEl(): HTMLElement | null {\n    return this.shadowRoot!.querySelector<HTMLElement>('[popover]');\n  }\n\n  private _getItems(): LuxenDropdownItem[] {\n    const menuSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!menuSlot) return [];\n    return (menuSlot.assignedElements() as LuxenDropdownItem[]).filter(\n      (el) => el.tagName === tagName('dropdown-item').toUpperCase() && !el.disabled,\n    );\n  }\n\n  private _getAllItems(): LuxenDropdownItem[] {\n    const menuSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!menuSlot) return [];\n    return (menuSlot.assignedElements() as LuxenDropdownItem[]).filter(\n      (el) => el.tagName === tagName('dropdown-item').toUpperCase(),\n    );\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  // --- Public API ---\n\n  show() {\n    if (this.open || this.disabled) return;\n    if (this.emit('show', { cancelable: true })) this.open = true;\n  }\n\n  hide() {\n    if (!this.open) return;\n    if (this.emit('hide', { cancelable: true })) this.open = false;\n  }\n\n  toggle() {\n    if (this.open) this.hide();\n    else this.show();\n  }\n\n  // --- Lifecycle ---\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      this._handleOpenChange();\n    }\n  }\n\n  // --- Open/Close ---\n\n  private async _handleOpenChange() {\n    const panel = this._panelEl;\n    if (!panel) return;\n\n    const posOpts = { placement: this.placement, distance: this.distance };\n\n    if (this.open) {\n      panel.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(panel, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._triggerEl?.setAttribute('aria-expanded', 'true');\n      this.emit('after-show');\n    } else {\n      this._floating.stopPositioning();\n      this._triggerEl?.setAttribute('aria-expanded', 'false');\n      await this._floating.animateHide(panel, this._getDuration('--hide-duration'));\n      if (panel.matches(':popover-open')) panel.hidePopover();\n      this.emit('after-hide');\n    }\n  }\n\n  // --- Focus management ---\n\n  private _setActiveItem(item: LuxenDropdownItem) {\n    const itemEl = item.shadowRoot!.querySelector<HTMLElement>('.item');\n    if (!itemEl) return;\n\n    // Reset all items\n    for (const i of this._getAllItems()) {\n      const el = i.shadowRoot!.querySelector<HTMLElement>('.item');\n      el?.setAttribute('tabindex', '-1');\n    }\n\n    itemEl.setAttribute('tabindex', '0');\n    itemEl.focus();\n  }\n\n  private _focusFirstItem() {\n    const items = this._getItems();\n    if (items.length) this._setActiveItem(items[0]);\n  }\n\n  private _focusLastItem() {\n    const items = this._getItems();\n    if (items.length) this._setActiveItem(items[items.length - 1]);\n  }\n\n  private _getCurrentItem(): LuxenDropdownItem | null {\n    const items = this._getItems();\n    return (\n      items.find((item) => {\n        const el = item.shadowRoot!.querySelector<HTMLElement>('.item');\n        return el?.getAttribute('tabindex') === '0' && item.shadowRoot!.activeElement === el;\n      }) ?? null\n    );\n  }\n\n  private _focusNextItem() {\n    const items = this._getItems();\n    const current = this._getCurrentItem();\n    const index = current ? items.indexOf(current) : -1;\n    const next = items[(index + 1) % items.length];\n    if (next) this._setActiveItem(next);\n  }\n\n  private _focusPreviousItem() {\n    const items = this._getItems();\n    const current = this._getCurrentItem();\n    const index = current ? items.indexOf(current) : 0;\n    const prev = items[(index - 1 + items.length) % items.length];\n    if (prev) this._setActiveItem(prev);\n  }\n\n  // --- Typeahead ---\n\n  private _handleTypeahead(key: string) {\n    clearTimeout(this._typeaheadTimeout);\n    this._typeaheadBuffer += key.toLowerCase();\n    this._typeaheadTimeout = window.setTimeout(() => {\n      this._typeaheadBuffer = '';\n    }, 500);\n\n    const items = this._getItems();\n    const match = items.find((item) =>\n      item.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer),\n    );\n    if (match) this._setActiveItem(match);\n  }\n\n  // --- Event handlers ---\n\n  private _onTriggerClick = () => {\n    if (!this.disabled) this.toggle();\n  };\n\n  private _onTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.show();\n      requestAnimationFrame(() => this._focusFirstItem());\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.show();\n      requestAnimationFrame(() => this._focusLastItem());\n    }\n  };\n\n  private _onPanelKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        this._focusNextItem();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this._focusPreviousItem();\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusFirstItem();\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusLastItem();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.hide();\n        this._triggerEl?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._selectCurrentItem();\n        break;\n      default:\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          this._handleTypeahead(e.key);\n        }\n    }\n  };\n\n  private _onItemClick = (e: Event) => {\n    const item = (e.target as HTMLElement).closest<LuxenDropdownItem>(tagName('dropdown-item'));\n    if (item && !item.disabled) {\n      this._selectItem(item);\n    }\n  };\n\n  private _selectCurrentItem() {\n    const current = this._getCurrentItem();\n    if (current) this._selectItem(current);\n  }\n\n  private _selectItem(item: LuxenDropdownItem) {\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n    this.emit('select', { detail: { item } });\n    if (item.type !== 'checkbox') {\n      this.hide();\n      this._triggerEl?.focus();\n    }\n  }\n\n  /** Sync `open` when popover=\"auto\" light-dismiss fires. */\n  private _onToggle = (e: Event) => {\n    const toggleEvent = e as ToggleEvent;\n    if (toggleEvent.newState === 'closed' && this.open) {\n      this.open = false;\n      this._triggerEl?.setAttribute('aria-expanded', 'false');\n    }\n  };\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        @click=${this._onTriggerClick}\n        @keydown=${this._onTriggerKeyDown}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        popover=\"auto\"\n        part=\"panel\"\n        role=\"menu\"\n        @keydown=${this._onPanelKeyDown}\n        @click=${this._onItemClick}\n        @toggle=${this._onToggle}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../src/html/elements/dropdown/dropdown.css?inline","../../../src/html/elements/dropdown/dropdown.ts"],"sourcesContent":[":host {\n  --padding: 0.25rem;\n\n  --background: var(--l-color-bg-surface, Canvas);\n  --border-radius: 6px;\n  --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);\n  --show-duration: 150;\n  --hide-duration: 150;\n\n  display: inline-block;\n  position: relative;\n}\n\n.trigger {\n  display: contents;\n}\n\n[popover] {\n  inset: unset;\n  overflow: visible;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: anchor-size(width);\n  padding: var(--padding);\n  margin: 0;\n  border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--l-color-text-primary, CanvasText);\n  box-shadow: var(--shadow);\n  font-size: 0.875rem;\n  line-height: 1.5;\n}\n\n/* Lightweight separator alternative to <l-divider> — same dimensions, no extra import. */\n::slotted(hr) {\n  height: 1px;\n  margin-block: var(--padding);\n  margin-inline: calc(var(--padding) * -1);\n  border: 0;\n  background: var(--l-color-divider);\n}\n","import { html, unsafeCSS, type PropertyValues } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element';\nimport { property } from 'lit/decorators.js';\nimport type { Placement } from '@floating-ui/dom';\nimport { PopoverController } from '../../shared/controllers/popover';\nimport { tagName } from '../../registry';\nimport type { DropdownItem } from '../dropdown-item/dropdown-item';\nimport hostStyles from '../../shared/styles/host.styles';\nimport rawStyles from './dropdown.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A dropdown menu anchored to a trigger element.\n *\n * @slot trigger - The element that triggers the dropdown.\n * @slot header - Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items.\n * @slot - Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator.\n * @slot footer - Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items.\n *\n * @csspart panel - The floating menu container.\n *\n * @cssproperty --background - Panel background color.\n * @cssproperty --border-radius - Panel border radius. Default `8px`.\n * @cssproperty --padding - Panel inner padding. Default `0.25rem`. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges.\n * @cssproperty --shadow - Panel box shadow.\n * @cssproperty --show-duration - Show animation duration in ms. Default `150`.\n * @cssproperty --hide-duration - Hide animation duration in ms. Default `150`.\n *\n * @event show - Fired before the dropdown opens. Cancelable.\n * @event after-show - Fired after the open animation completes.\n * @event hide - Fired before the dropdown closes. Cancelable.\n * @event after-hide - Fired after the close animation completes.\n * @event select - Fired when an item is selected. Detail: `{ item: DropdownItem }`.\n */\nexport class Dropdown extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  private _floating = new PopoverController(this, {\n    getTriggerElement: () => this._triggerEl,\n    getFloatingElement: () => this._panelEl,\n    getArrowElement: () => null,\n  });\n\n  private _typeaheadBuffer = '';\n  private _typeaheadTimeout = 0;\n\n  /** Whether the dropdown is open. */\n  @property({ type: Boolean, reflect: true })\n  accessor open = false;\n\n  /** Preferred placement of the panel. */\n  @property()\n  accessor placement: Placement = 'bottom-start';\n\n  /** Distance in pixels from the trigger. */\n  @property({ type: Number })\n  accessor distance = 4;\n\n  /** Disables the dropdown trigger. */\n  @property({ type: Boolean, reflect: true })\n  accessor disabled = false;\n\n  private get _triggerEl(): HTMLElement | null {\n    const slot = this.shadowRoot!.querySelector<HTMLSlotElement>('.trigger slot');\n    return (slot?.assignedElements()[0] as HTMLElement) ?? null;\n  }\n\n  private get _panelEl(): HTMLElement | null {\n    return this.shadowRoot!.querySelector<HTMLElement>('[popover]');\n  }\n\n  private _getItems(): DropdownItem[] {\n    const menuSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!menuSlot) return [];\n    return (menuSlot.assignedElements() as DropdownItem[]).filter(\n      (el) => el.tagName === tagName('dropdown-item').toUpperCase() && !el.disabled,\n    );\n  }\n\n  private _getAllItems(): DropdownItem[] {\n    const menuSlot = this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (!menuSlot) return [];\n    return (menuSlot.assignedElements() as DropdownItem[]).filter(\n      (el) => el.tagName === tagName('dropdown-item').toUpperCase(),\n    );\n  }\n\n  private _getDuration(prop: '--show-duration' | '--hide-duration'): number {\n    const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));\n    return Number.isNaN(parsed) ? 150 : parsed;\n  }\n\n  // --- Public API ---\n\n  show() {\n    if (this.open || this.disabled) return;\n    if (this.emit('show', { cancelable: true })) this.open = true;\n  }\n\n  hide() {\n    if (!this.open) return;\n    if (this.emit('hide', { cancelable: true })) this.open = false;\n  }\n\n  toggle() {\n    if (this.open) this.hide();\n    else this.show();\n  }\n\n  // --- Lifecycle ---\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('open')) {\n      void this._handleOpenChange();\n    }\n  }\n\n  // --- Open/Close ---\n\n  private async _handleOpenChange() {\n    const panel = this._panelEl;\n    if (!panel) return;\n\n    const posOpts = { placement: this.placement, distance: this.distance };\n\n    if (this.open) {\n      panel.showPopover();\n      await this._floating.updatePosition(posOpts);\n      if (!this.open) return;\n      await this._floating.animateShow(panel, this._getDuration('--show-duration'));\n      this._floating.startPositioning(posOpts);\n      this._triggerEl?.setAttribute('aria-expanded', 'true');\n      this.emit('after-show');\n    } else {\n      this._floating.stopPositioning();\n      this._triggerEl?.setAttribute('aria-expanded', 'false');\n      await this._floating.animateHide(panel, this._getDuration('--hide-duration'));\n      if (panel.matches(':popover-open')) panel.hidePopover();\n      this.emit('after-hide');\n    }\n  }\n\n  // --- Focus management ---\n\n  private _setActiveItem(item: DropdownItem) {\n    const itemEl = item.shadowRoot!.querySelector<HTMLElement>('.item');\n    if (!itemEl) return;\n\n    // Reset all items\n    for (const i of this._getAllItems()) {\n      const el = i.shadowRoot!.querySelector<HTMLElement>('.item');\n      el?.setAttribute('tabindex', '-1');\n    }\n\n    itemEl.setAttribute('tabindex', '0');\n    itemEl.focus();\n  }\n\n  private _focusFirstItem() {\n    const items = this._getItems();\n    if (items.length) this._setActiveItem(items[0]);\n  }\n\n  private _focusLastItem() {\n    const items = this._getItems();\n    if (items.length) this._setActiveItem(items[items.length - 1]);\n  }\n\n  private _getCurrentItem(): DropdownItem | null {\n    const items = this._getItems();\n    return (\n      items.find((item) => {\n        const el = item.shadowRoot!.querySelector<HTMLElement>('.item');\n        return el?.getAttribute('tabindex') === '0' && item.shadowRoot!.activeElement === el;\n      }) ?? null\n    );\n  }\n\n  private _focusNextItem() {\n    const items = this._getItems();\n    const current = this._getCurrentItem();\n    const index = current ? items.indexOf(current) : -1;\n    const next = items[(index + 1) % items.length];\n    if (next) this._setActiveItem(next);\n  }\n\n  private _focusPreviousItem() {\n    const items = this._getItems();\n    const current = this._getCurrentItem();\n    const index = current ? items.indexOf(current) : 0;\n    const prev = items[(index - 1 + items.length) % items.length];\n    if (prev) this._setActiveItem(prev);\n  }\n\n  // --- Typeahead ---\n\n  private _handleTypeahead(key: string) {\n    clearTimeout(this._typeaheadTimeout);\n    this._typeaheadBuffer += key.toLowerCase();\n    this._typeaheadTimeout = window.setTimeout(() => {\n      this._typeaheadBuffer = '';\n    }, 500);\n\n    const items = this._getItems();\n    const match = items.find((item) =>\n      item.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer),\n    );\n    if (match) this._setActiveItem(match);\n  }\n\n  // --- Event handlers ---\n\n  private _onTriggerClick = (e: MouseEvent) => {\n    if (this.disabled) return;\n    this.toggle();\n    // Space/Enter on a native button dispatches click with detail=0; focus the\n    // first item so the menu is keyboard-navigable immediately on open.\n    if (this.open && e.detail === 0) {\n      requestAnimationFrame(() => this._focusFirstItem());\n    }\n  };\n\n  private _onTriggerKeyDown = (e: KeyboardEvent) => {\n    if (this.disabled) return;\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.show();\n      requestAnimationFrame(() => this._focusFirstItem());\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.show();\n      requestAnimationFrame(() => this._focusLastItem());\n    }\n  };\n\n  private _onPanelKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        this._focusNextItem();\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this._focusPreviousItem();\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._focusFirstItem();\n        break;\n      case 'End':\n        e.preventDefault();\n        this._focusLastItem();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.hide();\n        this._triggerEl?.focus();\n        break;\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        this._selectCurrentItem();\n        break;\n      default:\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          this._handleTypeahead(e.key);\n        }\n    }\n  };\n\n  private _onItemClick = (e: Event) => {\n    const item = (e.target as HTMLElement).closest<DropdownItem>(tagName('dropdown-item'));\n    if (item && !item.disabled) {\n      this._selectItem(item);\n    }\n  };\n\n  private _selectCurrentItem() {\n    const current = this._getCurrentItem();\n    if (current) this._selectItem(current);\n  }\n\n  private _selectItem(item: DropdownItem) {\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n    this.emit('select', { detail: { item } });\n    if (item.type !== 'checkbox') {\n      this.hide();\n      this._triggerEl?.focus();\n    }\n  }\n\n  /** Sync `open` when popover=\"auto\" light-dismiss fires. */\n  private _onToggle = (e: Event) => {\n    const toggleEvent = e as ToggleEvent;\n    if (toggleEvent.newState === 'closed' && this.open) {\n      this.open = false;\n      this._triggerEl?.setAttribute('aria-expanded', 'false');\n    }\n  };\n\n  override render() {\n    return html`\n      <div\n        class=\"trigger\"\n        @click=${this._onTriggerClick}\n        @keydown=${this._onTriggerKeyDown}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        popover=\"auto\"\n        part=\"panel\"\n        @keydown=${this._onPanelKeyDown}\n        @click=${this._onItemClick}\n        @toggle=${this._onToggle}\n      >\n        <slot name=\"header\"></slot>\n        <div role=\"menu\">\n          <slot></slot>\n        </div>\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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"}

package/cdn/elements/dropdown/index.d.ts

@@ -1,8 +1,8 @@
-import { LuxenDropdown } from './dropdown';
+import { Dropdown } from './dropdown';
 export * from './dropdown';
 declare global {
     interface HTMLElementTagNameMap {
-        'l-dropdown': LuxenDropdown;
+        'l-dropdown': Dropdown;
     }
 }
 //# sourceMappingURL=index.d.ts.map

package/cdn/elements/dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,aAAa,CAAC;KAC7B;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,cAAc,YAAY,CAAC;AAG3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,QAAQ,CAAC;KACxB;CACF"}

package/cdn/elements/dropdown/index.js

@@ -1,2 +1,2 @@
-import{define as e}from"../../define.js";import{LuxenDropdown as t}from"./dropdown.js";e(`dropdown`,t);
+import{define as e}from"../../define.js";import{Dropdown as t}from"./dropdown.js";e(`dropdown`,t);
 //# sourceMappingURL=index.js.map

package/cdn/elements/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/dropdown/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { LuxenDropdown } from './dropdown';\nexport * from './dropdown';\ndefine('dropdown', LuxenDropdown);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-dropdown': LuxenDropdown;\n  }\n}\n"],"mappings":"uFAGA,EAAO,WAAY,EAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/html/elements/dropdown/index.ts"],"sourcesContent":["import { define } from '../../define';\nimport { Dropdown } from './dropdown';\nexport * from './dropdown';\ndefine('dropdown', Dropdown);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'l-dropdown': Dropdown;\n  }\n}\n"],"mappings":"kFAGA,EAAO,WAAY,EAAS"}

package/cdn/elements/dropdown-item/dropdown-item.d.ts

@@ -8,7 +8,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  *
  * @cssproperty --color - Text color.
  */
-export declare class LuxenDropdownItem extends LuxenElement {
+export declare class DropdownItem extends LuxenElement {
     static styles: import('lit').CSSResult[];
     /** The value associated with this item. */
     accessor value: string;

package/cdn/elements/dropdown-item/dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;GAQG;AACH,qBAAa,iBAAkB,SAAQ,YAAY;IACjD,OAAgB,MAAM,4BAAwB;IAE9C,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAIb,MAAM;CAuChB"}
+{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAO1D;;;;;;;;GAQG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,2CAA2C;IAC3C,YAAY,IAAI,MAAM;IAIb,MAAM;CAuChB"}

package/cdn/elements/dropdown-item/dropdown-item.js

@@ -1,4 +1,4 @@
-import{c as e,i as t,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";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{cursor:pointer;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
+import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{cursor:pointer;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
       <div
         class="item"
         role=${e?`menuitemcheckbox`:`menuitem`}
@@ -30,5 +30,5 @@ import{c as e,i as t,n}from"../../chunks/lit.js";import{LuxenElement as r}from".
         <span class="label"><slot></slot></span>
         <slot name="suffix"></slot>
       </div>
-    `}};a([i()],c.prototype,`value`,null),a([i({type:Boolean,reflect:!0})],c.prototype,`disabled`,null),a([i()],c.prototype,`type`,null),a([i({type:Boolean,reflect:!0})],c.prototype,`checked`,null);export{c as LuxenDropdownItem};
+    `}};a([i()],c.prototype,`value`,null),a([i({type:Boolean,reflect:!0})],c.prototype,`disabled`,null),a([i()],c.prototype,`type`,null),a([i({type:Boolean,reflect:!0})],c.prototype,`checked`,null);export{c as DropdownItem};
 //# sourceMappingURL=dropdown-item.js.map