@sankhyatronics/sankhya-cms 0.1.18 → 0.2.0

package/custom-elements.json

@@ -248,7 +248,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.",
+          "description": "A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.\nDescriptions are Markdown. A card links as a whole when it has `href` alone; with `actionLabel`\nthe link becomes a button inside the card.",
           "name": "BentoGrid",
           "cssProperties": [
             {
@@ -366,7 +366,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A surfaced container — content goes in the default slot. Ports `SankhyaUI`'s React `Card`\n(`variant`, `padding`, `elevation`, `hoverable`, `inverted`); `onClick` is just a native `click`\nlistener on the element. `padding` takes `none | small | medium | large` (the source's\n`sm|md|lg`, spelled like `paddingScaleStyles`); `elevation` takes `none | sm | md | lg`.",
+          "description": "A surfaced container — content goes in the default slot. Attributes: `variant`, `padding`,\n`elevation`, `hoverable`, `inverted`; a click handler is just a native `click` listener on the\nelement. `padding` takes `none | small | medium | large`; `elevation` takes `none | sm | md | lg`.",
           "name": "Card",
           "members": [
             {
@@ -1224,7 +1224,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\nblock works without a fetch); `content-src` wins when both are set.",
+          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. The body comes from `content-src` (a Markdown URL) or an inline\n`content` string (so the block works without a fetch); `content-src` wins when both are set.",
           "name": "ContentBlock",
           "cssProperties": [
             {
@@ -1507,7 +1507,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\naction menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\nReact `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\n(`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\n\n- only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\n  provider element is needed);\n- a mousedown outside, Escape, or a click inside the panel closes it;\n- an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\n- `inline` opens the panel in the flow, the source's `.touch-device` layout.\n\nColors and the panel's surface come from the suite theme (the source left those to the\nconsumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\nbecause they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\nat <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\ninstead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\nkept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\n`mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).",
+          "description": "A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\naction menus, anything \"click a trigger, show content under it\". Markup\n(`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\n\n- only one dropdown is open at a time (a shared provider is built in, so no provider element\n  is needed);\n- a mousedown outside, Escape, or a click inside the panel closes it;\n- an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\n- `inline` opens the panel in the flow, the source's `.touch-device` layout.\n\nColors and the panel's surface come from the suite theme. The panel is never 100vw wide at\n<=768px (it would overflow the screen from wherever the trigger sits; use `inline` in headers\ninstead), and slotted children are not clipped with `overflow: hidden` (that would cut off their\nfocus rings). Other attributes: `align`, `active`, `disabled`, `inline`, the `dropdown-toggle`\nevent, and `mega` plus `open-on-hover` for a mega menu (see `st-mega-menu`).",
           "name": "Dropdown",
           "cssProperties": [
             {
@@ -2445,7 +2445,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\n`items` property, from slotted `st-feature-item` elements (the source's `children`), or both\n(slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\nis passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.",
+          "description": "A titled grid of feature tiles. Tiles come from the `items` property, from slotted\n`st-feature-item` elements, or both (slotted first). `columns` sets the grid width (default 2;\none column below 768px). `inverted` is passed on to the `items` tiles; slotted tiles need their\nown `inverted` attribute.",
           "name": "FeaturesSection",
           "cssProperties": [
             {
@@ -2581,6 +2581,126 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/flow/Flow.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A left-to-right process or architecture flow: boxes joined by arrows. Boxes come in three looks\n(`solid`, `outline`, `accent`); the arrows are decorative (`aria-hidden`), and the list is exposed\nas an ordered list. Below 600px the row stacks vertically and the arrows point down.\n`inverted` puts the flow on the dark band (`--st-cms-band-dark-bg`).",
+          "name": "Flow",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-flow-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The ordered list of nodes.",
+              "name": "flow"
+            },
+            {
+              "description": "Each step's box (a `li`'s child).",
+              "name": "node"
+            },
+            {
+              "description": "The box's label.",
+              "name": "label"
+            },
+            {
+              "description": "The box's caption.",
+              "name": "caption"
+            },
+            {
+              "description": "The arrow between two boxes.",
+              "name": "arrow"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "nodes",
+              "type": {
+                "text": "FlowNode[]"
+              },
+              "default": "[]",
+              "description": "The boxes, in order."
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the list of steps.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the flow on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "arrow",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible name for the list of steps.",
+              "fieldName": "label"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the flow on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-flow",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Flow",
+          "declaration": {
+            "name": "Flow",
+            "module": "src/flow/Flow.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-flow",
+          "declaration": {
+            "name": "Flow",
+            "module": "src/flow/Flow.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/footer/Footer.ts",
@@ -2858,7 +2978,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\nfor primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\nmiddle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\nfrom `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\npackage's Lit conventions and this workspace's actual needs — that source component takes an\n`imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\n`title` is the primary brand prop here and `brand-image-url` is optional, mirroring\n`st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\ndeliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\nprops — pick whichever fits a given app's header).\n\nLayout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\ncontrols sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\nsource) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\ntoggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\n`inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\n(`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\n`BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\nroot can only ever assign a given light-DOM child to the *first* slot of a given name.\n\nAn optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\n\"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\n\nAlso carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\n`language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\nrebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\nas a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\nThis component has no translation logic itself; the consuming app owns what a language `code`\nmeans and which content it re-renders in response.",
+          "description": "The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\nfor primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\nmiddle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. `title` is\nthe primary brand prop; `brand-image-url` is optional. For a fixed nav-links/user-menu header,\nuse `st-app-header` instead.\n\nLayout: the menu starts 4rem after the brand, the utility\ncontrols sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px) `menu`/`utility`\ncollapse behind a hamburger toggle into a full-screen layer under the\ntoggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\n`inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\n(`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\n`BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\nroot can only ever assign a given light-DOM child to the *first* slot of a given name.\n\nAn optional `slot=\"brand-extra\"` sits right after the brand (e.g. an edition badge such as\n\"🇮🇳 India Edition\"); unlike `menu`/`utility` it stays in the bar at every width.\n\nAlso carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\n`language-change`). Hidden entirely when `languages` has fewer than two entries.\nThis component has no translation logic itself; the consuming app owns what a language `code`\nmeans and which content it re-renders in response.",
           "name": "Header",
           "cssProperties": [
             {
@@ -3152,7 +3272,7 @@
               "kind": "field",
               "name": "syncInlineDropdowns",
               "privacy": "private",
-              "description": "While the hamburger layout is on, the dropdowns in the header open in the flow of the\nfull-screen panel instead of floating over it (SankhyaUI's touch-device layout)."
+              "description": "While the hamburger layout is on, the dropdowns in the header open in the flow of the\nfull-screen panel instead of floating over it (the touch-device layout)."
             },
             {
               "kind": "field",
@@ -3435,7 +3555,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\noptional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\nframer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\n\n`size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\nlower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\ndefaults keep the original centered banner. Put several heroes in an `st-carousel` with\n`indicator-style=\"tabs\"` for a tabbed hero carousel.",
+          "description": "Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\noptional 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\nlower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\ndefaults 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.",
           "name": "Hero",
           "cssProperties": [
             {
@@ -3452,6 +3572,18 @@
               "description": "The small label above the title.",
               "name": "eyebrow"
             },
+            {
+              "description": "The pill above the title.",
+              "name": "badge"
+            },
+            {
+              "description": "The row of check-marked points.",
+              "name": "highlights"
+            },
+            {
+              "description": "The image in `layout=\"split\"`.",
+              "name": "image"
+            },
             {
               "description": "The outlined second button.",
               "name": "secondary-action"
@@ -3571,6 +3703,46 @@
               "default": "''",
               "attribute": "secondary-href"
             },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small pill above the title (e.g. \"New\", \"Now available\").",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "highlights",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "Check-marked points shown in a row under the buttons."
+            },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "'background' | 'split'"
+              },
+              "default": "'background'",
+              "description": "`background` (default) puts `image-src` behind the copy; `split` puts copy and image side by side.",
+              "attribute": "layout",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Alt text of the image in `layout=\"split\"`. Empty marks it as decorative.",
+              "attribute": "image-alt"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -3760,6 +3932,33 @@
               "default": "''",
               "fieldName": "secondaryHref"
             },
+            {
+              "name": "badge",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small pill above the title (e.g. \"New\", \"Now available\").",
+              "fieldName": "badge"
+            },
+            {
+              "name": "layout",
+              "type": {
+                "text": "'background' | 'split'"
+              },
+              "default": "'background'",
+              "description": "`background` (default) puts `image-src` behind the copy; `split` puts copy and image side by side.",
+              "fieldName": "layout"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Alt text of the image in `layout=\"split\"`. Empty marks it as decorative.",
+              "fieldName": "imageAlt"
+            },
             {
               "name": "size",
               "type": {
@@ -3821,7 +4020,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A small, icon-only action button — ported from `SankhyaUI`'s React `IconButton` (a separate,\nunrelated marketing-site project; that source takes an iconify string `icon` prop, this package\nhas no iconify dependency, so the icon is default-slotted content instead, same convention as\n`st-dropdown`/`st-menu-grid-item`'s `slot=\"icon\"`).\n\nFires a plain native `click` — no custom event, since a caller just wants an ordinary button.",
+          "description": "A small, icon-only action button. The icon is default-slotted content (the package has no icon\nlibrary dependency), the same convention as `st-dropdown`/`st-menu-grid-item`'s `slot=\"icon\"`.\n\nFires a plain native `click` — no custom event, since a caller just wants an ordinary button.",
           "name": "IconButton",
           "members": [
             {
@@ -3897,7 +4096,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.",
+          "description": "A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.\nEach row's `content` is Markdown, sanitized. `open-first` starts with the first row open.",
           "name": "ItemsAccordion",
           "cssProperties": [
             {
@@ -3941,6 +4140,16 @@
               "default": "false",
               "attribute": "allow-multiple"
             },
+            {
+              "kind": "field",
+              "name": "openFirst",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Starts with the first row open. Applies when `items` or this flag changes while nothing is open.",
+              "attribute": "open-first"
+            },
             {
               "kind": "field",
               "name": "openIds",
@@ -3993,6 +4202,15 @@
               },
               "default": "false",
               "fieldName": "allowMultiple"
+            },
+            {
+              "name": "open-first",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Starts with the first row open. Applies when `items` or this flag changes while nothing is open.",
+              "fieldName": "openFirst"
             }
           ],
           "superclass": {
@@ -4183,7 +4401,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Renders Markdown (GFM, single newlines become `<br>`) from either an inline `content` string or\na `src` URL it fetches. Ports `SankhyaUI`'s `useMarkdown` hook + `react-markdown` (remark-gfm,\nremark-breaks); output is sanitized with DOMPurify. `src` wins over `content` when both are set.\nWhile a fetch is pending it shows \"Loading content...\"; on failure \"Error loading content.\" and\na `markdown-error` event (detail: `{ error }`).\n\nText color is inherited from the parent so inverted containers just work.",
+          "description": "Renders Markdown (GFM, single newlines become `<br>`) from either an inline `content` string or\na `src` URL it fetches. Output is sanitized with DOMPurify. `src` wins over `content` when both are set.\nWhile a fetch is pending it shows \"Loading content...\"; on failure \"Error loading content.\" and\na `markdown-error` event (detail: `{ error }`).\n\nText color is inherited from the parent so inverted containers just work.",
           "name": "Markdown",
           "members": [
             {
@@ -5029,7 +5247,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\ndescription per entry, arranged in columns), typically slotted into `st-dropdown`'s default\nslot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):\nsame markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4\ncolumns → 2; 480px: everything → 1; a 1-column grid stays 1).",
+          "description": "A responsive grid of `st-menu-grid-item`s — the \"rich\" nav-menu layout (icon + title +\ndescription per entry, arranged in columns), typically slotted into `st-dropdown`'s default\nslot. Markup is `.menu-grid-container` > `.menu-grid.columns-N`; breakpoints: at 768px, 2–4\ncolumns become 2; at 480px, everything becomes 1 (a 1-column grid stays 1).",
           "name": "MenuGrid",
           "members": [
             {
@@ -5106,7 +5324,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\ndescription below, and an optional corner badge (\"New\", \"Popular\", ...). A 1:1 port of\n`SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and\nCSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,\nscales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.\nColors come from the suite theme rather than per-item utility classes.\n\nAn `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*\n`menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\n`event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used\nreact-router's `Link` here; the suite apps have no router).",
+          "description": "One entry in an `st-menu-grid` — icon (via `slot=\"icon\"`) + title on one line, an optional\ndescription below, and an optional corner badge (\"New\", \"Popular\", ...). Effects are CSS:\nfades up the first time it scrolls into view, scales to 1.02 on hover / 0.98 while pressed, the\nicon tilts on hover, the badge pops in. Colors come from the suite theme rather than per-item\nutility classes.\n\nAn `http(s)` `href` opens in a new tab. Any other `href` fires a *cancelable*\n`menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls\n`event.preventDefault()` on it, which also cancels the anchor's own navigation.",
           "name": "MenuGridItem",
           "members": [
             {
@@ -5309,7 +5527,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\ndescription below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\nport of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\nmarkup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\nhover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\nin. Colors come from the suite theme rather than per-item utility classes.\n\nRenders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\nbefore navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\nsource used react-router's `Link` here; the suite apps have no router).",
+          "description": "A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\ndescription below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. Effects\nare CSS: nudges right and scales to 1.01 on hover / 0.99 while pressed, the icon tilts on hover,\nthe badge pops in, the description fades in. Colors come from the suite theme rather than\nper-item utility classes.\n\nRenders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\nbefore navigating — a host doing client-side routing calls `event.preventDefault()` on it.",
           "name": "MenuItem",
           "cssProperties": [
             {
@@ -5575,7 +5793,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\nbackground image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\n(detail `{ href }`, empty unless set) in place of `onAction`.",
+          "description": "Rounded call-to-action banner (title, subtitle, one or two outlined buttons) on a dark panel or a\nbackground image. The buttons fire an `action` event\n(detail `{ href }`, empty unless set; the secondary button adds `kind: 'secondary'`).\n`onAction`. `variant=\"accent\"` fills the banner with the brand colour.",
           "name": "PromoBanner",
           "cssProperties": [
             {
@@ -5587,6 +5805,16 @@
               "name": "--st-promo-banner-padding"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The primary button.",
+              "name": "action"
+            },
+            {
+              "description": "The second button.",
+              "name": "secondary-action"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -5633,6 +5861,37 @@
               "default": "''",
               "attribute": "image-src"
             },
+            {
+              "kind": "field",
+              "name": "secondaryActionLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label of a second, outlined button next to the first.",
+              "attribute": "secondary-action-label"
+            },
+            {
+              "kind": "field",
+              "name": "secondaryHref",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Target of the second button, sent in the `action` event detail.",
+              "attribute": "secondary-href"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'accent'"
+              },
+              "default": "'default'",
+              "description": "`default` is the dark panel; `accent` fills the banner with the brand colour and makes the first button white.",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "inverted",
@@ -5647,6 +5906,17 @@
               "kind": "field",
               "name": "onAction",
               "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onSecondaryAction",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Detail `{ href, kind? }`. `kind` is `secondary` for the second button only.",
+              "name": "action"
             }
           ],
           "attributes": [
@@ -5690,6 +5960,33 @@
               "default": "''",
               "fieldName": "imageSrc"
             },
+            {
+              "name": "secondary-action-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label of a second, outlined button next to the first.",
+              "fieldName": "secondaryActionLabel"
+            },
+            {
+              "name": "secondary-href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Target of the second button, sent in the `action` event detail.",
+              "fieldName": "secondaryHref"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'accent'"
+              },
+              "default": "'default'",
+              "description": "`default` is the dark panel; `accent` fills the banner with the brand colour and makes the first button white.",
+              "fieldName": "variant"
+            },
             {
               "name": "inverted",
               "type": {
@@ -5752,6 +6049,10 @@
             {
               "description": "The heading block.",
               "name": "header"
+            },
+            {
+              "description": "The wrapper around the slot (the grid when `columns` is 2).",
+              "name": "content"
             }
           ],
           "slots": [
@@ -5832,6 +6133,17 @@
               "attribute": "width",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "1 | 2"
+              },
+              "default": "1",
+              "description": "Columns for the slotted children: `1` (default, stacked) or `2` (two equal columns, stacked again below 720px).",
+              "attribute": "columns",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "textAlignment",
@@ -5905,6 +6217,15 @@
               "description": "`contained` (default, the page container width), `narrow` (reading width) or `full` (edge to edge).",
               "fieldName": "width"
             },
+            {
+              "name": "columns",
+              "type": {
+                "text": "1 | 2"
+              },
+              "default": "1",
+              "description": "Columns for the slotted children: `1` (default, stacked) or `2` (two equal columns, stacked again below 720px).",
+              "fieldName": "columns"
+            },
             {
               "name": "text-alignment",
               "type": {
@@ -6360,6 +6681,278 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/steps/Steps.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A numbered process: a responsive grid of cards, each with an automatic \"01\", \"02\", ... number, a\ntitle and a description. `highlightLast` makes the final card a dark navy call-out, the way\nenterprise pages close a how-it-works sequence. `inverted` puts the whole block on the dark band.",
+          "name": "Steps",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-steps-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The eyebrow/title/subtitle block.",
+              "name": "header"
+            },
+            {
+              "description": "Each step card (an `li`).",
+              "name": "card"
+            },
+            {
+              "description": "The step number.",
+              "name": "number"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "eyebrow",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small uppercase label above the title.",
+              "attribute": "eyebrow"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "subtitle"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "StepItem[]"
+              },
+              "default": "[]",
+              "description": "The steps, in order."
+            },
+            {
+              "kind": "field",
+              "name": "highlightLast",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders the last step as a dark navy call-out card.",
+              "attribute": "highlight-last",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "eyebrow",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small uppercase label above the title.",
+              "fieldName": "eyebrow"
+            },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "subtitle"
+            },
+            {
+              "name": "highlight-last",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Renders the last step as a dark navy call-out card.",
+              "fieldName": "highlightLast"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the block on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-steps",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Steps",
+          "declaration": {
+            "name": "Steps",
+            "module": "src/steps/Steps.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-steps",
+          "declaration": {
+            "name": "Steps",
+            "module": "src/steps/Steps.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/tag-strip/TagStrip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single bordered band: a small uppercase label on the left and a run of bold items beside it\n(e.g. \"Supported platforms: AWS · Azure · GCP\"). Items wrap onto new lines on narrow screens.\n`inverted` puts the band on the dark band (`--st-cms-band-dark-bg`).",
+          "name": "TagStrip",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-tag-strip-padding"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The bordered band.",
+              "name": "strip"
+            },
+            {
+              "description": "The uppercase label.",
+              "name": "label"
+            },
+            {
+              "description": "The list of items.",
+              "name": "items"
+            },
+            {
+              "description": "Each item (an `li`).",
+              "name": "item"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small uppercase label at the start of the band. Omit it for items alone.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "string[]"
+              },
+              "default": "[]",
+              "description": "The items, shown in order."
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the band on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small uppercase label at the start of the band. Omit it for items alone.",
+              "fieldName": "label"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Puts the band on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-tag-strip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TagStrip",
+          "declaration": {
+            "name": "TagStrip",
+            "module": "src/tag-strip/TagStrip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-tag-strip",
+          "declaration": {
+            "name": "TagStrip",
+            "module": "src/tag-strip/TagStrip.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/testimonials/Testimonials.ts",