@baseline-ui/mcp 3.5.0 → 3.7.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,7 +3117,172 @@ 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 {
+/**
+ * The \`id\` of the root element.
+ */
+id?: string
+/**
+ * The \`Breadcrumb\` items to render, from the root to the current page.
+ */
+children: React.ReactNode
+/**
+ * Handler that is called with the \`id\` of a breadcrumb when it is pressed.
+ */
+onAction?: (key: Key) => void
+/**
+ * The \`id\`s of the breadcrumbs that are disabled. Only the link is disabled:
+ * unlike \`isDisabled\`, the list item gets no \`data-disabled\` attribute.
+ */
+disabledKeys?: Iterable<Key>
+/**
+ * Whether every breadcrumb is disabled.
+ * 
+ * @default false
+ */
+isDisabled?: boolean
+/**
+ * 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={{
+      "Text only": [
+        { kind: "text" },
+        { kind: "text", disabledKeys: ["home", "documents"] },
+        { kind: "text", isDisabled: true },
+      ],
+      "Icon only": [
+        { kind: "icon-only" },
+        { kind: "icon-only", disabledKeys: ["home", "documents"] },
+        { kind: "icon-only", isDisabled: true },
+      ],
+      "Icon and text": [
+        { kind: "icon-and-text" },
+        { kind: "icon-and-text", disabledKeys: ["home", "documents"] },
+        { kind: "icon-and-text", isDisabled: true },
+      ],
+    }}
+    component={BreadcrumbsRow}
+  />
+);`}],implementation:`import { FolderIcon } from "@baseline-ui/icons/16";
+import React from "react";
+
+import { items } from "../../ListBox/__tests__/testComponents";
+import { Select } from "../../Select/Select";
+import { Breadcrumb, Breadcrumbs } from "../Breadcrumbs";
+
+import type { BreadcrumbsProps } from "../Breadcrumbs.types";
+
+export const BreadcrumbsExample: React.FC<
+ Partial<BreadcrumbsProps> & {
+ homeTestId?: string;
+ unlabeled?: boolean;
+ withTrailingButton?: boolean;
+ }
+> = ({ 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}
+ defaultSelectedKey="ellipse"
+ />
+ );
+
+ return (
+ <Breadcrumbs aria-label="Trail">
+ <Breadcrumb id="home" label="Home" />
+ <Breadcrumb id="shape">{select}</Breadcrumb>
+ {!last && <Breadcrumb id="file" label="Report.pdf" />}
+ </Breadcrumbs>
+ );
+};
+
+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
@@ -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>
  );
@@ -7929,7 +8128,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 +8523,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 +8752,7 @@ import { ToggleIconButton } from "../../ToggleIconButton";
 import { Editor } from "../Editor";
 import {
  EditorProvider,
+ getDocPlainText,
  useEditable,
  useEditor,
  useEditorContext,
@@ -8559,6 +8767,7 @@ import type {
  EditorProps,
  MentionableUser,
 } from "../Editor.types";
+import type { RichTextEditorDoc, UseEditorOptions } from "../headless";
 
 export const EditorWithSetCaretButton = ({
  caretIndex,
@@ -8734,6 +8943,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 +9040,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 +9087,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 +9127,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 +9315,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.
@@ -10713,14 +11278,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);
@@ -11128,9 +11696,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 +11744,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 +11767,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 +11792,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 {
 /**
@@ -11918,7 +12497,7 @@ imageWidth?: number | "sm" | "md"
 /**
  * The aspect ratio of the images.
  * 
- * @default 16 / 9
+ * @default 3 / 4
  */
 aspectRatio?: number
 /**
@@ -11987,11 +12566,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 +12614,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 +12773,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 +12816,13 @@ export function ImageGalleryExample({
  }
  : undefined
  }
+ onSelectionChange={
+ onSelectedKeysChange
+ ? (keys) => {
+ onSelectedKeysChange(keys === "all" ? "all" : [...keys]);
+ }
+ : props.onSelectionChange
+ }
  />
  );
 
@@ -12332,9 +12951,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 +12978,9 @@ export function ControlledImageGalleryExample(
  setDynamicItems((prevItems) => {
  return prevItems.filter((item) => item.id !== keys[0]);
  });
+ if (reselectFirstOnDelete) {
+ setSelectedIndex(0);
+ }
  };
 
  return (
@@ -12392,6 +13019,12 @@ export function ControlledImageGalleryExample(
  );
  }}
  onDelete={handleDelete}
+ onListChange={(list) => {
+ props.onListChange?.(list);
+ if (reselectFirstOnListChange) {
+ setSelectedIndex(0);
+ }
+ }}
  />
  </Box>
  );
@@ -13552,6 +14185,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 +14228,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 +15074,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"
@@ -14922,10 +15562,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.
  */
@@ -15501,9 +16137,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 +16606,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 +20346,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
@@ -20311,11 +21058,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}
+ />
  );
 };
 
@@ -21743,8 +22498,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 +22534,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 = [
@@ -23403,6 +24177,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 +24235,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 +24261,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 +26446,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 +26546,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 +26572,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}\`}
  >
@@ -26156,7 +27000,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 +27062,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 +27093,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 +27168,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 +27207,16 @@ 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;
+ }
+> = ({ onAncestorKeyDown, ...props }) => {
+ const pagination = (
  <TaggedPagination
  valueToLabelMap={
  new Map([
@@ -26342,7 +27235,26 @@ export const TaggedPaginationExample: React.FC<
  {...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
@@ -31342,7 +32254,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"
@@ -32708,9 +33620,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 +34089,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,
@@ -37392,8 +38399,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 +38435,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 +39556,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 +39585,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 +39625,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 +40550,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--loading","core-collections-filelist--long-filename","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.7.0"};var b=`
 # 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.
@@ -39676,7 +40705,7 @@ Use this tool to:
 - Consult **list_components** to find the right component for your needs
 - Reference **theming** for custom design systems
 - Check **styling** for CSS and design token guidance
-`;var k=`# List of available components in Baseline UI design system
+`;var I=`# List of available components in Baseline UI design system
 | Name | Description | Similar To |
 | --- | --- | --- |
 ${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${e}|${t?.join(", ")||""}|`).join(`
@@ -39686,5 +40715,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:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:zod.z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:zod.z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
+exports.createServer=j;