@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/chunk-535QAZ6A.js

@@ -0,0 +1,236 @@
+import {
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/screenshot-tour/ScreenshotTour.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var ScreenshotTour = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.items = [];
+    this.label = "Tour screens";
+    this.active = 0;
+  }
+  /** The selected index, kept inside the range of `items`. */
+  get current() {
+    return Math.min(Math.max(this.active, 0), Math.max(this.items.length - 1, 0));
+  }
+  tabButtons() {
+    return Array.from(this.renderRoot.querySelectorAll('button[part="tab"]'));
+  }
+  select(index, focus = false) {
+    this.active = index;
+    const tab = this.tabButtons()[index];
+    if (focus) tab?.focus({ preventScroll: true });
+    void this.updateComplete.then(() => {
+      this.tabButtons()[index]?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    });
+  }
+  onKeydown(event) {
+    const count = this.items.length;
+    if (!count) return;
+    const index = this.current;
+    let next = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (index + 1) % count;
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (index - 1 + count) % count;
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = count - 1;
+    if (next === null) return;
+    event.preventDefault();
+    this.select(next, true);
+  }
+  render() {
+    const index = this.current;
+    const item = this.items[index];
+    return html`
+      <div class="tabs" part="tabs" role="group" aria-label=${this.label} @keydown=${this.onKeydown}>
+        ${this.items.map(
+      (tab, i) => html`<button
+            type="button"
+            class="tab"
+            part="tab"
+            aria-pressed=${i === index ? "true" : "false"}
+            @click=${() => this.select(i)}
+          >${tab.label}</button>`
+    )}
+      </div>
+      ${item ? html`<figure class="figure" part="figure">
+            <div class="frame" part="frame">
+              <img class="image" part="image" src=${item.src} alt=${item.alt} loading="lazy" decoding="async" />
+            </div>
+            <figcaption class="caption" part="caption" aria-live="polite">
+              ${item.step ? html`<p class="step" part="step">${item.step}</p>` : nothing}
+              <h3 class="title" part="title">${item.title}</h3>
+              ${item.caption ? html`<p class="text" part="text">${item.caption}</p>` : nothing}
+            </figcaption>
+          </figure>` : nothing}
+    `;
+  }
+};
+ScreenshotTour.styles = css`
+    /* 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;
+    }
+
+    .tabs {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 32px;
+    }
+
+    .tab {
+      display: inline-flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-height: 44px;
+      padding: 0 18px;
+      border: 1px solid var(--st-cms-primary-200, #c9d7fe);
+      border-radius: 9999px;
+      background: var(--st-color-surface, #fff);
+      color: var(--st-cms-text-strong, #011d41);
+      font: inherit;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 1.2;
+      white-space: normal;
+      cursor: pointer;
+      transition:
+        background-color 150ms ease,
+        border-color 150ms ease,
+        color 150ms ease;
+    }
+
+    .tab[aria-pressed='false']:hover {
+      border-color: var(--st-cms-brand-navy, #2144aa);
+    }
+
+    .tab[aria-pressed='true'] {
+      background: var(--st-cms-brand-navy, #2144aa);
+      border-color: var(--st-cms-brand-navy, #2144aa);
+      color: #fff;
+    }
+
+    .tab:focus-visible {
+      outline: var(--st-focus-ring, 2px solid #1b91dd);
+      outline-offset: 2px;
+    }
+
+    .figure {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 32px;
+      margin: 0;
+    }
+
+    .frame {
+      flex: 999 1 560px;
+      min-width: 0;
+      overflow: hidden;
+      background: var(--st-color-surface, #fff);
+      border: 1px solid var(--st-cms-primary-100, #e4ebff);
+      border-radius: 16px;
+      box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.1);
+    }
+
+    .image {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+
+    .caption {
+      flex: 1 1 260px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-width: 0;
+    }
+
+    .step {
+      margin: 0;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--st-cms-eyebrow, #0c64c5);
+    }
+
+    .title {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 700;
+      line-height: 1.3;
+      color: var(--st-cms-text-strong, #011d41);
+    }
+
+    .text {
+      margin: 0;
+      font-size: 16px;
+      line-height: 1.6;
+      color: var(--st-cms-text, #03346b);
+    }
+
+    @media (max-width: 768px) {
+      .tabs {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        scroll-snap-type: x proximity;
+        scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+        /* Padding keeps focus rings from being clipped by the scroll box. */
+        padding: 4px 2px;
+        margin: -4px -2px 24px;
+      }
+
+      .tabs::-webkit-scrollbar {
+        display: none;
+      }
+
+      .tab {
+        flex: none;
+        scroll-snap-align: start;
+        white-space: nowrap;
+      }
+
+      .figure {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 20px;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tab {
+        transition: none;
+      }
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], ScreenshotTour.prototype, "items", 2);
+__decorateClass([
+  property({ type: String })
+], ScreenshotTour.prototype, "label", 2);
+__decorateClass([
+  state()
+], ScreenshotTour.prototype, "active", 2);
+ScreenshotTour = __decorateClass([
+  customElement("st-screenshot-tour")
+], ScreenshotTour);
+
+export {
+  ScreenshotTour
+};
+//# sourceMappingURL=chunk-535QAZ6A.js.map

package/dist/chunk-535QAZ6A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/screenshot-tour/ScreenshotTour.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\nexport interface ScreenshotTourItem {\n  /** Text on the tab button that selects this screen. */\n  label: string;\n  /** Small uppercase line above the title (e.g. \"Step 2\"). */\n  step?: string;\n  /** Heading shown under the screenshot. */\n  title: string;\n  /** Body text shown under the heading. */\n  caption?: string;\n  /** Screenshot URL. */\n  src: string;\n  /** Alternative text for the screenshot. */\n  alt: string;\n}\n\n/**\n * A product tour: a row of tab buttons, one per screenshot, and below it the selected screenshot\n * in a framed figure with its step, title and caption. Only the selected screen is shown; the\n * others are not rendered in the document flow.\n *\n * Keyboard (on the tab row): Arrow Right/Down moves to the next tab and Arrow Left/Up to the\n * previous one, both wrapping at the ends; Home and End jump to the first and last tab. Each of\n * these moves focus to the tab and selects it. Tab and Shift+Tab move through the tabs as usual.\n * On narrow screens the tab row scrolls sideways (it never scrolls the page vertically).\n *\n * @csspart tabs - The row of tab buttons (`role=\"group\"`).\n * @csspart tab - Each tab button. Selected tabs carry `aria-pressed=\"true\"`.\n * @csspart figure - The `figure` holding the screenshot and its caption.\n * @csspart frame - The bordered frame around the screenshot.\n * @csspart image - The screenshot `img`.\n * @csspart caption - The `figcaption` with the text beside (or below, on narrow screens) the image.\n * @csspart step - The small eyebrow line above the title.\n * @csspart title - The screen's heading.\n * @csspart text - The caption paragraph.\n */\n@customElement('st-screenshot-tour')\nexport class ScreenshotTour extends LitElement {\n  static styles = css`\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    }\n\n    .tabs {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      margin-bottom: 32px;\n    }\n\n    .tab {\n      display: inline-flex;\n      align-items: center;\n      box-sizing: border-box;\n      min-height: 44px;\n      padding: 0 18px;\n      border: 1px solid var(--st-cms-primary-200, #c9d7fe);\n      border-radius: 9999px;\n      background: var(--st-color-surface, #fff);\n      color: var(--st-cms-text-strong, #011d41);\n      font: inherit;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 1.2;\n      white-space: normal;\n      cursor: pointer;\n      transition:\n        background-color 150ms ease,\n        border-color 150ms ease,\n        color 150ms ease;\n    }\n\n    .tab[aria-pressed='false']:hover {\n      border-color: var(--st-cms-brand-navy, #2144aa);\n    }\n\n    .tab[aria-pressed='true'] {\n      background: var(--st-cms-brand-navy, #2144aa);\n      border-color: var(--st-cms-brand-navy, #2144aa);\n      color: #fff;\n    }\n\n    .tab:focus-visible {\n      outline: var(--st-focus-ring, 2px solid #1b91dd);\n      outline-offset: 2px;\n    }\n\n    .figure {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 32px;\n      margin: 0;\n    }\n\n    .frame {\n      flex: 999 1 560px;\n      min-width: 0;\n      overflow: hidden;\n      background: var(--st-color-surface, #fff);\n      border: 1px solid var(--st-cms-primary-100, #e4ebff);\n      border-radius: 16px;\n      box-shadow: 0 20px 40px -12px rgb(0 0 0 / 0.1);\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      height: auto;\n    }\n\n    .caption {\n      flex: 1 1 260px;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      min-width: 0;\n    }\n\n    .step {\n      margin: 0;\n      font-size: 12px;\n      font-weight: 600;\n      letter-spacing: 0.05em;\n      text-transform: uppercase;\n      color: var(--st-cms-eyebrow, #0c64c5);\n    }\n\n    .title {\n      margin: 0;\n      font-size: 24px;\n      font-weight: 700;\n      line-height: 1.3;\n      color: var(--st-cms-text-strong, #011d41);\n    }\n\n    .text {\n      margin: 0;\n      font-size: 16px;\n      line-height: 1.6;\n      color: var(--st-cms-text, #03346b);\n    }\n\n    @media (max-width: 768px) {\n      .tabs {\n        flex-wrap: nowrap;\n        overflow-x: auto;\n        scroll-snap-type: x proximity;\n        scrollbar-width: none;\n        -webkit-overflow-scrolling: touch;\n        /* Padding keeps focus rings from being clipped by the scroll box. */\n        padding: 4px 2px;\n        margin: -4px -2px 24px;\n      }\n\n      .tabs::-webkit-scrollbar {\n        display: none;\n      }\n\n      .tab {\n        flex: none;\n        scroll-snap-align: start;\n        white-space: nowrap;\n      }\n\n      .figure {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 20px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .tab {\n        transition: none;\n      }\n    }\n  `;\n\n  /** The screens, in tab order. */\n  @property({ attribute: false })\n  items: ScreenshotTourItem[] = [];\n\n  /** Accessible name for the tab group. */\n  @property({ type: String })\n  label = 'Tour screens';\n\n  /** Index of the selected screen. Clamped to the range of `items`. */\n  @state()\n  private active = 0;\n\n  /** The selected index, kept inside the range of `items`. */\n  private get current(): number {\n    return Math.min(Math.max(this.active, 0), Math.max(this.items.length - 1, 0));\n  }\n\n  private tabButtons(): HTMLButtonElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLButtonElement>('button[part=\"tab\"]'));\n  }\n\n  private select(index: number, focus = false) {\n    this.active = index;\n    const tab = this.tabButtons()[index];\n    if (focus) tab?.focus({ preventScroll: true });\n    // Scroll only the tab row: `nearest` on both axes never moves the page itself for a visible tab.\n    void this.updateComplete.then(() => {\n      this.tabButtons()[index]?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    });\n  }\n\n  private onKeydown(event: KeyboardEvent) {\n    const count = this.items.length;\n    if (!count) return;\n    const index = this.current;\n    let next: number | null = null;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % count;\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + count) % count;\n    if (event.key === 'Home') next = 0;\n    if (event.key === 'End') next = count - 1;\n    if (next === null) return;\n    event.preventDefault();\n    this.select(next, true);\n  }\n\n  render() {\n    const index = this.current;\n    const item = this.items[index];\n    return html`\n      <div class=\"tabs\" part=\"tabs\" role=\"group\" aria-label=${this.label} @keydown=${this.onKeydown}>\n        ${this.items.map(\n          (tab, i) => html`<button\n            type=\"button\"\n            class=\"tab\"\n            part=\"tab\"\n            aria-pressed=${i === index ? 'true' : 'false'}\n            @click=${() => this.select(i)}\n          >${tab.label}</button>`\n        )}\n      </div>\n      ${item\n        ? html`<figure class=\"figure\" part=\"figure\">\n            <div class=\"frame\" part=\"frame\">\n              <img class=\"image\" part=\"image\" src=${item.src} alt=${item.alt} loading=\"lazy\" decoding=\"async\" />\n            </div>\n            <figcaption class=\"caption\" part=\"caption\" aria-live=\"polite\">\n              ${item.step ? html`<p class=\"step\" part=\"step\">${item.step}</p>` : nothing}\n              <h3 class=\"title\" part=\"title\">${item.title}</h3>\n              ${item.caption ? html`<p class=\"text\" part=\"text\">${item.caption}</p>` : nothing}\n            </figcaption>\n          </figure>`\n        : nothing}\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-AKJQ345O.js → chunk-5AWGZQWU.js}

@@ -1,6 +1,6 @@
 import {
   fontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
+} from "./chunk-NXUS2CH7.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -106,4 +106,4 @@ Chip = __decorateClass([
 export {
   Chip
 };
-//# sourceMappingURL=chunk-AKJQ345O.js.map
+//# sourceMappingURL=chunk-5AWGZQWU.js.map

package/dist/chunk-6OZKZG5J.js

@@ -0,0 +1,300 @@
+import {
+  ctaAriaLabel,
+  ctaLabelStyles,
+  renderCtaLabel
+} from "./chunk-BEWX3E6P.js";
+import {
+  externalLinkAttrs,
+  externalLinkExtras,
+  isExternalHref
+} from "./chunk-T4BIN37Q.js";
+import {
+  ctaLinkStyles,
+  sectionEyebrowStyles,
+  sectionSubtitleStyles,
+  sectionTitleStyles
+} from "./chunk-KZ7PMFWS.js";
+import {
+  controlBaseStyles,
+  fontFamilyStyles
+} from "./chunk-NXUS2CH7.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/content-block/ContentBlock.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var ContentBlock = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.eyebrow = "";
+    this.title = "";
+    this.subtitle = "";
+    this.headingLevel = 2;
+    this.textAlignment = "left";
+    this.contentSrc = "";
+    this.content = "";
+    this.imageSrc = "";
+    this.imageAlt = "";
+    this.imageCaption = "";
+    this.inverted = false;
+    this.listStyle = "default";
+    this.actionLabel = "";
+    this.actionLabelShort = "";
+    this.href = "";
+    this.actionVariant = "primary";
+    this.maxWidth = "none";
+  }
+  renderAction() {
+    if (!this.actionLabel || !this.href) return nothing;
+    const { target, rel } = externalLinkAttrs(this.href);
+    const ariaLabel = ctaAriaLabel(this.actionLabel, this.actionLabelShort, isExternalHref(this.href) ? " (opens in new tab)" : "");
+    return html`<a class="action ${this.actionVariant}" part="action" href=${this.href} target=${target} rel=${rel} aria-label=${ariaLabel}
+      >${renderCtaLabel(this.actionLabel, this.actionLabelShort)}${externalLinkExtras(this.href)}</a
+    >`;
+  }
+  renderTitle() {
+    if (!this.title) return nothing;
+    return this.headingLevel === 3 ? html`<h3 class="title title-3" part="title">${this.title}</h3>` : html`<h2 class="title" part="title">${this.title}</h2>`;
+  }
+  render() {
+    const hasHeader = Boolean(this.eyebrow || this.title || this.subtitle);
+    return html`
+      <section class="container" part="container">
+        ${hasHeader ? html`<div class="header" part="header">
+              ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
+              ${this.renderTitle()}
+              ${this.subtitle ? html`<div class="subtitle" part="subtitle">${this.subtitle}</div>` : nothing}
+            </div>` : nothing}
+        ${this.imageSrc ? html`
+              <figure class="featured-image" part="image">
+                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />
+                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}
+              </figure>
+            ` : nothing}
+        <st-markdown part="body" .src=${this.contentSrc} .content=${this.content} .listStyle=${this.listStyle}></st-markdown>
+        ${this.renderAction()}
+      </section>
+    `;
+  }
+};
+ContentBlock.styles = css`
+    ${ctaLabelStyles}
+    ${controlBaseStyles}
+
+    :host {
+      display: block;
+      ${fontFamilyStyles}
+      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's
+         padding; override with --st-content-block-padding instead. */
+      padding: var(--st-content-block-padding, var(--st-space-24)) !important;
+      /* Transparent: the block sits on whatever band or page surrounds it. A fill here made a box that
+         did not match the section (lighter navy in the dark theme) and had no padding around its text. */
+      background: transparent;
+      color: var(--st-color-text-strong);
+    }
+
+    :host([inverted]) {
+      background: var(--st-color-text-strong);
+      color: var(--st-color-on-solid);
+    }
+
+    .container {
+      max-width: var(--st-cms-container-max);
+      padding: 0 var(--st-space-48);
+      margin: 0 auto;
+      text-align: left;
+    }
+
+    :host([text-alignment='center']) .container {
+      text-align: center;
+    }
+
+    .header {
+      margin-bottom: var(--st-space-48);
+    }
+
+    .eyebrow {
+      ${sectionEyebrowStyles}
+    }
+
+    .title {
+      ${sectionTitleStyles}
+      line-height: 1.1;
+    }
+
+    /* heading-level="3": a sub-section title, a step below the section title's size and weight. */
+    .title.title-3 {
+      font-size: var(--st-cms-text-3xl);
+      font-weight: var(--st-font-weight-semibold);
+      line-height: 1.2;
+    }
+
+    .subtitle {
+      ${sectionSubtitleStyles}
+    }
+
+    :host([text-alignment='center']) .subtitle {
+      margin-inline: auto;
+    }
+
+    :host([inverted]) .eyebrow {
+      color: var(--st-cms-highlight);
+    }
+
+    :host([inverted]) .title,
+    :host([inverted]) .subtitle {
+      color: inherit;
+    }
+
+    .featured-image {
+      margin: 0 0 var(--st-space-48);
+      border-radius: var(--st-radius-lg);
+      overflow: hidden;
+    }
+
+    .featured-image img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+
+    figcaption {
+      padding: var(--st-space-12);
+      text-align: center;
+      color: var(--st-color-text-muted);
+      font-size: var(--st-text-xs);
+    }
+
+    st-markdown {
+      color: var(--st-color-text);
+      font-size: var(--st-text-xl);
+    }
+
+    :host([inverted]) st-markdown {
+      color: inherit;
+    }
+
+    /* list-style="check": the check marks are navy on light pages and cyan on the dark band. */
+    :host([inverted][list-style='check']) st-markdown {
+      --st-markdown-list-check-color: var(--st-cms-highlight);
+    }
+
+    /* max-width="prose": a 720px reading column; the header follows the same width. */
+    :host([max-width='prose']) .container {
+      max-width: 720px;
+    }
+
+    .action {
+      ${ctaLinkStyles}
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 52px;
+      margin-top: var(--st-space-16);
+      padding: 0 var(--st-space-28);
+      border: 0;
+      border-radius: var(--st-radius-full);
+      font-size: var(--st-text-md);
+      font-weight: var(--st-font-weight-semibold);
+      text-decoration: none;
+    }
+
+    .action.primary {
+      background: var(--st-cms-navy);
+      color: var(--st-cms-on-dark);
+    }
+
+    .action.highlight {
+      background: var(--st-cms-highlight);
+      color: var(--st-cms-navy);
+    }
+
+    .action.light {
+      background: var(--st-cms-on-dark);
+      color: var(--st-cms-navy);
+    }
+
+    .action:hover {
+      transform: scale(1.03);
+    }
+
+    .action:focus-visible {
+      outline: var(--st-focus-ring);
+      outline-offset: 2px;
+    }
+
+    :host([text-alignment='center']) .action {
+      margin-inline: auto;
+    }
+
+    @media (max-width: 768px) {
+      :host {
+        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;
+      }
+
+      .container {
+        padding: 0;
+      }
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "eyebrow", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "title", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "subtitle", 2);
+__decorateClass([
+  property({ type: Number, attribute: "heading-level" })
+], ContentBlock.prototype, "headingLevel", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "text-alignment" })
+], ContentBlock.prototype, "textAlignment", 2);
+__decorateClass([
+  property({ type: String, attribute: "content-src" })
+], ContentBlock.prototype, "contentSrc", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "content", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-src" })
+], ContentBlock.prototype, "imageSrc", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-alt" })
+], ContentBlock.prototype, "imageAlt", 2);
+__decorateClass([
+  property({ type: String, attribute: "image-caption" })
+], ContentBlock.prototype, "imageCaption", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ContentBlock.prototype, "inverted", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "list-style" })
+], ContentBlock.prototype, "listStyle", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label" })
+], ContentBlock.prototype, "actionLabel", 2);
+__decorateClass([
+  property({ type: String, attribute: "action-label-short" })
+], ContentBlock.prototype, "actionLabelShort", 2);
+__decorateClass([
+  property({ type: String })
+], ContentBlock.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "action-variant" })
+], ContentBlock.prototype, "actionVariant", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "max-width" })
+], ContentBlock.prototype, "maxWidth", 2);
+ContentBlock = __decorateClass([
+  customElement("st-content-block")
+], ContentBlock);
+
+export {
+  ContentBlock
+};
+//# sourceMappingURL=chunk-6OZKZG5J.js.map

package/dist/chunk-6OZKZG5J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/content-block/ContentBlock.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, fontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, sectionEyebrowStyles, sectionSubtitleStyles, sectionTitleStyles } from '../shared/section-styles';\nimport { ctaAriaLabel, ctaLabelStyles, renderCtaLabel } from '../shared/cta-label';\nimport { externalLinkAttrs, externalLinkExtras, isExternalHref } from '../shared/external-link';\nimport '../markdown';\n\n/**\n * A long-form article section: an optional eyebrow, a title, a subtitle, an optional featured image\n * with caption, then Markdown body text. The body comes from `content-src` (a Markdown URL) or an\n * inline `content` string (so the block works without a fetch); `content-src` wins when both are set.\n *\n * `list-style=\"check\"` shows check marks instead of bullets on the body's lists. `action-label` with\n * an `href` adds a pill link under the body, styled by `action-variant`. `max-width=\"prose\"` narrows\n * the body to a 720px reading column.\n *\n * The title is a real heading: `<h2>` by default, `<h3>` with `heading-level=\"3\"` for a sub-section\n * inside a larger page (smaller, lighter type, so it never outweighs a section title). Eyebrow,\n * title, subtitle and body share one alignment: left by default, centred with `text-alignment=\"center\"`.\n *\n * @cssprop --st-content-block-padding - Overrides the block's padding.\n * @csspart container - The width-limited content box.\n * @csspart header - The eyebrow, title and subtitle block.\n * @csspart eyebrow - The small uppercase label above the title.\n * @csspart title - The heading (`<h2>` or `<h3>`).\n * @csspart subtitle - The line under the title.\n * @csspart image - The featured image and its caption.\n * @csspart body - The Markdown body.\n * @csspart action - The pill link under the body (when `action-label` and `href` are set).\n */\n@customElement('st-content-block')\nexport class ContentBlock extends LitElement {\n  static styles = css`\n    ${ctaLabelStyles}\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      ${fontFamilyStyles}\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-content-block-padding instead. */\n      padding: var(--st-content-block-padding, var(--st-space-24)) !important;\n      /* Transparent: the block sits on whatever band or page surrounds it. A fill here made a box that\n         did not match the section (lighter navy in the dark theme) and had no padding around its text. */\n      background: transparent;\n      color: var(--st-color-text-strong);\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n      color: var(--st-color-on-solid);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      padding: 0 var(--st-space-48);\n      margin: 0 auto;\n      text-align: left;\n    }\n\n    :host([text-alignment='center']) .container {\n      text-align: center;\n    }\n\n    .header {\n      margin-bottom: var(--st-space-48);\n    }\n\n    .eyebrow {\n      ${sectionEyebrowStyles}\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      line-height: 1.1;\n    }\n\n    /* heading-level=\"3\": a sub-section title, a step below the section title's size and weight. */\n    .title.title-3 {\n      font-size: var(--st-cms-text-3xl);\n      font-weight: var(--st-font-weight-semibold);\n      line-height: 1.2;\n    }\n\n    .subtitle {\n      ${sectionSubtitleStyles}\n    }\n\n    :host([text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    :host([inverted]) .eyebrow {\n      color: var(--st-cms-highlight);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .subtitle {\n      color: inherit;\n    }\n\n    .featured-image {\n      margin: 0 0 var(--st-space-48);\n      border-radius: var(--st-radius-lg);\n      overflow: hidden;\n    }\n\n    .featured-image img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n\n    figcaption {\n      padding: var(--st-space-12);\n      text-align: center;\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-xs);\n    }\n\n    st-markdown {\n      color: var(--st-color-text);\n      font-size: var(--st-text-xl);\n    }\n\n    :host([inverted]) st-markdown {\n      color: inherit;\n    }\n\n    /* list-style=\"check\": the check marks are navy on light pages and cyan on the dark band. */\n    :host([inverted][list-style='check']) st-markdown {\n      --st-markdown-list-check-color: var(--st-cms-highlight);\n    }\n\n    /* max-width=\"prose\": a 720px reading column; the header follows the same width. */\n    :host([max-width='prose']) .container {\n      max-width: 720px;\n    }\n\n    .action {\n      ${ctaLinkStyles}\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 52px;\n      margin-top: var(--st-space-16);\n      padding: 0 var(--st-space-28);\n      border: 0;\n      border-radius: var(--st-radius-full);\n      font-size: var(--st-text-md);\n      font-weight: var(--st-font-weight-semibold);\n      text-decoration: none;\n    }\n\n    .action.primary {\n      background: var(--st-cms-navy);\n      color: var(--st-cms-on-dark);\n    }\n\n    .action.highlight {\n      background: var(--st-cms-highlight);\n      color: var(--st-cms-navy);\n    }\n\n    .action.light {\n      background: var(--st-cms-on-dark);\n      color: var(--st-cms-navy);\n    }\n\n    .action:hover {\n      transform: scale(1.03);\n    }\n\n    .action:focus-visible {\n      outline: var(--st-focus-ring);\n      outline-offset: 2px;\n    }\n\n    :host([text-alignment='center']) .action {\n      margin-inline: auto;\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-content-block-padding, var(--st-space-48) var(--st-space-24)) !important;\n      }\n\n      .container {\n        padding: 0;\n      }\n    }\n  `;\n\n  /** Small uppercase label above the title (e.g. \"Our story\"). */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  /** `2` (default) renders the title as `<h2>`; `3` as a smaller `<h3>` for a sub-section. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel: 2 | 3 = 2;\n\n  /** Alignment of the eyebrow, title, subtitle and body. `left` (default) or `center`. */\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' = 'left';\n\n  /** URL of a Markdown file. */\n  @property({ type: String, attribute: 'content-src' })\n  contentSrc = '';\n\n  /** Inline Markdown, used when `content-src` is not set. */\n  @property({ type: String })\n  content = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  @property({ type: String, attribute: 'image-caption' })\n  imageCaption = '';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  /** `default` keeps bullets; `check` shows a check mark on each bullet of the body's lists. */\n  @property({ type: String, reflect: true, attribute: 'list-style' })\n  listStyle: 'default' | 'check' = 'default';\n\n  /** Label of a pill link under the body. Shown only together with `href`. */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  /** Shorter `action-label` for phones (< 480px); the full label stays the accessible name. */\n  @property({ type: String, attribute: 'action-label-short' })\n  actionLabelShort = '';\n\n  /** Target of the pill link under the body. */\n  @property({ type: String })\n  href = '';\n\n  /** Colour of the pill link: `primary` (navy), `highlight` (cyan) or `light` (white). */\n  @property({ type: String, reflect: true, attribute: 'action-variant' })\n  actionVariant: 'primary' | 'highlight' | 'light' = 'primary';\n\n  /** `none` (default) uses the full container width; `prose` limits the block to a 720px column. */\n  @property({ type: String, reflect: true, attribute: 'max-width' })\n  maxWidth: 'none' | 'prose' = 'none';\n\n  private renderAction() {\n    if (!this.actionLabel || !this.href) return nothing;\n    const { target, rel } = externalLinkAttrs(this.href);\n    const ariaLabel = ctaAriaLabel(this.actionLabel, this.actionLabelShort, isExternalHref(this.href) ? ' (opens in new tab)' : '');\n    return html`<a class=\"action ${this.actionVariant}\" part=\"action\" href=${this.href} target=${target} rel=${rel} aria-label=${ariaLabel}\n      >${renderCtaLabel(this.actionLabel, this.actionLabelShort)}${externalLinkExtras(this.href)}</a\n    >`;\n  }\n\n  private renderTitle() {\n    if (!this.title) return nothing;\n    return this.headingLevel === 3\n      ? html`<h3 class=\"title title-3\" part=\"title\">${this.title}</h3>`\n      : html`<h2 class=\"title\" part=\"title\">${this.title}</h2>`;\n  }\n\n  render() {\n    const hasHeader = Boolean(this.eyebrow || this.title || this.subtitle);\n    return html`\n      <section class=\"container\" part=\"container\">\n        ${hasHeader\n          ? html`<div class=\"header\" part=\"header\">\n              ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n              ${this.renderTitle()}\n              ${this.subtitle ? html`<div class=\"subtitle\" part=\"subtitle\">${this.subtitle}</div>` : nothing}\n            </div>`\n          : nothing}\n        ${this.imageSrc\n          ? html`\n              <figure class=\"featured-image\" part=\"image\">\n                <img src=${this.imageSrc} alt=${this.imageAlt || this.title} />\n                ${this.imageCaption ? html`<figcaption>${this.imageCaption}</figcaption>` : nothing}\n              </figure>\n            `\n          : nothing}\n        <st-markdown part=\"body\" .src=${this.contentSrc} .content=${this.content} .listStyle=${this.listStyle}></st-markdown>\n        ${this.renderAction()}\n      </section>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}