@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -0,0 +1,358 @@
+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';
+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);
+//# sourceMappingURL=dock-panel.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dock-panel.class.js","sourceRoot":"","sources":["../../../src/components/dock-panel/dock-panel.class.ts"],"names":[],"mappings":"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"}

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"}