@baseline-ui/mcp 0.62.0 → 1.0.0

package/dist/index.cjs

@@ -841,6 +841,11 @@ You can add sublabels to the header of the \`AccordionItem\` component using the
 | \`Right\` | If focus is on an item header and it contains action buttons, moves focus to the next action button. |
 | \`Left\` | If focus is on an item header and it contains action buttons, moves focus to the previous action button. |`,props:`interface AccordionProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -848,6 +853,11 @@ You can add sublabels to the header of the \`AccordionItem\` component using the
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -1340,6 +1350,11 @@ You can customize the appearance of the action items by providing a \`renderActi
 * **ActionIconButton** \u2014 a single icon button used internally by ActionGroup.
 * **ToggleIconButton** \u2014 a toggle icon button, useful with \`renderActionItem\` for custom toggle behavior.`,props:`interface ActionGroupProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -1347,6 +1362,11 @@ You can customize the appearance of the action items by providing a \`renderActi
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2111,6 +2131,11 @@ AlertDialog exposes className props for its inner elements:
 * **Modal** -- Container component required to display AlertDialog.
 * **Dialog** -- Non-alert dialog for general content. AlertDialog is built on top of Dialog.`,props:`interface AlertDialogProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2118,6 +2143,11 @@ AlertDialog exposes className props for its inner elements:
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2339,6 +2369,11 @@ function App() {
 \`\`\`
 \`\`\``,props:`interface AudioPlayerProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2346,6 +2381,11 @@ function App() {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2435,6 +2475,11 @@ The \`hasNotifications\` prop can be used to show a notification indicator.
 | --------------- | ---------------------------------- |
 | \\[data-disabled] | Whether the component is disabled. |`,props:`interface AvatarProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2442,6 +2487,11 @@ The \`hasNotifications\` prop can be used to show a notification indicator.
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2699,6 +2749,11 @@ children?: ReactNode
   </Box>
 );`}],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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2706,6 +2761,11 @@ children?: ReactNode
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2950,6 +3010,11 @@ 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:"`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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -2957,6 +3022,11 @@ export const ButtonSelectWithOptionStyleFn: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3331,6 +3401,11 @@ When the \`title\` prop is set, it is automatically linked via \`aria-labelledby
 * **[Calendar](/docs/core-forms-calendar--docs)** \u2013 For selecting a single date instead of a range
 * **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments`,props:`interface RangeCalendarProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3338,6 +3413,11 @@ When the \`title\` prop is set, it is automatically linked via \`aria-labelledby
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3552,6 +3632,11 @@ 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 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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3559,6 +3644,11 @@ export const RangeCalendarExample: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3654,6 +3744,11 @@ defaultOpen?: boolean
  */
 onOpenChange?: (isOpen: boolean) => void
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3661,6 +3756,11 @@ onOpenChange?: (isOpen: boolean) => void
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -3993,6 +4093,11 @@ The indeterminate state is useful for representing a mixed color value, such as
 />
 \`\`\``,props:`interface ColorSwatchProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -4000,6 +4105,11 @@ The indeterminate state is useful for representing a mixed color value, such as
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -4134,6 +4244,11 @@ import { ColorSwatchPicker } from "../../utils";
 \`\`\`
 \`\`\``,props:`interface ColorSwatchPickerProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -4141,6 +4256,11 @@ import { ColorSwatchPicker } from "../../utils";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -4399,6 +4519,11 @@ When the dropdown list is open, the following keyboard interactions are supporte
 | \`End\` | Moves focus to the last item. |
 | \`Esc\` | Closes the dropdown. |`,props:`interface ComboBoxProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -4406,6 +4531,11 @@ When the dropdown list is open, the following keyboard interactions are supporte
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5075,6 +5205,11 @@ import { CalendarDate } from "@internationalized/date";
 | \`ArrowLeft/Right\` | Navigate between date segments |
 | \`ArrowUp/Down\` | Increment/decrement the selected segment |`,props:`interface DateFieldProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5082,6 +5217,11 @@ import { CalendarDate } from "@internationalized/date";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5682,6 +5822,11 @@ The \`useDevice\` hook returns a string indicating the current device type:
 | \`"tablet"\` | Screen width is greater than or equal to the tablet breakpoint but less than the desktop breakpoint |
 | \`"desktop"\` | Screen width is greater than or equal to the desktop breakpoint |`,props:`interface DeviceProviderProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5689,6 +5834,11 @@ The \`useDevice\` hook returns a string indicating the current device type:
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5860,6 +6010,11 @@ By default, the \`Dialog\` component traps focus within the dialog. This means t
  */
 role?: 'dialog' | 'alertdialog'
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -5867,6 +6022,11 @@ role?: 'dialog' | 'alertdialog'
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -6617,6 +6777,11 @@ export const TruncatedTitleDisclosure: React.FC = () => {
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -6624,6 +6789,11 @@ export const TruncatedTitleDisclosure: React.FC = () => {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -6696,8 +6866,13 @@ 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:"`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 {
+};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor-rich-text",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Box, Editor, EditorAutoFocusOnMount, 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\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\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\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\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.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\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\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\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 together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\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 the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\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| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\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\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\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-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -6705,6 +6880,11 @@ export const DrawerWithActionExample: React.FC<{
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -6731,11 +6911,17 @@ onSave?: (value: string) => void
  */
 onCancel?: () => void
 /**
- * The default value of the editor.
+ * The initial value of the editor (uncontrolled). The editor manages its
+ * own state afterwards; later changes to this prop are ignored.
  */
 defaultValue?: string
 /**
- * The value of the editor.
+ * The value of the editor (controlled). Provide together with \`onChange\`;
+ * later changes to this prop update the editor content.
+ * 
+ * Backwards compatibility: in rich text mode, \`value\` without \`onChange\`
+ * behaves like \`defaultValue\` (initial content only), matching the
+ * behavior of earlier versions.
  */
 value?: string
 /**
@@ -6880,29 +7066,56 @@ autoFocus?: boolean | "start" | "end"
  * @default false
  */
 saveOnEnter?: boolean
-}`,stories:{usage:[{id:"core-miscellaneous-editor--basic",name:"Basic",snippet:'const Basic = () => <Editor placeholder="Placeholder" aria-label="Editor" />;'},{id:"core-miscellaneous-editor--plain-text-controlled",name:"Plain Text Controlled",snippet:`const PlainTextControlled = () => {
+/**
+ * Whether URL-shaped text is automatically converted into links: typing a
+ * space or Enter after a URL, pasting text that contains URLs, and pasting a
+ * lone URL over a selection (wraps the selection as a link). Only applies
+ * when \`enableRichText\` is \`true\`.
+ * 
+ * @default true
+ */
+autoLink?: boolean
+}`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    enableRichText
+    defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href='https://example.com'>Links</a> are also supported.</p><br/><p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>" />;`},{id:"core-miscellaneous-editor-rich-text--controlled",name:"Controlled",snippet:`const Controlled = () => {
     const [value, setValue] = React.useState(args.value);
 
     return (
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
-            spellCheck={false}
+            enableRichText
             value={value}
             onChange={(newValue) => {
               setValue(newValue);
             }} />
     );
-};`},{id:"core-miscellaneous-editor--plain-text-minimal",name:"Plain Text Minimal",snippet:`const PlainTextMinimal = () => <Box display="flex" gap="3xl" flexDirection="column">
+};`},{id:"core-miscellaneous-editor-rich-text--long-content",name:"Long Content",snippet:`const LongContent = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    enableRichText
+    defaultValue={[
+      "<p>This is a rich editor with a lot of content to exercise scrolling and overflow.</p>",
+      "<p>It supports <b>bold</b>, <i>italic</i>, and <u>underline</u> formatting, as well as <a href='https://example.com'>links</a>.</p>",
+      "<p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>",
+      "<p>Supercalifragilisticexpialidociousantidisestablishmentarianismpneumonoultramicroscopicsilicovolcanoconiosis</p>",
+      "<p><b>Bold</b> <i>italic</i> <u>underline</u> <b><i>bold italic</i></b> <b><u>bold underline</u></b> <i><u>italic underline</u></i> <b><i><u>all three</u></i></b>.</p>",
+      "<p>Paragraph five with some more plain text content.</p>",
+      "<p>Paragraph six with some more plain text content.</p>",
+      "<p>Paragraph seven with some more plain text content.</p>",
+      "<p>Paragraph eight with some more plain text content.</p>",
+      "<p>Paragraph nine, the last paragraph of this long document.</p>",
+    ].join("")} />;`},{id:"core-miscellaneous-editor-rich-text--with-placeholder",name:"With Placeholder",snippet:'const WithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor-rich-text--variants",name:"Variants",snippet:`const Variants = () => <Box display="flex" gap="3xl" flexDirection="column">
     <div style={{ width: 260 }}>
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
             variant="minimal"
             spellCheck={false}
-            defaultValue="This is a minimal editor"
+            enableRichText
+            defaultValue="This is a rich editor"
             isInline={false} />
     </div>
     <Separator />
@@ -6910,37 +7123,19 @@ saveOnEnter?: boolean
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
             variant="minimal"
             spellCheck={false}
-            defaultValue="This is a minimal editor" />
+            enableRichText
+            defaultValue="This is a rich editor" />
     </div>
-</Box>;`},{id:"core-miscellaneous-editor--plain-text-minimal-multiline",name:"Plain Text Minimal Multiline",snippet:`const PlainTextMinimalMultiline = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    defaultValue="This is a minimal editor\\nwith multiple lines of text \\n\\nSome more text." />;`},{id:"core-miscellaneous-editor--plain-text-minimal-disabled",name:"Plain Text Minimal Disabled",snippet:'const PlainTextMinimalDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-minimal-save-disabled",name:"Plain Text Minimal Save Disabled",snippet:'const PlainTextMinimalSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--plain-text-variants",name:"Plain Text Variants",snippet:'const PlainTextVariants = () => <Editor placeholder="Placeholder" aria-label="Editor" variant={undefined} />;'},{id:"core-miscellaneous-editor--plain-text-disabled",name:"Plain Text Disabled",snippet:'const PlainTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-auto-focus",name:"Plain Text Auto Focus",snippet:'const PlainTextAutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor--rich-text",name:"Rich Text",snippet:`const RichText = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    enableRichText
-    defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href='https://example.com'>Links</a> are also supported.</p><br/><p>You can set both <span style='color: #ac0000; background-color: #ffffff;'>font color</span> and <span style='background-color: #ffff00; color: #000000;'>background color</span>.</p>" />;`},{id:"core-miscellaneous-editor--rich-text-with-placeholder",name:"Rich Text With Placeholder",snippet:'const RichTextWithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor--rich-text-variants",name:"Rich Text Variants",snippet:`const RichTextVariants = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    enableRichText
-    defaultValue="This is a rich editor" />;`},{id:"core-miscellaneous-editor--rich-text-disabled",name:"Rich Text Disabled",snippet:'const RichTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--rich-text-save-disabled",name:"Rich Text Save Disabled",snippet:'const RichTextSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--rich-text-auto-focus",name:"Rich Text Auto Focus",error:{name:"SyntaxError",message:`Expected render to be an arrow function or function expression
-  172 |
-  173 | export const RichTextAutoFocus: Story = {
-> 174 |   render: PlainTextAutoFocus.render,
-      |           ^^^^^^^^^^^^^^^^^^^^^^^^^
-  175 |   args: {
-  176 |     ...RichText.args,
-  177 |     autoFocus: true,`}},{id:"core-miscellaneous-editor--rich-text-mentions",name:"Rich Text Mentions",snippet:`const RichTextMentions = () => <Editor
+</Box>;`},{id:"core-miscellaneous-editor-rich-text--disabled",name:"Disabled",snippet:'const Disabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor-rich-text--save-disabled",name:"Save Disabled",snippet:'const SaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor-rich-text--auto-focus",name:"Auto Focus",snippet:'const AutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor-rich-text--mentions",name:"Mentions",snippet:`const Mentions = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     defaultValue="Mentioning <span data-user-id='john-doe'>John Doe</span>."
-    mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor--rich-text-mentions-max-suggestions",name:"Rich Text Mentions Max Suggestions",snippet:`const RichTextMentionsMaxSuggestions = () => <Editor
+    mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor-rich-text--mentions-max-suggestions",name:"Mentions Max Suggestions",snippet:`const MentionsMaxSuggestions = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
-    maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
+    maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor-rich-text--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     footerButtons={[
@@ -6954,104 +7149,50 @@ saveOnEnter?: boolean
           },
         },
       },
-    ]} />;`},{id:"core-miscellaneous-editor--with-dynamic-caret-position",name:"With Dynamic Caret Position",snippet:`const WithDynamicCaretPosition = () => {
-    const editorHandleRef = React.useRef<EditorHandle>(null);
-
-    const [value, setValue] = React.useState(2);
-
-    return (
-        <>
-            <Box display="flex" gap="md" paddingBlockEnd="md">
-                <NumberInput
-                    label="Caret position"
-                    minValue={0}
-                    maxValue={args.value?.length ?? 0}
-                    value={value}
-                    onChange={setValue} />
-                <Box display="flex" alignItems="flex-end">
-                    <ActionButton
-                        label="Set caret"
-                        onPress={() => {
-                          editorHandleRef.current?.setCaretPosition(value);
-                        }} />
-                </Box>
-            </Box>
-            <Editor
-                editorHandle={editorHandleRef}
-                placeholder="Type something..."
-                aria-label="Editor"
-                enableRichText={false}
-                spellCheck={false}
-                value="This is a some text" />
-        </>
-    );
-};`},{id:"core-miscellaneous-editor--auto-focus-at-start",name:"Auto Focus At Start",snippet:`const AutoFocusAtStart = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    autoFocus="start"
-    defaultValue="Caret will be at the start"
-    enableRichText={false} />;`},{id:"core-miscellaneous-editor--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
+    ]} />;`},{id:"core-miscellaneous-editor-rich-text--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     autoFocus="end"
     defaultValue="Caret will be at the end"
-    enableRichText={false} />;`},{id:"core-miscellaneous-editor--rich-text-auto-focus-at-end",name:"Rich Text Auto Focus At End",snippet:`const RichTextAutoFocusAtEnd = () => <Editor
+    enableRichText />;`},{id:"core-miscellaneous-editor-rich-text--with-cancel",name:"With Cancel",snippet:`const WithCancel = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
-    autoFocus="end"
-    defaultValue="Caret will be at the end"
-    enableRichText />;`},{id:"core-miscellaneous-editor--plain-text-with-cancel",name:"Plain Text With Cancel",snippet:`const PlainTextWithCancel = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    onCancel={() => {}}
-    defaultValue="Some text to cancel" />;`},{id:"core-miscellaneous-editor--rich-text-with-cancel",name:"Rich Text With Cancel",snippet:`const RichTextWithCancel = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    onCancel={() => {}}
-    defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-clear-on-save",name:"Plain Text Clear On Save",snippet:`const PlainTextClearOnSave = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    clearOnSave
-    defaultValue="Text that clears on save" />;`},{id:"core-miscellaneous-editor--plain-text-clear-on-cancel",name:"Plain Text Clear On Cancel",snippet:`const PlainTextClearOnCancel = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    clearOnCancel
     onCancel={() => {}}
-    defaultValue="Text that clears on cancel" />;`},{id:"core-miscellaneous-editor--rich-text-clear-on-save",name:"Rich Text Clear On Save",snippet:`const RichTextClearOnSave = () => <Editor
+    defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-save",name:"Clear On Save",snippet:`const ClearOnSave = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     clearOnSave
-    defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor--rich-text-clear-on-cancel",name:"Rich Text Clear On Cancel",snippet:`const RichTextClearOnCancel = () => <Editor
+    defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-cancel",name:"Clear On Cancel",snippet:`const ClearOnCancel = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     clearOnCancel
     onCancel={() => {}}
-    defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-save-on-enter",name:"Plain Text Save On Enter",snippet:`const PlainTextSaveOnEnter = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    saveOnEnter
-    defaultValue="Press Enter to save" />;`},{id:"core-miscellaneous-editor--rich-text-save-on-enter",name:"Rich Text Save On Enter",snippet:`const RichTextSaveOnEnter = () => <Editor
+    defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--save-on-enter",name:"Save On Enter",snippet:`const SaveOnEnter = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     saveOnEnter
-    defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor--plain-text-not-inline",name:"Plain Text Not Inline",snippet:`const PlainTextNotInline = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    isInline={false}
-    defaultValue="Non-inline plain text editor" />;`},{id:"core-miscellaneous-editor--rich-text-not-inline",name:"Rich Text Not Inline",snippet:`const RichTextNotInline = () => <Editor
+    defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--not-inline",name:"Not Inline",snippet:`const NotInline = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     isInline={false}
-    defaultValue="<p>Non-inline rich text editor</p>" />;`},{id:"core-miscellaneous-editor--plain-text-default-save-disabled",name:"Plain Text Default Save Disabled",snippet:`const PlainTextDefaultSaveDisabled = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    isSaveDisabled
-    defaultValue="Save is disabled" />;`}],implementation:`import React from "react";
+    defaultValue="<p>Non-inline rich text editor</p>" />;`}],implementation:`import { BoldIcon, ItalicIcon, UnderlineIcon } from "@baseline-ui/icons/16";
+import React from "react";
 
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
+import { ColorInput } from "../../ColorInput";
+import { Text } from "../../Text";
+import { ToggleIconButton } from "../../ToggleIconButton";
 import { Editor } from "../Editor";
-
+import {
+ EditorProvider,
+ useEditable,
+ useEditor,
+ useEditorContext,
+} from "../headless";
+
+import type { ColorPreset } from "../../ColorInput";
+import type { MarkName } from "../core/commands";
 import type { EditorHandle, EditorProps } from "../Editor.types";
 
 export const EditorWithSetCaretButton = ({
@@ -7106,6 +7247,309 @@ export const EditorAutoFocusOnMount: React.FC<EditorProps> = (args) => {
  );
 };
 
+export const EditorControlledRichText = ({
+ onChange,
+}: Pick<EditorProps, "onChange">) => {
+ const [value, setValue] = React.useState("<p>First</p>");
+
+ return (
+ <>
+ <button
+ onClick={() => {
+ setValue("<p>Updated <b>externally</b></p>");
+ }}
+ data-testid="set-value"
+ >
+ Set value
+ </button>
+ <Editor
+ enableRichText={true}
+ value={value}
+ onChange={(v) => {
+ setValue(v);
+ onChange?.(v);
+ }}
+ />
+ </>
+ );
+};
+
+export const EditorControlledRichTextRejectsEdits = ({
+ onChange,
+}: Pick<EditorProps, "onChange">) => (
+ <Editor enableRichText={true} value="<p>Locked</p>" onChange={onChange} />
+);
+
+/**
+ * Legacy usage: \`value\` WITHOUT \`onChange\` in rich text mode. Must behave
+ * like \`defaultValue\` \u2014 later \`value\` updates are ignored (backwards
+ * compatibility).
+ */
+export const EditorLegacyRichTextValue = () => {
+ const [value, setValue] = React.useState("<p>First</p>");
+
+ return (
+ <>
+ <button
+ onClick={() => {
+ setValue("<p>Replaced</p>");
+ }}
+ data-testid="set-value"
+ >
+ Set value
+ </button>
+ <Editor enableRichText={true} value={value} />
+ </>
+ );
+};
+
+/**
+ * Demonstrates the headless API: a fully custom editor built from \`useEditor\`
+ * + \`useEditable\` on a plain \`<div>\`, with a \`Box\`-laid-out toolbar of
+ * \`ActionButton\`s reading the shared handle via \`useEditorContext\`. Rendered as
+ * two independent instances to prove per-editor isolation (each
+ * \`EditorProvider\` scopes its own handle).
+ */
+const HeadlessMarkButton: React.FC<{
+ markName: MarkName;
+ label: string;
+ testId: string;
+}> = ({ markName, label, testId }) => {
+ const editor = useEditorContext();
+ const isActive = editor.isMarkActive(markName);
+
+ return (
+ <ActionButton
+ size="sm"
+ variant={isActive ? "primary" : "secondary"}
+ label={label}
+ data-testid={testId}
+ aria-pressed={isActive}
+ // Keep the selection in the editable so the toggle applies to it.
+ preventFocusOnPress={true}
+ onPress={() => {
+ editor.toggleMark(markName);
+ editor.focus();
+ }}
+ />
+ );
+};
+
+const HEADLESS_MARK_ITEMS = [
+ { id: "bold", label: "Bold", icon: BoldIcon },
+ { id: "italic", label: "Italic", icon: ItalicIcon },
+ { id: "underline", label: "Underline", icon: UnderlineIcon },
+] as const;
+
+const HEADLESS_TEXT_COLOR = "#ac0000";
+const HEADLESS_BACKGROUND_COLOR = "#ffff00";
+
+const HeadlessMarkButtons: React.FC<{ idPrefix: string }> = ({ idPrefix }) => {
+ const editor = useEditorContext();
+
+ return (
+ <Box display="flex" gap="xs">
+ {HEADLESS_MARK_ITEMS.map(({ id, label, icon }) => (
+ <ToggleIconButton
+ key={id}
+ size="sm"
+ variant="toolbar"
+ icon={icon}
+ aria-label={label}
+ data-testid={\`\${idPrefix}-\${id}\`}
+ isSelected={editor.isMarkActive(id)}
+ preventFocusOnPress={true}
+ onChange={() => {
+ editor.toggleMark(id);
+ editor.focus();
+ }}
+ />
+ ))}
+ </Box>
+ );
+};
+
+const HEADLESS_TEXT_COLOR_PRESETS: ColorPreset[] = [
+ { label: "Crimson", color: HEADLESS_TEXT_COLOR },
+ { label: "Ink", color: "#1a1a2e" },
+ { label: "Ocean", color: "#0050c8" },
+];
+
+const HEADLESS_BACKGROUND_COLOR_PRESETS: ColorPreset[] = [
+ { label: "Sunshine", color: HEADLESS_BACKGROUND_COLOR },
+ { label: "Mint", color: "#c8f5d2" },
+];
+
+/**
+ * A presets-only \`ColorInput\` wired into the headless editor. Mirrors the
+ * built-in EditorToolbar's color handling: capture the selection before the
+ * popover steals focus, then restore it (Firefox collapses the contenteditable
+ * selection on refocus) before applying the mark. Reading the value back from
+ * \`selectionState.marks\` keeps the trigger swatch in sync with the caret.
+ */
+const HeadlessColorInput: React.FC<{
+ idPrefix: string;
+ colorKey: "color" | "backgroundColor";
+ label: string;
+ presets: ColorPreset[];
+}> = ({ idPrefix, colorKey, label, presets }) => {
+ const editor = useEditorContext();
+ const color =
+ colorKey === "color"
+ ? editor.selectionState.marks.color
+ : editor.selectionState.marks.backgroundColor;
+ const savedRangeRef = React.useRef<typeof editor.selectionState.range>(null);
+
+ return (
+ <Box data-testid={\`\${idPrefix}-\${colorKey}\`}>
+ <ColorInput
+ aria-label={label}
+ presets={presets}
+ includePicker={false}
+ allowRemoval={true}
+ placement="bottom start"
+ value={color ?? null}
+ onTriggerPress={() => {
+ savedRangeRef.current = editor.selectionState.range;
+ }}
+ onChange={(next) => {
+ // Defer so the popover finishes closing, then restore the captured
+ // selection before applying \u2014 focus alone is not enough on Firefox.
+ setTimeout(() => {
+ if (savedRangeRef.current) {
+ editor.core.select(savedRangeRef.current);
+ }
+ editor.setMark(colorKey, next ? next.toString("rgba") : undefined);
+ }, 0);
+ }}
+ />
+ </Box>
+ );
+};
+
+const HeadlessCustomEditorInstance: React.FC<{
+ idPrefix: string;
+ label: string;
+ defaultValue?: string;
+}> = ({ idPrefix, label, defaultValue }) => {
+ const editor = useEditor({ defaultValue });
+ const { editableProps } = useEditable(editor);
+
+ return (
+ <EditorProvider editor={editor}>
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.primary.subtle"
+ style={{ width: 320 }}
+ >
+ <Text type="helper" size="sm" color="text.secondary">
+ {label}
+ </Text>
+ <Box display="flex" gap="xs" alignItems="center">
+ <HeadlessMarkButtons idPrefix={idPrefix} />
+ <HeadlessColorInput
+ idPrefix={idPrefix}
+ colorKey="color"
+ label="Text color"
+ presets={HEADLESS_TEXT_COLOR_PRESETS}
+ />
+ <HeadlessColorInput
+ idPrefix={idPrefix}
+ colorKey="backgroundColor"
+ label="Background color"
+ presets={HEADLESS_BACKGROUND_COLOR_PRESETS}
+ />
+ </Box>
+ <Box
+ {...editableProps}
+ data-testid={\`\${idPrefix}-editable\`}
+ aria-label={\`\${idPrefix} editor\`}
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.secondary.subtle"
+ color="text.primary"
+ typography="body.md.regular"
+ // \`white-space: pre-wrap\` keeps significant whitespace (leading,
+ // trailing, and runs of spaces) visible in the contenteditable \u2014 the
+ // built-in <Editor> sets the same on its editing surface. Without it,
+ // a trailing space collapses whenever the model re-renders (e.g. while
+ // a color mark is active), so the space appears not to be inserted.
+ style={{ minHeight: 100, whiteSpace: "pre-wrap" }}
+ />
+ </Box>
+ </EditorProvider>
+ );
+};
+
+export const HeadlessCustomEditor: React.FC = () => {
+ return (
+ <Box display="flex" gap="2xl" flexDirection="column">
+ <HeadlessCustomEditorInstance
+ idPrefix="headless-a"
+ label="Unformatted rich text"
+ defaultValue="<p>Unformatted rich text preview with no active marks.</p>"
+ />
+ <HeadlessCustomEditorInstance
+ idPrefix="headless-b"
+ label="Formatted rich text"
+ defaultValue={\`<p><b>Bold text</b>, <i>italic text</i>, <u>underlined text</u>, and <span style="color:\${HEADLESS_TEXT_COLOR};background-color:\${HEADLESS_BACKGROUND_COLOR}">colored text</span> are visible here.</p>\`}
+ />
+ </Box>
+ );
+};
+
+/**
+ * Headless editor with the built-in formatting/history shortcuts disabled
+ * (\`keyboardShortcuts: false\`). Ctrl/Cmd+B should NOT toggle bold, but the
+ * custom toolbar button still works.
+ */
+export const HeadlessEditorNoShortcuts: React.FC = () => {
+ const editor = useEditor({
+ defaultValue: "<p>No shortcuts</p>",
+ keyboardShortcuts: false,
+ });
+ const { editableProps } = useEditable(editor);
+
+ return (
+ <EditorProvider editor={editor}>
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.primary.subtle"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.medium"
+ style={{ width: 320 }}
+ >
+ <HeadlessMarkButton
+ markName="bold"
+ label="Bold"
+ testId="noshortcut-bold"
+ />
+ <Box
+ {...editableProps}
+ data-testid="noshortcut-editable"
+ aria-label="no shortcut editor"
+ padding="md"
+ borderRadius="md"
+ backgroundColor="background.secondary.subtle"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.medium"
+ style={{ minHeight: 72 }}
+ />
+ </Box>
+ </EditorProvider>
+ );
+};
+
 export const EditorWithAutoFocusAndCaretAtEnd = ({
  initialText,
  onChange,
@@ -7130,7 +7574,7 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
  editorHandle={editorHandleRef}
  />
  );
-};`},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 {
+};`},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 [`FileUploader`](/story/core-forms-fileuploader--default).\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.
  */
@@ -7312,7 +7756,7 @@ labelPosition?: any
       ],
     }}
   />
-);`}],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 {
+);`}],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 `FileUploader` 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* `FileUploader` \u2014 picker / drop target that produces files to render here.\n* `ImageDropZone` \u2014 a dedicated drop target specialized for images.\n* `UNSAFE_ListBox` \u2014 the underlying listbox primitive.',props:`interface FileListProps {
 /**
  * The className applied to the root element.
  */
@@ -7630,17 +8074,135 @@ export const AriaDetailsFileList: React.FC = () => (
  items={defaultItems}
  />
  </>
-);`},similarTo:["FileUpload","ImageDropZone"],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
-    Box,
-    FrameProvider,
-    NestedTestFrameProvider,
-    PopoverWithFrameBoundaryExample,
-    TestFrameProvider,
-    TestFrameProviderInsideShadowRoot,
-    TestFrameProviderWithCustomPortalContainer,
-    WithPortalContainerOutsideContainer,
-} from "@baseline-ui/core";`,description:"The `FrameProvider` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.",documentation:`The \`FrameProvider\` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.
-
+);`},similarTo:["FileUploader","ImageDropZone"],figmaUrl:null},FileUploader:{id:"core-forms-fileuploader",breadcrumb:"Core/Forms/FileUploader",importStatement:'import { Box, FileList, FileUploader, VariantViewer } from "@baseline-ui/core";',description:"`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.",documentation:'`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.\n\n* Native file picker triggered by clicking anywhere in the drop area (or the\n button, in the `button` variant)\n* Drag-and-drop and paste support in the `dropzone` variant, built on React\n Aria\'s `DropZone`\n* MIME-type filtering through the `accept` prop\n* Single- or multiple-file selection via `allowsMultiple`\n* Keyboard focus management with visible focus rings, and an error message\n wired to the trigger via `aria-describedby`\n\n`FileUploader` only emits files; it never renders them. Keep the file\ncollection in your own state, append to it in `onAdd`, and render it with a\nsibling `FileList`:\n\n```tsx\nimport { FileUploader, FileList } from "@baseline-ui/core";\nimport type { FileListItem } from "@baseline-ui/core";\n\nconst [items, setItems] = React.useState<FileListItem[]>([]);\n\n<FileUploader\n label="Attachments"\n onAdd={(files) =>\n setItems((current) => [\n ...current,\n ...files.map((file) => ({ id: crypto.randomUUID(), name: file.name })),\n ])\n }\n/>\n<FileList\n aria-label="Uploaded files"\n items={items}\n onRemove={(id) => setItems((c) => c.filter((item) => item.id !== id))}\n/>;\n```\n\nThere are three visual treatments: the default `dropzone`, the `dropzone` with\n`isInline`, and the `button` variant.\n\n* The `dropzone` variant (default) renders a filled drop area that accepts\n dragged and pasted files. Clicking anywhere in the area opens the native file\n picker.\n* Set `isInline` to outline the drop area with a dashed border and rounded\n corners instead of rendering it as a plain filled box.\n* The `button` variant renders a single `ActionButton` that opens the file\n picker, with no drop area. Use it when drag-and-drop is not appropriate for\n the surrounding layout.\n\n```tsx\n<FileUploader label="Dropzone" />\n<FileUploader isInline label="Inline" />\n<FileUploader variant="button" buttonLabel="Upload" />\n```\n\nSee the [Variants story](?path=/story/core-forms-fileuploader--variants) for\nevery variant in every state laid out as a grid.\n\nSet `errorMessage` to show an error below the control; in the `dropzone`\nvariant the drop area is also outlined in the error color. Set `isDisabled` to\nblock all interaction.\n\n```tsx\n<FileUploader label="Error" errorMessage="Upload failed." />\n<FileUploader label="Disabled" isDisabled />\n```\n\nPass `accept` to restrict the picker to specific MIME types, and\n`allowsMultiple={false}` to limit selection to a single file.\n\n```tsx\n<FileUploader accept="image/png" allowsMultiple={false} />\n```\n\nThe root element exposes the current variant; the drop area (in the `dropzone`\nvariant) exposes the React Aria `DropZone` state attributes.\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------------------- |\n| `[data-variant]` | The active variant (`"dropzone"` or `"button"`). |\n| `[data-drop-target]` | Whether files are currently being dragged over the area. |\n| `[data-disabled]` | Whether the uploader is disabled. |\n| `[data-focused]` | Whether the drop area is focused. |\n| `[data-focus-visible]` | Whether the drop area is keyboard focused. |\n| `[data-hovered]` | Whether the drop area is hovered with a mouse. |\n\n| Key | Function |\n| -------------- | ------------------------------------------------------------- |\n| `Tab` | Moves focus between the drop area and the upload button. |\n| `Enter` | Activates the upload button and opens the native file picker. |\n| `Space` | Activates the upload button and opens the native file picker. |\n| Paste shortcut | With the drop area focused, pastes files from the clipboard. |\n\n`errorMessage` is announced to assistive technology and is referenced by the\ntrigger via `aria-describedby`.\n\n* [`FileList`](?path=/docs/core-collections-filelist--docs) \u2014 displays and removes the\n files emitted by `onAdd`.\n* [`ActionButton`](?path=/docs/core-buttons-actionbutton--docs) \u2014 the button\n rendered by the `button` variant.',props:`interface FileUploaderProps {
+/**
+ * The visual variant.
+ * 
+ * - \`dropzone\` (default): renders a drop area that accepts dragged and
+ *   pasted files. Clicking anywhere in the area opens the file picker.
+ * - \`button\`: renders an \`ActionButton\` that opens the file picker. No
+ *   drop target is rendered.
+ * 
+ * @default "dropzone"
+ */
+variant?: "dropzone" | "button"
+/**
+ * Whether the \`dropzone\` drop area is rendered inline \u2014 outlined with a
+ * dashed border and rounded corners \u2014 instead of as a plain filled box.
+ * Has no effect on the \`button\` variant.
+ * 
+ * @default false
+ */
+isInline?: boolean
+/**
+ * Optional label rendered above the trigger.
+ */
+label?: React.ReactNode
+/**
+ * Optional description rendered below the label.
+ */
+description?: React.ReactNode
+/**
+ * Called when the user selects or drops new files.
+ */
+onAdd?: (files: File[]) => void
+/**
+ * The file types the uploader accepts, as a comma-separated list of file
+ * extensions (\`.png\`), MIME types (\`image/png\`), or wildcard MIME types
+ * (\`image/*\`). Passed through to the underlying \`<input type="file">\`
+ * \`accept\` attribute, and also used to filter dropped and pasted files so
+ * the drop/paste path enforces the same restriction as the native picker.
+ */
+accept?: string
+/**
+ * Whether multiple files can be selected at once.
+ * 
+ * @default true
+ */
+allowsMultiple?: boolean
+/**
+ * Whether the entire uploader is disabled.
+ */
+isDisabled?: boolean
+/**
+ * Top-level error message. When provided, the dropzone is rendered with
+ * the error border and the message is wired to the trigger via
+ * \`aria-describedby\`, so it must be plain text.
+ */
+errorMessage?: string
+/**
+ * The label of the button rendered in the \`button\` variant.
+ * 
+ * @default "Upload"
+ */
+buttonLabel?: string
+/**
+ * The text rendered inside the clickable drop area in the \`dropzone\`
+ * variant.
+ * 
+ * @default "Drop files here or click to upload"
+ */
+dropzoneLabel?: string
+}`,stories:{usage:[{id:"core-forms-fileuploader--default",name:"Default",snippet:`const Default = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList label="Label" description="Supports .mov and .mp4" onAdd={fn()} />
+</Box>;`},{id:"core-forms-fileuploader--variants",name:"Variants",snippet:`const Variants = (args) => (
+  <VariantViewer<FileUploaderProps>
+    header={["Default", "Error", "Disabled"]}
+    component={UploaderWithFileList}
+    defaultProps={args}
+    cellStyle={{ width: 240 }}
+    variants={{
+      Dropzone: [
+        { variant: "dropzone" },
+        { variant: "dropzone", ...ERROR_PROPS },
+        { variant: "dropzone", ...DISABLED_PROPS },
+      ],
+      Inline: [
+        { isInline: true },
+        { isInline: true, ...ERROR_PROPS },
+        { isInline: true, ...DISABLED_PROPS },
+      ],
+      Button: [
+        { variant: "button" },
+        { variant: "button", ...ERROR_PROPS },
+        { variant: "button", ...DISABLED_PROPS },
+      ],
+    }}
+  />
+);`},{id:"core-forms-fileuploader--button-variant",name:"Button Variant",snippet:`const ButtonVariant = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList
+        label="Label"
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        variant="button"
+        buttonLabel="Upload" />
+</Box>;`},{id:"core-forms-fileuploader--inline",name:"Inline",snippet:`const Inline = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList label="Label" description="Supports .mov and .mp4" onAdd={fn()} isInline />
+</Box>;`},{id:"core-forms-fileuploader--error-dropzone",name:"Error Dropzone",snippet:`const ErrorDropzone = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList
+        label="Label"
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        errorMessage="Upload failed." />
+</Box>;`},{id:"core-forms-fileuploader--disabled",name:"Disabled",snippet:`const Disabled = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList
+        label="Label"
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        isDisabled />
+</Box>;`},{id:"core-forms-fileuploader--no-label",name:"No Label",snippet:`const NoLabel = () => <Box style={{ width: 240 }}>
+    <UploaderWithFileList label={undefined} description={undefined} onAdd={fn()} />
+</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
+    Box,
+    FrameProvider,
+    NestedTestFrameProvider,
+    PopoverWithFrameBoundaryExample,
+    TestFrameProvider,
+    TestFrameProviderInsideShadowRoot,
+    TestFrameProviderWithCustomPortalContainer,
+    WithPortalContainerOutsideContainer,
+} from "@baseline-ui/core";`,description:"The `FrameProvider` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.",documentation:`The \`FrameProvider\` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.
+
 * Controls where overlays are rendered in the DOM
 * Supports containing overlays within a specific container element
 * Automatically handles container resizing
@@ -7743,6 +8305,11 @@ function App() {
 2. The container must have non-zero dimensions for proper overlay positioning.
 3. On mobile devices, overlays are typically rendered at the document body level for better user experience.`,props:`interface FrameProviderProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -7750,6 +8317,11 @@ function App() {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -8303,6 +8875,11 @@ import { I18nProvider, FreehandCanvas } from "@baseline-ui/core";
 </I18nProvider>;
 \`\`\``,props:`interface FreehandCanvasProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -8310,6 +8887,11 @@ import { I18nProvider, FreehandCanvas } from "@baseline-ui/core";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -9060,6 +9642,11 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -9067,6 +9654,11 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -9297,6 +9889,71 @@ import { I18nProvider, ImageDropZone } from "@baseline-ui/core";
  <ImageDropZone onValueChange={console.log} />
 </I18nProvider>;
 \`\`\``,props:`interface ImageDropZoneProps {
+/**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
+ * 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
+/**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
+ * 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
+/**
+ * Whether the component is disabled.
+ */
+isDisabled?: boolean
+/**
+ * The description to display.
+ */
+description?: string
+/**
+ * The accepted file types, passed through to the underlying
+ * \`<input type="file">\` \`accept\` attribute \u2014 a comma-separated list of MIME
+ * types and/or extensions (e.g. \`"image/png,image/jpeg"\` or \`"image/*"\`).
+ */
+accept?: string
+/**
+ * The name of the input.
+ */
+name?: string
+/**
+ * The callback function that is fired when the value changes.
+ */
+onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+/**
+ * The callback function that is fired when the value changes and the value is
+ * valid.
+ */
+onValueChange?: (files: File[]) => void
+/**
+ * Identifies the element (or elements) that provide a detailed, extended
+ * description for the object.
+ */
+aria-describedby?: string
 /**
  * The initial image to display. This will be used as the \`src\` attribute of
  * the \`<img>\` element. You will be able to choose a new image.
@@ -9354,7 +10011,11 @@ maxFileSize?: number
  * Callback fired when a dropped/pasted/selected file exceeds \`maxFileSize\`.
  */
 onFileSizeError?: (file: File) => void
-accept?: any
+/**
+ * Callback fired when a dropped/pasted/selected file's type does not match
+ * \`accept\`.
+ */
+onFileTypeError?: (file: File) => void
 }`,stories:{usage:[{id:"core-forms-imagedropzone--basic",name:"Basic",snippet:`const Basic = () => <ImageDropZone
     style={{ width: 208, height: 100 }}
     placeholder="Upload Image Above"
@@ -9436,6 +10097,14 @@ accept?: any
       alert(
         \`File "\${file.name}" (\${(file.size / 1024).toFixed(1)}KB) exceeds the 100KB limit.\`,
       );
+    }} />;`},{id:"core-forms-imagedropzone--with-file-type-restriction",name:"With File Type Restriction",snippet:`const WithFileTypeRestriction = () => <ImageDropZone
+    style={{ width: 208, height: 100 }}
+    placeholder="Upload Image Above"
+    clearLabel="Clear Image"
+    aria-label="Image Uploader"
+    accept="image/png"
+    onFileTypeError={(file: File) => {
+      alert(\`File "\${file.name}" (\${file.type}) is not an accepted PNG image.\`);
     }} />;`}],implementation:""},similarTo:[],figmaUrl:null},ImageGallery:{id:"core-collections-imagegallery",breadcrumb:"Core/Collections/ImageGallery",importStatement:`import {
     Box,
     ControlledImageGalleryExample,
@@ -9502,6 +10171,11 @@ The \`ImageGallery\` component optimizes long labels for touch and non-touch dev
 | \`Shift + Space\` | Add current image to Selected Images |
 | \`Enter\` | Select the current image for reorder |`,props:`interface ImageGalleryProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -9509,6 +10183,11 @@ The \`ImageGallery\` component optimizes long labels for touch and non-touch dev
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -10202,6 +10881,11 @@ import { I18nProvider, InlineAlert } from "@baseline-ui/core";
 </I18nProvider>;
 \`\`\``,props:`interface InlineAlertProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -10209,6 +10893,11 @@ import { I18nProvider, InlineAlert } from "@baseline-ui/core";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -10903,6 +11592,11 @@ const items = [
 </InlineToolbar>;
 \`\`\``,props:`interface InlineToolbarProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -10910,6 +11604,11 @@ const items = [
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11167,6 +11866,11 @@ isDisabled?: boolean
  */
 elementType?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11174,6 +11878,11 @@ elementType?: string
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11267,6 +11976,11 @@ role?: AriaRole
     }}
     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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11274,6 +11988,11 @@ role?: AriaRole
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11930,6 +12649,11 @@ This is will be rendered as HTML.
 };
 \`\`\``,props:`interface MarkdownProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -11937,6 +12661,11 @@ This is will be rendered as HTML.
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -12512,6 +13241,30 @@ export const LongModalExample: React.FC<
  );
 };
 
+export const DisableAnimationModalExample: React.FC<
+ TestComponentProps & { defaultOpen?: boolean; disableAnimation?: boolean }
+> = ({ enableInert, defaultOpen = true, disableAnimation }) => {
+ const id = useId();
+ return (
+ <Modal defaultOpen={defaultOpen}>
+ <ModalTrigger>
+ <ActionButton label="Open Modal" />
+ </ModalTrigger>
+ <ModalContent
+ disableAnimation={disableAnimation}
+ UNSAFE_enableInert={enableInert}
+ >
+ <Dialog aria-labelledby={id}>
+ <VisuallyHidden>
+ <Text id={id}>Animation example</Text>
+ </VisuallyHidden>
+ <Text>Modal body</Text>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ );
+};
+
 /**
  * Example with form controls inside a Modal. Used to verify pointer
  * interactions work correctly with all input devices.
@@ -12799,6 +13552,11 @@ value: number
     );
 };`}],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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -12806,6 +13564,11 @@ value: number
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -13229,6 +13992,11 @@ import { I18nProvider, Pagination } from "@baseline-ui/core";
 </I18nProvider>;
 \`\`\``,props:`interface PaginationProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -13236,6 +14004,11 @@ import { I18nProvider, Pagination } from "@baseline-ui/core";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -13511,6 +14284,11 @@ Panels can be conditionally rendered:
 
 * **Separator** \u2014 use for a visual divider that is not resizable.`,props:`interface PanelProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -13518,6 +14296,11 @@ Panels can be conditionally rendered:
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -14690,6 +15473,7 @@ export const TrailingElementExample = () => {
     PopoverEventLeakFixExample,
     PopoverExample,
     PopoverNoBoundaryExample,
+    PopoverTriggerWidthExample,
     PopoverWithScrollableContentExample,
     PopoverWithScrollableViewportExample,
     Tooltip,
@@ -14811,6 +15595,11 @@ defaultOpen?: boolean
  */
 onOpenChange?: (isOpen: boolean) => void
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -14818,6 +15607,11 @@ onOpenChange?: (isOpen: boolean) => void
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -14869,7 +15663,7 @@ children: React.ReactNode
         { placement: "right top" },
       ],
     }}
-    defaultProps={args as PopoverArrowVariantProps}
+    defaultProps={args}
   />
 );`},{id:"core-overlays-popover--with-custom-target",name:"With Custom Target",snippet:`const WithCustomTarget = (args) => (
   <PopoverCustomTargetExample
@@ -14891,7 +15685,7 @@ children: React.ReactNode
       placement: "bottom start",
     }}
   />
-);`},{id:"core-overlays-popover--with-boundary-element",name:"With Boundary Element",snippet:"const WithBoundaryElement = (args) => <PopoverBoundaryElementExample popoverProps={args} />;"},{id:"core-overlays-popover--with-no-boundary",name:"With No Boundary",snippet:"const WithNoBoundary = () => <PopoverNoBoundaryExample />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
+);`},{id:"core-overlays-popover--with-boundary-element",name:"With Boundary Element",snippet:"const WithBoundaryElement = (args) => <PopoverBoundaryElementExample popoverProps={args} />;"},{id:"core-overlays-popover--with-no-boundary",name:"With No Boundary",snippet:"const WithNoBoundary = () => <PopoverNoBoundaryExample />;"},{id:"core-overlays-popover--with-dynamic-trigger-width",name:"With Dynamic Trigger Width",snippet:"const WithDynamicTriggerWidth = (args) => <PopoverTriggerWidthExample popoverProps={args} />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
 import { mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
@@ -15005,6 +15799,61 @@ export const PopoverCustomTargetExample = ({
  );
 };
 
+export const PopoverTriggerWidthExample: React.FC<{
+ popoverProps?: Omit<PopoverProps, "children">;
+ popoverContentProps?: Omit<PopoverContentProps, "children">;
+ initialWidth?: number;
+}> = ({
+ popoverProps = { type: "dialog" },
+ popoverContentProps,
+ initialWidth = 240,
+}) => {
+ const triggerRef = useRef<HTMLDivElement>(null);
+ const [width, setWidth] = useState(initialWidth);
+
+ return (
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="lg"
+ padding="xl"
+ alignItems="flex-start"
+ >
+ <ActionButton
+ label="Grow trigger"
+ onPress={() => {
+ setWidth((w) => w + 80);
+ }}
+ />
+ <Popover {...popoverProps}>
+ <Box ref={triggerRef} data-testid="width-trigger" style={{ width }}>
+ <PopoverTrigger>
+ <ActionButton label="Open" style={{ width: "100%" }} />
+ </PopoverTrigger>
+ </Box>
+ <PopoverContent
+ placement="bottom"
+ triggerRef={triggerRef}
+ isNonModal={true}
+ shouldCloseOnInteractOutside={() => false}
+ {...popoverContentProps}
+ >
+ <Dialog
+ size="content"
+ aria-label="content"
+ className={sprinkles({ padding: "md" })}
+ // Fill the trigger-matched container so the bordered content spans
+ // the full width instead of hugging its text.
+ style={{ width: "100%" }}
+ >
+ <Text type="label">Width-matched popover</Text>
+ </Dialog>
+ </PopoverContent>
+ </Popover>
+ </Box>
+ );
+};
+
 export const PopoverArrowExample: React.FC<
  Omit<
  PopoverProps & {
@@ -15968,6 +16817,11 @@ shouldContainFocus?: boolean
  */
 isExiting?: boolean
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -15975,6 +16829,11 @@ isExiting?: boolean
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16023,6 +16882,11 @@ The \`Preview\` component can be disabled. When disabled, the preview is not int
 \`\`\`
 \`\`\``,props:`interface PreviewProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16030,6 +16894,11 @@ The \`Preview\` component can be disabled. When disabled, the preview is not int
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16212,6 +17081,11 @@ accent?: "theme" | "positive"
     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:"`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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16219,6 +17093,11 @@ accent?: "theme" | "positive"
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16334,6 +17213,11 @@ errorMessage?: string
     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:"`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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16341,6 +17225,11 @@ errorMessage?: string
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16494,6 +17383,11 @@ Use the \`renderOption\` prop to fully customize how each radio option looks. Th
 
 * **[Select](/story/core-forms-select--basic)** \u2014 Use for long lists of options where a dropdown is more space-efficient than a list of visible radio buttons.`,props:`interface RadioGroupProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16501,6 +17395,11 @@ Use the \`renderOption\` prop to fully customize how each radio option looks. Th
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16724,6 +17623,11 @@ import { Reaction } from "../../utils";
 | ------- | -------------------- |
 | \`Space\` | Toggles the reaction |`,props:`interface ReactionProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16731,6 +17635,11 @@ import { Reaction } from "../../utils";
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16868,6 +17777,11 @@ The \`smoothScroll\` prop can be used to disable smooth scrolling.
 | \`Enter\` | Scrolls to bottom |
 | \`Space\` | Scrolls to bottom |`,props:`interface ScrollControlButtonProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -16875,6 +17789,11 @@ The \`smoothScroll\` prop can be used to disable smooth scrolling.
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17078,6 +17997,11 @@ export const ScrollControlButtonReversedExample: React.FC<
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17085,6 +18009,11 @@ export const ScrollControlButtonReversedExample: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17525,6 +18454,11 @@ import { EllipseIcon } from "@baseline-ui/icons/24";
 
 The \`IconSelect\` component supports adding a 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\` prop to \`false\`. You can also disable the icon tooltip separately by setting \`iconTooltip\` to \`false\`.`,props:`interface SelectProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17532,6 +18466,11 @@ The \`IconSelect\` component supports adding a tooltip to the trigger button whi
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17955,6 +18894,11 @@ orientation?: "horizontal" | "vertical"
  */
 elementType?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -17962,6 +18906,11 @@ elementType?: string
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -18192,6 +19141,11 @@ style?: React.CSSProperties
   </Box>
 );`}],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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -18199,6 +19153,11 @@ style?: React.CSSProperties
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -18681,6 +19640,11 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -18688,6 +19652,11 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -19214,6 +20183,11 @@ The status labels can improve the accessibility of the Switch. However, they are
 \`\`\`
 \`\`\``,props:`interface SwitchProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -19221,6 +20195,11 @@ The status labels can improve the accessibility of the Switch. However, they are
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21542,6 +22521,11 @@ export const AddButtonExample = () => {
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21549,6 +22533,11 @@ export const AddButtonExample = () => {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21691,6 +22680,11 @@ const items = [
 | Space | Selects the focused tag |
 | Enter | Selects the focused tag |`,props:`interface TagGroupProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21698,6 +22692,11 @@ const items = [
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21908,6 +22907,11 @@ This component is a controlled component and requires the \`value\` prop to be c
 | \`ArrowUp\` | Increment the current page. |
 | \`Enter\` | Change the current page to the value entered in the input field. |`,props:`interface TaggedPaginationProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -21915,6 +22919,11 @@ This component is a controlled component and requires the \`value\` prop to be c
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22084,6 +23093,11 @@ export const TaggedPaginationExample: React.FC<
  );
 };`},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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22091,6 +23105,11 @@ export const TaggedPaginationExample: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22184,8 +23203,13 @@ 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 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 {
+}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.",documentation:'`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.\n\n* This component is built on top of the `input` element (or `textarea` in multi-line mode).\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 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 "@baseline-ui/core";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nFor numeric entry use `NumberInput`, for search fields use `SearchInput`, and for color values use `ColorInput`.\n\n`TextInput` supports two variants: `primary` (default) and `ghost`. Set the variant with the `variant` prop.\n\n```jsx\n<TextInput placeholder="Placeholder" variant="primary" />\n<TextInput placeholder="Placeholder" variant="ghost" />\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\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\n<TextInput\n label="Label"\n labelPosition="start"\n description="Description"\n placeholder="Placeholder"\n/>\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\n<TextInput label="Label" description="Description" placeholder="Placeholder" />\n```\n\nYou can put the `TextInput` into an error state by setting `validationState` to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error; passing `errorMessage` on its own is enough to render the error\nstate. When `description` is also present, it takes precedence and the error\nmessage is not shown.\n\n```jsx\n<TextInput\n label="Label"\n validationState="error"\n errorMessage="Error message"\n placeholder="Placeholder"\n/>\n```\n\nYou can put the `TextInput` into a warning state by setting `validationState` to\n`"warning"`. You can also pass `warningMessage` to provide additional\ninformation about the warning.\n\n```jsx\n<TextInput\n label="Label"\n validationState="warning"\n warningMessage="Warning message"\n placeholder="Placeholder"\n/>\n```\n\nYou can make the `TextInput` read only by passing an `isReadOnly` prop.\n\n```jsx\n<TextInput label="Label" isReadOnly defaultValue="Read-only value" />\n```\n\nYou can disable the `TextInput` by passing an `isDisabled` prop.\n\n```jsx\n<TextInput\n label="Label"\n isDisabled\n defaultValue="Disabled value"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can control the `TextInput` by passing a `value` prop together with an\n`onChange` prop. `onChange` is called with the new string value (not a DOM\nevent).\n\n```jsx\nconst [value, setValue] = useState("Controlled value");\n\n<TextInput\n label="Label"\n value={value}\n onChange={(value) => setValue(value)}\n placeholder="Placeholder"\n/>;\n```\n\nSet `isMultiLine` to render the field as a resizable `<textarea>` instead of a\nsingle-line `<input>`. The field starts at a minimum height and can be dragged\nto resize in both directions, except when it is read only or disabled. All\nstates (error, warning, disabled, read only, ghost) are supported, just like the\nsingle-line input.\n\n```jsx\n<TextInput\n label="Label"\n isMultiLine\n defaultValue="Lorem ipsum"\n description="Helper text"\n/>\n```\n\nUse the `rows` prop to set the initial number of visible text rows.\n\n```jsx\n<TextInput label="Label" isMultiLine rows={5} placeholder="Placeholder" />\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\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>\n```\n\nThese selectors are applied to the underlying `<input>` / `<textarea>` element. The root wrapper is also exposed via the `BaselineUI-TextInput` class and the field element via the `BaselineUI-TextInput-Input` class.\n\n| Selector | Description |\n| ------------------------- | ------------------------------------------------------------------- |\n| `[data-readonly]` | Whether the input is read only. |\n| `[data-disabled]` | Whether the input is disabled. |\n| `[data-validation-state]` | The validation state of the input (`error`, `warning`, or `valid`). |\n| `[data-focused]` | Whether the input is focused, either via a mouse or keyboard. |\n| `[data-focus-visible]` | Whether the input is keyboard focused. |\n\n| Key | Function |\n| ---------------- | ---------------------------------------------------------------------------- |\n| <kbd>Enter</kbd> | Submits the form in single-line mode; inserts a new line in multi-line mode. |',props:`interface TextInputProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22193,6 +23217,11 @@ export function TextWithRef() {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22228,8 +23257,14 @@ inputStyle?: React.CSSProperties
  * The class name to apply to the input element
  */
 inputClassName?: string
+/**
+ * The number of visible text rows for the multi-line input. Only applies when
+ * \`isMultiLine\` is set.
+ */
+rows?: number
 variant?: any
 labelPosition?: any
+isMultiLine?: any
 }`,stories:{usage:[{id:"core-forms-textinput--basic",name:"Basic",snippet:'const Basic = () => <TextInput placeholder="Placeholder" aria-label="Text Input" />;'},{id:"core-forms-textinput--variants",name:"Variants",snippet:`const Variants = (args) => (
   <VariantViewer<React.ComponentProps<typeof TextInput>>
     cellStyle={{ minWidth: 300 }}
@@ -22242,116 +23277,418 @@ labelPosition?: any
     component={TextInput}
     variants={{
       "Primary Placeholder": [
-        { placeholder: "Placeholder" },
-        { placeholder: "Placeholder", description: "Helper text" },
-        { label: "Label", placeholder: "Placeholder" },
+        { placeholder: "Placeholder" },
+        { placeholder: "Placeholder", description: "Helper text" },
+        { label: "Label", placeholder: "Placeholder" },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          description: "Helper text",
+        },
+      ],
+      "Primary Filled": [
+        { placeholder: "Placeholder", defaultValue: "filled" },
+        {
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          description: "Helper text",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          description: "Helper text",
+        },
+      ],
+      "Primary With Error": [
+        { placeholder: "Placeholder", validationState: "error" },
+        {
+          placeholder: "Placeholder",
+          validationState: "error",
+          errorMessage: "Error message",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "error",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "error",
+          errorMessage: "Error message",
+        },
+      ],
+      "Primary With Warning": [
+        { placeholder: "Placeholder", validationState: "warning" },
+        {
+          placeholder: "Placeholder",
+          validationState: "warning",
+          warningMessage: "Warning message",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "warning",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "warning",
+          warningMessage: "Warning message",
+        },
+      ],
+      "Primary Disabled": [
+        { placeholder: "Placeholder", isDisabled: true },
+        {
+          placeholder: "Placeholder",
+          isDisabled: true,
+          description: "Helper text",
+        },
+        { label: "Label", placeholder: "Placeholder", isDisabled: true },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          isDisabled: true,
+          description: "Helper text",
+        },
+      ],
+      "Primary Read Only": [
+        { placeholder: "Placeholder", isReadOnly: true },
+        {
+          placeholder: "Placeholder",
+          isReadOnly: true,
+          description: "Helper text",
+        },
+        { label: "Label", placeholder: "Placeholder", isReadOnly: true },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          isReadOnly: true,
+          description: "Helper text",
+        },
+      ],
+      "Ghost Placeholder": [
+        { placeholder: "Placeholder", variant: "ghost" },
+        {
+          placeholder: "Placeholder",
+          variant: "ghost",
+          description: "Helper text",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          variant: "ghost",
+          description: "Helper text",
+          labelPosition: "start",
+        },
+      ],
+      "Ghost Filled": [
+        {
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          variant: "ghost",
+        },
+        {
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          variant: "ghost",
+          description: "Helper text",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          defaultValue: "filled",
+          variant: "ghost",
+          description: "Helper text",
+          labelPosition: "start",
+        },
+      ],
+      "Ghost With Error": [
+        {
+          placeholder: "Placeholder",
+          validationState: "error",
+          variant: "ghost",
+        },
+        {
+          placeholder: "Placeholder",
+          validationState: "error",
+          errorMessage: "Error message",
+          variant: "ghost",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "error",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "error",
+          errorMessage: "Error message",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+      ],
+      "Ghost With Warning": [
+        {
+          placeholder: "Placeholder",
+          validationState: "warning",
+          variant: "ghost",
+        },
+        {
+          placeholder: "Placeholder",
+          validationState: "warning",
+          warningMessage: "Warning message",
+          variant: "ghost",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "warning",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          validationState: "warning",
+          warningMessage: "Warning message",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+      ],
+      "Ghost Disabled": [
+        { placeholder: "Placeholder", isDisabled: true, variant: "ghost" },
+        {
+          placeholder: "Placeholder",
+          isDisabled: true,
+          description: "Helper text",
+          variant: "ghost",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          isDisabled: true,
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          label: "Label",
+          placeholder: "Placeholder",
+          isDisabled: true,
+          description: "Helper text",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+      ],
+    }}
+    defaultProps={args}
+  />
+);`},{id:"core-forms-textinput--with-label",name:"With Label",snippet:'const WithLabel = () => <TextInput label="Label" placeholder="Placeholder" />;'},{id:"core-forms-textinput--with-description",name:"With Description",snippet:'const WithDescription = () => <TextInput label="Label" description="Description" placeholder="Placeholder" />;'},{id:"core-forms-textinput--disabled",name:"Disabled",snippet:`const Disabled = () => <TextInput
+    label="Label"
+    isDisabled
+    defaultValue="Disabled value"
+    placeholder="Placeholder"
+    description="Description" />;`},{id:"core-forms-textinput--with-error-message",name:"With Error Message",snippet:`const WithErrorMessage = () => <TextInput
+    label="Label"
+    errorMessage="Error message"
+    validationState="error"
+    placeholder="Placeholder" />;`},{id:"core-forms-textinput--with-warning-message",name:"With Warning Message",snippet:`const WithWarningMessage = () => <TextInput
+    label="Label"
+    warningMessage="Warning message"
+    validationState="warning"
+    placeholder="Placeholder" />;`},{id:"core-forms-textinput--ghost-variant",name:"Ghost Variant",snippet:'const GhostVariant = () => <TextInput label="Label" variant="ghost" placeholder="Placeholder" />;'},{id:"core-forms-textinput--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <TextInput
+    label="Label"
+    description="Description"
+    labelPosition="start"
+    placeholder="Placeholder" />;`},{id:"core-forms-textinput--read-only",name:"Read Only",snippet:'const ReadOnly = () => <TextInput label="Label" isReadOnly defaultValue="Read-only value" />;'},{id:"core-forms-textinput--controlled",name:"Controlled",snippet:'const Controlled = () => <TextInput label="Label" value="Controlled value" />;'},{id:"core-forms-textinput--html-forms",name:"HTML Forms",snippet:`const HTMLForms = () => <TextInput
+    label="Label"
+    name="text-input"
+    placeholder="Placeholder"
+    description="Description" />;`},{id:"core-forms-textinput--multiline",name:"Multiline",snippet:`const Multiline = () => <TextInput
+    label="Label"
+    isMultiLine
+    defaultValue="Lorem ipsum"
+    description="Helper text" />;`},{id:"core-forms-textinput--multiline-with-rows",name:"Multiline With Rows",snippet:`const MultilineWithRows = () => <TextInput
+    label="Label"
+    isMultiLine
+    rows={5}
+    placeholder="Placeholder"
+    description="Helper text" />;`},{id:"core-forms-textinput--multiline-variants",name:"Multiline Variants",snippet:`const MultilineVariants = (args) => (
+  <VariantViewer<React.ComponentProps<typeof TextInput>>
+    cellStyle={{ minWidth: 300 }}
+    header={[
+      "No Label + No Helper Text",
+      "No Label + Helper Text",
+      "Label + No Helper Text",
+      "Label + Helper Text",
+    ]}
+    component={TextInput}
+    variants={{
+      "Primary Placeholder": [
+        { isMultiLine: true, placeholder: "Placeholder" },
         {
-          label: "Label",
+          isMultiLine: true,
           placeholder: "Placeholder",
           description: "Helper text",
         },
-      ],
-      "Primary Filled": [
-        { placeholder: "Placeholder", defaultValue: "filled" },
+        { isMultiLine: true, label: "Label", placeholder: "Placeholder" },
         {
+          isMultiLine: true,
+          label: "Label",
           placeholder: "Placeholder",
-          defaultValue: "filled",
           description: "Helper text",
         },
+      ],
+      "Primary Filled": [
+        { isMultiLine: true, defaultValue: "Lorem ipsum" },
         {
-          label: "Label",
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          description: "Helper text",
         },
+        { isMultiLine: true, label: "Label", defaultValue: "Lorem ipsum" },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          defaultValue: "Lorem ipsum",
           description: "Helper text",
         },
       ],
       "Primary With Error": [
-        { placeholder: "Placeholder", validationState: "error" },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          validationState: "error",
+        },
+        {
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           errorMessage: "Error message",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "error",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           errorMessage: "Error message",
         },
       ],
       "Primary With Warning": [
-        { placeholder: "Placeholder", validationState: "warning" },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          validationState: "warning",
+        },
+        {
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           warningMessage: "Warning message",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           warningMessage: "Warning message",
         },
       ],
       "Primary Disabled": [
-        { placeholder: "Placeholder", isDisabled: true },
+        { isMultiLine: true, defaultValue: "Lorem ipsum", isDisabled: true },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           isDisabled: true,
           description: "Helper text",
         },
-        { label: "Label", placeholder: "Placeholder", isDisabled: true },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
+          isDisabled: true,
+        },
+        {
+          isMultiLine: true,
+          label: "Label",
+          defaultValue: "Lorem ipsum",
           isDisabled: true,
           description: "Helper text",
         },
       ],
       "Primary Read Only": [
-        { placeholder: "Placeholder", isReadOnly: true },
+        { isMultiLine: true, defaultValue: "Lorem ipsum", isReadOnly: true },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           isReadOnly: true,
           description: "Helper text",
         },
-        { label: "Label", placeholder: "Placeholder", isReadOnly: true },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
+          isReadOnly: true,
+        },
+        {
+          isMultiLine: true,
+          label: "Label",
+          defaultValue: "Lorem ipsum",
           isReadOnly: true,
           description: "Helper text",
         },
       ],
       "Ghost Placeholder": [
-        { placeholder: "Placeholder", variant: "ghost" },
+        { isMultiLine: true, placeholder: "Placeholder", variant: "ghost" },
         {
+          isMultiLine: true,
           placeholder: "Placeholder",
           variant: "ghost",
           description: "Helper text",
         },
         {
+          isMultiLine: true,
           label: "Label",
           placeholder: "Placeholder",
           variant: "ghost",
           labelPosition: "start",
         },
         {
+          isMultiLine: true,
           label: "Label",
           placeholder: "Placeholder",
           variant: "ghost",
@@ -22361,27 +23698,27 @@ labelPosition?: any
       ],
       "Ghost Filled": [
         {
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           variant: "ghost",
         },
         {
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           variant: "ghost",
           description: "Helper text",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          defaultValue: "Lorem ipsum",
           variant: "ghost",
           labelPosition: "start",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
-          defaultValue: "filled",
+          defaultValue: "Lorem ipsum",
           variant: "ghost",
           description: "Helper text",
           labelPosition: "start",
@@ -22389,26 +23726,30 @@ labelPosition?: any
       ],
       "Ghost With Error": [
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           variant: "ghost",
         },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           errorMessage: "Error message",
           variant: "ghost",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           variant: "ghost",
           labelPosition: "start",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "error",
           errorMessage: "Error message",
           variant: "ghost",
@@ -22417,26 +23758,30 @@ labelPosition?: any
       ],
       "Ghost With Warning": [
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           variant: "ghost",
         },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           warningMessage: "Warning message",
           variant: "ghost",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           variant: "ghost",
           labelPosition: "start",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           validationState: "warning",
           warningMessage: "Warning message",
           variant: "ghost",
@@ -22444,55 +23789,79 @@ labelPosition?: any
         },
       ],
       "Ghost Disabled": [
-        { placeholder: "Placeholder", isDisabled: true, variant: "ghost" },
         {
-          placeholder: "Placeholder",
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          isDisabled: true,
+          variant: "ghost",
+        },
+        {
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
           isDisabled: true,
           description: "Helper text",
           variant: "ghost",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           isDisabled: true,
           variant: "ghost",
           labelPosition: "start",
         },
         {
+          isMultiLine: true,
           label: "Label",
-          placeholder: "Placeholder",
+          defaultValue: "Lorem ipsum",
           isDisabled: true,
           description: "Helper text",
           variant: "ghost",
           labelPosition: "start",
         },
       ],
+      "Ghost Read Only": [
+        {
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          isReadOnly: true,
+          variant: "ghost",
+        },
+        {
+          isMultiLine: true,
+          defaultValue: "Lorem ipsum",
+          isReadOnly: true,
+          description: "Helper text",
+          variant: "ghost",
+        },
+        {
+          isMultiLine: true,
+          label: "Label",
+          defaultValue: "Lorem ipsum",
+          isReadOnly: true,
+          variant: "ghost",
+          labelPosition: "start",
+        },
+        {
+          isMultiLine: true,
+          label: "Label",
+          defaultValue: "Lorem ipsum",
+          isReadOnly: true,
+          description: "Helper text",
+          variant: "ghost",
+          labelPosition: "start",
+        },
+      ],
     }}
     defaultProps={args}
   />
-);`},{id:"core-forms-textinput--with-label",name:"With Label",snippet:'const WithLabel = () => <TextInput label="Label" placeholder="Placeholder" />;'},{id:"core-forms-textinput--with-description",name:"With Description",snippet:'const WithDescription = () => <TextInput label="Label" description="Description" placeholder="Placeholder" />;'},{id:"core-forms-textinput--disabled",name:"Disabled",snippet:`const Disabled = () => <TextInput
-    label="Label"
-    isDisabled
-    defaultValue="Disabled value"
-    placeholder="Placeholder"
-    description="Description" />;`},{id:"core-forms-textinput--with-error-message",name:"With Error Message",snippet:`const WithErrorMessage = () => <TextInput
-    label="Label"
-    errorMessage="Error message"
-    validationState="error"
-    placeholder="Placeholder" />;`},{id:"core-forms-textinput--with-warning-message",name:"With Warning Message",snippet:`const WithWarningMessage = () => <TextInput
-    label="Label"
-    warningMessage="Warning message"
-    validationState="warning"
-    placeholder="Placeholder" />;`},{id:"core-forms-textinput--ghost-variant",name:"Ghost Variant",snippet:'const GhostVariant = () => <TextInput label="Label" variant="ghost" placeholder="Placeholder" />;'},{id:"core-forms-textinput--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <TextInput
-    label="Label"
-    description="Description"
-    labelPosition="start"
-    placeholder="Placeholder" />;`},{id:"core-forms-textinput--read-only",name:"Read Only",snippet:'const ReadOnly = () => <TextInput label="Label" isReadOnly defaultValue="Read-only value" />;'},{id:"core-forms-textinput--controlled",name:"Controlled",snippet:'const Controlled = () => <TextInput label="Label" value="Controlled value" />;'},{id:"core-forms-textinput--html-forms",name:"HTML Forms",snippet:`const HTMLForms = () => <TextInput
-    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:"`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 {
+);`}],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 {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22500,6 +23869,11 @@ labelPosition?: any
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22729,6 +24103,11 @@ The TimeField supports error and warning states with associated messages.
 | \`Home/End\` | Go to minimum/maximum value for the selected segment |
 | \`Numbers\` | Type numbers to edit the selected segment |`,props:`interface TimeFieldProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -22736,6 +24115,11 @@ The TimeField supports error and warning states with associated messages.
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -23095,6 +24479,11 @@ You can pass a \`timeout\` prop to the \`toastQueue.add\` method to set the time
 toastQueue.add(alertProps, { timeout: 1000 });
 \`\`\``,props:`interface ToastProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -23102,6 +24491,11 @@ toastQueue.add(alertProps, { timeout: 1000 });
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -23885,6 +25279,11 @@ In case of Popover, when the popover trigger has moved to the menu:
 | Tab | Focus the next interactive child outside the toolbar |
 | Tab without \`isSingleTabStop\` | Focus the next interactive child within the toolbar |`,props:`interface ToolbarProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -23892,6 +25291,11 @@ In case of Popover, when the popover trigger has moved to the menu:
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -24308,6 +25712,11 @@ The \`data-placement\` attribute is applied to the tooltip's outer wrapper eleme
 | \`[data-placement="left"]\` | Applied when tooltip is positioned to the left of the trigger |
 | \`[data-placement="right"]\` | Applied when tooltip is positioned to the right of the trigger |`,props:`interface TooltipProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -24315,6 +25724,11 @@ The \`data-placement\` attribute is applied to the tooltip's outer wrapper eleme
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -24652,6 +26066,11 @@ Without virtualization:
 * Performance degrades beyond ~500 items
 * Memory usage grows with tree size`,props:`interface TreeViewProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -24659,6 +26078,11 @@ Without virtualization:
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -25309,6 +26733,11 @@ function App() {
 }
 \`\`\``,props:`interface UNSAFE_ListBoxProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -25316,6 +26745,11 @@ function App() {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26257,6 +27691,11 @@ layoutOptions?: O
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   16 |`}}],implementation:""},similarTo:[],figmaUrl:null},AccordionItem:{id:"core-navigation-accordion-accordionitem",importStatement:'import { Accordion, AccordionItem, AccordionItemExample, Checkbox } from "@baseline-ui/core";',description:"",documentation:null,props:`interface AccordionItemProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26264,6 +27703,11 @@ layoutOptions?: O
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26435,6 +27879,11 @@ export const AccordionWithDisabledItemsExample: React.FC<
  return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
 };`},similarTo:[],figmaUrl:null},IconColorInput:{id:"core-forms-colorinput-iconcolorinput",importStatement:'import { Box, IconColorInput } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconColorInputProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26442,6 +27891,11 @@ export const AccordionWithDisabledItemsExample: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26691,6 +28145,11 @@ svg: string
     UncontrolledInteractionOutsideExample,
 } from "@baseline-ui/core";`,description:"",documentation:null,props:`interface ModalContentProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26698,6 +28157,11 @@ svg: string
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -26982,6 +28446,30 @@ export const LongModalExample: React.FC<
  );
 };
 
+export const DisableAnimationModalExample: React.FC<
+ TestComponentProps & { defaultOpen?: boolean; disableAnimation?: boolean }
+> = ({ enableInert, defaultOpen = true, disableAnimation }) => {
+ const id = useId();
+ return (
+ <Modal defaultOpen={defaultOpen}>
+ <ModalTrigger>
+ <ActionButton label="Open Modal" />
+ </ModalTrigger>
+ <ModalContent
+ disableAnimation={disableAnimation}
+ UNSAFE_enableInert={enableInert}
+ >
+ <Dialog aria-labelledby={id}>
+ <VisuallyHidden>
+ <Text id={id}>Animation example</Text>
+ </VisuallyHidden>
+ <Text>Modal body</Text>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ );
+};
+
 /**
  * Example with form controls inside a Modal. Used to verify pointer
  * interactions work correctly with all input devices.
@@ -27185,6 +28673,11 @@ export const DisabledFocusManagementExample: React.FC<{
     TrailingElementExample,
 } from "@baseline-ui/core";`,description:"",documentation:null,props:`interface PointPickerContentProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -27192,6 +28685,11 @@ export const DisabledFocusManagementExample: React.FC<{
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -27871,6 +29369,11 @@ export const TrailingElementExample = () => {
  );
 };`},similarTo:[],figmaUrl:null},PointPickerDisplay:{id:"core-content-pointpicker-pointpickerdisplay",importStatement:'import { Box, PointPickerDisplay, RichContentExample } from "@baseline-ui/core";',description:"",documentation:null,props:`interface PointPickerDisplayProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -27878,6 +29381,11 @@ export const TrailingElementExample = () => {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -28513,6 +30021,11 @@ export const TrailingElementExample = () => {
     PopoverWithScrollableContentExample,
 } from "@baseline-ui/core";`,description:"",documentation:null,props:`interface PopoverContentProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -28520,6 +30033,11 @@ export const TrailingElementExample = () => {
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -28783,6 +30301,61 @@ export const PopoverCustomTargetExample = ({
  );
 };
 
+export const PopoverTriggerWidthExample: React.FC<{
+ popoverProps?: Omit<PopoverProps, "children">;
+ popoverContentProps?: Omit<PopoverContentProps, "children">;
+ initialWidth?: number;
+}> = ({
+ popoverProps = { type: "dialog" },
+ popoverContentProps,
+ initialWidth = 240,
+}) => {
+ const triggerRef = useRef<HTMLDivElement>(null);
+ const [width, setWidth] = useState(initialWidth);
+
+ return (
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="lg"
+ padding="xl"
+ alignItems="flex-start"
+ >
+ <ActionButton
+ label="Grow trigger"
+ onPress={() => {
+ setWidth((w) => w + 80);
+ }}
+ />
+ <Popover {...popoverProps}>
+ <Box ref={triggerRef} data-testid="width-trigger" style={{ width }}>
+ <PopoverTrigger>
+ <ActionButton label="Open" style={{ width: "100%" }} />
+ </PopoverTrigger>
+ </Box>
+ <PopoverContent
+ placement="bottom"
+ triggerRef={triggerRef}
+ isNonModal={true}
+ shouldCloseOnInteractOutside={() => false}
+ {...popoverContentProps}
+ >
+ <Dialog
+ size="content"
+ aria-label="content"
+ className={sprinkles({ padding: "md" })}
+ // Fill the trigger-matched container so the bordered content spans
+ // the full width instead of hugging its text.
+ style={{ width: "100%" }}
+ >
+ <Text type="label">Width-matched popover</Text>
+ </Dialog>
+ </PopoverContent>
+ </Popover>
+ </Box>
+ );
+};
+
 export const PopoverArrowExample: React.FC<
  Omit<
  PopoverProps & {
@@ -29863,6 +31436,61 @@ export const PopoverCustomTargetExample = ({
  );
 };
 
+export const PopoverTriggerWidthExample: React.FC<{
+ popoverProps?: Omit<PopoverProps, "children">;
+ popoverContentProps?: Omit<PopoverContentProps, "children">;
+ initialWidth?: number;
+}> = ({
+ popoverProps = { type: "dialog" },
+ popoverContentProps,
+ initialWidth = 240,
+}) => {
+ const triggerRef = useRef<HTMLDivElement>(null);
+ const [width, setWidth] = useState(initialWidth);
+
+ return (
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="lg"
+ padding="xl"
+ alignItems="flex-start"
+ >
+ <ActionButton
+ label="Grow trigger"
+ onPress={() => {
+ setWidth((w) => w + 80);
+ }}
+ />
+ <Popover {...popoverProps}>
+ <Box ref={triggerRef} data-testid="width-trigger" style={{ width }}>
+ <PopoverTrigger>
+ <ActionButton label="Open" style={{ width: "100%" }} />
+ </PopoverTrigger>
+ </Box>
+ <PopoverContent
+ placement="bottom"
+ triggerRef={triggerRef}
+ isNonModal={true}
+ shouldCloseOnInteractOutside={() => false}
+ {...popoverContentProps}
+ >
+ <Dialog
+ size="content"
+ aria-label="content"
+ className={sprinkles({ padding: "md" })}
+ // Fill the trigger-matched container so the bordered content spans
+ // the full width instead of hugging its text.
+ style={{ width: "100%" }}
+ >
+ <Text type="label">Width-matched popover</Text>
+ </Dialog>
+ </PopoverContent>
+ </Popover>
+ </Box>
+ );
+};
+
 export const PopoverArrowExample: React.FC<
  Omit<
  PopoverProps & {
@@ -30947,6 +32575,11 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
  );
 };`},similarTo:[],figmaUrl:null},IconSlider:{id:"core-forms-slider-iconslider",importStatement:'import { IconSlider } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconSliderProps {
 /**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -30954,6 +32587,11 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
  */
 data-block-id?: string
 /**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
  * 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
@@ -32282,7 +33920,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.62.0"};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:"1.0.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.
@@ -32437,13 +34075,13 @@ Use this tool to:
 - Consult **list_components** to find the right component for your needs
 - Reference **theming** for custom design systems
 - Check **styling** for CSS and design token guidance
-`;var I=`# List of available components in Baseline UI design system
+`;var S=`# List of available components in Baseline UI design system
 | Name | Description | Similar To |
 | --- | --- | --- |
 ${Object.entries(o).toSorted(([n],[t])=>n.localeCompare(t)).map(([n,{description:t,similarTo:e}])=>`|${n}|${t}|${e?.join(", ")||""}|`).join(`
 `)}
-`,S=Object.entries(c).map(([n,t])=>`${n}
+`,P=Object.entries(c).map(([n,t])=>`${n}
 
       ${t.map(e=>"- "+e).join(`
 `)}`).join(`
-`);async function P(){let n=new mcp_js.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:zod.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:zod.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:zod.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 stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await P())();
+`);async function k(){let n=new mcp_js.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:S}]})),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:zod.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:zod.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:zod.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 stdio_js.StdioServerTransport;await n.connect(t);}(async()=>await k())();