rift-ds 1.12.0 → 1.13.0

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/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;

package/components/Combobox/Combobox.css

@@ -260,12 +260,6 @@
   color: var(--color-text-tertiary);
 }
 
-.ds-combobox__check {
-  --icon-size: var(--icon-size-600);
-  color: var(--color-action-primary-bg);
-  flex-shrink: 0;
-}
-
 /* ============================================
    GROUPS
    ============================================ */
@@ -359,8 +353,7 @@
 }
 
 .ds-combobox--compact .ds-combobox__search-icon,
-.ds-combobox--compact .ds-combobox__chevron,
-.ds-combobox--compact .ds-combobox__check {
+.ds-combobox--compact .ds-combobox__chevron {
   --icon-size: var(--icon-size-500);
 }
 

package/components/Combobox/Combobox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from "react";
+import { ChosenMark } from "../Dropdown/Dropdown.js";
 import { useLayer } from "../../behaviors/useLayer.js";
 import { Field } from "../Field/Field.js";
 import "./Combobox.css";
@@ -231,7 +232,7 @@ const Combobox = React.forwardRef(({
             /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-label`, children: option.label }),
             option.description && /* @__PURE__ */ jsx("span", { className: `${baseClass}__option-description`, children: option.description })
           ] }),
-          isSelected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
+          isSelected && /* @__PURE__ */ jsx(ChosenMark, {})
         ]
       },
       option.value

package/components/CommandPalette/CommandPalette.css

@@ -114,33 +114,10 @@
   color: var(--color-input-text-placeholder);
 }
 
+/* The close is the library's CircularButton (tertiary, compact); the
+   header only seats it. */
 .ds-command-palette__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-pill);
-  background-color: transparent;
-  color: var(--color-icon-primary);
-  cursor: pointer;
   flex-shrink: 0;
-  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
-}
-
-.ds-command-palette__close:hover {
-  background-color: var(--color-action-passive-bg-hover);
-}
-
-.ds-command-palette__close:focus-visible {
-  outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
-}
-
-.ds-command-palette__close .material-symbols-rounded {
-  --icon-size: var(--icon-size-500);
 }
 
 /* ============================================

package/components/CommandPalette/CommandPalette.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useCallback, useId, useMemo, useEffect } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
 import ReactDOM from "react-dom";
 import { Kbd } from "../Kbd/Kbd.js";
 import "./CommandPalette.css";
@@ -182,13 +183,15 @@ const CommandPalette = React.forwardRef(({
               }
             ),
             /* @__PURE__ */ jsx(
-              "button",
+              CircularButton,
               {
-                type: "button",
                 className: `${baseClass}__close`,
-                onClick: () => onOpenChange(false),
-                "aria-label": closeLabel,
-                children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "close" })
+                icon: "close",
+                variant: "tertiary",
+                size: "compact",
+                tooltip: false,
+                ariaLabel: closeLabel,
+                onClick: () => onOpenChange(false)
               }
             )
           ] }),

package/components/Composer/Composer.css

@@ -406,18 +406,6 @@
   display: none;
 }
 
-.ds-composer__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;
-}
-
 /* ============================================
    ATTACHMENTS ROW (legacy free-form slot)
    ============================================ */

package/components/Composer/Composer.js

@@ -7,6 +7,7 @@ import { CircularButton } from "../CircularButton/CircularButton.js";
 import { MentionText, MentionMenu } from "../Mention/Mention.js";
 import "../../fonts/material-symbols.css";
 import "./Composer.css";
+import "../../behaviors/visually-hidden.css";
 import { getMentionQuery, filterMentionItems, mentionOptionId, mentionListboxId, insertMention } from "../Mention/mentions.js";
 const defaultFileAnnouncement = ({
   type,
@@ -510,9 +511,9 @@ const Composer = React.forwardRef(
             ),
             /* @__PURE__ */ jsx("div", { className: `${baseClass}__drop-hint`, "aria-hidden": "true", children: dropLabel })
           ] }),
-          (armed || hasFiles) && /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: announcement }),
+          (armed || hasFiles) && /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", role: "status", children: announcement }),
           mentionsArmed && /* The menu opens without moving focus, so its arrival is said here */
-          /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, role: "status", children: mentionOpen ? formatMentionAnnouncement(choosable.length) : "" })
+          /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", role: "status", children: mentionOpen ? formatMentionAnnouncement(choosable.length) : "" })
         ]
       }
     );

package/components/ContactCard/ContactCard.css

@@ -6,7 +6,7 @@
   align-items: center;
   gap: var(--gap-500);
   padding: var(--padding-500);
-  border: 1px solid var(--color-bg-container-border);
+  border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-300);
   background: var(--color-bg-container-primary-semi);
   text-decoration: none;

package/components/ContextMenu/ContextMenu.css

@@ -93,7 +93,7 @@
   justify-content: space-between;
   gap: var(--gap-400);
   padding: var(--padding-200) var(--padding-400);
-  border-radius: var(--radius-300);
+  border-radius: var(--radius-200); /* the inner step inside the --radius-300 panel, like every overlay row */
   cursor: pointer;
   position: relative;
   white-space: nowrap;
@@ -131,14 +131,6 @@
   color: var(--color-icon-primary);
 }
 
-.ds-context-menu__check {
-  --icon-size: var(--icon-size-500);
-  color: var(--color-icon-primary);
-  margin-left: auto;
-  flex-shrink: 0;
-  line-height: 1;
-}
-
 /* States — disabled */
 .ds-context-menu__item--disabled {
   opacity: 0.4;

package/components/ContextMenu/ContextMenu.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useId, useCallback, useEffect, useLayoutEffect } from "react";
+import { ChosenMark } from "../Dropdown/Dropdown.js";
 import { useLayer } from "../../behaviors/useLayer.js";
 import { MOTION_HOVER_HIDE_DELAY_MS } from "../../tokens/motion.js";
 import "./ContextMenu.css";
@@ -147,7 +148,7 @@ const SubEntry = ({
           entry.label
         ] }),
         entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
-        entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
+        entry.selected && /* @__PURE__ */ jsx(ChosenMark, {})
       ]
     }
   );
@@ -354,7 +355,7 @@ const ContextMenu = React.forwardRef(
               entry.label
             ] }),
             entry.shortcut && /* @__PURE__ */ jsx("span", { className: `${baseClass}__shortcut`, children: entry.shortcut }),
-            entry.selected && /* @__PURE__ */ jsx("span", { className: `${baseClass}__check material-symbols-rounded`, "aria-hidden": "true", children: "check" })
+            entry.selected && /* @__PURE__ */ jsx(ChosenMark, {})
           ]
         },
         `item-${index}`

package/components/Dialog/Dialog.css

@@ -110,34 +110,10 @@
 }
 
 /* Close button — ghost icon button */
+/* The close is the library's CircularButton (tertiary, compact); the
+   header only seats it. */
 .ds-dialog__close {
   flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-pill); /* pill */
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
-}
-
-.ds-dialog__close:hover {
-  background-color: var(--color-action-passive-bg-hover);
-}
-
-.ds-dialog__close:focus-visible {
-  outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
-}
-
-.ds-dialog__close-icon {
-  --icon-size: var(--icon-size-500);
-  line-height: 1;
-  color: var(--color-icon-primary);
 }
 
 /* ============================================

package/components/Dialog/Dialog.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
 import ReactDOM from "react-dom";
 import "./Dialog.css";
 import "../../fonts/material-symbols.css";
@@ -64,20 +65,15 @@ const Dialog = React.forwardRef(
                 description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
               ] }),
               dismissible && /* @__PURE__ */ jsx(
-                "button",
+                CircularButton,
                 {
-                  type: "button",
                   className: `${baseClass}__close`,
-                  onClick: () => onOpenChange(false),
-                  "aria-label": closeLabel,
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `${baseClass}__close-icon material-symbols-rounded`,
-                      "aria-hidden": "true",
-                      children: "close"
-                    }
-                  )
+                  icon: "close",
+                  variant: "tertiary",
+                  size: "compact",
+                  tooltip: false,
+                  ariaLabel: closeLabel,
+                  onClick: () => onOpenChange(false)
                 }
               )
             ] }),

package/components/Drawer/Drawer.css

@@ -179,34 +179,10 @@
 }
 
 /* Close button — ghost icon button */
+/* The close is the library's CircularButton (tertiary, compact); the
+   header only seats it. */
 .ds-drawer__close {
   flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-pill); /* pill */
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
-}
-
-.ds-drawer__close:hover {
-  background-color: var(--color-action-passive-bg-hover);
-}
-
-.ds-drawer__close:focus-visible {
-  outline: 2px solid var(--color-action-primary-bg);
-  outline-offset: 2px;
-}
-
-.ds-drawer__close-icon {
-  --icon-size: var(--icon-size-500);
-  line-height: 1;
-  color: var(--color-icon-primary);
 }
 
 /* ============================================

package/components/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useId } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
 import ReactDOM from "react-dom";
 import "./Drawer.css";
 import "../../fonts/material-symbols.css";
@@ -66,20 +67,15 @@ const Drawer = React.forwardRef(
                 description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description })
               ] }),
               dismissible && /* @__PURE__ */ jsx(
-                "button",
+                CircularButton,
                 {
-                  type: "button",
                   className: `${baseClass}__close`,
-                  onClick: () => onOpenChange(false),
-                  "aria-label": closeLabel,
-                  children: /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: `${baseClass}__close-icon material-symbols-rounded`,
-                      "aria-hidden": "true",
-                      children: "close"
-                    }
-                  )
+                  icon: "close",
+                  variant: "tertiary",
+                  size: "compact",
+                  tooltip: false,
+                  ariaLabel: closeLabel,
+                  onClick: () => onOpenChange(false)
                 }
               )
             ] }),

package/components/Dropdown/ChosenMark.css

@@ -0,0 +1,19 @@
+/* ============================================
+   CHOSEN MARK
+   The trailing check on a selected list or menu
+   row: one size and one colour across every
+   listbox and menu. The action colour, because
+   the mark names the selected item of a
+   mutually exclusive set, the role design.md
+   reserves it for. Rows at either density take
+   the compact icon step, since the mark is a
+   tick beside a label, not a leading icon.
+   ============================================ */
+
+.ds-chosen-mark {
+  --icon-size: var(--icon-size-500);
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--color-action-primary-bg);
+  line-height: 1;
+}

package/components/Dropdown/Dropdown.css

@@ -201,15 +201,6 @@
   list-style: none;
 }
 
-/* ============================================
-   CHECK ICON
-   ============================================ */
-
-.ds-dropdown__check {
-  --icon-size: var(--icon-size-600);
-  color: var(--color-action-primary-bg);
-}
-
 /* The option row's icon-and-label cluster, so the selected check keeps its
    own end of the space-between row. */
 .ds-dropdown__option-content {
@@ -283,6 +274,3 @@
 /* Compact group labels keep the base --font-paragraph-sm-* type — the
    scale has no smaller step. */
 
-.ds-dropdown--compact .ds-dropdown__check {
-  --icon-size: var(--icon-size-500);
-}

package/components/Dropdown/Dropdown.d.ts

@@ -89,4 +89,27 @@ export interface DropdownProps extends DropdownOwnProps, Omit<React.ComponentPro
  * to the trigger, the element that carries the combobox role.
  */
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+/** Props owned by ChosenMark itself — everything else falls through to the <span>. */
+type ChosenMarkOwnProps = {
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ChosenMarkProps extends ChosenMarkOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof ChosenMarkOwnProps | 'children'> {
+}
+/**
+ * The chosen mark: the trailing check a list or menu row shows on the item
+ * that is currently selected. One glyph, one colour and one size for every
+ * listbox and menu in the library (Dropdown, Combobox, RichDropdown,
+ * TimePicker, ModelPicker, DropdownMenu, ContextMenu, FilterBar's
+ * single-select), so a chosen row reads the same wherever it appears. The
+ * row renders it only when its item is selected; the row's `aria-selected`
+ * or `aria-checked` carries the state, so the mark itself is hidden from
+ * assistive technology.
+ *
+ * It is a mark, not a control: a row whose items are picked independently
+ * (a multi-select) shows a CheckboxIndicator instead, and a row that is a
+ * control in its own right (SelectionCard, QuestionCard) carries the real
+ * indicator.
+ */
+export declare const ChosenMark: React.ForwardRefExoticComponent<ChosenMarkProps & React.RefAttributes<HTMLSpanElement>>;
 export {};