@sankhyatronics/sankhya-cms 0.2.0 → 0.3.0

package/dist/features-section/index.d.ts

@@ -2,11 +2,30 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
- * One feature tile for `st-features-section`: optional icon, title, Markdown description and an
- * optional "Learn more" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.
- * `mdi:rocket`). The link is a plain `<a>` (the source used react-router's `Link` for non-http
- * hrefs; there is no Lit equivalent). The click is composed, so an SPA router can intercept it
- * (e.g. via `event.composedPath()`) and navigate client-side; `http(s)` links open in a new tab.
+ * One feature tile for `st-features-section`: optional icon, title (`<h3>`), Markdown description
+ * and an optional "Learn more" link, rendered on an `st-card`. `icon` is an Iconify name (e.g.
+ * `mdi:rocket`). The link is a plain `<a href>`, so it works without JavaScript; the click is
+ * composed, so an SPA router can intercept it (e.g. via `event.composedPath()`) and navigate
+ * client-side. `http(s)` links open in a new tab.
+ *
+ * @csspart card - The `st-card` around the tile.
+ * @csspart icon - The icon tile.
+ * @csspart title - The tile heading (`<h3>`).
+ * `variant="panel"` drops the icon tile for a compact card (20px padding, 12px radius, 16px title).
+ * Inverted panels sit on the lighter navy panel colour (`--st-cms-navy-2`) with a hairline border.
+ *
+ * @csspart card - The `st-card` around the tile (the panel `div` with `variant="panel"`).
+ * @csspart description - The Markdown description.
+ * @csspart link - The "Learn more" link.
+ * @cssprop --st-feature-item-panel-bg - Panel background (default `--st-color-surface`).
+ * @cssprop --st-feature-item-panel-border - Panel border colour (default `--st-color-border`).
+ * @cssprop --st-feature-item-panel-radius - Panel corner radius (default 12px).
+ * @cssprop --st-feature-item-panel-padding - Panel padding (default 20px).
+ * @cssprop --st-feature-item-panel-gap - Gap between panel title and description (default `--st-space-8`).
+ * @cssprop --st-feature-item-panel-title-size - Panel title size (default 16px).
+ * @cssprop --st-feature-item-panel-title-weight - Panel title weight (default bold).
+ * @cssprop --st-feature-item-panel-title-color - Panel title colour (default `--st-color-text-strong`).
+ * @cssprop --st-feature-item-panel-desc-color - Panel description colour (default `--st-color-text-muted`).
  */
 declare class FeatureItem extends LitElement {
     static styles: lit.CSSResult;
@@ -18,15 +37,21 @@ declare class FeatureItem extends LitElement {
     href: string;
     actionLabel: string;
     inverted: boolean;
+    /** `default` is the icon card; `panel` is the compact card without an icon tile. */
+    variant: 'default' | 'panel';
+    private renderBody;
     render(): lit.TemplateResult<1>;
 }
 
 /** Data for one tile when using the `items` property (mirrors `st-feature-item`'s properties). */
 interface FeatureItemData {
+    /** Iconify name. Without it the tile has no icon tile. */
     icon?: string;
     title: string;
     description: string;
     href?: string;
+    /** `full` makes the tile span every column of the grid (a wide call-out between rows). */
+    span?: 'full';
 }
 /**
  * A titled grid of feature tiles. Tiles come from the `items` property, from slotted
@@ -34,16 +59,35 @@ interface FeatureItemData {
  * one column below 768px). `inverted` is passed on to the `items` tiles; slotted tiles need their
  * own `inverted` attribute.
  *
+ * The header can carry an `eyebrow` (a small uppercase label above the title). The title is a
+ * real `<h2>`; each tile's title is an `<h3>`. `align="center"` centres the last, incomplete row:
+ * five tiles in three columns lay out as 3 + 2 centred, instead of 3 + 2 left-aligned.
+ *
+ * `variant="panel"` renders the `items` tiles as compact panels without icon tiles (see
+ * `st-feature-item`). A tile from `items` with `span: "full"` spans every column. Slotted tiles
+ * need their own `variant` attribute.
+ *
  * @cssprop --st-features-section-padding - Overrides the section's padding.
+ * @csspart header - The eyebrow, title and subtitle block.
+ * @csspart eyebrow - The small uppercase label above the title.
+ * @csspart title - The section heading (`<h2>`).
+ * @csspart subtitle - The line under the title.
+ * @csspart grid - The grid holding the tiles.
  */
 declare class FeaturesSection extends LitElement {
     static styles: lit.CSSResult;
+    /** Small uppercase label above the title (e.g. "Why Sankhya"). */
+    eyebrow: string;
     title: string;
     subtitle: string;
     /** Applied to every tile built from `items`. */
     actionLabel: string;
     columns: number;
+    /** `start` (default) lays tiles out in a grid. `center` centres the last, incomplete row. */
+    align: 'start' | 'center';
     inverted: boolean;
+    /** `default` is the icon tile grid; `panel` gives the `items` tiles compact panels without icon tiles. */
+    variant: 'default' | 'panel';
     /** Tiles to render (property only). */
     items: FeatureItemData[];
     render(): lit.TemplateResult<1>;

package/dist/features-section/index.js

@@ -1,12 +1,12 @@
 import {
   FeatureItem,
   FeaturesSection
-} from "../chunk-7NIWQWTA.js";
-import "../chunk-3OEEOBHB.js";
-import "../chunk-QLA4BH2B.js";
-import "../chunk-UAIUBPDN.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-2HMOX253.js";
+import "../chunk-XS6LNTSH.js";
+import "../chunk-TJK55CJ2.js";
+import "../chunk-QSJ543V2.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   FeatureItem,

package/dist/flow/index.js

@@ -1,7 +1,7 @@
 import {
   Flow
-} from "../chunk-O4FCRKDX.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-GB4NGCZI.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Flow

package/dist/footer/index.d.ts

@@ -4,15 +4,21 @@ import { LitElement, PropertyValues } from 'lit';
 interface FooterLink {
     label: string;
     href: string;
+    /** `false` leaves the link out of the footer. Omit, or `true`, to show it. */
+    visible?: boolean;
 }
 interface FooterColumn {
     title: string;
     links: FooterLink[];
+    /** `false` leaves the whole column out. A column whose links are all hidden is left out too. */
+    visible?: boolean;
 }
 interface FooterSocialLink {
     /** Iconify icon name, e.g. `mdi:github`. */
     icon: string;
     href: string;
+    /** Accessible name of the icon link (e.g. "Sankhyatronics on LinkedIn"). Falls back to `icon`. */
+    label?: string;
 }
 /** Fired when an internal footer link is activated — cancelable, so an SPA can `preventDefault()` and route instead. */
 interface FooterLinkEventDetail {
@@ -38,6 +44,8 @@ declare class Footer extends LitElement {
     companyName: string;
     /** Overrides the default computed copyright line entirely. */
     copyright: string;
+    /** Legal line (e.g. a trademark notice) shown beside the copyright. Empty hides it. */
+    legalNote: string;
     poweredBy: string;
     poweredByLink: string;
     /** App version, rendered as `v{version}` after the copyright line — for apps that show their own
@@ -45,6 +53,8 @@ declare class Footer extends LitElement {
     version: string;
     /** Logo shown in the brand block (site layout). */
     imageSrc: string;
+    /** Alt text of the logo. Default: the company name plus "home", or "Home" without one. */
+    imageAlt: string;
     /** Short blurb under the logo (site layout). */
     description: string;
     /** Link columns (site layout). */
@@ -52,12 +62,15 @@ declare class Footer extends LitElement {
     /** Social icon links under the description (site layout). */
     socialLinks: FooterSocialLink[];
     private get isSite();
+    /** The columns to show, each with only its visible links; a column left with no links is dropped. */
+    private get visibleColumns();
     private get resolvedCopyright();
     protected willUpdate(changed: PropertyValues): void;
     private onLinkClick;
     private renderLink;
     private renderPoweredBy;
     private renderSite;
+    private renderCopyright;
     render(): lit.TemplateResult<1>;
 }
 

package/dist/footer/index.js

@@ -1,7 +1,7 @@
 import {
   Footer
-} from "../chunk-GJO3RGOB.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-OCPGOLVF.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Footer

package/dist/header/index.d.ts

@@ -8,6 +8,14 @@ import { LitElement } from 'lit';
  * the primary brand prop; `brand-image-url` is optional. For a fixed nav-links/user-menu header,
  * use `st-app-header` instead.
  *
+ * The nav link for the page being shown is marked: `current-path` (e.g. `/t-pilot`) is compared
+ * with each `st-menu-item`/`st-mega-menu-column`/`st-mega-menu-feature` `href` (and a mega column's
+ * `cta-href`). A link is current when it equals the path, or, for a non-root href, when the path is
+ * beneath it; `/` is current only on `/`. The current link gets `aria-current="page"`, and an
+ * `st-dropdown` containing one is highlighted as active. Without `current-path` the header uses
+ * `location.pathname`, re-checked on `popstate`; a single-page app should set `current-path`
+ * on each navigation (the React `Header` does this from the router).
+ *
  * Layout: the menu starts 4rem after the brand, the utility
  * controls sit after a vertical divider, and below `BREAKPOINT_TABLET` (900px) `menu`/`utility`
  * collapse behind a hamburger toggle into a full-screen layer under the
@@ -25,18 +33,44 @@ import { LitElement } from 'lit';
  * This component has no translation logic itself; the consuming app owns what a language `code`
  * means and which content it re-renders in response.
  *
+ * Context mode (opt-in): set `context-trigger` to a CSS selector for a page element (typically the
+ * hero) and give the header a `slot="context"` child (e.g. an `st-product-nav` with `embedded` and
+ * `scroll-spy`). Once the trigger element has scrolled up past the bar, the bar swaps its menu for
+ * the slotted context content. Scrolling back above the trigger restores the menu. Both rows share the
+ * same 64px box, so the header never changes height, and the bar is solid while the context row shows,
+ * even when `transparent`. With no `context-trigger`, or no `slot="context"` content, the header is
+ * unchanged. An open mobile menu closes when the context row takes over. `context-active` reflects the
+ * state; `header-context-change` fires on every switch (detail `{ active }`).
+ *
+ * In context mode, the slotted product nav's site-menu button (`product-nav-site-menu`) opens this
+ * header's site menu over the bar, at every width. The bar keeps its state: the context row stays
+ * visible underneath (made inert), and only the drawer, its close button and a backdrop (above 768px)
+ * are shown on top. `st-cookie-consent` steps aside while the drawer is open (see `setModalOpen`). Esc,
+ * the close button, a click outside the bar, or activating a link in the drawer closes it and returns
+ * focus to that button.
+ *
+ * On a narrow screen the open drawer covers the whole viewport and locks page scroll. It sets
+ * `data-st-drawer-open` on `<html>`, holds keyboard focus (Tab wraps, Esc closes, focus returns to the
+ * toggle), and shows the brand and, with `cta-label` + `cta-href`, a primary call to action above the
+ * menu, which sits before the theme toggle on desktop.
+ *
  * @slot menu - Primary navigation.
+ * @slot context - Product sub-nav shown in place of the menu in context mode (see above). Its children get `inert` while the context row is hidden or a site-menu drawer is open.
  * @slot utility - Account, app-switcher and theme controls, after the divider.
  * @slot brand-extra - Shown right after the brand at every width (e.g. an edition badge).
  * @slot menu-icon - Replaces the hamburger on the narrow-screen toggle (the built-in glyph when empty).
  * @slot close-icon - Replaces the close (X) on the toggle while the menu is open (the built-in glyph when empty).
  * @cssprop --st-header-toggle-icon-size - Width and height of a slotted toggle icon (default 20px, the built-in glyph's size).
+ * @fires header-context-change - Fired when the bar switches to or from the context row. Detail: `{ active: boolean }`. Bubbles, composed.
+ * @csspart mobile-panel - The menu and utility panel (the full-screen layer under the hamburger below 900px, and the site menu in context mode).
  */
 declare class Header extends LitElement {
     static styles: lit.CSSResult;
     title: string;
     /** 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). */
     brandImageUrl: string;
+    /** Path of the page being shown (e.g. `/t-pilot`). Marks the matching nav link as current; falls back to `location.pathname` when empty. */
+    currentPath: string;
     /** `alt` text for the brand image — matches the source component's `altText` (default `'Logo'`). */
     altText: string;
     /** Wraps the brand in an `<a>` when set (e.g. `/`); a plain non-link `<div>` otherwise. */
@@ -66,6 +100,8 @@ declare class Header extends LitElement {
     scrollHidden: boolean;
     private lastScrollY;
     private scrollFrame;
+    /** The `<html>` overflow and padding to restore when the drawer closes; null while the page is not locked. */
+    private drawerScrollLock;
     private onScroll;
     /**
      * Language switcher options, e.g. `[{ code: 'en', label: 'English' }, ...]` — hidden entirely
@@ -87,11 +123,34 @@ declare class Header extends LitElement {
     /** True while the menu doesn't fit the bar at the current width: the header then shows the same
      * hamburger layout it uses on a narrow screen. Set by `evaluateFit`, never from outside. */
     compact: boolean;
+    /** Label of an optional primary call to action in the utility row, before the theme toggle. Hidden when empty (also needs `cta-href`). */
+    ctaLabel: string;
+    /** Target of the call to action. Hidden when empty (also needs `cta-label`). */
+    ctaHref: string;
     private languageMenuOpen;
     /** Whether `slot="utility"` has content — an empty utility row (and its divider) is hidden. */
     private hasUtility;
     /** Whether `slot="brand-extra"` has content — an empty one takes no room beside the brand. */
     private hasBrandExtra;
+    /**
+     * CSS selector of a page element (e.g. `#hero`). Once it has scrolled up past the bar, the bar
+     * shows the context row instead of its menu. Empty (the default) turns context mode off. The
+     * selector is re-queried for up to 5s if the element is not rendered yet, and again whenever it changes.
+     */
+    contextTrigger: string;
+    /** True while the page is past the trigger, so the context row shows. A site-menu drawer opened over it leaves it showing. Set by the header from the trigger's position, never from outside. */
+    contextActive: boolean;
+    /** Whether `slot="context"` has content. */
+    private hasContext;
+    /** True while a site-menu request from the slotted product nav has its drawer open over the bar (see openSiteMenu). */
+    private siteMenuRequested;
+    /** The product nav's site-menu button that asked for the menu; focus returns to it when the menu closes. */
+    private siteMenuTrigger;
+    /** Whether the trigger element has scrolled up past the bar. */
+    private pastTrigger;
+    private triggerObserver?;
+    private triggerMutations?;
+    private triggerTimer;
     private resizeObserver?;
     /** Matches below BREAKPOINT_TABLET, where the hamburger layout is always on. */
     private narrowQuery?;
@@ -104,7 +163,29 @@ declare class Header extends LitElement {
     private onBrandExtraSlotChange;
     private onUtilitySlotChange;
     private onMenuSlotChange;
+    /** Hands the current page path to every nav element under the header, which marks its own link current. */
+    private syncCurrentPath;
+    /** Runs when the light DOM changes: a late-rendered dropdown or nav item needs the same state as the rest. */
+    private onLightDomChange;
+    /** Re-watches the trigger when `context-trigger` changes (before render, so state changes don't re-render twice). */
+    protected willUpdate(changed: Map<string, unknown>): void;
     protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Keeps the page in step with the drawer: `<html data-st-drawer-open>` (which the cookie banner reads) and
+     * a scroll lock. The lock gives back the scrollbar's width, so the page does not shift sideways. Opening
+     * moves focus to the first item in the drawer; a site-menu request focuses its close button instead.
+     */
+    private syncDrawerOpen;
+    private unlockScroll;
+    /** What a keyboard user can reach in the open drawer, in order: its own items, then the toggle that closes it. */
+    private drawerFocusables;
+    /** Keeps Tab and Shift+Tab inside the open drawer, wrapping at either end (and pulling in focus that has left it). */
+    private trapDrawerFocus;
+    /**
+     * Closes the drawer and returns focus to its toggle. A site-menu request returns focus to the product
+     * nav's button instead (see endSiteMenu).
+     */
+    private closeDrawer;
     /** The bar width at which the menu last overflowed — the bar only expands again once it is
      * clearly wider than this, so it can't flip back and forth right at the threshold. */
     private collapsedAtWidth;
@@ -121,10 +202,55 @@ declare class Header extends LitElement {
     connectedCallback(): void;
     private lightDomObserver?;
     disconnectedCallback(): void;
-    private closeOnEscape;
+    /** Esc closes the open drawer; Tab is held inside it while it is open. */
+    private onKeyDown;
     private closeLanguageMenuOnOutsideClick;
+    /** A click outside the bar closes a site menu opened from the product nav. */
+    private closeSiteMenuOnOutsideClick;
+    /** The product nav's site-menu button asked for the site menu (context mode only). */
+    private onSiteMenuRequest;
+    /**
+     * Opens the site menu as a drawer over the bar, which keeps its state underneath (see render). The
+     * drawer is the collapsed layout, so `compact` is forced on at every width, the page's modal flag is
+     * set, and focus moves to the drawer's close button.
+     */
+    private openSiteMenu;
+    /**
+     * Ends a site-menu request: the drawer closes, and the layout goes back to what the bar's own fit
+     * gives. Focus returns to the product nav's button when asked and the context row is shown.
+     */
+    private endSiteMenu;
+    /** Keeps the slotted product nav's `site-menu-open` in step with the header's site menu. */
+    private syncSiteMenuOpen;
+    /** Whether the bar has a context row: a trigger is set and `slot="context"` has content. */
+    private get stacked();
+    /** Layer B (the context row) is inert while it is hidden, and while a site-menu drawer is open over the bar. */
+    private get layerBInert();
+    /** Starts watching the trigger element, retrying for a few seconds while the page has not rendered it. */
+    private startContextTrigger;
+    /** Observes the trigger element if the page has it now. An invalid selector counts as not found. */
+    private observeContextTrigger;
+    private onTriggerIntersect;
+    private stopTriggerRetry;
+    private stopContextTrigger;
+    private updateContextActive;
+    private setContextActive;
+    /** Which layer holds the focus right now, if any. */
+    private focusedLayer;
+    /** Focuses the first control of the layer that is shown: the brand link or toggle (layer A), or the first rendered control of the context content (layer B). */
+    private focusLayer;
+    /** The first rendered control of the context row: the slotted product nav's brand link. */
+    private layerBFocusTarget;
+    private layerAFocusTarget;
+    private contextSlotElements;
+    /** The slotted context content is inert while layer B is inert (see layerBInert). */
+    private syncContextSlot;
+    private onContextSlotChange;
+    /** The primary call to action (`cta-label` + `cta-href`), before the theme toggle. */
+    private renderCta;
     private renderLanguageMenu;
     private onLanguageSelect;
+    /** The header's brand link. Inert while a site-menu request is open, when the drawer shows its own copy (`drawer-head`). */
     private renderBrand;
     render(): lit.TemplateResult<1>;
 }

package/dist/header/index.js

@@ -1,8 +1,9 @@
 import {
   Header
-} from "../chunk-XUGEXERO.js";
+} from "../chunk-WAYHHL4J.js";
+import "../chunk-WAMOAAMN.js";
 import "../chunk-WTD2YIAA.js";
-import "../chunk-KMU6ABQF.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Header

package/dist/hero/index.d.ts

@@ -1,6 +1,20 @@
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 
+/** A dark card on the corner of the split-layout image: an icon tile, a title and an optional line. */
+interface HeroMediaBadge {
+    title: string;
+    text?: string;
+    /** Iconify icon name, e.g. `mdi:shield-check`. */
+    icon?: string;
+}
+/** A small screenshot card on the bottom-right corner of the split-layout image. */
+interface HeroMediaInset {
+    src: string;
+    alt: string;
+    /** Optional bar above the screenshot inside the card. */
+    label?: string;
+}
 /**
  * Full-width hero banner: background image with a darkening overlay, optional eyebrow, title,
  * optional subtitle and up to two call-to-action links. The entrance animation is CSS keyframes
@@ -12,17 +26,40 @@ import { LitElement } from 'lit';
  * `indicator-style="tabs"` for a tabbed hero carousel.
  *
  * `badge` is a pill above the title; `highlights` is a row of check-marked points under the buttons.
+ * `cta-note` is a short line with a small padlock under the buttons (e.g. "No credit card needed"), left-aligned
+ * with the buttons, or centred in a centred layout.
+ * `button-style="pill"` gives the buttons the 52px pill look (primary navy, secondary white with an arrow).
  * `layout="split"` swaps the background for a two-column layout: copy on one side, `image-src` as an
- * `<img>` (alt from `image-alt`) on the other, on normal page colours with no overlay.
+ * `<img>` (alt from `image-alt`) on the other, on normal page colours with no overlay. In the split
+ * layout the copy sits in the page's container (`--st-cms-container-max`) with the same side gutter
+ * as the other sections.
+ *
+ * In the split layout, `image-label` adds a window-style bar with that text above the image, and
+ * `media-inset` (`{ src, alt, label? }`) puts a small screenshot card on the image's bottom-right corner.
+ * `media-inset` replaces `media-badge` when both are set, so only one card shows.
+ *
+ * A CTA with an `href` is a real link (`<a href>`), so external URLs, `#anchors` and `/path?x=y`
+ * work without JavaScript. Its `action` event is cancelable: call `preventDefault()` on it to stop
+ * the browser following the link (a router does this to navigate client-side). A CTA without an
+ * `href` is a `<button>`.
  *
- * @fires action - Cancelable, before navigating. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.
+ * @fires action - Cancelable, before following the link. Detail `{ href, kind }`, `kind` being `primary` or `secondary`.
  * @cssprop --st-hero-text-color - Text colour over the image.
  * @cssprop --st-hero-min-height - Minimum height when `size` is `large` (default `640px`).
+ * @cssprop --st-hero-offset-top - Extra space above the content, e.g. the height of a fixed header (default `0`).
+ * @cssprop --st-hero-cta-note-color - Colour of the `cta-note` line (default `var(--st-color-text-muted)`).
  * @csspart eyebrow - The small label above the title.
  * @csspart badge - The pill above the title.
  * @csspart highlights - The row of check-marked points.
+ * @csspart cta-note - The small line with a padlock under the buttons (`cta-note`).
  * @csspart image - The image in `layout="split"`.
- * @csspart secondary-action - The outlined second button.
+ * @csspart action - The primary call-to-action (`<a>` with an `href`, `<button>` without).
+ * @csspart secondary-action - The outlined second call-to-action.
+ * @csspart title-highlight - The part of the title picked by `title-highlight`.
+ * @csspart media-badge - The dark card on the corner of the split-layout image.
+ * @csspart image-bar - The window-style bar above the split-layout image (`image-label`).
+ * @csspart media-inset - The screenshot card on the image's bottom-right corner (`media-inset`).
+ * @cssprop --st-cms-brand-azure - Colour of the title highlight.
  */
 declare class Hero extends LitElement {
     static styles: lit.CSSResult;
@@ -30,6 +67,9 @@ declare class Hero extends LitElement {
     subtitle: string;
     imageSrc: string;
     actionLabel: string;
+    /** Shorter `action-label` for phones (< 480px), so the button fits on one line. The full label
+     * stays the link's accessible name. */
+    actionLabelShort: string;
     href: string;
     textAlignment: 'left' | 'center' | 'right' | 'justify';
     padding: 'none' | 'small' | 'medium' | 'large';
@@ -39,11 +79,17 @@ declare class Hero extends LitElement {
     eyebrow: string;
     /** Label of an outlined second button next to the primary one. */
     secondaryActionLabel: string;
+    /** Shorter `secondary-action-label` for phones (< 480px). */
+    secondaryActionLabelShort: string;
     secondaryHref: string;
     /** Small pill above the title (e.g. "New", "Now available"). */
     badge: string;
     /** Check-marked points shown in a row under the buttons. */
     highlights: string[];
+    /** Short line with a small check under the buttons (e.g. "No credit card needed"). Empty hides it. */
+    ctaNote: string;
+    /** Iconify icon for the `cta-note` line (e.g. `mdi:open-source-initiative`). Empty keeps the padlock. */
+    ctaNoteIcon: string;
     /** `background` (default) puts `image-src` behind the copy; `split` puts copy and image side by side. */
     layout: 'background' | 'split';
     /** Alt text of the image in `layout="split"`. Empty marks it as decorative. */
@@ -54,11 +100,34 @@ declare class Hero extends LitElement {
     contentPosition: 'center' | 'bottom';
     /** `even` darkens the whole image; `gradient` darkens behind the copy only; `none` shows the image as is. */
     overlay: 'even' | 'gradient' | 'none';
+    /** Text of `title` to set in the brand azure. Only the first occurrence is highlighted. */
+    titleHighlight: string;
+    /** A dark card on the corner of the image, with an optional icon. Shown with `layout="split"` and an `image-src`. */
+    mediaBadge?: HeroMediaBadge;
+    /** Label of a window-style bar (three dots, then the text) above the split-layout image. Shown with `layout="split"` and an `image-src`. */
+    imageLabel: string;
+    /** A small screenshot card on the bottom-right corner of the split-layout image. Replaces `mediaBadge` when both are set. */
+    mediaInset?: HeroMediaInset;
+    /** `default` keeps the plain buttons. `pill` gives the buttons the 52px pill style (the secondary one with an arrow). */
+    buttonStyle: 'default' | 'pill';
+    /** Level of the title heading: `1` (default) for a page's main hero, `2` for a hero that is not the
+     * page heading (e.g. the slides of a hero carousel, where the page has its own `<h1>`). */
+    headingLevel: 1 | 2;
     private static positions;
+    /**
+     * A hero that is already inside the first screen when it connects is on screen at first paint, so its
+     * entrance animation (rise, fades, image zoom) would only delay the copy: it renders still. A hero
+     * further down the page keeps its entrance. A carousel slide is handled by `st-carousel` instead.
+     */
+    connectedCallback(): void;
     protected willUpdate(): void;
     private emitAction;
-    private onClick;
-    private onSecondaryClick;
+    private renderCta;
+    /** The title with the `title-highlight` text wrapped in its own span; plain text otherwise. */
+    private renderTitle;
+    private renderMediaBadge;
+    private renderImageBar;
+    private renderMediaInset;
     render(): lit.TemplateResult<1>;
 }
 
@@ -69,4 +138,4 @@ interface HeroActionEventDetail {
     kind?: 'primary' | 'secondary';
 }
 
-export { Hero, type HeroActionEventDetail };
+export { Hero, type HeroActionEventDetail, type HeroMediaBadge, type HeroMediaInset };

package/dist/hero/index.js

@@ -1,8 +1,11 @@
 import {
   Hero
-} from "../chunk-SQ3OZO32.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-MFRGAT6D.js";
+import "../chunk-BEWX3E6P.js";
+import "../chunk-T4BIN37Q.js";
+import "../chunk-WTD2YIAA.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   Hero

package/dist/icon-button/index.d.ts

@@ -9,10 +9,12 @@ import { LitElement } from 'lit';
  */
 declare class IconButton extends LitElement {
     static styles: lit.CSSResult;
-    /** Accessible name and tooltip — matches the source component's `ariaLabel` (renamed: modern
+    /**
+     * Accessible name, set as the button's `aria-label` and its `title` (tooltip). Required for a
+     * control with no visible text. Matches the source component's `ariaLabel` (renamed: modern
      * browsers already expose a native `ariaLabel` reflected property on every `Element`, so reusing
-     * that exact name as a Lit reactive property would shadow it). Required for a control with no
-     * visible text. */
+     * that exact name as a Lit reactive property would shadow it).
+     */
     label: string;
     disabled: boolean;
     render(): lit.TemplateResult<1>;

package/dist/icon-button/index.js

@@ -1,7 +1,7 @@
 import {
   IconButton
-} from "../chunk-PHEGSCOM.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-WH6HE6SY.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   IconButton

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export { AttentionPanel } from './attention-panel/index.js';
 export { BarChart } from './bar-chart/index.js';
 export { BentoGrid, BentoGridItem } from './bento-grid/index.js';
+export { BOOKING_CANCELLED_EVENT, BOOKING_CREATED_EVENT, BOOKING_ERROR_EVENT, BOOKING_RESCHEDULED_EVENT, Booking, BookingCancelledEventDetail, BookingCreatedEventDetail, BookingErrorEventDetail, BookingErrorKind, BookingErrorMessages, BookingErrors, BookingFieldName, BookingInfo, BookingLabels, BookingRescheduledEventDetail, BookingService, BookingSlot, BookingStaff, DEFAULT_BOOKING_LABELS } from './booking/index.js';
 export { Card } from './card/index.js';
 export { Carousel, CarouselChangeEventDetail } from './carousel/index.js';
 export { Chip } from './chip/index.js';
+export { CONTACT_FORM_ERROR_EVENT, CONTACT_FORM_SENT_EVENT, CONTACT_FORM_SUBMIT_EVENT, ContactErrorMessages, ContactErrors, ContactFieldName, ContactForm, ContactFormErrorEventDetail, ContactFormErrorKind, ContactFormSentEventDetail, ContactFormSubmitEventDetail, ContactSubmitResult, ContactTopic } from './contact-form/index.js';
 export { ContentBlock } from './content-block/index.js';
-export { CookieConsent, CookieConsentEventDetail, CookieConsentStatus } from './cookie-consent/index.js';
+export { CookieCategory, CookieConsent, CookieConsentEventDetail, CookieConsentStatus } from './cookie-consent/index.js';
 export { DateTile } from './date-tile/index.js';
 export { Dropdown, DropdownToggleEventDetail } from './dropdown/index.js';
 export { FeatureSplit, FeatureSplitActionEventDetail, FeatureSplitImagePosition, FeatureSplitItem } from './feature-split/index.js';
@@ -13,16 +15,20 @@ export { FeatureItem, FeatureItemData, FeaturesSection } from './features-sectio
 export { Flow, FlowNode } from './flow/index.js';
 export { Footer, FooterColumn, FooterLink, FooterLinkEventDetail, FooterSocialLink } from './footer/index.js';
 export { Header, LanguageChangedEventDetail } from './header/index.js';
-export { Hero, HeroActionEventDetail } from './hero/index.js';
+export { Hero, HeroActionEventDetail, HeroMediaBadge, HeroMediaInset } from './hero/index.js';
 export { IconButton } from './icon-button/index.js';
 export { AccordionItem, AccordionToggleEventDetail, ItemsAccordion } from './items-accordion/index.js';
 export { KpiCard } from './kpi-card/index.js';
 export { Markdown, MarkdownErrorEventDetail } from './markdown/index.js';
-export { MegaMenu, MegaMenuColumn, MegaMenuFeature, MegaMenuSelectEventDetail } from './mega-menu/index.js';
+export { MEGA_MENU_LAYOUT_EVENT, MegaMenu, MegaMenuColumn, MegaMenuFeature, MegaMenuLayoutEventDetail, MegaMenuSelectEventDetail } from './mega-menu/index.js';
 export { MenuGridItem, MenuGridItemSelectEventDetail } from './menu-grid-item/index.js';
 export { MenuGrid } from './menu-grid/index.js';
 export { MenuItem, MenuItemSelectEventDetail } from './menu-item/index.js';
+export { PlanCardItem, PlanCards } from './plan-cards/index.js';
+export { ProductNav, ProductNavLink } from './product-nav/index.js';
 export { PromoBanner } from './promo-banner/index.js';
+export { DEFAULT_MAILTO_BODY_LIMIT, MailtoField, MailtoInput, QUOTE_OPEN_EVENT, QuoteDialog, QuoteMailField, QuoteMailtoInput, QuoteOpenEventDetail, QuoteOption, QuoteSubmitEventDetail, buildMailto, buildQuoteMailto, fillTemplate } from './quote-dialog/index.js';
+export { ScreenshotTour, ScreenshotTourItem } from './screenshot-tour/index.js';
 export { Section } from './section/index.js';
 export { SegmentChangeEventDetail, SegmentedControl, SegmentedOption } from './segmented-control/index.js';
 export { Select, SelectChangedEventDetail, SelectOption } from './select/index.js';