@baseline-ui/mcp 0.60.1 → 0.62.0

package/dist/index.js

@@ -197,6 +197,13 @@ showXAxis?: boolean
  * Whether to show the Y axis. @default true
  */
 showYAxis?: boolean
+/**
+ * Props passed to \`NumberFormat\` for formatting numeric values in the
+ * Y-axis ticks and tooltip entries (e.g.
+ * \`{ style: "currency", currency: "USD" }\`). When omitted, values render
+ * as raw numbers in both the tooltip and on the Y axis.
+ */
+numberFormatterProps?: Omit<NumberFormatProps, "value">
 /**
  * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and bar \`dataKey\` values.
  */
@@ -316,6 +323,18 @@ barRadius?: number
       { dataKey: "expenses", name: "Expenses" },
     ]}
     height={320}
+    showLegend />;`},{id:"charts-barchart--formatted",name:"Formatted",snippet:`const Formatted = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    numberFormatterProps={{
+      notation: "compact",
+      maximumFractionDigits: 1,
+    }}
     showLegend />;`},{id:"charts-barchart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <BarChart
     data={yearlyData}
     xAxisDataKey="year"
@@ -419,6 +438,13 @@ showXAxis?: boolean
  * Whether to show the Y axis. @default true
  */
 showYAxis?: boolean
+/**
+ * Props passed to \`NumberFormat\` for formatting numeric values in the
+ * Y-axis ticks and tooltip entries (e.g.
+ * \`{ style: "currency", currency: "USD" }\`). When omitted, values render
+ * as raw numbers in both the tooltip and on the Y axis.
+ */
+numberFormatterProps?: Omit<NumberFormatProps, "value">
 /**
  * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and line \`dataKey\` values.
  */
@@ -509,7 +535,20 @@ variant?: "default" | "sparkline"
     height={320}
     showXAxis={false}
     showYAxis={false}
-    showGrid={false} />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
+    showGrid={false} />;`},{id:"charts-linechart--formatted",name:"Formatted",snippet:`const Formatted = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    numberFormatterProps={{
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }}
+    showLegend />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
     data={monthlyData}
     xAxisDataKey="month"
     lines={[{ dataKey: "revenue" }]}
@@ -663,7 +702,7 @@ export function ArabicLocaleLtrOverridePieChart() {
  <PieChart data={data} dir="ltr" width={320} />
  </I18nProvider>
  );
-}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a component that allows users to toggle the visibility of content. It\u2019s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.",documentation:`\`Accordion\` is a component that allows users to toggle the visibility of content. It\u2019s composed of an \`Accordion\` component and an \`AccordionItem\` component. The \`Accordion\` component is a container for the \`AccordionItem\` components.
+}`},similarTo:[],figmaUrl:null},Accordion:{id:"core-navigation-accordion",breadcrumb:"Core/Navigation/Accordion",importStatement:'import { Accordion, AccordionExample } from "@baseline-ui/core";',description:"`Accordion` is a vertically stacked set of collapsible sections, each toggled by its header, that supports single or multiple simultaneous expansions. Use it to organize lengthy or secondary content into scannable groups that users can reveal on demand.",documentation:`\`Accordion\` is a vertically stacked set of collapsible sections, each toggled by its header, that supports single or multiple simultaneous expansions. Use it to organize lengthy or secondary content into scannable groups that users can reveal on demand.
 
 * Full keyboard navigation
 * It can expand one or multiple items
@@ -943,7 +982,7 @@ export const AccordionWithDisabledItemsExample: React.FC<
  Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
 > = (props) => {
  return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
-};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"ActionButton is a clickable interactive element that triggers a response. You can place text and icons inside of a button. You can trigger an action with mouse, touch, and keyboard interactions.",documentation:'ActionButton is a clickable interactive element that triggers a response. You can place text and icons inside of a button. You can trigger an action with mouse, touch, and keyboard interactions.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\nThere are nine variants of the button: `primary`, `secondary`, `tertiary`, `popover`, `toolbar`, `ghost`, `success`, `warning` and `error`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n```jsx\n<ActionButton label="Primary" />\n<ActionButton label="Secondary" variant="secondary" />\n<ActionButton label="Tertiary" variant="tertiary" />\n<ActionButton label={"Toolbar"} variant={"toolbar"} />\n<ActionButton label="Ghost" variant="ghost" />\n<ActionButton label="Popover" variant="popover" />\n<ActionButton label="Success" variant="success" />\n<ActionButton label="Warning" variant="warning" />\n<ActionButton label="Error" variant="error" />\n```\n\nActionButton supports three sizes: `sm` (default), `md`, and `lg`. You can change the size by passing the `size` prop.\n\n```jsx\n<ActionButton label="Small (default)" size="sm" />\n<ActionButton label="Medium" size="md" />\n<ActionButton label="Large" size="lg" />\n```\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions.\n\n```jsx\n<ActionButton label="Primary" isDisabled />\n<ActionButton label="Secondary" variant="secondary" isDisabled />\n<ActionButton label="Tertiary" variant="tertiary" isDisabled />\n<ActionButton label="Ghost" variant="ghost" isDisabled />\n<ActionButton label="Toolbar" variant="toolbar" isDisabled />\n<ActionButton label="Popover" variant="popover" isDisabled />\n<ActionButton label="Success" variant="success" isDisabled />\n<ActionButton label="Warning" variant="warning" isDisabled />\n<ActionButton label="Error" variant="error" isDisabled />\n```\n\nYou can place an icon before or after the label by passing the `iconStart` or `iconEnd` props. Choose the icon entrypoint that matches your button size: `@baseline-ui/icons/16` for `sm`, `@baseline-ui/icons/20` for `md`, and `@baseline-ui/icons/24` for `lg`.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<ActionButton label="Label" iconStart={EllipseIcon} />\n<ActionButton label="Label" iconEnd={EllipseIcon} />\n```\n\nYou can listen for events by passing the `onPress` prop. The `onPress` prop will fire when the button is activated by mouse, touch, or keyboard interactions.\n\n```jsx\n<ActionButton label="Click Me" onPress={() => alert("Hello World")} />\n```\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n\n| Key | Function |\n| ------- | --------------------- |\n| `Space` | Activates the button. |\n| `Enter` | Activates the button. |',props:`interface ActionButtonProps {
+};`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.",documentation:'`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\nThere are nine variants of the button: `primary`, `secondary`, `tertiary`, `popover`, `toolbar`, `ghost`, `success`, `warning` and `error`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n```jsx\n<ActionButton label="Primary" />\n<ActionButton label="Secondary" variant="secondary" />\n<ActionButton label="Tertiary" variant="tertiary" />\n<ActionButton label={"Toolbar"} variant={"toolbar"} />\n<ActionButton label="Ghost" variant="ghost" />\n<ActionButton label="Popover" variant="popover" />\n<ActionButton label="Success" variant="success" />\n<ActionButton label="Warning" variant="warning" />\n<ActionButton label="Error" variant="error" />\n```\n\nActionButton supports three sizes: `sm` (default), `md`, and `lg`. You can change the size by passing the `size` prop.\n\n```jsx\n<ActionButton label="Small (default)" size="sm" />\n<ActionButton label="Medium" size="md" />\n<ActionButton label="Large" size="lg" />\n```\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions.\n\n```jsx\n<ActionButton label="Primary" isDisabled />\n<ActionButton label="Secondary" variant="secondary" isDisabled />\n<ActionButton label="Tertiary" variant="tertiary" isDisabled />\n<ActionButton label="Ghost" variant="ghost" isDisabled />\n<ActionButton label="Toolbar" variant="toolbar" isDisabled />\n<ActionButton label="Popover" variant="popover" isDisabled />\n<ActionButton label="Success" variant="success" isDisabled />\n<ActionButton label="Warning" variant="warning" isDisabled />\n<ActionButton label="Error" variant="error" isDisabled />\n```\n\nYou can place an icon before or after the label by passing the `iconStart` or `iconEnd` props. Choose the icon entrypoint that matches your button size: `@baseline-ui/icons/16` for `sm`, `@baseline-ui/icons/20` for `md`, and `@baseline-ui/icons/24` for `lg`.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<ActionButton label="Label" iconStart={EllipseIcon} />\n<ActionButton label="Label" iconEnd={EllipseIcon} />\n```\n\nYou can listen for events by passing the `onPress` prop. The `onPress` prop will fire when the button is activated by mouse, touch, or keyboard interactions.\n\n```jsx\n<ActionButton label="Click Me" onPress={() => alert("Hello World")} />\n```\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n\n| Key | Function |\n| ------- | --------------------- |\n| `Space` | Activates the button. |\n| `Enter` | Activates the button. |',props:`interface ActionButtonProps {
 /**
  * The button's class name.
  */
@@ -1223,7 +1262,7 @@ export function ButtonWithStyleFn(props: Omit<ActionButtonProps, "style">) {
  })}
  />
  );
-}`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"The `ActionGroup` component groups a set of related actions together, such as text alignment or formatting options. Use it when you have multiple icon buttons that represent related choices.",documentation:`The \`ActionGroup\` component groups a set of related actions together, such as text alignment or formatting options. Use it when you have multiple icon buttons that represent related choices.
+}`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"`ActionGroup` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.",documentation:`\`ActionGroup\` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.
 
 * Groups related action buttons with consistent spacing and layout.
 * Supports arrow key navigation between actions.
@@ -1513,7 +1552,7 @@ export const ActionGroupWithIconExample: React.FC<
  Omit<ActionGroupProps, "items">
 > = (props) => {
  return <ActionGroupExample icon={TextIcon} {...props} />;
-};`},similarTo:[],figmaUrl:null},ActionIconButton:{id:"core-buttons-actioniconbutton",breadcrumb:"Core/Buttons/ActionIconButton",importStatement:'import { ActionIconButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"ActionIconButton is a clickable interactive element that triggers a response. You can place icon inside of this button. You can trigger an action with mouse, touch, and keyboard interactions.",documentation:`ActionIconButton is a clickable interactive element that triggers a response. You can place icon inside of this button. You can trigger an action with mouse, touch, and keyboard interactions.
+};`},similarTo:[],figmaUrl:null},ActionIconButton:{id:"core-buttons-actioniconbutton",breadcrumb:"Core/Buttons/ActionIconButton",importStatement:'import { ActionIconButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionIconButton` is an icon-only button that triggers an action when activated by mouse, touch, or keyboard. Use it for compact controls in toolbars, headers, or any context where space is limited and the icon's meaning is clear.",documentation:`\`ActionIconButton\` is an icon-only button that triggers an action when activated by mouse, touch, or keyboard. Use it for compact controls in toolbars, headers, or any context where space is limited and the icon's meaning is clear.
 
 * Mouse and touch event handling, and press state management
 * Keyboard focus management and cross browser normalization
@@ -1776,7 +1815,7 @@ export const IconButtonExample: React.FC<
     ActionableWithDynamicChildStyling,
     BasicActionable,
     DisabledActionable,
-} from "@baseline-ui/core";`,description:"The `Actionable` component is a wrapper that makes any React element clickable and interactive. It applies button-like behavior, keyboard interactions, and focus management to a single child element, allowing you to make any component clickable without changing its structure.",documentation:"The `Actionable` component is a wrapper that makes any React element clickable and interactive. It applies button-like behavior, keyboard interactions, and focus management to a single child element, allowing you to make any component clickable without changing its structure.\n\n* Makes any React element clickable and interactive\n* Mouse, touch, and keyboard event handling with press state management\n* Keyboard focus management and cross-browser normalization\n* Support for Space and Enter keys\n* Dynamic styling based on UI state (hovered, focused, pressed, disabled)\n* Flexible element type support (button, div, etc.)\n* Separate styling for wrapper and child elements\n\nThe `Actionable` component wraps a single React element and makes it clickable. Here's a basic example wrapping a `Code` component:\n\nBy default, `Actionable` renders a `button` element. You can change this using the `elementType` prop. This example shows using a `div` element type:\n\nYou can disable interactions by passing the `isDisabled` prop:\n\nYou can style the child element based on the component's UI state using the `childClassName` and `childStyle` props. These accept either static values or functions that receive UI state options. This example demonstrates dynamic styling that responds to hover, focus, and press states:\n\nSimilarly, you can style the wrapper element based on UI state using the `className` and `style` props. This example shows how to style the button wrapper based on interaction states:\n\n`Actionable` works with any React element, including complex nested components. This example shows a clickable card with multiple nested components:\n\nThe `className`, `style`, `childClassName`, and `childStyle` props can accept functions that receive UI state options:\n\n```typescript\ntype UIStateOptions = {\n isHovered?: boolean; // Whether the element is hovered\n isFocused?: boolean; // Whether the element is focused\n isPressed?: boolean; // Whether the element is currently pressed\n isDisabled?: boolean; // Whether the element is disabled\n isFocusVisible?: boolean; // Whether the element has keyboard focus\n};\n```\n\nThe component adds data attributes to the wrapper element that you can use for styling:\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------------------------------- |\n| `[data-disabled]` | Whether the actionable is disabled. |\n| `[data-focused]` | Whether the actionable is focused, either via mouse or keyboard. |\n| `[data-hovered]` | Whether the actionable is currently hovered with a mouse. |\n| `[data-focus-visible]` | Whether the actionable has keyboard focus. |\n| `[data-pressed]` | Whether the actionable is currently pressed. |\n\nThe `Actionable` component provides full keyboard and screen reader support through React Aria's button hooks. It automatically handles:\n\n* Keyboard focus management\n* ARIA attributes for accessibility\n* Keyboard event handling (Space and Enter keys)\n* Focus ring visibility based on keyboard vs mouse interaction\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Space` | Activates the actionable element. |\n| `Enter` | Activates the actionable element. |",props:`interface ActionableProps {
+} from "@baseline-ui/core";`,description:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.",documentation:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.\n\n* Makes any React element clickable and interactive\n* Mouse, touch, and keyboard event handling with press state management\n* Keyboard focus management and cross-browser normalization\n* Support for Space and Enter keys\n* Dynamic styling based on UI state (hovered, focused, pressed, disabled)\n* Flexible element type support (button, div, etc.)\n* Separate styling for wrapper and child elements\n\nThe `Actionable` component wraps a single React element and makes it clickable. Here's a basic example wrapping a `Code` component:\n\nBy default, `Actionable` renders a `button` element. You can change this using the `elementType` prop. This example shows using a `div` element type:\n\nYou can disable interactions by passing the `isDisabled` prop:\n\nYou can style the child element based on the component's UI state using the `childClassName` and `childStyle` props. These accept either static values or functions that receive UI state options. This example demonstrates dynamic styling that responds to hover, focus, and press states:\n\nSimilarly, you can style the wrapper element based on UI state using the `className` and `style` props. This example shows how to style the button wrapper based on interaction states:\n\n`Actionable` works with any React element, including complex nested components. This example shows a clickable card with multiple nested components:\n\nThe `className`, `style`, `childClassName`, and `childStyle` props can accept functions that receive UI state options:\n\n```typescript\ntype UIStateOptions = {\n isHovered?: boolean; // Whether the element is hovered\n isFocused?: boolean; // Whether the element is focused\n isPressed?: boolean; // Whether the element is currently pressed\n isDisabled?: boolean; // Whether the element is disabled\n isFocusVisible?: boolean; // Whether the element has keyboard focus\n};\n```\n\nThe component adds data attributes to the wrapper element that you can use for styling:\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------------------------------- |\n| `[data-disabled]` | Whether the actionable is disabled. |\n| `[data-focused]` | Whether the actionable is focused, either via mouse or keyboard. |\n| `[data-hovered]` | Whether the actionable is currently hovered with a mouse. |\n| `[data-focus-visible]` | Whether the actionable has keyboard focus. |\n| `[data-pressed]` | Whether the actionable is currently pressed. |\n\nThe `Actionable` component provides full keyboard and screen reader support through React Aria's button hooks. It automatically handles:\n\n* Keyboard focus management\n* ARIA attributes for accessibility\n* Keyboard event handling (Space and Enter keys)\n* Focus ring visibility based on keyboard vs mouse interaction\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Space` | Activates the actionable element. |\n| `Enter` | Activates the actionable element. |",props:`interface ActionableProps {
 /**
  * The button's class name.
  */
@@ -1985,7 +2024,7 @@ export const ActionableWithComplexContent: React.FC<
  </Box>
  </Actionable>
  );
-};`},similarTo:[],figmaUrl:null},AlertDialog:{id:"core-overlays-alertdialog",breadcrumb:"Core/Overlays/AlertDialog",importStatement:'import { AlertDialog, AlertDialogExample } from "@baseline-ui/core";',description:"A modal dialog that interrupts the user's workflow to communicate critical information and request a decision, such as confirming a destructive action or acknowledging an important message.",documentation:`A modal dialog that interrupts the user's workflow to communicate critical information and request a decision, such as confirming a destructive action or acknowledging an important message.
+};`},similarTo:[],figmaUrl:null},AlertDialog:{id:"core-overlays-alertdialog",breadcrumb:"Core/Overlays/AlertDialog",importStatement:'import { AlertDialog, AlertDialogExample } from "@baseline-ui/core";',description:"`AlertDialog` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.",documentation:`\`AlertDialog\` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.
 
 <a href="?path=/story/core-overlays-alertdialog--basic">View story</a>
 
@@ -2270,7 +2309,7 @@ export const AlertDialogExample: React.FC<
  </ModalContent>
  </Modal>
  );
-};`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"The `AudioPlayer` component is used to play audio files. It provides a simple interface for playing, pausing, and seeking through audio files.",documentation:`The \`AudioPlayer\` component is used to play audio files. It provides a simple interface for playing, pausing, and seeking through audio files.
+};`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"`AudioPlayer` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.",documentation:`\`AudioPlayer\` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.
 
 * Play and pause audio files
 * Seek through audio files
@@ -2345,7 +2384,7 @@ sources: {
  * @default "lg"
  */
 size?: "sm" | "lg"
-}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:""},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a component that displays a user's name or avatar.",documentation:`\`Avatar\` is a component that displays a user's name or avatar.
+}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:""},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.",documentation:`\`Avatar\` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.
 
 \`\`\`jsx
 import { Avatar } from "../../utils";
@@ -2508,7 +2547,7 @@ hasNotifications?: boolean
     }}
     defaultProps={args}
   />
-);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:""},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"The `Box` component is a generic container that provides a consistent API for layout and spacing using design token sprinkles as props. It is the building block for composing layouts and applying theme-aware styling.",documentation:`The \`Box\` component is a generic container that provides a consistent API for layout and spacing using design token sprinkles as props. It is the building block for composing layouts and applying theme-aware styling.
+);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:""},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"`Box` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.",documentation:`\`Box\` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.
 
 * Consistent API for layout, spacing, and styling via sprinkle props
 * Theme-aware \u2014 automatically applies correct styling based on the active theme
@@ -2658,7 +2697,7 @@ children?: ReactNode
       Nested Box
     </Box>
   </Box>
-);`}],implementation:""},similarTo:[],figmaUrl:null},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"The `ButtonSelect` component combines a button with a select dropdown. It allows users to both toggle the current selection on/off and choose from a dropdown list of options. Use this instead of a standalone `Select` when you need a primary action button alongside option selection.",documentation:'The `ButtonSelect` component combines a button with a select dropdown. It allows users to both toggle the current selection on/off and choose from a dropdown list of options. Use this instead of a standalone `Select` when you need a primary action button alongside option selection.\n\n* Combines a button (toggle/action) with a select dropdown menu\n* Button can toggle current selection or trigger an action\n* Supports icons, optional labels, and tooltips for better UX\n* Configurable with different sizes, states (disabled/enabled), and behaviors\n* Full keyboard navigation and screen reader support\n* Customizable styling through `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` props\n* Individual button behaviour per option via `buttonBehaviour` function\n* Validation state support\n\n```jsx\nimport { ButtonSelect } from "@baseline-ui/core";\nimport { EllipseIcon, RectangleIcon, PolygonIcon } from "@baseline-ui/icons/24";\n\nconst items = [\n { id: "ellipse", icon: EllipseIcon, label: "Ellipse" },\n { id: "square", icon: RectangleIcon, label: "Square" },\n { id: "polygon", icon: PolygonIcon, label: "Polygon" },\n];\n\n<ButtonSelect items={items} aria-label="Shape Options" />;\n```\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" hideLabel />\n```\n\nBy default, ButtonSelect displays a tooltip on the dropdown trigger. When `hideLabel` is `true`, the main button also receives a tooltip showing the selected item\'s label. You can disable tooltips by setting `tooltipProps` with `isDisabled: true`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={{ isDisabled: true }}\n/>\n```\n\nYou can also pass `tooltipProps` as a function to customize tooltips per trigger:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={(trigger) => ({\n text: trigger === "button" ? "Toggle shape" : "More shapes",\n })}\n/>\n```\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n defaultSelectedKey="polygon"\n/>\n```\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" defaultSelected={true} />\n```\n\nYou can control the selected item by using the `selectedKey` prop. Use `isSelected` and `onButtonSelectionChange` to control the button toggle state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n selectedKey={selectedKey}\n onSelectionChange={setSelectedKey}\n isSelected={isSelected}\n onButtonSelectionChange={({ isSelected }) => setIsSelected(isSelected)}\n/>\n```\n\nYou can disable the entire component using the `isDisabled` prop. Use `disabledKeys` to disable individual options in the dropdown.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" isDisabled />\n```\n\nYou can disable specific options in the dropdown using `disabledKeys`. If the currently selected item\'s key is in `disabledKeys`, the main button is also disabled.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n disabledKeys={["square"]}\n/>\n```\n\nBy default, the button uses a `"toggle"` behavior, which means it can be toggled on/off. You can change it to `"action"` behavior, which means it will trigger an action when pressed but won\'t toggle a state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour="action"\n onPress={(e) => console.log("Button pressed", e)}\n/>\n```\n\nYou can also pass `buttonBehaviour` as a function to assign different behaviors per option:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour={(activeKey) =>\n activeKey === "ellipse" ? "action" : "toggle"\n }\n/>\n```\n\nButtonSelect provides several callbacks:\n\n* **`onPress`** \u2014 Called when the main button is pressed\n* **`onButtonAction`** \u2014 Called with `{ isSelected, selectedKey, buttonBehaviour }` when the button is pressed\n* **`onButtonSelectionChange`** \u2014 Called with `{ isSelected, selectedKey }` when toggle state changes\n* **`onSelectionChange`** \u2014 Called with the new key when a dropdown option is selected\n* **`onOptionPress`** \u2014 Called with `(pressEvent, key)` when any dropdown option is pressed\n\nUse `validationState` to indicate a validation state. Supported values are `"error"` and `"warning"`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n validationState="error"\n/>\n```\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" size="lg" />\n```\n\nUse `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` to customize the appearance. These accept either static values or functions for dynamic styling:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n optionClassName={(item, { isButton, isSelected }) =>\n isButton && isSelected ? "active-button" : ""\n }\n optionStyle={(item, { isButton }) => ({\n backgroundColor: isButton ? "lightblue" : undefined,\n })}\n triggerClassName="custom-trigger"\n/>\n```\n\n| Selector | Description |\n| ---------------------------------- | ----------------------------------------------------------- |\n| `.BaselineUI-ButtonSelect` | The root container element. |\n| `.BaselineUI-ButtonSelect-Button` | The main action/toggle button. |\n| `.BaselineUI-ButtonSelect-Trigger` | The dropdown trigger (caret) button. |\n| `.BaselineUI-ButtonSelect-Select` | The select/dropdown wrapper. |\n| `[data-hovered]` | Present when the component is hovered. |\n| `[data-selected]` | Present when the button is in the selected (toggled) state. |\n| `[data-disabled]` | Present when the component is disabled. |\n| `[data-expanded]` | Present when the dropdown is open. |\n| `[data-button-behaviour]` | The current button behaviour (`"toggle"` or `"action"`). |\n\n> **Note:** Boolean data attributes (`data-hovered`, `data-selected`, `data-disabled`, `data-expanded`) are only present in the DOM when `true`.\n\n| Key | Function |\n| ----------- | ------------------------------------------------------------------------ |\n| `Space` | Toggles the button if focused, or activates the selected dropdown option |\n| `Enter` | Toggles the button if focused, or activates the selected dropdown option |\n| `Tab` | Moves focus to the next focusable element |\n| `Shift+Tab` | Moves focus to the previous focusable element |\n| `ArrowDown` | Opens the dropdown if trigger is focused; navigates down within dropdown |\n| `ArrowUp` | Navigates up within the dropdown |\n| `Home` | Moves to the first option in the dropdown |\n| `End` | Moves to the last option in the dropdown |\n| `Escape` | Closes the dropdown if open |\n\n* **Select** \u2014 Use when you only need a dropdown without a primary action button.\n* **ToggleButton** \u2014 Use when you need a standalone toggle button without a dropdown.\n* **ActionButton** \u2014 Use when you need a standalone action button.\n* **ListBox** \u2014 The underlying list component used in the dropdown.',props:`interface ButtonSelectProps {
+);`}],implementation:""},similarTo:[],figmaUrl:null},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.",documentation:'`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.\n\n* Combines a button (toggle/action) with a select dropdown menu\n* Button can toggle current selection or trigger an action\n* Supports icons, optional labels, and tooltips for better UX\n* Configurable with different sizes, states (disabled/enabled), and behaviors\n* Full keyboard navigation and screen reader support\n* Customizable styling through `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` props\n* Individual button behaviour per option via `buttonBehaviour` function\n* Validation state support\n\n```jsx\nimport { ButtonSelect } from "@baseline-ui/core";\nimport { EllipseIcon, RectangleIcon, PolygonIcon } from "@baseline-ui/icons/24";\n\nconst items = [\n { id: "ellipse", icon: EllipseIcon, label: "Ellipse" },\n { id: "square", icon: RectangleIcon, label: "Square" },\n { id: "polygon", icon: PolygonIcon, label: "Polygon" },\n];\n\n<ButtonSelect items={items} aria-label="Shape Options" />;\n```\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" hideLabel />\n```\n\nBy default, ButtonSelect displays a tooltip on the dropdown trigger. When `hideLabel` is `true`, the main button also receives a tooltip showing the selected item\'s label. You can disable tooltips by setting `tooltipProps` with `isDisabled: true`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={{ isDisabled: true }}\n/>\n```\n\nYou can also pass `tooltipProps` as a function to customize tooltips per trigger:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={(trigger) => ({\n text: trigger === "button" ? "Toggle shape" : "More shapes",\n })}\n/>\n```\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n defaultSelectedKey="polygon"\n/>\n```\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" defaultSelected={true} />\n```\n\nYou can control the selected item by using the `selectedKey` prop. Use `isSelected` and `onButtonSelectionChange` to control the button toggle state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n selectedKey={selectedKey}\n onSelectionChange={setSelectedKey}\n isSelected={isSelected}\n onButtonSelectionChange={({ isSelected }) => setIsSelected(isSelected)}\n/>\n```\n\nYou can disable the entire component using the `isDisabled` prop. Use `disabledKeys` to disable individual options in the dropdown.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" isDisabled />\n```\n\nYou can disable specific options in the dropdown using `disabledKeys`. If the currently selected item\'s key is in `disabledKeys`, the main button is also disabled.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n disabledKeys={["square"]}\n/>\n```\n\nBy default, the button uses a `"toggle"` behavior, which means it can be toggled on/off. You can change it to `"action"` behavior, which means it will trigger an action when pressed but won\'t toggle a state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour="action"\n onPress={(e) => console.log("Button pressed", e)}\n/>\n```\n\nYou can also pass `buttonBehaviour` as a function to assign different behaviors per option:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour={(activeKey) =>\n activeKey === "ellipse" ? "action" : "toggle"\n }\n/>\n```\n\nButtonSelect provides several callbacks:\n\n* **`onPress`** \u2014 Called when the main button is pressed\n* **`onButtonAction`** \u2014 Called with `{ isSelected, selectedKey, buttonBehaviour }` when the button is pressed\n* **`onButtonSelectionChange`** \u2014 Called with `{ isSelected, selectedKey }` when toggle state changes\n* **`onSelectionChange`** \u2014 Called with the new key when a dropdown option is selected\n* **`onOptionPress`** \u2014 Called with `(pressEvent, key)` when any dropdown option is pressed\n\nUse `validationState` to indicate a validation state. Supported values are `"error"` and `"warning"`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n validationState="error"\n/>\n```\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" size="lg" />\n```\n\nUse `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` to customize the appearance. These accept either static values or functions for dynamic styling:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n optionClassName={(item, { isButton, isSelected }) =>\n isButton && isSelected ? "active-button" : ""\n }\n optionStyle={(item, { isButton }) => ({\n backgroundColor: isButton ? "lightblue" : undefined,\n })}\n triggerClassName="custom-trigger"\n/>\n```\n\n| Selector | Description |\n| ---------------------------------- | ----------------------------------------------------------- |\n| `.BaselineUI-ButtonSelect` | The root container element. |\n| `.BaselineUI-ButtonSelect-Button` | The main action/toggle button. |\n| `.BaselineUI-ButtonSelect-Trigger` | The dropdown trigger (caret) button. |\n| `.BaselineUI-ButtonSelect-Select` | The select/dropdown wrapper. |\n| `[data-hovered]` | Present when the component is hovered. |\n| `[data-selected]` | Present when the button is in the selected (toggled) state. |\n| `[data-disabled]` | Present when the component is disabled. |\n| `[data-expanded]` | Present when the dropdown is open. |\n| `[data-button-behaviour]` | The current button behaviour (`"toggle"` or `"action"`). |\n\n> **Note:** Boolean data attributes (`data-hovered`, `data-selected`, `data-disabled`, `data-expanded`) are only present in the DOM when `true`.\n\n| Key | Function |\n| ----------- | ------------------------------------------------------------------------ |\n| `Space` | Toggles the button if focused, or activates the selected dropdown option |\n| `Enter` | Toggles the button if focused, or activates the selected dropdown option |\n| `Tab` | Moves focus to the next focusable element |\n| `Shift+Tab` | Moves focus to the previous focusable element |\n| `ArrowDown` | Opens the dropdown if trigger is focused; navigates down within dropdown |\n| `ArrowUp` | Navigates up within the dropdown |\n| `Home` | Moves to the first option in the dropdown |\n| `End` | Moves to the last option in the dropdown |\n| `Escape` | Closes the dropdown if open |\n\n* **Select** \u2014 Use when you only need a dropdown without a primary action button.\n* **ToggleButton** \u2014 Use when you need a standalone toggle button without a dropdown.\n* **ActionButton** \u2014 Use when you need a standalone action button.\n* **ListBox** \u2014 The underlying list component used in the dropdown.',props:`interface ButtonSelectProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -2909,7 +2948,7 @@ export const ButtonSelectWithOptionStyleFn: React.FC<
  })}
  />
  );
-};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"A Calendar displays a monthly grid of dates, allowing users to select a single date. It supports keyboard navigation, international calendars, and accessible interactions.",documentation:'A Calendar displays a monthly grid of dates, allowing users to select a single date. It supports keyboard navigation, international calendars, and accessible interactions.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
+};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.",documentation:'`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -3109,7 +3148,7 @@ export const RangeCalendarExample: React.FC<
  }
  />
  );
-};`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"A RangeCalendar displays a monthly grid of dates, allowing users to select a contiguous range of dates by clicking a start and end date. It supports keyboard navigation, international calendars, and accessible interactions.",documentation:`A RangeCalendar displays a monthly grid of dates, allowing users to select a contiguous range of dates by clicking a start and end date. It supports keyboard navigation, international calendars, and accessible interactions.
+};`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"`RangeCalendar` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.",documentation:`\`RangeCalendar\` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.
 
 * **Range selection** \u2013 Click to set start and end dates, with visual highlighting for the selected range
 * **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more
@@ -3511,7 +3550,7 @@ export const RangeCalendarExample: React.FC<
  }
  />
  );
-};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a component that allows users to select one or more items from a set. It is built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html) and provides additional styling and behavior.",documentation:'`Checkbox` is a component that allows users to select one or more items from a set. It is built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html) and provides additional styling and behavior.\n\nIn most cases, checkboxes should have a visual label. If the checkbox does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify the element to assistive technology.\n\n* Built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html)\n* Full support for form autofill\n* Keyboard focus management and cross browser normalization\n* Labeling support for assistive technology via aria-\\* props\n* Indeterminate state support\n\n```jsx\nimport { Checkbox } from "@baseline-ui/core";\n\n<Checkbox label="Label" onChange={console.log} />;\n```\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n```jsx\n<Checkbox label="Label" defaultSelected onChange={console.log} />\n```\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n```jsx\n<Checkbox label="Label" isSelected onChange={console.log} />\n```\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n```jsx\n<Checkbox label="Label" isIndeterminate onChange={console.log} />\n```\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n```jsx\n<Checkbox label="Label" isReadOnly isSelected onChange={console.log} />\n```\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n```jsx\n<Checkbox label="Label" isDisabled onChange={console.log} />\n```\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n```jsx\n<Checkbox label="Label" name="name" value="value" onChange={console.log} />\n```\n\nThe `labelPosition` prop controls whether the label appears before or after the checkbox.\n\n```jsx\n<Checkbox label="Label" labelPosition="start" onChange={console.log} />\n```\n\nThe `isInvalid` prop marks the checkbox as having a validation error.\n\n```jsx\n<Checkbox label="Label" isInvalid onChange={console.log} />\n```\n\nThe `onChange` callback receives a `boolean` indicating the new checked state.\n\n```jsx\n<Checkbox\n label="Label"\n onChange={(isSelected) => {\n console.log("Checked:", isSelected);\n }}\n/>\n```\n\nWhen `isIndeterminate` is `true`, the checkbox displays a minus icon regardless of the `isSelected` state. Clicking an indeterminate checkbox will call `onChange` with `true`.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-selected] | Whether the component is selected. |\n| \\[data-readonly] | Whether the component is read-only. |\n| \\[data-pressed] | Whether the component is currently pressed. |\n| \\[data-indeterminate] | Whether the component is in an indeterminate state. |\n| \\[data-invalid] | Whether the component has a validation error. |\n\n| Key | Function |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |',props:`interface CheckboxProps {
+};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.",documentation:'`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.\n\n* Built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html)\n* Full support for form autofill\n* Keyboard focus management and cross browser normalization\n* Labeling support for assistive technology via aria-\\* props\n* Indeterminate state support\n\n```jsx\nimport { Checkbox } from "@baseline-ui/core";\n\n<Checkbox label="Label" onChange={console.log} />;\n```\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n```jsx\n<Checkbox label="Label" defaultSelected onChange={console.log} />\n```\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n```jsx\n<Checkbox label="Label" isSelected onChange={console.log} />\n```\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n```jsx\n<Checkbox label="Label" isIndeterminate onChange={console.log} />\n```\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n```jsx\n<Checkbox label="Label" isReadOnly isSelected onChange={console.log} />\n```\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n```jsx\n<Checkbox label="Label" isDisabled onChange={console.log} />\n```\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n```jsx\n<Checkbox label="Label" name="name" value="value" onChange={console.log} />\n```\n\nThe `labelPosition` prop controls whether the label appears before or after the checkbox.\n\n```jsx\n<Checkbox label="Label" labelPosition="start" onChange={console.log} />\n```\n\nThe `isInvalid` prop marks the checkbox as having a validation error.\n\n```jsx\n<Checkbox label="Label" isInvalid onChange={console.log} />\n```\n\nThe `onChange` callback receives a `boolean` indicating the new checked state.\n\n```jsx\n<Checkbox\n label="Label"\n onChange={(isSelected) => {\n console.log("Checked:", isSelected);\n }}\n/>\n```\n\nWhen `isIndeterminate` is `true`, the checkbox displays a minus icon regardless of the `isSelected` state. Clicking an indeterminate checkbox will call `onChange` with `true`.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-selected] | Whether the component is selected. |\n| \\[data-readonly] | Whether the component is read-only. |\n| \\[data-pressed] | Whether the component is currently pressed. |\n| \\[data-indeterminate] | Whether the component is in an indeterminate state. |\n| \\[data-invalid] | Whether the component has a validation error. |\n\n| Key | Function |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |',props:`interface CheckboxProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -3552,7 +3591,7 @@ labelPosition?: "start" | "end"
 slot?: string | null
 }`,stories:{usage:[{id:"core-forms-checkbox--primary",name:"Primary",snippet:'const Primary = () => <Checkbox aria-label="Label" />;'},{id:"core-forms-checkbox--checked",name:"Checked",snippet:'const Checked = () => <Checkbox aria-label="Label" defaultSelected />;'},{id:"core-forms-checkbox--indeterminate",name:"Indeterminate",snippet:'const Indeterminate = () => <Checkbox aria-label="Label" isIndeterminate />;'},{id:"core-forms-checkbox--with-error",name:"With Error",snippet:'const WithError = () => <Checkbox aria-label="Label" isInvalid />;'},{id:"core-forms-checkbox--with-label-at-end",name:"With Label At End",snippet:"const WithLabelAtEnd = () => <WithLabel />;"},{id:"core-forms-checkbox--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <div style={{ width: 150 }}>
     <WithLabel labelPosition="start" />
-</div>;`}],implementation:""},similarTo:[],figmaUrl:null},Code:{id:"core-content-code",breadcrumb:"Core/Content/Code",importStatement:'import { Code } from "@baseline-ui/core";',description:"The `Code` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.",documentation:`The \`Code\` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.
+</div>;`}],implementation:""},similarTo:[],figmaUrl:null},Code:{id:"core-content-code",breadcrumb:"Core/Content/Code",importStatement:'import { Code } from "@baseline-ui/core";',description:"`Code` is a monospace container for displaying source snippets or configuration text inline with other UI. Use it when showing code samples, command output, or other technical strings that must preserve formatting.",documentation:`\`Code\` is a monospace container for displaying source snippets or configuration text inline with other UI. Use it when showing code samples, command output, or other technical strings that must preserve formatting.
 
 * Monospace font family optimized for code readability
 * Automatic horizontal and vertical scrolling for long code blocks
@@ -3601,7 +3640,7 @@ children: React.ReactNode
       "test": "cross-env BABEL_ENV=test jest",
       "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
     }
-  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.",documentation:'The `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
+  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
 /**
  * Whether the overlay is open by default (controlled).
  */
@@ -3877,7 +3916,7 @@ export const IndeterminateWithCustomColorLabel: React.FC<ColorInputProps> = (
  }
  />
  );
-};`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:"The `ColorSwatch` component is used to display a color swatch. It provides a visual representation of a color with support for various states including interactive, selected, and disabled.",documentation:`The \`ColorSwatch\` component is used to display a color swatch. It provides a visual representation of a color with support for various states including interactive, selected, and disabled.
+};`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
 
 * Accessible color representation with screen reader support via aria-label
 * Support for transparent colors with a checkered background pattern
@@ -4068,8 +4107,7 @@ indeterminateIcon?: React.FC<IconProps> | null
         aria-label="Indeterminate"
         tooltip
         indeterminateIcon={null} />
-</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorSwatchPicker:{id:"core-forms-colorswatchpicker",breadcrumb:"Core/Forms/ColorSwatchPicker",importStatement:'import { ColorSwatchPicker } from "@baseline-ui/core";',description:"`ColorSwatchPicker` is a component that allows users to select a color from a predefined set of colors. It is built on top of\nthe `ListBox` component.",documentation:`\`ColorSwatchPicker\` is a component that allows users to select a color from a predefined set of colors. It is built on top of
-the \`ListBox\` component.
+</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorSwatchPicker:{id:"core-forms-colorswatchpicker",breadcrumb:"Core/Forms/ColorSwatchPicker",importStatement:'import { ColorSwatchPicker } from "@baseline-ui/core";',description:"`ColorSwatchPicker` is a keyboard-navigable grid of color swatches from which a user picks exactly one color. Use it when you want users to choose from a curated palette without the overhead of a full color picker.",documentation:`\`ColorSwatchPicker\` is a keyboard-navigable grid of color swatches from which a user picks exactly one color. Use it when you want users to choose from a curated palette without the overhead of a full color picker.
 
 * Exposed to assistive technologies via ARIA attributes.
 * Supports keyboard navigation.
@@ -4208,8 +4246,7 @@ labelPosition?: any
       label: item.label,
     }))}
     aria-label="Color Swatch Picker"
-    isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox` is a component that allows users to select an item from a dropdown list. The selected item value is shown in\nan editable input box that can also be used to search and filter specific items from the dropdown list.",documentation:`\`ComboBox\` is a component that allows users to select an item from a dropdown list. The selected item value is shown in
-an editable input box that can also be used to search and filter specific items from the dropdown list.
+    isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.",documentation:`\`ComboBox\` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.
 
 \`\`\`jsx
 <ComboBox
@@ -4818,7 +4855,7 @@ export const SectionComboBoxExample: React.FC = () => {
  <ComboBox items={itemsWithSections} aria-label="Combo box" />
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},DateField:{id:"core-forms-datefield",breadcrumb:"Core/Forms/DateField",importStatement:'import { DateField, VariantViewer } from "@baseline-ui/core";',description:"The `DateField` component is used to input date and time values using a keyboard. Each part of a date/time value is displayed in an individually editable segment, allowing for precise and accessible input control.",documentation:`The \`DateField\` component is used to input date and time values using a keyboard. Each part of a date/time value is displayed in an individually editable segment, allowing for precise and accessible input control.
+};`},similarTo:[],figmaUrl:null},DateField:{id:"core-forms-datefield",breadcrumb:"Core/Forms/DateField",importStatement:'import { DateField, VariantViewer } from "@baseline-ui/core";',description:"`DateField` is a text input split into individually editable segments for day, month, year, and optional time parts. Use it when users need to type a precise date or time value directly, with or without an accompanying calendar picker.",documentation:`\`DateField\` is a text input split into individually editable segments for day, month, year, and optional time parts. Use it when users need to type a precise date or time value directly, with or without an accompanying calendar picker.
 
 * **Dates and times** \u2013 Support for dates and times with configurable granularity
 * **International** \u2013 Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more
@@ -5774,7 +5811,7 @@ export const TestComponent = ({
  </DeviceProvider>
  </div>
  );
-};`},similarTo:[],figmaUrl:null},Dialog:{id:"core-overlays-dialog",breadcrumb:"Core/Overlays/Dialog",importStatement:'import { Dialog, DialogExample, DialogSizesExample } from "@baseline-ui/core";',description:"The `Dialog` component is used to display content in a modal dialog.",documentation:`The \`Dialog\` component is used to display content in a modal dialog.
+};`},similarTo:[],figmaUrl:null},Dialog:{id:"core-overlays-dialog",breadcrumb:"Core/Overlays/Dialog",importStatement:'import { Dialog, DialogExample, DialogSizesExample } from "@baseline-ui/core";',description:"`Dialog` is a modal overlay that interrupts the user's flow to present focused content or require a decision. Use it for tasks that must be completed or acknowledged before returning to the underlying view.",documentation:`\`Dialog\` is a modal overlay that interrupts the user's flow to present focused content or require a decision. Use it for tasks that must be completed or acknowledged before returning to the underlying view.
 
 * Exposed to assistive technologies as a \`dialog\` using ARIA \`role="dialog"\`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.
 * Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.
@@ -6027,7 +6064,7 @@ export const DialogSizesExample = () => {
     WithInteractiveContentDisclosure,
     WithLongContentDisclosure,
     WithoutDescriptionDisclosure,
-} from "@baseline-ui/core";`,description:"The `Disclosure` component is a collapsible panel that allows users to toggle the visibility of content. It displays a header with a status indicator (icon, title, and optional description) and a collapsible panel that reveals additional content when expanded.",documentation:`The \`Disclosure\` component is a collapsible panel that allows users to toggle the visibility of content. It displays a header with a status indicator (icon, title, and optional description) and a collapsible panel that reveals additional content when expanded.
+} from "@baseline-ui/core";`,description:"`Disclosure` is an expandable panel with a status header that toggles a region of secondary content open or closed. Use it to surface progress, logs, or supporting details for an ongoing task while keeping the default view compact.",documentation:`\`Disclosure\` is an expandable panel with a status header that toggles a region of secondary content open or closed. Use it to surface progress, logs, or supporting details for an ongoing task while keeping the default view compact.
 
 * Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`success\`, and \`denied\`
 * Default icons for each variant, with support for custom icons
@@ -6578,7 +6615,7 @@ export const TruncatedTitleDisclosure: React.FC = () => {
  </Disclosure>
  </div>
  );
-};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"The `Drawer` component is a panel that slides in from the edge of the screen. It is used to display additional content or actions that are not part of the main view.\nIt is a dialog that is used in combination with `Modal` to display additional content or actions that are not part of the main view.",documentation:'The `Drawer` component is a panel that slides in from the edge of the screen. It is used to display additional content or actions that are not part of the main view.\nIt is a dialog that is used in combination with `Modal` to display additional content or actions that are not part of the main view.\n\n* Exposed to assistive technologies as a `dialog` using ARIA `role="dialog"`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.\n* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.\n\n```jsx\nimport { Drawer } from "../../utils";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
+};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.",documentation:'`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.\n\n* Exposed to assistive technologies as a `dialog` using ARIA `role="dialog"`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.\n* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.\n\n```jsx\nimport { Drawer } from "../../utils";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -6659,7 +6696,7 @@ export const DrawerWithActionExample: React.FC<{
  Drawer Content
  </Drawer>
  );
-};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { ActionButton, Box, Editor, EditorAutoFocusOnMount, NumberInput, Separator } from "@baseline-ui/core";',description:"The `Editor` component is a rich/plain text editor that allows users to create and edit content.",documentation:'The `Editor` component is a rich/plain text editor that allows users to create and edit content.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\n```jsx\nimport { Editor } from "../../utils";\n\nfunction MyComponent() {\n return <Editor />;\n}\n```\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nIn the right example, the `isInline` prop is used to set the editor to be inline.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props. This allows you to control the value of the editor from the parent component.\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing `mentionableUsers` prop. This prop should be an array of objects with `id` and `name` properties. The `id` should be unique for each user and the `name` should be the name of the user.\nThe mentions feature only works when `enableRichText` is set to `true`.\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop should be an array of objects with `aria-label`, `icon` and `onPress` properties.\n\n| Key | Function |\n| ------------------------------ | ----------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\n| Selector | Description |\n| ------------------------------------------- | ---------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |',props:`interface EditorProps {
+};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { ActionButton, Box, Editor, EditorAutoFocusOnMount, NumberInput, Separator } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\n```jsx\nimport { Editor } from "../../utils";\n\nfunction MyComponent() {\n return <Editor />;\n}\n```\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nIn the right example, the `isInline` prop is used to set the editor to be inline.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props. This allows you to control the value of the editor from the parent component.\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing `mentionableUsers` prop. This prop should be an array of objects with `id` and `name` properties. The `id` should be unique for each user and the `name` should be the name of the user.\nThe mentions feature only works when `enableRichText` is set to `true`.\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop should be an array of objects with `aria-label`, `icon` and `onPress` properties.\n\n| Key | Function |\n| ------------------------------ | ----------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\n| Selector | Description |\n| ------------------------------------------- | ---------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |',props:`interface EditorProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -7093,7 +7130,507 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
  editorHandle={editorHandleRef}
  />
  );
-};`},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
+};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUpload`](/story/core-forms-fileupload--basic).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
+/**
+ * The description to display below the input.
+ */
+description?: string
+/**
+ * The error message to display when the input is in an error state.
+ */
+errorMessage?: string
+/**
+ * The warning message to display when the input is in a warning state.
+ */
+warningMessage?: string
+/**
+ * Specifies what mime type of files are allowed.
+ */
+acceptedFileTypes?: ReadonlyArray<string>
+/**
+ * Whether multiple files can be selected.
+ */
+allowsMultiple?: boolean
+/**
+ * Specifies the use of a media capture mechanism to capture the media on the spot.
+ */
+defaultCamera?: 'user' | 'environment'
+/**
+ * Handler when a user selects a file.
+ */
+onSelect?: (files: FileList | null) => void
+/**
+ * The children of the component.
+ */
+children?: ReactNode
+/**
+ * Enables the selection of directories instead of individual files.
+ */
+acceptDirectory?: boolean
+/**
+ * The className applied to the root element of the component.
+ */
+className?: string
+/**
+ * The style applied to the root element of the component.
+ */
+style?: React.CSSProperties
+/**
+ * The label to display above the field.
+ */
+label?: React.ReactNode
+/**
+ * The label shown on the file picker button.
+ * 
+ * @default "Choose file"
+ */
+buttonLabel?: React.ReactNode
+/**
+ * The text shown when no file has been selected.
+ * 
+ * @default "No file chosen"
+ */
+placeholder?: string
+/**
+ * Whether the field is disabled.
+ */
+isDisabled?: boolean
+/**
+ * Identifier of element(s) that describe the input.
+ */
+aria-describedby?: string
+/**
+ * Accessible label for the field when no visible label is provided.
+ */
+aria-label?: string
+/**
+ * Called with the selected files. An empty array signals that the picker was cancelled.
+ */
+onValueChange?: (files: File[]) => void
+/**
+ * Whether to focus the input on mount.
+ */
+autoFocus?: boolean
+/**
+ * Style applied to the inner button.
+ */
+buttonStyle?: React.CSSProperties
+/**
+ * Class name applied to the inner button.
+ */
+buttonClassName?: string
+labelPosition?: any
+}`,stories:{usage:[{id:"core-forms-fileinput--basic",name:"Basic",snippet:`const Basic = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    description="Supports .mov and .mp4"
+    acceptedFileTypes={[".mov", ".mp4"]} />;`},{id:"core-forms-fileinput--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <FileInput onValueChange={fn()} onChange={fn()} aria-label="Upload a file" />;'},{id:"core-forms-fileinput--label-position-start",name:"Label Position Start",snippet:`const LabelPositionStart = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Attachment"
+    description="Supports .mov and .mp4"
+    labelPosition="start" />;`},{id:"core-forms-fileinput--disabled",name:"Disabled",snippet:`const Disabled = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    description="Supports .mov and .mp4"
+    isDisabled />;`},{id:"core-forms-fileinput--with-error",name:"With Error",snippet:`const WithError = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    errorMessage="Please choose a supported file." />;`},{id:"core-forms-fileinput--with-warning",name:"With Warning",snippet:`const WithWarning = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    validationState="warning"
+    warningMessage="This file format is uncommon \u2014 make sure it is supported." />;`},{id:"core-forms-fileinput--multiple",name:"Multiple",snippet:`const Multiple = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Attachments"
+    description="You can choose multiple files."
+    allowsMultiple />;`},{id:"core-forms-fileinput--directory",name:"Directory",snippet:`const Directory = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Upload folder"
+    description="Selects all files inside the chosen folder."
+    acceptDirectory />;`},{id:"core-forms-fileinput--custom-labels",name:"Custom Labels",snippet:`const CustomLabels = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Avatar"
+    buttonLabel="Browse..."
+    placeholder="Drop an image here" />;`},{id:"core-forms-fileinput--variants",name:"Variants",snippet:`const Variants = () => (
+  <VariantViewer<React.ComponentProps<typeof FileInput>>
+    cellStyle={{ minWidth: 300 }}
+    header={["Label on top", "Label inline"]}
+    component={FileInput}
+    variants={{
+      Enabled: [
+        { label: "Label", description: "Supports .mov and .mp4" },
+        {
+          label: "Label",
+          description: "Supports .mov and .mp4",
+          labelPosition: "start",
+        },
+      ],
+      Warning: [
+        {
+          label: "Label",
+          validationState: "warning",
+          warningMessage: "Warning message replaces helper text",
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          validationState: "warning",
+          warningMessage: "Warning message replaces helper text",
+        },
+      ],
+      Error: [
+        {
+          label: "Label",
+          errorMessage: "Error message replaces helper text",
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          errorMessage: "Error message replaces helper text",
+        },
+      ],
+      Disabled: [
+        {
+          label: "Label",
+          description: "Supports .mov and .mp4",
+          isDisabled: true,
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          description: "Supports .mov and .mp4",
+          isDisabled: true,
+        },
+      ],
+    }}
+  />
+);`}],implementation:""},similarTo:[],figmaUrl:null},FileList:{id:"core-collections-filelist",breadcrumb:"Core/Collections/FileList",importStatement:'import { FileList } from "@baseline-ui/core";',description:"FileList renders a vertical list of uploaded or attached files. Each row shows the file name, an upload-progress spinner or remove button, and an optional error state. Use it to surface attachments inside forms, drawers, or upload flows.",documentation:'FileList renders a vertical list of uploaded or attached files. Each row shows the file name, an upload-progress spinner or remove button, and an optional error state. Use it to surface attachments inside forms, drawers, or upload flows.\n\nFor collecting files, pair this with `FileUpload` or `ImageDropZone`.\n\n* Built on `UNSAFE_ListBox`, so rows are keyboard navigable and announced as listbox options\n* Per-row remove button, plus `Delete` / `Backspace` keyboard removal on the focused row\n* Loading state replaces the remove button with a `ProgressSpinner`\n* Error state with a red border, error message, and optional explanation\n* Long file names truncate with an ellipsis; the full name is exposed via `title`\n* Disabled state propagates to every remove button and blocks keyboard removal\n\n```jsx\nimport { FileList } from "@baseline-ui/core";\n\nconst items = [\n { id: "1", name: "report.pdf" },\n { id: "2", name: "photo.png" },\n];\n\nexport default function App() {\n return (\n <FileList\n aria-label="Uploaded files"\n items={items}\n onRemove={(id) => console.log("remove", id)}\n />\n );\n}\n```\n\nWhen `items` is empty, FileList renders nothing \u2014 render an empty-state component yourself if you need one.\n\nA FileList row can appear in three primary states: default, loading, and error. The states can be mixed across items in a single list.\n\nSet `isLoading` on an item to show a spinner instead of the remove button while the upload is in flight. Keyboard removal (`Delete` / `Backspace`) is suppressed on loading rows.\n\n```jsx\n<FileList\n aria-label="Uploaded files"\n items={[\n { id: "1", name: "uploading.zip", isLoading: true },\n { id: "2", name: "done.pdf" },\n ]}\n onRemove={handleRemove}\n/>\n```\n\nSet `errorMessage` (and optionally `errorExplanation`) on an item to render the row in the error state. The row gets a red border and the messages appear below the file name. The remove button stays visible so the user can clear the failed item.\n\n```jsx\n<FileList\n aria-label="Uploaded files"\n items={[\n {\n id: "1",\n name: "too-large.mp4",\n errorMessage: "Upload failed",\n errorExplanation: "File exceeds the 50 MB limit.",\n },\n ]}\n onRemove={handleRemove}\n/>\n```\n\nPass `disabledKeys="all"` to disable removal across every row, or an iterable of item ids to disable specific rows. Both the per-row remove button and `Delete` / `Backspace` keyboard removal are suppressed for disabled rows; loading rows keep their spinner.\n\n```jsx\n<FileList aria-label="Uploaded files" items={items} disabledKeys="all" />\n```\n\nFile names that exceed the row width truncate with an ellipsis. The full name is exposed via the `title` attribute and read by assistive technologies, so it is recoverable on hover and through screen readers.\n\nProvide `aria-label` or `aria-labelledby` so the listbox has an accessible name. `aria-labelledby` points to the id of an existing visible label.\n\n```jsx\n<>\n <span id="attachments-label">Attached files</span>\n <FileList aria-labelledby="attachments-label" items={items} />\n</>\n```\n\n| Selector | Description |\n| ----------------------------- | ------------------------------------------ |\n| `.BaselineUI-FileList` | Root element wrapping the listbox. |\n| `[role="option"][data-key]` | A row. `data-key` matches the item\'s `id`. |\n| `[data-focus-visible="true"]` | Row currently showing the focus ring. |\n| `[data-disabled="true"]` | Row that is currently disabled. |\n\n| Key | Function |\n| ----------------------- | ------------------------------------------- |\n| `Tab` / `Shift+Tab` | Moves focus into and out of the list. |\n| `ArrowUp` / `ArrowDown` | Moves focus between rows. |\n| `Home` / `End` | Moves focus to the first or last row. |\n| `Delete` | Removes the focused row (calls `onRemove`). |\n| `Backspace` | Removes the focused row (calls `onRemove`). |\n\nThe remove button is excluded from the tab order \u2014 keyboard users delete rows by focusing the row and pressing `Delete` or `Backspace`, while pointer users click the row\'s remove button. `Delete` / `Backspace` are suppressed when the focused item is disabled (via `disabledKeys`) or loading.\n\n* `FileUpload` \u2014 picker / drop target that produces files to render here.\n* `ImageDropZone` \u2014 variant of `FileUpload` specialized for images.\n* `UNSAFE_ListBox` \u2014 the underlying listbox primitive.',props:`interface FileListProps {
+/**
+ * The className applied to the root element.
+ */
+className?: string
+/**
+ * The style applied to the root element.
+ */
+style?: React.CSSProperties
+/**
+ * The items rendered in the list. Pass a stable reference (e.g. memoize
+ * or hoist) when possible \u2014 every new array identity rebuilds the
+ * underlying listbox collection.
+ */
+items: FileListItem[]
+/**
+ * Called when the user removes an item via the row button or Delete.
+ */
+onRemove?: (id: string) => void
+/**
+ * Keys of items that should be disabled individually, or \`"all"\` to
+ * disable every item. Disabled items cannot be removed via the row
+ * button or keyboard.
+ */
+disabledKeys?: Iterable<string> | "all"
+}`,stories:{usage:[{id:"core-collections-filelist--basic",name:"Basic",snippet:`const Basic = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--loading",name:"Loading",snippet:`const Loading = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--with-error",name:"With Error",snippet:`const WithError = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--disabled",name:"Disabled",snippet:`const Disabled = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            disabledKeys="all"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--disabled-items",name:"Disabled Items",snippet:`const DisabledItems = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            disabledKeys={["1", "3"]}
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--long-filename",name:"Long Filename",snippet:`const LongFilename = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--mixed-states",name:"Mixed States",snippet:`const MixedStates = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--many-items",name:"Many Items",snippet:`const ManyItems = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            style={{ maxHeight: 240, overflowY: "auto" }}
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`}],implementation:`import React from "react";
+
+import { FileList } from "../FileList";
+
+import type { FileListItem } from "../FileList.types";
+
+export const defaultItems: FileListItem[] = [
+ { id: "1", name: "report.pdf" },
+ { id: "2", name: "photo.png" },
+ { id: "3", name: "notes.txt" },
+];
+
+export const loadingItems: FileListItem[] = [
+ { id: "1", name: "uploading-large-archive.zip", isLoading: true },
+ { id: "2", name: "already-uploaded.pdf" },
+];
+
+export const errorItems: FileListItem[] = [
+ {
+ id: "1",
+ name: "too-large.mp4",
+ errorMessage: "Upload failed",
+ errorExplanation: "File exceeds the 50 MB limit.",
+ },
+ {
+ id: "2",
+ name: "unsupported.exe",
+ errorMessage: "Unsupported file type",
+ },
+ { id: "3", name: "ok.pdf" },
+];
+
+export const longNameItems: FileListItem[] = [
+ {
+ id: "1",
+ name: "This is a very long file name that should be truncated in the UI.pdf",
+ },
+ { id: "2", name: "short.pdf" },
+];
+
+export const mixedStateItems: FileListItem[] = [
+ { id: "1", name: "uploading.zip", isLoading: true },
+ {
+ id: "2",
+ name: "too-large.mp4",
+ errorMessage: "Upload failed",
+ errorExplanation: "File exceeds the 50 MB limit.",
+ },
+ { id: "3", name: "report.pdf" },
+];
+
+export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
+ id: String(i + 1),
+ name: \`attachment-\${i + 1}.pdf\`,
+}));
+
+interface BasicProps {
+ onRemove?: (id: string) => void;
+ disabledKeys?: Iterable<string> | "all";
+}
+
+export const BasicFileList: React.FC<BasicProps> = ({
+ onRemove,
+ disabledKeys,
+}) => {
+ const [items, setItems] = React.useState<FileListItem[]>(defaultItems);
+ return (
+ <FileList
+ aria-label="Uploaded files"
+ items={items}
+ disabledKeys={disabledKeys}
+ onRemove={(id) => {
+ onRemove?.(id);
+ setItems((current) => current.filter((item) => item.id !== id));
+ }}
+ />
+ );
+};
+
+export const EmptyFileList: React.FC = () => (
+ <FileList aria-label="Empty" items={[]} />
+);
+
+export const LoadingFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={loadingItems} />
+);
+
+export const ErrorFileList: React.FC = () => (
+ <FileList
+ aria-label="Uploaded files"
+ items={errorItems}
+ onRemove={() => {}}
+ />
+);
+
+export const AriaLabelFileList: React.FC = () => (
+ <FileList aria-label="My files" items={defaultItems} />
+);
+
+export const AriaLabelledByFileList: React.FC = () => (
+ <>
+ <span id="file-list-label">Attached files</span>
+ <FileList aria-labelledby="file-list-label" items={defaultItems} />
+ </>
+);
+
+export const DisabledLoadingFileList: React.FC<BasicProps> = ({
+ onRemove,
+ disabledKeys,
+}) => (
+ <FileList
+ aria-label="Uploaded files"
+ items={[
+ { id: "1", name: "uploading.zip", isLoading: true },
+ { id: "2", name: "done.pdf" },
+ ]}
+ disabledKeys={disabledKeys}
+ onRemove={onRemove}
+ />
+);
+
+export const ClassNameFileList: React.FC = () => (
+ <FileList
+ aria-label="Files"
+ className="my-custom-list"
+ items={defaultItems}
+ />
+);
+
+export const LongNameFileList: React.FC = () => (
+ <FileList
+ aria-label="Files"
+ items={longNameItems}
+ style={{ width: 200 }}
+ onRemove={() => {}}
+ />
+);
+
+export const NoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Files" items={defaultItems} />
+);
+
+export const ErrorNoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={errorItems} />
+);
+
+export const LoadingNoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={loadingItems} />
+);
+
+export const AriaDescribedByFileList: React.FC = () => (
+ <>
+ <span id="file-list-help">Drag files anywhere to upload</span>
+ <FileList
+ aria-label="Files"
+ aria-describedby="file-list-help"
+ items={defaultItems}
+ />
+ </>
+);
+
+export const AriaDetailsFileList: React.FC = () => (
+ <>
+ <span id="file-list-details">Detailed upload information</span>
+ <FileList
+ aria-label="Files"
+ aria-details="file-list-details"
+ items={defaultItems}
+ />
+ </>
+);`},similarTo:["FileUpload","ImageDropZone"],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
     Box,
     FrameProvider,
     NestedTestFrameProvider,
@@ -7704,7 +8241,7 @@ export const PopoverWithFrameBoundaryExample: React.FC<{
  </FrameProvider>
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"The `FreehandCanvas` component is a canvas that allows the user to draw on it with their mouse or pointer.",documentation:`The \`FreehandCanvas\` component is a canvas that allows the user to draw on it with their mouse or pointer.
+};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
 
 * Draw on the canvas with your mouse or pointer
 * Undo and redo your drawings via keyboard shortcuts
@@ -8070,7 +8607,7 @@ export const TrackedControlledFreehandCanvas = ({
  }}
  />
  );
-};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"A `GridList` is an implementation of list component with interactive children. It displays data in a single column or row, and allows users to navigate through the list with arrow keys.",documentation:`A \`GridList\` is an implementation of list component with interactive children. It displays data in a single column or row, and allows users to navigate through the list with arrow keys.
+};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
 
 * **Item Selection**: Single or multiple selections with optional checkboxes.
 * **Interactive Children**: Supports buttons, checkboxes, and menus within list items.
@@ -8521,7 +9058,7 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  </button>
  </>
  );
-};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"A `Group` component is used to group related elements together. It represents a set of related UI\ncontrols in a single visual group.",documentation:'A `Group` component is used to group related elements together. It represents a set of related UI\ncontrols in a single visual group.\n\n```jsx\nimport { Group, ActionButton } from "../../utils";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n```\n```',props:`interface GroupProps {
+};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.",documentation:'`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.\n\n```jsx\nimport { Group, ActionButton } from "../../utils";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n```\n```',props:`interface GroupProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -8664,7 +9201,7 @@ export const LocaleStringExample: React.FC<{
  {formatter.formatMessage("greeting", { name })}
  </div>
  );
-};`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a component that allows users to drag and drop images into a drop zone and upload images from a user's device.",documentation:`\`ImageDropZone\` is a component that allows users to drag and drop images into a drop zone and upload images from a user's device.
+};`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
 
 * Automatic handling of Keyboard focus management and cross browser normalization
 * Labeling support for screen readers (aria-describedby)
@@ -8909,7 +9446,7 @@ accept?: any
     ImageGalleryExample,
     Text,
     Virtualizer,
-} from "@baseline-ui/core";`,description:"The `ImageGallery` component is used to display a collection of images in a gallery format. This user-friendly feature offers a smooth interaction experience through mouse, touch, and keyboard abilities. While images are loading, the ImageGallery component also includes a fade-in effect which adds fluidity to the user's visual experience.",documentation:`The \`ImageGallery\` component is used to display a collection of images in a gallery format. This user-friendly feature offers a smooth interaction experience through mouse, touch, and keyboard abilities. While images are loading, the ImageGallery component also includes a fade-in effect which adds fluidity to the user's visual experience.
+} from "@baseline-ui/core";`,description:"`ImageGallery` renders a grid of selectable, reorderable thumbnails with single or multiple selection and optional deletion. Use it to manage an ordered collection of images, such as a photo album, page list, or asset picker.",documentation:`\`ImageGallery\` renders a grid of selectable, reorderable thumbnails with single or multiple selection and optional deletion. Use it to manage an ordered collection of images, such as a photo album, page list, or asset picker.
 
 * An interactive, feature-rich display platform for image content
 * Mouse, touch, and keyboard interaction support
@@ -9555,7 +10092,7 @@ export function RTLImageGalleryExample(
  <ImageGallery {...props} />
  </I18nProvider>
  );
-}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert` displays an inline status message that stays anchored to nearby content. Use it for local feedback, warnings, or next steps that should remain visible without interrupting the user.",documentation:`\`InlineAlert\` displays an inline status message that stays anchored to nearby content. Use it for local feedback, warnings, or next steps that should remain visible without interrupting the user.
+}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:'import { InlineAlert } from "@baseline-ui/core";',description:"`InlineAlert` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.",documentation:`\`InlineAlert\` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.
 
 * Exposed to assistive technology with \`role="alert"\`.
 * Supports semantic variants for success, warning, error, and informational messages.
@@ -10340,7 +10877,7 @@ elementProps?: {
             </div>
         </div>
     );
-};`}],implementation:""},similarTo:["Toast"],figmaUrl:null},InlineToolbar:{id:"core-overlays-inlinetoolbar",breadcrumb:"Core/Overlays/InlineToolbar",importStatement:'import { ActionButton, Box, InlineToolbar, Text } from "@baseline-ui/core";',description:"The `InlineToolbar` component is used to display a toolbar of inline formatting options. It automatically detects the current selection and opens in the correct position.",documentation:`The \`InlineToolbar\` component is used to display a toolbar of inline formatting options. It automatically detects the current selection and opens in the correct position.
+};`}],implementation:""},similarTo:["Toast"],figmaUrl:null},InlineToolbar:{id:"core-overlays-inlinetoolbar",breadcrumb:"Core/Overlays/InlineToolbar",importStatement:'import { ActionButton, Box, InlineToolbar, Text } from "@baseline-ui/core";',description:"`InlineToolbar` is a floating toolbar that appears next to the current text selection with contextual formatting actions. Use it to expose quick edits, such as bold, link, or delete, directly on selected content without leaving the editing surface.",documentation:`\`InlineToolbar\` is a floating toolbar that appears next to the current text selection with contextual formatting actions. Use it to expose quick edits, such as bold, link, or delete, directly on selected content without leaving the editing surface.
 
 * Automatically detects the current selection and opens in the correct position
 * Supports keyboard navigation
@@ -10542,7 +11079,7 @@ export const InlineToolbarExample = ({
  )}
  </InlineToolbar>
  );
-};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"The `Kbd` component displays keyboard keys and shortcuts with a visual keycap style. It automatically adapts shortcuts to the user's operating system.",documentation:`The \`Kbd\` component displays keyboard keys and shortcuts with a visual keycap style. It automatically adapts shortcuts to the user's operating system.
+};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"`Kbd` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.",documentation:`\`Kbd\` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.
 
 * Keycap-styled visual appearance
 * OS-aware shortcut conversion (Ctrl becomes Cmd on Mac)
@@ -10619,7 +11156,7 @@ shouldUseSymbol?: boolean
       <Kbd>Ctrl+Alt+Shift+Enter</Kbd>
     </Box>
   </Box>
-);`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"A `Link` is a component that allows you to navigate to a different page or section of the current page.",documentation:'A `Link` is a component that allows you to navigate to a different page or section of the current page.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/">Nutrient</Link>;\n```\n\nThe `Link` component comes in three sizes: `small`, `medium`, and `large`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" size="small">\n Small link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="medium">\n Medium link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="large">\n Large link\n</Link>\n```\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/">Default link</Link>\n<Link href="https://www.nutrient.io/sdk/" variant="inline">\n Inline link\n</Link>\n```\n\nThe `Link` component can be disabled by setting the `isDisabled` prop to `true`. This will disable the link and prevent it from being clicked but will still allow keyboard navigation.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" isDisabled>\n Disabled link\n</Link>;\n```\n\nYou can also use press handlers to handle client-side actions. For example, you can use the `onPress` handler to handle a click event. In the example below, we use the `onPress` handler to create an alert. We use the `span` element instead of the `a` element to prevent the page from navigating. Proper ARIA attributes are added to the `span` element to make it accessible.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link onPress={() => alert("Link clicked")} elementType="span">\n Click me to see an alert\n</Link>;\n```\n\nThe `Link` component is rendered as an `<a>` element, so it\u2019s accessible by default. However, you can also use the `onPress` handler to handle client-side actions.\n\nSome of the accessibility features of the `Link` component are that it supports:\n\n* Mouse, keyboard, and touch interactions\n* Navigation links using `<a>` elements or client-side actions using custom handlers\n* The disabled state\n\n| Key | Function |\n| ----- | ------------------- |\n| Enter | Activates the link. |\n\n```\n```',props:`interface LinkProps {
+);`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.",documentation:'`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/">Nutrient</Link>;\n```\n\nThe `Link` component comes in three sizes: `small`, `medium`, and `large`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" size="small">\n Small link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="medium">\n Medium link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="large">\n Large link\n</Link>\n```\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/">Default link</Link>\n<Link href="https://www.nutrient.io/sdk/" variant="inline">\n Inline link\n</Link>\n```\n\nThe `Link` component can be disabled by setting the `isDisabled` prop to `true`. This will disable the link and prevent it from being clicked but will still allow keyboard navigation.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" isDisabled>\n Disabled link\n</Link>;\n```\n\nYou can also use press handlers to handle client-side actions. For example, you can use the `onPress` handler to handle a click event. In the example below, we use the `onPress` handler to create an alert. We use the `span` element instead of the `a` element to prevent the page from navigating. Proper ARIA attributes are added to the `span` element to make it accessible.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link onPress={() => alert("Link clicked")} elementType="span">\n Click me to see an alert\n</Link>;\n```\n\nThe `Link` component is rendered as an `<a>` element, so it\u2019s accessible by default. However, you can also use the `onPress` handler to handle client-side actions.\n\nSome of the accessibility features of the `Link` component are that it supports:\n\n* Mouse, keyboard, and touch interactions\n* Navigation links using `<a>` elements or client-side actions using custom handlers\n* The disabled state\n\n| Key | Function |\n| ----- | ------------------- |\n| Enter | Activates the link. |\n\n```\n```',props:`interface LinkProps {
 /**
  * Whether the link is disabled.
  */
@@ -10728,7 +11265,7 @@ role?: AriaRole
     onPress={() => {
       alert("Client side action");
     }}
-    elementType="span">Client side Link</Link>;`}],implementation:""},similarTo:[],figmaUrl:null},ListBox:{id:"core-collections-listbox",breadcrumb:"Core/Collections/ListBox",importStatement:'import { Box, DragAndDropListBoxExample, DynamicListBoxExample, ListBox, Text } from "@baseline-ui/core";',description:"",documentation:"",props:`interface ListBoxProps {
+    elementType="span">Client side Link</Link>;`}],implementation:""},similarTo:[],figmaUrl:null},ListBox:{id:"core-collections-listbox",breadcrumb:"Core/Collections/ListBox",importStatement:'import { Box, DragAndDropListBoxExample, DynamicListBoxExample, ListBox, Text } from "@baseline-ui/core";',description:"`ListBox` presents a scrollable list of options that users can select with a pointer or keyboard. Use it when selection should happen inline rather than inside a dropdown, such as in a sidebar or settings panel.",documentation:"`ListBox` presents a scrollable list of options that users can select with a pointer or keyboard. Use it when selection should happen inline rather than inside a dropdown, such as in a sidebar or settings panel.",props:`interface ListBoxProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -11377,7 +11914,7 @@ export const DynamicListBoxExample: React.FC<
  ) : null}
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"This component is used to render markdown content as HTML. It supports [GFM](https://github.github.com/gfm/).",documentation:`This component is used to render markdown content as HTML. It supports [GFM](https://github.github.com/gfm/).
+};`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"`Markdown` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.",documentation:`\`Markdown\` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.
 
 \`\`\`jsx
 import { Markdown } from "@storybook/addon-docs/blocks";
@@ -11491,7 +12028,7 @@ console.log(greet('Markdown Maverick'));
 | Row 1, Col 1    | Row 1, Col 2    | Row 1, Col 3    |
 | Row 2, Col 1    | Row 2, Col 2    | Row 2, Col 3    |
 | Row 3, Col 1    | Row 3, Col 2    | Row 3, Col 3    |
-\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n    <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"The `Menu` component is an interactive widget designed for navigating between different parts of an application or website. This component is built with accessibility standards in mind, complying with the Web Content Accessibility Guidelines (WCAG).",documentation:`The \`Menu\` component is an interactive widget designed for navigating between different parts of an application or website. This component is built with accessibility standards in mind, complying with the Web Content Accessibility Guidelines (WCAG).
+\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n    <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
 
 1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
 2. Selection options: The component can be configured to allow single, multiple, or no selection.
@@ -11713,7 +12250,7 @@ id: string
  * The default message to use if the message id is not found.
  */
 defaultMessage?: string
-}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="addSignature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"The `Modal` component is used to display content in a layer above the rest of the page.",documentation:`The \`Modal\` component is used to display content in a layer above the rest of the page.
+}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="addSignature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
 
 * The content outside the modal is hidden from screen readers.
 * The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.
@@ -12260,7 +12797,7 @@ value: number
             <strong>Formatted number</strong>: <NumberFormat value={0.35} style="percent" minimumFractionDigits={2} />
         </div>
     );
-};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"The `NumberInput` component is used to capture numerical input from a user. It is built on top of the native `input` element.",documentation:'The `NumberInput` component is used to capture numerical input from a user. It is built on top of the native `input` element.\n\n* Formatting and parsing of internationalised numbers, such as decimals, percentages, currency values, and units\n* Automatically finds the numbering system being used and can parse numbers that are not in the default numbering system for the locale.\n* Checks the user\'s keystrokes as they type to make sure they are valid numbers according to the locale and numbering system.\n* Chooses an appropriate software keyboard for mobile based on the current platform and allowed values.\n* Supports rounding to a configurable number of fraction digits. Supports clamping the value between a configurable minimum and maximum and snapping to a step value.\n* Allows you to keep going up or down by pressing and holding the stepper buttons. - Allows you to go up or down by using the scroll wheel.\n* Exposed to assistive technology as a text field with a custom, locally-tailored role description using ARIA\n* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern. Gets around bugs in VoiceOver with the spinbutton role.\n* Uses an ARIA live region to make sure that value changes are announced.\n* Supports description and error message help text linked to the input via ARIA.\n\n```jsx\nimport { NumberInput } from "../../utils";\n\n<NumberInput placeholder="Placeholder" />;\n```\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n```jsx\n<NumberInput placeholder="Placeholder" variant="primary" />\n<NumberInput placeholder="Placeholder" variant="ghost" />\n```\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n```jsx\n<NumberInput placeholder="Placeholder" isReadOnly value={5} />\n```\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n```jsx\n<NumberInput placeholder="Placeholder" isDisabled value={5} />\n```\n\nThe `NumberInput` component supports the `value` prop to control the value of the input. The `onChange` event is triggered when the value changes. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.\n\n```jsx\n<NumberInput placeholder="Placeholder" value={5} onChange={console.log} />\n```\n\nTo clamp the value between a minimum and maximum value, the `minValue` and `maxValue` props are supported by the `NumberInput` component. If you provide either `maxValue` or `minValue` instead of both, you can make ranges open ended.\n\nIt is a good idea to give NumberField the valid range in advance so that it can optimise the experience. For example, on iOS, you can use a numeric keyboard instead of a full text keyboard (which requires you to enter a minus sign) when the minimum value is greater than or equal to zero.\n\n```jsx\n<NumberInput placeholder="Placeholder" minValue={0} maxValue={10} />\n```\n\nYou can use the `step` prop to snap the value to certain steps. If a `minValue` is set, the steps are worked out starting from the lowest value. For example, if `minValue` is set to 2 and step is set to 3, the valid step values are 2, 5, 8, 11, etc. If no `minValue` is set, the steps are calculated from zero in both directions if there is no `minValue`. To put it another way, so that the values are evenly divided by the step. If no step is set, any decimal value can be typed, but incrementing or decrementing the value changes it to a whole number.\n\nIf the user types a value that is between two steps and then blurs the input, the value will be snapped to the nearest step. When you increase or decrease a value, it jumps to the next step that is either higher or lower. When starting with an empty field and going up or down, the value starts at the `minValue` or `maxValue`, if they are set. If not, the number starts at 0.\n\n```jsx\n<NumberInput\n placeholder="Placeholder"\n step={3}\n defaultValue={2}\n minValue={2}\n formatOptions={{ style: "decimal", maximumFractionDigits: 1 }}\n/>\n```\n\nThe `NumberInput` component supports the `errorMessage` prop to display an error message below the input. The `isInvalid` prop can be used to indicate that the input is invalid. If the `isInvalid` prop is set to `true`, the input will be styled with an error state.\n\n```jsx\n<NumberInput placeholder="Placeholder" errorMessage="Error Message" isInvalid />\n```\n\n`NumberInput` automatically takes care of many parts of internationalisation, such as formatting and parsing numbers based on the current locale and numbering system. Also, the "increment" and "decrement" buttons have ARIA labels that are localised for each language.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-invalid] | Whether the component is invalid. |\n\n| Key | Function |\n| --------------- | ------------------------------------- |\n| <kbd>Up</kbd> | Increment the value by the step value |\n| <kbd>Down</kbd> | Decrement the value by the step value |\n\n```\n```',props:`interface NumberInputProps {
+};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.",documentation:'`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.\n\n* Formatting and parsing of internationalised numbers, such as decimals, percentages, currency values, and units\n* Automatically finds the numbering system being used and can parse numbers that are not in the default numbering system for the locale.\n* Checks the user\'s keystrokes as they type to make sure they are valid numbers according to the locale and numbering system.\n* Chooses an appropriate software keyboard for mobile based on the current platform and allowed values.\n* Supports rounding to a configurable number of fraction digits. Supports clamping the value between a configurable minimum and maximum and snapping to a step value.\n* Allows you to keep going up or down by pressing and holding the stepper buttons. - Allows you to go up or down by using the scroll wheel.\n* Exposed to assistive technology as a text field with a custom, locally-tailored role description using ARIA\n* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern. Gets around bugs in VoiceOver with the spinbutton role.\n* Uses an ARIA live region to make sure that value changes are announced.\n* Supports description and error message help text linked to the input via ARIA.\n\n```jsx\nimport { NumberInput } from "../../utils";\n\n<NumberInput placeholder="Placeholder" />;\n```\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n```jsx\n<NumberInput placeholder="Placeholder" variant="primary" />\n<NumberInput placeholder="Placeholder" variant="ghost" />\n```\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n```jsx\n<NumberInput placeholder="Placeholder" isReadOnly value={5} />\n```\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n```jsx\n<NumberInput placeholder="Placeholder" isDisabled value={5} />\n```\n\nThe `NumberInput` component supports the `value` prop to control the value of the input. The `onChange` event is triggered when the value changes. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.\n\n```jsx\n<NumberInput placeholder="Placeholder" value={5} onChange={console.log} />\n```\n\nTo clamp the value between a minimum and maximum value, the `minValue` and `maxValue` props are supported by the `NumberInput` component. If you provide either `maxValue` or `minValue` instead of both, you can make ranges open ended.\n\nIt is a good idea to give NumberField the valid range in advance so that it can optimise the experience. For example, on iOS, you can use a numeric keyboard instead of a full text keyboard (which requires you to enter a minus sign) when the minimum value is greater than or equal to zero.\n\n```jsx\n<NumberInput placeholder="Placeholder" minValue={0} maxValue={10} />\n```\n\nYou can use the `step` prop to snap the value to certain steps. If a `minValue` is set, the steps are worked out starting from the lowest value. For example, if `minValue` is set to 2 and step is set to 3, the valid step values are 2, 5, 8, 11, etc. If no `minValue` is set, the steps are calculated from zero in both directions if there is no `minValue`. To put it another way, so that the values are evenly divided by the step. If no step is set, any decimal value can be typed, but incrementing or decrementing the value changes it to a whole number.\n\nIf the user types a value that is between two steps and then blurs the input, the value will be snapped to the nearest step. When you increase or decrease a value, it jumps to the next step that is either higher or lower. When starting with an empty field and going up or down, the value starts at the `minValue` or `maxValue`, if they are set. If not, the number starts at 0.\n\n```jsx\n<NumberInput\n placeholder="Placeholder"\n step={3}\n defaultValue={2}\n minValue={2}\n formatOptions={{ style: "decimal", maximumFractionDigits: 1 }}\n/>\n```\n\nThe `NumberInput` component supports the `errorMessage` prop to display an error message below the input. The `isInvalid` prop can be used to indicate that the input is invalid. If the `isInvalid` prop is set to `true`, the input will be styled with an error state.\n\n```jsx\n<NumberInput placeholder="Placeholder" errorMessage="Error Message" isInvalid />\n```\n\n`NumberInput` automatically takes care of many parts of internationalisation, such as formatting and parsing numbers based on the current locale and numbering system. Also, the "increment" and "decrement" buttons have ARIA labels that are localised for each language.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n| \\[data-invalid] | Whether the component is invalid. |\n\n| Key | Function |\n| --------------- | ------------------------------------- |\n| <kbd>Up</kbd> | Increment the value by the step value |\n| <kbd>Down</kbd> | Decrement the value by the step value |\n\n```\n```',props:`interface NumberInputProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -12588,9 +13125,7 @@ errorMessage?: string
     label="Label"
     labelPosition="start"
     variant="ghost"
-    placeholder="Placeholder" />;`}],implementation:""},similarTo:[],figmaUrl:null},Pagination:{id:"core-forms-pagination",breadcrumb:"Core/Forms/Pagination",importStatement:'import { I18nProvider, Pagination, VariantViewer } from "@baseline-ui/core";',description:"The `Pagination` component is used to navigate through a series of pages. It is\nbuilt on top of a number input component. It supports keyboard navigation and\nincrement/decrement by clicking the up/down arrows.",documentation:`The \`Pagination\` component is used to navigate through a series of pages. It is
-built on top of a number input component. It supports keyboard navigation and
-increment/decrement by clicking the up/down arrows.
+    placeholder="Placeholder" />;`}],implementation:""},similarTo:[],figmaUrl:null},Pagination:{id:"core-forms-pagination",breadcrumb:"Core/Forms/Pagination",importStatement:'import { I18nProvider, Pagination, VariantViewer } from "@baseline-ui/core";',description:"`Pagination` lets users move through a numbered sequence of pages by typing a page number or stepping with arrow controls. Use it to navigate paginated content such as document pages, search results, or table rows.",documentation:`\`Pagination\` lets users move through a numbered sequence of pages by typing a page number or stepping with arrow controls. Use it to navigate paginated content such as document pages, search results, or table rows.
 
 * Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units
 * Automatically detects the numbering system used and supports parsing numbers not in the default numbering system for the locale
@@ -12815,7 +13350,7 @@ defaultValue?: any
     PanelNestedExample,
     PanelPersistentExample,
     PanelVerticalExample,
-} from "@baseline-ui/core";`,description:"`PanelGroup`, `Panel`, and `PanelResizeHandle` provide components for building resizable horizontal or vertical layouts, such as a resizable sidebar.",documentation:`\`PanelGroup\`, \`Panel\`, and \`PanelResizeHandle\` provide components for building resizable horizontal or vertical layouts, such as a resizable sidebar.
+} from "@baseline-ui/core";`,description:"`PanelGroup`, `Panel`, and `PanelResizeHandle` compose into resizable horizontal or vertical split layouts with draggable dividers. Use it when users need to adjust the proportions of adjacent regions, such as a sidebar next to a main content area.",documentation:`\`PanelGroup\`, \`Panel\`, and \`PanelResizeHandle\` compose into resizable horizontal or vertical split layouts with draggable dividers. Use it when users need to adjust the proportions of adjacent regions, such as a sidebar next to a main content area.
 
 * Horizontal and vertical resizable layouts
 * Supports nested layouts (horizontal inside vertical and vice versa)
@@ -13479,7 +14014,7 @@ export const PanelMaxSizeExample: FC<Omit<PanelGroupProps, "children">> = (
  </PanelGroup>
  </div>
  );
-};`},similarTo:[],figmaUrl:null},PointPicker:{id:"core-content-pointpicker",breadcrumb:"Core/Content/PointPicker",importStatement:'import { Box, PointPicker, RichContentExample } from "@baseline-ui/core";',description:"A component that allows users to pick precise points on a surface with a magnifier for enhanced accuracy. The PointPicker consists of three main parts: the main container, content area, and display area with optional magnifier.",documentation:`A component that allows users to pick precise points on a surface with a magnifier for enhanced accuracy. The PointPicker consists of three main parts: the main container, content area, and display area with optional magnifier.
+};`},similarTo:[],figmaUrl:null},PointPicker:{id:"core-content-pointpicker",breadcrumb:"Core/Content/PointPicker",importStatement:'import { Box, PointPicker, RichContentExample } from "@baseline-ui/core";',description:"`PointPicker` lets users select an exact coordinate on a 2D surface with an optional magnifier for sub-pixel precision. Use it when picking a point on an image, canvas, or diagram where accuracy matters, such as choosing a color, anchor, or hotspot.",documentation:`\`PointPicker\` lets users select an exact coordinate on a 2D surface with an optional magnifier for sub-pixel precision. Use it when picking a point on an image, canvas, or diagram where accuracy matters, such as choosing a color, anchor, or hotspot.
 
 \`\`\`tsx
 import {
@@ -14159,7 +14694,7 @@ export const TrailingElementExample = () => {
     PopoverWithScrollableViewportExample,
     Tooltip,
     VariantViewer,
-} from "@baseline-ui/core";`,description:"The `Popover` component is a versatile component that can be used to display additional content or actions in a floating overlay.",documentation:`The \`Popover\` component is a versatile component that can be used to display additional content or actions in a floating overlay.
+} from "@baseline-ui/core";`,description:"`Popover` is a floating overlay anchored to a trigger element that displays contextual content or actions. Use it for non-blocking surfaces like menus, form fields, or detail views that should dismiss on outside click or Escape.",documentation:`\`Popover\` is a floating overlay anchored to a trigger element that displays contextual content or actions. Use it for non-blocking surfaces like menus, form fields, or detail views that should dismiss on outside click or Escape.
 
 * The component is accessible via keyboard. Users can open, close, and navigate through the popover using keyboard keys such as \`Tab\`, \`Enter\`, \`Escape\`, and arrow keys.
 * When the popover is opened, the focus is moved to the content within the popover. When it is closed, the focus returns to the trigger element.
@@ -15455,7 +15990,7 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"The `Preview` component is used to display a preview of a SVG, image or text. You can add action buttons to the preview to allow the user to interact with the preview.",documentation:`The \`Preview\` component is used to display a preview of a SVG, image or text. You can add action buttons to the preview to allow the user to interact with the preview.
+}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:`\`Preview\` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.
 
 * Supports SVG, images and text
 * Supports custom action buttons to interact with the preview
@@ -15675,7 +16210,7 @@ accent?: "theme" | "positive"
     deleteAriaLabel="Delete"
     addAriaLabel="Add"
     isDisabled
-    svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"A progress bar is a visual indication of an extended computer process such as a file download, file transfer, or an application installation. In our implementation, the progress bar is a horizontal bar that fills from left to right as the process progresses.",documentation:'A progress bar is a visual indication of an extended computer process such as a file download, file transfer, or an application installation. In our implementation, the progress bar is a horizontal bar that fills from left to right as the process progresses.\n\n* The component is exposed to the assistive technology as a progress bar.\n* It includes labels that improve accessibility and provide a visual indication of the progress.\n* It supports international number formatting of numbers.\n\n```jsx\nimport { ProgressBar } from "../../utils";\n\n<ProgressBar aria-label="Progress" value={50} />;\n```\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n```jsx\n<ProgressBar label="Label" value={50} />\n<ProgressBar label="Label" value={50} variant="success" />\n<ProgressBar label="Label" value={50} variant="error" />\n```\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\nYou can customize the number formatter by passing the `formatOptions` prop. In the example below, we are formatting the number as currency (USD).\n\nYou can customize the value label by passing the `valueLabel` prop. In the example below, we are using a custom value label that displays the value as "50 out of 100".',props:`interface ProgressBarProps {
+    svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.",documentation:'`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.\n\n* The component is exposed to the assistive technology as a progress bar.\n* It includes labels that improve accessibility and provide a visual indication of the progress.\n* It supports international number formatting of numbers.\n\n```jsx\nimport { ProgressBar } from "../../utils";\n\n<ProgressBar aria-label="Progress" value={50} />;\n```\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n```jsx\n<ProgressBar label="Label" value={50} />\n<ProgressBar label="Label" value={50} variant="success" />\n<ProgressBar label="Label" value={50} variant="error" />\n```\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\nYou can customize the number formatter by passing the `formatOptions` prop. In the example below, we are formatting the number as currency (USD).\n\nYou can customize the value label by passing the `valueLabel` prop. In the example below, we are using a custom value label that displays the value as "50 out of 100".',props:`interface ProgressBarProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -15797,7 +16332,7 @@ errorMessage?: string
     label="Label"
     value={50}
     formatOptions={{ style: "currency", currency: "USD" }}
-    showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:""},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"The `ProgressSpinner` component is used to indicate that an operation is in progress.",documentation:'The `ProgressSpinner` component is used to indicate that an operation is in progress.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />;\n```\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />\n<ProgressSpinner aria-label={"Label"} variant={"inactive"} />\n<ProgressSpinner aria-label={"Label"} variant={"success"} />\n<ProgressSpinner aria-label={"Label"} variant={"error"} />\n```\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} size={"sm"} />\n<ProgressSpinner aria-label={"Label"} size={"md"} />\n```\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} label={"Label"} />;\n<ProgressSpinner aria-label={"Label"} label={"Label"} size={"sm"} />;\n```',props:`interface ProgressSpinnerProps {
+    showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:""},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can't report a meaningful percentage of completion.",documentation:'`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can\'t report a meaningful percentage of completion.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />;\n```\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />\n<ProgressSpinner aria-label={"Label"} variant={"inactive"} />\n<ProgressSpinner aria-label={"Label"} variant={"success"} />\n<ProgressSpinner aria-label={"Label"} variant={"error"} />\n```\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} size={"sm"} />\n<ProgressSpinner aria-label={"Label"} size={"md"} />\n```\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} label={"Label"} />;\n<ProgressSpinner aria-label={"Label"} label={"Label"} size={"sm"} />;\n```',props:`interface ProgressSpinnerProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -15873,7 +16408,7 @@ variant?: "active" | "inactive" | "success" | "error"
       ],
     }}
   />
-);`},{id:"core-status-progressspinner--success",name:"Success",snippet:'const Success = () => <ProgressSpinner label="Label" variant="success" />;'},{id:"core-status-progressspinner--error",name:"Error",snippet:'const Error = () => <ProgressSpinner label="Label" variant="error" />;'},{id:"core-status-progressspinner--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <ProgressSpinner aria-label="Loading" />;'}],implementation:""},similarTo:[],figmaUrl:null},RadioGroup:{id:"core-forms-radiogroup",breadcrumb:"Core/Forms/RadioGroup",importStatement:'import { RadioGroup } from "@baseline-ui/core";',description:'The `RadioGroup` component is used to select a single option from a list of mutually exclusive options. It is a wrapper around the native `input[type="radio"]` element.',documentation:`The \`RadioGroup\` component is used to select a single option from a list of mutually exclusive options. It is a wrapper around the native \`input[type="radio"]\` element.
+);`},{id:"core-status-progressspinner--success",name:"Success",snippet:'const Success = () => <ProgressSpinner label="Label" variant="success" />;'},{id:"core-status-progressspinner--error",name:"Error",snippet:'const Error = () => <ProgressSpinner label="Label" variant="error" />;'},{id:"core-status-progressspinner--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <ProgressSpinner aria-label="Loading" />;'}],implementation:""},similarTo:[],figmaUrl:null},RadioGroup:{id:"core-forms-radiogroup",breadcrumb:"Core/Forms/RadioGroup",importStatement:'import { RadioGroup } from "@baseline-ui/core";',description:"`RadioGroup` lets users pick exactly one value from a small set of visible, mutually exclusive options. Use it when all choices should remain in view; for longer lists prefer a Select.",documentation:`\`RadioGroup\` lets users pick exactly one value from a small set of visible, mutually exclusive options. Use it when all choices should remain in view; for longer lists prefer a Select.
 
 * Accessible \u2014 exposes \`role="radiogroup"\` and \`role="radio"\` with full ARIA attribute support (\`aria-checked\`, \`aria-disabled\`, \`aria-labelledby\`, \`aria-orientation\`).
 * Keyboard navigation \u2014 arrow keys move focus and selection between options; supports both vertical (default) and horizontal orientations.
@@ -16128,7 +16663,7 @@ export const CustomRenderItem: React.FC<Omit<RadioGroupProps, "items">> = (
  return (
  <RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />
  );
-};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"The `Reaction` component is used to react to a post or comment. It is basically a checkbox input that can be used to add or remove a reaction.",documentation:`The \`Reaction\` component is used to react to a post or comment. It is basically a checkbox input that can be used to add or remove a reaction.
+};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"`Reaction` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.",documentation:`\`Reaction\` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.
 
 * It is exposed as a input checkbox via ARIA
 * It has mouse, keyboard, and touch support
@@ -16255,7 +16790,7 @@ icon?: React.FC<IconProps>
     ScrollControlButton,
     ScrollControlButtonExample,
     ScrollControlButtonReversedExample,
-} from "@baseline-ui/core";`,description:"The `ScrollControlButton` component is used to create a button that can be used to scroll a container.",documentation:`The \`ScrollControlButton\` component is used to create a button that can be used to scroll a container.
+} from "@baseline-ui/core";`,description:"`ScrollControlButton` is a floating button that jumps a scrollable container to its bottom (or top, when the container uses `flex-direction: column-reverse`). Use it for long, append-only content such as chat transcripts or activity feeds where users need a quick shortcut to the latest entries.",documentation:`\`ScrollControlButton\` is a floating button that jumps a scrollable container to its bottom (or top, when the container uses \`flex-direction: column-reverse\`). Use it for long, append-only content such as chat transcripts or activity feeds where users need a quick shortcut to the latest entries.
 
 * Can be used to scroll to the bottom or top of a container
 * Exposed to assistive technologies via aria attributes
@@ -16541,7 +17076,7 @@ export const ScrollControlButtonReversedExample: React.FC<
  </div>
  </>
  );
-};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a component that allows users to search for content.",documentation:'`SearchInput` is a component that allows users to search for content.\n\n* Built with a native `<input type="search">` element\n* Visual and ARIA labeling support\n* Custom clear button support with internationalized label for accessibility\n* Support for description and error message help text linked to the input via ARIA\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" variant="primary" />\n<SearchInput aria-label="Label" placeholder="Search" variant="ghost" />\n```\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" size="sm" />\n<SearchInput aria-label="Label" placeholder="Search" size="md" />\n<SearchInput aria-label="Label" placeholder="Search" size="lg" />\n```\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" isDisabled />;\n```\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc` | Clears the search query |',props:`interface SearchInputProps {
+};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.",documentation:'`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.\n\n* Built with a native `<input type="search">` element\n* Visual and ARIA labeling support\n* Custom clear button support with internationalized label for accessibility\n* Support for description and error message help text linked to the input via ARIA\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" variant="primary" />\n<SearchInput aria-label="Label" placeholder="Search" variant="ghost" />\n```\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" size="sm" />\n<SearchInput aria-label="Label" placeholder="Search" size="md" />\n<SearchInput aria-label="Label" placeholder="Search" size="lg" />\n```\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" isDisabled />;\n```\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc` | Clears the search query |',props:`interface SearchInputProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -16619,7 +17154,7 @@ isClearFocusable?: boolean
     placeholder="Search"
     aria-label="Search"
     isClearFocusable
-    defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select-multiselect",breadcrumb:"Core/Forms/Select",importStatement:'import { Select } from "@baseline-ui/core";',description:"The `Select` component is used to select one or more options from a list of options. It supports both single and multiple selection modes. It is a wrapper around the native `input` element.",documentation:`The \`Select\` component is used to select one or more options from a list of options. It supports both single and multiple selection modes. It is a wrapper around the native \`input\` element.
+    defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select-multiselect",breadcrumb:"Core/Forms/Select",importStatement:'import { Select } from "@baseline-ui/core";',description:"`Select` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.",documentation:`\`Select\` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.
 
 * Exposed to assistive technology as a button with a listbox popup using ARIA (combined with useListBox)
 * Support for selecting a single option or multiple options
@@ -17375,7 +17910,7 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
  </Autocomplete>
  </Virtualizer>
  );
-};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"A separator is a horizontal or vertical line that separates content. It can be used to divide content into sections or to create a visual break between two elements.",documentation:`A separator is a horizontal or vertical line that separates content. It can be used to divide content into sections or to create a visual break between two elements.
+};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"`Separator` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.",documentation:`\`Separator\` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.
 
 \`\`\`jsx
 import { Separator } from "../../utils";
@@ -17452,7 +17987,31 @@ variant?: "primary" | "secondary"
  */
 UNSAFE_omitRole?: boolean
 }`,stories:{usage:[{id:"core-content-separator--basic",name:"Basic",snippet:"const Basic = () => <Separator />;"},{id:"core-content-separator--vertical",name:"Vertical",snippet:'const Vertical = () => <Separator orientation="vertical" />;'},{id:"core-content-separator--secondary",name:"Secondary",snippet:'const Secondary = () => <Separator variant="secondary" />;'},{id:"core-content-separator--secondary-vertical",name:"Secondary Vertical",snippet:'const SecondaryVertical = () => <Separator orientation="vertical" variant="secondary" />;'}],implementation:""},similarTo:[],figmaUrl:null},Skeleton:{id:"core-feedback-skeleton",breadcrumb:"Core/Feedback/Skeleton",importStatement:`import { Box, Separator, Skeleton } from "@baseline-ui/core";
-import { CaretLeftIcon, CaretRightIcon } from "@baseline-ui/icons/16";`,description:"A skeleton is a placeholder element that indicates content is loading. It renders an animated block with a neutral background color. Consumers control the shape and dimensions via `className` or `style`.",documentation:'A skeleton is a placeholder element that indicates content is loading. It renders an animated block with a neutral background color. Consumers control the shape and dimensions via `className` or `style`.\n\nThe pulse animation automatically respects `prefers-reduced-motion: reduce`.\n\n```jsx\nimport { Skeleton } from "@baseline-ui/core";\n\n<Skeleton style={{ width: 200, height: 16, borderRadius: 9999 }} />;\n```\n\nUse `clipPath` or `borderRadius` to create any shape \u2014 stars, hearts, hexagons, chat bubbles, and more.\n\nSkeleton elements are purely decorative. When using them as loading placeholders, add `aria-busy="true"` to the container that will eventually hold the real content:\n\n```jsx\n<div aria-busy={isLoading}>\n {isLoading ? (\n <Skeleton style={{ width: "100%", height: 200, borderRadius: 8 }} />\n ) : (\n <RealContent />\n )}\n</div>\n```\n\n| Selector | Description |\n| ---------------------- | --------------------------------- |\n| `.BaselineUI-Skeleton` | The root element of the skeleton. |',props:`interface SkeletonProps {
+import { CaretLeftIcon, CaretRightIcon } from "@baseline-ui/icons/16";`,description:"`Skeleton` is an animated placeholder block that stands in for content while it loads. Use it to preserve layout and signal progress in place of text, images, or other UI during data fetching.",documentation:`\`Skeleton\` is an animated placeholder block that stands in for content while it loads. Use it to preserve layout and signal progress in place of text, images, or other UI during data fetching.
+
+\`\`\`jsx
+import { Skeleton } from "@baseline-ui/core";
+
+<Skeleton style={{ width: 200, height: 16, borderRadius: 9999 }} />;
+\`\`\`
+
+Use \`clipPath\` or \`borderRadius\` to create any shape \u2014 stars, hearts, hexagons, chat bubbles, and more.
+
+Skeleton elements are purely decorative. When using them as loading placeholders, add \`aria-busy="true"\` to the container that will eventually hold the real content:
+
+\`\`\`jsx
+<div aria-busy={isLoading}>
+ {isLoading ? (
+ <Skeleton style={{ width: "100%", height: 200, borderRadius: 8 }} />
+ ) : (
+ <RealContent />
+ )}
+</div>
+\`\`\`
+
+| Selector | Description |
+| ---------------------- | --------------------------------- |
+| \`.BaselineUI-Skeleton\` | The root element of the skeleton. |`,props:`interface SkeletonProps {
 /**
  * The className applied to the root element of the component.
  */
@@ -17631,7 +18190,7 @@ style?: React.CSSProperties
       </Box>
     </Box>
   </Box>
-);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"A Slider is an input that allows users to quickly select a value from a range of values.",documentation:'A Slider is an input that allows users to quickly select a value from a range of values.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
+);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.",documentation:'`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -17702,7 +18261,7 @@ numberInputStyle?: NumberInputProps["style"]
     numberFormatOptions={{
       style: "percent",
     }} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"}],implementation:""},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
-import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"The `StatusCard` component is used to display status information in a card format. It provides visual feedback about the state of a process, system, or item with an icon, title, and description. The component supports multiple variants to represent different status types and can optionally display a trailing element.",documentation:`The \`StatusCard\` component is used to display status information in a card format. It provides visual feedback about the state of a process, system, or item with an icon, title, and description. The component supports multiple variants to represent different status types and can optionally display a trailing element.
+import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.",documentation:`\`StatusCard\` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.
 
 * Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`denied\`, and \`success\`
 * Tinted variants available for a lighter, more subtle appearance
@@ -18120,7 +18679,422 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
  )}
  />
  );
-};`},similarTo:[],figmaUrl:null},Switch:{id:"core-forms-switch",breadcrumb:"Core/Forms/Switch",importStatement:'import { Switch } from "@baseline-ui/core";',description:"`Switch` is a component that allows the user to switch between two states. It is a stylized version of the native `input[type=checkbox]` element. It is used to represent a boolean value, and is typically used in forms and tables.",documentation:`\`Switch\` is a component that allows the user to switch between two states. It is a stylized version of the native \`input[type=checkbox]\` element. It is used to represent a boolean value, and is typically used in forms and tables.
+};`},similarTo:[],figmaUrl:null},Stepper:{id:"core-navigation-stepper",breadcrumb:"Core/Navigation/Stepper",importStatement:'import { Box, CheckoutWizard, Stepper, Text } from "@baseline-ui/core";',description:"The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.",documentation:'The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.\n\n* Sequential progress model: only completed steps and the next-uncompleted step are selectable.\n* Active step is announced to assistive technology via `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label for screen readers.\n* Each selectable step is independently tabbable \u2014 no roving tabindex.\n* Controlled and uncontrolled APIs for both the selected step and the completion frontier.\n* Two layout variants (`condensed`, `expanded`) and two sizes (`sm`, `md`).\n* Supports indicator-only steps (omit `title`) and disabling individual steps or the whole stepper.\n\nYou can import the `Stepper` component like so:\n\n```jsx\nimport { Stepper } from "@baseline-ui/core";\n\nconst items = [\n { key: "cart", title: "Cart", description: "Review items" },\n { key: "shipping", title: "Shipping", description: "Enter address" },\n { key: "payment", title: "Payment", description: "Pay securely" },\n];\n\nexport default function Checkout() {\n return (\n <Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n />\n );\n}\n```\n\nIf you need parallel views without order or completion semantics, use\n[`Tabs`](?path=/docs/core-tabs--docs). For non-discrete or determinate progress,\nuse [`ProgressBar`](?path=/docs/core-progressbar--docs).\n\nThe `Stepper` supports two variants: `condensed` and `expanded`. The\n`expanded` variant is the default.\n\n* `condensed` \u2014 indicator-only layout with a short connector. Compact and ideal for narrow contexts.\n* `expanded` \u2014 indicator with title and description; the connector grows to fill the available width between steps.\n\n```jsx\n<Stepper items={items} variant="expanded" aria-label="Checkout" />\n<Stepper items={items} variant="condensed" aria-label="Checkout" />\n```\n\nThe `Stepper` supports two sizes: `sm` (20px indicator) and `md` (24px\nindicator). The `md` size is the default.\n\n```jsx\n<Stepper items={items} size="sm" aria-label="Checkout" />\n<Stepper items={items} size="md" aria-label="Checkout" />\n```\n\nEach step renders in one of three statuses, derived from the current selection\nand the completion frontier:\n\n* **complete** \u2014 step appears before `lastCompletedStep` (inclusive); shown with a checkmark.\n* **active** \u2014 step matches `selectedStep`; highlighted indicator with `aria-current="step"`.\n* **incomplete** \u2014 step appears after the active step; numbered indicator with muted styling.\n\nDisable individual steps by setting `isDisabled` on the item. Disabled steps\ncannot be selected and are removed from the tab sequence.\n\n```jsx\n<Stepper\n items={[\n { key: "a", title: "A" },\n { key: "b", title: "B", isDisabled: true },\n { key: "c", title: "C" },\n ]}\n aria-label="Checkout"\n/>\n```\n\nPass `isDisabled` on the `Stepper` itself to disable every step at once \u2014 useful\nwhile a flow is loading or otherwise temporarily inert.\n\n```jsx\n<Stepper items={items} isDisabled aria-label="Checkout" />\n```\n\nTwo independent ways to hide step text:\n\n* Set `variant="condensed"` on the stepper \u2014 hides title and description for every step regardless of whether they were provided.\n* Omit `title` on individual items in the default `expanded` variant \u2014 those specific steps render as indicator-only while others keep their text.\n\n```jsx\n<Stepper\n items={[{ key: "cart" }, { key: "shipping" }, { key: "payment" }]}\n variant="condensed"\n aria-label="Checkout"\n/>\n```\n\nThe `Stepper` can be used uncontrolled by providing `defaultSelectedStep` and\n`defaultLastCompletedStep`.\n\n```jsx\n<Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n/>\n```\n\nFor full control, supply `selectedStep` and `lastCompletedStep` together with\nthe `onSelectionChange` and `onLastCompletedStepChange` callbacks.\n`onLastCompletedStepChange` receives `null` when the frontier resets to "no\nsteps completed yet".\n\n```jsx\nconst [selected, setSelected] = useState("cart");\nconst [lastCompleted, setLastCompleted] = useState(null);\n\n<Stepper\n items={items}\n selectedStep={selected}\n lastCompletedStep={lastCompleted ?? undefined}\n onSelectionChange={setSelected}\n onLastCompletedStepChange={setLastCompleted}\n aria-label="Checkout"\n/>;\n```\n\n* Always supply an `aria-label` that names the flow (e.g. `"Checkout"`). A localized fallback ("Progress") is used if omitted, but a flow-specific label is strongly preferred.\n* The active step is marked with `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label so screen reader users hear the progress state.\n* Only completed steps and the next-uncompleted step are selectable; future steps are exposed with `aria-disabled="true"`.\n* Per-item `aria-label` has two roles. When set **without** `description`, the step renders in indicator-only mode and the label becomes the accessible name. When set **with** `description`, the step renders normally and the label overrides `title` for assistive technology \u2014 use it to expose a longer or more descriptive name to screen readers without changing the visible text.\n\n| Selector | Description |\n| --------------------------------- | ----------------------------------------------------------- |\n| `[data-variant]` | Layout variant: `condensed` or `expanded`. |\n| `[data-size]` | Size of the indicator: `sm` or `md`. |\n| `[data-status]` | Step status: `complete`, `active`, or `incomplete`. |\n| `[data-disabled]` | Whether the step is disabled. |\n| `[data-hovered]` | Whether the step is currently hovered. |\n| `[data-focused]` | Whether the step is focused (mouse or keyboard). |\n| `[data-focus-visible]` | Whether the step is keyboard focused. |\n| `[aria-current="step"]` | The currently active step. |\n| `[aria-disabled="true"]` | The step is not selectable (future or explicitly disabled). |\n| `.BaselineUI-Stepper` | Root `<ol>` element. |\n| `.BaselineUI-Stepper-Item` | Each step `<li>`. |\n| `.BaselineUI-Stepper-StepLink` | Interactive step `<a>` element. |\n| `.BaselineUI-Stepper-Indicator` | Indicator circle (number or checkmark). |\n| `.BaselineUI-Stepper-Text` | Wrapper around title and description. |\n| `.BaselineUI-Stepper-Title` | Step title text. |\n| `.BaselineUI-Stepper-Description` | Step description text. |\n| `.BaselineUI-Stepper-Connector` | Connector line between steps. |\n\nEach selectable step is a regular focusable link \u2014 the Stepper does not use a\nroving tabindex, so steps are reached individually via `Tab`.\n\n| Key | Function |\n| ------- | ------------------------------------------- |\n| `Tab` | Moves focus to the next selectable step. |\n| `Enter` | Activates the focused step (if selectable). |',props:`interface StepperProps {
+/**
+ * The unique identifier for the block. This is used to identify the block in
+ * the DOM and in the block map. It is added as a data attribute
+ * \`data-block-id\` to the root element of the block if a DOM node is
+ * rendered.
+ */
+data-block-id?: string
+/**
+ * Represents a data block group. This is similar to \`data-block-id\` but it
+ * doesn't have to be unique just like \`class\`. This is used to group blocks
+ * together in the DOM and in the block map. It is added as a data attribute
+ * \`data-block-class\` to the root element of the block if a DOM node is
+ * rendered.
+ */
+data-block-class?: string
+/**
+ * The className applied to the root element of the component.
+ */
+className?: string
+/**
+ * The style applied to the root element of the component.
+ */
+style?: React.CSSProperties
+/**
+ * The steps to render.
+ */
+items: StepperItem[]
+/**
+ * Layout variant.
+ * 
+ * - \`condensed\` \u2014 indicator only, short connector between steps.
+ * - \`expanded\` \u2014 indicator with title and optional description, connector fills the gap.
+ * 
+ * @default "expanded"
+ */
+variant?: "condensed" | "expanded"
+/**
+ * Size of the indicator circle and accompanying text.
+ * 
+ * @default "md"
+ */
+size?: "sm" | "md"
+/**
+ * Currently selected step key (controlled).
+ */
+selectedStep?: Key
+/**
+ * Initially selected step key (uncontrolled).
+ */
+defaultSelectedStep?: Key
+/**
+ * Called when the selected step changes.
+ */
+onSelectionChange?: (key: Key) => void
+/**
+ * Last completed step \u2014 the progress frontier (controlled).
+ */
+lastCompletedStep?: Key
+/**
+ * Initial last completed step (uncontrolled).
+ */
+defaultLastCompletedStep?: Key
+/**
+ * Called when the last completed step changes.
+ */
+onLastCompletedStepChange?: (key: Key | null) => void
+/**
+ * Disable the whole stepper.
+ */
+isDisabled?: boolean
+/**
+ * Accessibility label for the stepper. Falls back to a localized
+ * "Progress" string if omitted; prefer supplying a flow-specific label
+ * (e.g. "Checkout").
+ */
+aria-label?: string
+}`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--condensed",name:"Condensed",snippet:`const Condensed = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    variant="condensed" />;`},{id:"core-navigation-stepper--size-small-expanded",name:"Size Small Expanded",snippet:`const SizeSmallExpanded = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    size="sm"
+    variant="expanded" />;`},{id:"core-navigation-stepper--size-small-condensed",name:"Size Small Condensed",snippet:`const SizeSmallCondensed = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    size="sm"
+    variant="condensed" />;`},{id:"core-navigation-stepper--all-states",name:"All States",snippet:`const AllStates = () => (
+  <Box display="flex" flexDirection="column" gap="3xl">
+    {(["sm", "md"] as const).map((size) =>
+      (["condensed", "expanded"] as const).map((variant) => (
+        <Box
+          key={\`\${size}-\${variant}\`}
+          display="flex"
+          flexDirection="column"
+          gap="md"
+        >
+          <Text type="label" size="sm" color="text.secondary">
+            size={size} \xB7 variant={variant}
+          </Text>
+          <Stepper
+            items={items}
+            size={size}
+            variant={variant}
+            defaultSelectedStep="shipping"
+            defaultLastCompletedStep="cart"
+            aria-label="Checkout"
+          />
+        </Box>
+      )),
+    )}
+  </Box>
+);`},{id:"core-navigation-stepper--with-disabled-step",name:"With Disabled Step",snippet:`const WithDisabledStep = () => <Stepper
+    items={[
+      { key: "a", title: "A", description: "First" },
+      {
+        key: "b",
+        title: "B",
+        description: "Second (disabled)",
+        isDisabled: true,
+      },
+      { key: "c", title: "C", description: "Third" },
+    ]}
+    aria-label="Checkout"
+    defaultSelectedStep="a"
+    defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
+    items={items.map((i) => ({ key: i.key }))}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    variant="condensed" />;`},{id:"core-navigation-stepper--is-disabled",name:"Is Disabled",snippet:`const IsDisabled = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    isDisabled />;`},{id:"core-navigation-stepper--expanded-without-descriptions",name:"Expanded Without Descriptions",snippet:`const ExpandedWithoutDescriptions = () => <Stepper
+    items={items.map(({ key, title }) => ({ key, title }))}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--long-title-and-description",name:"Long Title And Description",snippet:`const LongTitleAndDescription = () => <Stepper
+    items={[
+      {
+        key: "cart",
+        title: "Review your shopping cart and apply any promo codes",
+        description:
+          "Make sure quantities and shipping options are correct before continuing to the next step.",
+      },
+      {
+        key: "shipping",
+        title: "Confirm shipping address and delivery method",
+        description:
+          "We will use this address for delivery and any required customs documentation.",
+      },
+      {
+        key: "payment",
+        title: "Choose a payment method and complete checkout",
+        description:
+          "Your payment is processed securely; we never store full card details.",
+      },
+    ]}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--two-steps",name:"Two Steps",snippet:`const TwoSteps = () => <Stepper
+    items={[
+      { key: "first", title: "First", description: "Start here" },
+      { key: "second", title: "Second", description: "Finish here" },
+    ]}
+    aria-label="Checkout"
+    defaultSelectedStep="second"
+    defaultLastCompletedStep="first" />;`},{id:"core-navigation-stepper--controlled",name:"Controlled",snippet:"const Controlled = () => <CheckoutWizard />;"},{id:"core-navigation-stepper--all-complete",name:"All Complete",snippet:`const AllComplete = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="payment"
+    defaultLastCompletedStep="payment" />;`},{id:"core-navigation-stepper--frontier-ahead-of-selection",name:"Frontier Ahead Of Selection",snippet:`const FrontierAheadOfSelection = () => <Stepper
+    items={items}
+    aria-label="Checkout"
+    defaultSelectedStep="cart"
+    defaultLastCompletedStep="shipping" />;`},{id:"core-navigation-stepper--single-item",name:"Single Item",snippet:`const SingleItem = () => <Stepper
+    items={[{ key: "only", title: "Only step", description: "Just one step" }]}
+    aria-label="Checkout"
+    defaultSelectedStep="only"
+    defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only-expanded",name:"Indicator Only Expanded",snippet:`const IndicatorOnlyExpanded = () => <Stepper
+    items={items.map((i) => ({ key: i.key }))}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    variant="expanded" />;`},{id:"core-navigation-stepper--mixed-indicator-and-titled-items",name:"Mixed Indicator And Titled Items",snippet:`const MixedIndicatorAndTitledItems = () => <Stepper
+    items={[
+      { key: "cart", title: "Cart", description: "Review items" },
+      { key: "shipping", "aria-label": "Shipping address" },
+      { key: "payment", title: "Payment", description: "Pay securely" },
+    ]}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    variant="expanded" />;`},{id:"core-navigation-stepper--per-item-aria-label-overrides-title",name:"Per Item Aria Label Overrides Title",snippet:`const PerItemAriaLabelOverridesTitle = () => <Stepper
+    items={[
+      {
+        key: "cart",
+        title: "Cart",
+        description: "Review items",
+        "aria-label": "Cart \u2014 3 items, total $42",
+      },
+      {
+        key: "shipping",
+        title: "Shipping",
+        description: "Enter address",
+        "aria-label": "Shipping \u2014 express delivery",
+      },
+      {
+        key: "payment",
+        title: "Payment",
+        description: "Pay securely",
+        "aria-label": "Payment \u2014 Visa ending in 1234",
+      },
+    ]}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart"
+    variant="expanded" />;`}],implementation:`import React from "react";
+
+import { ActionButton } from "../../ActionButton";
+import { Box } from "../../Box";
+import { Code } from "../../Code";
+import { Text } from "../../Text";
+import { Stepper } from "../Stepper";
+
+import type { StepperItem } from "../Stepper.types";
+import type { Key } from "react-aria";
+
+export const checkoutItems: StepperItem[] = [
+ { key: "cart", title: "Cart", description: "Review items" },
+ { key: "shipping", title: "Shipping", description: "Enter address" },
+ { key: "payment", title: "Payment", description: "Pay securely" },
+];
+
+const defaultItems = checkoutItems;
+
+export interface ControlledStepperProps {
+ items?: StepperItem[];
+ initialSelected?: Key;
+ initialLastCompleted?: Key | null;
+ onSelectionChange?: (key: Key) => void;
+ onLastCompletedStepChange?: (key: Key | null) => void;
+}
+
+export function ControlledStepper({
+ items = defaultItems,
+ initialSelected = "shipping",
+ initialLastCompleted = "cart",
+ onSelectionChange,
+ onLastCompletedStepChange,
+}: ControlledStepperProps) {
+ const [selected, setSelected] = React.useState<Key>(initialSelected);
+ const [lastCompleted, setLastCompleted] = React.useState<Key | null>(
+ initialLastCompleted,
+ );
+
+ const advance = () => {
+ const idx = items.findIndex((i) => i.key === selected);
+ const next = items[idx + 1];
+ if (next) setSelected(next.key);
+ };
+
+ return (
+ <div>
+ <Stepper
+ items={items}
+ selectedStep={selected}
+ lastCompletedStep={lastCompleted ?? undefined}
+ onSelectionChange={(key) => {
+ setSelected(key);
+ onSelectionChange?.(key);
+ }}
+ onLastCompletedStepChange={(key) => {
+ setLastCompleted(key);
+ onLastCompletedStepChange?.(key);
+ }}
+ aria-label="Checkout"
+ />
+ <button type="button" onClick={advance}>
+ Next
+ </button>
+ </div>
+ );
+}
+
+export interface CheckoutWizardProps {
+ items?: StepperItem[];
+ initialSelectedStep?: Key;
+}
+
+/**
+ * Wizard-style controlled Stepper with Back/Continue buttons, a step-content
+ * panel, and an external state readout. Shared by the Storybook \`Controlled\`
+ * story and Playwright spec.
+ */
+export function CheckoutWizard({
+ items = defaultItems,
+ initialSelectedStep,
+}: CheckoutWizardProps) {
+ const [selected, setSelected] = React.useState<Key>(
+ initialSelectedStep ?? items[0].key,
+ );
+ const [lastCompleted, setLastCompleted] = React.useState<Key | null>(null);
+
+ const selectedIndex = items.findIndex((item) => item.key === selected);
+ const currentItem = items[selectedIndex];
+ const isFirst = selectedIndex <= 0;
+ const isLast = selectedIndex === items.length - 1;
+
+ const handleBack = () => {
+ if (!isFirst) setSelected(items[selectedIndex - 1].key);
+ };
+
+ const handleNext = () => {
+ if (isLast) return;
+ setSelected(items[selectedIndex + 1].key);
+ };
+
+ return (
+ <Box display="flex" flexDirection="column" gap="lg">
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="2xl"
+ padding="2xl"
+ backgroundColor="background.primary.subtle"
+ borderRadius="lg"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.subtle"
+ >
+ <Stepper
+ items={items}
+ selectedStep={selected}
+ onSelectionChange={setSelected}
+ onLastCompletedStepChange={setLastCompleted}
+ aria-label="Checkout"
+ />
+
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="sm"
+ paddingY="lg"
+ style={{ minHeight: 140 }}
+ >
+ <Text type="label" size="sm" color="text.tertiary">
+ Step {selectedIndex + 1} of {items.length}
+ </Text>
+ <Text type="title" size="lg" elementType="h3">
+ {currentItem.title}
+ </Text>
+ {currentItem.description ? (
+ <Text type="body" size="md" color="text.secondary">
+ {currentItem.description}
+ </Text>
+ ) : null}
+ </Box>
+
+ <Box
+ display="flex"
+ justifyContent="space-between"
+ alignItems="center"
+ gap="sm"
+ >
+ <ActionButton
+ variant="tertiary"
+ label="Back"
+ onPress={handleBack}
+ isDisabled={isFirst}
+ />
+ <ActionButton
+ variant="primary"
+ label={isLast ? "Finish" : "Continue"}
+ onPress={handleNext}
+ isDisabled={isLast}
+ />
+ </Box>
+ </Box>
+
+ <Box
+ display="flex"
+ gap="lg"
+ paddingX="md"
+ alignItems="center"
+ justifyContent="center"
+ >
+ <Box display="flex" gap="xs" alignItems="center">
+ <Text type="label" size="sm" color="text.tertiary">
+ selected
+ </Text>
+ <Code>{String(selected)}</Code>
+ </Box>
+ <Box display="flex" gap="xs" alignItems="center">
+ <Text type="label" size="sm" color="text.tertiary">
+ lastCompleted
+ </Text>
+ <Code>{lastCompleted === null ? "null" : String(lastCompleted)}</Code>
+ </Box>
+ </Box>
+ </Box>
+ );
+}`},similarTo:[],figmaUrl:null},Switch:{id:"core-forms-switch",breadcrumb:"Core/Forms/Switch",importStatement:'import { Switch } from "@baseline-ui/core";',description:"`Switch` is a toggle control that flips a setting between on and off states. Use it for boolean preferences whose effect is applied immediately, such as enabling a feature or changing a mode.",documentation:`\`Switch\` is a toggle control that flips a setting between on and off states. Use it for boolean preferences whose effect is applied immediately, such as enabling a feature or changing a mode.
 
 * This component is built on top of the native \`input[type=checkbox]\` element.
 * Full support for browser features like form autofill
@@ -18313,7 +19287,7 @@ statusLabel?: {
     Toolbar,
     Virtualizer,
     VisuallyHidden,
-} from "@baseline-ui/core";`,description:"A fully-featured data table for displaying, selecting, sorting, and reordering tabular data. Built on react-aria-components for complete keyboard and screen reader accessibility.",documentation:`A fully-featured data table for displaying, selecting, sorting, and reordering tabular data. Built on react-aria-components for complete keyboard and screen reader accessibility.
+} from "@baseline-ui/core";`,description:"`Table` renders tabular data in rows and columns with support for selection, sorting, drag-and-drop reordering, and optional virtualization via the `Virtualizer` wrapper. Use it to display structured datasets where users need to scan, compare, or act on multiple records.",documentation:`\`Table\` renders tabular data in rows and columns with support for selection, sorting, drag-and-drop reordering, and optional virtualization via the \`Virtualizer\` wrapper. Use it to display structured datasets where users need to scan, compare, or act on multiple records.
 
 * Column sorting with visual sort indicator
 * Row selection (single and multiple) with checkbox support
@@ -20254,8 +21228,7 @@ export const TagAndMenuTableExample: React.FC = () => (
  })}
  </TableBody>
  </Table>
-);`},similarTo:[],figmaUrl:null},Tabs:{id:"core-navigation-tabs",breadcrumb:"Core/Navigation/Tabs",importStatement:'import { AddButtonExample, BasicExample, Tabs } from "@baseline-ui/core";',description:"The `Tabs` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create\na tab panel by wrapping a `TabItem` component in a `Tabs` component.",documentation:`The \`Tabs\` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create
-a tab panel by wrapping a \`TabItem\` component in a \`Tabs\` component.
+);`},similarTo:[],figmaUrl:null},Tabs:{id:"core-navigation-tabs",breadcrumb:"Core/Navigation/Tabs",importStatement:'import { AddButtonExample, BasicExample, Tabs } from "@baseline-ui/core";',description:"`Tabs` is a horizontal row of labeled triggers that switches between mutually exclusive panels of content in the same view. Use it to organize related content into sections users can toggle without leaving the page.",documentation:`\`Tabs\` is a horizontal row of labeled triggers that switches between mutually exclusive panels of content in the same view. Use it to organize related content into sections users can toggle without leaving the page.
 
 * Full support for mouse, keyboard, and touch interactions
 * Supports disabled tabs
@@ -20567,7 +21540,7 @@ export const AddButtonExample = () => {
  ))}
  </Tabs>
  );
-};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a styled label used to categorize, filter, or display metadata. It can be used as a standalone component or within a `TagGroup` for keyboard navigation, selection, and removal.",documentation:'`Tag` is a styled label used to categorize, filter, or display metadata. It can be used as a standalone component or within a `TagGroup` for keyboard navigation, selection, and removal.\n\n* Five visual variants: `neutral`, `red`, `green`, `blue`, and `high-contrast`\n* Two sizes: `md` (default) and `sm`\n* Optional leading icon (replaced by a checkmark when selected)\n* Optional remove button via `onRemove`\n* Selected and disabled states\n* Focus ring support\n* Works standalone or inside a `TagGroup` for collection behavior\n\n```jsx\nimport { Tag } from "@baseline-ui/core";\n\n<Tag>Label</Tag>;\n```\n\nFor collection behavior with keyboard navigation and selection, use `Tag` inside a `TagGroup`. See the <a href="?path=/docs/core-content-taggroup--docs">TagGroup documentation</a> for details.\n\n`Tag` supports five visual variants: `neutral`, `red`, `green`, `blue`, and\n`high-contrast`.\n\n```jsx\n<Tag>Neutral</Tag>\n<Tag variant="red">Red</Tag>\n<Tag variant="green">Green</Tag>\n<Tag variant="blue">Blue</Tag>\n<Tag variant="high-contrast">High Contrast</Tag>\n```\n\nPass an `icon` prop to display a leading icon. Use `@baseline-ui/icons/16` for `md` size and `@baseline-ui/icons/12` for `sm` size. When the tag is selected, the custom icon is replaced by a checkmark.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<Tag icon={EllipseIcon}>With Icon</Tag>;\n```\n\nPass `onRemove` to render a remove button. When the tag is disabled, the remove button is present but non-interactive.\n\n```jsx\n<Tag onRemove={() => console.log("removed")}>Removable</Tag>\n```\n\nWhen selected, the tag displays a checkmark icon and uses the interactive color scheme. If a custom `icon` is provided, the checkmark replaces it.\n\n```jsx\n<Tag isSelected>Selected</Tag>\n```\n\n```jsx\n<Tag isDisabled>Disabled</Tag>\n```\n\n```jsx\n<Tag size="sm">Small</Tag>\n```\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------- |\n| `.BaselineUI-Tag` | The root tag element. |\n| `.BaselineUI-Tag-Icon` | The icon element (custom icon or checkmark). |\n\nWhen the tag has a remove button:\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Tab` | Moves focus to the remove button. |\n| `Enter` | Activates the remove button. |\n| `Space` | Activates the remove button. |\n\n* <a href="?path=/docs/core-content-taggroup--docs">TagGroup</a> \u2014 Use for\n collections of tags with keyboard navigation, selection, and removal.\n* <a href="?path=/docs/core-content-badge--docs">Badge</a> \u2014 Use for numeric or\n status indicators that don\'t need interaction.',props:`interface TagProps {
+};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.",documentation:'`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.\n\n* Five visual variants: `neutral`, `red`, `green`, `blue`, and `high-contrast`\n* Two sizes: `md` (default) and `sm`\n* Optional leading icon (replaced by a checkmark when selected)\n* Optional remove button via `onRemove`\n* Selected and disabled states\n* Focus ring support\n* Works standalone or inside a `TagGroup` for collection behavior\n\n```jsx\nimport { Tag } from "@baseline-ui/core";\n\n<Tag>Label</Tag>;\n```\n\nFor collection behavior with keyboard navigation and selection, use `Tag` inside a `TagGroup`. See the <a href="?path=/docs/core-content-taggroup--docs">TagGroup documentation</a> for details.\n\n`Tag` supports five visual variants: `neutral`, `red`, `green`, `blue`, and\n`high-contrast`.\n\n```jsx\n<Tag>Neutral</Tag>\n<Tag variant="red">Red</Tag>\n<Tag variant="green">Green</Tag>\n<Tag variant="blue">Blue</Tag>\n<Tag variant="high-contrast">High Contrast</Tag>\n```\n\nPass an `icon` prop to display a leading icon. Use `@baseline-ui/icons/16` for `md` size and `@baseline-ui/icons/12` for `sm` size. When the tag is selected, the custom icon is replaced by a checkmark.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<Tag icon={EllipseIcon}>With Icon</Tag>;\n```\n\nPass `onRemove` to render a remove button. When the tag is disabled, the remove button is present but non-interactive.\n\n```jsx\n<Tag onRemove={() => console.log("removed")}>Removable</Tag>\n```\n\nWhen selected, the tag displays a checkmark icon and uses the interactive color scheme. If a custom `icon` is provided, the checkmark replaces it.\n\n```jsx\n<Tag isSelected>Selected</Tag>\n```\n\n```jsx\n<Tag isDisabled>Disabled</Tag>\n```\n\n```jsx\n<Tag size="sm">Small</Tag>\n```\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------- |\n| `.BaselineUI-Tag` | The root tag element. |\n| `.BaselineUI-Tag-Icon` | The icon element (custom icon or checkmark). |\n\nWhen the tag has a remove button:\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Tab` | Moves focus to the remove button. |\n| `Enter` | Activates the remove button. |\n| `Space` | Activates the remove button. |\n\n* <a href="?path=/docs/core-content-taggroup--docs">TagGroup</a> \u2014 Use for\n collections of tags with keyboard navigation, selection, and removal.\n* <a href="?path=/docs/core-content-badge--docs">Badge</a> \u2014 Use for numeric or\n status indicators that don\'t need interaction.',props:`interface TagProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -20628,7 +21601,7 @@ isSelected?: boolean
  * is rendered.
  */
 onRemove?: () => void
-}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:""},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable list of labels, categories, keywords, filters or other items with support for keyboard navigation, selection and removal.",documentation:`\`TagGroup\` is a focusable list of labels, categories, keywords, filters or other items with support for keyboard navigation, selection and removal.
+}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:""},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable collection of `Tag` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.",documentation:`\`TagGroup\` is a focusable collection of \`Tag\` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.
 
 * The component is exposed to assistive technology as a grid using ARIA
 * Keyboard navigation supports arrow keys, home, end, page up, page down, space and enter
@@ -20909,7 +21882,7 @@ export const RemovableTagGroup: React.FC<
  }}
  />
  );
-};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"The `TaggedPagination` component is used to navigate through a list of items that have been tagged with a specific tag instead of just their index. For eg: It can help in going through pages using their page label and not just the page number.",documentation:`The \`TaggedPagination\` component is used to navigate through a list of items that have been tagged with a specific tag instead of just their index. For eg: It can help in going through pages using their page label and not just the page number.
+};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"`TaggedPagination` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.",documentation:`\`TaggedPagination\` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.
 
 * Supports both string and number tags.
 * Keyboard handling of next and previous buttons.
@@ -21109,7 +22082,7 @@ export const TaggedPaginationExample: React.FC<
  {...props}
  />
  );
-};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"The `Text` component is used to render text of various sizes and weights.",documentation:'The `Text` component is used to render text of various sizes and weights.\n\n```jsx\nimport { Text } from "@storybook/addon-docs/blocks";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `value` and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`. You can see all the variants [here](/story/core-text--variants)',props:`interface TextProps {
+};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.",documentation:'`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.\n\n```jsx\nimport { Text } from "@storybook/addon-docs/blocks";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `value` and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`. You can see all the variants [here](/story/core-text--variants)',props:`interface TextProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -21211,7 +22184,7 @@ export function TextWithRef() {
  <span data-testid="tag-name">{tag}</span>
  </>
  );
-}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a component that allows users to input text. It can be used to\nsearch, filter, or enter text.",documentation:'`TextInput` is a component that allows users to input text. It can be used to\nsearch, filter, or enter text.\n\n* This component is built on top of the `input` element.\n* It provides visual and ARIA labels to the `input` element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to the assistive technology via ARIA.\n* It supports description and other state messages which are linked to the `input` element via ARIA.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" placeholder="Placeholder" />;\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" labelPosition="start" placeholder="Placeholder" />;\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" description="Description" placeholder="Placeholder" />;\n```\n\nYou can add an error to the `TextInput` by setting the `validationState` prop to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="error"\n placeholder="Placeholder"\n defaultValue="Error value"\n/>;\n```\n\nYou can add a warning to the `TextInput` by setting the `validationState` prop to\n`"warning"`. You can also pass `warningMessage` to provide additional\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="warning"\n placeholder="Placeholder"\n defaultValue="Warning value"\n/>;\n```\n\nYou can make the `TextInput` read only by passing a `isReadOnly` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isReadOnly\n placeholder="Placeholder"\n defaultValue="Read only value"\n/>;\n```\n\nYou can disable the `TextInput` by passing a `isDisabled` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isDisabled\n placeholder="Placeholder"\n defaultValue="Disabled value"\n description="Description"\n/>;\n```\n\nYou can control the `TextInput` by passing a `value` prop and a `onChange` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n value={"Controlled value"}\n onChange={(event) => setValue(event.target.value)}\n placeholder="Placeholder"\n description="Description"\n/>;\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying `<input>` element\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>;\n```',props:`interface TextInputProps {
+}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a single-line field for capturing short free-form text from the user. Use it for form values such as names, emails, or any other concise string entry.",documentation:'`TextInput` is a single-line field for capturing short free-form text from the user. Use it for form values such as names, emails, or any other concise string entry.\n\n* This component is built on top of the `input` element.\n* It provides visual and ARIA labels to the `input` element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to the assistive technology via ARIA.\n* It supports description and other state messages which are linked to the `input` element via ARIA.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" placeholder="Placeholder" />;\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" labelPosition="start" placeholder="Placeholder" />;\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput label="Label" description="Description" placeholder="Placeholder" />;\n```\n\nYou can add an error to the `TextInput` by setting the `validationState` prop to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="error"\n placeholder="Placeholder"\n defaultValue="Error value"\n/>;\n```\n\nYou can add a warning to the `TextInput` by setting the `validationState` prop to\n`"warning"`. You can also pass `warningMessage` to provide additional\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n label="Label"\n validationState="warning"\n placeholder="Placeholder"\n defaultValue="Warning value"\n/>;\n```\n\nYou can make the `TextInput` read only by passing a `isReadOnly` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isReadOnly\n placeholder="Placeholder"\n defaultValue="Read only value"\n/>;\n```\n\nYou can disable the `TextInput` by passing a `isDisabled` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n isDisabled\n placeholder="Placeholder"\n defaultValue="Disabled value"\n description="Description"\n/>;\n```\n\nYou can control the `TextInput` by passing a `value` prop and a `onChange` prop.\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<TextInput\n value={"Controlled value"}\n onChange={(event) => setValue(event.target.value)}\n placeholder="Placeholder"\n description="Description"\n/>;\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying `<input>` element\n\n```jsx\nimport { TextInput } from "../../utils";\n\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>;\n```',props:`interface TextInputProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -21518,7 +22491,7 @@ labelPosition?: any
     label="Label"
     name="text-input"
     placeholder="Placeholder"
-    description="Description" />;`}],implementation:""},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"The `ThemeProvider` component is used to set a theme for your application.",documentation:'The `ThemeProvider` component is used to set a theme for your application.\n\n```tsx\nimport { ThemeProvider, ActionButton } from "../../utils";\nimport { themes } from "@baseline-ui/tokens";\n\n<ThemeProvider theme={themes.base.light}>\n <ActionButton label="Click me" />\n</ThemeProvider>;\n```\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:',props:`interface ThemeProviderProps {
+    description="Description" />;`}],implementation:""},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.",documentation:'`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.\n\n```tsx\nimport { ThemeProvider, ActionButton } from "../../utils";\nimport { themes } from "@baseline-ui/tokens";\n\n<ThemeProvider theme={themes.base.light}>\n <ActionButton label="Click me" />\n</ThemeProvider>;\n```\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:',props:`interface ThemeProviderProps {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -21685,7 +22658,7 @@ export const ThemeChangeTestComponent: React.FC = () => {
  <div data-testid="changed-to">{changedTo}</div>
  </>
  );
-};`},similarTo:[],figmaUrl:null},TimeField:{id:"core-forms-timefield",breadcrumb:"Core/Forms/TimeField",importStatement:'import { TimeField, VariantViewer } from "@baseline-ui/core";',description:"The `TimeField` component is used to input a time value. Each part of the time value can be input separately.",documentation:`The \`TimeField\` component is used to input a time value. Each part of the time value can be input separately.
+};`},similarTo:[],figmaUrl:null},TimeField:{id:"core-forms-timefield",breadcrumb:"Core/Forms/TimeField",importStatement:'import { TimeField, VariantViewer } from "@baseline-ui/core";',description:"`TimeField` is an input that lets users enter and edit a time value as individually focusable segments (hours, minutes, seconds, period). Use it when collecting a precise time of day with locale-aware formatting and keyboard-friendly editing.",documentation:`\`TimeField\` is an input that lets users enter and edit a time value as individually focusable segments (hours, minutes, seconds, period). Use it when collecting a precise time of day with locale-aware formatting and keyboard-friendly editing.
 
 * Support for locale-specific formatting, number systems, hour cycles, and right-to-left layout.
 * Times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.
@@ -22065,9 +23038,7 @@ export const TimeFieldExample: React.FC<
     ToastExample,
     ToastWithAction,
     VariantsExample,
-} from "@baseline-ui/core";`,description:"The `Toast` component is used to display a toast notification to the user. It displays brief, temporary messages to the user.",documentation:`The \`Toast\` component is used to display a toast notification to the user. It displays brief, temporary messages to the user.
-
-A toast region is an ARIA landmark region labeled "Notifications" by default. It contains one or more visible toasts, displayed in priority order. When the maximum number of visible toasts is reached, additional toasts are queued until a visible toast is dismissed. Each toast is an ARIA alert element that includes the notification content and a close button.
+} from "@baseline-ui/core";`,description:"`Toast` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.",documentation:`\`Toast\` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.
 
 * Automatically shifts focus to the next toast when a toast is closed.
 * Toasts follow the [ARIA alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
@@ -22439,7 +23410,7 @@ export const VariantsExample = ({
  </Box>
  </>
  );
-};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:'import { Box, ToggleButton, VariantViewer } from "@baseline-ui/core";',description:"The `ToggleButton` component is used to toggle between two states.",documentation:`The \`ToggleButton\` component is used to toggle between two states.
+};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:'import { Box, ToggleButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleButton` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.",documentation:`\`ToggleButton\` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.
 
 * Native HTML \`<button>\` support
 * Exposed as a toggle button via ARIA
@@ -22538,7 +23509,7 @@ elementType?: any
 );`},{id:"core-buttons-togglebutton--default-selected",name:"Default Selected",snippet:'const DefaultSelected = () => <ToggleButton label="Toggle me" defaultSelected />;'},{id:"core-buttons-togglebutton--controlled",name:"Controlled",snippet:'const Controlled = () => <ToggleButton label="Toggle me" isSelected />;'},{id:"core-buttons-togglebutton--with-icon",name:"With Icon",snippet:'const WithIcon = () => <ToggleButton label="Toggle me" iconStart={EllipseIcon} />;'},{id:"core-buttons-togglebutton--disabled",name:"Disabled",snippet:`const Disabled = () => <Box display="flex" flexDirection="column" gap="xl">
     <ToggleButton label="Toggle me" isDisabled />
     <ToggleButton label="Toggle me" isDisabled defaultSelected={true} />
-</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"The `ToggleIconButton` component is a button that toggles between two states. It is used to toggle a boolean value.",documentation:'The `ToggleIconButton` component is a button that toggles between two states. It is used to toggle a boolean value.\n\n* Native HTML `<button>` support\n* Exposed as a toggle button via ARIA\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for `Space` and `Enter` keys\n\n```jsx\nimport { ToggleIconButton } from "../../utils";\nimport { TrashIcon } from "@baseline-ui/icons/20";\n\n<ToggleIconButton size="md" variant="primary" icon={TrashIcon} />;\n```\n\nYou can control the state of the button by passing the `isSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} isSelected={true} />\n```\n\nYou can set the default selection state of the button by passing the `defaultSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} defaultSelected={true} />\n```\n\nYou can disable the button by passing the `isDisabled` prop.\n\n```jsx\n<ToggleButton label={"Label"} isDisabled={true} />\n```\n\nYou can set different icons for the selected and unselected states by passing an object to the `icon` prop with `selected` and `unselected` keys.\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n| \\[data-selected] | Whether the button is currently selected. |\n\n| Key | Function |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |',props:`interface ToggleIconButtonProps {
+</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.",documentation:'`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.\n\n* Native HTML `<button>` support\n* Exposed as a toggle button via ARIA\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for `Space` and `Enter` keys\n\n```jsx\nimport { ToggleIconButton } from "../../utils";\nimport { TrashIcon } from "@baseline-ui/icons/20";\n\n<ToggleIconButton size="md" variant="primary" icon={TrashIcon} />;\n```\n\nYou can control the state of the button by passing the `isSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} isSelected={true} />\n```\n\nYou can set the default selection state of the button by passing the `defaultSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} defaultSelected={true} />\n```\n\nYou can disable the button by passing the `isDisabled` prop.\n\n```jsx\n<ToggleButton label={"Label"} isDisabled={true} />\n```\n\nYou can set different icons for the selected and unselected states by passing an object to the `icon` prop with `selected` and `unselected` keys.\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n| \\[data-selected] | Whether the button is currently selected. |\n\n| Key | Function |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |',props:`interface ToggleIconButtonProps {
 /**
  * The button's class name.
  */
@@ -22877,7 +23848,7 @@ export const StateSpecificIcon: React.FC<
     Toolbar,
     ToolbarChildren,
     WithInput,
-} from "@baseline-ui/core";`,description:"The `Toolbar` component is used to display a set of interactive controls with arrow key navigation.",documentation:`The \`Toolbar\` component is used to display a set of interactive controls with arrow key navigation.
+} from "@baseline-ui/core";`,description:"`Toolbar` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.",documentation:`\`Toolbar\` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.
 
 * The component is exposed to assistive technology as a \`toolbar\` element.
 * The component is keyboard accessible. It supports arrow key navigation.
@@ -23225,7 +24196,7 @@ export const WithInput = () => {
  <ActionButton label="Last" />
  </Toolbar>
  );
-};`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a accessible pop-up that displays information about an element when users hover over or focus on it.",documentation:`\`Tooltip\` is a accessible pop-up that displays information about an element when users hover over or focus on it.
+};`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.",documentation:`\`Tooltip\` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.
 
 * Automatic handling of Keyboard focus management and cross browser normalization
 * Automatic Hover management and cross browser normalization
@@ -23532,7 +24503,7 @@ export const CustomElementTooltip = () => (
     VirtualizedTreeViewWithDescriptionsExample,
     VirtualizedTreeViewWithExpandControlExample,
     VirtualizedTreeViewWithRenameExample,
-} from "@baseline-ui/core";`,description:"The `TreeView` component displays a hierarchical tree structure of items, allowing users to navigate, expand/collapse, select, rename, and perform actions on tree nodes. Use it for file browsers, folder structures, or any nested data.",documentation:`The \`TreeView\` component displays a hierarchical tree structure of items, allowing users to navigate, expand/collapse, select, rename, and perform actions on tree nodes. Use it for file browsers, folder structures, or any nested data.
+} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:`\`TreeView\` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.
 
 * Support for mouse, touch, and keyboard interaction
 * Accessible via React Aria with full keyboard navigation
@@ -24181,7 +25152,7 @@ export const VirtualizedTreeViewWithRenameExample: React.FC<
     VirtualListBoxGridLayoutExample,
     VirtualListBoxListLayoutExample,
     VirtualListBoxWithSectionsExample,
-} from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level, highly customizable list component built on top of React Aria Components. It supports custom option rendering, grouped sections with optional titles, drag-and-drop reordering, virtualization for large datasets, and an imperative handle for programmatic scrolling and focus control.",documentation:`\`UNSAFE_ListBox\` is a low-level, highly customizable list component built on top of React Aria Components. It supports custom option rendering, grouped sections with optional titles, drag-and-drop reordering, virtualization for large datasets, and an imperative handle for programmatic scrolling and focus control.
+} from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.",documentation:`\`UNSAFE_ListBox\` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.
 
 > **Note:** The \`UNSAFE_\` prefix indicates that the component's API may change between minor versions. Use it with caution in production code and pin your dependency version.
 
@@ -31311,7 +32282,7 @@ padding={[null, "lg", "xl"]}
 
 * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
 * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
-* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.60.1"};var u=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"0.62.0"};var u=`
 # Baseline UI MCP Server Guidelines
 
 This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
@@ -31471,8 +32442,8 @@ Use this tool to:
 | --- | --- | --- |
 ${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
 `)}
-`,P=Object.entries(c).map(([n,t])=>`${n}
+`,S=Object.entries(c).map(([n,t])=>`${n}
 
       ${t.map(e=>"- "+e).join(`
 `)}`).join(`
-`);async function S(){let n=new McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]}));let t=new StdioServerTransport;await n.connect(t);}(async()=>await S())();
+`);async function P(){let n=new McpServer({name:"baseline-ui",version:p.version});n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:S}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([f])=>!["description","similarTo","figmaUrl"].includes(f))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:z.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:o[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]}));let t=new StdioServerTransport;await n.connect(t);}(async()=>await P())();