luxen-ui 0.1.0

package/dist/elements/carousel-item/carousel-item.js

@@ -0,0 +1,20 @@
+import { html, unsafeCSS } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+import hostStyles from '../../shared/styles/host.styles';
+import rawStyles from './carousel-item.css?inline';
+const styles = unsafeCSS(rawStyles);
+/**
+ * A single slide inside an `<l-carousel>`.
+ *
+ * @cssproperty --aspect-ratio - Aspect ratio of the slide.
+ */
+export class LuxenCarouselItem extends LuxenElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'group');
+    }
+    render() {
+        return html ` <slot></slot> `;
+    }
+}
+LuxenCarouselItem.styles = [hostStyles, styles];

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

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

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

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

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

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

package/dist/elements/dialog/dialog.css

@@ -0,0 +1,92 @@
+:host {
+  --width: 31rem;
+  --border-radius: 6px;
+  --show-duration: 200ms;
+  --hide-duration: 200ms;
+  --backdrop: var(--l-backdrop);
+  --backdrop-blur: 0;
+
+  display: contents;
+}
+
+dialog {
+  position: fixed;
+  inset: 0;
+  box-sizing: border-box;
+  width: var(--width);
+  max-inline-size: min(90vw, var(--width));
+  max-block-size: min(80dvb, 100%);
+  margin: auto;
+  padding: 0;
+  border: 0;
+  border-radius: var(--border-radius);
+  background-color: var(--l-color-surface-overlay);
+  color: var(--l-color-text-primary);
+
+  /* EXIT STATE */
+  opacity: 0;
+
+  transition-property: opacity, display, overlay;
+  transition-duration: var(--hide-duration);
+  transition-behavior: allow-discrete;
+
+  &::backdrop {
+    background: var(--backdrop);
+    backdrop-filter: blur(var(--backdrop-blur));
+  }
+
+  /* OPEN STATE */
+  /* grid layout pins header/footer; the middle row (body) scrolls via
+     overflow on [part='body'] and minmax(0, 1fr) allowing it to shrink. */
+  &[open] {
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    opacity: 1;
+    transition-duration: var(--show-duration);
+  }
+
+  /* BEFORE-OPEN STATE */
+  @starting-style {
+    &[open] {
+      opacity: 0;
+    }
+  }
+}
+
+[part='header'] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+[part='title'] {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+[part='body'] {
+  padding: 0 1.5rem;
+  overflow-y: auto;
+}
+
+[part='footer'] {
+  display: flex;
+  place-content: end;
+  gap: 0.5rem;
+  padding: 1.5rem;
+}
+
+::slotted(menu[slot='footer']) {
+  display: contents;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --show-duration: 0ms;
+    --hide-duration: 0ms;
+  }
+}

package/dist/elements/dialog/dialog.d.ts

@@ -0,0 +1,56 @@
+import { type PropertyValues } from 'lit';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * A modal dialog rendered in the top layer via the native `<dialog>` element.
+ *
+ * Open and close by toggling the `open` property (or the `--show` / `--hide`
+ * Invoker commands). There are no public `show()` / `close()` methods.
+ *
+ * @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 dialog title heading.
+ * @csspart body - The body wrapper around the default slot.
+ * @csspart footer - The footer wrapper around the footer slot.
+ *
+ * @cssproperty --width - Dialog width. Default `31rem`.
+ * @cssproperty --border-radius - Dialog border radius. Default `6px`.
+ * @cssproperty --show-duration - Open transition duration. Default `200ms`.
+ * @cssproperty --hide-duration - Close transition duration. Default `200ms`.
+ * @cssproperty --backdrop - Backdrop color.
+ * @cssproperty --backdrop-blur - Backdrop blur amount (any CSS length). Default `0` (no blur). Set to e.g. `4px` for a subtle frost.
+ *
+ * @event show - Fired when the dialog opens. Not cancelable.
+ * @event after-show - Fired after the open animation completes.
+ * @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 {
+    static styles: import("lit").CSSResult[];
+    /** Dialog title rendered in the header. */
+    title: string;
+    /** Whether the dialog is open. */
+    open: boolean;
+    /** Close when the backdrop is clicked. */
+    lightDismiss: boolean;
+    dialog: HTMLDialogElement;
+    private _mouseDownTarget;
+    private _commandListener;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues<this>): void;
+    private _onCommand;
+    private _onCancel;
+    private _onNativeClose;
+    private _onDialogClick;
+    private _nudgeAnimation?;
+    private _nudgeDismiss;
+    private _emitAfter;
+    private _focusAutofocusTarget;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=dialog.d.ts.map

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

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

package/dist/elements/dialog/dialog.js

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

package/dist/elements/dialog/dialog.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.
+ * `unsafeCSS()` is called once here so both importers share the same
+ * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=dialog.styles.d.ts.map

package/dist/elements/dialog/dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dialog/dialog.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;;AACH,wBAA8B"}

package/dist/elements/dialog/dialog.styles.js

@@ -0,0 +1,8 @@
+import { unsafeCSS } from 'lit';
+import raw from './dialog.css?inline';
+/**
+ * Wrapper module: imported by both `dialog.ts` and `drawer.ts`.
+ * `unsafeCSS()` is called once here so both importers share the same
+ * `CSSResult` instance (one constructed `CSSStyleSheet`, not two).
+ */
+export default unsafeCSS(raw);

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

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

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

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

package/dist/elements/dialog/index.js

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

package/dist/elements/divider/divider.d.ts

@@ -0,0 +1,23 @@
+import { LuxenElement } from '../../shared/luxen-element';
+export type DividerOrientation = 'horizontal' | 'vertical';
+/**
+ * @summary Dividers visually separate or group elements.
+ *
+ * @example <l-divider></l-divider>
+ *
+ * @cssproperty --color - The color of the divider line.
+ * @cssproperty --width - The thickness of the divider line.
+ * @cssproperty --spacing - The spacing between the divider and its neighboring elements.
+ *
+ * @customElement l-divider
+ */
+export declare class LuxenDivider extends LuxenElement {
+    createRenderRoot(): this;
+    /** The divider's orientation. */
+    orientation: DividerOrientation;
+    /** Optional text label displayed over the divider line. */
+    label?: string;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+}
+//# sourceMappingURL=divider.d.ts.map

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

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

package/dist/elements/divider/divider.js

@@ -0,0 +1,49 @@
+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 { property } from 'lit/decorators.js';
+import { LuxenElement } from '../../shared/luxen-element';
+/**
+ * @summary Dividers visually separate or group elements.
+ *
+ * @example <l-divider></l-divider>
+ *
+ * @cssproperty --color - The color of the divider line.
+ * @cssproperty --width - The thickness of the divider line.
+ * @cssproperty --spacing - The spacing between the divider and its neighboring elements.
+ *
+ * @customElement l-divider
+ */
+export class LuxenDivider extends LuxenElement {
+    constructor() {
+        super(...arguments);
+        /** The divider's orientation. */
+        this.orientation = 'horizontal';
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'separator');
+    }
+    updated(changed) {
+        if (changed.has('orientation')) {
+            if (this.orientation === 'vertical') {
+                this.setAttribute('aria-orientation', 'vertical');
+            }
+            else {
+                this.removeAttribute('aria-orientation');
+            }
+        }
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LuxenDivider.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], LuxenDivider.prototype, "label", void 0);

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

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

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

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

package/dist/elements/divider/index.js

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

package/dist/elements/drawer/drawer.css

@@ -0,0 +1,66 @@
+:host {
+  --size: 320px;
+  --border-radius: 0.75rem;
+}
+
+/* Override dialog's opacity fade with a slide from the inline-start edge. */
+dialog {
+  inset: 0;
+  margin: 0;
+  width: min(var(--size), 100dvw);
+  max-inline-size: 100dvw;
+  height: 100dvh;
+  max-block-size: 100dvh;
+  border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  opacity: 1;
+  translate: -100% 0;
+  transition-property: translate, display, overlay;
+}
+
+dialog[open] {
+  translate: 0 0;
+}
+
+@starting-style {
+  dialog[open] {
+    translate: -100% 0;
+  }
+}
+
+/* Inline-end edge */
+:host([placement='end']) dialog {
+  border-radius: var(--border-radius) 0 0 var(--border-radius);
+  margin-inline-start: auto;
+  translate: 100% 0;
+}
+
+:host([placement='end']) dialog[open] {
+  translate: 0 0;
+}
+
+@starting-style {
+  :host([placement='end']) dialog[open] {
+    translate: 100% 0;
+  }
+}
+
+/* Block-end (bottom) edge */
+:host([placement='bottom']) dialog {
+  width: 100dvw;
+  max-inline-size: 100dvw;
+  height: min(var(--size), 100dvh);
+  max-block-size: 100dvh;
+  margin-block-start: auto;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  translate: 0 100%;
+}
+
+:host([placement='bottom']) dialog[open] {
+  translate: 0 0;
+}
+
+@starting-style {
+  :host([placement='bottom']) dialog[open] {
+    translate: 0 100%;
+  }
+}

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

@@ -0,0 +1,34 @@
+import { LuxenDialog } from '../dialog/dialog';
+/**
+ * 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 declare class LuxenDrawer extends LuxenDialog {
+    static styles: import("lit").CSSResult[];
+    /** Edge the drawer slides in from. Defaults to the start (inline-start) edge. */
+    placement?: 'start' | 'end' | 'bottom';
+}
+//# sourceMappingURL=drawer.d.ts.map

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

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