luxen-ui 0.1.0

package/dist/elements/drawer/drawer.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import hostStyles from '../../shared/styles/host.styles';
+import { LuxenDialog } from '../dialog/dialog';
+import dialogStyles from '../dialog/dialog.styles';
+import rawDrawerStyles from './drawer.css?inline';
+const drawerStyles = unsafeCSS(rawDrawerStyles);
+/**
+ * A drawer that slides in from a screen edge. Extends `<l-dialog>`.
+ *
+ * Open and close by toggling the `open` property (or the `--show` / `--hide`
+ * Invoker commands). Always opens as modal.
+ *
+ * @slot - Body content.
+ * @slot close - Close button (typically `<button class="l-close">`).
+ * @slot footer - Footer actions.
+ *
+ * @csspart dialog - The native `<dialog>` element.
+ * @csspart header - The header wrapper containing the title and close slot.
+ * @csspart title - The drawer title heading.
+ * @csspart body - The body wrapper around the default slot.
+ * @csspart footer - The footer wrapper around the footer slot.
+ *
+ * @cssproperty --size - Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `bottom`). Default `320px`.
+ * @cssproperty --border-radius - Drawer border radius on the inner edges. Default `0.75rem`.
+ * @cssproperty --show-duration - Open transition duration. Default `200ms`.
+ * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty --backdrop - Backdrop color.
+ *
+ * @event show - Fired when the drawer opens. Not cancelable.
+ * @event after-show - Fired after the open animation completes.
+ * @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 {
+}
+LuxenDrawer.styles = [hostStyles, dialogStyles, drawerStyles];
+__decorate([
+    property({ reflect: true })
+], LuxenDrawer.prototype, "placement", void 0);

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

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

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

@@ -0,0 +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"}

package/dist/elements/drawer/index.js

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

package/dist/elements/dropdown/dropdown.css

@@ -0,0 +1,31 @@
+:host {
+  --background: var(--l-color-bg-surface, Canvas);
+  --radius: 8px;
+  --shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  --show-duration: 150;
+  --hide-duration: 150;
+
+  display: inline-block;
+  position: relative;
+}
+
+.trigger {
+  display: contents;
+}
+
+[popover] {
+  inset: unset;
+  overflow: visible;
+  box-sizing: border-box;
+  width: max-content;
+  min-width: anchor-size(width);
+  padding: 4px 0;
+  margin: 0;
+  border: 1px solid var(--l-color-border, light-dark(#e5e7eb, #374151));
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--l-color-text-primary, CanvasText);
+  box-shadow: var(--shadow);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,64 @@
+import { type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+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).
+ *
+ * @csspart panel - The floating menu container.
+ *
+ * @cssproperty --background - Panel background color.
+ * @cssproperty --radius - Panel border radius. Default `8px`.
+ * @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`.
+ *
+ * @event show - Fired before the dropdown opens. Cancelable.
+ * @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 }`.
+ */
+export declare class LuxenDropdown extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    private _floating;
+    private _typeaheadBuffer;
+    private _typeaheadTimeout;
+    /** Whether the dropdown is open. */
+    accessor open: boolean;
+    /** Preferred placement of the panel. */
+    accessor placement: Placement;
+    /** Distance in pixels from the trigger. */
+    accessor distance: number;
+    /** Disables the dropdown trigger. */
+    accessor disabled: boolean;
+    private get _triggerEl();
+    private get _panelEl();
+    private _getItems;
+    private _getAllItems;
+    private _getDuration;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    updated(changed: PropertyValues<this>): void;
+    private _handleOpenChange;
+    private _setActiveItem;
+    private _focusFirstItem;
+    private _focusLastItem;
+    private _getCurrentItem;
+    private _focusNextItem;
+    private _focusPreviousItem;
+    private _handleTypeahead;
+    private _onTriggerClick;
+    private _onTriggerKeyDown;
+    private _onPanelKeyDown;
+    private _onItemClick;
+    private _selectCurrentItem;
+    private _selectItem;
+    /** Sync `open` when popover="auto" light-dismiss fires. */
+    private _onToggle;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +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"}

package/dist/elements/dropdown/dropdown.js

@@ -0,0 +1,322 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    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;
+import { html, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import { property } from 'lit/decorators.js';
+import { PopoverController } from '../../shared/controllers/popover';
+import { tagName } from '../../registry';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './dropdown.css?inline';
+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).
+ *
+ * @csspart panel - The floating menu container.
+ *
+ * @cssproperty --background - Panel background color.
+ * @cssproperty --radius - Panel border radius. Default `8px`.
+ * @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`.
+ *
+ * @event show - Fired before the dropdown opens. Cancelable.
+ * @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 }`.
+ */
+export class LuxenDropdown extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        this._floating = new PopoverController(this, {
+            getTriggerElement: () => this._triggerEl,
+            getFloatingElement: () => this._panelEl,
+            getArrowElement: () => null,
+        });
+        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);
+        // --- Event handlers ---
+        this._onTriggerClick = () => {
+            if (!this.disabled)
+                this.toggle();
+        };
+        this._onTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.show();
+                requestAnimationFrame(() => this._focusFirstItem());
+            }
+            else if (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:
+                    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                        this._handleTypeahead(e.key);
+                    }
+            }
+        };
+        this._onItemClick = (e) => {
+            const item = e.target.closest(tagName('dropdown-item'));
+            if (item && !item.disabled) {
+                this._selectItem(item);
+            }
+        };
+        /** Sync `open` when popover="auto" light-dismiss fires. */
+        this._onToggle = (e) => {
+            const toggleEvent = e;
+            if (toggleEvent.newState === 'closed' && this.open) {
+                this.open = false;
+                this._triggerEl?.setAttribute('aria-expanded', 'false');
+            }
+        };
+    }
+    /** 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"); }
+    /** 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"); }
+    /** 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"); }
+    /** 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 _triggerEl() {
+        const slot = this.shadowRoot.querySelector('.trigger slot');
+        return slot?.assignedElements()[0] ?? null;
+    }
+    get _panelEl() {
+        return this.shadowRoot.querySelector('[popover]');
+    }
+    _getItems() {
+        const menuSlot = this.shadowRoot.querySelector('slot:not([name])');
+        if (!menuSlot)
+            return [];
+        return menuSlot.assignedElements().filter((el) => el.tagName === tagName('dropdown-item').toUpperCase() && !el.disabled);
+    }
+    _getAllItems() {
+        const menuSlot = this.shadowRoot.querySelector('slot:not([name])');
+        if (!menuSlot)
+            return [];
+        return menuSlot.assignedElements().filter((el) => el.tagName === tagName('dropdown-item').toUpperCase());
+    }
+    _getDuration(prop) {
+        const parsed = parseFloat(getComputedStyle(this).getPropertyValue(prop));
+        return Number.isNaN(parsed) ? 150 : parsed;
+    }
+    // --- Public API ---
+    show() {
+        if (this.open || this.disabled)
+            return;
+        if (this.emit('show', { cancelable: true }))
+            this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        if (this.emit('hide', { cancelable: true }))
+            this.open = false;
+    }
+    toggle() {
+        if (this.open)
+            this.hide();
+        else
+            this.show();
+    }
+    // --- Lifecycle ---
+    updated(changed) {
+        if (changed.has('open')) {
+            this._handleOpenChange();
+        }
+    }
+    // --- Open/Close ---
+    async _handleOpenChange() {
+        const panel = this._panelEl;
+        if (!panel)
+            return;
+        const posOpts = { placement: this.placement, distance: this.distance };
+        if (this.open) {
+            panel.showPopover();
+            await this._floating.updatePosition(posOpts);
+            if (!this.open)
+                return;
+            await this._floating.animateShow(panel, this._getDuration('--show-duration'));
+            this._floating.startPositioning(posOpts);
+            this._triggerEl?.setAttribute('aria-expanded', 'true');
+            this.emit('after-show');
+        }
+        else {
+            this._floating.stopPositioning();
+            this._triggerEl?.setAttribute('aria-expanded', 'false');
+            await this._floating.animateHide(panel, this._getDuration('--hide-duration'));
+            if (panel.matches(':popover-open'))
+                panel.hidePopover();
+            this.emit('after-hide');
+        }
+    }
+    // --- Focus management ---
+    _setActiveItem(item) {
+        const itemEl = item.shadowRoot.querySelector('.item');
+        if (!itemEl)
+            return;
+        // Reset all items
+        for (const i of this._getAllItems()) {
+            const el = i.shadowRoot.querySelector('.item');
+            el?.setAttribute('tabindex', '-1');
+        }
+        itemEl.setAttribute('tabindex', '0');
+        itemEl.focus();
+    }
+    _focusFirstItem() {
+        const items = this._getItems();
+        if (items.length)
+            this._setActiveItem(items[0]);
+    }
+    _focusLastItem() {
+        const items = this._getItems();
+        if (items.length)
+            this._setActiveItem(items[items.length - 1]);
+    }
+    _getCurrentItem() {
+        const items = this._getItems();
+        return (items.find((item) => {
+            const el = item.shadowRoot.querySelector('.item');
+            return el?.getAttribute('tabindex') === '0' && item.shadowRoot.activeElement === el;
+        }) ?? null);
+    }
+    _focusNextItem() {
+        const items = this._getItems();
+        const current = this._getCurrentItem();
+        const index = current ? items.indexOf(current) : -1;
+        const next = items[(index + 1) % items.length];
+        if (next)
+            this._setActiveItem(next);
+    }
+    _focusPreviousItem() {
+        const items = this._getItems();
+        const current = this._getCurrentItem();
+        const index = current ? items.indexOf(current) : 0;
+        const prev = items[(index - 1 + items.length) % items.length];
+        if (prev)
+            this._setActiveItem(prev);
+    }
+    // --- Typeahead ---
+    _handleTypeahead(key) {
+        clearTimeout(this._typeaheadTimeout);
+        this._typeaheadBuffer += key.toLowerCase();
+        this._typeaheadTimeout = window.setTimeout(() => {
+            this._typeaheadBuffer = '';
+        }, 500);
+        const items = this._getItems();
+        const match = items.find((item) => item.getTextLabel().toLowerCase().startsWith(this._typeaheadBuffer));
+        if (match)
+            this._setActiveItem(match);
+    }
+    _selectCurrentItem() {
+        const current = this._getCurrentItem();
+        if (current)
+            this._selectItem(current);
+    }
+    _selectItem(item) {
+        if (item.type === 'checkbox') {
+            item.checked = !item.checked;
+        }
+        this.emit('select', { detail: { item } });
+        if (item.type !== 'checkbox') {
+            this.hide();
+            this._triggerEl?.focus();
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="trigger"
+        @click=${this._onTriggerClick}
+        @keydown=${this._onTriggerKeyDown}
+      >
+        <slot name="trigger"></slot>
+      </div>
+      <div
+        popover="auto"
+        part="panel"
+        role="menu"
+        @keydown=${this._onPanelKeyDown}
+        @click=${this._onItemClick}
+        @toggle=${this._onToggle}
+      >
+        <slot></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];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenDropdown.prototype, "open", null);
+__decorate([
+    property()
+], LuxenDropdown.prototype, "placement", null);
+__decorate([
+    property({ type: Number })
+], LuxenDropdown.prototype, "distance", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LuxenDropdown.prototype, "disabled", null);

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

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

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

@@ -0,0 +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"}

package/dist/elements/dropdown/index.js

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

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

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  cursor: pointer;
+  outline: none;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--l-color-text-primary, CanvasText);
+  white-space: nowrap;
+}
+
+.item:focus-visible {
+  background: var(--l-color-bg-state-hover);
+}
+
+@media (hover: hover) {
+  .item:hover {
+    background: var(--l-color-bg-state-hover);
+  }
+}
+
+.check {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+}
+
+:host(:not([checked])) .check svg {
+  visibility: hidden;
+}
+
+::slotted([slot='prefix']),
+::slotted([slot='suffix']) {
+  display: flex;
+  flex-shrink: 0;
+}
+
+.label {
+  flex: 1;
+}

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

@@ -0,0 +1,25 @@
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * A menu item for use inside `<l-dropdown>`.
+ *
+ * @slot - Label text.
+ * @slot prefix - Leading content (e.g. icon).
+ * @slot suffix - Trailing content.
+ *
+ * @cssproperty --color - Text color.
+ */
+export declare class LuxenDropdownItem extends LuxenElement {
+    static styles: import("lit").CSSResult[];
+    /** The value associated with this item. */
+    accessor value: string;
+    /** Disables the item. */
+    accessor disabled: boolean;
+    /** The type of item: `normal` or `checkbox`. */
+    accessor type: 'normal' | 'checkbox';
+    /** Whether the checkbox item is checked. */
+    accessor checked: boolean;
+    /** Returns the text label of this item. */
+    getTextLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=dropdown-item.d.ts.map

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

@@ -0,0 +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"}