@sankhyatronics/sankhya-cms 0.1.1 → 0.1.2

package/dist/chunk-5DNVCMOO.js

@@ -0,0 +1,509 @@
+import {
+  chevronIcon
+} from "./chunk-3TCP25JG.js";
+import {
+  invertedSectionTextStyles,
+  reducedMotionStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-3VE6VFJ4.js";
+import {
+  buttonResetStyles,
+  cardShellStyles,
+  controlBaseStyles,
+  rootFontFamilyStyles
+} from "./chunk-RHAOQ6K4.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/testimonials/Testimonials.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "iconify-icon";
+var Testimonials = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.inverted = false;
+    this.layout = "grid";
+    this.linkLabel = "See full story";
+    this.actionLabel = "";
+    this.actionHref = "";
+    this.atStart = true;
+    this.atEnd = false;
+    this.syncArrows = () => {
+      const track = this.track;
+      if (!track) return;
+      this.atStart = track.scrollLeft <= 1;
+      this.atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 1;
+    };
+  }
+  get track() {
+    return this.renderRoot.querySelector(".track");
+  }
+  updated(changed) {
+    if (changed.has("layout") || changed.has("items")) {
+      this.resizeObserver?.disconnect();
+      const track = this.track;
+      if (track) {
+        this.resizeObserver = new ResizeObserver(this.syncArrows);
+        this.resizeObserver.observe(track);
+      }
+      this.syncArrows();
+    }
+  }
+  disconnectedCallback() {
+    this.resizeObserver?.disconnect();
+    super.disconnectedCallback();
+  }
+  scrollByCard(direction) {
+    const track = this.track;
+    const card = track?.querySelector(".card");
+    if (!track || !card) return;
+    const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
+    track.scrollBy({ left: direction * (card.offsetWidth + gap) });
+  }
+  onLinkClick(event, href) {
+    const link = new CustomEvent("testimonials-link", {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    });
+    this.dispatchEvent(link);
+    if (link.defaultPrevented) event.preventDefault();
+  }
+  renderLink(label, href, className, part) {
+    return html`<a class="link ${className}" part=${part} href=${href} @click=${(event) => this.onLinkClick(event, href)}>
+      ${label} ${chevronIcon("right", 14)}
+    </a>`;
+  }
+  renderItem(item) {
+    const story = !!(item.headline || item.logoSrc);
+    const rating = item.rating ?? (item.quote && !story ? 5 : 0);
+    const metrics = item.metrics ?? [];
+    return html`
+      <article class="card" part="card">
+        ${item.mediaSrc ? html`<div class="media" part="media"><img src=${item.mediaSrc} alt="" loading="lazy" /></div>` : nothing}
+        <div class="body" part="body">
+          ${item.logoSrc ? html`<img class="logo" part="logo" src=${item.logoSrc} alt=${item.company || item.name || ""} />` : nothing}
+          ${item.headline ? html`<h3 class="headline" part="headline">${item.headline}</h3>` : nothing}
+          ${rating > 0 ? html`<div class="stars" part="stars" role="img" aria-label="${rating} / 5">
+                ${Array.from({ length: rating }, () => html`<iconify-icon icon="mdi:star"></iconify-icon>`)}
+              </div>` : nothing}
+          ${item.quote ? html`<blockquote class="quote" part="quote">"${item.quote}"</blockquote>` : nothing}
+          ${metrics.length ? html`<dl class="metrics" part="metrics">
+                ${metrics.map((metric) => html`<div class="metric"><dt>${metric.label}</dt><dd>${metric.value}</dd></div>`)}
+              </dl>` : nothing}
+          ${item.name ? html`<div class="author" part="author">
+                ${item.imageSrc ? html`<img class="avatar" part="avatar" src=${item.imageSrc} alt=${item.name} />` : html`<div class="avatar avatar-placeholder" part="avatar">${item.name.charAt(0)}</div>`}
+                <span class="author-info">
+                  <span class="name" part="name">${item.name}</span>
+                  ${item.role || item.company ? html`<span class="role" part="role">${[item.role, item.company].filter(Boolean).join(" at ")}</span>` : nothing}
+                </span>
+              </div>` : nothing}
+          ${item.href ? this.renderLink(item.linkLabel || this.linkLabel, item.href, "", "link") : nothing}
+        </div>
+      </article>
+    `;
+  }
+  render() {
+    const carousel = this.layout === "carousel";
+    const sectionLink = this.actionLabel && this.actionHref;
+    return html`
+      <div class="container" part="container">
+        <div class="header" part="header">
+          <div>
+            <h2 class="title" part="title">${this.title}</h2>
+            ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+          </div>
+          ${carousel ? html`<div class="controls" part="controls">
+                ${sectionLink ? this.renderLink(this.actionLabel, this.actionHref, "section-link", "action") : nothing}
+                <button class="arrow" part="arrow prev" type="button" aria-label="Previous" ?disabled=${this.atStart} @click=${() => this.scrollByCard(-1)}>
+                  ${chevronIcon("left", 16)}
+                </button>
+                <button class="arrow" part="arrow next" type="button" aria-label="Next" ?disabled=${this.atEnd} @click=${() => this.scrollByCard(1)}>
+                  ${chevronIcon("right", 16)}
+                </button>
+              </div>` : nothing}
+        </div>
+        ${carousel ? html`<div class="track" part="track" role="region" aria-label=${this.title || "Stories"} tabindex="0" @scroll=${this.syncArrows}>
+              ${this.items.map((item) => this.renderItem(item))}
+            </div>` : html`<div class="grid" part="grid">${this.items.map((item) => this.renderItem(item))}</div>`}
+        ${sectionLink ? html`<div class="section-footer">${this.renderLink(this.actionLabel, this.actionHref, carousel ? "footer-link" : "", "action")}</div>` : nothing}
+      </div>
+    `;
+  }
+};
+Testimonials.styles = css`
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      padding: var(--st-space-48) var(--st-space-24);
+      background-color: var(--st-color-subtle);
+      ${rootFontFamilyStyles}
+    }
+
+    :host([inverted]) {
+      background-color: var(--st-color-text-strong);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      margin-bottom: var(--st-space-16);
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      margin: 0 auto;
+    }
+
+    ${invertedSectionTextStyles}
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: var(--st-space-32);
+    }
+
+    .card {
+      ${cardShellStyles}
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+      overflow: hidden;
+      box-shadow: 0 1px 3px var(--st-shadow-color-sm);
+    }
+
+    .media {
+      aspect-ratio: 16 / 9;
+      background: var(--st-color-divider);
+    }
+
+    .media img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.4s ease;
+    }
+
+    .card:hover .media img {
+      transform: scale(1.03);
+    }
+
+    .body {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-24);
+      padding: var(--st-space-24);
+    }
+
+    .logo {
+      display: block;
+      height: 32px;
+      width: auto;
+      max-width: 60%;
+      object-fit: contain;
+      object-position: left center;
+    }
+
+    .headline {
+      margin: 0;
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.35;
+      color: var(--st-color-text-strong);
+    }
+
+    .stars {
+      display: flex;
+      gap: var(--st-space-4);
+      color: var(--st-favorite-accent);
+      font-size: var(--st-size-20);
+    }
+
+    .quote {
+      font-size: var(--st-text-md);
+      line-height: 1.6;
+      color: var(--st-color-text);
+      font-style: italic;
+      margin: 0;
+    }
+
+    .metrics {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--st-space-16) var(--st-space-32);
+      margin: 0;
+      padding-top: var(--st-space-16);
+      border-top: 1px solid var(--st-color-border);
+    }
+
+    .metric {
+      display: flex;
+      flex-direction: column-reverse;
+      min-width: 6rem;
+    }
+
+    .metric dt {
+      font-size: var(--st-text-sm);
+      color: var(--st-color-text-muted);
+      line-height: 1.4;
+    }
+
+    .metric dd {
+      margin: 0;
+      font-size: var(--st-cms-text-4xl);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: -0.02em;
+      line-height: 1.1;
+      color: var(--st-color-text-strong);
+    }
+
+    .author {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-12);
+      margin-top: auto;
+    }
+
+    .avatar {
+      width: var(--st-space-48);
+      height: var(--st-space-48);
+      border-radius: var(--st-radius-circle);
+      object-fit: cover;
+      background-color: var(--st-color-divider);
+      flex-shrink: 0;
+    }
+
+    .avatar-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--st-color-text-muted);
+      font-weight: var(--st-font-weight-semibold);
+      font-size: var(--st-text-xl);
+    }
+
+    .author-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .name {
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+      font-size: var(--st-text-xl);
+    }
+
+    .role {
+      font-size: var(--st-text-sm);
+      color: var(--st-color-text-faint);
+    }
+
+    .link {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--st-space-8);
+      margin-top: auto;
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+      text-decoration: none;
+    }
+
+    .author + .link {
+      margin-top: 0;
+    }
+
+    .link:hover {
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+
+    .link svg {
+      transition: transform 0.2s ease;
+    }
+
+    .link:hover svg {
+      transform: translateX(3px);
+    }
+
+    /* ---- layout="carousel" ---- */
+
+    :host([layout='carousel']) .header {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: var(--st-space-24);
+      text-align: left;
+      margin-bottom: var(--st-space-32);
+    }
+
+    :host([layout='carousel']) .subtitle {
+      margin: 0;
+    }
+
+    .controls {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-12);
+      flex: none;
+    }
+
+    .section-link {
+      margin-right: var(--st-space-12);
+    }
+
+    :host([inverted]) .section-link {
+      color: var(--st-color-on-solid);
+    }
+
+    .arrow {
+      ${buttonResetStyles}
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-size-40);
+      height: var(--st-size-40);
+      border-radius: var(--st-radius-circle);
+      border: 1px solid var(--st-color-border-strong);
+      color: var(--st-color-text-strong);
+      background: var(--st-color-surface);
+      transition:
+        background 0.2s ease,
+        opacity 0.2s ease;
+    }
+
+    .arrow:hover:not(:disabled) {
+      background: var(--st-color-hover);
+    }
+
+    .arrow:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    .track {
+      display: flex;
+      gap: var(--st-space-24);
+      overflow-x: auto;
+      scroll-snap-type: x mandatory;
+      scroll-behavior: smooth;
+      scrollbar-width: none;
+      /* Room for the cards' shadow and focus rings. */
+      padding: var(--st-space-4) var(--st-space-4) var(--st-space-12);
+      margin: calc(-1 * var(--st-space-4));
+    }
+
+    .track::-webkit-scrollbar {
+      display: none;
+    }
+
+    .track > .card {
+      flex: 0 0 min(380px, 85%);
+      scroll-snap-align: start;
+    }
+
+    /* The section link sits under the grid; in the carousel it is next to the arrows instead, and
+       only drops below the row on a narrow screen. */
+    .section-footer {
+      margin-top: var(--st-space-32);
+      text-align: center;
+    }
+
+    :host([inverted]) .section-footer .link {
+      color: var(--st-color-on-solid);
+    }
+
+    :host([layout='carousel']) .section-footer {
+      margin-top: 0;
+      text-align: left;
+    }
+
+    .footer-link {
+      display: none;
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-space-40) var(--st-space-20);
+      }
+      .grid {
+        grid-template-columns: 1fr;
+      }
+      :host([layout='carousel']) .header {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .section-link {
+        display: none;
+      }
+      .footer-link {
+        display: inline-flex;
+        margin-top: var(--st-space-24);
+      }
+    }
+
+    ${reducedMotionStyles}
+    @media (prefers-reduced-motion: reduce) {
+      .track {
+        scroll-behavior: auto;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Testimonials.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Testimonials.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], Testimonials.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Testimonials.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Testimonials.prototype, "layout", 2);
+__decorateClass([
+  property({ type: String, attribute: "link-label" })
+], Testimonials.prototype, "linkLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], Testimonials.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-href" })
+], Testimonials.prototype, "actionHref", 2);
+__decorateClass([
+  state()
+], Testimonials.prototype, "atStart", 2);
+__decorateClass([
+  state()
+], Testimonials.prototype, "atEnd", 2);
+Testimonials = __decorateClass([
+  customElement("st-testimonials")
+], Testimonials);
+
+export {
+  Testimonials
+};
+//# sourceMappingURL=chunk-5DNVCMOO.js.map

package/dist/chunk-5DNVCMOO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testimonials/Testimonials.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { chevronIcon } from '../shared/icons';\nimport { buttonResetStyles, cardShellStyles, controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionSubtitleStyles, sectionTitleStyles, invertedSectionTextStyles, sectionHeaderStyles, reducedMotionStyles } from '../shared/section-styles';\nimport type { TestimonialsLinkEventDetail } from './TestimonialsEvents';\n\nexport interface TestimonialMetric {\n  /** The figure, e.g. `100M` or `85%`. */\n  value: string;\n  label: string;\n}\n\nexport interface TestimonialItem {\n  id?: string;\n  name?: string;\n  role?: string;\n  company?: string;\n  /** Author photo. */\n  imageSrc?: string;\n  quote?: string;\n  /** Number of stars. Default: 5 for a plain quote card; no stars on a story card (one with a `headline` or `logoSrc`). `0` hides them. */\n  rating?: number;\n  /** Customer logo, shown at the top of the card body. */\n  logoSrc?: string;\n  /** Wide image across the top of the card. */\n  mediaSrc?: string;\n  /** Story headline, e.g. \"Acme gives 100 million users a seamless sign-in\". */\n  headline?: string;\n  /** Key results, shown as large figures. */\n  metrics?: TestimonialMetric[];\n  /** Link to the full story. */\n  href?: string;\n  /** Text of the story link; defaults to the section's `link-label`. */\n  linkLabel?: string;\n}\n\n/**\n * Section heading plus customer quotes or stories. Port of React `Testimonials`.\n *\n * Each card shows whatever its item has: a cover image, the customer logo, a story headline, a\n * quote with star rating, result metrics, the author and a \"See full story\" link. `layout=\"grid\"`\n * (default) lays the cards out in a grid; `layout=\"carousel\"` puts them on one horizontally\n * scrolling, snapping row with previous/next buttons next to the heading — the customer-story\n * carousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link\n * (e.g. \"Explore customer stories\").\n *\n * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.\n */\n@customElement('st-testimonials')\nexport class Testimonials extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      box-sizing: border-box;\n      padding: var(--st-space-48) var(--st-space-24);\n      background-color: var(--st-color-subtle);\n      ${rootFontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin-bottom: var(--st-space-16);\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      margin: 0 auto;\n    }\n\n    ${invertedSectionTextStyles}\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: var(--st-space-32);\n    }\n\n    .card {\n      ${cardShellStyles}\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      box-shadow: 0 1px 3px var(--st-shadow-color-sm);\n    }\n\n    .media {\n      aspect-ratio: 16 / 9;\n      background: var(--st-color-divider);\n    }\n\n    .media img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.4s ease;\n    }\n\n    .card:hover .media img {\n      transform: scale(1.03);\n    }\n\n    .body {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-24);\n      padding: var(--st-space-24);\n    }\n\n    .logo {\n      display: block;\n      height: 32px;\n      width: auto;\n      max-width: 60%;\n      object-fit: contain;\n      object-position: left center;\n    }\n\n    .headline {\n      margin: 0;\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.35;\n      color: var(--st-color-text-strong);\n    }\n\n    .stars {\n      display: flex;\n      gap: var(--st-space-4);\n      color: var(--st-favorite-accent);\n      font-size: var(--st-size-20);\n    }\n\n    .quote {\n      font-size: var(--st-text-md);\n      line-height: 1.6;\n      color: var(--st-color-text);\n      font-style: italic;\n      margin: 0;\n    }\n\n    .metrics {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--st-space-16) var(--st-space-32);\n      margin: 0;\n      padding-top: var(--st-space-16);\n      border-top: 1px solid var(--st-color-border);\n    }\n\n    .metric {\n      display: flex;\n      flex-direction: column-reverse;\n      min-width: 6rem;\n    }\n\n    .metric dt {\n      font-size: var(--st-text-sm);\n      color: var(--st-color-text-muted);\n      line-height: 1.4;\n    }\n\n    .metric dd {\n      margin: 0;\n      font-size: var(--st-cms-text-4xl);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: -0.02em;\n      line-height: 1.1;\n      color: var(--st-color-text-strong);\n    }\n\n    .author {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-12);\n      margin-top: auto;\n    }\n\n    .avatar {\n      width: var(--st-space-48);\n      height: var(--st-space-48);\n      border-radius: var(--st-radius-circle);\n      object-fit: cover;\n      background-color: var(--st-color-divider);\n      flex-shrink: 0;\n    }\n\n    .avatar-placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: var(--st-color-text-muted);\n      font-weight: var(--st-font-weight-semibold);\n      font-size: var(--st-text-xl);\n    }\n\n    .author-info {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .name {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n      font-size: var(--st-text-xl);\n    }\n\n    .role {\n      font-size: var(--st-text-sm);\n      color: var(--st-color-text-faint);\n    }\n\n    .link {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-8);\n      margin-top: auto;\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n      text-decoration: none;\n    }\n\n    .author + .link {\n      margin-top: 0;\n    }\n\n    .link:hover {\n      text-decoration: underline;\n      text-underline-offset: 3px;\n    }\n\n    .link svg {\n      transition: transform 0.2s ease;\n    }\n\n    .link:hover svg {\n      transform: translateX(3px);\n    }\n\n    /* ---- layout=\"carousel\" ---- */\n\n    :host([layout='carousel']) .header {\n      display: flex;\n      align-items: flex-end;\n      justify-content: space-between;\n      gap: var(--st-space-24);\n      text-align: left;\n      margin-bottom: var(--st-space-32);\n    }\n\n    :host([layout='carousel']) .subtitle {\n      margin: 0;\n    }\n\n    .controls {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-12);\n      flex: none;\n    }\n\n    .section-link {\n      margin-right: var(--st-space-12);\n    }\n\n    :host([inverted]) .section-link {\n      color: var(--st-color-on-solid);\n    }\n\n    .arrow {\n      ${buttonResetStyles}\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--st-size-40);\n      height: var(--st-size-40);\n      border-radius: var(--st-radius-circle);\n      border: 1px solid var(--st-color-border-strong);\n      color: var(--st-color-text-strong);\n      background: var(--st-color-surface);\n      transition:\n        background 0.2s ease,\n        opacity 0.2s ease;\n    }\n\n    .arrow:hover:not(:disabled) {\n      background: var(--st-color-hover);\n    }\n\n    .arrow:disabled {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    .track {\n      display: flex;\n      gap: var(--st-space-24);\n      overflow-x: auto;\n      scroll-snap-type: x mandatory;\n      scroll-behavior: smooth;\n      scrollbar-width: none;\n      /* Room for the cards' shadow and focus rings. */\n      padding: var(--st-space-4) var(--st-space-4) var(--st-space-12);\n      margin: calc(-1 * var(--st-space-4));\n    }\n\n    .track::-webkit-scrollbar {\n      display: none;\n    }\n\n    .track > .card {\n      flex: 0 0 min(380px, 85%);\n      scroll-snap-align: start;\n    }\n\n    /* The section link sits under the grid; in the carousel it is next to the arrows instead, and\n       only drops below the row on a narrow screen. */\n    .section-footer {\n      margin-top: var(--st-space-32);\n      text-align: center;\n    }\n\n    :host([inverted]) .section-footer .link {\n      color: var(--st-color-on-solid);\n    }\n\n    :host([layout='carousel']) .section-footer {\n      margin-top: 0;\n      text-align: left;\n    }\n\n    .footer-link {\n      display: none;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-space-40) var(--st-space-20);\n      }\n      .grid {\n        grid-template-columns: 1fr;\n      }\n      :host([layout='carousel']) .header {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n      .section-link {\n        display: none;\n      }\n      .footer-link {\n        display: inline-flex;\n        margin-top: var(--st-space-24);\n      }\n    }\n\n    ${reducedMotionStyles}\n    @media (prefers-reduced-motion: reduce) {\n      .track {\n        scroll-behavior: auto;\n      }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: TestimonialItem[] = [];\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `grid` (default) or `carousel`: one scrolling row with previous/next buttons. */\n  @property({ type: String, reflect: true })\n  layout: 'grid' | 'carousel' = 'grid';\n\n  /** Default text of each card's story link. */\n  @property({ type: String, attribute: 'link-label' })\n  linkLabel = 'See full story';\n\n  /** Section-level link text, e.g. \"Explore customer stories\". */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String, attribute: 'action-href' })\n  actionHref = '';\n\n  @state() private atStart = true;\n  @state() private atEnd = false;\n\n  private get track(): HTMLElement | null {\n    return this.renderRoot.querySelector('.track');\n  }\n\n  private resizeObserver?: ResizeObserver;\n\n  protected updated(changed: Map<string, unknown>): void {\n    if (changed.has('layout') || changed.has('items')) {\n      this.resizeObserver?.disconnect();\n      const track = this.track;\n      if (track) {\n        this.resizeObserver = new ResizeObserver(this.syncArrows);\n        this.resizeObserver.observe(track);\n      }\n      this.syncArrows();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\n    super.disconnectedCallback();\n  }\n\n  private syncArrows = (): void => {\n    const track = this.track;\n    if (!track) return;\n    this.atStart = track.scrollLeft <= 1;\n    this.atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 1;\n  };\n\n  private scrollByCard(direction: 1 | -1): void {\n    const track = this.track;\n    const card = track?.querySelector<HTMLElement>('.card');\n    if (!track || !card) return;\n    const gap = parseFloat(getComputedStyle(track).columnGap) || 0;\n    track.scrollBy({ left: direction * (card.offsetWidth + gap) });\n  }\n\n  private onLinkClick(event: MouseEvent, href: string): void {\n    const link = new CustomEvent<TestimonialsLinkEventDetail>('testimonials-link', {\n      detail: { href },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(link);\n    if (link.defaultPrevented) event.preventDefault();\n  }\n\n  private renderLink(label: string, href: string, className: string, part: string) {\n    return html`<a class=\"link ${className}\" part=${part} href=${href} @click=${(event: MouseEvent) => this.onLinkClick(event, href)}>\n      ${label} ${chevronIcon('right', 14)}\n    </a>`;\n  }\n\n  private renderItem(item: TestimonialItem) {\n    const story = !!(item.headline || item.logoSrc);\n    const rating = item.rating ?? (item.quote && !story ? 5 : 0);\n    const metrics = item.metrics ?? [];\n    return html`\n      <article class=\"card\" part=\"card\">\n        ${item.mediaSrc ? html`<div class=\"media\" part=\"media\"><img src=${item.mediaSrc} alt=\"\" loading=\"lazy\" /></div>` : nothing}\n        <div class=\"body\" part=\"body\">\n          ${item.logoSrc ? html`<img class=\"logo\" part=\"logo\" src=${item.logoSrc} alt=${item.company || item.name || ''} />` : nothing}\n          ${item.headline ? html`<h3 class=\"headline\" part=\"headline\">${item.headline}</h3>` : nothing}\n          ${rating > 0\n            ? html`<div class=\"stars\" part=\"stars\" role=\"img\" aria-label=\"${rating} / 5\">\n                ${Array.from({ length: rating }, () => html`<iconify-icon icon=\"mdi:star\"></iconify-icon>`)}\n              </div>`\n            : nothing}\n          ${item.quote ? html`<blockquote class=\"quote\" part=\"quote\">\"${item.quote}\"</blockquote>` : nothing}\n          ${metrics.length\n            ? html`<dl class=\"metrics\" part=\"metrics\">\n                ${metrics.map(metric => html`<div class=\"metric\"><dt>${metric.label}</dt><dd>${metric.value}</dd></div>`)}\n              </dl>`\n            : nothing}\n          ${item.name\n            ? html`<div class=\"author\" part=\"author\">\n                ${item.imageSrc\n                  ? html`<img class=\"avatar\" part=\"avatar\" src=${item.imageSrc} alt=${item.name} />`\n                  : html`<div class=\"avatar avatar-placeholder\" part=\"avatar\">${item.name.charAt(0)}</div>`}\n                <span class=\"author-info\">\n                  <span class=\"name\" part=\"name\">${item.name}</span>\n                  ${item.role || item.company\n                    ? html`<span class=\"role\" part=\"role\">${[item.role, item.company].filter(Boolean).join(' at ')}</span>`\n                    : nothing}\n                </span>\n              </div>`\n            : nothing}\n          ${item.href ? this.renderLink(item.linkLabel || this.linkLabel, item.href, '', 'link') : nothing}\n        </div>\n      </article>\n    `;\n  }\n\n  render() {\n    const carousel = this.layout === 'carousel';\n    const sectionLink = this.actionLabel && this.actionHref;\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"header\" part=\"header\">\n          <div>\n            <h2 class=\"title\" part=\"title\">${this.title}</h2>\n            ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n          </div>\n          ${carousel\n            ? html`<div class=\"controls\" part=\"controls\">\n                ${sectionLink ? this.renderLink(this.actionLabel, this.actionHref, 'section-link', 'action') : nothing}\n                <button class=\"arrow\" part=\"arrow prev\" type=\"button\" aria-label=\"Previous\" ?disabled=${this.atStart} @click=${() => this.scrollByCard(-1)}>\n                  ${chevronIcon('left', 16)}\n                </button>\n                <button class=\"arrow\" part=\"arrow next\" type=\"button\" aria-label=\"Next\" ?disabled=${this.atEnd} @click=${() => this.scrollByCard(1)}>\n                  ${chevronIcon('right', 16)}\n                </button>\n              </div>`\n            : nothing}\n        </div>\n        ${carousel\n          ? html`<div class=\"track\" part=\"track\" role=\"region\" aria-label=${this.title || 'Stories'} tabindex=\"0\" @scroll=${this.syncArrows}>\n              ${this.items.map(item => this.renderItem(item))}\n            </div>`\n          : html`<div class=\"grid\" part=\"grid\">${this.items.map(item => this.renderItem(item))}</div>`}\n        ${sectionLink\n          ? html`<div class=\"section-footer\">${this.renderLink(this.actionLabel, this.actionHref, carousel ? 'footer-link' : '', 'action')}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,UAAU,aAAa;AAC/C,OAAO;AAkDA,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AA6UL,iBAAQ;AAGR,oBAAW;AAGX,iBAA2B,CAAC;AAG5B,oBAAW;AAIX,kBAA8B;AAI9B,qBAAY;AAIZ,uBAAc;AAGd,sBAAa;AAEJ,SAAQ,UAAU;AAClB,SAAQ,QAAQ;AAyBzB,SAAQ,aAAa,MAAY;AAC/B,YAAM,QAAQ,KAAK;AACnB,UAAI,CAAC,MAAO;AACZ,WAAK,UAAU,MAAM,cAAc;AACnC,WAAK,QAAQ,MAAM,aAAa,MAAM,eAAe,MAAM,cAAc;AAAA,IAC3E;AAAA;AAAA,EA5BA,IAAY,QAA4B;AACtC,WAAO,KAAK,WAAW,cAAc,QAAQ;AAAA,EAC/C;AAAA,EAIU,QAAQ,SAAqC;AACrD,QAAI,QAAQ,IAAI,QAAQ,KAAK,QAAQ,IAAI,OAAO,GAAG;AACjD,WAAK,gBAAgB,WAAW;AAChC,YAAM,QAAQ,KAAK;AACnB,UAAI,OAAO;AACT,aAAK,iBAAiB,IAAI,eAAe,KAAK,UAAU;AACxD,aAAK,eAAe,QAAQ,KAAK;AAAA,MACnC;AACA,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,uBAA6B;AAC3B,SAAK,gBAAgB,WAAW;AAChC,UAAM,qBAAqB;AAAA,EAC7B;AAAA,EASQ,aAAa,WAAyB;AAC5C,UAAM,QAAQ,KAAK;AACnB,UAAM,OAAO,OAAO,cAA2B,OAAO;AACtD,QAAI,CAAC,SAAS,CAAC,KAAM;AACrB,UAAM,MAAM,WAAW,iBAAiB,KAAK,EAAE,SAAS,KAAK;AAC7D,UAAM,SAAS,EAAE,MAAM,aAAa,KAAK,cAAc,KAAK,CAAC;AAAA,EAC/D;AAAA,EAEQ,YAAY,OAAmB,MAAoB;AACzD,UAAM,OAAO,IAAI,YAAyC,qBAAqB;AAAA,MAC7E,QAAQ,EAAE,KAAK;AAAA,MACf,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AACD,SAAK,cAAc,IAAI;AACvB,QAAI,KAAK,iBAAkB,OAAM,eAAe;AAAA,EAClD;AAAA,EAEQ,WAAW,OAAe,MAAc,WAAmB,MAAc;AAC/E,WAAO,sBAAsB,SAAS,UAAU,IAAI,SAAS,IAAI,WAAW,CAAC,UAAsB,KAAK,YAAY,OAAO,IAAI,CAAC;AAAA,QAC5H,KAAK,IAAI,YAAY,SAAS,EAAE,CAAC;AAAA;AAAA,EAEvC;AAAA,EAEQ,WAAW,MAAuB;AACxC,UAAM,QAAQ,CAAC,EAAE,KAAK,YAAY,KAAK;AACvC,UAAM,SAAS,KAAK,WAAW,KAAK,SAAS,CAAC,QAAQ,IAAI;AAC1D,UAAM,UAAU,KAAK,WAAW,CAAC;AACjC,WAAO;AAAA;AAAA,UAED,KAAK,WAAW,gDAAgD,KAAK,QAAQ,oCAAoC,OAAO;AAAA;AAAA,YAEtH,KAAK,UAAU,yCAAyC,KAAK,OAAO,QAAQ,KAAK,WAAW,KAAK,QAAQ,EAAE,QAAQ,OAAO;AAAA,YAC1H,KAAK,WAAW,4CAA4C,KAAK,QAAQ,UAAU,OAAO;AAAA,YAC1F,SAAS,IACP,8DAA8D,MAAM;AAAA,kBAChE,MAAM,KAAK,EAAE,QAAQ,OAAO,GAAG,MAAM,mDAAmD,CAAC;AAAA,wBAE7F,OAAO;AAAA,YACT,KAAK,QAAQ,+CAA+C,KAAK,KAAK,mBAAmB,OAAO;AAAA,YAChG,QAAQ,SACN;AAAA,kBACI,QAAQ,IAAI,YAAU,+BAA+B,OAAO,KAAK,YAAY,OAAO,KAAK,aAAa,CAAC;AAAA,uBAE3G,OAAO;AAAA,YACT,KAAK,OACH;AAAA,kBACI,KAAK,WACH,6CAA6C,KAAK,QAAQ,QAAQ,KAAK,IAAI,QAC3E,4DAA4D,KAAK,KAAK,OAAO,CAAC,CAAC,QAAQ;AAAA;AAAA,mDAExD,KAAK,IAAI;AAAA,oBACxC,KAAK,QAAQ,KAAK,UAChB,sCAAsC,CAAC,KAAK,MAAM,KAAK,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,MAAM,CAAC,YAC5F,OAAO;AAAA;AAAA,wBAGf,OAAO;AAAA,YACT,KAAK,OAAO,KAAK,WAAW,KAAK,aAAa,KAAK,WAAW,KAAK,MAAM,IAAI,MAAM,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA,EAIxG;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,WAAW;AACjC,UAAM,cAAc,KAAK,eAAe,KAAK;AAC7C,WAAO;AAAA;AAAA;AAAA;AAAA,6CAIkC,KAAK,KAAK;AAAA,cACzC,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA;AAAA,YAE1F,WACE;AAAA,kBACI,cAAc,KAAK,WAAW,KAAK,aAAa,KAAK,YAAY,gBAAgB,QAAQ,IAAI,OAAO;AAAA,wGACd,KAAK,OAAO,WAAW,MAAM,KAAK,aAAa,EAAE,CAAC;AAAA,oBACtI,YAAY,QAAQ,EAAE,CAAC;AAAA;AAAA,oGAEyD,KAAK,KAAK,WAAW,MAAM,KAAK,aAAa,CAAC,CAAC;AAAA,oBAC/H,YAAY,SAAS,EAAE,CAAC;AAAA;AAAA,wBAG9B,OAAO;AAAA;AAAA,UAEX,WACE,gEAAgE,KAAK,SAAS,SAAS,yBAAyB,KAAK,UAAU;AAAA,gBAC3H,KAAK,MAAM,IAAI,UAAQ,KAAK,WAAW,IAAI,CAAC,CAAC;AAAA,sBAEjD,qCAAqC,KAAK,MAAM,IAAI,UAAQ,KAAK,WAAW,IAAI,CAAC,CAAC,QAAQ;AAAA,UAC5F,cACE,mCAAmC,KAAK,WAAW,KAAK,aAAa,KAAK,YAAY,WAAW,gBAAgB,IAAI,QAAQ,CAAC,WAC9H,OAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA1ea,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAapB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlB,qBAAqB;AAAA;AAAA;AAAA;AAAA,MAIvB,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASvB,eAAe;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;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;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;AAAA;AAAA,QAkMf,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqFnB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Uf,aA6UX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Uf,aAgVX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAlVnB,aAmVX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArV/B,aAsVX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAzV9B,aA0VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA7VxC,aA8VX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAjW1C,aAkWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GApWzC,aAqWX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAvWI,aAuWM;AACA;AAAA,EAAhB,MAAM;AAAA,GAxWI,aAwWM;AAxWN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/{chunk-RMIJVTFS.js → chunk-FWIG6GEZ.js}

@@ -215,7 +215,8 @@ Dropdown.styles = css`
       text-align: center;
       width: fit-content;
       border-radius: var(--st-radius-sm);
-      color: var(--st-color-text);
+      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */
+      color: var(--st-nav-color, var(--st-color-text));
       font-size: 0.875rem;
       text-decoration: none;
       white-space: nowrap;
@@ -224,8 +225,8 @@ Dropdown.styles = css`
 
     .menu-title:hover,
     .menu-title[aria-expanded='true'] {
-      background: var(--st-color-hover);
-      color: var(--st-color-text-strong);
+      background: var(--st-nav-hover-bg, var(--st-color-hover));
+      color: var(--st-nav-color, var(--st-color-text-strong));
     }
 
     :host([active]) .menu-title {
@@ -269,6 +270,9 @@ Dropdown.styles = css`
       padding: 16px;
       background: var(--st-color-surface);
       color: var(--st-color-text);
+      /* The panel has its own surface: items in it never take the bar's nav colours. */
+      --st-nav-color: initial;
+      --st-nav-hover-bg: initial;
       border: 1px solid var(--st-color-border);
       border-radius: var(--st-radius-sm);
       box-shadow: 0 4px 16px var(--st-shadow-color-sm);
@@ -394,4 +398,4 @@ Dropdown = __decorateClass([
 export {
   Dropdown
 };
-//# sourceMappingURL=chunk-RMIJVTFS.js.map
+//# sourceMappingURL=chunk-FWIG6GEZ.js.map

package/dist/chunk-FWIG6GEZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\r\nimport { customElement, property, state } from 'lit/decorators.js';\r\n\r\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\r\nimport type { DropdownToggleEventDetail } from './DropdownEvents';\r\n\r\n/**\r\n * A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\n * action menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\n * React `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n * (`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n *\r\n * - only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n *   provider element is needed);\r\n * - a mousedown outside, Escape, or a click inside the panel closes it;\r\n * - an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n * - `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n *\r\n * Colors and the panel's surface come from the suite theme (the source left those to the\r\n * consumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\n * because they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\n * at <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\n * instead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\n * kept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event.\r\n */\r\n@customElement('st-dropdown')\r\nexport class Dropdown extends LitElement {\r\n  /** The open dropdown, if any — the source's `DropdownContext.activeDropdown`. */\r\n  private static openDropdown: Dropdown | null = null;\r\n\r\n  static styles = css`\r\n    ${controlBaseStyles}\r\n\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      ${fontFamilyStyles}\r\n    }\r\n\r\n    .menu-title {\r\n      ${buttonResetStyles}\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: 40px;\r\n      padding: 12px;\r\n      gap: 8px;\r\n      text-align: center;\r\n      width: fit-content;\r\n      border-radius: var(--st-radius-sm);\r\n      /* --st-nav-*: set by a host bar (st-header's transparent state) to recolour its nav items. */\r\n      color: var(--st-nav-color, var(--st-color-text));\r\n      font-size: 0.875rem;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n      transition: background-color 0.3s ease;\r\n    }\r\n\r\n    .menu-title:hover,\r\n    .menu-title[aria-expanded='true'] {\r\n      background: var(--st-nav-hover-bg, var(--st-color-hover));\r\n      color: var(--st-nav-color, var(--st-color-text-strong));\r\n    }\r\n\r\n    :host([active]) .menu-title {\r\n      background: var(--st-color-accent-subtle);\r\n      color: var(--st-color-accent-text);\r\n    }\r\n\r\n    :host([disabled]) .menu-title {\r\n      color: var(--st-color-text-muted);\r\n      cursor: not-allowed;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .icon {\r\n      display: inline-flex;\r\n      flex: none;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .icon[hidden] {\r\n      display: none;\r\n    }\r\n\r\n    .arrow {\r\n      display: inline-block;\r\n      margin-left: 8px;\r\n      font-size: 0.75rem;\r\n      transition: transform 0.3s ease;\r\n    }\r\n\r\n    .menu-title[aria-expanded='true'] .arrow {\r\n      transform: rotate(180deg);\r\n    }\r\n\r\n    .menu-dropdown {\r\n      position: absolute;\r\n      top: 100%;\r\n      left: 0;\r\n      z-index: 100;\r\n      padding: 16px;\r\n      background: var(--st-color-surface);\r\n      color: var(--st-color-text);\r\n      /* The panel has its own surface: items in it never take the bar's nav colours. */\r\n      --st-nav-color: initial;\r\n      --st-nav-hover-bg: initial;\r\n      border: 1px solid var(--st-color-border);\r\n      border-radius: var(--st-radius-sm);\r\n      box-shadow: 0 4px 16px var(--st-shadow-color-sm);\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      transform: translateY(-10px);\r\n      /* visibility flips at once on open (so keyboard focus can move into the panel on the same\r\n         frame) and only after the 0.3s fade on close. */\r\n      transition:\r\n        opacity 0.3s ease,\r\n        transform 0.3s ease,\r\n        visibility 0s linear 0.3s;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .menu-dropdown.align-right {\r\n      left: auto;\r\n      right: 0;\r\n    }\r\n\r\n    .menu-dropdown.show {\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: translateY(0);\r\n      pointer-events: auto;\r\n      transition-delay: 0s;\r\n    }\r\n\r\n    /* Inline: the panel opens in the flow under its trigger and pushes what follows down, instead\r\n       of floating — the source's .touch-device layout. st-header turns this on for its menu while\r\n       the hamburger panel is showing. */\r\n    :host([inline]) {\r\n      display: block;\r\n    }\r\n\r\n    :host([inline]) .menu-title {\r\n      width: 100%;\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    :host([inline]) .arrow {\r\n      margin-left: auto;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown {\r\n      display: none;\r\n      position: relative;\r\n      top: auto;\r\n      left: auto;\r\n      right: auto;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      box-shadow: none;\r\n      opacity: 1;\r\n      visibility: visible;\r\n      transform: none;\r\n    }\r\n\r\n    :host([inline]) .menu-dropdown.show {\r\n      display: block;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .menu-dropdown,\r\n      .arrow {\r\n        transition: none;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\n   * attribute). Leave empty to show only `slot=\"icon\"`. */\r\n  @property({ type: String })\r\n  label = '';\r\n\r\n  /** Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\n   * the source); with none it navigates. */\r\n  @property({ type: String })\r\n  href = '';\r\n\r\n  @property({ type: String, attribute: 'icon-position' })\r\n  iconPosition: 'left' | 'right' = 'left';\r\n\r\n  /** Inline `width`/`height` of the `slot=\"icon\"` wrapper (source: `iconSize`, default `1.2rem`). */\r\n  @property({ type: String, attribute: 'icon-size' })\r\n  iconSize = '1.2rem';\r\n\r\n  /** Inline `color` of the `slot=\"icon\"` wrapper (source: `iconColor`). */\r\n  @property({ type: String, attribute: 'icon-color' })\r\n  iconColor = 'currentColor';\r\n\r\n  /** Which edge of the trigger the panel lines up with. */\r\n  @property({ type: String })\r\n  align: 'left' | 'right' = 'left';\r\n\r\n  /** `target` of an `href` trigger (source default `_self`). */\r\n  @property({ type: String })\r\n  target = '_self';\r\n\r\n  /** Extra class(es) on the trigger (source: `className`; a `class` on `st-dropdown` styles the host). */\r\n  @property({ type: String, attribute: 'trigger-class-name' })\r\n  triggerClassName = '';\r\n\r\n  /** Extra class(es) on the panel (source: `itemGroupClassName`). */\r\n  @property({ type: String, attribute: 'item-group-class-name' })\r\n  itemGroupClassName = '';\r\n\r\n  /** Unused, as in the source (`itemClassName` is never read there); kept for prop parity. */\r\n  @property({ type: String, attribute: 'item-class-name' })\r\n  itemClassName = '';\r\n\r\n  @property({ type: Boolean, reflect: true })\r\n  disabled = false;\r\n\r\n  /** Highlights the trigger as the current section (e.g. the current page is one of its items). */\r\n  @property({ type: Boolean, reflect: true })\r\n  active = false;\r\n\r\n  /** Opens the panel in the flow under the trigger instead of floating over the page (see the\r\n   * styles). `st-header` sets this on its own menu's dropdowns while its hamburger panel shows. */\r\n  @property({ type: Boolean, reflect: true })\r\n  inline = false;\r\n\r\n  /** Whether the panel is showing. Follows user toggles; may also be set from outside. */\r\n  @property({ type: Boolean, reflect: true })\r\n  open = false;\r\n\r\n  /** Whether the default slot has content — the source's `children` check. */\r\n  @state() private hasContent = false;\r\n\r\n  /** Whether `slot=\"icon\"` has content. */\r\n  @state() private hasIcon = false;\r\n\r\n  connectedCallback(): void {\r\n    super.connectedCallback();\r\n    document.addEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.addEventListener('keydown', this.closeOnEscape);\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    document.removeEventListener('mousedown', this.closeOnOutsideMouseDown);\r\n    window.removeEventListener('keydown', this.closeOnEscape);\r\n    if (Dropdown.openDropdown === this) Dropdown.openDropdown = null;\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  protected updated(changed: Map<string, unknown>): void {\r\n    if (!changed.has('open')) return;\r\n    if (this.open) {\r\n      const previous = Dropdown.openDropdown;\r\n      Dropdown.openDropdown = this;\r\n      if (previous && previous !== this) previous.setOpen(false);\r\n    } else if (Dropdown.openDropdown === this) {\r\n      Dropdown.openDropdown = null;\r\n    }\r\n  }\r\n\r\n  private setOpen(open: boolean): void {\r\n    if (this.open === open) return;\r\n    this.open = open;\r\n    this.dispatchEvent(new CustomEvent<DropdownToggleEventDetail>('dropdown-toggle', { detail: { open }, bubbles: true, composed: true }));\r\n  }\r\n\r\n  private closeOnOutsideMouseDown = (event: Event): void => {\r\n    if (this.open && !event.composedPath().includes(this)) this.setOpen(false);\r\n  };\r\n\r\n  private closeOnEscape = (event: KeyboardEvent): void => {\r\n    if (!this.open || event.key !== 'Escape') return;\r\n    const focusWasInside = event.composedPath().includes(this);\r\n    this.setOpen(false);\r\n    if (focusWasInside) this.trigger()?.focus();\r\n  };\r\n\r\n  private trigger(): HTMLElement | null {\r\n    return this.renderRoot.querySelector<HTMLElement>('.menu-title');\r\n  }\r\n\r\n  /** Keyboard-reachable entries in the panel, in order: menu items (they delegate focus to their\r\n   * own link) plus any plain links/buttons/tabbable elements a caller slots in. */\r\n  private panelItems(): HTMLElement[] {\r\n    const slot = this.renderRoot.querySelector<HTMLSlotElement>('.menu-dropdown slot');\r\n    if (!slot) return [];\r\n    const selector =\r\n      'st-menu-item, st-menu-grid-item, a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\r\n    const items: HTMLElement[] = [];\r\n    for (const el of slot.assignedElements({ flatten: true })) {\r\n      if (el.matches(selector)) items.push(el as HTMLElement);\r\n      items.push(...Array.from(el.querySelectorAll<HTMLElement>(selector)));\r\n    }\r\n    return items;\r\n  }\r\n\r\n  /** Moves focus into the panel once it has become visible (it is `visibility: hidden` until the\r\n   * `show` class lands, and hidden elements can't take focus). */\r\n  private focusItem(pick: (items: HTMLElement[]) => HTMLElement | undefined): void {\r\n    void this.updateComplete.then(() => pick(this.panelItems())?.focus());\r\n  }\r\n\r\n  /** Enter/Space/ArrowDown open the panel and focus its first entry; ArrowUp its last. */\r\n  private onTitleKeyDown = (event: KeyboardEvent): void => {\r\n    if (!this.hasContent || this.disabled) return;\r\n    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[0]);\r\n    } else if (event.key === 'ArrowUp') {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setOpen(true);\r\n      this.focusItem((items) => items[items.length - 1]);\r\n    }\r\n  };\r\n\r\n  /** Arrow keys/Home/End move between the panel's entries; Tab closes the panel and moves on. */\r\n  private onPanelKeyDown = (event: KeyboardEvent): void => {\r\n    if (event.key === 'Tab') {\r\n      this.setOpen(false);\r\n      return;\r\n    }\r\n    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\r\n    const items = this.panelItems();\r\n    if (items.length === 0) return;\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    const path = event.composedPath();\r\n    const current = items.findIndex((item) => path.includes(item));\r\n    const last = items.length - 1;\r\n    const next =\r\n      event.key === 'Home'\r\n        ? 0\r\n        : event.key === 'End'\r\n          ? last\r\n          : event.key === 'ArrowDown'\r\n            ? current < 0 || current === last ? 0 : current + 1\r\n            : current <= 0 ? last : current - 1;\r\n    items[next].focus();\r\n  };\r\n\r\n  private onTitleClick = (event: Event): void => {\r\n    event.stopPropagation();\r\n    if (!this.hasContent) return;\r\n    event.preventDefault();\r\n    this.setOpen(!this.open);\r\n  };\r\n\r\n  /** A click anywhere inside the panel closes it, as in the source. */\r\n  private onPanelClick = (): void => {\r\n    this.setOpen(false);\r\n  };\r\n\r\n  private onContentSlotChange = (event: Event): void => {\r\n    this.hasContent = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).some(\r\n      (node) => node.nodeType === Node.ELEMENT_NODE || !!node.textContent?.trim()\r\n    );\r\n  };\r\n\r\n  private onIconSlotChange = (event: Event): void => {\r\n    this.hasIcon = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  render() {\r\n    const icon = html`<span\r\n      class=\"icon ${this.iconPosition === 'left' ? 'icon-left' : 'icon-right'}\"\r\n      ?hidden=${!this.hasIcon}\r\n      style=\"width:${this.iconSize};height:${this.iconSize};color:${this.iconColor}\"\r\n      ><slot name=\"icon\" @slotchange=${this.onIconSlotChange}></slot\r\n    ></span>`;\r\n    const titleContent = html`\r\n      ${this.iconPosition === 'left' ? icon : nothing} ${this.label ? html`<span part=\"label\">${this.label}</span>` : nothing}\r\n      ${this.iconPosition === 'right' ? icon : nothing}\r\n      ${this.hasContent ? html`<span class=\"arrow\" part=\"caret\" aria-hidden=\"true\">▼</span>` : nothing}\r\n    `;\r\n    const titleClass = `menu-title ${this.triggerClassName} ${this.open ? 'active' : ''}`;\r\n\r\n    return html`\r\n      <div class=\"menu\" part=\"menu\">\r\n        ${this.href\r\n          ? html`\r\n              <a\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                href=${this.href}\r\n                target=${this.target}\r\n                aria-haspopup=${this.hasContent ? 'true' : 'false'}\r\n                aria-expanded=${this.open}\r\n                aria-disabled=${this.disabled ? 'true' : nothing}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </a>\r\n            `\r\n          : html`\r\n              <button\r\n                part=\"trigger\"\r\n                class=${titleClass}\r\n                type=\"button\"\r\n                aria-haspopup=\"true\"\r\n                aria-expanded=${this.open}\r\n                ?disabled=${this.disabled}\r\n                @click=${this.onTitleClick}\r\n                @keydown=${this.onTitleKeyDown}\r\n              >\r\n                ${titleContent}\r\n              </button>\r\n            `}\r\n        <div\r\n          part=\"panel\"\r\n          class=\"menu-dropdown align-${this.align} ${this.itemGroupClassName} ${this.open ? 'show' : ''}\"\r\n          role=\"menu\"\r\n          @click=${this.onPanelClick}\r\n          @keydown=${this.onPanelKeyDown}\r\n        >\r\n          <slot @slotchange=${this.onContentSlotChange}></slot>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n}\r\n"],"mappings":"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","names":[]}