@sixthshift/design-system 0.8.0 → 0.9.0

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

package/src/components/TagChip/TagChip.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 import * as React from "react";
@@ -24,20 +23,30 @@ export type TagChipProps = {
  *
  * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
  * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
- * an × — used by `TagInput` and edit surfaces). Built on `Badge`
- * (`variant="outline" intent="muted"`).
+ * an × — used by `TagInput` and edit surfaces). It looks like an outline
+ * Badge but is not one: the shape is duplicated here and every colour is its
+ * own `--tag-chip-*` token, so importing TagChip pulls in nothing else. A tag
+ * is metadata, not a status, so it takes no intent.
  */
+/** Duplicated from Badge's sizes, which TagChip used to borrow. */
+const sizeStyles = {
+  sm: "px-1.5 py-0 text-[10px]",
+  md: "px-2.5 py-0.5 text-xs",
+} as const;
+
 export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(({ tag, onRemove, size = "sm", className }, ref) => {
   const sep = tag.indexOf(":");
   const namespace = sep > 0 ? tag.slice(0, sep) : null;
   const value = sep > 0 ? tag.slice(sep + 1) : tag;
 
   return (
-    <Badge
+    <span
       ref={ref}
-      variant="outline"
-      intent="muted"
-      className={cn("tag-chip gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className)}
+      className={cn(
+        "tag-chip border-(color:--tag-chip-border) focus:ring-(color:--tag-chip-ring) inline-flex items-center gap-1 rounded-md border bg-(--tag-chip-bg) font-normal text-(--tag-chip-fg) transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+        sizeStyles[size],
+        className
+      )}
     >
       {namespace && <span className="text-(--tag-chip-namespace-fg)">{namespace}:</span>}
       <span>{value}</span>
@@ -51,7 +60,7 @@ export const TagChip = React.forwardRef<HTMLSpanElement, TagChipProps>(({ tag, o
           <X className="h-3 w-3" />
         </button>
       )}
-    </Badge>
+    </span>
   );
 });
 TagChip.displayName = "TagChip";

package/src/components/TagChip/tag-chip.recipe.css

@@ -1,24 +1,24 @@
 /**
  * TagChip recipe — the component-token layer for TagChip.
  *
- * TagChip's surface (background, border, foreground) is entirely Badge's:
- * it renders `<Badge variant="outline" intent="muted">`, so that colour
- * already comes from `.badge`'s tokens in badge.css — duplicating it here
- * would just be a second name for the same cell. The only colours TagChip
- * contributes itself are the muted namespace prefix and the remove ("×")
- * button, which is why this file covers just those two.
+ * TagChip draws its own chip rather than rendering a Badge, so it owns every
+ * colour it paints: the surface (a resting background and a neutral border,
+ * like an outline badge), the quieter text a tag gets as metadata, the
+ * namespace prefix and the remove ("×") button.
  *
- * The grammar is `--tag-chip-{part}-{context}[-{state}]`. Both tokens live
- * on `.tag-chip` (the root Badge element) and are read by its descendants via
- * ordinary CSS custom-property inheritance — the namespace `<span>` and the
- * remove `<button>` need no class hooks of their own for that.
+ * The grammar is `--tag-chip-[{part}-]{context}[-{state}]`. Every token lives
+ * on `.tag-chip`, the root, and the namespace `<span>` and remove `<button>`
+ * read theirs by ordinary inheritance.
  *
- * `@layer components` is load-bearing, not tidiness — see button.css for the
- * cascade reasoning.
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
  */
 
 @layer components {
   .tag-chip {
+    --tag-chip-bg: var(--bg-normal);
+    --tag-chip-border: var(--border-normal);
+    --tag-chip-ring: var(--border-brand);
+    --tag-chip-fg: var(--fg-subtle);
     --tag-chip-namespace-fg: var(--fg-subtle);
     --tag-chip-remove-fg: var(--fg-subtle);
     --tag-chip-remove-fg-hovered: var(--fg-normal);

package/src/components/Toast/Toast.tsx

@@ -132,7 +132,7 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
               {children}
               {action && (
                 <div className="mt-2">
-                  <Button variant="link" size="sm" className="h-auto p-0 font-medium" onClick={onAction}>
+                  <Button inline size="sm" className="font-medium" onClick={onAction}>
                     {action}
                   </Button>
                 </div>

package/src/components/Toggle/Toggle.tsx

@@ -2,19 +2,64 @@
 
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
-import type { VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { type ButtonIntent, type ButtonVariant, buttonRecipe, type buttonVariants } from "../Button/Button";
 
 /**
- * `variant` and `intent` are no longer CVA variants on `buttonVariants` — they
- * select a recipe cell in CSS — so they are declared here rather than inherited
- * through `VariantProps`, which now yields `size` alone.
+ * Geometry and behaviour only; every colour reads a `--toggle-*` token decided
+ * by src/components/Toggle/toggle.recipe.css.
+ *
+ * Duplicated from Button on purpose, not shared: a toggle looks like a button
+ * but is its own component, so importing Toggle must not pull in Button. The
+ * two start identical and are free to drift.
  */
+const toggleVariants = cva(
+  // One literal, deliberately — see Button.tsx for the sorter trap.
+  "toggle border-(color:--toggle-border) focus-visible:ring-(color:--toggle-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-bg) font-medium text-(--toggle-fg) text-sm transition-colors hover:bg-(--toggle-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "h-7 rounded-md px-2 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+        xl: "h-12 rounded-md px-10 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure: Record<string, string> = {
+  solid: "shadow",
+  outline: "border shadow-xs",
+  ghost: "",
+};
+
+/** Squares the box at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry: Record<string, string> = {
+  xs: "w-7 px-0",
+  sm: "w-8 px-0",
+  md: "w-9 px-0",
+  lg: "w-10 px-0",
+  xl: "w-12 px-0",
+};
+
+/** Widened deliberately, as on every component: a consumer adds a variant or intent in CSS. */
+type Loose<T extends string> = T | (string & {});
+
+export type ToggleVariantName = "solid" | "outline" | "ghost";
+export type ToggleIntentName = "neutral" | "brand" | "danger" | "success" | "warning";
+export type ToggleVariant = Loose<ToggleVariantName>;
+export type ToggleIntent = Loose<ToggleIntentName>;
+
 export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> &
-  VariantProps<typeof buttonVariants> & {
-    variant?: ButtonVariant | undefined;
-    intent?: ButtonIntent | undefined;
+  VariantProps<typeof toggleVariants> & {
+    variant?: ToggleVariant | undefined;
+    intent?: ToggleIntent | undefined;
     /** Name of a brand the theme defines, rendered as `data-brand`. Omitted, the toggle follows the nearest `data-brand` ancestor. */
     brand?: string | undefined;
     /** Square the toggle at its current size, for an icon with no label. */
@@ -33,12 +78,12 @@ export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "o
  * for a set of mutually exclusive or multi-select options, use `ToggleGroup`
  * instead.
  *
- * Built directly on Button: it calls `buttonRecipe(...)` and takes the same
- * `variant`/`intent`/`size` axes Button does, plus `iconOnly` for a toolbar
- * toggle whose whole content is an icon. The
- * pressed-state colour mapping lives in `src/components/Toggle/toggle.recipe.css`,
- * keyed off the `data-state="on" | "off"` attribute this component renders
- * alongside `aria-pressed`.
+ * Looks like a Button and takes the same `variant`/`intent`/`size` axes, plus
+ * `iconOnly` for a toolbar toggle whose whole content is an icon — but it is
+ * its own component, with its own classes and `--toggle-*` tokens, and
+ * imports nothing from Button. Every colour, pressed state included, lives in
+ * `src/components/Toggle/toggle.recipe.css`, keyed off the `data-state="on" |
+ * "off"` attribute this component renders alongside `aria-pressed`.
  *
  * Controlled via `pressed`/`defaultPressed`/`onPressedChange`
  * (`useControllableState`).
@@ -47,8 +92,8 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
   (
     {
       className,
-      variant,
-      intent,
+      variant = "solid",
+      intent = "neutral",
       brand,
       size,
       iconOnly = false,
@@ -67,18 +112,19 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
       onChange: onPressedChange,
     });
 
-    const recipe = buttonRecipe({ variant, intent, brand, size, iconOnly });
-
     return (
       <button
         type="button"
         aria-pressed={pressed}
+        // What the recipe selects on; `data-brand` is omitted unless set.
         data-state={pressed ? "on" : "off"}
+        data-variant={variant}
+        data-intent={intent}
+        data-brand={brand}
         disabled={disabled}
         ref={ref}
         onClick={() => setPressed(!pressed)}
-        {...recipe}
-        className={cn(recipe.className, className)}
+        className={cn(variantStructure[variant], toggleVariants({ size, className: cn(iconOnly ? iconOnlyGeometry[size ?? "md"] : undefined, className) }))}
         {...props}
       >
         {children}
@@ -88,4 +134,4 @@ const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
 );
 Toggle.displayName = "Toggle";
 
-export { Toggle };
+export { Toggle, toggleVariants };

package/src/components/Toggle/index.ts

@@ -1 +1,9 @@
-export { Toggle, type ToggleProps } from "./Toggle";
+export {
+  Toggle,
+  type ToggleIntent,
+  type ToggleIntentName,
+  type ToggleProps,
+  type ToggleVariant,
+  type ToggleVariantName,
+  toggleVariants,
+} from "./Toggle";

package/src/components/Toggle/toggle.recipe.css

@@ -1,92 +1,64 @@
 /**
- * Toggle recipe — the pressed-state layer for Toggle and ToggleGroupItem.
+ * Toggle recipe — the component-token layer for Toggle.
  *
- * These cells target `.btn`, not a `.toggle` class of their own, because both
- * components render Button's class and read Button's `--button-*` tokens
- * (via `buttonRecipe`) — a toggle is a button with a third axis, `state`, not
- * a different look. Reusing `.btn` here is deliberate, not a shortcut.
+ * Toggle's own `--toggle-*` tokens on its own `.toggle` hook. It looks like a
+ * Button, and these cells start as copies of button.recipe.css's, but it is a
+ * separate component: re-pointing `--button-*` does not reach a toggle, and
+ * re-pointing these does not reach a button. Duplicated on purpose, so each is
+ * free to change without dragging the other.
  *
- * The grammar extends button.css's `(variant, intent)` with a third selector,
- * `[data-state="on"]` — the same attribute Toggle already renders
- * (`data-state={pressed ? "on" : "off"}`) and ToggleGroupItem now renders for
- * `selected`, rather than a new attribute invented for this file. `state`
- * never appears in a token *name* any more than `intent` does — see
- * button.css's header for why: it selects, via the attribute, which existing
- * `--button-bg`/`--button-bg-hovered` values apply.
+ * Every cell paints with the intent slots (src/theming/intents.css), so each
+ * variant works in every intent. The third selector is `[data-state="on"]`,
+ * the attribute Toggle renders alongside `aria-pressed`.
  *
- * Only solid, outline and ghost get cells: a link toggle has no surface to
- * press, so "on" carries no colour change.
- *
- * Every cell repeats its own resting value into `--button-bg-hovered`: the old
- * classes paired `bg-*` with an identical `hover:bg-*`, i.e. a pressed toggle
- * deliberately does not shift on hover. Restating it here (rather than relying
- * on button.css's floor, which chains `-hovered` from `--button-bg`) keeps
- * that "no shift" behaviour explicit and correct regardless of cascade order
- * against the button.css cells these compound with.
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
  */
 
 @layer components {
-  /* solid — the main -pressed background carries through as both resting and
-     hovered, so pressing never lightens or darkens further on hover. */
-  .btn[data-state="on"][data-variant="solid"][data-intent="brand"] {
-    --button-bg: var(--bg-brand-pressed);
-    --button-bg-hovered: var(--bg-brand-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="neutral"] {
-    --button-bg: var(--bg-strong-pressed);
-    --button-bg-hovered: var(--bg-strong-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="danger"] {
-    --button-bg: var(--bg-danger-pressed);
-    --button-bg-hovered: var(--bg-danger-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="success"] {
-    --button-bg: var(--bg-success-pressed);
-    --button-bg-hovered: var(--bg-success-pressed);
-  }
-
-  .btn[data-state="on"][data-variant="solid"][data-intent="warning"] {
-    --button-bg: var(--bg-warning-pressed);
-    --button-bg-hovered: var(--bg-warning-pressed);
+  /* The floor — a plain, legible toggle when no cell below matches. */
+  .toggle {
+    --toggle-bg: transparent;
+    --toggle-bg-hovered: var(--toggle-bg); /* no shift on hover */
+    --toggle-bg-pressed: var(--toggle-bg-hovered);
+    --toggle-fg: var(--fg-normal);
+    --toggle-border: var(--border-normal);
+    --toggle-ring: var(--focus-ring);
   }
 
-  /* outline and ghost — same subtle-pressed background and foreground per
-     intent, matching button.css's own pairing of these two variants. */
-  .btn[data-state="on"][data-variant="outline"][data-intent="neutral"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="neutral"] {
-    --button-bg: var(--bg-subtle-pressed);
-    --button-bg-hovered: var(--bg-subtle-pressed);
-    --button-fg: var(--fg-normal);
+  /* solid — a filled surface, with text read on top of it. */
+  .toggle[data-variant="solid"] {
+    --toggle-bg: var(--intent-solid-bg);
+    --toggle-bg-hovered: var(--intent-solid-bg-hovered);
+    --toggle-bg-pressed: var(--intent-solid-bg-pressed);
+    --toggle-fg: var(--intent-solid-fg);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="brand"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="brand"] {
-    --button-bg: var(--bg-brand-subtle-pressed);
-    --button-bg-hovered: var(--bg-brand-subtle-pressed);
-    --button-fg: var(--fg-on-brand-subtle-pressed);
+  /* outline and ghost share the family's text colour and its tint wash. */
+  .toggle[data-variant="outline"],
+  .toggle[data-variant="ghost"] {
+    --toggle-bg-hovered: var(--intent-tint-bg-hovered);
+    --toggle-bg-pressed: var(--intent-tint-bg-pressed);
+    --toggle-fg: var(--intent-fg);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="danger"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="danger"] {
-    --button-bg: var(--bg-danger-subtle-pressed);
-    --button-bg-hovered: var(--bg-danger-subtle-pressed);
-    --button-fg: var(--fg-on-danger-subtle-pressed);
+  /* outline alone carries a resting surface and a border. */
+  .toggle[data-variant="outline"] {
+    --toggle-bg: var(--bg-normal);
+    --toggle-border: var(--intent-border);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="success"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="success"] {
-    --button-bg: var(--bg-success-subtle-pressed);
-    --button-bg-hovered: var(--bg-success-subtle-pressed);
-    --button-fg: var(--fg-on-success-subtle-pressed);
+  /* On. Every cell repeats its resting value into `-hovered`: a pressed toggle
+     deliberately does not shift on hover. solid holds the fill's -pressed
+     step; outline and ghost hold the tint's, with its text partner. */
+  .toggle[data-state="on"][data-variant="solid"] {
+    --toggle-bg: var(--intent-solid-bg-pressed);
+    --toggle-bg-hovered: var(--intent-solid-bg-pressed);
   }
 
-  .btn[data-state="on"][data-variant="outline"][data-intent="warning"],
-  .btn[data-state="on"][data-variant="ghost"][data-intent="warning"] {
-    --button-bg: var(--bg-warning-subtle-pressed);
-    --button-bg-hovered: var(--bg-warning-subtle-pressed);
-    --button-fg: var(--fg-on-warning-subtle-pressed);
+  .toggle[data-state="on"][data-variant="outline"],
+  .toggle[data-state="on"][data-variant="ghost"] {
+    --toggle-bg: var(--intent-tint-bg-pressed);
+    --toggle-bg-hovered: var(--intent-tint-bg-pressed);
+    --toggle-fg: var(--intent-tint-fg-pressed);
   }
 }

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -13,10 +13,10 @@ import type { ToggleGroupProps } from "./toggleGroup.types";
  * `defaultValue`/`onValueChange` follow `type`: a string for single, a
  * string array for multiple (`useControllableState`).
  *
- * Items are built on the same `buttonRecipe` as `Button`/`Toggle` and take
- * the same `variant`/`intent`, with two differences: `variant` excludes
- * `"link"` (no clear pressed state for an underline in a group) and `size`
- * excludes `"xl"` (too large for grouped toggles) — see
+ * Items look like Toggles but carry their own duplicated styling and
+ * `--toggle-group-item-*` tokens (toggle-group.recipe.css), and take
+ * the same `variant`/`intent`, with one difference: `size` excludes `"xl"`
+ * (too large for grouped toggles) — see
  * `toggleGroup.types.ts`. `appearance` chooses `"segmented"` (items joined
  * into one border) or `"separate"` (individually bordered, gapped) rendering.
  */

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -1,8 +1,44 @@
 import { cn } from "@sixthshift/design-system/utils";
+import { cva } from "class-variance-authority";
 import * as React from "react";
-import { buttonRecipe } from "../Button/Button";
 import type { ToggleGroupBaseProps, ToggleGroupOption } from "./toggleGroup.types";
 
+/**
+ * An item's geometry. Duplicated from Button's on purpose — ToggleGroup is its
+ * own component and imports neither Button nor Toggle. Every colour reads a
+ * `--toggle-group-item-*` token from toggle-group.recipe.css.
+ */
+const itemVariants = cva(
+  // One literal, deliberately — see Button.tsx for the sorter trap.
+  "toggle-group-item border-(color:--toggle-group-item-border) focus-visible:ring-(color:--toggle-group-item-ring) inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md bg-(--toggle-group-item-bg) font-medium text-(--toggle-group-item-fg) text-sm transition-colors hover:bg-(--toggle-group-item-bg-hovered) focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 active:bg-(--toggle-group-item-bg-pressed) disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "h-7 rounded-md px-2 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-8",
+      },
+    },
+    defaultVariants: { size: "md" },
+  }
+);
+
+/** The non-colour half of `variant` — border width and elevation. */
+const variantStructure: Record<string, string> = {
+  solid: "shadow",
+  outline: "border shadow-xs",
+  ghost: "",
+};
+
+/** Squares the item at whatever size is set, and drops the horizontal padding. */
+const iconOnlyGeometry: Record<string, string> = {
+  xs: "w-7 px-0",
+  sm: "w-8 px-0",
+  md: "w-9 px-0",
+  lg: "w-10 px-0",
+};
+
 type ItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   Required<Pick<ToggleGroupBaseProps, "appearance" | "orientation" | "variant" | "intent" | "size" | "iconOnly">> & {
     option: ToggleGroupOption;
@@ -20,24 +56,23 @@ const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ItemProps>(
     const isVertical = orientation === "vertical";
     const isSegmented = appearance === "segmented";
 
-    // Both modes share the same base: buttonVariants + the pressed-state cells
-    // in recipes/toggle.css. Segmented just overrides border/shadow/rounding
-    // so items join cleanly.
-    const recipe = buttonRecipe({ variant, intent, size, iconOnly });
-
+    // Both appearances share the same base and the pressed-state cells in
+    // toggle-group.recipe.css. Segmented just overrides the rounding so items
+    // join cleanly.
     return (
       <button
         ref={ref}
-        {...recipe}
+        data-variant={variant}
+        data-intent={intent}
         type="button"
-        // Same attribute Toggle renders for `pressed` — recipes/toggle.css
-        // selects on it, so selected/unselected items pick up the same cells.
+        // toggle-group.recipe.css selects the selected state on this.
         data-state={selected ? "on" : "off"}
         disabled={isDisabled}
         aria-label={option.ariaLabel}
         className={cn(
-          recipe.className,
-          // Segmented: only override rounding (let buttonVariants handle border/color).
+          variantStructure[variant],
+          itemVariants({ size, className: iconOnly ? iconOnlyGeometry[size] : undefined }),
+          // Segmented: only override rounding (the variant handles border/colour).
           // Negative margin collapses double borders between outline items.
           isSegmented &&
             (isVertical

package/src/components/ToggleGroup/index.ts

@@ -1,2 +1,10 @@
 export { ToggleGroup } from "./ToggleGroup";
-export type { ToggleGroupOption, ToggleGroupProps } from "./toggleGroup.types";
+export type {
+  ToggleGroupIntent,
+  ToggleGroupIntentName,
+  ToggleGroupOption,
+  ToggleGroupProps,
+  ToggleGroupSize,
+  ToggleGroupVariant,
+  ToggleGroupVariantName,
+} from "./toggleGroup.types";

package/src/components/ToggleGroup/toggle-group.recipe.css

@@ -0,0 +1,62 @@
+/**
+ * ToggleGroup recipe — the component-token layer for ToggleGroup's items.
+ *
+ * Its own `--toggle-group-item-*` tokens on its own `.toggle-group-item` hook.
+ * The cells start as copies of Toggle's, which start as copies of Button's —
+ * duplicated on purpose: each is a separate component, re-pointing one does
+ * not reach the others, and each is free to change alone.
+ *
+ * Every cell paints with the intent slots (src/theming/intents.css). The
+ * selected state is `[data-state="on"]`.
+ *
+ * `@layer components` is load-bearing, not tidiness — see button.recipe.css.
+ */
+
+@layer components {
+  /* The floor — a plain, legible item when no cell below matches. */
+  .toggle-group-item {
+    --toggle-group-item-bg: transparent;
+    --toggle-group-item-bg-hovered: var(--toggle-group-item-bg); /* no shift on hover */
+    --toggle-group-item-bg-pressed: var(--toggle-group-item-bg-hovered);
+    --toggle-group-item-fg: var(--fg-normal);
+    --toggle-group-item-border: var(--border-normal);
+    --toggle-group-item-ring: var(--focus-ring);
+  }
+
+  /* solid — a filled surface, with text read on top of it. */
+  .toggle-group-item[data-variant="solid"] {
+    --toggle-group-item-bg: var(--intent-solid-bg);
+    --toggle-group-item-bg-hovered: var(--intent-solid-bg-hovered);
+    --toggle-group-item-bg-pressed: var(--intent-solid-bg-pressed);
+    --toggle-group-item-fg: var(--intent-solid-fg);
+  }
+
+  /* outline and ghost share the family's text colour and its tint wash. */
+  .toggle-group-item[data-variant="outline"],
+  .toggle-group-item[data-variant="ghost"] {
+    --toggle-group-item-bg-hovered: var(--intent-tint-bg-hovered);
+    --toggle-group-item-bg-pressed: var(--intent-tint-bg-pressed);
+    --toggle-group-item-fg: var(--intent-fg);
+  }
+
+  /* outline alone carries a resting surface and a border. */
+  .toggle-group-item[data-variant="outline"] {
+    --toggle-group-item-bg: var(--bg-normal);
+    --toggle-group-item-border: var(--intent-border);
+  }
+
+  /* On. Every cell repeats its resting value into `-hovered`: a selected item
+     deliberately does not shift on hover. solid holds the fill's -pressed
+     step; outline and ghost hold the tint's, with its text partner. */
+  .toggle-group-item[data-state="on"][data-variant="solid"] {
+    --toggle-group-item-bg: var(--intent-solid-bg-pressed);
+    --toggle-group-item-bg-hovered: var(--intent-solid-bg-pressed);
+  }
+
+  .toggle-group-item[data-state="on"][data-variant="outline"],
+  .toggle-group-item[data-state="on"][data-variant="ghost"] {
+    --toggle-group-item-bg: var(--intent-tint-bg-pressed);
+    --toggle-group-item-bg-hovered: var(--intent-tint-bg-pressed);
+    --toggle-group-item-fg: var(--intent-tint-fg-pressed);
+  }
+}