torch-glare 2.5.3 → 2.5.5

package/docs/components/action-button.md

@@ -378,8 +378,10 @@ Inherits all variants from the Button component:
 ### Base Styles
 
 - **Square dimensions**: Equal width and height for perfect icon centering
-- **Rounded corners**: 4px border radius
+- **Rounded corners**: `radius/sm` (4px) at XS and S, `radius/lg` (8px) at M
 - **Icon-only design**: Optimized padding for icon display
+- **Action colours**: `action-secondary` at rest, `action-hover` on hover and
+  `action-disabled` when disabled — applied unless you pass an explicit `variant`
 - **Inherits Button styles**: All Button component styles and behaviors
 
 ### Custom Styling

package/docs/components/badge-field.md

@@ -335,7 +335,7 @@ export function BadgeFieldWithIcon() {
 
 ### With Error State
 
-Display validation errors with tooltip.
+Display validation errors. `errorMessage` turns on the field's negative border.
 
 ```tsx
 export function BadgeFieldWithError() {
@@ -467,9 +467,9 @@ Extends all Input element props (except size and variant).
 | size | `'XS' \| 'S' \| 'M'` | `'M'` | Field size |
 | variant | `'PresentationStyle'` | `'PresentationStyle'` | Visual variant |
 | icon | `ReactNode` | - | Leading icon |
-| errorMessage | `string` | - | Error message (shows tooltip) |
+| errorMessage | `string` | - | Marks the field invalid — any non-undefined value turns on the negative border |
 | onTable | `boolean` | `false` | Table-specific styling |
-| toolTipSide | `ToolTipSide` | - | Tooltip position |
+| toolTipSide | `ToolTipSide` | - | **Deprecated, ignored.** The error tooltip was removed; an invalid field is shown by its border alone |
 | label | `string` | - | Field label |
 | required | `boolean` | `false` | Required indicator |
 | theme | `Themes` | - | Theme override |
@@ -674,7 +674,7 @@ describe('BadgeField', () => {
 - **ARIA Labels**: Proper labels for screen readers
 - **Focus Management**: Clear focus indicators
 - **Screen Reader**: Announces selected/removed tags
-- **Error Messages**: Accessible error tooltips
+- **Error Messages**: Invalid fields are marked with the negative border token
 - **Tab Order**: Logical tab navigation
 
 ## Performance

package/docs/components/context-menu.md

@@ -230,6 +230,8 @@ function RtlMenu() {
 
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
+The panel itself does not scroll — it clips, and an inner viewport inside it does the scrolling. That keeps the panel's 4px frosted gutter fixed instead of scrolling away with the rows. Submenus behave identically and take their own `maxHeight` (same `320`px default).
+
 ```typescript
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuLabel } from "@/components/ContextMenu";
 
@@ -425,7 +427,7 @@ export const ContextMenuRadioItem: React.ForwardRefExoticComponent<ContextMenuRa
 - **Opens at the pointer**: the menu opens on right-click (`contextmenu`) at the exact cursor position, not anchored to a fixed trigger button.
 - **Second right-click closes it**: the Root is made controlled and tracks `open` in context. The Trigger listens in the capture phase, and when the menu is already open it `preventDefault()` / `stopPropagation()` and closes — so a second right-click dismisses instead of re-anchoring (which Radix handles unreliably).
 - **Auto-grouping**: by default (`autoGroup` on `ContextMenuContent`, default `true`) consecutive loose items (`ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, and `ContextMenuSub`) are automatically wrapped in a `Boxed` `ContextMenuGroup`, so they render inside a boxed container like DropdownMenu even when you do not write a group. Labels and explicit groups act as boundaries and pass through unchanged. Set `autoGroup={false}` to render children verbatim.
-- **Max height & scrolling**: the surface caps its height at `min(maxHeight, available-height)` (where `maxHeight` defaults to `320`px and `available-height` is the space Radix has after collision handling). A taller menu scrolls vertically instead of overflowing off-screen — items and groups keep their full height rather than squishing. Pass `maxHeight={N}` to change the cap.
+- **Max height & scrolling**: the surface caps its height at `min(maxHeight, available-height)` (where `maxHeight` defaults to `320`px and `available-height` is the space Radix has after collision handling). A taller menu scrolls vertically instead of overflowing off-screen — items and groups keep their full height rather than squishing. The panel clips and an inner viewport scrolls, so the panel's frosted gutter stays put. Pass `maxHeight={N}` to change the cap; `ContextMenuSubContent` accepts it too.
 - **Checkbox / radio keep the menu open**: `ContextMenuCheckboxItem` and `ContextMenuRadioItem` call `event.preventDefault()` inside `onSelect`, stopping Radix's default auto-close so users can toggle multiple options in one pass.
 - **Open-only animation**: only the open (enter) state animates (`fade-in`). There is intentionally no exit animation — holding the old DOM node during close breaks close/reposition on a second right-click, so it is omitted to keep repositioning reliable.
 - **Submenus and RTL**: nested `ContextMenuSub` / `ContextMenuSubTrigger` / `ContextMenuSubContent` are supported, and `dir="rtl"` on the Root mirrors the layout (including the submenu chevron).

package/docs/components/data-views/examples/filters.md

@@ -231,7 +231,6 @@ export default function FiltersExample() {
 
         {/* The active query, as removable chips — including the search term. */}
         <div className="border-border-presentation-global-primary border-b px-4 py-2 empty:hidden">
-          <DataViews.Filters.Summary />
         </div>
 
         <DataViews.Table />

package/docs/components/data-views/index.md

@@ -406,21 +406,13 @@ control at its neutral position emits no key at all, is under
 </DataViews.Filters>
 ```
 
-`Filters.Summary` paints whatever is active as removable chips. It reads the same context, so it
-works anywhere — most usefully **outside** the rail, where it tells the user what is filtering the
-rows they are looking at:
-
-```tsx
-<DataViews.Filters.Summary className="px-4 py-2" />
-```
-
 ### Questions this design gets asked
 
 | Question | Answer |
 | --- | --- |
 | Is there an in-view filter panel *and* a Filters tab — which is canonical? | **One surface.** `DataViews.Filters` is a single component. Render it inside a `Panel.Tab` or as a standalone bar; author against the component, not against a tab. |
 | What orders the sections? | **The order you write the children.** There is no `order` prop for filters. |
-| Does the applied-count badge count constrained *fields* or selected *values*? | **There is no count badge.** `PanelToggle` carries none. `Filters.Summary` is the equivalent, and it renders **one chip per constrained field** — Status with three values selected is one chip. |
+| Is there an applied-count badge or a chip summary of active filters? | **No.** `PanelToggle` carries no count, and there is no summary component — the controls themselves show what is set. Render your own above the rows if you want one. |
 | Do `BadgeField` chip colours and `FieldConfig.variants` share a token set? | **They never meet.** Chips come from the field's own `options`; `variants` (`BadgeVariant`) styles `enum-badge` **columns**. Filters and columns are independent. |
 
 And the behaviours worth stating because they are easy to assume wrongly:
@@ -771,14 +763,6 @@ A filter no FormBuilder field covers.
 | `render` | `(args: { value: FilterValue \| undefined; setValue: (v: FilterValue \| undefined) => void }) => ReactNode` | — | **yes** | |
 | `label` | `ReactNode` | derived from `path` | no | |
 
-### DataViews.Filters.Summary
-
-| Prop | Type | Default | Required | Notes |
-| --- | --- | --- | --- | --- |
-| `className` | `string` | — | no | |
-
-Active filters — and the search term — as removable chips. Renders `null` when there are none.
-
 ### Cell
 
 Paint one field of one row exactly as the views paint it.

package/docs/components/dropdown-menu.md

@@ -294,6 +294,8 @@ function Example() {
 
 Tall menus scroll instead of overflowing off-screen. The surface caps at `maxHeight` (default `320`px) and never exceeds the space available after collision handling. Pass `maxHeight` to change the cap.
 
+The panel itself does not scroll — it clips, and an inner viewport inside it does the scrolling. That keeps the panel's 4px frosted gutter fixed instead of scrolling away with the rows. Submenus behave identically and take their own `maxHeight`.
+
 ```typescript
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel } from "@/components/DropdownMenu";
 import { Button } from "@/components/Button";
@@ -396,6 +398,7 @@ function LongMenu() {
 |------|------|---------|-------------|
 | `variant` | `'PresentationStyle'` | `'PresentationStyle'` | Visual style variant |
 | `autoGroup` | `boolean` | `true` | Auto-wrap loose items in boxed groups |
+| `maxHeight` | `number` | `320` | Max height (px) before the submenu scrolls. Same `min(maxHeight, available-height)` cap as `DropdownMenuContent` |
 | `className` | `string` | - | Additional CSS classes |
 
 ### DropdownMenuLabel

package/docs/components/form-builder.md

@@ -96,7 +96,33 @@ panel beside the form is `FormRenderer`'s `summary`.
 ## Field components
 
 Each is a JSX child taking at least `name`, plus `label`, `placeholder`,
-`description`, `required`, `disabled`, `hidden`, `fullWidth`.
+`description`, `required`, `disabled`, `hidden`, `fullWidth`, `hints`.
+
+### Hints
+
+`hints` stacks alerts under a field — helper text, a caveat, a confirmation. Each entry mirrors
+`FieldHint`: `label`, an optional `state` of `info` (default) / `warning` / `error` / `success`, and
+an optional `icon`.
+
+```tsx
+<FormBuilder.Text
+  name="sku"
+  label="SKU"
+  required
+  hints={[
+    { state: "info", label: "Must be unique across the catalogue." },
+    { state: "warning", label: "Changing this breaks existing links." },
+  ]}
+/>
+```
+
+The validation error is not one of these — it is rendered automatically and always comes **first**,
+because it is the actionable message; your hints follow in the order given. A field with no `hints`
+renders exactly as before.
+
+Hints are ignored inside a `FormBuilder.Table` cell (and any other `bare` context): there errors
+surface as a tooltip on the control so a row stays one line tall, and stacking alerts would defeat
+that.
 
 | Component                                                                   | Input                                                                                 | Value                                                        |
 | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |

package/docs/components/header-bar.md

@@ -146,13 +146,14 @@ All standard `HTMLAttributes<HTMLDivElement>` (for example `id`, `aria-*`, `data
 |---------|-----------|-----------|------------------------|
 | `new` | `bg-blue-sparkle-alpha-50` | `text-blue-sparkle-200` | pill (`label`) → title |
 | `edit` | `bg-orange-alpha-50` | `text-orange-200` | pill (`label`) → title |
-| `detail` | `bg-white-alpha-30` | `text-white-00` | title → pill (`label`) — positions swapped |
+| `detail` | `bg-white-alpha-15` | `text-white-00` | title → pill (`label`) — positions swapped |
 
 ## Styling
 
 - **Fixed dark container**: `rounded-[14px]`, `border-black-600`, `bg-black-1000`, `p-1.5`, with a double soft shadow. The surface is always dark regardless of theme.
 - **Layout**: the root is `inline-flex`, so the chip hugs its content rather than stretching to fill its parent.
-- **Typography**: 28px, weight 510, uppercase, SF Pro with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Typography**: `typography-display-medium-medium` (28px, weight 510) with the `cv05` stylistic set. Both `label` and `title` render uppercase.
+- **Ordering**: `detail` swaps the two children in the DOM rather than reversing the row, so the pair stays correct under `dir="rtl"` and reads in order to assistive tech.
 - **Emphasis pill**: the colored badge background and text color are driven entirely by `variant` (see the Variants table). For `detail`, the pill also moves to the right side.
 
 ## TypeScript Types

package/docs/components/input-field.md

@@ -15,7 +15,7 @@ dependencies:
 
 # InputField
 
-> An enhanced input component that combines Input with integrated popover dropdowns, error tooltips, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
+> An enhanced input component that combines Input with integrated popover dropdowns, error styling, icons, and trailing actions. Perfect for complex form fields requiring additional UI elements.
 
 ## Installation
 
@@ -206,9 +206,9 @@ function PasswordField() {
 | `icon` | `ReactNode` | - | Icon to display on the left side |
 | `childrenSide` | `ReactNode` | - | Content to display on the right side |
 | `popoverChildren` | `ReactNode` | - | Content for the dropdown popover |
-| `errorMessage` | `string` | - | Error message to display in tooltip |
+| `errorMessage` | `string` | - | Marks the field invalid — any non-undefined value turns on the negative border |
 | `onTable` | `boolean` | `false` | Optimized styling for table context |
-| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | Tooltip position |
+| `toolTipSide` | `'top' \| 'right' \| 'bottom' \| 'left'` | - | **Deprecated, ignored.** The error tooltip was removed; an invalid field is shown by its border alone |
 | `theme` | `'dark' \| 'light' \| 'default'` | - | Theme variant |
 | `className` | `string` | - | Additional CSS classes |
 | `disabled` | `boolean` | `false` | Disables the input |

package/docs/components/select.md

@@ -241,7 +241,7 @@ function Uncontrolled() {
 |------|------|---------|-------------|
 | `size` | `'S' \| 'M' \| 'L' \| 'XL'` | `'M'` | Size of the trigger |
 | `variant` | `'PresentationStyle' \| 'SystemStyle'` | `'PresentationStyle'` | Visual variant |
-| `errors` | `string` | - | Error message (shows tooltip) |
+| `errors` | `string` | - | Marks the trigger invalid — any non-undefined value turns on the negative border |
 | `theme` | `Themes` | - | Theme override |
 | `icon` | `string` | - | Custom icon class |
 | `className` | `string` | - | Additional CSS classes |

package/docs/components/stepper.md

@@ -1,6 +1,6 @@
 ---
 title: Stepper
-description: Generic horizontal/vertical stepper with pending, active, completed, and error states. Composed of Stepper, Step, StepIndicator, StepConnector, StepLabel, and StepDescription.
+description: The pill-shaped multi-step indicator — three semantic types (default, success, negative), horizontal or vertical, three sizes. Composed of Stepper, Step, StepIndicator, StepConnector and StepLabel.
 component: true
 group: Forms
 keywords: [stepper, steps, wizard, progress, multi-step, vertical, horizontal]
@@ -8,9 +8,11 @@ keywords: [stepper, steps, wizard, progress, multi-step, vertical, horizontal]
 
 # Stepper
 
-A generic step-progress component for wizards, onboarding flows, and multi-section forms. Each step has four states — `pending`, `active`, `completed`, `error` — derived automatically from `activeStep` or set explicitly per `Step`.
+The step-progress component for wizards, onboarding flows, and multi-section forms, drawn as the Figma `FormStepper-1.0` pill. Each step has a semantic `type` — `default`, `success`, `negative` — and a selected state derived from `activeStep` or set explicitly per `Step`.
 
-The component is composed of `Stepper`, `Step`, `StepIndicator`, `StepConnector`, `StepLabel`, and `StepDescription`. Compare to [`FormStepper`](./form-stepper.md), which is a pill-shaped variant with no connector line.
+Not to be confused with `FormRenderer.Stepper`, which is the wizard *behaviour* (step state, validation, Back/Next) and renders this component as its rail.
+
+The component is composed of `Stepper`, `Step`, `StepIndicator`, `StepConnector` and `StepLabel`. It is the single stepper in the library — the former `FormStepper` merged into it, so its types, states and badge live here alongside the orientation, sizes and connector.
 
 ## Installation
 
@@ -33,7 +35,6 @@ import {
   StepIndicator,
   StepConnector,
   StepLabel,
-  StepDescription,
 } from '@/components/Stepper'
 ```
 
@@ -73,7 +74,7 @@ export function BasicStepper() {
 }
 ```
 
-State derivation: `index < activeStep` → `completed`, `index === activeStep` → `active`, otherwise `pending`. Pass `isCompleted`, `isActive`, or `isError` on a `Step` to override.
+State derivation: `index === activeStep` → selected. Pass `selected` on a `Step` to override it, and `type` to mark a step as `success` or `negative`.
 
 ## Examples
 
@@ -85,7 +86,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Create account</StepLabel>
-      <StepDescription>Email and password.</StepDescription>
     </div>
   </Step>
   <StepConnector />
@@ -93,7 +93,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Verify email</StepLabel>
-      <StepDescription>Check your inbox for a code.</StepDescription>
     </div>
   </Step>
   <StepConnector />
@@ -101,7 +100,6 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepIndicator />
     <div>
       <StepLabel>Done</StepLabel>
-      <StepDescription>You're all set.</StepDescription>
     </div>
   </Step>
 </Stepper>
@@ -116,7 +114,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
     <StepLabel>Account</StepLabel>
   </Step>
   <StepConnector />
-  <Step index={1} isError>
+  <Step index={1} type="negative">
     <StepIndicator />
     <StepLabel>Payment</StepLabel>
   </Step>
@@ -133,7 +131,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 ### Custom indicators
 
 ```tsx
-<Step index={0} isCompleted>
+<Step index={0} type="success">
   <StepIndicator
     completedIcon={<i className="ri-shield-check-line" />}
     errorIcon={<i className="ri-shield-cross-line" />}
@@ -145,9 +143,108 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 ### Sizes
 
 ```tsx
-<Stepper size="S" activeStep={1}> {/* 22px indicators */} </Stepper>
-<Stepper size="M" activeStep={1}> {/* 28px — default */} </Stepper>
-<Stepper size="L" activeStep={1}> {/* 34px */} </Stepper>
+<Stepper size="S" activeStep={1}> {/* 24px pill, 20px indicator */} </Stepper>
+<Stepper size="M" activeStep={1}> {/* 28px pill, 24px indicator — default, the size Figma draws */} </Stepper>
+<Stepper size="L" activeStep={1}> {/* 34px pill, 30px indicator */} </Stepper>
+```
+
+### Step Types
+
+Three semantic types. `success` and `negative` add a small status badge on the indicator (check / info icon) and use filled colors when selected. `default` uses a gray ring at rest, blue ring on hover, and a solid blue fill when selected.
+
+```tsx
+export function StepTypes() {
+  return (
+    <Stepper>
+      <Step index={0} type="default" selected={false}>
+        <StepIndicator />
+        <StepLabel>Default</StepLabel>
+      </Step>
+      <Step index={1} type="success" selected={false}>
+        <StepIndicator />
+        <StepLabel>Success</StepLabel>
+      </Step>
+      <Step index={2} type="negative" selected={false}>
+        <StepIndicator />
+        <StepLabel>Negative</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+```
+
+### Selected state
+
+```tsx
+export function SelectedSteps() {
+  return (
+    <Stepper>
+      <Step index={0} type="default" selected>
+        <StepIndicator />
+        <StepLabel>Default</StepLabel>
+      </Step>
+      <Step index={1} type="success" selected>
+        <StepIndicator />
+        <StepLabel>Success</StepLabel>
+      </Step>
+      <Step index={2} type="negative" selected>
+        <StepIndicator />
+        <StepLabel>Negative</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+```
+
+### RTL direction
+
+The pill, label spacing, and indicator badge all flip under `dir="rtl"`.
+
+```tsx
+export function RTLStepper() {
+  return (
+    <div dir="rtl">
+      <Stepper>
+        <Step index={0} type="default" selected>
+          <StepIndicator />
+          <StepLabel>افتراضي</StepLabel>
+        </Step>
+        <Step index={1} type="success">
+          <StepIndicator />
+          <StepLabel>نجاح</StepLabel>
+        </Step>
+        <Step index={2} type="negative">
+          <StepIndicator />
+          <StepLabel>خطأ</StepLabel>
+        </Step>
+      </Stepper>
+    </div>
+  )
+}
+```
+
+### Custom badge icon
+
+`StepIndicator.badgeIcon` overrides the default check / info icon for `success` / `negative` types.
+
+```tsx
+<Step index={0} type="success" selected>
+  <StepIndicator badgeIcon={<i className="ri-shield-check-line" />} />
+  <StepLabel>Verified</StepLabel>
+</Step>
+```
+
+### Custom indicator content
+
+Children of `StepIndicator` replace the auto-rendered step number.
+
+```tsx
+<Step index={0} type="default" selected>
+  <StepIndicator>
+    <i className="ri-user-line" />
+  </StepIndicator>
+  <StepLabel>Account</StepLabel>
+</Step>
 ```
 
 ## API Reference
@@ -166,15 +263,14 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 | Prop          | Type      | Default | Description                                                  |
 | ------------- | --------- | ------- | ------------------------------------------------------------ |
 | `index`       | `number`  | `0`     | Zero-based step index. Compared with `Stepper.activeStep`.   |
-| `isActive`    | `boolean` | —       | Force the active state.                                      |
-| `isCompleted` | `boolean` | —       | Force the completed state.                                   |
-| `isError`     | `boolean` | —       | Force the error state. Overrides active and completed.       |
+| `type`        | `'default' \| 'success' \| 'negative'` | `'default'` | Semantic state. `success`/`negative` fill the indicator and add a corner badge. |
+| `selected`    | `boolean` | `index === activeStep` | Force the selected state.                    |
 
 ### StepIndicator
 
 | Prop            | Type        | Default | Description                                       |
 | --------------- | ----------- | ------- | ------------------------------------------------- |
-| `icon`          | `ReactNode` | —       | Replaces the step number for the pending state.   |
+| `icon`          | `ReactNode` | —       | Replaces the step number.                         |
 | `completedIcon` | `ReactNode` | —       | Replaces the default check icon when completed.   |
 | `errorIcon`     | `ReactNode` | —       | Replaces the default close icon on error.         |
 
@@ -182,7 +278,7 @@ State derivation: `index < activeStep` → `completed`, `index === activeStep`
 
 The line between steps. No props beyond standard HTML attributes — orientation comes from the parent `Stepper`.
 
-### StepLabel / StepDescription
+### StepLabel
 
 Forward `HTMLAttributes<HTMLDivElement>`. Their colors follow the parent `Step` state automatically.
 
@@ -192,7 +288,7 @@ Forward `HTMLAttributes<HTMLDivElement>`. Their colors follow the parent `Step`
 - Active: blue informational background + focus ring.
 - Completed: green success background and ring; check icon.
 - Error: red negative background and ring; close icon.
-- Connectors: `2px` line, gray when pending, focus-blue when the preceding step is completed.
+- Connectors: `3px` rounded bar, `border-presentation-stepper-default` by default and focus-blue when `completed` is set. Vertically it centres itself under the indicator, tracking the stepper's size.
 
 ## TypeScript Types
 
@@ -204,18 +300,17 @@ type StepperVariants  = VariantProps<typeof stepperStyles>
 // { orientation?: 'horizontal' | 'vertical' }
 
 type IndicatorVariants = VariantProps<typeof stepIndicatorStyles>
-// { state?: 'pending' | 'active' | 'completed' | 'error'; size?: 'S' | 'M' | 'L' }
+// { type?: 'default' | 'success' | 'negative'; selected?: boolean; size?: 'S' | 'M' | 'L' }
 ```
 
 ## Accessibility
 
 - Wrap the stepper in a `<nav aria-label="Progress">` when it represents real navigation.
 - Use `aria-current="step"` on the active step's container when steps are interactive.
-- Don't rely on color alone for error — pair with `StepDescription` or an off-screen message.
+- Don't rely on colour alone for the negative type — pair it with an off-screen message.
 
 ## Best Practices
 
-1. Use `Stepper` when you need a connector line + numbered/iconified steps. Use `FormStepper` when you want pill-shaped buttons without a line.
+1. Add `StepConnector` between steps when you want the run of progress drawn; leave it out for a bare row of pills.
 2. Keep `Step` count to 3–5 horizontal, 3–7 vertical. Beyond that, switch to a checklist or summary.
-3. Drive state from `activeStep` in the parent — only fall back to `isActive`/`isCompleted` for non-linear flows.
-4. Provide a `StepDescription` only on vertical steppers — descriptions wrap horizontal layouts awkwardly.
+3. Drive selection from `activeStep` in the parent — only fall back to `selected` for non-linear flows.

package/docs/migration/changelog.md

@@ -26,6 +26,19 @@ npx torch-glare@latest add Button
 
 ## Release notes
 
+- **v2.5.5** — **breaking**: `DataViews.Filters.Summary` is removed with no shim; delete any
+  `<DataViews.Filters.Summary />` (render your own from `useDataViewsFilters()` if you want one).
+  Also, every `FormBuilder.*` field takes a `hints` array, so one field can
+  carry several alerts. The validation error renders first, your hints follow. See
+  [FormBuilder](../components/form-builder.md#hints). Dropdown panels (`Select`,
+  `SearchableSelect`, `SearchableTree`, `Popover`, `DropdownMenu`, `ContextMenu`) now cap to the
+  space actually on screen and scroll their list in an inner viewport instead of being clipped —
+  note `SearchableTree`'s `maxBodyHeight` default drops 320 → 200, and menu submenus gained a
+  `maxHeight` (they were previously uncapped). `InputField`, `BadgeField` and `Select` no longer
+  pop an error tooltip — an invalid control is shown by its negative border alone, and
+  `toolTipSide` is deprecated and ignored. Plus fixes to `TabSwitch` dividers,
+  `FieldSection` hint placement, the
+  `FormRenderer` stepper grid, `SlideDatePicker` theming and `PopoverItem`'s disabled state.
 - **v2.5.2** — **breaking**: `FormBuilder` now holds only the fields; the section cards, title
   header and stepper moved to `FormRenderer`. See
   [FormBuilder 2.5.2](./form-builder-2.5.2.md) for the rename table.

package/docs/reference/tailwind-plugins.md

@@ -273,6 +273,8 @@ The TORCH mode plugin provides the actual color values and theme-specific styles
 - 500+ CSS custom properties
 - Gradient and alpha channel support
 - Comprehensive color palette
+- The shared **radius**, **container** and **breakpoint** scales (exported as
+  `borderRadius`, `containers` and `screens`)
 
 ### Installation
 
@@ -280,6 +282,46 @@ The TORCH mode plugin provides the actual color values and theme-specific styles
 npm install glare-torch-mode
 ```
 
+### The radius scale
+
+`borderRadius` produces the `rounded-radius-*` classes the components are built on — Button, Badge,
+the shared `Input` field root, ActionButton, Select and TextArea all use them. The keys mirror the
+Figma `radius/*` collection:
+
+| class | value | | class | value |
+|---|---|---|---|---|
+| `rounded-radius-none` | 0px | | `rounded-radius-2xl` | 16px |
+| `rounded-radius-xs` | 2px | | `rounded-radius-3xl` | 24px |
+| `rounded-radius-sm` | 4px | | `rounded-radius-4xl` | 32px |
+| `rounded-radius-md` | 6px | | `rounded-radius-5xl` | 40px |
+| `rounded-radius-lg` | 8px | | `rounded-radius-6xl` | 48px |
+| `rounded-radius-xl` | 12px | | `rounded-radius-round` | 9999px |
+
+Deliberately **not** reusing Tailwind's own `sm`/`md`/`lg` keys: that would override the built-in
+scale, where Glare's `sm` is 4px and Tailwind's is 2px, silently restyling every existing
+`rounded-sm`.
+
+Note that `tailwind-merge` does not dedupe these classes — they are custom scale keys, not values it
+recognises. Never put a `rounded-radius-*` on a `cva` base *and* on one of its variants: both survive
+and CSS source order decides the winner. Put it only on the variants.
+
+### Tailwind v4
+
+The plugin is a plain `addBase` function, so under v4 `@plugin` registers the colour variables but
+**not** the scales — those reach Tailwind through `theme.extend` in a JS config, which v4 does not
+have. Import the theme file as well (requires **1.4.0 or newer**):
+
+```css
+@import "tailwindcss";
+@import "glare-torch-mode/theme.css";   /* must precede the @plugin rules */
+@plugin "glare-torch-mode";
+```
+
+Without it `rounded-radius-*` is never generated and `sm:` / `@md:` fall back to Tailwind's values.
+Two v4-only caveats: the container scale is shared with `max-w-*`, so `--container-md` also sets
+`max-w-md` to 650px; and the plugin's `--radius-*` variables land in v4's own border-radius
+namespace — matching values, but `px` where Tailwind uses `rem`.
+
 ### Setup (Required with mapping-color-system)
 
 ```ts

package/docs/tutorials/getting-started.md

@@ -104,6 +104,13 @@ Add the following to your `global.css` file:
    (e.g. Badge renders with no background). Keep it directly under
    @import "tailwindcss". */
 @import "mapping-color-system-v4/tailwindVars.css";
+/* Required, and needs glare-torch-mode >= 1.4.0. The plugin only registers the colour
+   variables; the radius scale, container sizes and breakpoints reach Tailwind through
+   `theme.extend` in a JS config, which v4 does not have. Without this the
+   `rounded-radius-*` classes are never generated (square corners on Button, Badge,
+   Input, ActionButton, Select, TextArea) and `sm:` / `@md:` fall back to Tailwind's
+   own values. Same @import-ordering rule as above applies. */
+@import "glare-torch-mode/theme.css";
 @plugin "glare-torch-mode";
 @plugin "tailwind-scrollbar-hide";
 @plugin "tailwindcss-animate";
@@ -111,6 +118,14 @@ Add the following to your `global.css` file:
 @plugin "mapping-color-system-v4";
 ```
 
+Two version-4-only caveats:
+
+- Tailwind 4 shares the container scale with `max-w-*`, so `--container-md` also sets `max-w-md`
+  to 650px.
+- The plugin sets `--radius-*` on `:root`, which is Tailwind 4's own border-radius namespace. The
+  values match its defaults (2/4/6/8/12/16/24/32px) but are declared in `px` where Tailwind uses
+  `rem`, so they diverge if you change the root font size.
+
 > ⚠️ **Common failure:** if your Badge (or any component using
 > `bg-background-presentation-*` colors) renders with no background, the
 > `tailwindVars.css` `@import` is almost certainly positioned **after** the
@@ -130,6 +145,8 @@ Then configure your `tailwind.config.js`:
 
 ```js
 const { plugin, mappingVars } = require('mapping-color-system')
+// Design tokens plus the shared radius / container / screen scales.
+const torchMode = require('glare-torch-mode')
 
 module.exports = {
     content: [
@@ -139,26 +156,22 @@ module.exports = {
     theme: {
         extend: {
             colors: mappingVars,
-            containers: {
-                xs: "320px",
-                sm: "600px",
-                md: "768px",
-                lg: "1024px",
-                xl: "1280px",
-                "2xl": "1536px",
-            },
+            borderRadius: torchMode.borderRadius,
+            containers: torchMode.containers,
         },
     },
+    // Top level, not inside extend — this replaces Tailwind's breakpoints.
+    screens: torchMode.screens,
     plugins: [
         plugin,
         require('@tailwindcss/container-queries'),
         require('tailwindcss-animate'),
         require('tailwind-scrollbar-hide'),
         require('glare-typography'),
-        require('glare-torch-mode'),
+        torchMode,
         function ({ addVariant }) {
-            addVariant("rtl", '&[dir="rtl"]');
-            addVariant("ltr", '&[dir="ltr"]');
+            addVariant("rtl", ['&[dir="rtl"]', '[dir="rtl"] &']);
+            addVariant("ltr", ['&[dir="ltr"]', '[dir="ltr"] &']);
         },
     ],
 };
@@ -168,6 +181,14 @@ Important:
 - Specify the component path in the `content` array matching your `glare.json` path
 - Add all plugins to the `plugins` array
 - Add `mappingVars` to the `extend.colors` object
+- Take `borderRadius`, `containers` and `screens` from `glare-torch-mode` rather than hardcoding
+  them. `borderRadius` is what produces the `rounded-radius-*` classes the components are built on;
+  without it Button, Badge, Input, ActionButton, Select and TextArea render with square corners.
+- Put `screens` at the **top level**, not inside `extend`, so Glare's breakpoints replace
+  Tailwind's rather than being added alongside them (`sm` is 600px, not 640px).
+- Register `rtl` / `ltr` with **both** selectors. `&[dir="rtl"]` alone only matches an element that
+  carries the attribute itself, so an `rtl:` class on a component nested inside an RTL wrapper never
+  applies.
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "type": "module",
   "license": "MIT",
   "description": "A copy-in React component library (TypeScript + Radix UI + Tailwind CSS). Its CLI copies component source directly into your project — you own the code.",