@robr0/design-system 0.3.0 → 0.4.0

package/components/AgentStatus/AgentStatusPatterns.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AgentStatus's vocabulary, kept out of the component file so that module
+ * exports only a component (react-refresh) — and exported rather than kept
+ * private so a consumer building a pattern picker, and this repo's own docs
+ * gallery, can iterate the list instead of restating it.
+ *
+ * `.tsx` despite holding no JSX: the barrel generator and the
+ * `./components/*` export subpath both address `.tsx`, so that extension is
+ * what makes this reachable as `@robr0/design-system/components/AgentStatus/AgentStatusPatterns`.
+ */
+/**
+ * The dot-matrix animations. Each pattern is a named choreography over the
+ * same 4x3 grid, so switching pattern never changes the indicator's footprint.
+ */
+export declare const agentStatusPatterns: readonly ["braille", "orbit", "breathe", "snake", "fill-sweep", "pulse", "columns", "checkerboard", "scan", "rain", "cascade", "sparkle", "wave-rows", "helix", "diagonal-swipe"];
+export type AgentStatusPattern = (typeof agentStatusPatterns)[number];
+export type AgentStatusState = 'idle' | 'thinking' | 'working' | 'waiting' | 'done' | 'error';

package/components/AgentStatus/AgentStatusPatterns.js

@@ -0,0 +1,20 @@
+const agentStatusPatterns = [
+  "braille",
+  "orbit",
+  "breathe",
+  "snake",
+  "fill-sweep",
+  "pulse",
+  "columns",
+  "checkerboard",
+  "scan",
+  "rain",
+  "cascade",
+  "sparkle",
+  "wave-rows",
+  "helix",
+  "diagonal-swipe"
+];
+export {
+  agentStatusPatterns
+};

package/components/AlertDialog/AlertDialog.css

@@ -81,11 +81,11 @@
    ============================================ */
 
 .ds-alert-dialog__title {
-  font-family: var(--font-heading-6-family);
-  font-size: var(--font-heading-6-size);
-  font-weight: var(--font-heading-6-weight);
-  line-height: var(--font-heading-6-line-height);
-  letter-spacing: var(--font-heading-6-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
   margin: 0;
 }

package/components/Button/Button.d.ts

@@ -29,9 +29,15 @@ type ButtonOwnProps = {
     ariaCurrent?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `variant` instead. */
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'destructive';
     /**
+     * Documentation-only interaction state.
+     *
      * @deprecated Use `disabled` for the disabled state.
      *
      * Documentation-only affordance for rendering a *static* interaction state in
@@ -39,9 +45,15 @@ type ButtonOwnProps = {
      * pseudo-classes and needs no prop — for docs, prefer `className="ds-button--hover"`.
      */
     state?: 'default' | 'hover' | 'active' | 'disabled';
-    /** @deprecated Use `iconLeft` instead. */
+    /**
+     * Legacy alias for `iconLeft`.
+     *
+     * @deprecated Use `iconLeft` instead.
+     */
     icon?: string;
     /**
+     * Legacy toggle for showing the text label.
+     *
      * @deprecated Will be removed once `label` loses its default in the next major;
      * an icon-only button will simply omit `label`.
      */

package/components/ButtonGroup/ButtonGroup.js

@@ -17,15 +17,8 @@ const ButtonGroup = ({
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
         Button,
         {
-          priority: button.priority || "tertiary",
-          state: button.state || "default",
-          label: button.label,
-          iconLeft: button.iconLeft,
-          iconRight: button.iconRight,
-          icon: button.icon,
-          onClick: button.onClick,
-          href: button.href,
-          ariaCurrent: button.ariaCurrent
+          ...button,
+          variant: button.variant ?? button.priority ?? "tertiary"
         },
         index
       ))

package/components/Checkbox/Checkbox.d.ts

@@ -15,11 +15,21 @@ type CheckboxOwnProps = {
     onCheckedChange?: (checked: boolean) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onCheckedChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
     onChange?: (checked: boolean) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
+     * Legacy form-field name.
+     *
      * @deprecated No-op. This component renders a `<div role="checkbox">`, not a
      * native `<input>`, so it cannot participate in native form submission.
      * Declared only so the attribute is not forwarded to an element that rejects it.
@@ -48,7 +58,11 @@ type CheckboxGroupOwnProps = {
     onValuesChange?: (values: string[]) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValuesChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValuesChange` instead.
+     */
     onChange?: (values: string[]) => void;
 };
 export interface CheckboxGroupProps extends CheckboxGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxGroupOwnProps> {

package/components/CircularButton/CircularButton.d.ts

@@ -1,7 +1,13 @@
 export interface CircularButtonProps {
     /** Material Symbol icon name */
     icon: string;
-    /** Button priority/variant */
+    /** Visual treatment */
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Legacy alias for `variant`.
+     *
+     * @deprecated Use `variant` instead.
+     */
     priority?: 'primary' | 'secondary' | 'tertiary';
     /** Button state */
     state?: 'default' | 'hover' | 'active' | 'disabled';
@@ -31,6 +37,6 @@ export interface CircularButtonProps {
 /**
  * Circular icon button component.
  * A round button containing a single icon, available in
- * primary and secondary variants with default and compact sizes.
+ * primary, secondary and tertiary variants with default and compact sizes.
  */
-export declare const CircularButton: ({ icon, priority, state, size, loading, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;
+export declare const CircularButton: ({ icon, variant, priority, state, size, loading, ariaLabel, onClick, href, target, rel, "aria-describedby": ariaDescribedby, className, }: CircularButtonProps) => import("react").JSX.Element;

package/components/CircularButton/CircularButton.js

@@ -4,7 +4,8 @@ import "./CircularButton.css";
 import "../../fonts/material-symbols.css";
 const CircularButton = ({
   icon,
-  priority = "primary",
+  variant,
+  priority,
   state = "default",
   size = "default",
   loading,
@@ -17,7 +18,8 @@ const CircularButton = ({
   className = ""
 }) => {
   const baseClass = "ds-circular-button";
-  const variantClass = `${baseClass}--${priority}`;
+  const resolvedVariant = variant ?? priority ?? "primary";
+  const variantClass = `${baseClass}--${resolvedVariant}`;
   const stateClass = `${baseClass}--${state}`;
   const sizeClass = `${baseClass}--${size}`;
   const isLoading = Boolean(loading);

package/components/Combobox/Combobox.d.ts

@@ -59,9 +59,17 @@ type ComboboxOwnProps = {
     manualFiltering?: boolean;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string | string[]) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
      * Used only as a fallback for deriving the element id (`id || name || generated`).

package/components/ContextMenu/ContextMenu.css

@@ -71,10 +71,6 @@
   margin: var(--padding-xxs) var(--padding-sm-md);
 }
 
-.ds-context-menu__panel--compact .ds-context-menu__shortcut {
-  font-size: var(--font-caption-size);
-}
-
 /* ============================================
    SUB-MENU PANEL
    Positioned relative to its parent item.

package/components/DateInput/DateInput.d.ts

@@ -23,7 +23,11 @@ type DateInputOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface DateInputProps extends DateInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof DateInputOwnProps | 'type'> {

package/components/Dialog/Dialog.css

@@ -88,11 +88,11 @@
 }
 
 .ds-dialog__title {
-  font-family: var(--font-heading-6-family);
-  font-size: var(--font-heading-6-size);
-  font-weight: var(--font-heading-6-weight);
-  line-height: var(--font-heading-6-line-height);
-  letter-spacing: var(--font-heading-6-letter-spacing);
+  font-family: var(--font-heading-3-family);
+  font-size: var(--font-heading-3-size);
+  font-weight: var(--font-heading-3-weight);
+  line-height: var(--font-heading-3-line-height);
+  letter-spacing: var(--font-heading-3-letter-spacing);
   color: var(--color-text-primary);
   margin: 0;
 }

package/components/Dropdown/Dropdown.css

@@ -254,10 +254,8 @@
   letter-spacing: var(--font-paragraph-sm-em-letter-spacing);
 }
 
-.ds-dropdown--compact .ds-dropdown__group-label {
-  font-size: var(--font-caption-size);
-  line-height: var(--font-caption-line-height);
-}
+/* 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-sm);

package/components/Dropdown/Dropdown.d.ts

@@ -39,9 +39,17 @@ type DropdownOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
      * Used only as a fallback for deriving the element id (`id || name || label`).

package/components/DropdownMenu/DropdownMenu.css

@@ -96,10 +96,8 @@
   margin: var(--padding-xxs) var(--padding-sm-md);
 }
 
-/* Compact shortcuts */
-.ds-dropdown-menu__panel--compact .ds-dropdown-menu__shortcut {
-  font-size: var(--font-caption-size);
-}
+/* Compact shortcuts keep the base --font-paragraph-sm-* size — the scale
+   has no smaller step. */
 
 /* ============================================
    SUB-MENU PANEL

package/components/FileInput/FileInput.d.ts

@@ -31,7 +31,11 @@ type FileInputOwnProps = {
     onFileRemove?: (id: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface FileInputProps extends FileInputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof FileInputOwnProps | 'type'> {

package/components/Input/Input.d.ts

@@ -25,7 +25,11 @@ type InputOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface InputProps extends InputOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof InputOwnProps> {

package/components/LinkList/LinkList.d.ts

@@ -13,6 +13,7 @@ export interface LinkListItem {
     icon?: string;
 }
 export interface LinkListProps {
+    /** Links to render, in display order — each opens in a new tab */
     items: LinkListItem[];
     /** Additional CSS classes */
     className?: string;

package/components/RadioButton/RadioButton.d.ts

@@ -13,11 +13,21 @@ type RadioButtonOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
     /**
+     * Legacy form-field name.
+     *
      * @deprecated No-op. This component renders a `<div role="radio">`, not a
      * native `<input type="radio">`, so it does not group by name or participate
      * in native form submission — `RadioGroup` handles grouping in React state.
@@ -47,7 +57,11 @@ type RadioGroupOwnProps = {
     onValueChange?: (value: string) => void;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string) => void;
 };
 export interface RadioGroupProps extends RadioGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof RadioGroupOwnProps> {

package/components/Reasoning/Reasoning.css

@@ -0,0 +1,152 @@
+/* ============================================
+   REASONING COMPONENT
+   A model's thinking, disclosed behind a
+   one-line summary. Quiet by construction: the
+   trace is secondary text on a rail, never
+   competing with the answer beside it.
+   ============================================ */
+
+.ds-reasoning {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.ds-reasoning__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  align-self: flex-start;
+  padding: var(--padding-xxs) var(--padding-xs);
+  margin-left: calc(var(--padding-xs) * -1);
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-reasoning__trigger:hover {
+  color: var(--color-text-secondary);
+}
+
+.ds-reasoning__trigger:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+}
+
+.ds-reasoning__chevron {
+  --icon-size: var(--icon-size-sm);
+
+  flex: none;
+  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__chevron {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   SUMMARY
+   While the trace streams, a highlight sweeps
+   the summary left to right — the same treatment
+   AgentStatus uses, so "the model is working"
+   looks the same wherever it appears.
+   ============================================ */
+
+.ds-reasoning__summary {
+  white-space: nowrap;
+}
+
+.ds-reasoning--streaming .ds-reasoning__summary {
+  background-image: linear-gradient(
+    100deg,
+    var(--color-text-tertiary) 40%,
+    var(--color-text-primary) 50%,
+    var(--color-text-tertiary) 60%
+  );
+  background-size: 250% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: ds-reasoning-shimmer var(--motion-duration-loop-shimmer)
+    var(--motion-ease-linear) infinite;
+}
+
+@keyframes ds-reasoning-shimmer {
+  from {
+    background-position-x: 100%;
+  }
+
+  to {
+    background-position-x: 0%;
+  }
+}
+
+/* ============================================
+   PANEL
+   ============================================ */
+
+.ds-reasoning__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  visibility: hidden;
+  transition:
+    grid-template-rows var(--motion-duration-slow) var(--motion-ease-standard),
+    visibility var(--motion-duration-slow) var(--motion-ease-standard);
+}
+
+.ds-reasoning--open .ds-reasoning__panel {
+  grid-template-rows: 1fr;
+  visibility: visible;
+}
+
+.ds-reasoning__content {
+  overflow: hidden;
+  min-height: 0;
+  transition: padding-block var(--motion-duration-slow) var(--motion-ease-standard);
+  padding-left: var(--padding-sm-md);
+  /* The rail sits flush with the summary's left edge — the trigger's own
+     padding is cancelled by its negative margin, so both start at zero */
+  border-left: var(--border-md) solid var(--color-divider);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+.ds-reasoning--open .ds-reasoning__content {
+  padding-block: var(--padding-xs);
+}
+
+.ds-reasoning__content > :first-child {
+  margin-top: 0;
+}
+
+.ds-reasoning__content > :last-child {
+  margin-bottom: 0;
+}
+
+/* ============================================
+   REDUCED MOTION
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-reasoning--streaming .ds-reasoning__summary {
+    background-image: none;
+    color: var(--color-text-tertiary);
+    animation: none;
+  }
+}

package/components/Reasoning/Reasoning.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by Reasoning itself — everything else falls through to the root element. */
+type ReasoningOwnProps = {
+    /** The model is still producing the trace. Opens the panel and shimmers the summary. */
+    streaming?: boolean;
+    /** Seconds spent reasoning, shown in the summary once complete. */
+    duration?: number;
+    /** Override the summary line. By default it reports the streaming state and the duration. */
+    label?: string;
+    /** Open state for controlled use. Pair with `onOpenChange`. */
+    open?: boolean;
+    /** Open state for uncontrolled use. Defaults to open while `streaming`. */
+    defaultOpen?: boolean;
+    /** Fires whenever the panel opens or closes, from a click or from the stream ending. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** The reasoning trace. */
+    children?: React.ReactNode;
+};
+export interface ReasoningProps extends ReasoningOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof ReasoningOwnProps> {
+}
+/**
+ * Reasoning discloses a model's thinking without letting it dominate the
+ * response: open while the trace streams in, collapsed to a one-line summary
+ * once it finishes.
+ *
+ * The auto-collapse yields to the reader — once someone has toggled the panel
+ * themselves, the stream ending no longer closes it.
+ *
+ * Only the summary line is a live region. A trace announced token by token
+ * floods a screen reader, so the body is ordinary expandable content and the
+ * announcement covers the boundaries: thinking, then thought for so long.
+ */
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Reasoning/Reasoning.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useEffect, useCallback } from "react";
+import "./Reasoning.css";
+import "../../fonts/material-symbols.css";
+const Reasoning = React.forwardRef(
+  ({
+    streaming = false,
+    duration,
+    label,
+    open,
+    defaultOpen,
+    onOpenChange,
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-reasoning";
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    const isControlled = open !== void 0;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? streaming);
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const readerDecided = useRef(false);
+    const wasStreaming = useRef(streaming);
+    useEffect(() => {
+      if (streaming === wasStreaming.current) return;
+      wasStreaming.current = streaming;
+      if (readerDecided.current) return;
+      if (!isControlled) setUncontrolledOpen(streaming);
+      onOpenChange?.(streaming);
+    }, [streaming, isControlled, onOpenChange]);
+    const toggle = useCallback(() => {
+      readerDecided.current = true;
+      const next = !isOpen;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    }, [isOpen, isControlled, onOpenChange]);
+    const summary = label ?? (streaming ? "Thinking" : duration !== void 0 ? `Thought for ${duration}s` : "Thought process");
+    const classes = [
+      baseClass,
+      isOpen ? `${baseClass}--open` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          id: triggerId,
+          className: `${baseClass}__trigger`,
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          onClick: toggle,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__summary`, role: "status", children: summary }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__chevron material-symbols-rounded`, "aria-hidden": "true", children: "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: `${baseClass}__panel`, id: panelId, role: "region", "aria-labelledby": triggerId, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+    ] });
+  }
+);
+Reasoning.displayName = "Reasoning";
+export {
+  Reasoning
+};

package/components/SelectionCard/SelectionCard.d.ts

@@ -23,7 +23,11 @@ type SelectionCardOwnProps = {
     name?: string;
     /** Additional CSS classes */
     className?: string;
-    /** @deprecated Use `onValueChange` instead. */
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValueChange` instead.
+     */
     onChange?: (value: string | string[]) => void;
 };
 export interface SelectionCardProps extends SelectionCardOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof SelectionCardOwnProps> {

package/components/Slider/Slider.d.ts

@@ -19,7 +19,11 @@ type SliderOwnProps = {
     onValueChange?: (value: number) => void;
     /** Additional CSS classes — applied to the wrapper, not the <input> */
     className?: string;
-    /** @deprecated Pass the native `aria-label` attribute instead. */
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
     ariaLabel?: string;
 };
 export interface SliderProps extends SliderOwnProps, Omit<React.ComponentPropsWithoutRef<'input'>, keyof SliderOwnProps | 'type'> {