@sankhyatronics/sankhya-cms 0.1.4 → 0.1.6

package/custom-elements.json

@@ -10,6 +10,12 @@
           "kind": "class",
           "description": "A responsive 4-column bento grid of icon/image cards. Items are set via the `items` property.",
           "name": "BentoGrid",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-bento-grid-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -249,7 +255,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\ndot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\nof the source's framer-motion spring), or fades in with `transition=\"fade\"`. Autoplay pauses\nwhile hovered or focused and stops when the element is disconnected; a paused slide keeps the\ntime it had left.\n\n`indicator-style=\"tabs\"` replaces the dots with a row of labelled tabs along the bottom, each\nwith a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero\ncarousel layout (put `st-hero`s in it). Tab labels come from `tab-labels`, else each slide's\n`data-tab-label` attribute, else its `title`.",
+          "description": "Cycles through its slotted children, one visible at a time, with optional autoplay, arrows and\ndot indicators. The incoming slide slides in from the travel direction (CSS keyframes in place\nof the source's framer-motion spring), or fades in with `transition=\"fade\"`. Autoplay pauses\nwhile hovered (unless `pause-on-hover` is turned off, e.g. for a full-screen hero the pointer\nnearly always rests on) or focused, and stops when the element is disconnected; a paused slide\nkeeps the time it had left.\n\n`indicator-style=\"tabs\"` replaces the dots with a row of labelled tabs along the bottom, each\nwith a progress bar that fills while its slide is showing, plus a pause button — the tabbed hero\ncarousel layout (put `st-hero`s in it). Tab labels come from `tab-labels`, else each slide's\n`data-tab-label` attribute, else its `title`.",
           "name": "Carousel",
           "cssProperties": [
             {
@@ -295,6 +301,16 @@
               "description": "Autoplay delay in milliseconds.",
               "attribute": "interval"
             },
+            {
+              "kind": "field",
+              "name": "pauseOnHover",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Pause autoplay while the pointer is over the carousel. Turn off for a hero that fills the\nscreen; the tabs' pause button and keyboard focus still pause it.",
+              "attribute": "pause-on-hover"
+            },
             {
               "kind": "field",
               "name": "showArrows",
@@ -446,6 +462,11 @@
               "name": "pause",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "pauseOnEnter",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "resume",
@@ -578,6 +599,15 @@
               "description": "Autoplay delay in milliseconds.",
               "fieldName": "interval"
             },
+            {
+              "name": "pause-on-hover",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Pause autoplay while the pointer is over the carousel. Turn off for a hero that fills the\nscreen; the tabs' pause button and keyboard focus still pause it.",
+              "fieldName": "pauseOnHover"
+            },
             {
               "name": "show-arrows",
               "type": {
@@ -640,186 +670,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/content-block/ContentBlock.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\r\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\nblock works without a fetch); `content-src` wins when both are set.",
-          "name": "ContentBlock",
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "subtitle"
-            },
-            {
-              "kind": "field",
-              "name": "contentSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "attribute": "content-src"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "attribute": "content"
-            },
-            {
-              "kind": "field",
-              "name": "imageSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-src"
-            },
-            {
-              "kind": "field",
-              "name": "imageAlt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-alt"
-            },
-            {
-              "kind": "field",
-              "name": "imageCaption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-caption"
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "subtitle"
-            },
-            {
-              "name": "content-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "fieldName": "contentSrc"
-            },
-            {
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "fieldName": "content"
-            },
-            {
-              "name": "image-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageSrc"
-            },
-            {
-              "name": "image-alt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageAlt"
-            },
-            {
-              "name": "image-caption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageCaption"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "inverted"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-content-block",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ContentBlock",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-content-block",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/cookie-consent/CookieConsent.ts",
@@ -828,6 +678,12 @@
           "kind": "class",
           "description": "Fixed bottom consent bar. The source read/wrote consent through a React `UserContext`; here the\r\nelement persists the choice itself in localStorage (`storage-key`, default the source's\r\n`sankhya_ui_cookie_consent`; storage errors are ignored) and renders nothing once a choice\r\nexists. Fires `cookie-consent-accept` / `cookie-consent-refuse` (detail `{ status }`). The\r\ndefault slot replaces the message text.",
           "name": "CookieConsent",
+          "cssProperties": [
+            {
+              "description": "Overrides the bar's padding.",
+              "name": "--st-cookie-consent-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1005,74 +861,260 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/dropdown/Dropdown.ts",
+      "path": "src/content-block/ContentBlock.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\naction menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\nReact `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n(`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n\r\n- only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n  provider element is needed);\r\n- a mousedown outside, Escape, or a click inside the panel closes it;\r\n- an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n- `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n\r\nColors and the panel's surface come from the suite theme (the source left those to the\r\nconsumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\nbecause they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\nat <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\ninstead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\nkept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\r\n`mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).",
-          "name": "Dropdown",
+          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\r\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\r\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\r\nblock works without a fetch); `content-src` wins when both are set.",
+          "name": "ContentBlock",
           "cssProperties": [
             {
-              "description": "Maximum width of a `mega` panel (default `1400px`).",
-              "name": "--st-mega-menu-max-width"
-            },
-            {
-              "description": "Minimum space between a `mega` panel and the header's sides (default `1rem`).",
-              "name": "--st-mega-menu-inset"
-            },
-            {
-              "description": "Space between the header and a `mega` panel (default `12px`).",
-              "name": "--st-mega-menu-gap"
-            },
-            {
-              "description": "Corner radius of a `mega` panel (default `24px`).",
-              "name": "--st-mega-menu-radius"
+              "description": "Overrides the block's padding.",
+              "name": "--st-content-block-padding"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "openDropdown",
+              "name": "title",
               "type": {
-                "text": "Dropdown | null"
+                "text": "string"
               },
-              "privacy": "private",
-              "static": true,
-              "default": "null",
-              "description": "The open dropdown, if any — the source's `DropdownContext.activeDropdown`."
+              "default": "''",
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\nattribute). Leave empty to show only `slot=\"icon\"`.",
-              "attribute": "label"
+              "attribute": "subtitle"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "contentSrc",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\nthe source); with none it navigates.",
-              "attribute": "href"
+              "description": "URL of a Markdown file.",
+              "attribute": "content-src"
             },
             {
               "kind": "field",
-              "name": "iconPosition",
+              "name": "content",
               "type": {
-                "text": "'left' | 'right'"
+                "text": "string"
               },
-              "default": "'left'",
-              "attribute": "icon-position"
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "attribute": "content"
             },
             {
               "kind": "field",
-              "name": "iconSize",
+              "name": "imageSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-src"
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-alt"
+            },
+            {
+              "kind": "field",
+              "name": "imageCaption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-caption"
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "subtitle"
+            },
+            {
+              "name": "content-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "fieldName": "contentSrc"
+            },
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "fieldName": "content"
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageSrc"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageAlt"
+            },
+            {
+              "name": "image-caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageCaption"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-content-block",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ContentBlock",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-content-block",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dropdown/Dropdown.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A labeled trigger + slotted dropdown panel — nav menus (typically holding an `st-menu-grid`),\r\naction menus, anything \"click a trigger, show content under it\". A 1:1 port of `SankhyaUI`'s\r\nReact `Dropdown` (`SankhyaCMS/SankhyaUI/src/components/Dropdown`): same markup\r\n(`.menu` > `.menu-title` + `.menu-dropdown`), sizes, 0.3s slide/fade, and behavior —\r\n\r\n- only one dropdown is open at a time (the source's `DropdownProvider`, built in here, so no\r\n  provider element is needed);\r\n- a mousedown outside, Escape, or a click inside the panel closes it;\r\n- an `href` trigger toggles the panel when it has content, and is a plain link when it doesn't;\r\n- `inline` opens the panel in the flow, the source's `.touch-device` layout.\r\n\r\nColors and the panel's surface come from the suite theme (the source left those to the\r\nconsumer's `className`/`itemGroupClassName` utility classes). Two source rules are left out\r\nbecause they break existing suite uses (`st-source-bar`'s site/library menus): the 100vw panel\r\nat <=768px (overflows the screen from wherever the trigger sits; the header uses `inline`\r\ninstead) and `overflow: hidden` on slotted children (clips their focus rings). Suite additions\r\nkept on top: `align`, `active`, `disabled`, `inline`, and the `dropdown-toggle` event — plus\r\n`mega` and `open-on-hover` for an okta.com-style mega menu (see `st-mega-menu`).",
+          "name": "Dropdown",
+          "cssProperties": [
+            {
+              "description": "Maximum width of a `mega` panel (default `1400px`).",
+              "name": "--st-mega-menu-max-width"
+            },
+            {
+              "description": "Minimum space between a `mega` panel and the header's sides (default `1rem`).",
+              "name": "--st-mega-menu-inset"
+            },
+            {
+              "description": "Space between the header and a `mega` panel (default `12px`).",
+              "name": "--st-mega-menu-gap"
+            },
+            {
+              "description": "Corner radius of a `mega` panel (default `24px`).",
+              "name": "--st-mega-menu-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "openDropdown",
+              "type": {
+                "text": "Dropdown | null"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "null",
+              "description": "The open dropdown, if any — the source's `DropdownContext.activeDropdown`."
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Trigger label text (source: `title`, renamed because `title` is the native tooltip\r\nattribute). Leave empty to show only `slot=\"icon\"`.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Renders the trigger as an `<a href>`. With panel content the click toggles the panel (as in\r\nthe source); with none it navigates.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "iconPosition",
+              "type": {
+                "text": "'left' | 'right'"
+              },
+              "default": "'left'",
+              "attribute": "icon-position"
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
               "type": {
                 "text": "string"
               },
@@ -1585,6 +1627,12 @@
           "kind": "class",
           "description": "A title/markdown-subtitle/feature-list block beside (or under) an image.",
           "name": "FeatureSplit",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-feature-split-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -1923,6 +1971,12 @@
           "kind": "class",
           "description": "A titled grid of feature tiles. Ports `SankhyaUI`'s React `FeaturesSection`: tiles come from the\r\n`items` property, from slotted `st-feature-item` elements (the source's `children`), or both\r\n(slotted first). `columns` sets the grid width (default 2; one column below 768px). `inverted`\r\nis passed on to the `items` tiles; slotted tiles need their own `inverted` attribute.",
           "name": "FeaturesSection",
+          "cssProperties": [
+            {
+              "description": "Overrides the section's padding.",
+              "name": "--st-features-section-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2324,32 +2378,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/hero/Hero.ts",
+      "path": "src/header/Header.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\r\noptional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\r\nframer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\r\n\r\n`size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\r\nlower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\r\ndefaults keep the original centered banner. Put several heroes in an `st-carousel` with\r\n`indicator-style=\"tabs\"` for a tabbed hero carousel.",
-          "name": "Hero",
-          "cssProperties": [
-            {
-              "description": "Text colour over the image.",
-              "name": "--st-hero-text-color"
-            },
-            {
-              "description": "Minimum height when `size` is `large` (default `640px`).",
-              "name": "--st-hero-min-height"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The small label above the title.",
-              "name": "eyebrow"
-            },
-            {
-              "description": "The outlined second button.",
-              "name": "secondary-action"
-            }
-          ],
+          "description": "The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\nfor primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\nmiddle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\nfrom `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\npackage's Lit conventions and this workspace's actual needs — that source component takes an\r\n`imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n`title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n`st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\ndeliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\nprops — pick whichever fits a given app's header).\r\n\r\nLayout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\ncontrols sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\nsource) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\ntoggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n`inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n(`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n`BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\nroot can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n\r\nAlso carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n`language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\nrebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\nas a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\nThis component has no translation logic itself; the consuming app owns what a language `code`\r\nmeans and which content it re-renders in response.",
+          "name": "Header",
           "members": [
             {
               "kind": "field",
@@ -2362,59 +2396,53 @@
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "brandImageUrl",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "subtitle"
+              "description": "Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark).",
+              "attribute": "brand-image-url"
             },
             {
               "kind": "field",
-              "name": "imageSrc",
+              "name": "altText",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "image-src"
+              "default": "'Logo'",
+              "description": "`alt` text for the brand image — matches the source component's `altText` (default `'Logo'`).",
+              "attribute": "alt-text"
             },
             {
               "kind": "field",
-              "name": "actionLabel",
+              "name": "logoHref",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "action-label"
+              "description": "Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise.",
+              "attribute": "logoHref"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "logoTarget",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "href"
-            },
-            {
-              "kind": "field",
-              "name": "textAlignment",
-              "type": {
-                "text": "'left' | 'center' | 'right' | 'justify'"
-              },
-              "default": "'left'",
-              "attribute": "text-alignment",
-              "reflects": true
+              "default": "'_self'",
+              "description": "`target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set.",
+              "attribute": "logo-target"
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "logoClassName",
               "type": {
-                "text": "'none' | 'small' | 'medium' | 'large'"
+                "text": "string"
               },
-              "default": "'none'",
-              "attribute": "padding",
-              "reflects": true
+              "default": "''",
+              "description": "Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`.",
+              "attribute": "logo-class-name"
             },
             {
               "kind": "field",
@@ -2423,618 +2451,653 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\nsource component's `inverted` (from its shared `BaseProps`).",
               "attribute": "inverted",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "focalPoint",
+              "name": "sticky",
               "type": {
-                "text": "'top' | 'left' | 'right' | 'bottom' | 'center'"
+                "text": "boolean"
               },
-              "default": "'center'",
-              "attribute": "focal-point"
+              "default": "false",
+              "attribute": "sticky",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "eyebrow",
+              "name": "transparent",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Small uppercase label above the title (e.g. an event or product name).",
-              "attribute": "eyebrow"
+              "default": "false",
+              "description": "Fixes the header over the top of the page and makes it see-through, with light text\r\n(`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\nheader laid over a dark hero. It then takes its normal background and a shadow. The page\r\ncontent starts under it, so the first section should leave room for the 64px bar.",
+              "attribute": "transparent",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "secondaryActionLabel",
+              "name": "hideOnScroll",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Label of an outlined second button next to the primary one.",
-              "attribute": "secondary-action-label"
+              "default": "false",
+              "description": "Slides the header out of view while the page scrolls down and back in when it scrolls up.",
+              "attribute": "hide-on-scroll",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "secondaryHref",
+              "name": "scrollThreshold",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "attribute": "secondary-href"
+              "default": "8",
+              "description": "Scroll distance in px after which the header counts as `scrolled`.",
+              "attribute": "scroll-threshold"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "scrolled",
               "type": {
-                "text": "'auto' | 'large' | 'full'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "`auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport.",
-              "attribute": "size",
+              "default": "false",
+              "description": "True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside.",
+              "attribute": "scrolled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "contentPosition",
+              "name": "scrollHidden",
               "type": {
-                "text": "'center' | 'bottom'"
+                "text": "boolean"
               },
-              "default": "'center'",
-              "description": "`center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container.",
-              "attribute": "content-position",
+              "default": "false",
+              "description": "True while `hide-on-scroll` has slid the header away. Set by the header, never from outside.",
+              "attribute": "scroll-hidden",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "lastScrollY",
               "type": {
-                "text": "'even' | 'gradient' | 'none'"
+                "text": "number"
               },
-              "default": "'even'",
-              "description": "`even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is.",
-              "attribute": "overlay",
-              "reflects": true
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "positions",
-              "privacy": "private",
-              "static": true,
-              "default": "{ top: 'center top', left: 'left center', right: 'right center', bottom: 'center bottom', center: 'center center' }",
+              "name": "scrollFrame",
               "type": {
-                "text": "{\r\n    top: 'center top',\r\n    left: 'left center',\r\n    right: 'right center',\r\n    bottom: 'center bottom',\r\n    center: 'center center'\r\n  }"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emitAction",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                },
-                {
-                  "name": "href",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "kind",
-                  "type": {
-                    "text": "'primary' | 'secondary'"
-                  }
-                }
-              ]
+              "privacy": "private",
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "onClick",
+              "name": "onScroll",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "onSecondaryClick",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.",
-              "name": "action"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
+              "name": "languages",
               "type": {
-                "text": "string"
+                "text": "{ code: string; label: string }[]"
               },
-              "default": "''",
-              "fieldName": "title"
+              "default": "[]",
+              "description": "Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\nwhen empty or when only one language is offered (same convention as `st-app-header`'s\r\n`languages`, which this reuses verbatim). This component has no translation logic itself —\r\nselecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\nwhat `code` actually means and which content it re-renders."
             },
             {
-              "name": "subtitle",
+              "kind": "field",
+              "name": "currentLanguageCode",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "subtitle"
+              "attribute": "current-language-code"
             },
             {
-              "name": "image-src",
+              "kind": "field",
+              "name": "languageMenuLabel",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "fieldName": "imageSrc"
+              "default": "'Language'",
+              "attribute": "language-menu-label"
             },
             {
-              "name": "action-label",
+              "kind": "field",
+              "name": "mobileOpen",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "actionLabel"
+              "default": "false",
+              "description": "Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\nthe `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\noutside.",
+              "attribute": "mobile-open",
+              "reflects": true
             },
             {
-              "name": "href",
+              "kind": "field",
+              "name": "compact",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "href"
+              "default": "false",
+              "description": "True while the menu doesn't fit the bar at the current width: the header then shows the same\r\nhamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside.",
+              "attribute": "compact",
+              "reflects": true
             },
             {
-              "name": "text-alignment",
+              "kind": "field",
+              "name": "languageMenuOpen",
               "type": {
-                "text": "'left' | 'center' | 'right' | 'justify'"
+                "text": "boolean"
               },
-              "default": "'left'",
-              "fieldName": "textAlignment"
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "name": "padding",
+              "kind": "field",
+              "name": "hasUtility",
               "type": {
-                "text": "'none' | 'small' | 'medium' | 'large'"
+                "text": "boolean"
               },
-              "default": "'none'",
-              "fieldName": "padding"
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden."
             },
             {
-              "name": "inverted",
+              "kind": "field",
+              "name": "resizeObserver",
               "type": {
-                "text": "boolean"
+                "text": "ResizeObserver | undefined"
               },
-              "default": "false",
-              "fieldName": "inverted"
+              "privacy": "private"
             },
             {
-              "name": "focal-point",
+              "kind": "field",
+              "name": "narrowQuery",
               "type": {
-                "text": "'top' | 'left' | 'right' | 'bottom' | 'center'"
+                "text": "MediaQueryList | undefined"
               },
-              "default": "'center'",
-              "fieldName": "focalPoint"
+              "privacy": "private",
+              "description": "Matches below BREAKPOINT_TABLET, where the hamburger layout is always on."
             },
             {
-              "name": "eyebrow",
+              "kind": "field",
+              "name": "inlinedDropdowns",
+              "privacy": "private",
+              "default": "new Set<HTMLElement & { inline: boolean; open: boolean }>()",
+              "description": "The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\nown `inline` setting is left alone."
+            },
+            {
+              "kind": "field",
+              "name": "syncInlineDropdowns",
+              "privacy": "private",
+              "description": "While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\nfull-screen panel instead of floating over it (SankhyaUI's touch-device layout)."
+            },
+            {
+              "kind": "field",
+              "name": "onUtilitySlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onMenuSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "collapsedAtWidth",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "Small uppercase label above the title (e.g. an event or product name).",
-              "fieldName": "eyebrow"
+              "privacy": "private",
+              "default": "0",
+              "description": "The bar width at which the menu last overflowed — the bar only expands again once it is\r\nclearly wider than this, so it can't flip back and forth right at the threshold."
             },
             {
-              "name": "secondary-action-label",
-              "type": {
-                "text": "string"
+              "kind": "field",
+              "name": "evaluateFit",
+              "privacy": "private",
+              "description": "Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\nonce there is room. The collapsed layout hides the menu, so the room it needs can't be\r\nmeasured then; the width remembered when it collapsed stands in for it."
+            },
+            {
+              "kind": "method",
+              "name": "menuOverflows",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "default": "''",
-              "description": "Label of an outlined second button next to the primary one.",
-              "fieldName": "secondaryActionLabel"
+              "description": "Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\nitems' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\na closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\nreport overflow at any width."
             },
             {
-              "name": "secondary-href",
+              "kind": "field",
+              "name": "lightDomObserver",
               "type": {
-                "text": "string"
+                "text": "MutationObserver | undefined"
               },
-              "default": "''",
-              "fieldName": "secondaryHref"
+              "privacy": "private"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "'auto' | 'large' | 'full'"
+              "kind": "field",
+              "name": "closeOnEscape",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "closeLanguageMenuOnOutsideClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderLanguageMenu",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLanguageSelect",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "'auto'",
-              "description": "`auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport.",
-              "fieldName": "size"
+              "parameters": [
+                {
+                  "name": "code",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "name": "content-position",
-              "type": {
-                "text": "'center' | 'bottom'"
-              },
-              "default": "'center'",
-              "description": "`center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container.",
-              "fieldName": "contentPosition"
-            },
+              "kind": "method",
+              "name": "renderBrand",
+              "privacy": "private"
+            }
+          ],
+          "events": [
             {
-              "name": "overlay",
+              "name": "language-change",
               "type": {
-                "text": "'even' | 'gradient' | 'none'"
-              },
-              "default": "'even'",
-              "description": "`even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is.",
-              "fieldName": "overlay"
+                "text": "CustomEvent"
+              }
             }
           ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-hero",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Hero",
-          "declaration": {
-            "name": "Hero",
-            "module": "src/hero/Hero.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-hero",
-          "declaration": {
-            "name": "Hero",
-            "module": "src/hero/Hero.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/header/Header.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The app-shell header bar — brand (image + title, or title alone) on the left, a `slot=\"menu\"`\r\nfor primary nav (e.g. `st-dropdown`/`st-menu-grid` mega-menus, or plain links) taking the\r\nmiddle, and a `slot=\"utility\"` for account/app-switcher/theme controls on the right. Ported\r\nfrom `SankhyaUI`'s React `Header` (a separate, unrelated marketing-site project) to this\r\npackage's Lit conventions and this workspace's actual needs — that source component takes an\r\n`imageSrc` logo with no text fallback, but none of this suite's apps has a logo image today, so\r\n`title` is the primary brand prop here and `brand-image-url` is optional, mirroring\r\n`st-app-header`'s own brand/title split (this component's slotted-menu/utility shape is a\r\ndeliberately different, more generic surface than `st-app-header`'s fixed nav-links/user-menu\r\nprops — pick whichever fits a given app's header).\r\n\r\nLayout follows the source's `Header.css`: the menu starts 4rem after the brand, the utility\r\ncontrols sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px here; 768px in the\r\nsource) `menu`/`utility` collapse behind a hamburger toggle into a full-screen layer under the\r\ntoggle (closes on Escape or a click inside it), where the menu's `st-dropdown`s are switched to\r\n`inline` so they open in the flow — the same two slotted elements just get repositioned by CSS\r\n(`.mobile-panel`'s `display: contents` at desktop width vs. a real fixed-position box below\r\n`BREAKPOINT_TABLET`), rather than the slots being duplicated in the template, since a shadow\r\nroot can only ever assign a given light-DOM child to the *first* slot of a given name.\r\n\r\nAlso carries an optional built-in language switcher (`languages`/`currentLanguageCode`, fires\r\n`language-change`) — ported from `st-app-header`'s own implementation verbatim rather than\r\nrebuilt, since the source `Header`'s reference story shows an equivalent flag/language `Select`\r\nas a first-class header utility. Hidden entirely when `languages` has fewer than two entries.\r\nThis component has no translation logic itself; the consuming app owns what a language `code`\r\nmeans and which content it re-renders in response.",
-          "name": "Header",
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
               "name": "title",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "title"
+              "fieldName": "title"
             },
             {
-              "kind": "field",
-              "name": "brandImageUrl",
+              "name": "brand-image-url",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark).",
-              "attribute": "brand-image-url"
+              "fieldName": "brandImageUrl"
             },
             {
-              "kind": "field",
-              "name": "altText",
+              "name": "alt-text",
               "type": {
                 "text": "string"
               },
               "default": "'Logo'",
               "description": "`alt` text for the brand image — matches the source component's `altText` (default `'Logo'`).",
-              "attribute": "alt-text"
+              "fieldName": "altText"
             },
             {
-              "kind": "field",
               "name": "logoHref",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise.",
-              "attribute": "logoHref"
+              "fieldName": "logoHref"
             },
             {
-              "kind": "field",
-              "name": "logoTarget",
+              "name": "logo-target",
               "type": {
                 "text": "string"
               },
               "default": "'_self'",
               "description": "`target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set.",
-              "attribute": "logo-target"
+              "fieldName": "logoTarget"
             },
             {
-              "kind": "field",
-              "name": "logoClassName",
+              "name": "logo-class-name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`.",
-              "attribute": "logo-class-name"
+              "fieldName": "logoClassName"
             },
             {
-              "kind": "field",
               "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\nsource component's `inverted` (from its shared `BaseProps`).",
-              "attribute": "inverted",
-              "reflects": true
+              "fieldName": "inverted"
             },
             {
-              "kind": "field",
               "name": "sticky",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "attribute": "sticky",
-              "reflects": true
+              "fieldName": "sticky"
             },
             {
-              "kind": "field",
               "name": "transparent",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Fixes the header over the top of the page and makes it see-through, with light text\r\n(`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\nheader laid over a dark hero. It then takes its normal background and a shadow. The page\r\ncontent starts under it, so the first section should leave room for the 64px bar.",
-              "attribute": "transparent",
-              "reflects": true
+              "fieldName": "transparent"
             },
             {
-              "kind": "field",
-              "name": "hideOnScroll",
+              "name": "hide-on-scroll",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Slides the header out of view while the page scrolls down and back in when it scrolls up.",
-              "attribute": "hide-on-scroll",
-              "reflects": true
+              "fieldName": "hideOnScroll"
             },
             {
-              "kind": "field",
-              "name": "scrollThreshold",
+              "name": "scroll-threshold",
               "type": {
                 "text": "number"
               },
               "default": "8",
               "description": "Scroll distance in px after which the header counts as `scrolled`.",
-              "attribute": "scroll-threshold"
+              "fieldName": "scrollThreshold"
             },
             {
-              "kind": "field",
               "name": "scrolled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside.",
-              "attribute": "scrolled",
-              "reflects": true
+              "fieldName": "scrolled"
             },
             {
-              "kind": "field",
-              "name": "scrollHidden",
+              "name": "scroll-hidden",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "True while `hide-on-scroll` has slid the header away. Set by the header, never from outside.",
-              "attribute": "scroll-hidden",
-              "reflects": true
+              "fieldName": "scrollHidden"
             },
             {
-              "kind": "field",
-              "name": "lastScrollY",
+              "name": "current-language-code",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "''",
+              "fieldName": "currentLanguageCode"
             },
             {
-              "kind": "field",
-              "name": "scrollFrame",
+              "name": "language-menu-label",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0"
+              "default": "'Language'",
+              "fieldName": "languageMenuLabel"
             },
             {
-              "kind": "field",
-              "name": "onScroll",
-              "privacy": "private"
+              "name": "mobile-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\nthe `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\noutside.",
+              "fieldName": "mobileOpen"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "True while the menu doesn't fit the bar at the current width: the header then shows the same\r\nhamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside.",
+              "fieldName": "compact"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-header",
+          "declaration": {
+            "name": "Header",
+            "module": "src/header/Header.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/hero/Hero.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,\r\noptional subtitle and up to two call-to-action links. Port of `SankhyaUI`'s React `Hero`; the\r\nframer-motion entrance is redone as CSS keyframes (skipped under `prefers-reduced-motion`).\r\n\r\n`size`, `content-position` and `overlay=\"gradient\"` give the large editorial layout (copy on the\r\nlower left over a gradient that darkens towards it) used by enterprise marketing heroes; the\r\ndefaults keep the original centered banner. Put several heroes in an `st-carousel` with\r\n`indicator-style=\"tabs\"` for a tabbed hero carousel.",
+          "name": "Hero",
+          "cssProperties": [
+            {
+              "description": "Text colour over the image.",
+              "name": "--st-hero-text-color"
+            },
+            {
+              "description": "Minimum height when `size` is `large` (default `640px`).",
+              "name": "--st-hero-min-height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The small label above the title.",
+              "name": "eyebrow"
             },
+            {
+              "description": "The outlined second button.",
+              "name": "secondary-action"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "languages",
+              "name": "title",
               "type": {
-                "text": "{ code: string; label: string }[]"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely\r\nwhen empty or when only one language is offered (same convention as `st-app-header`'s\r\n`languages`, which this reuses verbatim). This component has no translation logic itself —\r\nselecting an option fires `language-change` (detail: `{ code }`), and the consuming app owns\r\nwhat `code` actually means and which content it re-renders."
+              "default": "''",
+              "attribute": "title"
             },
             {
               "kind": "field",
-              "name": "currentLanguageCode",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "current-language-code"
+              "attribute": "subtitle"
             },
             {
               "kind": "field",
-              "name": "languageMenuLabel",
+              "name": "imageSrc",
               "type": {
                 "text": "string"
               },
-              "default": "'Language'",
-              "attribute": "language-menu-label"
+              "default": "''",
+              "attribute": "image-src"
             },
             {
               "kind": "field",
-              "name": "mobileOpen",
+              "name": "actionLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\nthe `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\noutside.",
-              "attribute": "mobile-open",
-              "reflects": true
+              "default": "''",
+              "attribute": "action-label"
             },
             {
               "kind": "field",
-              "name": "compact",
+              "name": "href",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "True while the menu doesn't fit the bar at the current width: the header then shows the same\r\nhamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside.",
-              "attribute": "compact",
+              "default": "''",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "textAlignment",
+              "type": {
+                "text": "'left' | 'center' | 'right' | 'justify'"
+              },
+              "default": "'left'",
+              "attribute": "text-alignment",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "languageMenuOpen",
+              "name": "padding",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'small' | 'medium' | 'large'"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "'none'",
+              "attribute": "padding",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasUtility",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false",
-              "description": "Whether `slot=\"utility\"` has content — an empty utility row (and its divider) is hidden."
+              "attribute": "inverted",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "resizeObserver",
+              "name": "focalPoint",
               "type": {
-                "text": "ResizeObserver | undefined"
+                "text": "'top' | 'left' | 'right' | 'bottom' | 'center'"
               },
-              "privacy": "private"
+              "default": "'center'",
+              "attribute": "focal-point"
             },
             {
               "kind": "field",
-              "name": "narrowQuery",
+              "name": "eyebrow",
               "type": {
-                "text": "MediaQueryList | undefined"
+                "text": "string"
               },
-              "privacy": "private",
-              "description": "Matches below BREAKPOINT_TABLET, where the hamburger layout is always on."
-            },
-            {
-              "kind": "field",
-              "name": "inlinedDropdowns",
-              "privacy": "private",
-              "default": "new Set<HTMLElement & { inline: boolean; open: boolean }>()",
-              "description": "The dropdowns this header switched to `inline` — only these are switched back, so a caller's\r\nown `inline` setting is left alone."
-            },
-            {
-              "kind": "field",
-              "name": "syncInlineDropdowns",
-              "privacy": "private",
-              "description": "While the hamburger layout is on, the dropdowns in the header open in the flow of the\r\nfull-screen panel instead of floating over it (SankhyaUI's touch-device layout)."
-            },
-            {
-              "kind": "field",
-              "name": "onUtilitySlotChange",
-              "privacy": "private"
+              "default": "''",
+              "description": "Small uppercase label above the title (e.g. an event or product name).",
+              "attribute": "eyebrow"
             },
             {
               "kind": "field",
-              "name": "onMenuSlotChange",
-              "privacy": "private"
+              "name": "secondaryActionLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label of an outlined second button next to the primary one.",
+              "attribute": "secondary-action-label"
             },
             {
               "kind": "field",
-              "name": "collapsedAtWidth",
+              "name": "secondaryHref",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "0",
-              "description": "The bar width at which the menu last overflowed — the bar only expands again once it is\r\nclearly wider than this, so it can't flip back and forth right at the threshold."
+              "default": "''",
+              "attribute": "secondary-href"
             },
             {
               "kind": "field",
-              "name": "evaluateFit",
-              "privacy": "private",
-              "description": "Collapses to the hamburger layout when the slotted menu overflows its row, and expands again\r\nonce there is room. The collapsed layout hides the menu, so the room it needs can't be\r\nmeasured then; the width remembered when it collapsed stands in for it."
-            },
-            {
-              "kind": "method",
-              "name": "menuOverflows",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "size",
+              "type": {
+                "text": "'auto' | 'large' | 'full'"
               },
-              "description": "Whether the visible menu items reach past the right edge of the menu row. Measured from the\r\nitems' own boxes (the slotted elements and their direct children), not the row's scrollWidth:\r\na closed dropdown's absolutely positioned panel also counts towards scrollWidth, which would\r\nreport overflow at any width."
+              "default": "'auto'",
+              "description": "`auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport.",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "lightDomObserver",
+              "name": "contentPosition",
               "type": {
-                "text": "MutationObserver | undefined"
+                "text": "'center' | 'bottom'"
               },
-              "privacy": "private"
+              "default": "'center'",
+              "description": "`center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container.",
+              "attribute": "content-position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "closeOnEscape",
-              "privacy": "private"
+              "name": "overlay",
+              "type": {
+                "text": "'even' | 'gradient' | 'none'"
+              },
+              "default": "'even'",
+              "description": "`even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is.",
+              "attribute": "overlay",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "closeLanguageMenuOnOutsideClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderLanguageMenu",
-              "privacy": "private"
+              "name": "positions",
+              "privacy": "private",
+              "static": true,
+              "default": "{ top: 'center top', left: 'left center', right: 'right center', bottom: 'center bottom', center: 'center center' }",
+              "type": {
+                "text": "{\r\n    top: 'center top',\r\n    left: 'left center',\r\n    right: 'right center',\r\n    bottom: 'center bottom',\r\n    center: 'center center'\r\n  }"
+              }
             },
             {
               "kind": "method",
-              "name": "onLanguageSelect",
+              "name": "emitAction",
               "privacy": "private",
               "return": {
                 "type": {
@@ -3043,25 +3106,40 @@
               },
               "parameters": [
                 {
-                  "name": "code",
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                },
+                {
+                  "name": "href",
                   "type": {
                     "text": "string"
                   }
+                },
+                {
+                  "name": "kind",
+                  "type": {
+                    "text": "'primary' | 'secondary'"
+                  }
                 }
               ]
             },
             {
-              "kind": "method",
-              "name": "renderBrand",
+              "kind": "field",
+              "name": "onClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onSecondaryClick",
               "privacy": "private"
             }
           ],
           "events": [
             {
-              "name": "language-change",
-              "type": {
-                "text": "CustomEvent"
-              }
+              "description": "Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.",
+              "name": "action"
             }
           ],
           "attributes": [
@@ -3074,170 +3152,146 @@
               "fieldName": "title"
             },
             {
-              "name": "brand-image-url",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Optional logo image URL, shown before `title`. Omitted entirely when empty — none of this suite's apps has one today. Matches the source component's `imageSrc` (renamed here to pair with `title`/`logoHref`, since this component's only image use is the brand mark).",
-              "fieldName": "brandImageUrl"
-            },
-            {
-              "name": "alt-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Logo'",
-              "description": "`alt` text for the brand image — matches the source component's `altText` (default `'Logo'`).",
-              "fieldName": "altText"
+              "fieldName": "subtitle"
             },
             {
-              "name": "logoHref",
+              "name": "image-src",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise.",
-              "fieldName": "logoHref"
+              "fieldName": "imageSrc"
             },
             {
-              "name": "logo-target",
+              "name": "action-label",
               "type": {
                 "text": "string"
               },
-              "default": "'_self'",
-              "description": "`target` for the brand `<a>` — matches the source component's `logoTarget` (default `_self`). No effect when `logoHref` isn't set.",
-              "fieldName": "logoTarget"
+              "default": "''",
+              "fieldName": "actionLabel"
             },
             {
-              "name": "logo-class-name",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Extra class(es) appended to the brand link/div — matches the source component's `logoClassName`.",
-              "fieldName": "logoClassName"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Inverts the header's color roles (light-on-dark instead of dark-on-light) — matches the\r\nsource component's `inverted` (from its shared `BaseProps`).",
-              "fieldName": "inverted"
+              "fieldName": "href"
             },
             {
-              "name": "sticky",
+              "name": "text-alignment",
               "type": {
-                "text": "boolean"
+                "text": "'left' | 'center' | 'right' | 'justify'"
               },
-              "default": "false",
-              "fieldName": "sticky"
+              "default": "'left'",
+              "fieldName": "textAlignment"
             },
             {
-              "name": "transparent",
+              "name": "padding",
               "type": {
-                "text": "boolean"
+                "text": "'none' | 'small' | 'medium' | 'large'"
               },
-              "default": "false",
-              "description": "Fixes the header over the top of the page and makes it see-through, with light text\r\n(`--st-header-transparent-color`), until the page scrolls past `scroll-threshold` — for a\r\nheader laid over a dark hero. It then takes its normal background and a shadow. The page\r\ncontent starts under it, so the first section should leave room for the 64px bar.",
-              "fieldName": "transparent"
+              "default": "'none'",
+              "fieldName": "padding"
             },
             {
-              "name": "hide-on-scroll",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Slides the header out of view while the page scrolls down and back in when it scrolls up.",
-              "fieldName": "hideOnScroll"
+              "fieldName": "inverted"
             },
             {
-              "name": "scroll-threshold",
+              "name": "focal-point",
               "type": {
-                "text": "number"
+                "text": "'top' | 'left' | 'right' | 'bottom' | 'center'"
               },
-              "default": "8",
-              "description": "Scroll distance in px after which the header counts as `scrolled`.",
-              "fieldName": "scrollThreshold"
+              "default": "'center'",
+              "fieldName": "focalPoint"
             },
             {
-              "name": "scrolled",
+              "name": "eyebrow",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "True once the page has scrolled past `scroll-threshold`; reflected so pages can style `st-header[scrolled]`. Set by the header, never from outside.",
-              "fieldName": "scrolled"
+              "default": "''",
+              "description": "Small uppercase label above the title (e.g. an event or product name).",
+              "fieldName": "eyebrow"
             },
             {
-              "name": "scroll-hidden",
+              "name": "secondary-action-label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "True while `hide-on-scroll` has slid the header away. Set by the header, never from outside.",
-              "fieldName": "scrollHidden"
+              "default": "''",
+              "description": "Label of an outlined second button next to the primary one.",
+              "fieldName": "secondaryActionLabel"
             },
             {
-              "name": "current-language-code",
+              "name": "secondary-href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "currentLanguageCode"
+              "fieldName": "secondaryHref"
             },
             {
-              "name": "language-menu-label",
+              "name": "size",
               "type": {
-                "text": "string"
-              },
-              "default": "'Language'",
-              "fieldName": "languageMenuLabel"
+                "text": "'auto' | 'large' | 'full'"
+              },
+              "default": "'auto'",
+              "description": "`auto` sizes to the content; `large` is a tall editorial hero (`--st-hero-min-height`); `full` fills the viewport.",
+              "fieldName": "size"
             },
             {
-              "name": "mobile-open",
+              "name": "content-position",
               "type": {
-                "text": "boolean"
+                "text": "'center' | 'bottom'"
               },
-              "default": "false",
-              "description": "Internal open/closed state for the mobile nav overlay, reflected to an attribute purely so\r\nthe `:host([mobile-open])` CSS selector above can react to it — not meant to be set from\r\noutside.",
-              "fieldName": "mobileOpen"
+              "default": "'center'",
+              "description": "`center` keeps the copy in the middle; `bottom` puts it in the lower part of the hero, on the page container.",
+              "fieldName": "contentPosition"
             },
             {
-              "name": "compact",
+              "name": "overlay",
               "type": {
-                "text": "boolean"
+                "text": "'even' | 'gradient' | 'none'"
               },
-              "default": "false",
-              "description": "True while the menu doesn't fit the bar at the current width: the header then shows the same\r\nhamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside.",
-              "fieldName": "compact"
+              "default": "'even'",
+              "description": "`even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is.",
+              "fieldName": "overlay"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "st-header",
+          "tagName": "st-hero",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Header",
+          "name": "Hero",
           "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
+            "name": "Hero",
+            "module": "src/hero/Hero.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "st-header",
+          "name": "st-hero",
           "declaration": {
-            "name": "Header",
-            "module": "src/header/Header.ts"
+            "name": "Hero",
+            "module": "src/hero/Hero.ts"
           }
         }
       ]
@@ -3326,6 +3380,12 @@
           "kind": "class",
           "description": "A vertical list of collapsible title/content rows; one open at a time unless `allow-multiple`.",
           "name": "ItemsAccordion",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-items-accordion-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -3770,6 +3830,12 @@
           "kind": "class",
           "description": "One column (or one group within a column) of an `st-mega-menu`: a heading, an optional line of\ndescription, then its links stacked — usually `st-menu-item`s with `variant=\"link\"`. Nest\ncolumns to stack several headed groups in one column, as okta.com does.\n\n`variant=\"card\"` puts the column on a tinted rounded tile and `variant=\"accent\"` on a solid\naccent tile with light text; both suit a row of equal columns without intro or featured area.\n`cta-label` + `cta-href` add a pill button at the bottom of the column.\n\nThe heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event\n(detail: `{ href }`) before navigating; a host doing client-side routing calls\n`event.preventDefault()` on it.",
           "name": "MegaMenuColumn",
+          "cssProperties": [
+            {
+              "description": "Overrides the padding of a `card`/`accent` column.",
+              "name": "--st-mega-menu-column-padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The heading text or link.",
@@ -4565,23 +4631,23 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/menu-item/MenuItem.ts",
+      "path": "src/promo-banner/PromoBanner.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\ndescription below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\nport of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\nmarkup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\nhover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\nin. Colors come from the suite theme rather than per-item utility classes.\r\n\r\nRenders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\nbefore navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\nsource used react-router's `Link` here; the suite apps have no router).",
-          "name": "MenuItem",
-          "members": [
+          "description": "Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\r\nbackground image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\r\n(detail `{ href }`, empty unless set) in place of `onAction`.",
+          "name": "PromoBanner",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "shadowRootOptions",
-              "type": {
-                "text": "object"
-              },
-              "static": true,
-              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }",
-              "description": "`focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items."
+              "description": "Overrides the banner's margin.",
+              "name": "--st-promo-banner-margin"
             },
+            {
+              "description": "Overrides the banner's padding.",
+              "name": "--st-promo-banner-padding"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "title",
@@ -4593,102 +4659,53 @@
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "href"
+              "attribute": "subtitle"
             },
             {
               "kind": "field",
-              "name": "description",
+              "name": "actionLabel",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "attribute": "description"
+              "attribute": "action-label"
             },
             {
               "kind": "field",
-              "name": "badge",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none.",
-              "attribute": "badge"
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Highlights this row as the current page (source: `isActive`).",
-              "attribute": "active",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "compact",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "showDescription",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Suppresses the description even when `description` is set (source: `showDescription`, default `true`).",
-              "attribute": "show-description"
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "imageSrc",
               "type": {
                 "text": "string"
               },
-              "default": "'_self'",
-              "description": "`target` for the `<a>` (source default `_self`).",
-              "attribute": "target"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "'default' | 'link'"
-              },
-              "default": "'default'",
-              "description": "`default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;\r\nmarked with an arrow when it opens a new tab).",
-              "attribute": "variant",
-              "reflects": true
+              "default": "''",
+              "attribute": "image-src"
             },
             {
               "kind": "field",
-              "name": "hasIcon",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
               "default": "false",
-              "description": "Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box."
-            },
-            {
-              "kind": "field",
-              "name": "onIconSlotChange",
-              "privacy": "private"
+              "attribute": "inverted",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "onClick",
+              "name": "onAction",
               "privacy": "private"
             }
           ],
@@ -4702,169 +4719,199 @@
               "fieldName": "title"
             },
             {
-              "name": "href",
+              "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "href"
+              "fieldName": "subtitle"
             },
             {
-              "name": "description",
+              "name": "action-label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "description"
+              "fieldName": "actionLabel"
             },
             {
-              "name": "badge",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none.",
-              "fieldName": "badge"
+              "fieldName": "href"
             },
             {
-              "name": "active",
+              "name": "image-src",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Highlights this row as the current page (source: `isActive`).",
-              "fieldName": "active"
+              "default": "''",
+              "fieldName": "imageSrc"
             },
             {
-              "name": "compact",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "compact"
-            },
-            {
-              "name": "show-description",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Suppresses the description even when `description` is set (source: `showDescription`, default `true`).",
-              "fieldName": "showDescription"
-            },
-            {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "default": "'_self'",
-              "description": "`target` for the `<a>` (source default `_self`).",
-              "fieldName": "target"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "'default' | 'link'"
-              },
-              "default": "'default'",
-              "description": "`default` (a row with a hover box) or `link` (a plain text link, as in `st-mega-menu-column`;\r\nmarked with an arrow when it opens a new tab).",
-              "fieldName": "variant"
+              "fieldName": "inverted"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "st-menu-item",
+          "tagName": "st-promo-banner",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "MenuItem",
+          "name": "PromoBanner",
           "declaration": {
-            "name": "MenuItem",
-            "module": "src/menu-item/MenuItem.ts"
+            "name": "PromoBanner",
+            "module": "src/promo-banner/PromoBanner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "st-menu-item",
+          "name": "st-promo-banner",
           "declaration": {
-            "name": "MenuItem",
-            "module": "src/menu-item/MenuItem.ts"
+            "name": "PromoBanner",
+            "module": "src/promo-banner/PromoBanner.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/promo-banner/PromoBanner.ts",
+      "path": "src/menu-item/MenuItem.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a\r\nbackground image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event\r\n(detail `{ href }`, empty unless set) in place of `onAction`.",
-          "name": "PromoBanner",
+          "description": "A single flat nav row — icon (`slot=\"icon\"`) + title + badge on one line, an optional\r\ndescription below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1\r\nport of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same\r\nmarkup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on\r\nhover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades\r\nin. Colors come from the suite theme rather than per-item utility classes.\r\n\r\nRenders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)\r\nbefore navigating — a host doing client-side routing calls `event.preventDefault()` on it (the\r\nsource used react-router's `Link` here; the suite apps have no router).",
+          "name": "MenuItem",
           "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }",
+              "description": "`focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items."
+            },
             {
               "kind": "field",
               "name": "title",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "title"
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "description"
+            },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none.",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Highlights this row as the current page (source: `isActive`).",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "compact",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "subtitle"
+              "default": "false",
+              "attribute": "compact",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "actionLabel",
+              "name": "showDescription",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "attribute": "action-label"
+              "default": "true",
+              "description": "Suppresses the description even when `description` is set (source: `showDescription`, default `true`).",
+              "attribute": "show-description"
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "target",
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "attribute": "href"
+              "default": "'_self'",
+              "description": "`target` for the `<a>` (source default `_self`).",
+              "attribute": "target"
             },
             {
               "kind": "field",
-              "name": "imageSrc",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "'default' | 'link' | 'bar'"
               },
-              "default": "''",
-              "attribute": "image-src"
+              "default": "'default'",
+              "description": "`default` (a row with a hover box), `link` (a plain text link, as in `st-mega-menu-column`;\r\nmarked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\r\nshaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it).",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "hasIcon",
               "type": {
                 "text": "boolean"
               },
+              "privacy": "private",
               "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "description": "Whether `slot=\"icon\"` has content, so an omitted icon leaves no empty box."
             },
             {
               "kind": "field",
-              "name": "onAction",
+              "name": "onIconSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onClick",
               "privacy": "private"
             }
           ],
@@ -4878,69 +4925,98 @@
               "fieldName": "title"
             },
             {
-              "name": "subtitle",
+              "name": "href",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "subtitle"
+              "fieldName": "href"
             },
             {
-              "name": "action-label",
+              "name": "description",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "actionLabel"
+              "fieldName": "description"
             },
             {
-              "name": "href",
+              "name": "badge",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "fieldName": "href"
+              "description": "Small trailing label, e.g. a count or \"New\"/\"Beta\" — omit for none.",
+              "fieldName": "badge"
             },
             {
-              "name": "image-src",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "fieldName": "imageSrc"
+              "default": "false",
+              "description": "Highlights this row as the current page (source: `isActive`).",
+              "fieldName": "active"
             },
             {
-              "name": "inverted",
+              "name": "compact",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "fieldName": "inverted"
+              "fieldName": "compact"
+            },
+            {
+              "name": "show-description",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Suppresses the description even when `description` is set (source: `showDescription`, default `true`).",
+              "fieldName": "showDescription"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "`target` for the `<a>` (source default `_self`).",
+              "fieldName": "target"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'default' | 'link' | 'bar'"
+              },
+              "default": "'default'",
+              "description": "`default` (a row with a hover box), `link` (a plain text link, as in `st-mega-menu-column`;\r\nmarked with an arrow when it opens a new tab) or `bar` (a top-level item in a header bar,\r\nshaped like a mega `st-dropdown`'s trigger pill so it lines up with the dropdowns beside it).",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "st-promo-banner",
+          "tagName": "st-menu-item",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "PromoBanner",
+          "name": "MenuItem",
           "declaration": {
-            "name": "PromoBanner",
-            "module": "src/promo-banner/PromoBanner.ts"
+            "name": "MenuItem",
+            "module": "src/menu-item/MenuItem.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "st-promo-banner",
+          "name": "st-menu-item",
           "declaration": {
-            "name": "PromoBanner",
-            "module": "src/promo-banner/PromoBanner.ts"
+            "name": "MenuItem",
+            "module": "src/menu-item/MenuItem.ts"
           }
         }
       ]
@@ -4957,6 +5033,10 @@
             {
               "description": "Overrides the background colour picked by `background`.",
               "name": "--st-section-bg"
+            },
+            {
+              "description": "Overrides the left/right padding (not with `width=\"full\"`).",
+              "name": "--st-section-padding-inline"
             }
           ],
           "cssParts": [
@@ -5157,6 +5237,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/stats/Stats.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.\r\n`inverted` puts it on the dark band (`--st-cms-band-dark-bg`), which stays dark in the dark theme.",
+          "name": "Stats",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-stats-padding"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "StatItem[]"
+              },
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-stats",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Stats",
+          "declaration": {
+            "name": "Stats",
+            "module": "src/stats/Stats.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-stats",
+          "declaration": {
+            "name": "Stats",
+            "module": "src/stats/Stats.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/select/Select.ts",
@@ -5383,71 +5534,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/stats/Stats.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Responsive grid of headline numbers with a label and optional description. Port of React `Stats`.",
-          "name": "Stats",
-          "members": [
-            {
-              "kind": "field",
-              "name": "items",
-              "type": {
-                "text": "StatItem[]"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "inverted"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-stats",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Stats",
-          "declaration": {
-            "name": "Stats",
-            "module": "src/stats/Stats.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-stats",
-          "declaration": {
-            "name": "Stats",
-            "module": "src/stats/Stats.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/testimonials/Testimonials.ts",
@@ -5456,6 +5542,12 @@
           "kind": "class",
           "description": "Section heading plus customer quotes or stories. Port of React `Testimonials`.\n\nEach card shows whatever its item has: a cover image, the customer logo, a story headline, a\nquote with star rating, result metrics, the author and a \"See full story\" link. `layout=\"grid\"`\n(default) lays the cards out in a grid; `layout=\"carousel\"` puts them on one horizontally\nscrolling, snapping row with previous/next buttons next to the heading — the customer-story\ncarousel of enterprise marketing pages. `action-label`/`action-href` add a section-level link\n(e.g. \"Explore customer stories\").",
           "name": "Testimonials",
+          "cssProperties": [
+            {
+              "description": "Overrides the section's padding.",
+              "name": "--st-testimonials-padding"
+            }
+          ],
           "members": [
             {
               "kind": "field",