@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/quote-dialog/index.d.ts

@@ -0,0 +1,174 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface QuoteOption {
+    id: string;
+    label: string;
+    hint?: string;
+    /** Short name for the e-mail subject's `{option}` (e.g. "Cloud" for "Cloud (SaaS)"). Defaults to `label`. */
+    subjectLabel?: string;
+}
+/**
+ * A quote-request dialog: radio cards for the kind of request, then name, e-mail, company, a user
+ * count, an optional message and a required consent box. It opens when a window `st-quote-open`
+ * event names its `id` (`st-plan-cards` does this on a button click), with that option preselected.
+ *
+ * It is a native `<dialog>` opened with `showModal()`, so focus is trapped, Esc closes it and the page
+ * behind is inert. Closing (Esc, the close button or a click on the backdrop) returns focus to the
+ * element that opened it. While open, `<html>` carries `data-st-modal-open` (removed on every close and
+ * on disconnect), so other fixed page UI such as `st-cookie-consent` steps aside.
+ * Submitting checks the fields, opens a `mailto:` message to `mailto` with
+ * every answer in the body, dispatches `quote-submit` and shows `success-title` / `success-text`
+ * (`{option}` in the text becomes the chosen option's label). Without `mailto` nothing is opened and
+ * the success state still shows. `subject` may use `{option}` (the option's `subjectLabel`, else its
+ * label), `{company}` and `{name}`. `mailto-note` is shown under the success text (`{email}` becomes
+ * the `mailto` address, as a link) with a button that copies the address, for visitors whose mail
+ * app did not open. An empty `consent-label` leaves out the consent box.
+ *
+ * The element's `id` is the dialog name: set it on the JSON node (`"id": "quote"`), and point
+ * `quoteDialog` on a `st-plan-cards` at the same value.
+ *
+ * @fires quote-submit - Bubbles and is composed. Detail `{ option, name, email, company, count, message, consent }`.
+ * @cssprop --st-quote-dialog-backdrop - Colour of the backdrop behind the dialog (default a navy at 55%).
+ * @csspart dialog - The native dialog.
+ * @csspart form - The request form.
+ * @csspart submit - The submit button.
+ * @csspart close - The close button.
+ */
+declare class QuoteDialog extends LitElement {
+    static styles: lit.CSSResult;
+    /** Heading of the dialog (an `<h2>`, named by the dialog). */
+    title: string;
+    subtitle: string;
+    /** The radio cards for the kind of request. */
+    options: QuoteOption[];
+    optionsLabel: string;
+    nameLabel: string;
+    namePlaceholder: string;
+    emailLabel: string;
+    emailPlaceholder: string;
+    companyLabel: string;
+    companyPlaceholder: string;
+    countLabel: string;
+    countPlaceholder: string;
+    /** Label of the optional message box. "(optional)" is appended. */
+    messageLabel: string;
+    messagePlaceholder: string;
+    consentLabel: string;
+    submitLabel: string;
+    successTitle: string;
+    /** Shown after submitting. `{option}` is replaced with the chosen option's label. */
+    successText: string;
+    closeLabel: string;
+    /** Recipient of the request e-mail. Without it, submitting opens no e-mail. */
+    mailto: string;
+    /** Subject of the request e-mail. `{option}`, `{company}` and `{name}` are filled in. */
+    subject: string;
+    /** Shown under the success text when `mailto` is set. `{email}` becomes the address as a link. Empty hides it. */
+    mailtoNote: string;
+    copyLabel: string;
+    copiedLabel: string;
+    private selected;
+    private copied;
+    private submitted;
+    private errors;
+    private submittedOption;
+    private dialogEl?;
+    private formEl?;
+    private trigger;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Opens for `st-quote-open` events aimed at this dialog's `id`. */
+    private onOpenRequest;
+    /** Renders the reset form first, so every open starts empty, then shows the modal. */
+    private open;
+    private close;
+    /** Runs on every close (Esc, the close button, the backdrop): focus goes back to the opener. */
+    private onDialogClose;
+    private onBackdropClick;
+    private fieldValue;
+    private validate;
+    private onSubmit;
+    private renderField;
+    /** One sentence listing every failing field, for the live region ("" when valid). */
+    private errorSummary;
+    private renderForm;
+    private renderConsent;
+    private copyAddress;
+    /** The mailto note with `{email}` as a link to the address. */
+    private renderMailtoNote;
+    private renderSuccess;
+    render(): lit.TemplateResult<1>;
+}
+
+/** Window-level event that asks a `st-quote-dialog` with the matching `id` to open. */
+declare const QUOTE_OPEN_EVENT = "st-quote-open";
+/** Detail of `st-quote-open`. `trigger` is the element that opened the dialog; focus returns to it on close. */
+interface QuoteOpenEventDetail {
+    /** The `id` of the `st-quote-dialog` to open. */
+    dialog: string;
+    /** Option to preselect (an option `id`, or `unsure`). */
+    option?: string;
+    trigger?: HTMLElement | null;
+}
+/** Detail of the `quote-submit` event: the chosen option and every field the visitor filled in. */
+interface QuoteSubmitEventDetail {
+    option: string;
+    name: string;
+    email: string;
+    company: string;
+    count: string;
+    message: string;
+    consent: boolean;
+}
+
+/** One labelled line of a `mailto:` body. */
+interface MailtoField {
+    label: string;
+    value: string;
+}
+interface MailtoInput {
+    /** Recipient address. */
+    to: string;
+    subject: string;
+    /** Written into the body as one `Label: value` line each, in order. */
+    fields: MailtoField[];
+    /**
+     * Longest the percent-encoded body may be (default 1800). Mail apps and browsers cut off long
+     * `mailto:` URLs, so the field picked by `truncateField` is shortened with "…" until the body fits.
+     */
+    maxBodyLength?: number;
+    /** Index of the field to shorten when the body is too long (default: the last field). */
+    truncateField?: number;
+}
+declare const DEFAULT_MAILTO_BODY_LIMIT = 1800;
+/**
+ * Builds a `mailto:` URL whose body is plain text: one `Label: value` line per field (an empty value
+ * is written as `-`). Subject and body are percent-encoded, so line breaks and symbols survive the
+ * URL. When the encoded body is longer than `maxBodyLength`, one field (the last, unless
+ * `truncateField` says otherwise) is cut short, on a character boundary, and ends in "…".
+ */
+declare function buildMailto({ to, subject, fields, maxBodyLength, truncateField }: MailtoInput): string;
+
+/** One labelled line of the request e-mail. */
+type QuoteMailField = MailtoField;
+interface QuoteMailtoInput {
+    /** Recipient address. */
+    to: string;
+    subject: string;
+    /** Human label of the chosen option, written into the body. */
+    optionLabel: string;
+    fields: QuoteMailField[];
+    /** Longest the encoded body may be; the last field is shortened with "…" to fit (default 1800). */
+    maxBodyLength?: number;
+}
+/**
+ * Builds a `mailto:` URL whose body is plain text: the chosen option, then one `Label: value` line
+ * per field (see `buildMailto`). Subject and body are percent-encoded, so line breaks and symbols
+ * survive the URL. An empty value is written as `-`.
+ */
+declare function buildQuoteMailto({ to, subject, optionLabel, fields, maxBodyLength }: QuoteMailtoInput): string;
+/** Fills `{name}` placeholders in a subject or text line; unknown names are left as they are. */
+declare function fillTemplate(template: string, values: Record<string, string>): string;
+
+export { DEFAULT_MAILTO_BODY_LIMIT, type MailtoField, type MailtoInput, QUOTE_OPEN_EVENT, QuoteDialog, type QuoteMailField, type QuoteMailtoInput, type QuoteOpenEventDetail, type QuoteOption, type QuoteSubmitEventDetail, buildMailto, buildQuoteMailto, fillTemplate };

package/dist/quote-dialog/index.js

@@ -0,0 +1,22 @@
+import {
+  DEFAULT_MAILTO_BODY_LIMIT,
+  QuoteDialog,
+  buildMailto,
+  buildQuoteMailto,
+  fillTemplate
+} from "../chunk-AYNT7G3J.js";
+import {
+  QUOTE_OPEN_EVENT
+} from "../chunk-FOUK3NHR.js";
+import "../chunk-WAMOAAMN.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  DEFAULT_MAILTO_BODY_LIMIT,
+  QUOTE_OPEN_EVENT,
+  QuoteDialog,
+  buildMailto,
+  buildQuoteMailto,
+  fillTemplate
+};
+//# sourceMappingURL=index.js.map

package/dist/quote-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/schema/index.d.ts

@@ -8,6 +8,8 @@ interface NodeEnvelope<TNode> {
     slot?: string;
     /** Editor-only label, never passed to the component. */
     label?: string;
+    /** `false` leaves the node (and its children) out of the rendered page. Omit, or `true`, to show it. Never passed to the component. */
+    visible?: boolean;
     children?: TNode[];
 }
 /**
@@ -38,8 +40,10 @@ declare const componentTags: {
     readonly Card: "st-card";
     readonly AttentionPanel: "st-attention-panel";
     readonly BarChart: "st-bar-chart";
+    readonly Booking: "st-booking";
     readonly Carousel: "st-carousel";
     readonly Chip: "st-chip";
+    readonly ContactForm: "st-contact-form";
     readonly ContentBlock: "st-content-block";
     readonly CookieConsent: "st-cookie-consent";
     readonly DateTile: "st-date-tile";
@@ -47,6 +51,7 @@ declare const componentTags: {
     readonly FeatureItem: "st-feature-item";
     readonly FeatureSplit: "st-feature-split";
     readonly FeaturesSection: "st-features-section";
+    readonly Flow: "st-flow";
     readonly Footer: "st-footer";
     readonly Header: "st-header";
     readonly Hero: "st-hero";
@@ -59,11 +64,17 @@ declare const componentTags: {
     readonly MenuGrid: "st-menu-grid";
     readonly MenuGridItem: "st-menu-grid-item";
     readonly MenuItem: "st-menu-item";
+    readonly PlanCards: "st-plan-cards";
+    readonly ProductNav: "st-product-nav";
     readonly PromoBanner: "st-promo-banner";
+    readonly QuoteDialog: "st-quote-dialog";
+    readonly ScreenshotTour: "st-screenshot-tour";
     readonly SegmentedControl: "st-segmented-control";
     readonly Section: "st-section";
     readonly Select: "st-select";
     readonly Stats: "st-stats";
+    readonly Steps: "st-steps";
+    readonly TagStrip: "st-tag-strip";
     readonly Testimonials: "st-testimonials";
 };
 /** Every `type` the base set knows. */

package/dist/schema/index.js

@@ -19,8 +19,10 @@ var componentTags = {
   Card: "st-card",
   AttentionPanel: "st-attention-panel",
   BarChart: "st-bar-chart",
+  Booking: "st-booking",
   Carousel: "st-carousel",
   Chip: "st-chip",
+  ContactForm: "st-contact-form",
   ContentBlock: "st-content-block",
   CookieConsent: "st-cookie-consent",
   DateTile: "st-date-tile",
@@ -28,6 +30,7 @@ var componentTags = {
   FeatureItem: "st-feature-item",
   FeatureSplit: "st-feature-split",
   FeaturesSection: "st-features-section",
+  Flow: "st-flow",
   Footer: "st-footer",
   Header: "st-header",
   Hero: "st-hero",
@@ -40,11 +43,17 @@ var componentTags = {
   MenuGrid: "st-menu-grid",
   MenuGridItem: "st-menu-grid-item",
   MenuItem: "st-menu-item",
+  PlanCards: "st-plan-cards",
+  ProductNav: "st-product-nav",
   PromoBanner: "st-promo-banner",
+  QuoteDialog: "st-quote-dialog",
+  ScreenshotTour: "st-screenshot-tour",
   SegmentedControl: "st-segmented-control",
   Section: "st-section",
   Select: "st-select",
   Stats: "st-stats",
+  Steps: "st-steps",
+  TagStrip: "st-tag-strip",
   Testimonials: "st-testimonials"
 };
 function isBaseComponentType(type) {

package/dist/schema/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n    id?: string;\n    /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n    slot?: string;\n    /** Editor-only label, never passed to the component. */\n    label?: string;\n    children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n    type: string;\n    [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        !Array.isArray(value) &&\n        typeof (value as { type?: unknown }).type === 'string' &&\n        (value as { type: string }).type.trim().length > 0\n    );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n    return nodes.map(node => {\n        const patched = node.id === id ? { ...node, ...props } : node;\n        return patched.children\n            ? { ...patched, children: patchNodeById(patched.children, id, props) }\n            : patched;\n    });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n    BentoGrid: 'st-bento-grid',\n    Card: 'st-card',\n    AttentionPanel: 'st-attention-panel',\n    BarChart: 'st-bar-chart',\n    Carousel: 'st-carousel',\n    Chip: 'st-chip',\n    ContentBlock: 'st-content-block',\n    CookieConsent: 'st-cookie-consent',\n    DateTile: 'st-date-tile',\n    Dropdown: 'st-dropdown',\n    FeatureItem: 'st-feature-item',\n    FeatureSplit: 'st-feature-split',\n    FeaturesSection: 'st-features-section',\n    Footer: 'st-footer',\n    Header: 'st-header',\n    Hero: 'st-hero',\n    IconButton: 'st-icon-button',\n    ItemsAccordion: 'st-items-accordion',\n    KpiCard: 'st-kpi-card',\n    MegaMenu: 'st-mega-menu',\n    MegaMenuColumn: 'st-mega-menu-column',\n    MegaMenuFeature: 'st-mega-menu-feature',\n    MenuGrid: 'st-menu-grid',\n    MenuGridItem: 'st-menu-grid-item',\n    MenuItem: 'st-menu-item',\n    PromoBanner: 'st-promo-banner',\n    SegmentedControl: 'st-segmented-control',\n    Section: 'st-section',\n    Select: 'st-select',\n    Stats: 'st-stats',\n    Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n    return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n    if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n    const n = node as ComponentNode;\n    const found: string[] = [];\n    if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n    for (const legacy of LEGACY_KEYS) {\n        if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n    }\n    if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n        found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n    }\n    if (n.children !== undefined) {\n        if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n        else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n    }\n    return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n    const nodes = Array.isArray(page) ? page : [page];\n    return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":";;;AA2BO,SAAS,gBAAgB,OAAwC;AACpE,SACI,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,KACpB,OAAQ,MAA6B,SAAS,YAC7C,MAA2B,KAAK,KAAK,EAAE,SAAS;AAEzD;;;AC7BO,SAAS,cAAc,OAAwB,IAAY,OAAiD;AAC/G,SAAO,MAAM,IAAI,UAAQ;AACrB,UAAM,UAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AACzD,WAAO,QAAQ,WACT,EAAE,GAAG,SAAS,UAAU,cAAc,QAAQ,UAAU,IAAI,KAAK,EAAE,IACnE;AAAA,EACV,CAAC;AACL;;;ACRO,IAAM,gBAAgB;AAAA,EACzB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;ACxCA,IAAM,cAAc,CAAC,QAAQ,gBAAgB,iBAAiB,SAAS,YAAY;AAO5E,SAAS,aAAa,MAAe,QAAQ,QAAQ,cAAyC,qBAA+B;AAChI,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,GAAG,KAAK,0BAA0B;AAChH,QAAM,IAAI;AACV,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,EAAE,SAAS,YAAY,CAAC,YAAY,EAAE,IAAI,EAAG,OAAM,KAAK,GAAG,KAAK,mBAAmB,OAAO,EAAE,IAAI,CAAC,GAAG;AAC/G,aAAW,UAAU,aAAa;AAC9B,QAAI,UAAU,EAAG,OAAM,KAAK,GAAG,KAAK,iBAAiB,MAAM,GAAG;AAAA,EAClE;AACA,MAAI,MAAM,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,KAAK,UAAQ,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,IAAI,GAAG;AAC7G,UAAM,KAAK,GAAG,KAAK,kEAAkE;AAAA,EACzF;AACA,MAAI,EAAE,aAAa,QAAW;AAC1B,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAG,OAAM,KAAK,GAAG,KAAK,6BAA6B;AAAA,QAC3E,GAAE,SAAS,QAAQ,CAAC,OAAO,MAAM,MAAM,KAAK,GAAG,aAAa,OAAO,GAAG,KAAK,aAAa,CAAC,KAAK,WAAW,CAAC,CAAC;AAAA,EACpH;AACA,SAAO;AACX;AAGO,SAAS,aAAa,MAAe,aAAmD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAChD,SAAO,MAAM,QAAQ,CAAC,MAAM,MAAM,aAAa,MAAM,IAAI,CAAC,KAAK,WAAW,CAAC;AAC/E;","names":[]}
+{"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n    id?: string;\n    /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n    slot?: string;\n    /** Editor-only label, never passed to the component. */\n    label?: string;\n    /** `false` leaves the node (and its children) out of the rendered page. Omit, or `true`, to show it. Never passed to the component. */\n    visible?: boolean;\n    children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n    type: string;\n    [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        !Array.isArray(value) &&\n        typeof (value as { type?: unknown }).type === 'string' &&\n        (value as { type: string }).type.trim().length > 0\n    );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n    return nodes.map(node => {\n        const patched = node.id === id ? { ...node, ...props } : node;\n        return patched.children\n            ? { ...patched, children: patchNodeById(patched.children, id, props) }\n            : patched;\n    });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n    BentoGrid: 'st-bento-grid',\n    Card: 'st-card',\n    AttentionPanel: 'st-attention-panel',\n    BarChart: 'st-bar-chart',\n    Booking: 'st-booking',\n    Carousel: 'st-carousel',\n    Chip: 'st-chip',\n    ContactForm: 'st-contact-form',\n    ContentBlock: 'st-content-block',\n    CookieConsent: 'st-cookie-consent',\n    DateTile: 'st-date-tile',\n    Dropdown: 'st-dropdown',\n    FeatureItem: 'st-feature-item',\n    FeatureSplit: 'st-feature-split',\n    FeaturesSection: 'st-features-section',\n    Flow: 'st-flow',\n    Footer: 'st-footer',\n    Header: 'st-header',\n    Hero: 'st-hero',\n    IconButton: 'st-icon-button',\n    ItemsAccordion: 'st-items-accordion',\n    KpiCard: 'st-kpi-card',\n    MegaMenu: 'st-mega-menu',\n    MegaMenuColumn: 'st-mega-menu-column',\n    MegaMenuFeature: 'st-mega-menu-feature',\n    MenuGrid: 'st-menu-grid',\n    MenuGridItem: 'st-menu-grid-item',\n    MenuItem: 'st-menu-item',\n    PlanCards: 'st-plan-cards',\n    ProductNav: 'st-product-nav',\n    PromoBanner: 'st-promo-banner',\n    QuoteDialog: 'st-quote-dialog',\n    ScreenshotTour: 'st-screenshot-tour',\n    SegmentedControl: 'st-segmented-control',\n    Section: 'st-section',\n    Select: 'st-select',\n    Stats: 'st-stats',\n    Steps: 'st-steps',\n    TagStrip: 'st-tag-strip',\n    Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n    return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n    if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n    const n = node as ComponentNode;\n    const found: string[] = [];\n    if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n    for (const legacy of LEGACY_KEYS) {\n        if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n    }\n    if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n        found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n    }\n    if (n.children !== undefined) {\n        if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n        else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n    }\n    return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n    const nodes = Array.isArray(page) ? page : [page];\n    return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":"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","names":[]}

package/dist/screenshot-tour/index.d.ts

@@ -0,0 +1,54 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface ScreenshotTourItem {
+    /** Text on the tab button that selects this screen. */
+    label: string;
+    /** Small uppercase line above the title (e.g. "Step 2"). */
+    step?: string;
+    /** Heading shown under the screenshot. */
+    title: string;
+    /** Body text shown under the heading. */
+    caption?: string;
+    /** Screenshot URL. */
+    src: string;
+    /** Alternative text for the screenshot. */
+    alt: string;
+}
+/**
+ * A product tour: a row of tab buttons, one per screenshot, and below it the selected screenshot
+ * in a framed figure with its step, title and caption. Only the selected screen is shown; the
+ * others are not rendered in the document flow.
+ *
+ * Keyboard (on the tab row): Arrow Right/Down moves to the next tab and Arrow Left/Up to the
+ * previous one, both wrapping at the ends; Home and End jump to the first and last tab. Each of
+ * these moves focus to the tab and selects it. Tab and Shift+Tab move through the tabs as usual.
+ * On narrow screens the tab row scrolls sideways (it never scrolls the page vertically).
+ *
+ * @csspart tabs - The row of tab buttons (`role="group"`).
+ * @csspart tab - Each tab button. Selected tabs carry `aria-pressed="true"`.
+ * @csspart figure - The `figure` holding the screenshot and its caption.
+ * @csspart frame - The bordered frame around the screenshot.
+ * @csspart image - The screenshot `img`.
+ * @csspart caption - The `figcaption` with the text beside (or below, on narrow screens) the image.
+ * @csspart step - The small eyebrow line above the title.
+ * @csspart title - The screen's heading.
+ * @csspart text - The caption paragraph.
+ */
+declare class ScreenshotTour extends LitElement {
+    static styles: lit.CSSResult;
+    /** The screens, in tab order. */
+    items: ScreenshotTourItem[];
+    /** Accessible name for the tab group. */
+    label: string;
+    /** Index of the selected screen. Clamped to the range of `items`. */
+    private active;
+    /** The selected index, kept inside the range of `items`. */
+    private get current();
+    private tabButtons;
+    private select;
+    private onKeydown;
+    render(): lit.TemplateResult<1>;
+}
+
+export { ScreenshotTour, type ScreenshotTourItem };

package/dist/screenshot-tour/index.js

@@ -0,0 +1,9 @@
+import {
+  ScreenshotTour
+} from "../chunk-535QAZ6A.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  ScreenshotTour
+};
+//# sourceMappingURL=index.js.map

package/dist/screenshot-tour/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/section/index.d.ts

@@ -12,6 +12,7 @@ import { LitElement } from 'lit';
  * @cssprop --st-section-padding-inline - Overrides the left/right padding (not with `width="full"`).
  * @csspart inner - The width-limited content box.
  * @csspart header - The heading block.
+ * @csspart content - The wrapper around the slot (the grid when `columns` is 2).
  */
 declare class Section extends LitElement {
     static styles: lit.CSSResult;
@@ -26,6 +27,8 @@ declare class Section extends LitElement {
     spacingBelow: 'none' | 's' | 'm' | 'l' | 'xl' | 'xxl';
     /** `contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge). */
     width: 'contained' | 'narrow' | 'full';
+    /** Columns for the slotted children: `1` (default, stacked) or `2` (two equal columns, stacked again below 720px). */
+    columns: 1 | 2;
     /** Alignment of the heading. */
     textAlignment: 'left' | 'center';
     render(): lit.TemplateResult<1>;

package/dist/section/index.js

@@ -1,8 +1,8 @@
 import {
   Section
-} from "../chunk-7NLZND6Q.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-GOFSMD6W.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Section

package/dist/segmented-control/index.js

@@ -1,7 +1,7 @@
 import {
   SegmentedControl
-} from "../chunk-MG2VTZA4.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-QS3ANOWN.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   SegmentedControl

package/dist/select/index.js

@@ -1,8 +1,8 @@
 import {
   Select
-} from "../chunk-BLQV2YMO.js";
+} from "../chunk-EZOKT7NJ.js";
 import "../chunk-WTD2YIAA.js";
-import "../chunk-KMU6ABQF.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Select

package/dist/shared/styles.d.ts

@@ -23,6 +23,12 @@ declare const truncateStyles: lit.CSSResult;
  * font-size, and color are layered on.
  */
 declare const buttonResetStyles: lit.CSSResult;
+/**
+ * The pill CTA shape (`buttonStyle="pill"`): fully rounded, centred label, `min-height` 52px for a
+ * main CTA (hero, banner). A component can set `--st-cta-pill-min-height: 44px` for smaller CTAs.
+ * Fill, colour, border and padding stay local (they differ between primary and secondary).
+ */
+declare const ctaPillStyles: lit.CSSResult;
 /**
  * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,
  * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the
@@ -87,4 +93,4 @@ declare const rootFontFamilyStyles: lit.CSSResult;
 declare const BREAKPOINT_TABLET = 900;
 declare const BREAKPOINT_MOBILE = 500;
 
-export { BREAKPOINT_MOBILE, BREAKPOINT_TABLET, buttonResetStyles, cardShellStyles, controlBaseStyles, ctaButtonDisabledStyles, ctaButtonFillStyles, ctaButtonStyles, dropdownPanelStyles, emptyStateStyles, eyebrowLabelStyles, fontFamilyStyles, itemCaptionStyles, itemNameStyles, resultLinkStyles, resultNameStyles, resultRowStyles, rootFontFamilyStyles, rowDividerStyles, tableShellStyles, truncateStyles };
+export { BREAKPOINT_MOBILE, BREAKPOINT_TABLET, buttonResetStyles, cardShellStyles, controlBaseStyles, ctaButtonDisabledStyles, ctaButtonFillStyles, ctaButtonStyles, ctaPillStyles, dropdownPanelStyles, emptyStateStyles, eyebrowLabelStyles, fontFamilyStyles, itemCaptionStyles, itemNameStyles, resultLinkStyles, resultNameStyles, resultRowStyles, rootFontFamilyStyles, rowDividerStyles, tableShellStyles, truncateStyles };

package/dist/shared/styles.js

@@ -7,6 +7,7 @@ import {
   ctaButtonDisabledStyles,
   ctaButtonFillStyles,
   ctaButtonStyles,
+  ctaPillStyles,
   dropdownPanelStyles,
   emptyStateStyles,
   eyebrowLabelStyles,
@@ -20,7 +21,7 @@ import {
   rowDividerStyles,
   tableShellStyles,
   truncateStyles
-} from "../chunk-KMU6ABQF.js";
+} from "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   BREAKPOINT_MOBILE,
@@ -31,6 +32,7 @@ export {
   ctaButtonDisabledStyles,
   ctaButtonFillStyles,
   ctaButtonStyles,
+  ctaPillStyles,
   dropdownPanelStyles,
   emptyStateStyles,
   eyebrowLabelStyles,

package/dist/stats/index.js

@@ -1,7 +1,7 @@
 import {
   Stats
-} from "../chunk-YVTFQHVY.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-TEAZZPDQ.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Stats

package/dist/steps/index.d.ts

@@ -0,0 +1,45 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface StepItem {
+    title: string;
+    /** Plain text, or Markdown when the block has `markdown` set (for inline `code`). */
+    description?: string;
+    /** Small pill beside the title (e.g. "Included"). On the highlighted last card it turns cyan. */
+    badge?: string;
+}
+/**
+ * A numbered process: a responsive grid of cards, each with an automatic "01", "02", ... number, a
+ * title and a description. `highlightLast` makes the final card a dark navy call-out, the way
+ * enterprise pages close a how-it-works sequence. `inverted` puts the whole block on the dark band.
+ * `variant="band"` sets the block on a white full-width band with hairline top and bottom borders;
+ * the cards sit on a light blue surface and the numbers are large azure.
+ *
+ * @cssprop --st-steps-padding - Overrides the block's padding.
+ * @csspart header - The eyebrow/title/subtitle block.
+ * @csspart card - Each step card (an `li`).
+ * @csspart number - The step number.
+ * @csspart badge - The pill beside a step's title.
+ */
+declare class Steps extends LitElement {
+    static styles: lit.CSSResult;
+    /** Small uppercase label above the title. */
+    eyebrow: string;
+    title: string;
+    subtitle: string;
+    /** The steps, in order. */
+    items: StepItem[];
+    /** Renders the last step as a dark navy call-out card. */
+    highlightLast: boolean;
+    /** Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */
+    inverted: boolean;
+    /** `default` is the bordered card grid; `band` is a white full-width band with light blue cards. */
+    variant: 'default' | 'band';
+    /** Renders each step's description as Markdown (inline `code`, links). Off by default: descriptions are plain text. */
+    markdown: boolean;
+    private renderDescription;
+    private renderTitle;
+    render(): lit.TemplateResult<1>;
+}
+
+export { type StepItem, Steps };

package/dist/steps/index.js

@@ -0,0 +1,11 @@
+import {
+  Steps
+} from "../chunk-JURCF4OD.js";
+import "../chunk-TJK55CJ2.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Steps
+};
+//# sourceMappingURL=index.js.map

package/dist/steps/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/tag-strip/index.d.ts

@@ -0,0 +1,33 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A single bordered band: a small uppercase label on the left and a run of bold items beside it
+ * (e.g. "Supported platforms: AWS · Azure · GCP"). Items wrap onto new lines on narrow screens.
+ * `inverted` puts the band on the dark band (`--st-cms-band-dark-bg`).
+ *
+ * @cssprop --st-tag-strip-padding - Overrides the block's padding.
+ * @csspart strip - The bordered band.
+ * @csspart label - The uppercase label.
+ * @csspart items - The list of items.
+ * @csspart item - Each item (an `li`).
+ */
+declare class TagStrip extends LitElement {
+    static styles: lit.CSSResult;
+    /** Small uppercase label at the start of the band. Omit it for items alone. */
+    label: string;
+    /**
+     * The same label as `label`, under a name the page JSON can use: the site renderer drops a node's
+     * `label` key (it is the node's own name), so JSON sets `heading`. Shown when `label` is empty.
+     */
+    heading: string;
+    /** The items, shown in order. */
+    items: string[];
+    /** Puts the band on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme. */
+    inverted: boolean;
+    /** `default` is the bordered band; `spread` is a white card with the label left and the items right (`label` shown). */
+    variant: 'default' | 'spread';
+    render(): lit.TemplateResult<1>;
+}
+
+export { TagStrip };

package/dist/tag-strip/index.js

@@ -0,0 +1,9 @@
+import {
+  TagStrip
+} from "../chunk-XP6DI3VY.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  TagStrip
+};
+//# sourceMappingURL=index.js.map

package/dist/tag-strip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/testimonials/index.d.ts

@@ -37,7 +37,8 @@ interface TestimonialItem {
  * (default) lays the cards out in a grid; `layout="carousel"` puts them on one horizontally
  * scrolling, snapping row with previous/next buttons next to the heading — the customer-story
  * carousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link
- * (e.g. "Explore customer stories").
+ * (e.g. "Explore customer stories"). Any item set can use the carousel: `region-label` names it for
+ * assistive technology (e.g. "Services") and `role-description` changes its `aria-roledescription`.
  *
  * @fires testimonials-link - Cancelable, before following a story or section link. Detail `{ href }`.
  * @cssprop --st-testimonials-padding - Overrides the section's padding.
@@ -52,6 +53,13 @@ declare class Testimonials extends LitElement {
     layout: 'grid' | 'carousel';
     /** Default text of each card's story link. */
     linkLabel: string;
+    /**
+     * Accessible name of the carousel's scrolling region. Default: the `title`, or "Stories". Set it to
+     * what the items are (e.g. "Services" for a row of service cards).
+     */
+    regionLabel: string;
+    /** `aria-roledescription` of the carousel's scrolling region. Default: "carousel". */
+    roleDescription: string;
     /** Section-level link text, e.g. "Explore customer stories". */
     actionLabel: string;
     actionHref: string;

package/dist/testimonials/index.js

@@ -1,9 +1,9 @@
 import {
   Testimonials
-} from "../chunk-DH53HZPB.js";
+} from "../chunk-37KFBKPD.js";
 import "../chunk-WTD2YIAA.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Testimonials