@aceshooting/lyra-ui 1.2.0 → 2.1.0

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,129 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * Reason a dialog was dismissed, forwarded as the `lyra-dialog-close` event
+ * detail. `'escape'` and `'backdrop'` are emitted by the dialog's own built-in
+ * dismiss triggers; `'close-button'` by the built-in header close button
+ * (rendered when `closable` is set); `'unmount'` is emitted when the dialog is
+ * removed from the DOM while still open by something other than its own
+ * `close()` (e.g. a consumer's own cleanup code, or a parent re-render that
+ * drops it); any other string is whatever a caller passes to `close()` (e.g. a
+ * consumer's own footer close button, or confirm.ts's `'confirm'`/`'cancel'`).
+ */
+export type DialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | 'unmount' | string;
+/**
+ * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
+ * focus-trapped while open, dismissible via Escape or a backdrop click, and
+ * scroll-locks the document for as long as it's open. Chrome stays minimal by
+ * default — no built-in title bar or close button; a consumer supplies a
+ * heading and any close affordance itself via the default/`footer` slots.
+ * `heading`/`closable` are an opt-in convenience for the common case where
+ * hand-building that chrome isn't worth it (see below).
+ *
+ * Accessible name / visible header, in priority order:
+ * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
+ *    child* (not inside `slot="footer"`), its text content becomes
+ *    `aria-label` on the panel — unchanged, and takes priority over `heading`
+ *    below so an existing consumer that already slots its own heading keeps
+ *    rendering it exactly as before.
+ * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
+ *    renders containing that text (`part="heading"`), which becomes the
+ *    `aria-labelledby` target.
+ * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
+ *    `label` part) element carrying that text is rendered inside the panel
+ *    and `aria-labelledby` points at it instead.
+ * Only one of cases 2/3 ever renders at a time, so exactly one element ever
+ * claims `aria-labelledby`. `label` itself never renders visible chrome on
+ * its own — `::part(label)` can be restyled to make the sr-only text visible,
+ * or `heading` can be set instead, if a consumer wants visible chrome without
+ * slotting a real heading element.
+ *
+ * The slotted-heading case deliberately uses `aria-label` (a copied string)
+ * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
+ * *light-DOM* content while `[part="panel"]` lives in this element's
+ * *shadow* tree, and an ID-reference attribute can't resolve across that
+ * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
+ * `heading`/`label`-prop cases above, where the target element is rendered
+ * inside the same shadow root it labels, so `aria-labelledby` there is safe.
+ *
+ * `closable` renders a close (X) button in the header row (creating one, with
+ * no heading text, if `heading` is unset) that closes the dialog via the same
+ * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
+ *
+ * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
+ * `confirm()` launched from within an already-open dialog) is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open dialog, so
+ * dialogs beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-dialog
+ * @slot - The dialog body.
+ * @slot footer - Action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: DialogCloseReason`. Fired whenever the
+ *   dialog is dismissed via Escape, a backdrop click, the built-in close
+ *   button (`closable`), a `close()` call, or (with reason `'unmount'`)
+ *   removal from the DOM by anything else while still open.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
+ *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
+ *   property (default `32rem`).
+ * @csspart header - The header row, rendered when `heading` is set (and no
+ *   heading is slotted) and/or `closable` is `true`.
+ * @csspart heading - The visible `heading`-text element inside `header`,
+ *   rendered only when `heading` is set and no heading is slotted.
+ * @csspart close-button - The built-in close button, rendered inside `header`
+ *   only when `closable` is `true`.
+ * @csspart label - The invisible `label`-text element used for
+ *   `aria-labelledby` when no heading is slotted and `heading` is unset.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export declare class LyraDialog extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+    open: boolean;
+    /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
+    label: string;
+    /** Visible header text, rendered when no heading element is slotted into
+     *  the default slot — see the class doc for the full fallback order. Has
+     *  no effect (renders nothing) if a light-DOM heading is slotted; that case
+     *  keeps working completely unchanged whether or not `heading` is set. */
+    heading?: string;
+    /** Renders a built-in close (X) button in the header row (creating one,
+     *  with no heading text, if `heading` is unset), wired to the same
+     *  `close()` path Escape/backdrop-dismiss already use, with reason
+     *  `'close-button'`. */
+    closable: boolean;
+    private hasFooterSlot;
+    private headingText?;
+    private releaseScrollLock?;
+    private overlay?;
+    private readonly srLabelId;
+    private readonly headingId;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onDefaultSlotChange;
+    private onFooterSlotChange;
+    private detectHeading;
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer Cancel button) should
+     * call this directly with its own reason string, so every dismissal path
+     * funnels through the same event instead of the consumer having to also
+     * toggle `open` itself.
+     */
+    close(reason?: DialogCloseReason): void;
+    private onBackdropClick;
+    private onCloseButtonClick;
+    private activateOverlay;
+    private deactivateOverlay;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-dialog': LyraDialog;
+    }
+}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,288 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { activateOverlay } from '../../internal/overlay-manager.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
+import { closeIcon } from '../../internal/icons.js';
+import { styles } from './dialog.styles.js';
+const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6, [role="heading"]';
+/**
+ * `<lyra-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
+ * focus-trapped while open, dismissible via Escape or a backdrop click, and
+ * scroll-locks the document for as long as it's open. Chrome stays minimal by
+ * default — no built-in title bar or close button; a consumer supplies a
+ * heading and any close affordance itself via the default/`footer` slots.
+ * `heading`/`closable` are an opt-in convenience for the common case where
+ * hand-building that chrome isn't worth it (see below).
+ *
+ * Accessible name / visible header, in priority order:
+ * 1. If a heading element (`h1`–`h6` or `[role="heading"]`) is a *direct
+ *    child* (not inside `slot="footer"`), its text content becomes
+ *    `aria-label` on the panel — unchanged, and takes priority over `heading`
+ *    below so an existing consumer that already slots its own heading keeps
+ *    rendering it exactly as before.
+ * 2. Otherwise, when `heading` is set, a visible header row (`part="header"`)
+ *    renders containing that text (`part="heading"`), which becomes the
+ *    `aria-labelledby` target.
+ * 3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the
+ *    `label` part) element carrying that text is rendered inside the panel
+ *    and `aria-labelledby` points at it instead.
+ * Only one of cases 2/3 ever renders at a time, so exactly one element ever
+ * claims `aria-labelledby`. `label` itself never renders visible chrome on
+ * its own — `::part(label)` can be restyled to make the sr-only text visible,
+ * or `heading` can be set instead, if a consumer wants visible chrome without
+ * slotting a real heading element.
+ *
+ * The slotted-heading case deliberately uses `aria-label` (a copied string)
+ * rather than `aria-labelledby` pointing at the heading's `id`: the heading is
+ * *light-DOM* content while `[part="panel"]` lives in this element's
+ * *shadow* tree, and an ID-reference attribute can't resolve across that
+ * boundary (verified against axe's `aria-dialog-name` rule) — unlike the
+ * `heading`/`label`-prop cases above, where the target element is rendered
+ * inside the same shadow root it labels, so `aria-labelledby` there is safe.
+ *
+ * `closable` renders a close (X) button in the header row (creating one, with
+ * no heading text, if `heading` is unset) that closes the dialog via the same
+ * `close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.
+ *
+ * Stacking: opening one `<lyra-dialog>` while another is already open (e.g. a
+ * `confirm()` launched from within an already-open dialog) is supported --
+ * Escape and the Tab focus trap only ever act on the topmost open dialog, so
+ * dialogs beneath it stay open and untouched until the one on top closes.
+ *
+ * @customElement lyra-dialog
+ * @slot - The dialog body.
+ * @slot footer - Action buttons, rendered in a bottom row.
+ * @event lyra-dialog-close - `detail: DialogCloseReason`. Fired whenever the
+ *   dialog is dismissed via Escape, a backdrop click, the built-in close
+ *   button (`closable`), a `close()` call, or (with reason `'unmount'`)
+ *   removal from the DOM by anything else while still open.
+ * @csspart backdrop - The full-viewport scrim behind the panel.
+ * @csspart panel - The dialog panel itself (`role="dialog"` while open). Its
+ *   max-inline-size is controlled by the `--lyra-dialog-max-width` custom
+ *   property (default `32rem`).
+ * @csspart header - The header row, rendered when `heading` is set (and no
+ *   heading is slotted) and/or `closable` is `true`.
+ * @csspart heading - The visible `heading`-text element inside `header`,
+ *   rendered only when `heading` is set and no heading is slotted.
+ * @csspart close-button - The built-in close button, rendered inside `header`
+ *   only when `closable` is `true`.
+ * @csspart label - The invisible `label`-text element used for
+ *   `aria-labelledby` when no heading is slotted and `heading` is unset.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export class LyraDialog extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the dialog is open. Set this (or call `close()`) — there is no separate `show()`/`hide()` pair. */
+        this.open = false;
+        /** Accessible name used when no heading is slotted — see the class doc for the full fallback order. */
+        this.label = '';
+        /** Renders a built-in close (X) button in the header row (creating one,
+         *  with no heading text, if `heading` is unset), wired to the same
+         *  `close()` path Escape/backdrop-dismiss already use, with reason
+         *  `'close-button'`. */
+        this.closable = false;
+        this.hasFooterSlot = false;
+        this.srLabelId = nextId('dialog-label');
+        this.headingId = nextId('dialog-heading');
+        this.onDefaultSlotChange = () => {
+            this.detectHeading();
+        };
+        this.onFooterSlotChange = (e) => {
+            this.hasFooterSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onBackdropClick = () => {
+            this.overlay?.dismissBackdrop();
+        };
+        this.onCloseButtonClick = () => {
+            this.close('close-button');
+        };
+    }
+    static { this.styles = [LyraElement.styles, srOnly, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasFooterSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'footer');
+            this.detectHeading();
+        }
+        if (changed.has('open')) {
+            if (this.open) {
+                this.activateOverlay();
+            }
+            else {
+                this.deactivateOverlay();
+            }
+        }
+    }
+    // Runs after render so the manager can resolve the panel and its composed
+    // focus targets, including controls projected through either slot.
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            this.overlay?.focusInitial();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // A reconnect (e.g. a drag-and-drop reparent keeping this same element
+        // instance) fires disconnectedCallback then connectedCallback
+        // synchronously with no update in between, so willUpdate never reruns to
+        // notice `open` is still true -- restore the scroll lock/trap it dropped.
+        if (this.hasUpdated && this.open) {
+            if (this.overlay?.isActive()) {
+                this.overlay.resume();
+                this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+            }
+            else {
+                this.activateOverlay();
+            }
+            queueMicrotask(() => this.overlay?.focusInitial());
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.suspend();
+        if (this.open) {
+            // A reparent (drag-and-drop moving this same element instance to a new
+            // parent) fires disconnectedCallback immediately followed by a
+            // synchronous connectedCallback, with no turn of the event loop in
+            // between -- deferring this check a microtask lets that case
+            // short-circuit here once isConnected is true again, so only a genuine
+            // removal (the element still disconnected once microtasks flush) ever
+            // reaches the assignment below. Without this, removing an open dialog
+            // any way other than its own close() (a consumer's own DOM cleanup, a
+            // parent re-render that drops it, etc.) never fires
+            // `lyra-dialog-close`, so e.g. confirm()'s returned promise hangs forever.
+            queueMicrotask(() => {
+                if (!this.isConnected && this.open) {
+                    this.open = false;
+                    this.emit('lyra-dialog-close', 'unmount');
+                }
+            });
+        }
+    }
+    // Only direct children are scanned -- a heading nested several layers deep
+    // (or inside a slotted custom element's own shadow root) is left to the
+    // consumer to label explicitly via `label` instead. Same depth limit
+    // lyra-widget applies to its own actions-slot presence check. Recomputed
+    // only on slot assignment changes, not on every render -- a consumer that
+    // mutates an already-slotted heading's textContent in place (rather than
+    // replacing the node) won't retroactively update aria-label; set `label`
+    // instead for a title that needs to change live.
+    detectHeading() {
+        const heading = Array.from(this.children).find((el) => el.getAttribute('slot') !== 'footer' && el.matches(HEADING_SELECTOR));
+        this.headingText = heading?.textContent?.trim() || undefined;
+    }
+    /**
+     * Close the dialog and return focus to whatever had it before the dialog
+     * opened. `reason` is forwarded as the `lyra-dialog-close` detail --
+     * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
+     * consumer's own close affordance (e.g. a footer Cancel button) should
+     * call this directly with its own reason string, so every dismissal path
+     * funnels through the same event instead of the consumer having to also
+     * toggle `open` itself.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.emit('lyra-dialog-close', reason);
+    }
+    activateOverlay() {
+        if (this.overlay?.isActive())
+            return;
+        this.releaseScrollLock ??= lockScroll(this.ownerDocument);
+        this.overlay = activateOverlay({
+            host: this,
+            panel: () => this.shadowRoot?.querySelector('[part="panel"]') ?? null,
+            onEscape: () => this.close('escape'),
+            onBackdrop: () => this.close('backdrop'),
+        });
+    }
+    deactivateOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.deactivate();
+        this.overlay = undefined;
+    }
+    render() {
+        // Priority order (see class doc): a slotted heading always wins; only
+        // when there isn't one does `heading` get a turn, then `label`'s
+        // sr-only fallback -- never more than one of the two below claims
+        // aria-labelledby for the same panel.
+        const useHeadingProp = !this.headingText && !!this.heading;
+        const useSrLabel = !this.headingText && !useHeadingProp && this.label.length > 0;
+        const showHeader = useHeadingProp || this.closable;
+        return html `
+      <div part="backdrop" @click=${this.onBackdropClick}></div>
+      <div
+        part="panel"
+        role=${this.open ? 'dialog' : nothing}
+        aria-modal=${this.open ? 'true' : nothing}
+        aria-label=${this.headingText ?? nothing}
+        aria-labelledby=${useHeadingProp ? this.headingId : useSrLabel ? this.srLabelId : nothing}
+        tabindex="-1"
+      >
+        ${useSrLabel
+            ? html `<span id=${this.srLabelId} part="label" class="sr-only">${this.label}</span>`
+            : nothing}
+        ${showHeader
+            ? html `
+              <div part="header">
+                ${useHeadingProp
+                ? html `<span id=${this.headingId} part="heading">${this.heading}</span>`
+                : nothing}
+                ${this.closable
+                ? html `
+                      <button
+                        part="close-button"
+                        type="button"
+                        aria-label="Close"
+                        @click=${this.onCloseButtonClick}
+                      >
+                        ${closeIcon()}
+                      </button>
+                    `
+                : nothing}
+              </div>
+            `
+            : nothing}
+        <div part="body">
+          <slot @slotchange=${this.onDefaultSlotChange}></slot>
+        </div>
+        <div part="footer" ?hidden=${!this.hasFooterSlot}>
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraDialog.prototype, "open", void 0);
+__decorate([
+    property()
+], LyraDialog.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraDialog.prototype, "heading", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'closable' })
+], LyraDialog.prototype, "closable", void 0);
+__decorate([
+    state()
+], LyraDialog.prototype, "hasFooterSlot", void 0);
+__decorate([
+    state()
+], LyraDialog.prototype, "headingText", void 0);
+defineElement('dialog', LyraDialog);

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    /* Backdrop scrim color -- component-specific so a host can retheme it
+       without a raw literal leaking into the public API (no shared
+       --wa-*-overlay token exists in the design system to resolve through,
+       same rationale as lyra-widget's --lyra-widget-overlay-color). */
+    --lyra-dialog-overlay-color: rgb(0 0 0 / 0.5);
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: var(--lyra-overlay-stack-index, 1000);
+    align-items: center;
+    justify-content: center;
+    padding: var(--lyra-space-l);
+  }
+  :host([open]) {
+    display: flex;
+  }
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-dialog-overlay-color);
+  }
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    /* --lyra-dialog-max-width lets a consumer widen/narrow the panel per
+       instance (e.g. inline on the host) without overriding the whole rule --
+       same convention as lyra-media-card's --lyra-media-card-max-height. */
+    max-inline-size: min(var(--lyra-dialog-max-width, 32rem), 100%);
+    max-block-size: 100%;
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    overflow: auto;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='heading'] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    margin: 0;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [part='close-button'] {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    border: none;
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+  }
+  [part='close-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='close-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='close-button'] svg {
+    display: block;
+  }
+  [part='body'] {
+    padding: var(--lyra-space-l);
+    overflow: auto;
+  }
+  [part='footer'] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m) var(--lyra-space-l);
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='footer'][hidden] {
+    display: none;
+  }
+`;

package/dist/components/dock-panel/dock-panel.d.ts

@@ -0,0 +1,142 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** Which edge of the panel's own container it's docked to. `'start'`/`'end'`
+ *  are logical-inline (mirror left/right depending on writing direction);
+ *  `'top'`/`'bottom'` are block-direction and unaffected by RTL. */
+export type DockPanelEdge = 'start' | 'end' | 'top' | 'bottom';
+export interface DockPanelResizeDetail {
+    size: string;
+}
+export interface DockPanelCollapseChangeDetail {
+    collapsed: boolean;
+}
+/**
+ * Resolves an arbitrary CSS length (`px`, `rem`, `em`, `vw`, `vh`, `%`, or a
+ * bare/unitless number treated as `px`) to a live pixel value, without a DOM
+ * probe measurement -- `min-size`/`max-size` are pure constraints that are
+ * never themselves rendered anywhere, so there's nothing to measure; the
+ * *current* `size` is instead always read back from the host's own
+ * `getBoundingClientRect()` (see `currentSizePx()`), which handles any unit
+ * for free since the browser already resolved it during layout. Returns
+ * `undefined` for an empty/unparseable string.
+ */
+export declare function parseLengthPx(length: string, containerPx: number, fontSizeEl?: Element): number | undefined;
+/**
+ * `<lyra-dock-panel>` — a single panel docked to one edge of whatever
+ * contains it, resizable by dragging its inner edge. Unlike `<lyra-split>`
+ * (which owns and lays out N sibling panels, and requires restructuring a
+ * layout so every panel becomes its direct child), this is one self-
+ * contained element you drop next to your existing content -- typically as
+ * an absolutely-positioned child of a `position: relative` parent, or as a
+ * flex item alongside a main-content sibling. It deliberately imposes no
+ * `position`/`inset` of its own (see the styles module): it only manages its
+ * own size along the resize axis (`inline-size` for `start`/`end`,
+ * `block-size` for `top`/`bottom`) and fills 100% of the cross axis, leaving
+ * where it sits in the page entirely up to the consumer's own layout.
+ *
+ * `lyra-split` stays the right primitive for the multi-sibling-panel case;
+ * this is the primitive for the single-edge-docked case, kept as a separate
+ * component rather than a second mode bolted onto `lyra-split`'s API.
+ *
+ * Pointer-drag-resize mirrors `lyra-split`'s pointer-capture technique
+ * (pointerdown captures the pointer on the handle, pointermove computes a
+ * new size, pointerup/pointercancel/lostpointercapture all release it) but
+ * for a single draggable edge instead of N-1 dividers between N panels, and
+ * reasons in raw pixels throughout rather than percent -- `size` is a CSS
+ * length, and pointer movement is naturally pixels, so there's no percent
+ * domain to convert through here. Every resize (drag step, drag release, or
+ * keyboard step) always commits `size` as a `px` string regardless of what
+ * unit `size`/`min-size`/`max-size` were originally expressed in -- a drag
+ * inherently produces a pixel-precise result, so re-expressing it in the
+ * caller's original unit (e.g. back into `rem`) would just be lossy
+ * re-derivation for no benefit.
+ *
+ * Collapsing hides the slotted content but keeps the panel itself at a
+ * small persistent "rail" width/height (`--lyra-dock-panel-collapsed-size`,
+ * default `var(--lyra-icon-button-size)`) rather than collapsing to zero --
+ * a zero-size collapsed panel would have nowhere left to host the toggle
+ * button that re-expands it. `size` itself is left untouched while
+ * collapsed, so re-expanding restores exactly what it was.
+ *
+ * @customElement lyra-dock-panel
+ * @slot - The panel's own content.
+ * @event lyra-resize - `detail: { size }` (a `px` CSS length string), fired on every drag step,
+ *   drag release, and keyboard step.
+ * @event lyra-collapse-change - `detail: { collapsed }`, fired whenever the collapse toggle changes
+ *   `collapsed`.
+ * @csspart base - The panel root.
+ * @csspart content - The wrapper around the default slot; hidden while `collapsed`.
+ * @csspart handle - The draggable resize handle on the panel's inner edge. Only rendered when
+ *   `resizable` and not `collapsed`.
+ * @csspart collapse-toggle - The collapse/expand toggle button. Only rendered when `collapsible`.
+ */
+export declare class LyraDockPanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    edge: DockPanelEdge;
+    /** The current docked size along the resize axis, as a CSS length (e.g. `"320px"`). */
+    size: string;
+    /** Minimum resize bound, as a CSS length. */
+    minSize: string;
+    /** Maximum resize bound, as a CSS length. Empty means "no explicit cap" -- the live extent of
+     *  the containing element is used instead, so the panel still can't be dragged wider/taller than
+     *  its container. */
+    maxSize: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    /** When `false`, no drag handle renders at all and the panel is a fixed size. */
+    resizable: boolean;
+    private drag;
+    private readonly contentId;
+    private containerResizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Creates (idempotently) and (re-)observes the containing element with a
+     *  `ResizeObserver` that just requests a re-render on every callback --
+     *  `containerPx()`/`currentSizePx()` already read the live DOM on every
+     *  render, so there's no separate cached value to update here, only the
+     *  render that was otherwise never being triggered. A no-op when not yet
+     *  connected (no `parentElement`). */
+    private armContainerResizeObserver;
+    protected willUpdate(changed: PropertyValues): void;
+    /** `'inline'` for the `start`/`end` edges (resizing changes `inline-size`), `'block'` for
+     *  `top`/`bottom` (resizing changes `block-size`). */
+    private get axis();
+    /** +1 or -1: which physical pointer-movement/keyboard direction *grows* the panel, folding in
+     *  both which edge is pinned (the opposite edge is what's dragged) and, for the inline axis
+     *  only, the current RTL-ness -- mirrors lyra-split's own horizontal+RTL delta inversion, just
+     *  generalized to four possible pinned edges instead of split's always-LTR-authored pair order. */
+    private get growSign();
+    private applyHostSize;
+    /** Live pixel size of the containing block along the resize axis, used both to resolve a `%`
+     *  `min-size`/`max-size` and as the `max-size` fallback when unset. Falls back to the viewport
+     *  when there's no parent element (e.g. not yet connected). */
+    private containerPx;
+    private resolveBoundsPx;
+    /** The panel's own current rendered size (px) along the resize axis, read straight off the
+     *  live box -- this is what lets `size` be expressed in any CSS unit and still drag/step
+     *  correctly from wherever it actually rendered, with no separate unit-conversion path for the
+     *  "current" value (only `min-size`/`max-size`, which are never themselves rendered, need
+     *  `parseLengthPx`). */
+    private currentSizePx;
+    private applySize;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onHandleKeyDown;
+    private toggleCollapsed;
+    /** Rotation (deg) for the collapse-toggle's chevron: it points toward the
+     *  panel's pinned edge when expanded (that's the direction clicking it
+     *  will shrink toward) and away from it when collapsed (the direction
+     *  clicking it will grow toward) -- mirrors lyra-widget's collapse-button
+     *  rotate-the-wrapping-part technique, generalized across four possible
+     *  pinned edges and, for `start`/`end`, RTL. */
+    private get toggleChevronDeg();
+    private handleTemplate;
+    private collapseToggleTemplate;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-dock-panel': LyraDockPanel;
+    }
+}