@aceshooting/lyra-ui 3.4.0 → 3.6.0

package/dist/components/known-date/known-date.styles.js

@@ -0,0 +1,134 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    --lyra-known-date-field-padding-block: var(--lyra-space-s);
+    --lyra-known-date-field-padding-inline: var(--lyra-space-s);
+    --lyra-known-date-field-font-size: var(--lyra-font-size-md-sm);
+    --lyra-known-date-field-gap: var(--lyra-space-s);
+    --lyra-known-date-year-field-width: var(--lyra-size-5em);
+    --lyra-known-date-day-field-width: var(--lyra-size-3-5em);
+    --lyra-known-date-month-field-width: var(--lyra-size-3-5em);
+  }
+  :host([size='xs']) {
+    --lyra-known-date-field-padding-block: var(--lyra-size-0-125rem);
+    --lyra-known-date-field-padding-inline: var(--lyra-space-xs);
+    --lyra-known-date-field-font-size: var(--lyra-font-size-xs);
+  }
+  :host([size='s']) {
+    --lyra-known-date-field-padding-block: var(--lyra-space-xs);
+    --lyra-known-date-field-padding-inline: var(--lyra-space-xs);
+    --lyra-known-date-field-font-size: var(--lyra-font-size-sm);
+  }
+  :host([size='l']) {
+    --lyra-known-date-field-padding-block: var(--lyra-space-m);
+    --lyra-known-date-field-padding-inline: var(--lyra-space-m);
+    --lyra-known-date-field-font-size: var(--lyra-font-size-lg);
+  }
+  :host([size='xl']) {
+    --lyra-known-date-field-padding-block: var(--lyra-space-l);
+    --lyra-known-date-field-padding-inline: var(--lyra-space-l);
+    --lyra-known-date-field-font-size: var(--lyra-font-size-xl);
+  }
+
+  [part='form-control'] {
+    min-inline-size: 0;
+  }
+
+  [part='fieldset'] {
+    margin: 0;
+    padding: 0;
+    border: none;
+    min-inline-size: 0;
+  }
+
+  [part='legend'] {
+    display: block;
+    padding: 0;
+    margin-block-end: var(--lyra-space-xs);
+    color: var(--lyra-color-text);
+    font-size: var(--lyra-font-size-md-sm);
+    font-weight: var(--lyra-font-weight-semibold);
+  }
+  /* [part] always contains a literal <slot> child regardless of assigned
+     content, so :empty never matches -- real emptiness is tracked in JS
+     (hasLabelSlot) and reflected via [hidden] instead (same fix as every
+     other lyra form control's label/hint/error chrome). Without this the
+     required-asterisk ::after below (attached to this box) would render a
+     stray ' *' with nothing before it whenever no label is set. */
+  [part='legend'][hidden] {
+    display: none;
+  }
+  :host([required]) [part='legend']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
+
+  [part='fields'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-known-date-field-gap);
+  }
+
+  [part='field'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-2xs);
+  }
+
+  [part='field-label'] {
+    font-size: var(--lyra-font-size-sm);
+    color: var(--lyra-color-text-quiet);
+  }
+
+  [part='field-input'] {
+    box-sizing: border-box;
+    padding-block: var(--lyra-known-date-field-padding-block);
+    padding-inline: var(--lyra-known-date-field-padding-inline);
+    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);
+    font-family: inherit;
+    font-size: var(--lyra-known-date-field-font-size);
+    text-align: center;
+  }
+  [part='field'][data-field='day'] [part='field-input'] {
+    inline-size: var(--lyra-known-date-day-field-width);
+  }
+  [part='field'][data-field='month'] [part='field-input'] {
+    inline-size: var(--lyra-known-date-month-field-width);
+  }
+  [part='field'][data-field='year'] [part='field-input'] {
+    inline-size: var(--lyra-known-date-year-field-width);
+  }
+  [part='field-input']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  :host([data-invalid]) [part='field-input'] {
+    border-color: var(--lyra-color-danger);
+  }
+  [part='field-input']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  [part='hint'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: var(--lyra-font-size-sm);
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='hint'][hidden] {
+    display: none;
+  }
+  [part='error'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: var(--lyra-font-size-sm);
+    color: var(--lyra-color-danger);
+  }
+  [part='error'][hidden] {
+    display: none;
+  }
+`;
+//# sourceMappingURL=known-date.styles.js.map

package/dist/components/known-date/known-date.styles.js.map

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

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

@@ -0,0 +1,187 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../zoomable-frame/zoomable-frame.class.js';
+/** One image in the set `<lyra-lightbox>` browses. `alt`/`caption` are caller-supplied data
+ *  (like a filename), not routed through `localize()` -- only the component's own chrome
+ *  strings are. */
+export interface LyraLightboxImage {
+    /** Full-resolution URL. Passed straight through to the embedded `<lyra-zoomable-frame>`'s own
+     *  `src`, which already runs it through `safeMediaSrc()` -- no separate validation needed here. */
+    src: string;
+    /** Accessible alt text. Defaults to `''` (decorative) when omitted; consumers should supply
+     *  real alt text for meaningful images. */
+    alt?: string;
+    /** Optional visible caption for this image, rendered in `part="caption"` below the stage. */
+    caption?: string;
+}
+/**
+ * Reason a lightbox was dismissed, forwarded as the `lyra-lightbox-close` event detail --
+ * 1:1 copy of `<lyra-dialog>`'s own `DialogCloseReason` contract. `'escape'` and `'backdrop'`
+ * are emitted by the lightbox's own built-in dismiss triggers; `'close-button'` by the built-in
+ * close button; `'unmount'` is emitted when the lightbox is removed from the DOM while still
+ * open by something other than its own `close()`; any other string is whatever a caller passes
+ * to `close()` directly.
+ */
+export type LyraLightboxCloseReason = 'escape' | 'backdrop' | 'close-button' | 'api' | 'unmount' | (string & Record<never, never>);
+export interface LyraLightboxEventMap {
+    'lyra-lightbox-close': CustomEvent<LyraLightboxCloseReason>;
+    'lyra-index-change': CustomEvent<{
+        index: number;
+    }>;
+    /** Not emitted by `LyraLightbox` itself -- the embedded `<lyra-zoomable-frame>` already
+     *  dispatches this via a composed, bubbling `emit()` call, which continues through this
+     *  element's own shadow boundary with no re-dispatch needed. Listed here purely for
+     *  discoverability. */
+    'lyra-zoom-change': CustomEvent<{
+        zoom: number;
+    }>;
+}
+/**
+ * `<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 declare class LyraLightbox extends LyraElement<LyraLightboxEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the lightbox is open. Set this (or call `close()`) -- there is no separate
+     *  `show()`/`hide()` pair, exactly mirrors `<lyra-dialog>`. */
+    open: boolean;
+    /** The ordered set of images being browsed. */
+    images: LyraLightboxImage[];
+    /** 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. */
+    index: number;
+    /** Wraps prev/next past the ends. Mirrors `<lyra-carousel>`'s `loop` 1:1. */
+    loop: boolean;
+    /** Opts out of dismissing the lightbox on a backdrop click -- mirrors `<lyra-dialog>`'s
+     *  `noLightDismiss` exactly (name, default, no reflect). */
+    noLightDismiss: boolean;
+    /** Shows/hides `part="counter"` (and its `part="live-region"` announcement). Mirrors
+     *  `<lyra-carousel>`'s `showIndicators` (name shape, no reflect). */
+    showCounter: boolean;
+    /** Passed through to the embedded `<lyra-zoomable-frame>` as `.minZoom`. Same default as
+     *  `<lyra-zoomable-frame>` itself. */
+    minZoom: number;
+    /** Passed through to the embedded `<lyra-zoomable-frame>` as `.maxZoom`. */
+    maxZoom: number;
+    /** Passed through to the embedded `<lyra-zoomable-frame>` as `.zoomStep`. */
+    zoomStep: number;
+    /** 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). */
+    accessibleLabel: string | null;
+    private hasActionsSlot;
+    private liveText;
+    private frameEl?;
+    private releaseScrollLock?;
+    private overlay?;
+    private readonly captionId;
+    /** Clamped, always-valid index for rendering -- never throws on an out-of-range, negative, or
+     *  non-integer `index`. */
+    private currentIndex;
+    private syncImages;
+    private changeTo;
+    next: () => void;
+    previous: () => void;
+    goTo: (index: number) => void;
+    /**
+     * 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?: LyraLightboxCloseReason): void;
+    private updateLiveRegion;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activateOverlay;
+    private deactivateOverlay;
+    private onBackdropClick;
+    private onCloseButtonClick;
+    private onActionsSlotChange;
+    private onPanelKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-lightbox': LyraLightbox;
+    }
+}
+//# sourceMappingURL=lightbox.class.d.ts.map

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

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