@capra/core 1.8.2 → 1.10.0

package/docs/core-breadcrumbs--usage.md

@@ -10,6 +10,8 @@ The `Breadcrumbs` component is partially implemented and does not yet support dr
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `aria-label` | `string` | No | 'Breadcrumb' | Accessible name for the breadcrumb navigation landmark.<br>Defaults to `"Breadcrumb"`. |
 | `size` | `string` | No | 'md' | `--` |

package/docs/core-button--usage.md

@@ -14,4 +14,6 @@ Primary interactive element displaying text and supporting leading and trailing
 | `trailingIcon` | `SvgIcon` | No | `--` | Icon to display after the button text. |
 | `block` | `boolean` | No | `--` | Whether to display the button as a block-level (full-width) component. Defaults to `false`. |
 | `onClick` | `React.ComponentProps<'button'>['onClick']` | No | `--` | Click handler for the button. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-buttonlink--usage.md

@@ -21,4 +21,6 @@ Primary interactive element displaying text and supporting leading and trailing
 | `download` | `boolean \| string` | No | `--` | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
 | `referrerPolicy` | `HTMLAttributeReferrerPolicy` | No | `--` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
 | `routerOptions` | `unknown` | No | `--` | Options for the configured client side router. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-checkbox--usage.md

@@ -8,6 +8,8 @@ Checkbox component for capturing boolean user input. Supports controlled and unc
 | `checked` | `boolean` | No | `--` | Controlled checked state. Use with onChange for controlled component. |
 | `defaultChecked` | `boolean` | No | `--` | Default checked state for uncontrolled component. |
 | `children` | `string \| React.ReactNode` | No | `--` | The label for the checkbox. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 
 ## Integration Notes

package/docs/core-collapse--usage.md

@@ -4,6 +4,8 @@ A collapsible disclosure section with an expandable header and panel. Pass **`ti
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `title` | `string` | Yes | `--` | Plain string title rendered in the disclosure heading. |
 | `headerTrailingContentSlot` | `React.ReactNode` | No | `--` | Trailing header region for actions (switches, buttons, etc.). |

package/docs/core-datepickerfield--usage.md

@@ -6,6 +6,8 @@
 | `label` | `string` | No | `--` | Label for the field. Required for accessibility; use aria-label if another element acts as label. |
 | `layout` | `'vertical' \| 'horizontal'` | No | `--` | Label and field layout: vertical (label above) or horizontal (label on leading side). Prefer vertical; use horizontal when space is limited. |
 | `granularity` | `'day' \| 'second'` | No | `--` | Smallest date/time unit shown in the field. Only `day` and `second` are supported. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `canClear` | `boolean` | No | `--` | When true, shows a clear control to the left of the calendar button while the field has a value. |
 | `disabled` | `boolean` | No | `--` | Disables the field. |

package/docs/core-daterangepickerfield--usage.md

@@ -7,6 +7,8 @@
 | `layout` | `'vertical' \| 'horizontal'` | No | `--` | Label and field layout: vertical (label above) or horizontal (label on leading side). Prefer vertical; use horizontal when space is limited. |
 | `placeholder` | `unknown` | No | `--` | Placeholders for empty start and end, shown with a swap icon between them when the group is not focus-within. |
 | `granularity` | `'day' \| 'second'` | No | `--` | Smallest date/time unit shown in the fields. Only `day` and `second` are supported. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `canClear` | `boolean` | No | `--` | When true, shows a clear control to the left of the calendar button while the field has a value. |
 | `disabled` | `boolean` | No | `--` | Disables the field. |

package/docs/core-divider--usage.md

@@ -4,5 +4,7 @@ Divider separates and groups content. Use horizontal dividers between sections;
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `type` | `string` | No | 'horizontal' | `--` |

package/docs/core-emptystate--usage.md

@@ -10,4 +10,6 @@ The EmptyState component is used to display a message when there is no data to d
 | `title` | `string` | Yes | `--` | The title to display in the empty state. |
 | `description` | `string` | No | `--` | The description to display in the empty state. Please do not skip this property without a good reason. |
 | `children` | `React.ReactNode` | No | `--` | Generic use for adding a button or other action elements below the description. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-helpertext--usage.md

@@ -8,4 +8,6 @@ Helper text for inputs.
 | `children` | `string` | No | `--` | Main text. Use for hints, requirements, disclaimers, etc. |
 | `countText` | `string` | No | `--` | Text to display on the right side of the helper text. Is marked as a live content area via `aria-live`. |
 | `disabled` | `boolean` | No | `--` | Whether the input the helper text applies to is disabled. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-iconbutton--usage.md

@@ -12,4 +12,6 @@ Interactive element displaying a single icon.
 | `disabled` | `boolean` | No | false | Whether the button is disabled. |
 | `pending` | `boolean` | No | false | Whether the button is in a pending state. |
 | `onClick` | `React.ComponentProps<'button'>['onClick']` | No | `--` | Click handler for the button. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-inputrow--usage.md

@@ -3,4 +3,6 @@
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `children` | `React.ReactNode` | No | `--` | `--` |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-label--usage.md

@@ -7,6 +7,8 @@ Label text and optional required indicator for form fields, aligned with Capra f
 | `children` | `string` | No | `--` | Text to display in the label. |
 | `required` | `boolean` | No | `--` | Whether the field the label is labeling is required (shows asterisk after label). |
 | `trailingSlot` | `React.ReactNode` | No | `--` | Content after the label text. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 
 ## React Aria

package/docs/core-link--usage.md

@@ -13,4 +13,6 @@ Links are navigational elements that take users to a new page.
 | `download` | `boolean \| string` | No | `--` | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
 | `referrerPolicy` | `HTMLAttributeReferrerPolicy` | No | `--` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
 | `routerOptions` | `unknown` | No | `--` | Options for the configured client side router. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-listitem--usage.md

@@ -3,4 +3,6 @@
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `as` | `As` | No | `--` | `--` |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-menu--usage.md

@@ -2,6 +2,8 @@
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `trigger` | `React.ReactElement` | Yes | `--` | Single element that toggles the menu (e.g. button). Rendered as the menu trigger; must forward refs to a focusable DOM node (wrapped with React Aria {@link Pressable} internally). |
 | `children` | `React.ReactNode` | No | `--` | Menu content. Use Menu.Item, Menu.Section, Menu.Header, Menu.Divider. |

package/docs/core-modal--usage.md

@@ -4,6 +4,8 @@
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `size` | `string` | No | 'md' | `--` |
 | `isDismissible` | `boolean` | No | true | `--` |

package/docs/core-pagination--usage.md

@@ -10,4 +10,6 @@ Pagination component for navigating through paged content. Renders prev/next but
 | `onChange` | `(page: number, pageSize: number) => void` | No | `--` | Callback when page changes. |
 | `disabled` | `boolean` | No | false | Whether the pagination is disabled. |
 | `aria-label` | `string` | Yes | `--` | Accessible name for the navigation. Required for accessibility. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-pill--usage.md

@@ -7,4 +7,6 @@
 | `variant` | `'bold' \| 'muted' \| 'outline'` | No | 'bold' | A variant to apply to the pill. Only applies when the appearance is not 'default'.<br><br><ul><br>  <li><br>    'bold' - Can be used for isolated pills, such as when in the header of an object details page.<br>    Use bold pills with caution, since they can easily distract from the primary content.<br>    Be cautious with multiple bold pills on a single page, and absolutely avoid multiple bold pills in close proximity.<br>  </li><br>  <li>'muted' - Used when pills are inline with other content, such as table cells.</li><br></ul><br><br>@default 'bold' |
 | `appearance` | `'default' \| 'info' \| 'danger' \| 'warning' \| 'success' \| 'highlight'` | No | 'default' | The appearance of the pill, which determines its color and severity.<br><br><ul><br>  <li>'info' - Information pills communicate general information or an important property.</li><br>  <li>'danger' - Danger pills communicate problems that require action to be resolved.</li><br>  <li>'warning' - Warning pills can communicate information that is time-sensitive, or trending towards a danger state.</li><br>  <li>'success' - Success pills communicate successful states or completed actions.</li><br>  <li>'highlight' - Highlight pills bring special attention to metadata without communicating status.</li><br></ul><br><br>@default 'default' |
 | `inline` | `boolean` | No | false | Whether to render the pill as an inline element. This is useful when the pill is used in a heading or other inline context.<br><br>By default, the pill will be rendered as a block element.<br><br>@default false |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-radio--usage.md

@@ -5,4 +5,6 @@ A presentational radio button component. You will typically use this component w
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `value` | `string \| null` | Yes | `--` | The value of the radio button. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-radiogroup--usage.md

@@ -9,4 +9,6 @@ A control wrapper for a group of radio buttons.
 | `disabled` | `boolean` | No | `--` | Whether the radios in the group are disabled |
 | `value` | `string \| null` | No | `--` | The current value of the radio group |
 | `layout` | `'vertical' \| 'horizontal'` | No | 'horizontal' | Whether the radio buttons should be displayed vertically or horizontally<br>@default 'horizontal' |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-radiotile--usage.md

@@ -7,4 +7,6 @@ A card variation of a radio button component. You will typically use this compon
 | `description` | `React.ReactNode` | No | `--` | Optional description text displayed below the main label in the tile. |
 | `children` | `React.ReactNode` | Yes | `--` | The main label for the tile. |
 | `icon` | `React.ReactNode` | No | `--` | Optional icon to display in the tile. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-ribbon--usage.md

@@ -4,6 +4,8 @@ A ribbon component used to highlight new features that exist in a 'preview' stat
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `children` | `string` | Yes | `--` | The label text to display. |
 | `color` | `(typeof ribbonColors)[number]` | No | 'teal' | The color of the ribbon. One of the predefined colors (teal, green, purple).<br>For custom colors, use FORCE__className with CSS that sets --_ribbon-background-color.<br>@default 'teal' |

package/docs/core-skeleton--usage.md

@@ -9,5 +9,4 @@ A skeleton is a graphical placeholder, reserving physical space in the page for
 | `paragraph` | `SkeletonParagraphProps \| boolean` | No | `--` | Show paragraph placeholder.<br>@default true |
 | `round` | `boolean` | No | `--` | Show paragraph and title radius when true.<br>@default false |
 | `active` | `boolean` | No | `--` | Show animation effect. Respects prefers-reduced-motion.<br>@default false |
-| `children` | `React.ReactNode` | No | `--` | When set together with `loading`: if `loading` is false, only `children`<br>are rendered (no skeleton). If `loading` is true, the skeleton is shown instead — for preset<br>layouts (title and/or paragraph) children are not mounted while loading; in element mode<br>(`title={false}` and `paragraph={false}`) children render inside the placeholder while loading. |
-| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+| `children` | `React.ReactNode` | No | `--` | When set together with `loading`: if `loading` is false, only `children`<br>are rendered (no skeleton). If `loading` is true, the skeleton is shown instead — for preset<br>layouts (title and/or paragraph) children are not mounted while loading; in element mode<br>(`title={false}` and `paragraph={false}`) children render inside the placeholder while loading. |

package/docs/core-skeletongroup--usage.md

@@ -5,6 +5,5 @@
 | `style` | `React.CSSProperties` | No | `--` | `--` |
 | `size` | `keyof typeof SKELETON_SIZE` | No | `--` | Preset dimensions from `dimension.component.*`; use `style` for custom width/height. |
 | `active` | `boolean` | No | `--` | Show animation effect. @default false |
-| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `block` | `boolean` | No | `--` | `--` |
 | `shape` | `'circle' \| 'round' \| 'square' \| 'default'` | No | `--` | `--` |

package/docs/core-spinner--usage.md

@@ -8,4 +8,6 @@ The Spinner component is used to display a loading state. It can be used in two
 | `title` | `string` | No | `--` | (optional) The title to display in the Spinner. |
 | `children` | `React.ReactNode` | No | `--` | The content to display inside the Spinner. When provided, Spinner acts as a wrapper with overlay. |
 | `isPending` | `boolean` | No | `--` | Whether the Spinner is visible. Only used when children are provided. @default true |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-switch--usage.md

@@ -5,4 +5,6 @@
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `size` | `'sm' \| 'md'` | No | `--` | `--` |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-tabnav--usage.md

@@ -4,6 +4,8 @@ TabNav provides a horizontal or vertical navigation styled as tabs. Tab items ar
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `activeKey` | `string` | No | `--` | Key of the currently active tab (for visual styling). Typically derived from the current URL. |
 | `onTabClick` | `(key: string, event: React.MouseEvent) => void` | No | `--` | Callback when a tab link is clicked (before navigation). |

package/docs/core-tag--usage.md

@@ -9,4 +9,6 @@ A tag component for displaying a label and an optional icon.
 | `children` | `string` | Yes | `--` | The label text to display in the tag. |
 | `size` | `(typeof tagSizes)[number]` | No | 'md' | The size of the tag. Defaults to `md`. |
 | `onDelete` | `() => void` | No | `--` | The callback function for when the user clicks the delete button. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-text--usage.md

@@ -7,4 +7,6 @@ Component for displaying text. The visual display can be controlled via `variant
 | `variant` | `(typeof variants)[number]` | No | `--` | The text style variant. Defaults to `body`. |
 | `color` | `Color \| 'inherit'` | No | `--` | The text foreground color. Can be a theme color or inherited from the environment. Defaults to `inherit`.<br>@default inherit |
 | `as` | `As` | No | `--` | The underlying element rendered by the component. Defaults to `span`. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-textarea--usage.md

@@ -12,6 +12,8 @@ TextArea component for multi-line text entry.
 | `helperText` | `string` | No | `--` | Helper text below the field. Replaced by error message when status is error. Use for requirements, disclaimers. |
 | `label` | `string` | No | `--` | Label for the field. Required for accessibility; use aria-label if another element acts as label. |
 | `layout` | `'vertical' \| 'horizontal'` | No | `--` | Label and field layout: vertical (label above) or horizontal (label on leading side). Prefer vertical; use horizontal when space is limited. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 
 Use `InputField` with `input={TextArea}` for label above the field, helper text, character count, and validation

package/docs/core-textinput--usage.md

@@ -14,6 +14,8 @@ TextInput component for single-line text entry. Backwards compatible with Ant De
 | `leadingSlot` | `React.ReactNode` | No | `--` | Content before the input (e.g. icon). |
 | `size` | `(typeof sizes)[number]` | No | `--` | Size of the input.<br>@default 'md' |
 | `trailingSlot` | `React.ReactNode` | No | `--` | Content after the input (e.g. icon or clear button). |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 
 Use `layout="vertical"` (default) for label above the field; use `layout="horizontal"` for label on the leading side when space is limited.

package/docs/core-tooltip--usage.md

@@ -45,4 +45,6 @@ function MyComponent() {
 | `placement` | `(typeof placements)[number]` | No | 'bottom' | The position of the tooltip relative to the trigger element.<br>@default 'bottom' |
 | `isDisabled` | `boolean` | No | false | Whether the tooltip is disabled.<br>@default false |
 | `getContainer` | `() => HTMLElement \| null` | No | `--` | The container to mount the tooltip in.<br>@default document.body<br><br>**Warning**: This is an unsafe feature and may cause accessibility, keyboard navigation, and other issues. Only use if you know what you are doing. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-topnav--usage.md

@@ -2,5 +2,7 @@
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `children` | `React.ReactNode` | No | `--` | `--` |

package/docs/core-tree--design.md

@@ -0,0 +1,31 @@
+# Core/Tree - Design
+
+A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+
+## Properties
+
+### Label
+
+All tree items are required to have a clear and concise label.
+
+### Parent
+
+Tree items containing decedents display a chevron to enable the user to show/hide the decedents.
+
+### Open
+
+When open, a parent Tree item's chevron displays pointing down.
+
+### Selectable
+
+A tree item can optionally be selectable. When enabled, a checkbox will appear to the left of the label.
+
+### Suffix
+
+A suffix provides space for information such as item counts.
+
+### Trailing Slot
+
+A trailing slot can optionally be used to add an icon to the tree item.
+
+In Figma the preferred icons for the trailing slot are Git statuses, but other icons can be used if needed.

package/docs/core-tree--usage.md

@@ -0,0 +1,102 @@
+# Core/Tree - Usage
+
+A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+
+## Basic usage
+
+```tsx
+import { Tree, type TreeItemType } from '@capra/core';
+
+const items: TreeItemType[] = [
+  {
+    key: 'logs',
+    label: 'Logs',
+    children: [
+      { key: 'auth', label: 'Auth' },
+      { key: 'system', label: 'System' },
+    ],
+  },
+];
+
+function Example() {
+  return <Tree items={items} aria-label="Log sources" defaultExpandedKeys={['logs']} />;
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+| `aria-label` | `string` | No | `--` | Defines a string value that labels the current element. |
+| `aria-labelledby` | `string` | No | `--` | Identifies the element (or elements) that labels the current element. |
+| `items` | `TreeItemType[]` | Yes | `--` | Items to render in the tree. |
+| `onAction` | `(key: Key) => void` | No | `--` | Handler that is called when a user performs an action on an item. |
+| `defaultExpandedKeys` | `Iterable<Key>` | No | `--` | The initial expanded keys when in uncontrolled mode. |
+| `defaultSelectedKeys` | `Iterable<Key>` | No | `--` | The initial selected keys when in uncontrolled mode. |
+| `expandedKeys` | `Iterable<Key>` | No | `--` | The currently expanded keys when in controlled mode. |
+| `onExpandedChange` | `(keys: Set<Key>) => void` | No | `--` | Handler that is called when the expanded keys change. |
+| `onSelectionChange` | `(keys: Set<Key>) => void` | No | `--` | Callback that is fired when the selection changes. |
+| `selectedKeys` | `Iterable<Key>` | No | `--` | The currently selected keys when in controlled mode. |
+| `selectionMode` | `'none' \| 'multiple'` | No | 'multiple' | The selection mode of the tree.<br>@default 'multiple' |
+
+## Selection patterns
+
+### Uncontrolled selection
+
+Use `defaultSelectedKeys` for simple uncontrolled multi-select. Selecting a parent cascades to all enabled
+descendants, and deselecting the parent removes the whole enabled branch.
+
+```tsx
+<Tree items={filesystemItems} aria-label="Remote filesystem" defaultSelectedKeys={['logs']} />
+```
+
+### Controlled selection
+
+Use `selectedKeys` with `onSelectionChange` when the selected branch needs to stay in application state. The callback
+receives the normalized key set after cascade rules are applied.
+
+```tsx
+const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set(['logs']));
+
+<Tree
+  items={filesystemItems}
+  aria-label="Remote filesystem"
+  selectedKeys={selectedKeys}
+  onSelectionChange={setSelectedKeys}
+/>;
+```
+
+### Disabled items
+
+Set `isDisabled` on an item to disable just that row. Disabled items are skipped during cascade selection and cannot
+be toggled directly.
+
+```tsx
+const items = [
+  {
+    key: 'notebooks',
+    label: 'Notebooks',
+    isDisabled: true,
+  },
+];
+```
+
+## Content options
+
+### Suffix and trailing slot
+
+Use `suffix` for short secondary metadata and `trailingSlot` for decorative affordances.
+
+## Accessibility
+
+| Key                          | Function                                                                                                                                                                                                                                                              |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`<br />`Shift+Tab`       | Moves focus into the tree.<br />- Focus is given to the last Tree \| Item to have focus.<br />- If no selection and no previous item had focus, focus is given to first item.<br />- If select and no previous item had focus, focus is given to first selected item. |
+| `Right Arrow`                | - When on a closed parent item, open the node; focus does not move.<br />- When on an open item, or item with no children, does nothing.                                                                                                                              |
+| `Left Arrow`                 | - When on an open parent item, closes the item; focus does not move.<br />- When on a closed item, or item with no children, does nothing.                                                                                                                            |
+| `Up Arrow`<br />`Down Arrow` | Moves focus to the next/previous visible item, without opening or closing a node.                                                                                                                                                                                     |
+| `Enter`                      | Triggers the default action.<br />- If selection is available, selects the currently focused item.<br />- If no selection is available, open/close the currently focused item.                                                                                        |
+| `Space`                      | Selects the currently focused item.                                                                                                                                                                                                                                   |

package/docs/core-verticalnavigation--usage.md

@@ -6,6 +6,8 @@ Vertical navigation shell with controlled and uncontrolled collapse support. Pro
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `collapsed` | `boolean` | No | `--` | Controlled collapsed state. |
 | `onCollapseChange` | `(collapsed: boolean) => void` | No | `--` | Callback fired when the collapsed state changes. |

package/docs/history-changelogs-capra-core--docs.md

@@ -1,5 +1,39 @@
 # History/Changelogs/@capra-core
 
+### 1.10.0
+
+#### Minor Changes
+
+* [a73a72f](https://bitbucket.org/cribl/capra-ui/commits/a73a72f): Add `Badge` `size` prop and `neutral` appearance.
+* [3d42958](https://bitbucket.org/cribl/capra-ui/commits/3d42958): Add `offset` prop to `BadgeLayout` to support additional positioning options.
+
+#### Patch Changes
+
+* [0b0e03a](https://bitbucket.org/cribl/capra-ui/commits/0b0e03a): Fix tab hover color
+
+### 1.9.0
+
+#### Minor Changes
+
+* [1cbe432](https://bitbucket.org/cribl/capra-ui/commits/1cbe432): Update intrarepo depedency ranges to use minor version pinning instead of exact versions
+
+  Excerpt from the dependency list in `package.json` for `@capra/domain`:
+
+  | Before                   | After                     |
+  | ------------------------ | ------------------------- |
+  | `"@capra/core": "1.6.0"` | `"@capra/core": "^1.6.0"` |
+
+* [674593e](https://bitbucket.org/cribl/capra-ui/commits/674593e): Add a `Tree` component
+
+* [8ebac6d](https://bitbucket.org/cribl/capra-ui/commits/8ebac6d): Make the `Label` component available.
+
+* [5224ebb](https://bitbucket.org/cribl/capra-ui/commits/5224ebb): Update component types for className and style to align with runtime behavior.
+
+#### Patch Changes
+
+* Updated dependencies [1cbe432](https://bitbucket.org/cribl/capra-ui/commits/1cbe432) — Update intrarepo depedency ranges to use minor version pinning instead of exact versions
+  * @capra/icons\@1.8.0
+
 ### 1.8.2
 
 #### Patch Changes

package/docs/index.md

@@ -103,6 +103,8 @@ Embedded documentation is available on the filesystem for each of these packages
 - [Core/Tooltip - Usage](./core-tooltip--usage.md)
 - [Core/TopNav - Design](./core-topnav--design.md)
 - [Core/TopNav - Usage](./core-topnav--usage.md)
+- [Core/Tree - Design](./core-tree--design.md)
+- [Core/Tree - Usage](./core-tree--usage.md)
 - [Core/VerticalNavigation - Design](./core-verticalnavigation--design.md)
 - [Core/VerticalNavigation - Usage](./core-verticalnavigation--usage.md)
 - [Core/VisuallyHidden - Design](./core-visuallyhidden--design.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -35,7 +35,7 @@
   "dependencies": {
     "react-aria": "^3.48.0",
     "react-aria-components": "^1.17.0",
-    "@capra/icons": "1.7.1"
+    "@capra/icons": "^1.8.0"
   },
   "devDependencies": {
     "clsx": "^2.1.1",
@@ -43,11 +43,11 @@
     "antd": "4.24.16",
     "storybook": "^10.4.6",
     "tsdown": "^0.22.7",
-    "@private/building": "0.0.5",
-    "@capra/theme": "1.3.1",
-    "@private/stories": "0.0.0",
-    "@private/linting": "0.0.1",
-    "@private/testing": "0.0.7"
+    "@capra/theme": "^1.4.0",
+    "@private/stories": "^0.0.0",
+    "@private/linting": "^0.0.1",
+    "@private/building": "^0.1.0",
+    "@private/testing": "^0.0.7"
   },
   "scripts": {
     "clean": "rm -rf ./dist",