@capra/core 1.5.3 → 1.7.0

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

@@ -0,0 +1,100 @@
+# Core/Toast - Design
+
+Renders a toast inline for documentation/preview. Not for use in production.
+
+## Anatomy
+
+### Status icon
+
+<span>
+  Indicates the type of message (info, success, warning, error)
+</span>
+
+### Body
+
+<span>
+  The message text informing the user what occurred
+</span>
+
+### Dismiss
+
+<span>
+  Close button to manually dismiss the toast
+</span>
+
+### Actions
+
+<span>
+  Optional action button relating to the notification (e.g. "Try again", "Undo")
+</span>
+
+## Properties
+
+### Type
+
+All toasts have a status of: information, attention, warning, success, and highlight. Choose the status depending on the type of message.
+
+### Body
+
+All toasts have body text, informing the user that something has occurred. The message should be as concise as possible, if a longer message is needed, consider an Alert Banner or Dialog.
+
+### Actions
+
+Toasts can have up to two action buttons, relating directly to the action taken that resulted in the notification. Examples include a link to a relevant list, or an action to try a failed submit.
+
+## Behavior
+
+### Timeout
+
+Toasts automatically close 6 seconds after they have fully loaded. The timer is paused if focus is brought into the toast by the user.
+
+### Placement
+
+Toasts appear in the right corner of the application—either top-right (default) or bottom-right. Use the <code>position</code> option when calling the Toast API to choose placement.
+
+### Width
+
+Toasts have a flexible width that sizes to content, with a minimum of 360px and maximum of 480px.
+
+### Overflow
+
+Long messages wrap within the toast width (360-480px). Craft messages to take up no more than two lines.
+
+## Best Practices
+
+**Do**
+
+<p>
+  Do use toasts for notifications that don't need to interrupt the user's workflow.
+</p>
+
+**Don't**
+
+<p>
+  Don't use toasts for destructive, high-impact decisions that require the user's full attention.
+</p>
+
+## Accessibility
+
+### Keyboard interaction
+
+If a toast is non-actionable it is not in the page's tab sequence.
+
+#### Actionable toasts
+
+When a toast has interactive elements (dismiss button, action button), the tab order is:
+
+1. Dismiss (close) button
+2. Action button (if present)
+
+### Live region
+
+The entire contents of the toast must be announced as it appears on screen. Toasts use `role="status"` for info/success and `role="alert"` for warning/error, with `aria-live` set to `polite` or `assertive` accordingly.
+
+### Reading order
+
+In order to give all users adequate time to find and reach the action button, the toast element must be placed immediately after the user's current element.
+
+### Time sensitive
+
+Toasts must remain on screen long enough for users to read the message and access any action buttons. The default duration is 6 seconds; the timer pauses if focus is brought into the toast.

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

@@ -0,0 +1,11 @@
+# Core/Toast - Usage
+
+Renders a toast inline for documentation/preview. Not for use in production.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `type` | `(typeof toastTypes)[number]` | Yes | `--` | `--` |
+| `content` | `React.ReactNode` | Yes | `--` | `--` |
+| `closable` | `boolean` | No | true | `--` |
+| `action` | `ToastOptions['action']` | No | `--` | `--` |
+| `actionSecondary` | `ToastOptions['actionSecondary']` | No | `--` | `--` |

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

@@ -0,0 +1,61 @@
+# Core/Tooltip - Design
+
+A component to display additional information when hovering or focusing on an interactive element.
+
+## Properties
+
+### Title
+
+The text shown in the tooltip.
+
+### Shortcut
+
+The keyboard shortcut shown in the tooltip.
+
+## Behavior
+
+### Presentation
+
+Tooltips appear after a 500ms delay when hovering a trigger element. Focusing a trigger element will show the
+tooltip immediately.
+
+### Dismissing
+
+Tooltips disappear 500ms after the trigger element loses hover, immediately if focus is lost, or when another
+element receives hover or focus that reveals a tooltip.
+
+### Overflow
+
+Tooltip titles should avoid wrapping where possible. When required, the title wraps to a new line when extending
+beyond the width of the container.
+
+### Placement
+
+By default, tooltips appear below the trigger element. The tooltip will shift position if its placement places it
+outside the viewport.
+
+## Best Practices
+
+**Do**
+
+<p>
+  Do show only a single tooltip at a time.
+</p>
+
+**Don't**
+
+<img style={{ width: '256px', marginInline: 'auto', display: 'block' }} src="tooltip-bestpractices-multiple-dont.png" />
+
+<p>
+  Don't override tooltip behavior to show multiple at once.
+</p>
+
+## Accessibility
+
+### Interaction
+
+Tooltips are triggered on hover or focus, never on click. Tooltips do not contain interactive content.
+
+### Custom Trigger
+
+See the Usage page for more information on custom triggers.

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

@@ -0,0 +1,48 @@
+# Core/Tooltip - Usage
+
+A component to display additional information when hovering or focusing on an interactive element.
+
+## Custom Triggers
+
+:::warning
+
+**Custom triggers are an advanced feature and should be used with caution.** Tooltips should wrap interactive
+elements. The defaults provided in Capra ensure an accessible experience. When using custom triggers, the dev assumes
+responsibility for ensuring the tooltip trigger is accessible.
+
+:::
+
+By default, tooltips are triggered on for the `Button`, `IconButton`, `Link`, or `ButtonLink` components. For other elements, you can wrap them in a `CustomTooltipTrigger` to allow hover and focus to open the tooltip. The trigger still needs an appropriate ARIA role or semantic HTML element, and custom components should forward refs via `forwardRef` as well as spread props onto the underlying DOM node.
+
+```tsx
+import { Tooltip, CustomTooltipTrigger } from '@capra/core';
+
+function MyComponent() {
+  retur(
+    <Tooltip title="Tooltip content">
+      <CustomTooltipTrigger>
+        <span role="button" tabIndex={0} style={{ cursor: 'default', textDecoration: 'underline' }}>
+          Custom trigger (span)
+        </span>
+      </CustomTooltipTrigger>
+    </Tooltip>,
+  );
+}
+```
+
+**Important Notes**
+
+* The trigger element must have an appropriate ARIA role or semantic HTML element.
+* `CustomTooltipTrigger` only accepts a single child.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `React.ReactNode` | Yes | `--` | The visible trigger element. This can be a single element or a component tree, but there MUST be a focusable element (`Button`, `IconButton`, `Link`, or a custom trigger via `CustomTooltipTrigger`) in the tree. Nothing else will trigger the tooltip. |
+| `title` | `string` | Yes | `--` | The content of the tooltip. |
+| `shortcut` | `string` | No | `--` | Optional keyboard shortcut label shown next to the title (e.g. `⌘K`, `Ctrl+S`). |
+| `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. |
+| `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--design.md

@@ -0,0 +1,75 @@
+# Core/TopNav - Design
+
+## Properties
+
+### Logo
+
+The logo is required for all top navigation bars. It should link to the home page or main dashboard of the application.
+
+### Navigation items
+
+Navigation items represent the main sections of the application. They should be concise and clearly labeled. Use `TopNav.Item` for each navigation link.
+
+### Actions
+
+Actions are optional elements placed on the right side of the navigation bar. Common actions include search, notifications, user profile, and settings. Use `TopNav.Actions` to group these elements.
+
+## Best Practices
+
+### Navigation clarity
+
+**Do**
+
+<img className="w-full" src="images/guidelines/topnav/bestpractices-clarity-do.png" alt="Clear navigation labels" />
+
+<p>
+  Do use clear, descriptive labels for navigation items.
+</p>
+
+**Don't**
+
+<img className="w-full" src="images/guidelines/topnav/bestpractices-clarity-dont.png" alt="Unclear navigation labels" />
+
+<p>
+  Don't use vague or ambiguous labels that don't clearly indicate the destination.
+</p>
+
+### Action overload
+
+**Do**
+
+<img className="w-full" src="images/guidelines/topnav/bestpractices-actions-do.png" alt="Reasonable number of actions" />
+
+<p>
+  Do limit the number of actions to the most essential ones.
+</p>
+
+**Don't**
+
+<img className="w-full" src="images/guidelines/topnav/bestpractices-actions-dont.png" alt="Too many actions" />
+
+<p>
+  Don't overcrowd the actions area with too many buttons or icons.
+</p>
+
+## Accessibility
+
+### Landmark
+
+The top navigation uses `role="banner"` to identify it as the site-wide header landmark. This helps screen reader users quickly navigate to the main application header.
+
+### Banner
+
+The `TopNav` component is wrapped in a `<header>` element with `role="banner"`, which is the appropriate semantic HTML for site-wide navigation headers.
+
+### Keyboard interaction
+
+| Key               | Function                                                                         |
+| ----------------- | -------------------------------------------------------------------------------- |
+| `Tab`             | Moves focus through interactive elements in the navigation bar in logical order. |
+| `Enter` / `Space` | Activates focused links or buttons.                                              |
+| `Escape`          | Closes any open dropdowns or menus within the navigation.                        |
+
+### Targets
+
+All interactive elements in the top navigation meet the minimum 24×24 CSS pixel target size requirement for WCAG 2.2 Level AA compliance.

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

@@ -0,0 +1,6 @@
+# Core/TopNav - Usage
+
+| 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. |
+| `children` | `React.ReactNode` | No | `--` | `--` |

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

@@ -0,0 +1,31 @@
+# Core/VerticalNavigation - Design
+
+Vertical navigation shell with controlled and uncontrolled collapse support. Provides shared context for items, collapse toggle, and footer sections.
+
+## Properties
+
+### Layout
+
+VerticalNavigation consists of a list of items and an optional footer. It is typically placed on the left side of the screen.
+It supports a collapsed state to save space.
+
+### Items
+
+Navigation items can have icons and labels. Sub-items are indented and do not have icons.
+Items can be links (using `href`) or buttons (using `onClick`).
+
+## Accessibility
+
+### Keyboard interaction
+
+| Key                 | Function                                                                     |
+| ------------------- | ---------------------------------------------------------------------------- |
+| `Tab` / `Shift-Tab` | Moves focus through the interactive items (links, buttons, collapse toggle). |
+| `Enter` / `Space`   | Activates the focused item (follows link or triggers action).                |
+
+### WAI-ARIA Roles, States, and Properties
+
+* The navigation container has `role="navigation"` (implicit for `<nav>`).
+* The `aria-label` provides a descriptive name for the navigation region (default: "Cribl product navigation").
+* The collapse toggle has `aria-expanded` reflecting the collapsed state.
+* Active items use `aria-current="page"` to indicate the current page.

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

@@ -0,0 +1,17 @@
+# Core/VerticalNavigation - Usage
+
+Vertical navigation shell with controlled and uncontrolled collapse support. Provides shared context for items, collapse toggle, and footer sections.
+
+### VerticalNavigation
+
+| 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. |
+| `collapsed` | `boolean` | No | `--` | Controlled collapsed state. |
+| `onCollapseChange` | `(collapsed: boolean) => void` | No | `--` | Callback fired when the collapsed state changes. |
+| `defaultCollapsed` | `boolean` | No | false | Default collapsed state for uncontrolled mode.<br>@default false |
+| `aria-label` | `string` | No | 'Cribl product navigation' | `--` |
+
+### Examples
+
+Various product navigation configurations.

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

@@ -0,0 +1,87 @@
+# Core/VisuallyHidden - Design
+
+VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.
+
+## Overview
+
+VisuallyHidden is a utility component that removes content from the visual flow while keeping it accessible to assistive technologies such as screen readers. It uses a well-established CSS technique that clips the element to a 1×1 pixel area without using `display: none` or `visibility: hidden`, which would remove it from the accessibility tree entirely.
+
+Use VisuallyHidden when you need to provide context or labels for screen reader users that would be redundant or unnecessary in the visual design.
+
+## Use Cases
+
+### Hidden labels for icon-only controls
+
+Icon-only buttons and controls must have accessible names. Wrap a text label in VisuallyHidden to provide one without affecting the visual design.
+
+### Supplementary link text
+
+Links like "Read more" lack context when read in isolation. Use VisuallyHidden to append descriptive text that screen readers announce.
+
+### Form labels
+
+When a form input has a visible placeholder but no visible label, use VisuallyHidden to associate a proper `<label>` element with the input.
+
+### Skip links
+
+Skip navigation links allow keyboard users to bypass repeated content. The link text can be visually hidden until it receives focus.
+
+## Best Practices
+
+**Do**
+
+<p>
+  Do use VisuallyHidden to provide accessible names for icon-only buttons and controls.
+</p>
+
+**Don't**
+
+<p>
+  Don't use VisuallyHidden to hide content that all users should see. If the content is meaningful, it should be visible.
+</p>
+
+**Do**
+
+<p>
+  Do use VisuallyHidden to add context to ambiguous links like "Read more" or "Learn more".
+</p>
+
+**Don't**
+
+<p>
+  Don't use 
+
+  `display: none`
+
+   or 
+
+  `visibility: hidden`
+
+   when content should remain available to assistive technologies.
+</p>
+
+## Accessibility
+
+### Purpose
+
+VisuallyHidden exists specifically to improve accessibility. It bridges the gap between visual design and the information needs of assistive technology users.
+
+### When to Use
+
+### WCAG 1.1.1 — Non-text Content (Level A)
+
+Provide text alternatives for non-text content such as icon-only buttons. VisuallyHidden allows you to add an accessible name without altering the visual design.
+
+### WCAG 2.4.4 — Link Purpose (Level A)
+
+Links should make sense out of context. When visual context makes the purpose clear but the link text alone is ambiguous (e.g., "Read more"), use VisuallyHidden to add clarifying text.
+
+### WCAG 2.4.6 — Headings and Labels (Level AA)
+
+Form inputs should have descriptive labels. When a visible label would be redundant with other visual cues, VisuallyHidden can provide a programmatic label for assistive technologies.
+
+### Important Notes
+
+* VisuallyHidden content **is not** hidden from screen readers — that is its entire purpose.
+* Do **not** use `aria-hidden="true"` on VisuallyHidden or its children, as this would negate its purpose.
+* Prefer `aria-label` or `aria-labelledby` when labeling a single element. Use VisuallyHidden when you need to provide more complex or multi-element content to assistive technologies.

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

@@ -0,0 +1,35 @@
+# Core/VisuallyHidden - Usage
+
+VisuallyHidden is a component that hides its children from the visual rendering, but still makes them available to screen readers.
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `children` | `React.ReactNode` | Yes | `--` | `--` |
+
+## Usage
+
+```tsx
+import { VisuallyHidden } from '@cribl/capra-core';
+
+// Accessible label for an icon-only button
+<button>
+  🔔 <VisuallyHidden>Notifications</VisuallyHidden>
+</button>
+
+// Descriptive link text
+<a href="/docs">
+  Read more<VisuallyHidden> about our API documentation</VisuallyHidden>
+</a>
+
+// Hidden form label
+<VisuallyHidden>
+  <label htmlFor="search">Search</label>
+</VisuallyHidden>
+<input id="search" type="search" placeholder="Search..." />
+```
+
+## How It Works
+
+The component renders a `<span>` element with CSS that clips it to a 1×1 pixel area using `clip-path: inset(100%)`. This keeps the content in the DOM and accessibility tree while removing it from the visual layout.
+
+The `:not(:focus):not(:active)` selector ensures that if a focusable element (like a skip link) is nested inside, it becomes visible when focused.

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

@@ -0,0 +1,60 @@
+# History/Changelogs/@capra-core
+
+### 1.7.0
+
+#### Minor Changes
+
+* [540b651](https://bitbucket.org/cribl/capra-ui/commits/540b651): Add `onPress` event handler to `Menu.Item` and deprecate `onClick`
+
+#### Patch Changes
+
+* [540b651](https://bitbucket.org/cribl/capra-ui/commits/540b651): Fix issue where event in `Menu.Item` `onClick` was not bubbling correctly
+* [684cc26](https://bitbucket.org/cribl/capra-ui/commits/684cc26): Remove invalid `aria-orientation` attribute in TabNav component.
+
+### 1.6.0
+
+#### Minor Changes
+
+* [e99f46d](https://bitbucket.org/cribl/capra-ui/commits/e99f46d): Include LLM-friendly docs in published packages
+
+#### Patch Changes
+
+* [ce30088](https://bitbucket.org/cribl/capra-ui/commits/ce30088): Increase `Modal` z-index so it layers correctly
+* [8a1bbe5](https://bitbucket.org/cribl/capra-ui/commits/8a1bbe5): Update `TextInput` internal spacing so Chrome's autofill backgrounds look better
+* Updated dependencies [e99f46d](https://bitbucket.org/cribl/capra-ui/commits/e99f46d) — Include LLM-friendly docs in published packages
+  * @capra/icons\@1.7.0
+
+### 1.5.3
+
+#### Patch Changes
+
+* [5387e9d](https://bitbucket.org/cribl/capra-ui/commits/5387e9d): Fix an issue where `EmptyState` crashed in Webpack bundles
+
+### 1.5.2
+
+#### Patch Changes
+
+* [961667d](https://bitbucket.org/cribl/capra-ui/commits/961667d): Update the `icon` prop for `Tag` to accept logos from `@capra/icons/logos`.
+* [1128996](https://bitbucket.org/cribl/capra-ui/commits/1128996): Add documentation links to README and `package.json`
+* Updated dependencies [1128996](https://bitbucket.org/cribl/capra-ui/commits/1128996) — Add documentation links to README and `package.json`
+  * @capra/icons\@1.6.1
+
+### 1.5.1
+
+#### Patch Changes
+
+* [7fdf2f5](https://bitbucket.org/cribl/capra-ui/commits/7fdf2f5): Fix `TabNav` horizontal submenu visibility so click, hover, keyboard toggles, `Escape`, and focus containment behave consistently. Remove margin.
+* [363909c](https://bitbucket.org/cribl/capra-ui/commits/363909c): Import `EmptyState` illustrations directly to help with tree-shaking and load times
+* [0219174](https://bitbucket.org/cribl/capra-ui/commits/0219174): Drawer no longer closes on browser Back, and left-placed drawers now use the same close easing behavior as right-placed drawers.
+* [186bcfe](https://bitbucket.org/cribl/capra-ui/commits/186bcfe): Reduce `Tooltip` hover delay to 500ms
+
+### 1.5.0
+
+#### Minor Changes
+
+* [30b2a43](https://bitbucket.org/cribl/capra-ui/commits/30b2a43): Prepare packages for publishing to NPM
+
+#### Patch Changes
+
+* Updated dependencies [30b2a43](https://bitbucket.org/cribl/capra-ui/commits/30b2a43) — Prepare packages for publishing to NPM
+  * @capra/icons\@1.6.0

package/docs/index.md

@@ -0,0 +1,110 @@
+# @capra/core
+
+This file contains links to the documentation for the `@capra/core` package. This is a local mirror of the documentation located at https://capra.cribl.io/llms.txt.
+
+Embedded documentation is available on the filesystem for each of these packages:
+
+- `@capra/core`
+- `@capra/domain`
+- `@capra/icons`
+- `@capra/theme`
+
+## Documentation
+
+- [Conventions](./conventions--docs.md)
+- [Using Capra](./using-capra--docs.md)
+- [Core/Alert - Design](./core-alert--design.md)
+- [Core/Alert - Usage](./core-alert--usage.md)
+- [Core/Anchor - Design](./core-anchor--design.md)
+- [Core/Anchor - Usage](./core-anchor--usage.md)
+- [Core/AutocompleteField - Design](./core-autocompletefield--design.md)
+- [Core/AutocompleteField - Usage](./core-autocompletefield--usage.md)
+- [Core/Badge - Design](./core-badge--design.md)
+- [Core/Badge - Usage](./core-badge--usage.md)
+- [Core/Breadcrumbs - Design](./core-breadcrumbs--design.md)
+- [Core/Breadcrumbs - Usage](./core-breadcrumbs--usage.md)
+- [Core/Button - Design](./core-button--design.md)
+- [Core/Button - Usage](./core-button--usage.md)
+- [Core/ButtonLink - Design](./core-buttonlink--design.md)
+- [Core/ButtonLink - Usage](./core-buttonlink--usage.md)
+- [Core/Card - Design](./core-card--design.md)
+- [Core/Card - Usage](./core-card--usage.md)
+- [Core/Checkbox - Design](./core-checkbox--design.md)
+- [Core/Checkbox - Usage](./core-checkbox--usage.md)
+- [Core/Collapse - Design](./core-collapse--design.md)
+- [Core/Collapse - Usage](./core-collapse--usage.md)
+- [Core/DatePickerField - Design](./core-datepickerfield--design.md)
+- [Core/DatePickerField - Usage](./core-datepickerfield--usage.md)
+- [Core/DateRangePickerField - Design](./core-daterangepickerfield--design.md)
+- [Core/DateRangePickerField - Usage](./core-daterangepickerfield--usage.md)
+- [Core/Divider - Design](./core-divider--design.md)
+- [Core/Divider - Usage](./core-divider--usage.md)
+- [Core/Drawer - Design](./core-drawer--design.md)
+- [Core/Drawer - Usage](./core-drawer--usage.md)
+- [Core/EmptyState - Design](./core-emptystate--design.md)
+- [Core/EmptyState - Usage](./core-emptystate--usage.md)
+- [Core/HelperText - Design](./core-helpertext--design.md)
+- [Core/HelperText - Usage](./core-helpertext--usage.md)
+- [Core/IconButton - Design](./core-iconbutton--design.md)
+- [Core/IconButton - Usage](./core-iconbutton--usage.md)
+- [Core/InputRow - Design](./core-inputrow--design.md)
+- [Core/InputRow - Usage](./core-inputrow--usage.md)
+- [Core/Label - Design](./core-label--design.md)
+- [Core/Label - Usage](./core-label--usage.md)
+- [Core/Link - Design](./core-link--design.md)
+- [Core/Link - Usage](./core-link--usage.md)
+- [Core/ListItem - Design](./core-listitem--design.md)
+- [Core/ListItem - Usage](./core-listitem--usage.md)
+- [Core/Menu - Design](./core-menu--design.md)
+- [Core/Menu - Usage](./core-menu--usage.md)
+- [Core/Modal - Design](./core-modal--design.md)
+- [Core/Modal - Usage](./core-modal--usage.md)
+- [Core/NumberField - Design](./core-numberfield--design.md)
+- [Core/NumberField - Usage](./core-numberfield--usage.md)
+- [Core/Pagination - Design](./core-pagination--design.md)
+- [Core/Pagination - Usage](./core-pagination--usage.md)
+- [Core/PasswordField - Design](./core-passwordfield--design.md)
+- [Core/PasswordField - Usage](./core-passwordfield--usage.md)
+- [Core/Pill - Design](./core-pill--design.md)
+- [Core/Pill - Usage](./core-pill--usage.md)
+- [Core/Popover - Design](./core-popover--design.md)
+- [Core/Popover - Usage](./core-popover--usage.md)
+- [Core/Radio - Design](./core-radio--design.md)
+- [Core/Radio - Usage](./core-radio--usage.md)
+- [Core/RadioGroup - Design](./core-radiogroup--design.md)
+- [Core/RadioGroup - Usage](./core-radiogroup--usage.md)
+- [Core/RadioTile - Design](./core-radiotile--design.md)
+- [Core/RadioTile - Usage](./core-radiotile--usage.md)
+- [Core/Ribbon - Design](./core-ribbon--design.md)
+- [Core/Ribbon - Usage](./core-ribbon--usage.md)
+- [Core/Skeleton - Design](./core-skeleton--design.md)
+- [Core/Skeleton - Usage](./core-skeleton--usage.md)
+- [Core/SkeletonGroup - Design](./core-skeletongroup--design.md)
+- [Core/SkeletonGroup - Usage](./core-skeletongroup--usage.md)
+- [Core/Spinner - Design](./core-spinner--design.md)
+- [Core/Spinner - Usage](./core-spinner--usage.md)
+- [Core/Switch - Design](./core-switch--design.md)
+- [Core/Switch - Usage](./core-switch--usage.md)
+- [Core/TabNav - Design](./core-tabnav--design.md)
+- [Core/TabNav - Usage](./core-tabnav--usage.md)
+- [Core/Tag - Design](./core-tag--design.md)
+- [Core/Tag - Usage](./core-tag--usage.md)
+- [Core/Text - Design](./core-text--design.md)
+- [Core/Text - Usage](./core-text--usage.md)
+- [Core/TextArea - Design](./core-textarea--design.md)
+- [Core/TextArea - Usage](./core-textarea--usage.md)
+- [Core/TextField - Design](./core-textfield--design.md)
+- [Core/TextField - Usage](./core-textfield--usage.md)
+- [Core/TextInput - Design](./core-textinput--design.md)
+- [Core/TextInput - Usage](./core-textinput--usage.md)
+- [Core/Toast - Design](./core-toast--design.md)
+- [Core/Toast - Usage](./core-toast--usage.md)
+- [Core/Tooltip - Design](./core-tooltip--design.md)
+- [Core/Tooltip - Usage](./core-tooltip--usage.md)
+- [Core/TopNav - Design](./core-topnav--design.md)
+- [Core/TopNav - Usage](./core-topnav--usage.md)
+- [Core/VerticalNavigation - Design](./core-verticalnavigation--design.md)
+- [Core/VerticalNavigation - Usage](./core-verticalnavigation--usage.md)
+- [Core/VisuallyHidden - Design](./core-visuallyhidden--design.md)
+- [Core/VisuallyHidden - Usage](./core-visuallyhidden--usage.md)
+- [History/Changelogs/@capra-core](./history-changelogs-capra-core--docs.md)