@sankhyatronics/sankhya-cms 0.1.1 → 0.1.3

package/dist/carousel/index.d.ts

@@ -4,8 +4,21 @@ import { LitElement } from 'lit';
 /**
  * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and
  * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place
- * of the source's framer-motion spring). Autoplay pauses while hovered or focused and stops when
- * the element is disconnected.
+ * of the source's framer-motion spring), or fades in with `transition="fade"`. Autoplay pauses
+ * while hovered or focused and stops when the element is disconnected; a paused slide keeps the
+ * time it had left.
+ *
+ * `indicator-style="tabs"` replaces the dots with a row of labelled tabs along the bottom, each
+ * with a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero
+ * carousel layout (put `st-hero`s in it). Tab labels come from `tab-labels`, else each slide's
+ * `data-tab-label` attribute, else its `title`.
+ *
+ * @fires carousel-change - Detail `{ index }`, when the visible slide changes.
+ * @cssprop --st-carousel-tab-color - Tab text and progress colour (default: light, for slides with a dark image).
+ * @cssprop --st-carousel-tabs-space - Room kept free under each slide's content for the tabs (default `6rem`).
+ * @csspart tabs - The tab row.
+ * @csspart tab - One tab button.
+ * @csspart progress - A tab's progress bar.
  */
 declare class Carousel extends LitElement {
     static styles: lit.CSSResult;
@@ -14,21 +27,44 @@ declare class Carousel extends LitElement {
     interval: number;
     showArrows: boolean;
     showIndicators: boolean;
+    /** `dots` (default) or `tabs`: labelled tabs with progress bars along the bottom. */
+    indicatorStyle: 'dots' | 'tabs';
+    /** `slide` (default) or `fade`. */
+    transition: 'slide' | 'fade';
+    /** Tab labels, one per slide, for `indicator-style="tabs"`. Missing entries fall back to the slide's `data-tab-label`, then its `title`. */
+    tabLabels: string[];
     private index;
     private count;
+    private slideLabels;
+    /** Paused with the pause button; stays paused until the button is pressed again. */
+    private userPaused;
+    /** Paused while hovered or focused. */
     private paused;
     private timer?;
+    /** Time left on the current slide, so a pause resumes where it stopped. */
+    private remaining;
+    private startedAt;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
+    private get halted();
+    /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */
+    private hold;
     private pause;
     private resume;
+    private togglePlay;
     private get slides();
+    private labelFor;
     private syncSlides;
     private onSlotChange;
     private stopTimer;
+    private startTimer;
     private restartTimer;
     private go;
+    private onTabKeydown;
+    private renderTabs;
+    private renderDots;
     render(): lit.TemplateResult<1>;
 }
 

package/dist/carousel/index.js

@@ -1,6 +1,6 @@
 import {
   Carousel
-} from "../chunk-XHBC23TV.js";
+} from "../chunk-47RPYNFG.js";
 import "../chunk-3VE6VFJ4.js";
 import "../chunk-RHAOQ6K4.js";
 import "../chunk-EUXUH3YW.js";

package/dist/chunk-47RPYNFG.js

@@ -0,0 +1,527 @@
+import {
+  reducedMotionStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  buttonResetStyles,
+  controlBaseStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/carousel/Carousel.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var Carousel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.autoPlay = true;
+    this.interval = 5e3;
+    this.showArrows = true;
+    this.showIndicators = true;
+    this.indicatorStyle = "dots";
+    this.transition = "slide";
+    this.tabLabels = [];
+    this.index = 0;
+    this.count = 0;
+    this.slideLabels = [];
+    this.userPaused = false;
+    /** Paused while hovered or focused. */
+    this.paused = false;
+    /** Time left on the current slide, so a pause resumes where it stopped. */
+    this.remaining = 0;
+    this.startedAt = 0;
+    this.pause = () => this.hold(() => this.paused = true);
+    this.resume = () => this.hold(() => this.paused = false);
+    this.togglePlay = () => this.hold(() => this.userPaused = !this.userPaused);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("mouseenter", this.pause);
+    this.addEventListener("mouseleave", this.resume);
+    this.addEventListener("focusin", this.pause);
+    this.addEventListener("focusout", this.resume);
+  }
+  disconnectedCallback() {
+    this.stopTimer();
+    this.removeEventListener("mouseenter", this.pause);
+    this.removeEventListener("mouseleave", this.resume);
+    this.removeEventListener("focusin", this.pause);
+    this.removeEventListener("focusout", this.resume);
+    super.disconnectedCallback();
+  }
+  willUpdate(changed) {
+    if (changed.has("interval")) this.style.setProperty("--st-carousel-interval", `${this.interval}ms`);
+  }
+  updated(changed) {
+    if (changed.has("index") || changed.has("count") || changed.has("indicatorStyle") || changed.has("tabLabels")) this.syncSlides();
+    if (changed.has("autoPlay") || changed.has("interval") || changed.has("count")) this.restartTimer();
+  }
+  get halted() {
+    return this.paused || this.userPaused;
+  }
+  /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */
+  hold(update) {
+    const was = this.halted;
+    update();
+    const now = this.halted;
+    if (was === now) return;
+    this.toggleAttribute("data-paused", now);
+    if (now) {
+      if (this.timer !== void 0) this.remaining -= performance.now() - this.startedAt;
+      this.stopTimer();
+    } else {
+      this.startTimer();
+    }
+  }
+  get slides() {
+    return this.shadowRoot?.querySelector("slot")?.assignedElements({ flatten: true }) ?? [];
+  }
+  labelFor(i) {
+    return this.tabLabels[i] || this.slideLabels[i] || `Slide ${i + 1}`;
+  }
+  syncSlides() {
+    const tabs = this.indicatorStyle === "tabs";
+    this.slides.forEach((el, i) => {
+      el.toggleAttribute("data-st-active", i === this.index);
+      if (tabs) {
+        el.setAttribute("role", "tabpanel");
+        el.setAttribute("aria-label", this.labelFor(i));
+      } else if (el.getAttribute("role") === "tabpanel") {
+        el.removeAttribute("role");
+        el.removeAttribute("aria-label");
+      }
+    });
+  }
+  onSlotChange() {
+    const slides = this.slides;
+    this.count = slides.length;
+    this.slideLabels = slides.map((el) => el.dataset.tabLabel || el.title || "");
+    if (this.index >= this.count) this.index = 0;
+    this.syncSlides();
+  }
+  stopTimer() {
+    if (this.timer !== void 0) clearTimeout(this.timer);
+    this.timer = void 0;
+  }
+  startTimer() {
+    this.stopTimer();
+    if (!this.autoPlay || this.count < 2 || this.halted) return;
+    this.startedAt = performance.now();
+    this.timer = setTimeout(() => this.go(this.index + 1, "next"), Math.max(0, this.remaining));
+  }
+  restartTimer() {
+    this.remaining = this.interval;
+    this.startTimer();
+  }
+  go(target, direction) {
+    if (this.count === 0) return;
+    this.setAttribute("data-direction", direction);
+    this.index = (target + this.count) % this.count;
+    this.dispatchEvent(
+      new CustomEvent("carousel-change", {
+        detail: { index: this.index },
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.restartTimer();
+  }
+  onTabKeydown(event) {
+    const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];
+    let target;
+    if (step !== void 0) target = this.index + step;
+    else if (event.key === "Home") target = 0;
+    else if (event.key === "End") target = this.count - 1;
+    if (target === void 0) return;
+    event.preventDefault();
+    this.go(target, step === -1 || target < this.index ? "prev" : "next");
+    void this.updateComplete.then(() => this.renderRoot.querySelector(".tab.active")?.focus());
+  }
+  renderTabs() {
+    const running = this.autoPlay && this.count > 1;
+    return html`<div class="tabs" part="tabs">
+      <div class="tabs-inner">
+        <p class="tab-current" aria-hidden="true">${this.labelFor(this.index)}</p>
+        <div class="tablist" role="tablist" aria-label="Slides" @keydown=${this.onTabKeydown}>
+          ${Array.from({ length: this.count }, (_, i) => {
+      const active = i === this.index;
+      return html`
+              <button
+                part="tab"
+                type="button"
+                role="tab"
+                class="tab ${active ? "active" : ""} ${running ? "running" : ""}"
+                aria-selected=${active ? "true" : "false"}
+                tabindex=${active ? 0 : -1}
+                @click=${() => active || this.go(i, i > this.index ? "next" : "prev")}
+              >
+                <span class="progress" part="progress"><span class="fill"></span></span>
+                <span class="tab-label">${this.labelFor(i)}</span>
+              </button>
+            `;
+    })}
+        </div>
+        ${running ? html`<button
+              part="play-button"
+              type="button"
+              class="play"
+              aria-label=${this.userPaused ? "Play slides" : "Pause slides"}
+              @click=${this.togglePlay}
+            >
+              ${this.userPaused ? html`<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 1.5v9l7.5-4.5z" fill="currentColor" /></svg>` : html`<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z" fill="currentColor" /></svg>`}
+            </button>` : nothing}
+      </div>
+    </div>`;
+  }
+  renderDots() {
+    return html`<div class="indicators" part="indicators">
+      ${Array.from(
+      { length: this.count },
+      (_, i) => html`
+          <button
+            part="dot"
+            class="dot ${i === this.index ? "active" : ""}"
+            aria-label="Go to slide ${i + 1}"
+            aria-current=${i === this.index ? "true" : "false"}
+            @click=${() => this.go(i, i > this.index ? "next" : "prev")}
+          ></button>
+        `
+    )}
+    </div>`;
+  }
+  render() {
+    const multiple = this.count > 1;
+    return html`
+      <slot @slotchange=${this.onSlotChange}></slot>
+      ${this.showArrows && multiple ? html`
+            <button part="nav-button prev" class="nav prev" aria-label="Previous Slide" @click=${() => this.go(this.index - 1, "prev")}>&#10094;</button>
+            <button part="nav-button next" class="nav next" aria-label="Next Slide" @click=${() => this.go(this.index + 1, "next")}>&#10095;</button>
+          ` : nothing}
+      ${this.showIndicators && multiple ? this.indicatorStyle === "tabs" ? this.renderTabs() : this.renderDots() : nothing}
+    `;
+  }
+};
+Carousel.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+    }
+
+    ::slotted(*) {
+      display: none !important;
+    }
+
+    ::slotted([data-st-active]) {
+      display: block !important;
+      animation: st-carousel-in-next 0.4s ease both;
+    }
+
+    :host([data-direction='prev']) ::slotted([data-st-active]) {
+      animation-name: st-carousel-in-prev;
+    }
+
+    :host([transition='fade']) ::slotted([data-st-active]),
+    :host([transition='fade'][data-direction]) ::slotted([data-st-active]) {
+      animation: st-carousel-fade 0.7s ease both;
+    }
+
+    @keyframes st-carousel-in-next {
+      from {
+        transform: translateX(10%);
+        opacity: 0;
+      }
+      to {
+        transform: none;
+        opacity: 1;
+      }
+    }
+
+    @keyframes st-carousel-in-prev {
+      from {
+        transform: translateX(-10%);
+        opacity: 0;
+      }
+      to {
+        transform: none;
+        opacity: 1;
+      }
+    }
+
+    @keyframes st-carousel-fade {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    .nav {
+      ${buttonResetStyles}
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-size-38);
+      height: var(--st-size-38);
+      border-radius: var(--st-radius-circle);
+      border: 1px solid var(--st-color-border);
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font-size: var(--st-text-xl);
+      opacity: 0.8;
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+    }
+
+    .nav:hover {
+      opacity: 1;
+      transform: translateY(-50%) scale(1.1);
+    }
+
+    .prev {
+      left: var(--st-space-12);
+    }
+
+    .next {
+      right: var(--st-space-12);
+    }
+
+    .indicators {
+      position: absolute;
+      bottom: var(--st-space-24);
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+      display: flex;
+      gap: var(--st-space-12);
+    }
+
+    .dot {
+      ${buttonResetStyles}
+      width: var(--st-space-12);
+      height: var(--st-space-12);
+      padding: 0;
+      border-radius: var(--st-radius-circle);
+      background: var(--st-color-border-strong);
+      transition:
+        background 0.3s ease,
+        transform 0.3s ease;
+    }
+
+    .dot:hover {
+      background: var(--st-color-text-muted);
+    }
+
+    .dot.active {
+      background: var(--st-color-text-strong);
+      transform: scale(1.2);
+    }
+
+    /* ---- indicator-style="tabs" ---- */
+
+    :host([indicator-style='tabs']) ::slotted(*) {
+      padding-bottom: var(--st-carousel-tabs-space, 6rem);
+    }
+
+    .tabs {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 10;
+      color: var(--st-carousel-tab-color, var(--st-color-on-solid));
+    }
+
+    .tabs-inner {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--st-space-24);
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+      box-sizing: border-box;
+      padding: 0 var(--st-space-24) var(--st-space-24);
+    }
+
+    .tablist {
+      flex: 1;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: minmax(0, 1fr);
+      gap: var(--st-space-24);
+    }
+
+    .tab {
+      ${buttonResetStyles}
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+      padding: var(--st-space-12) 0;
+      color: inherit;
+      text-align: left;
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.3;
+      opacity: 0.7;
+      transition: opacity 0.2s ease;
+    }
+
+    .tab:hover,
+    .tab.active {
+      opacity: 1;
+    }
+
+    .tab:focus-visible,
+    .play:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 4px;
+    }
+
+    .progress {
+      position: relative;
+      display: block;
+      height: 3px;
+      border-radius: 2px;
+      overflow: hidden;
+      background: color-mix(in oklch, currentColor 30%, transparent);
+    }
+
+    .fill {
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      transform: scaleX(0);
+      transform-origin: left center;
+    }
+
+    .tab.active .fill {
+      transform: scaleX(1);
+    }
+
+    .tab.active.running .fill {
+      animation: st-carousel-progress var(--st-carousel-interval, 5000ms) linear both;
+    }
+
+    :host([data-paused]) .tab.active.running .fill {
+      animation-play-state: paused;
+    }
+
+    @keyframes st-carousel-progress {
+      from {
+        transform: scaleX(0);
+      }
+      to {
+        transform: scaleX(1);
+      }
+    }
+
+    .play {
+      ${buttonResetStyles}
+      flex: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-size-32);
+      height: var(--st-size-32);
+      margin-top: var(--st-space-4);
+      border-radius: var(--st-radius-circle);
+      color: inherit;
+      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, currentColor 60%, transparent);
+    }
+
+    .play:hover {
+      background: color-mix(in oklch, currentColor 15%, transparent);
+    }
+
+    .tab-current {
+      display: none;
+    }
+
+    @media (max-width: 768px) {
+      .tablist {
+        gap: var(--st-space-8);
+      }
+
+      .tab-label {
+        display: none;
+      }
+
+      .tab-current {
+        display: block;
+        margin: 0 0 var(--st-space-4);
+        font-size: var(--st-text-base);
+        font-weight: var(--st-font-weight-semibold);
+      }
+
+      .tabs-inner {
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .tabs-inner {
+        padding: 0 var(--st-space-32) var(--st-space-32);
+      }
+    }
+
+    ${reducedMotionStyles}
+    @media (prefers-reduced-motion: reduce) {
+      ::slotted([data-st-active]) {
+        animation: none;
+      }
+      .tab.active.running .fill {
+        animation: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, attribute: "auto-play" })
+], Carousel.prototype, "autoPlay", 2);
+__decorateClass([
+  property({ type: Number })
+], Carousel.prototype, "interval", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-arrows" })
+], Carousel.prototype, "showArrows", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-indicators" })
+], Carousel.prototype, "showIndicators", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "indicator-style" })
+], Carousel.prototype, "indicatorStyle", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Carousel.prototype, "transition", 2);
+__decorateClass([
+  property({ attribute: false })
+], Carousel.prototype, "tabLabels", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "index", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "count", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "slideLabels", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "userPaused", 2);
+Carousel = __decorateClass([
+  customElement("st-carousel")
+], Carousel);
+
+export {
+  Carousel
+};
+//# sourceMappingURL=chunk-47RPYNFG.js.map

package/dist/chunk-47RPYNFG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/carousel/Carousel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { buttonResetStyles, controlBaseStyles } from '../shared/styles';\nimport { reducedMotionStyles } from '../shared/section-styles';\nimport type { CarouselChangeEventDetail } from './CarouselEvents';\n\n/**\n * Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\n * dot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\n * of the source's framer-motion spring), or fades in with `transition=\"fade\"`. Autoplay pauses\n * while hovered or focused and stops when the element is disconnected; a paused slide keeps the\n * time it had left.\n *\n * `indicator-style=\"tabs\"` replaces the dots with a row of labelled tabs along the bottom, each\n * with a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero\n * carousel layout (put `st-hero`s in it). Tab labels come from `tab-labels`, else each slide's\n * `data-tab-label` attribute, else its `title`.\n *\n * @fires carousel-change - Detail `{ index }`, when the visible slide changes.\n * @cssprop --st-carousel-tab-color - Tab text and progress colour (default: light, for slides with a dark image).\n * @cssprop --st-carousel-tabs-space - Room kept free under each slide's content for the tabs (default `6rem`).\n * @csspart tabs - The tab row.\n * @csspart tab - One tab button.\n * @csspart progress - A tab's progress bar.\n */\n@customElement('st-carousel')\nexport class Carousel extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    ::slotted(*) {\n      display: none !important;\n    }\n\n    ::slotted([data-st-active]) {\n      display: block !important;\n      animation: st-carousel-in-next 0.4s ease both;\n    }\n\n    :host([data-direction='prev']) ::slotted([data-st-active]) {\n      animation-name: st-carousel-in-prev;\n    }\n\n    :host([transition='fade']) ::slotted([data-st-active]),\n    :host([transition='fade'][data-direction]) ::slotted([data-st-active]) {\n      animation: st-carousel-fade 0.7s ease both;\n    }\n\n    @keyframes st-carousel-in-next {\n      from {\n        transform: translateX(10%);\n        opacity: 0;\n      }\n      to {\n        transform: none;\n        opacity: 1;\n      }\n    }\n\n    @keyframes st-carousel-in-prev {\n      from {\n        transform: translateX(-10%);\n        opacity: 0;\n      }\n      to {\n        transform: none;\n        opacity: 1;\n      }\n    }\n\n    @keyframes st-carousel-fade {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    .nav {\n      ${buttonResetStyles}\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      z-index: 10;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-38);\n      height: var(--st-size-38);\n      border-radius: var(--st-radius-circle);\n      border: 1px solid var(--st-color-border);\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: var(--st-text-xl);\n      opacity: 0.8;\n      transition:\n        opacity 0.3s ease,\n        transform 0.3s ease;\n    }\n\n    .nav:hover {\n      opacity: 1;\n      transform: translateY(-50%) scale(1.1);\n    }\n\n    .prev {\n      left: var(--st-space-12);\n    }\n\n    .next {\n      right: var(--st-space-12);\n    }\n\n    .indicators {\n      position: absolute;\n      bottom: var(--st-space-24);\n      left: 50%;\n      transform: translateX(-50%);\n      z-index: 10;\n      display: flex;\n      gap: var(--st-space-12);\n    }\n\n    .dot {\n      ${buttonResetStyles}\n      width: var(--st-space-12);\n      height: var(--st-space-12);\n      padding: 0;\n      border-radius: var(--st-radius-circle);\n      background: var(--st-color-border-strong);\n      transition:\n        background 0.3s ease,\n        transform 0.3s ease;\n    }\n\n    .dot:hover {\n      background: var(--st-color-text-muted);\n    }\n\n    .dot.active {\n      background: var(--st-color-text-strong);\n      transform: scale(1.2);\n    }\n\n    /* ---- indicator-style=\"tabs\" ---- */\n\n    :host([indicator-style='tabs']) ::slotted(*) {\n      padding-bottom: var(--st-carousel-tabs-space, 6rem);\n    }\n\n    .tabs {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 10;\n      color: var(--st-carousel-tab-color, var(--st-color-on-solid));\n    }\n\n    .tabs-inner {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--st-space-24);\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n      box-sizing: border-box;\n      padding: 0 var(--st-space-24) var(--st-space-24);\n    }\n\n    .tablist {\n      flex: 1;\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: minmax(0, 1fr);\n      gap: var(--st-space-24);\n    }\n\n    .tab {\n      ${buttonResetStyles}\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      padding: var(--st-space-12) 0;\n      color: inherit;\n      text-align: left;\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.3;\n      opacity: 0.7;\n      transition: opacity 0.2s ease;\n    }\n\n    .tab:hover,\n    .tab.active {\n      opacity: 1;\n    }\n\n    .tab:focus-visible,\n    .play:focus-visible {\n      outline: 2px solid currentColor;\n      outline-offset: 4px;\n    }\n\n    .progress {\n      position: relative;\n      display: block;\n      height: 3px;\n      border-radius: 2px;\n      overflow: hidden;\n      background: color-mix(in oklch, currentColor 30%, transparent);\n    }\n\n    .fill {\n      position: absolute;\n      inset: 0;\n      background: currentColor;\n      transform: scaleX(0);\n      transform-origin: left center;\n    }\n\n    .tab.active .fill {\n      transform: scaleX(1);\n    }\n\n    .tab.active.running .fill {\n      animation: st-carousel-progress var(--st-carousel-interval, 5000ms) linear both;\n    }\n\n    :host([data-paused]) .tab.active.running .fill {\n      animation-play-state: paused;\n    }\n\n    @keyframes st-carousel-progress {\n      from {\n        transform: scaleX(0);\n      }\n      to {\n        transform: scaleX(1);\n      }\n    }\n\n    .play {\n      ${buttonResetStyles}\n      flex: none;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-32);\n      height: var(--st-size-32);\n      margin-top: var(--st-space-4);\n      border-radius: var(--st-radius-circle);\n      color: inherit;\n      box-shadow: inset 0 0 0 1.5px color-mix(in oklch, currentColor 60%, transparent);\n    }\n\n    .play:hover {\n      background: color-mix(in oklch, currentColor 15%, transparent);\n    }\n\n    .tab-current {\n      display: none;\n    }\n\n    @media (max-width: 768px) {\n      .tablist {\n        gap: var(--st-space-8);\n      }\n\n      .tab-label {\n        display: none;\n      }\n\n      .tab-current {\n        display: block;\n        margin: 0 0 var(--st-space-4);\n        font-size: var(--st-text-base);\n        font-weight: var(--st-font-weight-semibold);\n      }\n\n      .tabs-inner {\n        flex-wrap: wrap;\n        align-items: center;\n      }\n    }\n\n    @media (min-width: 1024px) {\n      .tabs-inner {\n        padding: 0 var(--st-space-32) var(--st-space-32);\n      }\n    }\n\n    ${reducedMotionStyles}\n    @media (prefers-reduced-motion: reduce) {\n      ::slotted([data-st-active]) {\n        animation: none;\n      }\n      .tab.active.running .fill {\n        animation: none;\n      }\n    }\n  `;\n\n  @property({ type: Boolean, attribute: 'auto-play' })\n  autoPlay = true;\n\n  /** Autoplay delay in milliseconds. */\n  @property({ type: Number })\n  interval = 5000;\n\n  @property({ type: Boolean, attribute: 'show-arrows' })\n  showArrows = true;\n\n  @property({ type: Boolean, attribute: 'show-indicators' })\n  showIndicators = true;\n\n  /** `dots` (default) or `tabs`: labelled tabs with progress bars along the bottom. */\n  @property({ type: String, reflect: true, attribute: 'indicator-style' })\n  indicatorStyle: 'dots' | 'tabs' = 'dots';\n\n  /** `slide` (default) or `fade`. */\n  @property({ type: String, reflect: true })\n  transition: 'slide' | 'fade' = 'slide';\n\n  /** Tab labels, one per slide, for `indicator-style=\"tabs\"`. Missing entries fall back to the slide's `data-tab-label`, then its `title`. */\n  @property({ attribute: false })\n  tabLabels: string[] = [];\n\n  @state() private index = 0;\n  @state() private count = 0;\n  @state() private slideLabels: string[] = [];\n  /** Paused with the pause button; stays paused until the button is pressed again. */\n  @state() private userPaused = false;\n  /** Paused while hovered or focused. */\n  private paused = false;\n  private timer?: ReturnType<typeof setTimeout>;\n  /** Time left on the current slide, so a pause resumes where it stopped. */\n  private remaining = 0;\n  private startedAt = 0;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('mouseenter', this.pause);\n    this.addEventListener('mouseleave', this.resume);\n    this.addEventListener('focusin', this.pause);\n    this.addEventListener('focusout', this.resume);\n  }\n\n  disconnectedCallback() {\n    this.stopTimer();\n    this.removeEventListener('mouseenter', this.pause);\n    this.removeEventListener('mouseleave', this.resume);\n    this.removeEventListener('focusin', this.pause);\n    this.removeEventListener('focusout', this.resume);\n    super.disconnectedCallback();\n  }\n\n  protected willUpdate(changed: Map<string, unknown>) {\n    if (changed.has('interval')) this.style.setProperty('--st-carousel-interval', `${this.interval}ms`);\n  }\n\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('index') || changed.has('count') || changed.has('indicatorStyle') || changed.has('tabLabels')) this.syncSlides();\n    if (changed.has('autoPlay') || changed.has('interval') || changed.has('count')) this.restartTimer();\n  }\n\n  private get halted(): boolean {\n    return this.paused || this.userPaused;\n  }\n\n  /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */\n  private hold(update: () => void) {\n    const was = this.halted;\n    update();\n    const now = this.halted;\n    if (was === now) return;\n    this.toggleAttribute('data-paused', now);\n    if (now) {\n      if (this.timer !== undefined) this.remaining -= performance.now() - this.startedAt;\n      this.stopTimer();\n    } else {\n      this.startTimer();\n    }\n  }\n\n  private pause = () => this.hold(() => (this.paused = true));\n\n  private resume = () => this.hold(() => (this.paused = false));\n\n  private togglePlay = () => this.hold(() => (this.userPaused = !this.userPaused));\n\n  private get slides(): Element[] {\n    return this.shadowRoot?.querySelector('slot')?.assignedElements({ flatten: true }) ?? [];\n  }\n\n  private labelFor(i: number): string {\n    return this.tabLabels[i] || this.slideLabels[i] || `Slide ${i + 1}`;\n  }\n\n  private syncSlides() {\n    const tabs = this.indicatorStyle === 'tabs';\n    this.slides.forEach((el, i) => {\n      el.toggleAttribute('data-st-active', i === this.index);\n      if (tabs) {\n        el.setAttribute('role', 'tabpanel');\n        el.setAttribute('aria-label', this.labelFor(i));\n      } else if (el.getAttribute('role') === 'tabpanel') {\n        el.removeAttribute('role');\n        el.removeAttribute('aria-label');\n      }\n    });\n  }\n\n  private onSlotChange() {\n    const slides = this.slides;\n    this.count = slides.length;\n    this.slideLabels = slides.map(el => (el as HTMLElement).dataset.tabLabel || (el as HTMLElement).title || '');\n    if (this.index >= this.count) this.index = 0;\n    this.syncSlides();\n  }\n\n  private stopTimer() {\n    if (this.timer !== undefined) clearTimeout(this.timer);\n    this.timer = undefined;\n  }\n\n  private startTimer() {\n    this.stopTimer();\n    if (!this.autoPlay || this.count < 2 || this.halted) return;\n    this.startedAt = performance.now();\n    this.timer = setTimeout(() => this.go(this.index + 1, 'next'), Math.max(0, this.remaining));\n  }\n\n  private restartTimer() {\n    this.remaining = this.interval;\n    this.startTimer();\n  }\n\n  private go(target: number, direction: 'next' | 'prev') {\n    if (this.count === 0) return;\n    this.setAttribute('data-direction', direction);\n    this.index = (target + this.count) % this.count;\n    this.dispatchEvent(\n      new CustomEvent<CarouselChangeEventDetail>('carousel-change', {\n        detail: { index: this.index },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.restartTimer();\n  }\n\n  private onTabKeydown(event: KeyboardEvent) {\n    const step = { ArrowRight: 1, ArrowLeft: -1 }[event.key];\n    let target: number | undefined;\n    if (step !== undefined) target = this.index + step;\n    else if (event.key === 'Home') target = 0;\n    else if (event.key === 'End') target = this.count - 1;\n    if (target === undefined) return;\n    event.preventDefault();\n    this.go(target, step === -1 || target < this.index ? 'prev' : 'next');\n    void this.updateComplete.then(() => this.renderRoot.querySelector<HTMLElement>('.tab.active')?.focus());\n  }\n\n  private renderTabs() {\n    const running = this.autoPlay && this.count > 1;\n    return html`<div class=\"tabs\" part=\"tabs\">\n      <div class=\"tabs-inner\">\n        <p class=\"tab-current\" aria-hidden=\"true\">${this.labelFor(this.index)}</p>\n        <div class=\"tablist\" role=\"tablist\" aria-label=\"Slides\" @keydown=${this.onTabKeydown}>\n          ${Array.from({ length: this.count }, (_, i) => {\n            const active = i === this.index;\n            return html`\n              <button\n                part=\"tab\"\n                type=\"button\"\n                role=\"tab\"\n                class=\"tab ${active ? 'active' : ''} ${running ? 'running' : ''}\"\n                aria-selected=${active ? 'true' : 'false'}\n                tabindex=${active ? 0 : -1}\n                @click=${() => active || this.go(i, i > this.index ? 'next' : 'prev')}\n              >\n                <span class=\"progress\" part=\"progress\"><span class=\"fill\"></span></span>\n                <span class=\"tab-label\">${this.labelFor(i)}</span>\n              </button>\n            `;\n          })}\n        </div>\n        ${running\n          ? html`<button\n              part=\"play-button\"\n              type=\"button\"\n              class=\"play\"\n              aria-label=${this.userPaused ? 'Play slides' : 'Pause slides'}\n              @click=${this.togglePlay}\n            >\n              ${this.userPaused\n                ? html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M3 1.5v9l7.5-4.5z\" fill=\"currentColor\" /></svg>`\n                : html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M2.5 1.5h2.5v9H2.5zM7 1.5h2.5v9H7z\" fill=\"currentColor\" /></svg>`}\n            </button>`\n          : nothing}\n      </div>\n    </div>`;\n  }\n\n  private renderDots() {\n    return html`<div class=\"indicators\" part=\"indicators\">\n      ${Array.from(\n        { length: this.count },\n        (_, i) => html`\n          <button\n            part=\"dot\"\n            class=\"dot ${i === this.index ? 'active' : ''}\"\n            aria-label=\"Go to slide ${i + 1}\"\n            aria-current=${i === this.index ? 'true' : 'false'}\n            @click=${() => this.go(i, i > this.index ? 'next' : 'prev')}\n          ></button>\n        `,\n      )}\n    </div>`;\n  }\n\n  render() {\n    const multiple = this.count > 1;\n    return html`\n      <slot @slotchange=${this.onSlotChange}></slot>\n      ${this.showArrows && multiple\n        ? html`\n            <button part=\"nav-button prev\" class=\"nav prev\" aria-label=\"Previous Slide\" @click=${() => this.go(this.index - 1, 'prev')}>&#10094;</button>\n            <button part=\"nav-button next\" class=\"nav next\" aria-label=\"Next Slide\" @click=${() => this.go(this.index + 1, 'next')}>&#10095;</button>\n          `\n        : nothing}\n      ${this.showIndicators && multiple ? (this.indicatorStyle === 'tabs' ? this.renderTabs() : this.renderDots()) : nothing}\n    `;\n  }\n}\n"],"mappings":"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AAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA2Df,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA6CjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsDjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgEjB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAiDnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,YAAY,CAAC;AAAA,GA5RxC,SA6RX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhSf,SAiSX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,cAAc,CAAC;AAAA,GAnS1C,SAoSX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,CAAC;AAAA,GAtS9C,SAuSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,kBAAkB,CAAC;AAAA,GA1S5D,SA2SX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9S9B,SA+SX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlTnB,SAmTX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GArTI,SAqTM;AACA;AAAA,EAAhB,MAAM;AAAA,GAtTI,SAsTM;AACA;AAAA,EAAhB,MAAM;AAAA,GAvTI,SAuTM;AAEA;AAAA,EAAhB,MAAM;AAAA,GAzTI,SAyTM;AAzTN,WAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}