@sixthshift/design-system 0.7.0 → 0.9.0

package/src/components/Message/message.recipe.css

@@ -1,12 +1,11 @@
 /**
  * Message recipe — the component-token layer for Message.
  *
- * Message has one colour-bearing variant, `intent`, with four values. Each
- * cell sets border + bg + fg together, exactly as the old `cva` `variants.intent`
- * map did — this file is that map, moved to CSS so a consumer can re-point a
- * cell or add an intent the library never shipped. `size` is pure geometry
- * (padding, gap, font-size) and stays in Message.tsx's `cva` call; nothing
- * here concerns it.
+ * Message has one colour-bearing axis, `intent`, and one treatment: the
+ * family's tint, bordered. So the whole recipe is a single cell reading the
+ * intent slots from src/theming/intents.css — an intent a consumer adds there
+ * reaches Message with no change here. `size` is pure geometry (padding, gap,
+ * font-size) and stays in Message.tsx's `cva` call; nothing here concerns it.
  *
  * The grammar is `--message-{context}`, context in {bg, fg, border}. Intent
  * never appears in a token name — see button.css's header for why: it would
@@ -18,30 +17,16 @@
  */
 
 @layer components {
-  /* The floor. Applies when no cell below matches — an intent a consumer has
-     added but not yet styled still renders as a plain, legible message rather
-     than something broken. */
   .message {
-    --message-bg: var(--bg-normal);
-    --message-fg: var(--fg-normal);
-    --message-border: var(--border-normal);
-  }
-
-  .message[data-intent="success"] {
-    --message-bg: var(--bg-success-subtle);
-    --message-fg: var(--fg-on-success-subtle);
-    --message-border: var(--border-success);
+    --message-bg: var(--intent-tint-bg);
+    --message-fg: var(--intent-tint-fg);
+    --message-border: var(--intent-border);
   }
 
-  .message[data-intent="warning"] {
-    --message-bg: var(--bg-warning-subtle);
-    --message-fg: var(--fg-on-warning-subtle);
-    --message-border: var(--border-warning);
-  }
-
-  .message[data-intent="danger"] {
-    --message-bg: var(--bg-danger-subtle);
-    --message-fg: var(--fg-on-danger-subtle);
-    --message-border: var(--border-danger);
+  /* A neutral message sits on the resting surface, not the grey tint: it is a
+     plain bordered note, and a grey wash reads as disabled. The one place a
+     recipe overrides a slot for a single intent. */
+  .message[data-intent="neutral"] {
+    --message-bg: var(--bg-normal);
   }
 }

package/src/components/NumberStepper/NumberStepper.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+
+/**
+ * Geometry only. Every colour reads a `--number-stepper-*` component token
+ * whose value is decided by src/components/NumberStepper/number-stepper.recipe.css.
+ *
+ * `size` tracks Input's and Button's heights (`sm` 32px, `md` 36px, `lg`
+ * 40px) so a stepper sits on the same baseline as the fields beside it.
+ */
+const numberStepperVariants = cva(
+  // One literal, deliberately — see Button.tsx for why a `+` concatenation is a trap.
+  "number-stepper border-(color:--number-stepper-border) focus-within:ring-(color:--number-stepper-ring) inline-flex w-fit items-stretch overflow-hidden rounded-md border bg-(--number-stepper-bg) text-(--number-stepper-fg) shadow-xs transition-colors focus-within:ring-2 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs [&_svg]:size-3.5",
+        md: "h-9 text-sm [&_svg]:size-4",
+        lg: "h-10 text-sm [&_svg]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+/** Button width per size — square against the field's height. */
+const buttonGeometry: Record<string, string> = {
+  sm: "w-8",
+  md: "w-9",
+  lg: "w-10",
+};
+
+/** Input width per size — room for three digits before it grows. */
+const inputGeometry: Record<string, string> = {
+  sm: "w-10",
+  md: "w-12",
+  lg: "w-14",
+};
+
+export type NumberStepperSize = NonNullable<VariantProps<typeof numberStepperVariants>["size"]>;
+
+export type NumberStepperProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step" | "type"
+> &
+  VariantProps<typeof numberStepperVariants> & {
+    /** Controlled value. */
+    value?: number;
+    /** Initial value in uncontrolled mode. Defaults to `min`, or `0` without one. */
+    defaultValue?: number;
+    /** Called with the new, already-clamped value. */
+    onValueChange?: (value: number) => void;
+    /** Lowest reachable value. Defaults to `0` — quantities are the common case. */
+    min?: number;
+    /** Highest reachable value. Unbounded when omitted. */
+    max?: number;
+    /** Increment for the buttons and arrow keys. `PageUp`/`PageDown` move ten of them. */
+    step?: number;
+    /** Accessible name for the decrement button. */
+    decrementLabel?: string;
+    /** Accessible name for the increment button. */
+    incrementLabel?: string;
+    /** Extra classes for the inner `<input>`; `className` styles the surrounding group. */
+    inputClassName?: string;
+  };
+
+function clamp(value: number, min: number, max: number | undefined): number {
+  const floored = Math.max(min, value);
+  return max === undefined ? floored : Math.min(max, floored);
+}
+
+/**
+ * A whole-number field with decrement and increment buttons — a cart
+ * quantity, a guest count, a per-day capacity.
+ *
+ * Implements the WAI-ARIA spinbutton pattern on the `<input>` itself:
+ * `role="spinbutton"` with `aria-valuenow`/`min`/`max`, `ArrowUp`/`ArrowDown`
+ * step, `PageUp`/`PageDown` step by ten, and `Home`/`End` jump to the bounds
+ * that exist. The two buttons are pointer affordances and stay out of the tab
+ * order, so the field is one tab stop — the same reason RadioButtonGroup is.
+ *
+ * Typing is free-form while focused and committed on blur or `Enter`: the
+ * draft is parsed, rounded to the nearest `step` from `min`, and clamped.
+ * Anything unparseable reverts to the last committed value rather than
+ * reporting `NaN`. Every value `onValueChange` receives is in range.
+ *
+ * Controlled or uncontrolled through the `value`/`defaultValue`/
+ * `onValueChange` triad. `name` submits the committed value with a form, since
+ * the input is a real `<input>`. The ref and every unlisted prop land on that
+ * input — so `FormField`'s `id`/`aria-describedby` wiring reaches the control
+ * — while `className` styles the surrounding group.
+ */
+export const NumberStepper = React.forwardRef<HTMLInputElement, NumberStepperProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size = "md",
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      min = 0,
+      max,
+      step = 1,
+      disabled = false,
+      readOnly = false,
+      decrementLabel = "Decrease",
+      incrementLabel = "Increase",
+      onKeyDown,
+      onBlur,
+      onFocus,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue: clamp(defaultValue ?? min, min, max),
+      onChange: onValueChange,
+    });
+
+    // The text being typed, or `null` when the field shows the committed value.
+    const [draft, setDraft] = React.useState<string | null>(null);
+
+    const commit = (next: number) => {
+      const snapped = min + Math.round((next - min) / step) * step;
+      const clamped = clamp(snapped, min, max);
+      if (clamped !== value) setValue(clamped);
+    };
+
+    const commitDraft = () => {
+      if (draft === null) return;
+      const parsed = Number.parseFloat(draft);
+      setDraft(null);
+      if (Number.isFinite(parsed)) commit(parsed);
+    };
+
+    const interactive = !disabled && !readOnly;
+    const atMin = value <= min;
+    const atMax = max !== undefined && value >= max;
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || !interactive) return;
+
+      const moves: Record<string, (() => number) | undefined> = {
+        ArrowUp: () => value + step,
+        ArrowDown: () => value - step,
+        PageUp: () => value + step * 10,
+        PageDown: () => value - step * 10,
+        Home: () => min,
+        End: max === undefined ? undefined : () => max,
+      };
+      const move = moves[event.key];
+
+      if (event.key === "Enter") {
+        commitDraft();
+        return;
+      }
+      if (!move) return;
+
+      event.preventDefault();
+      setDraft(null);
+      commit(move());
+    };
+
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+      commitDraft();
+      onBlur?.(event);
+    };
+
+    const stepBy = (direction: 1 | -1) => {
+      setDraft(null);
+      commit(value + step * direction);
+    };
+
+    const buttonClass = cn(
+      "number-stepper-button flex shrink-0 cursor-pointer items-center justify-center text-(--number-stepper-button-fg) transition-colors enabled:active:bg-(--number-stepper-button-bg-pressed) enabled:hover:bg-(--number-stepper-button-bg-hovered) disabled:cursor-not-allowed disabled:text-(--number-stepper-button-fg-disabled)",
+      buttonGeometry[size ?? "md"]
+    );
+
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: a <fieldset> brings a border, min-width and legend semantics this inline control does not want; role="group" only ties the buttons to the field
+      <div role="group" data-disabled={disabled} className={numberStepperVariants({ size, className })}>
+        <button type="button" tabIndex={-1} aria-label={decrementLabel} disabled={!interactive || atMin} onClick={() => stepBy(-1)} className={buttonClass}>
+          <Minus aria-hidden="true" />
+        </button>
+        <input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          role="spinbutton"
+          autoComplete="off"
+          aria-valuenow={value}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          disabled={disabled}
+          readOnly={readOnly}
+          value={draft ?? String(value)}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          onFocus={onFocus}
+          className={cn(
+            "border-(color:--number-stepper-divider-border) min-w-0 border-x bg-transparent text-center text-[length:inherit] tabular-nums outline-hidden disabled:cursor-not-allowed",
+            inputGeometry[size ?? "md"],
+            inputClassName
+          )}
+          {...props}
+        />
+        <button type="button" tabIndex={-1} aria-label={incrementLabel} disabled={!interactive || atMax} onClick={() => stepBy(1)} className={buttonClass}>
+          <Plus aria-hidden="true" />
+        </button>
+      </div>
+    );
+  }
+);
+NumberStepper.displayName = "NumberStepper";
+
+export { numberStepperVariants };

package/src/components/NumberStepper/index.ts

@@ -0,0 +1 @@
+export { NumberStepper, type NumberStepperProps, type NumberStepperSize, numberStepperVariants } from "./NumberStepper";

package/src/components/NumberStepper/number-stepper.recipe.css

@@ -0,0 +1,31 @@
+/**
+ * NumberStepper recipe — the component-token layer for NumberStepper.
+ *
+ * No variant/intent axis: a stepper is a form field, and like Input every
+ * colour is a fixed semantic token. The field surface deliberately mirrors
+ * input.css's values (bg-normal, border-normal, focus-ring) so a stepper next
+ * to a text input reads as the same kind of control — but through its own
+ * tokens, so a consumer can re-point one without the other.
+ *
+ * The grammar is `--number-stepper-[{part}-]{context}[-{state}]`. Parts are
+ * `button` (the two step buttons) and `divider` (the rules either side of the
+ * value). `--number-stepper-button-fg-disabled` is the colour a button takes
+ * at a bound; the whole group dims via opacity only when the field itself is
+ * disabled, the same way Input does.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.css.
+ */
+
+@layer components {
+  .number-stepper {
+    --number-stepper-bg: var(--bg-normal);
+    --number-stepper-fg: var(--fg-normal);
+    --number-stepper-border: var(--border-normal);
+    --number-stepper-ring: var(--focus-ring);
+    --number-stepper-divider-border: var(--border-normal);
+    --number-stepper-button-fg: var(--fg-normal);
+    --number-stepper-button-fg-disabled: var(--fg-normal-disabled);
+    --number-stepper-button-bg-hovered: var(--bg-normal-hovered);
+    --number-stepper-button-bg-pressed: var(--bg-normal-pressed);
+  }
+}

package/src/components/ProgressBar/ProgressBar.tsx

@@ -2,10 +2,18 @@ import { Caption } from "@sixthshift/design-system/caption";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 
+export type ProgressBarIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+/** Widened, like every intent prop: a consumer adds an intent in CSS, not in a release. */
+export type ProgressBarIntent = ProgressBarIntentName | (string & {});
+
 export type ProgressBarProps = {
   completed: number;
   total: number;
   showFraction?: boolean;
+  /** The fill's colour family. Defaults to `brand`. */
+  intent?: ProgressBarIntent | undefined;
+  /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the bar follows the nearest `data-brand` ancestor. */
+  brand?: string | undefined;
   /** Accessible name for the progress bar. */
   label?: string;
   className?: string;
@@ -24,9 +32,13 @@ export type ProgressBarProps = {
  * invalid CSS or an impossible reported value — though the fraction text
  * still shows the raw, unclamped numbers. When `total` is not positive the
  * bar renders as indeterminate: no `aria-valuenow`/`aria-valuemax`, 0% fill.
+ *
+ * `intent` colours the fill and defaults to `brand`: progress is not an
+ * outcome, so a bar at 40% is not `success`. Pass `success` when completion
+ * really is the good news, or `danger` for a quota running out.
  */
 export const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
-  ({ completed, total, showFraction = true, label = "Progress", className }, ref) => {
+  ({ completed, total, intent = "brand", brand, showFraction = true, label = "Progress", className }, ref) => {
     // A caller can hand us anything; the bar must not render an out-of-range
     // width (a negative `width` is invalid CSS) or report impossible progress.
     const isMeasurable = total > 0;
@@ -34,7 +46,7 @@ export const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
     const percentage = isMeasurable ? (clamped / total) * 100 : 0;
 
     return (
-      <div ref={ref} className={cn("flex items-center gap-3", className)}>
+      <div ref={ref} data-intent={intent} data-brand={brand} className={cn("progress-bar flex items-center gap-3", className)}>
         <div
           role="progressbar"
           aria-label={label}
@@ -44,9 +56,9 @@ export const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(
           // total there is no meaningful progress to report.
           aria-valuenow={isMeasurable ? clamped : undefined}
           aria-valuetext={isMeasurable ? `${clamped} of ${total}` : undefined}
-          className="h-2 flex-1 overflow-hidden rounded-full bg-bg-strong"
+          className="h-2 flex-1 overflow-hidden rounded-full bg-(--progress-bar-track-bg)"
         >
-          <div className="h-full rounded-full bg-fg-success transition-all" style={{ width: `${percentage}%` }} />
+          <div className="h-full rounded-full bg-(--progress-bar-fill-bg) transition-all" style={{ width: `${percentage}%` }} />
         </div>
         {showFraction && (
           <Caption className="shrink-0">

package/src/components/ProgressBar/index.ts

@@ -1 +1 @@
-export { ProgressBar, type ProgressBarProps } from "./ProgressBar";
+export { ProgressBar, type ProgressBarIntent, type ProgressBarIntentName, type ProgressBarProps } from "./ProgressBar";

package/src/components/ProgressBar/progress-bar.recipe.css

@@ -0,0 +1,29 @@
+/**
+ * ProgressBar recipe — the component-token layer for ProgressBar.
+ *
+ * Two parts: the track, which is the same grey in every intent, and the fill,
+ * which paints with the intent slots from src/theming/intents.css. The fill
+ * reads `--intent-fg`, the family's colour on a resting surface, rather than
+ * the solid slot: `--intent-solid-bg` for `neutral` is `bg-strong`, which is
+ * the track itself, so a neutral bar would vanish. `neutral` is the one
+ * override: its `--intent-fg` is `fg-normal`, which barely separates from a
+ * `bg-strong` track in either mode, so it takes the mid-grey `fg-subtle`,
+ * which separates from both the track and the page around it. (`fg-on-strong`
+ * contrasts with the track but matches the page, and reads as a gap.)
+ *
+ * The grammar is `--progress-bar-{part}-{context}`. Both tokens live on the
+ * root, which carries `data-intent`, and the fill reads them by inheritance.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
+ */
+
+@layer components {
+  .progress-bar {
+    --progress-bar-track-bg: var(--bg-strong);
+    --progress-bar-fill-bg: var(--intent-fg);
+  }
+
+  .progress-bar[data-intent="neutral"] {
+    --progress-bar-fill-bg: var(--fg-subtle);
+  }
+}

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -27,10 +27,11 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
   onValueChange?: (value: string) => void;
   /** Layout orientation */
   orientation?: "vertical" | "horizontal";
-  /** Visual variant */
-  variant?: "default" | "button";
-  /** Button appearance (only applies when variant="button") */
-  appearance?: "segmented" | "separate";
+  /**
+   * How the options render: `control` (the default) is one `RadioButton` per option;
+   * `segmented` and `separate` are a row or column of buttons, joined or apart.
+   */
+  appearance?: "control" | "segmented" | "separate";
   /** Input name for form submission */
   name?: string;
   /** Disable all options */
@@ -44,21 +45,22 @@ export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "
  * uncontrolled `string` selection, via the `value`/`defaultValue`/
  * `onValueChange` triad (`useControllableState`).
  *
- * `variant="default"` (the default) renders one `RadioButton` per option.
- * `variant="button"` is a separate rendering path — not a re-skinned
- * `RadioButton` — a row/column of plain buttons with `role="radio"`;
- * contiguous buttons touch and share borders (`appearance="segmented"`, the
- * default) or sit apart with their own rounded corners
- * (`appearance="separate"`).
+ * `appearance="control"` (the default) renders one `RadioButton` per option.
+ * `appearance="segmented"` or `"separate"` is a separate rendering path — not
+ * a re-skinned `RadioButton` — a row/column of plain buttons with
+ * `role="radio"`; contiguous buttons touch and share borders (`segmented`) or
+ * sit apart with their own rounded corners (`separate`). One prop rather than
+ * a `variant` + `appearance` pair, so "appearance without buttons" — which
+ * used to mean nothing — cannot be written.
  *
  * Implements the WAI-ARIA radiogroup keyboard pattern: the group is one tab
  * stop, landing on the checked option (or the first enabled option if none
  * is checked), and arrow/Home/End keys move focus *and* selection between
  * enabled options, wrapping at the ends.
  *
- * Form submission only happens when `name` is set. In the default variant
+ * Form submission only happens when `name` is set. With `control`
  * that means each underlying `RadioButton` gets `name`, so one hidden
- * native radio input is rendered per option; in the button variant the
+ * native radio input is rendered per option; with the button appearances the
  * group itself renders a single hidden `<input type="hidden">` carrying the
  * selected value.
  *
@@ -73,8 +75,7 @@ const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGroupProps>
       options,
       onValueChange,
       orientation = "vertical",
-      variant = "default",
-      appearance = "segmented",
+      appearance = "control",
       name,
       disabled,
       onBlur,
@@ -111,8 +112,8 @@ const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGroupProps>
     const handleOptionSelect = (optionValue: string) => {
       // Re-selecting the current option reports nothing, as a native radio does
       // not. The guard lives here as well as in `RadioButton` because the button
-      // variant is a separate rendering path that never goes through it — and
-      // the two variants must not disagree about this. `ToggleGroup` in
+      // appearances are a separate rendering path that never goes through it —
+      // and the two paths must not disagree about this. `ToggleGroup` in
       // `"single"` mode already works this way.
       if (optionValue === value) return;
       setValue(optionValue);
@@ -139,7 +140,7 @@ const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGroupProps>
     const hasCheckedOption = options.some((option) => option.value === value);
     const tabStopValue = hasCheckedOption ? value : firstEnabledValue;
 
-    if (variant === "button") {
+    if (appearance === "segmented" || appearance === "separate") {
       const isVertical = orientation === "vertical";
       const isSegmented = appearance === "segmented";
 

package/src/components/SearchInput/SearchInput.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Input } from "@sixthshift/design-system/input";
 import { cn } from "@sixthshift/design-system/utils";
 import { Search, X } from "lucide-react";
 import * as React from "react";
@@ -14,12 +13,19 @@ export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
   clearLabel?: string;
 };
 
+/** The icon slots, duplicated from Input's. */
+const iconSlotStyles = `absolute top-1/2 -translate-y-1/2 text-(--search-input-icon-fg)
+  [&_svg]:h-4 [&_svg]:w-4
+  [&_button]:flex [&_button]:cursor-pointer [&_button]:appearance-none
+  [&_button]:border-0 [&_button]:bg-transparent`;
+
 /**
  * Text input specialised for search: a search icon fixed on the left and,
  * once there is a value, a clear button on the right.
  *
- * Wraps `Input`, using its `iconLeft`/`iconRight` slots, rather than
- * reimplementing the field. Always controlled — `value` is required and
+ * Its own field, not a wrapped `Input`: the markup and classes are duplicated
+ * from Input on purpose, so importing SearchInput pulls in nothing else and
+ * its colours are its own `--search-input-*` tokens. Always controlled — `value` is required and
  * there is no `defaultValue`/uncontrolled mode. `onValueChange` receives the
  * string value directly; the native `onChange` keeps its event signature and
  * fires too if passed. Clearing calls `onClear` if provided, otherwise calls
@@ -36,25 +42,33 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
     };
 
     return (
-      <Input
-        ref={ref}
-        type="text"
-        value={value}
-        onChange={(e) => {
-          onValueChange(e.target.value);
-          onChange?.(e);
-        }}
-        iconLeft={<Search />}
-        iconRight={
-          value ? (
-            <button type="button" onClick={handleClear} aria-label={clearLabel} className="rounded hover:bg-(--search-input-clear-bg-hovered)">
+      <div className={cn("search-input relative h-9 w-full text-sm", className)}>
+        <span className={cn(iconSlotStyles, "left-3")}>
+          <Search />
+        </span>
+        <input
+          ref={ref}
+          type="text"
+          value={value}
+          onChange={(e) => {
+            onValueChange(e.target.value);
+            onChange?.(e);
+          }}
+          className={cn(
+            "border-(color:--search-input-border) focus-visible:ring-(color:--search-input-ring) flex h-full w-full rounded-md border bg-(--search-input-bg) py-1 text-[length:inherit] shadow-xs transition-colors placeholder:text-(--search-input-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+            "pl-9",
+            value ? "pr-9" : "pr-3"
+          )}
+          {...props}
+        />
+        {value && (
+          <span className={cn(iconSlotStyles, "right-3")}>
+            <button type="button" onClick={handleClear} aria-label={clearLabel} className="rounded-sm hover:bg-(--search-input-clear-bg-hovered)">
               <X />
             </button>
-          ) : undefined
-        }
-        className={cn("search-input", className)}
-        {...props}
-      />
+          </span>
+        )}
+      </div>
     );
   }
 );

package/src/components/SearchInput/search-input.recipe.css

@@ -1,16 +1,24 @@
 /**
  * SearchInput recipe — the component-token layer for SearchInput.
  *
- * SearchInput renders `Input` for its field, so every input-surface colour
- * (background, border, ring, placeholder, icon) already comes from
- * `.input`'s tokens in input.css — duplicating them here would just be a
- * second name for the same cell. The only colour SearchInput contributes
- * itself is the clear button's hover wash, which is why this file is a single
- * token rather than empty.
+ * SearchInput draws its own field rather than wrapping Input, so it owns every
+ * colour it paints. The values match Input's today, deliberately duplicated:
+ * re-pointing `--input-*` does not reach a search field, and re-pointing these
+ * does not reach a plain input.
+ *
+ * The grammar is `--search-input-[{part}-]{context}[-{state}]`, parts being
+ * the placeholder, the icons, and the clear button.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
  */
 
 @layer components {
   .search-input {
+    --search-input-bg: var(--bg-normal);
+    --search-input-border: var(--border-normal);
+    --search-input-ring: var(--focus-ring);
+    --search-input-placeholder-fg: var(--fg-subtle);
+    --search-input-icon-fg: var(--fg-subtle);
     --search-input-clear-bg-hovered: var(--bg-subtle);
   }
 }

package/src/components/Sparkline/Sparkline.tsx

@@ -1,18 +1,23 @@
-import type { Interpolation } from "@sixthshift/design-system/line-chart";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
 
+/**
+ * How the line joins its points. The same four as LineChart's — duplicated, not
+ * imported, so a sparkline does not pull in the chart.
+ */
+export type SparklineInterpolation = "linear" | "monotone" | "stepBefore" | "stepAfter";
+
 export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
   data: number[];
   width?: number;
   height?: number;
   color?: string;
   fillArea?: boolean;
-  interpolation?: Interpolation;
+  interpolation?: SparklineInterpolation;
   strokeWidth?: number;
 };
 
-function buildPath(points: { x: number; y: number }[], interpolation: Interpolation): string {
+function buildPath(points: { x: number; y: number }[], interpolation: SparklineInterpolation): string {
   if (points.length === 0) return "";
   const parts = [`M ${points[0]!.x} ${points[0]!.y}`];
 
@@ -58,7 +63,7 @@ function buildPath(points: { x: number; y: number }[], interpolation: Interpolat
  *
  * Requires at least 2 data points; with fewer it renders nothing (`null`).
  * `color` is a single CSS color string (default `var(--fg-brand)`), and
- * `interpolation` reuses the same `Interpolation` type as `LineChart`. The
+ * `interpolation` takes the same four values as `LineChart`'s. The
  * accessible name is a static `aria-label="Trend line"` — it does not
  * describe the actual values.
  */

package/src/components/Sparkline/index.ts

@@ -1 +1 @@
-export { Sparkline, type SparklineProps } from "./Sparkline";
+export { Sparkline, type SparklineInterpolation, type SparklineProps } from "./Sparkline";