@devalok/shilp-sutra 0.48.0 → 0.49.1

package/docs/components/ui/dot.md

@@ -0,0 +1,61 @@
+# Dot
+
+- Import: @devalok/shilp-sutra/ui/dot
+- Server-safe: No
+- Category: ui
+
+A small semantic status/indicator dot — the low-level primitive behind status
+pills, presence indicators, legend swatches, and `StatusDot`. Intent-coloured,
+sized, optionally pulsing, filled or ring.
+
+## Props
+    color: "accent" | "success" | "warning" | "error" | "info" | "neutral" | "current" (intent colour; `current` inherits text colour)
+    size: "xs" | "sm" | "md" | "lg"
+    variant: "filled" | "ring" | "off" (`off` = faint fill + light border, i.e. inactive)
+    withBorder: boolean (contrast ring so the dot stays visible on busy/coloured backgrounds)
+    pulse: boolean (animate a pulsing ripple; ignored for `off`)
+    pulseSpeed: "slow" | "normal" | "fast" (pulse tempo)
+    label: ReactNode (inline text; makes the dot an announced status)
+    labelPosition: "start" | "end" (which side the label sits on)
+    labelClassName: string
+
+## Defaults
+    color: "neutral"
+    size: "md"
+    variant: "filled"
+    withBorder: false
+    pulse: false
+    pulseSpeed: "normal"
+    labelPosition: "end"
+
+## Example
+```jsx
+<Dot color="success" />                                 {/* bare, decorative */}
+<Dot color="error" pulse pulseSpeed="fast" label="Recording" />  {/* pulsing + announced */}
+<Dot color="neutral" variant="off" label="Offline" />  {/* inactive: faint fill + light border */}
+<Dot color="success" withBorder />                      {/* contrast ring for busy backgrounds */}
+<Dot color="accent" label="3 online" labelPosition="start" />  {/* label before the dot */}
+<Dot color="neutral" variant="ring" size="lg" />        {/* hollow ring */}
+
+// As leading content in a pill:
+<Badge variant="soft" color="warning" startIcon={<Dot color="warning" size="sm" />}>
+  Pending
+</Badge>
+```
+
+## Composability
+- **Decorative vs announced.** A bare `<Dot>` is `aria-hidden` (the surrounding element carries meaning — e.g. a Badge's text). Pass a `label` (or `aria-label`) to make it a `role="status"` announced indicator.
+- **Intent colour, shared vocabulary.** `color` uses the same intent names as the rest of the system (`accent/success/warning/error/info/neutral`), so a Dot next to a Badge/Button of the same intent matches.
+- **`pulse` = "live".** Off by default (static status). Turn it on for active/attention states (recording, live, connecting) — a pulsing dot reads as "happening now", so leave it off for settled statuses.
+- **Powers the higher-level pieces.** `StatusBadge` composes `<Badge>` + `<Dot>`; use `Dot` directly anywhere you need a coloured indicator without a pill.
+- **Three treatments:** `filled` (active), `ring` (hollow outline), `off` (faint same-tone fill + light border — present but inactive/disabled).
+- **`withBorder`** adds a contrast ring (`ring-2 ring-surface-raised`) so the dot reads on avatars, images, or coloured fills — the pattern Avatar's status dot uses.
+- **`pulseSpeed`** (slow/normal/fast) tunes the pulse tempo — fast for urgent (recording), slow for ambient (syncing).
+
+## Gotchas
+- A bare dot is decorative by design — if a dot is the *only* signal (no adjacent text), give it a `label` or `aria-label` so it's announced.
+- `pulse` respects `prefers-reduced-motion` (the ripple is disabled).
+
+## Changes
+### v0.49.0
+- **Added** Initial release. Extracted as the shared primitive behind `StatusDot`, `StatusBadge`, and `Badge`'s dot. Colours `accent/success/warning/error/info/neutral/current`; sizes `xs–lg`; variants `filled/ring/off`; `withBorder` contrast ring; `pulse` + `pulseSpeed`; `label` + `labelPosition`.

package/docs/components/ui/progress.md

@@ -4,38 +4,76 @@
 - Server-safe: No
 - Category: ui
 
+A linear progress bar. Use the smart all-in-one `<Progress value={70} />` for the
+common cases, or the compound parts (`Progress.Root` / `Track` / `Indicator` /
+`Segment` / `Label` / `Value`) for full layout control and multi-segment bars.
+
 ## Props
-    value: number (0-100) — omit for indeterminate
+    value: number | null (0–max) — omit or null for an indeterminate bar
+    max: number (scale maximum, default 100)
     size: "sm" | "md" | "lg" (track height)
-    color: "default" | "success" | "warning" | "error" (indicator color)
-    autoColor: boolean (auto-shifts color by value: 0-59=default, 60-84=warning, 85-100=success, >100=error)
-    showLabel: boolean (shows percentage text)
-    indicatorClassName: string
+    color: "accent" | "success" | "warning" | "error" (indicator color)
+    autoColor: boolean (auto-shift color by value: 0-59=accent, 60-84=warning, 85-100=success, >100=error)
+    label: ReactNode (descriptive label rendered before the bar; names the bar for a11y)
+    showValue: boolean (shows the "{n}%" readout after the bar)
+    segments: { value: number; color?: "accent" | "success" | "warning" | "error" }[] (multi-segment bar; overrides the single indicator)
+    trackClassName: string (class for the Track element)
+    indicatorClassName: string (class for the single Indicator; ignored when segments set)
+
+## Compound Components
+    Progress (smart all-in-one — value/size/color/label/showValue/autoColor/segments)
+    Progress.Root (layout container + context; owns value/max/size)
+      Progress.Label (descriptive label; give it id + point Track's aria-labelledby at it)
+      Progress.Track (the aria progressbar + track visual; holds Indicator or Segments)
+        Progress.Indicator (single fill; color, or auto-color by value)
+        Progress.Segment (one slice of a multi-segment bar — value + color)
+      Progress.Value (the "{n}%" readout; custom via children or a `format` fn)
 
 ## Defaults
     size: "md"
-    color: "default"
+    color: "accent"
+    max: 100
 
 ## Example
 ```jsx
-<Progress value={75} color="success" showLabel />
-<Progress size="sm" />  {/* indeterminate */}
+// Simple:
+<Progress value={75} color="success" showValue />
+<Progress size="sm" />                                 {/* indeterminate */}
+<Progress value={80} autoColor showValue />            {/* color follows value */}
+
+// Multi-segment (Mantine-style):
+<Progress segments={[{ value: 40, color: 'success' }, { value: 30, color: 'warning' }]} />
+
+// Compound — full control:
+<Progress.Root value={62} size="lg">
+  <Progress.Label id="storage-lbl">Storage</Progress.Label>
+  <Progress.Track aria-labelledby="storage-lbl">
+    <Progress.Indicator color="warning" />
+  </Progress.Track>
+  <Progress.Value format={(pct) => `${pct}% of 50 GB`} />
+</Progress.Root>
 ```
 
 ## Composability
-- **Radix Progress** underneath — `value` (determinate) or absent (indeterminate). Standard ARIA: role=progressbar, aria-valuenow/min/max.
-- **autoColor semantic signal:** Maps value thresholds to color so consumers don't have to manually compute: 0–59=default, 60–84=warning, 85–100=success, >100=error. Useful for storage meters, budget trackers, goal progress.
-- **Indeterminate:** Omit `value` to get a continuous animated indeterminate bar. Use for unknown-duration loads.
-- **Progress vs ProgressRing:** Progress is a linear bar (horizontal). ProgressRing is circular. ProgressRing offers multi-ring stacked variants; Progress doesn't.
-- **Inside Card/StatCard:** StatCard has a `progress` prop that renders a thin inline version — use that inside StatCards instead of a separate Progress.
+- **Two APIs, one component.** The smart `<Progress>` composes the parts for you; reach for the compound parts when you need a custom layout (label above the bar, value inside, multiple bars) or multi-segment fills. Structure follows Ark UI / Chakra; `Progress.Segment` follows Mantine.
+- **`Progress.Track` is the accessible progressbar** (role=progressbar, aria-valuenow/min/max from `Root`'s value). Give it a name via `aria-label`, or a `Progress.Label` + matching `aria-labelledby`. The smart form wires this from the `label` prop / a passed `aria-label` automatically.
+- **autoColor semantic signal:** maps value thresholds to color (0–59 accent · 60–84 warning · 85–100 success · >100 error) — storage meters, budget trackers, goal progress. Pass an explicit `color` to opt out.
+- **Segments** render side-by-side, each `value` as a % of `max`; the Track's aria value still reflects `Root`'s `value`.
+- **Indeterminate:** omit `value` (or pass `null`) for the continuous sweep. Motion-reduced users get a static bar.
+- **Progress vs ProgressRing:** Progress is linear; `ProgressRing` is circular (with multi-ring stacked variants).
 
 ## Gotchas
-- Omit value (or pass undefined) for indeterminate animation
-- `autoColor` overrides `color` when `value` is set — do not pass both unless you want autoColor to win
+- Omit `value` (or pass `null`) for indeterminate.
+- Pass an explicit `color` to override `autoColor`.
+- Compound `Progress.Track` needs a name — an `aria-label`, or a `Progress.Label` whose `id` the Track's `aria-labelledby` points to. A Track with neither is an unnamed progressbar (axe will flag it).
+- `Progress.Indicator` / `Segment` / `Value` throw if rendered outside `Progress.Root`.
 
 ## Changes
+### v0.49.0
+- **BREAKING** Progress redesigned as a compound component. Renamed `showLabel` → `showValue`. The `color` neutral value `"default"` → `"accent"` (the type is now `"accent" | "success" | "warning" | "error"`). Added compound parts (`Progress.Root/Track/Indicator/Segment/Label/Value`), a `label` prop, a `max` prop, a `segments` prop (multi-segment bars), and `trackClassName`. Migrate `showLabel` → `showValue` and `color="default"` → `color="accent"` (or drop it — accent is the default).
+
 ### v0.29.0
-- **Added** `autoColor` prop — automatically shifts indicator color based on value thresholds (0-59 default, 60-84 warning, 85-100 success, >100 error)
+- **Added** `autoColor` prop — automatically shifts indicator color based on value thresholds
 
 ### v0.1.0
 - **Added** Initial release with `size`, `color`, `indeterminate` variants and optional label slot

package/docs/components/ui/radio.md

@@ -12,6 +12,7 @@
     disabled: boolean (propagates to all items)
     orientation: "horizontal" | "vertical"
     name: string (form name for all items)
+    state: "default" | "error" | "warning" | "success" (validation; sets aria-invalid on the group + tints item borders. Inherited from FormField when omitted)
 
 ### RadioGroupItem
     value: string (REQUIRED — what's selected when this item is checked)
@@ -44,14 +45,17 @@
 - **RadioGroup propagates** `disabled` to every RadioGroupItem; items can opt back in with `disabled={false}` for granular control (rare).
 - **Labels:** RadioGroupItem has no intrinsic label — pair each with `<Label htmlFor="x" />` + `<RadioGroupItem id="x" value="..." />`. Screen readers announce the group label (from FormField or aria-labelledby on RadioGroup) plus each item's label.
 - **Form libraries:** RadioGroup works with react-hook-form via Controller (onValueChange maps to field.onChange). The `name` prop puts a hidden form input per item for native form serialization.
-- **FormField integration:** RadioGroup does NOT auto-consume FormField error state. For error visuals, style the RadioGroup surround (e.g. via aria-invalid on a wrapping fieldset) — individual radios don't show red borders the way Inputs do.
+- **FormField integration:** RadioGroup now consumes FormField state (or set `state` explicitly). It sets `aria-invalid` on the group and tints each item's border to match — unified with the other form controls via the shared `FieldState` type. An explicit `state` prop wins over FormField context.
 
 ## Gotchas
 - Each RadioGroupItem needs a unique `value` prop
 - Pair each item with a Label for accessibility
-- RadioGroup does NOT auto-inherit FormField error state — handle error styling at the group level
+- RadioGroup inherits FormField state; pass `state` explicitly to override
 
 ## Changes
+### v0.49.0
+- **Added** `state` prop on RadioGroup (`FieldState = "default" | "error" | "warning" | "success"`) — unified field-state API. Sets `aria-invalid` + tints item borders, and now inherits from `FormField` context.
+
 ### v0.4.2
 - **Added** `RadioGroupProps`, `RadioGroupItemProps` type exports
 

package/docs/components/ui/select.md

@@ -7,12 +7,12 @@
 ## Props
 ### SelectTrigger
     variant: "default" | "outline" | "ghost"
-    color: "default" | "error" | "success" | "warning" (sets aria-invalid when error)
+    state: "default" | "error" | "warning" | "success" (validation; sets aria-invalid when error. Inherited from FormField when omitted)
     size: "xs" | "sm" | "md" | "lg"
 
 ## Compound Components
     Select (root — value, onValueChange, defaultValue)
-      SelectTrigger (variant/color/size go HERE, not on Select root)
+      SelectTrigger (variant/state/size go HERE, not on Select root)
         SelectValue (placeholder)
       SelectContent
         SelectGroup (optional grouping)
@@ -21,7 +21,7 @@
         SelectSeparator
 
 ## Defaults
-    SelectTrigger variant="default", color="default", size="md"
+    SelectTrigger variant="default", state="default", size="md"
 
 ## Example
 ```jsx
@@ -38,10 +38,10 @@
 
 ## Composability
 - **Radix Select** underneath — `value`/`onValueChange`/`defaultValue`/`open`/`onOpenChange` standard state.
-- **Styling props live on SelectTrigger, not Select root.** The Select root owns value/state; the Trigger owns appearance (variant/color/size). Setting `<Select size="lg">` silently does nothing — TypeScript won't catch it.
+- **Styling props live on SelectTrigger, not Select root.** The Select root owns value/state; the Trigger owns appearance (variant/state/size). Setting `<Select size="lg">` silently does nothing — TypeScript won't catch it.
 - **SelectItem requires `value`** — unique within the Select. Labels are the children of SelectItem.
 - **SelectGroup + SelectLabel:** Organize options into sections with a non-interactive section heading.
-- **FormField integration:** Set `color="error"` on SelectTrigger for error visuals. Not auto-consumed from FormField (same as Checkbox/Radio — form-library convention for select controls).
+- **FormField integration:** Set `state="error"` on SelectTrigger for error visuals, or omit it inside a `<FormField state="error">` — SelectTrigger now inherits the field state from context (explicit `state` prop wins). Unified with Input/Textarea/Checkbox/Radio/Switch/Combobox via the shared `FieldState` type.
 - **Portal + z-popover (1400):** content portals to body, stacks above Dialog/Sheet/other overlays.
 - **Select vs Combobox vs Autocomplete:** Select = short fixed list, click-to-open, no typeahead. Combobox = searchable, forced selection. Autocomplete = searchable, free text. Pick by list size and search need.
 
@@ -50,6 +50,10 @@
 - `<Select size="lg">` is silently ignored (no TypeScript error)
 
 ## Changes
+### v0.49.0
+- **BREAKING** Renamed the SelectTrigger `color` prop → `state` (unified field-state API across all form controls; type `FieldState = "default" | "error" | "warning" | "success"`). Migrate `<SelectTrigger color="error">` → `<SelectTrigger state="error">`.
+- **Added** SelectTrigger now inherits validation state from `FormField` context (was manual-only before).
+
 ### v0.31.0
 - **Added** `variant` prop on SelectTrigger: `default | outline | ghost`
 - **Added** `color` prop on SelectTrigger: `default | error | success | warning`. Sets `aria-invalid` when error.

package/docs/components/ui/switch.md

@@ -7,7 +7,7 @@
 ## Props
     checked: boolean
     onCheckedChange: (checked: boolean) => void
-    error: boolean (shows red border/bg)
+    state: "default" | "error" | "warning" | "success" (validation border/checked-track tint; error sets aria-invalid. Inherited from FormField when omitted. Distinct from `color`, the ON-track tint)
     disabled: boolean
     size: "sm" | "md" | "lg"
     color: "accent" | "success" | "warning"
@@ -35,6 +35,9 @@
 - Switch does NOT auto-consume FormField — pass `error` explicitly inside a FormField
 
 ## Changes
+### v0.49.0
+- **BREAKING** Removed the `error: boolean` prop; use `state` (`FieldState = "default" | "error" | "warning" | "success"`). Migrate `<Switch error />` → `<Switch state="error" />`. Gains `warning`/`success` and inherits from `FormField`. (`color` is unchanged — it's the ON-track tint, not validation.)
+
 ### v0.29.0
 - **Added** `size` prop: `"sm"` (18px track) | `"md"` (24px, default) | `"lg"` (28px track)
 - **Added** `color` prop: `"accent"` (default) | `"success"` | `"warning"` for checked-state color

package/docs/components/ui/table.md

@@ -16,7 +16,8 @@
     Reveal is opacity-based: buttons stay in the tab order permanently, appear on row hover AND :focus-within, and are always visible on touch (pointer-coarse). Give the column a visually-hidden header.
 
 ### TableRowLink (separate import: ui/table-row-link — client component)
-    href: string (required); stretch: boolean (default true)
+    href: string (required)
+    stretch: boolean (default: true)
     A real anchor placed in the row's primary cell (`<TableCell className="relative">`), stretched across the row via a pseudo-element — cmd/ctrl+click, middle-click, and context menu work, unlike onClick-on-row. Keyboard focus draws a row-level ring. Other interactive elements in the row need `className="relative z-[1]"`. `stretch={false}` = title-only link (keeps row text selectable).
 
 ## Compound Components

package/llms.txt

@@ -1,6 +1,6 @@
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.48.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.49.1.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 
@@ -65,6 +65,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [data-table-toolbar](docs/components/ui/data-table-toolbar.md)
 - [devalok-grain](docs/components/ui/devalok-grain.md)
 - [dialog](docs/components/ui/dialog.md)
+- [dot](docs/components/ui/dot.md): A small semantic status/indicator dot — the low-level primitive behind status pills, presence indicators, legend swatches, and `StatusDot`
 - [dropdown-menu](docs/components/ui/dropdown-menu.md)
 - [file-upload](docs/components/ui/file-upload.md)
 - [form](docs/components/ui/form.md)
@@ -83,7 +84,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [oauth-button](docs/components/ui/oauth-button.md)
 - [pagination](docs/components/ui/pagination.md)
 - [popover](docs/components/ui/popover.md)
-- [progress](docs/components/ui/progress.md)
+- [progress](docs/components/ui/progress.md): A linear progress bar
 - [progress-ring](docs/components/ui/progress-ring.md)
 - [radio](docs/components/ui/radio.md)
 - [search-input](docs/components/ui/search-input.md)
@@ -98,7 +99,6 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [stack](docs/components/ui/stack.md)
 - [stat-card](docs/components/ui/stat-card.md)
 - [stat-flash](docs/components/ui/stat-flash.md)
-- [status-dot](docs/components/ui/status-dot.md)
 - [stepper](docs/components/ui/stepper.md)
 - [surface](docs/components/ui/surface.md): The low-level elevated container primitive
 - [switch](docs/components/ui/switch.md)
@@ -141,6 +141,7 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [page-header](docs/components/composed/page-header.md)
 - [page-skeletons](docs/components/composed/page-skeletons.md): Exports: DashboardSkeleton, ProjectListSkeleton, TaskDetailSkeleton
 - [priority-indicator](docs/components/composed/priority-indicator.md)
+- [responsive-modal](docs/components/composed/responsive-modal.md)
 - [rich-chat-input](docs/components/composed/rich-chat-input.md): Compact rich text chat input for unified human+AI workspaces
 - [rich-text-editor](docs/components/composed/rich-text-editor.md): Exports: RichTextEditor, RichTextViewer
 - [schedule-view](docs/components/composed/schedule-view.md)
@@ -157,6 +158,13 @@ Format: `[name](doc path): summary`. Import paths follow `@devalok/shilp-sutra/<
 - [sidebar](docs/components/shell/sidebar.md)
 - [top-bar](docs/components/shell/top-bar.md)
 
+### ai
+- [ai-command-provider](docs/components/ai/ai-command-provider.md): Context provider for the AI command system
+- [block-renderer](docs/components/ai/block-renderer.md): Renders an ordered list of typed AI "blocks" — the structured chunks an assistant/ server emits instead of plain text
+- [command-bar](docs/components/ai/command-bar.md): A unified AI command input with three layout variants
+- [conversation](docs/components/ai/conversation.md): A scrollable AI conversation thread: user + assistant turns, streaming processing steps, an agent header, and structured content blocks (rendered via BlockRenderer) with confirm/cancel/undo action support
+- [devadoot-icon](docs/components/ai/devadoot-icon.md): The animated Devalok chakra glyph — the visual identity for the AI command system
+
 ## Tokens
 
 Categories: color, spacing (`ds-01`…), typography (`text-ds-*`), radius (`rounded-ds-*`), shadow (`shadow-raised`/`shadow-overlay`/…), motion, z-layers. Full reference: `get_tokens(category)` via MCP, or the `tokens` object in `mcp-manifest.json`.

package/make-kit/components/form.md

@@ -69,7 +69,7 @@ Use inside a custom control to consume FormField context.
 
 | Control | Manual wiring needed |
 |---|---|
-| `<Select>` / `<SelectTrigger>` | Set `color="error"` on `SelectTrigger` from your validation state. |
+| `<Select>` / `<SelectTrigger>` | Set `state="error"` on `SelectTrigger` from your validation state. |
 | `<Checkbox>`, `<Radio>`, `<Switch>` | Pair `<Label htmlFor>` manually. State is visual on the control. |
 
 ## Examples
@@ -134,7 +134,7 @@ The Input receives `aria-describedby` (linked to FormHelperText), `aria-invalid=
     <FormField state={errors.role ? 'error' : 'helper'}>
       <Label htmlFor="role">Role</Label>
       <Select>
-        <SelectTrigger id="role" color={errors.role ? 'error' : 'default'}>
+        <SelectTrigger id="role" state={errors.role ? 'error' : 'default'}>
           <SelectValue placeholder="Choose a role" />
         </SelectTrigger>
         <SelectContent>

package/make-kit/components/icon.md

@@ -14,7 +14,7 @@ For the broader icon system (which icons exist, how to register custom ones, the
 - Any inline SVG icon — inside Button slots, IconButton, Badge slots, table cells, list rows.
 - Need an interactive icon button? Use `<IconButton>`, not Icon wrapped in `<button>`.
 - Need a static cluster of related icons? Use `<IconGroup>`.
-- Need a status indicator? Use `<StatusDot>` or `<Badge dot>` — they're optimized for that.
+- Need a status indicator? Use `<Dot>` or `<Badge dot>` — they're optimized for that.
 
 Tabler-only. Don't mix icon libraries — see `foundations/icons.md` for the rationale.
 
@@ -129,7 +129,7 @@ Input's IconProvider sets size by input size: `xs` / `sm` input → `sm` icon, `
 </Stack>
 ```
 
-For most status displays prefer `<StatusDot>` — purpose-built. Use this pattern only when you need a specific icon shape.
+For most status displays prefer `<Dot>` — purpose-built. Use this pattern only when you need a specific icon shape.
 
 ## Composability
 

package/make-kit/components/overview.md

@@ -77,7 +77,7 @@ Permanent inline message?
 Status of an item?
   → <Badge>          — pill label (status / tag)
   → <StatusBadge>    — colored dot + label (discriminated union: status="online"/"away"/...)
-  → <StatusDot>      — just the colored dot
+  → <Dot>            — just the colored status/indicator dot
 
 Temporary notification?
   → toast.success / error / warning / info (imperative) — must have <Toaster /> mounted
@@ -256,7 +256,7 @@ Code?
 | Skeleton | `/ui/skeleton` |
 | Badge | `/ui/badge` |
 | StatusBadge | `/composed/status-badge` |
-| StatusDot | `/ui/status-dot` |
+| Dot | `/ui/dot` |
 | EmptyState | `/composed/empty-state` |
 
 ### Layout

package/make-kit/components/select.md

@@ -98,7 +98,7 @@ Styling lives on the **Trigger**, not on `Select` root. Setting `<Select size="l
 <FormField state={errors.role ? 'error' : 'helper'}>
   <Label htmlFor="role">Role</Label>
   <Select value={role} onValueChange={setRole}>
-    <SelectTrigger id="role" color={errors.role ? 'error' : 'default'}>
+    <SelectTrigger id="role" state={errors.role ? 'error' : 'default'}>
       <SelectValue placeholder="Choose a role" />
     </SelectTrigger>
     <SelectContent>

package/make-kit/components/table.md

@@ -233,7 +233,7 @@ Table + Badge (server-safe via Badge.Group context — verify per use) + Avatar
 
 - **Server-safe:** Table and its sub-components are pure HTML semantic wrappers. No state, no context. Use in RSC trees without `'use client'`.
 - **TableHead scope:** Headers automatically get `scope="col"` for screen-reader navigation. Don't override it.
-- **Composes with primitives:** Drop `<Badge>`, `<Avatar>`, `<IconButton>`, `<StatusDot>` inside cells. Check each component's server-safety if you need RSC compatibility.
+- **Composes with primitives:** Drop `<Badge>`, `<Avatar>`, `<IconButton>`, `<Dot>` inside cells. Check each component's server-safety if you need RSC compatibility.
 - **TableCaption:** Renders as HTML `<caption>` — screen readers announce it before content. Use it for any non-trivial table.
 
 See `foundations/typography.md` for the body / label variants inside cells, `foundations/surfaces.md` for table-in-card surface guidance.