@sankhyatronics/sankhya-cms 0.1.18 → 0.3.0

package/dist/mega-menu/index.d.ts

@@ -1,5 +1,5 @@
 import * as lit from 'lit';
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 
 /**
  * The rich layout of a mega-menu panel, after okta.com: an optional intro column on the left (a
@@ -13,11 +13,15 @@ import { LitElement } from 'lit';
  * everything stacked in the narrow drill-down panel `st-header` shows on a phone (where the intro
  * heading is left out — the drill-down already shows the section's name).
  *
+ * `cta-label` + `cta-href` add a call-to-action pill pinned to the foot of the intro column, so the
+ * column ends level with the featured cards instead of leaving an empty gap under the text.
+ *
  * @slot - The link columns (`st-mega-menu-column`s, or any blocks).
  * @slot intro - Quick links under the intro text, e.g. `st-menu-item`s with an icon.
  * @slot featured - Promo cards (`st-mega-menu-feature`s), stacked.
  * @csspart inner - The grid holding every area.
  * @csspart intro - The intro column.
+ * @csspart cta - The intro column's call-to-action pill.
  * @csspart columns - The grid holding the link columns.
  * @csspart featured - The featured column.
  */
@@ -31,12 +35,21 @@ declare class MegaMenu extends LitElement {
     featuredHeading: string;
     /** Number of link columns side by side at full width. `0` (the default) uses one per slotted column. */
     columns: number;
+    /** Label of the call-to-action pill at the foot of the intro column. Needs `cta-href`. */
+    ctaLabel: string;
+    /** Target of the intro column's call to action. */
+    ctaHref: string;
+    /** Whether the menu panel is shown. Set to `false` to hide it entirely (it keeps its slotted content). */
+    visible: boolean;
     private columnCount;
     private hasIntroLinks;
     private hasFeatured;
     private onColumnsSlotChange;
     private onIntroSlotChange;
     private onFeaturedSlotChange;
+    private get layout();
+    private lastTracks;
+    protected updated(_changed: PropertyValues): void;
     render(): lit.TemplateResult<1>;
 }
 
@@ -47,19 +60,45 @@ declare class MegaMenu extends LitElement {
  *
  * `variant="card"` puts the column on a tinted rounded tile and `variant="accent"` on a solid
  * accent tile with light text; both suit a row of equal columns without intro or featured area.
- * `cta-label` + `cta-href` add a pill button at the bottom of the column.
+ *
+ * `variant="product"` makes a product card for a row of products: an icon tile and a `tag` pill on a
+ * top row, the heading and description, the links as rows
+ * with a `→` arrow (a new-tab link keeps its `↗` icon), and a full-width `cta-label` + `cta-href`
+ * button pinned to the bottom. The icon tile shows `icon` (an iconify name), or, when `icon-src` is set,
+ * that image at 28px on the same tinted tile (`icon-src-dark`, if set, replaces it on the dark theme). The
+ * card lifts and gets an accent border on hover or focus. Set
+ * `accent` (any CSS colour) to tint it; it defaults to the theme accent. A card whose link is the
+ * page being shown (see `st-header`'s `current-path`) becomes the "You are here" card: a 2px accent
+ * border, a faint accent wash, a `currentLabel` pill and a solid button. Inside an `inline`
+ * (hamburger) header panel the card does not lift.
+ *
+ * `decoration` (`none` default, `flow`, `orbit`, `waves` or `ribbon`) draws faint curvy line art in
+ * the card's accent behind its top-right corner. It is `product`-only and sits under the content;
+ * it drifts on hover or focus, but not in the `inline` panel or with reduced motion.
+ *
+ * `cta-label` + `cta-href` add a pill button at the bottom of any variant's column.
  *
  * The heading (when `href` is set) and the button fire a *cancelable* `mega-menu-select` event
  * (detail: `{ href }`) before navigating; a host doing client-side routing calls
- * `event.preventDefault()` on it.
+ * `event.preventDefault()` on it. A link whose `href` is the page being shown (see `st-header`'s
+ * `current-path`) gets `aria-current="page"`.
  *
  * @slot - The column's links, or nested `st-mega-menu-column` groups.
  * @fires mega-menu-select - The heading link or the button was clicked (cancelable; detail `{ href }`).
+ * @csspart top - The product card's top row (icon tile and pills).
+ * @csspart icon - The product card's icon tile. With `icon-src` it holds the image (one, or two with `icon-src-dark`) at 28px, on the same tinted tile.
+ * @csspart tag - The product card's tag pill.
+ * @csspart current - The product card's "You are here" pill.
  * @csspart heading - The heading text or link.
  * @csspart description - The line under the heading.
  * @csspart items - The box holding the links.
  * @csspart cta - The pill button.
+ * @csspart decoration - The decorative line art of a `product` card (`decoration` other than `none`).
  * @cssprop --st-mega-menu-column-padding - Overrides the padding of a `card`/`accent` column.
+ * @cssprop --st-mega-menu-column-accent - The accent of a `product` card (default `--st-color-accent`); `accent` sets it.
+ * @cssprop --st-mega-menu-column-lift - The hover/focus lift of a `product` card (default `-3px`); `st-dropdown` sets it to `0px` while `inline`.
+ * @cssprop --st-mega-menu-column-deco-opacity - The resting opacity of the `decoration` line art (default `0.28`); raise or lower it per theme, e.g. on dark surfaces.
+ * @cssprop --st-mega-menu-column-deco-transform - The hover/focus shift of the `decoration` line art (default `translate(-6px, 4px)`); `st-dropdown` sets it to `none` while `inline`.
  */
 declare class MegaMenuColumn extends LitElement {
     static styles: lit.CSSResult;
@@ -67,15 +106,53 @@ declare class MegaMenuColumn extends LitElement {
     /** Makes the heading a link (e.g. to the section's overview page). */
     href: string;
     description: string;
-    /** `plain` (default), `card` (tinted tile) or `accent` (solid accent tile, light text). */
-    variant: 'plain' | 'card' | 'accent';
+    /** `plain` (default), `card` (tinted tile), `accent` (solid accent tile, light text) or `product` (a product card). */
+    variant: 'plain' | 'card' | 'accent' | 'product';
     /** Text of a pill button at the bottom of the column; needs `cta-href`. */
     ctaLabel: string;
     ctaHref: string;
+    /**
+     * Variant the column takes while its heading or button links to the page being shown, e.g. a card
+     * that turns accent on its own product page. Empty (default) keeps `variant` at all times.
+     */
+    currentVariant: '' | 'plain' | 'card' | 'accent';
+    /** Small icon tile on a `product` card: an iconify icon name, e.g. `heroicons:book-open`. */
+    icon: string;
+    /** Image icon of a `product` card (28px inside the 44px tile), e.g. a product logo. Replaces the iconify `icon` when set. */
+    iconSrc: string;
+    /** Dark-theme variant of `icon-src`, shown on the site's dark theme (`:root.dark`) in place of it. Needs `icon-src`. */
+    iconSrcDark: string;
+    /** Short label pill on the top row of a `product` card, e.g. `Open source`. */
+    tag: string;
+    /** Accent of a `product` card, any CSS colour (sets `--st-mega-menu-column-accent`). */
+    accent: string;
+    /**
+     * Decorative curvy line art behind a `product` card's top-right corner: `flow` (lines fanning down-left),
+     * `orbit` (concentric arcs), `waves` (parallel waves across the top) or `ribbon` (crossing loops).
+     * `none` (default) draws nothing. Other variants ignore it.
+     */
+    decoration: 'none' | 'flow' | 'orbit' | 'waves' | 'ribbon';
+    /** "You are here" marker on the `product` card of the page being shown. */
+    currentLabel: string;
+    /** Page path the header is showing; set by `st-header`. A link whose href matches gets `aria-current="page"`. */
+    currentPath: string;
+    /**
+     * True while the column is the page being shown: while `current-variant` applies, or always for a
+     * `product` card. Set by the column, never from outside.
+     */
+    current: boolean;
+    /** Whether the links slot has any links, so a `product` card draws its divider only above them. */
+    private hasLinks;
+    private onLinksSlotChange;
+    protected willUpdate(changed: Map<string, unknown>): void;
     private select;
     private renderHeading;
+    private renderDecoration;
+    /** The tile's content: the `icon-src` image (light, plus the dark one when `icon-src-dark` is set), else the iconify `icon`. */
+    private renderTileIcon;
+    private renderTop;
     private renderCta;
-    render(): lit.TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 
 /**
@@ -130,6 +207,8 @@ declare class MegaMenuFeature extends LitElement {
     logoAlt: string;
     /** Call-to-action text at the bottom of the card; empty hides it. */
     ctaLabel: string;
+    /** Page path the header is showing; set by `st-header`. A card whose `href` matches gets `aria-current="page"`. */
+    currentPath: string;
     private get isExternal();
     private onClick;
     render(): lit.TemplateResult<1>;
@@ -138,5 +217,14 @@ declare class MegaMenuFeature extends LitElement {
 interface MegaMenuSelectEventDetail {
     href: string;
 }
+/**
+ * Fired on `st-mega-menu` (bubbles, composed) when the number of grid tracks it lays out changes: the intro
+ * column, each link column and the featured column. The `mega` dropdown around it uses this to keep a panel
+ * with few columns from stretching to the full width.
+ */
+declare const MEGA_MENU_LAYOUT_EVENT = "st-mega-menu-layout";
+interface MegaMenuLayoutEventDetail {
+    tracks: number;
+}
 
-export { MegaMenu, MegaMenuColumn, MegaMenuFeature, type MegaMenuSelectEventDetail };
+export { MEGA_MENU_LAYOUT_EVENT, MegaMenu, MegaMenuColumn, MegaMenuFeature, type MegaMenuLayoutEventDetail, type MegaMenuSelectEventDetail };

package/dist/mega-menu/index.js

@@ -2,11 +2,16 @@ import {
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature
-} from "../chunk-J6EO4R73.js";
+} from "../chunk-MIBVQXRU.js";
+import {
+  MEGA_MENU_LAYOUT_EVENT
+} from "../chunk-ER7MCPDV.js";
+import "../chunk-UKIVLF7S.js";
 import "../chunk-WTD2YIAA.js";
-import "../chunk-KMU6ABQF.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
+  MEGA_MENU_LAYOUT_EVENT,
   MegaMenu,
   MegaMenuColumn,
   MegaMenuFeature

package/dist/menu-grid/index.d.ts

@@ -4,9 +4,8 @@ import { LitElement } from 'lit';
 /**
  * A responsive grid of `st-menu-grid-item`s — the "rich" nav-menu layout (icon + title +
  * description per entry, arranged in columns), typically slotted into `st-dropdown`'s default
- * slot. A 1:1 port of `SankhyaUI`'s React `MenuGrid` (`SankhyaCMS/SankhyaUI/src/components/Menu`):
- * same markup (`.menu-grid-container` > `.menu-grid.columns-N`), gap and breakpoints (768px: 2–4
- * columns → 2; 480px: everything → 1; a 1-column grid stays 1).
+ * slot. Markup is `.menu-grid-container` > `.menu-grid.columns-N`; breakpoints: at 768px, 2–4
+ * columns become 2; at 480px, everything becomes 1 (a 1-column grid stays 1).
  */
 declare class MenuGrid extends LitElement {
     static styles: lit.CSSResult;

package/dist/menu-grid/index.js

@@ -1,7 +1,7 @@
 import {
   MenuGrid
-} from "../chunk-SMLR736E.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-PV6OCXXN.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   MenuGrid

package/dist/menu-grid-item/index.d.ts

@@ -3,16 +3,14 @@ import { LitElement } from 'lit';
 
 /**
  * One entry in an `st-menu-grid` — icon (via `slot="icon"`) + title on one line, an optional
- * description below, and an optional corner badge ("New", "Popular", ...). A 1:1 port of
- * `SankhyaUI`'s React `MenuGridItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same markup and
- * CSS, with its `motion` effects redone in CSS — fades up the first time it scrolls into view,
- * scales to 1.02 on hover / 0.98 while pressed, the icon tilts on hover, the badge pops in.
- * Colors come from the suite theme rather than per-item utility classes.
+ * description below, and an optional corner badge ("New", "Popular", ...). Effects are CSS:
+ * fades up the first time it scrolls into view, scales to 1.02 on hover / 0.98 while pressed, the
+ * icon tilts on hover, the badge pops in. Colors come from the suite theme rather than per-item
+ * utility classes.
  *
- * An `http(s)` `href` opens in a new tab, like the source. Any other `href` fires a *cancelable*
+ * An `http(s)` `href` opens in a new tab. Any other `href` fires a *cancelable*
  * `menu-grid-item-select` event (detail: `{ href }`) first: a host doing client-side routing calls
- * `event.preventDefault()` on it, which also cancels the anchor's own navigation (the source used
- * react-router's `Link` here; the suite apps have no router).
+ * `event.preventDefault()` on it, which also cancels the anchor's own navigation.
  */
 declare class MenuGridItem extends LitElement {
     /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */

package/dist/menu-grid-item/index.js

@@ -1,7 +1,7 @@
 import {
   MenuGridItem
-} from "../chunk-JQY2G4QK.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-2GTR37PU.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   MenuGridItem

package/dist/menu-item/index.d.ts

@@ -3,18 +3,20 @@ import { LitElement } from 'lit';
 
 /**
  * A single flat nav row — icon (`slot="icon"`) + title + badge on one line, an optional
- * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. A 1:1
- * port of `SankhyaUI`'s React `MenuItem` (`SankhyaCMS/SankhyaUI/src/components/Menu`): same
- * markup and CSS, with its `motion` effects redone in CSS — nudges right and scales to 1.01 on
- * hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades
- * in. Colors come from the suite theme rather than per-item utility classes.
+ * description below — as opposed to `st-menu-grid-item`'s card for a multi-column grid. Effects
+ * are CSS: nudges right and scales to 1.01 on hover / 0.99 while pressed, the icon tilts on hover,
+ * the badge pops in, the description fades in. Colors come from the suite theme rather than
+ * per-item utility classes.
  *
  * Renders a real `<a href>` but fires a *cancelable* `menu-item-select` event (detail: `{ href }`)
- * before navigating — a host doing client-side routing calls `event.preventDefault()` on it (the
- * source used react-router's `Link` here; the suite apps have no router).
+ * before navigating — a host doing client-side routing calls `event.preventDefault()` on it.
+ *
+ * It is the current page (`aria-current="page"`, shown as active) when `active` is set, or when the
+ * `href` matches `currentPath`, which an enclosing `st-header` sets from its `current-path`.
  *
  * @slot icon - The row's icon, sized to `icon-size` (16px, or 14px when `compact`).
  * @cssprop --st-menu-item-icon-size - Width and height of the slotted icon; `icon-size` sets it.
+ * @cssprop --st-menu-item-arrow - A trailing glyph (e.g. `'→'`) drawn after a `link` variant's title; none by default, and not drawn on a link that opens a new tab.
  */
 declare class MenuItem extends LitElement {
     /** `focus()` on the element focuses its link, so `st-dropdown` can arrow-key between items. */
@@ -34,6 +36,8 @@ declare class MenuItem extends LitElement {
     badge: string;
     /** Highlights this row as the current page (source: `isActive`). */
     active: boolean;
+    /** Page path the header is showing; set by `st-header` (from its `current-path`), so this row can compare its `href` with it. */
+    currentPath: string;
     compact: boolean;
     /** Suppresses the description even when `description` is set (source: `showDescription`, default `true`). */
     showDescription: boolean;

package/dist/menu-item/index.js

@@ -1,8 +1,9 @@
 import {
   MenuItem
-} from "../chunk-R5G6KFTJ.js";
+} from "../chunk-NXKDZWS7.js";
+import "../chunk-UKIVLF7S.js";
 import "../chunk-WTD2YIAA.js";
-import "../chunk-KMU6ABQF.js";
+import "../chunk-NXUS2CH7.js";
 import "../chunk-EUXUH3YW.js";
 export {
   MenuItem

package/dist/plan-cards/index.d.ts

@@ -0,0 +1,69 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface PlanCardItem {
+    id: string;
+    /** Iconify icon name, e.g. `mdi:rocket-launch`. */
+    icon?: string;
+    title: string;
+    /** Small pill beside the title, e.g. "Most popular". */
+    badge?: string;
+    /** `highlight` (cyan, navy text) or `primary` (navy, white text). Default `primary`. */
+    badgeTone?: 'highlight' | 'primary';
+    description?: string;
+    bullets?: string[];
+    /** Label of the card's button. */
+    actionLabel: string;
+    /** Target of the button when the cards have no `quoteDialog`. */
+    href?: string;
+    /** The highlighted card: white with a 2px navy border and a navy button. */
+    featured?: boolean;
+}
+/**
+ * A row of plan or offer cards with a header above them. Each card has an icon, a title with an
+ * optional badge, a description, check-marked bullets and a button at the foot of the card.
+ *
+ * A button opens a `st-quote-dialog` when `quote-dialog` names its `id`: it fires a window
+ * `st-quote-open` event with `{ dialog, option: item.id, trigger }` and does not navigate. Without
+ * `quote-dialog`, the button is a link to `href`. The footnote's action (`footnote-action-label`)
+ * opens the same dialog with the option `unsure`. Put `{action}` in `footnote` to place that button
+ * inside the sentence (the text around it is then plain text, not Markdown); without the token the
+ * button follows the footnote.
+ *
+ * @cssprop --st-plan-cards-padding - Overrides the block's padding.
+ * @cssprop --st-plan-cards-lead-color - Colour of the line under the title (default `--st-cms-text`).
+ * @csspart header - The eyebrow, title and lead block.
+ * @csspart grid - The grid of cards.
+ * @csspart card - One plan card.
+ * @csspart icon - The icon tile.
+ * @csspart badge - The pill beside a card title.
+ * @csspart action - The card button (a `<button>` with `quote-dialog`, otherwise a link with `href`).
+ * @csspart footnote - The footnote under the cards.
+ * @csspart footnote-action - The text button in the footnote.
+ */
+declare class PlanCards extends LitElement {
+    static styles: lit.CSSResult;
+    /** Small uppercase label above the title. */
+    eyebrow: string;
+    title: string;
+    /** The line under the title. */
+    subtitle: string;
+    /** The cards, in order. */
+    items: PlanCardItem[];
+    /** Markdown under the cards, centred. Put `{action}` where the footnote's text button goes. */
+    footnote: string;
+    /** Label of a text button after the footnote. Opens the quote dialog with the option `unsure`. */
+    footnoteActionLabel: string;
+    /** `id` of a `st-quote-dialog`. Set, the card buttons open that dialog instead of linking. */
+    quoteDialog: string;
+    /** Fires the window `st-quote-open` event for the dialog. The page does not navigate. */
+    private openQuote;
+    private renderFootnoteAction;
+    private renderAction;
+    private renderCard;
+    /** `{action}` in the footnote becomes the inline text button; otherwise Markdown, then the button. */
+    private renderFootnote;
+    render(): lit.TemplateResult<1>;
+}
+
+export { type PlanCardItem, PlanCards };

package/dist/plan-cards/index.js

@@ -0,0 +1,13 @@
+import {
+  PlanCards
+} from "../chunk-FF2LWEF3.js";
+import "../chunk-FOUK3NHR.js";
+import "../chunk-XS6LNTSH.js";
+import "../chunk-TJK55CJ2.js";
+import "../chunk-KZ7PMFWS.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  PlanCards
+};
+//# sourceMappingURL=index.js.map

package/dist/plan-cards/index.js.map

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

package/dist/product-nav/index.d.ts

@@ -0,0 +1,127 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface ProductNavLink {
+    label: string;
+    /** An in-page anchor, e.g. `#features`. A link to another site (e.g. the docs) opens in a new tab, with the ↗ icon. */
+    href: string;
+}
+/**
+ * A product sub-navigation bar for a product page, shown under the site header: a lockup (the product
+ * icon, a prefix and a name, with a tagline under it), in-page section links, an optional site-menu
+ * button and an optional external button.
+ *
+ * The lockup is one link (icon, wordmark, rule and tagline) to `brand-href`.
+ *
+ * The link whose section is in view gets `aria-current="true"`, found with an IntersectionObserver
+ * on the sections the `#anchor` links point at. On phones the links move to their own row and scroll
+ * sideways inside the bar. `sticky` pins the bar to the top of the viewport; set
+ * `--st-product-nav-top` to the height of a fixed site header above it.
+ *
+ * `embedded` drops the bar's own background, rule, shadow and sticky positioning, so it fills the
+ * row of a host, e.g. the `slot="context"` of `st-header` (its context mode). Desktop: lockup, links
+ * centred, site-menu button and action pill at the right, vertically centred. Phones: lockup (wordmark
+ * 18px, icon 32px, then 28px under 480px; tagline 9px under 480px and still shown), then a
+ * sideways-scrolling links row, then a compact action pill.
+ *
+ * `site-menu-label` adds a 44px hamburger button before the action pill. Clicking it dispatches
+ * `product-nav-site-menu`, which the host `st-header` answers by opening its site menu. While that menu
+ * is open the host sets `site-menu-open`, which is reflected to the button's `aria-expanded`.
+ *
+ * `scroll-spy` marks the link for the section currently in view with `aria-current="location"` and
+ * an active style (accent colour and a 2px underline). The section is the one whose top is nearest
+ * the top of the viewport at or above a 64px line; none is marked while the page is above the first
+ * section.
+ *
+ * @fires product-nav-site-menu - The site-menu button was clicked. Detail: `{ trigger }`, the button itself, so the host can return focus to it. Bubbles, composed.
+ * @attr icon - Product icon image URL, shown in the brand link before the wordmark (40px; 32px, then 28px under 480px, when `embedded`).
+ * @attr icon-dark - Dark-theme icon image URL, shown on `:root.dark` in place of `icon`. Needs `icon`.
+ * @attr label - Accessible name of the `<nav>` (e.g. `T-pilot`). Default: the brand prefix and name (e.g. `T-pilot`).
+ * @attr brand-href - Target of the brand link (icon and wordmark). Default `#top`.
+ * @attr site-menu-label - Accessible name of the site-menu button (a hamburger before the action pill). Empty (default): no button.
+ * @attr site-menu-open - Reflected. True while the host header's site menu is open, which sets the button's `aria-expanded`. Set by the host header, never from outside.
+ * @attr embedded - Fills the host row: no sticky positioning, background, rule or shadow of its own.
+ * @attr scroll-spy - Marks the link for the section in view (`aria-current="location"`).
+ * @cssprop --st-product-nav-top - The `top` offset of a sticky bar (default `0px`).
+ * @cssprop --st-product-nav-z - The `z-index` of a sticky bar (default `90`, under st-header's 100 so its open mega panel paints above).
+ * @cssprop --st-product-nav-border - Colour of the bottom rule (default `--st-cms-primary-100`).
+ * @csspart nav - The `<nav>` landmark.
+ * @csspart lockup - The wrapper of the brand link.
+ * @csspart brand - The brand link (icon, wordmark, rule and tagline).
+ * @csspart icon - The product icon image (one, or two when `icon-dark` is set).
+ * @csspart links - The list of section links.
+ * @csspart link - One section link.
+ * @csspart site-menu - The site-menu button.
+ * @csspart action - The external button.
+ */
+declare class ProductNav extends LitElement {
+    static styles: lit.CSSResult;
+    /** Brand prefix, e.g. `T-`. Shown in the brand navy. */
+    brandPrefix: string;
+    /** Product name, e.g. `pilot`. Shown in the brand azure with an underline. */
+    brandName: string;
+    /** Small line under the name, e.g. `by Sankhyatronics`. Plain text inside the brand link. */
+    brandTagline: string;
+    /** Target of the brand link (the icon, wordmark, rule and tagline). */
+    brandHref: string;
+    /** Product icon image URL, shown inside the brand link before the wordmark (40px; 32px and 28px on phones when `embedded`). Omitted when empty. */
+    icon: string;
+    /** Dark-theme variant of `icon`, shown on the site's dark theme (`:root.dark`) in place of it. Needs `icon`; without it `icon` shows on every theme. */
+    iconDark: string;
+    /** In-page section links. */
+    links: ProductNavLink[];
+    /** Label of the external button at the end of the bar. Shown only together with `href`. */
+    actionLabel: string;
+    /** Shorter button label for phones in `embedded` mode (e.g. `Open ↗`), so the links row keeps its room. Optional; the full `action-label` is used otherwise. */
+    actionShortLabel: string;
+    /** Target of the external button. It opens in the same tab. */
+    href: string;
+    /** Accessible name of the site-menu button, e.g. `Sankhyatronics menu`. Empty (default): no button. Clicking it dispatches `product-nav-site-menu`. */
+    siteMenuLabel: string;
+    /** True while the host header's site menu is open. Set by the header, never from outside: it drives the button's `aria-expanded`. */
+    siteMenuOpen: boolean;
+    /** Pins the bar to the top of the viewport (`position: sticky`). Ignored when `embedded`. */
+    sticky: boolean;
+    /** Accessible name of the `<nav>` landmark, e.g. `T-pilot`. Falls back to the brand prefix and name. */
+    label: string;
+    /** Fills the row of a host header (see the class docs): no bar background, rule, shadow or sticky positioning. */
+    embedded: boolean;
+    /** Marks the link for the section in view with `aria-current="location"` and an active style. */
+    scrollSpy: boolean;
+    /** The id of the section in view, from the IntersectionObserver. */
+    private activeId;
+    private observer?;
+    /** The sections the scroll spy measures (set while `scrollSpy` is on). */
+    private spyTargets;
+    private spyFrame;
+    /** Distance from the top of the viewport that counts as "passed", matching the 64px header row. */
+    private static readonly SPY_OFFSET;
+    /** Extra pixels past the offset line, so a section an anchor jump lands just under it (sub-pixel) still counts. */
+    private static readonly SPY_TOLERANCE;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** When the links row scrolls sideways (phones), keeps the current section's link in view. Only the
+     * row scrolls, never the page. */
+    private revealActiveLink;
+    /**
+     * Scroll spy: the section in view is the LAST one, in document order, whose top is at or above
+     * `SPY_OFFSET + SPY_TOLERANCE`. None above that line (above the first section) leaves no active id.
+     * At the bottom of the page the last section is active, even if its top never reaches the line.
+     */
+    private updateScrollSpy;
+    /** Scroll spy re-checks on every scroll frame: an IntersectionObserver alone misses a long section passing the line. */
+    private onSpyScroll;
+    private stopSpyScroll;
+    /** Watches the sections the `#anchor` links point at, so the link for the one in view is current. */
+    private observe;
+    /** The product icon: the light image, plus the dark one (theme-switched) when `iconDark` is set. Alt is empty: the link text names the product. */
+    private renderIcon;
+    /** The site-menu button, before the action pill. Only with `site-menu-label`. */
+    private renderSiteMenu;
+    /** Dispatches `product-nav-site-menu`, with the button as the detail's `trigger`, for the host header to open its site menu. */
+    private onSiteMenuClick;
+    render(): lit.TemplateResult<1>;
+}
+
+export { ProductNav, type ProductNavLink };

package/dist/product-nav/index.js

@@ -0,0 +1,11 @@
+import {
+  ProductNav
+} from "../chunk-OEOE6IFY.js";
+import "../chunk-T4BIN37Q.js";
+import "../chunk-WTD2YIAA.js";
+import "../chunk-NXUS2CH7.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  ProductNav
+};
+//# sourceMappingURL=index.js.map

package/dist/product-nav/index.js.map

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

package/dist/promo-banner/index.d.ts

@@ -2,23 +2,61 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 /**
- * Rounded call-to-action banner (title, subtitle, one outlined button) on a dark panel or a
- * background image. Port of `SankhyaUI`'s React `PromoBanner`; the button fires an `action` event
- * (detail `{ href }`, empty unless set) in place of `onAction`.
+ * Rounded call-to-action banner (title, subtitle, one or two outlined buttons) on a dark panel or a
+ * background image. A button with an `href` is a real link (`<a href>`): the browser follows it
+ * unless the `action` event is cancelled, so external URLs, `#anchors` and `/path?x=y` work without
+ * JavaScript. A button without an `href` is a `<button>`. `variant="accent"` fills the banner with
+ * the brand colour.
  *
+ * `cta-note` is a short line with a small padlock under the buttons (e.g. "No credit card needed"). In the
+ * inline layout it sits under the buttons in the right-hand group, left-aligned with the first button.
+ *
+ * `layout="inline"` sets the copy on the left and the buttons on the right of one row (wrapping on
+ * small screens), with 56px/48px padding (24px on phones). Its buttons are 52px pills; with
+ * `variant="accent"` the first is a white pill with navy text and the second a transparent pill with
+ * a light blue outline. `button-style="pill"` gives the buttons the same pill shape in the default
+ * `stack` layout, which is otherwise unchanged.
+ *
+ * @fires action - Cancelable, before following the link. Detail `{ href, kind? }`. `kind` is `secondary` for the second button only.
  * @cssprop --st-promo-banner-margin - Overrides the banner's margin.
  * @cssprop --st-promo-banner-padding - Overrides the banner's padding.
+ * @cssprop --st-promo-banner-cta-note-color - Colour of the `cta-note` line (default `currentColor` at 85%).
+ * @csspart action - The primary button (`<a>` with an `href`, `<button>` without).
+ * @csspart secondary-action - The second button.
+ * @csspart cta-note - The small line with a padlock under the buttons (`cta-note`).
  */
 declare class PromoBanner extends LitElement {
     static styles: lit.CSSResult;
     title: string;
     subtitle: string;
     actionLabel: string;
+    /** Shorter `action-label` for phones (< 480px); the full label stays the accessible name. */
+    actionLabelShort: string;
+    /** Shorter `secondary-action-label` for phones (< 480px). */
+    secondaryActionLabelShort: string;
+    /** Target of the first button. With a value the button is a link; the `action` event can cancel the navigation. */
     href: string;
     imageSrc: string;
+    /** Label of a second, outlined button next to the first. */
+    secondaryActionLabel: string;
+    /** Target of the second button, sent in the `action` event detail. */
+    secondaryHref: string;
+    /** `default` is the dark panel; `accent` fills the banner with the brand colour and makes the first button white. */
+    variant: 'default' | 'accent';
     inverted: boolean;
+    /** `stack` (default) centres the copy above the buttons; `inline` puts the buttons beside the copy. */
+    layout: 'stack' | 'inline';
+    /** `default` keeps the plain buttons; `pill` gives them the 52px pill shape (`inline` always uses pills). */
+    buttonStyle: 'default' | 'pill';
+    /** 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;
     protected willUpdate(): void;
-    private onAction;
+    /** Fires the cancelable `action` event; a cancelled click keeps the page where it is. */
+    private emitAction;
+    private renderCta;
+    private renderCopy;
     render(): lit.TemplateResult<1>;
 }
 

package/dist/promo-banner/index.js

@@ -1,8 +1,11 @@
 import {
   PromoBanner
-} from "../chunk-VWS53WY4.js";
-import "../chunk-FZ36KL73.js";
-import "../chunk-KMU6ABQF.js";
+} from "../chunk-EW2RK5Y6.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 {
   PromoBanner