rift-ds 1.15.0 → 1.16.0

package/README.md

@@ -13,7 +13,7 @@ An open source React design system built for AI products and coding agents: comp
 
 ## Why Rift DS
 
-- **<!-- component-count -->159<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. Every one forwards a ref and your own attributes to its element, state you can own works controlled or uncontrolled (a modal opens when your app says so, by design), and every word a component writes has a prop you can localise. The build checks the first two on every component, and the words wherever they sit in markup. React and React DOM are the only required peer dependencies.
+- **<!-- component-count -->162<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. Every one forwards a ref and your own attributes to its element, state you can own works controlled or uncontrolled (a modal opens when your app says so, by design), and every word a component writes has a prop you can localise. The build checks the first two on every component, and the words wherever they sit in markup. React and React DOM are the only required peer dependencies.
 - **AI patterns, the whole chat and templates, ready to use.** Composer, streaming chat thread, tool calls, reasoning and thread panel are in the box, the complete AI chat ships assembled as one widget that one command scaffolds, and the docs site has complete template screens built from them.
 - **Fully themeable.** The shipped themes are complete looks to start from, each in light and dark. One `data-brand` attribute applies a theme, and a few CSS overrides make your own.
 - **Ready for coding agents.** One command installs the agent skills, and a public MCP endpoint serves every component's props, so your agent builds with the library as it actually is. No key, no account.
@@ -107,13 +107,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->159<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->162<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bento tile · Bento tile art · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Command palette trigger · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Question card · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Table toolbar · Tabs · Tag input · Textarea · Theme picker · Theme toggle · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bento tile · Bento tile art · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Command palette trigger · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mega menu · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Progressive blur · Prompt suggestions · Prose · Question card · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Site header · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Table toolbar · Tabs · Tag input · Textarea · Theme picker · Theme toggle · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
 <!-- component-list:end -->
 
 </details>

package/components/Checkbox/Checkbox.css

@@ -28,8 +28,10 @@
   width: 24px;
   height: 24px;
   box-sizing: border-box;
-  border: var(--border-050) solid var(--color-input-border-primary);
-  border-radius: var(--radius-200); /* 8px */
+  border: var(--border-050) solid var(--color-input-indicator-border);
+  /* Always a rounded square, whatever the theme's radius: never sharp at a
+     zero radius, never rounding towards a radio's circle at a large one. */
+  border-radius: clamp(4px, var(--radius-200), 8px); /* ds-allow(spacing): the checkbox's shape is fixed, so its corner is bounded */
   background-color: var(--color-input-bg-primary);
   display: inline-flex;
   align-items: center;

package/components/Drawer/Drawer.d.ts

@@ -12,6 +12,12 @@ type DrawerOwnProps = {
     title: string;
     /** Optional subtitle under the title */
     description?: string;
+    /**
+     * Content shown in place of the title text, such as a site's logo. The
+     * `title` still names the dialog, read by assistive tech from a visually
+     * hidden heading.
+     */
+    heading?: React.ReactNode;
     /** Drawer body content */
     children?: React.ReactNode;
     /** Optional footer slot — typically a row of Buttons */

package/components/Drawer/Drawer.js

@@ -5,6 +5,7 @@ import { CircularButton } from "../CircularButton/CircularButton.js";
 import ReactDOM from "react-dom";
 import "./Drawer.css";
 import "../../behaviors/direction.css";
+import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 import { useMounted } from "../../behaviors/useMounted.js";
 import { useLayer } from "../../behaviors/useLayer.js";
@@ -16,6 +17,7 @@ const Drawer = React.forwardRef(
     onOpenChange,
     title,
     description,
+    heading,
     children,
     footer,
     side = "right",
@@ -65,7 +67,15 @@ const Drawer = React.forwardRef(
           children: [
             /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
               /* @__PURE__ */ jsxs("div", { className: `${baseClass}__heading`, children: [
-                /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title }),
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: heading ? "ds-visually-hidden" : `${baseClass}__title`,
+                    id: titleId,
+                    children: title
+                  }
+                ),
+                heading,
                 description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
               ] }),
               dismissible && /* @__PURE__ */ jsx(

package/components/MegaMenu/MegaMenu.css

@@ -0,0 +1,271 @@
+/* ============================================
+   MEGA MENU
+   A wide navigation panel: icon rows plus an
+   optional featured card
+   ============================================ */
+
+/* Base: the floating glass shell, CommandPalette's surface. The panel is a
+   shallow strip that lands on whatever the page opens with, display type
+   most of it, so its blur runs harder than the shell's 24px: at that
+   strength a heading that size still reads through the row labels. */
+.ds-mega-menu {
+  box-sizing: border-box;
+  padding: var(--padding-1000);
+  background-color: var(--color-bg-glass);
+  backdrop-filter: blur(32px);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-400);
+  box-shadow: var(--shadow-floating);
+  /* The showcase card's height floor is sized against this box. */
+  container: ds-mega-menu / inline-size;
+
+  /* Closed: faded out, then hidden once the fade has run, so a reopen
+     mid-fade picks up where it was. */
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--motion-duration-base) var(--motion-ease-standard),
+    visibility 0s linear var(--motion-duration-base);
+}
+
+/* States */
+.ds-mega-menu--open {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* Layout: the link grid alone, or the grid in two thirds beside the
+   showcase in one. */
+.ds-mega-menu__layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--gap-1000);
+}
+
+.ds-mega-menu__layout--showcase {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+}
+
+/* The link grid: four rows to a column, wrapping into further columns, so
+   a long menu grows sideways and never into a scroll. */
+.ds-mega-menu__grid {
+  display: grid;
+  grid-template-rows: repeat(4, auto);
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(0, 1fr);
+  gap: var(--gap-200) var(--gap-1000);
+  align-content: start;
+}
+
+/* Rows: the overlay row family. No fill at rest, the passive wash on hover
+   and focus at --radius-200, and the navigation current item one step past
+   it, so current and hovered never read the same. */
+.ds-mega-menu__item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gap-300);
+  min-width: 0;
+  padding: var(--padding-300) var(--padding-400);
+  border-radius: var(--radius-200);
+  color: inherit;
+  text-decoration: none;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-mega-menu__item:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-mega-menu__item:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-mega-menu__item--current {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* The icon tile: a step of container fill around the glyph, holding that
+   step over the row's hover wash. Its corner is the row's own radius, since
+   the tile sits at the row's start with no padding between them on that
+   axis that would ask for a smaller one. */
+.ds-mega-menu__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--icon-size-600) + var(--padding-200) * 2);
+  height: calc(var(--icon-size-600) + var(--padding-200) * 2);
+  border-radius: var(--radius-200);
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-primary);
+}
+
+/* The tile keeps a step of contrast when the row behind it fills in. The
+   hover wash already differs from the tile's resting fill; the current
+   row's wash is that same fill, so there the tile takes the other step. */
+.ds-mega-menu__item--current .ds-mega-menu__icon {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+.ds-mega-menu__icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+  line-height: 1;
+}
+
+.ds-mega-menu__logo {
+  display: block;
+  width: var(--icon-size-600);
+  height: var(--icon-size-600);
+  object-fit: contain;
+}
+
+.ds-mega-menu__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+.ds-mega-menu__label {
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  letter-spacing: var(--font-title-body-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* Rows stay even: a description is at most two lines. The full sentence
+   lives on the page the row links to. */
+.ds-mega-menu__description {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  color: var(--color-text-tertiary);
+}
+
+/* Showcase: the column carries the divider, the card fills it. */
+.ds-mega-menu__showcase-column {
+  display: flex;
+  padding-inline-start: var(--padding-1000);
+  border-inline-start: var(--border-025) solid var(--color-bg-container-border);
+}
+
+/* One link that is the whole card. The cover fills it and absorbs whatever
+   height the link grid runs to, so the columns always bottom-align; the
+   floor keeps a short grid's card at about 4:3 so the drawing has room
+   above the copy. */
+.ds-mega-menu__showcase {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 0;
+  min-height: 25cqw;
+  overflow: hidden;
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-300);
+  color: inherit;
+  text-decoration: none;
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-mega-menu__showcase:hover {
+  border-color: var(--color-bg-container-tertiary);
+}
+
+.ds-mega-menu__showcase:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 4px;
+}
+
+/* The cover's gentle zoom on hover is the card acknowledging the pointer,
+   clipped by the frame. */
+.ds-mega-menu__cover {
+  position: absolute;
+  inset: 0;
+  transition: scale var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-mega-menu__cover > * {
+  width: 100%;
+  height: 100%;
+}
+
+.ds-mega-menu__showcase:hover .ds-mega-menu__cover {
+  scale: 1.02;
+}
+
+/* The copy, kept legible on the drawing by a rise of page surface from the
+   card's foot. The tall top padding is the fade zone; the text never
+   reaches it. */
+.ds-mega-menu__showcase-text {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+  padding: var(--padding-1500) var(--padding-500) var(--padding-500);
+  /* ds-allow(color): the transparent end of the fade, not a palette colour */
+  background: linear-gradient(to top, var(--color-bg-page-primary) 55%, transparent);
+}
+
+.ds-mega-menu__overline {
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.ds-mega-menu__showcase-title {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+}
+
+.ds-mega-menu__arrow {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-action-passive-text);
+  transition: translate var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-mega-menu__showcase:hover .ds-mega-menu__arrow {
+  translate: calc(var(--gap-050) * var(--ds-inline-sign, 1)) 0;
+}
+
+/* Narrow: a panel without the room for two column groups stacks the
+   showcase under the grid and lets the grid run one column deep.
+   ds-allow(breakpoint): content-driven: two row columns and the showcase need about 720px of panel. */
+@container ds-mega-menu (max-width: 720px) {
+  .ds-mega-menu__layout--showcase {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .ds-mega-menu__grid {
+    grid-template-rows: none;
+    grid-auto-flow: row;
+  }
+
+  .ds-mega-menu__showcase-column {
+    padding-inline-start: 0;
+    border-inline-start: none;
+  }
+
+  /* Full width now, so the floor that kept a third-width card at 4:3
+     becomes a wide band with the same room above the copy. */
+  .ds-mega-menu__showcase {
+    min-height: 50cqw;
+  }
+}

package/components/MegaMenu/MegaMenu.d.ts

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
+/** One link row in a mega menu: a page and the line that says what is on it. */
+export interface MegaMenuItem {
+    /** Where the row links. */
+    href: string;
+    /** The page's name. */
+    label: string;
+    /** One line on what the page holds, clamped to two lines in the panel. */
+    description?: string;
+    /** A Material Symbols name drawn in the row's icon tile. */
+    icon?: string;
+    /** An image path drawn in the icon tile instead of `icon`, for a brand or product mark. */
+    logo?: string;
+}
+/** The featured card beside a mega menu's link grid: one link that is the whole card. */
+export interface MegaMenuShowcase {
+    /** Where the card links. */
+    href: string;
+    /** A short kicker above the title, set in the overline face. */
+    overline?: string;
+    /** The card's title, followed by a forward arrow. */
+    label: string;
+    /** One or two lines under the title. */
+    description?: string;
+    /**
+     * A drawing that fills the card behind the copy. Decorative: the title and
+     * description carry the meaning, so mark it `aria-hidden`.
+     */
+    cover?: React.ReactNode;
+}
+/** Props owned by MegaMenu itself — everything else falls through to the panel `<div>`. */
+type MegaMenuOwnProps = {
+    /**
+     * Whether the panel shows. Controlled by design: the host owns the
+     * triggers that open it, so it owns this state too. A closed panel fades
+     * out and is `inert`, so its links leave the tab order.
+     */
+    open: boolean;
+    /** The link rows, laid out four to a column and wrapping into further columns. */
+    items: MegaMenuItem[];
+    /** A featured card in its own column beside the link grid. */
+    showcase?: MegaMenuShowcase;
+    /**
+     * The path of the page being viewed. A row whose `href` is this path, or a
+     * parent of it, is marked as the current page.
+     */
+    currentHref?: string;
+    /** Called when any link in the panel is followed, so a host can close it. */
+    onNavigate?: () => void;
+    /**
+     * The component every link renders through, so a router's link (Next.js
+     * `Link`) navigates without a reload. The panel is server-renderable, so it
+     * cannot read a `LinkProvider`; a client host resolves one and passes it
+     * here. Defaults to `<a>`.
+     */
+    linkComponent?: LinkComponent;
+    /** Additional CSS classes on the panel. */
+    className?: string;
+};
+export interface MegaMenuProps extends MegaMenuOwnProps, Omit<React.ComponentPropsWithRef<'div'>, keyof MegaMenuOwnProps> {
+}
+/**
+ * A wide navigation panel: a grid of icon rows, each a page with a line of
+ * description, and an optional featured card in a column of its own. It is
+ * the panel only. The host places it (under a header bar, usually) and owns
+ * the triggers, the hover delay and the dismissal; SiteHeader is the
+ * reference host. The forwarded ref and any unrecognised props target the
+ * panel `<div>`.
+ */
+export declare function MegaMenu({ open, items, showcase, currentHref, onNavigate, linkComponent, className, ref, ...rest }: MegaMenuProps): React.JSX.Element;
+export {};

package/components/MegaMenu/MegaMenu.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { mirrorClass } from "../../behaviors/direction.js";
+import "./MegaMenu.css";
+import "../../fonts/material-symbols.css";
+import "../../behaviors/direction.css";
+const isCurrent = (href, currentHref) => currentHref != null && (currentHref === href || currentHref.startsWith(`${href}/`));
+function MegaMenu({
+  open,
+  items,
+  showcase,
+  currentHref,
+  onNavigate,
+  linkComponent,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const Link = linkComponent ?? "a";
+  const baseClass = "ds-mega-menu";
+  const classes = [baseClass, open && `${baseClass}--open`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { ...rest, ref, className: classes, inert: !open, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [`${baseClass}__layout`, showcase && `${baseClass}__layout--showcase`].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `${baseClass}__grid`, children: items.map((item) => {
+          const current = isCurrent(item.href, currentHref);
+          return /* @__PURE__ */ jsxs(
+            Link,
+            {
+              href: item.href,
+              className: [`${baseClass}__item`, current && `${baseClass}__item--current`].filter(Boolean).join(" "),
+              "aria-current": current ? "page" : void 0,
+              onClick: onNavigate,
+              children: [
+                (item.logo || item.icon) && /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: item.logo ? /* @__PURE__ */ jsx("img", { className: `${baseClass}__logo`, src: item.logo, alt: "" }) : /* @__PURE__ */ jsx("span", { className: `material-symbols-rounded ${mirrorClass(item.icon)}`, children: item.icon }) }),
+                /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: item.label }),
+                  item.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: item.description })
+                ] })
+              ]
+            },
+            item.href
+          );
+        }) }),
+        showcase && /* @__PURE__ */ jsx("div", { className: `${baseClass}__showcase-column`, children: /* @__PURE__ */ jsxs(Link, { href: showcase.href, className: `${baseClass}__showcase`, onClick: onNavigate, children: [
+          showcase.cover && /* @__PURE__ */ jsx("span", { className: `${baseClass}__cover`, children: showcase.cover }),
+          /* @__PURE__ */ jsxs("span", { className: `${baseClass}__showcase-text`, children: [
+            showcase.overline && /* @__PURE__ */ jsx("span", { className: `${baseClass}__overline`, children: showcase.overline }),
+            /* @__PURE__ */ jsxs("span", { className: `${baseClass}__label ${baseClass}__showcase-title`, children: [
+              showcase.label,
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `material-symbols-rounded ds-mirror-rtl ${baseClass}__arrow`,
+                  "aria-hidden": "true",
+                  children: "arrow_forward"
+                }
+              )
+            ] }),
+            showcase.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__description`, children: showcase.description })
+          ] })
+        ] }) })
+      ]
+    }
+  ) });
+}
+export {
+  MegaMenu
+};

package/components/Nav/Nav.d.ts

@@ -16,12 +16,17 @@ type NavOwnProps = {
 export interface NavProps extends NavOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof NavOwnProps> {
 }
 /**
- * Nav component from Figma design system
- * Renders a horizontal navigation bar using ButtonGroup.
+ * Nav is the earlier plain top bar: a brand slot and a horizontal
+ * ButtonGroup of page links, with no menus and no mobile behaviour of its
+ * own. It keeps working for existing consumers, and new work uses
+ * SiteHeader, which adds section mega menus, the sticky progressive blur and
+ * the fold to a drawer.
  *
  * The landmark is labelled "Main" by default so assistive tech can tell it
  * apart from any other navigation on the page; pass `aria-label` to name it
  * differently. The forwarded ref and any unrecognised props target the `<nav>`.
+ *
+ * @deprecated Use `SiteHeader` instead.
  */
 export declare const Nav: React.ForwardRefExoticComponent<NavProps & React.RefAttributes<HTMLElement>>;
 export {};

package/components/ProgressiveBlur/ProgressiveBlur.css

@@ -0,0 +1,102 @@
+/* ============================================
+   PROGRESSIVE BLUR
+   A backdrop blur that dissolves along one edge
+   ============================================ */
+
+/* Why a stack, and why masks: a single backdrop-filter is uniform across its
+   whole box, so a tint that fades to transparent still ends in a hard line
+   where the blur stops. A mask-image multiplies both the layer's paint and
+   its filtered backdrop by its alpha, so the blur itself dissolves. Four
+   layers with rising blur strength and a shrinking mask band give a
+   progressive blur: frosted at the anchored edge, clear at the far one.
+
+   The blur sits on child layers, never on the root: a backdrop-filter on an
+   ancestor would make it a backdrop root, and any glass inside the host
+   (a menu panel, say) would then sample only that subtree instead of the
+   page. So the host keeps its own children above this element, and the
+   blur reads the page behind both.
+
+   No hand-written -webkit- twins for backdrop-filter: the build's CSS
+   pipeline adds the prefix, and a manual one beside it has made the
+   pipeline drop the property entirely. */
+
+/* Base */
+.ds-progressive-blur {
+  /* The tint's colour. An override hook: a host over a different surface
+     points it at that surface. */
+  --ds-progressive-blur-tint: var(--color-bg-page-primary);
+  position: absolute;
+  inset: 0;
+  /* A child's backdrop-filter is not reliably clipped by a rounded
+     overflow: hidden parent, so the frost would show square at the host's
+     corners. The root and every layer take the host's corner instead. */
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.ds-progressive-blur--top {
+  --ds-progressive-blur-toward: to bottom;
+}
+
+.ds-progressive-blur--bottom {
+  --ds-progressive-blur-toward: to top;
+}
+
+.ds-progressive-blur__layer {
+  position: absolute;
+  inset: 0;
+  display: block;
+  border-radius: inherit;
+}
+
+/* Layers: blur strength rises as the masked band shrinks, so the edge is
+   fully frosted and the far side is sharp. The radii are the effect's own
+   tuning, not a scale: a blur radius is not spacing. */
+
+/* ds-allow(color): mask alpha keywords (black/transparent), not palette colours */
+
+.ds-progressive-blur__layer:nth-child(1) {
+  backdrop-filter: blur(2px);
+  mask-image: linear-gradient(var(--ds-progressive-blur-toward), black 0%, black 55%, transparent 100%);
+}
+
+.ds-progressive-blur__layer:nth-child(2) {
+  backdrop-filter: blur(6px);
+  mask-image: linear-gradient(var(--ds-progressive-blur-toward), black 0%, black 40%, transparent 80%);
+}
+
+.ds-progressive-blur__layer:nth-child(3) {
+  backdrop-filter: blur(12px);
+  mask-image: linear-gradient(var(--ds-progressive-blur-toward), black 0%, black 25%, transparent 60%);
+}
+
+.ds-progressive-blur__layer:nth-child(4) {
+  backdrop-filter: blur(24px);
+  mask-image: linear-gradient(var(--ds-progressive-blur-toward), black 0%, black 10%, transparent 40%);
+}
+
+/* Tint: the page surface at the edge stepping to transparent, on its own
+   layer above the blur. Only this layer ever fades: transitioning opacity
+   on a backdrop-filter makes the browser re-rasterise the blur, which then
+   snaps in at the end of the fade, while a plain gradient fades smoothly. */
+.ds-progressive-blur::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: linear-gradient(
+    var(--ds-progressive-blur-toward),
+    var(--ds-progressive-blur-tint) 0%,
+    color-mix(in srgb, var(--ds-progressive-blur-tint) 90%, transparent) 30%,
+    color-mix(in srgb, var(--ds-progressive-blur-tint) 40%, transparent) 65%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(var(--ds-progressive-blur-toward), black 0%, black 55%, transparent 100%);
+  opacity: 0;
+  transition: opacity var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+/* States */
+.ds-progressive-blur--tinted::after {
+  opacity: 1;
+}

package/components/ProgressiveBlur/ProgressiveBlur.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+/** Props owned by ProgressiveBlur itself — everything else falls through to the root `<div>`. */
+type ProgressiveBlurOwnProps = {
+    /**
+     * The side the blur is anchored to, as Drawer names its edge: fully
+     * frosted there, dissolving to clear toward the opposite side. `top` sits
+     * behind a header, `bottom` behind a toolbar or a footer bar.
+     */
+    side?: 'top' | 'bottom';
+    /**
+     * Whether the page-surface tint shows over the blur. It fades on change,
+     * so a header can bring it in once the page has scrolled; the blur
+     * itself never fades.
+     */
+    tinted?: boolean;
+    /** Additional CSS classes on the root. */
+    className?: string;
+};
+export interface ProgressiveBlurProps extends ProgressiveBlurOwnProps, Omit<React.ComponentPropsWithRef<'div'>, keyof ProgressiveBlurOwnProps> {
+}
+/**
+ * A backdrop blur that dissolves along one edge instead of ending in a hard
+ * line: four masked blur layers of rising strength, with an optional tint of
+ * the page surface on its own layer above them. It fills its positioned
+ * parent and is decorative, so it is hidden from assistive tech and lets the
+ * pointer through. The forwarded ref and any unrecognised props target the
+ * root `<div>`.
+ */
+export declare function ProgressiveBlur({ side, tinted, className, ref, ...rest }: ProgressiveBlurProps): React.JSX.Element;
+export {};