@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/{chunk-ZRC5BVDX.js → chunk-JURCF4OD.js}

@@ -1,12 +1,16 @@
 import {
+  renderMarkdown
+} from "./chunk-TJK55CJ2.js";
+import {
+  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";
@@ -14,6 +18,7 @@ import {
 // src/steps/Steps.ts
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 var Steps = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -23,6 +28,20 @@ var Steps = class extends LitElement {
     this.items = [];
     this.highlightLast = false;
     this.inverted = false;
+    this.variant = "default";
+    this.markdown = false;
+  }
+  renderDescription(step) {
+    if (!step.description) return nothing;
+    return this.markdown ? html`<div class="description" part="description">${unsafeHTML(renderMarkdown(step.description))}</div>` : html`<p class="description" part="description">${step.description}</p>`;
+  }
+  renderTitle(step) {
+    const title = html`<h3 class="card-title" part="card-title">${step.title}</h3>`;
+    if (!step.badge) return title;
+    return html`<div class="title-row">
+      ${title}
+      <span class="badge" part="badge">${step.badge}</span>
+    </div>`;
   }
   render() {
     const heading = this.eyebrow || this.title || this.subtitle;
@@ -39,8 +58,8 @@ var Steps = class extends LitElement {
       (step, index) => html`
               <li class="card ${this.highlightLast && index === last ? "highlight" : ""}" part="card">
                 <span class="number" part="number" aria-hidden="true">${String(index + 1).padStart(2, "0")}</span>
-                <h3 class="card-title" part="card-title">${step.title}</h3>
-                ${step.description ? html`<p class="description" part="description">${step.description}</p>` : nothing}
+                ${this.renderTitle(step)}
+                ${this.renderDescription(step)}
               </li>
             `
     )}
@@ -51,7 +70,10 @@ var Steps = class extends LitElement {
 };
 Steps.styles = css`
     ${controlBaseStyles}
-    ${fontFamilyStyles}
+    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */
+    :host {
+      ${fontFamilyStyles}
+    }
 
     :host {
       display: block;
@@ -76,12 +98,7 @@ Steps.styles = css`
     }
 
     .eyebrow {
-      margin: 0 0 var(--st-space-12);
-      font-size: var(--st-text-sm);
-      font-weight: var(--st-font-weight-bold);
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      color: var(--st-color-text-muted);
+      ${sectionEyebrowStyles}
     }
 
     .title {
@@ -182,6 +199,145 @@ Steps.styles = css`
       color: color-mix(in oklch, var(--st-cms-on-dark) 80%, transparent);
     }
 
+    /* variant="band": a white full-width band with hairline borders; light blue cards, azure numbers.
+       The heading block is left-aligned in a 720px column (label, 36px title, 18px lead). */
+    :host([variant='band']) {
+      padding: 0 !important;
+      background: var(--st-color-surface, #ffffff);
+      border-top: 1px solid var(--st-cms-primary-100);
+      border-bottom: 1px solid var(--st-cms-primary-100);
+    }
+
+    /* The band's section rhythm and gutters sit on the container (inside the shadow root, so a page
+       reset cannot zero them), which is a 1200px box centred on the page. */
+    :host([variant='band']) .container {
+      box-sizing: border-box;
+      /* The side gutter sits inside the box, so the content itself still gets the full container width. */
+      max-width: calc(var(--st-cms-container-max) + 2 * var(--st-space-24));
+      padding: var(--st-cms-section-padding, 5rem) var(--st-space-24);
+    }
+
+    .description p {
+      margin: 0;
+    }
+
+    .description code {
+      font-family: ui-monospace, Menlo, monospace;
+      font-size: 13px;
+    }
+
+    :host([variant='band']) .header {
+      max-width: 720px;
+      margin-bottom: var(--st-space-48);
+      text-align: left;
+    }
+
+    :host([variant='band']) .eyebrow {
+      margin-bottom: var(--st-space-12);
+      font-size: 12px;
+      font-weight: var(--st-font-weight-semibold);
+      letter-spacing: 0.05em;
+      color: var(--st-cms-eyebrow, #0c64c5);
+    }
+
+    :host([variant='band']) .title {
+      font-size: 36px;
+      line-height: 1.2;
+      font-weight: var(--st-font-weight-bold);
+    }
+
+    :host([variant='band']) .subtitle {
+      max-width: none;
+      margin: 0;
+      font-size: 18px;
+      line-height: 1.6;
+      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));
+    }
+
+    :host([variant='band']) .card {
+      gap: var(--st-space-12);
+      padding: var(--st-space-24);
+      border: 1px solid var(--st-cms-primary-100);
+      border-radius: 12px;
+      background: var(--st-cms-surface-soft);
+      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));
+    }
+
+    :host([variant='band']) .number {
+      font-size: 32px;
+      font-weight: var(--st-font-weight-bold);
+      color: var(--st-cms-brand-azure);
+    }
+
+    :host([variant='band']) .card-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.3;
+    }
+
+    :host([variant='band']) .description {
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));
+    }
+
+    .title-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--st-space-8) var(--st-space-12);
+      margin-top: var(--st-space-8);
+    }
+
+    .title-row .card-title {
+      margin: 0;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-primary-100);
+      color: var(--st-cms-navy);
+      font-size: var(--st-text-xs);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+
+    .card.highlight .badge {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    /* band: the highlighted card stays a dark call-out (the band's light card rules would hide its
+       white title). Declared last, with the .card.highlight selector, so it wins over the band rules. */
+    :host([variant='band']) .card.highlight {
+      background: var(--st-cms-navy);
+      border-color: var(--st-cms-primary-200);
+      color: var(--st-cms-primary-100);
+    }
+
+    :host([variant='band']) .card.highlight .number {
+      color: var(--st-cms-highlight);
+    }
+
+    :host([variant='band']) .card.highlight .card-title {
+      color: var(--st-cms-on-dark);
+    }
+
+    :host([variant='band']) .card.highlight .description {
+      color: var(--st-cms-primary-100);
+    }
+
+    :host([variant='band']) .badge {
+      padding: 2px 8px;
+      font-size: 12px;
+      font-weight: var(--st-font-weight-semibold);
+    }
+
     @media (max-width: 600px) {
       :host {
         padding: var(--st-steps-padding, var(--st-space-40) var(--st-space-20)) !important;
@@ -209,6 +365,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Steps.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Steps.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Steps.prototype, "markdown", 2);
 Steps = __decorateClass([
   customElement("st-steps")
 ], Steps);
@@ -216,4 +378,4 @@ Steps = __decorateClass([
 export {
   Steps
 };
-//# sourceMappingURL=chunk-ZRC5BVDX.js.map
+//# sourceMappingURL=chunk-JURCF4OD.js.map

package/dist/chunk-JURCF4OD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/steps/Steps.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { renderMarkdown } from '../shared/markdown';\nimport { sectionEyebrowStyles, sectionHeaderStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\nexport interface StepItem {\n  title: string;\n  /** Plain text, or Markdown when the block has `markdown` set (for inline `code`). */\n  description?: string;\n  /** Small pill beside the title (e.g. \"Included\"). On the highlighted last card it turns cyan. */\n  badge?: string;\n}\n\n/**\n * A numbered process: a responsive grid of cards, each with an automatic \"01\", \"02\", ... number, a\n * title and a description. `highlightLast` makes the final card a dark navy call-out, the way\n * enterprise pages close a how-it-works sequence. `inverted` puts the whole block on the dark band.\n * `variant=\"band\"` sets the block on a white full-width band with hairline top and bottom borders;\n * the cards sit on a light blue surface and the numbers are large azure.\n *\n * @cssprop --st-steps-padding - Overrides the block's padding.\n * @csspart header - The eyebrow/title/subtitle block.\n * @csspart card - Each step card (an `li`).\n * @csspart number - The step number.\n * @csspart badge - The pill beside a step's title.\n */\n@customElement('st-steps')\nexport class Steps extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */\n    :host {\n      ${fontFamilyStyles}\n    }\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-steps-padding instead. */\n      padding: var(--st-steps-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;\n      background: var(--st-color-page);\n    }\n\n    :host([inverted]) {\n      background: var(--st-cms-band-dark-bg);\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      color: inherit;\n      letter-spacing: -0.02em;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      max-width: 60ch;\n      margin: 0 auto;\n    }\n\n    .grid {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n      gap: var(--st-space-24);\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-12);\n      box-sizing: border-box;\n      margin: 0;\n      padding: var(--st-space-32);\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-lg);\n      background: var(--st-color-surface);\n      color: var(--st-color-text);\n    }\n\n    .number {\n      font-size: var(--st-cms-text-3xl);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      letter-spacing: -0.02em;\n      color: var(--st-color-accent);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .card-title {\n      margin: var(--st-space-8) 0 0;\n      font-size: var(--st-text-xl);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.3;\n      color: var(--st-color-text-strong);\n    }\n\n    .description {\n      margin: 0;\n      font-size: var(--st-text-md);\n      line-height: 1.6;\n      color: var(--st-color-text-muted);\n    }\n\n    /* inverted: a dark band with light cards; the number moves to the cyan highlight so it reads on navy. */\n    :host([inverted]) .card {\n      background: color-mix(in oklch, var(--st-cms-band-dark-color) 6%, transparent);\n      border-color: color-mix(in oklch, var(--st-cms-band-dark-color) 16%, transparent);\n    }\n\n    :host([inverted]) .number {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .card-title {\n      color: var(--st-cms-band-dark-color);\n    }\n\n    :host([inverted]) .eyebrow,\n    :host([inverted]) .subtitle,\n    :host([inverted]) .description {\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);\n    }\n\n    /* highlightLast: the final card is the dark call-out. Declared after the inverted rules so it wins. */\n    .card.highlight {\n      background: var(--st-cms-navy);\n      border-color: var(--st-cms-navy);\n      color: var(--st-cms-on-dark);\n    }\n\n    .card.highlight .number {\n      color: var(--st-cms-highlight);\n    }\n\n    .card.highlight .card-title {\n      color: var(--st-cms-on-dark);\n    }\n\n    .card.highlight .description {\n      color: color-mix(in oklch, var(--st-cms-on-dark) 80%, transparent);\n    }\n\n    /* variant=\"band\": a white full-width band with hairline borders; light blue cards, azure numbers.\n       The heading block is left-aligned in a 720px column (label, 36px title, 18px lead). */\n    :host([variant='band']) {\n      padding: 0 !important;\n      background: var(--st-color-surface, #ffffff);\n      border-top: 1px solid var(--st-cms-primary-100);\n      border-bottom: 1px solid var(--st-cms-primary-100);\n    }\n\n    /* The band's section rhythm and gutters sit on the container (inside the shadow root, so a page\n       reset cannot zero them), which is a 1200px box centred on the page. */\n    :host([variant='band']) .container {\n      box-sizing: border-box;\n      /* The side gutter sits inside the box, so the content itself still gets the full container width. */\n      max-width: calc(var(--st-cms-container-max) + 2 * var(--st-space-24));\n      padding: var(--st-cms-section-padding, 5rem) var(--st-space-24);\n    }\n\n    .description p {\n      margin: 0;\n    }\n\n    .description code {\n      font-family: ui-monospace, Menlo, monospace;\n      font-size: 13px;\n    }\n\n    :host([variant='band']) .header {\n      max-width: 720px;\n      margin-bottom: var(--st-space-48);\n      text-align: left;\n    }\n\n    :host([variant='band']) .eyebrow {\n      margin-bottom: var(--st-space-12);\n      font-size: 12px;\n      font-weight: var(--st-font-weight-semibold);\n      letter-spacing: 0.05em;\n      color: var(--st-cms-eyebrow, #0c64c5);\n    }\n\n    :host([variant='band']) .title {\n      font-size: 36px;\n      line-height: 1.2;\n      font-weight: var(--st-font-weight-bold);\n    }\n\n    :host([variant='band']) .subtitle {\n      max-width: none;\n      margin: 0;\n      font-size: 18px;\n      line-height: 1.6;\n      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));\n    }\n\n    :host([variant='band']) .card {\n      gap: var(--st-space-12);\n      padding: var(--st-space-24);\n      border: 1px solid var(--st-cms-primary-100);\n      border-radius: 12px;\n      background: var(--st-cms-surface-soft);\n      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));\n    }\n\n    :host([variant='band']) .number {\n      font-size: 32px;\n      font-weight: var(--st-font-weight-bold);\n      color: var(--st-cms-brand-azure);\n    }\n\n    :host([variant='band']) .card-title {\n      margin: 0;\n      font-size: 20px;\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.3;\n    }\n\n    :host([variant='band']) .description {\n      font-size: 14px;\n      line-height: 1.5;\n      color: var(--st-cms-text, var(--st-cms-navy-2, #03346b));\n    }\n\n    .title-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: var(--st-space-8) var(--st-space-12);\n      margin-top: var(--st-space-8);\n    }\n\n    .title-row .card-title {\n      margin: 0;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 4px 10px;\n      border-radius: var(--st-radius-full);\n      background: var(--st-cms-primary-100);\n      color: var(--st-cms-navy);\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.4;\n      white-space: nowrap;\n    }\n\n    .card.highlight .badge {\n      background: var(--st-cms-highlight);\n      color: var(--st-cms-navy);\n    }\n\n    /* band: the highlighted card stays a dark call-out (the band's light card rules would hide its\n       white title). Declared last, with the .card.highlight selector, so it wins over the band rules. */\n    :host([variant='band']) .card.highlight {\n      background: var(--st-cms-navy);\n      border-color: var(--st-cms-primary-200);\n      color: var(--st-cms-primary-100);\n    }\n\n    :host([variant='band']) .card.highlight .number {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([variant='band']) .card.highlight .card-title {\n      color: var(--st-cms-on-dark);\n    }\n\n    :host([variant='band']) .card.highlight .description {\n      color: var(--st-cms-primary-100);\n    }\n\n    :host([variant='band']) .badge {\n      padding: 2px 8px;\n      font-size: 12px;\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    @media (max-width: 600px) {\n      :host {\n        padding: var(--st-steps-padding, var(--st-space-40) var(--st-space-20)) !important;\n      }\n      .card {\n        padding: var(--st-space-24);\n      }\n    }\n  `;\n\n  /** Small uppercase label above the title. */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** The steps, in order. */\n  @property({ attribute: false })\n  items: StepItem[] = [];\n\n  /** Renders the last step as a dark navy call-out card. */\n  @property({ type: Boolean, reflect: true, attribute: 'highlight-last' })\n  highlightLast = false;\n\n  /** Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `default` is the bordered card grid; `band` is a white full-width band with light blue cards. */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'band' = 'default';\n\n  /** Renders each step's description as Markdown (inline `code`, links). Off by default: descriptions are plain text. */\n  @property({ type: Boolean, reflect: true })\n  markdown = false;\n\n  private renderDescription(step: StepItem) {\n    if (!step.description) return nothing;\n    return this.markdown\n      ? html`<div class=\"description\" part=\"description\">${unsafeHTML(renderMarkdown(step.description))}</div>`\n      : html`<p class=\"description\" part=\"description\">${step.description}</p>`;\n  }\n\n  private renderTitle(step: StepItem) {\n    const title = html`<h3 class=\"card-title\" part=\"card-title\">${step.title}</h3>`;\n    if (!step.badge) return title;\n    return html`<div class=\"title-row\">\n      ${title}\n      <span class=\"badge\" part=\"badge\">${step.badge}</span>\n    </div>`;\n  }\n\n  render() {\n    const heading = this.eyebrow || this.title || this.subtitle;\n    const last = this.items.length - 1;\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${heading\n          ? html`<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`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <ol class=\"grid\" part=\"grid\" aria-label=${this.title || nothing}>\n          ${this.items.map(\n            (step, index) => html`\n              <li class=\"card ${this.highlightLast && index === last ? 'highlight' : ''}\" part=\"card\">\n                <span class=\"number\" part=\"number\" aria-hidden=\"true\">${String(index + 1).padStart(2, '0')}</span>\n                ${this.renderTitle(step)}\n                ${this.renderDescription(step)}\n              </li>\n            `\n          )}\n        </ol>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,SAAS,kBAAkB;AA4BpB,IAAM,QAAN,cAAoB,WAAW;AAAA,EAA/B;AAAA;AA2RL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,iBAAoB,CAAC;AAIrB,yBAAgB;AAIhB,oBAAW;AAIX,mBAA8B;AAI9B,oBAAW;AAAA;AAAA,EAEH,kBAAkB,MAAgB;AACxC,QAAI,CAAC,KAAK,YAAa,QAAO;AAC9B,WAAO,KAAK,WACR,mDAAmD,WAAW,eAAe,KAAK,WAAW,CAAC,CAAC,WAC/F,iDAAiD,KAAK,WAAW;AAAA,EACvE;AAAA,EAEQ,YAAY,MAAgB;AAClC,UAAM,QAAQ,gDAAgD,KAAK,KAAK;AACxE,QAAI,CAAC,KAAK,MAAO,QAAO;AACxB,WAAO;AAAA,QACH,KAAK;AAAA,yCAC4B,KAAK,KAAK;AAAA;AAAA,EAEjD;AAAA,EAEA,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,UAAM,OAAO,KAAK,MAAM,SAAS;AACjC,WAAO;AAAA;AAAA,UAED,UACE;AAAA,gBACI,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA,gBACpF,KAAK,QAAQ,sCAAsC,KAAK,KAAK,UAAU,OAAO;AAAA,gBAC9E,KAAK,WAAW,2CAA2C,KAAK,QAAQ,SAAS,OAAO;AAAA,sBAE5F,OAAO;AAAA,kDAC+B,KAAK,SAAS,OAAO;AAAA,YAC3D,KAAK,MAAM;AAAA,MACX,CAAC,MAAM,UAAU;AAAA,gCACG,KAAK,iBAAiB,UAAU,OAAO,cAAc,EAAE;AAAA,wEACf,OAAO,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG,CAAC;AAAA,kBACxF,KAAK,YAAY,IAAI,CAAC;AAAA,kBACtB,KAAK,kBAAkB,IAAI,CAAC;AAAA;AAAA;AAAA,IAGpC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIT;AACF;AAjWa,MACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA,QAGf,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsBhB,mBAAmB;AAAA;AAAA;AAAA;AAAA,QAInB,oBAAoB;AAAA;AAAA;AAAA;AAAA,QAIpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMlB,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkP3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Rf,MA2RX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Rf,MA8RX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhSf,MAiSX;AAIA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GApSnB,MAqSX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAxS5D,MAySX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA5S/B,MA6SX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhT9B,MAiTX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApT/B,MAqTX;AArTW,QAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;","names":[]}

package/dist/{chunk-FZ36KL73.js → chunk-KZ7PMFWS.js}

@@ -24,8 +24,17 @@ var cardDescriptionStyles = css`
   color: var(--st-color-text-muted);
   line-height: 1.5;
 `;
+var sectionEyebrowStyles = css`
+  margin: 0 0 var(--st-space-12);
+  font-size: var(--st-text-sm);
+  font-weight: var(--st-font-weight-bold);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--st-color-accent-text);
+`;
 var ctaLinkStyles = css`
   display: inline-block;
+  box-sizing: border-box;
   padding: 12px 24px;
   border-radius: var(--st-radius-sm);
   font: inherit;
@@ -77,6 +86,7 @@ export {
   sectionSubtitleStyles,
   cardTitleStyles,
   cardDescriptionStyles,
+  sectionEyebrowStyles,
   ctaLinkStyles,
   paddingScaleStyles,
   sectionHeaderStyles,
@@ -84,4 +94,4 @@ export {
   reducedMotionStyles,
   invertedSectionTextStyles
 };
-//# sourceMappingURL=chunk-FZ36KL73.js.map
+//# sourceMappingURL=chunk-KZ7PMFWS.js.map

package/dist/chunk-KZ7PMFWS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/section-styles.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * CSS fragments shared by the CMS section components (hero, features, stats, ...), replacing the\n * source React library's global `Common.css` classes (`.section-title`, `.theme-inverted`, ...)\n * so each Lit component composes them into its own shadow root instead of re-declaring them.\n */\n\n/** Section heading + subheading typography. Use on `.title` / `.subtitle` selectors. */\nexport const sectionTitleStyles = css`\n  font-size: var(--st-cms-text-4xl);\n  font-weight: var(--st-font-weight-bold);\n  color: var(--st-color-text-strong);\n  margin: 0 0 var(--st-space-16);\n  line-height: 1.2;\n`;\n\nexport const sectionSubtitleStyles = css`\n  font-size: var(--st-cms-text-lg);\n  color: var(--st-color-text-muted);\n  line-height: 1.6;\n  margin: 0 0 var(--st-space-28);\n`;\n\n/** Card heading + body typography. */\nexport const cardTitleStyles = css`\n  font-size: var(--st-text-2xl);\n  font-weight: var(--st-font-weight-semibold);\n  color: var(--st-color-text-strong);\n  margin: 0 0 var(--st-space-8);\n`;\n\nexport const cardDescriptionStyles = css`\n  font-size: var(--st-text-md);\n  color: var(--st-color-text-muted);\n  line-height: 1.5;\n`;\n\n/**\n * Small uppercase, letter-spaced accent label above a section or content heading (\"HOW IT WORKS\").\n * Shared by `st-steps`, `st-section`, `st-content-block` and `st-features-section`. Inverted/dark\n * surfaces override the colour locally.\n */\nexport const sectionEyebrowStyles = css`\n  margin: 0 0 var(--st-space-12);\n  font-size: var(--st-text-sm);\n  font-weight: var(--st-font-weight-bold);\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  color: var(--st-color-accent-text);\n`;\n\n/**\n * Outlined call-to-action link/button used by hero, promo banner, features, ... Applies to both\n * `<a>` (when the CTA has an `href`) and `<button>`: `box-sizing` is pinned so an anchor sizes like\n * a button with the same padding.\n */\nexport const ctaLinkStyles = css`\n  display: inline-block;\n  box-sizing: border-box;\n  padding: 12px 24px;\n  border-radius: var(--st-radius-sm);\n  font: inherit;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n`;\n\n/** Maps the source's `padding` prop (none|small|medium|large) to `:host([padding=...])` rules. */\nexport const paddingScaleStyles = css`\n  :host([padding='small']) { padding: var(--st-space-16); }\n  :host([padding='medium']) { padding: var(--st-space-24); }\n  :host([padding='large']) { padding: var(--st-space-32); }\n`;\n\n/** Centered title/subtitle block above a section's content. Use on a `.header` wrapper. */\nexport const sectionHeaderStyles = css`\n  text-align: center;\n  margin-bottom: var(--st-space-48);\n`;\n\n/** Rounded icon tile (holds an `<iconify-icon>`) used by bento cards, feature lists, ... */\nexport const iconTileStyles = css`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--st-radius-lg);\n  background: var(--st-color-subtle);\n  color: var(--st-color-text-muted);\n`;\n\n/** Collapses CSS transitions/animations for users who prefer reduced motion. */\nexport const reducedMotionStyles = css`\n  @media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n      transition-duration: 0.01ms !important;\n      animation-duration: 0.01ms !important;\n    }\n  }\n`;\n\n/** Light-on-dark title/subtitle for an `inverted` section host. Place inside the host's `static styles`. */\nexport const invertedSectionTextStyles = css`\n  :host([inverted]) .title {\n    color: var(--st-color-on-solid);\n  }\n\n  :host([inverted]) .subtitle {\n    color: var(--st-color-border);\n  }\n`;\n"],"mappings":";AAAA,SAAS,WAAW;AASb,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ3B,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9B,IAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxB,IAAM,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAW9B,IAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc7B,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAO3B,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAM5B,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvB,IAAM,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY5B,IAAM,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/{chunk-EMCQBT3S.js → chunk-LO6TZBGD.js}

@@ -1,10 +1,10 @@
 import {
   reducedMotionStyles
-} from "./chunk-FZ36KL73.js";
+} from "./chunk-KZ7PMFWS.js";
 import {
   buttonResetStyles,
   controlBaseStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -12,6 +12,7 @@ import {
 // src/carousel/Carousel.ts
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 var Carousel = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -27,42 +28,62 @@ var Carousel = class extends LitElement {
     this.count = 0;
     this.slideLabels = [];
     this.userPaused = false;
-    /** Paused while hovered or focused. */
-    this.paused = false;
+    this.hovered = false;
+    this.focused = false;
+    this.turned = false;
     /** Time left on the current slide, so a pause resumes where it stopped. */
     this.remaining = 0;
     this.startedAt = 0;
-    this.pause = () => this.hold(() => this.paused = true);
-    this.pauseOnEnter = () => {
-      if (this.pauseOnHover) this.pause();
+    this.onReducedMotionChange = (event) => {
+      if (event.matches) this.hold(() => this.userPaused = true);
     };
-    this.resume = () => this.hold(() => this.paused = false);
-    this.togglePlay = () => this.hold(() => this.userPaused = !this.userPaused);
+    this.onPointerEnter = () => {
+      if (this.pauseOnHover) this.hold(() => this.hovered = true);
+    };
+    this.onPointerLeave = () => this.hold(() => this.hovered = false);
+    /** Focus inside the carousel pauses it (WCAG 2.2.2), but focusing the play button does not, so pressing play starts it. */
+    this.onFocusIn = (event) => {
+      const target = event.composedPath()[0];
+      const onPlay = target instanceof Element && target.classList.contains("play");
+      this.hold(() => this.focused = !onPlay);
+    };
+    this.onFocusOut = () => this.hold(() => this.focused = false);
+    this.togglePlay = () => this.hold(() => {
+      this.userPaused = !this.userPaused;
+      this.hovered = false;
+    });
   }
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener("mouseenter", this.pauseOnEnter);
-    this.addEventListener("mouseleave", this.resume);
-    this.addEventListener("focusin", this.pause);
-    this.addEventListener("focusout", this.resume);
+    if (!this.hasAttribute("role")) this.setAttribute("role", "region");
+    this.setAttribute("aria-roledescription", "carousel");
+    this.reducedMotion = typeof window !== "undefined" && window.matchMedia ? window.matchMedia(REDUCED_MOTION_QUERY) : void 0;
+    if (this.reducedMotion?.matches) this.hold(() => this.userPaused = true);
+    this.reducedMotion?.addEventListener("change", this.onReducedMotionChange);
+    this.addEventListener("mouseenter", this.onPointerEnter);
+    this.addEventListener("mouseleave", this.onPointerLeave);
+    this.addEventListener("focusin", this.onFocusIn);
+    this.addEventListener("focusout", this.onFocusOut);
   }
   disconnectedCallback() {
     this.stopTimer();
-    this.removeEventListener("mouseenter", this.pauseOnEnter);
-    this.removeEventListener("mouseleave", this.resume);
-    this.removeEventListener("focusin", this.pause);
-    this.removeEventListener("focusout", this.resume);
+    this.reducedMotion?.removeEventListener("change", this.onReducedMotionChange);
+    this.reducedMotion = void 0;
+    this.removeEventListener("mouseenter", this.onPointerEnter);
+    this.removeEventListener("mouseleave", this.onPointerLeave);
+    this.removeEventListener("focusin", this.onFocusIn);
+    this.removeEventListener("focusout", this.onFocusOut);
     super.disconnectedCallback();
   }
   willUpdate(changed) {
     if (changed.has("interval")) this.style.setProperty("--st-carousel-interval", `${this.interval}ms`);
   }
   updated(changed) {
-    if (changed.has("index") || changed.has("count") || changed.has("indicatorStyle") || changed.has("tabLabels")) this.syncSlides();
+    if (changed.has("index") || changed.has("count") || changed.has("indicatorStyle") || changed.has("tabLabels") || changed.has("turned")) this.syncSlides();
     if (changed.has("autoPlay") || changed.has("interval") || changed.has("count")) this.restartTimer();
   }
   get halted() {
-    return this.paused || this.userPaused;
+    return this.hovered || this.focused || this.userPaused;
   }
   /** Applies a pause-state change, freezing or resuming the timer (and the tab progress bar). */
   hold(update) {
@@ -85,16 +106,14 @@ var Carousel = class extends LitElement {
     return this.tabLabels[i] || this.slideLabels[i] || `Slide ${i + 1}`;
   }
   syncSlides() {
-    const tabs = this.indicatorStyle === "tabs";
-    this.slides.forEach((el, i) => {
-      el.toggleAttribute("data-st-active", i === this.index);
-      if (tabs) {
-        el.setAttribute("role", "tabpanel");
-        el.setAttribute("aria-label", this.labelFor(i));
-      } else if (el.getAttribute("role") === "tabpanel") {
-        el.removeAttribute("role");
-        el.removeAttribute("aria-label");
-      }
+    const slides = this.slides;
+    slides.forEach((el, i) => {
+      const active = i === this.index;
+      el.toggleAttribute("data-st-active", active);
+      el.toggleAttribute("data-st-still", active && !this.turned);
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-roledescription", "slide");
+      el.setAttribute("aria-label", `${i + 1} of ${slides.length}`);
     });
   }
   onSlotChange() {
@@ -102,8 +121,25 @@ var Carousel = class extends LitElement {
     this.count = slides.length;
     this.slideLabels = slides.map((el) => el.dataset.tabLabel || el.title || "");
     if (this.index >= this.count) this.index = 0;
+    this.preloadImage(slides[0]);
     this.syncSlides();
   }
+  /**
+   * The first slide's image is the one visitors see first, so it is preloaded at high priority. The
+   * other slides are display:none (their CSS backgrounds are not fetched) until they are shown.
+   */
+  preloadImage(slide) {
+    const src = slide?.imageSrc || slide?.getAttribute("image-src");
+    if (!src) return;
+    const preloaded = Array.from(document.head.querySelectorAll('link[rel="preload"]')).some((link2) => link2.getAttribute("href") === src);
+    if (preloaded) return;
+    const link = document.createElement("link");
+    link.rel = "preload";
+    link.as = "image";
+    link.href = src;
+    link.setAttribute("fetchpriority", "high");
+    document.head.append(link);
+  }
   stopTimer() {
     if (this.timer !== void 0) clearTimeout(this.timer);
     this.timer = void 0;
@@ -120,6 +156,7 @@ var Carousel = class extends LitElement {
   }
   go(target, direction) {
     if (this.count === 0) return;
+    this.turned = true;
     this.setAttribute("data-direction", direction);
     this.index = (target + this.count) % this.count;
     this.dispatchEvent(
@@ -155,6 +192,7 @@ var Carousel = class extends LitElement {
                 part="tab"
                 type="button"
                 role="tab"
+                aria-label=${this.labelFor(i)}
                 class="tab ${active ? "active" : ""} ${running ? "running" : ""}"
                 aria-selected=${active ? "true" : "false"}
                 tabindex=${active ? 0 : -1}
@@ -197,7 +235,10 @@ var Carousel = class extends LitElement {
   render() {
     const multiple = this.count > 1;
     return html`
-      <slot @slotchange=${this.onSlotChange}></slot>
+      <div class="viewport" part="viewport">
+        <slot @slotchange=${this.onSlotChange}></slot>
+      </div>
+      ${multiple ? html`<div class="sr-only" aria-live=${this.halted ? "polite" : "off"} aria-atomic="true">${this.index + 1} of ${this.count}</div>` : nothing}
       ${this.showArrows && multiple ? html`
             <button part="nav-button prev" class="nav prev" aria-label="Previous Slide" @click=${() => this.go(this.index - 1, "prev")}>&#10094;</button>
             <button part="nav-button next" class="nav next" aria-label="Next Slide" @click=${() => this.go(this.index + 1, "next")}>&#10095;</button>
@@ -218,22 +259,51 @@ Carousel.styles = css`
 
     ::slotted(*) {
       display: none !important;
+      box-sizing: border-box;
+      width: 100%;
+      min-width: 100%;
+      max-width: 100%;
+    }
+
+    /* The slides sit in a clipping viewport and each is exactly the carousel's width, so the next
+       slide never shows at the edge; the slide animations move inside the viewport. */
+    .viewport {
+      position: relative;
+      width: 100%;
+      overflow: hidden;
     }
 
     ::slotted([data-st-active]) {
       display: block !important;
+    }
+
+    /* data-st-still (set on the first slide until the first change) keeps the entrance off on first
+       paint, so the copy is there at once; later changes animate. */
+    ::slotted([data-st-active]:not([data-st-still])) {
       animation: st-carousel-in-next 0.4s ease both;
     }
 
-    :host([data-direction='prev']) ::slotted([data-st-active]) {
+    :host([data-direction='prev']) ::slotted([data-st-active]:not([data-st-still])) {
       animation-name: st-carousel-in-prev;
     }
 
-    :host([transition='fade']) ::slotted([data-st-active]),
-    :host([transition='fade'][data-direction]) ::slotted([data-st-active]) {
+    :host([transition='fade']) ::slotted([data-st-active]:not([data-st-still])),
+    :host([transition='fade'][data-direction]) ::slotted([data-st-active]:not([data-st-still])) {
       animation: st-carousel-fade 0.7s ease both;
     }
 
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
     @keyframes st-carousel-in-next {
       from {
         transform: translateX(10%);
@@ -366,6 +436,7 @@ Carousel.styles = css`
 
     .tab {
       ${buttonResetStyles}
+      position: relative;
       display: flex;
       flex-direction: column;
       gap: var(--st-space-12);
@@ -390,6 +461,19 @@ Carousel.styles = css`
       outline-offset: 4px;
     }
 
+    /* Touch targets: the tab and the pause button keep their look; a pseudo-element extends the tap
+       area to at least 44x44 CSS px. */
+    .tab::after,
+    .play::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 44px);
+      height: max(100%, 44px);
+      transform: translate(-50%, -50%);
+    }
+
     .progress {
       position: relative;
       display: block;
@@ -430,6 +514,7 @@ Carousel.styles = css`
 
     .play {
       ${buttonResetStyles}
+      position: relative;
       flex: none;
       display: inline-flex;
       align-items: center;
@@ -481,7 +566,7 @@ Carousel.styles = css`
     ${reducedMotionStyles}
     @media (prefers-reduced-motion: reduce) {
       ::slotted([data-st-active]) {
-        animation: none;
+        animation: none !important;
       }
       .tab.active.running .fill {
         animation: none;
@@ -524,6 +609,15 @@ __decorateClass([
 __decorateClass([
   state()
 ], Carousel.prototype, "userPaused", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "hovered", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "focused", 2);
+__decorateClass([
+  state()
+], Carousel.prototype, "turned", 2);
 Carousel = __decorateClass([
   customElement("st-carousel")
 ], Carousel);
@@ -531,4 +625,4 @@ Carousel = __decorateClass([
 export {
   Carousel
 };
-//# sourceMappingURL=chunk-EMCQBT3S.js.map
+//# sourceMappingURL=chunk-LO6TZBGD.js.map