rift-ds 1.15.0 → 1.17.0

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 {};

package/components/ProgressiveBlur/ProgressiveBlur.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import "./ProgressiveBlur.css";
+function ProgressiveBlur({
+  side = "top",
+  tinted = false,
+  className = "",
+  ref,
+  ...rest
+}) {
+  const baseClass = "ds-progressive-blur";
+  const classes = [
+    baseClass,
+    `${baseClass}--${side}`,
+    tinted && `${baseClass}--tinted`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", ...rest, ref, className: classes, children: [
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__layer` }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__layer` }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__layer` }),
+    /* @__PURE__ */ jsx("span", { className: `${baseClass}__layer` })
+  ] });
+}
+export {
+  ProgressiveBlur
+};

package/components/PromptSuggestions/PromptSuggestions.css

@@ -508,7 +508,7 @@
 .ds-prompt-suggestions--kept .ds-prompt-suggestions__tile,
 .ds-prompt-suggestions--kept .ds-prompt-suggestions__card {
   border-style: dashed;
-  border-color: var(--color-text-tertiary);
+  border-color: var(--color-bg-container-border);
   /* A record carries no fill, like QuestionCard's rows once answered: the
      outline alone says which way the conversation went. */
   background-color: transparent;

package/components/QuestionCard/QuestionCard.css

@@ -113,7 +113,8 @@
   }
 }
 
-/* An open row is drawn dashed: an answer on offer, not yet given. A pick
+/* An open row is drawn dashed, in the suggestion chip's hairline colour:
+   an answer on offer, not yet given. A pick
    turns it solid, in the strongest ink, with the control's indicator on at
    its end, so a chosen row reads as decided at a glance and stays readable
    after the moment has passed. The row is a control, so it sits on Input's
@@ -128,7 +129,7 @@
   min-width: 0;
   margin: 0;
   padding: var(--padding-300) var(--padding-400);
-  border: var(--border-025) dashed var(--color-text-tertiary);
+  border: var(--border-025) dashed var(--color-bg-container-border);
   border-radius: var(--radius-300);
   background-color: var(--color-input-bg-primary);
   color: var(--color-text-primary);

package/components/QuestionCard/QuestionCard.js

@@ -92,14 +92,8 @@ const QuestionCard = React.forwardRef(
         return;
       }
       const next = { values: [option.value], other: "", otherOpen: false };
-      if (!isSet) {
-        writeDraft(current, next);
-        submit({ ...drafts, [current.id]: next });
-      } else if (step < questions.length - 1) {
-        advance(next);
-      } else {
-        writeDraft(current, next);
-      }
+      writeDraft(current, next);
+      if (!isSet) submit({ ...drafts, [current.id]: next });
     };
     const openOther = () => {
       if (!live) return;