@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,142 +1,2 @@
-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;
-    }
-}
+export * from './dock-panel.class.js';
+//# sourceMappingURL=dock-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dock-panel.d.ts","sourceRoot":"","sources":["../../../src/components/dock-panel/dock-panel.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/components/dock-panel/dock-panel.js

@@ -1,359 +1,5 @@
-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 } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './dock-panel.class.js';
+import { LyraDockPanel } from './dock-panel.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { isRtl } from '../../internal/rtl.js';
-import { nextId } from '../../internal/a11y.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { styles } from './dock-panel.styles.js';
-/** Arrow-key step, in px, per keydown on the resize handle. */
-const KEYBOARD_STEP_PX = 16;
-const LENGTH_RE = /^(-?[\d.]+)(px|rem|em|vw|vh|%)?$/;
-/**
- * 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 function parseLengthPx(length, containerPx, fontSizeEl = document.documentElement) {
-    const trimmed = length.trim();
-    if (!trimmed)
-        return undefined;
-    const match = LENGTH_RE.exec(trimmed);
-    if (!match)
-        return undefined;
-    const value = parseFloat(match[1]);
-    switch (match[2]) {
-        case '%':
-            return (value / 100) * containerPx;
-        case 'rem':
-            return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
-        case 'em':
-            return value * parseFloat(getComputedStyle(fontSizeEl).fontSize);
-        case 'vw':
-            return (value / 100) * window.innerWidth;
-        case 'vh':
-            return (value / 100) * window.innerHeight;
-        default:
-            return value;
-    }
-}
-/**
- * `<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 class LyraDockPanel extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.edge = 'end';
-        /** The current docked size along the resize axis, as a CSS length (e.g. `"320px"`). */
-        this.size = '280px';
-        /** Minimum resize bound, as a CSS length. */
-        this.minSize = '160px';
-        /** 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. */
-        this.maxSize = '';
-        this.collapsible = false;
-        this.collapsed = false;
-        /** When `false`, no drag handle renders at all and the panel is a fixed size. */
-        this.resizable = true;
-        this.drag = null;
-        this.contentId = nextId('dock-panel-content');
-        this.onPointerDown = (e) => {
-            if (!this.resizable || this.collapsed || this.drag)
-                return;
-            this.drag = {
-                pointerId: e.pointerId,
-                startPos: this.axis === 'inline' ? e.clientX : e.clientY,
-                startSizePx: this.currentSizePx(),
-            };
-            e.target.setPointerCapture(e.pointerId);
-            window.addEventListener('pointermove', this.onPointerMove);
-            window.addEventListener('pointerup', this.onPointerUp);
-            // A drag can end without a pointerup: a system gesture / palm rejection
-            // can fire pointercancel, and losing capture (e.g. element removed) fires
-            // lostpointercapture -- both need the same teardown as pointerup or the
-            // handle keeps "resizing" in response to unrelated movement.
-            window.addEventListener('pointercancel', this.onPointerUp);
-            window.addEventListener('lostpointercapture', this.onPointerUp);
-        };
-        this.onPointerMove = (e) => {
-            const drag = this.drag;
-            if (!drag || e.pointerId !== drag.pointerId)
-                return;
-            const pos = this.axis === 'inline' ? e.clientX : e.clientY;
-            const delta = this.growSign * (pos - drag.startPos);
-            this.applySize(drag.startSizePx + delta);
-        };
-        this.onPointerUp = (e) => {
-            if (!this.drag || e.pointerId !== this.drag.pointerId)
-                return;
-            this.drag = null;
-            window.removeEventListener('pointermove', this.onPointerMove);
-            window.removeEventListener('pointerup', this.onPointerUp);
-            window.removeEventListener('pointercancel', this.onPointerUp);
-            window.removeEventListener('lostpointercapture', this.onPointerUp);
-        };
-        this.onHandleKeyDown = (e) => {
-            if (!this.resizable || this.collapsed)
-                return;
-            // The physical "positive direction" key is always Right/Down; growSign
-            // already encodes whether that direction grows or shrinks the panel for
-            // the current edge + RTL-ness, exactly mirroring how onPointerMove folds
-            // it into the drag delta above.
-            const forwardKey = this.axis === 'inline' ? 'ArrowRight' : 'ArrowDown';
-            const backwardKey = this.axis === 'inline' ? 'ArrowLeft' : 'ArrowUp';
-            if (e.key === forwardKey) {
-                e.preventDefault();
-                this.applySize(this.currentSizePx() + this.growSign * KEYBOARD_STEP_PX);
-            }
-            else if (e.key === backwardKey) {
-                e.preventDefault();
-                this.applySize(this.currentSizePx() - this.growSign * KEYBOARD_STEP_PX);
-            }
-        };
-        this.toggleCollapsed = () => {
-            this.collapsed = !this.collapsed;
-            this.emit('lyra-collapse-change', { collapsed: this.collapsed });
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    connectedCallback() {
-        super.connectedCallback();
-        this.applyHostSize();
-        this.armContainerResizeObserver();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.drag = null;
-        window.removeEventListener('pointermove', this.onPointerMove);
-        window.removeEventListener('pointerup', this.onPointerUp);
-        window.removeEventListener('pointercancel', this.onPointerUp);
-        window.removeEventListener('lostpointercapture', this.onPointerUp);
-        this.containerResizeObserver?.disconnect();
-    }
-    /** 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`). */
-    armContainerResizeObserver() {
-        if (!this.parentElement)
-            return;
-        this.containerResizeObserver ??= new ResizeObserver(() => this.requestUpdate());
-        this.containerResizeObserver.observe(this.parentElement);
-    }
-    // Applied in willUpdate (before render), not updated (after render): the
-    // handle's aria-valuenow is computed during render from the host's own
-    // live getBoundingClientRect(), so the new inline-size/block-size has to
-    // already be on the host *before* render runs, or aria-valuenow would
-    // read back the size from one update cycle ago.
-    willUpdate(changed) {
-        if (changed.has('size') || changed.has('collapsed') || changed.has('edge')) {
-            this.applyHostSize();
-        }
-    }
-    /** `'inline'` for the `start`/`end` edges (resizing changes `inline-size`), `'block'` for
-     *  `top`/`bottom` (resizing changes `block-size`). */
-    get axis() {
-        return this.edge === 'start' || this.edge === 'end' ? 'inline' : 'block';
-    }
-    /** +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. */
-    get growSign() {
-        if (this.edge === 'top')
-            return 1;
-        if (this.edge === 'bottom')
-            return -1;
-        const rtl = isRtl(this);
-        if (this.edge === 'start')
-            return rtl ? -1 : 1;
-        return rtl ? 1 : -1; // edge === 'end'
-    }
-    applyHostSize() {
-        const value = this.collapsed ? 'var(--lyra-dock-panel-collapsed-size)' : this.size;
-        if (this.axis === 'inline') {
-            this.style.inlineSize = value;
-            this.style.blockSize = '';
-        }
-        else {
-            this.style.blockSize = value;
-            this.style.inlineSize = '';
-        }
-    }
-    /** 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). */
-    containerPx() {
-        const parent = this.parentElement;
-        const rect = parent?.getBoundingClientRect();
-        if (this.axis === 'inline')
-            return rect?.width ?? window.innerWidth;
-        return rect?.height ?? window.innerHeight;
-    }
-    resolveBoundsPx() {
-        const containerPx = this.containerPx();
-        const minPx = Math.max(0, parseLengthPx(this.minSize, containerPx, this) ?? 0);
-        const maxPx = Math.max(minPx, parseLengthPx(this.maxSize, containerPx, this) ?? containerPx);
-        return { minPx, maxPx };
-    }
-    /** 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`). */
-    currentSizePx() {
-        const rect = this.getBoundingClientRect();
-        return this.axis === 'inline' ? rect.width : rect.height;
-    }
-    applySize(px) {
-        const { minPx, maxPx } = this.resolveBoundsPx();
-        const clamped = Math.min(Math.max(px, minPx), maxPx);
-        this.size = `${Math.round(clamped)}px`;
-        // Apply the new host size synchronously instead of waiting for Lit's
-        // (microtask-batched) update cycle to reach willUpdate: currentSizePx()
-        // measures the *live* box, so back-to-back steps (rapid keyboard repeat,
-        // or another pointermove before a paint) must each see the size the
-        // previous step just committed, not a stale pre-update box.
-        this.applyHostSize();
-        this.emit('lyra-resize', { size: this.size });
-    }
-    /** 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. */
-    get toggleChevronDeg() {
-        if (this.edge === 'top')
-            return this.collapsed ? 90 : -90;
-        if (this.edge === 'bottom')
-            return this.collapsed ? -90 : 90;
-        const pinnedPhysicalEnd = this.edge === 'end' ? !isRtl(this) : isRtl(this);
-        return this.collapsed !== pinnedPhysicalEnd ? 0 : 180;
-    }
-    handleTemplate() {
-        if (!this.resizable || this.collapsed)
-            return nothing;
-        const { minPx, maxPx } = this.resolveBoundsPx();
-        return html `<div
-      part="handle"
-      role="separator"
-      aria-label="Resize panel"
-      aria-orientation=${this.axis === 'inline' ? 'vertical' : 'horizontal'}
-      aria-valuenow=${Math.round(this.currentSizePx())}
-      aria-valuemin=${Math.round(minPx)}
-      aria-valuemax=${Math.round(maxPx)}
-      tabindex="0"
-      @pointerdown=${this.onPointerDown}
-      @keydown=${this.onHandleKeyDown}
-    ></div>`;
-    }
-    collapseToggleTemplate() {
-        if (!this.collapsible)
-            return nothing;
-        return html `<button
-      part="collapse-toggle"
-      type="button"
-      aria-expanded=${this.collapsed ? 'false' : 'true'}
-      aria-controls=${this.contentId}
-      aria-label=${this.collapsed ? 'Expand panel' : 'Collapse panel'}
-      @click=${this.toggleCollapsed}
-    >
-      <span style=${`display:inline-flex;transform:rotate(${this.toggleChevronDeg}deg)`}
-        >${chevronIcon()}</span
-      >
-    </button>`;
-    }
-    render() {
-        return html `
-      <div part="base">
-        <div part="content" id=${this.contentId} ?hidden=${this.collapsed}>
-          <slot></slot>
-        </div>
-        ${this.handleTemplate()} ${this.collapseToggleTemplate()}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraDockPanel.prototype, "edge", void 0);
-__decorate([
-    property()
-], LyraDockPanel.prototype, "size", void 0);
-__decorate([
-    property({ attribute: 'min-size' })
-], LyraDockPanel.prototype, "minSize", void 0);
-__decorate([
-    property({ attribute: 'max-size' })
-], LyraDockPanel.prototype, "maxSize", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "collapsible", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraDockPanel.prototype, "resizable", void 0);
 defineElement('dock-panel', LyraDockPanel);
+//# sourceMappingURL=dock-panel.js.map

package/dist/components/dock-panel/dock-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock-panel.js","sourceRoot":"","sources":["../../../src/components/dock-panel/dock-panel.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=dock-panel.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dock-panel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/dock-panel/dock-panel.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmKlB,CAAC"}

package/dist/components/dock-panel/dock-panel.styles.js

@@ -46,7 +46,7 @@ export const styles = css `
     inline-size: 100%;
     block-size: 100%;
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     overflow: hidden;
   }
 
@@ -81,31 +81,31 @@ export const styles = css `
   [part='handle']::before {
     content: '';
     position: absolute;
-    inset: -6px;
+    inset: var(--lyra-size-neg-6px);
   }
 
   :host([edge='start']) [part='handle'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     cursor: col-resize;
   }
   :host([edge='end']) [part='handle'] {
     inset-block: 0;
     inset-inline-start: 0;
-    inline-size: 3px;
+    inline-size: var(--lyra-size-3px);
     cursor: col-resize;
   }
   :host([edge='top']) [part='handle'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
   :host([edge='bottom']) [part='handle'] {
     inset-inline: 0;
     inset-block-start: 0;
-    block-size: 3px;
+    block-size: var(--lyra-size-3px);
     cursor: row-resize;
   }
 
@@ -114,18 +114,18 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
+    inline-size: var(--lyra-size-1-5rem);
+    block-size: var(--lyra-size-1-5rem);
     padding: 0;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
     cursor: pointer;
-    font-size: 0.75rem;
-    line-height: 1;
+    font-size: var(--lyra-font-size-xs);
+    line-height: var(--lyra-line-height-none);
     transition: background var(--lyra-transition-fast), color var(--lyra-transition-fast);
-    z-index: 1;
+    z-index: var(--lyra-layer-content);
   }
   [part='collapse-toggle']:hover {
     background: var(--lyra-color-brand-quiet);
@@ -156,4 +156,11 @@ export const styles = css `
     inset-inline-start: 50%;
     transform: translateX(-50%);
   }
+  @media (prefers-reduced-motion: reduce) {
+    [part='collapse-toggle'],
+    [part='handle'] {
+      transition: none !important;
+    }
+  }
 `;
+//# sourceMappingURL=dock-panel.styles.js.map

package/dist/components/dock-panel/dock-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock-panel.styles.js","sourceRoot":"","sources":["../../../src/components/dock-panel/dock-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,CAAC"}