@baseline-ui/mcp 3.5.0 → 3.8.0

package/dist/server.cjs

@@ -386,6 +386,26 @@ export function ArabicLocaleLtrOverrideBarChart() {
  />
  </I18nProvider>
  );
+}
+
+const manyCategories = Array.from({ length: 40 }, (_, index) => ({
+ label: \`C\${index}\`,
+ a: 10 + (index % 7),
+ b: 5 + (index % 5),
+}));
+
+/** Many categories in a narrow chart without a grid. */
+export function ManyCategoriesNoGridBarChart() {
+ return (
+ <BarChart
+ data={manyCategories}
+ bars={[{ dataKey: "a" }, { dataKey: "b" }]}
+ barSize={32}
+ showGrid={false}
+ width={480}
+ xAxisDataKey="label"
+ />
+ );
 }`},similarTo:[],figmaUrl:null},LineChart:{id:"charts-linechart",breadcrumb:"Charts/LineChart",importStatement:`import { Box } from "@baseline-ui/core";
 import { LineChart } from "@baseline-ui/charts";`,description:"The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:'The `LineChart` component renders a responsive line chart for time series or other ordered data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.\n\n* Renders one or more lines from a single dataset, keyed by `xAxisDataKey` and the per-line `dataKey`.\n* Themed axes, grid, tooltip, and legend styled with Baseline UI tokens \u2014 adapts to light, dark, and high-contrast themes.\n* Default line colors cycle through theme support colors (`info`, `success`, `warning`, `error`); each line can override with a custom `color`.\n* Toggleable tooltip, legend, grid, and axes for compact or sparkline-style charts.\n* Configurable curve interpolation (`monotone`, `linear`, etc.) and per-line stroke width.\n* Responsive by default \u2014 fills the parent container width while preserving the configured `height`.\n* Built-in keyboard navigation across data points via Recharts\' accessibility layer.\n\n```jsx\nimport { LineChart } from "@baseline-ui/charts";\n\nconst data = [\n { month: "Jan", revenue: 4000, expenses: 2400 },\n { month: "Feb", revenue: 3000, expenses: 1398 },\n { month: "Mar", revenue: 5000, expenses: 3200 },\n];\n\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n/>;\n```\n\nThe default variant renders a full-width line chart with grid, axes, and tooltip enabled. Use `showLegend` to also render a legend above the chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n ]}\n showLegend\n/>\n```\n\nSet `variant="sparkline"` for a compact 40\xD720 inline trend indicator. Grid, axes, tooltip, and legend are hidden by default, the stroke is thinner, and chart margins are reduced to a 1px inset (just enough to prevent stroke clipping) so the line fills the box. Each chrome flag can still be re-enabled individually \u2014 for example, `showTooltip` re-enables the tooltip on a sparkline.\n\n```jsx\n<LineChart\n variant="sparkline"\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue" }]}\n/>\n```\n\nPass a single entry in `lines` to render a single-series chart.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[{ dataKey: "revenue", name: "Revenue" }]}\n/>\n```\n\nDefault line colors cycle through `info` \u2192 `success` \u2192 `warning` \u2192 `error` and wrap modulo four. Provide a `color` per line to override the default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue" },\n { dataKey: "expenses", name: "Expenses" },\n { dataKey: "profit", name: "Profit" },\n { dataKey: "tax", name: "Tax" },\n { dataKey: "fees", name: "Fees" },\n ]}\n showLegend\n/>\n```\n\nSet `dot` to `true` on a line to render a marker at each data point.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", dot: true },\n { dataKey: "expenses", name: "Expenses", dot: true },\n ]}\n/>\n```\n\nThe `type` prop on each line controls the curve interpolation. The default is `monotone`; use `linear` for straight segments between points. Any [Recharts curve type](https://recharts.org/en-US/api/Line#type) is supported.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", type: "linear" },\n { dataKey: "expenses", name: "Expenses", type: "linear" },\n ]}\n/>\n```\n\nOverride the default theme colors by passing `color` and `strokeWidth` per line.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[\n { dataKey: "revenue", name: "Revenue", color: "#7c3aed", strokeWidth: 3 },\n { dataKey: "expenses", name: "Expenses", color: "#f59e0b", strokeWidth: 3 },\n ]}\n showLegend\n/>\n```\n\n`showTooltip`, `showGrid`, `showXAxis`, and `showYAxis` toggle the corresponding chart chrome individually. They default to `true` for the default variant and `false` for the `sparkline` variant. Pass an explicit value to override the variant default.\n\n```jsx\n<LineChart\n data={data}\n xAxisDataKey="month"\n lines={[...]}\n showXAxis={false}\n showYAxis={false}\n showGrid={false}\n/>\n```\n\nThe chart surface is keyboard-focusable on the default variant. When focused via keyboard, the surface shows a focus ring and arrow keys move an indicator across data points, opening the tooltip at each step. The `sparkline` variant disables the accessibility layer and is not focusable.\n\n| Key | Function |\n| ------------- | --------------------------------------------------------------------------- |\n| `Tab` | Moves focus to the chart surface (default variant only). |\n| `Arrow Right` | Advances the active data point one step to the right and shows the tooltip. |\n| `Arrow Left` | Advances the active data point one step to the left and shows the tooltip. |\n| `Escape` | Dismisses the tooltip and clears the active data point. |\n\nThe `sparkline` variant disables the accessibility layer and is not keyboard-navigable.\n\nLineChart shares its legend, tooltip, and surface markup with every other chart in the package. The `BaselineUI-Chart-*` selectors are stable shared hooks; the kind-specific `BaselineUI-LineChart` class lets you scope styles to line charts only. Internal Recharts class names are not part of the public API.\n\n| Selector | Description |\n| ------------------------------------------------- | ------------------------------------------------------------------- |\n| `.BaselineUI-LineChart` | The line-chart root identifier. |\n| `.BaselineUI-LineChart[data-variant="default"]` | Targets only the default variant. |\n| `.BaselineUI-LineChart[data-variant="sparkline"]` | Targets only the sparkline variant. |\n| `.BaselineUI-Chart-Surface` | The chart drawing area that wraps the SVG. |\n| `.BaselineUI-Chart-Legend` | The legend list element. Only rendered when `showLegend` is `true`. |\n| `.BaselineUI-Chart-LegendItem` | A single legend entry \u2014 one per series. |\n| `.BaselineUI-Chart-LegendSwatch` | The colored swatch in a legend entry. |\n| `.BaselineUI-Chart-Tooltip` | The hover/focus tooltip container. |\n| `.BaselineUI-Chart-TooltipItem` | A single series entry in the tooltip. |\n| `.BaselineUI-Chart-TooltipSwatch` | The colored swatch in a tooltip entry. |',props:`interface LineChartProps {
 /**
@@ -3097,268 +3117,433 @@ children?: ReactNode
       Nested Box
     </Box>
   </Box>
-);`}],implementation:""},similarTo:[],figmaUrl:null},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.",documentation:'`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.\n\n* Combines a button (toggle/action) with a select dropdown menu\n* Button can toggle current selection or trigger an action\n* Supports icons, optional labels, and tooltips for better UX\n* Configurable with different sizes, states (disabled/enabled), and behaviors\n* Full keyboard navigation and screen reader support\n* Customizable styling through `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` props\n* Individual button behaviour per option via `buttonBehaviour` function\n* Validation state support\n\n```jsx\nimport { ButtonSelect } from "@baseline-ui/core";\nimport { EllipseIcon, RectangleIcon, PolygonIcon } from "@baseline-ui/icons/24";\n\nconst items = [\n { id: "ellipse", icon: EllipseIcon, label: "Ellipse" },\n { id: "square", icon: RectangleIcon, label: "Square" },\n { id: "polygon", icon: PolygonIcon, label: "Polygon" },\n];\n\n<ButtonSelect items={items} aria-label="Shape Options" />;\n```\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" hideLabel />\n```\n\nBy default, ButtonSelect displays a tooltip on the dropdown trigger. When `hideLabel` is `true`, the main button also receives a tooltip showing the selected item\'s label. You can disable tooltips by setting `tooltipProps` with `isDisabled: true`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={{ isDisabled: true }}\n/>\n```\n\nYou can also pass `tooltipProps` as a function to customize tooltips per trigger:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={(trigger) => ({\n text: trigger === "button" ? "Toggle shape" : "More shapes",\n })}\n/>\n```\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n defaultSelectedKey="polygon"\n/>\n```\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" defaultSelected={true} />\n```\n\nYou can control the selected item by using the `selectedKey` prop. Use `isSelected` and `onButtonSelectionChange` to control the button toggle state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n selectedKey={selectedKey}\n onSelectionChange={setSelectedKey}\n isSelected={isSelected}\n onButtonSelectionChange={({ isSelected }) => setIsSelected(isSelected)}\n/>\n```\n\nYou can disable the entire component using the `isDisabled` prop. Use `disabledKeys` to disable individual options in the dropdown.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" isDisabled />\n```\n\nYou can disable specific options in the dropdown using `disabledKeys`. If the currently selected item\'s key is in `disabledKeys`, the main button is also disabled.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n disabledKeys={["square"]}\n/>\n```\n\nBy default, the button uses a `"toggle"` behavior, which means it can be toggled on/off. You can change it to `"action"` behavior, which means it will trigger an action when pressed but won\'t toggle a state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour="action"\n onPress={(e) => console.log("Button pressed", e)}\n/>\n```\n\nYou can also pass `buttonBehaviour` as a function to assign different behaviors per option:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour={(activeKey) =>\n activeKey === "ellipse" ? "action" : "toggle"\n }\n/>\n```\n\nButtonSelect provides several callbacks:\n\n* **`onPress`** \u2014 Called when the main button is pressed\n* **`onButtonAction`** \u2014 Called with `{ isSelected, selectedKey, buttonBehaviour }` when the button is pressed\n* **`onButtonSelectionChange`** \u2014 Called with `{ isSelected, selectedKey }` when toggle state changes\n* **`onSelectionChange`** \u2014 Called with the new key when a dropdown option is selected\n* **`onOptionPress`** \u2014 Called with `(pressEvent, key)` when any dropdown option is pressed\n\nUse `validationState` to indicate a validation state. Supported values are `"error"` and `"warning"`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n validationState="error"\n/>\n```\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" size="lg" />\n```\n\nUse `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` to customize the appearance. These accept either static values or functions for dynamic styling:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n optionClassName={(item, { isButton, isSelected }) =>\n isButton && isSelected ? "active-button" : ""\n }\n optionStyle={(item, { isButton }) => ({\n backgroundColor: isButton ? "lightblue" : undefined,\n })}\n triggerClassName="custom-trigger"\n/>\n```\n\n| Selector | Description |\n| ---------------------------------- | ----------------------------------------------------------- |\n| `.BaselineUI-ButtonSelect` | The root container element. |\n| `.BaselineUI-ButtonSelect-Button` | The main action/toggle button. |\n| `.BaselineUI-ButtonSelect-Trigger` | The dropdown trigger (caret) button. |\n| `.BaselineUI-ButtonSelect-Select` | The select/dropdown wrapper. |\n| `[data-hovered]` | Present when the component is hovered. |\n| `[data-selected]` | Present when the button is in the selected (toggled) state. |\n| `[data-disabled]` | Present when the component is disabled. |\n| `[data-expanded]` | Present when the dropdown is open. |\n| `[data-button-behaviour]` | The current button behaviour (`"toggle"` or `"action"`). |\n\n> **Note:** Boolean data attributes (`data-hovered`, `data-selected`, `data-disabled`, `data-expanded`) are only present in the DOM when `true`.\n\n| Key | Function |\n| ----------- | ------------------------------------------------------------------------ |\n| `Space` | Toggles the button if focused, or activates the selected dropdown option |\n| `Enter` | Toggles the button if focused, or activates the selected dropdown option |\n| `Tab` | Moves focus to the next focusable element |\n| `Shift+Tab` | Moves focus to the previous focusable element |\n| `ArrowDown` | Opens the dropdown if trigger is focused; navigates down within dropdown |\n| `ArrowUp` | Navigates up within the dropdown |\n| `Home` | Moves to the first option in the dropdown |\n| `End` | Moves to the last option in the dropdown |\n| `Escape` | Closes the dropdown if open |\n\n* **Select** \u2014 Use when you only need a dropdown without a primary action button.\n* **ToggleButton** \u2014 Use when you need a standalone toggle button without a dropdown.\n* **ActionButton** \u2014 Use when you need a standalone action button.\n* **ListBox** \u2014 The underlying list component used in the dropdown.',props:`interface ButtonSelectProps {
+);`}],implementation:""},similarTo:[],figmaUrl:null},Breadcrumbs:{id:"core-navigation-breadcrumbs",breadcrumb:"Core/Navigation/Breadcrumbs",importStatement:'import { ActionIconButton, Breadcrumb, Breadcrumbs, Menu, Select, VariantViewer } from "@baseline-ui/core";',description:"`Breadcrumbs` shows the path to the current page or resource as a trail of links, so people can see where they are and jump back to a parent.",documentation:'`Breadcrumbs` shows the path to the current page or resource as a trail of links, so people can see where they are and jump back to a parent.\n\n* Text, icon and icon-only breadcrumbs\n* Custom content, such as a `Select`, in place of a link\n* Individually or fully disabled breadcrumbs\n* Custom or no separator\n* Breadcrumbs that are real links with `href`\n\n```jsx\nimport { Breadcrumb, Breadcrumbs } from "@baseline-ui/core";\n\n<Breadcrumbs aria-label="File location" onAction={(id) => navigate(id)}>\n <Breadcrumb id="home" label="Home" />\n <Breadcrumb id="documents" label="Documents" />\n <Breadcrumb id="report" label="Report.pdf" />\n</Breadcrumbs>;\n```\n\nEach `Breadcrumb` needs a unique `id`, which is passed to `onAction` when it is pressed. Pass `href` to render the breadcrumb as a regular link; `onAction` is still called when it is pressed. The current breadcrumb and disabled breadcrumbs are not links, even with an `href`. The last breadcrumb is the current page: it is exposed with `aria-current="page"` and cannot be pressed.\n\nAdd an `icon` next to the `label`, or use `icon` with an `aria-label` and no `label` for an icon-only breadcrumb.\n\nPass the `id`s of the breadcrumbs to disable in `disabledKeys`, or set `isDisabled` to disable all of them.\n\nUse `separator` to replace the default caret, or pass `null` to render none. The separator is hidden from assistive technology and only appears between breadcrumbs.\n\nChildren of a `Breadcrumb` replace its link and render as is, so you can put a `Select` or a `Menu` in the trail. `onAction` is not called for them. Custom content stays interactive even when it is the last breadcrumb. It does not receive `disabledKeys`, `isDisabled` or the current-page marking, so handle those in the content itself.\n\n`Breadcrumbs` does not collapse on its own. To shorten a long trail, put the hidden levels in a `Menu` whose trigger is an ellipsis button.\n\nThe trail is rendered inside a `nav` landmark with an ordered list of breadcrumbs. Give it an `aria-label` that describes what the trail is for, such as "File location".\n\n* The current page has `aria-current="page"`.\n* Icon-only breadcrumbs need an `aria-label`.\n* Separators are decorative and hidden from assistive technology.\n\n| Key | Function |\n| ----- | ------------------------------------- |\n| Tab | Moves focus to the next enabled link. |\n| Enter | Activates the focused breadcrumb. |',props:`interface BreadcrumbsProps {
 /**
- * @deprecated Do not use in new components. This is a legacy block
- * identifier; new components should exclude it via
- * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
- * Retained on existing components for backward compatibility.
- * 
- * The unique identifier for the block. This is used to identify the block in
- * the DOM and in the block map. It is added as a data attribute
- * \`data-block-id\` to the root element of the block if a DOM node is
- * rendered.
- */
-data-block-id?: string
-/**
- * @deprecated Do not use in new components. This is a legacy block group
- * marker; new components should exclude it via
- * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
- * Retained on existing components for backward compatibility.
- * 
- * Represents a data block group. This is similar to \`data-block-id\` but it
- * doesn't have to be unique just like \`class\`. This is used to group blocks
- * together in the DOM and in the block map. It is added as a data attribute
- * \`data-block-class\` to the root element of the block if a DOM node is
- * rendered.
+ * The \`id\` of the root element.
  */
-data-block-class?: string
+id?: string
 /**
- * The className applied to the root element of the component.
+ * The \`Breadcrumb\` items to render, from the root to the current page.
  */
-className?: string
+children: React.ReactNode
 /**
- * The style applied to the root element of the component.
+ * Handler that is called with the \`id\` of a breadcrumb when it is pressed.
  */
-style?: React.CSSProperties
+onAction?: (key: Key) => void
 /**
- * The size of the button.
- * 
- * @default "md"
+ * The \`id\`s of the breadcrumbs that are disabled. Only the link is disabled:
+ * unlike \`isDisabled\`, the list item gets no \`data-disabled\` attribute.
  */
-size?: "md" | "lg"
+disabledKeys?: Iterable<Key>
 /**
- * Whether to hide the label in the button.
+ * Whether every breadcrumb is disabled.
  * 
  * @default false
  */
-hideLabel?: boolean
-/**
- * A callback that is called when the button selection changes.
- */
-onButtonSelectionChange?: (options: {
-  isSelected: boolean;
-  selectedKey: string;
-}) => void
-/**
- * The aria-label for the select button.
- */
-moreAriaLabel?: string
-/**
- * A function that is called to get the class name for the option.
- */
-optionClassName?: | string
-| ((
-    item: ListOption,
-    options: {
-      isButton: boolean;
-      isSelected: boolean;
-    },
-  ) => string)
-/**
- * A function that is called to get the style for the option.
- */
-optionStyle?: | React.CSSProperties
-| ((
-    item: ListOption,
-    options: {
-      isButton: boolean;
-      isSelected: boolean;
-    },
-  ) => React.CSSProperties)
-/**
- * Props for the tooltip.
- */
-tooltipProps?: | Omit<TooltipProps, "children">
-| ((trigger: "button" | "select") => Omit<TooltipProps, "children">)
-/**
- * The behaviour of the button select.
- * 
- * @default "toggle"
- */
-buttonBehaviour?: ButtonBehaviour | ((activeKey: string) => ButtonBehaviour)
-/**
- * A callback that is called when the button is pressed.
- */
-onButtonAction?: (options: {
-  isSelected: boolean;
-  selectedKey: string;
-  buttonBehaviour: ButtonBehaviour;
-}) => void
+isDisabled?: boolean
 /**
- * A callback that is called when the option in the dropdown is pressed.
- */
-onOptionPress?: (e: PressEvent, key: string) => void
-}`,stories:{usage:[{id:"core-forms-buttonselect--basic",name:"Basic",snippet:'const Basic = () => <ButtonSelect aria-label="Button select" items={items} />;'},{id:"core-forms-buttonselect--variants",name:"Variants",snippet:`const Variants = (args) => (
-  <VariantViewer
-    header={["Enabled", "Selected", "Disabled", "Disabled Selected"]}
-    component={ButtonSelect}
+ * The element rendered between breadcrumbs. It is hidden from assistive
+ * technology. Pass \`null\`, \`false\` or \`""\` to render no separator.
+ * 
+ * @default A caret icon pointing toward the current page
+ */
+separator?: React.ReactNode
+}`,stories:{usage:[{id:"core-navigation-breadcrumbs--basic",name:"Basic",snippet:`const Basic = () => <Breadcrumbs aria-label="File location">
+    <Breadcrumb id="home" label="Home" />
+    <Breadcrumb id="documents" label="Documents" />
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--with-icons",name:"With Icons",snippet:`const WithIcons = () => <Breadcrumbs aria-label="File location">
+    <Breadcrumb id="folders" icon={FolderIcon} aria-label="Folders" />
+    <Breadcrumb id="documents" label="Documents" icon={FolderIcon} />
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--disabled",name:"Disabled",snippet:`const Disabled = () => <Breadcrumbs aria-label="File location" disabledKeys={["documents"]}>
+    <Breadcrumb id="home" label="Home" />
+    <Breadcrumb id="documents" label="Documents" />
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--custom-separator",name:"Custom Separator",snippet:`const CustomSeparator = () => <Breadcrumbs aria-label="File location" separator="/">
+    <Breadcrumb id="home" label="Home" />
+    <Breadcrumb id="documents" label="Documents" />
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--with-select",name:"With Select",snippet:`const WithSelect = () => <Breadcrumbs aria-label="File location">
+    <Breadcrumb id="home" label="Home" />
+    <Breadcrumb id="folder">
+        <Select
+            aria-label="Folder"
+            variant="ghost"
+            items={folderItems}
+            defaultSelectedKey="design" />
+    </Breadcrumb>
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--collapsed",name:"Collapsed",snippet:`const Collapsed = () => <Breadcrumbs aria-label="File location">
+    <Breadcrumb id="home" label="Home" />
+    <Breadcrumb id="more">
+        <Menu
+            items={hiddenItems}
+            triggerLabel="More"
+            renderTrigger={({ buttonProps, ref }) => (
+              <ActionIconButton
+                {...buttonProps}
+                ref={ref}
+                icon={MoreIcon}
+                aria-label="More"
+                variant="tertiary"
+              />
+            )} />
+    </Breadcrumb>
+    <Breadcrumb id="documents" label="Documents" />
+    <Breadcrumb id="report" label="Report.pdf" />
+</Breadcrumbs>;`},{id:"core-navigation-breadcrumbs--variants",name:"Variants",snippet:`const Variants = () => (
+  <VariantViewer<React.ComponentProps<typeof BreadcrumbsRow>>
+    header={["Enabled", "Item disabled", "All disabled"]}
     variants={{
-      Medium: [
-        { size: "md" },
-        { size: "md", defaultSelected: true },
-        { size: "md", isDisabled: true },
-        { size: "md", isDisabled: true, defaultSelected: true },
+      "Text only": [
+        { kind: "text" },
+        { kind: "text", disabledKeys: ["home", "documents"] },
+        { kind: "text", isDisabled: true },
       ],
-      Large: [
-        { size: "lg" },
-        { size: "lg", defaultSelected: true },
-        { size: "lg", isDisabled: true },
-        { size: "lg", isDisabled: true, defaultSelected: true },
+      "Icon only": [
+        { kind: "icon-only" },
+        { kind: "icon-only", disabledKeys: ["home", "documents"] },
+        { kind: "icon-only", isDisabled: true },
       ],
-      "Without Label Medium": [
-        { size: "md", hideLabel: true },
-        { size: "md", hideLabel: true, defaultSelected: true },
-        { size: "md", hideLabel: true, isDisabled: true },
-        {
-          size: "md",
-          hideLabel: true,
-          isDisabled: true,
-          defaultSelected: true,
-        },
-      ],
-      "Without Label Large": [
-        { size: "lg", hideLabel: true },
-        { size: "lg", hideLabel: true, defaultSelected: true },
-        { size: "lg", hideLabel: true, isDisabled: true },
-        {
-          size: "lg",
-          hideLabel: true,
-          isDisabled: true,
-          defaultSelected: true,
-        },
+      "Icon and text": [
+        { kind: "icon-and-text" },
+        { kind: "icon-and-text", disabledKeys: ["home", "documents"] },
+        { kind: "icon-and-text", isDisabled: true },
       ],
     }}
-    defaultProps={args}
+    component={BreadcrumbsRow}
   />
-);`},{id:"core-forms-buttonselect--with-hidden-label",name:"With Hidden Label",snippet:'const WithHiddenLabel = () => <ButtonSelect aria-label="Button select" items={items} hideLabel />;'},{id:"core-forms-buttonselect--without-tooltip",name:"Without Tooltip",snippet:`const WithoutTooltip = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    tooltipProps={{
-      isDisabled: true,
-    }} />;`},{id:"core-forms-buttonselect--default-select-selected-value",name:"Default Select Selected Value",snippet:'const DefaultSelectSelectedValue = () => <ButtonSelect aria-label="Button select" items={items} defaultSelectedKey="polygon" />;'},{id:"core-forms-buttonselect--default-button-selected-value",name:"Default Button Selected Value",snippet:'const DefaultButtonSelectedValue = () => <ButtonSelect aria-label="Button select" items={items} defaultSelected />;'},{id:"core-forms-buttonselect--controlled",name:"Controlled",snippet:'const Controlled = () => <ButtonSelect aria-label="Button select" items={items} selectedKey="polygon" />;'},{id:"core-forms-buttonselect--disabled",name:"Disabled",snippet:`const Disabled = () => <Box display="flex" flexDirection="column" gap="lg">
-    <ButtonSelect aria-label="Button select" items={items} isDisabled />
-    <ButtonSelect aria-label="Button select" items={items} isDisabled selectedKey="ellipse" />
-</Box>;`},{id:"core-forms-buttonselect--with-default-open",name:"With Default Open",snippet:'const WithDefaultOpen = () => <ButtonSelect aria-label="Button select" items={items} defaultOpen />;'},{id:"core-forms-buttonselect--with-action-behaviour",name:"With Action Behaviour",snippet:`const WithActionBehaviour = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    buttonBehaviour="action"
-    onPress={fn()}
-    onSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--with-individual-button-behaviour",name:"With Individual Button Behaviour",snippet:`const WithIndividualButtonBehaviour = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    buttonBehaviour={(activeKey) =>
-      activeKey === "ellipse" ? "action" : "toggle"}
-    onPress={fn()}
-    onSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--with-disabled-keys",name:"With Disabled Keys",snippet:'const WithDisabledKeys = () => <ButtonSelect aria-label="Button select" items={items} disabledKeys={["square"]} />;'},{id:"core-forms-buttonselect--with-multiple-disabled-keys",name:"With Multiple Disabled Keys",snippet:`const WithMultipleDisabledKeys = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    disabledKeys={["square", "polygon"]} />;`},{id:"core-forms-buttonselect--with-disabled-keys-and-default-selected",name:"With Disabled Keys And Default Selected",snippet:`const WithDisabledKeysAndDefaultSelected = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    disabledKeys={["square"]}
-    defaultSelectedKey="polygon" />;`},{id:"core-forms-buttonselect--with-button-disabled-key",name:"With Button Disabled Key",snippet:'const WithButtonDisabledKey = () => <ButtonSelect aria-label="Button select" items={items} disabledKeys={["ellipse"]} />;'},{id:"core-forms-buttonselect--with-validation-error",name:"With Validation Error",snippet:'const WithValidationError = () => <ButtonSelect aria-label="Button select" items={items} validationState="error" />;'},{id:"core-forms-buttonselect--with-callbacks",name:"With Callbacks",snippet:`const WithCallbacks = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    onPress={fn()}
-    onSelectionChange={fn()}
-    onButtonAction={fn()}
-    onButtonSelectionChange={fn()}
-    onOptionPress={fn()} />;`},{id:"core-forms-buttonselect--controlled-button-selection",name:"Controlled Button Selection",snippet:`const ControlledButtonSelection = () => <ButtonSelect
-    aria-label="Button select"
-    items={items}
-    isSelected
-    onButtonSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--long-text-labels",name:"Long Text Labels",snippet:`const LongTextLabels = () => <ButtonSelect
-    aria-label="Button select"
-    items={[
-      {
-        id: "long-1",
-        label:
-          "This is an extremely long label that should demonstrate overflow",
-      },
-      {
-        id: "long-2",
-        label: "Another very long label to test truncation and layout",
-      },
-      { id: "short", label: "Short" },
-    ]} />;`},{id:"core-forms-buttonselect--many-items",name:"Many Items",snippet:'const ManyItems = () => <ButtonSelect\n    aria-label="Button select"\n    items={Array.from({ length: 20 }, (_, i) => ({\n      id: `item-${i}`,\n      label: `Item ${i + 1}`,\n    }))}\n    defaultOpen />;'},{id:"core-forms-buttonselect--items-without-icons",name:"Items Without Icons",snippet:`const ItemsWithoutIcons = () => <ButtonSelect
-    aria-label="Button select"
-    items={[
-      { id: "option-a", label: "Option A" },
-      { id: "option-b", label: "Option B" },
-      { id: "option-c", label: "Option C" },
-    ]} />;`},{id:"core-forms-buttonselect--exclude-from-tab-order",name:"Exclude From Tab Order",snippet:'const ExcludeFromTabOrder = () => <ButtonSelect aria-label="Button select" items={items} excludeFromTabOrder />;'}],implementation:`import React from "react";
+);`}],implementation:`import { FolderIcon } from "@baseline-ui/icons/16";
+import React from "react";
 
 import { items } from "../../ListBox/__tests__/testComponents";
-import { ButtonSelect } from "../ButtonSelect";
+import { Select } from "../../Select/Select";
+import { Breadcrumb, Breadcrumbs } from "../Breadcrumbs";
 
-import type { ButtonSelectProps } from "../ButtonSelect.types";
+import type { BreadcrumbsProps } from "../Breadcrumbs.types";
 
-export const ButtonSelectExample: React.FC<Omit<ButtonSelectProps, "items">> = (
- args,
-) => {
- return (
- <ButtonSelect
- optionClassName={(item) => item.label}
- {...args}
- items={items}
- />
- );
-};
-
-export const IndividualButtonBehaviour: React.FC<
- Omit<ButtonSelectProps, "items">
-> = (args) => {
- return (
- <ButtonSelect
- buttonBehaviour={(activeKey) =>
- activeKey === "ellipse" ? "action" : "toggle"
+export const BreadcrumbsExample: React.FC<
+ Partial<BreadcrumbsProps> & {
+ homeTestId?: string;
+ unlabeled?: boolean;
+ withTrailingButton?: boolean;
  }
- {...args}
+> = ({ homeTestId, unlabeled, withTrailingButton, ...props }) => (
+ <>
+ <Breadcrumbs aria-label={unlabeled ? undefined : "Trail"} {...props}>
+ <Breadcrumb id="home" label="Home" data-testid={homeTestId} />
+ <Breadcrumb id="docs" label="Documents" />
+ <Breadcrumb id="file" label="Report.pdf" />
+ </Breadcrumbs>
+ {withTrailingButton ? (
+ <button type="button" onClick={() => props.onAction?.("after")}>
+ After
+ </button>
+ ) : null}
+ </>
+);
+
+export const BreadcrumbsIconExample: React.FC<Partial<BreadcrumbsProps>> = (
+ props,
+) => (
+ <Breadcrumbs aria-label="Trail" {...props}>
+ <Breadcrumb id="folders" icon={FolderIcon} aria-label="Folders" />
+ <Breadcrumb id="docs" label="Documents" icon={FolderIcon} />
+ <Breadcrumb id="file" label="Report.pdf" />
+ </Breadcrumbs>
+);
+
+export const BreadcrumbsSelectExample: React.FC<{ last?: boolean }> = ({
+ last = false,
+}) => {
+ const select = (
+ <Select
+ aria-label="Shape"
+ variant="ghost"
  items={items}
- aria-label="Shape Options"
+ defaultSelectedKey="ellipse"
  />
  );
-};
 
-export const ButtonSelectWithTooltipFn: React.FC<
- Omit<ButtonSelectProps, "items">
-> = (args) => {
  return (
- <ButtonSelect
- {...args}
- items={items}
- hideLabel={true}
- tooltipProps={(trigger) => ({
- text: trigger === "button" ? "Custom Button Tip" : "Custom Select Tip",
- })}
- />
+ <Breadcrumbs aria-label="Trail">
+ <Breadcrumb id="home" label="Home" />
+ <Breadcrumb id="shape">{select}</Breadcrumb>
+ {!last && <Breadcrumb id="file" label="Report.pdf" />}
+ </Breadcrumbs>
  );
 };
 
-export const ButtonSelectWithOptionStyleFn: React.FC<
- Omit<ButtonSelectProps, "items">
-> = (args) => {
- return (
- <ButtonSelect
- {...args}
- items={items}
- optionStyle={(_, { isButton }) => ({
- backgroundColor: isButton ? "rgb(0, 128, 0)" : "rgb(0, 0, 255)",
- })}
- />
- );
-};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.",documentation:'`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
+export const BreadcrumbsHrefExample: React.FC<Partial<BreadcrumbsProps>> = (
+ props,
+) => (
+ <Breadcrumbs aria-label="Trail" {...props}>
+ <Breadcrumb id="home" label="Home" href="#home" />
+ <Breadcrumb id="file" label="Report.pdf" href="#file" />
+ </Breadcrumbs>
+);`},similarTo:[],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=19605-113450&m=dev"},ButtonSelect:{id:"core-forms-buttonselect",breadcrumb:"Core/Forms/ButtonSelect",importStatement:'import { Box, ButtonSelect, VariantViewer } from "@baseline-ui/core";',description:"`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.",documentation:'`ButtonSelect` pairs a primary action button with an adjacent dropdown trigger that opens a list of options. Use it when a single action has multiple related variants the user can switch between, such as picking the active shape tool from a set.\n\n* Combines a button (toggle/action) with a select dropdown menu\n* Button can toggle current selection or trigger an action\n* Supports icons, optional labels, and tooltips for better UX\n* Configurable with different sizes, states (disabled/enabled), and behaviors\n* Full keyboard navigation and screen reader support\n* Customizable styling through `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` props\n* Individual button behaviour per option via `buttonBehaviour` function\n* Validation state support\n\n```jsx\nimport { ButtonSelect } from "@baseline-ui/core";\nimport { EllipseIcon, RectangleIcon, PolygonIcon } from "@baseline-ui/icons/24";\n\nconst items = [\n { id: "ellipse", icon: EllipseIcon, label: "Ellipse" },\n { id: "square", icon: RectangleIcon, label: "Square" },\n { id: "polygon", icon: PolygonIcon, label: "Polygon" },\n];\n\n<ButtonSelect items={items} aria-label="Shape Options" />;\n```\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" hideLabel />\n```\n\nBy default, ButtonSelect displays a tooltip on the dropdown trigger. When `hideLabel` is `true`, the main button also receives a tooltip showing the selected item\'s label. You can disable tooltips by setting `tooltipProps` with `isDisabled: true`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={{ isDisabled: true }}\n/>\n```\n\nYou can also pass `tooltipProps` as a function to customize tooltips per trigger:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n tooltipProps={(trigger) => ({\n text: trigger === "button" ? "Toggle shape" : "More shapes",\n })}\n/>\n```\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n defaultSelectedKey="polygon"\n/>\n```\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" defaultSelected={true} />\n```\n\nYou can control the selected item by using the `selectedKey` prop. Use `isSelected` and `onButtonSelectionChange` to control the button toggle state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n selectedKey={selectedKey}\n onSelectionChange={setSelectedKey}\n isSelected={isSelected}\n onButtonSelectionChange={({ isSelected }) => setIsSelected(isSelected)}\n/>\n```\n\nYou can disable the entire component using the `isDisabled` prop. Use `disabledKeys` to disable individual options in the dropdown.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" isDisabled />\n```\n\nYou can disable specific options in the dropdown using `disabledKeys`. If the currently selected item\'s key is in `disabledKeys`, the main button is also disabled.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n disabledKeys={["square"]}\n/>\n```\n\nBy default, the button uses a `"toggle"` behavior, which means it can be toggled on/off. You can change it to `"action"` behavior, which means it will trigger an action when pressed but won\'t toggle a state.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour="action"\n onPress={(e) => console.log("Button pressed", e)}\n/>\n```\n\nYou can also pass `buttonBehaviour` as a function to assign different behaviors per option:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n buttonBehaviour={(activeKey) =>\n activeKey === "ellipse" ? "action" : "toggle"\n }\n/>\n```\n\nButtonSelect provides several callbacks:\n\n* **`onPress`** \u2014 Called when the main button is pressed\n* **`onButtonAction`** \u2014 Called with `{ isSelected, selectedKey, buttonBehaviour }` when the button is pressed\n* **`onButtonSelectionChange`** \u2014 Called with `{ isSelected, selectedKey }` when toggle state changes\n* **`onSelectionChange`** \u2014 Called with the new key when a dropdown option is selected\n* **`onOptionPress`** \u2014 Called with `(pressEvent, key)` when any dropdown option is pressed\n\nUse `validationState` to indicate a validation state. Supported values are `"error"` and `"warning"`.\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n validationState="error"\n/>\n```\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label="Shape Options" size="lg" />\n```\n\nUse `optionClassName`, `optionStyle`, `triggerClassName`, and `triggerStyle` to customize the appearance. These accept either static values or functions for dynamic styling:\n\n```jsx\n<ButtonSelect\n items={items}\n aria-label="Shape Options"\n optionClassName={(item, { isButton, isSelected }) =>\n isButton && isSelected ? "active-button" : ""\n }\n optionStyle={(item, { isButton }) => ({\n backgroundColor: isButton ? "lightblue" : undefined,\n })}\n triggerClassName="custom-trigger"\n/>\n```\n\n| Selector | Description |\n| ---------------------------------- | ----------------------------------------------------------- |\n| `.BaselineUI-ButtonSelect` | The root container element. |\n| `.BaselineUI-ButtonSelect-Button` | The main action/toggle button. |\n| `.BaselineUI-ButtonSelect-Trigger` | The dropdown trigger (caret) button. |\n| `.BaselineUI-ButtonSelect-Select` | The select/dropdown wrapper. |\n| `[data-hovered]` | Present when the component is hovered. |\n| `[data-selected]` | Present when the button is in the selected (toggled) state. |\n| `[data-disabled]` | Present when the component is disabled. |\n| `[data-expanded]` | Present when the dropdown is open. |\n| `[data-button-behaviour]` | The current button behaviour (`"toggle"` or `"action"`). |\n\n> **Note:** Boolean data attributes (`data-hovered`, `data-selected`, `data-disabled`, `data-expanded`) are only present in the DOM when `true`.\n\n| Key | Function |\n| ----------- | ------------------------------------------------------------------------ |\n| `Space` | Toggles the button if focused, or activates the selected dropdown option |\n| `Enter` | Toggles the button if focused, or activates the selected dropdown option |\n| `Tab` | Moves focus to the next focusable element |\n| `Shift+Tab` | Moves focus to the previous focusable element |\n| `ArrowDown` | Opens the dropdown if trigger is focused; navigates down within dropdown |\n| `ArrowUp` | Navigates up within the dropdown |\n| `Home` | Moves to the first option in the dropdown |\n| `End` | Moves to the last option in the dropdown |\n| `Escape` | Closes the dropdown if open |\n\n* **Select** \u2014 Use when you only need a dropdown without a primary action button.\n* **ToggleButton** \u2014 Use when you need a standalone toggle button without a dropdown.\n* **ActionButton** \u2014 Use when you need a standalone action button.\n* **ListBox** \u2014 The underlying list component used in the dropdown.',props:`interface ButtonSelectProps {
+/**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
+ * The unique identifier for the block. This is used to identify the block in
+ * the DOM and in the block map. It is added as a data attribute
+ * \`data-block-id\` to the root element of the block if a DOM node is
+ * rendered.
+ */
+data-block-id?: string
+/**
+ * @deprecated Do not use in new components. This is a legacy block group
+ * marker; new components should exclude it via
+ * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
+ * Retained on existing components for backward compatibility.
+ * 
+ * Represents a data block group. This is similar to \`data-block-id\` but it
+ * doesn't have to be unique just like \`class\`. This is used to group blocks
+ * together in the DOM and in the block map. It is added as a data attribute
+ * \`data-block-class\` to the root element of the block if a DOM node is
+ * rendered.
+ */
+data-block-class?: string
+/**
+ * The className applied to the root element of the component.
+ */
+className?: string
+/**
+ * The style applied to the root element of the component.
+ */
+style?: React.CSSProperties
+/**
+ * The size of the button.
+ * 
+ * @default "md"
+ */
+size?: "md" | "lg"
+/**
+ * Whether to hide the label in the button.
+ * 
+ * @default false
+ */
+hideLabel?: boolean
+/**
+ * A callback that is called when the button selection changes.
+ */
+onButtonSelectionChange?: (options: {
+  isSelected: boolean;
+  selectedKey: string;
+}) => void
+/**
+ * The aria-label for the select button.
+ */
+moreAriaLabel?: string
+/**
+ * A function that is called to get the class name for the option.
+ */
+optionClassName?: | string
+| ((
+    item: ListOption,
+    options: {
+      isButton: boolean;
+      isSelected: boolean;
+    },
+  ) => string)
+/**
+ * A function that is called to get the style for the option.
+ */
+optionStyle?: | React.CSSProperties
+| ((
+    item: ListOption,
+    options: {
+      isButton: boolean;
+      isSelected: boolean;
+    },
+  ) => React.CSSProperties)
+/**
+ * Props for the tooltip.
+ */
+tooltipProps?: | Omit<TooltipProps, "children">
+| ((trigger: "button" | "select") => Omit<TooltipProps, "children">)
+/**
+ * The behaviour of the button select.
+ * 
+ * @default "toggle"
+ */
+buttonBehaviour?: ButtonBehaviour | ((activeKey: string) => ButtonBehaviour)
+/**
+ * A callback that is called when the button is pressed.
+ */
+onButtonAction?: (options: {
+  isSelected: boolean;
+  selectedKey: string;
+  buttonBehaviour: ButtonBehaviour;
+}) => void
+/**
+ * A callback that is called when the option in the dropdown is pressed.
+ */
+onOptionPress?: (e: PressEvent, key: string) => void
+}`,stories:{usage:[{id:"core-forms-buttonselect--basic",name:"Basic",snippet:'const Basic = () => <ButtonSelect aria-label="Button select" items={items} />;'},{id:"core-forms-buttonselect--variants",name:"Variants",snippet:`const Variants = (args) => (
+  <VariantViewer
+    header={["Enabled", "Selected", "Disabled", "Disabled Selected"]}
+    component={ButtonSelect}
+    variants={{
+      Medium: [
+        { size: "md" },
+        { size: "md", defaultSelected: true },
+        { size: "md", isDisabled: true },
+        { size: "md", isDisabled: true, defaultSelected: true },
+      ],
+      Large: [
+        { size: "lg" },
+        { size: "lg", defaultSelected: true },
+        { size: "lg", isDisabled: true },
+        { size: "lg", isDisabled: true, defaultSelected: true },
+      ],
+      "Without Label Medium": [
+        { size: "md", hideLabel: true },
+        { size: "md", hideLabel: true, defaultSelected: true },
+        { size: "md", hideLabel: true, isDisabled: true },
+        {
+          size: "md",
+          hideLabel: true,
+          isDisabled: true,
+          defaultSelected: true,
+        },
+      ],
+      "Without Label Large": [
+        { size: "lg", hideLabel: true },
+        { size: "lg", hideLabel: true, defaultSelected: true },
+        { size: "lg", hideLabel: true, isDisabled: true },
+        {
+          size: "lg",
+          hideLabel: true,
+          isDisabled: true,
+          defaultSelected: true,
+        },
+      ],
+    }}
+    defaultProps={args}
+  />
+);`},{id:"core-forms-buttonselect--with-hidden-label",name:"With Hidden Label",snippet:'const WithHiddenLabel = () => <ButtonSelect aria-label="Button select" items={items} hideLabel />;'},{id:"core-forms-buttonselect--without-tooltip",name:"Without Tooltip",snippet:`const WithoutTooltip = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    tooltipProps={{
+      isDisabled: true,
+    }} />;`},{id:"core-forms-buttonselect--default-select-selected-value",name:"Default Select Selected Value",snippet:'const DefaultSelectSelectedValue = () => <ButtonSelect aria-label="Button select" items={items} defaultSelectedKey="polygon" />;'},{id:"core-forms-buttonselect--default-button-selected-value",name:"Default Button Selected Value",snippet:'const DefaultButtonSelectedValue = () => <ButtonSelect aria-label="Button select" items={items} defaultSelected />;'},{id:"core-forms-buttonselect--controlled",name:"Controlled",snippet:'const Controlled = () => <ButtonSelect aria-label="Button select" items={items} selectedKey="polygon" />;'},{id:"core-forms-buttonselect--disabled",name:"Disabled",snippet:`const Disabled = () => <Box display="flex" flexDirection="column" gap="lg">
+    <ButtonSelect aria-label="Button select" items={items} isDisabled />
+    <ButtonSelect aria-label="Button select" items={items} isDisabled selectedKey="ellipse" />
+</Box>;`},{id:"core-forms-buttonselect--with-default-open",name:"With Default Open",snippet:'const WithDefaultOpen = () => <ButtonSelect aria-label="Button select" items={items} defaultOpen />;'},{id:"core-forms-buttonselect--with-action-behaviour",name:"With Action Behaviour",snippet:`const WithActionBehaviour = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    buttonBehaviour="action"
+    onPress={fn()}
+    onSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--with-individual-button-behaviour",name:"With Individual Button Behaviour",snippet:`const WithIndividualButtonBehaviour = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    buttonBehaviour={(activeKey) =>
+      activeKey === "ellipse" ? "action" : "toggle"}
+    onPress={fn()}
+    onSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--with-disabled-keys",name:"With Disabled Keys",snippet:'const WithDisabledKeys = () => <ButtonSelect aria-label="Button select" items={items} disabledKeys={["square"]} />;'},{id:"core-forms-buttonselect--with-multiple-disabled-keys",name:"With Multiple Disabled Keys",snippet:`const WithMultipleDisabledKeys = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    disabledKeys={["square", "polygon"]} />;`},{id:"core-forms-buttonselect--with-disabled-keys-and-default-selected",name:"With Disabled Keys And Default Selected",snippet:`const WithDisabledKeysAndDefaultSelected = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    disabledKeys={["square"]}
+    defaultSelectedKey="polygon" />;`},{id:"core-forms-buttonselect--with-button-disabled-key",name:"With Button Disabled Key",snippet:'const WithButtonDisabledKey = () => <ButtonSelect aria-label="Button select" items={items} disabledKeys={["ellipse"]} />;'},{id:"core-forms-buttonselect--with-validation-error",name:"With Validation Error",snippet:'const WithValidationError = () => <ButtonSelect aria-label="Button select" items={items} validationState="error" />;'},{id:"core-forms-buttonselect--with-callbacks",name:"With Callbacks",snippet:`const WithCallbacks = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    onPress={fn()}
+    onSelectionChange={fn()}
+    onButtonAction={fn()}
+    onButtonSelectionChange={fn()}
+    onOptionPress={fn()} />;`},{id:"core-forms-buttonselect--controlled-button-selection",name:"Controlled Button Selection",snippet:`const ControlledButtonSelection = () => <ButtonSelect
+    aria-label="Button select"
+    items={items}
+    isSelected
+    onButtonSelectionChange={fn()} />;`},{id:"core-forms-buttonselect--long-text-labels",name:"Long Text Labels",snippet:`const LongTextLabels = () => <ButtonSelect
+    aria-label="Button select"
+    items={[
+      {
+        id: "long-1",
+        label:
+          "This is an extremely long label that should demonstrate overflow",
+      },
+      {
+        id: "long-2",
+        label: "Another very long label to test truncation and layout",
+      },
+      { id: "short", label: "Short" },
+    ]} />;`},{id:"core-forms-buttonselect--many-items",name:"Many Items",snippet:'const ManyItems = () => <ButtonSelect\n    aria-label="Button select"\n    items={Array.from({ length: 20 }, (_, i) => ({\n      id: `item-${i}`,\n      label: `Item ${i + 1}`,\n    }))}\n    defaultOpen />;'},{id:"core-forms-buttonselect--items-without-icons",name:"Items Without Icons",snippet:`const ItemsWithoutIcons = () => <ButtonSelect
+    aria-label="Button select"
+    items={[
+      { id: "option-a", label: "Option A" },
+      { id: "option-b", label: "Option B" },
+      { id: "option-c", label: "Option C" },
+    ]} />;`},{id:"core-forms-buttonselect--exclude-from-tab-order",name:"Exclude From Tab Order",snippet:'const ExcludeFromTabOrder = () => <ButtonSelect aria-label="Button select" items={items} excludeFromTabOrder />;'}],implementation:`import React from "react";
+
+import { items } from "../../ListBox/__tests__/testComponents";
+import { ButtonSelect } from "../ButtonSelect";
+
+import type { ButtonSelectProps } from "../ButtonSelect.types";
+
+export const ButtonSelectExample: React.FC<Omit<ButtonSelectProps, "items">> = (
+ args,
+) => {
+ return (
+ <ButtonSelect
+ optionClassName={(item) => item.label}
+ {...args}
+ items={items}
+ />
+ );
+};
+
+export const IndividualButtonBehaviour: React.FC<
+ Omit<ButtonSelectProps, "items">
+> = (args) => {
+ return (
+ <ButtonSelect
+ buttonBehaviour={(activeKey) =>
+ activeKey === "ellipse" ? "action" : "toggle"
+ }
+ {...args}
+ items={items}
+ aria-label="Shape Options"
+ />
+ );
+};
+
+export const ButtonSelectWithTooltipFn: React.FC<
+ Omit<ButtonSelectProps, "items">
+> = (args) => {
+ return (
+ <ButtonSelect
+ {...args}
+ items={items}
+ hideLabel={true}
+ tooltipProps={(trigger) => ({
+ text: trigger === "button" ? "Custom Button Tip" : "Custom Select Tip",
+ })}
+ />
+ );
+};
+
+export const ButtonSelectWithOptionStyleFn: React.FC<
+ Omit<ButtonSelectProps, "items">
+> = (args) => {
+ return (
+ <ButtonSelect
+ {...args}
+ items={items}
+ optionStyle={(_, { isButton }) => ({
+ backgroundColor: isButton ? "rgb(0, 128, 0)" : "rgb(0, 0, 255)",
+ })}
+ />
+ );
+};`},similarTo:[],figmaUrl:null},Calendar:{id:"core-forms-calendar",breadcrumb:"Core/Forms/Calendar",importStatement:'import { Box, Calendar, I18nProvider, Select } from "@baseline-ui/core";',description:"`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.",documentation:'`Calendar` presents a monthly grid of dates from which the user can pick a single day. Use it when a date needs to be chosen visually, such as scheduling an event or setting a deadline.\n\n* **Date selection** \u2013 Click or press Enter to select a date\n* **International calendars** \u2013 Supports 13 calendar systems including Gregorian, Buddhist, Islamic, Persian, and more\n* **Keyboard navigation** \u2013 Full arrow key, Page Up/Down, and Home/End support\n* **Accessible** \u2013 Uses `role="grid"` with proper ARIA attributes for screen readers\n* **Size variants** \u2013 Available in `sm` (default) and `xs` sizes\n* **Optional title** \u2013 Displays a calendar icon, title text, and separator above the grid\n\n```jsx\nimport { Calendar } from "@baseline-ui/core";\n\n<Calendar aria-label="Event date" />;\n```\n\nA title bar with a calendar icon and separator can be displayed above the calendar grid.\n\n```jsx\n<Calendar aria-label="Event date" title="Date" />\n```\n\nSet an initial selected date using the `defaultValue` prop with a date from `@internationalized/date`.\n\n```jsx\nimport { parseDate } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n defaultValue={parseDate("2024-09-15")}\n title="Date"\n/>;\n```\n\nThe calendar is available in two sizes: `sm` (default, 320px wide) and `xs` (240px wide).\n\n```jsx\n<Calendar aria-label="Event date" size="xs" title="Date" />\n```\n\n```jsx\n<Calendar aria-label="Event date" size="xs" />\n```\n\nThe `headerVariant` prop controls how the calendar header is displayed. The default is `"title"`, which shows the month and year as plain text between navigation arrows.\n\nUse `headerVariant="selectMonth"` to display the month and year as a dropdown selector with grouped navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" />\n```\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonth" title="Date" />\n```\n\nUse `headerVariant="selectMonthAndYear"` to display separate month and year sections, each with their own navigation arrows.\n\n```jsx\n<Calendar aria-label="Event date" headerVariant="selectMonthAndYear" />\n```\n\n```jsx\n<Calendar\n aria-label="Event date"\n headerVariant="selectMonthAndYear"\n title="Date"\n/>\n```\n\nWhen `isDisabled` is true, all dates and navigation buttons become non-interactive.\n\n```jsx\n<Calendar aria-label="Event date" isDisabled />\n```\n\nWhen `isReadOnly` is true, the selected date is visible but cannot be changed.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n isReadOnly\n defaultValue={today(getLocalTimeZone())}\n/>;\n```\n\nRestrict selectable dates to a range using `minValue` and `maxValue`. Dates outside the range are disabled, and navigation buttons disable at boundaries.\n\n```jsx\nimport { getLocalTimeZone, today } from "@internationalized/date";\n\n<Calendar\n aria-label="Event date"\n minValue={today(getLocalTimeZone())}\n maxValue={today(getLocalTimeZone()).add({ months: 1 })}\n/>;\n```\n\nUse `isDateUnavailable` to mark specific dates as unavailable. These dates display with a strikethrough and cannot be selected.\n\n```jsx\n<Calendar\n aria-label="Event date"\n isDateUnavailable={(date) =>\n date.day === 10 || date.day === 20 || date.day === 25\n }\n/>\n```\n\nCalendar supports various calendar systems used around the world. The calendar system is automatically determined based on the user\'s locale. Wrap the calendar in an `I18nProvider` to override the locale and display a different calendar system.\n\nUse the locale selector below to preview different calendar systems including Buddhist (`th-TH`), Persian (`fa-IR`), Islamic (`ar-SA`), Hebrew (`he-IL-u-ca-hebrew`), Japanese (`ja-JP-u-ca-japanese`), and ROC (`zh-TW-u-ca-roc`).\n\n```jsx\nimport { I18nProvider, Calendar } from "@baseline-ui/core";\nimport { parseDate } from "@internationalized/date";\n\n<I18nProvider locale="th-TH">\n <Calendar aria-label="Event date" defaultValue={parseDate("2024-09-15")} />\n</I18nProvider>;\n```\n\nAn `aria-label` must be provided to the Calendar for accessibility. If the calendar is labeled by a separate visible element, use `aria-labelledby` instead.\n\n```jsx\n{/* Labeling with aria-label */}\n<Calendar aria-label="Appointment date" />\n\n{/* Labeling with a visible element */}\n<label id="date-label">Appointment date</label>\n<Calendar aria-labelledby="date-label" />\n```\n\nWhen the `title` prop is set, it is automatically linked via `aria-labelledby` so no additional labeling prop is needed.\n\n| Selector | Description |\n| ---------------------- | ------------------------------- |\n| `.BaselineUI-Calendar` | Root container element |\n| `[data-selected]` | Selected date cell |\n| `[data-disabled]` | Disabled date cell |\n| `[data-unavailable]` | Unavailable date cell |\n| `[data-outside-month]` | Date cell outside current month |\n| `[data-focus-visible]` | Keyboard-focused cell |\n| `[data-hovered]` | Hovered date cell |\n| `[data-today]` | Today\'s date cell |\n\n| Key | Function |\n| ----------------- | ------------------------------------------------ |\n| `ArrowRight` | Move focus to the next day |\n| `ArrowLeft` | Move focus to the previous day |\n| `ArrowDown` | Move focus to the same day in the next week |\n| `ArrowUp` | Move focus to the same day in the previous week |\n| `PageDown` | Move focus to the same day in the next month |\n| `PageUp` | Move focus to the same day in the previous month |\n| `Home` | Move focus to the first day of the month |\n| `End` | Move focus to the last day of the month |\n| `Enter` / `Space` | Select the focused date |\n\n* **[RangeCalendar](/docs/core-forms-rangecalendar--docs)** \u2013 For selecting a date range instead of a single date\n* **[DateField](/docs/core-forms-datefield--docs)** \u2013 For keyboard-based date input with individual editable segments',props:`interface CalendarProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -3570,14 +3755,21 @@ export const UnavailableCalendarExample: React.FC<
 export const InternationalCalendarExample: React.FC<
  Omit<CalendarProps, "defaultValue" | "value"> & {
  defaultValue?: string;
+ /** Era of \`defaultValue\`, e.g. \`"BC"\`, which an ISO date string cannot express. */
+ defaultValueEra?: string;
  locale: string;
  }
-> = ({ defaultValue, locale, ...rest }) => {
+> = ({ defaultValue, defaultValueEra, locale, ...rest }) => {
+ const date = defaultValue ? parseDate(defaultValue) : undefined;
  return (
  <I18nProvider locale={locale}>
  <Calendar
  {...rest}
- defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
+ defaultValue={
+ date && defaultValueEra
+ ? new CalendarDate(defaultValueEra, date.year, date.month, date.day)
+ : date
+ }
  />
  </I18nProvider>
  );
@@ -4078,14 +4270,21 @@ export const UnavailableCalendarExample: React.FC<
 export const InternationalCalendarExample: React.FC<
  Omit<CalendarProps, "defaultValue" | "value"> & {
  defaultValue?: string;
+ /** Era of \`defaultValue\`, e.g. \`"BC"\`, which an ISO date string cannot express. */
+ defaultValueEra?: string;
  locale: string;
  }
-> = ({ defaultValue, locale, ...rest }) => {
+> = ({ defaultValue, defaultValueEra, locale, ...rest }) => {
+ const date = defaultValue ? parseDate(defaultValue) : undefined;
  return (
  <I18nProvider locale={locale}>
  <Calendar
  {...rest}
- defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
+ defaultValue={
+ date && defaultValueEra
+ ? new CalendarDate(defaultValueEra, date.year, date.month, date.day)
+ : date
+ }
  />
  </I18nProvider>
  );
@@ -4343,7 +4542,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
  */
@@ -4523,10 +4724,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}
@@ -4536,6 +4740,7 @@ export const CustomTriggerButton = () => {
  aria-haspopup="true"
  />
  )}
+ {...props}
  />
  );
 };
@@ -4636,6 +4841,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} />;
@@ -7929,7 +8138,15 @@ export const DrawerWithActionExample: React.FC<{
  Drawer Content
  </Drawer>
  );
-};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Editor, HeadlessCustomEditor } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\nPasted or dropped mentions are checked against `mentionableUsers`: a mention of a listed user takes that user\'s label, and any other mention, including every mention while `mentionableUsers` is undefined, becomes plain `@Name` text. This also applies when users cut and paste or drag a mention within the editor.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
+};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:`import {
+    Editor,
+    HeadlessClipboardHooksDemo,
+    HeadlessCustomEditor,
+    HeadlessDocumentModelDemo,
+    HeadlessHtmlStylesDemo,
+    HeadlessMaxLengthDemo,
+    HeadlessParagraphsDemo,
+} from "@baseline-ui/core";`,description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\nPasted or dropped mentions are checked against `mentionableUsers`: a mention of a listed user takes that user\'s label, and any other mention, including every mention while `mentionableUsers` is undefined, becomes plain `@Name` text. This also applies when users cut and paste or drag a mention within the editor.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nIn `selectionState.marks`, `bold`, `italic` and `underline` are `true` when every selected text run has the mark, `false` when none does, and absent when the selection mixes both. At a collapsed caret, and when there is no selection, they are always `true` or `false`, including a mark toggled for the next typed text. `color`, `backgroundColor`, `fontFamily` and `fontSize` hold the value every selected run shares, are absent when no run sets one, and are `null` when the runs differ.\n\n`select(range)` selects a `ModelRange`, and `getSelectionState()` returns the selection state computed at that moment. Unlike the reactive `selectionState`, which updates on the next render, it reflects a selection made in the same tick. `select` also calls `onSelectionChange` when the selection differs from the current one.\n\n`getDocPlainText(doc)` returns a document as plain text, and `docStart(doc)`, `docEnd(doc)` and `comparePoints(a, b)` build and order the points `select` takes.\n\n`EditorState` also exposes the document model directly. `getDoc(range?)` returns the whole document, or a copy of the selected fragment when given a range. `setDoc(doc)` replaces the document and clears undo history; it does nothing when given the current document or one with the same content, and emits `onChange`/`onDocChange` only with `{ emit: true }`. `selectAll()` selects the full document.\n\n`useEditor` accepts `doc` and `defaultDoc` as an alternative to `value` and `defaultValue`, and `onDocChange` receives the document after every change alongside `onChange`. Pass either the document form or the HTML form: `useEditor` throws when a document form is combined with `value` or `defaultValue`, or when `doc` and `defaultDoc` are both given.\n\n`setMark` accepts `color`, `backgroundColor`, `fontFamily` and `fontSize`. Text nodes carry `fontFamily` and `fontSize`, and paragraphs carry `textAlign`. All three are opaque strings: the editor stores, renders and serializes them as given (`font-family`, `font-size` and `text-align` styles) and does not validate or convert units. A value the browser cannot parse is dropped from the rendered style, so the first native edit anywhere in the editor drops it from the document too. With a collapsed selection, `setMark` applies to the next typed text. A soft line break continues the formatting you were writing in: the marks active at the caret, replaced by any pending marks set or cleared with `setMark` or `toggleMark`, so the text typed after the break keeps them.\n\n`htmlStyles` lists the CSS properties the editor keeps when it parses `value`, `defaultValue` and `setValue` HTML. It defaults to `["color", "backgroundColor"]`, so `fontFamily`, `fontSize` and paragraph `textAlign` in that HTML survive only when you list them. Everything the editor renders itself is unaffected: a `doc` or `defaultDoc`, marks set with `setMark`, anything inserted through `exec` and text typed or edited natively keep every style the document carries. Pasted and dropped HTML always keeps only `color` and `backgroundColor`: HTML copied from other apps carries their fonts and sizes, which would override your own typography. Return a document from `onPaste` to keep more.\n\nEnter inserts a soft line break by default. Pass `enterInsertsParagraph` to `useEditor` and Enter splits the paragraph at the caret instead, keeping the paragraph\'s `textAlign` on both halves and carrying the marks at the caret into the new paragraph; Shift+Enter still inserts a soft break. `exec("insertParagraph")` does the same from code: it deletes the selection, splits the paragraph in one undo step and counts the paragraph break towards `maxLength`.\n\n`exec("insertText", text)` applies the pending marks at the caret to the inserted text, as typing does, and then clears them. When an edit leaves the document empty, such as deleting a selection that covers everything or selecting all and pressing Backspace, the formatting of the first deleted character stays pending, so the next text typed or inserted keeps it and `selectionState.marks` reports it.\n\n`onPaste(event)` runs before the default paste handling. Return a document to insert it as a fragment at the selection, `null` to swallow the paste, or `undefined` to fall through to the default behavior. Pasted HTML always drops its font family, font size and text alignment, so return a document from `onPaste` to keep them. A returned document, like any fragment inserted with `exec("insertFragment")`, merges into the paragraph at the caret, so its first and last paragraphs take that paragraph\'s `textAlign`. Drops do not go through `onPaste`. If `onPaste` throws, the paste is swallowed and the error is rethrown asynchronously.\n\n`onCopy(event, fragment)` receives the selected fragment as a document. It runs for copy and cut, including when the selection starts on a mention. With a collapsed selection `fragment` is an empty document, so you can copy the whole document with `getDoc()` instead; cut then deletes nothing. Return `true` once you have written the clipboard yourself, which prevents the default copy. For cut, the selected content is then deleted unless the editor is read-only.\n\n`maxLength` caps the document length and must be a finite integer of at least 0; anything else throws. A mention that would exceed it is not inserted. A paragraph break counts as one character. Typed and pasted text is cut at the insertion point, soft breaks and paragraph splits are refused at the limit, and IME input that overflows is cut just before the caret. A selection that is being replaced frees up its own capacity, and a document that is already over the limit is kept but cannot grow.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\nThe rich text content carries stable data attributes, so you can style or query it without relying on its element structure. Every text run renders in its own `span`, including runs without any formatting, and an empty line renders a `span` too, so each line has a box you can measure.\n\n| Selector | Marks |\n| ------------------------------------ | ----------------------------------------------------------------- |\n| `[data-editor-root]` | The editable element |\n| `[data-editor-node="paragraph"]` | A paragraph |\n| `[data-editor-node="text"]` | A run of text; bold, italic and underline wrap the text inside it |\n| `[data-editor-node="break"]` | A soft line break |\n| `[data-editor-node="link"]` | A link |\n| `[data-editor-node="mention"]` | A mention |\n| `[data-editor-node="mention-input"]` | The mention being typed |\n\nAn extra `<br data-editor-filler="true">` keeps an empty line, or the line after a trailing break, reachable by the caret. It is not part of the document.\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -8316,7 +8533,7 @@ linkCancelLabel?: string
  * Message id: \`bui.editor.save\`. Defaults to \`"Save"\`.
  */
 linkSaveLabel?: string
-}`,stories:{usage:[{id:"core-miscellaneous-editor--basic",name:"Basic",snippet:'const Basic = () => <Editor placeholder="Placeholder" aria-label="Editor" />;'},{id:"core-miscellaneous-editor--headless-custom",name:"Headless Custom Editor",snippet:"const HeadlessCustom = () => <HeadlessCustomEditor />;"},{id:"core-miscellaneous-editor-plain--controlled",name:"Controlled",snippet:`const Controlled = () => {
+}`,stories:{usage:[{id:"core-miscellaneous-editor--basic",name:"Basic",snippet:'const Basic = () => <Editor placeholder="Placeholder" aria-label="Editor" />;'},{id:"core-miscellaneous-editor--headless-custom",name:"Headless Custom Editor",snippet:"const HeadlessCustom = () => <HeadlessCustomEditor />;"},{id:"core-miscellaneous-editor--headless-document-model",name:"Headless Document Model",snippet:"const HeadlessDocumentModel = () => <HeadlessDocumentModelDemo />;"},{id:"core-miscellaneous-editor--headless-paragraphs",name:"Headless Paragraphs",snippet:"const HeadlessParagraphs = () => <HeadlessParagraphsDemo />;"},{id:"core-miscellaneous-editor--headless-clipboard-hooks",name:"Headless Clipboard Hooks",snippet:"const HeadlessClipboardHooks = () => <HeadlessClipboardHooksDemo />;"},{id:"core-miscellaneous-editor--headless-max-length",name:"Headless Max Length",snippet:"const HeadlessMaxLength = () => <HeadlessMaxLengthDemo />;"},{id:"core-miscellaneous-editor--headless-styles",name:"Headless Styles",snippet:"const HeadlessStyles = () => <HeadlessHtmlStylesDemo />;"},{id:"core-miscellaneous-editor-plain--controlled",name:"Controlled",snippet:`const Controlled = () => {
     const [value, setValue] = React.useState(args.value);
 
     return (
@@ -8545,6 +8762,7 @@ import { ToggleIconButton } from "../../ToggleIconButton";
 import { Editor } from "../Editor";
 import {
  EditorProvider,
+ getDocPlainText,
  useEditable,
  useEditor,
  useEditorContext,
@@ -8559,6 +8777,7 @@ import type {
  EditorProps,
  MentionableUser,
 } from "../Editor.types";
+import type { RichTextEditorDoc, UseEditorOptions } from "../headless";
 
 export const EditorWithSetCaretButton = ({
  caretIndex,
@@ -8734,6 +8953,45 @@ const HeadlessMarkButtons: React.FC<{ idPrefix: string }> = ({ idPrefix }) => {
  );
 };
 
+const HeadlessFontSizeButton: React.FC<{ idPrefix: string }> = ({
+ idPrefix,
+}) => {
+ const editor = useEditorContext();
+
+ return (
+ <ActionButton
+ size="sm"
+ variant="secondary"
+ label="24pt"
+ data-testid={\`\${idPrefix}-fontSize\`}
+ preventFocusOnPress={true}
+ onPress={() => {
+ editor.setMark("fontSize", "24pt");
+ editor.focus();
+ }}
+ />
+ );
+};
+
+const HeadlessSelectAllButton: React.FC<{ idPrefix: string }> = ({
+ idPrefix,
+}) => {
+ const editor = useEditorContext();
+
+ return (
+ <ActionButton
+ size="sm"
+ variant="secondary"
+ label="Select all"
+ data-testid={\`\${idPrefix}-selectAll\`}
+ preventFocusOnPress={true}
+ onPress={() => {
+ editor.selectAll();
+ }}
+ />
+ );
+};
+
 const HEADLESS_TEXT_COLOR_PRESETS: ColorPreset[] = [
  { label: "Crimson", color: HEADLESS_TEXT_COLOR },
  { label: "Ink", color: "#1a1a2e" },
@@ -8792,12 +9050,35 @@ const HeadlessColorInput: React.FC<{
  );
 };
 
-const HeadlessCustomEditorInstance: React.FC<{
+type HeadlessEditorKnobs = Pick<
+ UseEditorOptions,
+ | "htmlStyles"
+ | "maxLength"
+ | "defaultDoc"
+ | "onDocChange"
+ | "onPaste"
+ | "onCopy"
+ | "enterInsertsParagraph"
+> & { showDocumentControls?: boolean };
+
+const HeadlessCustomEditorInstance: React.FC<
+ HeadlessEditorKnobs & {
  idPrefix: string;
  label: string;
  defaultValue?: string;
-}> = ({ idPrefix, label, defaultValue }) => {
- const editor = useEditor({ defaultValue });
+ }
+> = ({
+ idPrefix,
+ label,
+ defaultValue,
+ showDocumentControls,
+ ...editorOptions
+}) => {
+ const editor = useEditor(
+ editorOptions.defaultDoc
+ ? editorOptions
+ : { defaultValue, ...editorOptions },
+ );
  const { editableProps } = useEditable(editor);
 
  return (
@@ -8816,6 +9097,12 @@ const HeadlessCustomEditorInstance: React.FC<{
  </Text>
  <Box display="flex" gap="xs" alignItems="center">
  <HeadlessMarkButtons idPrefix={idPrefix} />
+ {showDocumentControls ? (
+ <>
+ <HeadlessFontSizeButton idPrefix={idPrefix} />
+ <HeadlessSelectAllButton idPrefix={idPrefix} />
+ </>
+ ) : null}
  <HeadlessColorInput
  idPrefix={idPrefix}
  colorKey="color"
@@ -8850,15 +9137,17 @@ const HeadlessCustomEditorInstance: React.FC<{
  );
 };
 
-export const HeadlessCustomEditor: React.FC = () => {
+export const HeadlessCustomEditor: React.FC<HeadlessEditorKnobs> = (knobs) => {
  return (
  <Box display="flex" gap="2xl" flexDirection="column">
  <HeadlessCustomEditorInstance
+ {...knobs}
  idPrefix="headless-a"
  label="Unformatted rich text"
  defaultValue="<p>Unformatted rich text preview with no active marks.</p>"
  />
  <HeadlessCustomEditorInstance
+ {...knobs}
  idPrefix="headless-b"
  label="Formatted rich text"
  defaultValue={\`<p><b>Bold text</b>, <i>italic text</i>, <u>underlined text</u>, and <span style="color:\${HEADLESS_TEXT_COLOR};background-color:\${HEADLESS_BACKGROUND_COLOR}">colored text</span> are visible here.</p>\`}
@@ -9036,6 +9325,292 @@ export const EditorInModalExample = ({
  </Dialog>
  </ModalContent>
  </Modal>
+);
+
+const HeadlessInfoPanel: React.FC<{
+ title: string;
+ children: React.ReactNode;
+ testId?: string;
+}> = ({ title, children, testId }) => (
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="xs"
+ padding="md"
+ borderRadius="md"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.medium"
+ data-testid={testId}
+ >
+ <Text type="helper" size="sm" color="text.secondary">
+ {title}
+ </Text>
+ {children}
+ </Box>
+);
+
+const HeadlessCode: React.FC<{ children: string }> = ({ children }) => (
+ <Box
+ elementType="pre"
+ color="text.primary"
+ style={{
+ margin: 0,
+ maxHeight: 220,
+ overflow: "auto",
+ fontFamily: "ui-monospace, monospace",
+ fontSize: 11,
+ lineHeight: 1.4,
+ whiteSpace: "pre",
+ }}
+ >
+ {children}
+ </Box>
+);
+
+const HeadlessDemo: React.FC<
+ Omit<UseEditorOptions, "onDocChange"> & {
+ idPrefix: string;
+ title: string;
+ description: string;
+ showDocumentControls?: boolean;
+ renderInfo?: (doc: RichTextEditorDoc) => React.ReactNode;
+ }
+> = ({
+ idPrefix,
+ title,
+ description,
+ showDocumentControls,
+ renderInfo,
+ ...options
+}) => {
+ const [doc, setDoc] = React.useState<RichTextEditorDoc>([]);
+ const editor = useEditor({ ...options, onDocChange: setDoc });
+ const { editableProps } = useEditable(editor);
+ // Applying the initial content emits no onDocChange.
+ React.useEffect(() => {
+ setDoc(editor.core.getDoc());
+ }, [editor.core]);
+
+ return (
+ <EditorProvider editor={editor}>
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.primary.subtle"
+ style={{ width: 320 }}
+ >
+ <Box display="flex" flexDirection="column" gap="xs">
+ <Text type="label" size="md">
+ {title}
+ </Text>
+ <Text type="helper" size="sm" color="text.secondary">
+ {description}
+ </Text>
+ </Box>
+ <Box display="flex" gap="xs" alignItems="center" flexWrap="wrap">
+ <HeadlessMarkButtons idPrefix={idPrefix} />
+ {showDocumentControls ? (
+ <>
+ <HeadlessFontSizeButton idPrefix={idPrefix} />
+ <HeadlessSelectAllButton idPrefix={idPrefix} />
+ </>
+ ) : null}
+ </Box>
+ <Box
+ {...editableProps}
+ data-testid={\`\${idPrefix}-editable\`}
+ aria-label={\`\${title} editor\`}
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.secondary.subtle"
+ color="text.primary"
+ typography="body.md.regular"
+ style={{ minHeight: 80, whiteSpace: "pre-wrap" }}
+ />
+ {renderInfo?.(doc)}
+ </Box>
+ </EditorProvider>
+ );
+};
+
+const HeadlessDemoRow: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}) => (
+ <Box display="flex" gap="xl" flexWrap="wrap" alignItems="flex-start">
+ {children}
+ </Box>
+);
+
+const formatDoc = (doc: RichTextEditorDoc) =>
+ doc
+ .map(({ children, ...paragraph }) =>
+ [
+ JSON.stringify(paragraph),
+ ...children.map((child) => \` \${JSON.stringify(child)}\`),
+ ].join("\\n"),
+ )
+ .join("\\n");
+
+export const HeadlessDocumentModelDemo: React.FC = () => (
+ <HeadlessDemo
+ idPrefix="doc-model"
+ title="Document model"
+ description="The editor's content is plain data: paragraphs of text runs with their marks. Edit, format or resize the text and watch the document update."
+ showDocumentControls={true}
+ defaultDoc={[
+ {
+ type: "p",
+ children: [
+ { text: "Plain, " },
+ { text: "bold", bold: true },
+ { text: " and " },
+ { text: "large", fontSize: "20px" },
+ { text: " text." },
+ ],
+ },
+ { type: "p", textAlign: "center", children: [{ text: "Centered" }] },
+ ]}
+ renderInfo={(doc) => (
+ <HeadlessInfoPanel title="getDoc()" testId="doc-model-json">
+ <HeadlessCode>{formatDoc(doc)}</HeadlessCode>
+ </HeadlessInfoPanel>
+ )}
+ />
+);
+
+const HeadlessParagraphOutline: React.FC<{ doc: RichTextEditorDoc }> = ({
+ doc,
+}) => (
+ <HeadlessInfoPanel
+ title={\`\${doc.length} paragraph\${doc.length === 1 ? "" : "s"}\`}
+ >
+ {doc.map((paragraph, index) => (
+ <Box
+ key={index}
+ padding="xs"
+ borderRadius="sm"
+ backgroundColor="background.primary.subtle"
+ >
+ <HeadlessCode>
+ {\`\xB6 \${getDocPlainText([paragraph]).replaceAll("\\n", "\u21B5")}\`}
+ </HeadlessCode>
+ </Box>
+ ))}
+ </HeadlessInfoPanel>
+);
+
+export const HeadlessParagraphsDemo: React.FC = () => (
+ <HeadlessDemoRow>
+ <HeadlessDemo
+ idPrefix="enter-line-break"
+ title="Enter inserts a line break"
+ description="The default: Enter and Shift+Enter add a line break inside the current paragraph."
+ defaultDoc={[
+ { type: "p", children: [{ text: "First line\\nSecond line" }] },
+ ]}
+ renderInfo={(doc) => <HeadlessParagraphOutline doc={doc} />}
+ />
+ <HeadlessDemo
+ idPrefix="enter-paragraph"
+ title="Enter starts a paragraph"
+ description="With enterInsertsParagraph, Enter splits the paragraph at the caret; Shift+Enter still adds a line break."
+ enterInsertsParagraph={true}
+ defaultDoc={[
+ { type: "p", children: [{ text: "First paragraph" }] },
+ { type: "p", children: [{ text: "Second paragraph" }] },
+ ]}
+ renderInfo={(doc) => <HeadlessParagraphOutline doc={doc} />}
+ />
+ </HeadlessDemoRow>
+);
+
+export const HeadlessMaxLengthDemo: React.FC = () => (
+ <HeadlessDemo
+ idPrefix="max-length"
+ title="Character limit"
+ description="maxLength is 40. Typing, pasting and composed input stop at the limit."
+ maxLength={40}
+ defaultDoc={[
+ { type: "p", children: [{ text: "Only a few characters are left." }] },
+ ]}
+ renderInfo={(doc) => (
+ <Text
+ type="helper"
+ size="sm"
+ color="text.secondary"
+ data-testid="max-length-count"
+ >
+ {\`\${getDocPlainText(doc).length} / 40 characters\`}
+ </Text>
+ )}
+ />
+);
+
+const toUpperCaseText = (fragment: RichTextEditorDoc) =>
+ getDocPlainText(fragment).toUpperCase();
+
+export const HeadlessClipboardHooksDemo: React.FC = () => {
+ const [copied, setCopied] = React.useState<string | null>(null);
+
+ return (
+ <HeadlessDemo
+ idPrefix="clipboard"
+ title="Clipboard hooks"
+ description="onPaste inserts pasted text in bold. onCopy puts the selection on the clipboard in upper case."
+ defaultValue="<p>Copy part of this sentence, then paste it back.</p>"
+ onPaste={(event) => {
+ const text = event.clipboardData?.getData("text/plain");
+ return text ? [{ type: "p", children: [{ text, bold: true }] }] : null;
+ }}
+ onCopy={(event, fragment) => {
+ const text = toUpperCaseText(fragment);
+ event.clipboardData?.setData("text/plain", text);
+ setCopied(text);
+ return true;
+ }}
+ renderInfo={() => (
+ <HeadlessInfoPanel title="Last copied" testId="clipboard-last-copied">
+ <HeadlessCode>{copied ?? "Nothing copied yet"}</HeadlessCode>
+ </HeadlessInfoPanel>
+ )}
+ />
+ );
+};
+
+const HEADLESS_STYLED_HTML =
+ '<p style="text-align:center"><span style="font-family:Georgia, serif;font-size:24px">Serif heading</span></p><p>Body text</p>';
+
+export const HeadlessHtmlStylesDemo: React.FC = () => (
+ <Box display="flex" flexDirection="column" gap="lg">
+ <HeadlessInfoPanel title="Both editors parse the same defaultValue">
+ <HeadlessCode>{HEADLESS_STYLED_HTML}</HeadlessCode>
+ </HeadlessInfoPanel>
+ <HeadlessDemoRow>
+ <HeadlessDemo
+ idPrefix="html-styles-default"
+ title="Default htmlStyles"
+ description="Only color and backgroundColor survive parsing; the font and alignment are dropped."
+ defaultValue={HEADLESS_STYLED_HTML}
+ />
+ <HeadlessDemo
+ idPrefix="html-styles-all"
+ title="htmlStyles with fonts and alignment"
+ description='htmlStyles={["color", "backgroundColor", "fontFamily", "fontSize", "textAlign"]}'
+ htmlStyles={[
+ "color",
+ "backgroundColor",
+ "fontFamily",
+ "fontSize",
+ "textAlign",
+ ]}
+ defaultValue={HEADLESS_STYLED_HTML}
+ />
+ </HeadlessDemoRow>
+ </Box>
 );`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
 /**
  * The description to display below the input.
@@ -9198,7 +9773,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.
  */
@@ -9207,6 +9782,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
@@ -9214,18 +9813,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
@@ -9235,7 +9835,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
@@ -9367,9 +9967,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";
@@ -9426,9 +10107,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 (
@@ -9437,12 +10120,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));
@@ -9593,23 +10282,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
@@ -9618,7 +10363,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
 /**
@@ -9656,12 +10407,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) => (
@@ -9671,15 +10436,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" },
@@ -9696,7 +10466,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"
@@ -9710,11 +10490,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> = (
@@ -9735,6 +10544,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,
@@ -10356,10 +11289,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
@@ -10369,7 +11302,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";
@@ -10387,13 +11320,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\`:
 
@@ -10553,6 +11485,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.
  * 
@@ -10589,7 +11526,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,
@@ -10713,14 +11649,17 @@ export const ControlledFreehandCanvas = ({
 export const TrackedControlledFreehandCanvas = ({
  onChange,
  onChangeEnd,
+ clearLabel,
 }: {
  onChange?: (value: FreehandCanvasProps["value"]) => void;
  onChangeEnd?: (value: FreehandCanvasProps["value"]) => void;
+ clearLabel?: string;
 }) => {
  const [value, setValue] = useState<FreehandCanvasProps["value"]>([]);
 
  return (
  <FreehandCanvas
+ clearLabel={clearLabel}
  value={value}
  onChange={(value) => {
  setValue(value);
@@ -10732,7 +11671,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.
@@ -11128,9 +12074,12 @@ export const GridListDragHandle = ({
  );
 };
 
-export const EditableGridListExample: React.FC<GridListExampleProps> = (
- props,
-) => {
+export const EditableGridListExample: React.FC<
+ GridListExampleProps & {
+ onInputKeyDown?: (key: string) => void;
+ onAncestorKeyDown?: (key: string) => void;
+ }
+> = ({ onInputKeyDown, onAncestorKeyDown, ...props }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [selectedKey, setSelectedKey] = useState("1");
 
@@ -11173,6 +12122,14 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  className="edit-item-input"
  autoFocus={true}
  defaultValue={textValue}
+ onKeyDown={
+ onInputKeyDown
+ ? (e) => {
+ onInputKeyDown(e.key);
+ e.continuePropagation();
+ }
+ : undefined
+ }
  onBlur={(e) => {
  const blurEvent = e;
  onItemUpdate(value?.id, blurEvent.currentTarget.value);
@@ -11188,11 +12145,11 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  </li>
  );
  },
- [selectedKey, isEditing, onItemUpdate],
+ [selectedKey, isEditing, onItemUpdate, onInputKeyDown],
  );
 
  return (
- <>
+ <div onKeyDown={(e) => onAncestorKeyDown?.(e.key)}>
  <GridList
  items={itemList.items}
  renderGridItem={renderGridItem}
@@ -11213,7 +12170,7 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  >
  Edit selected item
  </button>
- </>
+ </div>
  );
 };`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.",documentation:'`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.\n\n```jsx\nimport { Group, ActionButton } from "@baseline-ui/core";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n| Selector | Description |\n| --------------- | ---------------------------------------------------- |\n| \\[data-disabled] | Whether the group is disabled. |\n| \\[data-hovered] | Whether the group is currently hovered with a mouse. |',props:`interface GroupProps {
 /**
@@ -11429,7 +12386,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)
@@ -11918,7 +12984,7 @@ imageWidth?: number | "sm" | "md"
 /**
  * The aspect ratio of the images.
  * 
- * @default 16 / 9
+ * @default 3 / 4
  */
 aspectRatio?: number
 /**
@@ -11987,11 +13053,12 @@ imageDimensions?: | Dimension
  */
 layoutTransition?: Transition | boolean
 /**
- * The title of the delete confirmation modal.
+ * The title of the delete confirmation modal. A function receives the keys
+ * about to be deleted, or \`"all"\` when the delete comes from Select All.
  * 
  * @default "Are you sure you want to delete this item?"
  */
-deleteConfirmationTitle?: string | ((selectedKeys: Selection) => string)
+deleteConfirmationTitle?: string | ((keys: Selection) => string)
 /**
  * Overrides the label of the button that permanently deletes the selected
  * image(s), and the accessible label of each image's individual delete
@@ -12034,6 +13101,11 @@ loadingLabel?: string
     fit="cover"
     aria-label="Image gallery"
     defaultItems={items}
+    onDelete={fn()} />;`},{id:"core-collections-imagegallery--with-disabled-deletion",name:"With Disabled Deletion",snippet:`const WithDisabledDeletion = () => <ImageGallery
+    fit="cover"
+    aria-label="Image gallery"
+    defaultItems={items.slice(0, 4)}
+    disabledKeys={["2"]}
     onDelete={fn()} />;`},{id:"core-collections-imagegallery--with-reordering",name:"With Reordering",snippet:`const WithReordering = () => <ImageGallery
     fit="cover"
     aria-label="Image gallery"
@@ -12188,14 +13260,41 @@ const SCALE_FACTOR = 1.5;
 
 export function ImageGalleryExample({
  onDelete,
+ onSelectedKeysChange,
  ancestorKey,
+ describeDeletedKeys,
+ customDeleteButton,
  ...props
 }: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete"> & {
  onDelete?: (keys: Key[]) => void;
+ /** \`onSelectionChange\` as an array, since a \`Set\` does not survive the CT bridge. */
+ onSelectedKeysChange?: (keys: Key[] | "all") => void;
  ancestorKey?: string;
+ describeDeletedKeys?: boolean;
+ /** Renders each item through \`renderImage\` with its own button wired to \`onDelete\`. */
+ customDeleteButton?: boolean;
 }) {
  const gallery = (
  <ImageGallery
+ deleteConfirmationTitle={
+ describeDeletedKeys
+ ? (keys) =>
+ keys === "all" ? "Delete all" : \`Delete \${[...keys].join(", ")}\`
+ : undefined
+ }
+ renderImage={
+ customDeleteButton
+ ? (item, { onDelete: deleteItem }) => (
+ <button
+ onClick={() => {
+ deleteItem?.(item.id);
+ }}
+ >
+ Remove {item.label}
+ </button>
+ )
+ : undefined
+ }
  {...props}
  onDelete={
  onDelete
@@ -12204,6 +13303,13 @@ export function ImageGalleryExample({
  }
  : undefined
  }
+ onSelectionChange={
+ onSelectedKeysChange
+ ? (keys) => {
+ onSelectedKeysChange(keys === "all" ? "all" : [...keys]);
+ }
+ : props.onSelectionChange
+ }
  />
  );
 
@@ -12332,9 +13438,14 @@ export function DynamicImageGalleryExample({
  );
 }
 
-export function ControlledImageGalleryExample(
- props: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete" | "items">,
-) {
+export function ControlledImageGalleryExample({
+ reselectFirstOnDelete,
+ reselectFirstOnListChange,
+ ...props
+}: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete" | "items"> & {
+ reselectFirstOnDelete?: boolean;
+ reselectFirstOnListChange?: boolean;
+}) {
  const [dynamicItems, setDynamicItems] = React.useState(items.slice(0, 4));
 
  const [selectedIndex, setSelectedIndex] = React.useState(0);
@@ -12354,6 +13465,9 @@ export function ControlledImageGalleryExample(
  setDynamicItems((prevItems) => {
  return prevItems.filter((item) => item.id !== keys[0]);
  });
+ if (reselectFirstOnDelete) {
+ setSelectedIndex(0);
+ }
  };
 
  return (
@@ -12392,6 +13506,12 @@ export function ControlledImageGalleryExample(
  );
  }}
  onDelete={handleDelete}
+ onListChange={(list) => {
+ props.onListChange?.(list);
+ if (reselectFirstOnListChange) {
+ setSelectedIndex(0);
+ }
+ }}
  />
  </Box>
  );
@@ -13437,6 +14557,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
@@ -13487,7 +14634,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()}"\`);
@@ -13552,6 +14698,7 @@ placement?: any
       </Text>
       <ActionButton label="Save" />
     </Box>)</InlineToolbar>;`}],implementation:`import { TrashIcon } from "@baseline-ui/icons/24";
+import { ShadowRoot } from "@baseline-ui/test-utils/client";
 import React from "react";
 
 import { InlineToolbar } from "../InlineToolbar";
@@ -13594,7 +14741,13 @@ export const InlineToolbarExample = ({
  )}
  </InlineToolbar>
  );
-};`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"`Kbd` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.",documentation:`\`Kbd\` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.
+};
+
+export const InlineToolbarInShadowRootExample = () => (
+ <ShadowRoot style={{ width: 400, height: 200 }}>
+ <InlineToolbarExample />
+ </ShadowRoot>
+);`},similarTo:[],figmaUrl:null},Kbd:{id:"core-content-kbd",breadcrumb:"Core/Content/Kbd",importStatement:'import { Box, Kbd } from "@baseline-ui/core";',description:"`Kbd` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.",documentation:`\`Kbd\` renders a key or keyboard shortcut as a styled keycap and adapts modifier names to the user's operating system. Use it to display hotkeys inline with text, in menus, or in help documentation.
 
 * Keycap-styled visual appearance
 * OS-aware shortcut conversion (Ctrl becomes Cmd on Mac)
@@ -14434,7 +15587,7 @@ export const DynamicListBoxExample: React.FC<
  >
  <Box
  color={
- isSelected ? "icon.interactive.enabled" : "icon.primary"
+ isSelected ? "text.interactive.enabled" : "icon.primary"
  }
  typography="label.md.medium"
  paddingY="md"
@@ -14915,6 +16068,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.
@@ -14922,10 +16102,6 @@ optionStyle?: | React.CSSProperties
  * @default "press"
  */
 trigger?: "press" | "longPress"
-/**
- * The \`className\` property assigned to the root element of the component.
- */
-className?: string
 /**
  * The \`className\` property assigned to the content element of the component.
  */
@@ -14984,7 +16160,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"]),
@@ -15501,9 +16676,10 @@ onOpenChange?: (isOpen: boolean) => void
 children: React.ReactNode
 }`,stories:{usage:[{id:"core-overlays-modal--basic",name:"Basic",snippet:"const Basic = (args) => <DialogExample modalProps={args} />;"},{id:"core-overlays-modal--default-open",name:"Default Open",snippet:"const DefaultOpen = (args) => <DialogExample modalProps={args} />;"},{id:"core-overlays-modal--controlled",name:"Controlled",snippet:"const Controlled = (args) => <DialogExample modalProps={args} />;"}],implementation:`import { IFrame, ShadowRoot } from "@baseline-ui/test-utils/client";
 import { sprinkles } from "@baseline-ui/tokens";
-import { getOwnerDocument } from "@react-aria/utils";
-import React, { useEffect, useRef, useState } from "react";
+import { getOwnerDocument, isShadowRoot } from "@react-aria/utils";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { VisuallyHidden, useId } from "react-aria";
+import { createPortal } from "react-dom";
 
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
@@ -15969,7 +17145,101 @@ export const ModalLateBodyContainerExample: React.FC<
  )}
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},NumberFormat:{id:"core-utilities-numberformat",breadcrumb:"Core/Utilities/NumberFormat",importStatement:'import { NumberFormat } from "@baseline-ui/core";',description:"`NumberFormat` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.\nIt is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.",documentation:`\`NumberFormat\` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.
+};
+
+const NestedShadowButton: React.FC<{ testId: string }> = ({ testId }) => {
+ const [hostRoot, setHostRoot] = useState<Element["shadowRoot"]>(null);
+ const hostRef = useCallback((host: HTMLDivElement | null) => {
+ if (host)
+ setHostRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+ }, []);
+
+ return (
+ // Stacked above the underlay so the click reaches the nested shadow root.
+ <div ref={hostRef} style={{ position: "relative", zIndex: 2000 }}>
+ {hostRoot
+ ? createPortal(<button data-testid={testId}>Nested</button>, hostRoot)
+ : null}
+ </div>
+ );
+};
+
+const ContainedModalContent: React.FC = () => {
+ const [container, setContainer] = useState<HTMLElement | null>(null);
+ const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+ null,
+ );
+ const [isOpen, setIsOpen] = useState(true);
+ const [outsideClicks, setOutsideClicks] = useState(0);
+
+ // A light-DOM child of the outer host, rendered by the <slot> in the container.
+ useEffect(() => {
+ const root = container?.getRootNode();
+ if (!root || !isShadowRoot(root)) return;
+ const host = root.host;
+ const button = host.ownerDocument.createElement("button");
+ button.slot = "slotted";
+ button.dataset.testid = "slotted-button";
+ button.textContent = "Slotted";
+ host.append(button);
+ return () => {
+ button.remove();
+ };
+ }, [container]);
+
+ return (
+ <>
+ <button
+ data-testid="outside-button"
+ onClick={() => {
+ setOutsideClicks((count) => count + 1);
+ }}
+ >
+ Outside
+ </button>
+ <span data-testid="outside-clicks">{outsideClicks}</span>
+ <span data-testid="modal-state">{isOpen ? "open" : "closed"}</span>
+ <div ref={setPortalContainer}>
+ <NestedShadowButton testId="portal-nested-shadow-button" />
+ </div>
+ <FrameProvider
+ container={container}
+ portalContainer={portalContainer}
+ shouldContainOverlays="always"
+ >
+ <Box
+ ref={setContainer}
+ data-testid="container"
+ style={{ width: 400, height: 200 }}
+ display="flex"
+ flexDirection="column"
+ alignItems="center"
+ justifyContent="flex-end"
+ >
+ <NestedShadowButton testId="nested-shadow-button" />
+ <div style={{ position: "relative", zIndex: 2000 }}>
+ <slot name="slotted" />
+ </div>
+ <Modal defaultOpen={true} onOpenChange={setIsOpen}>
+ <ModalContent>
+ <Dialog aria-label="Contained modal">
+ <Box padding="xl">
+ <Text>Contained in a shadow root</Text>
+ </Box>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ </Box>
+ </FrameProvider>
+ </>
+ );
+};
+
+export const ContainedModalInShadowRootExample: React.FC = () => (
+ <ShadowRoot style={{ position: "relative", width: 700, height: 450 }}>
+ <ContainedModalContent />
+ </ShadowRoot>
+);`},similarTo:[],figmaUrl:null},NumberFormat:{id:"core-utilities-numberformat",breadcrumb:"Core/Utilities/NumberFormat",importStatement:'import { NumberFormat } from "@baseline-ui/core";',description:"`NumberFormat` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.\nIt is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.",documentation:`\`NumberFormat\` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.
 It is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.
 
 \`\`\`jsx
@@ -19615,7 +20885,23 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:'`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.\n\n* Supports SVG, images and text\n* Supports custom action buttons to interact with the preview\n* Exposed to assistive technologies using ARIA attributes\n* Supports keyboard, mouse and touch interactions\n\n```jsx\nimport { Preview } from "@baseline-ui/core";\n\n<Preview imageSrc="/portrait.png" />;\n```\n\n`svgSrc` accepts a React element or an SVG string. A string is sanitized before it is rendered: scripts, event handlers and `javascript:` URLs are removed, along with elements such as `use`, `animate`, `set` and `foreignObject`. Sprite icons that reference a symbol with `<use href="#id">` therefore render blank; pass a React element to render them. A string SVG is rendered after the component mounts, so server-rendered HTML contains an empty preview that fills in on the client.\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\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\n| Key | Function |\n| ------------ | -------------------------------- |\n| `Tab` | Focus the preview |\n| `ArrowLeft` | Focus the previous action button |\n| `ArrowRight` | Focus the next action button |',props:`interface PreviewProps {
+}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:`import React from "react";
+
+import { ThemeProvider } from "../../ThemeProvider/ThemeProvider";
+import { minTouchTargetSizeVar } from "../../ThemeProvider/ThemeProvider.css";
+import { Portal } from "../Portal";
+
+// "never", not "always": the CT config emulates prefers-reduced-motion, so the "user" default already resolves to true.
+export const PortalInsideThemeProviderExample = () => (
+ <ThemeProvider theme="dark" reducedMotion="never" minTouchTargetSize={44}>
+ <Portal>
+ <div
+ data-testid="touch-target"
+ style={{ width: minTouchTargetSizeVar }}
+ />
+ </Portal>
+ </ThemeProvider>
+);`},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:'`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.\n\n* Supports SVG, images and text\n* Supports custom action buttons to interact with the preview\n* Exposed to assistive technologies using ARIA attributes\n* Supports keyboard, mouse and touch interactions\n\n```jsx\nimport { Preview } from "@baseline-ui/core";\n\n<Preview imageSrc="/portrait.png" />;\n```\n\n`svgSrc` accepts a React element or an SVG string. A string is sanitized before it is rendered: scripts, event handlers and `javascript:` URLs are removed, along with elements such as `use`, `animate`, `set` and `foreignObject`. Sprite icons that reference a symbol with `<use href="#id">` therefore render blank; pass a React element to render them. A string SVG is rendered after the component mounts, so server-rendered HTML contains an empty preview that fills in on the client.\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\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\n| Key | Function |\n| ------------ | -------------------------------- |\n| `Tab` | Focus the preview |\n| `ArrowLeft` | Focus the previous action button |\n| `ArrowRight` | Focus the next action button |',props:`interface PreviewProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -19714,7 +21000,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
@@ -20311,11 +21597,19 @@ const colorRenderItem: RadioGroupProps["renderOption"] = (
  );
 };
 
-export const CustomRenderItem: React.FC<Omit<RadioGroupProps, "items">> = (
- props,
-) => {
+export const CustomRenderItem: React.FC<
+ Omit<RadioGroupProps, "items"> & { withDescriptions?: boolean }
+> = ({ withDescriptions, ...props }) => {
  return (
- <RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />
+ <RadioGroup
+ items={
+ withDescriptions
+ ? colorItems.map((item) => ({ ...item, description: item.id }))
+ : colorItems
+ }
+ renderOption={colorRenderItem}
+ {...props}
+ />
  );
 };
 
@@ -21277,6 +22571,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.
  * 
@@ -21743,8 +23064,12 @@ import { Autocomplete, Virtualizer } from "react-aria-components";
 import { useListData } from "react-stately";
 
 import { ActionButton } from "../../ActionButton";
+import { Box } from "../../Box/Box";
 import { items } from "../../ListBox/__tests__/testComponents";
-import { virtualizeAutocompleteItems } from "../../Menu/__tests__/data";
+import {
+ longListItems,
+ virtualizeAutocompleteItems,
+} from "../../Menu/__tests__/data";
 import { itemsWithSectionTitles } from "../../UNSAFE_ListBox/__tests__/testComponents";
 import {
  ListLayout,
@@ -21775,6 +23100,21 @@ export const SelectExample: React.FC<
  );
 };
 
+export const SelectNearViewportBottomExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Box style={{ height: 3000, paddingTop: "calc(100vh - 120px)" }}>
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ {...args}
+ items={longListItems}
+ />
+ </Box>
+ );
+};
+
 // "Apples" is a substring of "Pineapples" \u2014 exercises exact string matching
 // in the tester's option() locator.
 const substringItems = [
@@ -23005,7 +24345,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"
@@ -23403,6 +24749,14 @@ import { Switch, Separator } from "@baseline-ui/core";
 
 The status labels can improve the accessibility of the Switch. However, they are not required. If you don't pass the \`statusLabel\` prop, the Switch will use the \`label\` prop to convey the meaning of the different states.
 
+Pass the \`description\` prop to show helper text below the label. It is announced by screen readers as the description of the Switch and is not part of its name.
+
+\`\`\`jsx
+import { Switch } from "@baseline-ui/core";
+
+<Switch label="Label" labelPosition="left" description="Helper text" />;
+\`\`\`
+
 | Selector | Description |
 | -------------------- | ----------------------------------------------------------------- |
 | \\[data-disabled] | Whether the component is disabled. |
@@ -23453,6 +24807,10 @@ style?: React.CSSProperties
  * The label to display next to the switch.
  */
 label?: React.ReactNode
+/**
+ * Helper text shown below the label and announced as its accessible description.
+ */
+description?: string
 /**
  * The position of the label.
  */
@@ -23475,7 +24833,54 @@ statusLabel?: {
       on: "On",
       off: "Off",
     }}
-    labelPosition="left" />;`}],implementation:""},similarTo:[],figmaUrl:null},Table:{id:"core-collections-table",breadcrumb:"Core/Collections/Table",importStatement:`import {
+    labelPosition="left" />;`},{id:"core-forms-switch--with-label-in-left-and-status-disabled",name:"With Label In Left And Status Disabled",snippet:`const WithLabelInLeftAndStatusDisabled = () => <Switch
+    label="Label"
+    statusLabel={{
+      on: "On",
+      off: "Off",
+    }}
+    labelPosition="left"
+    isDisabled />;`},{id:"core-forms-switch--with-description",name:"With Description",snippet:'const WithDescription = () => <Switch label="Label" description="Helper text" labelPosition="left" />;'},{id:"core-forms-switch--with-description-in-left-and-status",name:"With Description In Left And Status",snippet:`const WithDescriptionInLeftAndStatus = () => <Switch
+    label="Label"
+    description="Helper text"
+    statusLabel={{
+      on: "On",
+      off: "Off",
+    }}
+    labelPosition="left" />;`},{id:"core-forms-switch--with-description-in-left-long-label",name:"With Description In Left Long Label",snippet:`const WithDescriptionInLeftLongLabel = () => <Switch
+    label="A long label that wraps beside the switch"
+    description="A long description that wraps below the label"
+    labelPosition="left" />;`},{id:"core-forms-switch--with-description-on-top",name:"With Description On Top",snippet:`const WithDescriptionOnTop = () => <Switch
+    label="Label"
+    description="Helper text"
+    statusLabel={{
+      on: "On",
+      off: "Off",
+    }} />;`},{id:"core-forms-switch--with-description-disabled",name:"With Description Disabled",snippet:'const WithDescriptionDisabled = () => <Switch label="Label" description="Helper text" isDisabled labelPosition="left" />;'}],implementation:`import React from "react";
+
+import { Switch } from "../Switch";
+
+export const SwitchWithExternalDescriptionExample: React.FC = () => (
+ <>
+ <p id="external-help">Extra help</p>
+ <Switch
+ label="Wi-Fi"
+ description="Connect automatically"
+ aria-describedby="external-help"
+ />
+ </>
+);
+
+export const SwitchWithExternalLabelExample: React.FC = () => (
+ <>
+ <p id="external-label">Notifications</p>
+ <Switch
+ label="Wi-Fi"
+ description="Connect automatically"
+ aria-labelledby="external-label"
+ />
+ </>
+);`},similarTo:[],figmaUrl:null},Table:{id:"core-collections-table",breadcrumb:"Core/Collections/Table",importStatement:`import {
     ActionButton,
     ActionIconButton,
     AsyncLoadingTableExample,
@@ -25613,7 +27018,11 @@ tabHeaderStyle?: React.CSSProperties
 }`,stories:{usage:[{id:"core-navigation-tabs--basic",name:"Basic",snippet:"const Basic = () => <BasicExample onRemove={undefined}>{undefined}</BasicExample>;"},{id:"core-navigation-tabs--controlled",name:"Controlled",snippet:'const Controlled = () => <BasicExample selectedValue="item-2" onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--ghost",name:"Ghost",snippet:'const Ghost = () => <BasicExample variant="ghost" onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--with-close-button",name:"With Close Button",snippet:`const WithCloseButton = () => <BasicExample
     onRemove={() => {
       alert("Delete");
-    }}>{undefined}</BasicExample>;`},{id:"core-navigation-tabs--with-default-selected",name:"With Default Selected",snippet:'const WithDefaultSelected = () => <BasicExample defaultSelectedValue="item-2" onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--with-disabled",name:"With Disabled",snippet:"const WithDisabled = () => <BasicExample isDisabled onRemove={undefined}>{undefined}</BasicExample>;"},{id:"core-navigation-tabs--with-specific-disabled",name:"With Specific Disabled",snippet:'const WithSpecificDisabled = () => <BasicExample disabledValues={new Set(["item-2"])} onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--with-focusable-content",name:"With Focusable Content",snippet:"const WithFocusableContent = () => <BasicExample onRemove={undefined} includeFocusableContent={true}>{undefined}</BasicExample>;"},{id:"core-navigation-tabs--with-action-button",name:"With Action Button",snippet:"const WithActionButton = () => <AddButtonExample onRemove={undefined}>{undefined}</AddButtonExample>;"}],implementation:`import { PlusIcon } from "@baseline-ui/icons/16";
+    }}>{undefined}</BasicExample>;`},{id:"core-navigation-tabs--with-default-selected",name:"With Default Selected",snippet:'const WithDefaultSelected = () => <BasicExample defaultSelectedValue="item-2" onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--with-disabled",name:"With Disabled",snippet:"const WithDisabled = () => <BasicExample isDisabled onRemove={undefined}>{undefined}</BasicExample>;"},{id:"core-navigation-tabs--with-disabled-and-close-button",name:"With Disabled And Close Button",snippet:`const WithDisabledAndCloseButton = () => <BasicExample
+    isDisabled
+    onRemove={() => {
+      alert("Delete");
+    }}>{undefined}</BasicExample>;`},{id:"core-navigation-tabs--with-specific-disabled",name:"With Specific Disabled",snippet:'const WithSpecificDisabled = () => <BasicExample disabledValues={new Set(["item-2"])} onRemove={undefined}>{undefined}</BasicExample>;'},{id:"core-navigation-tabs--with-focusable-content",name:"With Focusable Content",snippet:"const WithFocusableContent = () => <BasicExample onRemove={undefined} includeFocusableContent={true}>{undefined}</BasicExample>;"},{id:"core-navigation-tabs--with-action-button",name:"With Action Button",snippet:"const WithActionButton = () => <AddButtonExample />;"}],implementation:`import { PlusIcon } from "@baseline-ui/icons/16";
 import { themeVars } from "@baseline-ui/tokens";
 import React from "react";
 
@@ -25709,7 +27118,11 @@ export const TabItemExample: React.FC<
  );
 };
 
-export const AddButtonExample = () => {
+export const AddButtonExample: React.FC<{
+ disabledValues?: string[];
+ isDisabled?: boolean;
+ titleStyle?: React.CSSProperties;
+}> = ({ disabledValues, isDisabled, titleStyle }) => {
  const [items, setItems] = React.useState([1, 2, 3]);
 
  return (
@@ -25731,11 +27144,14 @@ export const AddButtonExample = () => {
  icon: PlusIcon,
  },
  ]}
+ disabledValues={disabledValues ? new Set(disabledValues) : undefined}
+ isDisabled={isDisabled}
  >
  {items.map((item) => (
  <TabItem
  style={contentStyle}
  title={\`Item \${item}\`}
+ titleStyle={titleStyle}
  value={\`item-\${item}\`}
  key={\`item-\${item}\`}
  >
@@ -25744,7 +27160,7 @@ export const AddButtonExample = () => {
  ))}
  </Tabs>
  );
-};`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a 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
@@ -25794,6 +27210,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.
  */
@@ -25822,7 +27246,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";
@@ -26156,7 +27583,34 @@ Pass \`defaultValue\` to set the starting page, or control it with \`value\` and
 | ----------- | ---------------------------------------------------------------- |
 | \`ArrowDown\` | Decrement the current page. |
 | \`ArrowUp\` | Increment the current page. |
-| \`Enter\` | Change the current page to the value entered in the input field. |`,props:`interface TaggedPaginationProps {
+| \`Enter\` | Change the current page to the value entered in the input field. |
+
+Other keys reach ancestor handlers, so Tab leaves an enclosing \`Toolbar\` and Escape closes an enclosing overlay. When the field is read-only, every key does.
+
+The stepper buttons are named "Previous Page" and "Next Page" unless \`decrementAriaLabel\` and \`incrementAriaLabel\` say otherwise.
+
+The following strings are used by the \`TaggedPagination\` component and can be overridden via \`I18nProvider\`:
+
+| Key | Default (en) |
+| ------------------------------- | ------------- |
+| \`bui.taggedPagination.nextPage\` | Next Page |
+| \`bui.taggedPagination.prevPage\` | Previous Page |
+
+\`\`\`jsx
+import { I18nProvider, TaggedPagination } from "@baseline-ui/core";
+
+<I18nProvider
+ locale="en"
+ messages={{
+ en: {
+ "bui.taggedPagination.nextPage": "Forward",
+ "bui.taggedPagination.prevPage": "Back",
+ },
+ }}
+>
+ <TaggedPagination label="Page" minValue={1} maxValue={4} />
+</I18nProvider>;
+\`\`\``,props:`interface TaggedPaginationProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -26191,13 +27645,25 @@ className?: string
  */
 style?: React.CSSProperties
 /**
- * Whether the decrement button is disabled.
+ * Whether the decrement button and ArrowDown are disabled.
  */
 isDecrementButtonDisabled?: boolean
 /**
- * Whether the increment button is disabled.
+ * Whether the increment button and ArrowUp are disabled.
  */
 isIncrementButtonDisabled?: boolean
+/**
+ * The accessible name and tooltip of the decrement button.
+ * 
+ * @default "Previous Page"
+ */
+decrementAriaLabel?: string
+/**
+ * The accessible name and tooltip of the increment button.
+ * 
+ * @default "Next Page"
+ */
+incrementAriaLabel?: string
 /**
  * Determines the size of the component.
  * 
@@ -26210,12 +27676,14 @@ size?: "xs" | "sm" | "md"
 label?: React.ReactNode
 /**
  * The aria-label for the description.
+ * 
+ * @deprecated Has no effect.
  */
 descriptionAriaLabel?: string
 /**
  * The type of the input field.
  * 
- * @default "number"
+ * @default "text"
  */
 type?: "number" | "text"
 /**
@@ -26283,7 +27751,11 @@ valueToLabelMap?: Map<number, string>
     }}
     defaultProps={args}
   />
-);`},{id:"core-forms-taggedpagination--read-only",name:"Read Only",snippet:'const ReadOnly = () => <TaggedPaginationExample decrementAriaLabel="Decrement" incrementAriaLabel="Increment" isReadOnly />;'},{id:"core-forms-taggedpagination--disabled",name:"Disabled",snippet:'const Disabled = () => <TaggedPaginationExample decrementAriaLabel="Decrement" incrementAriaLabel="Increment" isDisabled />;'},{id:"core-forms-taggedpagination--with-page-label",name:"With Page Label",snippet:`const WithPageLabel = () => {
+);`},{id:"core-forms-taggedpagination--read-only",name:"Read Only",snippet:'const ReadOnly = () => <TaggedPaginationExample decrementAriaLabel="Decrement" incrementAriaLabel="Increment" isReadOnly />;'},{id:"core-forms-taggedpagination--disabled",name:"Disabled",snippet:'const Disabled = () => <TaggedPaginationExample decrementAriaLabel="Decrement" incrementAriaLabel="Increment" isDisabled />;'},{id:"core-forms-taggedpagination--disabled-steppers",name:"Disabled Steppers",snippet:`const DisabledSteppers = () => <TaggedPaginationExample
+    decrementAriaLabel="Decrement"
+    incrementAriaLabel="Increment"
+    isDecrementButtonDisabled
+    isIncrementButtonDisabled />;`},{id:"core-forms-taggedpagination--with-page-label",name:"With Page Label",snippet:`const WithPageLabel = () => {
     return (
         <Box display="flex" flexDirection="column" gap="xl">
             <TaggedPaginationExample
@@ -26318,12 +27790,17 @@ valueToLabelMap?: Map<number, string>
     );
 };`}],implementation:`import React from "react";
 
+import { ActionButton } from "../../ActionButton";
+import { Toolbar } from "../../Toolbar";
 import { TaggedPagination } from "../TaggedPagination";
 
 export const TaggedPaginationExample: React.FC<
- React.ComponentProps<typeof TaggedPagination>
-> = (props) => {
- return (
+ React.ComponentProps<typeof TaggedPagination> & {
+ onAncestorKeyDown?: React.KeyboardEventHandler;
+ descriptionByValue?: Record<number, string>;
+ }
+> = ({ onAncestorKeyDown, descriptionByValue, ...props }) => {
+ const pagination = (
  <TaggedPagination
  valueToLabelMap={
  new Map([
@@ -26339,10 +27816,32 @@ export const TaggedPaginationExample: React.FC<
  incrementAriaLabel="Increment"
  minValue={1}
  maxValue={4}
+ {...(descriptionByValue && {
+ description: (value: number) => descriptionByValue[value] ?? "",
+ })}
  {...props}
  />
  );
-};`},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 {
+
+ return onAncestorKeyDown ? (
+ <div onKeyDown={onAncestorKeyDown}>{pagination}</div>
+ ) : (
+ pagination
+ );
+};
+
+export const TaggedPaginationInToolbarExample: React.FC<
+ React.ComponentProps<typeof TaggedPagination>
+> = (props) => (
+ <div>
+ <Toolbar>
+ <ActionButton label="First" />
+ <TaggedPaginationExample {...props} />
+ <ActionButton label="Last" />
+ </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 {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -29409,6 +30908,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
@@ -29742,12 +31255,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"])
@@ -30017,6 +31532,7 @@ import {
 import { TreeView } from "../TreeView";
 import { generateLargeTree, getTreeItems } from "./data";
 
+import type { IconProps } from "../../Icon";
 import type {
  TreeItemRenderState,
  TreeListItem,
@@ -30024,15 +31540,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}
  />
  );
 }
@@ -31342,7 +32874,7 @@ export const DynamicListBoxExample: React.FC<
  >
  <Box
  color={
- isSelected ? "icon.interactive.enabled" : "icon.primary"
+ isSelected ? "text.interactive.enabled" : "icon.primary"
  }
  typography="label.md.medium"
  paddingY="md"
@@ -32394,10 +33926,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}
@@ -32407,6 +33942,7 @@ export const CustomTriggerButton = () => {
  aria-haspopup="true"
  />
  )}
+ {...props}
  />
  );
 };
@@ -32507,6 +34043,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} />;
@@ -32708,9 +34248,10 @@ UNSAFE_enableInert?: boolean | ((isDrawer: boolean) => boolean)
   />
 );`},{id:"core-overlays-modal-modalcontent--drawer-mobile",name:"Drawer Mobile",snippet:"const DrawerMobile = () => <ModalDrawerExample />;"},{id:"core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover",name:"Drawer Mobile With Nested Popover",snippet:"const DrawerMobileWithNestedPopover = () => <SelectInsideModalExample />;"},{id:"core-overlays-modal-modalcontent--uncontrolled-interaction-outside",name:"Uncontrolled Interaction Outside",snippet:"const UncontrolledInteractionOutside = () => <UncontrolledInteractionOutsideExample />;"},{id:"core-overlays-modal-modalcontent--long-content",name:"Long Content",snippet:"const LongContent = () => <LongModalExample />;"},{id:"core-overlays-modal-modalcontent--form-controls",name:"Form Controls",snippet:"const FormControls = () => <FormControlsInModalExample defaultOpen={true} />;"},{id:"core-overlays-modal-modalcontent--with-inert",name:"With Inert",snippet:"const WithInert = () => <FormControlsInModalExample enableInert={true} />;",description:"Experimental: Uses the HTML `inert` attribute instead of `aria-hidden` to hide elements outside the modal. This makes elements truly non-interactive (not just hidden from screen readers) which can improve performance and accessibility. Note: With inert enabled, elements outside the modal cannot be clicked or focused. Try interacting with the background elements when the modal is open vs closed."},{id:"core-overlays-modal-modalcontent--with-disabled-focus-management",name:"With Disabled Focus Management",snippet:"const WithDisabledFocusManagement = () => <DisabledFocusManagementExample />;",description:"Demonstrates `disableFocusManagement` with a FrameProvider. When the modal is open, the text input outside the FrameProvider container remains interactive because focus trapping and restoration are disabled."}],implementation:`import { IFrame, ShadowRoot } from "@baseline-ui/test-utils/client";
 import { sprinkles } from "@baseline-ui/tokens";
-import { getOwnerDocument } from "@react-aria/utils";
-import React, { useEffect, useRef, useState } from "react";
+import { getOwnerDocument, isShadowRoot } from "@react-aria/utils";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { VisuallyHidden, useId } from "react-aria";
+import { createPortal } from "react-dom";
 
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
@@ -33176,7 +34717,101 @@ export const ModalLateBodyContainerExample: React.FC<
  )}
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},PointPickerContent:{id:"core-content-pointpicker-pointpickercontent",importStatement:`import {
+};
+
+const NestedShadowButton: React.FC<{ testId: string }> = ({ testId }) => {
+ const [hostRoot, setHostRoot] = useState<Element["shadowRoot"]>(null);
+ const hostRef = useCallback((host: HTMLDivElement | null) => {
+ if (host)
+ setHostRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
+ }, []);
+
+ return (
+ // Stacked above the underlay so the click reaches the nested shadow root.
+ <div ref={hostRef} style={{ position: "relative", zIndex: 2000 }}>
+ {hostRoot
+ ? createPortal(<button data-testid={testId}>Nested</button>, hostRoot)
+ : null}
+ </div>
+ );
+};
+
+const ContainedModalContent: React.FC = () => {
+ const [container, setContainer] = useState<HTMLElement | null>(null);
+ const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(
+ null,
+ );
+ const [isOpen, setIsOpen] = useState(true);
+ const [outsideClicks, setOutsideClicks] = useState(0);
+
+ // A light-DOM child of the outer host, rendered by the <slot> in the container.
+ useEffect(() => {
+ const root = container?.getRootNode();
+ if (!root || !isShadowRoot(root)) return;
+ const host = root.host;
+ const button = host.ownerDocument.createElement("button");
+ button.slot = "slotted";
+ button.dataset.testid = "slotted-button";
+ button.textContent = "Slotted";
+ host.append(button);
+ return () => {
+ button.remove();
+ };
+ }, [container]);
+
+ return (
+ <>
+ <button
+ data-testid="outside-button"
+ onClick={() => {
+ setOutsideClicks((count) => count + 1);
+ }}
+ >
+ Outside
+ </button>
+ <span data-testid="outside-clicks">{outsideClicks}</span>
+ <span data-testid="modal-state">{isOpen ? "open" : "closed"}</span>
+ <div ref={setPortalContainer}>
+ <NestedShadowButton testId="portal-nested-shadow-button" />
+ </div>
+ <FrameProvider
+ container={container}
+ portalContainer={portalContainer}
+ shouldContainOverlays="always"
+ >
+ <Box
+ ref={setContainer}
+ data-testid="container"
+ style={{ width: 400, height: 200 }}
+ display="flex"
+ flexDirection="column"
+ alignItems="center"
+ justifyContent="flex-end"
+ >
+ <NestedShadowButton testId="nested-shadow-button" />
+ <div style={{ position: "relative", zIndex: 2000 }}>
+ <slot name="slotted" />
+ </div>
+ <Modal defaultOpen={true} onOpenChange={setIsOpen}>
+ <ModalContent>
+ <Dialog aria-label="Contained modal">
+ <Box padding="xl">
+ <Text>Contained in a shadow root</Text>
+ </Box>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ </Box>
+ </FrameProvider>
+ </>
+ );
+};
+
+export const ContainedModalInShadowRootExample: React.FC = () => (
+ <ShadowRoot style={{ position: "relative", width: 700, height: 450 }}>
+ <ContainedModalContent />
+ </ShadowRoot>
+);`},similarTo:[],figmaUrl:null},PointPickerContent:{id:"core-content-pointpicker-pointpickercontent",importStatement:`import {
     Box,
     MultiplePointPickersExample,
     PointPickerContent,
@@ -34779,6 +36414,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" }}
@@ -37392,8 +39041,12 @@ import { Autocomplete, Virtualizer } from "react-aria-components";
 import { useListData } from "react-stately";
 
 import { ActionButton } from "../../ActionButton";
+import { Box } from "../../Box/Box";
 import { items } from "../../ListBox/__tests__/testComponents";
-import { virtualizeAutocompleteItems } from "../../Menu/__tests__/data";
+import {
+ longListItems,
+ virtualizeAutocompleteItems,
+} from "../../Menu/__tests__/data";
 import { itemsWithSectionTitles } from "../../UNSAFE_ListBox/__tests__/testComponents";
 import {
  ListLayout,
@@ -37424,6 +39077,21 @@ export const SelectExample: React.FC<
  );
 };
 
+export const SelectNearViewportBottomExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Box style={{ height: 3000, paddingTop: "calc(100vh - 120px)" }}>
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ {...args}
+ items={longListItems}
+ />
+ </Box>
+ );
+};
+
 // "Apples" is a substring of "Pineapples" \u2014 exercises exact string matching
 // in the tester's option() locator.
 const substringItems = [
@@ -38530,8 +40198,8 @@ the built-in English default. For most props an empty string is a real override:
 \`closeLabel=""\` renders an empty label rather than falling back to \`"Close"\`.
 
 The props that pre-date this feature keep their existing behaviour and treat \`""\` as
-unset: \`aria-label\` on \`Pagination\` and \`Stepper\`, \`Pagination\`'s \`incrementAriaLabel\` and
-\`decrementAriaLabel\`, \`ButtonSelect\`'s \`moreAriaLabel\`, \`ColorInput\`'s
+unset: \`aria-label\` on \`Pagination\` and \`Stepper\`, \`Pagination\`'s and \`TaggedPagination\`'s
+\`incrementAriaLabel\` and \`decrementAriaLabel\`, \`ButtonSelect\`'s \`moreAriaLabel\`, \`ColorInput\`'s
 \`addColorButtonLabel\`, \`removeColorButtonLabel\` and \`customColorsLabel\`, \`Editor\`'s
 \`submitButtonAriaLabel\` and \`cancelButtonAriaLabel\`, \`FreehandCanvas\`'s \`undoLabel\` and
 \`redoLabel\`, and \`ImageDropZone\`'s \`pickerButtonLabel\`.
@@ -38559,6 +40227,7 @@ are not overridable this way.
 Each component's documentation lists its overridable keys and shows an example. See:
 
 * [Pagination](?path=/docs/core-forms-pagination--docs#translations)
+* [TaggedPagination](?path=/docs/core-forms-taggedpagination--docs#translations)
 * [ColorInput](?path=/docs/core-forms-colorinput--docs#translations)
 * [ImageDropZone](?path=/docs/core-forms-imagedropzone--docs#translations)
 * [FreehandCanvas](?path=/docs/core-miscellaneous-freehandcanvas--docs#translations)
@@ -38598,7 +40267,9 @@ Review the ambiguous ones by hand \u2014 each deserves its own translation:
 | \`redo\` | \`bui.editor.redo\`, \`bui.freehandCanvas.redo\` |
 | \`selectAll\` | \`bui.editor.selectAll\`, \`bui.select.selectAll\` |
 | \`undo\` | \`bui.editor.undo\`, \`bui.freehandCanvas.undo\` |
-| \`loading\` | \`bui.fileList.loading\`, \`bui.imageGallery.loading\`, \`bui.table.loading\` |`,styling:`# Styling with Sprinkles
+| \`loading\` | \`bui.fileList.loading\`, \`bui.imageGallery.loading\`, \`bui.table.loading\` |
+| \`nextPage\` | \`bui.pagination.nextPage\`, \`bui.taggedPagination.nextPage\` |
+| \`prevPage\` | \`bui.pagination.prevPage\`, \`bui.taggedPagination.prevPage\` |`,styling:`# Styling with Sprinkles
 
 Baseline UI provides a powerful, type-safe styling system built on top of [vanilla-extract sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles/).
 
@@ -39521,7 +41192,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-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-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","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-custom","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-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-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.5.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.8.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.
@@ -39572,7 +41243,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:
@@ -39628,7 +41299,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
@@ -39686,5 +41357,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 K(){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:k}]})),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}
-exports.createServer=K;
+`),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:k}]})),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;