@aceshooting/lyra-ui 3.4.0 → 3.6.0

package/dist/components/lightbox/lightbox.class.js

@@ -0,0 +1,415 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { activateOverlay } from '../../internal/overlay-manager.js';
+import { nextId, srOnly } from '../../internal/a11y.js';
+import { closeIcon, chevronIcon } from '../../internal/icons.js';
+import { styles } from './lightbox.styles.js';
+import '../zoomable-frame/zoomable-frame.class.js';
+/**
+ * `<lyra-lightbox>` — a full-screen, modal, click-to-enlarge image viewer with prev/next
+ * navigation across an ordered set of images. It has no Web Awesome/Shoelace counterpart, so
+ * its API follows this library's own conventions.
+ *
+ * **Not a form-associated control** -- no `label`/`hint`/`errorText` chrome; its
+ * `accessibleLabel` only overrides the dialog's own accessible name. The native-wrapper/
+ * editing-assistance-passthrough guarantees don't apply either (no internal `<input>`/
+ * `<textarea>`).
+ *
+ * This renders its own dialog panel rather than nesting a `<lyra-dialog>` in its shadow
+ * template -- shared overlay infrastructure (`src/internal/overlay-manager.ts`) coordinates
+ * stacking, focus trapping, Escape/backdrop dismissal, scroll lock, and focus return with every
+ * other overlay in the same document, the same way `<lyra-dialog>`/`<lyra-command-palette>`/
+ * `<lyra-widget>` (fullscreen mode)/`<lyra-app-rail>` (mobile mode)/`<lyra-responsive-panel>`
+ * already do. Per-image pan/zoom is delegated to one stable embedded `<lyra-zoomable-frame>`
+ * instance (its `src`/`alt` swapped per navigation) rather than reimplementing pan/zoom --
+ * composing a small sibling leaf component directly in the render template, the same way
+ * `<lyra-tool-select-dialog>` composes `<lyra-checkbox>`/`<lyra-switch>`.
+ *
+ * Zoom/pan reset on navigation is imperative (`LyraZoomableFrame.resetView()`, called from
+ * `updated()`) rather than a Lit property binding -- a binding whose value never changes across
+ * renders (e.g. `.zoom=${1}`) would only apply once, silently failing to reset on the *second*
+ * navigation once the user has interactively zoomed. Recreating the frame element on every
+ * navigation (e.g. via Lit's `keyed()` directive) was considered and rejected: it would also
+ * reset zoom/pan, but destroying/recreating the element would steal focus from a keyboard user
+ * who had Tabbed into the frame's viewport mid-navigation.
+ *
+ * **Scope for v1 (deliberate, not oversights):** no default slot / no arbitrary slotted content
+ * per image (data-driven via `images` only); no dot-style indicators (a textual counter scales
+ * better to photo-set sizes); no open/close transition or animation (matches `<lyra-dialog>`'s
+ * own precedent of having none -- `prefers-reduced-motion` has nothing to branch on here); no
+ * click-on-image-to-navigate (the image is already meaningfully interactive -- it focuses the
+ * zoomable frame's viewport and drives its native scroll-to-pan); no touch-swipe-to-navigate.
+ *
+ * @customElement lyra-lightbox
+ * @slot actions - Optional extra toolbar buttons (e.g. download/share/delete), rendered in
+ *   `part="toolbar"` between the counter and the close button.
+ * @event lyra-lightbox-close - `detail: LyraLightboxCloseReason`. Cancelable -- a listener
+ *   calling `preventDefault()` stops the lightbox from closing, for every dismissal path
+ *   (Escape, backdrop, the built-in close button, or a consumer's own `close()` call). Fired
+ *   whenever the lightbox is dismissed via Escape, a backdrop click, the built-in close button,
+ *   a `close()` call, or (with reason `'unmount'`, not cancelable in practice since the element
+ *   is already being removed) removal from the DOM by anything else while still open.
+ * @event lyra-index-change - Fired only for internally-driven navigation (`next()`/
+ *   `previous()`/`goTo()` invoked via a button click or a keyboard shortcut). Not fired when a
+ *   consumer sets `index`/`images` directly. `detail: { index }`.
+ * @event lyra-zoom-change - Not emitted by `LyraLightbox` itself -- see the interface doc above.
+ *   `detail: { zoom }`.
+ * @csspart backdrop - The full-viewport scrim, positioned behind `panel`.
+ * @csspart panel - `role="dialog"` while open, `aria-modal="true"`, `tabindex="-1"`. Fills the
+ *   padded safe area -- unlike `<lyra-dialog>`, it does not shrink-wrap to content, since
+ *   maximizing image real estate is the point.
+ * @csspart toolbar - Top row: `counter` (start), the `actions` slot wrapper, `close-button` (end).
+ * @csspart counter - Visible, localized "Image N of Total" text. Omitted entirely when
+ *   `showCounter` is `false`.
+ * @csspart live-region - Visually-hidden, `role="status" aria-live="polite" aria-atomic="true"` --
+ *   announces the current position on every `index` change while open, regardless of trigger
+ *   (button, keyboard, or a consumer setting `index`/`images` directly), decoupled from the
+ *   visible `counter` so an unrelated re-render never causes a spurious re-announcement.
+ * @csspart actions - Wrapper around the `actions` slot; `hidden` when nothing is slotted.
+ * @csspart close-button - The close button. Always rendered -- unlike `<lyra-dialog>`'s opt-in
+ *   `closable`, a full-screen lightbox has no other built-in chrome, so this is not optional.
+ * @csspart stage - Houses the embedded `<lyra-zoomable-frame>` plus the floating
+ *   `previous-button`/`next-button`.
+ * @csspart frame - The embedded `<lyra-zoomable-frame>` element itself. Its own internal parts
+ *   are not re-exported via `exportparts` -- there is no precedent for `exportparts` anywhere in
+ *   this codebase.
+ * @csspart previous-button - Floating, absolutely positioned inside `stage`. Rendered only when
+ *   `images.length > 1`.
+ * @csspart previous-glyph - The `chevronIcon()` inside `previous-button`, mirrored under RTL.
+ * @csspart next-button - Symmetric to `previous-button`.
+ * @csspart next-glyph - Symmetric to `previous-glyph`.
+ * @csspart caption - The current image's caption text. Only rendered when the current image's
+ *   `caption` is non-empty. Its `id` is the `aria-describedby` target on `panel`.
+ * @cssprop --lyra-lightbox-overlay-color - The backdrop scrim color.
+ * @cssprop --lyra-lightbox-control-bg - Background for every floating/toolbar icon button.
+ * @cssprop --lyra-lightbox-control-color - Icon/text color paired with `--lyra-lightbox-control-bg`.
+ */
+export class LyraLightbox extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Whether the lightbox is open. Set this (or call `close()`) -- there is no separate
+         *  `show()`/`hide()` pair, exactly mirrors `<lyra-dialog>`. */
+        this.open = false;
+        /** The ordered set of images being browsed. */
+        this.images = [];
+        /** The currently displayed image. Clamped defensively for rendering (out-of-range/negative/
+         *  non-integer never throws) and silently re-synced onto this property (no event) when
+         *  `images` shrinks -- mirrors `<lyra-carousel>`'s `normalizedIndex()`/`syncSlides()` split. */
+        this.index = 0;
+        /** Wraps prev/next past the ends. Mirrors `<lyra-carousel>`'s `loop` 1:1. */
+        this.loop = false;
+        /** Opts out of dismissing the lightbox on a backdrop click -- mirrors `<lyra-dialog>`'s
+         *  `noLightDismiss` exactly (name, default, no reflect). */
+        this.noLightDismiss = false;
+        /** Shows/hides `part="counter"` (and its `part="live-region"` announcement). Mirrors
+         *  `<lyra-carousel>`'s `showIndicators` (name shape, no reflect). */
+        this.showCounter = true;
+        /** Passed through to the embedded `<lyra-zoomable-frame>` as `.minZoom`. Same default as
+         *  `<lyra-zoomable-frame>` itself. */
+        this.minZoom = 0.5;
+        /** Passed through to the embedded `<lyra-zoomable-frame>` as `.maxZoom`. */
+        this.maxZoom = 4;
+        /** Passed through to the embedded `<lyra-zoomable-frame>` as `.zoomStep`. */
+        this.zoomStep = 0.25;
+        /** Host-level `aria-label` override for the panel's accessible name -- wins over the
+         *  localized `lightboxLabel` default. Exactly `<lyra-zoomable-frame>`'s own `accessibleLabel`
+         *  pattern (no other label source to arbitrate against here). */
+        this.accessibleLabel = null;
+        this.hasActionsSlot = false;
+        this.liveText = '';
+        this.captionId = nextId('lightbox-caption');
+        this.next = () => this.changeTo(this.currentIndex() + 1);
+        this.previous = () => this.changeTo(this.currentIndex() - 1);
+        this.goTo = (index) => this.changeTo(index);
+        this.onBackdropClick = () => {
+            if (this.noLightDismiss)
+                return;
+            this.overlay?.dismissBackdrop();
+        };
+        this.onCloseButtonClick = () => {
+            this.close('close-button');
+        };
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        // RTL-aware, exactly mirroring <lyra-carousel>'s onViewportKeyDown. Attached on part="panel"
+        // itself so it sees keydowns bubbling from anywhere inside, including from within the embedded
+        // <lyra-zoomable-frame>'s own shadow tree. Never conflicts with the frame's own +/-/0/=/_ zoom
+        // shortcuts, which don't intercept Arrow/Home/End.
+        this.onPanelKeyDown = (event) => {
+            const rtl = this.effectiveDirection === 'rtl';
+            const forwardKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            const backwardKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            if (event.key === forwardKey) {
+                event.preventDefault();
+                this.next();
+            }
+            else if (event.key === backwardKey) {
+                event.preventDefault();
+                this.previous();
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                this.goTo(0);
+            }
+            else if (event.key === 'End') {
+                event.preventDefault();
+                this.goTo(this.images.length - 1);
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, srOnly, styles]; }
+    /** Clamped, always-valid index for rendering -- never throws on an out-of-range, negative, or
+     *  non-integer `index`. */
+    currentIndex() {
+        const count = this.images.length;
+        if (count === 0)
+            return 0;
+        const raw = Number.isFinite(this.index) ? Math.trunc(this.index) : 0;
+        return Math.min(count - 1, Math.max(0, raw));
+    }
+    // Silently re-syncs `index` onto the clamped value with no event -- mirrors
+    // <lyra-carousel>'s syncSlides() clamp-without-event behavior, e.g. when `images` shrinks out
+    // from under the current index.
+    syncImages() {
+        const current = this.currentIndex();
+        if (this.index !== current)
+            this.index = current;
+    }
+    changeTo(index) {
+        const count = this.images.length;
+        if (count === 0)
+            return;
+        const next = this.loop ? ((index % count) + count) % count : Math.min(count - 1, Math.max(0, index));
+        if (next === this.currentIndex())
+            return;
+        this.index = next;
+        this.emit('lyra-index-change', { index: next });
+    }
+    /**
+     * Close the lightbox and return focus to whatever had it before the lightbox opened. `reason`
+     * is forwarded as the `lyra-lightbox-close` detail -- built-in triggers pass `'escape'`/
+     * `'backdrop'`/`'close-button'`; a consumer's own close affordance (e.g. an `actions`-slotted
+     * button) should call this directly with its own reason string.
+     */
+    close(reason = 'api') {
+        if (!this.open)
+            return;
+        const event = this.emit('lyra-lightbox-close', reason, { cancelable: true });
+        if (event.defaultPrevented)
+            return;
+        this.open = false;
+    }
+    updateLiveRegion() {
+        const count = this.images.length;
+        this.liveText =
+            count === 0
+                ? ''
+                : this.localize('lightboxImagePosition', undefined, { index: this.currentIndex() + 1, total: count });
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+        if (changed.has('images') || changed.has('index')) {
+            this.syncImages();
+        }
+        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, and
+    // so [part="panel"]/the embedded frame have already landed in the DOM.
+    updated(changed) {
+        if (changed.has('open') && this.open) {
+            this.overlay?.focusInitial();
+        }
+        // Imperative, not a binding -- see the class doc for why this is required for the reset to
+        // keep working past the first navigation.
+        if (changed.has('index') && this.open) {
+            this.frameEl?.resetView();
+        }
+        if (changed.has('index') || changed.has('images') || changed.has('strings') || changed.has('locale')) {
+            this.updateLiveRegion();
+        }
+    }
+    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 what 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) {
+            // Deferred one microtask so a synchronous reparent (disconnect immediately followed by
+            // reconnect) isn't mistaken for a real removal -- mirrors <lyra-dialog>'s identical
+            // disconnectedCallback rationale.
+            queueMicrotask(() => {
+                if (!this.isConnected && this.open) {
+                    this.open = false;
+                    this.emit('lyra-lightbox-close', 'unmount');
+                }
+            });
+        }
+    }
+    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'),
+            // An intentionally safe default action -- a full-screen image grabbing focus should hand
+            // it to a predictable, always-present, non-destructive escape hatch first, rather than
+            // whatever happens to be first in DOM tab order (which could otherwise be a consumer's own
+            // actions-slot content if placed before close-button).
+            preferredInitialFocus: () => this.shadowRoot?.querySelector('[part="close-button"]') ?? null,
+        });
+    }
+    deactivateOverlay() {
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        this.overlay?.deactivate();
+        this.overlay = undefined;
+    }
+    render() {
+        const count = this.images.length;
+        const current = this.currentIndex();
+        const image = count > 0 ? this.images[current] : undefined;
+        const label = this.accessibleLabel ?? this.localize('lightboxLabel');
+        const hasCaption = Boolean(image?.caption);
+        const positionText = count > 0 ? this.localize('lightboxImagePosition', undefined, { index: current + 1, total: count }) : '';
+        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=${label}
+        aria-describedby=${hasCaption ? this.captionId : nothing}
+        tabindex="-1"
+        @keydown=${this.onPanelKeyDown}
+      >
+        <div part="toolbar">
+          ${this.showCounter && count > 0 ? html `<span part="counter">${positionText}</span>` : nothing}
+          <div part="actions" ?hidden=${!this.hasActionsSlot}>
+            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+          </div>
+          <button part="close-button" type="button" aria-label=${this.localize('close')} @click=${this.onCloseButtonClick}>
+            ${closeIcon()}
+          </button>
+        </div>
+        <div part="stage">
+          ${count > 1
+            ? html `
+                <button
+                  part="previous-button"
+                  type="button"
+                  aria-label=${this.localize('previous')}
+                  ?disabled=${!this.loop && current === 0}
+                  @click=${this.previous}
+                >
+                  <span part="previous-glyph">${chevronIcon()}</span>
+                </button>
+              `
+            : nothing}
+          <lyra-zoomable-frame
+            part="frame"
+            src=${image?.src ?? ''}
+            alt=${image?.alt ?? ''}
+            .minZoom=${this.minZoom}
+            .maxZoom=${this.maxZoom}
+            .zoomStep=${this.zoomStep}
+            .accessibleLabel=${positionText || null}
+          ></lyra-zoomable-frame>
+          ${count > 1
+            ? html `
+                <button
+                  part="next-button"
+                  type="button"
+                  aria-label=${this.localize('next')}
+                  ?disabled=${!this.loop && current === count - 1}
+                  @click=${this.next}
+                >
+                  <span part="next-glyph">${chevronIcon()}</span>
+                </button>
+              `
+            : nothing}
+        </div>
+        ${hasCaption ? html `<p part="caption" id=${this.captionId}>${image.caption}</p>` : nothing}
+        <span part="live-region" class="sr-only" role="status" aria-live="polite" aria-atomic="true"
+          >${this.liveText}</span
+        >
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraLightbox.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraLightbox.prototype, "images", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], LyraLightbox.prototype, "index", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraLightbox.prototype, "loop", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-light-dismiss' })
+], LyraLightbox.prototype, "noLightDismiss", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-counter' })
+], LyraLightbox.prototype, "showCounter", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-zoom' })
+], LyraLightbox.prototype, "minZoom", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-zoom' })
+], LyraLightbox.prototype, "maxZoom", void 0);
+__decorate([
+    property({ type: Number, attribute: 'zoom-step' })
+], LyraLightbox.prototype, "zoomStep", void 0);
+__decorate([
+    property({ attribute: 'aria-label' })
+], LyraLightbox.prototype, "accessibleLabel", void 0);
+__decorate([
+    state()
+], LyraLightbox.prototype, "hasActionsSlot", void 0);
+__decorate([
+    state()
+], LyraLightbox.prototype, "liveText", void 0);
+__decorate([
+    query('lyra-zoomable-frame')
+], LyraLightbox.prototype, "frameEl", void 0);
+//# sourceMappingURL=lightbox.class.js.map

package/dist/components/lightbox/lightbox.class.js.map

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

package/dist/components/lightbox/lightbox.d.ts

@@ -0,0 +1,3 @@
+export * from './lightbox.class.js';
+import '../zoomable-frame/zoomable-frame.js';
+//# sourceMappingURL=lightbox.d.ts.map

package/dist/components/lightbox/lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.d.ts","sourceRoot":"","sources":["../../../src/components/lightbox/lightbox.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AAGpC,OAAO,qCAAqC,CAAC"}

package/dist/components/lightbox/lightbox.js

@@ -0,0 +1,6 @@
+export * from './lightbox.class.js';
+import { LyraLightbox } from './lightbox.class.js';
+import { defineElement } from '../../internal/prefix.js';
+import '../zoomable-frame/zoomable-frame.js';
+defineElement('lightbox', LyraLightbox);
+//# sourceMappingURL=lightbox.js.map

package/dist/components/lightbox/lightbox.js.map

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

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

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

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

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

package/dist/components/lightbox/lightbox.styles.js

@@ -0,0 +1,179 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --lyra-lightbox-overlay-color: var(--lyra-color-overlay-strong);
+    /* Background for every floating/toolbar icon button (close-button, previous-button,
+       next-button). These buttons float directly over arbitrary image content, not the app's
+       normal surface, so they reuse the "solid, high-contrast neutral fill" token rather than
+       --lyra-color-surface for guaranteed contrast independent of both the page theme and
+       whatever's in the photo. */
+    --lyra-lightbox-control-bg: var(--lyra-color-neutral);
+    --lyra-lightbox-control-color: var(--lyra-color-on-neutral);
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: var(--lyra-overlay-stack-index, var(--lyra-layer-modal));
+    container-type: inline-size;
+    padding-block-start: max(var(--lyra-space-l), var(--lyra-safe-area-top));
+    padding-block-end: max(var(--lyra-space-l), var(--lyra-safe-area-bottom));
+    padding-inline-start: max(var(--lyra-space-l), var(--lyra-safe-area-inline-start));
+    padding-inline-end: max(var(--lyra-space-l), var(--lyra-safe-area-inline-end));
+  }
+  :host([open]) {
+    display: flex;
+  }
+  [part='backdrop'] {
+    position: absolute;
+    inset: 0;
+    background: var(--lyra-lightbox-overlay-color);
+  }
+  [part='panel'] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    outline: none;
+  }
+  [part='toolbar'] {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-s);
+  }
+  [part='counter'] {
+    display: inline-block;
+    min-inline-size: 0;
+    max-inline-size: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-lightbox-control-bg);
+    color: var(--lyra-lightbox-control-color);
+    font-size: var(--lyra-font-size-sm);
+  }
+  [part='actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    margin-inline-start: auto;
+  }
+  [part='actions'][hidden] {
+    display: none;
+  }
+  [part='close-button'],
+  [part='previous-button'],
+  [part='next-button'] {
+    flex: 0 0 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;
+    border-radius: var(--lyra-radius-pill);
+    background: var(--lyra-lightbox-control-bg);
+    color: var(--lyra-lightbox-control-color);
+    cursor: pointer;
+  }
+  [part='close-button'] {
+    margin-inline-start: var(--lyra-space-xs);
+  }
+  [part='close-button']:hover,
+  [part='previous-button']:hover:not(:disabled),
+  [part='next-button']:hover:not(:disabled) {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='close-button']:focus-visible,
+  [part='previous-button']:focus-visible,
+  [part='next-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='previous-button']:disabled,
+  [part='next-button']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='close-button'] svg,
+  [part='previous-glyph'],
+  [part='next-glyph'] {
+    display: block;
+  }
+  [part='stage'] {
+    position: relative;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  /* Plain ::part() styling one level in, unrelated to exportparts -- stretches the embedded
+     frame to fill the stage, overriding zoomable-frame's own min-block-size default. */
+  lyra-zoomable-frame[part='frame'] {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  lyra-zoomable-frame[part='frame']::part(base) {
+    block-size: 100%;
+  }
+  lyra-zoomable-frame[part='frame']::part(viewport) {
+    block-size: 100%;
+  }
+  [part='previous-button'],
+  [part='next-button'] {
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    z-index: var(--lyra-layer-content);
+  }
+  [part='previous-button'] {
+    inset-inline-start: var(--lyra-space-s);
+  }
+  [part='next-button'] {
+    inset-inline-end: var(--lyra-space-s);
+  }
+  /* Rotate the wrapping part element, not the icon itself -- rotate(180deg) matches
+     pagination.styles.ts's existing previous-icon/next-icon recipe for a chevronIcon()-based
+     prev/next pair (carousel's scaleX(-1) recipe is for its literal ‹/› glyphs, a different base
+     case). */
+  [part='previous-glyph'] {
+    transform: rotate(180deg);
+  }
+  [part='next-glyph'] {
+    transform: rotate(0deg);
+  }
+  :host(:dir(rtl)) [part='previous-glyph'] {
+    transform: rotate(0deg);
+  }
+  :host(:dir(rtl)) [part='next-glyph'] {
+    transform: rotate(180deg);
+  }
+  [part='caption'] {
+    flex: 0 0 auto;
+    margin: 0;
+    max-inline-size: 100%;
+    align-self: center;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-lightbox-control-bg);
+    color: var(--lyra-lightbox-control-color);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  /* Container-query lengths cannot reference custom properties. This is the documented 320px
+     narrow-allocation baseline expressed in root-relative units so it still follows the page's
+     type scale -- mirrors pagination.styles.ts's identical container query. */
+  @container (max-width: 20rem) {
+    [part='counter'] {
+      max-inline-size: 45%;
+    }
+  }
+`;
+//# sourceMappingURL=lightbox.styles.js.map

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

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

package/dist/components/map/map.class.d.ts

@@ -69,7 +69,7 @@ export interface LyraMapEventMap {
  *
  * ⚠️ The default `mapStyle` (when unset) uses OpenStreetMap's demo tile
  * server, which is not suitable for production traffic — see the
- * `DEFAULT_STYLE` doc comment in `map.ts`. Always pass an explicit
+ * `DEFAULT_STYLE` doc comment above. Always pass an explicit
  * `mapStyle` in production.
  */
 export declare class LyraMap extends LyraElement<LyraMapEventMap> {