@capra/core 1.8.2 → 1.9.0

package/dist/style.css

@@ -679,72 +679,67 @@
     transform: translate(50%, -50%);
   }
 }
-.capra-ListItem-module-VUh15W-listItem {
-  color: var(--cds2-color-foreground-default);
-  font: var(--cds2-typography-body-md-normal);
+.capra-ListItem-module-QN6vFW-__listItem-layout {
   padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
   gap: var(--cds2-spacing-md);
   grid-template-columns: auto 1fr auto;
-  grid-template-areas: "capra-ListItem-module-VUh15W-leading capra-ListItem-module-VUh15W-content capra-ListItem-module-VUh15W-trailing";
-  width: 100%;
+  grid-template-areas: "capra-ListItem-module-QN6vFW-leading capra-ListItem-module-QN6vFW-content capra-ListItem-module-QN6vFW-trailing";
   display: grid;
 }
 
-.capra-ListItem-module-VUh15W-slots:not(:empty):not([data-trailing="true"]) {
-  margin-inline-end: var(--cds-spacing-md);
-}
-
-.capra-ListItem-module-VUh15W-slots[data-trailing="true"]:not(:empty) {
-  margin-inline-start: var(--cds-spacing-md);
+.capra-ListItem-module-QN6vFW-listItem {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  width: 100%;
 }
 
-.capra-ListItem-module-VUh15W-slots {
+.capra-ListItem-module-QN6vFW-slots {
   font: var(--cds2-typography-body-md-normal);
   align-items: center;
   gap: var(--cds2-spacing-md);
   min-height: var(--cds2-dimension-component-sm);
-  grid-column: capra-ListItem-module-VUh15W-leading;
+  grid-column: capra-ListItem-module-QN6vFW-leading;
   display: flex;
 
   &[data-trailing="true"] {
-    grid-column: capra-ListItem-module-VUh15W-trailing;
+    grid-column: capra-ListItem-module-QN6vFW-trailing;
   }
 }
 
-.capra-ListItem-module-VUh15W-slot {
+.capra-ListItem-module-QN6vFW-slot {
   min-width: var(--cds2-dimension-component-xs);
   justify-content: center;
   align-items: center;
   display: flex;
 }
 
-.capra-ListItem-module-VUh15W-content {
+.capra-ListItem-module-QN6vFW-content {
   column-gap: var(--cds2-spacing-md);
-  grid-template: "capra-ListItem-module-VUh15W-label capra-ListItem-module-VUh15W-suffix"
-                 "capra-ListItem-module-VUh15W-description capra-ListItem-module-VUh15W-description"
+  grid-template: "capra-ListItem-module-QN6vFW-label capra-ListItem-module-QN6vFW-suffix"
+                 "capra-ListItem-module-QN6vFW-description capra-ListItem-module-QN6vFW-description"
                  / 1fr auto;
-  grid-column: capra-ListItem-module-VUh15W-content;
+  grid-column: capra-ListItem-module-QN6vFW-content;
   display: grid;
 }
 
-.capra-ListItem-module-VUh15W-label {
+.capra-ListItem-module-QN6vFW-label {
   color: var(--cds2-color-foreground-default);
   font: var(--cds2-typography-body-md-normal);
-  grid-area: capra-ListItem-module-VUh15W-label;
+  grid-area: capra-ListItem-module-QN6vFW-label;
   overflow: hidden;
 }
 
-.capra-ListItem-module-VUh15W-suffix {
+.capra-ListItem-module-QN6vFW-suffix {
   color: var(--cds2-color-foreground-subtle);
   font: var(--cds2-typography-body-sm-normal);
-  grid-area: capra-ListItem-module-VUh15W-suffix;
+  grid-area: capra-ListItem-module-QN6vFW-suffix;
   justify-self: end;
 }
 
-.capra-ListItem-module-VUh15W-description {
+.capra-ListItem-module-QN6vFW-description {
   color: var(--cds2-color-foreground-subtle);
   font: var(--cds2-typography-body-sm-normal);
-  grid-area: capra-ListItem-module-VUh15W-description;
+  grid-area: capra-ListItem-module-QN6vFW-description;
 }
 .capra-Pill-module-xa3pfa-pill {
   align-items: center;
@@ -4129,3 +4124,169 @@ input:disabled + .capra-Radio-module-ZI7rzq-inner:after {
   gap: var(--cds2-spacing-md);
   display: inline-flex;
 }
+.capra-ListItem-module-QN6vFW-__listItem-layout {
+  padding: var(--cds2-spacing-sm) var(--cds2-spacing-md);
+  gap: var(--cds2-spacing-md);
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas: "capra-ListItem-module-QN6vFW-leading capra-ListItem-module-QN6vFW-content capra-ListItem-module-QN6vFW-trailing";
+  display: grid;
+}
+
+.capra-ListItem-module-QN6vFW-listItem {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  width: 100%;
+}
+
+.capra-ListItem-module-QN6vFW-slots {
+  font: var(--cds2-typography-body-md-normal);
+  align-items: center;
+  gap: var(--cds2-spacing-md);
+  min-height: var(--cds2-dimension-component-sm);
+  grid-column: capra-ListItem-module-QN6vFW-leading;
+  display: flex;
+
+  &[data-trailing="true"] {
+    grid-column: capra-ListItem-module-QN6vFW-trailing;
+  }
+}
+
+.capra-ListItem-module-QN6vFW-slot {
+  min-width: var(--cds2-dimension-component-xs);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.capra-ListItem-module-QN6vFW-content {
+  column-gap: var(--cds2-spacing-md);
+  grid-template: "capra-ListItem-module-QN6vFW-label capra-ListItem-module-QN6vFW-suffix"
+                 "capra-ListItem-module-QN6vFW-description capra-ListItem-module-QN6vFW-description"
+                 / 1fr auto;
+  grid-column: capra-ListItem-module-QN6vFW-content;
+  display: grid;
+}
+
+.capra-ListItem-module-QN6vFW-label {
+  color: var(--cds2-color-foreground-default);
+  font: var(--cds2-typography-body-md-normal);
+  grid-area: capra-ListItem-module-QN6vFW-label;
+  overflow: hidden;
+}
+
+.capra-ListItem-module-QN6vFW-suffix {
+  color: var(--cds2-color-foreground-subtle);
+  font: var(--cds2-typography-body-sm-normal);
+  grid-area: capra-ListItem-module-QN6vFW-suffix;
+  justify-self: end;
+}
+
+.capra-ListItem-module-QN6vFW-description {
+  color: var(--cds2-color-foreground-subtle);
+  font: var(--cds2-typography-body-sm-normal);
+  grid-area: capra-ListItem-module-QN6vFW-description;
+}
+
+.capra-Tree-module--hXpBa-root {
+  width: 100%;
+  padding: var(--cds2-spacing-xs);
+}
+
+.capra-Tree-module--hXpBa-item {
+  border-radius: var(--cds2-radius-md);
+  color: var(--cds2-color-foreground-default);
+  min-height: var(--cds2-dimension-component-sm);
+
+  &[data-hovered="true"]:not([data-disabled="true"]) {
+    background-color: var(--cds2-color-background-accent-hover);
+  }
+
+  &[data-focus-visible="true"] {
+    outline: var(--cds2-border-focus);
+    outline-offset: var(--cds2-spacing-xs);
+  }
+
+  &[data-disabled="true"] {
+    color: var(--cds2-color-foreground-disabled);
+    cursor: not-allowed;
+
+    & .capra-Tree-module--hXpBa-itemLabel, & .capra-Tree-module--hXpBa-itemSuffix, & .capra-Tree-module--hXpBa-chevronButton {
+      color: var(--cds2-color-foreground-disabled);
+    }
+  }
+}
+
+.capra-Tree-module--hXpBa-indentSpacer {
+  flex: 0 0 var(--cds2-dimension-component-xs);
+  height: var(--cds2-dimension-component-md);
+  width: var(--cds2-dimension-component-xs);
+  margin-block: calc(-1 * var(--cds2-spacing-sm));
+  display: block;
+  position: relative;
+
+  &:before {
+    content: "";
+    border-right: var(--cds2-border-default);
+    z-index: -1;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: calc(50% - .5px);
+  }
+}
+
+.capra-Tree-module--hXpBa-chevronButton {
+  all: unset;
+  border-radius: var(--cds2-radius-md);
+  cursor: pointer;
+  flex: 0 0 var(--cds2-dimension-component-sm);
+  height: var(--cds2-dimension-component-sm);
+  width: var(--cds2-dimension-component-sm);
+  margin: calc(-1 * var(--cds2-spacing-sm));
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+
+  &[data-focus-visible="true"] {
+    outline: var(--cds2-border-focus);
+    outline-offset: var(--cds2-spacing-xs);
+  }
+}
+
+.capra-Tree-module--hXpBa-chevronIcon {
+  transition: transform var(--cds2-motion-duration-medium-2) ease;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.capra-Tree-module--hXpBa-item[data-expanded="true"] .capra-Tree-module--hXpBa-chevronIcon {
+  transform: rotate(90deg);
+}
+
+.capra-Tree-module--hXpBa-selectionCheckbox {
+  flex: 0 0 var(--cds2-dimension-component-xs);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.capra-Tree-module--hXpBa-itemContent {
+  grid-template-areas: "capra-Tree-module--hXpBa-label capra-Tree-module--hXpBa-suffix";
+  grid-template-rows: unset;
+  align-items: center;
+}
+
+.capra-Tree-module--hXpBa-itemLabel {
+  color: var(--cds2-color-foreground-default);
+}
+
+.capra-Tree-module--hXpBa-itemSuffix {
+  color: var(--cds2-color-foreground-subtle);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .capra-Tree-module--hXpBa-chevronIcon {
+    transition: none;
+  }
+}

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

@@ -10,4 +10,6 @@ Alerts are used to communicate important information to the user.
 | `children` | `React.ReactNode` | Yes | `--` | The description of the alert. This is required.<br><br>@required |
 | `action` | `{     label: string;     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;   } \| React.ReactElement` | No | `--` | The configuration of the action button. The object must contain a label displayed on the button and an onClick callback function. This is optional.<br><br>When the object is not provided, the alert will not render the action button. |
 | `onDismiss` | `true \| (() => void)` | No | `--` | Optional function to call when the user dismisses the alert.<br><br>If this is not provided, the alert will not render the dismiss button.<br><br>Alerts with `appearance="danger"` cannot be dismissed and will not render the dismiss button.<br><br>**Integration note:** while the `Alert` will handle its own dismissal, this is non-persistent.<br>Persistent dismissal should be handled by the parent component. |
+| `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-anchor--usage.md

@@ -7,6 +7,8 @@
 | `isActive` | `boolean` | No | `--` | Whether the anchor is active. |
 | `isDisabled` | `boolean` | No | `--` | Whether the anchor is disabled. |
 | `as` | `As` | No | `--` | The underlying element rendered by the anchor. Defaults to `a`. |
+| `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. |
 
 ## Usage

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

@@ -12,6 +12,8 @@ AutocompleteField combines a text field with a suggestions list. Consumers can s
 | `items` | `AutocompleteItem[]` | No | `--` | The items to display in the dropdown. |
 | `value` | `AutocompleteItem['value']` | No | `--` | The value of the input. |
 | `shouldAutoSizeDropdown` | `boolean` | No | `--` | Whether to automatically size the dropdown to the width of the input. Defaults to `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. |
 | `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. |

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

@@ -9,5 +9,7 @@ Badges display an indicator/counter on an associated component.
 | `count` | `number` | No | 0 | The number to display in the badge. Default is 0. |
 | `showZero` | `boolean` | No | false | Whether to display the badge when the count is zero. Default is false. |
 | `overflowCount` | `number` | No | 99 | The number to display in the badge when the count is greater than the overflow count. Default is 99. |
+| `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-live` | `React.AriaAttributes['aria-live']` | No | `--` | `--` |

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