@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-FF2LWEF3.js

@@ -0,0 +1,386 @@
+import {
+  QUOTE_OPEN_EVENT
+} from "./chunk-FOUK3NHR.js";
+import {
+  sectionEyebrowStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-KZ7PMFWS.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/plan-cards/PlanCards.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "iconify-icon";
+var CHECK_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12l5 5L20 7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
+var FOOTNOTE_ACTION_TOKEN = "{action}";
+var PlanCards = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.eyebrow = "";
+    this.title = "";
+    this.subtitle = "";
+    this.items = [];
+    this.footnote = "";
+    this.footnoteActionLabel = "";
+    this.quoteDialog = "";
+  }
+  /** Fires the window `st-quote-open` event for the dialog. The page does not navigate. */
+  openQuote(event, option) {
+    if (!this.quoteDialog) return;
+    const detail = {
+      dialog: this.quoteDialog,
+      option,
+      trigger: event.currentTarget
+    };
+    window.dispatchEvent(new CustomEvent(QUOTE_OPEN_EVENT, { detail }));
+  }
+  renderFootnoteAction() {
+    return html`<button class="link-action" part="footnote-action" type="button" @click=${(event) => this.openQuote(event, "unsure")}>
+      ${this.footnoteActionLabel}
+    </button>`;
+  }
+  renderAction(item) {
+    const className = `action${item.featured ? " featured" : ""}`;
+    if (this.quoteDialog) {
+      return html`<button class=${className} part="action" type="button" @click=${(event) => this.openQuote(event, item.id)}>
+        ${item.actionLabel}
+      </button>`;
+    }
+    return html`<a class=${className} part="action" href=${item.href || "#"}>${item.actionLabel}</a>`;
+  }
+  renderCard(item) {
+    const tone = item.badgeTone ?? "primary";
+    return html`<article class="card ${item.featured ? "featured" : ""}" part="card">
+      ${item.icon ? html`<div class="icon" part="icon" aria-hidden="true"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}
+      <div class="title-row">
+        <h3 class="card-title">${item.title}</h3>
+        ${item.badge ? html`<span class="badge ${tone}" part="badge">${item.badge}</span>` : nothing}
+      </div>
+      ${item.description ? html`<p class="description">${item.description}</p>` : nothing}
+      ${item.bullets?.length ? html`<ul class="bullets">
+            ${item.bullets.map((bullet) => html`<li>${CHECK_ICON}<span>${bullet}</span></li>`)}
+          </ul>` : nothing}
+      ${this.renderAction(item)}
+    </article>`;
+  }
+  /** `{action}` in the footnote becomes the inline text button; otherwise Markdown, then the button. */
+  renderFootnote() {
+    const hasAction = !!this.footnoteActionLabel && !!this.quoteDialog;
+    if (this.footnote.includes(FOOTNOTE_ACTION_TOKEN)) {
+      const [before, ...after] = this.footnote.split(FOOTNOTE_ACTION_TOKEN);
+      return html`<p class="footnote-text">${before}${hasAction ? this.renderFootnoteAction() : nothing}${after.join(FOOTNOTE_ACTION_TOKEN)}</p>`;
+    }
+    return html`${this.footnote ? html`<st-markdown .content=${this.footnote}></st-markdown>` : nothing}
+      ${hasAction ? this.renderFootnoteAction() : nothing}`;
+  }
+  render() {
+    return html`
+      <div class="container" part="container">
+        ${this.eyebrow || this.title || this.subtitle ? html`<div class="header" part="header">
+              ${this.eyebrow ? html`<p class="eyebrow">${this.eyebrow}</p>` : nothing}
+              ${this.title ? html`<h2 class="title">${this.title}</h2>` : nothing}
+              ${this.subtitle ? html`<p class="lead">${this.subtitle}</p>` : nothing}
+            </div>` : nothing}
+        <div class="grid" part="grid">${this.items.map((item) => this.renderCard(item))}</div>
+        ${this.footnote || this.footnoteActionLabel && this.quoteDialog ? html`<div class="footnote" part="footnote">${this.renderFootnote()}</div>` : nothing}
+      </div>
+    `;
+  }
+};
+PlanCards.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 and borders; override with --st-plan-cards-padding instead. */
+      padding: var(--st-plan-cards-padding, 80px 24px) !important;
+      border-top: 1px solid var(--st-cms-primary-100, #e4ebff) !important;
+      border-bottom: 1px solid var(--st-cms-primary-100, #e4ebff) !important;
+      background: var(--st-color-surface, #ffffff);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+    }
+
+    .header {
+      max-width: 720px;
+      margin-bottom: var(--st-space-48);
+    }
+
+    .eyebrow {
+      ${sectionEyebrowStyles}
+      font-size: 12px;
+      color: var(--st-cms-eyebrow, var(--st-cms-navy-2-border));
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: -0.02em;
+    }
+
+    .lead {
+      ${sectionSubtitleStyles}
+      margin: 0;
+      color: var(--st-plan-cards-lead-color, var(--st-cms-text, var(--st-cms-navy-2)));
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: var(--st-space-24);
+      align-items: stretch;
+    }
+
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      box-sizing: border-box;
+      padding: var(--st-space-32);
+      border: 1px solid var(--st-cms-primary-200);
+      border-radius: 24px;
+      background: var(--st-cms-surface-soft);
+      color: var(--st-color-text);
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 16px 32px -16px var(--st-shadow-color-lg);
+    }
+
+    .card.featured {
+      border: 2px solid var(--st-cms-brand-navy);
+      background: var(--st-color-surface);
+      box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
+    }
+
+    .card.featured:hover {
+      box-shadow: 0 28px 40px -12px #00000029, 0 14px 20px -8px #0000000f;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: none;
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      background: var(--st-cms-primary-100);
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font-size: 26px;
+    }
+
+    .card:not(.featured) .icon {
+      background: var(--st-color-surface);
+    }
+
+    .title-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .card-title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.25;
+      color: var(--st-color-text-strong);
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 3px 10px;
+      border-radius: var(--st-radius-full);
+      background: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+      font-size: 12px;
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.4;
+      white-space: nowrap;
+    }
+
+    .badge.highlight {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .description {
+      margin: 0;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .bullets {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .bullets li {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      font-size: 15px;
+      line-height: 1.5;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .bullets svg {
+      flex: none;
+      width: 20px;
+      height: 20px;
+      margin-top: 3px;
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+    }
+
+    .action {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 48px;
+      margin-top: auto;
+      padding: 0 var(--st-space-24);
+      border: 1px solid var(--st-cms-brand-navy);
+      border-radius: var(--st-radius-full);
+      background: var(--st-color-surface);
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font: inherit;
+      font-size: 16px;
+      font-weight: var(--st-font-weight-semibold);
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+    }
+
+    .action.featured {
+      background: var(--st-cms-brand-navy);
+      border-color: var(--st-cms-brand-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .action:hover {
+      transform: scale(1.02);
+    }
+
+    .action:focus-visible,
+    .link-action:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    .footnote {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--st-space-8);
+      margin-top: var(--st-space-48);
+      text-align: center;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    .footnote-text {
+      margin: 0;
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    .footnote st-markdown {
+      text-align: center;
+      font-size: 15px;
+      color: var(--st-cms-text, var(--st-cms-navy-2));
+    }
+
+    /* Inline with the sentence: the text size, line height and baseline come from the paragraph. The
+       44px tap target comes from padding, cancelled by a negative margin, so the line does not grow. */
+    .link-action {
+      display: inline-block;
+      vertical-align: baseline;
+      padding: 12px 2px;
+      margin: -12px -2px;
+      border: 0;
+      background: transparent;
+      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));
+      font: inherit;
+      font-size: inherit;
+      line-height: inherit;
+      font-weight: var(--st-font-weight-semibold);
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      cursor: pointer;
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        padding: var(--st-plan-cards-padding, 48px 24px) !important;
+      }
+
+      .card {
+        padding: var(--st-space-24);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card,
+      .action {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], PlanCards.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], PlanCards.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], PlanCards.prototype, "subtitle", 2);
+__decorateClass([
+  property({ attribute: false })
+], PlanCards.prototype, "items", 2);
+__decorateClass([
+  property({ type: String })
+], PlanCards.prototype, "footnote", 2);
+__decorateClass([
+  property({ type: String, attribute: "footnote-action-label" })
+], PlanCards.prototype, "footnoteActionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "quote-dialog" })
+], PlanCards.prototype, "quoteDialog", 2);
+PlanCards = __decorateClass([
+  customElement("st-plan-cards")
+], PlanCards);
+
+export {
+  PlanCards
+};
+//# sourceMappingURL=chunk-FF2LWEF3.js.map

package/dist/chunk-FF2LWEF3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/plan-cards/PlanCards.ts"],"sourcesContent":["import { LitElement, css, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { sectionEyebrowStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport '../markdown';\nimport { QUOTE_OPEN_EVENT, type QuoteOpenEventDetail } from '../quote-dialog/QuoteDialogEvents';\n\nconst CHECK_ICON = svg`<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M5 12l5 5L20 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>`;\n\n/** Placeholder in `footnote` where the `footnote-action-label` button is placed inline. */\nconst FOOTNOTE_ACTION_TOKEN = '{action}';\n\nexport interface PlanCardItem {\n  id: string;\n  /** Iconify icon name, e.g. `mdi:rocket-launch`. */\n  icon?: string;\n  title: string;\n  /** Small pill beside the title, e.g. \"Most popular\". */\n  badge?: string;\n  /** `highlight` (cyan, navy text) or `primary` (navy, white text). Default `primary`. */\n  badgeTone?: 'highlight' | 'primary';\n  description?: string;\n  bullets?: string[];\n  /** Label of the card's button. */\n  actionLabel: string;\n  /** Target of the button when the cards have no `quoteDialog`. */\n  href?: string;\n  /** The highlighted card: white with a 2px navy border and a navy button. */\n  featured?: boolean;\n}\n\n/**\n * A row of plan or offer cards with a header above them. Each card has an icon, a title with an\n * optional badge, a description, check-marked bullets and a button at the foot of the card.\n *\n * A button opens a `st-quote-dialog` when `quote-dialog` names its `id`: it fires a window\n * `st-quote-open` event with `{ dialog, option: item.id, trigger }` and does not navigate. Without\n * `quote-dialog`, the button is a link to `href`. The footnote's action (`footnote-action-label`)\n * opens the same dialog with the option `unsure`. Put `{action}` in `footnote` to place that button\n * inside the sentence (the text around it is then plain text, not Markdown); without the token the\n * button follows the footnote.\n *\n * @cssprop --st-plan-cards-padding - Overrides the block's padding.\n * @cssprop --st-plan-cards-lead-color - Colour of the line under the title (default `--st-cms-text`).\n * @csspart header - The eyebrow, title and lead block.\n * @csspart grid - The grid of cards.\n * @csspart card - One plan card.\n * @csspart icon - The icon tile.\n * @csspart badge - The pill beside a card title.\n * @csspart action - The card button (a `<button>` with `quote-dialog`, otherwise a link with `href`).\n * @csspart footnote - The footnote under the cards.\n * @csspart footnote-action - The text button in the footnote.\n */\n@customElement('st-plan-cards')\nexport class PlanCards 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 and borders; override with --st-plan-cards-padding instead. */\n      padding: var(--st-plan-cards-padding, 80px 24px) !important;\n      border-top: 1px solid var(--st-cms-primary-100, #e4ebff) !important;\n      border-bottom: 1px solid var(--st-cms-primary-100, #e4ebff) !important;\n      background: var(--st-color-surface, #ffffff);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n    }\n\n    .header {\n      max-width: 720px;\n      margin-bottom: var(--st-space-48);\n    }\n\n    .eyebrow {\n      ${sectionEyebrowStyles}\n      font-size: 12px;\n      color: var(--st-cms-eyebrow, var(--st-cms-navy-2-border));\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: -0.02em;\n    }\n\n    .lead {\n      ${sectionSubtitleStyles}\n      margin: 0;\n      color: var(--st-plan-cards-lead-color, var(--st-cms-text, var(--st-cms-navy-2)));\n    }\n\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n      gap: var(--st-space-24);\n      align-items: stretch;\n    }\n\n    .card {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      box-sizing: border-box;\n      padding: var(--st-space-32);\n      border: 1px solid var(--st-cms-primary-200);\n      border-radius: 24px;\n      background: var(--st-cms-surface-soft);\n      color: var(--st-color-text);\n      transition: transform 0.3s ease, box-shadow 0.3s ease;\n    }\n\n    .card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 16px 32px -16px var(--st-shadow-color-lg);\n    }\n\n    .card.featured {\n      border: 2px solid var(--st-cms-brand-navy);\n      background: var(--st-color-surface);\n      box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;\n    }\n\n    .card.featured:hover {\n      box-shadow: 0 28px 40px -12px #00000029, 0 14px 20px -8px #0000000f;\n    }\n\n    .icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: none;\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      background: var(--st-cms-primary-100);\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n      font-size: 26px;\n    }\n\n    .card:not(.featured) .icon {\n      background: var(--st-color-surface);\n    }\n\n    .title-row {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .card-title {\n      margin: 0;\n      font-size: 24px;\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.25;\n      color: var(--st-color-text-strong);\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 3px 10px;\n      border-radius: var(--st-radius-full);\n      background: var(--st-cms-brand-navy);\n      color: var(--st-cms-on-dark);\n      font-size: 12px;\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.4;\n      white-space: nowrap;\n    }\n\n    .badge.highlight {\n      background: var(--st-cms-highlight);\n      color: var(--st-cms-navy);\n    }\n\n    .description {\n      margin: 0;\n      font-size: 16px;\n      line-height: 1.6;\n      color: var(--st-cms-text, var(--st-cms-navy-2));\n    }\n\n    .bullets {\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n      margin: 0;\n      padding: 0;\n      list-style: none;\n    }\n\n    .bullets li {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      font-size: 15px;\n      line-height: 1.5;\n      color: var(--st-cms-text, var(--st-cms-navy-2));\n    }\n\n    .bullets svg {\n      flex: none;\n      width: 20px;\n      height: 20px;\n      margin-top: 3px;\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n    }\n\n    .action {\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 100%;\n      min-height: 48px;\n      margin-top: auto;\n      padding: 0 var(--st-space-24);\n      border: 1px solid var(--st-cms-brand-navy);\n      border-radius: var(--st-radius-full);\n      background: var(--st-color-surface);\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n      font: inherit;\n      font-size: 16px;\n      font-weight: var(--st-font-weight-semibold);\n      text-align: center;\n      text-decoration: none;\n      cursor: pointer;\n      transition: transform 0.2s ease;\n    }\n\n    .action.featured {\n      background: var(--st-cms-brand-navy);\n      border-color: var(--st-cms-brand-navy);\n      color: var(--st-cms-on-dark);\n    }\n\n    .action:hover {\n      transform: scale(1.02);\n    }\n\n    .action:focus-visible,\n    .link-action:focus-visible {\n      outline: var(--st-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .footnote {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--st-space-8);\n      margin-top: var(--st-space-48);\n      text-align: center;\n      color: var(--st-cms-text, var(--st-cms-navy-2));\n    }\n\n    .footnote-text {\n      margin: 0;\n      font-size: 15px;\n      line-height: 1.6;\n    }\n\n    .footnote st-markdown {\n      text-align: center;\n      font-size: 15px;\n      color: var(--st-cms-text, var(--st-cms-navy-2));\n    }\n\n    /* Inline with the sentence: the text size, line height and baseline come from the paragraph. The\n       44px tap target comes from padding, cancelled by a negative margin, so the line does not grow. */\n    .link-action {\n      display: inline-block;\n      vertical-align: baseline;\n      padding: 12px 2px;\n      margin: -12px -2px;\n      border: 0;\n      background: transparent;\n      color: var(--st-cms-accent-text, var(--st-cms-brand-navy));\n      font: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      font-weight: var(--st-font-weight-semibold);\n      text-decoration: underline;\n      text-underline-offset: 4px;\n      cursor: pointer;\n    }\n\n    @media (max-width: 600px) {\n      :host {\n        padding: var(--st-plan-cards-padding, 48px 24px) !important;\n      }\n\n      .card {\n        padding: var(--st-space-24);\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card,\n      .action {\n        transition: none;\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  /** The line under the title. */\n  @property({ type: String })\n  subtitle = '';\n\n  /** The cards, in order. */\n  @property({ attribute: false })\n  items: PlanCardItem[] = [];\n\n  /** Markdown under the cards, centred. Put `{action}` where the footnote's text button goes. */\n  @property({ type: String })\n  footnote = '';\n\n  /** Label of a text button after the footnote. Opens the quote dialog with the option `unsure`. */\n  @property({ type: String, attribute: 'footnote-action-label' })\n  footnoteActionLabel = '';\n\n  /** `id` of a `st-quote-dialog`. Set, the card buttons open that dialog instead of linking. */\n  @property({ type: String, attribute: 'quote-dialog' })\n  quoteDialog = '';\n\n  /** Fires the window `st-quote-open` event for the dialog. The page does not navigate. */\n  private openQuote(event: Event, option: string): void {\n    if (!this.quoteDialog) return;\n    const detail: QuoteOpenEventDetail = {\n      dialog: this.quoteDialog,\n      option,\n      trigger: event.currentTarget as HTMLElement\n    };\n    window.dispatchEvent(new CustomEvent<QuoteOpenEventDetail>(QUOTE_OPEN_EVENT, { detail }));\n  }\n\n  private renderFootnoteAction() {\n    return html`<button class=\"link-action\" part=\"footnote-action\" type=\"button\" @click=${(event: Event) => this.openQuote(event, 'unsure')}>\n      ${this.footnoteActionLabel}\n    </button>`;\n  }\n\n  private renderAction(item: PlanCardItem) {\n    const className = `action${item.featured ? ' featured' : ''}`;\n    if (this.quoteDialog) {\n      return html`<button class=${className} part=\"action\" type=\"button\" @click=${(event: Event) => this.openQuote(event, item.id)}>\n        ${item.actionLabel}\n      </button>`;\n    }\n    return html`<a class=${className} part=\"action\" href=${item.href || '#'}>${item.actionLabel}</a>`;\n  }\n\n  private renderCard(item: PlanCardItem) {\n    const tone = item.badgeTone ?? 'primary';\n    return html`<article class=\"card ${item.featured ? 'featured' : ''}\" part=\"card\">\n      ${item.icon ? html`<div class=\"icon\" part=\"icon\" aria-hidden=\"true\"><iconify-icon icon=${item.icon}></iconify-icon></div>` : nothing}\n      <div class=\"title-row\">\n        <h3 class=\"card-title\">${item.title}</h3>\n        ${item.badge ? html`<span class=\"badge ${tone}\" part=\"badge\">${item.badge}</span>` : nothing}\n      </div>\n      ${item.description ? html`<p class=\"description\">${item.description}</p>` : nothing}\n      ${item.bullets?.length\n        ? html`<ul class=\"bullets\">\n            ${item.bullets.map(bullet => html`<li>${CHECK_ICON}<span>${bullet}</span></li>`)}\n          </ul>`\n        : nothing}\n      ${this.renderAction(item)}\n    </article>`;\n  }\n\n  /** `{action}` in the footnote becomes the inline text button; otherwise Markdown, then the button. */\n  private renderFootnote() {\n    const hasAction = !!this.footnoteActionLabel && !!this.quoteDialog;\n    if (this.footnote.includes(FOOTNOTE_ACTION_TOKEN)) {\n      const [before, ...after] = this.footnote.split(FOOTNOTE_ACTION_TOKEN);\n      return html`<p class=\"footnote-text\">${before}${hasAction ? this.renderFootnoteAction() : nothing}${after.join(FOOTNOTE_ACTION_TOKEN)}</p>`;\n    }\n    return html`${this.footnote ? html`<st-markdown .content=${this.footnote}></st-markdown>` : nothing}\n      ${hasAction ? this.renderFootnoteAction() : nothing}`;\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${this.eyebrow || this.title || this.subtitle\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.eyebrow ? html`<p class=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n              ${this.title ? html`<h2 class=\"title\">${this.title}</h2>` : nothing}\n              ${this.subtitle ? html`<p class=\"lead\">${this.subtitle}</p>` : nothing}\n            </div>`\n          : nothing}\n        <div class=\"grid\" part=\"grid\">${this.items.map(item => this.renderCard(item))}</div>\n        ${this.footnote || (this.footnoteActionLabel && this.quoteDialog)\n          ? html`<div class=\"footnote\" part=\"footnote\">${this.renderFootnote()}</div>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-FOUK3NHR.js

@@ -0,0 +1,7 @@
+// src/quote-dialog/QuoteDialogEvents.ts
+var QUOTE_OPEN_EVENT = "st-quote-open";
+
+export {
+  QUOTE_OPEN_EVENT
+};
+//# sourceMappingURL=chunk-FOUK3NHR.js.map

package/dist/chunk-FOUK3NHR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/quote-dialog/QuoteDialogEvents.ts"],"sourcesContent":["/** Window-level event that asks a `st-quote-dialog` with the matching `id` to open. */\nexport const QUOTE_OPEN_EVENT = 'st-quote-open';\n\n/** Detail of `st-quote-open`. `trigger` is the element that opened the dialog; focus returns to it on close. */\nexport interface QuoteOpenEventDetail {\n  /** The `id` of the `st-quote-dialog` to open. */\n  dialog: string;\n  /** Option to preselect (an option `id`, or `unsure`). */\n  option?: string;\n  trigger?: HTMLElement | null;\n}\n\n/** Detail of the `quote-submit` event: the chosen option and every field the visitor filled in. */\nexport interface QuoteSubmitEventDetail {\n  option: string;\n  name: string;\n  email: string;\n  company: string;\n  count: string;\n  message: string;\n  consent: boolean;\n}\n"],"mappings":";AACO,IAAM,mBAAmB;","names":[]}

package/dist/chunk-GB4NGCZI.js

@@ -0,0 +1,181 @@
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/flow/Flow.ts
+import { LitElement, css, html, nothing, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Flow = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.nodes = [];
+    this.label = "";
+    this.inverted = false;
+  }
+  arrow() {
+    return svg`<svg class="arrow" part="arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+      <path d="M5 12h13m-5-5 5 5-5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>`;
+  }
+  render() {
+    const last = this.nodes.length - 1;
+    return html`
+      <ol class="flow" part="flow" aria-label=${this.label || nothing}>
+        ${this.nodes.map(
+      (node, index) => html`
+            <li class="step">
+              <div class="node ${node.variant ?? "solid"}" part="node">
+                <p class="label" part="label">${node.label}</p>
+                ${node.caption ? html`<p class="caption" part="caption">${node.caption}</p>` : nothing}
+              </div>
+              ${index < last ? this.arrow() : nothing}
+            </li>
+          `
+    )}
+      </ol>
+    `;
+  }
+};
+Flow.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-flow-padding instead. */
+      padding: var(--st-flow-padding, var(--st-space-40) var(--st-space-24)) !important;
+      background: var(--st-color-page);
+    }
+
+    :host([inverted]) {
+      background: var(--st-cms-band-dark-bg);
+    }
+
+    .flow {
+      display: flex;
+      align-items: stretch;
+      max-width: var(--st-cms-container-max);
+      margin: 0 auto;
+      padding: 0;
+      list-style: none;
+    }
+
+    .step {
+      display: flex;
+      align-items: center;
+      flex: 1 1 0;
+      min-width: 0;
+      margin: 0;
+    }
+
+    .node {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      justify-content: center;
+      gap: var(--st-space-4);
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 84px;
+      padding: var(--st-space-16) var(--st-space-20);
+      border: 1.5px solid transparent;
+      border-radius: var(--st-radius-lg);
+      text-align: center;
+      overflow-wrap: anywhere;
+    }
+
+    .label {
+      margin: 0;
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.3;
+    }
+
+    .caption {
+      margin: 0;
+      font-size: var(--st-text-sm);
+      line-height: 1.5;
+      opacity: 0.85;
+    }
+
+    .node.solid {
+      background: var(--st-button-primary-bg);
+      color: var(--st-button-primary-color);
+    }
+
+    .node.outline {
+      background: var(--st-color-surface);
+      border-color: var(--st-color-accent);
+      border-style: dashed;
+      color: var(--st-color-text-strong);
+    }
+
+    .node.accent {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .arrow {
+      flex: 0 0 auto;
+      width: 24px;
+      height: 24px;
+      margin: 0 var(--st-space-8);
+      color: var(--st-color-text-faint);
+    }
+
+    /* inverted: outlined boxes take the cyan highlight so the dashed edge reads on navy. */
+    :host([inverted]) .node.outline {
+      background: transparent;
+      border-color: var(--st-cms-highlight);
+      color: var(--st-cms-band-dark-color);
+    }
+
+    :host([inverted]) .arrow {
+      color: color-mix(in oklch, var(--st-cms-band-dark-color) 60%, transparent);
+    }
+
+    @media (max-width: 600px) {
+      :host {
+        padding: var(--st-flow-padding, var(--st-space-32) var(--st-space-20)) !important;
+      }
+      .flow {
+        flex-direction: column;
+      }
+      .step {
+        flex: 0 0 auto;
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .arrow {
+        align-self: center;
+        transform: rotate(90deg);
+        margin: var(--st-space-4) 0;
+      }
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], Flow.prototype, "nodes", 2);
+__decorateClass([
+  property({ type: String })
+], Flow.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Flow.prototype, "inverted", 2);
+Flow = __decorateClass([
+  customElement("st-flow")
+], Flow);
+
+export {
+  Flow
+};
+//# sourceMappingURL=chunk-GB4NGCZI.js.map

package/dist/chunk-GB4NGCZI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flow/Flow.ts"],"sourcesContent":["import { LitElement, css, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\n\nexport interface FlowNode {\n  label: string;\n  caption?: string;\n  /** `solid` (default, primary fill), `outline` (dashed accent border) or `accent` (cyan fill). */\n  variant?: 'solid' | 'outline' | 'accent';\n}\n\n/**\n * A left-to-right process or architecture flow: boxes joined by arrows. Boxes come in three looks\n * (`solid`, `outline`, `accent`); the arrows are decorative (`aria-hidden`), and the list is exposed\n * as an ordered list. Below 600px the row stacks vertically and the arrows point down.\n * `inverted` puts the flow on the dark band (`--st-cms-band-dark-bg`).\n *\n * @cssprop --st-flow-padding - Overrides the block's padding.\n * @csspart flow - The ordered list of nodes.\n * @csspart node - Each step's box (a `li`'s child).\n * @csspart label - The box's label.\n * @csspart caption - The box's caption.\n * @csspart arrow - The arrow between two boxes.\n */\n@customElement('st-flow')\nexport class Flow 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-flow-padding instead. */\n      padding: var(--st-flow-padding, var(--st-space-40) 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    .flow {\n      display: flex;\n      align-items: stretch;\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n      padding: 0;\n      list-style: none;\n    }\n\n    .step {\n      display: flex;\n      align-items: center;\n      flex: 1 1 0;\n      min-width: 0;\n      margin: 0;\n    }\n\n    .node {\n      display: flex;\n      flex: 1 1 auto;\n      flex-direction: column;\n      justify-content: center;\n      gap: var(--st-space-4);\n      box-sizing: border-box;\n      min-width: 0;\n      min-height: 84px;\n      padding: var(--st-space-16) var(--st-space-20);\n      border: 1.5px solid transparent;\n      border-radius: var(--st-radius-lg);\n      text-align: center;\n      overflow-wrap: anywhere;\n    }\n\n    .label {\n      margin: 0;\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.3;\n    }\n\n    .caption {\n      margin: 0;\n      font-size: var(--st-text-sm);\n      line-height: 1.5;\n      opacity: 0.85;\n    }\n\n    .node.solid {\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n    }\n\n    .node.outline {\n      background: var(--st-color-surface);\n      border-color: var(--st-color-accent);\n      border-style: dashed;\n      color: var(--st-color-text-strong);\n    }\n\n    .node.accent {\n      background: var(--st-cms-highlight);\n      color: var(--st-cms-navy);\n    }\n\n    .arrow {\n      flex: 0 0 auto;\n      width: 24px;\n      height: 24px;\n      margin: 0 var(--st-space-8);\n      color: var(--st-color-text-faint);\n    }\n\n    /* inverted: outlined boxes take the cyan highlight so the dashed edge reads on navy. */\n    :host([inverted]) .node.outline {\n      background: transparent;\n      border-color: var(--st-cms-highlight);\n      color: var(--st-cms-band-dark-color);\n    }\n\n    :host([inverted]) .arrow {\n      color: color-mix(in oklch, var(--st-cms-band-dark-color) 60%, transparent);\n    }\n\n    @media (max-width: 600px) {\n      :host {\n        padding: var(--st-flow-padding, var(--st-space-32) var(--st-space-20)) !important;\n      }\n      .flow {\n        flex-direction: column;\n      }\n      .step {\n        flex: 0 0 auto;\n        flex-direction: column;\n        align-items: stretch;\n      }\n      .arrow {\n        align-self: center;\n        transform: rotate(90deg);\n        margin: var(--st-space-4) 0;\n      }\n    }\n  `;\n\n  /** The boxes, in order. */\n  @property({ attribute: false })\n  nodes: FlowNode[] = [];\n\n  /** Accessible name for the list of steps. */\n  @property({ type: String })\n  label = '';\n\n  /** Puts the flow 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  private arrow() {\n    return svg`<svg class=\"arrow\" part=\"arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M5 12h13m-5-5 5 5-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>`;\n  }\n\n  render() {\n    const last = this.nodes.length - 1;\n    return html`\n      <ol class=\"flow\" part=\"flow\" aria-label=${this.label || nothing}>\n        ${this.nodes.map(\n          (node, index) => html`\n            <li class=\"step\">\n              <div class=\"node ${node.variant ?? 'solid'}\" part=\"node\">\n                <p class=\"label\" part=\"label\">${node.label}</p>\n                ${node.caption ? html`<p class=\"caption\" part=\"caption\">${node.caption}</p>` : nothing}\n              </div>\n              ${index < last ? this.arrow() : nothing}\n            </li>\n          `\n        )}\n      </ol>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,SAAS,WAAW;AACpD,SAAS,eAAe,gBAAgB;AAyBjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AA8HL,iBAAoB,CAAC;AAIrB,iBAAQ;AAIR,oBAAW;AAAA;AAAA,EAEH,QAAQ;AACd,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,SAAS;AACP,UAAM,OAAO,KAAK,MAAM,SAAS;AACjC,WAAO;AAAA,gDACqC,KAAK,SAAS,OAAO;AAAA,UAC3D,KAAK,MAAM;AAAA,MACX,CAAC,MAAM,UAAU;AAAA;AAAA,iCAEM,KAAK,WAAW,OAAO;AAAA,gDACR,KAAK,KAAK;AAAA,kBACxC,KAAK,UAAU,yCAAyC,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA,gBAEtF,QAAQ,OAAO,KAAK,MAAM,IAAI,OAAO;AAAA;AAAA;AAAA,IAG7C,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AAhKa,KACJ,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyHtB;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA7HnB,KA8HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjIf,KAkIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GArI/B,KAsIX;AAtIW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}