@kb.ui/react 0.11.0 → 0.12.1

package/docs/components/Accordion.md

@@ -41,26 +41,26 @@ export function DeliveryQuestions() {
 
 | Part / prop | Type | Default | Purpose |
 |---|---|---|---|
-| `Accordion<Value>` | Base UI Accordion root props | `div` | Groups items; generic values preserve callback types. |
+| `Accordion<Value>` | Base UI `Accordion` root props | `div` | Groups items; generic values preserve callback types. |
 | `value` / `defaultValue` | `Value[]` | `[]` | Controlled or initial expanded item values. Use arrays in both modes. |
 | `onValueChange` | `(values, details) => void` | — | Requests expansion changes; `details.cancel()` rejects them. |
 | `multiple` | `boolean` | `false` | Allows independent expanded items. |
 | `disabled` | `boolean` | `false` | Disables all triggers; does not conceal already open content. |
 | `keepMounted` / `hiddenUntilFound` | `boolean` | `false` | Root defaults for panel retention or supported browser search reveal. |
-| `Accordion.Item` | Base UI Accordion item props | `div` | Requires a stable unique `value` for controlled usage; accepts item `disabled`. |
-| `Accordion.Header` | Base UI Accordion heading props | `h3` | Contains the trigger; use `render={<h2 />}` or another heading for document hierarchy. |
-| `Accordion.Trigger` | Base UI Accordion trigger props | `button` | Visible section label and expansion control. |
-| `Accordion.Panel` | Base UI Accordion panel props | Named `region` | Owns content; accepts per-panel retention options. |
+| `Accordion.Item` | Base UI `Accordion` item props | `div` | Requires a stable unique `value` for controlled usage; accepts item `disabled`. |
+| `Accordion.Header` | Base UI `Accordion` heading props | `h3` | Contains the trigger; use `render={<h2 />}` or another heading for document hierarchy. |
+| `Accordion.Trigger` | Base UI `Accordion` trigger props | `button` | Visible section label and expansion control. |
+| `Accordion.Panel` | Base UI `Accordion` panel props | Named `region` | Owns content; accepts per-panel retention options. |
 | `className` / `render` / `ref` | Part-specific native props | — | Customize each part; class names accept strings. |
 
-Tab and Shift+Tab visit enabled triggers and expanded controls in DOM order. Enter/Space toggle the focused item. Base UI 1.9 uses normal Tab navigation; its deprecated orientation and loopFocus props do not add arrow-key navigation. Closing the last open item is allowed. No business validation is inferred from expansion.
+Tab and Shift+Tab visit enabled triggers and expanded controls in DOM order. Enter/Space toggle the focused item. Base UI 1.9 uses normal Tab navigation; its deprecated orientation and `loopFocus` props do not add arrow-key navigation. Closing the last open item is allowed. No business validation is inferred from expansion.
 
-Keep essential information discoverable and interactive actions outside the heading button. Avoid an excessive number of region landmarks: keep groups focused and split large documents into meaningful sections. Hidden/unmounted content does not supply persistent form state: use keepMounted or caller-owned values. Nested groups own separate state.
+Keep essential information discoverable and interactive actions outside the heading button. Avoid an excessive number of region landmarks: keep groups focused and split large documents into meaningful sections. Hidden/unmounted content does not supply persistent form state: use `keepMounted` or caller-owned values. Nested groups own separate state.
 
 Style `--kb-accordion-padding`, `-radius`, `-background`, `-color`, `-border` and `-trigger-height`; classes cover root, item, header, trigger and panel. Preserve expanded/disabled attributes and native focus outlines when composing custom renderers.
 
-Panels expand and collapse through measured height transitions; reversing mid-transition follows the latest toggle. Content grows naturally once expanded. `--kb-accordion-motion-duration` and `-motion-easing` control panel and caret motion; reduced motion disables transitions. `.kb-accordion-panel-content` owns inner padding, keeping the outer Panel measurable without clipping collapsed padding. Panel props, className, render and ref still target the outer node.
+Panels expand and collapse through measured height transitions; reversing mid-transition follows the latest toggle. Content grows naturally once expanded. `--kb-accordion-motion-duration` and `-motion-easing` control panel and caret motion; reduced motion disables transitions. `.kb-accordion-panel-content` owns inner padding, keeping the outer `Panel` measurable without clipping collapsed padding. `Panel` props, `className`, render and ref still target the outer node.
 
 ## Related components
 
-Use [Disclosure](Disclosure.md) for a single optional section or [Panel](Panel.md) for a structured work surface. Use [Popover](Popover.md) for controls anchored outside normal document flow.
+Use [`Disclosure`](Disclosure.md) for a single optional section or [`Panel`](Panel.md) for a structured work surface. Use [`Popover`](Popover.md) for controls anchored outside normal document flow.

package/docs/components/Avatar.md

@@ -32,7 +32,7 @@ export function Example() {
 
 ## Shapes
 
-`AvatarShape` accepts `circle`, `square`, `rounded`, `hexagon` and `diamond`. These shapes are implemented locally and unreleased. `square` has zero corner radius; `rounded` uses softly rounded corners.
+`AvatarShape` accepts `circle`, `square`, `rounded`, `hexagon` and `diamond`. `square` has zero corner radius; `rounded` uses softly rounded corners.
 
 Shape changes only the silhouette. Photos and initials remain upright, and the accessible identity, size and image request state stay unchanged. Hexagon and diamond clip the media frame to their polygon; they do not rotate the content.
 
@@ -69,12 +69,12 @@ The default circle uses `--kb-avatar-radius`; rounded uses the existing `--kb-av
 | `shape` | `AvatarShape` | `"circle"` | `circle`, `square`, `rounded`, `hexagon` or `diamond`; clips upright media |
 | `onLoad`, `onError` | native image handlers | unset | Photo result callbacks |
 | `classNames` | keyed classes | unset | `root`, `media`, `initials` |
-| `ref` | `Ref<HTMLSpanElement>` | unset | Root element; native span props pass through |
+| `ref` | `Ref<HTMLSpanElement>` | unset | Root element; native `span` props pass through |
 
 Initials use the first Unicode code point of the first and last whitespace-separated names, uppercased; a single word contributes one initial. This is a convenience, not a universal naming rule. Supply `initials` for the person's preferred form. Empty identities render `?`; localize `Unknown person` through `aria-label`. The accessible name remains the full identity, not the initials.
 
-Avatar adds no focus stop. Place navigation in a named Link or an action in a Button. Use `decorative` when an equivalent visible name is adjacent or the parent control already supplies the identity. Keep presence and account state in separately labeled Status/Badge content. See [media recipes](../../../../docs/guides/media-and-identity.md).
+`Avatar` adds no focus stop. Place navigation in a named `Link` or an action in a `Button`. Use `decorative` when an equivalent visible name is adjacent or the parent control already supplies the identity. Keep presence and account state in separately labeled `Status`/`Badge` content. See [media recipes](../../../../docs/guides/media-and-identity.md).
 
 ## Related components
 
-Use [Image](Image.md) for flexible media framing, [Thumbnail](Thumbnail.md) for captioned previews, and [Status](Status.md) for changing state.
+Use [`Image`](Image.md) for flexible media framing, [`Thumbnail`](Thumbnail.md) for captioned previews, and [`Status`](Status.md) for changing state.

package/docs/components/Badge.md

@@ -1,6 +1,6 @@
 # Badge
 
-Add a short label to a person, record, or resource. Keep the text meaningful without its color. Use Status when the information changes over time.
+Add a short label to a person, record, or resource. Keep the text meaningful without its color. Use `Status` when the information changes over time.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-badge--docs)
 
@@ -17,7 +17,7 @@ export function Example() {
 
 ## More examples
 
-- [Literal identifiers](https://kbui.kcb.pro/storybook/?path=/story/components-badge--mono): Compare monospace metadata.
+- [Literal identifiers](https://kbui.kcb.pro/storybook/?path=/story/components-badge--mono): Show an identifier in a monospace font.
 - [Semantic tones](https://kbui.kcb.pro/storybook/?path=/story/components-badge--tones): Check text remains meaningful across tones.
 
 ## Reference
@@ -30,8 +30,8 @@ export function Example() {
 | `mono`         | `boolean`                                             | `false`   | Small uppercase monospace for short identifiers                             |
 | `preserveCase` | `boolean`                                             | `false`   | Preserve case and spacing for branch names, paths, and other literal values |
 
-Native span props pass through. Badge adds no focus stop or live announcement.
+You can pass native `<span>` props. `Badge` adds no Tab stop or live announcement.
 
 ## Related components
 
-Use [Status](Status.md) for changing state and [Code](Code.md) for code within prose.
+Use [`Status`](Status.md) for changing state and [`Code`](Code.md) for code within prose.

package/docs/components/Button.md

@@ -1,6 +1,6 @@
 # Button
 
-Use a Button for an action such as saving a form or opening a dialog. Choose a variant to match the action’s importance.
+Use a `Button` for an action such as saving a form or opening a dialog. Choose a variant to match the action’s importance.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-button--docs)
 
@@ -19,21 +19,21 @@ export function Example() {
 
 - [Styled navigation](https://kbui.kcb.pro/storybook/?path=/story/components-button--as-link): Render a link with the correct semantics.
 - [Icon-only actions](https://kbui.kcb.pro/storybook/?path=/story/components-button--icon-only): Give the action an accessible name.
-- [Size choices](https://kbui.kcb.pro/storybook/?path=/story/components-button--sizes): Compare density and target sizes.
+- [Size choices](https://kbui.kcb.pro/storybook/?path=/story/components-button--sizes): Compare button sizes.
 
 ## Reference
 
 | Prop        | Type                                              | Default     | Notes                                                                      |
 | ----------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------- |
-| `children`  | `ReactNode`                                       | unset       | Visible action label, or an icon paired with aria-label                    |
+| `children`  | `ReactNode`                                       | unset       | Visible action label, or an icon paired with `aria-label`                    |
 | `variant`   | `"primary" \| "secondary" \| "ghost" \| "danger"` | `"primary"` | Main, supporting, quiet, or destructive action emphasis                    |
-| `size`      | `sm` / `md` / `lg` / `icon`                       | `md`        | Height and padding; icon is square and requires aria-label                 |
-| `type`      | native button type                                | `button`    | Set submit for form submission; use button for other form actions          |
+| `size`      | `sm` / `md` / `lg` / `icon`                       | `md`        | Height and padding; `icon` is square and requires `aria-label`                 |
+| `type`      | native `button` type                                | `button`    | Set `type="submit"` for form submission; use `type="button"` for other form actions          |
 | `disabled`  | `boolean`                                         | `false`     | Blocks interaction; explain unavailable actions in nearby text when needed |
-| `render`    | element                                           | unset       | Use an anchor with nativeButton=false and role=link for navigation         |
+| `render`    | element                                           | unset       | Use an anchor with `nativeButton={false}` and `role="link"` for navigation         |
 | `className` | `string`                                          | unset       | Extra classes on the rendered control; function values are not supported   |
 
-All props accepted by a native button or Base UI's `Button` also work. To render a link, pass an anchor and tell Base UI it is not a native button:
+All props accepted by a native `button` or Base UI's `Button` also work. To render a link, pass an anchor and tell Base UI it is not a native `button`:
 
 ```tsx
 <Button render={<a href="/docs" />} nativeButton={false} role="link">
@@ -43,4 +43,4 @@ All props accepted by a native button or Base UI's `Button` also work. To render
 
 ## Related components
 
-Use [Link](Link.md) for navigation. Group coordinated actions with [Toolbar](Toolbar.md), or independent wrapping actions with [Inline](Inline.md).
+Use [`Link`](Link.md) for navigation. Group coordinated actions with [`Toolbar`](Toolbar.md), or independent wrapping actions with [`Inline`](Inline.md).

package/docs/components/Callout.md

@@ -32,10 +32,10 @@ export function Example() {
 | `title`      | `ReactNode`                                           | unset     | Short summary above the message                                 |
 | `tone`       | `neutral` / `info` / `success` / `warning` / `danger` | `neutral` | Reinforces the message without replacing its wording            |
 | `icon`       | `ReactNode`                                           | unset     | Decorative icon; hidden from assistive technology               |
-| `actions`    | `ReactNode`                                           | unset     | Named buttons or links that help resolve the message            |
-| `live`       | `boolean`                                             | `false`   | Adds role=status for changing message text; does not move focus |
+| `actions`    | `ReactNode`                                           | unset     | Named buttons or links that help resolve the message; end-aligned, primary last |
+| `live`       | `boolean`                                             | `false`   | Adds `role=status` for changing message text; does not move focus |
 | `classNames` | keyed classes                                         | unset     | Style icon, content, title, body, or actions                    |
 
 ## Related components
 
-Use [Status](Status.md) for a short changing state and [Dialog](Dialog.md) for a focused modal task.
+Use [`Status`](Status.md) for a short changing state and [`Dialog`](Dialog.md) for a focused modal task.

package/docs/components/Card.md

@@ -1,6 +1,6 @@
 # Card
 
-Group related content with an optional title, summary, links, and actions. Card renders an article by default and adds no interaction of its own.
+Group related content with an optional title, summary, links, and actions. `Card` renders an article by default and adds no interaction of its own.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-card--docs)
 
@@ -23,7 +23,7 @@ export function Example() {
 ## More examples
 
 - [A navigable card](https://kbui.kcb.pro/storybook/?path=/story/components-card--single-link): Use a real link for the primary destination.
-- [Quiet content rows](https://kbui.kcb.pro/storybook/?path=/story/components-card--plain): Compare a surface without raised emphasis.
+- [Quiet content rows](https://kbui.kcb.pro/storybook/?path=/story/components-card--plain): Show a flat card without a raised surface.
 
 ## Reference
 
@@ -34,8 +34,8 @@ export function Example() {
 | `children`                  | `ReactNode`              | unset      | Related content; your app provides headings, links, and actions       |
 | `className`, `style`, `ref` | native element props     | unset      | Style and reference the chosen container                              |
 
-Card adds no link, button, keyboard handler, or tab stop. If a link covers the whole card, keep other controls outside that link and style its focus state. Restyle with the card background, face, shadow, color, border, radius, and padding tokens; they share the theme's tactile materials.
+`Card` adds no link, button, keyboard handler, or tab stop. If a link covers the whole card, keep other controls outside that link and style its focus state. Restyle with the card background, face, shadow, color, border, radius, and padding tokens; they share the theme's tactile materials.
 
 ## Related components
 
-Arrange a collection with [Grid](Grid.md). Use [Panel](Panel.md) when a section needs structured header, body, and footer parts.
+Arrange a collection with [`Grid`](Grid.md). Use [`Panel`](Panel.md) when a section needs structured header, body, and footer parts.

package/docs/components/Checkbox.md

@@ -1,6 +1,6 @@
 # Checkbox
 
-Use Checkbox when people can select options independently. It includes a label, help text, and error message. Pass `checked` and update it in `onCheckedChange`. Activating a mixed checkbox requests the checked state.
+Use `Checkbox` when people can select options independently. It includes a label, help text, and error message. Pass `checked` and update it in `onCheckedChange`. Activating a mixed checkbox requests the checked state.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-checkbox--docs)
 
@@ -25,8 +25,8 @@ export function Example() {
 
 ## More examples
 
-- [Partial selection](https://kbui.kcb.pro/storybook/?path=/story/components-checkbox--mixed): Inspect an aggregate mixed state.
-- [Validation feedback](https://kbui.kcb.pro/storybook/?path=/story/components-checkbox--invalid): Associate an error with the choice.
+- [Partial selection](https://kbui.kcb.pro/storybook/?path=/story/components-checkbox--mixed): Show a partly selected group.
+- [Validation feedback](https://kbui.kcb.pro/storybook/?path=/story/components-checkbox--invalid): Show an error for the choice.
 
 ## Reference
 
@@ -41,7 +41,7 @@ export function Example() {
 | `visuallyHidden`              | `boolean`                    | `false`  | Hide label visually                                     |
 | `controlClassName`            | `string`                     |          | Added to the native checkbox                            |
 | `ref`                         | `Ref<HTMLInputElement>`      |          | Native checkbox, including form and indeterminate state |
-| `name` / `value` / `required` | native input props           |          | Form serialization and validation                       |
+| `name` / `value` / `required` | native `input` props           |          | Form serialization and validation                       |
 | `className`                   | `string`                     |          | Root class                                              |
 
 ```tsx
@@ -57,4 +57,4 @@ Clicking the label or pressing Space calls `onCheckedChange`. The checkbox chang
 
 ## Related components
 
-Use [RadioGroup](RadioGroup.md) for one visible choice and [Switch](Switch.md) for an immediate on/off setting.
+Use [`RadioGroup`](RadioGroup.md) for one visible choice and [`Switch`](Switch.md) for an immediate on/off setting.

package/docs/components/Code.md

@@ -70,8 +70,8 @@ export function SnippetExample() {
 
 Single-line strings without block props render as an inline `code` element that inherits surrounding line height and wraps long paths. Strings containing `\n` or any block prop (`language`, `title`, `copyable`, `lineNumbers`, `highlightLines`, `minLines`, `collapsible`, `collapsedLines`, `maxHeight`, `tokens`) switch automatically to a framed block listing unless `block={false}` is set. Line numbers use CSS `attr(data-line-number)` so selecting or reading `code.textContent` returns only the raw code. Customize block surfaces and syntax colors with `--kb-code-block-*` and `--kb-code-syntax-*`.
 
-Block copying shares the [copy feedback props](CopyableText.md#reference): `disabled`, `copyLabel`, `copyingLabel`, `copiedLabel`, `copyErrorLabel`, `successMessage`, `errorMessage`, `feedbackDuration` and `onCopyError`. Code defaults to `Copy code`, `Copy failed`, `Code copied to clipboard` and `Failed to copy code. Select and copy the text manually.`. `onCopy` is a successful-write callback rather than a native clipboard event handler. Pending writes retain focus and ignore repeated activation; errors remain visible until retry or source change. `classNames.feedback` styles the persistent polite status region. Block viewports expose a named keyboard scroll region using title or `Code`.
+Block copying shares the [copy feedback props](CopyableText.md#reference): `disabled`, `copyLabel`, `copyingLabel`, `copiedLabel`, `copyErrorLabel`, `successMessage`, `errorMessage`, `feedbackDuration` and `onCopyError`. `Code` defaults to `Copy code`, `Copy failed`, `Code copied to clipboard` and `Failed to copy code. Select and copy the text manually.`. `onCopy` is a successful-write callback rather than a native clipboard event handler. Pending writes retain focus and ignore repeated activation; errors remain visible until retry or source change. `classNames.feedback` styles the persistent polite status region. Block viewports expose a named keyboard scroll region using `title` or the label “Code”.
 
 ## Related components
 
-Use [CodeBlock](CodeBlock.md) for explicit block semantics, [CopyableText](CopyableText.md) for copyable identifiers, [Text](Text.md) for prose and [Link](Link.md) for a destination.
+Use [`CodeBlock`](CodeBlock.md) for explicit block semantics, [`CopyableText`](CopyableText.md) for copyable identifiers, [`Text`](Text.md) for prose and [`Link`](Link.md) for a destination.

package/docs/components/CodeBlock.md

@@ -1,6 +1,6 @@
 # CodeBlock
 
-An explicit block listing for commands, configuration and source. Reuses Code highlighting, line numbers, line emphasis and collapse behavior, with shared copy feedback and a keyboard-scrollable viewport.
+An explicit block listing for commands, configuration and source. Reuses `Code` highlighting, line numbers, line emphasis and collapse behavior, with shared copy feedback and a keyboard-scrollable viewport.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-codeblock--docs)
 
@@ -19,7 +19,7 @@ export function Example() {
 }
 ```
 
-`children` must be the exact source string. Copy excludes line numbers, syntax markup, highlighted-line decoration and display padding. Collapsed blocks copy the full source. Empty strings disable copying. CodeBlock always renders a block, including single-line commands. It uses `.kb-codeblock.kb-code[data-block]`; shared `.kb-code-*` parts and `--kb-code-*` tokens remain compatible with Code.
+`children` must be the exact source string. Copy excludes line numbers, syntax markup, highlighted-line decoration and display padding. Collapsed blocks copy the full source. Empty strings disable copying. `CodeBlock` always renders a block, including single-line commands. It uses `.kb-codeblock.kb-code[data-block]`; shared `.kb-code-*` parts and `--kb-code-*` tokens remain compatible with `Code`.
 
 Clipboard feedback appears after the actual write resolves. Pending writes suppress repeat activation and preserve button focus. Errors stay visible with manual selection instructions until retry or source change. Success resets after `feedbackDuration` (two seconds by default, zero retains it). Changes to source or disabled state invalidate outstanding feedback; unmounted instances ignore completion. Already-issued operating-system writes cannot be cancelled.
 
@@ -56,22 +56,22 @@ Override `--kb-code-syntax-*` through `style` or a class to change individual sy
 | `onCopyError` | `(error: unknown) => void` | unset | Current write failed or API unavailable |
 | `lineNumbers` | `boolean` | `false` | Decorative line gutter |
 | `startLine` | `number` | `1` | First displayed line number |
-| `highlightLines` | `readonly number[]` | unset | Emphasized display line numbers, accounting for startLine |
+| `highlightLines` | `readonly number[]` | unset | Emphasized display line numbers, accounting for `startLine` |
 | `minLines` | `number` | unset | Minimum displayed lines without altering source |
 | `collapsible` | `boolean` | `false` | Show expand/collapse action |
-| `collapsedLines` | `number` | unset | Collapsed viewport line count; falls back to minLines |
+| `collapsedLines` | `number` | unset | Collapsed viewport line count; falls back to `minLines` |
 | `defaultCollapsed` | `boolean` | `false` | Initial local collapsed state |
 | `collapsed` | `boolean` | unset | Controlled collapsed state |
 | `onCollapsedChange` | `(collapsed: boolean) => void` | unset | Collapse state request |
 | `maxHeight` | `string \| number` | unset | Scrollable viewport limit; number interpreted as CSS pixels |
 | `tokens` | `readonly CodeToken[]` | automatic | Ordered, non-overlapping UTF-16 ranges for external syntax highlighting |
-| `classNames` | `Partial<Record<CodePart, string>>` | unset | Shared Code slots including `copy`, `feedback`, `viewport`, `line`, `lineNumber`, `lineText` |
+| `classNames` | `Partial<Record<CodePart, string>>` | unset | Shared `Code` slots including `copy`, `feedback`, `viewport`, `line`, `lineNumber`, `lineText` |
 | `className`, `ref`, other props | Native root props | unset | Root `div`; ref typed as HTMLDivElement |
 
-No syntax dependency is added. Supported languages use Code's small tokenizer; external highlighting can supply tokens. When loading standalone CSS parts, import both `code.css` and `codeblock.css` in that order. The bundled stylesheet includes both.
+No syntax dependency is added. Supported languages use `Code`'s small tokenizer; external highlighting can supply tokens. When loading standalone CSS parts, import both `code.css` and `codeblock.css` in that order. The bundled stylesheet includes both.
 
 Automated checks exercise exact copies, controlled collapse, keyboard activation, scrolling and accessibility scans. Verify real clipboard permission behavior and human screen-reader announcements in the consuming application. See [shared copy guidance](https://github.com/KhallilB/kbui/blob/main/docs/guides/copyable-content.md).
 
 ## Related components
 
-Use [Code](Code.md) for inline literals or automatic block detection and [CopyableText](CopyableText.md) for identifiers and references outside source listings.
+Use [`Code`](Code.md) for inline literals or automatic block detection and [`CopyableText`](CopyableText.md) for identifiers and references outside source listings.

package/docs/components/Collection.md

@@ -95,7 +95,7 @@ A column has `key`, `header`, `cell(item)`, optional ascending `compare(a, b)`,
 
 Client mode processes records in this order: predicate, stable comparison, page slice. Removed or newly disabled IDs disappear from effective selection. Server mode preserves off-page IDs; eligibility for unseen records remains the application’s responsibility. Both modes remove disabled IDs present in the current response. Zero results have one empty page. Invalid counts, pages and sizes throw `RangeError` rather than emitting broken navigation.
 
-`state` is controlled when supplied. Each controlled proposal starts from the latest accepted props; a rejected proposal cannot affect a later interaction. Combine coordinated controlled changes in the parent before applying one next state. Uncontrolled commands in one event compose sequentially, including derived page bounds and page selection. Retained methods consult the latest committed dataset, eligibility rules, callbacks and accepted state, so asynchronous completion removes only its submitted IDs. Rendered state remains owned by the parent until it accepts `onStateChange`. Normalized selection and clamped page never trigger onStateChange during data refresh; the next user transition emits normalized state. Uncontrolled state retains those corrections so deleted/reintroduced IDs stay deselected and growing datasets do not restore an obsolete page. Controlled parent stores should reconcile their canonical state when external data changes. Use immutable arrays/objects and stable IDs across refreshes.
+`state` is controlled when supplied. Each controlled proposal starts from the latest accepted props; a rejected proposal cannot affect a later interaction. Combine coordinated controlled changes in the parent before applying one next state. Uncontrolled commands in one event compose sequentially, including derived page bounds and page selection. Retained methods consult the latest committed dataset, eligibility rules, callbacks and accepted state, so asynchronous completion removes only its submitted IDs. Rendered state remains owned by the parent until it accepts `onStateChange`. Normalized selection and clamped page never trigger `onStateChange` during data refresh; the next user transition emits normalized state. Uncontrolled state retains those corrections so deleted/reintroduced IDs stay deselected and growing datasets do not restore an obsolete page. Controlled parent stores should reconcile their canonical state when external data changes. Use immutable arrays/objects and stable IDs across refreshes.
 
 ### useCollection
 
@@ -154,7 +154,7 @@ export function RecordList() {
 | Component | Required props | Optional props and behavior |
 | --- | --- | --- |
 | `Collection.Pagination` | `page`, `pageSize`, `totalItems`, `onPageChange` | `onPageSizeChange`, `pageSizes` (10, 25, 50), `disabled`, native nav props/ref. Includes current page size, emits bounded page requests; caller resets page when size changes. |
-| `Collection.BulkActions` | `selectedKeys`, `actions`, `onClear` | `onSuccess(keys)`, `onPendingChange(boolean)`, `disabled`, native fieldset props/ref. Caller owns selection; omitted onSuccess preserves it. |
+| `Collection.BulkActions` | `selectedKeys`, `actions`, `onClear` | `onSuccess(keys)`, `onPendingChange(boolean)`, `disabled`, native `fieldset` props/ref. Caller owns selection; omitted `onSuccess` preserves it. |
 
 ### Bulk-action boundary
 
@@ -170,9 +170,9 @@ Offset pagination requires a known total. Cursor paging, unknown totals, all-mat
 
 ### Styling and accessibility
 
-Override `--kb-collection-gap`, `--kb-collection-cell-padding`, `--kb-collection-radius`, `--kb-collection-border`, `--kb-collection-header-background`, and `--kb-collection-selected-background`, and `--kb-collection-table-min-width` (36rem) on a subtree. Partial CSS imports also need Button, Checkbox, Input and Select styles. CSS provides layout and visual states; a non-React renderer owns every state transition and ARIA relationship.
+Override `--kb-collection-gap`, `--kb-collection-cell-padding`, `--kb-collection-radius`, `--kb-collection-border`, `--kb-collection-header-background`, and `--kb-collection-selected-background`, and `--kb-collection-table-min-width` (36rem) on a subtree. Partial CSS imports also need `Button`, `Checkbox`, `Input` and `Select` styles. CSS provides layout and visual states; a non-React renderer owns every state transition and ARIA relationship.
 
-Filters and page-size controls use the shared Select theme, keyboard navigation, option indicators and focus recovery. Labels sit above fields; filter fields wrap and pagination buttons stay grouped, with long page counts wrapping within the available width.
+Filters and page-size controls use the shared `Select` theme, keyboard navigation, option indicators and focus recovery. Labels sit above fields; filter fields wrap and pagination buttons stay grouped, with long page counts wrapping within the available width.
 
 Native table semantics, `aria-sort`, mixed checkboxes, named pagination, polite statuses and failure alerts expose workflow state. Tab moves between controls; Space toggles checkboxes; Enter/Space activate buttons. The named table viewport is keyboard focusable for horizontal scrolling. Controls wrap on narrow screens; tabular content can scroll independently. Selection remains explicit in checkbox state in forced colors.
 
@@ -180,4 +180,4 @@ Verify the full search, sort, select-across-pages, submit, failure and retry jou
 
 ## Related components
 
-Use [Grid](Grid.md) for static card layout, [Checkbox](Checkbox.md) for independent choices, and [MultiSelect](MultiSelect.md) for choosing values rather than operating on records. Use [Dialog](Dialog.md) for application-owned confirmation and [Toast](Toast.md) for mutation outcomes outside the collection.
+Use [`Grid`](Grid.md) for static card layout, [`Checkbox`](Checkbox.md) for independent choices, and [`MultiSelect`](MultiSelect.md) for choosing values rather than operating on records. Use [`Dialog`](Dialog.md) for application-owned confirmation and [`Toast`](Toast.md) for mutation outcomes outside the collection.

package/docs/components/CollectionList.md

@@ -1,6 +1,6 @@
 # CollectionList
 
-Group records in a native list when people scan names, summaries, status and actions. Use Table when column-by-column comparison is the main task.
+Group records in a native list when people scan names, summaries, status and actions. Use `Table` when column-by-column comparison is the main task.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-collectionlist--docs)
 
@@ -30,15 +30,15 @@ export function Example() {
 | Prop | Default | Behavior |
 |---|---|---|
 | `as` | `ul` | `ul` for records without a required order; `ol` for an ordered sequence |
-| `density` | `comfortable` | `comfortable` or `dense`; affects immediate CollectionRow children |
-| `dividers` | true | Rules between immediate CollectionRow children |
+| `density` | `comfortable` | `comfortable` or `dense`; affects immediate `CollectionRow` children |
+| `dividers` | true | Rules between immediate `CollectionRow` children |
 
 The root accepts native attributes, `className`, `style` and the correct list ref. With `as="ol"`, native `start`, `reversed`, `type` and numbering behavior remain available. Public types are `CollectionListElement` and generic `CollectionListProps`. A default `role="list"` preserves list semantics where list-style removal affects accessibility exposure; the native element still supplies the structure. See the [W3C list styling guidance](https://design-system.w3.org/styles/lists.html#considerations) for marker removal and list semantics. This is an ordinary list with normal Tab navigation, without listbox selection or arrow-key item navigation.
 
-Use CollectionRow or native `li` children. A non-row `li` retains native semantics but does not receive row slot styling. If a record has leading content or an aside, the list reserves matching columns across its immediate rows; missing optional content does not shift record titles. Metadata and actions stack beneath content below 40rem of available width. Nested lists keep their own sizing and density. Ordered markers remain visible in both directions.
+Use `CollectionRow` or native `li` children. A non-row `li` retains native semantics but does not receive row slot styling. If a record has leading content or an aside, the list reserves matching minimum columns across its immediate rows; missing optional content does not shift record titles. Metadata and actions share one end-aligned line, and stack beneath content, still end-aligned, when a row is narrower than 48rem. Nested lists keep their own sizing and density. Ordered markers remain visible in both directions.
 
-Your app owns stable keys, data ordering, filtering, selection policy, pagination and requests. Keep filters mounted while results update so drafts and keyboard focus survive. Put useful empty/error guidance and a named retry action outside an empty list. Use `aria-busy` for pending content and a concise status message outside the busy subtree. Pagination or virtualization is app-owned; CollectionList renders the children you provide.
+Your app owns stable keys, data ordering, filtering, selection policy, pagination and requests. Keep filters mounted while results update so drafts and keyboard focus survive. Put useful empty/error guidance and a named retry action outside an empty list. Use `aria-busy` for pending content and a concise status message outside the busy subtree. Pagination or virtualization is app-owned; `CollectionList` renders the children you provide.
 
 ## Related components
 
-[CollectionRow](CollectionRow.md) supplies record slots; [DescriptionList](DescriptionList.md) presents individual record facts; [Table](Table.md) supports aligned column comparison. See [Structured data](../../../../docs/guides/structured-data.md) for composition guidance.
+[`CollectionRow`](CollectionRow.md) supplies record slots; [`DescriptionList`](DescriptionList.md) presents individual record facts; [`Table`](Table.md) supports aligned column comparison. See [Structured data](../../../../docs/guides/structured-data.md) for composition guidance.

package/docs/components/CollectionRow.md

@@ -1,6 +1,6 @@
 # CollectionRow
 
-Make one record easy to scan inside CollectionList. Compose its primary name, supporting detail, optional selection, metadata and independent actions.
+Make one record easy to scan inside `CollectionList`. Compose its primary name, supporting detail, optional selection, metadata and independent actions.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-collectionrow--docs)
 
@@ -34,29 +34,29 @@ export function Example() {
 
 ## More examples
 
-- [Selection and actions](https://kbui.kcb.pro/storybook/?path=/story/components-collectionrow--selection-and-actions): Checkbox, primary navigation, independent Buttons, Menu focus return and disabled actions.
+- [Selection and actions](https://kbui.kcb.pro/storybook/?path=/story/components-collectionrow--selection-and-actions): `Checkbox`, primary navigation, independent Buttons, `Menu` focus return and disabled actions.
 - [Long content](https://kbui.kcb.pro/storybook/?path=/story/components-collectionrow--long-content): Wrapping identifiers, metadata and action text.
 
 ## Reference
 
 | Prop | Default | Behavior |
 |---|---|---|
-| `title` | required | Record name as a ReactNode; compose a Link or correctly ranked Heading when appropriate |
-| `description` | unset | Supporting ReactNode, including DescriptionList or zero values |
-| `leading` | unset | Avatar, decorative icon or a separately named selection control |
-| `metadata` | unset | Status, formatted number, timestamp or other concise ReactNode |
-| `actions` | unset | Named Buttons, links or Menu composition; controls keep their own semantics |
+| `title` | required | Record name as a `ReactNode`; compose a `Link` or correctly ranked `Heading` when appropriate |
+| `description` | unset | Supporting `ReactNode`, including `DescriptionList` or zero values |
+| `leading` | unset | `Avatar`, decorative icon or a separately named selection control |
+| `metadata` | unset | `Status`, formatted number, timestamp or other concise `ReactNode` |
+| `actions` | unset | Named Buttons, links or `Menu` composition; controls keep their own semantics |
 | `selected` | false | Visual state; a selection control owns accessible checked state |
 | `classNames` | unset | Extra classes for `layout`, `leading`, `content`, `title`, `description`, `aside`, `metadata` and `actions` |
 
-CollectionRow renders native `li`; place it inside CollectionList or another native list. Optional null, boolean and empty-string content omits its slot; numeric zero remains visible. Native list-item attributes, `className`, `style` and ref pass through. `CollectionRowProps` replaces the native title tooltip attribute with the required record title; use a Tooltip composition for contextual help. CollectionRow has no whole-row click handler, navigation destination or automatic focus stop. A link in title handles navigation; an action Button handles its own workflow. Independent actions do not toggle selection implicitly.
+`CollectionRow` renders native `li`; place it inside `CollectionList` or another native list. Optional null, boolean and empty-string content omits its slot; numeric zero remains visible. Native list-item attributes, `className`, `style` and ref pass through. `CollectionRowProps` replaces the native title tooltip attribute with the required record title; use a `Tooltip` composition for contextual help. `CollectionRow` has no whole-row click handler, navigation destination or automatic focus stop. A link in title handles navigation; an action `Button` handles its own workflow. Independent actions do not toggle selection implicitly.
 
-Keep a persistent, record-specific name on selection controls and actions. Hide decorative icons yourself, and supply meaningful alternative text for informative images. When content can be selected, keep `selected` consistent with Checkbox checked state; use stable IDs when filtering or sorting. Disable actual controls for unavailable operations rather than treating the whole row as disabled. A selected row is an ordinary list item, so CollectionRow does not emit grid/listbox `aria-selected` semantics.
+Keep a persistent, record-specific name on selection controls and actions. Hide decorative icons yourself, and supply meaningful alternative text for informative images. When content can be selected, keep `selected` consistent with `Checkbox` checked state; use stable IDs when filtering or sorting. Disable actual controls for unavailable operations rather than treating the whole row as disabled. A selected row is an ordinary list item, so `CollectionRow` does not emit grid/listbox `aria-selected` semantics.
 
-CollectionList aligns optional leading and aside columns across rows. The defaults reserve 3rem for leading content and 12rem for an aside; override `--kb-collectionrow-leading-width` and `--kb-collectionrow-aside-width` for your content. Set padding and gap with component tokens. Below 40rem of parent list width, metadata and actions stack beneath content in DOM order. Long labels and composed Status text wrap, including chips with decorative icons. Action Buttons retain size-based minimum heights while expanding for text. Dense list spacing does not shrink control targets. Standalone native lists do not provide CollectionList's shared responsive alignment; use the paired components for this behavior.
+`CollectionList` aligns optional leading and aside columns across rows. The defaults reserve at least 3rem for leading content and 12rem for an aside; wider leading media, or an aside that needs more room to keep metadata and actions on one line, widens its own row, so set `--kb-collectionrow-leading-width` and `--kb-collectionrow-aside-width` to your widest content to keep every title aligned. Set padding and gap with component tokens. Metadata and actions share one end-aligned line; when the row itself is narrower than 48rem, inside or outside a list, they stack beneath content in DOM order and stay end-aligned. Long labels and composed `Status` text wrap, including chips with decorative icons. Action Buttons retain size-based minimum heights while expanding for text. Dense list spacing does not shrink control targets. Standalone native lists do not provide `CollectionList`'s shared responsive alignment; use the paired components for this behavior.
 
 Your app owns loading, error text, formatting, focus after a removed record, and selection scope. Avoid nesting interactive controls inside the title link or making the whole list item act as another button. Verify keyboard order, responsive wrapping and focus in your actual composition; automated stories do not establish screen-reader interoperability or complete-page accessibility.
 
 ## Related components
 
-Use [CollectionList](CollectionList.md) for a native record list, [DescriptionList](DescriptionList.md) for key/value details, [Table](Table.md) for comparison across columns, and [Menu](Menu.md) for overflow actions. See [Structured data](../../../../docs/guides/structured-data.md) for the shared decision guide.
+Use [`CollectionList`](CollectionList.md) for a native record list, [`DescriptionList`](DescriptionList.md) for key/value details, [`Table`](Table.md) for comparison across columns, and [`Menu`](Menu.md) for overflow actions. See [Structured data](../../../../docs/guides/structured-data.md) for the shared decision guide.

package/docs/components/Combobox.md

@@ -1,8 +1,8 @@
 # Combobox
 
-Use Combobox to filter a longer option list before choosing one or multiple values. Each option has a string `value`, a visible `label`, and an optional `disabled` flag. Single selection uses `string | null`; enable `multiple` to use a `readonly string[]` value and a `(value: string[]) => void` callback. Pass `null` or `[]` for the corresponding empty selection.
+Use `Combobox` to filter a longer option list before choosing one or multiple values. Each option has a string `value`, a visible `label`, and an optional `disabled` flag. Single selection uses `string | null`; enable `multiple` to use a `readonly string[]` value and a `(value: string[]) => void` callback. Pass `null` or `[]` for the corresponding empty selection.
 
-Multiple mode delegates to [MultiSelect](MultiSelect.md), including removable chips, keyboard navigation, clear-all, form submission, and disabled/read-only states. Its popup stays open after selections and deselections, retaining the current filter. Press Escape, click outside, or use the toggle to dismiss it. It uses `.kb-multiselect` CSS anatomy and `ClassNames<MultiSelectSlot>` slots, including `chips`, `chip`, `chipLabel`, and `chipRemove`. Single mode retains `.kb-combobox` anatomy. `ComboboxProps` remains the extensible single-selection interface, so existing wrappers can keep extending it. `ComboboxSingleProps` aliases that interface; use `ComboboxMultipleProps` for a multiple-selection wrapper or React's `ComponentProps<typeof Combobox>` for the complete discriminated union.
+Multiple mode delegates to [`MultiSelect`](MultiSelect.md), including removable chips, keyboard navigation, clear-all, form submission, and disabled/read-only states. Its popup stays open after selections and deselections, retaining the current filter. Press Escape, click outside, or use the toggle to dismiss it. It uses `.kb-multiselect` CSS anatomy and `ClassNames<MultiSelectSlot>` slots, including `chips`, `chip`, `chipLabel`, and `chipRemove`. Single mode retains `.kb-combobox` anatomy. `ComboboxProps` remains the extensible single-selection interface, so existing wrappers can keep extending it. `ComboboxSingleProps` aliases that interface; use `ComboboxMultipleProps` for a multiple-selection wrapper or React's `ComponentProps<typeof Combobox>` for the complete discriminated union.
 
 [All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-combobox--docs)
 
@@ -85,4 +85,4 @@ export function DeploymentRegions() {
 
 ## Related components
 
-Use [Select](Select.md) for a dropdown without text filtering, [RadioGroup](RadioGroup.md) for visible options, and [MultiSelect](MultiSelect.md) for several searchable choices.
+Use [`Select`](Select.md) for a dropdown without text filtering, [`RadioGroup`](RadioGroup.md) for visible options, and [`MultiSelect`](MultiSelect.md) for several searchable choices.

package/docs/components/ConfirmAction.md

@@ -0,0 +1,100 @@
+# ConfirmAction
+
+`ConfirmAction` puts a destructive action behind a modal confirmation built on [`Dialog`](Dialog.md). The trigger only opens the confirmation; `onConfirm` runs after a second, explicit choice. It owns Cancel-first focus, the pending guard, blocked dismissal while pending, the failure alert with retry, and closing only after success.
+
+[All components](../../README.md#components) · [Usage](#usage) · [Examples](#more-examples) · [Reference](#reference) · [Live examples and accessibility](https://kbui.kcb.pro/storybook/?path=/docs/components-confirmaction--docs)
+
+## Usage
+
+```tsx
+import "@kb.ui/react/styles.css";
+import { useState } from "react";
+import { ConfirmAction } from "@kb.ui/react";
+
+async function deleteProject(): Promise<void> {
+  const response = await fetch("/api/projects/portal", { method: "DELETE" });
+  if (!response.ok) throw new Error(`Delete failed: ${response.status}`);
+}
+
+export function Example() {
+  const [deleted, setDeleted] = useState(false);
+  return (
+    <>
+      <p role="status">{deleted ? "Project deleted." : ""}</p>
+      <ConfirmAction
+        title="Delete project?"
+        description="This permanently removes the project and its data."
+        pendingLabel="Deleting…"
+        errorMessage="Could not delete the project. Try again."
+        onConfirm={deleteProject}
+        onConfirmed={() => setDeleted(true)}
+      >
+        Delete project
+      </ConfirmAction>
+    </>
+  );
+}
+```
+
+## More examples
+
+- [Default](https://kbui.kcb.pro/storybook/?path=/story/components-confirmaction--default): A danger-zone deletion with consequence details and a pending state.
+- [Failure and retry](https://kbui.kcb.pro/storybook/?path=/story/components-confirmaction--failure-and-retry): The first attempt fails, the dialog stays open with an alert, and the retry succeeds.
+- [Row action](https://kbui.kcb.pro/storybook/?path=/story/components-confirmaction--row-action): A quiet row trigger whose success removes the row and moves focus to the list heading.
+
+## Reference
+
+| Part or behavior | Purpose |
+| --- | --- |
+| Trigger | A `danger` [`Button`](Button.md) by default. Native button props, `ref`, `className` and `disabled` reach it. Replace its look with `render`, such as `render={<Button variant="ghost" size="sm" />}`. |
+| Popup | A `Dialog.Content` with `.kb-confirmaction`. `title` names it and `description` describes it; `details` adds further consequence content. |
+| Actions | Cancel first, focused on open, then a `danger` confirm button. |
+| Pending | While `onConfirm` runs, the popup has `aria-busy` and `data-pending`, Escape is ignored, and both buttons stay focusable with `aria-disabled` and ignore presses, so focus is never dropped. |
+| Failure | A throw or rejection keeps the dialog open and shows `errorMessage` in a `role="alert"` danger [`Callout`](Callout.md). Confirming again retries. Closing or reopening clears the error. |
+| Success | The dialog closes, focus returns to the trigger or `finalFocus`, then `onConfirmed` runs. |
+| Outside press | Never dismisses, pending or not. |
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | required | Trigger text; also the confirm button text unless `confirmLabel` is set |
+| `title` | `ReactNode` | required | `Dialog` heading and accessible name; ask the question the action settles |
+| `description` | `ReactNode` | unset | The consequence; the dialog's accessible description |
+| `details` | `ReactNode` | unset | Further consequence content, such as what else is removed |
+| `onConfirm` | `() => unknown` | required | Runs the action. Return a promise for asynchronous work; throw or reject on failure |
+| `onConfirmed` | `() => void` | unset | Runs once per success, after the popup has unmounted; remove the trigger here. Also runs when success lands after a controlled close |
+| `confirmLabel` | `ReactNode` | `children` | Confirm button text; repeat the action's verb |
+| `pendingLabel` | `ReactNode` | `confirmLabel` | Confirm button text while the action runs |
+| `cancelLabel` | `ReactNode` | `"Cancel"` | Cancel button text |
+| `errorMessage` | `ReactNode \| (error: unknown) => ReactNode` | `"The action did not complete. Try again."` | Alert text after a failure; a function receives the thrown reason |
+| `open` | `boolean` | uncontrolled | Controlled visibility |
+| `defaultOpen` | `boolean` | `false` | Initial visibility when uncontrolled |
+| `onOpenChange` | `(open: boolean) => void` | unset | Each visibility change, including the close after success; pending dismissals never reach it |
+| `finalFocus` | `Dialog` `finalFocus` | trigger | Focus target after closing; set it when success removes the trigger |
+| `container` | portal container | document body | Themed host for the popup |
+| `classNames` | `{ popup?, backdrop?, details?, error? }` | unset | Classes for inner parts |
+| `render` | Base UI `render` | `<Button variant="danger" />` | Trigger element |
+
+```tsx
+<ConfirmAction
+  render={<Button variant="ghost" size="sm" />}
+  aria-label="Revoke Laptop"
+  title="Revoke Laptop?"
+  description="Requests signed with this key fail immediately."
+  confirmLabel="Revoke key"
+  finalFocus={listHeading}
+  onConfirm={() => revokeKey("laptop")}
+  onConfirmed={() => removeRow("laptop")}
+>
+  Revoke
+</ConfirmAction>
+```
+
+## Responsibilities
+
+The application owns the operation: authorization, idempotency, timeouts and what the server deletes. `onConfirm` must settle; a promise that never settles leaves the dialog pending. Announce success in the page, because the dialog is gone when it completes. Remove the trigger's row in `onConfirmed`, not inside `onConfirm`: a data layer that removes the row while the action is still settling unmounts the dialog mid-close and loses focus. Do not attach the same action anywhere else on the trigger; the confirmation is its one route.
+
+For an urgent interruption that needs `alertdialog` semantics, use an alert-dialog primitive. `ConfirmAction` remains a named modal dialog, as the [confirmation pattern](../../../../docs/guides/forms-and-overlays.md#confirmation-pattern) describes.
+
+## Related components
+
+Use [`Dialog`](Dialog.md) to compose a confirmation that needs fields or a different action layout. Use [`Button`](Button.md) `variant="danger"` alone only when the action is reversible, such as one with undo.

package/docs/components/Container.md

@@ -34,8 +34,8 @@ export function Example() {
 | `size`   | `sm` (40rem) `md` (64rem) `lg` (80rem) `full` (unbounded)  | `lg`    |
 | `gutter` | Shared 1–2rem inline padding; false removes it             | `true`  |
 
-Non-default generic native elements require an explicit `as`; native props and refs follow that element. Explicit `gutter` owns its data attribute even when caller attributes conflict. Widths include gutters. Use one page boundary; nested containers should disable gutters when the parent owns padding.
+Set `as` explicitly when using an element other than the default; native props and refs then match that element. An explicit `gutter` value takes priority over a conflicting data attribute. Widths include side padding. Use one page container, and turn off nested gutters when the parent already provides padding.
 
 ## Related components
 
-Use [Inline](Inline.md) for a row, [Grid](Grid.md) for a collection, and [Split](Split.md) for two responsive columns.
+Use [`Inline`](Inline.md) for a row, [`Stack`](Stack.md) for vertical flow, [`Grid`](Grid.md) for a collection, and [`Split`](Split.md) for two responsive columns.