rift-ds 1.12.0 → 1.13.0

package/README.md

@@ -62,7 +62,13 @@ Swap the scripted transport for `createFetchTransport('/api/chat')` and the pane
 
 ## Set up your agent
 
-One command teaches a coding agent the system: it installs the generated agent skills into your project and prints the MCP connect line. The skills cover the library's rules, moving existing screens onto the tokens and components, and auditing styles against them.
+The quickest start is one file: save [AGENTS.md](https://rift-ds.com/AGENTS.md) at your project root, or paste it into your agent. It holds the install, the setup, the rules, and where to look things up.
+
+```bash
+curl -o AGENTS.md https://rift-ds.com/AGENTS.md
+```
+
+For the full setup, one command teaches a coding agent the system: it installs the generated agent skills into your project and prints the MCP connect line. The skills cover the library's rules, moving existing screens onto the tokens and components, and auditing styles against them.
 
 ```bash
 npx rift-ds init
@@ -74,7 +80,7 @@ The MCP endpoint serves the component catalogue, per-component prop APIs, the to
 claude mcp add --transport http rift-ds https://rift-ds.com/api/mcp
 ```
 
-Every component's prop contract is also plain markdown (append `.md` to its docs URL), and [llms.txt](https://rift-ds.com/llms.txt) indexes every machine surface. A theme made in the [playground](https://rift-ds.com/playground) exports as CSS, a THEME.md and a setup prompt, so the agent can read the look as well as the code. Then just ask: "Build a settings page with Rift components."
+Every component's prop contract is also plain markdown (append `.md` to its docs URL), and [llms.txt](https://rift-ds.com/llms.txt) indexes every machine surface. A theme made in the [playground](https://rift-ds.com/playground) exports as one AGENTS.md that carries the setup, your theme in words and its CSS, so the agent can read the look as well as the code. Then just ask: "Build a settings page with Rift components."
 
 ## Theming
 

package/behaviors/visually-hidden.css

@@ -0,0 +1,24 @@
+/* ============================================
+   VISUALLY HIDDEN
+   The one recipe for text that is read but not
+   seen: a status for a live region, a control's
+   spoken name, a marker beside a visual state.
+   Every component imports this sheet and uses
+   ds-visually-hidden rather than writing the
+   recipe again (scripts/validate-shared-primitives.mjs
+   fails a second copy). A hidden native input
+   that must stay focusable is not this: it
+   keeps its own rule, with the reason beside it.
+   ============================================ */
+
+.ds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/bin/rift-ds.mjs

@@ -28,7 +28,8 @@
  * Zero dependencies by design: global fetch plus node:fs, so npx never
  * installs anything beyond the package itself. SITE_ORIGIN, SKILL_NAME,
  * MCP_SERVER_NAME and PACKAGE_NAME are stamped by build-package.mjs from
- * scripts/brand.mjs (the one home for brand facts); running this file
+ * scripts/brand.mjs (the one home for brand facts), and CHAT_SLUG from
+ * the chat registry, the widget page's slug; running this file
  * straight from source fails fast rather than guessing a domain.
  * SKILL_NAME is the library skill, kept only for --out without --skill,
  * which has always meant that one.
@@ -41,6 +42,7 @@ const SITE_ORIGIN = 'https://rift-ds.com';
 const SKILL_NAME = 'rift-design-system';
 const MCP_SERVER_NAME = 'rift-ds';
 const PACKAGE_NAME = 'rift-ds';
+const CHAT_SLUG = 'ai-chat';
 const MANIFEST_URL = `${SITE_ORIGIN}/skill/manifest.json`;
 const DEFAULT_DIR = join('.claude', 'skills');
 const TEMPLATES_DIR = join(dirname(fileURLToPath(import.meta.url)), 'templates', 'chat');
@@ -229,7 +231,8 @@ function initChat({ app, dryRun }) {
   console.log(
     `  4. Your layout's viewport should set interactiveWidget: "resizes-content", so the phone takeover ends above the keyboard.`
   );
-  console.log(`\nThe widget's props, protocol and server options: ${SITE_ORIGIN}/chat`);
+  console.log(`\nHow to add it, the protocol and the server options: ${SITE_ORIGIN}/docs/chat`);
+  console.log(`Every prop: ${SITE_ORIGIN}/components/${CHAT_SLUG}`);
 }
 
 const args = process.argv.slice(2);

package/chat/ChatAgentPane.css

@@ -31,12 +31,16 @@
   margin: 0;
 }
 
+/* The chat's card surface: container fill behind a hairline, like every
+   card in the conversation. The radius stays a step under the rail's
+   --radius-600, concentric with the shell it nests in. */
 .ds-chat-agent-pane__card {
   display: flex;
   flex-direction: column;
   gap: var(--gap-200);
   padding: var(--padding-300);
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-400);
 }
 

package/chat/ChatWidget.css

@@ -61,29 +61,6 @@
   min-height: calc(40px + var(--padding-150) * 2);
 }
 
-/* The close button hugs the panel's clipped right edge, so its centred
-   bottom tooltip would lose its right cap to overflow: hidden. End-align
-   the last header tooltip to the button and walk the arrow back to the
-   button's centre (20px in, minus half the 8px arrow). */
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom {
-  left: auto;
-  right: 0;
-  transform: translateY(-4px);
-}
-
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom.ds-tooltip__panel--visible,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom.ds-tooltip__panel--visible {
-  transform: translateY(0);
-}
-
-.ds-chat-widget .ds-chat-header__actions .ds-tooltip:last-child .ds-tooltip__panel--bottom .ds-tooltip__arrow,
-.ds-chat-widget__rail-actions .ds-tooltip:last-child .ds-tooltip__panel--bottom .ds-tooltip__arrow {
-  left: auto;
-  right: 16px;
-  margin-left: 0;
-}
-
 /* The placement menu's wrapper is only there to catch Escape; it must not
    become a box of its own in the header's action row. */
 .ds-chat-widget__placement-menu {
@@ -560,19 +537,6 @@
   }
 }
 
-/* Visually hidden, still announced. */
-.ds-chat-widget__sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* ============================================
    THE RAILS — the optional session-history rail (leading) and agent pane
    (trailing). Wide widgets seat them inline; narrow ones summon the history

package/chat/ResponseActions.js

@@ -3,6 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useRef, useEffect } from "react";
 import { MOTION_FEEDBACK_RESET_MS } from "../tokens/motion.js";
 import { useChatWidget } from "./context.js";
+import "../behaviors/visually-hidden.css";
 const ResponseActionsLabelsContext = createContext({
   copy: "Copy response",
   copied: "Copied",
@@ -79,7 +80,7 @@ function ResponseActions({ turn }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__sr-only", "aria-live": "polite", children: copied ? labels.copiedAnnouncement : "" })
+    /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", "aria-live": "polite", children: copied ? labels.copiedAnnouncement : "" })
   ] });
 }
 export {

package/components/Accordion/Accordion.css

@@ -3,12 +3,17 @@
    Collapsible content sections
    ============================================ */
 
+/* The standard card surface (container fill, hairline border,
+   --radius-300), the one SelectionCard's and QuestionCard's option rows
+   share, so a collapsible section reads as a card on the page rather than
+   a hairline floating over it. */
 .ds-accordion {
   display: flex;
   flex-direction: column;
   width: 100%;
   border: var(--border-025) solid var(--color-bg-container-border);
-  border-radius: var(--radius-200);
+  border-radius: var(--radius-300);
+  background-color: var(--color-bg-container-primary);
   overflow: hidden;
 }
 
@@ -42,14 +47,16 @@
   transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);
 }
 
+/* Hover steps the header to the secondary fill, the collapsible-section
+   convention the agent cards (AgentPlan, SourceTrail, ToolCall) set. */
 .ds-accordion__trigger:hover {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-bg-container-secondary);
 }
 
 .ds-accordion__trigger:focus-visible {
   outline: 2px solid var(--color-action-primary-bg);
   outline-offset: -2px;
-  border-radius: var(--radius-200);
+  border-radius: var(--radius-300);
 }
 
 /* ============================================

package/components/AgentPlan/AgentPlan.css

@@ -229,18 +229,6 @@
    this span announces it.
    ============================================ */
 
-.ds-agent-plan__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 /* Icons take the colour of the text around them. Explicit, not just
    inherited by default: a consumer stylesheet that sets a colour on
    .material-symbols-rounded itself (a common global default) would

package/components/AgentPlan/AgentPlan.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useId, useState, useCallback } from "react";
 import { Spinner } from "../Spinner/Spinner.js";
 import "./AgentPlan.css";
+import "../../behaviors/visually-hidden.css";
 import "../../fonts/material-symbols.css";
 const STEP_ICONS = {
   pending: "circle",
@@ -88,7 +89,7 @@ const AgentPlan = React.forwardRef(
                     /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: step.label }),
                     step.detail && /* @__PURE__ */ jsx("span", { className: `${baseClass}__detail`, children: step.detail })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: statusText[status] })
+                  /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: statusText[status] })
                 ]
               },
               index

package/components/AgentStatus/AgentStatus.css

@@ -219,7 +219,7 @@
   display: flex;
   width: 100%;
   padding: var(--padding-150) var(--padding-300);
-  background-color: var(--color-bg-container-secondary);
+  background-color: var(--color-bg-container-primary);
   border: var(--border-025) solid var(--color-bg-container-border);
   border-radius: var(--radius-300);
 }

package/components/AnimatedNumber/AnimatedNumber.css

@@ -17,15 +17,3 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* Visually hidden settled value — what a screen reader gets instead of the
-   rolling digits. */
-.ds-animated-number__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}

package/components/AnimatedNumber/AnimatedNumber.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useState, useRef, useEffect } from "react";
 import "./AnimatedNumber.css";
+import "../../behaviors/visually-hidden.css";
 import { MOTION_COUNT_UP_MS } from "../../tokens/motion.js";
 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
@@ -45,7 +46,7 @@ const AnimatedNumber = React.forwardRef(
     const classes = [baseClass, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, "aria-hidden": "true", children: fmt(display) }),
-      /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: fmt(value) })
+      /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: fmt(value) })
     ] });
   }
 );

package/components/AppSidebar/AppSidebar.css

@@ -211,7 +211,7 @@
 }
 
 .ds-app-sidebar__btn--active {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-action-passive-bg-active);
 }
 
 .ds-app-sidebar__btn-left {
@@ -357,7 +357,7 @@
 }
 
 .ds-app-sidebar__sub-btn--active {
-  background-color: var(--color-action-passive-bg-hover);
+  background-color: var(--color-action-passive-bg-active);
 }
 
 .ds-app-sidebar__sub-label {

package/components/Attachment/Attachment.css

@@ -481,23 +481,6 @@ button.ds-attachment-tile__body:focus-visible,
   outline-offset: 2px;
 }
 
-/* ============================================
-   VISUALLY HIDDEN
-   ============================================ */
-
-.ds-attachment-tile__sr-only,
-.ds-attachment-group__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 spin to a still arc, which still reads as

package/components/Attachment/AttachmentTile.js

@@ -5,6 +5,7 @@ import { formatBytes, getFileExtension, getFileKind, getFileTypeLabel, matchesAc
 import { renderTypeMark } from "./typeMark.js";
 import "../../fonts/material-symbols.css";
 import "./Attachment.css";
+import "../../behaviors/visually-hidden.css";
 const AttachmentTile = React.forwardRef(
   ({
     name,
@@ -97,7 +98,7 @@ const AttachmentTile = React.forwardRef(
     const stack = /* @__PURE__ */ jsxs("span", { className: `${baseClass}__stack`, children: [
       /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, children: mark }),
       /* @__PURE__ */ jsxs("span", { className: `${baseClass}__name`, title: name, children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: name }),
         head !== "" && /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-head`, "aria-hidden": "true", children: head }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__name-tail`, "aria-hidden": "true", children: tail })
       ] }),
@@ -111,7 +112,7 @@ const AttachmentTile = React.forwardRef(
       ] });
     } else if (showExcerpt) {
       content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr-only`, children: name }),
+        /* @__PURE__ */ jsx("span", { className: "ds-visually-hidden", children: name }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__excerpt`, children: excerpt }),
         /* @__PURE__ */ jsx("span", { className: `${baseClass}__corner`, children: cornerMark })
       ] });

package/components/BottomNav/BottomNav.css

@@ -141,15 +141,6 @@
   padding: 0;
 }
 
-.ds-bottom-nav__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
 .ds-bottom-nav__search {
   display: none;
 }

package/components/BottomNav/BottomNav.js

@@ -3,6 +3,7 @@ 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(
@@ -60,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?.();

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