@capra/core 1.5.3 → 1.7.0

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

@@ -0,0 +1,28 @@
+# Core/Collapse - Design
+
+A collapsible disclosure section with an expandable header and panel. Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions (switches, buttons), and the panel body via **`children`**.
+
+## Usage
+
+Use Collapse to structure readable content, separate regions, or group related information. Pair it with shared spacing, typography, and surface rules. Do not stretch it into an action pattern that already has a dedicated component.
+
+## Best Practices
+
+* Do use Collapse to support hierarchy, grouping, and readable scanning.
+* Don't turn Collapse into an action container when a dedicated interactive pattern exists.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                | Function                                                                                                                                                                                         |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `Tab`, `Shift-Tab` | When contents are collapsed, focus moves to the next or previous collapse header. When contents are expanded, focus moves to the next or previous focusable element within the expanded content. |
+| `Enter`, `Space`   | When focus is on the accordion header, toggles the expanded/collapsed state.                                                                                                                     |
+
+* When receiving focus through the keyboard, the focus outline appears around the title of the collapse header.
+
+## Related components
+
+* [Card](?path=/docs/core-card--design)
+* [Divider](?path=/docs/core-divider--design)

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

@@ -0,0 +1,20 @@
+# Core/Collapse - Usage
+
+A collapsible disclosure section with an expandable header and panel. Pass **`title`** for the header label, optional **`headerTrailingContentSlot`** for trailing actions (switches, buttons), and the panel body via **`children`**.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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.). |
+| `children` | `React.ReactNode` | Yes | `--` | Content of the disclosure panel. |
+
+### `Collapse` root API
+
+Pass **`title`** (plain string) for the header label, optional **`headerTrailingContentSlot`** for trailing actions
+(switches, buttons), and the panel body via **`children`**.
+
+The root forwards these `Disclosure` props from `react-aria-components`:
+**`id`** (use when a parent **`DisclosureGroup`** controls expansion),
+**`defaultExpanded`**, **`isExpanded`**, **`onExpandedChange`**, and **`isDisabled`**. Use **`FORCE__className`** on the
+root as the style escape hatch.

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

@@ -0,0 +1,71 @@
+# Core/DatePickerField - Design
+
+## Anatomy
+
+The date picker combines a segmented date input with a calendar in a popover. Values use types from
+[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/) (for example `CalendarDate`).
+The visible format follows the user’s locale.
+
+## Properties
+
+### Label
+
+Provide a visible `label` so the control has a clear accessible name. If another element acts as the label, wire the
+relationship with `aria-labelledby` or `aria-label` instead.
+
+### Value
+
+Use `value` with `onChange` for a controlled value, or `defaultValue` for an uncontrolled initial value. The handler
+receives `null` when the field is cleared.
+
+### Placeholder
+
+`placeholder` shows a single string when the field is empty and not focused. Prefer `helperText` for requirements or
+instructions that must stay visible.
+
+### Helper text
+
+Helper text sits below the field for requirements, hints, or errors. Pair `appearance="danger"` with error copy so
+the invalid state is clear visually and to assistive technologies.
+
+### Layout
+
+`layout` can be **vertical** (label above) or **horizontal** (label on the leading side). Prefer vertical; use
+horizontal when horizontal space is tight.
+
+## Feedback
+
+### Appearance
+
+`appearance` supports **default**, **danger** (invalid / error), and **warning**. Danger also drives the invalid
+state for accessibility in addition to any explicit `isInvalid` flag.
+
+### Disabled
+
+Disabled fields cannot be edited and do not receive focus. Values are not submitted with native form submission.
+
+### Read-only
+
+Read-only fields cannot be edited; the value stays visible for reading and assistive technologies.
+
+## Accessibility
+
+### Keyboard and pointer behavior
+
+* **Tab** moves focus into the segmented field or calendar trigger; **Shift+Tab** moves out.
+* Arrow keys adjust focused segments; calendar grid follows standard date grid keyboard patterns when the popover is open.
+* **Space** / **Enter** on the calendar button opens the popover where supported by the platform pattern.
+
+### Labeling and instructions
+
+Provide a visible `label` or an accessible name via `aria-label` / `aria-labelledby`. Do not rely on `placeholder` alone
+for the accessible name. Prefer persistent `helperText` for requirements; placeholder disappears when the user types.
+
+### Validation and state
+
+Use `appearance="danger"` with error content in `helperText` for a consistent error treatment. Set `required` when the
+field is mandatory. Disabled fields are not interactive and are excluded from native submission; read-only fields keep
+their values visible but are not editable.
+
+Ensure focus indicators remain visible (at least 2px, 3:1 contrast) and interactive targets meet at least 24×24 CSS
+pixels where applicable.

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

@@ -0,0 +1,57 @@
+# Core/DatePickerField - Usage
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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. |
+| `granularity` | `'day' \| 'second'` | No | `--` | Smallest date/time unit shown in the field. Only `day` and `second` are supported. |
+| `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. |
+| `id` | `string` | No | `--` | Optional id for the root; associates the label and field. |
+| `readOnly` | `boolean` | No | `--` | Read-only field. |
+| `required` | `boolean` | No | `--` | Required field. |
+| `isInvalid` | `boolean` | No | `--` | Invalid value; `appearance="danger"` also forces an invalid state for display. |
+
+## Props reference
+
+### Field layout and presentation
+
+| Prop               | Type                                 | Description                                                                                            |
+| ------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `label`            | `string`                             | Visible label text; pair with `required` or assistive naming when the visible label is not sufficient. |
+| `helperText`       | `string`                             | Descriptive or error text below the field (rendered in the description slot).                          |
+| `layout`           | `'vertical' \| 'horizontal'`         | Label placement relative to the control.                                                               |
+| `appearance`       | `'default' \| 'danger' \| 'warning'` | Visual status; `danger` also marks the field invalid for accessibility.                                |
+| `size`             | `'sm' \| 'md'`                       | Height and density of the input shell.                                                                 |
+| `leadingSlot`      | `ReactNode`                          | Optional content before the segmented input (same pattern as `TextInput`).                             |
+| `placeholder`      | `string`                             | String placeholder when empty and not focus-within.                                                    |
+| `id`               | `string`                             | Optional id for the root; associates the label and field.                                              |
+| `FORCE__className` | `string`                             | Escape hatch: extra class on the field shell; see `StylingOverrideProps` in source.                    |
+| `disabled`         | `boolean`                            | Disables the control.                                                                                  |
+| `readOnly`         | `boolean`                            | Read-only mode.                                                                                        |
+| `required`         | `boolean`                            | Marks the field required for forms and assistive technologies.                                         |
+| `isInvalid`        | `boolean`                            | Marks the value invalid; combined with `appearance === 'danger'`.                                      |
+
+### Value, format, and change events
+
+| Prop           | Type                                          | Description                                                                              |
+| -------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `value`        | `T \| null`                                   | Controlled value (`T` is a `DateValue` generic, defaulting to the library `DateValue`).  |
+| `defaultValue` | `T \| null`                                   | Initial value when uncontrolled.                                                         |
+| `onChange`     | `(value: MappedDateValue<T> \| null) => void` | Fired when the committed value changes.                                                  |
+| `granularity`  | `'day' \| 'hour' \| 'minute' \| 'second'`     | Smallest unit shown in the field (default follows value type, e.g. day for plain dates). |
+
+`MappedDateValue<T>` preserves time and calendar types aligned with `T` (for example `CalendarDate` vs `CalendarDateTime`).
+
+Use `isInvalid` and `helperText` for invalid feedback in Capra layouts. Validation behavior is fixed to ARIA-associated messaging for this shell (not configurable).
+
+### Props not supported or intentionally fixed
+
+| Prop                                           | Notes                                                                                        |
+| ---------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `children`                                     | Ignored; structure (label, input, calendar) is fixed.                                        |
+| `style`                                        | Not part of the public styling contract; use design tokens and `FORCE__className` if needed. |
+| `validationBehavior`                           | Not configurable; the implementation always uses ARIA-associated validation for this shell.  |
+| `description`, `errorMessage` (slot-style API) | Not part of the public props surface; use `helperText` and validation props instead.         |

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

@@ -0,0 +1,76 @@
+# Core/DateRangePickerField - Design
+
+## Anatomy
+
+The date range picker combines two segmented date inputs (start and end) with a range calendar in a popover. Values use
+[`RangeValue`](https://react-spectrum.adobe.com/react-aria/DateRangePicker.html) over types from
+[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/) (for example `CalendarDate`). The
+visible format follows the user’s locale.
+
+## Properties
+
+### Label
+
+Provide a visible `label` so the control has a clear accessible name. If another element acts as the label, wire the
+relationship with `aria-labelledby` or `aria-label` instead.
+
+### Value
+
+Use `value` with `onChange` for a controlled range, or `defaultValue` for an uncontrolled initial range. The handler
+receives `null` when the field is cleared. Each bound is a `DateValue` consistent with your generic (for example
+both `CalendarDate`).
+
+### Placeholder
+
+`placeholder` is a pair of strings (`[start, end]`) shown when neither bound is set and the inputs are not
+focus-within, with a swap icon between them. Prefer `helperText` for requirements or instructions that must stay
+visible.
+
+### Helper text
+
+Helper text sits below the field for requirements, hints, or errors. Pair `appearance="danger"` with error copy so
+the invalid state is clear visually and to assistive technologies.
+
+### Layout
+
+`layout` can be **vertical** (label above) or **horizontal** (label on the leading side). Prefer vertical; use
+horizontal when horizontal space is tight.
+
+## Feedback
+
+### Appearance
+
+`appearance` supports **default**, **danger** (invalid / error), and **warning**. Danger also drives the invalid
+state for accessibility in addition to any explicit `isInvalid` flag.
+
+### Disabled
+
+Disabled fields cannot be edited and do not receive focus. Values are not submitted with native form submission.
+
+### Read-only
+
+Read-only fields cannot be edited; the range stays visible for reading and assistive technologies.
+
+## Accessibility
+
+### Keyboard and pointer behavior
+
+* **Tab** moves focus into the segmented fields or calendar trigger; **Shift+Tab** moves out.
+* Arrow keys adjust focused segments; the range calendar grid follows standard date grid and range selection patterns when
+  the popover is open.
+* **Space** / **Enter** on the calendar button opens the popover where supported by the platform pattern.
+
+### Labeling and instructions
+
+Provide a visible `label` or an accessible name via `aria-label` / `aria-labelledby`. Do not rely on `placeholder` alone
+for the accessible name. Prefer persistent `helperText` for requirements; the string placeholder hides when the user
+focuses or enters either bound.
+
+### Validation and state
+
+Use `appearance="danger"` with error content in `helperText` for a consistent error treatment. Set `required` when both
+bounds are mandatory. Disabled fields are not interactive and are excluded from native submission; read-only fields keep
+their values visible but are not editable.
+
+Ensure focus indicators remain visible (at least 2px, 3:1 contrast) and interactive targets meet at least 24×24 CSS
+pixels where applicable.

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

@@ -0,0 +1,62 @@
+# Core/DateRangePickerField - Usage
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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. |
+| `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. |
+| `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. |
+| `id` | `string` | No | `--` | Optional id for the root; associates the label and field. |
+| `readOnly` | `boolean` | No | `--` | Read-only field. |
+| `required` | `boolean` | No | `--` | Required field. |
+| `isInvalid` | `boolean` | No | `--` | Invalid value; `appearance="danger"` also forces an invalid state for display. |
+
+## Props reference
+
+### Field layout and presentation
+
+| Prop               | Type                                 | Description                                                                                            |
+| ------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `label`            | `string`                             | Visible label text; pair with `required` or assistive naming when the visible label is not sufficient. |
+| `helperText`       | `string`                             | Descriptive or error text below the field (rendered in the description slot).                          |
+| `layout`           | `'vertical' \| 'horizontal'`         | Label placement relative to the control.                                                               |
+| `appearance`       | `'default' \| 'danger' \| 'warning'` | Visual status; `danger` also marks the field invalid for accessibility.                                |
+| `size`             | `'sm' \| 'md'`                       | Height and density of the input shell.                                                                 |
+| `leadingSlot`      | `ReactNode`                          | Optional content before the segmented inputs (same pattern as `TextInput`).                            |
+| `placeholder`      | `readonly [string, string]`          | Start and end placeholders when both bounds are empty and the group is not focus-within.               |
+| `id`               | `string`                             | Optional id for the root; associates the label and field.                                              |
+| `FORCE__className` | `string`                             | Escape hatch: extra class on the field shell; see `StylingOverrideProps` in source.                    |
+| `disabled`         | `boolean`                            | Disables the control.                                                                                  |
+| `readOnly`         | `boolean`                            | Read-only mode.                                                                                        |
+| `required`         | `boolean`                            | Marks the field required for forms and assistive technologies.                                         |
+| `isInvalid`        | `boolean`                            | Marks the value invalid; combined with `appearance === 'danger'`.                                      |
+
+### Value, format, overlay, and change events
+
+| Prop                  | Type                                                      | Description                                                                               |
+| --------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `value`               | `RangeValue<T> \| null`                                   | Controlled range (`T` is a `DateValue` generic, defaulting to the library `DateValue`).   |
+| `defaultValue`        | `RangeValue<T> \| null`                                   | Initial range when uncontrolled.                                                          |
+| `onChange`            | `(value: RangeValue<MappedDateValue<T>> \| null) => void` | Fired when the committed range changes.                                                   |
+| `granularity`         | `'day' \| 'hour' \| 'minute' \| 'second'`                 | Smallest unit shown in the fields (default follows value type, e.g. day for plain dates). |
+| `shouldCloseOnSelect` | `boolean \| () => boolean`                                | Whether the popover closes after a calendar interaction.                                  |
+
+`MappedDateValue<T>` preserves time and calendar types aligned with `T` (for example `CalendarDate` vs `CalendarDateTime`).
+
+For selecting a new range entirely inside the calendar without the overlay closing between the first and second date,
+set `shouldCloseOnSelect={false}` (as in the example stories).
+
+Use `isInvalid` and `helperText` for invalid feedback in Capra layouts. Validation behavior is fixed to ARIA-associated messaging for this shell (not configurable).
+
+### Props not supported or intentionally fixed
+
+| Prop                                           | Notes                                                                                        |
+| ---------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `children`                                     | Ignored; structure (label, inputs, calendar) is fixed.                                       |
+| `style`                                        | Not part of the public styling contract; use design tokens and `FORCE__className` if needed. |
+| `validationBehavior`                           | Not configurable; the implementation always uses ARIA-associated validation for this shell.  |
+| `description`, `errorMessage` (slot-style API) | Not part of the public props surface; use `helperText` and validation props instead.         |

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

@@ -0,0 +1,35 @@
+# Core/Divider - Design
+
+Divider separates and groups content. Use horizontal dividers between sections; use vertical dividers between inline items. A horizontal divider can optionally display a label. Dividers are static and not keyboard focusable.
+
+## Usage
+
+Use Collapse to structure readable content, separate regions, or group related information. Pair it with shared spacing, typography, and surface rules. Do not stretch it into an interaction pattern that already has a dedicated component.
+
+## Properties
+
+### Label
+
+A horizontal divider can be given a label to provide context to a grouping. When possible, avoid labeled dividers and use headings instead. When you do use a label, ensure it has the proper semantic level (e.g. pass an `<h2>` or `<h3>` as children) so it is announced as a heading by assistive technologies.
+
+## Best Practices
+
+Do:
+
+* Do use Divider to separate semantically distinct groups.
+* Do use a label when the divider introduces a new conceptual group.
+
+Don't:
+
+* Don't use Divider between every list item in a dense list.
+* Don't use Divider as pure decoration.
+
+## Accessibility
+
+* Dividers are static and not keyboard focusable.
+* Unlabeled horizontal dividers render as an `<hr>` (a thematic break between content).
+* When a horizontal divider has a label, prefer a real heading element as children (for example, `Text` with `as="h2"` or `as="h3"`) when the label introduces a new section, so the label is announced with the correct level. When possible, avoid labeled dividers and use headings instead.
+
+## Related components
+
+* [Collapse](?path=/docs/core-collapse--design)

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

@@ -0,0 +1,8 @@
+# Core/Divider - Usage
+
+Divider separates and groups content. Use horizontal dividers between sections; use vertical dividers between inline items. A horizontal divider can optionally display a label. Dividers are static and not keyboard focusable.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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-drawer--design.md

@@ -0,0 +1,87 @@
+# Core/Drawer - Design
+
+## Behavior
+
+### Modality
+
+A contextual sheet can be **modal** or **non-modal**.
+
+**Modal** sheets use a scrim to block interaction with the main page.
+
+**Non-modal** sheets allow simultaneous interaction with the sheet and main page surfaces.
+Non-modal sheets are best used for experiences that require a persistent but dismissible sheet that benefits from
+interacting with the main page, like viewing location details on a map.
+
+### Navigation
+
+Navigating within a context sheet should be avoided where possible. If navigating is necessary, keep it shallow –
+no more than 1 level deep.
+
+When presenting a secondary view in a context sheet, the primary view content is replaced. The secondary view is
+dismissed by making a selection or pressing a backward navigation button.
+
+### Dismissing
+
+Context sheets are dismissed by:
+
+1. Pressing the close button
+2. Confirming or cancelling the drawer
+3. Interacting with the scrim (when present)
+4. Pressing the escape key when the general sheet container is focused
+
+In code, wire footer actions and other dismiss paths to `onClose`. A scrim is shown when the drawer
+is **modal** (`modal`).
+
+## Screen size
+
+### Small screens
+
+On small screens, the vertical height of a context sheet defaults up to 50% of the screen height. Scrolling the
+sheet first slides it to full height before the content area scrolls.
+
+### Medium and large screens
+
+On larger screens, drawers are fixed to the **trailing** edge of the screen. Content that extends beyond the
+vertical bounds of the drawer scrolls. Do not scroll horizontally. The drawer header and footer are pinned above the
+scrolled content. Drawers have a min-width of 400px and max-width of 80% of the parent viewport.
+
+## Best practices
+
+### Stacking
+
+**Do**
+
+Keep interactions within context sheets on the sheet surface. Use inline progressive disclosure to reveal
+additional or optional content.
+
+**Don't**
+
+Launch other context sheets over a context sheet.
+
+### In-sheet navigation
+
+**Do**
+
+Keep navigation to a minimum within context sheets. Keep the navigation stack shallow when necessary, no more than
+1 level.
+
+**Don't**
+
+Add deep or multi-level navigation stacks inside a single context sheet; prefer replacing content or using shallow
+steps instead.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                 | Function                                                                                                                                       |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab` / `Shift+Tab` | In **modal** mode, focus stays within the drawer while open. In **non-modal** mode, focus can move freely between the sheet and the main page. |
+| `Escape`            | Closes the drawer whether focus is on the dialog surface or inside it (capture-phase listener).                                                |
+
+### Roles and properties
+
+* The panel uses `role="dialog"` with `aria-labelledby` (title) or `aria-label` as needed. While open, `aria-modal` is `true` for modal drawers and `false` for non-modal drawers.
+* **Modal** mode: focus is trapped; `usePreventScroll` locks page scrolling. **Non-modal** mode: no focus containment or scroll lock on the document.
+* The close control exposes an accessible name (“Close drawer”).
+* When you add `Breadcrumbs` in the title, the trail is an ordered list with an `aria-label` of “Breadcrumb” by default; the last crumb should represent the current page (typically without an `href`).

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

@@ -0,0 +1,9 @@
+# Core/Drawer - Usage
+
+### Implementation
+
+The drawer UI is rendered in a **portal** (default `document.body`), with `position: fixed` and `top`/`bottom` anchoring so the sheet fills the **layout viewport** (the browser window on a real site; the Storybook **preview iframe** in docs/canvas). In the **Story** canvas, a decorator stretches the preview document so the iframe can grow with the panel; that shell is **skipped in Docs** so embedded previews are not forced to full-viewport height. The open drawer still fills the iframe, not the inline story box—resize the preview panel if you need a taller canvas.
+
+### Header
+
+The header is the `title` slot: a string for a single heading, or a composition with `Drawer.Heading`, optional `Drawer.Description`, `Drawer.ExpandedTitleLayout`, and the shared `Breadcrumbs` components (matching the `Modal` pattern). The header stays pinned while the body scrolls.

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

@@ -0,0 +1,45 @@
+# Core/EmptyState - Design
+
+The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.
+
+## Properties
+
+### Title
+
+All empty states have a title. Titles provide a brief summary of the reason an empty state is shown.
+
+### Description
+
+All empty states have a description. Descriptions provide the details and instructions on next steps the user can take.
+
+### Action (optional)
+
+A call to action can be used to provide quick access to relevant next steps. Full page empty states use a primary button. Smaller empty states use a secondary button.
+
+### Illustration
+
+All empty states have an illustration. Pass an illustration slug (e.g. `EmptyFolder`, `PizzaBox`) via the `illustration` prop.
+
+Use the `theme` prop (`light` or `dark`) to switch between light/dark variants when the illustration supports them. Illustrations are lazy-loaded for optimal bundle size.
+
+## Content
+
+### Title / explanation format
+
+This format allows empty states to provide both a catchy main title and a more detailed explanation. The title should provide the broad action with the explanation providing additional detail.
+
+Titles should be in sentence format with no ending punctuation. Descriptions should be in sentence format with ending punctuation.
+
+### Call to action
+
+A call to action enables users to easily move forward from an empty state. It can take the form of a link embedded within the description to send the user to another page, or a button to perform an action.
+
+Full page empty states (`size="lg"`) should use a primary button, as the action is the primary next step for the user. Smaller empty states should use a secondary button if the action is already present elsewhere on the page.
+
+### Description wrapping
+
+Descriptions will wrap if the parent container is small enough, but strings should be kept short when possible.
+
+### Graphs
+
+When using graph tiles, an empty state should be smaller to match the size of the graph tile.

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

@@ -0,0 +1,13 @@
+# Core/EmptyState - Usage
+
+The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `illustration` | `(typeof illustrationSlugs)[number]` | No | `--` | The illustration to display, identified by slug. Use theme to switch between light/dark variants when available. @default "EmptyFolder" |
+| `theme` | `'light' \| 'dark'` | No | `--` | The theme for the illustration. Determines which variant to show when light/dark variants exist. @default "light" |
+| `size` | `'md' \| 'lg'` | No | `--` | The size of the empty state. `lg` is for large components or the whole pages. @default "md" |
+| `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. |
+| `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--design.md

@@ -0,0 +1,30 @@
+# Core/HelperText - Design
+
+Helper text for inputs.
+
+:::warning
+
+Prefer Capra field components—such as `TextField`, `NumberField`, `PasswordField`, `TextArea`, `DatePicker`, `DateRangePicker`, or `AutocompleteField`—which
+include helper text in the standard field layout. Use standalone `HelperText` only when you are building a
+custom field or a layout that those components do not cover.
+
+:::
+
+## Accessibility
+
+### Error and warning content
+
+For `appearance="danger"`, the helper region uses `role="alert"` so critical validation
+messages are exposed promptly to assistive technologies. Warning and default appearances do not use `alert`;
+ensure critical errors use `danger` when this behavior is desired.
+
+### Live regions
+
+When `countText` is present, it is wrapped with `aria-live="polite"` so changes (for example
+remaining characters) are announced without interrupting the user.
+
+### Relationship to the field
+
+For custom compositions, associate helper copy with the control using `aria-describedby` on the input
+pointing at an `id` on the helper element, or use patterns documented on the field component you wrap.
+Capra built-in fields handle these relationships when you pass their `helperText` props.

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

@@ -0,0 +1,11 @@
+# Core/HelperText - Usage
+
+Helper text for inputs.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `appearance` | `(typeof appearances)[number]` | No | `--` | Appearance of the input.<br>@default 'default' |
+| `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. |
+| `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. |