@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/{chunk-7NIWQWTA.js → chunk-2HMOX253.js}

@@ -1,14 +1,15 @@
 import {
   cardDescriptionStyles,
   cardTitleStyles,
+  sectionEyebrowStyles,
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-FZ36KL73.js";
+} from "./chunk-KZ7PMFWS.js";
 import {
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -30,30 +31,36 @@ var FeatureItem = class extends LitElement {
     this.href = "";
     this.actionLabel = "Learn more";
     this.inverted = false;
+    this.variant = "default";
   }
-  render() {
+  renderBody() {
     const external = this.href.startsWith("http");
+    const panel = this.variant === "panel";
     return html`
-      <st-card hoverable elevation="sm" ?inverted=${this.inverted} part="card">
-        <div class="content" part="content">
-          ${this.icon ? html`<div class="icon" part="icon"><iconify-icon icon=${this.icon}></iconify-icon></div>` : nothing}
-          <h3 class="title" part="title">${this.title}</h3>
-          <st-markdown class="description" part="description" .content=${this.description}></st-markdown>
-          ${this.href ? html`
-                <a
-                  class="link"
-                  part="link"
-                  href=${this.href}
-                  target=${external ? "_blank" : "_self"}
-                  rel=${external ? "noopener noreferrer" : nothing}
-                >
-                  ${this.actionLabel} <span>&rarr;</span>
-                </a>
-              ` : nothing}
-        </div>
-      </st-card>
+      <div class="content" part="content">
+        ${this.icon && !panel ? html`<div class="icon" part="icon"><iconify-icon icon=${this.icon}></iconify-icon></div>` : nothing}
+        <h3 class="title" part="title">${this.title}</h3>
+        <st-markdown class="description" part="description" .content=${this.description}></st-markdown>
+        ${this.href ? html`
+              <a
+                class="link"
+                part="link"
+                href=${this.href}
+                target=${external ? "_blank" : "_self"}
+                rel=${external ? "noopener noreferrer" : nothing}
+              >
+                ${this.actionLabel} <span>&rarr;</span>
+              </a>
+            ` : nothing}
+      </div>
     `;
   }
+  render() {
+    if (this.variant === "panel") {
+      return html`<div class="panel" part="card">${this.renderBody()}</div>`;
+    }
+    return html`<st-card hoverable elevation="sm" ?inverted=${this.inverted} part="card">${this.renderBody()}</st-card>`;
+  }
 };
 FeatureItem.styles = css`
     ${controlBaseStyles}
@@ -103,9 +110,11 @@ FeatureItem.styles = css`
       margin: 0;
     }
 
+    /* Inverted tiles sit on the dark band: explicit light text, 17:1 on the default navy, instead of
+       whatever the card's colour happens to be. */
     :host([inverted]) .title,
     :host([inverted]) .description {
-      color: inherit;
+      color: var(--st-color-on-solid);
     }
 
     .link {
@@ -130,6 +139,46 @@ FeatureItem.styles = css`
       color: inherit;
     }
 
+    /* variant="panel": a compact card without the icon tile. */
+    .panel {
+      box-sizing: border-box;
+      height: 100%;
+      padding: var(--st-feature-item-panel-padding, 20px);
+      border: 1px solid var(--st-feature-item-panel-border, var(--st-color-border));
+      border-radius: var(--st-feature-item-panel-radius, 12px);
+      background: var(--st-feature-item-panel-bg, var(--st-color-surface));
+    }
+
+    :host([variant='panel']) .panel .content {
+      gap: var(--st-feature-item-panel-gap, var(--st-space-8));
+    }
+
+    :host([variant='panel']) .title {
+      font-size: var(--st-feature-item-panel-title-size, 16px);
+      font-weight: var(--st-feature-item-panel-title-weight, var(--st-font-weight-bold));
+      line-height: 1.35;
+      color: var(--st-feature-item-panel-title-color, var(--st-color-text-strong));
+    }
+
+    :host([variant='panel']) .description {
+      font-size: 14px;
+      color: var(--st-feature-item-panel-desc-color, var(--st-color-text-muted));
+    }
+
+    /* Panels on the dark band: a lighter navy surface, a hairline border, light text (AA on navy-2). */
+    :host([variant='panel'][inverted]) .panel {
+      background: var(--st-cms-navy-2);
+      border-color: var(--st-cms-navy-2-border);
+    }
+
+    :host([variant='panel'][inverted]) .title {
+      color: var(--st-cms-on-dark);
+    }
+
+    :host([variant='panel'][inverted]) .description {
+      color: var(--st-cms-on-navy-muted);
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .link {
         transition: none;
@@ -154,6 +203,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], FeatureItem.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], FeatureItem.prototype, "variant", 2);
 FeatureItem = __decorateClass([
   customElement("st-feature-item")
 ], FeatureItem);
@@ -162,11 +214,14 @@ FeatureItem = __decorateClass([
 var FeaturesSection = class extends LitElement2 {
   constructor() {
     super(...arguments);
+    this.eyebrow = "";
     this.title = "";
     this.subtitle = "";
     this.actionLabel = "Learn more";
     this.columns = 0;
+    this.align = "start";
     this.inverted = false;
+    this.variant = "default";
     this.items = [];
   }
   render() {
@@ -174,19 +229,22 @@ var FeaturesSection = class extends LitElement2 {
     return html2`
       <section class="container" part="container">
         <div class="header" part="header">
-          <div class="title" part="title">${this.title}</div>
+          ${this.eyebrow ? html2`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing2}
+          ${this.title ? html2`<h2 class="title" part="title">${this.title}</h2>` : nothing2}
           ${this.subtitle ? html2`<div class="subtitle" part="subtitle">${this.subtitle}</div>` : nothing2}
         </div>
-        <div class="grid" part="grid" style=${gridStyle}>
+        <div class="grid ${this.align === "center" ? "center" : ""}" part="grid" style=${gridStyle}>
           <slot></slot>
           ${this.items.map(
       (item) => html2`
               <st-feature-item
+                class=${item.span === "full" ? "full" : ""}
                 .icon=${item.icon ?? ""}
                 .title=${item.title}
                 .description=${item.description}
                 .href=${item.href ?? ""}
                 .actionLabel=${this.actionLabel}
+                .variant=${this.variant}
                 ?inverted=${this.inverted}
               ></st-feature-item>
             `
@@ -221,6 +279,10 @@ FeaturesSection.styles = css2`
       ${sectionHeaderStyles}
     }
 
+    .eyebrow {
+      ${sectionEyebrowStyles}
+    }
+
     .title {
       ${sectionTitleStyles}
       margin: 0;
@@ -231,6 +293,10 @@ FeaturesSection.styles = css2`
       margin: 0 auto;
     }
 
+    :host([inverted]) .eyebrow {
+      color: var(--st-cms-highlight);
+    }
+
     :host([inverted]) .title,
     :host([inverted]) .subtitle {
       color: var(--st-color-on-solid);
@@ -242,6 +308,29 @@ FeaturesSection.styles = css2`
       gap: var(--st-space-32);
     }
 
+    /* align="center": a wrapping row, so an incomplete last row is centred. Each tile takes an equal
+       share of the width less the gaps. */
+    .grid.center {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .grid.center > st-feature-item,
+    .grid.center ::slotted(*) {
+      flex: 0 0 calc((100% - (var(--features-columns, 2) - 1) * var(--st-space-32)) / var(--features-columns, 2));
+      min-width: 0;
+    }
+
+    /* span: "full" on an items tile: the whole row (a flex row when align="center"). */
+    .grid > st-feature-item.full {
+      grid-column: 1 / -1;
+    }
+
+    .grid.center > st-feature-item.full {
+      flex-basis: 100%;
+    }
+
     @media (max-width: 768px) {
       :host {
         padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;
@@ -250,8 +339,16 @@ FeaturesSection.styles = css2`
       .grid {
         grid-template-columns: 1fr;
       }
+
+      .grid.center > st-feature-item,
+      .grid.center ::slotted(*) {
+        flex-basis: 100%;
+      }
     }
   `;
+__decorateClass([
+  property2({ type: String })
+], FeaturesSection.prototype, "eyebrow", 2);
 __decorateClass([
   property2({ type: String })
 ], FeaturesSection.prototype, "title", 2);
@@ -264,9 +361,15 @@ __decorateClass([
 __decorateClass([
   property2({ type: Number })
 ], FeaturesSection.prototype, "columns", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], FeaturesSection.prototype, "align", 2);
 __decorateClass([
   property2({ type: Boolean, reflect: true })
 ], FeaturesSection.prototype, "inverted", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], FeaturesSection.prototype, "variant", 2);
 __decorateClass([
   property2({ attribute: false })
 ], FeaturesSection.prototype, "items", 2);
@@ -278,4 +381,4 @@ export {
   FeatureItem,
   FeaturesSection
 };
-//# sourceMappingURL=chunk-7NIWQWTA.js.map
+//# sourceMappingURL=chunk-2HMOX253.js.map

package/dist/chunk-2HMOX253.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/features-section/FeaturesSection.ts","../src/features-section/FeatureItem.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionEyebrowStyles, sectionSubtitleStyles, sectionTitleStyles, sectionHeaderStyles } from '../shared/section-styles';\nimport './FeatureItem';\n\n/** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */\nexport interface FeatureItemData {\n  /** Iconify name. Without it the tile has no icon tile. */\n  icon?: string;\n  title: string;\n  description: string;\n  href?: string;\n  /** `full` makes the tile span every column of the grid (a wide call-out between rows). */\n  span?: 'full';\n}\n\n/**\n * A titled grid of feature tiles. Tiles come from the `items` property, from slotted\n * `st-feature-item` elements, or both (slotted first). `columns` sets the grid width (default 2;\n * one column below 768px). `inverted` is passed on to the `items` tiles; slotted tiles need their\n * own `inverted` attribute.\n *\n * The header can carry an `eyebrow` (a small uppercase label above the title). The title is a\n * real `<h2>`; each tile's title is an `<h3>`. `align=\"center\"` centres the last, incomplete row:\n * five tiles in three columns lay out as 3 + 2 centred, instead of 3 + 2 left-aligned.\n *\n * `variant=\"panel\"` renders the `items` tiles as compact panels without icon tiles (see\n * `st-feature-item`). A tile from `items` with `span: \"full\"` spans every column. Slotted tiles\n * need their own `variant` attribute.\n *\n * @cssprop --st-features-section-padding - Overrides the section's padding.\n * @csspart header - The eyebrow, title and subtitle block.\n * @csspart eyebrow - The small uppercase label above the title.\n * @csspart title - The section heading (`<h2>`).\n * @csspart subtitle - The line under the title.\n * @csspart grid - The grid holding the tiles.\n */\n@customElement('st-features-section')\nexport class FeaturesSection extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-features-section-padding instead. */\n      padding: var(--st-features-section-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-surface);\n    }\n\n    :host([inverted]) {\n      background: 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    .eyebrow {\n      ${sectionEyebrowStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin: 0;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      margin: 0 auto;\n    }\n\n    :host([inverted]) .eyebrow {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .subtitle {\n      color: var(--st-color-on-solid);\n    }\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(var(--features-columns, 2), 1fr);\n      gap: var(--st-space-32);\n    }\n\n    /* align=\"center\": a wrapping row, so an incomplete last row is centred. Each tile takes an equal\n       share of the width less the gaps. */\n    .grid.center {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    .grid.center > st-feature-item,\n    .grid.center ::slotted(*) {\n      flex: 0 0 calc((100% - (var(--features-columns, 2) - 1) * var(--st-space-32)) / var(--features-columns, 2));\n      min-width: 0;\n    }\n\n    /* span: \"full\" on an items tile: the whole row (a flex row when align=\"center\"). */\n    .grid > st-feature-item.full {\n      grid-column: 1 / -1;\n    }\n\n    .grid.center > st-feature-item.full {\n      flex-basis: 100%;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-features-section-padding, var(--st-space-48) var(--st-space-16)) !important;\n      }\n\n      .grid {\n        grid-template-columns: 1fr;\n      }\n\n      .grid.center > st-feature-item,\n      .grid.center ::slotted(*) {\n        flex-basis: 100%;\n      }\n    }\n  `;\n\n  /** Small uppercase label above the title (e.g. \"Why Sankhya\"). */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** Applied to every tile built from `items`. */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = 'Learn more';\n\n  @property({ type: Number })\n  columns = 0;\n\n  /** `start` (default) lays tiles out in a grid. `center` centres the last, incomplete row. */\n  @property({ type: String, reflect: true })\n  align: 'start' | 'center' = 'start';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `default` is the icon tile grid; `panel` gives the `items` tiles compact panels without icon tiles. */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'panel' = 'default';\n\n  /** Tiles to render (property only). */\n  @property({ attribute: false })\n  items: FeatureItemData[] = [];\n\n  render() {\n    const gridStyle = this.columns ? `--features-columns: ${this.columns}` : nothing;\n    return html`\n      <section class=\"container\" part=\"container\">\n        <div class=\"header\" part=\"header\">\n          ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n          ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n          ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n        </div>\n        <div class=\"grid ${this.align === 'center' ? 'center' : ''}\" part=\"grid\" style=${gridStyle}>\n          <slot></slot>\n          ${this.items.map(\n            (item) => html`\n              <st-feature-item\n                class=${item.span === 'full' ? 'full' : ''}\n                .icon=${item.icon ?? ''}\n                .title=${item.title}\n                .description=${item.description}\n                .href=${item.href ?? ''}\n                .actionLabel=${this.actionLabel}\n                .variant=${this.variant}\n                ?inverted=${this.inverted}\n              ></st-feature-item>\n            `\n          )}\n        </div>\n      </section>\n    `;\n  }\n}\n","import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { cardDescriptionStyles, cardTitleStyles } from '../shared/section-styles';\nimport '../card';\nimport '../markdown';\n\n/**\n * One feature tile for `st-features-section`: optional icon, title (`<h3>`), Markdown description\n * and an optional \"Learn more\" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.\n * `mdi:rocket`). The link is a plain `<a href>`, so it works without JavaScript; the click is\n * composed, so an SPA router can intercept it (e.g. via `event.composedPath()`) and navigate\n * client-side. `http(s)` links open in a new tab.\n *\n * @csspart card - The `st-card` around the tile.\n * @csspart icon - The icon tile.\n * @csspart title - The tile heading (`<h3>`).\n * `variant=\"panel\"` drops the icon tile for a compact card (20px padding, 12px radius, 16px title).\n * Inverted panels sit on the lighter navy panel colour (`--st-cms-navy-2`) with a hairline border.\n *\n * @csspart card - The `st-card` around the tile (the panel `div` with `variant=\"panel\"`).\n * @csspart description - The Markdown description.\n * @csspart link - The \"Learn more\" link.\n * @cssprop --st-feature-item-panel-bg - Panel background (default `--st-color-surface`).\n * @cssprop --st-feature-item-panel-border - Panel border colour (default `--st-color-border`).\n * @cssprop --st-feature-item-panel-radius - Panel corner radius (default 12px).\n * @cssprop --st-feature-item-panel-padding - Panel padding (default 20px).\n * @cssprop --st-feature-item-panel-gap - Gap between panel title and description (default `--st-space-8`).\n * @cssprop --st-feature-item-panel-title-size - Panel title size (default 16px).\n * @cssprop --st-feature-item-panel-title-weight - Panel title weight (default bold).\n * @cssprop --st-feature-item-panel-title-color - Panel title colour (default `--st-color-text-strong`).\n * @cssprop --st-feature-item-panel-desc-color - Panel description colour (default `--st-color-text-muted`).\n */\n@customElement('st-feature-item')\nexport class FeatureItem extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n    }\n\n    st-card {\n      height: 100%;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: var(--st-space-16);\n      height: 100%;\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 48px;\n      height: 48px;\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-subtle);\n      color: var(--st-color-text-strong);\n      margin-bottom: var(--st-space-8);\n      font-size: 24px;\n    }\n\n    :host([inverted]) .icon {\n      background: var(--st-color-text-muted);\n      color: var(--st-color-on-solid);\n    }\n\n    .title {\n      ${cardTitleStyles}\n      margin: 0;\n    }\n\n    .description {\n      ${cardDescriptionStyles}\n      margin: 0;\n    }\n\n    /* Inverted tiles sit on the dark band: explicit light text, 17:1 on the default navy, instead of\n       whatever the card's colour happens to be. */\n    :host([inverted]) .title,\n    :host([inverted]) .description {\n      color: var(--st-color-on-solid);\n    }\n\n    .link {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-4);\n      margin-top: auto;\n      color: var(--st-color-text-muted);\n      font-weight: var(--st-font-weight-medium);\n      font-size: var(--st-text-md);\n      text-decoration: none;\n      transition: color 0.2s ease;\n    }\n\n    .link:hover {\n      color: var(--st-color-text-strong);\n      text-decoration: underline;\n    }\n\n    :host([inverted]) .link,\n    :host([inverted]) .link:hover {\n      color: inherit;\n    }\n\n    /* variant=\"panel\": a compact card without the icon tile. */\n    .panel {\n      box-sizing: border-box;\n      height: 100%;\n      padding: var(--st-feature-item-panel-padding, 20px);\n      border: 1px solid var(--st-feature-item-panel-border, var(--st-color-border));\n      border-radius: var(--st-feature-item-panel-radius, 12px);\n      background: var(--st-feature-item-panel-bg, var(--st-color-surface));\n    }\n\n    :host([variant='panel']) .panel .content {\n      gap: var(--st-feature-item-panel-gap, var(--st-space-8));\n    }\n\n    :host([variant='panel']) .title {\n      font-size: var(--st-feature-item-panel-title-size, 16px);\n      font-weight: var(--st-feature-item-panel-title-weight, var(--st-font-weight-bold));\n      line-height: 1.35;\n      color: var(--st-feature-item-panel-title-color, var(--st-color-text-strong));\n    }\n\n    :host([variant='panel']) .description {\n      font-size: 14px;\n      color: var(--st-feature-item-panel-desc-color, var(--st-color-text-muted));\n    }\n\n    /* Panels on the dark band: a lighter navy surface, a hairline border, light text (AA on navy-2). */\n    :host([variant='panel'][inverted]) .panel {\n      background: var(--st-cms-navy-2);\n      border-color: var(--st-cms-navy-2-border);\n    }\n\n    :host([variant='panel'][inverted]) .title {\n      color: var(--st-cms-on-dark);\n    }\n\n    :host([variant='panel'][inverted]) .description {\n      color: var(--st-cms-on-navy-muted);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .link {\n        transition: none;\n      }\n    }\n  `;\n\n  /** Iconify icon name, e.g. `mdi:rocket`. */\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String })\n  title = '';\n\n  /** Markdown. */\n  @property({ type: String })\n  description = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = 'Learn more';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `default` is the icon card; `panel` is the compact card without an icon tile. */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'panel' = 'default';\n\n  private renderBody() {\n    const external = this.href.startsWith('http');\n    const panel = this.variant === 'panel';\n    return html`\n      <div class=\"content\" part=\"content\">\n        ${this.icon && !panel\n          ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${this.icon}></iconify-icon></div>`\n          : nothing}\n        <h3 class=\"title\" part=\"title\">${this.title}</h3>\n        <st-markdown class=\"description\" part=\"description\" .content=${this.description}></st-markdown>\n        ${this.href\n          ? html`\n              <a\n                class=\"link\"\n                part=\"link\"\n                href=${this.href}\n                target=${external ? '_blank' : '_self'}\n                rel=${external ? 'noopener noreferrer' : nothing}\n              >\n                ${this.actionLabel} <span>&rarr;</span>\n              </a>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n\n  render() {\n    if (this.variant === 'panel') {\n      return html`<div class=\"panel\" part=\"card\">${this.renderBody()}</div>`;\n    }\n    return html`<st-card hoverable elevation=\"sm\" ?inverted=${this.inverted} part=\"card\">${this.renderBody()}</st-card>`;\n  }\n}\n"],"mappings":"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","names":["LitElement","css","html","nothing","customElement","property","LitElement","nothing","html","css","property","customElement"]}

package/dist/{chunk-DH53HZPB.js → chunk-37KFBKPD.js}

@@ -7,13 +7,13 @@ import {
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-FZ36KL73.js";
+} from "./chunk-KZ7PMFWS.js";
 import {
   buttonResetStyles,
   cardShellStyles,
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -31,6 +31,8 @@ var Testimonials = class extends LitElement {
     this.inverted = false;
     this.layout = "grid";
     this.linkLabel = "See full story";
+    this.regionLabel = "";
+    this.roleDescription = "";
     this.actionLabel = "";
     this.actionHref = "";
     this.atStart = true;
@@ -131,7 +133,15 @@ var Testimonials = class extends LitElement {
                 </button>
               </div>` : nothing}
         </div>
-        ${carousel ? html`<div class="track" part="track" role="region" aria-label=${this.title || "Stories"} tabindex="0" @scroll=${this.syncArrows}>
+        ${carousel ? html`<div
+              class="track"
+              part="track"
+              role="region"
+              aria-roledescription=${this.roleDescription || "carousel"}
+              aria-label=${this.regionLabel || 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}
@@ -322,6 +332,7 @@ Testimonials.styles = css`
     }
 
     .link {
+      position: relative;
       display: inline-flex;
       align-items: center;
       gap: var(--st-space-8);
@@ -331,6 +342,17 @@ Testimonials.styles = css`
       text-decoration: none;
     }
 
+    /* Touch target: the link keeps its size; a 44px hit area (WCAG 2.5.5) sits over it. */
+    .link::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 44px);
+      height: 44px;
+      transform: translate(-50%, -50%);
+    }
+
     .author + .link {
       margin-top: 0;
     }
@@ -489,6 +511,12 @@ __decorateClass([
 __decorateClass([
   property({ type: String, attribute: "link-label" })
 ], Testimonials.prototype, "linkLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "region-label" })
+], Testimonials.prototype, "regionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "role-description" })
+], Testimonials.prototype, "roleDescription", 2);
 __decorateClass([
   property({ type: String, attribute: "action-label" })
 ], Testimonials.prototype, "actionLabel", 2);
@@ -508,4 +536,4 @@ Testimonials = __decorateClass([
 export {
   Testimonials
 };
-//# sourceMappingURL=chunk-DH53HZPB.js.map
+//# sourceMappingURL=chunk-37KFBKPD.js.map

package/dist/chunk-37KFBKPD.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\"). Any item set can use the carousel: `region-label` names it for\n * assistive technology (e.g. \"Services\") and `role-description` changes its `aria-roledescription`.\n *\n * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.\n * @cssprop --st-testimonials-padding - Overrides the section's padding.\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      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-testimonials-padding instead. */\n      padding: var(--st-testimonials-padding, var(--st-space-48) var(--st-space-24)) !important;\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      position: relative;\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    /* Touch target: the link keeps its size; a 44px hit area (WCAG 2.5.5) sits over it. */\n    .link::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      width: max(100%, 44px);\n      height: 44px;\n      transform: translate(-50%, -50%);\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-testimonials-padding, var(--st-space-40) var(--st-space-20)) !important;\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  /**\n   * Accessible name of the carousel's scrolling region. Default: the `title`, or \"Stories\". Set it to\n   * what the items are (e.g. \"Services\" for a row of service cards).\n   */\n  @property({ type: String, attribute: 'region-label' })\n  regionLabel = '';\n\n  /** `aria-roledescription` of the carousel's scrolling region. Default: \"carousel\". */\n  @property({ type: String, attribute: 'role-description' })\n  roleDescription = '';\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\n              class=\"track\"\n              part=\"track\"\n              role=\"region\"\n              aria-roledescription=${this.roleDescription || 'carousel'}\n              aria-label=${this.regionLabel || this.title || 'Stories'}\n              tabindex=\"0\"\n              @scroll=${this.syncArrows}\n            >\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":"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AA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QA8Mf,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,GA1Vf,aA2VX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Vf,aA8VX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAhWnB,aAiWX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAnW/B,aAoWX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAvW9B,aAwWX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa,CAAC;AAAA,GA3WxC,aA4WX;AAOA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAlX1C,aAmXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB,CAAC;AAAA,GAtX9C,aAuXX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA1X1C,aA2XX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GA7XzC,aA8XX;AAEiB;AAAA,EAAhB,MAAM;AAAA,GAhYI,aAgYM;AACA;AAAA,EAAhB,MAAM;AAAA,GAjYI,aAiYM;AAjYN,eAAN;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB;","names":[]}

package/dist/{chunk-EE6PAN3B.js → chunk-4XPKKYVZ.js}

@@ -1,17 +1,17 @@
 import {
   renderMarkdown
-} from "./chunk-UAIUBPDN.js";
+} from "./chunk-TJK55CJ2.js";
 import {
   reducedMotionStyles,
   sectionHeaderStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-FZ36KL73.js";
+} from "./chunk-KZ7PMFWS.js";
 import {
   buttonResetStyles,
   controlBaseStyles,
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -62,17 +62,19 @@ var ItemsAccordion = class extends LitElement {
       const open = this.openIds.has(item.id);
       return html`
               <div class="item ${open ? "open" : ""}" part="item">
-                <button
-                  class="trigger"
-                  part="trigger"
-                  type="button"
-                  aria-expanded=${open ? "true" : "false"}
-                  aria-controls="content-${item.id}"
-                  @click=${() => this.toggle(item.id)}
-                >
-                  <span>${item.title}</span>
-                  <iconify-icon class="chevron" icon="mdi:chevron-down"></iconify-icon>
-                </button>
+                <h3 class="heading" part="heading">
+                  <button
+                    class="trigger"
+                    part="trigger"
+                    type="button"
+                    aria-expanded=${open ? "true" : "false"}
+                    aria-controls="content-${item.id}"
+                    @click=${() => this.toggle(item.id)}
+                  >
+                    <span>${item.title}</span>
+                    <iconify-icon class="chevron" icon="mdi:chevron-down" aria-hidden="true"></iconify-icon>
+                  </button>
+                </h3>
                 <div class="content" id="content-${item.id}" part="content" role="region" ?inert=${!open}>
                   <div class="content-clip">
                     <div class="content-inner">${unsafeHTML(renderMarkdown(item.content))}</div>
@@ -140,6 +142,12 @@ ItemsAccordion.styles = css`
       box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);
     }
 
+    /* Each row title is an <h3> wrapping its trigger button (the WAI-ARIA accordion pattern). */
+    .heading {
+      margin: 0;
+      font: inherit;
+    }
+
     .trigger {
       ${buttonResetStyles}
       width: 100%;
@@ -245,4 +253,4 @@ ItemsAccordion = __decorateClass([
 export {
   ItemsAccordion
 };
-//# sourceMappingURL=chunk-EE6PAN3B.js.map
+//# sourceMappingURL=chunk-4XPKKYVZ.js.map

package/dist/chunk-4XPKKYVZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/items-accordion/ItemsAccordion.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport 'iconify-icon';\n\nimport { buttonResetStyles, controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { renderMarkdown } from '../shared/markdown';\nimport {\n  reducedMotionStyles,\n  sectionHeaderStyles,\n  sectionSubtitleStyles,\n  sectionTitleStyles,\n} from '../shared/section-styles';\nimport type { AccordionToggleEventDetail } from './ItemsAccordionEvents';\n\nexport interface AccordionItem {\n  id: string;\n  title: string;\n  /** Markdown (plain text works too). */\n  content: string;\n}\n\n/**\n * A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\n * Each row's `content` is Markdown, sanitized. `open-first` starts with the first row open. The\n * section title is an `<h2>` and each row title an `<h3>` wrapping its toggle button, which\n * exposes `aria-expanded` and `aria-controls` for the row's panel.\n *\n * @cssprop --st-items-accordion-padding - Overrides the block's padding.\n * @csspart trigger - The button that opens and closes a row.\n * @csspart heading - The `<h3>` wrapping each trigger.\n */\n@customElement('st-items-accordion')\nexport class ItemsAccordion extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-items-accordion-padding instead. */\n      padding: var(--st-items-accordion-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-page);\n      ${fontFamilyStyles}\n    }\n\n    .container {\n      max-width: 800px;\n      margin: 0 auto;\n    }\n\n    .header {\n      ${sectionHeaderStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      font-size: var(--st-text-2xl);\n      margin-bottom: var(--st-space-12);\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      font-size: var(--st-text-base);\n      margin: 0;\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-16);\n    }\n\n    .item {\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-surface);\n      overflow: hidden;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n    }\n\n    .item.open {\n      border-color: var(--st-color-border-strong);\n      box-shadow: 0 4px 6px -1px var(--st-shadow-color-sm);\n    }\n\n    /* Each row title is an <h3> wrapping its trigger button (the WAI-ARIA accordion pattern). */\n    .heading {\n      margin: 0;\n      font: inherit;\n    }\n\n    .trigger {\n      ${buttonResetStyles}\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--st-space-24);\n      text-align: left;\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .trigger:hover {\n      background: var(--st-color-hover);\n    }\n\n    .chevron {\n      flex-shrink: 0;\n      margin-left: var(--st-space-16);\n      font-size: 24px;\n      color: var(--st-color-text-faint);\n      transition: transform 0.3s ease;\n    }\n\n    .open .chevron {\n      transform: rotate(180deg);\n    }\n\n    .content {\n      display: grid;\n      grid-template-rows: 0fr;\n      transition: grid-template-rows 0.3s ease;\n    }\n\n    .open .content {\n      grid-template-rows: 1fr;\n    }\n\n    .content-clip {\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .content-inner {\n      padding: 0 var(--st-space-24) var(--st-space-24);\n      color: var(--st-color-text);\n      line-height: 1.6;\n    }\n\n    .content-inner > :first-child {\n      margin-top: 0;\n    }\n\n    .content-inner > :last-child {\n      margin-bottom: 0;\n    }\n\n    .content-inner p {\n      margin: 0 0 var(--st-space-12);\n    }\n\n    .content-inner a {\n      color: inherit;\n      text-decoration: underline;\n      text-underline-offset: 3px;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-items-accordion-padding, var(--st-space-48) var(--st-space-20)) !important;\n      }\n\n      .title {\n        font-size: var(--st-text-xl);\n      }\n    }\n\n    ${reducedMotionStyles}\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: AccordionItem[] = [];\n\n  @property({ type: Boolean, attribute: 'allow-multiple' })\n  allowMultiple = false;\n\n  /** Starts with the first row open. Applies when `items` or this flag changes while nothing is open. */\n  @property({ type: Boolean, attribute: 'open-first' })\n  openFirst = false;\n\n  @state() private openIds = new Set<string>();\n\n  protected willUpdate(changed: Map<string, unknown>): void {\n    if (this.openFirst && (changed.has('items') || changed.has('openFirst')) && this.openIds.size === 0 && this.items.length) {\n      this.openIds = new Set([this.items[0].id]);\n    }\n  }\n\n  private toggle(id: string) {\n    const wasOpen = this.openIds.has(id);\n    const next = new Set(this.allowMultiple ? this.openIds : []);\n    if (wasOpen) next.delete(id);\n    else next.add(id);\n    this.openIds = next;\n    this.dispatchEvent(\n      new CustomEvent<AccordionToggleEventDetail>('accordion-toggle', {\n        detail: { id, open: !wasOpen },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.title || this.subtitle\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.title ? html`<h2 class=\"title\" part=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <div class=\"list\" part=\"list\">\n          ${this.items.map((item) => {\n            const open = this.openIds.has(item.id);\n            return html`\n              <div class=\"item ${open ? 'open' : ''}\" part=\"item\">\n                <h3 class=\"heading\" part=\"heading\">\n                  <button\n                    class=\"trigger\"\n                    part=\"trigger\"\n                    type=\"button\"\n                    aria-expanded=${open ? 'true' : 'false'}\n                    aria-controls=\"content-${item.id}\"\n                    @click=${() => this.toggle(item.id)}\n                  >\n                    <span>${item.title}</span>\n                    <iconify-icon class=\"chevron\" icon=\"mdi:chevron-down\" aria-hidden=\"true\"></iconify-icon>\n                  </button>\n                </h3>\n                <div class=\"content\" id=\"content-${item.id}\" part=\"content\" role=\"region\" ?inert=${!open}>\n                  <div class=\"content-clip\">\n                    <div class=\"content-inner\">${unsafeHTML(renderMarkdown(item.content))}</div>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}