atlas-react-kit 0.5.0 → 0.6.1

package/dist/stat-tile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * Uppercase muted label used on tiles and thin section chrome. Apps that
+ * only needed a heading class can import this instead of a wrapper.
+ */
+export const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";
+/** Row of tiles: stacked on phones, divided columns from `sm`. */
+export const statTileGrid = "grid ring-1 ring-foreground/5 sm:divide-x";
+/**
+ * Label, big tabular figure, optional extra (a meter), muted sub line.
+ * Domain copy and status colors stay in the app.
+ */
+function StatTile({ label, value, sub, children, className }) {
+    return (_jsxs("div", { "data-slot": "stat-tile", className: cn("flex flex-col gap-1 px-3 py-2", className), children: [_jsx("span", { className: sectionLabel, children: label }), _jsx("span", { className: "text-lg font-semibold tracking-tight tabular-nums", children: value }), children, sub ? (_jsx("span", { className: "text-xs leading-snug text-muted-foreground", children: sub })) : null] }));
+}
+export { StatTile };

package/dist/switch.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
+import { disabledState, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * On/off setting that applies immediately (notifications, dark mode). Use
@@ -9,6 +10,6 @@ import { cn } from "./utils.js";
  * primitives; checked uses the primary fill, as `Checkbox` does.
  */
 function Switch({ className, ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn("peer inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-checked:bg-primary dark:bg-input/80 dark:data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, "peer inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
 }
 export { Switch };

package/dist/table.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { focusRing } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * True while the element's content is wider than its box. Re-checked when
@@ -32,7 +33,7 @@ function useHorizontalOverflow(ref) {
 function Table({ className, ...props }) {
     const containerRef = React.useRef(null);
     const scrollable = useHorizontalOverflow(containerRef);
-    return (_jsx("div", { ref: containerRef, "data-slot": "table-container", tabIndex: scrollable ? 0 : undefined, className: "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain outline-none focus-visible:ring-2 focus-visible:ring-ring/30", children: _jsx("table", { "data-slot": "table", className: cn("w-full min-w-full caption-bottom text-sm", className), ...props }) }));
+    return (_jsx("div", { ref: containerRef, "data-slot": "table-container", tabIndex: scrollable ? 0 : undefined, className: cn(focusRing, "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain"), children: _jsx("table", { "data-slot": "table", className: cn("w-full min-w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
@@ -44,7 +45,7 @@ function TableFooter({ className, ...props }) {
     return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 }
 function TableRow({ className, ...props }) {
-    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-selected", className), ...props }));
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-selected data-[state=selected]:shadow-[inset_2px_0_0_var(--color-selected-foreground)]", className), ...props }));
 }
 function TableHead({ className, ...props }) {
     return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle text-xs font-medium tracking-wider whitespace-nowrap text-muted-foreground uppercase sm:h-12 sm:px-3 [&:has([role=checkbox])]:pr-0", className), ...props }));

package/dist/textarea.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { disabledState, fieldSurface, focusRing, invalidState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn(fieldSurface, focusRing, invalidState, disabledState, "flex field-sizing-content min-h-16 resize-none", className), ...props }));
 }
 export { Textarea };

package/dist/toggle-group.js

@@ -16,9 +16,9 @@ function ToggleGroup({ className, variant, size, spacing = 2, orientation = "hor
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);
-    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-selected data-[state=on]:text-selected-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size,
-        }), className), ...props, children: children }));
+        }), "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", className), ...props, children: children }));
 }
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle.d.ts

@@ -1,9 +1,15 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
+/**
+ * Selected chrome shared by Toggle and ToggleGroupItem (see
+ * `selectedState.toggle`): the wash, selected text, and a selected border
+ * for `data-state=on`, `aria-pressed`, and `aria-checked`.
+ */
+declare const selectedToggleChrome: string;
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, selectedToggleChrome };

package/dist/toggle.js

@@ -3,11 +3,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
+import { disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
-const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:border-primary hover:bg-selected hover:text-selected-foreground focus-visible:border-primary focus-visible:text-selected-foreground focus-visible:ring-[3px] focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-selected aria-pressed:text-selected-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+/**
+ * Selected chrome shared by Toggle and ToggleGroupItem (see
+ * `selectedState.toggle`): the wash, selected text, and a selected border
+ * for `data-state=on`, `aria-pressed`, and `aria-checked`.
+ */
+const selectedToggleChrome = selectedState.toggle;
+const toggleVariants = cva([
+    focusRing,
+    selectedState.hover,
+    selectedToggleChrome,
+    invalidState,
+    disabledState,
+    "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:text-selected-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+], {
     variants: {
         variant: {
-            default: "bg-transparent",
+            default: "border border-transparent bg-transparent",
             outline: "border border-input bg-transparent",
         },
         size: {
@@ -24,4 +38,4 @@ const toggleVariants = cva("group/toggle inline-flex items-center justify-center
 function Toggle({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
 }
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, selectedToggleChrome };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -56,6 +56,10 @@
       "types": "./dist/checkbox.d.ts",
       "default": "./dist/checkbox.js"
     },
+    "./color-legend": {
+      "types": "./dist/color-legend.d.ts",
+      "default": "./dist/color-legend.js"
+    },
     "./combobox": {
       "types": "./dist/combobox.d.ts",
       "default": "./dist/combobox.js"
@@ -88,6 +92,10 @@
       "types": "./dist/field.d.ts",
       "default": "./dist/field.js"
     },
+    "./info-tip": {
+      "types": "./dist/info-tip.d.ts",
+      "default": "./dist/info-tip.js"
+    },
     "./input": {
       "types": "./dist/input.d.ts",
       "default": "./dist/input.js"
@@ -96,6 +104,14 @@
       "types": "./dist/label.d.ts",
       "default": "./dist/label.js"
     },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "default": "./dist/markdown.js"
+    },
+    "./meter": {
+      "types": "./dist/meter.d.ts",
+      "default": "./dist/meter.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "default": "./dist/pagination.js"
@@ -112,6 +128,10 @@
       "types": "./dist/radio-group.d.ts",
       "default": "./dist/radio-group.js"
     },
+    "./search-picker": {
+      "types": "./dist/search-picker.d.ts",
+      "default": "./dist/search-picker.js"
+    },
     "./select": {
       "types": "./dist/select.d.ts",
       "default": "./dist/select.js"
@@ -124,6 +144,10 @@
       "types": "./dist/skeleton.d.ts",
       "default": "./dist/skeleton.js"
     },
+    "./slider": {
+      "types": "./dist/slider.d.ts",
+      "default": "./dist/slider.js"
+    },
     "./sonner": {
       "types": "./dist/sonner.d.ts",
       "default": "./dist/sonner.js"
@@ -136,6 +160,10 @@
       "types": "./dist/spinner.d.ts",
       "default": "./dist/spinner.js"
     },
+    "./stat-tile": {
+      "types": "./dist/stat-tile.d.ts",
+      "default": "./dist/stat-tile.js"
+    },
     "./switch": {
       "types": "./dist/switch.d.ts",
       "default": "./dist/switch.js"
@@ -188,6 +216,10 @@
       "types": "./dist/form/feedback-field.d.ts",
       "default": "./dist/form/feedback-field.js"
     },
+    "./form/markdown-field": {
+      "types": "./dist/form/markdown-field.d.ts",
+      "default": "./dist/form/markdown-field.js"
+    },
     "./form/select-field": {
       "types": "./dist/form/select-field.d.ts",
       "default": "./dist/form/select-field.js"
@@ -213,6 +245,7 @@
     "build": "tsc",
     "check": "npm run build && prettier --check .",
     "test": "npm run build && vitest run",
+    "test:coverage": "npm run build && vitest run --coverage",
     "prepack": "npm run build"
   },
   "engines": {
@@ -240,6 +273,8 @@
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react-day-picker": "^10.0.1",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
@@ -252,6 +287,7 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "4.1.11",
     "jsdom": "^29.1.1",
     "next": "16.2.6",
     "prettier": "^3.8.1",

package/skills/atlas-react-kit/SKILL.md

@@ -49,33 +49,40 @@ Import each component from its subpath, e.g.
 `import { Button } from "atlas-react-kit/button"`. There is no root barrel, and
 `dist/` or `internal/` paths are not public API.
 
-| Need                                            | Use                                                                                                 |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| Short fixed list (a handful of options)         | `Select` family from `select`                                                                       |
-| Long or searchable list (timezones, currencies) | `Combobox` from `combobox` with `{ value, label }[]` options                                        |
-| One date, or a from/to range                    | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                   |
-| Date and time (not `datetime-local`)            | `DateTimePickerButton` from `date-time-picker`                                                      |
-| Labelled field with error text                  | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField` from `form/*`  |
-| Form-level error (save failed)                  | `FormFeedbackField` from `form/feedback-field`                                                      |
-| Content panels on one page                      | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                        |
-| View switch that changes the URL                | `TabsNav` with links: `TabsNavLink` from `next/tabs-nav-link` in Next, else `tabsTriggerVariants()` |
-| Status chip (paid, pending, failed)             | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`          |
-| Data table                                      | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                 |
-| Nothing to show yet                             | `EmptyPanel` from `empty-panel`                                                                     |
-| Grouped content                                 | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                         |
-| Modal                                           | `Dialog` family from `dialog`                                                                       |
-| Label for an icon button, or a short hint       | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                         |
-| Row actions or an overflow menu of commands     | `DropdownMenu` family from `dropdown-menu`                                                          |
-| Setting that applies immediately                | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                |
-| One choice from a few visible options           | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                |
-| Inline message about a page or section          | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                 |
-| Person or workspace image                       | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                             |
-| Sections that expand in place                   | `Accordion` family from `accordion`                                                                 |
-| Pages of a long list                            | `Pagination` family from `pagination`                                                               |
-| Where the page sits in a hierarchy              | `Breadcrumb` family from `breadcrumb`                                                               |
-| Work in progress                                | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                 |
-| Crash recovery around a section                 | `ErrorBoundary` from `error-boundary`                                                               |
-| Conditional classes                             | `cn` from `utils`                                                                                   |
+| Need                                            | Use                                                                                                                     |
+| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| Short fixed list (a handful of options)         | `Select` family from `select`                                                                                           |
+| Long or searchable list (timezones, currencies) | `Combobox` from `combobox` with `{ value, label }[]` options                                                            |
+| Always-visible searchable list (places)         | `SearchPicker` from `search-picker`                                                                                     |
+| One date, or a from/to range                    | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
+| Date and time (not `datetime-local`)            | `DateTimePickerButton` from `date-time-picker`                                                                          |
+| Labelled field with error text                  | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
+| Form-level error (save failed)                  | `FormFeedbackField` from `form/feedback-field`                                                                          |
+| Content panels on one page                      | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
+| View switch that changes the URL                | `TabsNav` with links: `TabsNavLink` from `next/tabs-nav-link` in Next, else `tabsTriggerVariants()`                     |
+| Status chip (paid, pending, failed)             | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
+| Data table                                      | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
+| Nothing to show yet                             | `EmptyPanel` from `empty-panel`                                                                                         |
+| Grouped content                                 | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                                             |
+| Modal                                           | `Dialog` family from `dialog`                                                                                           |
+| Label for an icon button, or a short hint       | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                                             |
+| Longer help from a glyph                        | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`)                                                                 |
+| Color scale key                                 | `ColorLegend` from `color-legend`                                                                                       |
+| GitHub-flavoured Markdown                       | `Markdown` from `markdown`; write/preview with `FormMarkdownField`                                                      |
+| Summary figure in a strip                       | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`)                                                            |
+| Value against a scale, optional ticks           | `Meter` from `meter` (not `Progress`)                                                                                   |
+| Number on a continuous scale                    | `Slider` from `slider`                                                                                                  |
+| Row actions or an overflow menu of commands     | `DropdownMenu` family from `dropdown-menu`                                                                              |
+| Setting that applies immediately                | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                                    |
+| One choice from a few visible options           | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                                    |
+| Inline message about a page or section          | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                                     |
+| Person or workspace image                       | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                                                 |
+| Sections that expand in place                   | `Accordion` family from `accordion`                                                                                     |
+| Pages of a long list                            | `Pagination` family from `pagination`                                                                                   |
+| Where the page sits in a hierarchy              | `Breadcrumb` family from `breadcrumb`                                                                                   |
+| Work in progress                                | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                                     |
+| Crash recovery around a section                 | `ErrorBoundary` from `error-boundary`                                                                                   |
+| Conditional classes                             | `cn` from `utils`                                                                                                       |
 
 If nothing fits, build the piece in the app from kit primitives and semantic
 tokens. Do not copy kit source into the app; a missing shared component belongs
@@ -95,9 +102,10 @@ list; the ones that come up most:
   `border-border`, `bg-card`, `text-destructive`. Raw palette classes
   (`bg-purple-600`, `text-gray-500`) and paired `dark:` colors drift from the
   theme; tokens already switch with light and dark.
-- **Selected and active state**: `bg-selected text-selected-foreground` for the
-  current nav item, chip, row, or toggle. Grey fills read as hover, not
-  selection.
+- **Selected and active state**: `bg-selected text-selected-foreground` plus
+  a `border-selected-foreground` border (or bar) for the current nav item,
+  chip, row, or toggle; the wash alone is too faint to show state. Grey fills
+  read as hover, not selection.
 - **Status**: `success`, `warning`, and `destructive` for good, caution, and
   bad. Use them as text or soft tints (the `Badge` tones), which meet AA in
   both themes. Don't override a soft badge's colors. There is no foreground
@@ -106,8 +114,9 @@ list; the ones that come up most:
   which is too dark to read on the dark background.
 - **Accessibility**: the kit targets WCAG 2.2 AA. Give every control a name
   (`Label htmlFor`, or `aria-label` on icon-only buttons and an unlabelled
-  `Combobox`), keep the shipped focus rings, and don't lower contrast with raw
-  colors or opacity.
+  `Combobox`), keep the shipped focus rings (solid `ring-ring`, never
+  `ring-ring/30`), keep field borders on `border-input` (3:1; `border-border`
+  is for dividers), and don't lower contrast with raw colors or opacity.
 - **Square corners**: primitives have none. Use `rounded-full` only for real
   circles (avatars, dots). Adding `rounded-md` to a card or button breaks the
   system.

package/theme.css

@@ -19,6 +19,11 @@
     @slot;
   }
 }
+@custom-variant data-on {
+  &:where([data-state="on"]) {
+    @slot;
+  }
+}
 @custom-variant data-disabled {
   &:where([data-disabled="true"]),
   &:where([data-disabled]:not([data-disabled="false"])) {
@@ -100,8 +105,11 @@
   --muted-foreground: oklch(0.53 0 0);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
-  /* Soft brand-purple wash for selected/active chrome (nav, tabs, chips, rows). */
-  --selected: color-mix(in oklch, var(--primary) 12%, var(--background));
+  /* Soft brand-purple wash for selected/active chrome (nav, tabs, chips, rows).
+     Mixed in oklab: in oklch, white's hue (0) pulls the mix toward pink. The
+     wash is too faint to mark state alone, so selected chrome also takes a
+     `selected-foreground` border or bar (WCAG 1.4.11). */
+  --selected: color-mix(in oklab, var(--primary) 12%, var(--background));
   --selected-foreground: var(--primary);
   /* AA as text on the page (6.4:1) and on its own /10 and /15 tints. */
   --destructive: oklch(0.505 0.213 27.518);
@@ -110,9 +118,13 @@
      nothing puts text on a solid fill. See DESIGN_RULES.md. */
   --success: oklch(0.45 0.11 160);
   --warning: oklch(0.48 0.115 70);
+  /* Dividers and card edges: decorative, so no contrast minimum. */
   --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  /* Form-control boundaries (fields, checkboxes, radios, switch track): 3:1
+     on the page and on cards, as WCAG 1.4.11 requires. */
+  --input: oklch(0.62 0 0);
+  /* Focus ring: solid brand purple, 7.3:1 on the page. */
+  --ring: var(--primary);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -136,7 +148,9 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.205 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.432 0.232 292.759);
+  /* Light enough for checked fills and borders to reach 3:1 on the page and
+     cards, dark enough for primary-foreground text (5:1). */
+  --primary: oklch(0.55 0.25 292.7);
   --primary-foreground: oklch(0.969 0.016 293.756);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
@@ -144,14 +158,14 @@
   --muted-foreground: oklch(0.708 0 0);
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --selected: color-mix(in oklch, var(--primary) 24%, var(--background));
+  --selected: color-mix(in oklab, var(--primary) 24%, var(--background));
   --selected-foreground: oklch(0.85 0.06 293);
   --destructive: oklch(0.704 0.191 22.216);
   --success: oklch(0.765 0.177 163.223);
   --warning: oklch(0.828 0.189 84.429);
   --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --input: oklch(0.52 0 0);
+  --ring: oklch(0.75 0.14 293);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -169,7 +183,7 @@
 
 @layer base {
   * {
-    @apply border-border outline-ring/50;
+    @apply border-border outline-ring;
   }
   body {
     @apply bg-background text-foreground;