rift-ds 1.11.0 → 1.13.0

package/components/BottomNav/BottomNav.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import "./BottomNav.css";
+import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 const defaultBadgeLabel = (badge) => badge === true ? ", new" : `, ${badge} new`;
 const BottomNav = React.forwardRef(
@@ -17,9 +19,11 @@ const BottomNav = React.forwardRef(
     badgeLabel = defaultBadgeLabel,
     className = "",
     style,
+    linkComponent,
     ...rest
   }, ref) => {
     const baseClass = "ds-bottom-nav";
+    const Link = useLinkComponent(linkComponent);
     const isIos = platform === "ios";
     const destinations = search && !isIos ? [...items, { key: "__search", label: search.label, icon: search.icon ?? "search", href: search.href, onClick: search.onClick }] : items;
     const activeIndex = destinations.findIndex((item) => item.key === activeKey);
@@ -57,7 +61,7 @@ const BottomNav = React.forwardRef(
               renderBadge(item.badge)
             ] }),
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: item.label }),
-            badgeText && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: badgeText })
+            badgeText && /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: badgeText })
           ] });
           const handleClick = () => {
             item.onClick?.();
@@ -69,7 +73,7 @@ const BottomNav = React.forwardRef(
               className: `${baseClass}__slot`,
               inert: isMinimized && !isActive,
               children: item.href ? /* @__PURE__ */ jsx(
-                "a",
+                Link,
                 {
                   className: itemClasses,
                   href: item.href,
@@ -92,7 +96,7 @@ const BottomNav = React.forwardRef(
           );
         }) })
       ] }),
-      isIos && search && (search.href ? /* @__PURE__ */ jsx("a", { className: `${baseClass}__search`, href: search.href, onClick: search.onClick, "aria-label": search.label, children: renderIcon(search.icon ?? "search") }) : /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__search`, onClick: search.onClick, "aria-label": search.label, children: renderIcon(search.icon ?? "search") }))
+      isIos && search && (search.href ? /* @__PURE__ */ jsx(Link, { className: `${baseClass}__search`, href: search.href, onClick: search.onClick, "aria-label": search.label, children: renderIcon(search.icon ?? "search") }) : /* @__PURE__ */ jsx("button", { type: "button", className: `${baseClass}__search`, onClick: search.onClick, "aria-label": search.label, children: renderIcon(search.icon ?? "search") }))
     ] });
   }
 );

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 export interface BreadcrumbItem {
     /** Display label */
     label: string;
@@ -19,6 +20,13 @@ type BreadcrumbOwnProps = {
      * @deprecated Pass the native `aria-label` attribute instead.
      */
     ariaLabel?: string;
+    /**
+     * The component its links render with, such as Next.js's `Link`, so they
+     * navigate through the app's router; a plain `<a>` when unset. This
+     * component can render on the server, so it never reads a LinkProvider:
+     * pass the prop even under one.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface BreadcrumbProps extends BreadcrumbOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof BreadcrumbOwnProps | 'children'> {
 }

package/components/Breadcrumb/Breadcrumb.js

@@ -3,8 +3,9 @@ import React from "react";
 import "./Breadcrumb.css";
 import "../../fonts/material-symbols.css";
 const Breadcrumb = React.forwardRef(
-  ({ items, maxItems, className = "", ariaLabel, ...rest }, ref) => {
+  ({ items, maxItems, className = "", ariaLabel, linkComponent, ...rest }, ref) => {
     const baseClass = "ds-breadcrumb";
+    const Link = linkComponent ?? "a";
     const classes = [baseClass, className].filter(Boolean).join(" ");
     const shouldCollapse = maxItems !== void 0 && maxItems >= 2 && items.length > maxItems;
     let visibleItems;
@@ -28,7 +29,7 @@ const Breadcrumb = React.forwardRef(
       }
       return /* @__PURE__ */ jsxs("li", { className: `${baseClass}__item`, children: [
         index > 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__separator material-symbols-rounded`, "aria-hidden": "true", children: "chevron_right" }),
-        isLast || !item.href ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__current`, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx("a", { href: item.href, className: `${baseClass}__link`, children: item.label })
+        isLast || !item.href ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__current`, "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx(Link, { href: item.href, className: `${baseClass}__link`, children: item.label })
       ] }, index);
     }) }) });
   }

package/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by Button itself — everything else falls through to the DOM node. */
 type ButtonOwnProps = {
     /** Button text content */
@@ -39,6 +40,12 @@ type ButtonOwnProps = {
     target?: string;
     /** Optional rel attribute for links */
     rel?: string;
+    /**
+     * The component the link renders with, such as Next.js's `Link`, so it
+     * navigates through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
     /** Marks this link as the current page (adds aria-current="page") */
     ariaCurrent?: boolean;
     /** Additional CSS classes */

package/components/Button/Button.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Spinner } from "../Spinner/Spinner.js";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import "./Button.css";
 import "../../fonts/material-symbols.css";
 const LEGACY_VARIANTS = {
@@ -33,6 +34,7 @@ const Button = React.forwardRef(
     href,
     target,
     rel,
+    linkComponent,
     ariaCurrent,
     className = "",
     priority,
@@ -42,6 +44,7 @@ const Button = React.forwardRef(
     ...rest
   }, ref) => {
     const baseClass = "ds-button";
+    const Link = useLinkComponent(linkComponent);
     const resolvedVariant = resolveButtonCell(variant ?? priority ?? "primary", tone);
     const isDisabled = disabled ?? state === "disabled";
     const resolvedState = state ?? (isDisabled ? "disabled" : "default");
@@ -73,7 +76,7 @@ const Button = React.forwardRef(
     ] });
     if (href && !isDisabled && !isLoading) {
       return /* @__PURE__ */ jsx(
-        "a",
+        Link,
         {
           ...rest,
           ref,

package/components/Card/Card.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by Card itself — everything else falls through to the DOM node. */
 type CardOwnProps = {
     /** Card variant */
@@ -34,6 +35,12 @@ type CardOwnProps = {
     dek?: string;
     /** Render as a disabled placeholder (no href, dimmed, not interactive) */
     placeholder?: boolean;
+    /**
+     * The component the link renders with, such as Next.js's `Link`, so it
+     * navigates through the app's router. Wins over a LinkProvider's; a plain
+     * `<a>` when neither is set.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface CardProps extends CardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CardOwnProps> {
 }

package/components/Card/Card.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React from "react";
+import { useLinkComponent } from "../../behaviors/LinkProvider.js";
 import "./Card.css";
 import "../../fonts/material-symbols.css";
 const Card = React.forwardRef(
@@ -20,8 +21,10 @@ const Card = React.forwardRef(
     companyName,
     dek,
     placeholder = false,
+    linkComponent,
     ...rest
   }, ref) => {
+    const Link = useLinkComponent(linkComponent);
     if (variant === "case-study") {
       const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-wrap", children: cover ? /* @__PURE__ */ jsx("div", { className: "ds-card--case-study__cover-slot", children: cover }) : coverSrc ? /* @__PURE__ */ jsx(
@@ -67,7 +70,7 @@ const Card = React.forwardRef(
         );
       }
       return /* @__PURE__ */ jsx(
-        "a",
+        Link,
         {
           ...rest,
           ref,

package/components/CardStack/CardStack.css

@@ -93,14 +93,3 @@
 
 /* Screen-reader announcement of the deck position. */
 
-.ds-card-stack__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/components/CardStack/CardStack.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback } from "react";
 import "./CardStack.css";
+import "../../behaviors/visually-hidden.css";
 const INTERACTIVE_SELECTOR = 'a, button, input, select, textarea, summary, [role="button"], [role="link"], [tabindex]';
 const NEXT_KEYS = /* @__PURE__ */ new Set(["ArrowRight", "ArrowDown", " ", "Enter"]);
 const PREV_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
@@ -124,7 +125,7 @@ const CardStack = React.forwardRef(
               k
             );
           }),
-          count > 1 && /* @__PURE__ */ jsx("div", { className: `${baseClass}__sr-only`, role: "status", children: positionLabel(index + 1, count) })
+          count > 1 && /* @__PURE__ */ jsx("div", { className: "ds-visually-hidden", role: "status", children: positionLabel(index + 1, count) })
         ]
       }
     );

package/components/ChatMessage/ChatMessage.css

@@ -321,18 +321,6 @@
    The pending label is for screen readers only.
    ============================================ */
 
-.ds-chat-message__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* ============================================
    REDUCED MOTION
    The global guard collapses the loop to its

package/components/ChatMessage/ChatMessage.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import "./ChatMessage.css";
+import "../../behaviors/visually-hidden.css";
 const ChatMessage = React.forwardRef(
   ({
     role = "assistant",
@@ -55,7 +56,7 @@ const ChatMessage = React.forwardRef(
         ] }),
         attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
         showContent && /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children: pending ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__pending`, role: "status", children: [
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: pendingLabel }),
+          /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: pendingLabel }),
           /* @__PURE__ */ jsxs("span", { className: `${baseClass}__dots`, "aria-hidden": "true", children: [
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__dot` }),

package/components/Checkbox/Checkbox.css

@@ -1,6 +1,14 @@
 /* ============================================
    CHECKBOX COMPONENT
-   Custom checkbox with check / indeterminate icon
+   Custom checkbox with check / indeterminate icon.
+   The box is CheckboxIndicator, a presentational
+   piece every host that offers a checkbox draws
+   (Checkbox itself, SelectionCard, QuestionCard,
+   FilterBar's multi-select rows): its state is
+   keyed on the box's own modifiers, so a host
+   needs no classes of its own to show it, and a
+   host that carries the ds-control-host class
+   lights it on hover.
    ============================================ */
 
 .ds-checkbox {
@@ -12,7 +20,7 @@
 }
 
 /* ============================================
-   BOX
+   BOX — CheckboxIndicator
    ============================================ */
 
 .ds-checkbox__box {
@@ -20,10 +28,10 @@
   width: 24px;
   height: 24px;
   box-sizing: border-box;
-  border: var(--border-050) solid var(--color-bg-container-border);
+  border: var(--border-050) solid var(--color-input-border-primary);
   border-radius: var(--radius-200); /* 8px */
-  background-color: var(--color-bg-container-primary-transparent);
-  display: flex;
+  background-color: var(--color-input-bg-primary);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -82,48 +90,49 @@
 }
 
 /* ============================================
-   CHECKED STATE
-   ============================================ */
-
-.ds-checkbox--checked .ds-checkbox__box {
-  background-color: var(--color-action-primary-bg);
-  border-color: var(--color-action-primary-bg);
-}
-
-.ds-checkbox--checked .ds-checkbox__icon {
-  opacity: 1;
-}
-
-/* ============================================
-   INDETERMINATE STATE
+   CHECKED and INDETERMINATE STATES
+   Keyed on the box, so an indicator drawn by
+   another host shows the same states.
    ============================================ */
 
-.ds-checkbox--indeterminate .ds-checkbox__box {
+.ds-checkbox__box--checked,
+.ds-checkbox__box--indeterminate {
   background-color: var(--color-action-primary-bg);
   border-color: var(--color-action-primary-bg);
 }
 
-.ds-checkbox--indeterminate .ds-checkbox__icon {
+.ds-checkbox__box--checked .ds-checkbox__icon,
+.ds-checkbox__box--indeterminate .ds-checkbox__icon {
   opacity: 1;
 }
 
 /* ============================================
    HOVER STATE
+   Any host carrying ds-control-host lights the
+   box when it is hovered and not disabled.
    ============================================ */
 
-.ds-checkbox:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+.ds-control-host:not(:disabled):not([aria-disabled='true']):hover .ds-checkbox__box {
   border-color: var(--color-action-primary-bg);
 }
 
-.ds-checkbox--checked:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+.ds-control-host:not(:disabled):not([aria-disabled='true']):hover .ds-checkbox__box--checked,
+.ds-control-host:not(:disabled):not([aria-disabled='true']):hover .ds-checkbox__box--indeterminate {
   background-color: var(--color-action-primary-bg-hover);
   border-color: var(--color-action-primary-bg-hover);
 }
 
 /* ============================================
    FOCUS STATE
+   The standalone control rings its own box; a
+   host that is itself the target (a card, a
+   row) rings its own edge instead.
    ============================================ */
 
+.ds-checkbox:focus-visible {
+  outline: none;
+}
+
 .ds-checkbox:focus-visible .ds-checkbox__box {
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: 2px;
@@ -142,12 +151,12 @@
    SIZE — COMPACT
    ============================================ */
 
-.ds-checkbox--compact .ds-checkbox__box {
+.ds-checkbox__box--compact {
   width: 20px;
   height: 20px;
 }
 
-.ds-checkbox--compact .ds-checkbox__icon {
+.ds-checkbox__box--compact .ds-checkbox__icon {
   width: 12px;
   height: 12px;
 }

package/components/Checkbox/Checkbox.d.ts

@@ -88,4 +88,38 @@ type CheckboxGroupOwnProps = {
 export interface CheckboxGroupProps extends CheckboxGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxGroupOwnProps> {
 }
 export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Props owned by CheckboxIndicator itself — everything else falls through to the <span>. */
+type CheckboxIndicatorOwnProps = {
+    /** Whether the box shows its check. */
+    checked?: boolean;
+    /** Whether the box shows the minus of an indeterminate state (ignored when `checked`). */
+    indeterminate?: boolean;
+    /** Box size: `default` is 24px, `compact` 20px. */
+    size?: 'default' | 'compact';
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface CheckboxIndicatorProps extends CheckboxIndicatorOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof CheckboxIndicatorOwnProps | 'children'> {
+}
+/**
+ * The checkbox's box, as a presentational piece for a host that is itself
+ * the control: SelectionCard's checkbox mode, QuestionCard's multi rows and
+ * FilterBar's multi-select options draw it, so a checkbox looks the same
+ * wherever a choice is offered. Hidden from assistive technology; the host
+ * carries `role="checkbox"` or `aria-selected` and the state. A host that
+ * adds the `ds-control-host` class to its interactive root lights the box
+ * on hover, the way Checkbox does.
+ */
+export declare const CheckboxIndicator: React.ForwardRefExoticComponent<CheckboxIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+/** Props owned by the glyphs themselves — everything else falls through to the <svg>. */
+type ControlGlyphOwnProps = {
+    /** Additional CSS classes; the default is the checkbox icon's, which sizes and colours it. */
+    className?: string;
+};
+export interface ControlGlyphProps extends ControlGlyphOwnProps, Omit<React.ComponentPropsWithoutRef<'svg'>, keyof ControlGlyphOwnProps | 'children'> {
+}
+/** The check glyph. */
+export declare const CheckIcon: React.ForwardRefExoticComponent<ControlGlyphProps & React.RefAttributes<SVGSVGElement>>;
+/** The minus glyph, for an indeterminate checkbox. */
+export declare const MinusIcon: React.ForwardRefExoticComponent<ControlGlyphProps & React.RefAttributes<SVGSVGElement>>;
 export {};

package/components/Checkbox/Checkbox.js

@@ -1,41 +1,8 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useId } from "react";
 import { Field } from "../Field/Field.js";
 import "./Checkbox.css";
-const CheckIcon = () => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "ds-checkbox__icon",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: "M2 7.5L5.5 11L12 3",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    )
-  }
-);
-const MinusIcon = () => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: "ds-checkbox__icon",
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ jsx("path", { d: "M2 7H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
-  }
-);
 const Checkbox = React.forwardRef(
   ({
     label,
@@ -64,6 +31,7 @@ const Checkbox = React.forwardRef(
     const describedBy = helperId ?? rest["aria-describedby"];
     const classes = [
       baseClass,
+      "ds-control-host",
       size === "compact" ? `${baseClass}--compact` : "",
       checked ? `${baseClass}--checked` : "",
       indeterminate && !checked ? `${baseClass}--indeterminate` : "",
@@ -105,7 +73,7 @@ const Checkbox = React.forwardRef(
         "aria-invalid": error || void 0,
         tabIndex: disabled ? -1 : 0,
         children: [
-          /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx(CheckboxIndicator, { checked, indeterminate, size }),
           helperText ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
             label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__helper`, id: helperId, children: helperText })
@@ -180,7 +148,67 @@ const CheckboxGroup = React.forwardRef(
   }
 );
 CheckboxGroup.displayName = "CheckboxGroup";
+const CheckboxIndicator = React.forwardRef(
+  ({ checked = false, indeterminate = false, size = "default", className = "", ...rest }, ref) => {
+    const base = "ds-checkbox__box";
+    const classes = [
+      base,
+      checked ? `${base}--checked` : "",
+      indeterminate && !checked ? `${base}--indeterminate` : "",
+      size === "compact" ? `${base}--compact` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...rest, ref, className: classes, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) });
+  }
+);
+CheckboxIndicator.displayName = "CheckboxIndicator";
+const CheckIcon = React.forwardRef(
+  ({ className = "ds-checkbox__icon", ...rest }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      ...rest,
+      ref,
+      className,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 7.5L5.5 11L12 3",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  )
+);
+CheckIcon.displayName = "CheckIcon";
+const MinusIcon = React.forwardRef(
+  ({ className = "ds-checkbox__icon", ...rest }, ref) => /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      ...rest,
+      ref,
+      className,
+      children: /* @__PURE__ */ jsx("path", { d: "M2 7H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    }
+  )
+);
+MinusIcon.displayName = "MinusIcon";
 export {
+  CheckIcon,
   Checkbox,
-  CheckboxGroup
+  CheckboxGroup,
+  CheckboxIndicator,
+  MinusIcon
 };

package/components/CircularButton/CircularButton.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { LinkComponent } from '../../behaviors/LinkProvider';
 /** Props owned by CircularButton itself — everything else falls through to the DOM node. */
 type CircularButtonOwnProps = {
     /** The icon — Material Symbol name (string) or custom element (ReactNode) */
@@ -65,6 +66,13 @@ type CircularButtonOwnProps = {
     rel?: string;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * The component the link renders with, such as Next.js's `Link`, so it
+     * navigates through the app's router; a plain `<a>` when unset. This
+     * component can render on the server, so it never reads a LinkProvider:
+     * pass the prop even under one.
+     */
+    linkComponent?: LinkComponent;
 };
 export interface CircularButtonProps extends CircularButtonOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof CircularButtonOwnProps | 'type'> {
 }

package/components/CircularButton/CircularButton.js

@@ -32,9 +32,11 @@ const CircularButton = React.forwardRef(
     target,
     rel,
     className = "",
+    linkComponent,
     ...rest
   }, ref) => {
     const baseClass = "ds-circular-button";
+    const Link = linkComponent ?? "a";
     const resolvedVariant = resolveCircularButtonCell(variant ?? priority ?? "primary", tone);
     const isDisabled = disabled ?? state === "disabled";
     const resolvedState = state ?? (isDisabled ? "disabled" : "default");
@@ -49,7 +51,7 @@ const CircularButton = React.forwardRef(
     ].filter(Boolean).join(" ");
     const children = isLoading ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon`, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Spinner, { size: size === "compact" ? "sm" : "md", tone: "inherit" }) }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__icon${typeof icon === "string" ? " material-symbols-rounded" : ""}`, "aria-hidden": "true", children: icon });
     const control = href && !isDisabled && !isLoading ? /* @__PURE__ */ jsx(
-      "a",
+      Link,
       {
         ...rest,
         ref,

package/components/CodeDiff/CodeDiff.css

@@ -162,14 +162,3 @@
    itself is decorative (aria-hidden).
    ============================================ */
 
-.ds-codediff__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/components/CodeDiff/CodeDiff.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React from "react";
 import "./CodeDiff.css";
+import "../../behaviors/visually-hidden.css";
 const HUNK_HEADER = /^@@\s+-(\d+)(?:,(\d+))?\s+\+(\d+)(?:,(\d+))?\s+@@/;
 function parseUnifiedDiff(diff) {
   const rawLines = diff.replace(/\n$/, "").split("\n");
@@ -109,7 +110,7 @@ const CodeDiff = React.forwardRef(
               ]
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: statsLabel(additions, deletions) })
+          /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: statsLabel(additions, deletions) })
         ] })
       ] }),
       /* @__PURE__ */ jsx(
@@ -136,7 +137,7 @@ const CodeDiff = React.forwardRef(
                     /* @__PURE__ */ jsx("span", { className: `${baseClass}__gutter`, "aria-hidden": "true", children: line.newLine ?? "" })
                   ] }),
                   /* @__PURE__ */ jsx("span", { className: `${baseClass}__marker`, "aria-hidden": "true", children: line.type === "add" ? "+" : line.type === "remove" ? "-" : "" }),
-                  changeLabel && /* @__PURE__ */ jsxs("span", { className: `${baseClass}__sr-only`, children: [
+                  changeLabel && /* @__PURE__ */ jsxs("span", { className: "ds-visually-hidden", children: [
                     changeLabel,
                     " "
                   ] }),

package/components/ColourSwatch/ColourSwatch.css

@@ -18,6 +18,7 @@
   /* Appearance */
   border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-600); /* 24px */
+  background-color: var(--color-bg-container-primary);
   padding: var(--padding-500); /* 20px */
   overflow: hidden;
   position: relative;