@aceshooting/lyra-ui 2.0.0 → 2.2.0

package/dist/components/playback/playback.js

@@ -1,209 +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 } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './playback.class.js';
+import { LyraPlayback } from './playback.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { playIcon, pauseIcon } from '../../internal/icons.js';
-import { styles } from './playback.styles.js';
-const MIN_INTERVAL_MS = 16; // ~one animation frame; prevents a near-zero-delay tick loop
-let warnedInvalidInterval = false;
-function warnInvalidInterval(value) {
-    if (warnedInvalidInterval)
-        return;
-    warnedInvalidInterval = true;
-    console.warn(`<lyra-playback> received a non-finite or non-positive interval-ms (${value}); clamping to ${MIN_INTERVAL_MS}ms.`);
-}
-/**
- * `<lyra-playback>` — steps an index through `[0, length)` on a fixed
- * interval (play/pause), the common building block behind ad-hoc
- * play-timers in time-series dashboards.
- *
- * @customElement lyra-playback
- * @event lyra-play - Fired when playback starts.
- * @event lyra-pause - Fired when playback stops (including auto-pause).
- * @event lyra-step - `detail: { index }`, fired on every tick and manual step.
- * @csspart base, play-button, slider
- */
-export class LyraPlayback extends LyraElement {
-    constructor() {
-        super(...arguments);
-        this.length = 0;
-        this.index = 0;
-        this.intervalMs = 900;
-        // `playing` is declared via `static properties` above (noAccessor) with a
-        // hand-written accessor below, so a direct `el.playing = true/false`
-        // assignment always drives the real timer — not just calls through
-        // play()/pause().
-        this.loop = true;
-        /**
-         * Re-declared as a Lit reactive property (shadowing the inherited plain
-         * `HTMLElement.hidden` IDL property) so that setting `el.hidden = true` —
-         * or the `hidden` attribute — actually enters Lit's change-tracking system
-         * and the `willUpdate` auto-pause guard below can see it via `changed`.
-         * `reflect: true` preserves the native attribute-reflection behavior.
-         */
-        this.hidden = false;
-        this._playing = false;
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    static { this.properties = {
-        playing: { type: Boolean, reflect: true, noAccessor: true },
-        loop: { type: Boolean },
-    }; }
-    get playing() {
-        return this._playing;
-    }
-    set playing(next) {
-        const old = this._playing;
-        if (next === old)
-            return;
-        this._playing = next;
-        if (next) {
-            if (this.length <= 1) {
-                this._playing = false;
-                return;
-            }
-            this.emit('lyra-play');
-            this.scheduleTick();
-        }
-        else {
-            window.clearTimeout(this.timer);
-            this.timer = undefined;
-            this.emit('lyra-pause');
-        }
-        this.requestUpdate('playing', old);
-    }
-    /** Largest index reachable at the current `length` (never negative). */
-    get maxIndex() {
-        return Math.max(0, this.length - 1);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.pause();
-    }
-    willUpdate(changed) {
-        if (changed.has('hidden') && this.hidden)
-            this.pause();
-        if (changed.has('length')) {
-            // If length is externally reduced to <= 1 while playing, the timer
-            // would otherwise keep firing forever — and the play button (the only
-            // control that could stop it) becomes ?disabled at that point, leaving
-            // no way to stop it from the rendered UI.
-            if (this.length <= 1)
-                this.pause();
-            // Re-clamp `index` into the new `[0, length)` range on any shrink, not
-            // just the <= 1 case above, so it never lingers out of bounds.
-            if (this.index > this.maxIndex)
-                this.index = this.maxIndex;
-        }
-    }
-    /** Start playback; no-op if there's nothing to advance through. */
-    play() {
-        if (this.playing || this.length <= 1)
-            return;
-        this.playing = true;
-    }
-    /** Stop playback. */
-    pause() {
-        if (!this.playing)
-            return;
-        this.playing = false;
-    }
-    /** Toggle between playing and paused. */
-    toggle() {
-        this.playing = !this.playing;
-    }
-    // A self-rescheduling `setTimeout` (rather than one long-lived
-    // `setInterval`) so `intervalMs` is re-read fresh before every tick, the
-    // same way `tick()` already re-reads `this.loop` on every fire — changing
-    // `interval-ms` live takes effect on the very next step instead of only
-    // after a pause/play cycle.
-    scheduleTick() {
-        let delay = this.intervalMs;
-        if (!Number.isFinite(delay) || delay < MIN_INTERVAL_MS) {
-            warnInvalidInterval(delay);
-            delay = MIN_INTERVAL_MS;
-        }
-        this.timer = window.setTimeout(() => {
-            this.tick();
-            if (this.playing)
-                this.scheduleTick();
-        }, delay);
-    }
-    tick() {
-        const next = this.index + 1;
-        if (next >= this.length) {
-            if (this.loop)
-                this.setIndex(0);
-            else {
-                this.setIndex(this.length - 1);
-                this.pause();
-            }
-        }
-        else {
-            this.setIndex(next);
-        }
-    }
-    setIndex(i) {
-        this.index = i;
-        this.emit('lyra-step', { index: this.index });
-    }
-    /** Advance one step without starting playback. */
-    next() {
-        if (this.index + 1 < this.length)
-            this.setIndex(this.index + 1);
-    }
-    /** Go back one step without starting playback. */
-    previous() {
-        if (this.index > 0)
-            this.setIndex(this.index - 1);
-    }
-    /** Jump to an explicit index, pausing playback. */
-    goTo(index) {
-        this.pause();
-        this.setIndex(Math.min(this.maxIndex, Math.max(0, index)));
-    }
-    render() {
-        return html `
-      <div part="base">
-        <button
-          part="play-button"
-          type="button"
-          aria-label=${this.playing ? 'Pause' : 'Play'}
-          ?disabled=${this.length <= 1}
-          @click=${() => this.toggle()}
-        >
-          ${this.playing ? pauseIcon() : playIcon()}
-        </button>
-        <input
-          part="slider"
-          type="range"
-          min="0"
-          max=${this.maxIndex}
-          .value=${String(this.index)}
-          aria-label="Playback position"
-          ?disabled=${this.length <= 1}
-          @input=${(e) => this.goTo(Number(e.target.value))}
-        />
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Number })
-], LyraPlayback.prototype, "length", void 0);
-__decorate([
-    property({ type: Number })
-], LyraPlayback.prototype, "index", void 0);
-__decorate([
-    property({ type: Number, attribute: 'interval-ms' })
-], LyraPlayback.prototype, "intervalMs", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraPlayback.prototype, "hidden", void 0);
 defineElement('playback', LyraPlayback);
+//# sourceMappingURL=playback.js.map

package/dist/components/playback/playback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback.js","sourceRoot":"","sources":["../../../src/components/playback/playback.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC"}

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

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

package/dist/components/playback/playback.styles.d.ts.map

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

package/dist/components/playback/playback.styles.js

@@ -4,6 +4,11 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-s);
+    /* Derived from --lyra-icon-button-size (0.35 * 2.5rem = 0.875rem, the
+       prior bare literal) so the rendered play/pause SVG icon (icons render
+       at width/height: 1em, so this font-size directly controls its pixel
+       size) tracks the button's own token instead of drifting from it. */
+    --lyra-playback-icon-size: calc(var(--lyra-icon-button-size) * 0.35);
   }
   [part='base'] {
     display: flex;
@@ -14,14 +19,14 @@ export const styles = css `
     inline-size: var(--lyra-icon-button-size);
     block-size: var(--lyra-icon-button-size);
     border-radius: 50%;
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.875rem;
+    font-size: var(--lyra-playback-icon-size);
   }
   [part='play-button']:hover {
     border-color: var(--lyra-color-brand);
@@ -46,3 +51,4 @@ export const styles = css `
     outline-offset: var(--lyra-focus-ring-offset);
   }
 `;
+//# sourceMappingURL=playback.styles.js.map

package/dist/components/playback/playback.styles.js.map

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

package/dist/components/responsive-panel/responsive-panel.class.d.ts

@@ -0,0 +1,164 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/** The `mode` property's literal value -- `'auto'` tracks the viewport
+ *  breakpoint live; `'inline'`/`'overlay'` force that presentation
+ *  regardless of viewport width. */
+export type ResponsivePanelMode = 'inline' | 'overlay' | 'auto';
+/** What `mode` actually resolves to once the breakpoint is taken into
+ *  account -- `'auto'` never appears here. */
+export type ResponsivePanelEffectiveMode = 'inline' | 'overlay';
+export type ResponsivePanelVariant = 'fullscreen' | 'bottom-sheet';
+/** Reason the panel was closed, forwarded as the `lyra-close` event detail --
+ *  mirrors lyra-dialog's own `DialogCloseReason` shape. `'escape'` and
+ *  `'backdrop'` are emitted by the overlay presentation's own built-in
+ *  dismiss triggers (they can't occur while inline, since there's no
+ *  backdrop/document-keydown trap wired up then); any other string is
+ *  whatever a caller passes to `close()`. */
+export type ResponsivePanelCloseReason = 'escape' | 'backdrop' | 'api' | (string & Record<never, never>);
+export interface ResponsivePanelModeChangeDetail {
+    mode: ResponsivePanelEffectiveMode;
+}
+/**
+ * Pure resolution of the `mode` prop + current viewport into the actual
+ * presentation. Kept separate from the `matchMedia` listener wiring below so
+ * it's independently unit-testable, and so the live-viewport-response logic
+ * can be exercised in tests by calling it (or the instance method that wraps
+ * it) directly instead of needing control over the real browser window,
+ * which `@web/test-runner` doesn't give.
+ */
+export declare function resolveEffectiveMode(mode: ResponsivePanelMode, belowBreakpoint: boolean): ResponsivePanelEffectiveMode;
+/**
+ * `<lyra-responsive-panel>` — the same slotted content either docked inline
+ * in the page's normal layout flow (desktop) or presented as a full-screen/
+ * bottom-sheet overlay (mobile), depending on viewport width. Typical uses:
+ * a settings panel or a conversation-history sidebar that's a permanent
+ * docked pane on a wide screen but a modal on a phone.
+ *
+ * Breakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +
+ * ')')`, re-evaluated live while connected -- resizing/rotating a device
+ * that crosses the breakpoint while `mode="auto"` (the default) updates the
+ * effective presentation without unmounting or re-creating the slotted
+ * content: inline and overlay presentation share the exact same shadow DOM
+ * structure (only a css class, and the overlay-only `role`/`aria-modal`
+ * attributes and backdrop element, differ), so lit-html's diffing keeps
+ * `[part="body"]` and its `<slot>` as the same DOM node across the
+ * transition -- scroll position and focus inside the slotted content survive
+ * it for free. When an open inline panel becomes modal, focus already inside
+ * is preserved and outside focus moves to the first available target. Closing
+ * still returns to the opener captured by the original inline open.
+ *
+ * The overlay presentation uses the library's shared overlay coordinator for
+ * focus trapping, Escape/backdrop dismissal, inerting, and stack ordering,
+ * while retaining this component's own responsive rendering and close event.
+ *
+ * Accessible name (overlay presentation only -- the inline presentation has
+ * no dialog semantics to name): `label`, when set, is used verbatim. When
+ * `label` is empty, this falls back to the `header` slot's content -- a
+ * heading element (`h1`–`h6` or `[role="heading"]`) among the slotted header
+ * content wins if present, otherwise the header slot's full text content is
+ * used, mirroring lyra-dialog's `detectHeading()`/`headingText` fallback (see
+ * dialog.ts's module doc for why this uses `aria-label`, a copied string,
+ * rather than `aria-labelledby`: the header content is light DOM while
+ * `[part="panel"]` lives in this element's shadow tree, and an ID-reference
+ * attribute can't resolve across that boundary). A panel opened without
+ * either `label` or header content still renders `role="dialog"` with no
+ * accessible name -- set one of the two to avoid that.
+ *
+ * @customElement lyra-responsive-panel
+ * @slot - The panel body.
+ * @slot header - Optional header content, rendered above the body.
+ * @slot footer - Optional footer content (e.g. action buttons), rendered below the body.
+ * @event lyra-close - `detail: ResponsivePanelCloseReason`. Fired by the overlay presentation's
+ *   built-in dismiss triggers (Escape, backdrop click) and by any `close()` call, in either
+ *   presentation -- a plain `open = false` property write does not fire it (matching
+ *   lyra-dialog's own precedent: only going through `close()` counts as a dismissal), and this
+ *   is deliberately the same event/semantics in both presentations, rather than only being
+ *   meaningful for the overlay case, so a consumer only has to wire up one listener regardless
+ *   of which presentation is currently active.
+ * @event lyra-mode-change - `detail: ResponsivePanelModeChangeDetail`. Fired whenever the
+ *   *effective* mode (not the `mode` prop's literal value, which may be `'auto'`) changes between
+ *   `'inline'` and `'overlay'` -- crossing the breakpoint while `mode="auto"`, or the host
+ *   reassigning `mode` to a value that changes the effective presentation. Never fired for the
+ *   initial render, only for a live change thereafter.
+ * @csspart base - The root wrapper; `display: none` while closed, positioned `fixed` while open
+ *   and in the overlay presentation.
+ * @csspart backdrop - The full-viewport scrim behind the panel -- only rendered in the overlay
+ *   presentation.
+ * @csspart panel - The panel surface itself (`role="dialog"` while open and in the overlay
+ *   presentation).
+ * @csspart header - The wrapper around the `header` slot.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ */
+export declare class LyraResponsivePanel extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the panel is open. In the inline presentation this just means visible/mounted; in
+     *  the overlay presentation this is the actual modal open/closed state. */
+    open: boolean;
+    /** `'auto'` (default) tracks `mobile-breakpoint` live; `'inline'`/`'overlay'` force that
+     *  presentation regardless of viewport width. */
+    mode: ResponsivePanelMode;
+    /** Only affects the overlay presentation's visual treatment -- `'fullscreen'` (default) covers
+     *  the whole viewport; `'bottom-sheet'` slides up from the bottom and doesn't cover the full
+     *  height. */
+    variant: ResponsivePanelVariant;
+    /** Accessible name for the overlay presentation's `role="dialog"`. Unused in the inline
+     *  presentation, which has no dialog semantics to name. When empty, falls back to the `header`
+     *  slot's content -- see the class doc for the full fallback order. */
+    label: string;
+    /** CSS length passed to `matchMedia` as `(max-width: <this>)` to decide, in `mode="auto"`,
+     *  whether the effective presentation is `'overlay'` (below/at this width) or `'inline'`
+     *  (above it). */
+    mobileBreakpoint: string;
+    private belowBreakpoint;
+    private effectiveMode;
+    private hasHeaderSlot;
+    private hasFooterSlot;
+    /** Fallback accessible name sourced from the `header` slot's content -- see `detectHeadingText()`. */
+    private headingText?;
+    private mediaQuery?;
+    private releaseScrollLock?;
+    private lastTrigger?;
+    private overlayHandle?;
+    /** Whether the overlay-only mechanics (scroll-lock and shared overlay registration) are currently
+     *  engaged -- derived from `effectiveMode === 'overlay' && open`, tracked separately from those
+     *  two properties so willUpdate can diff "was engaged" vs "should be engaged now" regardless of
+     *  which of the two changed. */
+    private overlayChromeActive;
+    private focusOverlayAfterUpdate;
+    private isFirstUpdate;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activateOverlayChrome;
+    private deactivateOverlayChrome;
+    private setupMediaQuery;
+    private onMediaChange;
+    /** The breakpoint-response logic itself, kept callable independently of the
+     *  `matchMedia` listener that normally drives it -- tests invoke this
+     *  directly to simulate crossing the breakpoint. */
+    private handleBreakpointChange;
+    private onHeaderSlotChange;
+    private onFooterSlotChange;
+    private detectHeadingText;
+    /**
+     * Close the panel. `reason` is forwarded as the `lyra-close` detail --
+     * built-in overlay triggers pass `'escape'`/`'backdrop'`; a consumer's own
+     * close affordance (e.g. a footer button, or a docked panel's own toggle)
+     * should call this directly with its own reason string. Fires in both
+     * presentations (see the class doc's `lyra-close` note) but only returns
+     * focus to the trigger that opened it when the overlay presentation is
+     * active, since the inline presentation never took focus away from
+     * anything to begin with.
+     */
+    close(reason?: ResponsivePanelCloseReason): void;
+    private onBackdropClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-responsive-panel': LyraResponsivePanel;
+    }
+}
+//# sourceMappingURL=responsive-panel.class.d.ts.map

package/dist/components/responsive-panel/responsive-panel.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-panel.class.d.ts","sourceRoot":"","sources":["../../../src/components/responsive-panel/responsive-panel.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D;;oCAEoC;AACpC,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhE;8CAC8C;AAC9C,MAAM,MAAM,4BAA4B,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEhE,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,cAAc,CAAC;AAEnE;;;;;6CAK6C;AAC7C,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;AAEzG,MAAM,WAAW,+BAA+B;IAC9C,IAAI,EAAE,4BAA4B,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,mBAAmB,EAAE,eAAe,EAAE,OAAO,GAAG,4BAA4B,CAGtH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,MAAM,CAAC,MAAM,iCAAgC;IAE7C;+EAC2E;IAC/B,IAAI,UAAS;IAEzD;qDACiD;IACpB,IAAI,EAAE,mBAAmB,CAAU;IAEhE;;kBAEc;IACe,OAAO,EAAE,sBAAsB,CAAgB;IAE5E;;2EAEuE;IAC3D,KAAK,SAAM;IAEvB;;sBAEkB;IAC4B,gBAAgB,SAAW;IAEhE,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,aAAa,CAA0C;IAC/D,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IACvC,sGAAsG;IAC7F,OAAO,CAAC,WAAW,CAAC,CAAS;IAEtC,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,WAAW,CAAC,CAAc;IAClC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC;;;oCAGgC;IAChC,OAAO,CAAC,mBAAmB,CAAS;IACpC,OAAO,CAAC,uBAAuB,CAAS;IACxC,OAAO,CAAC,aAAa,CAAQ;IAE7B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAyDlD;IAKD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQ/C;IAED,iBAAiB,IAAI,IAAI,CAiBxB;IAED,oBAAoB,IAAI,IAAI,CAO3B;IAED,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,aAAa,CAEnB;IAEF;;wDAEoD;IACpD,OAAO,CAAC,sBAAsB;IAI9B,OAAO,CAAC,kBAAkB,CAGxB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IAWF,OAAO,CAAC,iBAAiB;IAazB;;;;;;;;;OASG;IACH,KAAK,CAAC,MAAM,GAAE,0BAAkC,GAAG,IAAI,CAItD;IAED,OAAO,CAAC,eAAe,CAErB;IAEF,MAAM,IAAI,cAAc,CAyBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}