luxen-ui 0.3.0 → 0.5.0

package/dist/elements/dialog/dialog.js

@@ -51,7 +51,7 @@ if (typeof document !== 'undefined' && !(SCROLL_LOCK_SHEET in document)) {
  * @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 class LuxenDialog extends LuxenElement {
+export class Dialog extends LuxenElement {
     constructor() {
         super(...arguments);
         /** Dialog title rendered in the header. */
@@ -93,7 +93,7 @@ export class LuxenDialog extends LuxenElement {
             this.toggleAttribute('data-modal', true);
             this.dialog.showModal();
             this._focusAutofocusTarget();
-            this._emitAfter('after-show');
+            void this._emitAfter('after-show');
         }
         else if (!this.open && this.dialog.open) {
             // Closing — cancelable. Revert the property if consumer prevents.
@@ -130,7 +130,7 @@ export class LuxenDialog extends LuxenElement {
     _onNativeClose() {
         this.open = false;
         this.removeAttribute('data-modal');
-        this._emitAfter('after-hide');
+        void this._emitAfter('after-hide');
     }
     _onDialogClick(e) {
         // With `dialog { padding: 0 }`, `e.target === this.dialog` only fires
@@ -199,19 +199,19 @@ export class LuxenDialog extends LuxenElement {
     `;
     }
 }
-LuxenDialog.styles = [hostStyles, styles];
+Dialog.styles = [hostStyles, styles];
 __decorate([
     property()
-], LuxenDialog.prototype, "title", void 0);
+], Dialog.prototype, "title", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenDialog.prototype, "open", void 0);
+], Dialog.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'light-dismiss' })
-], LuxenDialog.prototype, "lightDismiss", void 0);
+], Dialog.prototype, "lightDismiss", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'without-header' })
-], LuxenDialog.prototype, "withoutHeader", void 0);
+], Dialog.prototype, "withoutHeader", void 0);
 __decorate([
     query('dialog')
-], LuxenDialog.prototype, "dialog", void 0);
+], Dialog.prototype, "dialog", void 0);

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

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenDialog } from './dialog';
+import { Dialog } from './dialog';
 export * from './dialog';
-define('dialog', LuxenDialog);
+define('dialog', Dialog);

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

@@ -17,7 +17,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  *
  * @customElement l-divider
  */
-export class LuxenDivider extends LuxenElement {
+export class Divider extends LuxenElement {
     constructor() {
         super(...arguments);
         /** The divider's orientation. */
@@ -43,7 +43,7 @@ export class LuxenDivider extends LuxenElement {
 }
 __decorate([
     property({ reflect: true })
-], LuxenDivider.prototype, "orientation", void 0);
+], Divider.prototype, "orientation", void 0);
 __decorate([
     property({ reflect: true })
-], LuxenDivider.prototype, "label", void 0);
+], Divider.prototype, "label", void 0);

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

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenDivider } from './divider';
+import { Divider } from './divider';
 export * from './divider';
-define('divider', LuxenDivider);
+define('divider', Divider);

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
 import hostStyles from '../../shared/styles/host.styles';
-import { LuxenDialog } from '../dialog/dialog';
+import { Dialog } from '../dialog/dialog';
 import dialogStyles from '../dialog/dialog.styles';
 import rawDrawerStyles from './drawer.css?inline';
 const drawerStyles = unsafeCSS(rawDrawerStyles);
@@ -38,9 +38,9 @@ const drawerStyles = unsafeCSS(rawDrawerStyles);
  * @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 class LuxenDrawer extends LuxenDialog {
+export class Drawer extends Dialog {
 }
-LuxenDrawer.styles = [hostStyles, dialogStyles, drawerStyles];
+Drawer.styles = [hostStyles, dialogStyles, drawerStyles];
 __decorate([
     property({ reflect: true })
-], LuxenDrawer.prototype, "placement", void 0);
+], Drawer.prototype, "placement", void 0);

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

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenDrawer } from './drawer';
+import { Drawer } from './drawer';
 export * from './drawer';
-define('drawer', LuxenDrawer);
+define('drawer', Drawer);

package/dist/elements/dropdown/dropdown.css

@@ -1,6 +1,8 @@
 :host {
+  --padding: 0.25rem;
+
   --background: var(--l-color-bg-surface, Canvas);
-  --radius: 6px;
+  --border-radius: 6px;
   --shadow: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 6%);
   --show-duration: 150;
   --hide-duration: 150;
@@ -19,13 +21,22 @@
   box-sizing: border-box;
   width: max-content;
   min-width: anchor-size(width);
-  padding: 0.25rem;
+  padding: var(--padding);
   margin: 0;
   border: 1px solid var(--l-color-border-overlay, light-dark(#e5e7eb, #374151));
-  border-radius: var(--radius);
+  border-radius: var(--border-radius);
   background: var(--background);
   color: var(--l-color-text-primary, CanvasText);
   box-shadow: var(--shadow);
   font-size: 0.875rem;
   line-height: 1.5;
 }
+
+/* Lightweight separator alternative to <l-divider> — same dimensions, no extra import. */
+::slotted(hr) {
+  height: 1px;
+  margin-block: var(--padding);
+  margin-inline: calc(var(--padding) * -1);
+  border: 0;
+  background: var(--l-color-divider);
+}

package/dist/elements/dropdown/dropdown.d.ts

@@ -5,12 +5,15 @@ import type { 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 type { 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/dist/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/dist/elements/dropdown/dropdown.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenDropdown_open_accessor_storage, _LuxenDropdown_placement_accessor_storage, _LuxenDropdown_distance_accessor_storage, _LuxenDropdown_disabled_accessor_storage;
+var _Dropdown_open_accessor_storage, _Dropdown_placement_accessor_storage, _Dropdown_distance_accessor_storage, _Dropdown_disabled_accessor_storage;
 import { html, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element';
 import { property } from 'lit/decorators.js';
@@ -28,12 +28,15 @@ const styles = unsafeCSS(rawStyles);
  * 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`.
@@ -42,9 +45,9 @@ const styles = unsafeCSS(rawStyles);
  * @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 class LuxenDropdown extends LuxenElement {
+export class Dropdown extends LuxenElement {
     constructor() {
         super(...arguments);
         this._floating = new PopoverController(this, {
@@ -54,14 +57,20 @@ export class LuxenDropdown extends LuxenElement {
         });
         this._typeaheadBuffer = '';
         this._typeaheadTimeout = 0;
-        _LuxenDropdown_open_accessor_storage.set(this, false);
-        _LuxenDropdown_placement_accessor_storage.set(this, 'bottom-start');
-        _LuxenDropdown_distance_accessor_storage.set(this, 4);
-        _LuxenDropdown_disabled_accessor_storage.set(this, false);
+        _Dropdown_open_accessor_storage.set(this, false);
+        _Dropdown_placement_accessor_storage.set(this, 'bottom-start');
+        _Dropdown_distance_accessor_storage.set(this, 4);
+        _Dropdown_disabled_accessor_storage.set(this, false);
         // --- Event handlers ---
-        this._onTriggerClick = () => {
-            if (!this.disabled)
-                this.toggle();
+        this._onTriggerClick = (e) => {
+            if (this.disabled)
+                return;
+            this.toggle();
+            // Space/Enter on a native button dispatches click with detail=0; focus the
+            // first item so the menu is keyboard-navigable immediately on open.
+            if (this.open && e.detail === 0) {
+                requestAnimationFrame(() => this._focusFirstItem());
+            }
         };
         this._onTriggerKeyDown = (e) => {
             if (this.disabled)
@@ -127,17 +136,17 @@ export class LuxenDropdown extends LuxenElement {
         };
     }
     /** Whether the dropdown is open. */
-    get open() { return __classPrivateFieldGet(this, _LuxenDropdown_open_accessor_storage, "f"); }
-    set open(value) { __classPrivateFieldSet(this, _LuxenDropdown_open_accessor_storage, value, "f"); }
+    get open() { return __classPrivateFieldGet(this, _Dropdown_open_accessor_storage, "f"); }
+    set open(value) { __classPrivateFieldSet(this, _Dropdown_open_accessor_storage, value, "f"); }
     /** Preferred placement of the panel. */
-    get placement() { return __classPrivateFieldGet(this, _LuxenDropdown_placement_accessor_storage, "f"); }
-    set placement(value) { __classPrivateFieldSet(this, _LuxenDropdown_placement_accessor_storage, value, "f"); }
+    get placement() { return __classPrivateFieldGet(this, _Dropdown_placement_accessor_storage, "f"); }
+    set placement(value) { __classPrivateFieldSet(this, _Dropdown_placement_accessor_storage, value, "f"); }
     /** Distance in pixels from the trigger. */
-    get distance() { return __classPrivateFieldGet(this, _LuxenDropdown_distance_accessor_storage, "f"); }
-    set distance(value) { __classPrivateFieldSet(this, _LuxenDropdown_distance_accessor_storage, value, "f"); }
+    get distance() { return __classPrivateFieldGet(this, _Dropdown_distance_accessor_storage, "f"); }
+    set distance(value) { __classPrivateFieldSet(this, _Dropdown_distance_accessor_storage, value, "f"); }
     /** Disables the dropdown trigger. */
-    get disabled() { return __classPrivateFieldGet(this, _LuxenDropdown_disabled_accessor_storage, "f"); }
-    set disabled(value) { __classPrivateFieldSet(this, _LuxenDropdown_disabled_accessor_storage, value, "f"); }
+    get disabled() { return __classPrivateFieldGet(this, _Dropdown_disabled_accessor_storage, "f"); }
+    set disabled(value) { __classPrivateFieldSet(this, _Dropdown_disabled_accessor_storage, value, "f"); }
     get _triggerEl() {
         const slot = this.shadowRoot.querySelector('.trigger slot');
         return slot?.assignedElements()[0] ?? null;
@@ -183,7 +192,7 @@ export class LuxenDropdown extends LuxenElement {
     // --- Lifecycle ---
     updated(changed) {
         if (changed.has('open')) {
-            this._handleOpenChange();
+            void this._handleOpenChange();
         }
     }
     // --- Open/Close ---
@@ -296,27 +305,30 @@ export class LuxenDropdown extends LuxenElement {
       <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>
     `;
     }
 }
-_LuxenDropdown_open_accessor_storage = new WeakMap(), _LuxenDropdown_placement_accessor_storage = new WeakMap(), _LuxenDropdown_distance_accessor_storage = new WeakMap(), _LuxenDropdown_disabled_accessor_storage = new WeakMap();
-LuxenDropdown.styles = [hostStyles, styles];
+_Dropdown_open_accessor_storage = new WeakMap(), _Dropdown_placement_accessor_storage = new WeakMap(), _Dropdown_distance_accessor_storage = new WeakMap(), _Dropdown_disabled_accessor_storage = new WeakMap();
+Dropdown.styles = [hostStyles, styles];
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenDropdown.prototype, "open", null);
+], Dropdown.prototype, "open", null);
 __decorate([
     property()
-], LuxenDropdown.prototype, "placement", null);
+], Dropdown.prototype, "placement", null);
 __decorate([
     property({ type: Number })
-], LuxenDropdown.prototype, "distance", null);
+], Dropdown.prototype, "distance", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenDropdown.prototype, "disabled", null);
+], Dropdown.prototype, "disabled", null);

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

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenDropdown } from './dropdown';
+import { Dropdown } from './dropdown';
 export * from './dropdown';
-define('dropdown', LuxenDropdown);
+define('dropdown', Dropdown);

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

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _LuxenDropdownItem_value_accessor_storage, _LuxenDropdownItem_disabled_accessor_storage, _LuxenDropdownItem_type_accessor_storage, _LuxenDropdownItem_checked_accessor_storage;
+var _DropdownItem_value_accessor_storage, _DropdownItem_disabled_accessor_storage, _DropdownItem_type_accessor_storage, _DropdownItem_checked_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element';
 import { property } from 'lit/decorators.js';
@@ -31,26 +31,26 @@ const styles = unsafeCSS(rawStyles);
  *
  * @cssproperty --color - Text color.
  */
-export class LuxenDropdownItem extends LuxenElement {
+export class DropdownItem extends LuxenElement {
     constructor() {
         super(...arguments);
-        _LuxenDropdownItem_value_accessor_storage.set(this, '');
-        _LuxenDropdownItem_disabled_accessor_storage.set(this, false);
-        _LuxenDropdownItem_type_accessor_storage.set(this, 'normal');
-        _LuxenDropdownItem_checked_accessor_storage.set(this, false);
+        _DropdownItem_value_accessor_storage.set(this, '');
+        _DropdownItem_disabled_accessor_storage.set(this, false);
+        _DropdownItem_type_accessor_storage.set(this, 'normal');
+        _DropdownItem_checked_accessor_storage.set(this, false);
     }
     /** The value associated with this item. */
-    get value() { return __classPrivateFieldGet(this, _LuxenDropdownItem_value_accessor_storage, "f"); }
-    set value(value) { __classPrivateFieldSet(this, _LuxenDropdownItem_value_accessor_storage, value, "f"); }
+    get value() { return __classPrivateFieldGet(this, _DropdownItem_value_accessor_storage, "f"); }
+    set value(value) { __classPrivateFieldSet(this, _DropdownItem_value_accessor_storage, value, "f"); }
     /** Disables the item. */
-    get disabled() { return __classPrivateFieldGet(this, _LuxenDropdownItem_disabled_accessor_storage, "f"); }
-    set disabled(value) { __classPrivateFieldSet(this, _LuxenDropdownItem_disabled_accessor_storage, value, "f"); }
+    get disabled() { return __classPrivateFieldGet(this, _DropdownItem_disabled_accessor_storage, "f"); }
+    set disabled(value) { __classPrivateFieldSet(this, _DropdownItem_disabled_accessor_storage, value, "f"); }
     /** The type of item: `normal` or `checkbox`. */
-    get type() { return __classPrivateFieldGet(this, _LuxenDropdownItem_type_accessor_storage, "f"); }
-    set type(value) { __classPrivateFieldSet(this, _LuxenDropdownItem_type_accessor_storage, value, "f"); }
+    get type() { return __classPrivateFieldGet(this, _DropdownItem_type_accessor_storage, "f"); }
+    set type(value) { __classPrivateFieldSet(this, _DropdownItem_type_accessor_storage, value, "f"); }
     /** Whether the checkbox item is checked. */
-    get checked() { return __classPrivateFieldGet(this, _LuxenDropdownItem_checked_accessor_storage, "f"); }
-    set checked(value) { __classPrivateFieldSet(this, _LuxenDropdownItem_checked_accessor_storage, value, "f"); }
+    get checked() { return __classPrivateFieldGet(this, _DropdownItem_checked_accessor_storage, "f"); }
+    set checked(value) { __classPrivateFieldSet(this, _DropdownItem_checked_accessor_storage, value, "f"); }
     /** Returns the text label of this item. */
     getTextLabel() {
         return (this.textContent ?? '').trim();
@@ -94,17 +94,17 @@ export class LuxenDropdownItem extends LuxenElement {
     `;
     }
 }
-_LuxenDropdownItem_value_accessor_storage = new WeakMap(), _LuxenDropdownItem_disabled_accessor_storage = new WeakMap(), _LuxenDropdownItem_type_accessor_storage = new WeakMap(), _LuxenDropdownItem_checked_accessor_storage = new WeakMap();
-LuxenDropdownItem.styles = [hostStyles, styles];
+_DropdownItem_value_accessor_storage = new WeakMap(), _DropdownItem_disabled_accessor_storage = new WeakMap(), _DropdownItem_type_accessor_storage = new WeakMap(), _DropdownItem_checked_accessor_storage = new WeakMap();
+DropdownItem.styles = [hostStyles, styles];
 __decorate([
     property()
-], LuxenDropdownItem.prototype, "value", null);
+], DropdownItem.prototype, "value", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenDropdownItem.prototype, "disabled", null);
+], DropdownItem.prototype, "disabled", null);
 __decorate([
     property()
-], LuxenDropdownItem.prototype, "type", null);
+], DropdownItem.prototype, "type", null);
 __decorate([
     property({ type: Boolean, reflect: true })
-], LuxenDropdownItem.prototype, "checked", null);
+], DropdownItem.prototype, "checked", null);

package/dist/elements/dropdown-item/index.d.ts

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

package/dist/elements/dropdown-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-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/dropdown-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/dist/elements/dropdown-item/index.js

@@ -1,4 +1,4 @@
 import { define } from '../../define';
-import { LuxenDropdownItem } from './dropdown-item';
+import { DropdownItem } from './dropdown-item';
 export * from './dropdown-item';
-define('dropdown-item', LuxenDropdownItem);
+define('dropdown-item', DropdownItem);

package/dist/elements/icon/icon.d.ts

@@ -7,7 +7,7 @@ import { LuxenElement } from '../../shared/luxen-element';
  *
  * @cssproperty --color - The color of the icon. Defaults to `currentColor`.
  */
-export declare class LuxenIcon extends LuxenElement {
+export declare class Icon extends LuxenElement {
     static styles: import("lit").CSSResult[];
     /** The icon name in Iconify format (e.g. `mdi:home`, `lucide:check`). */
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/html/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,YAAY;IACzC,OAAgB,MAAM,4BAAwB;IAE9C,yEAAyE;IAEzE,IAAI,SAAM;IAEV,kIAAkI;IAElI,KAAK,CAAC,EAAE,MAAM,CAAC;IAEN,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAY/C,MAAM;CAQhB"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/html/elements/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM1D;;;;;GAKG;AACH,qBAAa,IAAK,SAAQ,YAAY;IACpC,OAAgB,MAAM,4BAAwB;IAE9C,yEAAyE;IAEzE,IAAI,SAAM;IAEV,kIAAkI;IAElI,KAAK,CAAC,EAAE,MAAM,CAAC;IAEN,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC;IAY/C,MAAM;CAQhB"}

package/dist/elements/icon/icon.js

@@ -17,7 +17,7 @@ const styles = unsafeCSS(rawStyles);
  *
  * @cssproperty --color - The color of the icon. Defaults to `currentColor`.
  */
-export class LuxenIcon extends LuxenElement {
+export class Icon extends LuxenElement {
     constructor() {
         super(...arguments);
         /** The icon name in Iconify format (e.g. `mdi:home`, `lucide:check`). */
@@ -44,10 +44,10 @@ export class LuxenIcon extends LuxenElement {
     `;
     }
 }
-LuxenIcon.styles = [hostStyles, styles];
+Icon.styles = [hostStyles, styles];
 __decorate([
     property()
-], LuxenIcon.prototype, "name", void 0);
+], Icon.prototype, "name", void 0);
 __decorate([
     property()
-], LuxenIcon.prototype, "label", void 0);
+], Icon.prototype, "label", void 0);

package/dist/elements/icon/index.d.ts

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