@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/chunk-SQ3OZO32.js

@@ -1,486 +0,0 @@
-import {
-  ctaLinkStyles,
-  paddingScaleStyles
-} from "./chunk-FZ36KL73.js";
-import {
-  controlBaseStyles,
-  rootFontFamilyStyles
-} from "./chunk-KMU6ABQF.js";
-import {
-  __decorateClass
-} from "./chunk-EUXUH3YW.js";
-
-// src/hero/Hero.ts
-import { LitElement, css, html, nothing, svg } from "lit";
-import { customElement, property } from "lit/decorators.js";
-var HIGHLIGHT_ICON = svg`<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 6 9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`;
-var Hero = class extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.title = "";
-    this.subtitle = "";
-    this.imageSrc = "";
-    this.actionLabel = "";
-    this.href = "";
-    this.textAlignment = "left";
-    this.padding = "none";
-    this.inverted = false;
-    this.focalPoint = "center";
-    this.eyebrow = "";
-    this.secondaryActionLabel = "";
-    this.secondaryHref = "";
-    this.badge = "";
-    this.highlights = [];
-    this.layout = "background";
-    this.imageAlt = "";
-    this.size = "auto";
-    this.contentPosition = "center";
-    this.overlay = "even";
-    this.onClick = (event) => this.emitAction(event, this.href, "primary");
-    this.onSecondaryClick = (event) => this.emitAction(event, this.secondaryHref, "secondary");
-  }
-  willUpdate() {
-    const asBackground = this.layout !== "split";
-    this.style.backgroundImage = asBackground && this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : "";
-    this.style.setProperty("--st-hero-position", Hero.positions[this.focalPoint] ?? Hero.positions.center);
-  }
-  emitAction(event, href, kind) {
-    const action = new CustomEvent("action", {
-      detail: { href, kind },
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    });
-    this.dispatchEvent(action);
-    if (action.defaultPrevented) event.preventDefault();
-  }
-  render() {
-    return html`
-      <div class="overlay" part="overlay"></div>
-      <div class="content" part="content">
-        ${this.eyebrow ? html`<p class="eyebrow" part="eyebrow">${this.eyebrow}</p>` : nothing}
-        ${this.badge ? html`<p class="badge" part="badge">${this.badge}</p>` : nothing}
-        <h1 class="title" part="title">${this.title}</h1>
-        ${this.subtitle ? html`<p class="subtitle" part="subtitle">${this.subtitle}</p>` : nothing}
-        ${this.actionLabel || this.secondaryActionLabel ? html`<div class="actions" part="actions">
-              ${this.actionLabel ? html`<a class="cta" part="action" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>` : nothing}
-              ${this.secondaryActionLabel ? html`<a class="cta secondary" part="secondary-action" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}
-                    >${this.secondaryActionLabel}</a
-                  >` : nothing}
-            </div>` : nothing}
-        ${this.highlights.length ? html`<ul class="highlights" part="highlights">
-              ${this.highlights.map(
-      (text) => html`<li class="highlight" part="highlight">${HIGHLIGHT_ICON}<span>${text}</span></li>`
-    )}
-            </ul>` : nothing}
-        <slot></slot>
-      </div>
-      ${this.layout === "split" && this.imageSrc ? html`<figure class="media" part="media">
-            <img class="image" part="image" src=${this.imageSrc} alt=${this.imageAlt} />
-          </figure>` : nothing}
-    `;
-  }
-};
-Hero.styles = css`
-    ${controlBaseStyles}
-    ${paddingScaleStyles}
-
-    @keyframes st-hero-zoom {
-      from { opacity: 0; transform: scale(1.1); }
-      to { opacity: 1; transform: scale(1); }
-    }
-    @keyframes st-hero-rise {
-      from { opacity: 0; transform: translateY(30px); }
-      to { opacity: 1; transform: none; }
-    }
-    @keyframes st-hero-fade {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      box-sizing: border-box;
-      background-color: var(--st-color-text-strong);
-      background-repeat: no-repeat;
-      background-size: cover;
-      background-position: var(--st-hero-position, center center);
-      color: var(--st-color-on-solid);
-      ${rootFontFamilyStyles}
-      animation: st-hero-zoom 1.5s ease-out;
-    }
-
-    :host([inverted]) {
-      background-color: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-    }
-
-    .overlay {
-      position: absolute;
-      inset: 0;
-      z-index: 1;
-      background: linear-gradient(
-        to bottom,
-        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),
-        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),
-        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)
-      );
-    }
-
-    :host([inverted]) .overlay {
-      display: none;
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--st-space-20);
-      position: relative;
-      z-index: 2;
-      width: 80%;
-      margin: 0 auto;
-      text-align: center;
-      align-items: center;
-      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts
-         on the host (e.g. a theme text colour) must not turn it dark. */
-      color: var(--st-hero-text-color, var(--st-color-on-solid));
-    }
-
-    :host([inverted]) .content {
-      color: var(--st-hero-text-color, var(--st-color-text-strong));
-    }
-
-    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }
-    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }
-    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }
-
-    .title {
-      font-size: var(--st-cms-text-display);
-      font-weight: var(--st-font-weight-bold);
-      line-height: 1.1;
-      color: inherit;
-      margin: 0;
-      animation: st-hero-rise 0.8s 0.3s ease-out backwards;
-    }
-
-    .subtitle {
-      font-size: var(--st-cms-text-xl);
-      line-height: 1.5;
-      color: inherit;
-      margin: 0;
-      animation: st-hero-fade 0.8s 0.5s ease-out backwards;
-    }
-
-    .actions {
-      display: flex;
-      justify-content: center;
-      width: 100%;
-    }
-
-    .cta {
-      ${ctaLinkStyles}
-      background: var(--st-button-primary-bg);
-      color: var(--st-button-primary-color);
-      font-weight: var(--st-button-font-weight);
-      font-size: var(--st-text-md);
-      animation: st-hero-rise 0.6s 0.7s ease-out backwards;
-    }
-
-    .cta:hover {
-      transform: scale(1.05);
-    }
-
-    .cta:active {
-      transform: scale(0.98);
-    }
-
-    .eyebrow {
-      margin: 0;
-      font-size: var(--st-text-sm);
-      font-weight: var(--st-font-weight-bold);
-      letter-spacing: 0.12em;
-      text-transform: uppercase;
-      color: inherit;
-      opacity: 0.85;
-      animation: st-hero-fade 0.8s 0.2s ease-out backwards;
-    }
-
-    .actions {
-      flex-wrap: wrap;
-      gap: var(--st-space-12);
-    }
-
-    .cta.secondary {
-      background: transparent;
-      color: inherit;
-      box-shadow: inset 0 0 0 1.5px currentColor;
-    }
-
-    .cta.secondary:hover {
-      background: color-mix(in oklch, currentColor 12%, transparent);
-    }
-
-    /* size="large" / "full": a tall editorial hero. */
-    :host([size='large']) {
-      min-height: var(--st-hero-min-height, 640px);
-    }
-
-    :host([size='full']) {
-      min-height: 100svh;
-    }
-
-    :host([size='large']) .title,
-    :host([size='full']) .title {
-      font-size: clamp(2.5rem, 6vw, 5rem);
-      letter-spacing: -0.02em;
-      line-height: 1.05;
-    }
-
-    /* content-position="bottom": copy sits in the lower part of the hero, on the container grid. */
-    :host([content-position='bottom']) {
-      align-items: flex-end;
-    }
-
-    :host([content-position='bottom']) .content {
-      width: 100%;
-      max-width: var(--st-cms-container-max);
-      box-sizing: border-box;
-      padding: var(--st-space-48) var(--st-space-24);
-    }
-
-    :host([content-position='bottom']) .title,
-    :host([content-position='bottom']) .subtitle {
-      max-width: 18ch;
-    }
-
-    :host([content-position='bottom']) .subtitle {
-      max-width: 48ch;
-    }
-
-    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {
-      justify-content: flex-start;
-    }
-
-    :host([content-position='bottom'][text-alignment='center']) .title,
-    :host([content-position='bottom'][text-alignment='center']) .subtitle {
-      margin-inline: auto;
-    }
-
-    /* overlay="gradient": darkest behind the copy, clearing towards the far side of the image. */
-    :host([overlay='gradient']) .overlay {
-      background:
-        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
-        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
-    }
-
-    :host([overlay='gradient'][text-alignment='right']) .overlay {
-      background:
-        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),
-        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);
-    }
-
-    :host([overlay='none']) .overlay {
-      display: none;
-    }
-
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--st-space-8);
-      margin: 0;
-      padding: 6px 14px;
-      border: 1px solid var(--st-color-border);
-      border-radius: var(--st-radius-full);
-      background: var(--st-color-surface);
-      color: var(--st-color-text-strong);
-      font-size: var(--st-text-sm);
-      font-weight: var(--st-font-weight-bold);
-      letter-spacing: var(--st-tracking-wider);
-      line-height: 1.2;
-      text-transform: uppercase;
-      animation: st-hero-fade 0.8s 0.2s ease-out backwards;
-    }
-
-    .badge::before {
-      content: '';
-      flex: none;
-      width: 8px;
-      height: 8px;
-      border-radius: var(--st-radius-circle);
-      background: var(--st-cms-highlight);
-    }
-
-    .highlights {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      gap: var(--st-space-12) var(--st-space-24);
-      margin: 0;
-      padding: 0;
-      list-style: none;
-      animation: st-hero-fade 0.8s 0.9s ease-out backwards;
-    }
-
-    .highlight {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--st-space-8);
-      font-size: var(--st-text-md);
-      font-weight: var(--st-font-weight-semibold);
-      color: inherit;
-    }
-
-    .highlight svg {
-      flex: none;
-      width: 18px;
-      height: 18px;
-      color: var(--st-cms-highlight);
-    }
-
-    :host([text-alignment='left']) .highlights {
-      justify-content: flex-start;
-    }
-
-    :host([text-alignment='right']) .highlights {
-      justify-content: flex-end;
-    }
-
-    /* layout="split": a two-column block on the page surface; the image replaces the background. */
-    :host([layout='split']) {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
-      align-items: center;
-      gap: var(--st-space-48);
-      overflow: visible;
-      padding: var(--st-cms-section-padding) var(--st-space-24);
-      background-color: var(--st-color-surface);
-      background-image: none;
-      color: var(--st-color-text-strong);
-      animation: none;
-    }
-
-    :host([layout='split']) .overlay {
-      display: none;
-    }
-
-    :host([layout='split']) .content {
-      width: 100%;
-      margin: 0;
-      padding: 0;
-      max-width: 560px;
-      color: var(--st-hero-text-color, var(--st-color-text-strong));
-    }
-
-    :host([layout='split'][text-alignment='left']) .actions {
-      justify-content: flex-start;
-    }
-
-    :host([layout='split']) .highlight svg {
-      color: var(--st-color-accent);
-    }
-
-    .media {
-      margin: 0;
-      min-width: 0;
-    }
-
-    .image {
-      display: block;
-      width: 100%;
-      height: auto;
-      aspect-ratio: 4 / 3;
-      object-fit: cover;
-      border-radius: var(--st-radius-lg);
-      box-shadow: 0 24px 48px -16px var(--st-shadow-color-lg);
-    }
-
-    @media (min-width: 768px) {
-      .content { padding: var(--st-space-32); }
-    }
-    @media (min-width: 1024px) {
-      .content { padding: var(--st-space-48); }
-      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }
-      .cta { transition: none; }
-    }
-  `;
-Hero.positions = {
-  top: "center top",
-  left: "left center",
-  right: "right center",
-  bottom: "center bottom",
-  center: "center center"
-};
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "title", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "subtitle", 2);
-__decorateClass([
-  property({ type: String, attribute: "image-src" })
-], Hero.prototype, "imageSrc", 2);
-__decorateClass([
-  property({ type: String, attribute: "action-label" })
-], Hero.prototype, "actionLabel", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "href", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "text-alignment" })
-], Hero.prototype, "textAlignment", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "padding", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], Hero.prototype, "inverted", 2);
-__decorateClass([
-  property({ type: String, attribute: "focal-point" })
-], Hero.prototype, "focalPoint", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "eyebrow", 2);
-__decorateClass([
-  property({ type: String, attribute: "secondary-action-label" })
-], Hero.prototype, "secondaryActionLabel", 2);
-__decorateClass([
-  property({ type: String, attribute: "secondary-href" })
-], Hero.prototype, "secondaryHref", 2);
-__decorateClass([
-  property({ type: String })
-], Hero.prototype, "badge", 2);
-__decorateClass([
-  property({ attribute: false })
-], Hero.prototype, "highlights", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "layout", 2);
-__decorateClass([
-  property({ type: String, attribute: "image-alt" })
-], Hero.prototype, "imageAlt", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "size", 2);
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "content-position" })
-], Hero.prototype, "contentPosition", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], Hero.prototype, "overlay", 2);
-Hero = __decorateClass([
-  customElement("st-hero")
-], Hero);
-
-export {
-  Hero
-};
-//# sourceMappingURL=chunk-SQ3OZO32.js.map

package/dist/chunk-SQ3OZO32.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/hero/Hero.ts"],"sourcesContent":["import { LitElement, css, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { controlBaseStyles, rootFontFamilyStyles } from '../shared/styles';\nimport { ctaLinkStyles, paddingScaleStyles } from '../shared/section-styles';\nimport type { HeroActionEventDetail } from './HeroEvents';\n\nconst HIGHLIGHT_ICON = svg`<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M20 6 9 17l-5-5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>`;\n\n/**\n * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\n * optional subtitle and up to two call-to-action links. The entrance animation is CSS keyframes\n * (skipped under `prefers-reduced-motion`).\n *\n * `size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\n * lower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\n * defaults keep the original centered banner. Put several heroes in an `st-carousel` with\n * `indicator-style=\"tabs\"` for a tabbed hero carousel.\n *\n * `badge` is a pill above the title; `highlights` is a row of check-marked points under the buttons.\n * `layout=\"split\"` swaps the background for a two-column layout: copy on one side, `image-src` as an\n * `<img>` (alt from `image-alt`) on the other, on normal page colours with no overlay.\n *\n * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.\n * @cssprop --st-hero-text-color - Text colour over the image.\n * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).\n * @csspart eyebrow - The small label above the title.\n * @csspart badge - The pill above the title.\n * @csspart highlights - The row of check-marked points.\n * @csspart image - The image in `layout=\"split\"`.\n * @csspart secondary-action - The outlined second button.\n */\n@customElement('st-hero')\nexport class Hero extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n    ${paddingScaleStyles}\n\n    @keyframes st-hero-zoom {\n      from { opacity: 0; transform: scale(1.1); }\n      to { opacity: 1; transform: scale(1); }\n    }\n    @keyframes st-hero-rise {\n      from { opacity: 0; transform: translateY(30px); }\n      to { opacity: 1; transform: none; }\n    }\n    @keyframes st-hero-fade {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n      overflow: hidden;\n      width: 100%;\n      box-sizing: border-box;\n      background-color: var(--st-color-text-strong);\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: var(--st-hero-position, center center);\n      color: var(--st-color-on-solid);\n      ${rootFontFamilyStyles}\n      animation: st-hero-zoom 1.5s ease-out;\n    }\n\n    :host([inverted]) {\n      background-color: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n    }\n\n    .overlay {\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      background: linear-gradient(\n        to bottom,\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 20%, transparent),\n        color-mix(in oklch, var(--st-color-text-strong) 40%, transparent)\n      );\n    }\n\n    :host([inverted]) .overlay {\n      display: none;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-20);\n      position: relative;\n      z-index: 2;\n      width: 80%;\n      margin: 0 auto;\n      text-align: center;\n      align-items: center;\n      /* Set here, not only on :host: text sits on the image/overlay, so a colour class the page puts\n         on the host (e.g. a theme text colour) must not turn it dark. */\n      color: var(--st-hero-text-color, var(--st-color-on-solid));\n    }\n\n    :host([inverted]) .content {\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\n    }\n\n    :host([text-alignment='left']) .content { text-align: left; align-items: flex-start; }\n    :host([text-alignment='right']) .content { text-align: right; align-items: flex-end; }\n    :host([text-alignment='justify']) .content { text-align: justify; align-items: stretch; }\n\n    .title {\n      font-size: var(--st-cms-text-display);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.1;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-rise 0.8s 0.3s ease-out backwards;\n    }\n\n    .subtitle {\n      font-size: var(--st-cms-text-xl);\n      line-height: 1.5;\n      color: inherit;\n      margin: 0;\n      animation: st-hero-fade 0.8s 0.5s ease-out backwards;\n    }\n\n    .actions {\n      display: flex;\n      justify-content: center;\n      width: 100%;\n    }\n\n    .cta {\n      ${ctaLinkStyles}\n      background: var(--st-button-primary-bg);\n      color: var(--st-button-primary-color);\n      font-weight: var(--st-button-font-weight);\n      font-size: var(--st-text-md);\n      animation: st-hero-rise 0.6s 0.7s ease-out backwards;\n    }\n\n    .cta:hover {\n      transform: scale(1.05);\n    }\n\n    .cta:active {\n      transform: scale(0.98);\n    }\n\n    .eyebrow {\n      margin: 0;\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: inherit;\n      opacity: 0.85;\n      animation: st-hero-fade 0.8s 0.2s ease-out backwards;\n    }\n\n    .actions {\n      flex-wrap: wrap;\n      gap: var(--st-space-12);\n    }\n\n    .cta.secondary {\n      background: transparent;\n      color: inherit;\n      box-shadow: inset 0 0 0 1.5px currentColor;\n    }\n\n    .cta.secondary:hover {\n      background: color-mix(in oklch, currentColor 12%, transparent);\n    }\n\n    /* size=\"large\" / \"full\": a tall editorial hero. */\n    :host([size='large']) {\n      min-height: var(--st-hero-min-height, 640px);\n    }\n\n    :host([size='full']) {\n      min-height: 100svh;\n    }\n\n    :host([size='large']) .title,\n    :host([size='full']) .title {\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      letter-spacing: -0.02em;\n      line-height: 1.05;\n    }\n\n    /* content-position=\"bottom\": copy sits in the lower part of the hero, on the container grid. */\n    :host([content-position='bottom']) {\n      align-items: flex-end;\n    }\n\n    :host([content-position='bottom']) .content {\n      width: 100%;\n      max-width: var(--st-cms-container-max);\n      box-sizing: border-box;\n      padding: var(--st-space-48) var(--st-space-24);\n    }\n\n    :host([content-position='bottom']) .title,\n    :host([content-position='bottom']) .subtitle {\n      max-width: 18ch;\n    }\n\n    :host([content-position='bottom']) .subtitle {\n      max-width: 48ch;\n    }\n\n    :host([content-position='bottom']:not([text-alignment='center']):not([text-alignment='right'])) .actions {\n      justify-content: flex-start;\n    }\n\n    :host([content-position='bottom'][text-alignment='center']) .title,\n    :host([content-position='bottom'][text-alignment='center']) .subtitle {\n      margin-inline: auto;\n    }\n\n    /* overlay=\"gradient\": darkest behind the copy, clearing towards the far side of the image. */\n    :host([overlay='gradient']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to right, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='gradient'][text-alignment='right']) .overlay {\n      background:\n        linear-gradient(to top, color-mix(in oklch, var(--st-color-text-strong) 85%, transparent), transparent 70%),\n        linear-gradient(to left, color-mix(in oklch, var(--st-color-text-strong) 70%, transparent), transparent 75%);\n    }\n\n    :host([overlay='none']) .overlay {\n      display: none;\n    }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-8);\n      margin: 0;\n      padding: 6px 14px;\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-full);\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: var(--st-tracking-wider);\n      line-height: 1.2;\n      text-transform: uppercase;\n      animation: st-hero-fade 0.8s 0.2s ease-out backwards;\n    }\n\n    .badge::before {\n      content: '';\n      flex: none;\n      width: 8px;\n      height: 8px;\n      border-radius: var(--st-radius-circle);\n      background: var(--st-cms-highlight);\n    }\n\n    .highlights {\n      display: flex;\n      flex-wrap: wrap;\n      justify-content: center;\n      gap: var(--st-space-12) var(--st-space-24);\n      margin: 0;\n      padding: 0;\n      list-style: none;\n      animation: st-hero-fade 0.8s 0.9s ease-out backwards;\n    }\n\n    .highlight {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-8);\n      font-size: var(--st-text-md);\n      font-weight: var(--st-font-weight-semibold);\n      color: inherit;\n    }\n\n    .highlight svg {\n      flex: none;\n      width: 18px;\n      height: 18px;\n      color: var(--st-cms-highlight);\n    }\n\n    :host([text-alignment='left']) .highlights {\n      justify-content: flex-start;\n    }\n\n    :host([text-alignment='right']) .highlights {\n      justify-content: flex-end;\n    }\n\n    /* layout=\"split\": a two-column block on the page surface; the image replaces the background. */\n    :host([layout='split']) {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));\n      align-items: center;\n      gap: var(--st-space-48);\n      overflow: visible;\n      padding: var(--st-cms-section-padding) var(--st-space-24);\n      background-color: var(--st-color-surface);\n      background-image: none;\n      color: var(--st-color-text-strong);\n      animation: none;\n    }\n\n    :host([layout='split']) .overlay {\n      display: none;\n    }\n\n    :host([layout='split']) .content {\n      width: 100%;\n      margin: 0;\n      padding: 0;\n      max-width: 560px;\n      color: var(--st-hero-text-color, var(--st-color-text-strong));\n    }\n\n    :host([layout='split'][text-alignment='left']) .actions {\n      justify-content: flex-start;\n    }\n\n    :host([layout='split']) .highlight svg {\n      color: var(--st-color-accent);\n    }\n\n    .media {\n      margin: 0;\n      min-width: 0;\n    }\n\n    .image {\n      display: block;\n      width: 100%;\n      height: auto;\n      aspect-ratio: 4 / 3;\n      object-fit: cover;\n      border-radius: var(--st-radius-lg);\n      box-shadow: 0 24px 48px -16px var(--st-shadow-color-lg);\n    }\n\n    @media (min-width: 768px) {\n      .content { padding: var(--st-space-32); }\n    }\n    @media (min-width: 1024px) {\n      .content { padding: var(--st-space-48); }\n      :host([content-position='bottom']) .content { padding: var(--st-space-48) var(--st-space-32) 6rem; }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host, .eyebrow, .title, .subtitle, .cta { animation: none; }\n      .cta { transition: none; }\n    }\n  `;\n\n  @property({ type: String })\n  title = '';\n\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ type: String, attribute: 'image-src' })\n  imageSrc = '';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: String, reflect: true, attribute: 'text-alignment' })\n  textAlignment: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'small' | 'medium' | 'large' = 'none';\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: String, attribute: 'focal-point' })\n  focalPoint: 'top' | 'left' | 'right' | 'bottom' | 'center' = 'center';\n\n  /** Small uppercase label above the title (e.g. an event or product name). */\n  @property({ type: String })\n  eyebrow = '';\n\n  /** Label of an outlined second button next to the primary one. */\n  @property({ type: String, attribute: 'secondary-action-label' })\n  secondaryActionLabel = '';\n\n  @property({ type: String, attribute: 'secondary-href' })\n  secondaryHref = '';\n\n  /** Small pill above the title (e.g. \"New\", \"Now available\"). */\n  @property({ type: String })\n  badge = '';\n\n  /** Check-marked points shown in a row under the buttons. */\n  @property({ attribute: false })\n  highlights: string[] = [];\n\n  /** `background` (default) puts `image-src` behind the copy; `split` puts copy and image side by side. */\n  @property({ type: String, reflect: true })\n  layout: 'background' | 'split' = 'background';\n\n  /** Alt text of the image in `layout=\"split\"`. Empty marks it as decorative. */\n  @property({ type: String, attribute: 'image-alt' })\n  imageAlt = '';\n\n  /** `auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport. */\n  @property({ type: String, reflect: true })\n  size: 'auto' | 'large' | 'full' = 'auto';\n\n  /** `center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container. */\n  @property({ type: String, reflect: true, attribute: 'content-position' })\n  contentPosition: 'center' | 'bottom' = 'center';\n\n  /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */\n  @property({ type: String, reflect: true })\n  overlay: 'even' | 'gradient' | 'none' = 'even';\n\n  private static positions = {\n    top: 'center top',\n    left: 'left center',\n    right: 'right center',\n    bottom: 'center bottom',\n    center: 'center center'\n  } as const;\n\n  protected willUpdate(): void {\n    const asBackground = this.layout !== 'split';\n    this.style.backgroundImage = asBackground && this.imageSrc ? `url(${JSON.stringify(this.imageSrc)})` : '';\n    this.style.setProperty('--st-hero-position', Hero.positions[this.focalPoint] ?? Hero.positions.center);\n  }\n\n  private emitAction(event: MouseEvent, href: string, kind: 'primary' | 'secondary'): void {\n    const action = new CustomEvent<HeroActionEventDetail>('action', {\n      detail: { href, kind },\n      bubbles: true,\n      composed: true,\n      cancelable: true\n    });\n    this.dispatchEvent(action);\n    if (action.defaultPrevented) event.preventDefault();\n  }\n\n  private onClick = (event: MouseEvent): void => this.emitAction(event, this.href, 'primary');\n\n  private onSecondaryClick = (event: MouseEvent): void => this.emitAction(event, this.secondaryHref, 'secondary');\n\n  render() {\n    return html`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"content\" part=\"content\">\n        ${this.eyebrow ? html`<p class=\"eyebrow\" part=\"eyebrow\">${this.eyebrow}</p>` : nothing}\n        ${this.badge ? html`<p class=\"badge\" part=\"badge\">${this.badge}</p>` : nothing}\n        <h1 class=\"title\" part=\"title\">${this.title}</h1>\n        ${this.subtitle ? html`<p class=\"subtitle\" part=\"subtitle\">${this.subtitle}</p>` : nothing}\n        ${this.actionLabel || this.secondaryActionLabel\n          ? html`<div class=\"actions\" part=\"actions\">\n              ${this.actionLabel\n                ? html`<a class=\"cta\" part=\"action\" href=${this.href || nothing} @click=${this.onClick}>${this.actionLabel}</a>`\n                : nothing}\n              ${this.secondaryActionLabel\n                ? html`<a class=\"cta secondary\" part=\"secondary-action\" href=${this.secondaryHref || nothing} @click=${this.onSecondaryClick}\n                    >${this.secondaryActionLabel}</a\n                  >`\n                : nothing}\n            </div>`\n          : nothing}\n        ${this.highlights.length\n          ? html`<ul class=\"highlights\" part=\"highlights\">\n              ${this.highlights.map(\n                (text) => html`<li class=\"highlight\" part=\"highlight\">${HIGHLIGHT_ICON}<span>${text}</span></li>`\n              )}\n            </ul>`\n          : nothing}\n        <slot></slot>\n      </div>\n      ${this.layout === 'split' && this.imageSrc\n        ? html`<figure class=\"media\" part=\"media\">\n            <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt} />\n          </figure>`\n        : nothing}\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-UAIUBPDN.js

@@ -1,11 +0,0 @@
-// src/shared/markdown.ts
-import DOMPurify from "dompurify";
-import { marked } from "marked";
-function renderMarkdown(source) {
-  return DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));
-}
-
-export {
-  renderMarkdown
-};
-//# sourceMappingURL=chunk-UAIUBPDN.js.map

package/dist/chunk-UAIUBPDN.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/markdown.ts"],"sourcesContent":["import DOMPurify from 'dompurify';\nimport { marked } from 'marked';\n\n/**\n * Renders Markdown (GFM, single newlines become `<br>`) to HTML sanitized with DOMPurify. The one\n * place the CMS turns authored Markdown into markup; render the result with `unsafeHTML`.\n */\nexport function renderMarkdown(source: string): string {\n  return DOMPurify.sanitize(marked.parse(source, { gfm: true, breaks: true, async: false }));\n}\n"],"mappings":";AAAA,OAAO,eAAe;AACtB,SAAS,cAAc;AAMhB,SAAS,eAAe,QAAwB;AACrD,SAAO,UAAU,SAAS,OAAO,MAAM,QAAQ,EAAE,KAAK,MAAM,QAAQ,MAAM,OAAO,MAAM,CAAC,CAAC;AAC3F;","names":[]}

package/dist/chunk-WT4OATGP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/feature-split/FeatureSplit.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'iconify-icon';\n\nimport { controlBaseStyles, ctaButtonStyles, fontFamilyStyles } from '../shared/styles';\nimport '../markdown';\nimport {\n  cardTitleStyles,\n  iconTileStyles,\n  reducedMotionStyles,\n  sectionTitleStyles,\n} from '../shared/section-styles';\nimport type { FeatureSplitActionEventDetail } from './FeatureSplitEvents';\n\nexport interface FeatureSplitItem {\n  /** Iconify icon name, e.g. `mdi:check`. */\n  icon?: string;\n  title: string;\n  /** Markdown. */\n  description: string;\n}\n\nexport type FeatureSplitImagePosition = 'left' | 'right' | 'top';\n\n/**\n * A title/markdown-subtitle/feature-list block beside (or under) an image.\n *\n * @cssprop --st-feature-split-padding - Overrides the block's padding.\n */\n@customElement('st-feature-split')\nexport class FeatureSplit extends LitElement {\n  static styles = css`\n    ${controlBaseStyles}\n\n    :host {\n      display: block;\n      /* !important: a page-level reset (e.g. Tailwind Preflight) otherwise zeroes a shadow host's\n         padding; override with --st-feature-split-padding instead. */\n      padding: var(--st-feature-split-padding, var(--st-space-24)) !important;\n      background: var(--st-color-page);\n      ${fontFamilyStyles}\n    }\n\n    :host([inverted]) {\n      background: var(--st-color-text-strong);\n    }\n\n    .container {\n      max-width: var(--st-cms-container-max);\n      margin: 0 auto;\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: var(--st-space-48);\n      align-items: center;\n    }\n\n    :host([image-position='left']) .container {\n      direction: rtl;\n    }\n\n    :host([image-position='left']) .content {\n      direction: ltr;\n    }\n\n    :host([image-position='top']) .container {\n      grid-template-columns: 1fr;\n      text-align: center;\n    }\n\n    :host([image-position='top']) .content {\n      align-items: center;\n    }\n\n    :host([image-position='top']) .image-wrapper {\n      order: -1;\n      max-width: 800px;\n      margin: 0 auto;\n    }\n\n    .content {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-32);\n    }\n\n    .title {\n      ${sectionTitleStyles}\n      margin: 0;\n    }\n\n    .subtitle {\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-base);\n      line-height: 1.6;\n    }\n\n    .list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-24);\n      margin-top: var(--st-space-16);\n    }\n\n    .item {\n      display: flex;\n      gap: var(--st-space-16);\n      align-items: flex-start;\n      text-align: left;\n    }\n\n    .icon {\n      ${iconTileStyles}\n      width: var(--st-space-48);\n      height: var(--st-space-48);\n      font-size: 24px;\n    }\n\n    .item-title {\n      ${cardTitleStyles}\n    }\n\n    .item-description {\n      color: var(--st-color-text-muted);\n      font-size: var(--st-text-sm);\n      line-height: 1.5;\n    }\n\n    .action {\n      ${ctaButtonStyles}\n      justify-self: start;\n      padding: var(--st-space-16);\n      border-radius: var(--st-radius-lg);\n    }\n\n    .image-wrapper {\n      width: 100%;\n      height: 100%;\n      min-height: 400px;\n      border-radius: var(--st-space-24);\n      overflow: hidden;\n      box-shadow: 0 20px 40px -12px var(--st-shadow-color-md);\n    }\n\n    .image {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      transition: transform 0.5s ease;\n    }\n\n    .image:hover {\n      transform: scale(1.02);\n    }\n\n    :host([inverted]) .title,\n    :host([inverted]) .item-title {\n      color: var(--st-color-on-solid);\n    }\n\n    :host([inverted]) .subtitle,\n    :host([inverted]) .item-description {\n      color: var(--st-color-border);\n    }\n\n    :host([inverted]) .icon {\n      background: var(--st-color-text);\n      color: var(--st-color-border);\n    }\n\n    @media (max-width: 1024px) {\n      .container {\n        gap: var(--st-space-40);\n      }\n    }\n\n    @media (max-width: 768px) {\n      :host {\n        padding: var(--st-feature-split-padding, var(--st-space-48) var(--st-space-24)) !important;\n      }\n\n      .container {\n        grid-template-columns: 1fr;\n        direction: ltr !important;\n      }\n\n      .image-wrapper {\n        min-height: 300px;\n        order: -1;\n      }\n    }\n\n    ${reducedMotionStyles}\n  `;\n\n  @property({ type: Boolean, reflect: true })\n  inverted = false;\n\n  @property({ type: String })\n  title = '';\n\n  /** Markdown. */\n  @property({ type: String })\n  subtitle = '';\n\n  @property({ attribute: false })\n  items: FeatureSplitItem[] = [];\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-position', reflect: true })\n  imagePosition: FeatureSplitImagePosition = 'right';\n\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  @property({ type: String })\n  href = '';\n\n  private onAction() {\n    const event = new CustomEvent<FeatureSplitActionEventDetail>('feature-split-action', {\n      detail: { href: this.href },\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(event)) window.location.href = this.href;\n  }\n\n  render() {\n    return html`\n      <div class=\"container\" part=\"container\">\n        <div class=\"content\" part=\"content\">\n          <h2 class=\"title\" part=\"title\">${this.title}</h2>\n          ${this.subtitle\n            ? html`<div class=\"subtitle\" part=\"subtitle\"><st-markdown .content=${this.subtitle}></st-markdown></div>`\n            : nothing}\n          ${this.items.length > 0\n            ? html`<div class=\"list\" part=\"list\">\n                ${this.items.map(\n                  (item) => html`\n                    <div class=\"item\" part=\"item\">\n                      ${item.icon\n                        ? html`<div class=\"icon\" part=\"icon\"><iconify-icon icon=${item.icon}></iconify-icon></div>`\n                        : nothing}\n                      <div>\n                        <h3 class=\"item-title\" part=\"item-title\">${item.title}</h3>\n                        <div class=\"item-description\" part=\"item-description\">\n                          <st-markdown .content=${item.description}></st-markdown>\n                        </div>\n                      </div>\n                    </div>\n                  `,\n                )}\n              </div>`\n            : nothing}\n          ${this.actionLabel && this.href\n            ? html`<button class=\"action\" part=\"action\" type=\"button\" @click=${this.onAction}>${this.actionLabel}</button>`\n            : nothing}\n        </div>\n        <div class=\"image-wrapper\" part=\"image-wrapper\">\n          <img class=\"image\" part=\"image\" src=${this.imageSrc} alt=${this.imageAlt || this.title} />\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AACxC,OAAO;AA4BA,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC;AAAA;AAqKL,oBAAW;AAGX,iBAAQ;AAIR,oBAAW;AAGX,iBAA4B,CAAC;AAG7B,oBAAW;AAGX,oBAAW;AAGX,yBAA2C;AAG3C,uBAAc;AAGd,gBAAO;AAAA;AAAA,EAEC,WAAW;AACjB,UAAM,QAAQ,IAAI,YAA2C,wBAAwB;AAAA,MACnF,QAAQ,EAAE,MAAM,KAAK,KAAK;AAAA,MAC1B,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IACd,CAAC;AACD,QAAI,KAAK,cAAc,KAAK,EAAG,QAAO,SAAS,OAAO,KAAK;AAAA,EAC7D;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,2CAGgC,KAAK,KAAK;AAAA,YACzC,KAAK,WACH,mEAAmE,KAAK,QAAQ,0BAChF,OAAO;AAAA,YACT,KAAK,MAAM,SAAS,IAClB;AAAA,kBACI,KAAK,MAAM;AAAA,MACX,CAAC,SAAS;AAAA;AAAA,wBAEJ,KAAK,OACH,wDAAwD,KAAK,IAAI,2BACjE,OAAO;AAAA;AAAA,mEAEkC,KAAK,KAAK;AAAA;AAAA,kDAE3B,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,IAKlD,CAAC;AAAA,wBAEH,OAAO;AAAA,YACT,KAAK,eAAe,KAAK,OACvB,iEAAiE,KAAK,QAAQ,IAAI,KAAK,WAAW,cAClG,OAAO;AAAA;AAAA;AAAA,gDAG2B,KAAK,QAAQ,QAAQ,KAAK,YAAY,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,EAI9F;AACF;AA/Oa,aACJ,SAAS;AAAA,MACZ,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQf,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,QA8ChB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyBlB,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUf,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MA+DjB,mBAAmB;AAAA;AAIvB;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GApK/B,aAqKX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAvKf,aAwKX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA3Kf,aA4KX;AAGA;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GA9KnB,aA+KX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GAjLvC,aAkLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA,GApLvC,aAqLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,kBAAkB,SAAS,KAAK,CAAC;AAAA,GAvL3D,aAwLX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GA1L1C,aA2LX;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Lf,aA8LX;AA9LW,eAAN;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB;","names":[]}