@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/{chunk-7NLZND6Q.js → chunk-GOFSMD6W.js}

@@ -1,11 +1,12 @@
 import {
+  sectionEyebrowStyles,
   sectionSubtitleStyles,
   sectionTitleStyles
-} from "./chunk-FZ36KL73.js";
+} from "./chunk-KZ7PMFWS.js";
 import {
   controlBaseStyles,
   rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -23,6 +24,7 @@ var Section = class extends LitElement {
     this.spacingAbove = "m";
     this.spacingBelow = "m";
     this.width = "contained";
+    this.columns = 1;
     this.textAlignment = "left";
   }
   render() {
@@ -34,7 +36,9 @@ var Section = class extends LitElement {
               ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
               ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
             </div>` : nothing}
-        <slot></slot>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
       </div>
     `;
   }
@@ -109,6 +113,18 @@ Section.styles = css`
       max-width: none;
     }
 
+    /* columns="2": the slotted children sit in two equal columns; they stack below 720px. */
+    .content {
+      display: block;
+    }
+
+    :host([columns='2']) .content {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: var(--st-space-48);
+      align-items: start;
+    }
+
     .header {
       margin-bottom: var(--st-space-48);
     }
@@ -129,12 +145,7 @@ Section.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 {
@@ -154,7 +165,10 @@ Section.styles = css`
       margin-bottom: 0;
     }
 
-    :host([background='dark']) .eyebrow,
+    :host([background='dark']) .eyebrow {
+      color: var(--st-cms-highlight);
+    }
+
     :host([background='dark']) .subtitle {
       color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);
     }
@@ -164,6 +178,13 @@ Section.styles = css`
       color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);
     }
 
+    @media (max-width: 720px) {
+      :host([columns='2']) .content {
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--st-space-24);
+      }
+    }
+
     @media (max-width: 768px) {
       :host {
         --st-section-space-l: 3.5rem;
@@ -194,6 +215,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], Section.prototype, "width", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], Section.prototype, "columns", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "text-alignment" })
 ], Section.prototype, "textAlignment", 2);
@@ -204,4 +228,4 @@ Section = __decorateClass([
 export {
   Section
 };
-//# sourceMappingURL=chunk-7NLZND6Q.js.map
+//# sourceMappingURL=chunk-GOFSMD6W.js.map

package/dist/chunk-GOFSMD6W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section/Section.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { sectionEyebrowStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\n\n/**\n * A page band that holds other content: sets the background, the spacing above and below, and\n * the content width, with an optional eyebrow/title/subtitle heading over its slotted children.\n * Use it to give a run of components one dark or tinted backdrop and a consistent vertical rhythm,\n * the way enterprise marketing pages stack full-width sections.\n *\n * @slot - The section's content.\n * @cssprop --st-section-bg - Overrides the background colour picked by `background`.\n * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width=\"full\"`).\n * @csspart inner - The width-limited content box.\n * @csspart header - The heading block.\n * @csspart content - The wrapper around the slot (the grid when `columns` is 2).\n */\n@customElement('st-section')\nexport class Section extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      --st-section-space-none: 0;\n      --st-section-space-s: var(--st-space-24);\n      --st-section-space-m: var(--st-space-48);\n      --st-section-space-l: 4.5rem;\n      --st-section-space-xl: 6rem;\n      --st-section-space-xxl: 8rem;\n\n      display: block;\n      box-sizing: border-box;\n      width: 100%;\n      /* !important on every padding rule: a page-level reset (e.g. Tailwind Preflight) otherwise\n         zeroes a shadow host's padding. Rescale it with the --st-section-space-* tokens. */\n      padding: var(--st-section-space-m) var(--st-section-padding-inline, var(--st-space-24)) !important;\n      background: var(--st-section-bg, var(--st-color-surface));\n      color: var(--st-color-text-strong);\n      ${rootFontFamilyStyles}\n    }\n\n    :host([background='subtle']) {\n      background: var(--st-section-bg, var(--st-color-subtle));\n    }\n\n    :host([background='dark']) {\n      background: var(--st-section-bg, var(--st-cms-band-dark-bg));\n      color: var(--st-cms-band-dark-color);\n    }\n\n    :host([background='accent']) {\n      background: var(--st-section-bg, var(--st-color-accent));\n      color: var(--st-color-on-solid);\n    }\n\n    :host([background='transparent']) {\n      background: var(--st-section-bg, transparent);\n    }\n\n    :host([spacing-above='none']) { padding-top: var(--st-section-space-none) !important; }\n    :host([spacing-above='s']) { padding-top: var(--st-section-space-s) !important; }\n    :host([spacing-above='l']) { padding-top: var(--st-section-space-l) !important; }\n    :host([spacing-above='xl']) { padding-top: var(--st-section-space-xl) !important; }\n    :host([spacing-above='xxl']) { padding-top: var(--st-section-space-xxl) !important; }\n\n    :host([spacing-below='none']) { padding-bottom: var(--st-section-space-none) !important; }\n    :host([spacing-below='s']) { padding-bottom: var(--st-section-space-s) !important; }\n    :host([spacing-below='l']) { padding-bottom: var(--st-section-space-l) !important; }\n    :host([spacing-below='xl']) { padding-bottom: var(--st-section-space-xl) !important; }\n    :host([spacing-below='xxl']) { padding-bottom: var(--st-section-space-xxl) !important; }\n\n    :host([width='full']) {\n      padding-left: 0 !important;\n      padding-right: 0 !important;\n    }\n\n    .inner {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    :host([width='narrow']) .inner {\n      max-width: 800px;\n    }\n\n    :host([width='full']) .inner {\n      max-width: none;\n    }\n\n    /* columns=\"2\": the slotted children sit in two equal columns; they stack below 720px. */\n    .content {\n      display: block;\n    }\n\n    :host([columns='2']) .content {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: var(--st-space-48);\n      align-items: start;\n    }\n\n    .header {\n      margin-bottom: var(--st-space-48);\n    }\n\n    :host([text-alignment='center']) .header {\n      text-align: center;\n    }\n\n    :host([text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    :host([width='full']) .header {\n      max-width: var(--st-cms-container-max);\n      margin-inline: auto;\n      padding-inline: var(--st-space-24);\n      box-sizing: border-box;\n    }\n\n    .eyebrow {\n      ${sectionEyebrowStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      color: inherit;\n      letter-spacing: -0.02em;\n      max-width: 24ch;\n    }\n\n    :host([text-alignment='center']) .title {\n      margin-inline: auto;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n      max-width: 60ch;\n      margin-bottom: 0;\n    }\n\n    :host([background='dark']) .eyebrow {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([background='dark']) .subtitle {\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 80%, transparent);\n    }\n\n    :host([background='accent']) .eyebrow,\n    :host([background='accent']) .subtitle {\n      color: color-mix(in oklch, var(--st-color-on-solid) 80%, transparent);\n    }\n\n    @media (max-width: 720px) {\n      :host([columns='2']) .content {\n        grid-template-columns: minmax(0, 1fr);\n        gap: var(--st-space-24);\n      }\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        --st-section-space-l: 3.5rem;\n        --st-section-space-xl: 4.5rem;\n        --st-section-space-xxl: 5.5rem;\n        --st-section-padding-inline: var(--st-space-20);\n      }\n    }\n  `;\n\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** `default` (page surface), `subtle`, `dark`, `accent` or `transparent`. */\n  @property({ type: String, reflect: true })\n  background: 'default' | 'subtle' | 'dark' | 'accent' | 'transparent' = 'default';\n\n  /** Space above the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-above' })\n  spacingAbove: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** Space below the content: `none`, `s`, `m` (default), `l`, `xl` or `xxl`. */\n  @property({ type: String, reflect: true, attribute: 'spacing-below' })\n  spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm';\n\n  /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */\n  @property({ type: String, reflect: true })\n  width: 'contained' | 'narrow' | 'full' = 'contained';\n\n  /** Columns for the slotted children: `1` (default, stacked) or `2` (two equal columns, stacked again below 720px). */\n  @property({ type: Number, reflect: true })\n  columns: 1 | 2 = 1;\n\n  /** Alignment of the heading. */\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' = 'left';\n\n  render() {\n    const heading = this.eyebrow || this.title || this.subtitle;\n    return html`\n      <div class=\"inner\" part=\"inner\">\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        <div class=\"content\" part=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAmBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AA0JL,mBAAU;AAGV,iBAAQ;AAGR,oBAAW;AAIX,sBAAuE;AAIvE,wBAAwD;AAIxD,wBAAwD;AAIxD,iBAAyC;AAIzC,mBAAiB;AAIjB,yBAAmC;AAAA;AAAA,EAEnC,SAAS;AACP,UAAM,UAAU,KAAK,WAAW,KAAK,SAAS,KAAK;AACnD,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;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB;AACF;AA3Ma,QACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAkBf,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAmFpB,oBAAoB;AAAA;AAAA;AAAA;AAAA,QAIpB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAWlB,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;AAoC3B;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzJf,QA0JX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Jf,QA6JX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Jf,QAgKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnK9B,QAoKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GAvK1D,QAwKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB,CAAC;AAAA,GA3K1D,QA4KX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA/K9B,QAgLX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnL9B,QAoLX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,iBAAiB,CAAC;AAAA,GAvL3D,QAwLX;AAxLW,UAAN;AAAA,EADN,cAAc,YAAY;AAAA,GACd;","names":[]}

package/dist/{chunk-6D6ROU7X.js → chunk-IGMVF3KK.js}

@@ -1,7 +1,7 @@
 import {
   cardShellStyles,
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -191,4 +191,4 @@ KpiCard = __decorateClass([
 export {
   KpiCard
 };
-//# sourceMappingURL=chunk-6D6ROU7X.js.map
+//# sourceMappingURL=chunk-IGMVF3KK.js.map

package/dist/{chunk-INMSEYT6.js → chunk-IVPVYVWG.js}

@@ -1,6 +1,6 @@
 import {
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -84,4 +84,4 @@ DateTile = __decorateClass([
 export {
   DateTile
 };
-//# sourceMappingURL=chunk-INMSEYT6.js.map
+//# sourceMappingURL=chunk-IVPVYVWG.js.map

package/dist/chunk-JURCF4OD.js

@@ -0,0 +1,381 @@
+import {
+  renderMarkdown
+} from "./chunk-TJK55CJ2.js";
+import {
+  sectionEyebrowStyles,
+  sectionHeaderStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-KZ7PMFWS.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// 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);
+    this.eyebrow = "";
+    this.title = "";
+    this.subtitle = "";
+    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;
+    const last = this.items.length - 1;
+    return html`
+      <div class="container" part="container">
+        ${heading ? html`<div class="header" part="header">
+              ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
+              ${this.title ? html`<h2 class="title" part="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <ol class="grid" part="grid" aria-label=${this.title || nothing}>
+          ${this.items.map(
+      (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>
+                ${this.renderTitle(step)}
+                ${this.renderDescription(step)}
+              </li>
+            `
+    )}
+        </ol>
+      </div>
+    `;
+  }
+};
+Steps.styles = css`
+    ${controlBaseStyles}
+    /* fontFamilyStyles is a bare declaration: it must sit inside a rule, or it swallows the next one. */
+    :host {
+      ${fontFamilyStyles}
+    }
+
+    :host {
+      display: block;
+      box-sizing: border-box;
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-steps-padding instead. */
+      padding: var(--st-steps-padding, var(--st-cms-section-padding) var(--st-space-24)) !important;
+      background: var(--st-color-page);
+    }
+
+    :host([inverted]) {
+      background: var(--st-cms-band-dark-bg);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      ${sectionHeaderStyles}
+    }
+
+    .eyebrow {
+      ${sectionEyebrowStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      color: inherit;
+      letter-spacing: -0.02em;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+      max-width: 60ch;
+      margin: 0 auto;
+    }
+
+    .grid {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+      gap: var(--st-space-24);
+    }
+
+    .card {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-12);
+      box-sizing: border-box;
+      margin: 0;
+      padding: var(--st-space-32);
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-lg);
+      background: var(--st-color-surface);
+      color: var(--st-color-text);
+    }
+
+    .number {
+      font-size: var(--st-cms-text-3xl);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1;
+      letter-spacing: -0.02em;
+      color: var(--st-color-accent);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .card-title {
+      margin: var(--st-space-8) 0 0;
+      font-size: var(--st-text-xl);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.3;
+      color: var(--st-color-text-strong);
+    }
+
+    .description {
+      margin: 0;
+      font-size: var(--st-text-md);
+      line-height: 1.6;
+      color: var(--st-color-text-muted);
+    }
+
+    /* inverted: a dark band with light cards; the number moves to the cyan highlight so it reads on navy. */
+    :host([inverted]) .card {
+      background: color-mix(in oklch, var(--st-cms-band-dark-color) 6%, transparent);
+      border-color: color-mix(in oklch, var(--st-cms-band-dark-color) 16%, transparent);
+    }
+
+    :host([inverted]) .number {
+      color: var(--st-cms-highlight);
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .card-title {
+      color: var(--st-cms-band-dark-color);
+    }
+
+    :host([inverted]) .eyebrow,
+    :host([inverted]) .subtitle,
+    :host([inverted]) .description {
+      color: color-mix(in oklch, var(--st-cms-band-dark-color) 75%, transparent);
+    }
+
+    /* highlightLast: the final card is the dark call-out. Declared after the inverted rules so it wins. */
+    .card.highlight {
+      background: var(--st-cms-navy);
+      border-color: var(--st-cms-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .card.highlight .number {
+      color: var(--st-cms-highlight);
+    }
+
+    .card.highlight .card-title {
+      color: var(--st-cms-on-dark);
+    }
+
+    .card.highlight .description {
+      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;
+      }
+      .card {
+        padding: var(--st-space-24);
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], Steps.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], Steps.prototype, "items", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "highlight-last" })
+], Steps.prototype, "highlightLast", 2);
+__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);
+
+export {
+  Steps
+};
+//# 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":[]}