@baseline-ui/mcp 3.7.0 → 3.9.0

package/dist/server.cjs

@@ -2103,7 +2103,7 @@ export const NativeButtonIconButtonExample: React.FC<
     ActionableWithDynamicChildStyling,
     BasicActionable,
     DisabledActionable,
-} from "@baseline-ui/core";`,description:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.",documentation:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.\n\n* Makes any React element clickable and interactive\n* Mouse, touch, and keyboard event handling with press state management\n* Keyboard focus management and cross-browser normalization\n* Support for Space and Enter keys\n* Dynamic styling based on UI state (hovered, focused, pressed, disabled)\n* Flexible element type support (button, div, etc.)\n* Separate styling for wrapper and child elements\n\nThe `Actionable` component wraps a single React element and makes it clickable. Here's a basic example wrapping a `Code` component:\n\nBy default, `Actionable` renders a `button` element. You can change this using the `elementType` prop. This example shows using a `div` element type:\n\nYou can disable interactions by passing the `isDisabled` prop:\n\nYou can style the child element based on the component's UI state using the `childClassName` and `childStyle` props. These accept either static values or functions that receive UI state options. This example demonstrates dynamic styling that responds to hover, focus, and press states:\n\nSimilarly, you can style the wrapper element based on UI state using the `className` and `style` props. This example shows how to style the button wrapper based on interaction states:\n\n`Actionable` works with any React element, including complex nested components. This example shows a clickable card with multiple nested components:\n\nThe `className`, `style`, `childClassName`, and `childStyle` props can accept functions that receive UI state options:\n\n```typescript\ntype UIStateOptions = {\n isHovered?: boolean; // Whether the element is hovered\n isFocused?: boolean; // Whether the element is focused\n isPressed?: boolean; // Whether the element is currently pressed\n isDisabled?: boolean; // Whether the element is disabled\n isFocusVisible?: boolean; // Whether the element has keyboard focus\n};\n```\n\nThe component adds data attributes to the wrapper element that you can use for styling:\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------------------------------- |\n| `[data-disabled]` | Whether the actionable is disabled. |\n| `[data-focused]` | Whether the actionable is focused, either via mouse or keyboard. |\n| `[data-hovered]` | Whether the actionable is currently hovered with a mouse. |\n| `[data-focus-visible]` | Whether the actionable has keyboard focus. |\n| `[data-pressed]` | Whether the actionable is currently pressed. |\n\nThe `Actionable` component provides full keyboard and screen reader support through React Aria's button hooks. It automatically handles:\n\n* Keyboard focus management\n* ARIA attributes for accessibility\n* Keyboard event handling (Space and Enter keys)\n* Focus ring visibility based on keyboard vs mouse interaction\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Space` | Activates the actionable element. |\n| `Enter` | Activates the actionable element. |",props:`interface ActionableProps {
+} from "@baseline-ui/core";`,description:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.",documentation:"`Actionable` is a wrapper that gives any child element button-like press, keyboard, and focus behavior without changing its visual structure. Use it when you need to make a custom element, card, or arbitrary layout clickable while preserving its existing markup and styles.\n\n* Makes any React element clickable and interactive\n* Mouse, touch, and keyboard event handling with press state management\n* Keyboard focus management and cross-browser normalization\n* Support for Space and Enter keys\n* Dynamic styling based on UI state (hovered, focused, pressed, disabled)\n* Flexible element type support (button, div, etc.)\n* Separate styling for wrapper and child elements\n\nThe `Actionable` component wraps a single React element and makes it clickable. Here's a basic example wrapping a `Code` component:\n\nBy default, `Actionable` renders a `button` element. You can change this using the `elementType` prop. This example shows using a `div` element type:\n\nYou can disable interactions by passing the `isDisabled` prop:\n\nYou can style the child element based on the component's UI state using the `childClassName` and `childStyle` props. These accept either static values or functions that receive UI state options. This example demonstrates dynamic styling that responds to hover, focus, and press states:\n\nSimilarly, you can style the wrapper element based on UI state using the `className` and `style` props. This example shows how to style the button wrapper based on interaction states:\n\n`Actionable` works with any React element, including complex nested components. This example shows a clickable card with multiple nested components:\n\nThe `className`, `style`, `childClassName`, and `childStyle` props can accept functions that receive UI state options:\n\n```typescript\ntype UIStateOptions = {\n isHovered?: boolean; // Whether the element is hovered\n isFocused?: boolean; // Whether the element is focused\n isPressed?: boolean; // Whether the element is currently pressed\n isDisabled?: boolean; // Whether the element is disabled\n isFocusVisible?: boolean; // Whether the element has keyboard focus\n};\n```\n\nThe component adds data attributes to the wrapper element that you can use for styling:\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------------------------------- |\n| `[data-disabled]` | Whether the actionable is disabled. |\n| `[data-focused]` | Whether the actionable is focused, either via mouse or keyboard. |\n| `[data-hovered]` | Whether the actionable is currently hovered with a mouse. |\n| `[data-focus-visible]` | Whether the actionable has keyboard focus. |\n| `[data-pressed]` | Whether the actionable is currently pressed. |\n\nThe `Actionable` component provides full keyboard and screen reader support. It automatically handles:\n\n* Keyboard focus management\n* ARIA attributes for accessibility\n* Keyboard event handling (Space and Enter keys)\n* Focus ring visibility based on keyboard vs mouse interaction\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Space` | Activates the actionable element. |\n| `Enter` | Activates the actionable element. |",props:`interface ActionableProps {
 /**
  * The button's class name.
  */
@@ -2378,7 +2378,7 @@ A simple confirmation dialog with only a title and action buttons, without a mes
 
 <a href="?path=/story/core-overlays-alertdialog--with-title-only">View story</a>
 
-By default, the first focusable element receives focus when the dialog opens. Use the \`autoFocusButton\` prop to specify which button should receive initial focus.
+By default, the dialog element itself receives focus when it opens. Use the \`autoFocusButton\` prop to focus the primary or cancel button instead.
 
 The primary action button can be disabled using \`isPrimaryActionDisabled\`.
 
@@ -3753,18 +3753,29 @@ export const UnavailableCalendarExample: React.FC<
 };
 
 export const InternationalCalendarExample: React.FC<
- Omit<CalendarProps, "defaultValue" | "value"> & {
+ Omit<CalendarProps, "defaultValue" | "value" | "minValue" | "maxValue"> & {
  defaultValue?: string;
  /** Era of \`defaultValue\`, e.g. \`"BC"\`, which an ISO date string cannot express. */
  defaultValueEra?: string;
+ minValue?: string;
+ maxValue?: string;
  locale: string;
  }
-> = ({ defaultValue, defaultValueEra, locale, ...rest }) => {
+> = ({
+ defaultValue,
+ defaultValueEra,
+ minValue,
+ maxValue,
+ locale,
+ ...rest
+}) => {
  const date = defaultValue ? parseDate(defaultValue) : undefined;
  return (
  <I18nProvider locale={locale}>
  <Calendar
  {...rest}
+ minValue={minValue ? parseDate(minValue) : undefined}
+ maxValue={maxValue ? parseDate(maxValue) : undefined}
  defaultValue={
  date && defaultValueEra
  ? new CalendarDate(defaultValueEra, date.year, date.month, date.day)
@@ -4268,18 +4279,29 @@ export const UnavailableCalendarExample: React.FC<
 };
 
 export const InternationalCalendarExample: React.FC<
- Omit<CalendarProps, "defaultValue" | "value"> & {
+ Omit<CalendarProps, "defaultValue" | "value" | "minValue" | "maxValue"> & {
  defaultValue?: string;
  /** Era of \`defaultValue\`, e.g. \`"BC"\`, which an ISO date string cannot express. */
  defaultValueEra?: string;
+ minValue?: string;
+ maxValue?: string;
  locale: string;
  }
-> = ({ defaultValue, defaultValueEra, locale, ...rest }) => {
+> = ({
+ defaultValue,
+ defaultValueEra,
+ minValue,
+ maxValue,
+ locale,
+ ...rest
+}) => {
  const date = defaultValue ? parseDate(defaultValue) : undefined;
  return (
  <I18nProvider locale={locale}>
  <Calendar
  {...rest}
+ minValue={minValue ? parseDate(minValue) : undefined}
+ maxValue={maxValue ? parseDate(maxValue) : undefined}
  defaultValue={
  date && defaultValueEra
  ? new CalendarDate(defaultValueEra, date.year, date.month, date.day)
@@ -4368,7 +4390,7 @@ export const RangeCalendarExample: React.FC<
  />
  </>
  );
-};`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a 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 {
+};`},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* 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
@@ -4468,7 +4490,7 @@ children: React.ReactNode
       "test": "cross-env BABEL_ENV=test jest",
       "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
     }
-  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
+  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focused]` | Applied when the button is focused, either via a mouse or keyboard |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
 /**
  * Whether the overlay is open by default (controlled).
  */
@@ -4542,7 +4564,9 @@ includePicker?: boolean
  * that is currently selected. If boolean, the label will be shown only when
  * the color is not \`null\`. If a function, the function will be called with
  * the current color and should return a string. If \`false\`, the label will
- * not be shown.
+ * not be shown, but the default trigger's accessible name still includes the
+ * color name. A custom \`renderTriggerButton\` receives \`colorName: false\` and
+ * is responsible for naming its trigger.
  * 
  * @default true
  */
@@ -4722,10 +4746,13 @@ import { presets } from "./data";
 
 import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
 
-export const CustomTriggerButton = () => {
+export const CustomTriggerButton: React.FC<
+ Omit<ColorInputProps, "renderTriggerButton">
+> = (props) => {
  return (
  <ColorInput
  label="label"
+ presets={presets}
  renderTriggerButton={({ colorName, ref, triggerProps }) => (
  <ActionIconButton
  {...triggerProps}
@@ -4735,6 +4762,7 @@ export const CustomTriggerButton = () => {
  aria-haspopup="true"
  />
  )}
+ {...props}
  />
  );
 };
@@ -4835,6 +4863,10 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
  />
 );
 
+export const RedPresetColorInput: React.FC<ColorInputProps> = (props) => (
+ <ColorInput presets={presets} defaultValue="#ff0000" {...props} />
+);
+
 export const IconColorInputExample: React.FC<
  Omit<IconColorInputProps, "icon">
 > = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
@@ -8036,7 +8068,7 @@ export const TruncatedTitleDisclosure: React.FC = () => {
  </Disclosure>
  </div>
  );
-};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`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 "@baseline-ui/core";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
+};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`Drawer` is a dialog panel that hosts secondary content or actions; inside a `Modal` with `enableDrawer` it slides in from the edge of the screen. 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 dialog panel that hosts secondary content or actions; inside a `Modal` with `enableDrawer` it slides in from the edge of the screen. 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"`, labelled by its title.\n* Focus is moved to the dialog on mount.\n* `Drawer` on its own is not modal: content outside it stays available to assistive technologies, focus can leave it, and focus is not restored on unmount. Render it inside a `Modal` (a `Dialog` with `inheritDrawer` in a `ModalContent` with `enableDrawer`) to get those behaviours.\n\n```jsx\nimport { Drawer } from "@baseline-ui/core";\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
@@ -9763,7 +9795,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 `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 {
+);`}],implementation:""},similarTo:[],figmaUrl:null},FileList:{id:"core-collections-filelist",breadcrumb:"Core/Collections/FileList",importStatement:'import { FileList, Image } from "@baseline-ui/core";',description:"FileList renders a list of files. The default `compact` variant shows each uploaded or attached file with its name, an upload-progress spinner or remove button, and an optional error state; use it to surface attachments inside forms, drawers, or upload flows. The `expanded` and `grid` variants offer files to pick instead, such as samples next to a `FileUploader`.",documentation:'FileList renders a list of files. The default `compact` variant shows each uploaded or attached file with its name, an upload-progress spinner or remove button, and an optional error state; use it to surface attachments inside forms, drawers, or upload flows. The `expanded` and `grid` variants offer files to pick instead, such as samples next to a `FileUploader`.\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 `compact` 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. In the `expanded` and `grid` variants, disabled items are dimmed and cannot be picked with `onAction`.\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\n`variant="expanded"` renders each item as a card with a file icon, its name, a\n`description` and an optional `tag`; `variant="grid"` renders preview tiles with\nthe item\'s `preview` (typically an `Image`), name and `description`. Use them to\noffer files to pick, such as samples next to a `FileUploader`, and handle the\npick in `onAction`. They do not render the remove button, spinner or error\nmessages of the default `compact` variant.\n\n```jsx\n<FileList\n variant="grid"\n label="Or start from a sample"\n items={[\n { id: "invoice", name: "Invoice", description: "2 pages" },\n {\n id: "medical-bill",\n name: "Medical bill",\n preview: <Image src="/medical-bill.png" alt="Medical bill preview" />,\n },\n ]}\n onAction={loadSample}\n/>\n```\n\nA `tag` is a `label` and an optional `variant`, such as\n`{ label: "Compliant", variant: "green" }`. An `Image` preview that fails to load shows the file\nicon. `label` renders a title above the list that also names it for assistive\ntechnology.\n\nLong lists scroll so the content around them stays in view: `expanded` shows\nabout five rows, and `grid` about two, with up to six tiles per row.\n\nEach item is named by its file name and described by its `description` and\n`tag`. In `grid`, `ArrowLeft` and `ArrowRight` move between tiles in a row, and\n`ArrowUp` and `ArrowDown` move between rows.\n\nProvide `label`, `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| `ArrowLeft` / `ArrowRight` | In `grid`, moves focus between tiles in a row. |\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.
  */
@@ -9772,6 +9804,30 @@ className?: string
  * The style applied to the root element.
  */
 style?: React.CSSProperties
+/**
+ * How the items are rendered.
+ * 
+ * - \`compact\` (default): divided rows with a file icon and name, for files
+ *   the user has added. The only variant that renders the remove button,
+ *   the loading spinner and error messages.
+ * - \`expanded\`: bordered cards with the name, \`description\` and \`tag\`.
+ *   Past about five rows the list scrolls.
+ * - \`grid\`: preview tiles with the \`preview\`, name and \`description\`, up to
+ *   six per row. Past about two rows the grid scrolls.
+ * 
+ * @default "compact"
+ */
+variant?: "compact" | "expanded" | "grid"
+/**
+ * A title rendered above the list that also labels it for assistive
+ * technology.
+ */
+label?: React.ReactNode
+/**
+ * Called with the \`id\` of the item the user picks by clicking it or
+ * pressing Enter.
+ */
+onAction?: (id: string) => void
 /**
  * The items rendered in the list. Pass a stable reference (e.g. memoize
  * or hoist) when possible \u2014 every new array identity rebuilds the
@@ -9779,18 +9835,19 @@ style?: React.CSSProperties
  */
 items: FileListItem[]
 /**
- * Called when the user removes an item via the row button or Delete.
+ * Called when the user removes an item via the row button, Delete or
+ * Backspace. Only the \`compact\` variant supports removal.
  */
 onRemove?: (id: string) => void
 /**
  * Keys of items that should be disabled individually, or \`"all"\` to
  * disable every item. Disabled items cannot be removed via the row
- * button or keyboard.
+ * button or keyboard, or picked with \`onAction\`.
  */
 disabledKeys?: Iterable<string> | "all"
 /**
  * Overrides the accessible name of a file row while it is loading, and of
- * its spinner.
+ * its spinner. Used in the \`compact\` variant only.
  * 
  * Message id: \`bui.fileList.loading\`. Defaults to \`"Loading {fileName}"\`.
  * A string is used as-is, with no placeholder substitution. To include
@@ -9800,7 +9857,7 @@ disabledKeys?: Iterable<string> | "all"
 loadingLabel?: string | ((values: { fileName: string }) => string)
 /**
  * Overrides the accessible name of a removable file row, telling keyboard
- * users how to delete it.
+ * users how to delete it. Used in the \`compact\` variant only.
  * 
  * Message id: \`bui.fileList.removeHint\`. Defaults to
  * \`"{fileName}, press Delete or Backspace to remove"\`. A string is used
@@ -9932,9 +9989,90 @@ removeHintLabel?: string | ((values: { fileName: string }) => string)
               setItems((current) => current.filter((item) => item.id !== id));
             }} />
     );
+};`},{id:"core-collections-filelist--expanded",name:"Expanded",snippet:`const Expanded = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label={undefined}
+            variant="expanded"
+            label="Or start from a sample"
+            onAction={fn()}
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--grid",name:"Grid",snippet:`const Grid = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            variant="grid"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--many-expanded",name:"Many Expanded",snippet:`const ManyExpanded = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--many-grid",name:"Many Grid",snippet:`const ManyGrid = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--expanded-disabled",name:"Expanded Disabled",snippet:`const ExpandedDisabled = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            disabledKeys="all"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
 };`}],implementation:`import React from "react";
 
 import { ActionButton } from "../../ActionButton";
+import { Image } from "../../Image/Image";
 import { FileList } from "../FileList";
 
 import type { FileListItem, FileListProps } from "../FileList.types";
@@ -9991,9 +10129,11 @@ export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
 
 // Swaps in a new array whose items carry new content, which is the only way a caller can
 // legitimately invalidate the memoised options.
-export const UploadingFileList: React.FC<{ errorMessage?: string }> = ({
- errorMessage,
-}) => {
+export const UploadingFileList: React.FC<{
+ errorMessage?: string;
+ description?: string;
+ variant?: FileListProps["variant"];
+}> = ({ errorMessage, description, variant }) => {
  const [items, setItems] = React.useState<FileListItem[]>(loadingItems);
 
  return (
@@ -10002,12 +10142,18 @@ export const UploadingFileList: React.FC<{ errorMessage?: string }> = ({
  label="Finish upload"
  onPress={() => {
  setItems((prev) =>
- prev.map((item) => ({ ...item, isLoading: false, errorMessage })),
+ prev.map((item) => ({
+ ...item,
+ isLoading: false,
+ errorMessage,
+ description,
+ })),
  );
  }}
  />
  <FileList
  aria-label="Uploaded files"
+ variant={variant}
  items={items}
  onRemove={(id) => {
  setItems((prev) => prev.filter((item) => item.id !== id));
@@ -10158,23 +10304,79 @@ export const AriaDetailsFileList: React.FC = () => (
  items={defaultItems}
  />
  </>
-);`},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 {
+);
+
+const LOADABLE_IMAGE =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+const sampleItems: FileListItem[] = [
+ {
+ id: "annual-report",
+ name: "annual-report-2024.pdf",
+ description: "12 pages \xB7 untagged",
+ tag: { label: "Non-compliant", variant: "red" },
+ preview: (
+ <Image src={LOADABLE_IMAGE} alt="" data-testid="annual-report-preview" />
+ ),
+ },
+ {
+ id: "invoice",
+ name: "invoice-tagged.pdf",
+ description: "3 pages \xB7 fully tagged",
+ tag: { label: "Compliant", variant: "green" },
+ },
+];
+
+export const SampleFileList: React.FC<Partial<FileListProps>> = (props) => (
+ <FileList
+ variant="expanded"
+ label="Or start from a sample"
+ items={sampleItems}
+ {...props}
+ />
+);
+
+export const BrokenPreviewFileList: React.FC = () => (
+ <FileList
+ variant="grid"
+ aria-label="Samples"
+ items={[
+ {
+ id: "scan",
+ name: "scan.pdf",
+ preview: <Image src="http://localhost:1/missing.png" alt="" />,
+ },
+ ]}
+ />
+);`},similarTo:["FileUploader","ImageDropZone"],figmaUrl:null},FileUploader:{id:"core-forms-fileuploader",breadcrumb:"Core/Forms/FileUploader",importStatement:'import { Box, FileList, FileUploader, Image, 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 blank space in the drop area (or the\n button, in the `button` variant)\n* Drag-and-drop and paste support in the `dropzone-*` variants\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 four visual treatments, chosen with `variant`.\n\n* `dropzone-box` (default) renders a filled drop area that accepts dragged and\n pasted files. Clicking blank space in the area opens the native file picker.\n* `dropzone-inline` outlines the drop area with a dashed border and rounded\n corners instead of rendering it as a plain filled box.\n* `dropzone-compact` renders a one-line dashed bar with the upload icon, the\n action text and the `description` side by side. The text truncates with an\n ellipsis instead of wrapping, so it suits tight layouts; keep the\n `description` plain text, since a link in it can be cut off. The `children`\n render below the bar, outside the drop area.\n* `button` renders a single `ActionButton` that opens the file picker, with no\n drop area. Use it when drag-and-drop is not appropriate for the surrounding\n layout.\n\n`variant="dropzone"` and `isInline` still work but are deprecated: `"dropzone"`\nis `dropzone-box`, or `dropzone-inline` with `isInline`. Use `dropzone-box` and\n`dropzone-inline` instead.\n\n```tsx\n<FileUploader label="Box" />\n<FileUploader variant="dropzone-inline" label="Inline" />\n<FileUploader variant="dropzone-compact" description="Supports .mov and .mp4" />\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-*`\nvariants 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\nTo offer sample files the user can start from instead of uploading their own,\nrender a `FileList` with the `expanded` or `grid` variant and handle its\n`onAction`. The uploader neither loads the sample nor calls `onAdd`; fetching it\nis up to you.\n\nTo show the samples below the drop area, render the `FileList` next to the\nuploader:\n\nTo put them inside the drop area, which suits large empty states, pass a\n`grid` `FileList` as the uploader\'s children; an `expanded` list there shrinks\nto its widest card. A file dropped anywhere on the area is\nstill added, and clicking blank space in it opens the file picker, while\nclicking a sample only picks it. Anything clickable among the children should\nbe a Baseline component: a native `<button>`, `<a>` or `<input>` also opens\nthe picker. `isDisabled` disables every sample too. The\n`button` and `dropzone-compact` variants render the children below the\ncontrol instead.\n\n```tsx\n<FileUploader onAdd={handleAdd}>\n <FileList\n variant="grid"\n label="Or start from a sample"\n items={[\n { id: "invoice", name: "Invoice" },\n {\n id: "medical-bill",\n name: "Medical bill",\n preview: <Image src="/medical-bill.png" alt="Medical bill preview" />,\n },\n ]}\n onAction={loadSample}\n />\n</FileUploader>\n```\n\nSee [`FileList`](?path=/docs/core-collections-filelist--docs) for its variants,\nscrolling and keyboard interaction.\n\nThe root element exposes the current variant.\n\n| Selector | Description |\n| ---------------- | ----------------------------------------------------------------------------------------------- |\n| `[data-variant]` | The active variant (`"dropzone-box"`, `"dropzone-inline"`, `"dropzone-compact"` or `"button"`). |\n\n| Key | Function |\n| -------------- | ------------------------------------------------------------------------------------------- |\n| `Tab` | Moves focus to the upload trigger, then to any link in the description and to the children. |\n| `Enter` | Activates the upload trigger and opens the native file picker. |\n| `Space` | Activates the upload trigger and opens the native file picker. |\n| Paste shortcut | With the upload trigger 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.
- * 
+ * - \`dropzone-box\` (default): a filled drop area that accepts dragged and
+ *   pasted files. Clicking blank space in the area opens the file picker.
+ * - \`dropzone-inline\`: the same drop area outlined with a dashed border and
+ *   rounded corners instead of a filled box.
+ * - \`dropzone-compact\`: a one-line dashed bar with the upload icon, the
+ *   action text and the \`description\` side by side. The action text and the
+ *   description truncate with an ellipsis rather than wrap. The \`children\`
+ *   render below the bar, outside the drop area.
+ * - \`button\`: an \`ActionButton\` that opens the file picker. No drop target
+ *   is rendered.
+ * - \`dropzone\` (deprecated): an alias for \`dropzone-box\`, or for
+ *   \`dropzone-inline\` when \`isInline\` is set. Use one of the values above.
+ * 
+ * @default "dropzone-box"
+ */
+variant?: | "dropzone-box"
+| "dropzone-inline"
+| "dropzone-compact"
+| "button"
+| "dropzone"
+/**
+ * Whether the drop area is rendered inline. Only honoured when \`variant\` is
+ * omitted or the deprecated \`"dropzone"\`; any other \`variant\` ignores it.
+ * 
+ * @deprecated Use \`variant="dropzone-inline"\`.
  * @default false
  */
 isInline?: boolean
@@ -10183,7 +10385,13 @@ isInline?: boolean
  */
 label?: React.ReactNode
 /**
- * Optional description rendered below the label.
+ * Optional description. The dropzone variants render it inside the drop
+ * area, under the action text (beside it in \`dropzone-compact\`), where
+ * clicking it opens the file picker; a link in it should be a Baseline
+ * \`Link\`, since a native \`<a>\` also opens the picker. Keep it plain text in
+ * \`dropzone-compact\`: it truncates there, so a link can be cut off while
+ * still taking keyboard focus. The \`button\` variant renders it below the
+ * label.
  */
 description?: React.ReactNode
 /**
@@ -10221,12 +10429,26 @@ errorMessage?: string
  */
 buttonLabel?: string
 /**
- * The text rendered inside the clickable drop area in the \`dropzone\`
- * variant.
+ * The text rendered inside the clickable drop area in the dropzone
+ * variants.
  * 
  * @default "Drop files here or click to upload"
  */
 dropzoneLabel?: string
+/**
+ * Content offered alongside the drop area, typically a \`FileList\` of sample
+ * files the user can pick instead of uploading one. In the \`dropzone-box\`
+ * and \`dropzone-inline\` variants it renders inside the drop area, centered,
+ * so a file dropped on it is still added; clicking blank space in the drop
+ * area opens the file picker, and clicking an item, button or link does not.
+ * Use Baseline components for anything clickable here: a native \`<button>\`,
+ * \`<a>\` or \`<input>\` also opens the picker. Use the \`grid\` \`FileList\`
+ * variant here; an \`expanded\` list shrinks to its widest card. The \`button\`
+ * and \`dropzone-compact\` variants render it below the control. Disabling the
+ * uploader disables a \`FileList\` passed here. To show samples outside the
+ * drop area, render the \`FileList\` next to the uploader instead.
+ */
+children?: React.ReactNode
 }`,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) => (
@@ -10236,15 +10458,20 @@ dropzoneLabel?: string
     defaultProps={args}
     cellStyle={{ width: 240 }}
     variants={{
-      Dropzone: [
-        { variant: "dropzone" },
-        { variant: "dropzone", ...ERROR_PROPS },
-        { variant: "dropzone", ...DISABLED_PROPS },
+      Box: [
+        { variant: "dropzone-box" },
+        { variant: "dropzone-box", ...ERROR_PROPS },
+        { variant: "dropzone-box", ...DISABLED_PROPS },
       ],
       Inline: [
-        { isInline: true },
-        { isInline: true, ...ERROR_PROPS },
-        { isInline: true, ...DISABLED_PROPS },
+        { variant: "dropzone-inline" },
+        { variant: "dropzone-inline", ...ERROR_PROPS },
+        { variant: "dropzone-inline", ...DISABLED_PROPS },
+      ],
+      Compact: [
+        { variant: "dropzone-compact" },
+        { variant: "dropzone-compact", ...ERROR_PROPS },
+        { variant: "dropzone-compact", ...DISABLED_PROPS },
       ],
       Button: [
         { variant: "button" },
@@ -10261,7 +10488,17 @@ dropzoneLabel?: string
         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 />
+    <UploaderWithFileList
+        label="Label"
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        variant="dropzone-inline" />
+</Box>;`},{id:"core-forms-fileuploader--compact",name:"Compact",snippet:`const Compact = () => <Box style={{ width: 480 }}>
+    <UploaderWithFileList
+        label="Label"
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        variant="dropzone-compact" />
 </Box>;`},{id:"core-forms-fileuploader--error-dropzone",name:"Error Dropzone",snippet:`const ErrorDropzone = () => <Box style={{ width: 240 }}>
     <UploaderWithFileList
         label="Label"
@@ -10275,11 +10512,40 @@ dropzoneLabel?: string
         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:`import React from "react";
+    <UploaderWithFileList label={undefined} description="Supports .mov and .mp4" onAdd={fn()} />
+</Box>;`},{id:"core-forms-fileuploader--samples-outside",name:"Samples Outside",snippet:`const SamplesOutside = () => <Box display="flex" flexDirection="column" gap="xl" style={{ width: 480 }}>
+    <FileUploader
+        label={undefined}
+        description="Supports .mov and .mp4"
+        onAdd={fn()}
+        variant="dropzone-inline" />
+    <FileList
+        variant="expanded"
+        label={SAMPLES_LABEL}
+        items={expandedSamples}
+        disabledKeys={args.isDisabled ? "all" : undefined}
+        onAction={fn()} />
+</Box>;`},{id:"core-forms-fileuploader--samples-inside-grid",name:"Samples Inside Grid",snippet:`const SamplesInsideGrid = () => <Box style={{ width: 720 }}>
+    <FileUploader label="Label" description="Supports .mov and .mp4" onAdd={fn()}><FileList variant="grid" label={SAMPLES_LABEL} items={gridSamples} onAction={fn()} /></FileUploader>
+</Box>;`},{id:"core-forms-fileuploader--samples-inside-disabled",name:"Samples Inside Disabled",error:{name:"SyntaxError",message:`Expected render to be an arrow function or function expression
+  239 |     isDisabled: true,
+  240 |   },
+> 241 |   render: SamplesInsideGrid.render,
+      |           ^^^^^^^^^^^^^^^^^^^^^^^^
+  242 | };
+  243 |`}}],implementation:`import React from "react";
+import { useDrag } from "react-aria/useDrag";
+import { createPortal } from "react-dom";
 
+import { ActionButton } from "../../ActionButton";
+import { Box } from "../../Box";
+import { Checkbox } from "../../Checkbox";
+import { SampleFileList } from "../../FileList/__tests__/testComponents";
+import { FileList } from "../../FileList/FileList";
+import { Link } from "../../Link";
 import { FileUploader } from "../FileUploader";
 
+import type { FileListProps } from "../../FileList/FileList.types";
 import type { FileUploaderProps } from "../FileUploader.types";
 
 export const ToggleDisabledFileUploaderExample: React.FC<FileUploaderProps> = (
@@ -10300,6 +10566,130 @@ export const ToggleDisabledFileUploaderExample: React.FC<FileUploaderProps> = (
  <FileUploader label="Upload" isDisabled={isDisabled} {...props} />
  </>
  );
+};
+
+interface SampleFileUploaderProps extends Partial<FileUploaderProps> {
+ listVariant?: FileListProps["variant"];
+ onAction?: FileListProps["onAction"];
+ disabledKeys?: FileListProps["disabledKeys"];
+}
+
+export const SampleFileUploader: React.FC<SampleFileUploaderProps> = ({
+ listVariant = "expanded",
+ onAction,
+ disabledKeys,
+ ...props
+}) => (
+ <FileUploader label="Upload" {...props}>
+ <SampleFileList
+ variant={listVariant}
+ onAction={onAction}
+ disabledKeys={disabledKeys}
+ />
+ </FileUploader>
+);
+
+export const DisabledAncestorFileUploader: React.FC = () => (
+ <div aria-disabled="true">
+ <SampleFileUploader />
+ </div>
+);
+
+export const NarrowSampleGridFileUploader: React.FC = () => (
+ <Box style={{ width: 240 }}>
+ <SampleFileUploader listVariant="grid" />
+ </Box>
+);
+
+export const CompactGridCellFileUploader: React.FC = () => (
+ <Box display="grid" style={{ width: 300, gridTemplateColumns: "1fr" }}>
+ <FileUploader
+ variant="dropzone-compact"
+ description="Supports .mov, .mp4, .avi, .mkv and .webm up to 2 GB"
+ />
+ </Box>
+);
+
+export const CenteredGridFileUploader: React.FC = () => (
+ <Box style={{ width: 640 }}>
+ <FileUploader label="Upload">
+ <FileList
+ variant="grid"
+ aria-label="Samples"
+ items={["a", "b", "c", "d", "e"].map((id) => ({
+ id,
+ name: \`\${id}.pdf\`,
+ }))}
+ onAction={() => {}}
+ />
+ </FileUploader>
+ </Box>
+);
+
+export const DescriptionLinkFileUploader: React.FC<{
+ onPress?: () => void;
+}> = ({ onPress }) => (
+ <FileUploader
+ label="Upload"
+ description={
+ <>
+ PDF up to 10 MB. <Link onPress={onPress}>Supported formats</Link>
+ </>
+ }
+ />
+);
+
+export const SamplesOnFocusFileUploader: React.FC = () => {
+ const [hasSamples, setHasSamples] = React.useState(false);
+
+ return (
+ <div
+ onFocus={() => {
+ setHasSamples(true);
+ }}
+ >
+ <FileUploader label="Upload">
+ {hasSamples ? <SampleFileList /> : null}
+ </FileUploader>
+ </div>
+ );
+};
+
+export const KeyboardDragFileUploader: React.FC = () => {
+ const { dragProps } = useDrag({
+ getItems: () => [{ "text/plain": "hello" }],
+ });
+
+ return (
+ <>
+ <div {...dragProps} role="button" tabIndex={0}>
+ Draggable
+ </div>
+ <SampleFileUploader />
+ </>
+ );
+};
+
+export const InteractiveChildrenFileUploader: React.FC<{
+ onPress?: () => void;
+ onToggle?: (isSelected: boolean) => void;
+}> = ({ onPress, onToggle }) => {
+ const [portalContainer, setPortalContainer] =
+ React.useState<HTMLDivElement | null>(null);
+
+ return (
+ <>
+ <FileUploader label="Upload">
+ <ActionButton label="Load sample" onPress={onPress} />
+ <Link onPress={() => {}}>Sample link</Link>
+ <Checkbox label="Run text recognition" onChange={onToggle} />
+ {portalContainer
+ ? createPortal(<span>Portaled sample preview</span>, portalContainer)
+ : null}
+ </FileUploader>
+ <div ref={setPortalContainer} />
+ </>
+ );
 };`},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
     Box,
     FrameProvider,
@@ -10921,10 +11311,10 @@ export const PopoverWithFrameBoundaryExample: React.FC<{
  </FrameProvider>
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
+};`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in clear and optional undo and redo. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in clear and optional undo and redo. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
 
 * Draw on the canvas with your mouse or pointer
-* Undo and redo your drawings via keyboard shortcuts
+* Undo and redo your drawings (opt-in via \`enableHistory\`)
 * Clear the canvas via keyboard shortcut (or button)
 
 \`\`\`jsx
@@ -10934,7 +11324,7 @@ import { FreehandCanvas } from "@baseline-ui/core";
 \`\`\`
 
 You can listen for events on the canvas by passing an \`onChange\` prop. The \`onChange\` prop is a function that receives the points that have been drawn on the canvas.
-You can also use \`onChaneEnd\` to listen for the end of a drawing. This is useful if you want to save the drawing to a database or something similar.
+You can also use \`onChangeEnd\` to listen for the end of a drawing. This is useful if you want to save the drawing to a database or something similar.
 
 \`\`\`jsx
 import { FreehandCanvas } from "@baseline-ui/core";
@@ -10952,13 +11342,12 @@ const handleChangeEnd = (points) => {
 
 You can render the canvas with a default value by passing a \`defaultValue\` prop.
 
-By default, the component supports undo and redo via keyboard shortcuts. You can disable this behavior by passing a \`enableHistory\` prop with a value of \`false\`.
+Undo and redo are off by default. Pass \`enableHistory\` to turn them on: the canvas then shows undo and redo buttons, and \`Cmd\` or \`Ctrl\` + \`Z\` undoes.
 
 | Key | Action |
-| ---------------------- | ------ |
-| \`Ctrl\` + \`Z\` | Undo |
-| \`Ctrl\` + \`Shift\` + \`Z\` | Redo |
-| \`Delete\` | Clear |
+| --------------------- | --------------------------- |
+| \`Cmd\` or \`Ctrl\` + \`Z\` | Undo (with \`enableHistory\`) |
+| \`Backspace\` | Clear |
 
 The following strings are used by the \`FreehandCanvas\` component and can be overridden via \`I18nProvider\`:
 
@@ -11118,6 +11507,11 @@ value?: FreehandCanvasLine[]
  * The label for the canvas.
  */
 label?: string
+/**
+ * The accessible name of the canvas. Without it, the canvas is named by
+ * \`label\` or \`aria-labelledby\`, and by "Drawing canvas" when neither is set.
+ */
+aria-label?: string
 /**
  * Whether to enable history for undo/redo.
  * 
@@ -11154,7 +11548,6 @@ redoLabel?: string
  * Description for the canvas.
  */
 description?: string
-aria-label?: any
 }`,stories:{usage:[{id:"core-miscellaneous-freehandcanvas--basic",name:"Basic",snippet:`const Basic = () => <FreehandCanvas
     style={{
       width: 240,
@@ -11300,7 +11693,14 @@ export const TrackedControlledFreehandCanvas = ({
  }}
  />
  );
-};`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
+};
+
+export const FreehandCanvasWithHint = (props: FreehandCanvasProps) => (
+ <>
+ <p id="freehand-canvas-hint">Sign inside the box.</p>
+ <FreehandCanvas {...props} />
+ </>
+);`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
 
 * **Item Selection**: Single or multiple selections with optional checkboxes.
 * **Interactive Children**: Supports buttons, checkboxes, and menus within list items.
@@ -12008,7 +12408,116 @@ export const OverridePrecedenceExample: React.FC = () => (
  pageXofYLabel="Prop position"
  />
  </I18nProvider>
-);`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
+);`},similarTo:[],figmaUrl:null},Image:{id:"core-content-image",breadcrumb:"Core/Content/Image",importStatement:'import { Box, Image } from "@baseline-ui/core";',description:"`Image` displays a picture that fills its container, with control over how it is cropped and what shows when it cannot be loaded. Use it for previews and thumbnails.",documentation:'`Image` displays a picture that fills its container, with control over how it is cropped and what shows when it cannot be loaded. Use it for previews and thumbnails.\n\n```jsx\nimport { Image } from "@baseline-ui/core";\n\n<Image src="/photo.png" alt="A mountain at sunrise" />;\n```\n\n`alt` is required. Pass an empty string when the image is decorative.\n\nThe image takes the full width and height of its container, so size the container, not the image. Set `loading="lazy"` to defer loading until the image nears the viewport, for example for thumbnails in a long list. Other `<img>` attributes such as `srcSet` and `sizes` pass through to the underlying element.\n\n`fit` chooses how the image fills its container. `cover` (the default) crops the image to fill it, and `contain` shows the whole image inside it.\n\n```jsx\n<Image src="/photo.png" alt="A mountain at sunrise" fit="contain" />\n```\n\nPass `fallback` to show other content in place of the image when it fails to load, including a server-rendered image that failed before hydration, or when `src` is empty. Without it, the browser\'s broken-image rendering stays. The image is tried again when `src` changes. The fallback replaces the `<img>`, so give meaningful fallback content its own accessible name.\n\n```jsx\n<Image src="/photo.png" alt="A mountain at sunrise" fallback={<Icon />} />\n```\n\nAs a `FileList` item\'s `preview`, an `Image` without a `fallback` shows the file icon.',props:`interface ImageProps {
+/**
+ * The URL of the image to display.
+ */
+src: string
+/**
+ * The text alternative of the image. Pass an empty string when the image is
+ * purely decorative.
+ */
+alt: string
+/**
+ * How the image fills its container. \`cover\` crops the image to fill the
+ * container; \`contain\` shows the whole image inside it.
+ * 
+ * @default "cover"
+ */
+fit?: "cover" | "contain"
+/**
+ * When the browser loads the image. \`lazy\` defers it until the image is near
+ * the viewport, which suits thumbnails in long lists; \`eager\` loads it right
+ * away.
+ * 
+ * @default "eager"
+ */
+loading?: "lazy" | "eager"
+/**
+ * Content rendered in place of the image when it fails to load or \`src\` is
+ * empty. Without it, the browser's broken-image rendering stays. The
+ * fallback replaces the \`<img>\`, so \`alt\`, \`className\`, \`style\` and the ref
+ * do not apply to it; give a meaningful fallback its own accessible name.
+ */
+fallback?: React.ReactNode
+}`,stories:{usage:[{id:"core-content-image--basic",name:"Basic",snippet:'const Basic = () => <Image src="avatar.png" alt="A profile picture" />;'},{id:"core-content-image--contain",name:"Contain",snippet:'const Contain = () => <Image fit="contain" />;'},{id:"core-content-image--fallback",name:"Fallback",snippet:`const Fallback = () => <Image
+    src="missing.png"
+    alt="A profile picture"
+    fallback={(<Box padding="md" typography="body.md.regular" color="text.primary">The image could not be loaded.
+            </Box>)} />;`}],implementation:`import React from "react";
+import { hydrateRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+
+import { ActionButton } from "../../ActionButton";
+import { Image } from "../Image";
+
+import type { Root } from "react-dom/client";
+
+export const ImageFallbackExample: React.FC<{ src: string }> = ({ src }) => (
+ <Image src={src} alt="Sample" fallback={<span>Fallback content</span>} />
+);
+
+/** Hydrates after the server-rendered image settles, so its error fires before React listens. */
+export const HydratedImageFallbackExample: React.FC<{ src: string }> = ({
+ src,
+}) => {
+ const containerRef = React.useRef<HTMLDivElement>(null);
+
+ React.useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+ const element = <ImageFallbackExample src={src} />;
+ // eslint-disable-next-line no-unsanitized/property
+ container.innerHTML = renderToString(element);
+ const image = container.querySelector("img");
+ let root: Root | undefined;
+ const hydrate = () => {
+ root = hydrateRoot(container, element);
+ };
+ if (!image || image.complete) {
+ hydrate();
+ } else {
+ image.addEventListener("error", hydrate, { once: true });
+ image.addEventListener("load", hydrate, { once: true });
+ }
+ return () => {
+ root?.unmount();
+ };
+ }, [src]);
+
+ return <div ref={containerRef} />;
+};
+
+export const EmptySourceImageExample: React.FC = () => (
+ <Image src="" alt="Sample" fallback={<span>Fallback content</span>} />
+);
+
+export const ImageWithoutFallbackExample: React.FC<{
+ src: string;
+ loading?: "lazy" | "eager";
+}> = ({ src, loading }) => <Image src={src} alt="Sample" loading={loading} />;
+
+export const ImageSourcesExample: React.FC<{ sources: string[] }> = ({
+ sources,
+}) => {
+ const [index, setIndex] = React.useState(0);
+
+ return (
+ <>
+ <Image
+ src={sources[index]}
+ alt="Sample"
+ fallback={<span>Fallback content</span>}
+ />
+ <ActionButton
+ label="Next source"
+ onPress={() => {
+ setIndex((i) => (i + 1) % sources.length);
+ }}
+ />
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
 
 * Automatic handling of Keyboard focus management and cross browser normalization
 * Labeling support for screen readers (aria-describedby)
@@ -12140,7 +12649,8 @@ style?: React.CSSProperties
  */
 isDisabled?: boolean
 /**
- * The description to display.
+ * Announced as the file input's description. It is visually hidden; render
+ * any visible helper text yourself.
  */
 description?: string
 /**
@@ -12179,9 +12689,11 @@ defaultImageSrc?: string | File
  */
 imageSrc?: string | File
 /**
- * The alt text to display for the image. This will be used as the \`alt\`
- * attribute of the \`<img>\`. element. If no \`imageAlt\` is provided, the
- * \`label\` will be used.
+ * The alt text for the image, used as the \`alt\` attribute of the \`<img>\`
+ * element. Without it the image renders with an empty \`alt\` and screen
+ * readers skip it.
+ * 
+ * @default ""
  */
 imageAlt?: string
 /**
@@ -14070,6 +14582,33 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
+/**
+ * The placement of the toolbar relative to the selected text.
+ * 
+ * @default "top"
+ */
+placement?: | 'bottom'
+| 'bottom left'
+| 'bottom right'
+| 'bottom start'
+| 'bottom end'
+| 'top'
+| 'top left'
+| 'top right'
+| 'top start'
+| 'top end'
+| 'left'
+| 'left top'
+| 'left bottom'
+| 'start'
+| 'start top'
+| 'start bottom'
+| 'right'
+| 'right top'
+| 'right bottom'
+| 'end'
+| 'end top'
+| 'end bottom'
 /**
  * The children of the InlineToolbar component. This should be a single
  * element that will be used as the trigger for the InlineToolbar. Any text
@@ -14120,7 +14659,6 @@ isDisabled?: boolean
  * \`anchorRect\` instead of the selection.
  */
 anchorRect?: Rect
-placement?: any
 }`,stories:{usage:[{id:"core-overlays-inlinetoolbar--basic",name:"Basic",snippet:`const Basic = () => <InlineToolbar
     onAction={(id: string, selection: Selection) => {
       alert(\`Action \${id} clicked with selection "\${selection.toString()}"\`);
@@ -15491,7 +16029,7 @@ Selection can be controlled or uncontrolled. When uncontrolled, the component ma
 
 The open state can likewise be controlled or uncontrolled. When uncontrolled, use \`defaultOpen\`; to control it, pass \`isOpen\` and handle \`onOpenChange\`.
 
-Each menu item exposes the standard React Aria interaction-state attributes, and Baseline UI adds class hooks on the trigger, popover, and item subparts.
+Each menu item exposes interaction-state \`data-*\` attributes, and Baseline UI adds class hooks on the trigger, popover, and item subparts.
 
 | Selector | Description |
 | ---------------------------------- | ------------------------------------------------------- |
@@ -15555,6 +16093,33 @@ optionStyle?: | React.CSSProperties
     item: TOption,
     renderProps: TRenderProps,
   ) => React.CSSProperties | undefined)
+/**
+ * The placement of the menu relative to its trigger.
+ * 
+ * @default "bottom start"
+ */
+placement?: | 'bottom'
+| 'bottom left'
+| 'bottom right'
+| 'bottom start'
+| 'bottom end'
+| 'top'
+| 'top left'
+| 'top right'
+| 'top start'
+| 'top end'
+| 'left'
+| 'left top'
+| 'left bottom'
+| 'start'
+| 'start top'
+| 'start bottom'
+| 'right'
+| 'right top'
+| 'right bottom'
+| 'end'
+| 'end top'
+| 'end bottom'
 /**
  * How the menu is opened from its trigger. With \`"longPress"\`, a long press
  * or \`Alt\` + \`ArrowDown\` / \`ArrowUp\` / \`Enter\` / \`Space\` opens the menu.
@@ -15620,7 +16185,6 @@ defaultSelectedKeys?: | "all"
  * assignable.
  */
 onSelectionChange?: (keys: Selection, meta?: { sectionId: string }) => void
-placement?: any
 }`,stories:{usage:[{id:"core-collections-menu--basic",name:"Basic",snippet:'const Basic = () => <Menu triggerLabel="Menu Trigger" items={items} />;'},{id:"core-collections-menu--with-sections",name:"With Sections",snippet:'const WithSections = () => <Menu triggerLabel="Menu Trigger" items={itemsWithSections} />;'},{id:"core-collections-menu--controlled-open",name:"Controlled Open",snippet:'const ControlledOpen = () => <Menu triggerLabel="Menu Trigger" items={items} isOpen />;'},{id:"core-collections-menu--disabled",name:"Disabled",snippet:'const Disabled = () => <Menu triggerLabel="Menu Trigger" items={items} isDisabled />;'},{id:"core-collections-menu--with-disabled-keys",name:"With Disabled Keys",snippet:'const WithDisabledKeys = () => <Menu triggerLabel="Menu Trigger" items={items} disabledKeys={["paste"]} />;'},{id:"core-collections-menu--single-selection",name:"Single Selection",snippet:`const SingleSelection = () => {
     const [selectedKey, setSelectedKey] = React.useState(
       new Set<string | number>(["light"]),
@@ -20287,7 +20851,7 @@ export const PopoverTriggerButtonExample: React.FC<{
  return (
  <PopoverExample popoverProps={{ type }}>{buttons[button]}</PopoverExample>
  );
-};`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:'import { Portal } from "@baseline-ui/core";',description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into an overlay container managed by React Aria\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
+};`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:'import { Portal } from "@baseline-ui/core";',description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into a separate overlay container\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
 /**
  * The container element in which the overlay portal will be placed.
  * 
@@ -20461,7 +21025,7 @@ addAriaLabel?: string
  * - "positive": Represents a positive accent color that doesn't change with
  *   theme.
  * 
- * @default "theme"
+ * @default "positive"
  */
 accent?: "theme" | "positive"
 }`,stories:{usage:[{id:"core-content-preview--svg-preview",name:"SVG Preview",snippet:`const SVGPreview = () => <Preview
@@ -20807,7 +21371,6 @@ variant?: "active" | "inactive" | "success" | "error"
 * Supports \`labelPosition="start"\` to place the group label to the left of the options.
 * \`isReadOnly\` prevents selection changes while keeping the group focusable \u2014 distinct from \`isDisabled\` which removes focus entirely.
 * \`renderOption\` prop accepts a custom render function for fully custom option appearance.
-* Built on React Aria for cross-browser and screen reader compatibility.
 
 \`\`\`jsx
 import { RadioGroup } from "@baseline-ui/core";
@@ -21356,7 +21919,8 @@ delay?: number
  * @default true
  */
 smoothScroll?: boolean
-}`,stories:{usage:[{id:"core-buttons-scrollcontrolbutton--basic",name:"Basic",snippet:'const Basic = () => <ScrollControlButtonExample label="Scroll down" />;'},{id:"core-buttons-scrollcontrolbutton--hide-for-keyboard",name:"Hide For Keyboard",snippet:'const HideForKeyboard = () => <ScrollControlButtonExample label="Scroll down" hideForKeyboard />;'},{id:"core-buttons-scrollcontrolbutton--without-smooth-scroll",name:"Without Smooth Scroll",snippet:'const WithoutSmoothScroll = () => <ScrollControlButtonExample label="Scroll down" smoothScroll={false} />;'},{id:"core-buttons-scrollcontrolbutton--with-custom-delay",name:"With Custom Delay",snippet:'const WithCustomDelay = () => <ScrollControlButtonExample label="Scroll down (0 delay)" delay={0} />;'},{id:"core-buttons-scrollcontrolbutton--with-reversed-items",name:"With Reversed Items",snippet:'const WithReversedItems = () => <ScrollControlButtonReversedExample label="Scroll down" />;'}],implementation:`import { sprinkles } from "@baseline-ui/tokens";
+}`,stories:{usage:[{id:"core-buttons-scrollcontrolbutton--basic",name:"Basic",snippet:'const Basic = () => <ScrollControlButtonExample label="Scroll down" />;'},{id:"core-buttons-scrollcontrolbutton--hide-for-keyboard",name:"Hide For Keyboard",snippet:'const HideForKeyboard = () => <ScrollControlButtonExample label="Scroll down" hideForKeyboard />;'},{id:"core-buttons-scrollcontrolbutton--without-smooth-scroll",name:"Without Smooth Scroll",snippet:'const WithoutSmoothScroll = () => <ScrollControlButtonExample label="Scroll down" smoothScroll={false} />;'},{id:"core-buttons-scrollcontrolbutton--with-custom-delay",name:"With Custom Delay",snippet:'const WithCustomDelay = () => <ScrollControlButtonExample label="Scroll down (0 delay)" delay={0} />;'},{id:"core-buttons-scrollcontrolbutton--with-reversed-items",name:"With Reversed Items",snippet:'const WithReversedItems = () => <ScrollControlButtonReversedExample label="Scroll down" />;'}],implementation:`import { IFrame } from "@baseline-ui/test-utils/client";
+import { sprinkles } from "@baseline-ui/tokens";
 import React from "react";
 
 import { Box } from "../../Box";
@@ -21417,8 +21981,8 @@ export const ScrollControlButtonExample: React.FC<ScrollControlButtonProps> = (
 };
 
 export const ScrollControlButtonShortExample: React.FC<
- ScrollControlButtonProps
-> = (args) => {
+ ScrollControlButtonProps & { itemCount?: number }
+> = ({ itemCount = 1, ...args }) => {
  const ref = React.useRef<HTMLDivElement>(null);
 
  return (
@@ -21446,7 +22010,7 @@ export const ScrollControlButtonShortExample: React.FC<
  })}
  >
  <ListBox
- items={Array.from({ length: 1 }).map((item, index) => ({
+ items={Array.from({ length: itemCount }).map((item, index) => ({
  id: index.toString(),
  label: \`Item \${index}\`,
  }))}
@@ -21481,7 +22045,6 @@ export const ScrollControlButtonReversedExample: React.FC<
  borderRadius: "sm",
  position: "relative",
  })}
- data-testid="scrollable"
  >
  <div
  className={sprinkles({
@@ -21491,6 +22054,7 @@ export const ScrollControlButtonReversedExample: React.FC<
  typography: "body.md.regular",
  })}
  ref={ref}
+ data-testid="scrollable"
  style={{
  overflow: "auto",
  maxHeight: 200,
@@ -21516,7 +22080,20 @@ export const ScrollControlButtonReversedExample: React.FC<
  </div>
  </>
  );
-};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a 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 "@baseline-ui/core";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\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 "@baseline-ui/core";\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 "@baseline-ui/core";\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 {
+};
+
+export const ScrollControlButtonInFrameExample: React.FC<
+ ScrollControlButtonProps
+> = (args) => (
+ <IFrame style={{ width: 400, height: 300, border: "none" }}>
+ <div data-testid="frame-content" style={{ height: 1200 }} />
+ <div
+ style={{ position: "fixed", bottom: 0, left: 0, right: 0, height: 60 }}
+ >
+ <ScrollControlButton {...args} />
+ </div>
+ </IFrame>
+);`},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 "@baseline-ui/core";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\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 "@baseline-ui/core";\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 "@baseline-ui/core";\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
@@ -22032,6 +22609,33 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
+/**
+ * The placement of the popover relative to the trigger.
+ * 
+ * @default "bottom start"
+ */
+placement?: | 'bottom'
+| 'bottom left'
+| 'bottom right'
+| 'bottom start'
+| 'bottom end'
+| 'top'
+| 'top left'
+| 'top right'
+| 'top start'
+| 'top end'
+| 'left'
+| 'left top'
+| 'left bottom'
+| 'start'
+| 'start top'
+| 'start bottom'
+| 'right'
+| 'right top'
+| 'right bottom'
+| 'end'
+| 'end top'
+| 'end bottom'
 /**
  * The position of the label.
  * 
@@ -23779,7 +24383,13 @@ completedLabel?: string
     ]}
     aria-label="Checkout"
     defaultSelectedStep="a"
-    defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
+    defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--with-disabled-completed-step",name:"With Disabled Completed Step",snippet:`const WithDisabledCompletedStep = () => <Stepper
+    items={items.map((i) =>
+      i.key === "cart" ? { ...i, isDisabled: true } : i,
+    )}
+    aria-label="Checkout"
+    defaultSelectedStep="shipping"
+    defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
     items={items.map((i) => ({ key: i.key }))}
     aria-label="Checkout"
     defaultSelectedStep="shipping"
@@ -24727,7 +25337,7 @@ Prevent specific rows from being selected by passing a set of keys to \`disabled
 </Table>
 \`\`\`
 
-Trigger an action when a row is activated with \`onRowAction\`. When no selection mode is set, a single click or Enter key triggers the action. When combined with selection mode, React Aria uses \`selectionBehavior="replace"\` by default \u2014 clicking triggers the action while selection requires checkboxes or long-press.
+Trigger an action when a row is activated with \`onRowAction\`. When no selection mode is set, a single click or Enter key triggers the action. When combined with selection mode, the default \`selectionBehavior="toggle"\` keeps the action on a single click while nothing is selected; rows are selected with a checkbox column, the Space key, or long-press on touch, and once a selection exists clicking a row toggles it. Set \`selectionBehavior="replace"\` to make a single click select the row and a double click trigger the action.
 
 \`\`\`jsx
 <Table aria-label="Files" onRowAction={(key) => console.log("Opened", key)}>
@@ -25115,7 +25725,7 @@ Use the \`renderEmptyState\` prop on \`TableBody\` to display a message when the
       </TableBody>
     </Table>
   );
-};`,description:'Row action combined with selection mode. Click triggers the action; use checkboxes or long-press for selection (selectionBehavior="replace").'},{id:"core-collections-table--long-text-content",name:"Long Text Content",snippet:`const LongTextContent = () => {
+};`,description:'Row action combined with selection mode. With the default selectionBehavior="toggle", click triggers the action while nothing is selected; select with checkboxes or long-press, after which clicks toggle selection.'},{id:"core-collections-table--long-text-content",name:"Long Text Content",snippet:`const LongTextContent = () => {
     const longRows = [
       {
         id: "1",
@@ -26588,7 +27198,7 @@ export const AddButtonExample: React.FC<{
  ))}
  </Tabs>
  );
-};`},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 {
+};`},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\nSet `elementType="span"` to render the tag as a `span` so it can sit inside a button or other inline content, where a `div` is not valid HTML. The tag still lays out as a block, so make its container a flex row to keep it on the same line as the text.\n\n```jsx\n<button\n type="button"\n style={{ display: "inline-flex", alignItems: "center", gap: 8 }}\n>\n Report.pdf <Tag elementType="span">Draft</Tag>\n</button>\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
@@ -26638,6 +27248,14 @@ variant?: "neutral" | "red" | "green" | "blue" | "high-contrast"
  * @default "md"
  */
 size?: "sm" | "md"
+/**
+ * The element the tag renders as. Use \`span\` to place a tag without
+ * \`onRemove\` inside a button or other inline content, where a \`div\` is not
+ * valid HTML. Has no effect inside a \`TagGroup\`.
+ * 
+ * @default "div"
+ */
+elementType?: "div" | "span"
 /**
  * An optional icon to display before the tag content.
  */
@@ -26666,7 +27284,10 @@ onRemove?: () => void
  * Message id: \`bui.tag.remove\`. Defaults to \`"Remove"\`.
  */
 removeLabel?: string
-}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
+}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--inline-content",name:"Inline Content",snippet:`const InlineContent = () => <button
+    type="button"
+    style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>Report.pdf <Tag elementType="span">Draft</Tag>
+</button>;`},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
 import React from "react";
 
 import { Tag } from "../Tag";
@@ -27120,7 +27741,9 @@ value?: number
  */
 defaultValue?: number
 /**
- * The callback that is called when the value is changed.
+ * Called with the submitted text when a non-empty entry is submitted on
+ * Enter or blur, unless it resolves to the current page. Unknown and
+ * out-of-range entries are still reported.
  */
 onChange?: (value: number | string) => void
 /**
@@ -27133,6 +27756,8 @@ onChangeSuccess?: (value: number) => void
 onInputChange?: (value: string) => void
 /**
  * The description of the component.
+ * 
+ * @default \`\${value} / \${maxValue}\`, or the current page alone when \`maxValue\` is not finite
  */
 description?: string | ((value: number) => string)
 /**
@@ -27214,8 +27839,9 @@ import { TaggedPagination } from "../TaggedPagination";
 export const TaggedPaginationExample: React.FC<
  React.ComponentProps<typeof TaggedPagination> & {
  onAncestorKeyDown?: React.KeyboardEventHandler;
+ descriptionByValue?: Record<number, string>;
  }
-> = ({ onAncestorKeyDown, ...props }) => {
+> = ({ onAncestorKeyDown, descriptionByValue, ...props }) => {
  const pagination = (
  <TaggedPagination
  valueToLabelMap={
@@ -27232,6 +27858,9 @@ export const TaggedPaginationExample: React.FC<
  incrementAriaLabel="Increment"
  minValue={1}
  maxValue={4}
+ {...(descriptionByValue && {
+ description: (value: number) => descriptionByValue[value] ?? "",
+ })}
  {...props}
  />
  );
@@ -27254,7 +27883,7 @@ export const TaggedPaginationInToolbarExample: React.FC<
  </Toolbar>
  <ActionButton label="Outside" />
  </div>
-);`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Input, Label, Text, TextField, 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* Consistent type, size, and weight pulled from the design system\n* Renders as any HTML element via the `elementType` prop\n* Opt-in integration with a container\'s context through the `slot` prop for automatic `aria-describedby` / `aria-labelledby` wiring\n\n```jsx\nimport { Text } from "@baseline-ui/core";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `label`, `value`, and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`.\n\n`Text` can integrate with a container component\'s context. Pass a `slot` name\nand the text picks up the `id` the container provides for that slot, so it gets\nassociated via `aria-describedby` / `aria-labelledby` without manually wiring an\n`id`.\n\n```jsx\n<Text slot="description">\n This description is linked to its field automatically.\n</Text>\n```\n\nSlot integration is **opt-in**: a `Text` without a `slot` never inherits an\nambient context, so it renders identically whether or not a container is\npresent. Naming a `slot` the surrounding container does not define will throw \u2014\nonly pass slots you know the container exposes.\n\nNo Baseline container currently provides a slotted `TextContext`, so this is\ngroundwork today: the mechanism is exercisable against raw React Aria containers\n(`TextField`, `Select`, `TagGroup`, etc.) but no Baseline component wires it up yet.\n\n`Text` always emits a stable class name you can target for styling.\n\n| Selector | Description |\n| ------------------ | ------------------------------------- |\n| `.BaselineUI-Text` | Applied to the rendered text element. |',props:`interface TextProps {
+);`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Input, Label, Text, TextField, 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* Consistent type, size, and weight pulled from the design system\n* Renders as any HTML element via the `elementType` prop\n* Opt-in integration with a container\'s context through the `slot` prop for automatic `aria-describedby` / `aria-labelledby` wiring\n\n```jsx\nimport { Text } from "@baseline-ui/core";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `label`, `value`, and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`.\n\n`Text` can integrate with a container component\'s context. Pass a `slot` name\nand the text picks up the `id` the container provides for that slot, so it gets\nassociated via `aria-describedby` / `aria-labelledby` without manually wiring an\n`id`.\n\n```jsx\n<Text slot="description">\n This description is linked to its field automatically.\n</Text>\n```\n\nSlot integration is **opt-in**: a `Text` without a `slot` never inherits an\nambient context, so it renders identically whether or not a container is\npresent. Naming a `slot` the surrounding container does not define will throw \u2014\nonly pass slots you know the container exposes.\n\nNo Baseline container currently provides a slotted `TextContext`, so this is\ngroundwork for future containers.\n\n`Text` always emits a stable class name you can target for styling.\n\n| Selector | Description |\n| ------------------ | ------------------------------------- |\n| `.BaselineUI-Text` | Applied to the rendered text element. |',props:`interface TextProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -27443,7 +28072,7 @@ export function TextOptOutOfSlotContext() {
  </Text>
  </TextContext.Provider>
  );
-}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, TextInputFocusExample, 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\n`ref` points at the wrapping `<div>`, not the native field. To call `focus()`,\n`select()` or other methods on the `<input>` (or the `<textarea>` with\n`isMultiLine`), pass an object ref from `useRef` or `createRef` as `inputRef`.\n\n```jsx\nconst inputRef = useRef(null);\n\n<>\n <TextInput label="Name" inputRef={inputRef} />\n <ActionButton\n label="Focus the input"\n onPress={() => inputRef.current?.focus()}\n />\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\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 {
+}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, TextInputFocusExample, 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. An `errorMessage` replaces the `description` and the `warningMessage`, so\nonly the error is shown and announced.\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. A `warningMessage` replaces the `description`;\nan `errorMessage` takes precedence over both.\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\n`ref` points at the wrapping `<div>`, not the native field. To call `focus()`,\n`select()` or other methods on the `<input>` (or the `<textarea>` with\n`isMultiLine`), pass an object ref from `useRef` or `createRef` as `inputRef`.\n\n```jsx\nconst inputRef = useRef(null);\n\n<>\n <TextInput label="Name" inputRef={inputRef} />\n <ActionButton\n label="Focus the input"\n onPress={() => inputRef.current?.focus()}\n />\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\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 {
 variant?: any
 labelPosition?: any
 isMultiLine?: any
@@ -28037,7 +28666,8 @@ isMultiLine?: any
     }}
     defaultProps={args}
   />
-);`}],implementation:`import React from "react";
+);`}],implementation:`import { deepGetElementById } from "@react-aria/utils";
+import React, { useEffect, useRef } from "react";
 
 import { ActionButton } from "../../ActionButton/ActionButton";
 import { Box } from "../../Box/Box";
@@ -28045,6 +28675,49 @@ import { TextInput } from "../TextInput";
 
 import type { SingleLineTextInputProps } from "../TextInput.types";
 
+export function NamedControlLookup({
+ name,
+}: {
+ name: "firstElementChild" | "nextElementSibling";
+}) {
+ const result = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ const form = document.createElement("form");
+ let host: HTMLDivElement;
+ if (name === "firstElementChild") {
+ host = document.createElement("div");
+ form.append(
+ host,
+ Object.assign(document.createElement("input"), { name }),
+ );
+ } else {
+ form.append(Object.assign(document.createElement("input"), { name }));
+ host = document.createElement("div");
+ }
+ const target = document.createElement("span");
+ target.id = "shadow-target";
+ host.attachShadow({ mode: "open" }).append(target);
+ document.body.append(form);
+ if (name === "nextElementSibling") document.body.append(host);
+
+ result.current!.dataset.found = String(
+ deepGetElementById("shadow-target", document) === target,
+ );
+ if (name === "firstElementChild") {
+ result.current!.dataset.formFound = String(
+ deepGetElementById("shadow-target", form) === target,
+ );
+ }
+ return () => {
+ form.remove();
+ host.remove();
+ };
+ }, [name]);
+
+ return <div data-testid="lookup-result" ref={result} />;
+}
+
 export function TextInputRefsExample({
  isMultiLine,
  ...props
@@ -28678,11 +29351,11 @@ export const TimeFieldExample: React.FC<
     ToastExample,
     ToastWithAction,
     VariantsExample,
-} from "@baseline-ui/core";`,description:"`Toast` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.",documentation:`\`Toast\` is a brief, non-blocking notification that appears in a prioritized queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.
+} from "@baseline-ui/core";`,description:"`Toast` is a brief, non-blocking notification that appears in a queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.",documentation:`\`Toast\` is a brief, non-blocking notification that appears in a queue and can auto-dismiss after a timeout. Use it to surface transient feedback about background events, such as save confirmations, errors, or status updates, without interrupting the user's flow.
 
 * Automatically shifts focus to the next toast when a toast is closed.
 * Toasts follow the [ARIA alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.
-* Toasts are displayed according to a priority queue, displaying a configurable number of toasts at a time.
+* The most recently added toasts are shown first, up to a configurable number (\`maxVisibleToasts\`); older toasts wait in the queue until a visible one closes.
 
 \`\`\`tsx
 import { useMemo } from "react";
@@ -28718,14 +29391,16 @@ function ToastExample() {
 The toast component is built on top of the [\`InlineAlert\` component](/docs/core-status-inlinealert--docs). It uses the same props and behavior, but adds a few additional features. You pass the props while adding the toast to the queue.
 
 \`\`\`tsx
-toastQueue.add(alertProps: InlineAlertProps, {
+toastQueue.add(
+ { ...alertProps, canClose: true },
+ {
  timeout: number,
- priority: number,
  onClose: () => void,
-});
+ },
+);
 \`\`\`
 
-You can find the documentation for the [\`InlineAlertProps\` here](/docs/core-status-inlinealert--docs#props).
+The content object takes the [\`InlineAlertProps\`](/docs/core-status-inlinealert--docs#props) except \`onClose\`, plus \`canClose\` (default \`true\`); set \`canClose: false\` to render the toast without a close button. The second argument takes \`timeout\` (see below) and \`onClose\`, called when the toast closes, whether by the user or after the timeout.
 
 The toast component supports the same variants as the [\`InlineAlert\` component](/docs/core-status-inlinealert--docs#variants). You can view all the variants [here](/story/core-status-toast--variants-without-action).
 
@@ -30321,6 +30996,20 @@ includeArrow?: boolean
  * @default document.body
  */
 portalContainer?: HTMLElement
+/**
+ * The distance in pixels between the tooltip and its trigger along the main
+ * axis. Defaults to 2 when \`includeArrow\` is false.
+ * 
+ * @default 12
+ */
+offset?: number
+/**
+ * The minimum distance in pixels of the arrow from the edge of the tooltip. It
+ * defaults to 0 when \`includeArrow\` is false.
+ * 
+ * @default 8
+ */
+arrowBoundaryOffset?: number
 placement?: any
 }`,stories:{usage:[{id:"core-overlays-tooltip--basic",name:"Basic",snippet:'const Basic = () => <Tooltip text="Tooltip text" delay={0} closeDelay={0}><ActionButton label="Label" /></Tooltip>;'},{id:"core-overlays-tooltip--variants",name:"Variants",snippet:`const Variants = (args) => (
   <VariantViewer
@@ -30414,6 +31103,8 @@ import { PopoverContent } from "../../Popover/PopoverContent";
 import { PopoverTrigger } from "../../Popover/PopoverTrigger";
 import { Tooltip } from "../Tooltip";
 
+import type { TooltipProps } from "../Tooltip.types";
+
 export const CustomElementTooltip = () => (
  <Tooltip text="Tooltip content" delay={0}>
  {({ triggerProps, triggerRef }) => (
@@ -30552,7 +31243,15 @@ export const TooltipReopenExample = ({
  />
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},TreeView:{id:"core-collections-treeview",breadcrumb:"Core/Collections/TreeView",importStatement:`import {
+};
+
+export const TooltipDisableExample = (
+ props: Omit<TooltipProps, "children">,
+) => (
+ <Tooltip text="Tip" delay={0} {...props}>
+ <ActionButton label="Trigger" />
+ </Tooltip>
+);`},similarTo:[],figmaUrl:null},TreeView:{id:"core-collections-treeview",breadcrumb:"Core/Collections/TreeView",importStatement:`import {
     ActionIconButton,
     Box,
     DragAndDropTreeViewExample,
@@ -30565,7 +31264,7 @@ export const TooltipReopenExample = ({
     VirtualizedTreeViewWithDescriptionsExample,
     VirtualizedTreeViewWithExpandControlExample,
     VirtualizedTreeViewWithRenameExample,
-} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:'`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.\n\n* Support for mouse, touch, and keyboard interaction\n* Accessible via React Aria with full keyboard navigation\n* Support for primary and secondary action buttons on items\n* Support for inline renaming of item labels (double-click or F2)\n* Icons and descriptions on individual items\n* Controlled and uncontrolled expansion state\n* Custom item title rendering via `renderItemTitle`\n* Drag and drop to reorder items or move them into other items, with mouse and keyboard\n* Fully custom rows via `renderItem`\n* Virtualization support for large datasets (10,000+ items)\n\n```tsx\nimport { TreeView } from "@baseline-ui/core";\nconst treeItems = {\n id: "root",\n label: "Root item",\n children: [\n {\n id: "documents",\n label: "Documents",\n children: [\n {\n id: "work",\n label: "Work",\n },\n ],\n },\n ],\n};\n\n<TreeView items={treeItems} aria-label="File browser" />;\n```\n\n> **Note:** The top-level `items` object acts as a virtual root and is not rendered. Only its `children` appear in the tree.\n\nEach item can have an `icon` property that renders an icon next to the label.\n\nItems can include a `description` string, rendered below the label.\n\nA tree with no nested children \u2014 all chevrons are hidden.\n\nTrees with deep nesting (4+ levels) indent items based on depth.\n\nDemonstrates how the component handles lengthy item labels and descriptions.\n\nControl the expansion state with `expandedKeys` and `onExpandedChange`.\n\nUse `defaultExpandedKeys` for the initial expansion state. You can still expand and collapse items via interaction.\n\nUse `selectedKeys` to highlight specific items. The tree uses multi-selection mode.\n\nAdd primary and secondary action buttons to each row using `primaryActionIcon`/`secondaryActionIcon` and `onPrimaryAction`/`onSecondaryAction`. You can set the `actionsPosition` prop to `"start"` (default) or `"end"` to control their placement.\n\nPass a function to `primaryActionIcon` or `secondaryActionIcon` to render different icons per item: `(key: Key) => IconComponent`.\n\nSimilarly, `primaryActionAriaLabel` and `secondaryActionAriaLabel` accept `string | ((key: Key) => string)` for per-item labels.\n\nPass the `dragAndDropHooks` returned by `useDragAndDrop` to let users reorder items or move them into other items within the tree. Each row shows a drag handle. Drag the row from anywhere with the mouse, or focus a row, press <kbd>ArrowRight</kbd> to reach its handle (on a collapsed row with children, the first press expands it) and <kbd>Enter</kbd> to start a keyboard drag, then use the arrow keys to choose a position and press <kbd>Enter</kbd> to drop or <kbd>Escape</kbd> to cancel.\n\n`TreeView` does not change your data. Apply the move to your own `items` in the `onMove` callback, where `target.key` is the item dropped relative to and `target.dropPosition` is `"before"`, `"after"` or `"on"` (move into). `target.key` can be one of the dragged `keys` when an item is dropped back next to itself; treat that as no move rather than removing the item first. Any other option of the hook, such as `getAllowedDropOperations`, can be passed alongside `onMove`. Keep passing `dragAndDropHooks` for the tree\'s lifetime; to turn dragging off, pass `isDisabled` to `useDragAndDrop` instead of removing the prop. Items are offered as `"on"` targets even when they have no children, so a file dropped onto a file would become a folder; pass a `shouldAcceptItemDrop` that looks the target up in your own items, such as `(target) => !!findItem(items, target.key)?.children`, to accept drops only on items that already have children. To read tree fields such as `children` in your own `getItems`, pass the item type: `useDragAndDrop<TreeListItem>({ getItems })`.\n\n```tsx\nimport { TreeView, useDragAndDrop } from "@baseline-ui/core";\n\nconst { dragAndDropHooks } = useDragAndDrop({\n onMove({ keys, target }) {\n setItems((items) =>\n moveItems(items, keys, target.key, target.dropPosition),\n );\n },\n});\n\n<TreeView\n items={items}\n dragAndDropHooks={dragAndDropHooks}\n aria-label="File browser"\n/>;\n```\n\nTo start mouse and touch drags only from the handle, pass `pointerDragSource: "handle"` to `useDragAndDrop`. Users can then select text in the rename input or press other controls in the row without starting a drag. Keyboard dragging is unchanged.\n\nIt works the same in a virtualized tree.\n\nCustom rows from `renderItem` get the same drag handle, placed before your content. Style the row being dropped onto from `isDropTarget`, and the row being dragged from `isDragging`. The insertion line spans the full row; to indent it, style `.BaselineUI-DropIndicator` inside the tree.\n\nWhen rows contain text fields or other controls that handle keys themselves, pass `keyboardNavigationBehavior="tab"`. <kbd>Tab</kbd> then moves into a row\'s controls, and keys pressed in them, such as arrows and space in a text field, stay there instead of moving focus through the tree. <kbd>ArrowRight</kbd> and <kbd>ArrowLeft</kbd> on a focused row still expand and collapse it.\n\nEnable inline renaming by passing an `onRename` callback. Users can rename by double-clicking the label or pressing <kbd>F2</kbd>. Press <kbd>Enter</kbd> to confirm or <kbd>Escape</kbd> to cancel. Blurring the input (e.g., clicking outside) also confirms the rename.\n\nWith `dragAndDropHooks`, the whole row is draggable by default, so dragging the mouse across the rename input drags the row instead of selecting text. Pass `pointerDragSource: "handle"` to `useDragAndDrop` to keep text selection in the input.\n\nUse `renderItemTitle` to customize how item titles are rendered. The function receives the full `TreeListItem` and returns a `ReactNode`.\n\nUse `renderItem` to take over the whole row. It receives the `TreeListItem` and a state object (`level`, `isExpanded`, `hasChildItems`, `isSelected`, `isFocusVisible`, `isFocusVisibleWithin`, `isHovered`, `isPressed`, `isDropTarget`, `isDragging`, and `toggleExpanded`) and returns the row\'s content. The tree keeps keyboard navigation, selection, focus, and expansion behavior.\n\n```tsx\nimport { ActionIconButton, TreeView } from "@baseline-ui/core";\nimport { ChevronRightIcon } from "@baseline-ui/icons/8";\n\nimport type { TreeItemRenderState, TreeListItem } from "@baseline-ui/core";\n\nconst renderItem = (\n item: TreeListItem,\n { level, isExpanded, hasChildItems, toggleExpanded }: TreeItemRenderState,\n) => (\n <div style={{ paddingInlineStart: (level - 1) * 16 }}>\n {hasChildItems ? (\n <ActionIconButton\n icon={ChevronRightIcon}\n size="xxs"\n aria-label={`${isExpanded ? "Collapse" : "Expand"} ${item.label}`}\n excludeFromTabOrder={true}\n onPress={toggleExpanded}\n />\n ) : null}\n {item.label}\n </div>\n);\n\n<TreeView items={items} renderItem={renderItem} />;\n```\n\nInstead of wiring `toggleExpanded` yourself, you can give a Baseline button `slot="chevron"`: it expands and collapses the row, stays out of the tab order, and gets a localized "Expand" or "Collapse" label. `expandLabel` and `collapseLabel` don\'t apply to it.\n\nThe custom content replaces the chevron, indentation, icon, title, description, and action buttons, as well as the row\'s padding, hover, selected, and focus styling, so draw those from the state you receive. Always draw a focus indicator from `isFocusVisible`; without one, keyboard users can\'t see which row has focus. `isFocusVisibleWithin` is also true while a control inside the row has keyboard focus, so use it to keep the row highlighted while the user works inside it. `isPressed` is true while the row is held down with a pointer, <kbd>Enter</kbd>, or <kbd>Space</kbd>, but not while a Baseline button inside the row is pressed. To style the row with CSS instead, target `.BaselineUI-TreeView-Row` and its `data-focus-visible`, `data-selected`, `data-expanded`, and `data-level` attributes.\n\nThe item `label` is the row\'s only accessible name: other text you draw in the row, such as metadata or tags, isn\'t announced, so put anything screen reader users need into `label`. While `renderItem` is set, `onPrimaryAction`, `onSecondaryAction`, the action icon and label props, `actionsPosition`, `onRename`, `renameLabel`, `renderItemTitle`, `expandLabel`, and `collapseLabel` have no effect.\n\nDefine `renderItem` outside the render, or memoize it: every row re-renders whenever its identity changes. Use Baseline buttons, such as `ActionIconButton`, for controls inside the row. They handle the press without selecting the row. When virtualizing custom rows, set the layout\'s `rowHeight` to the height of your row.\n\nPass `onAction` to handle activation of tree items. The callback receives the item\'s `key` and fires when an item is activated (typically via Enter or double-click).\n\n| Selector | Description |\n| -------------------------------------- | ---------------------------------------------- |\n| `.BaselineUI-TreeView` | The root tree container |\n| `.BaselineUI-TreeView-Row` | An individual tree row |\n| `.BaselineUI-TreeView-ExpansionToggle` | The expand/collapse chevron button |\n| `.BaselineUI-TreeView-DragHandle` | The drag handle, shown with `dragAndDropHooks` |\n| `.BaselineUI-TreeView-Title` | The item label text |\n| `.BaselineUI-TreeView-Description` | The item description text |\n| `.BaselineUI-TreeView-RenameInput` | The inline rename text input |\n\n| Key | Action |\n| ---------------------- | ----------------------------------------------------------------------------- |\n| <kbd>Arrow Down</kbd> | Focus the next item |\n| <kbd>Arrow Up</kbd> | Focus the previous item |\n| <kbd>Arrow Right</kbd> | Expand the focused item, or move focus to the first child if already expanded |\n| <kbd>Arrow Left</kbd> | Collapse the focused item, or move focus to the parent if already collapsed |\n| <kbd>Enter</kbd> | Activate the focused item |\n| <kbd>Space</kbd> | Toggle selection of the focused item |\n| <kbd>Home</kbd> | Focus the first item |\n| <kbd>End</kbd> | Focus the last item |\n| <kbd>F2</kbd> | Start renaming the focused item (requires `onRename` prop) |\n| <kbd>Escape</kbd> | Cancel renaming |\n\n* **ListBox** \u2014 for flat, non-hierarchical lists\n* **Menu** \u2014 for action menus and dropdowns\n\nFor large trees with thousands of items, use virtualization to improve performance and reduce memory usage.\n\nConsider virtualization when:\n\n* Trees have 500+ total items (including nested children)\n* Trees are deeply nested (5+ levels) with many items per level\n* You need responsive scrolling on mobile devices\n* Memory usage is a concern\n\nWrap TreeView with the Virtualizer component:\n\n```tsx\nimport {\n TreeView,\n Virtualizer,\n VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n} from "@baseline-ui/core";\n\n<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW}>\n <TreeView\n items={largeTree}\n aria-label="Large file system"\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>;\n```\n\n**Important:** You must specify an explicit height on the TreeView container.\n\nThe `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW` preset uses a `rowHeight` of 44px. To customize row heights (e.g., for items with descriptions), pass `layout` and `layoutOptions` directly:\n\n```tsx\nimport { ListLayout, TreeView, Virtualizer } from "@baseline-ui/core";\n\n// Items without descriptions (default)\n<Virtualizer layout={ListLayout} layoutOptions={{ rowHeight: 44 }}>\n <TreeView items={tree} style={{ height: 600, overflow: "auto" }} />\n</Virtualizer>\n\n// Items with descriptions (variable heights)\n<Virtualizer layout={ListLayout} layoutOptions={{ estimatedRowHeight: 60 }}>\n <TreeView\n items={treeWithDescriptions}\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>\n```\n\nWith virtualization:\n\n* Only ~20-30 visible items rendered at once (regardless of total tree size)\n* Smooth scrolling up to 100,000+ items\n* Constant memory usage\n* Expand/collapse remains responsive\n\nWithout virtualization:\n\n* All expanded items render to DOM\n* Performance degrades beyond ~500 items\n* Memory usage grows with tree size',props:`interface TreeViewProps {
+} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:'`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.\n\n* Support for mouse, touch, and keyboard interaction\n* Full keyboard navigation with `treegrid` and `row` ARIA semantics for screen readers\n* Support for primary and secondary action buttons on items\n* Support for inline renaming of item labels (double-click or F2)\n* Icons and descriptions on individual items\n* Controlled and uncontrolled expansion state\n* Custom item title rendering via `renderItemTitle`\n* Drag and drop to reorder items or move them into other items, with mouse and keyboard\n* Fully custom rows via `renderItem`\n* Virtualization support for large datasets (10,000+ items)\n\n```tsx\nimport { TreeView } from "@baseline-ui/core";\nconst treeItems = {\n id: "root",\n label: "Root item",\n children: [\n {\n id: "documents",\n label: "Documents",\n children: [\n {\n id: "work",\n label: "Work",\n },\n ],\n },\n ],\n};\n\n<TreeView items={treeItems} aria-label="File browser" />;\n```\n\n> **Note:** The top-level `items` object acts as a virtual root and is not rendered. Only its `children` appear in the tree.\n\nEach item can have an `icon` property that renders an icon next to the label.\n\nItems can include a `description` string, rendered below the label.\n\nA tree with no nested children \u2014 all chevrons are hidden.\n\nTrees with deep nesting (4+ levels) indent items based on depth.\n\nDemonstrates how the component handles lengthy item labels and descriptions.\n\nControl the expansion state with `expandedKeys` and `onExpandedChange`.\n\nUse `defaultExpandedKeys` for the initial expansion state. You can still expand and collapse items via interaction.\n\nUse `selectedKeys` to highlight specific items. The tree uses multi-selection mode.\n\nAdd primary and secondary action buttons to each row using `primaryActionIcon`/`secondaryActionIcon` and `onPrimaryAction`/`onSecondaryAction`. You can set the `actionsPosition` prop to `"start"` (default) or `"end"` to control their placement.\n\nPass a function to `primaryActionIcon` or `secondaryActionIcon` to render different icons per item: `(key: Key) => IconComponent`.\n\nSimilarly, `primaryActionAriaLabel` and `secondaryActionAriaLabel` accept `string | ((key: Key) => string)` for per-item labels.\n\nPass the `dragAndDropHooks` returned by `useDragAndDrop` to let users reorder items or move them into other items within the tree. Each row shows a drag handle. Drag the row from anywhere with the mouse, or focus a row, press <kbd>ArrowRight</kbd> to reach its handle (on a collapsed row with children, the first press expands it) and <kbd>Enter</kbd> to start a keyboard drag, then use the arrow keys to choose a position and press <kbd>Enter</kbd> to drop or <kbd>Escape</kbd> to cancel.\n\n`TreeView` does not change your data. Apply the move to your own `items` in the `onMove` callback, where `target.key` is the item dropped relative to and `target.dropPosition` is `"before"`, `"after"` or `"on"` (move into). `target.key` can be one of the dragged `keys` when an item is dropped back next to itself; treat that as no move rather than removing the item first. Any other option of the hook, such as `getAllowedDropOperations`, can be passed alongside `onMove`. Keep passing `dragAndDropHooks` for the tree\'s lifetime; to turn dragging off, pass `isDisabled` to `useDragAndDrop` instead of removing the prop. Items are offered as `"on"` targets even when they have no children, so a file dropped onto a file would become a folder; pass a `shouldAcceptItemDrop` that looks the target up in your own items, such as `(target) => !!findItem(items, target.key)?.children`, to accept drops only on items that already have children. To read tree fields such as `children` in your own `getItems`, pass the item type: `useDragAndDrop<TreeListItem>({ getItems })`.\n\n```tsx\nimport { TreeView, useDragAndDrop } from "@baseline-ui/core";\n\nconst { dragAndDropHooks } = useDragAndDrop({\n onMove({ keys, target }) {\n setItems((items) =>\n moveItems(items, keys, target.key, target.dropPosition),\n );\n },\n});\n\n<TreeView\n items={items}\n dragAndDropHooks={dragAndDropHooks}\n aria-label="File browser"\n/>;\n```\n\nTo start mouse and touch drags only from the handle, pass `pointerDragSource: "handle"` to `useDragAndDrop`. Users can then select text in the rename input or press other controls in the row without starting a drag. Keyboard dragging is unchanged.\n\nIt works the same in a virtualized tree.\n\nCustom rows from `renderItem` get the same drag handle, placed before your content. Style the row being dropped onto from `isDropTarget`, and the row being dragged from `isDragging`. The insertion line spans the full row; to indent it, style `.BaselineUI-DropIndicator` inside the tree.\n\nWhen rows contain text fields or other controls that handle keys themselves, pass `keyboardNavigationBehavior="tab"`. <kbd>Tab</kbd> then moves into a row\'s controls, and keys pressed in them, such as arrows and space in a text field, stay there instead of moving focus through the tree. <kbd>ArrowRight</kbd> and <kbd>ArrowLeft</kbd> on a focused row still expand and collapse it.\n\nEnable inline renaming by passing an `onRename` callback. Users can rename by double-clicking the label or pressing <kbd>F2</kbd>. Press <kbd>Enter</kbd> to confirm or <kbd>Escape</kbd> to cancel. Blurring the input (e.g., clicking outside) also confirms the rename.\n\nWith `dragAndDropHooks`, the whole row is draggable by default, so dragging the mouse across the rename input drags the row instead of selecting text. Pass `pointerDragSource: "handle"` to `useDragAndDrop` to keep text selection in the input.\n\nUse `renderItemTitle` to customize how item titles are rendered. The function receives the full `TreeListItem` and returns a `ReactNode`.\n\nUse `renderItem` to take over the whole row. It receives the `TreeListItem` and a state object (`level`, `isExpanded`, `hasChildItems`, `isSelected`, `isFocusVisible`, `isFocusVisibleWithin`, `isHovered`, `isPressed`, `isDropTarget`, `isDragging`, and `toggleExpanded`) and returns the row\'s content. The tree keeps keyboard navigation, selection, focus, and expansion behavior.\n\n```tsx\nimport { ActionIconButton, TreeView } from "@baseline-ui/core";\nimport { ChevronRightIcon } from "@baseline-ui/icons/8";\n\nimport type { TreeItemRenderState, TreeListItem } from "@baseline-ui/core";\n\nconst renderItem = (\n item: TreeListItem,\n { level, isExpanded, hasChildItems, toggleExpanded }: TreeItemRenderState,\n) => (\n <div style={{ paddingInlineStart: (level - 1) * 16 }}>\n {hasChildItems ? (\n <ActionIconButton\n icon={ChevronRightIcon}\n size="xxs"\n aria-label={`${isExpanded ? "Collapse" : "Expand"} ${item.label}`}\n excludeFromTabOrder={true}\n onPress={toggleExpanded}\n />\n ) : null}\n {item.label}\n </div>\n);\n\n<TreeView items={items} renderItem={renderItem} />;\n```\n\nInstead of wiring `toggleExpanded` yourself, you can give a Baseline button `slot="chevron"`: it expands and collapses the row, stays out of the tab order, and gets a localized "Expand" or "Collapse" label. `expandLabel` and `collapseLabel` don\'t apply to it.\n\nThe custom content replaces the chevron, indentation, icon, title, description, and action buttons, as well as the row\'s padding, hover, selected, and focus styling, so draw those from the state you receive. Always draw a focus indicator from `isFocusVisible`; without one, keyboard users can\'t see which row has focus. `isFocusVisibleWithin` is also true while a control inside the row has keyboard focus, so use it to keep the row highlighted while the user works inside it. `isPressed` is true while the row is held down with a pointer, <kbd>Enter</kbd>, or <kbd>Space</kbd>, but not while a Baseline button inside the row is pressed. To style the row with CSS instead, target `.BaselineUI-TreeView-Row` and its `data-focus-visible`, `data-selected`, `data-expanded`, and `data-level` attributes.\n\nThe item `label` is the row\'s only accessible name: other text you draw in the row, such as metadata or tags, isn\'t announced, so put anything screen reader users need into `label`. While `renderItem` is set, `onPrimaryAction`, `onSecondaryAction`, the action icon and label props, `actionsPosition`, `onRename`, `renameLabel`, `renderItemTitle`, `expandLabel`, and `collapseLabel` have no effect.\n\nDefine `renderItem` outside the render, or memoize it: every row re-renders whenever its identity changes. Use Baseline buttons, such as `ActionIconButton`, for controls inside the row. They handle the press without selecting the row. When virtualizing custom rows, set the layout\'s `rowHeight` to the height of your row.\n\nPass `onAction` to handle activation of tree items. The callback receives the item\'s `key` and fires when an item is activated (typically via Enter or double-click).\n\n| Selector | Description |\n| -------------------------------------- | ---------------------------------------------- |\n| `.BaselineUI-TreeView` | The root tree container |\n| `.BaselineUI-TreeView-Row` | An individual tree row |\n| `.BaselineUI-TreeView-ExpansionToggle` | The expand/collapse chevron button |\n| `.BaselineUI-TreeView-DragHandle` | The drag handle, shown with `dragAndDropHooks` |\n| `.BaselineUI-TreeView-Title` | The item label text |\n| `.BaselineUI-TreeView-Description` | The item description text |\n| `.BaselineUI-TreeView-RenameInput` | The inline rename text input |\n\n| Key | Action |\n| ---------------------- | ----------------------------------------------------------------------------- |\n| <kbd>Arrow Down</kbd> | Focus the next item |\n| <kbd>Arrow Up</kbd> | Focus the previous item |\n| <kbd>Arrow Right</kbd> | Expand the focused item, or move focus to the first child if already expanded |\n| <kbd>Arrow Left</kbd> | Collapse the focused item, or move focus to the parent if already collapsed |\n| <kbd>Enter</kbd> | Activate the focused item |\n| <kbd>Space</kbd> | Toggle selection of the focused item |\n| <kbd>Home</kbd> | Focus the first item |\n| <kbd>End</kbd> | Focus the last item |\n| <kbd>F2</kbd> | Start renaming the focused item (requires `onRename` prop) |\n| <kbd>Escape</kbd> | Cancel renaming |\n\n* **ListBox** \u2014 for flat, non-hierarchical lists\n* **Menu** \u2014 for action menus and dropdowns\n\nFor large trees with thousands of items, use virtualization to improve performance and reduce memory usage.\n\nConsider virtualization when:\n\n* Trees have 500+ total items (including nested children)\n* Trees are deeply nested (5+ levels) with many items per level\n* You need responsive scrolling on mobile devices\n* Memory usage is a concern\n\nWrap TreeView with the Virtualizer component:\n\n```tsx\nimport {\n TreeView,\n Virtualizer,\n VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n} from "@baseline-ui/core";\n\n<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW}>\n <TreeView\n items={largeTree}\n aria-label="Large file system"\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>;\n```\n\n**Important:** You must specify an explicit height on the TreeView container.\n\nThe `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW` preset uses a `rowHeight` of 44px. To customize row heights (e.g., for items with descriptions), pass `layout` and `layoutOptions` directly:\n\n```tsx\nimport { ListLayout, TreeView, Virtualizer } from "@baseline-ui/core";\n\n// Items without descriptions (default)\n<Virtualizer layout={ListLayout} layoutOptions={{ rowHeight: 44 }}>\n <TreeView items={tree} style={{ height: 600, overflow: "auto" }} />\n</Virtualizer>\n\n// Items with descriptions (variable heights)\n<Virtualizer layout={ListLayout} layoutOptions={{ estimatedRowHeight: 60 }}>\n <TreeView\n items={treeWithDescriptions}\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>\n```\n\nWith virtualization:\n\n* Only ~20-30 visible items rendered at once (regardless of total tree size)\n* Smooth scrolling up to 100,000+ items\n* Constant memory usage\n* Expand/collapse remains responsive\n\nWithout virtualization:\n\n* All expanded items render to DOM\n* Performance degrades beyond ~500 items\n* 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
@@ -30654,12 +31353,14 @@ onPrimaryAction?: (key: Key) => void
  */
 onSecondaryAction?: (key: Key) => void
 /**
- * The icon to use for the primary action.
+ * The icon to use for the primary action. The action is a plain button, so
+ * a \`{ selected, unselected }\` pair renders \`unselected\`.
  */
 primaryActionIcon?: | ToggleIconButtonProps["icon"]
 | ((key: Key) => ToggleIconButtonProps["icon"])
 /**
- * The icon to use for the secondary action.
+ * The icon to use for the secondary action. The action is a plain button,
+ * so a \`{ selected, unselected }\` pair renders \`unselected\`.
  */
 secondaryActionIcon?: | ToggleIconButtonProps["icon"]
 | ((key: Key) => ToggleIconButtonProps["icon"])
@@ -30929,6 +31630,7 @@ import {
 import { TreeView } from "../TreeView";
 import { generateLargeTree, getTreeItems } from "./data";
 
+import type { IconProps } from "../../Icon";
 import type {
  TreeItemRenderState,
  TreeListItem,
@@ -30936,15 +31638,31 @@ import type {
 } from "../TreeView.types";
 import type { DropPosition, Key } from "@react-types/shared";
 
+const SelectedPairIcon: React.FC<IconProps> = () => (
+ <svg width={16} height={16} data-testid="tree-view-action-icon-selected" />
+);
+const UnselectedPairIcon: React.FC<IconProps> = () => (
+ <svg width={16} height={16} data-testid="tree-view-action-icon-unselected" />
+);
+// The prop type does not spell out a falsy return, but TreeView hides the action for one.
+const noIcon = null as unknown as React.FC<IconProps>;
+const pairIconFor = (key: React.Key) =>
+ key === "documents"
+ ? { selected: SelectedPairIcon, unselected: UnselectedPairIcon }
+ : noIcon;
+
 export function TreeViewWithPrimaryAction({
- onPrimaryAction,
-}: Pick<TreeViewProps, "onPrimaryAction">): React.JSX.Element {
+ iconPair = false,
+ ...props
+}: Pick<TreeViewProps, "onPrimaryAction"> & {
+ iconPair?: boolean;
+}): React.JSX.Element {
  return (
  <TreeView
  items={getTreeItems({})}
- onPrimaryAction={onPrimaryAction}
- primaryActionIcon={PlusIcon}
+ primaryActionIcon={iconPair ? pairIconFor : PlusIcon}
  primaryActionAriaLabel="Primary Action"
+ {...props}
  />
  );
 }
@@ -31479,7 +32197,7 @@ export const InteractiveFieldsDragAndDropExample: React.FC<{
 * Drag-and-drop reordering (single, multiple, horizontal, grid) via \`dragAndDropHooks\`
 * Virtualized rendering for large item sets (\`VirtualListBoxListLayoutExample\`, \`VirtualListBoxGridLayoutExample\`)
 * Imperative \`listBoxHandle\` ref with \`scrollIntoView\` and \`setFocusedKey\` methods
-* Full keyboard navigation and focus management via React Aria
+* Full keyboard navigation and focus management
 
 \`\`\`jsx
 import { UNSAFE_ListBox } from "@baseline-ui/core";
@@ -31621,7 +32339,7 @@ function DraggableList() {
 }
 \`\`\`
 
-For large datasets, wrap \`UNSAFE_ListBox\` with a React Aria virtualizer. The \`listBoxHandle\` provides \`scrollIntoView\` for programmatic scrolling within a virtualized list.
+For large datasets, wrap \`UNSAFE_ListBox\` in [\`Virtualizer\`](/?path=/docs/core-collections-virtualizer--docs). The \`listBoxHandle\` provides \`scrollIntoView\` for programmatic scrolling within a virtualized list.
 
 Use \`listBoxHandle\` to programmatically scroll an item into view or move keyboard focus to a specific key.
 
@@ -33306,10 +34024,13 @@ import { presets } from "./data";
 
 import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
 
-export const CustomTriggerButton = () => {
+export const CustomTriggerButton: React.FC<
+ Omit<ColorInputProps, "renderTriggerButton">
+> = (props) => {
  return (
  <ColorInput
  label="label"
+ presets={presets}
  renderTriggerButton={({ colorName, ref, triggerProps }) => (
  <ActionIconButton
  {...triggerProps}
@@ -33319,6 +34040,7 @@ export const CustomTriggerButton = () => {
  aria-haspopup="true"
  />
  )}
+ {...props}
  />
  );
 };
@@ -33419,6 +34141,10 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
  />
 );
 
+export const RedPresetColorInput: React.FC<ColorInputProps> = (props) => (
+ <ColorInput presets={presets} defaultValue="#ff0000" {...props} />
+);
+
 export const IconColorInputExample: React.FC<
  Omit<IconColorInputProps, "icon">
 > = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
@@ -33445,11 +34171,9 @@ export const NativeButtonIconColorInputButtonExample: React.FC<
  */
 className?: string
 /**
- * The \`width\` and \`height\` of the icon. This can be a string or a number. If
- * you want to set the width and height to different values, you can pass
- * \`width\` and \`height\` as separate props.
- * 
- * @default "1em"
+ * The \`width\` and \`height\` of the icon. This can be a string or a number.
+ * When omitted, no \`width\` or \`height\` attribute is set and the SVG keeps any
+ * \`width\` and \`height\` from the \`svg\` string.
  */
 size?: string | number
 /**
@@ -33465,8 +34189,6 @@ color?: string
  * The SVG string of the icon to render. This is useful if you want to render
  * an icon that is not in the catalog of icons provided in the list above. You
  * can use the \`createIcon\` function to create an icon from an SVG string.
- * 
- * @default undefined
  */
 svg: string
 }`,stories:{usage:[{id:"core-miscellaneous-icon--basic",name:"Basic",snippet:`const Basic = () => <Icon
@@ -33554,10 +34276,9 @@ style?: React.CSSProperties
  */
 children: React.ReactNode | ((props: OverlayTriggerState) => React.ReactNode)
 /**
- * The container element for the modal. By default, the modal is rendered as a
- * child of the body element.
- * 
- * @default document.body
+ * The container element for the modal. When omitted, the modal renders into
+ * the container from the nearest \`PortalContainerProvider\`, then the one from
+ * the nearest \`FrameProvider\`, and otherwise into the document body.
  */
 portalContainer?: HTMLElement
 /**
@@ -35786,6 +36507,20 @@ boundaryAxis?: 'horizontal' | 'vertical' | 'both'
  * @default "shift"
  */
 horizontalBoundaryBehavior?: "shift" | "anchor"
+/**
+ * The distance in pixels between the popover and its trigger along the main
+ * axis. When \`includeArrow\` is set, the arrow's 8px is added on top.
+ * 
+ * @default 2
+ */
+offset?: number
+/**
+ * The minimum distance in pixels kept between the popover and the edge of its
+ * boundary.
+ * 
+ * @default 0
+ */
+containerPadding?: number
 }`,stories:{usage:[{id:"core-overlays-popover-popovercontent--basic",name:"Basic",snippet:"const Basic = (args) => <PopoverCustomTargetExample popoverContentProps={args} />;"},{id:"core-overlays-popover-popovercontent--default-open-with-arrow",name:"Default Open With Arrow",snippet:"const DefaultOpenWithArrow = () => <PopoverDefaultOpenWithArrowExample />;"},{id:"core-overlays-popover-popovercontent--contained-focus",name:"Contained Focus",snippet:"const ContainedFocus = () => <PopoverContainedFocusExample />;"},{id:"core-overlays-popover-popovercontent--disable-animation",name:"Disable Animation",snippet:`const DisableAnimation = () => (
   <PopoverExample
     popoverProps={{ type: "dialog" }}
@@ -40550,7 +41285,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 m={"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 r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.7.0"};var b=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var m={"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 r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--expanded","core-collections-filelist--expanded-disabled","core-collections-filelist--grid","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-expanded","core-collections-filelist--many-grid","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-image--basic","core-content-image--contain","core-content-image--fallback","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--inline-content","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--compact","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--samples-inside-disabled","core-forms-fileuploader--samples-inside-grid","core-forms-fileuploader--samples-outside","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-completed-step","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.9.0"};var b=`
 # 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.
@@ -40601,7 +41336,7 @@ A component can be imported using:
 \`\`\`tsx
 import { ComponentName } from "@baseline-ui/core";
 \`\`\`
-`,c=`
+`,d=`
 A complete icon library organized by size with import instructions. The icons are organized by size and can be imported using the import statement provided.
 
 An icon can be imported using:
@@ -40657,7 +41392,7 @@ import { ComponentName } from "@baseline-ui/core";
 Generate a live demo URL for a Baseline UI story. Use a story ID from the Storybook index; the component info tool lists them for each component. The response is the URL, or an error result with suggestions when the story id is unknown. You can use this URL to understand the structure of the component and how to customize it.
 `,y=`
 Get the Figma URL for a given component. The response is the URL, or an error result when the component has no linked Figma design. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
-`,d=`
+`,c=`
 Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
 
 ## Usage
@@ -40715,5 +41450,5 @@ ${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,s
 ${e.map(t=>"- "+t).join(`
 `)}`).join(`
 
-`),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function j(){let n=new mcp_js.McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,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:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,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:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
+`),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function j(){let n=new mcp_js.McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:d,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:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:d,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:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:c,mimeType:"text/markdown"}],null,2)}]})),n}
 exports.createServer=j;