@cube-dev/ui-kit 0.201.0 → 0.203.0

package/docs/components/fields/PasswordInput.md

@@ -23,8 +23,10 @@ A password input is a specialized text field that masks user input to protect se
 - **`icon`** — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input (before toggle button)
+- **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, opened on hover over the field box and on keyboard focus. A disabled input with a tooltip stays focusable, so the keyboard reaches it too. See [TextInput](./TextInput.md#with-a-tooltip) for the behaviour.
 - **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading icons
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`current-password`, `new-password`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`inputProps`** `Props` — Direct props passed to the native input element, merged over the props React Aria generates: a key you set wins, and event handlers are chained rather than replaced. The explicit `isDisabled`, `maxLength`, `minLength`, `autoFocus` and `autoComplete` props win over the same attributes in `inputProps` when they are set; one left unset keeps the `inputProps` value
 - **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
@@ -36,9 +38,11 @@ A password input is a specialized text field that masks user input to protect se
 
 #### Keyboard Events
 
-`onKeyDown` and `onKeyUp` are attached to the `<input>` by React Aria's `useTextField`. PasswordInput has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels only what the browser would do with the key, such as typing the character or submitting a surrounding form on `Enter`. The visibility toggle is a separate button and never sees the input's keys.
+`onKeyDown` and `onKeyUp` are attached to the `<input>` by React Aria's `useTextField`. PasswordInput has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels what the browser would do with the key, such as typing the character or submitting a surrounding form on `Enter`. The visibility toggle is a separate button and never sees the input's keys.
 
-The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` the key stops at the input: React Aria stops its propagation after your handler. A parent's `onKeyDown` no longer sees it, and neither does a surrounding `Dialog`, so `Escape` stops closing it. Call `e.continuePropagation()` for the keys that should travel on:
+The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` React Aria stops the key's propagation after your handler: a parent's `onKeyDown` no longer sees it. Call `e.continuePropagation()` for the keys that should travel on.
+
+`Escape` and `Tab` are the exception, as in every field: they go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`. When your handler acts on one, call `e.preventDefault()` and it stays at the input. To sign in on `Enter`:
 
 ```jsx
 <PasswordInput
@@ -47,14 +51,12 @@ The handler receives React Aria's keyboard event rather than a plain React one,
     if (e.key === 'Enter') {
       e.preventDefault(); // keep a surrounding form from submitting
       signIn();
-    } else {
-      e.continuePropagation(); // let Escape still close a Dialog
     }
   }}
 />
 ```
 
-The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler.
+The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler. In all of them, a prevented `Escape` or `Tab` stays at the input.
 
 ### Base Properties
 
@@ -86,11 +88,8 @@ Customizes the password input field specifically.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 
@@ -98,10 +97,12 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`focused`** `boolean` — Whether the input has focus
 - **`disabled`** `boolean` — Whether the password input is disabled
+- **`readonly`** `boolean` — Whether the password input is read-only: a recessed fill and a softer border, except in high contrast, and no hover state
 - **`invalid`** `boolean` — Whether the password input has validation errors
 - **`valid`** `boolean` — Whether the password input is valid
 - **`hovered`** `boolean` — Whether the password input is being hovered
 - **`inside-form`** `boolean` — Whether the password input is inside a form field
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 

package/docs/components/fields/PeriodPicker.md

@@ -63,12 +63,8 @@ Supports all [Field properties](../../FieldProperties.md)
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ## Examples
 

package/docs/components/fields/Picker.md

@@ -59,7 +59,8 @@ Choose a different component when the interaction has another shape:
 - **`listBoxStyles`** `Styles` — Custom styles for the ListBox within the popover
 - **`popoverStyles`** `Styles` — Custom styles for the popover container
 - **`triggerStyles`** `Styles` — Custom styles for the trigger button
-- **`triggerTooltip`** `string | TooltipProps` — Tooltip for the trigger button (separate from `labelTooltip`)
+- **`tooltip`** `string | TooltipProps` — Tooltip for the trigger button (separate from `labelTooltip`)
+- **`triggerTooltip`** `string | TooltipProps` — _(deprecated)_ Use `tooltip`.
 - **`triggerDescription`** `string` — Description for the trigger button (separate from field description)
 - **`shouldFlip`** `boolean` — Whether to flip the popover placement when it overflows
 - **`placement`** `Placement` (default: `bottom start`) — Placement of the popover relative to the anchor, as a React Aria placement string (e.g. `'bottom start'`, `'top end'`)
@@ -144,11 +145,8 @@ Customizes the footer area when `footer` prop is provided.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 

package/docs/components/fields/RadioGroup.md

@@ -56,7 +56,7 @@ A `button`- or `tabs`-type radio renders an [Item](../content/Item.md), so it ta
 - **`description`**, **`descriptionPlacement`**, **`descriptionProps`** — Secondary line, placed `inline` (default) or `block`
 - **`tooltip`** — Tooltip content, or `true` to show one only when the label is truncated. A button radio defaults to `true`; its label truncates only when the radio gets less room than it (an explicit `width`, say), and never with a `block` description, which keeps the label at full width. A classic radio's label wraps instead of truncating, so it shows a tooltip only when given content. Either way a disabled option still shows its tooltip — a good place to say why it is unavailable. Tooltips open on hover and when the option takes keyboard focus, and describe its input to screen readers. A disabled option whose tooltip can open stays focusable for that reason: it is marked `aria-disabled` rather than natively disabled, so a plain `<form>` submits it when it is selected, and it stays unselectable (see [Keyboard Navigation](#keyboard-navigation)). The info badge next to the group's label is the group's `labelTooltip`
 - **`hotkeys`**, **`keyboardShortcutProps`** — Keyboard shortcut that selects the option, rendered as a hint
-- **`isLoading`**, **`loadingSlot`** — Replaces a slot with a spinner and disables the option
+- **`isLoading`**, **`loadingSlot`** — Replaces a slot with a spinner and disables the option, unless the radio itself sets `isDisabled={false}`
 - **`highlight`**, **`highlightCaseSensitive`**, **`highlightStyles`** — Highlights a substring of the label
 - **`level`** — Heading level for the label when `buttonType` is `card` or `header`
 - **`labelRef`** — Ref to the label element
@@ -91,12 +91,8 @@ Customizes the radio group container specifically.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Modifiers
 
@@ -106,6 +102,9 @@ The `mods` property accepts the following modifiers you can override:
 - **`tabs`** `boolean` — Whether the radio group uses tabs styling
 - **`inside-form`** `boolean` — Whether the radio group is inside a form field
 - **`side-label`** `boolean` — Whether the label is positioned at the side
+- **`fill-width`** `boolean` — Set when the group's style props size its field's width (`width`, `inlineSize`, `flex*`); the group then fills it
+
+Each `Radio` carries **`readonly`** while its group is `isReadOnly`. A classic radio then shows a recessed circle with a dark dot instead of the brand color; a button or tabs radio keeps its look. Neither takes a hover state.
 
 ## Variants
 

package/docs/components/fields/SearchComboBox.md

@@ -46,7 +46,7 @@ Choose a different component when the interaction has another outcome:
 - **`onOpenChange`** `(isOpen: boolean) => void` — Fired when the popover opens or closes
 - **`onFocus`** `() => void` — Fired when focus enters the component
 - **`onBlur`** `() => void` — Fired when focus leaves the component
-- **`onKeyDown`** `(e: KeyboardEvent) => void` — Fired when a key is pressed on the input, before the component's own key handling. Call `e.preventDefault()` to skip that handling for the key: a prevented `Enter` selects nothing and does not call `onSubmit`, a prevented `ArrowDown` does not open the popover. The event is React Aria's keyboard event, whose propagation stops at the input unless the handler calls `e.continuePropagation()`
+- **`onKeyDown`** `(e: KeyboardEvent) => void` — Fired when a key is pressed on the input, before the component's own key handling. Call `e.preventDefault()` to skip that handling for the key: a prevented `Enter` selects nothing and does not call `onSubmit`, a prevented `ArrowDown` does not open the popover. The event is React Aria's keyboard event. `Escape` and `Tab` go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`, unless SearchComboBox acts on them or the handler prevents them. It acts on `Escape` while the list is open or the input has text: it closes the list, or clears the text, or, when `isClearable` is off, keeps the browser from clearing it, so the `Escape` that closes the dialog is the one pressed with the input empty. Other keys stop at the input unless the handler calls `e.continuePropagation()`
 - **`prefix`** `ReactNode` — Content rendered before the input
 - **`suffix`** `ReactNode` — Content rendered after the input
 - **`suffixPosition`** `'before' | 'after'` (default: `before`) — Position of suffix relative to status icons
@@ -115,11 +115,8 @@ Customizes section heading elements within grouped suggestions.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 
@@ -128,6 +125,7 @@ The `mods` property accepts the following modifiers you can override:
 - **`invalid`** `boolean` — Applied when validation state is invalid
 - **`valid`** `boolean` — Applied when validation state is valid
 - **`disabled`** `boolean` — Applied when the component is disabled
+- **`readonly`** `boolean` — Applied when the component is read-only: a recessed fill and a softer border, except in high contrast
 - **`focused`** `boolean` — Applied when the input has focus
 - **`loading`** `boolean` — Applied when the loading indicator is visible
 - **`prefix`** `boolean` — Applied when prefix content is present

package/docs/components/fields/SearchInput.md

@@ -23,9 +23,11 @@ A search input provides a specialized text field for search functionality, featu
 - **`icon`** `ReactElement` — Icon element rendered before the input (default: search icon)
 - **`prefix`** `ReactNode` — Content rendered before the input
 - **`suffix`** — Input decoration after the main input (before clear button)
+- **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, opened on hover over the field box and on keyboard focus. A disabled input with a tooltip stays focusable, so the keyboard reaches it too. See [TextInput](./TextInput.md#with-a-tooltip) for the behaviour. While it is open, the first `Escape` closes it and leaves the text; the next one clears it
 - **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading state icons
 - **`isClearable`** `boolean` (default: `false`) — Whether the search input shows a clear button while it has text. `Escape` clears the input either way
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`off` to suppress autofill on a filter field). The lowercase `autocomplete` alias is deprecated.
 - **`inputProps`** `Props` — Direct props passed to the native input element, merged over the props React Aria generates: a key you set wins, and event handlers are chained rather than replaced
 - **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
@@ -66,11 +68,8 @@ Customizes the search input field specifically.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 
@@ -78,10 +77,12 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`focused`** `boolean` — Whether the input has focus
 - **`disabled`** `boolean` — Whether the search input is disabled
+- **`readonly`** `boolean` — Whether the search input is read-only: a recessed fill and a softer border, except in high contrast, and no hover state
 - **`invalid`** `boolean` — Whether the search input has validation errors
 - **`valid`** `boolean` — Whether the search input is valid
 - **`hovered`** `boolean` — Whether the search input is being hovered
 - **`inside-form`** `boolean` — Whether the search input is inside a form field
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 
@@ -91,6 +92,17 @@ The `mods` property accepts the following modifiers you can override:
 - `medium` - Standard size
 - `large` - Emphasized size for prominent search functionality
 
+### Shapes
+
+- `default` - A rounded field box with a border
+- `plain` - A square field box with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. The border still marks focus and validity.
+
+```jsx
+<Block styles={{ border: 'bottom', fill: '#surface' }}>
+  <SearchInput shape="plain" width="100%" aria-label="Search models" placeholder="Search models" />
+</Block>
+```
+
 ## Examples
 
 ### Basic Usage
@@ -181,7 +193,7 @@ const [searchValue, setSearchValue] = useState('');
 ### Keyboard Navigation
 
 - `Tab` - Moves focus to the search input. The clear button is skipped: it is not in the `Tab` order
-- `Escape` - Clears the search input and calls `onClear`, whether or not `isClearable` is set, as in a native search field. With the input already empty, `Escape` is left to the surrounding UI, so a `Dialog` closes on the next press
+- `Escape` - Clears the search input and calls `onClear`, whether or not `isClearable` is set, as in a native search field. With the input already empty, `Escape` is left to the surrounding UI, so a `Dialog` closes on the next press. An `onKeyDown` that prevents it keeps it at the input, as in every field; one that doesn't leaves `Escape` and `Tab` going on to the surrounding UI
 - `Enter` - Submits search or triggers onSubmit callback
 - All standard text input keyboard shortcuts work for text entry
 

package/docs/components/fields/Select.md

@@ -161,11 +161,8 @@ Customizes individual option items in the dropdown.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 

package/docs/components/fields/Slider.md

@@ -10,7 +10,6 @@ These properties allow direct style application without using the `styles` prop:
 
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
 
 ## Examples
 
@@ -40,7 +39,6 @@ Pass `isValid` or `isInvalid` to tint the track fill and the thumb.
 - **`showValueLabel`** `boolean` — Whether the value label is displayed (defaults to `true` when `label` is present)
 - **`getValueLabel`** `(value: number) => string` — Custom function to format the value label
 - **`formatOptions`** `Intl.NumberFormatOptions` — Number format options for the value label display
-- **`inputWidth`** `string` — Width of the input area
 - **`trackStyles`** `Styles` — Custom styles for the track element
 - **`thumbStyles`** `Styles` — Custom styles for the thumb element
 - **`thumbTokens`** `Tokens` — Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color)

package/docs/components/fields/Switch.md

@@ -20,6 +20,7 @@ A switch allows users to toggle between two states: on and off. It provides imme
 - **`isSelected`** `boolean` (default: `false`) — Whether the switch is selected (controlled)
 - **`defaultSelected`** `boolean` (default: `false`) — Whether the switch is selected by default (uncontrolled)
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Switch size
+- **`tooltip`** `string | TooltipProviderProps` — Tooltip shown on hover over the switch and its inline label, including while disabled. A string, or `TooltipProvider` props such as `title` and `placement`. It also opens when the switch takes keyboard focus, and describes its input to screen readers. A disabled switch with a tooltip stays in the Tab order, marked `aria-disabled` rather than natively disabled, so the keyboard reaches the tooltip too, and a plain `<form>` submits it when it is on. The info badge next to a field label is `labelTooltip`
 - **`onChange`** — Callback fired when the switch value changes
 - **`onFocus`** — Callback fired when the switch receives focus
 - **`onBlur`** — Callback fired when the switch loses focus
@@ -58,7 +59,6 @@ These properties allow direct style application without using the `styles` prop:
 
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
 
 ### Modifiers
 
@@ -66,6 +66,7 @@ The `mods` property accepts the following modifiers you can override:
 
 - **`checked`** `boolean` — Whether the switch is in the "on" state
 - **`disabled`** `boolean` — Whether the switch is disabled
+- **`readonly`** `boolean` — Whether the switch is read-only: a recessed track with a dark thumb instead of the brand fill, and no hover state
 - **`invalid`** `boolean` — Whether the switch has validation errors
 - **`valid`** `boolean` — Whether the switch is valid
 - **`focused`** `boolean` — Whether the switch has focus
@@ -109,6 +110,18 @@ Keep the label the same in both states. The switch announces its own on/off stat
 
 ### Disabled State
 
+### With a Tooltip
+
+A disabled switch still shows its tooltip, which makes it a good place to say why it can't be changed. While it has a tooltip, it stays focusable and is marked `aria-disabled` instead of natively disabled, so keyboard users can read the reason too; `Space` and clicks still change nothing. Without a tooltip, a disabled switch is natively disabled and `Tab` skips it.
+
+```jsx
+<Switch isDisabled tooltip="Add a schedule to turn this on">
+  Run on schedule
+</Switch>
+```
+
+Prefer `tooltip` to wrapping the switch in `TooltipProvider`: while disabled, a switch takes no trigger props from a wrapper, so that tooltip never opens.
+
 ### Loading State
 
 ### All States Overview
@@ -117,9 +130,9 @@ Keep the label the same in both states. The switch announces its own on/off stat
 
 ### Keyboard Navigation
 
-- `Tab` - Moves focus to the switch
+- `Tab` - Moves focus to the switch. A disabled switch takes focus only while it has a `tooltip`, which then opens
 - `Space` - Toggles the switch state
-- `Enter` does not toggle the switch. Inside a form with a submit button, the browser submits the form instead.
+- `Enter` does not toggle the switch. Inside a form with a submit button, the browser submits the form instead, unless the switch is disabled.
 
 ### Screen Reader Support
 

package/docs/components/fields/TagInput.md

@@ -53,7 +53,7 @@ A multi-value field. The user types a value into a single-line input and commits
 - **`onOpenChange`** `(isOpen: boolean) => void` — Called when the suggestions popover opens or closes
 - **`onFocus`** `() => void` — Called when focus enters the component: the input, a chip or the popover
 - **`onBlur`** `() => void` — Called when focus leaves the component entirely, after the typed text is committed and before the press that moved focus is handled, so a Save click sees the new value
-- **`onKeyDown`** `(e: KeyboardEvent) => void` — Called when a key is pressed in the input, before the component handles it. Call `e.preventDefault()` to stop the built-in handling
+- **`onKeyDown`** `(e: KeyboardEvent) => void` — Called when a key is pressed in the input, before the component handles it. Call `e.preventDefault()` to stop the built-in handling. `Escape` and `Tab` go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`, unless TagInput acts on them or you prevent them
 - **`inputRef`**, **`wrapperRef`**, **`popoverRef`**, **`listBoxRef`** `RefObject` — Refs to the input, the bordered input box, the popover and its listbox. The forwarded `ref` points at the root, which holds the input and the chips
 - **`mods`** `Record<string, boolean>` — Modifiers for the bordered input box, see [Modifiers](#modifiers)
 
@@ -90,7 +90,7 @@ A standalone TagInput renders field chrome by default, so refused values show th
 
 #### styles
 
-Customizes the root element, a column holding the input box and the chips.
+Styles the input element, a column holding the input box and the chips. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
 
 #### wrapperStyles
 
@@ -144,12 +144,8 @@ Customizes option section headings.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
-- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
 
 ### Modifiers
 
@@ -157,6 +153,7 @@ The `mods` prop accepts the following modifiers for the bordered input box:
 
 - **`focused`** `boolean` — Forces focus ring appearance.
 - **`disabled`** `boolean` — Forces disabled appearance.
+- **`readonly`** `boolean` — Set while `isReadOnly`: a recessed fill and a softer border, except in high contrast.
 - **`invalid`** `boolean` — Forces invalid state styling.
 - **`valid`** `boolean` — Forces valid state styling.
 - **`prefix`** `boolean` — Indicates presence of prefix content.

package/docs/components/fields/TextArea.md

@@ -18,11 +18,8 @@ The TextArea component is a multi-line text input that allows users to enter and
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ## Variants
 
@@ -44,9 +41,11 @@ These properties allow direct style application without using the `styles` prop:
 - **`icon`** `ReactElement` — Icon element rendered before the input
 - **`prefix`** `ReactNode` — Input decoration before the main input
 - **`suffix`** `ReactNode` — Input decoration after the main input
+- **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, opened on hover over the field box and on keyboard focus. A disabled input with a tooltip stays focusable, so the keyboard reaches it too. See [TextInput](./TextInput.md#with-a-tooltip) for the behaviour.
 - **`suffixPosition`** `'before' | 'after'` (default: `'before'`) — Position of suffix relative to validation/loading state icons
 - **`resize`** `string` — CSS resize value (e.g. `'vertical'`, `'none'`)
 - **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`street-address`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required
@@ -65,9 +64,11 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Keyboard Events
 
-`onKeyDown` and `onKeyUp` are attached to the `<textarea>` by React Aria's `useTextField`. TextArea has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels only what the browser would do with the key, such as inserting a newline on `Enter`.
+`onKeyDown` and `onKeyUp` are attached to the `<textarea>` by React Aria's `useTextField`. TextArea has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels what the browser would do with the key, such as inserting a newline on `Enter`.
 
-The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` the key stops at the textarea: React Aria stops its propagation after your handler. A parent's `onKeyDown` no longer sees it, and neither does a surrounding `Dialog`, so `Escape` stops closing it. Call `e.continuePropagation()` for the keys that should travel on:
+The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` React Aria stops the key's propagation after your handler: a parent's `onKeyDown` no longer sees it. Call `e.continuePropagation()` for the keys that should travel on.
+
+`Escape` and `Tab` are the exception, as in every field: they go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`. When your handler acts on one, call `e.preventDefault()` and it stays at the textarea:
 
 ```jsx
 <TextArea
@@ -76,14 +77,15 @@ The handler receives React Aria's keyboard event rather than a plain React one,
     if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
       e.preventDefault(); // no newline
       send();
-    } else {
-      e.continuePropagation(); // let Escape still close a Dialog
+    } else if (e.key === 'Escape' && isEditing) {
+      e.preventDefault(); // keep a surrounding Dialog open
+      cancelEdit();
     }
   }}
 />
 ```
 
-The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler.
+The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler. In all of them, a prevented `Escape` or `Tab` stays at the input.
 
 ### Base Properties
 

package/docs/components/fields/TextInput.md

@@ -24,11 +24,13 @@ A text input component that allows users to input custom text entries with a key
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input
 - **`suffixPosition`** `'before' | 'after'` (default: `before`) — Position of suffix relative to validation/loading state icons
+- **`tooltip`** `string | TooltipProviderProps` — The input's own tooltip, a short hint about the value. It opens on hover over the field box and on keyboard focus, and describes the input. A string, or `TooltipProvider` props such as `title` and `placement` (`top` by default). A disabled input with a tooltip stays in the Tab order, marked `aria-disabled` and read-only rather than natively disabled, so the keyboard reaches the tooltip too. The info badge next to a field label is `labelTooltip`. See [With a Tooltip](#with-a-tooltip)
 - **`type`** `'text' | 'password' | 'email' | 'url' | 'tel' | 'search'` (default: `text`) — Input type
 - **`multiLine`** `boolean` (default: `false`) — Whether the input is multiline (textarea)
 - **`rows`** `number` — Number of visible rows for multiline input
 - **`resize`** `string` — CSS resize value for multiline input (e.g. `'vertical'`, `'none'`)
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`shape`** `'default' | 'plain'` (default: `default`) — Shape of the field box. `plain` is square with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. Its border keeps its width and shows on focus and in a valid or invalid state, so nothing shifts
 - **`autoComplete`** `string` — HTML [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) token that tells the browser what to autofill (`email`, `username`, `off`, …). The lowercase `autocomplete` alias is deprecated.
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required
@@ -45,9 +47,11 @@ A text input component that allows users to input custom text entries with a key
 
 #### Keyboard Events
 
-`onKeyDown` and `onKeyUp` are attached to the `<input>` by React Aria's `useTextField`. TextInput has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels only what the browser would do with the key, such as typing the character or submitting a surrounding form on `Enter`.
+`onKeyDown` and `onKeyUp` are attached to the `<input>` by React Aria's `useTextField`. TextInput has no key handling of its own, so the handler simply receives the event: `e.preventDefault()` cancels what the browser would do with the key, such as typing the character or submitting a surrounding form on `Enter`.
 
-The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` the key stops at the input: React Aria stops its propagation after your handler. A parent's `onKeyDown` no longer sees it, and neither does a surrounding `Dialog`, so `Escape` stops closing it. Call `e.continuePropagation()` for the keys that should travel on:
+The handler receives React Aria's keyboard event rather than a plain React one, and once you pass `onKeyDown` React Aria stops the key's propagation after your handler: a parent's `onKeyDown` no longer sees it. Call `e.continuePropagation()` for the keys that should travel on.
+
+`Escape` and `Tab` are the exception, as in every field: they go on to ancestors, so a surrounding `Dialog` still closes on `Escape` and moves focus on `Tab`. When your handler acts on one, call `e.preventDefault()` and it stays at the input:
 
 ```jsx
 <TextInput
@@ -56,14 +60,15 @@ The handler receives React Aria's keyboard event rather than a plain React one,
     if (e.key === 'Enter') {
       e.preventDefault(); // keep a surrounding form from submitting
       commit();
-    } else {
-      e.continuePropagation(); // let Escape still close a Dialog
+    } else if (e.key === 'Escape') {
+      e.preventDefault(); // keep a surrounding Dialog open
+      revert();
     }
   }}
 />
 ```
 
-The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler.
+The fields that do handle keys themselves (`ComboBox`, `SearchComboBox`, `TagInput`, `CommandTextArea`) run your `onKeyDown` first and skip their own handling for a key you prevent. `NumberInput` is the exception: React Aria runs its stepping and `Enter` commit before your handler. In all of them, a prevented `Escape` or `Tab` stays at the input.
 
 ### Base Properties
 
@@ -77,7 +82,7 @@ Supports all [Field properties](../../FieldProperties.md)
 
 #### styles
 
-Customizes the root element of the component.
+Styles the input element. Its style props place and size the field: see [Field properties](../../FieldProperties.md).
 
 **Sub-elements:**
 
@@ -100,11 +105,8 @@ Additional HTML props passed to the input wrapper container.
 
 These properties allow direct style application without using the `styles` prop:
 
-- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
 - **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
 - **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
-- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
-- **Color:** `color`, `fill`, `fade`, `image`
 
 ### Modifiers
 
@@ -113,12 +115,14 @@ The `mods` prop accepts the following modifiers you can override:
 - **`focused`** `boolean` — Forces focus ring appearance.
 - **`hovered`** `boolean` — Forces hover appearance.
 - **`disabled`** `boolean` — Forces disabled appearance.
+- **`readonly`** `boolean` — Set while `isReadOnly`: a recessed fill and a softer border, except in high contrast, and no hover state.
 - **`invalid`** `boolean` — Forces invalid state styling.
 - **`valid`** `boolean` — Forces valid state styling.
 - **`loadable`** `boolean` — Set when a `loadingIndicator` is given. The loading icon itself follows `isLoading`, which has no modifier.
 - **`multiline`** `boolean` — Set for a multiline input.
 - **`prefix`** `boolean` — Indicates presence of prefix content.
 - **`suffix`** `boolean` — Indicates presence of suffix content.
+- **`shape`** `'default' | 'plain'` — Set from `shape`: `plain` drops the radius, and the border colour at rest.
 
 ## Variants
 
@@ -137,6 +141,17 @@ The `mods` prop accepts the following modifiers you can override:
 - `medium` – Standard height for most use cases
 - `large` – Emphasized height for important inputs
 
+### Shapes
+
+- `default` – A rounded field box with a border
+- `plain` – A square field box with no border at rest, for a field set flush in a container that draws its edges, such as a toolbar or a panel header. The border still marks focus and validity. See `SearchInput`'s Plain story.
+
+```jsx
+<Block styles={{ border: 'bottom' }}>
+  <TextInput shape="plain" width="100%" aria-label="Title" placeholder="Untitled" />
+</Block>
+```
+
 ## Examples
 
 ### Basic Usage
@@ -162,6 +177,33 @@ import { IconMail } from '@tabler/icons-react';
 />
 ```
 
+### With a Tooltip
+
+`tooltip` gives an input without a visible label a short hint, such as what an empty value means or why the field is disabled. It is anchored to the field box, prefix and suffix included, so it never covers the text being typed.
+
+```jsx
+<TextInput aria-label="Axis minimum" placeholder="Auto" tooltip="Empty is the lowest value in the data" />
+```
+
+| When | What happens |
+| --- | --- |
+| The pointer hovers the field box | Opens after the tooltip delay |
+| `Tab` moves focus to the input | Opens at once |
+| A click or tap into the input | Doesn't open, and an open one closes: the user is about to type |
+| Any key on the input | Closes until the next hover or keyboard focus |
+| `Escape` while it is open | Closes the tooltip only. The key goes no further, so it doesn't clear a `SearchInput` or close a surrounding dialog |
+| The input loses focus, or the pointer leaves | Closes |
+
+A disabled field still shows its tooltip, which makes it the place to say why it can't be changed. While it has a tooltip it stays focusable, marked `aria-disabled` and read-only instead of natively disabled, so keyboard users can read the reason too. It takes no text, `NumberInput` doesn't step, `Enter` submits nothing, and a click on it or on its label doesn't focus it, as with a natively disabled field. Screen readers announce it as disabled and read-only. Not being natively disabled, its value is part of a plain `<form>`'s submitted data, except `NumberInput`'s, which submits through a hidden input that is disabled with the field. A ui-kit `Form` that handles its own submission is not affected. Without a tooltip, a disabled input is natively disabled and `Tab` skips it.
+
+```jsx
+<NumberInput isDisabled aria-label="Font size" tooltip="Turn data labels on to change this" />
+```
+
+Keep the tooltip a hint. It is never the field's name (give the input a `label` or `aria-label`), an error (`errorMessage`) or anything the user needs to fill the field in (`description`): touch users never see it. When keyboard users must learn why a field can't be edited and a tooltip is not enough, show it as a `description`, or use `isReadOnly`. Prefer `tooltip` to wrapping the input in `TooltipProvider`: a disabled input takes no trigger props from a wrapper, so that tooltip never opens.
+
+To switch the tooltip off and on while the input can have focus, keep `tooltip` set with a non-empty `title` and toggle its `isDisabled` (`tooltip={{ title, isDisabled: !isEmpty }}`). Setting and clearing `tooltip`, or emptying its `title`, remounts the field box, and the input loses focus mid-typing.
+
 ### Multiline Text Area
 
 ```jsx
@@ -188,7 +230,7 @@ import { IconMail } from '@tabler/icons-react';
 
 ### Keyboard Navigation
 
-- `Tab` – Moves focus to the input field
+- `Tab` – Moves focus to the input field. A disabled field takes focus only while it has a `tooltip`, which then opens
 - `Shift + Tab` – Moves focus away from the input
 - Standard text editing shortcuts (Ctrl+A, Ctrl+C, etc.)
 

package/docs/components/navigation/Tabs.md

@@ -105,6 +105,53 @@ For individual tabs:
 - **`draggable`** `boolean` — True when tab can be dragged (reorderable)
 - **`dragging`** `boolean` — True when tab is being dragged
 
+### Theming
+
+Tabs has no theming props. To dress the tabs in your own colors and font, re-declare the tokens they read through `tabListStyles`, `styles` or `tokens`:
+
+- **Title** — `#surface-text-soft`. A disabled title keeps `#disabled-surface-text`.
+- **Active title** of a `default` or `narrow` tab, and a hovered `narrow` title — `#primary-accent-text`
+- **Selection indicator** — `#primary-accent-surface`: the line a `default` or `narrow` tab draws on the edge facing the panels, and the same edge of a selected `file` tab
+- **Title font** — `$font-sans`, which the tab's typography preset takes its font family from
+
+Tabs read these names directly, so overriding the legacy aliases they replaced (`#dark-02`, `#primary-text`, `#primary`) no longer reaches them.
+
+Put the tokens in `tabListStyles` to keep them to the tabs. In `tokens` or `styles` on `Tabs` they are declared on its outer wrapper, so they reach everything inside that reads them, the panels included: there `#primary-accent-surface` also fills primary buttons and `$font-sans` sets the body text. Use them there for a `Tabs` without panels, or when the panels should take the theme too. A `font` in a tab's own `styles` wins over the preset for that tab alone. The same tokens also color the tab's focus and editing ring (`#primary-accent-text`), the drag-and-drop indicator and the spring-load hint (`#primary-accent-surface`), so an override recolors those too.
+
+```jsx
+<Tabs
+  defaultActiveKey="overview"
+  tabListStyles={{
+    '#surface-text-soft': '#success-accent-text-soft',
+    '#primary-accent-text': '#success-accent-text',
+    '#primary-accent-surface': '#success-accent-surface',
+    '$font-sans': 'Georgia, serif',
+  }}
+>
+  <Tab key="overview" title="Overview" />
+  <Tab key="activity" title="Activity" />
+  <Tab key="query" title="Query" styles={{ font: 'monospace' }} />
+</Tabs>
+```
+
+A navigation strip with no panels, themed with your own tokens:
+
+```jsx
+<Tabs
+  activeKey={activeKey}
+  tokens={{
+    '#surface-text-soft': '#widget-text-secondary',
+    '#primary-accent-text': '#widget-title',
+    '#primary-accent-surface': '#widget-title',
+    '$font-sans': '$widget-title-font',
+  }}
+  onChange={setActiveKey}
+>
+  <Tab key="sales" title="Sales" />
+  <Tab key="marketing" title="Marketing" />
+</Tabs>
+```
+
 ## Variants
 
 ### Types