rift-ds 1.15.0 → 1.16.0

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;

package/components/RadioButton/RadioButton.css

@@ -26,8 +26,10 @@
   width: 24px;
   height: 24px;
   box-sizing: border-box;
-  border: var(--border-050) solid var(--color-input-border-primary);
-  border-radius: var(--radius-pill); /* 999px — perfect circle */
+  border: var(--border-050) solid var(--color-input-indicator-border);
+  /* Always a circle, whatever the theme's radius: a radio's shape is its
+     meaning, so it never follows --radius-pill into a square. */
+  border-radius: 50%;
   background-color: var(--color-input-bg-primary);
   display: inline-flex;
   align-items: center;
@@ -43,7 +45,7 @@
 .ds-radio__dot {
   width: 12px;
   height: 12px;
-  border-radius: var(--radius-pill);
+  border-radius: 50%;
   background-color: var(--color-action-primary-bg);
   transform: scale(0);
   transition: transform var(--motion-duration-base) var(--motion-ease-standard);

package/components/SiteHeader/SiteHeader.css

@@ -0,0 +1,305 @@
+/* ============================================
+   SITE HEADER
+   The site's top bar: brand, section pills with
+   mega menus, actions, and a drawer once folded
+   ============================================ */
+
+/* Base */
+.ds-site-header {
+  /* The bar's height. An override hook: the blur's reach and a page's own
+     anchor offsets read it. */
+  --ds-site-header-height: calc(var(--control-height-default) + var(--padding-1000));
+  /* How far the blur dissolves below the bar. */
+  --ds-site-header-blur-reach: var(--gap-1500);
+  position: relative;
+  /* Lifts the open panel over the page's flow when the header is not sticky. */
+  z-index: 1;
+  width: 100%;
+}
+
+/* Sticky: rides up with whatever sits above it, then holds at the top. */
+.ds-site-header--sticky {
+  position: sticky;
+  top: 0;
+  z-index: var(--layer-sticky);
+}
+
+/* The blur stack, viewport-fixed (a sticky box is not a containing block
+   for it) so it spans the full width whatever the host's gutters. It sits
+   inside the header's stacking context, behind the bar's controls. Never a
+   filter on the header itself: that would make the header a backdrop root
+   and the mega menu's own glass would sample only the header's subtree. */
+.ds-site-header__blur.ds-progressive-blur {
+  position: fixed;
+  inset: 0 0 auto;
+  height: calc(var(--ds-site-header-height) + var(--ds-site-header-blur-reach));
+  z-index: -1;
+}
+
+/* The bar: brand, pills, then the end cluster pushed to the far side. */
+.ds-site-header__bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-400);
+  height: var(--ds-site-header-height);
+  box-sizing: border-box;
+  /* The folded bar keeps its pills out of flow at full width so they stay
+     measurable; clipping the inline axis keeps them from widening the page
+     into a sideways scroll. The margin leaves room for a focus ring at the
+     bar's edge, and the block axis stays open for the menu panel. */
+  overflow-x: clip;
+  overflow-clip-margin: var(--gap-200);
+}
+
+.ds-site-header__brand {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* The pills sit beside the brand rather than centred on the page:
+   --gap-1000 from the brand (the bar's own gap plus this margin), and the
+   first pill's inline padding sets the rest of the visual gap. */
+.ds-site-header__nav {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  margin-inline-start: calc(var(--gap-1000) - var(--gap-400));
+  flex-shrink: 0;
+}
+
+.ds-site-header__end {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-400);
+  margin-inline-start: auto;
+  flex-shrink: 0;
+}
+
+.ds-site-header__actions,
+.ds-site-header__wide-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-400);
+  flex-shrink: 0;
+}
+
+.ds-site-header__section {
+  position: relative;
+}
+
+/* Pills: a pill-radius link at the compact control height, so a caret's
+   icon box never makes one pill taller than its neighbours. */
+.ds-site-header__pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-050);
+  height: var(--control-height-compact);
+  box-sizing: border-box;
+  padding-inline: var(--padding-400);
+  border-radius: var(--radius-pill);
+  background-color: transparent;
+  color: var(--color-text-primary);
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* Hover is the tertiary family's wash, as on a tertiary Button, a NavList
+   row and the MegaMenu's rows: a container fill can match the page floor
+   in a light theme and vanish. */
+.ds-site-header__pill:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-site-header__pill:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* An open menu holds the hover fill and nothing more: opening a menu is
+   not a selection. Declared before --current so the current section keeps
+   its colour while its menu is open. */
+.ds-site-header__pill--open {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+/* The current section is the selected item of an exclusive set, so it
+   takes the action selection pair, SegmentedControl's active segment; a
+   neutral fill would read as the hover state over the glassy blur. */
+.ds-site-header__pill--current {
+  background-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-site-header__pill--current:hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-site-header__caret {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-text-secondary);
+  transition: rotate var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-site-header__pill--current .ds-site-header__caret {
+  color: inherit;
+}
+
+.ds-site-header__pill--open .ds-site-header__caret {
+  rotate: 180deg;
+}
+
+/* The menu button only exists once the bar folds. */
+.ds-site-header__menu-button {
+  display: none;
+}
+
+/* While the drawer is open its close button stands in this exact spot, on
+   the top layer; the button underneath would only show through the scrim. */
+.ds-site-header__menu-button--hidden {
+  visibility: hidden;
+}
+
+/* The mega menu hangs under the bar across its full width. It is not
+   anchored to a control (useAnchoredPosition's job): it belongs to the bar
+   and spans it, so it rides the bar's own box.
+   The wrapper keeps the height of the last section shown after the menu
+   closes, so it never takes a press itself: a transparent box that size
+   would sit over the page and swallow its clicks. Only the menu does, and a
+   closed menu is hidden, which takes it out of hit testing too. */
+.ds-site-header__panel {
+  position: absolute;
+  inset-block-start: calc(100% + var(--gap-200));
+  inset-inline: 0;
+  pointer-events: none;
+}
+
+.ds-site-header__panel > .ds-mega-menu {
+  pointer-events: auto;
+}
+
+/* Folded: the pills and the wide actions leave the row but stay measurable
+   (hidden, out of flow, inert), and the menu button takes their place. */
+.ds-site-header--folded .ds-site-header__nav,
+.ds-site-header--folded .ds-site-header__wide-actions {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ds-site-header--folded .ds-site-header__menu-button {
+  display: inline-flex;
+}
+
+.ds-site-header--folded .ds-site-header__panel {
+  display: none;
+}
+
+/* Before the bar has measured itself (the first frame, which a
+   server-rendered page shows before its script runs), it folds by CSS below
+   the `initialFold` step, so a phone never sees the pills spill past the
+   actions. The first measurement replaces this in the same commit as
+   hydration. */
+@media (max-width: 959px) {
+  .ds-site-header--prefold-tablet .ds-site-header__nav,
+  .ds-site-header--prefold-tablet .ds-site-header__wide-actions {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .ds-site-header--prefold-tablet .ds-site-header__menu-button {
+    display: inline-flex;
+  }
+}
+
+@media (max-width: 1279px) {
+  .ds-site-header--prefold-mid .ds-site-header__nav,
+  .ds-site-header--prefold-mid .ds-site-header__wide-actions {
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .ds-site-header--prefold-mid .ds-site-header__menu-button {
+    display: inline-flex;
+  }
+}
+
+/* The drawer: its brand row lands on the bar's own brand. SiteHeader
+   measures the bar as the drawer opens (its top, which is 0 once stuck and
+   the host's gutter at rest, and its inline start) and the panel takes
+   those as its padding, with the header row the bar's height, so the
+   panel slides in under a brand that does not move. */
+.ds-site-header__drawer .ds-drawer__panel {
+  width: min(320px, 80vw);
+  padding-block-start: var(--ds-site-header-drawer-top, var(--padding-500));
+  padding-inline-start: var(--ds-site-header-drawer-start, var(--padding-500));
+  /* The floating glass the command palette wears, so the page reaches
+     through the menu frosted rather than behind an opaque sheet. The
+     panel lets its close button out (below); its body still scrolls. */
+  background-color: var(--color-bg-glass);
+  backdrop-filter: blur(24px);
+  overflow: visible;
+}
+
+/* The drawer's close button swaps with the menu button: it sits on the
+   scrim exactly where the menu button was (measured as the drawer opens),
+   and fades in once the panel has slid home, so the X never travels with
+   it. It stays the drawer's own button, inside its focus trap. */
+.ds-site-header__drawer .ds-drawer__close {
+  position: absolute;
+  inset-block-start: var(--ds-site-header-close-top, var(--padding-500));
+  inset-inline-start: var(--ds-site-header-close-start, auto);
+  width: var(--control-height-default);
+  height: var(--control-height-default);
+  /* ds-allow(color): on-scrim furniture, as Lightbox's: the scrim is dark in both themes, so the glyph is white in both. */
+  color: #ffffff;
+  opacity: 0;
+  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+/* The glyph at the menu button's own size, so the swap reads as one icon
+   turning into another. */
+.ds-site-header__drawer .ds-drawer__close .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-site-header__drawer .ds-drawer__panel[data-state="open"] .ds-drawer__close {
+  opacity: 1;
+  transition-delay: var(--motion-duration-slow);
+}
+
+.ds-site-header__drawer .ds-drawer__close:hover {
+  /* ds-allow(color): the hover wash on the always-dark scrim, as Lightbox's controls. */
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+/* The footer row starts under the brand, not at the panel's far edge. */
+.ds-site-header__drawer .ds-drawer__footer {
+  justify-content: flex-start;
+}
+
+.ds-site-header__drawer .ds-drawer__header {
+  align-items: center;
+  height: var(--ds-site-header-height, auto);
+}
+
+.ds-site-header__drawer-brand {
+  display: flex;
+  align-items: center;
+}
+
+.ds-site-header__drawer .ds-nav-list {
+  width: 100%;
+}

package/components/SiteHeader/SiteHeader.d.ts

@@ -0,0 +1,117 @@
+import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
+import { MegaMenuItem, MegaMenuShowcase } from '../MegaMenu/MegaMenu';
+/** One top-level section of the site: a pill in the bar, a row in the drawer. */
+export interface SiteHeaderSection {
+    /** A stable key for the section. */
+    id: string;
+    /** The pill's text. */
+    label: string;
+    /** The section's landing page: where a click on the pill goes. */
+    href: string;
+    /**
+     * A mega menu for the section. Hovering or focusing the pill opens it; its
+     * items are also the section's sub-list in the drawer.
+     */
+    mega?: {
+        /** The panel's link rows. */
+        items: MegaMenuItem[];
+        /** A featured card beside the rows. */
+        showcase?: MegaMenuShowcase;
+    };
+    /**
+     * The section's sub-list in the drawer, when it should differ from its
+     * menu's items: a page that needs a wide screen, say, left out of the
+     * drawer that only narrow screens see. Defaults to the menu's items.
+     */
+    drawerItems?: {
+        href: string;
+        label: string;
+    }[];
+    /**
+     * Marks the section as the one being viewed. Left unset, the header works
+     * it out from `currentHref`: the section's own page, a page under it, or
+     * any page its menu lists.
+     */
+    current?: boolean;
+}
+/** Props owned by SiteHeader itself — everything else falls through to the `<header>`. */
+type SiteHeaderOwnProps = {
+    /**
+     * The brand at the bar's start, usually a logo linking home. Rendered as
+     * given, so it carries its own link.
+     */
+    brand?: React.ReactNode;
+    /** The site's top-level sections, in order. */
+    sections: SiteHeaderSection[];
+    /** The path of the page being viewed, used to mark the current section, row and drawer item. */
+    currentHref?: string;
+    /** Controls at the bar's end that stay at every width, such as a search button. */
+    actions?: React.ReactNode;
+    /**
+     * Controls at the bar's end that show only while the pills fit, such as a
+     * theme toggle. Once the bar folds to its menu button they leave it; put
+     * their drawer twin in `drawerFooter`.
+     */
+    wideActions?: React.ReactNode;
+    /** Content for the drawer's footer, such as the controls `wideActions` holds in the bar. */
+    drawerFooter?: React.ReactNode;
+    /** Whether the folded bar's drawer is open, for a host that owns that state. Pair with `onDrawerOpenChange`. */
+    drawerOpen?: boolean;
+    /** Whether the drawer starts open, when the header owns its state. */
+    defaultDrawerOpen?: boolean;
+    /** Called when the drawer opens or closes, controlled or not. */
+    onDrawerOpenChange?: (open: boolean) => void;
+    /**
+     * Where the bar folds before it has measured itself: on the first frame,
+     * which a server-rendered page shows before its script runs. Below this
+     * breakpoint (`tablet` or the wider `mid`) the bar starts folded by CSS
+     * alone, so a phone never sees the pills overflow; the measurement takes
+     * over once the script runs. Pick the step nearest where the pills stop
+     * fitting, or `never` for a bar that fits at every width.
+     */
+    initialFold?: 'tablet' | 'mid' | 'never';
+    /**
+     * Whether the header sticks to the top of the viewport over a progressive
+     * blur. Off, it scrolls away with the page and draws no blur.
+     */
+    sticky?: boolean;
+    /**
+     * How far, in pixels, the page scrolls before the page-surface tint fades
+     * in over the sticky header's blur.
+     */
+    tintAfter?: number;
+    /**
+     * The component every link renders through, so a router's link (Next.js
+     * `Link`) navigates without a reload. Falls back to the nearest
+     * `LinkProvider`, then `<a>`.
+     */
+    linkComponent?: LinkComponent;
+    /** The accessible name of the section links' `<nav>` landmark. */
+    navLabel?: string;
+    /** The accessible name of the menu button that opens the drawer. */
+    drawerOpenLabel?: string;
+    /**
+     * The drawer's title, naming the dialog. Shown at its top when there is no
+     * `brand`; with one, the brand takes its place and the title is read only
+     * by assistive tech.
+     */
+    drawerTitle?: string;
+    /** The accessible name of the drawer's close button. */
+    drawerCloseLabel?: string;
+    /** Additional CSS classes on the `<header>`. */
+    className?: string;
+};
+export interface SiteHeaderProps extends SiteHeaderOwnProps, Omit<React.ComponentPropsWithRef<'header'>, keyof SiteHeaderOwnProps> {
+}
+/**
+ * A site's top bar: the brand, a pill per section with a mega menu on any
+ * section that has one, and actions at the end, sticking to the viewport
+ * over a progressive blur whose tint arrives once the page scrolls. When
+ * the pills no longer fit, measured on the bar's own width rather than the
+ * viewport's, the bar folds to a menu button that opens a drawer of the
+ * same sections. The forwarded ref and any unrecognised props target the
+ * `<header>`.
+ */
+export declare function SiteHeader({ brand, sections, currentHref, actions, wideActions, drawerFooter, drawerOpen: drawerOpenProp, defaultDrawerOpen, onDrawerOpenChange, initialFold, sticky, tintAfter, linkComponent, navLabel, drawerOpenLabel, drawerTitle, drawerCloseLabel, className, ref, ...rest }: SiteHeaderProps): React.JSX.Element;
+export {};