@f-ewald/components 1.15.0 → 1.17.0

package/dist/photo-gallery.js

@@ -21,6 +21,10 @@ const booleanAttribute = {
  * Responsive, accessible image carousel composed from declarative
  * `gallery-item` children.
  *
+ * The image viewport keeps a fixed `aspect-ratio`, and the caption row is
+ * reserved for every slide whenever any slide has a caption, so the carousel's
+ * total height stays constant as it cycles — it never shifts the page below it.
+ *
  * @element photo-gallery
  * @slot - `gallery-item` elements rendered as slides.
  * @fires slide-change - The active image changed.
@@ -165,6 +169,8 @@ let PhotoGallery = class PhotoGallery extends LitElement {
       }
       figcaption {
         padding: 0.5rem 0.25rem 0;
+        min-height: 1lh;
+        line-height: var(--ui-line-height-normal, 1.5);
         color: var(--ui-text-muted, #64748b);
       }
       .footer {
@@ -543,6 +549,11 @@ let PhotoGallery = class PhotoGallery extends LitElement {
     render() {
         const itemCount = this._galleryItems.length;
         const currentItem = this._galleryItems[this.currentIndex];
+        // Reserve the caption row for every slide as soon as any slide has a
+        // caption, so the gallery's total height stays constant while it cycles
+        // (a slide without a caption no longer collapses the box and shifts the
+        // page below it).
+        const hasCaptions = this._galleryItems.some((item) => item.caption);
         const objectFit = this.objectFit === "contain" ? "contain" : "cover";
         const viewportStyles = {
             "--photo-gallery-aspect-ratio": this.aspectRatio.trim() || "16 / 9",
@@ -600,7 +611,9 @@ let PhotoGallery = class PhotoGallery extends LitElement {
                       `
                 : nothing}
                 </div>
-                ${currentItem.caption ? html `<figcaption>${currentItem.caption}</figcaption>` : nothing}
+                ${hasCaptions
+                ? html `<figcaption>${currentItem.caption}</figcaption>`
+                : nothing}
               </figure>
               ${this._renderFooter(itemCount)}
             `

package/dist/photo-gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"photo-gallery.js","sourceRoot":"","sources":["../src/photo-gallery.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport type { GalleryItemVariant } from \"./gallery-item-variant.js\";\nimport { GalleryItem } from \"./gallery-item.js\";\nimport { iconChevronLeft, iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type PhotoGalleryObjectFit = \"cover\" | \"contain\";\nexport type PhotoGalleryChangeReason =\n  | \"autoplay\"\n  | \"indicator\"\n  | \"items\"\n  | \"keyboard\"\n  | \"next\"\n  | \"previous\"\n  | \"programmatic\"\n  | \"swipe\";\n\nexport interface PhotoGallerySlideChangeDetail {\n  previousIndex: number;\n  currentIndex: number;\n  item: GalleryItem;\n  reason: PhotoGalleryChangeReason;\n}\n\nconst transitionDurationMs = 250;\nconst swipeThresholdPx = 40;\nconst booleanAttribute = {\n  fromAttribute(value: string | null): boolean {\n    return value !== null && value !== \"false\";\n  },\n};\n\n/**\n * Responsive, accessible image carousel composed from declarative\n * `gallery-item` children.\n *\n * @element photo-gallery\n * @slot - `gallery-item` elements rendered as slides.\n * @fires slide-change - The active image changed.\n */\n@customElement(\"photo-gallery\")\nexport class PhotoGallery extends LitElement {\n  /** Zero-based active image index. */\n  @property({ type: Number, attribute: \"current-index\", reflect: true })\n  currentIndex = 0;\n\n  /** Autoplay interval in milliseconds. Set to zero to disable autoplay. */\n  @property({ type: Number }) delay = 0;\n\n  /** Whether previous and next buttons are shown. */\n  @property({ attribute: \"show-controls\", converter: booleanAttribute })\n  showControls = true;\n\n  /** Whether a current/total counter is shown. */\n  @property({ type: Boolean, attribute: \"show-counter\" })\n  showCounter = false;\n\n  /** Whether clickable slide indicators are shown. */\n  @property({ type: Boolean, attribute: \"show-indicators\" })\n  showIndicators = false;\n\n  /** Whether autoplay includes a built-in pause/play control. */\n  @property({ attribute: \"show-autoplay-control\", converter: booleanAttribute })\n  showAutoplayControl = true;\n\n  /** Whether autoplay is explicitly paused. */\n  @property({ type: Boolean, reflect: true })\n  paused = false;\n\n  /** CSS aspect ratio used by the image viewport. */\n  @property({ attribute: \"aspect-ratio\" })\n  aspectRatio = \"16 / 9\";\n\n  /** How images fit within the stable viewport. */\n  @property({ attribute: \"object-fit\" })\n  objectFit: PhotoGalleryObjectFit = \"cover\";\n\n  @queryAssignedElements({ selector: \"gallery-item\" })\n  private readonly _galleryItems!: GalleryItem[];\n\n  @state()\n  private _previousIndex: number | null = null;\n\n  @state()\n  private _itemsVersion = 0;\n\n  private _autoplayTimer?: number;\n  private _transitionTimer?: number;\n  private _metadataObserver?: MutationObserver;\n  private _hovered = false;\n  private _focusWithin = false;\n  private _nextChangeReason: PhotoGalleryChangeReason | null = null;\n  private _pendingChange?: PhotoGallerySlideChangeDetail;\n  private _pointerStart?: { id: number; x: number; y: number };\n  private _itemsChanged = false;\n  private _activeItem?: GalleryItem;\n  private _renderedIndex = 0;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        color: var(--ui-text, #0f172a);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size, 0.875rem);\n      }\n      .gallery {\n        outline: none;\n      }\n      figure {\n        margin: 0;\n      }\n      .viewport {\n        position: relative;\n        overflow: hidden;\n        aspect-ratio: var(--photo-gallery-aspect-ratio, 16 / 9);\n        border-radius: var(--ui-radius, 0.5rem);\n        background: var(--ui-surface-muted, #f8fafc);\n        touch-action: pan-y;\n        user-select: none;\n      }\n      .gallery:focus-visible .viewport {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .slides {\n        display: grid;\n        width: 100%;\n        height: 100%;\n      }\n      picture {\n        grid-area: 1 / 1;\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n      picture img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--photo-gallery-object-fit, cover);\n      }\n      .entering {\n        z-index: 2;\n        animation: gallery-fade-in 250ms ease both;\n      }\n      .leaving {\n        z-index: 1;\n        pointer-events: none;\n        animation: gallery-fade-out 250ms ease both;\n      }\n      .arrow-controls {\n        position: absolute;\n        z-index: 3;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem;\n        pointer-events: none;\n      }\n      button {\n        border: 0;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        cursor: pointer;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .arrow-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        color: var(--ui-on-accent, #ffffff);\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        border-radius: 9999px;\n        pointer-events: auto;\n      }\n      .arrow-button:hover {\n        background: color-mix(in srgb, var(--ui-text, #0f172a) 70%, transparent);\n      }\n      figcaption {\n        padding: 0.5rem 0.25rem 0;\n        color: var(--ui-text-muted, #64748b);\n      }\n      .footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 0.75rem;\n        min-height: 2rem;\n        padding-top: 0.5rem;\n      }\n      .counter {\n        color: var(--ui-text-muted, #64748b);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        white-space: nowrap;\n      }\n      .indicators {\n        display: flex;\n        flex: 1 1 auto;\n        align-items: center;\n        justify-content: center;\n        gap: 0.25rem;\n      }\n      .indicator {\n        position: relative;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        background: transparent;\n        border-radius: 9999px;\n      }\n      .indicator::before {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 0.625rem;\n        height: 0.625rem;\n        background: var(--ui-border, #e2e8f0);\n        border-radius: 9999px;\n        content: \"\";\n        transform: translate(-50%, -50%);\n      }\n      .indicator[aria-current=\"true\"]::before {\n        background: var(--ui-primary, #4f46e5);\n      }\n      .autoplay-button {\n        height: 2rem;\n        box-sizing: border-box;\n        padding: 0.25rem 0.5rem;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface-muted, #f8fafc);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        white-space: nowrap;\n      }\n      .autoplay-button:hover {\n        background: var(--ui-surface, #ffffff);\n      }\n      slot {\n        display: none;\n      }\n      @keyframes gallery-fade-in {\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n      @keyframes gallery-fade-out {\n        from {\n          opacity: 1;\n        }\n        to {\n          opacity: 0;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .entering,\n        .leaving {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  /** Starts observers and autoplay integration when the element connects. */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._metadataObserver ??= new MutationObserver(() => this._handleMetadataChange());\n    this._metadataObserver.observe(this, {\n      attributes: true,\n      attributeFilter: [\"alt\", \"caption\", \"media\", \"src\", \"srcset\"],\n      childList: true,\n      subtree: true,\n    });\n    document.addEventListener(\"visibilitychange\", this._handleVisibilityChange);\n  }\n\n  /** Releases timers and observers when the element disconnects. */\n  override disconnectedCallback(): void {\n    this._clearAutoplay();\n    this._clearTransition();\n    this._metadataObserver?.disconnect();\n    document.removeEventListener(\"visibilitychange\", this._handleVisibilityChange);\n    super.disconnectedCallback();\n  }\n\n  /** Normalizes external index changes before rendering. */\n  protected override willUpdate(changed: PropertyValues<this>): void {\n    if (!changed.has(\"currentIndex\")) return;\n\n    const normalized = this._normalizeIndex(this.currentIndex);\n    if (normalized !== this.currentIndex) {\n      this.currentIndex = normalized;\n    }\n\n    const previousValue = changed.get(\"currentIndex\");\n    if (previousValue === undefined || this._galleryItems.length === 0) {\n      this._nextChangeReason = null;\n      return;\n    }\n\n    const previousIndex = this._normalizeIndex(Number(previousValue));\n    if (previousIndex === normalized) {\n      this._nextChangeReason = null;\n      return;\n    }\n\n    const reason = this._nextChangeReason ?? \"programmatic\";\n    this._previousIndex = reason === \"items\" ? null : previousIndex;\n    this._pendingChange = {\n      previousIndex,\n      currentIndex: normalized,\n      item: this._galleryItems[normalized],\n      reason,\n    };\n    this._nextChangeReason = null;\n  }\n\n  /** Emits completed changes and keeps autoplay synchronized with properties. */\n  protected override updated(changed: PropertyValues<this>): void {\n    if (this._pendingChange) {\n      this.dispatchEvent(\n        new CustomEvent<PhotoGallerySlideChangeDetail>(\"slide-change\", {\n          bubbles: true,\n          composed: true,\n          detail: this._pendingChange,\n        }),\n      );\n      this._pendingChange = undefined;\n      this._scheduleTransitionCleanup();\n    }\n\n    if (changed.has(\"currentIndex\") || changed.has(\"delay\") || changed.has(\"paused\") || this._itemsChanged) {\n      this._itemsChanged = false;\n      this._restartAutoplay();\n    }\n    this._activeItem = this._galleryItems[this.currentIndex];\n    this._renderedIndex = this.currentIndex;\n  }\n\n  /** Wraps any requested index into the current item range. */\n  private _normalizeIndex(index: number): number {\n    const count = this._galleryItems.length;\n    if (count === 0 || !Number.isFinite(index)) return 0;\n    return ((Math.trunc(index) % count) + count) % count;\n  }\n\n  /** Returns responsive variants declared directly under an item. */\n  private _variantsFor(item: GalleryItem): GalleryItemVariant[] {\n    return Array.from(item.children).filter(\n      (child): child is GalleryItemVariant => child.tagName.toLowerCase() === \"gallery-item-variant\",\n    );\n  }\n\n  /** Changes slides through the shared state and event path. */\n  private _goTo(index: number, reason: PhotoGalleryChangeReason): void {\n    const normalized = this._normalizeIndex(index);\n    if (this._galleryItems.length < 2 || normalized === this.currentIndex) {\n      this._restartAutoplay();\n      return;\n    }\n\n    this._nextChangeReason = reason;\n    this.currentIndex = normalized;\n  }\n\n  /** Moves to the previous image. */\n  private _showPrevious(reason: PhotoGalleryChangeReason = \"previous\"): void {\n    this._goTo(this.currentIndex - 1, reason);\n  }\n\n  /** Moves to the next image. */\n  private _showNext(reason: PhotoGalleryChangeReason = \"next\"): void {\n    this._goTo(this.currentIndex + 1, reason);\n  }\n\n  /** Toggles explicit autoplay pause state. */\n  private _togglePaused(): void {\n    this.paused = !this.paused;\n  }\n\n  /** Clears and conditionally schedules the next autoplay advance. */\n  private _restartAutoplay(): void {\n    this._clearAutoplay();\n    if (!this._canAutoplay()) return;\n\n    this._autoplayTimer = window.setTimeout(() => {\n      this._showNext(\"autoplay\");\n    }, this.delay);\n  }\n\n  /** Reports whether autoplay may currently schedule a transition. */\n  private _canAutoplay(): boolean {\n    return (\n      this.delay > 0 &&\n      this._galleryItems.length > 1 &&\n      !this.paused &&\n      !this._hovered &&\n      !this._focusWithin &&\n      !document.hidden\n    );\n  }\n\n  /** Clears the pending autoplay timeout. */\n  private _clearAutoplay(): void {\n    if (this._autoplayTimer === undefined) return;\n    window.clearTimeout(this._autoplayTimer);\n    this._autoplayTimer = undefined;\n  }\n\n  /** Removes the outgoing crossfade layer after the animation completes. */\n  private _scheduleTransitionCleanup(): void {\n    this._clearTransition();\n    this._transitionTimer = window.setTimeout(() => {\n      this._previousIndex = null;\n      this._transitionTimer = undefined;\n    }, transitionDurationMs);\n  }\n\n  /** Clears pending transition cleanup. */\n  private _clearTransition(): void {\n    if (this._transitionTimer === undefined) return;\n    window.clearTimeout(this._transitionTimer);\n    this._transitionTimer = undefined;\n  }\n\n  /** Refreshes item metadata and clamps the active index after light-DOM changes. */\n  private _handleMetadataChange(): void {\n    this._itemsChanged = true;\n    this._itemsVersion += 1;\n    const preserveActiveItem = this.currentIndex === this._renderedIndex;\n    const preservedIndex =\n      preserveActiveItem && this._activeItem ? this._galleryItems.indexOf(this._activeItem) : -1;\n    const normalized = preservedIndex >= 0 ? preservedIndex : this._normalizeIndex(this.currentIndex);\n    if (normalized === this.currentIndex) {\n      const item = this._galleryItems[normalized];\n      const activeItemRemoved = Boolean(this._activeItem && !this._galleryItems.includes(this._activeItem));\n      if (item && activeItemRemoved) {\n        this._previousIndex = null;\n        this._pendingChange = {\n          previousIndex: this._renderedIndex,\n          currentIndex: normalized,\n          item,\n          reason: \"items\",\n        };\n      }\n      return;\n    }\n    this._nextChangeReason = \"items\";\n    this.currentIndex = normalized;\n  }\n\n  /** Refreshes item state after the default slot changes. */\n  private _handleSlotChange(): void {\n    this._handleMetadataChange();\n  }\n\n  /** Temporarily pauses autoplay while the pointer is over the gallery. */\n  private _handleMouseEnter(): void {\n    this._hovered = true;\n    this._restartAutoplay();\n  }\n\n  /** Resumes autoplay with a fresh delay after hover ends. */\n  private _handleMouseLeave(): void {\n    this._hovered = false;\n    this._restartAutoplay();\n  }\n\n  /** Temporarily pauses autoplay while focus is inside the gallery. */\n  private _handleFocusIn(): void {\n    this._focusWithin = true;\n    this._restartAutoplay();\n  }\n\n  /** Resumes autoplay with a fresh delay after focus leaves the gallery. */\n  private _handleFocusOut(): void {\n    queueMicrotask(() => {\n      this._focusWithin = this.matches(\":focus-within\");\n      this._restartAutoplay();\n    });\n  }\n\n  /** Pauses or resumes scheduling when page visibility changes. */\n  private readonly _handleVisibilityChange = (): void => {\n    this._restartAutoplay();\n  };\n\n  /** Handles Left and Right arrow keyboard navigation. */\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this._showPrevious(\"keyboard\");\n      return;\n    }\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this._showNext(\"keyboard\");\n    }\n  }\n\n  /** Records the starting point of a primary pointer gesture. */\n  private _handlePointerDown(event: PointerEvent): void {\n    if (!event.isPrimary || event.button !== 0) return;\n    if (event.composedPath().some((target) => target instanceof HTMLButtonElement)) return;\n    this._pointerStart = { id: event.pointerId, x: event.clientX, y: event.clientY };\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n  }\n\n  /** Converts a sufficiently horizontal pointer gesture into navigation. */\n  private _handlePointerUp(event: PointerEvent): void {\n    const start = this._pointerStart;\n    this._pointerStart = undefined;\n    if (!start || start.id !== event.pointerId) return;\n\n    const deltaX = event.clientX - start.x;\n    const deltaY = event.clientY - start.y;\n    if (Math.abs(deltaX) < swipeThresholdPx || Math.abs(deltaX) <= Math.abs(deltaY)) return;\n\n    event.preventDefault();\n    if (deltaX < 0) {\n      this._showNext(\"swipe\");\n      return;\n    }\n    this._showPrevious(\"swipe\");\n  }\n\n  /** Cancels an incomplete pointer gesture. */\n  private _handlePointerCancel(): void {\n    this._pointerStart = undefined;\n  }\n\n  /** Renders one responsive image layer for the crossfade stack. */\n  private _renderPicture(index: number, state: \"current\" | \"previous\") {\n    const item = this._galleryItems[index];\n    if (!item) return nothing;\n\n    const isPrevious = state === \"previous\";\n    const transitionClass = this._previousIndex === null ? \"\" : isPrevious ? \"leaving\" : \"entering\";\n    return html`\n      <picture class=${transitionClass} aria-hidden=${isPrevious ? \"true\" : nothing}>\n        ${this._variantsFor(item)\n          .filter((variant) => variant.srcset)\n          .map(\n            (variant) =>\n              html`<source media=${ifDefined(variant.media || undefined)} srcset=${variant.srcset} />`,\n          )}\n        <img src=${item.src} alt=${isPrevious ? \"\" : item.alt} draggable=\"false\" />\n      </picture>\n    `;\n  }\n\n  /** Renders enabled counter, indicator, and autoplay controls. */\n  private _renderFooter(itemCount: number) {\n    const showIndicators = this.showIndicators && itemCount > 1;\n    const showAutoplay = this.showAutoplayControl && this.delay > 0 && itemCount > 1;\n    if (!this.showCounter && !showIndicators && !showAutoplay) return nothing;\n\n    return html`\n      <div class=\"footer\">\n        ${this.showCounter\n          ? html`<span class=\"counter\">${this.currentIndex + 1} / ${itemCount}</span>`\n          : nothing}\n        ${showIndicators\n          ? html`\n              <div class=\"indicators\" role=\"group\" aria-label=\"Choose image\">\n                ${this._galleryItems.map(\n                  (_item, index) => html`\n                    <button\n                      class=\"indicator\"\n                      type=\"button\"\n                      aria-label=\"Show image ${index + 1} of ${itemCount}\"\n                      aria-current=${String(index === this.currentIndex)}\n                      @click=${() => this._goTo(index, \"indicator\")}\n                    ></button>\n                  `,\n                )}\n              </div>\n            `\n          : nothing}\n        ${showAutoplay\n          ? html`\n              <button\n                class=\"autoplay-button\"\n                type=\"button\"\n                aria-label=${this.paused ? \"Resume slideshow\" : \"Pause slideshow\"}\n                @click=${this._togglePaused}\n              >\n                ${this.paused ? \"Play\" : \"Pause\"}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  /** Renders the active image, navigation, caption, and hidden metadata slot. */\n  protected override render() {\n    const itemCount = this._galleryItems.length;\n    const currentItem = this._galleryItems[this.currentIndex];\n    const objectFit: PhotoGalleryObjectFit = this.objectFit === \"contain\" ? \"contain\" : \"cover\";\n    const viewportStyles = {\n      \"--photo-gallery-aspect-ratio\": this.aspectRatio.trim() || \"16 / 9\",\n      \"--photo-gallery-object-fit\": objectFit,\n    };\n\n    return html`\n      <div\n        class=\"gallery\"\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label=\"Photo gallery\"\n        tabindex=\"0\"\n        @keydown=${this._handleKeyDown}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n      >\n        ${currentItem\n          ? html`\n              <figure>\n                <div\n                  class=\"viewport\"\n                  style=${styleMap(viewportStyles)}\n                  @pointerdown=${this._handlePointerDown}\n                  @pointerup=${this._handlePointerUp}\n                  @pointercancel=${this._handlePointerCancel}\n                >\n                  <div class=\"slides\">\n                    ${this._previousIndex === null\n                      ? nothing\n                      : this._renderPicture(this._previousIndex, \"previous\")}\n                    ${this._renderPicture(this.currentIndex, \"current\")}\n                  </div>\n                  ${this.showControls && itemCount > 1\n                    ? html`\n                        <div class=\"arrow-controls\">\n                          <button\n                            class=\"arrow-button previous\"\n                            type=\"button\"\n                            aria-label=\"Previous image\"\n                            @click=${() => this._showPrevious()}\n                          >\n                            ${iconChevronLeft(18)}\n                          </button>\n                          <button\n                            class=\"arrow-button next\"\n                            type=\"button\"\n                            aria-label=\"Next image\"\n                            @click=${() => this._showNext()}\n                          >\n                            ${iconChevronRight(18)}\n                          </button>\n                        </div>\n                      `\n                    : nothing}\n                </div>\n                ${currentItem.caption ? html`<figcaption>${currentItem.caption}</figcaption>` : nothing}\n              </figure>\n              ${this._renderFooter(itemCount)}\n            `\n          : nothing}\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"photo-gallery\": PhotoGallery;\n  }\n}\n"]}
+{"version":3,"file":"photo-gallery.js","sourceRoot":"","sources":["../src/photo-gallery.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport type { GalleryItemVariant } from \"./gallery-item-variant.js\";\nimport { GalleryItem } from \"./gallery-item.js\";\nimport { iconChevronLeft, iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type PhotoGalleryObjectFit = \"cover\" | \"contain\";\nexport type PhotoGalleryChangeReason =\n  | \"autoplay\"\n  | \"indicator\"\n  | \"items\"\n  | \"keyboard\"\n  | \"next\"\n  | \"previous\"\n  | \"programmatic\"\n  | \"swipe\";\n\nexport interface PhotoGallerySlideChangeDetail {\n  previousIndex: number;\n  currentIndex: number;\n  item: GalleryItem;\n  reason: PhotoGalleryChangeReason;\n}\n\nconst transitionDurationMs = 250;\nconst swipeThresholdPx = 40;\nconst booleanAttribute = {\n  fromAttribute(value: string | null): boolean {\n    return value !== null && value !== \"false\";\n  },\n};\n\n/**\n * Responsive, accessible image carousel composed from declarative\n * `gallery-item` children.\n *\n * The image viewport keeps a fixed `aspect-ratio`, and the caption row is\n * reserved for every slide whenever any slide has a caption, so the carousel's\n * total height stays constant as it cycles — it never shifts the page below it.\n *\n * @element photo-gallery\n * @slot - `gallery-item` elements rendered as slides.\n * @fires slide-change - The active image changed.\n */\n@customElement(\"photo-gallery\")\nexport class PhotoGallery extends LitElement {\n  /** Zero-based active image index. */\n  @property({ type: Number, attribute: \"current-index\", reflect: true })\n  currentIndex = 0;\n\n  /** Autoplay interval in milliseconds. Set to zero to disable autoplay. */\n  @property({ type: Number }) delay = 0;\n\n  /** Whether previous and next buttons are shown. */\n  @property({ attribute: \"show-controls\", converter: booleanAttribute })\n  showControls = true;\n\n  /** Whether a current/total counter is shown. */\n  @property({ type: Boolean, attribute: \"show-counter\" })\n  showCounter = false;\n\n  /** Whether clickable slide indicators are shown. */\n  @property({ type: Boolean, attribute: \"show-indicators\" })\n  showIndicators = false;\n\n  /** Whether autoplay includes a built-in pause/play control. */\n  @property({ attribute: \"show-autoplay-control\", converter: booleanAttribute })\n  showAutoplayControl = true;\n\n  /** Whether autoplay is explicitly paused. */\n  @property({ type: Boolean, reflect: true })\n  paused = false;\n\n  /** CSS aspect ratio used by the image viewport. */\n  @property({ attribute: \"aspect-ratio\" })\n  aspectRatio = \"16 / 9\";\n\n  /** How images fit within the stable viewport. */\n  @property({ attribute: \"object-fit\" })\n  objectFit: PhotoGalleryObjectFit = \"cover\";\n\n  @queryAssignedElements({ selector: \"gallery-item\" })\n  private readonly _galleryItems!: GalleryItem[];\n\n  @state()\n  private _previousIndex: number | null = null;\n\n  @state()\n  private _itemsVersion = 0;\n\n  private _autoplayTimer?: number;\n  private _transitionTimer?: number;\n  private _metadataObserver?: MutationObserver;\n  private _hovered = false;\n  private _focusWithin = false;\n  private _nextChangeReason: PhotoGalleryChangeReason | null = null;\n  private _pendingChange?: PhotoGallerySlideChangeDetail;\n  private _pointerStart?: { id: number; x: number; y: number };\n  private _itemsChanged = false;\n  private _activeItem?: GalleryItem;\n  private _renderedIndex = 0;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        color: var(--ui-text, #0f172a);\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        font-size: var(--ui-font-size, 0.875rem);\n      }\n      .gallery {\n        outline: none;\n      }\n      figure {\n        margin: 0;\n      }\n      .viewport {\n        position: relative;\n        overflow: hidden;\n        aspect-ratio: var(--photo-gallery-aspect-ratio, 16 / 9);\n        border-radius: var(--ui-radius, 0.5rem);\n        background: var(--ui-surface-muted, #f8fafc);\n        touch-action: pan-y;\n        user-select: none;\n      }\n      .gallery:focus-visible .viewport {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .slides {\n        display: grid;\n        width: 100%;\n        height: 100%;\n      }\n      picture {\n        grid-area: 1 / 1;\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n      picture img {\n        display: block;\n        width: 100%;\n        height: 100%;\n        object-fit: var(--photo-gallery-object-fit, cover);\n      }\n      .entering {\n        z-index: 2;\n        animation: gallery-fade-in 250ms ease both;\n      }\n      .leaving {\n        z-index: 1;\n        pointer-events: none;\n        animation: gallery-fade-out 250ms ease both;\n      }\n      .arrow-controls {\n        position: absolute;\n        z-index: 3;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0.5rem;\n        pointer-events: none;\n      }\n      button {\n        border: 0;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n        cursor: pointer;\n      }\n      button:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .arrow-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        color: var(--ui-on-accent, #ffffff);\n        background: var(--ui-overlay, rgb(15 23 42 / 0.45));\n        border-radius: 9999px;\n        pointer-events: auto;\n      }\n      .arrow-button:hover {\n        background: color-mix(in srgb, var(--ui-text, #0f172a) 70%, transparent);\n      }\n      figcaption {\n        padding: 0.5rem 0.25rem 0;\n        min-height: 1lh;\n        line-height: var(--ui-line-height-normal, 1.5);\n        color: var(--ui-text-muted, #64748b);\n      }\n      .footer {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 0.75rem;\n        min-height: 2rem;\n        padding-top: 0.5rem;\n      }\n      .counter {\n        color: var(--ui-text-muted, #64748b);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        white-space: nowrap;\n      }\n      .indicators {\n        display: flex;\n        flex: 1 1 auto;\n        align-items: center;\n        justify-content: center;\n        gap: 0.25rem;\n      }\n      .indicator {\n        position: relative;\n        width: 2rem;\n        height: 2rem;\n        padding: 0;\n        background: transparent;\n        border-radius: 9999px;\n      }\n      .indicator::before {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 0.625rem;\n        height: 0.625rem;\n        background: var(--ui-border, #e2e8f0);\n        border-radius: 9999px;\n        content: \"\";\n        transform: translate(-50%, -50%);\n      }\n      .indicator[aria-current=\"true\"]::before {\n        background: var(--ui-primary, #4f46e5);\n      }\n      .autoplay-button {\n        height: 2rem;\n        box-sizing: border-box;\n        padding: 0.25rem 0.5rem;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface-muted, #f8fafc);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        line-height: var(--ui-line-height-tight, 1.25);\n        white-space: nowrap;\n      }\n      .autoplay-button:hover {\n        background: var(--ui-surface, #ffffff);\n      }\n      slot {\n        display: none;\n      }\n      @keyframes gallery-fade-in {\n        from {\n          opacity: 0;\n        }\n        to {\n          opacity: 1;\n        }\n      }\n      @keyframes gallery-fade-out {\n        from {\n          opacity: 1;\n        }\n        to {\n          opacity: 0;\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        .entering,\n        .leaving {\n          animation: none;\n        }\n      }\n    `,\n  ];\n\n  /** Starts observers and autoplay integration when the element connects. */\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._metadataObserver ??= new MutationObserver(() => this._handleMetadataChange());\n    this._metadataObserver.observe(this, {\n      attributes: true,\n      attributeFilter: [\"alt\", \"caption\", \"media\", \"src\", \"srcset\"],\n      childList: true,\n      subtree: true,\n    });\n    document.addEventListener(\"visibilitychange\", this._handleVisibilityChange);\n  }\n\n  /** Releases timers and observers when the element disconnects. */\n  override disconnectedCallback(): void {\n    this._clearAutoplay();\n    this._clearTransition();\n    this._metadataObserver?.disconnect();\n    document.removeEventListener(\"visibilitychange\", this._handleVisibilityChange);\n    super.disconnectedCallback();\n  }\n\n  /** Normalizes external index changes before rendering. */\n  protected override willUpdate(changed: PropertyValues<this>): void {\n    if (!changed.has(\"currentIndex\")) return;\n\n    const normalized = this._normalizeIndex(this.currentIndex);\n    if (normalized !== this.currentIndex) {\n      this.currentIndex = normalized;\n    }\n\n    const previousValue = changed.get(\"currentIndex\");\n    if (previousValue === undefined || this._galleryItems.length === 0) {\n      this._nextChangeReason = null;\n      return;\n    }\n\n    const previousIndex = this._normalizeIndex(Number(previousValue));\n    if (previousIndex === normalized) {\n      this._nextChangeReason = null;\n      return;\n    }\n\n    const reason = this._nextChangeReason ?? \"programmatic\";\n    this._previousIndex = reason === \"items\" ? null : previousIndex;\n    this._pendingChange = {\n      previousIndex,\n      currentIndex: normalized,\n      item: this._galleryItems[normalized],\n      reason,\n    };\n    this._nextChangeReason = null;\n  }\n\n  /** Emits completed changes and keeps autoplay synchronized with properties. */\n  protected override updated(changed: PropertyValues<this>): void {\n    if (this._pendingChange) {\n      this.dispatchEvent(\n        new CustomEvent<PhotoGallerySlideChangeDetail>(\"slide-change\", {\n          bubbles: true,\n          composed: true,\n          detail: this._pendingChange,\n        }),\n      );\n      this._pendingChange = undefined;\n      this._scheduleTransitionCleanup();\n    }\n\n    if (changed.has(\"currentIndex\") || changed.has(\"delay\") || changed.has(\"paused\") || this._itemsChanged) {\n      this._itemsChanged = false;\n      this._restartAutoplay();\n    }\n    this._activeItem = this._galleryItems[this.currentIndex];\n    this._renderedIndex = this.currentIndex;\n  }\n\n  /** Wraps any requested index into the current item range. */\n  private _normalizeIndex(index: number): number {\n    const count = this._galleryItems.length;\n    if (count === 0 || !Number.isFinite(index)) return 0;\n    return ((Math.trunc(index) % count) + count) % count;\n  }\n\n  /** Returns responsive variants declared directly under an item. */\n  private _variantsFor(item: GalleryItem): GalleryItemVariant[] {\n    return Array.from(item.children).filter(\n      (child): child is GalleryItemVariant => child.tagName.toLowerCase() === \"gallery-item-variant\",\n    );\n  }\n\n  /** Changes slides through the shared state and event path. */\n  private _goTo(index: number, reason: PhotoGalleryChangeReason): void {\n    const normalized = this._normalizeIndex(index);\n    if (this._galleryItems.length < 2 || normalized === this.currentIndex) {\n      this._restartAutoplay();\n      return;\n    }\n\n    this._nextChangeReason = reason;\n    this.currentIndex = normalized;\n  }\n\n  /** Moves to the previous image. */\n  private _showPrevious(reason: PhotoGalleryChangeReason = \"previous\"): void {\n    this._goTo(this.currentIndex - 1, reason);\n  }\n\n  /** Moves to the next image. */\n  private _showNext(reason: PhotoGalleryChangeReason = \"next\"): void {\n    this._goTo(this.currentIndex + 1, reason);\n  }\n\n  /** Toggles explicit autoplay pause state. */\n  private _togglePaused(): void {\n    this.paused = !this.paused;\n  }\n\n  /** Clears and conditionally schedules the next autoplay advance. */\n  private _restartAutoplay(): void {\n    this._clearAutoplay();\n    if (!this._canAutoplay()) return;\n\n    this._autoplayTimer = window.setTimeout(() => {\n      this._showNext(\"autoplay\");\n    }, this.delay);\n  }\n\n  /** Reports whether autoplay may currently schedule a transition. */\n  private _canAutoplay(): boolean {\n    return (\n      this.delay > 0 &&\n      this._galleryItems.length > 1 &&\n      !this.paused &&\n      !this._hovered &&\n      !this._focusWithin &&\n      !document.hidden\n    );\n  }\n\n  /** Clears the pending autoplay timeout. */\n  private _clearAutoplay(): void {\n    if (this._autoplayTimer === undefined) return;\n    window.clearTimeout(this._autoplayTimer);\n    this._autoplayTimer = undefined;\n  }\n\n  /** Removes the outgoing crossfade layer after the animation completes. */\n  private _scheduleTransitionCleanup(): void {\n    this._clearTransition();\n    this._transitionTimer = window.setTimeout(() => {\n      this._previousIndex = null;\n      this._transitionTimer = undefined;\n    }, transitionDurationMs);\n  }\n\n  /** Clears pending transition cleanup. */\n  private _clearTransition(): void {\n    if (this._transitionTimer === undefined) return;\n    window.clearTimeout(this._transitionTimer);\n    this._transitionTimer = undefined;\n  }\n\n  /** Refreshes item metadata and clamps the active index after light-DOM changes. */\n  private _handleMetadataChange(): void {\n    this._itemsChanged = true;\n    this._itemsVersion += 1;\n    const preserveActiveItem = this.currentIndex === this._renderedIndex;\n    const preservedIndex =\n      preserveActiveItem && this._activeItem ? this._galleryItems.indexOf(this._activeItem) : -1;\n    const normalized = preservedIndex >= 0 ? preservedIndex : this._normalizeIndex(this.currentIndex);\n    if (normalized === this.currentIndex) {\n      const item = this._galleryItems[normalized];\n      const activeItemRemoved = Boolean(this._activeItem && !this._galleryItems.includes(this._activeItem));\n      if (item && activeItemRemoved) {\n        this._previousIndex = null;\n        this._pendingChange = {\n          previousIndex: this._renderedIndex,\n          currentIndex: normalized,\n          item,\n          reason: \"items\",\n        };\n      }\n      return;\n    }\n    this._nextChangeReason = \"items\";\n    this.currentIndex = normalized;\n  }\n\n  /** Refreshes item state after the default slot changes. */\n  private _handleSlotChange(): void {\n    this._handleMetadataChange();\n  }\n\n  /** Temporarily pauses autoplay while the pointer is over the gallery. */\n  private _handleMouseEnter(): void {\n    this._hovered = true;\n    this._restartAutoplay();\n  }\n\n  /** Resumes autoplay with a fresh delay after hover ends. */\n  private _handleMouseLeave(): void {\n    this._hovered = false;\n    this._restartAutoplay();\n  }\n\n  /** Temporarily pauses autoplay while focus is inside the gallery. */\n  private _handleFocusIn(): void {\n    this._focusWithin = true;\n    this._restartAutoplay();\n  }\n\n  /** Resumes autoplay with a fresh delay after focus leaves the gallery. */\n  private _handleFocusOut(): void {\n    queueMicrotask(() => {\n      this._focusWithin = this.matches(\":focus-within\");\n      this._restartAutoplay();\n    });\n  }\n\n  /** Pauses or resumes scheduling when page visibility changes. */\n  private readonly _handleVisibilityChange = (): void => {\n    this._restartAutoplay();\n  };\n\n  /** Handles Left and Right arrow keyboard navigation. */\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this._showPrevious(\"keyboard\");\n      return;\n    }\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this._showNext(\"keyboard\");\n    }\n  }\n\n  /** Records the starting point of a primary pointer gesture. */\n  private _handlePointerDown(event: PointerEvent): void {\n    if (!event.isPrimary || event.button !== 0) return;\n    if (event.composedPath().some((target) => target instanceof HTMLButtonElement)) return;\n    this._pointerStart = { id: event.pointerId, x: event.clientX, y: event.clientY };\n    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);\n  }\n\n  /** Converts a sufficiently horizontal pointer gesture into navigation. */\n  private _handlePointerUp(event: PointerEvent): void {\n    const start = this._pointerStart;\n    this._pointerStart = undefined;\n    if (!start || start.id !== event.pointerId) return;\n\n    const deltaX = event.clientX - start.x;\n    const deltaY = event.clientY - start.y;\n    if (Math.abs(deltaX) < swipeThresholdPx || Math.abs(deltaX) <= Math.abs(deltaY)) return;\n\n    event.preventDefault();\n    if (deltaX < 0) {\n      this._showNext(\"swipe\");\n      return;\n    }\n    this._showPrevious(\"swipe\");\n  }\n\n  /** Cancels an incomplete pointer gesture. */\n  private _handlePointerCancel(): void {\n    this._pointerStart = undefined;\n  }\n\n  /** Renders one responsive image layer for the crossfade stack. */\n  private _renderPicture(index: number, state: \"current\" | \"previous\") {\n    const item = this._galleryItems[index];\n    if (!item) return nothing;\n\n    const isPrevious = state === \"previous\";\n    const transitionClass = this._previousIndex === null ? \"\" : isPrevious ? \"leaving\" : \"entering\";\n    return html`\n      <picture class=${transitionClass} aria-hidden=${isPrevious ? \"true\" : nothing}>\n        ${this._variantsFor(item)\n          .filter((variant) => variant.srcset)\n          .map(\n            (variant) =>\n              html`<source media=${ifDefined(variant.media || undefined)} srcset=${variant.srcset} />`,\n          )}\n        <img src=${item.src} alt=${isPrevious ? \"\" : item.alt} draggable=\"false\" />\n      </picture>\n    `;\n  }\n\n  /** Renders enabled counter, indicator, and autoplay controls. */\n  private _renderFooter(itemCount: number) {\n    const showIndicators = this.showIndicators && itemCount > 1;\n    const showAutoplay = this.showAutoplayControl && this.delay > 0 && itemCount > 1;\n    if (!this.showCounter && !showIndicators && !showAutoplay) return nothing;\n\n    return html`\n      <div class=\"footer\">\n        ${this.showCounter\n          ? html`<span class=\"counter\">${this.currentIndex + 1} / ${itemCount}</span>`\n          : nothing}\n        ${showIndicators\n          ? html`\n              <div class=\"indicators\" role=\"group\" aria-label=\"Choose image\">\n                ${this._galleryItems.map(\n                  (_item, index) => html`\n                    <button\n                      class=\"indicator\"\n                      type=\"button\"\n                      aria-label=\"Show image ${index + 1} of ${itemCount}\"\n                      aria-current=${String(index === this.currentIndex)}\n                      @click=${() => this._goTo(index, \"indicator\")}\n                    ></button>\n                  `,\n                )}\n              </div>\n            `\n          : nothing}\n        ${showAutoplay\n          ? html`\n              <button\n                class=\"autoplay-button\"\n                type=\"button\"\n                aria-label=${this.paused ? \"Resume slideshow\" : \"Pause slideshow\"}\n                @click=${this._togglePaused}\n              >\n                ${this.paused ? \"Play\" : \"Pause\"}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  /** Renders the active image, navigation, caption, and hidden metadata slot. */\n  protected override render() {\n    const itemCount = this._galleryItems.length;\n    const currentItem = this._galleryItems[this.currentIndex];\n    // Reserve the caption row for every slide as soon as any slide has a\n    // caption, so the gallery's total height stays constant while it cycles\n    // (a slide without a caption no longer collapses the box and shifts the\n    // page below it).\n    const hasCaptions = this._galleryItems.some((item) => item.caption);\n    const objectFit: PhotoGalleryObjectFit = this.objectFit === \"contain\" ? \"contain\" : \"cover\";\n    const viewportStyles = {\n      \"--photo-gallery-aspect-ratio\": this.aspectRatio.trim() || \"16 / 9\",\n      \"--photo-gallery-object-fit\": objectFit,\n    };\n\n    return html`\n      <div\n        class=\"gallery\"\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        aria-label=\"Photo gallery\"\n        tabindex=\"0\"\n        @keydown=${this._handleKeyDown}\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n      >\n        ${currentItem\n          ? html`\n              <figure>\n                <div\n                  class=\"viewport\"\n                  style=${styleMap(viewportStyles)}\n                  @pointerdown=${this._handlePointerDown}\n                  @pointerup=${this._handlePointerUp}\n                  @pointercancel=${this._handlePointerCancel}\n                >\n                  <div class=\"slides\">\n                    ${this._previousIndex === null\n                      ? nothing\n                      : this._renderPicture(this._previousIndex, \"previous\")}\n                    ${this._renderPicture(this.currentIndex, \"current\")}\n                  </div>\n                  ${this.showControls && itemCount > 1\n                    ? html`\n                        <div class=\"arrow-controls\">\n                          <button\n                            class=\"arrow-button previous\"\n                            type=\"button\"\n                            aria-label=\"Previous image\"\n                            @click=${() => this._showPrevious()}\n                          >\n                            ${iconChevronLeft(18)}\n                          </button>\n                          <button\n                            class=\"arrow-button next\"\n                            type=\"button\"\n                            aria-label=\"Next image\"\n                            @click=${() => this._showNext()}\n                          >\n                            ${iconChevronRight(18)}\n                          </button>\n                        </div>\n                      `\n                    : nothing}\n                </div>\n                ${hasCaptions\n                  ? html`<figcaption>${currentItem.caption}</figcaption>`\n                  : nothing}\n              </figure>\n              ${this._renderFooter(itemCount)}\n            `\n          : nothing}\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"photo-gallery\": PhotoGallery;\n  }\n}\n"]}

package/dist/range-slider.d.ts

@@ -0,0 +1,48 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * A form-associated numeric range slider, usable standalone or inside a
+ * native `<form>`. Wraps a native `<input type="range">` (kept for its free
+ * keyboard, drag, and screen-reader support) restyled to match this
+ * package's track/fill visual language (`stat-meter`, `percent-bar-chart`)
+ * instead of the browser-default appearance. Purely a value control — no
+ * built-in label; wrap in `form-field` for a labeled field, or render a
+ * value readout next to it (see the playground example), matching
+ * `autocomplete-input`/`form-select`.
+ *
+ * @element range-slider
+ * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.
+ * @fires change - Fires once the value is committed (drag released, arrow
+ *   key released); detail: `{ value }`.
+ */
+export declare class RangeSlider extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult[];
+    /** Minimum value. */
+    min: number;
+    /** Maximum value. */
+    max: number;
+    /** Step increment. */
+    step: number;
+    /** Current value. */
+    value: number;
+    /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+    disabled: boolean;
+    /** Form field name. */
+    name: string;
+    private _formDisabled;
+    protected willUpdate(changed: PropertyValues): void;
+    /** Resets to the value present at first render, per the form contract. */
+    formResetCallback(): void;
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled: boolean): void;
+    /** Restores the value from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "range-slider": RangeSlider;
+    }
+}
+//# sourceMappingURL=range-slider.d.ts.map

package/dist/range-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../src/range-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIjE;;;;;;;;;;;;;;GAcG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAuGpB;IAEF,qBAAqB;IACO,GAAG,SAAK;IACpC,qBAAqB;IACO,GAAG,SAAO;IACtC,sBAAsB;IACM,IAAI,SAAK;IACrC,qBAAqB;IACO,KAAK,SAAK;IACtC,2EAA2E;IAC9C,QAAQ,UAAS;IAC9C,uBAAuB;IACX,IAAI,SAAM;IAEb,OAAO,CAAC,aAAa,CAAS;IAevC,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAG3D;IAED,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI,CAExB;IAED,qDAAqD;IACrD,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAE5C;IAED,mEAAmE;IACnE,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,CAIrE;IAsBQ,MAAM,yCAcd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/dist/range-slider.js

@@ -0,0 +1,240 @@
+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 { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * A form-associated numeric range slider, usable standalone or inside a
+ * native `<form>`. Wraps a native `<input type="range">` (kept for its free
+ * keyboard, drag, and screen-reader support) restyled to match this
+ * package's track/fill visual language (`stat-meter`, `percent-bar-chart`)
+ * instead of the browser-default appearance. Purely a value control — no
+ * built-in label; wrap in `form-field` for a labeled field, or render a
+ * value readout next to it (see the playground example), matching
+ * `autocomplete-input`/`form-select`.
+ *
+ * @element range-slider
+ * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.
+ * @fires change - Fires once the value is committed (drag released, arrow
+ *   key released); detail: `{ value }`.
+ */
+let RangeSlider = class RangeSlider extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Minimum value. */
+        this.min = 0;
+        /** Maximum value. */
+        this.max = 100;
+        /** Step increment. */
+        this.step = 1;
+        /** Current value. */
+        this.value = 0;
+        /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */
+        this.disabled = false;
+        /** Form field name. */
+        this.name = "";
+        this._formDisabled = false;
+        this.#internals = this.attachInternals();
+        this.#defaultValue = 0;
+    }
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+      }
+      input[type="range"] {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 2rem;
+        margin: 0;
+        background: transparent;
+        cursor: pointer;
+      }
+      input[type="range"]:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      /* Track */
+      input[type="range"]::-webkit-slider-runnable-track {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: linear-gradient(
+          to right,
+          var(--ui-primary, #4f46e5) 0%,
+          var(--ui-primary, #4f46e5) var(--range-percent, 0%),
+          var(--ui-surface-muted, #f8fafc) var(--range-percent, 0%),
+          var(--ui-surface-muted, #f8fafc) 100%
+        );
+      }
+      input[type="range"]::-moz-range-track {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      input[type="range"]::-moz-range-progress {
+        height: 0.375rem;
+        border-radius: 9999px;
+        background: var(--ui-primary, #4f46e5);
+      }
+      /* Thumb */
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 1rem;
+        height: 1rem;
+        /* WebKit centers the thumb on the input's full 2rem box, not the
+           thinner custom track — nudge it up to align with the track.
+           A transform offset (not margin) so it isn't a spacing-grid value. */
+        transform: translateY(-0.3125rem);
+        border-radius: 50%;
+        background: var(--ui-primary, #4f46e5);
+        border: 2px solid var(--ui-surface, #ffffff);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+      }
+      input[type="range"]::-moz-range-thumb {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background: var(--ui-primary, #4f46e5);
+        border: 2px solid var(--ui-surface, #ffffff);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+      }
+      input[type="range"]:disabled::-webkit-slider-thumb {
+        background: var(--ui-text-muted, #64748b);
+      }
+      input[type="range"]:disabled::-moz-range-thumb {
+        background: var(--ui-text-muted, #64748b);
+      }
+      input[type="range"]:focus-visible {
+        outline: none;
+      }
+      input[type="range"]:focus-visible::-webkit-slider-thumb {
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      input[type="range"]:focus-visible::-moz-range-thumb {
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        input[type="range"]::-webkit-slider-thumb {
+          transition: box-shadow 120ms ease;
+        }
+        input[type="range"]::-moz-range-thumb {
+          transition: box-shadow 120ms ease;
+        }
+      }
+      @media (forced-colors: active) {
+        input[type="range"]::-webkit-slider-runnable-track {
+          background: Canvas;
+          border: 1px solid CanvasText;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+          background: Highlight;
+          border-color: Canvas;
+        }
+        input[type="range"]:focus-visible::-webkit-slider-thumb {
+          outline: 2px solid CanvasText;
+          outline-offset: 2px;
+          box-shadow: none;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    #defaultValue;
+    /** Whether the host or an ancestor fieldset currently disables the control. */
+    get #isDisabled() {
+        return this.disabled || this._formDisabled;
+    }
+    get #percent() {
+        const range = this.max - this.min || 1;
+        return ((this.value - this.min) / range) * 100;
+    }
+    willUpdate(changed) {
+        if (!this.hasUpdated)
+            this.#defaultValue = this.value;
+        if (changed.has("value"))
+            this.#internals.setFormValue(String(this.value));
+    }
+    /** Resets to the value present at first render, per the form contract. */
+    formResetCallback() {
+        this.value = this.#defaultValue;
+    }
+    /** Mirrors an ancestor fieldset's disabled state. */
+    formDisabledCallback(disabled) {
+        this._formDisabled = disabled;
+    }
+    /** Restores the value from saved form state (bfcache/autofill). */
+    formStateRestoreCallback(state) {
+        if (typeof state !== "string")
+            return;
+        const parsed = Number(state);
+        if (!Number.isNaN(parsed))
+            this.value = parsed;
+    }
+    // The native input's own "input"/"change" events are composed (cross the
+    // shadow boundary) — stop them so only our re-dispatched CustomEvent
+    // (carrying `detail.value`) reaches consumers, matching text-area.ts's fix
+    // for the same issue. Otherwise the native event bubbles out afterwards
+    // too, re-invoking the same listener with a plain Event whose `detail` is
+    // undefined, crashing consumer code that reads `e.detail.value`.
+    #onInput(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = Number(input.value);
+        this.dispatchEvent(new CustomEvent("input", { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    #onChange(e) {
+        e.stopPropagation();
+        const input = e.target;
+        this.value = Number(input.value);
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <input
+        type="range"
+        style=${`--range-percent: ${this.#percent}%`}
+        min=${this.min}
+        max=${this.max}
+        step=${this.step}
+        .value=${String(this.value)}
+        ?disabled=${this.#isDisabled}
+        @input=${(e) => this.#onInput(e)}
+        @change=${(e) => this.#onChange(e)}
+      />
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], RangeSlider.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "disabled", void 0);
+__decorate([
+    property()
+], RangeSlider.prototype, "name", void 0);
+__decorate([
+    state()
+], RangeSlider.prototype, "_formDisabled", void 0);
+RangeSlider = __decorate([
+    customElement("range-slider")
+], RangeSlider);
+export { RangeSlider };
+//# sourceMappingURL=range-slider.js.map

package/dist/range-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-slider.js","sourceRoot":"","sources":["../src/range-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * A form-associated numeric range slider, usable standalone or inside a\n * native `<form>`. Wraps a native `<input type=\"range\">` (kept for its free\n * keyboard, drag, and screen-reader support) restyled to match this\n * package's track/fill visual language (`stat-meter`, `percent-bar-chart`)\n * instead of the browser-default appearance. Purely a value control — no\n * built-in label; wrap in `form-field` for a labeled field, or render a\n * value readout next to it (see the playground example), matching\n * `autocomplete-input`/`form-select`.\n *\n * @element range-slider\n * @fires input - Fires continuously while dragging/typing; detail: `{ value }`.\n * @fires change - Fires once the value is committed (drag released, arrow\n *   key released); detail: `{ value }`.\n */\n@customElement(\"range-slider\")\nexport class RangeSlider extends LitElement {\n  static formAssociated = true;\n\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n      }\n      input[type=\"range\"] {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 100%;\n        height: 2rem;\n        margin: 0;\n        background: transparent;\n        cursor: pointer;\n      }\n      input[type=\"range\"]:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      /* Track */\n      input[type=\"range\"]::-webkit-slider-runnable-track {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: linear-gradient(\n          to right,\n          var(--ui-primary, #4f46e5) 0%,\n          var(--ui-primary, #4f46e5) var(--range-percent, 0%),\n          var(--ui-surface-muted, #f8fafc) var(--range-percent, 0%),\n          var(--ui-surface-muted, #f8fafc) 100%\n        );\n      }\n      input[type=\"range\"]::-moz-range-track {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      input[type=\"range\"]::-moz-range-progress {\n        height: 0.375rem;\n        border-radius: 9999px;\n        background: var(--ui-primary, #4f46e5);\n      }\n      /* Thumb */\n      input[type=\"range\"]::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 1rem;\n        height: 1rem;\n        /* WebKit centers the thumb on the input's full 2rem box, not the\n           thinner custom track — nudge it up to align with the track.\n           A transform offset (not margin) so it isn't a spacing-grid value. */\n        transform: translateY(-0.3125rem);\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        border: 2px solid var(--ui-surface, #ffffff);\n        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);\n      }\n      input[type=\"range\"]::-moz-range-thumb {\n        width: 1rem;\n        height: 1rem;\n        border-radius: 50%;\n        background: var(--ui-primary, #4f46e5);\n        border: 2px solid var(--ui-surface, #ffffff);\n        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);\n      }\n      input[type=\"range\"]:disabled::-webkit-slider-thumb {\n        background: var(--ui-text-muted, #64748b);\n      }\n      input[type=\"range\"]:disabled::-moz-range-thumb {\n        background: var(--ui-text-muted, #64748b);\n      }\n      input[type=\"range\"]:focus-visible {\n        outline: none;\n      }\n      input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      input[type=\"range\"]:focus-visible::-moz-range-thumb {\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      @media (prefers-reduced-motion: no-preference) {\n        input[type=\"range\"]::-webkit-slider-thumb {\n          transition: box-shadow 120ms ease;\n        }\n        input[type=\"range\"]::-moz-range-thumb {\n          transition: box-shadow 120ms ease;\n        }\n      }\n      @media (forced-colors: active) {\n        input[type=\"range\"]::-webkit-slider-runnable-track {\n          background: Canvas;\n          border: 1px solid CanvasText;\n        }\n        input[type=\"range\"]::-webkit-slider-thumb {\n          background: Highlight;\n          border-color: Canvas;\n        }\n        input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n          outline: 2px solid CanvasText;\n          outline-offset: 2px;\n          box-shadow: none;\n        }\n      }\n    `,\n  ];\n\n  /** Minimum value. */\n  @property({ type: Number }) min = 0;\n  /** Maximum value. */\n  @property({ type: Number }) max = 100;\n  /** Step increment. */\n  @property({ type: Number }) step = 1;\n  /** Current value. */\n  @property({ type: Number }) value = 0;\n  /** Disables interaction; merged with an ancestor `<fieldset disabled>`. */\n  @property({ type: Boolean }) disabled = false;\n  /** Form field name. */\n  @property() name = \"\";\n\n  @state() private _formDisabled = false;\n\n  #internals = this.attachInternals();\n  #defaultValue = 0;\n\n  /** Whether the host or an ancestor fieldset currently disables the control. */\n  get #isDisabled(): boolean {\n    return this.disabled || this._formDisabled;\n  }\n\n  get #percent(): number {\n    const range = this.max - this.min || 1;\n    return ((this.value - this.min) / range) * 100;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    if (!this.hasUpdated) this.#defaultValue = this.value;\n    if (changed.has(\"value\")) this.#internals.setFormValue(String(this.value));\n  }\n\n  /** Resets to the value present at first render, per the form contract. */\n  formResetCallback(): void {\n    this.value = this.#defaultValue;\n  }\n\n  /** Mirrors an ancestor fieldset's disabled state. */\n  formDisabledCallback(disabled: boolean): void {\n    this._formDisabled = disabled;\n  }\n\n  /** Restores the value from saved form state (bfcache/autofill). */\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (typeof state !== \"string\") return;\n    const parsed = Number(state);\n    if (!Number.isNaN(parsed)) this.value = parsed;\n  }\n\n  // The native input's own \"input\"/\"change\" events are composed (cross the\n  // shadow boundary) — stop them so only our re-dispatched CustomEvent\n  // (carrying `detail.value`) reaches consumers, matching text-area.ts's fix\n  // for the same issue. Otherwise the native event bubbles out afterwards\n  // too, re-invoking the same listener with a plain Event whose `detail` is\n  // undefined, crashing consumer code that reads `e.detail.value`.\n  #onInput(e: Event): void {\n    e.stopPropagation();\n    const input = e.target as HTMLInputElement;\n    this.value = Number(input.value);\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  #onChange(e: Event): void {\n    e.stopPropagation();\n    const input = e.target as HTMLInputElement;\n    this.value = Number(input.value);\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: this.value }, bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <input\n        type=\"range\"\n        style=${`--range-percent: ${this.#percent}%`}\n        min=${this.min}\n        max=${this.max}\n        step=${this.step}\n        .value=${String(this.value)}\n        ?disabled=${this.#isDisabled}\n        @input=${(e: Event) => this.#onInput(e)}\n        @change=${(e: Event) => this.#onChange(e)}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"range-slider\": RangeSlider;\n  }\n}\n"]}

package/dist/toast-notification.d.ts

@@ -1,20 +1,30 @@
 import { LitElement, nothing } from "lit";
-export type ToastVariant = "error" | "info" | "success";
+export type ToastVariant = "error" | "info" | "success" | "warning";
 interface ToastOptions {
     /** Visual style; also selects the accent color. Defaults to "info". */
     variant?: ToastVariant;
     /** Auto-dismiss delay in ms. Pass 0 to require a manual close. Defaults to 5000. */
     duration?: number;
+    /**
+     * Optional secondary line shown beneath the headline in smaller, non-bold
+     * type. Omit for a single-line toast.
+     */
+    description?: string;
 }
 /**
  * Fixed-position stack of dismissible notifications, anchored top-right
- * (top-full-width on mobile). Not wired to any app state yet — callers add
- * toasts imperatively via the `show()` method on a live element reference,
+ * (top-full-width on mobile). Every toast shares one fixed width so entries
+ * never appear narrower or wider than one another. Not wired to any app state
+ * yet — callers add toasts imperatively via the `show()` method on a live
+ * element reference,
  * e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
  * or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
- * exported from this file. Each toast auto-dismisses after `duration` ms and
- * can also be dismissed via its ✕ button. Appears/disappears instantly — no
- * slide/fade transitions.
+ * exported from this file. The first argument is the required bold headline; an
+ * optional `description` renders a smaller, non-bold second line. Each variant
+ * leads with a matching status icon (success → check, error → exclamation
+ * circle, info → information circle, warning → exclamation triangle). Each toast
+ * auto-dismisses after `duration` ms and can also be dismissed via its ✕
+ * button. Appears/disappears instantly — no slide/fade transitions.
  *
  * @element toast-notification
  */
@@ -36,6 +46,12 @@ export declare class ToastNotification extends LitElement {
      */
     dismiss(id: number): void;
     disconnectedCallback(): void;
+    /**
+     * Returns the decorative status icon for a variant, sized as a standalone
+     * 18px glyph to match the dismiss button.
+     * @param variant The toast variant.
+     */
+    private _variantIcon;
     render(): typeof nothing | import("lit-html").TemplateResult<1>;
 }
 declare global {
@@ -44,10 +60,12 @@ declare global {
     }
 }
 /** Shows an error toast. Use for connection/network failures, not validation errors. */
-export declare function notifyError(message: string): void;
+export declare function notifyError(message: string, description?: string): void;
 /** Shows a success toast. */
-export declare function notifySuccess(message: string): void;
+export declare function notifySuccess(message: string, description?: string): void;
 /** Shows an info toast. */
-export declare function notifyInfo(message: string): void;
+export declare function notifyInfo(message: string, description?: string): void;
+/** Shows a warning toast. */
+export declare function notifyWarning(message: string, description?: string): void;
 export {};
 //# sourceMappingURL=toast-notification.d.ts.map

package/dist/toast-notification.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toast-notification.d.ts","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAKrD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAExD,UAAU,YAAY;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAUD;;;;;;;;;;;GAWG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACtC,OAAO,CAAC,OAAO,CAAe;IAEvC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAgB,MAAM,4BAoGpB;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAYxD;IAED;;;OAGG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,QAOjB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,0DAkBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;AAMD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAE1C;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,QAE5C;AAED,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,QAEzC"}
+{"version":3,"file":"toast-notification.d.ts","sourceRoot":"","sources":["../src/toast-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAWrD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AAEpE,UAAU,YAAY;IACpB,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAWD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IACtC,OAAO,CAAC,OAAO,CAAe;IAEvC,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,OAAO,CAAoD;IAEnE,OAAgB,MAAM,4BAyHpB;IAEF;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,MAAM,CAYxD;IAED;;;OAGG;IACH,OAAO,CAAC,EAAE,EAAE,MAAM,QAOjB;IAEQ,oBAAoB,SAI5B;IAED;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAaX,MAAM,0DAsBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,iBAAiB,CAAC;KACzC;CACF;AAMD,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,QAEhE;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,QAElE;AAED,2BAA2B;AAC3B,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,QAE/D;AAED,6BAA6B;AAC7B,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,QAElE"}