@baseline-ui/mcp 1.1.0 → 2.0.0

package/dist/index.js

@@ -2219,7 +2219,7 @@ isPrimaryActionDisabled?: boolean
  * The props that are passed to the text input. If this is provided, a text
  * input will be displayed at the bottom of the dialog.
  */
-textInputProps?: TextInputProps
+textInputProps?: SingleLineTextInputProps | MultiLineTextInputProps
 /**
  * The icon that is displayed at the top of the dialog. This is typically used
  * to display an icon that represents the type of alert that is being shown.
@@ -3827,7 +3827,7 @@ children: React.ReactNode
       "test": "cross-env BABEL_ENV=test jest",
       "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
     }
-  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n> **Note:** `bui.colorInput.indeterminate` is not present in the bundled locale JSON files \u2014 it relies on its `defaultMessage` as fallback. Override it via `I18nProvider.messages` when you need a custom string for the indeterminate state.\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
+  }\`}</Code>;`}],implementation:""},similarTo:[],figmaUrl:null},ColorInput:{id:"core-forms-colorinput",breadcrumb:"Core/Forms/ColorInput",importStatement:'import { ColorInput, CustomTriggerButton, IndeterminateExample } from "@baseline-ui/core";',description:"`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.",documentation:'`ColorInput` is a form control that opens a popover with preset swatches and a custom picker so users can choose or define a color. Use it when a user needs to pick a fill, stroke, highlight, or any color value, with optional alpha and persisted custom colors.\n\n* Includes custom color picker with color area, hue slider, and optional alpha slider\n* Supports alpha channel\n* Exposed to screen readers using ARIA attributes\n* Supports keyboard, touch and mouse interaction\n* Supports disabled and indeterminate states\n* Supports HEX and RGB color modes\n* Persists custom colors in local storage\n* Supports lazy picker mode for adding custom colors without live updates\n\n```jsx\nimport { ColorInput } from "@baseline-ui/core";\n\nconst presets = [\n { label: "Red", color: "#ff0000" },\n { label: "Green", color: "#00ff00" },\n { label: "Blue", color: "#0000ff" },\n { label: "Yellow", color: "#ffff00" },\n { label: "Cyan", color: "#00ffff" },\n { label: "Magenta", color: "#ff00ff" },\n { label: "Black", color: "#000000" },\n { label: "White", color: "#ffffff" },\n { label: "Gray", color: "#808080" },\n { label: "Orange", color: "#ffa500" },\n { label: "Brown", color: "#a52a2a" },\n { label: "Purple", color: "#800080" },\n];\n\n<ColorInput presets={presets} label="Color" />;\n```\n\nBy default, the label is placed above the trigger. Use `labelPosition="start"` to place it inline.\n\n```jsx\n<ColorInput\n presets={presets}\n label="Label"\n labelPosition="start"\n defaultValue="#ff0000"\n/>\n```\n\nHide the visible color name text next to the swatch by setting `colorLabel={false}`.\n\n```jsx\n<ColorInput presets={presets} colorLabel={false} aria-label="Color" />\n```\n\nShow only the preset list without the custom color picker by setting `includePicker={false}`.\n\n```jsx\n<ColorInput presets={presets} includePicker={false} label="Color" />\n```\n\nShow only the custom color picker without any presets.\n\n```jsx\n<ColorInput presets={[]} label="Color" />\n```\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\nDisable the alpha slider by setting `allowAlpha={false}`.\n\n```jsx\n<ColorInput presets={presets} allowAlpha={false} label="Color" />\n```\n\n```jsx\n<ColorInput presets={presets} isDisabled label="Color" />\n```\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show "Indeterminate" as the color name. Apart from this, all the other functionality will work as expected.\n\n```jsx\n<ColorInput isIndeterminate presets={presets} />\n```\n\nBy default, you can add colors picked from the picker to the list of custom color presets. These are persisted in local storage under the key specified by the `storePickedColorKey` prop (defaults to `"baselinePickedColor"`). To use a separate storage key per instance, pass a unique value:\n\n```jsx\n<ColorInput storePickedColorKey="my-custom-key" />\n```\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n```jsx\n<ColorInput presets={presets} defaultValue="#ff0000" />\n```\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n```jsx\n<ColorInput presets={presets} value="#ff0000" onChange={console.log} />\n```\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n```jsx\n<ColorInput\n label="label"\n renderTriggerButton={({ colorName, ref, triggerProps }) => (\n <ActionIconButton\n {...triggerProps}\n aria-label={typeof colorName === "string" ? colorName : "Color"}\n icon={EllipseIcon}\n ref={ref}\n aria-haspopup="true"\n />\n )}\n/>\n```\n\nYou can use the `pickerMode="lazy"` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to prevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n```jsx\n<ColorInput presets={presets} pickerMode="lazy" aria-label="Color" />\n```\n\nThe following CSS class selectors and data attributes are available for styling:\n\n| Selector | Description |\n| -------------------------------------------- | ------------------------------------------------------------------------- |\n| `.BaselineUI-ColorInput-Trigger` | The outer wrapper containing the label and trigger button |\n| `.BaselineUI-ColorInputButton` | The trigger button |\n| `.BaselineUI-ColorInput-Popover` | The popover container |\n| `.BaselineUI-ColorInput-ColorArea` | The color area (saturation/lightness) |\n| `.BaselineUI-ColorInput-ColorAreaThumb` | The draggable thumb on the color area |\n| `.BaselineUI-ColorInput-ColorSlider` | The hue/alpha slider |\n| `.BaselineUI-ColorInput-ColorSliderThumb` | The draggable thumb on a slider |\n| `.BaselineUI-ColorInput-FieldInput` | The hex/RGB text input |\n| `.BaselineUI-ColorInput-Presets` | The preset color list |\n| `.BaselineUI-ColorInput-CustomColors` | The custom colors header |\n| `.BaselineUI-ColorInput-CustomColorsListBox` | The custom colors list |\n| `[data-disabled]` | Applied when the button is disabled |\n| `[data-hovered]` | Applied when the button is hovered |\n| `[data-pressed]` | Applied when the button is pressed |\n| `[data-focus-visible]` | Applied when the button has keyboard focus |\n| `[data-color-mode="hexa"]` | Applied to hex field input when alpha is enabled |\n| `[data-color-mode="hex"]` | Applied to hex field input when alpha is disabled |\n| `[data-color-mode="rgba"]` | Applied to RGB field inputs when alpha is enabled |\n| `[data-color-mode="rgb"]` | Applied to RGB field inputs when alpha is disabled |\n| `[data-channel]` | Applied to color sliders, value is the channel name (e.g. `hue`, `alpha`) |\n\n| Key | Description |\n| ---------- | -------------------------------------------------------------------- |\n| Enter | Opens the popover or selects the focused color if popover is open |\n| Space | Opens the popover or selects the focused color if popover is open |\n| Escape | Closes the popover if open |\n| ArrowRight | Moves focus to the next preset color in the list |\n| ArrowLeft | Moves focus to the previous preset color in the list |\n| Tab | Moves focus between the color area, sliders, fields, and preset list |\n\nThe following strings are used by the `ColorInput` component and can be overridden via `I18nProvider`:\n\n| Key | Default (en) |\n| ------------------------------ | ---------------- |\n| `bui.colorInput.addColor` | Add Color |\n| `bui.colorInput.removeColor` | Remove Color |\n| `bui.colorInput.customColors` | Custom Colors |\n| `bui.colorInput.noColor` | None |\n| `bui.colorInput.transparent` | Transparent |\n| `bui.colorInput.add` | Add |\n| `bui.colorInput.cancel` | Cancel |\n| `bui.colorInput.colorFormat` | Color Format |\n| `bui.colorInput.colorPresets` | Color Presets |\n| `bui.colorInput.newColor` | New Custom Color |\n| `bui.colorInput.indeterminate` | Indeterminate |\n\n```jsx\nimport { I18nProvider, ColorInput } from "@baseline-ui/core";\n\n<I18nProvider\n locale="en"\n messages={{\n en: {\n "bui.colorInput.addColor": "Pick a Color",\n "bui.colorInput.cancel": "Dismiss",\n },\n }}\n>\n <ColorInput />\n</I18nProvider>;\n```\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n```jsx\nimport { IconColorInput } from "@baseline-ui/core";\nimport { BorderColorIcon } from "@baseline-ui/icons/24";\n\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" />;\n```\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n```jsx\n<IconColorInput icon={BorderColorIcon} aria-label="Color Picker" isDisabled />\n```\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltip` and `iconTooltip` props to `false`.\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n```jsx\nimport { ColorSwatch } from "@baseline-ui/core";\n\n<ColorSwatch color="#ff0000" />;\n```',props:`interface ColorInputProps {
 /**
  * Whether the overlay is open by default (controlled).
  */
@@ -3948,19 +3948,19 @@ storePickedColorKey?: string
 /**
  * The label to show on the add color button.
  * 
- * @default Add color
+ * @default Add Color
  */
 addColorButtonLabel?: string
 /**
  * The label to show on the remove color button.
  * 
- * @default Remove color
+ * @default Remove Color
  */
 removeColorButtonLabel?: string
 /**
  * The label to show on the custom colors section.
  * 
- * @default Custom colors
+ * @default Custom Colors
  */
 customColorsLabel?: string
 /**
@@ -4695,7 +4695,10 @@ inputStyle?: React.CSSProperties
  */
 inputClassName?: string
 /**
- * Optional label for the toggle button
+ * Accessible name for the toggle button. Not rendered visually.
+ * 
+ * A blank string is treated as unset, keeping the built-in name. Setting this
+ * overrides any \`aria-labelledby\` the toggle would otherwise inherit.
  */
 toggleLabel?: string
 filterItems?: boolean
@@ -4740,13 +4743,15 @@ filter?: ComboBoxStateOptions<ListItem>["defaultFilter"]
  */
 inputType?: "text" | "number"
 /**
- * The minimum value for the input field. This is only valid when \`inputType\`
- * is set to \`number\`.
+ * The minimum value for the input field. Only applies when \`inputType="number"\`.
+ * 
+ * Requires \`onValueChange\` or \`onInputSubmit\` to receive and apply the clamped value.
  */
 minValue?: number
 /**
- * The maximum value for the input field. This is only valid when \`inputType\`
- * is set to \`number\`.
+ * The maximum value for the input field. Only applies when \`inputType="number"\`.
+ * 
+ * Requires \`onValueChange\` or \`onInputSubmit\` to receive and apply the clamped value.
  */
 maxValue?: number
 /**
@@ -4754,7 +4759,17 @@ maxValue?: number
  */
 onInputSubmit?: (value: string) => void
 /**
- * Listener to call when the selected value changes
+ * Listener to call when the selected value changes.
+ * 
+ * Also called when the selected item's label changes after selection (e.g. the consumer
+ * relabels the item, or an async collection resolves), so the reported \`value\` converges on
+ * the item's current label once the field settles. While the user has unsubmitted text, a
+ * label-only change is deferred; it is reported on the next selection, submit, or blur that
+ * settles the input back onto the selection. With a controlled \`inputValue\` the consumer owns
+ * that sync, so a deferred label is only reported once they settle the input themselves.
+ * 
+ * Do not relabel the selected item from inside this callback \u2014 the new label re-triggers the
+ * listener, which loops unless the relabel is idempotent.
  */
 onValueChange?: (option: { value?: string; key?: string | null }) => void
 }`,stories:{usage:[{id:"core-forms-combobox--basic",name:"Basic",snippet:`const Basic = () => <ComboBox
@@ -4965,7 +4980,33 @@ onValueChange?: (option: { value?: string; key?: string | null }) => void
     defaultInputValue="42"
     allowsCustomValue
     inputType="number"
-    minValue={0} />;`},{id:"core-forms-combobox--with-custom-filter",name:"With Custom Filter",snippet:`const WithCustomFilter = () => <ComboBox
+    minValue={0} />;`},{id:"core-forms-combobox--with-min-max-value",name:"With Min Max Value",snippet:`const WithMinMaxValue = () => {
+    const [inputValue, setInputValue] = React.useState("");
+
+    return (
+        <ComboBox
+            items={[
+              { id: "10", label: "10" },
+              { id: "25", label: "25" },
+              { id: "50", label: "50" },
+            ]}
+            aria-label="ComboBox"
+            label="Type a number outside 10-50 range and blur"
+            description="Values are clamped to minValue=10, maxValue=50 on blur"
+            placeholder="Enter a number"
+            allowsCustomValue
+            inputType="number"
+            minValue={10}
+            maxValue={50}
+            inputValue={inputValue}
+            onInputChange={setInputValue}
+            onValueChange={({ value }) => {
+              if (value !== undefined) {
+                setInputValue(value);
+              }
+            }} />
+    );
+};`},{id:"core-forms-combobox--with-custom-filter",name:"With Custom Filter",snippet:`const WithCustomFilter = () => <ComboBox
     items={[
       { id: "pear", label: "Pear" },
       { id: "apple", label: "Apple" },
@@ -4996,6 +5037,8 @@ import { ComboBox } from "..";
 import { Box } from "../../Box";
 
 import type { ListItem, ListOption } from "../../shared/types/List";
+import type { ComboBoxProps } from "../ComboBox.types";
+import type { Key } from "react-aria";
 
 export const items = [
  { id: "pears", label: "Pears" },
@@ -5076,6 +5119,114 @@ export const NumberComboBoxExample: React.FC<
  );
 };
 
+export const DynamicLabelComboBoxExample: React.FC<{
+ onValueChange?: ComboBoxProps["onValueChange"];
+ allowsCustomValue?: boolean;
+ inputValue?: string;
+ /** Relabels the selected item from "(selected)" to "(renamed)" when this exact text is typed. */
+ relabelOnInput?: string;
+}> = ({ onValueChange, allowsCustomValue, inputValue, relabelOnInput }) => {
+ const [value, setValue] = React.useState<Key | null>(null);
+ // One-way: relabelling on every keystroke would feed the sync back into onInputChange and loop.
+ const [isRelabelled, setIsRelabelled] = React.useState(false);
+
+ const suffix = isRelabelled ? "(renamed)" : "(selected)";
+ const dynamicItems = items.map((item) =>
+ item.id === value ? { ...item, label: \`\${item.label} \${suffix}\` } : item,
+ );
+
+ return (
+ <Box style={{ width: "100%", height: 200 }}>
+ <ComboBox
+ items={dynamicItems}
+ aria-label="Combo box"
+ value={value}
+ onChange={setValue}
+ onValueChange={onValueChange}
+ allowsCustomValue={allowsCustomValue}
+ inputValue={inputValue}
+ onInputChange={(text) => {
+ if (text === relabelOnInput) {
+ setIsRelabelled(true);
+ }
+ }}
+ />
+ <span data-testid="relabel-probe">
+ {dynamicItems.find((item) => item.id === value)?.label ?? ""}
+ </span>
+ </Box>
+ );
+};
+
+export const AsyncItemsComboBoxExample: React.FC<{
+ initiallyLoaded?: boolean;
+ onValueChange?: ComboBoxProps["onValueChange"];
+ allowsCustomValue?: boolean;
+ /** Unloads and reloads the items when this exact text is typed, without moving focus. */
+ refreshOnInput?: string;
+}> = ({
+ initiallyLoaded = true,
+ onValueChange,
+ allowsCustomValue,
+ refreshOnInput,
+}) => {
+ const [loadState, setLoadState] = React.useState<
+ "loaded" | "unloaded" | "refreshing"
+ >(initiallyLoaded ? "loaded" : "unloaded");
+ const [refreshCount, setRefreshCount] = React.useState(0);
+ const [value, setValue] = React.useState<Key | null>(
+ initiallyLoaded ? null : "pears",
+ );
+ const isLoaded = loadState === "loaded";
+
+ // The unloaded collection must reach the DOM for a render before the items come back,
+ // otherwise there is no transient for the refresh to be mistaken for a new selection.
+ React.useEffect(() => {
+ if (loadState === "refreshing") {
+ setLoadState("loaded");
+ setRefreshCount((count) => count + 1);
+ }
+ }, [loadState]);
+
+ return (
+ <Box style={{ width: "100%", height: 200 }}>
+ <ComboBox
+ items={isLoaded ? items : []}
+ aria-label="Combo box"
+ value={value}
+ onChange={setValue}
+ onValueChange={onValueChange}
+ allowsCustomValue={allowsCustomValue}
+ onInputChange={(text) => {
+ if (text === refreshOnInput) {
+ setLoadState("refreshing");
+ }
+ }}
+ />
+ <button
+ type="button"
+ onClick={() => {
+ setLoadState((state) => (state === "loaded" ? "unloaded" : "loaded"));
+ }}
+ >
+ {isLoaded ? "Unload items" : "Load items"}
+ </button>
+ <span data-testid="refresh-probe">{refreshCount}</span>
+ </Box>
+ );
+};
+
+export const LabelledByComboBoxExample: React.FC<
+ Omit<React.ComponentProps<typeof ComboBox>, "items" | "aria-labelledby">
+> = (args) => {
+ return (
+ <Box style={{ width: "100%", height: 200 }}>
+ <span id="external-label">External</span>
+ <ComboBox items={items} {...args} aria-labelledby="external-label" />
+ </Box>
+ );
+};
+
 export const SectionComboBoxExample: React.FC = () => {
  return (
  <Box style={{ width: "100%", height: 300 }}>
@@ -7710,6 +7861,10 @@ children?: ReactNode
  * Enables the selection of directories instead of individual files.
  */
 acceptDirectory?: boolean
+/**
+ * The id applied to the root element of the component.
+ */
+id?: string
 /**
  * The className applied to the root element of the component.
  */
@@ -8005,6 +8160,7 @@ disabledKeys?: Iterable<string> | "all"
     );
 };`}],implementation:`import React from "react";
 
+import { ActionButton } from "../../ActionButton";
 import { FileList } from "../FileList";
 
 import type { FileListItem } from "../FileList.types";
@@ -8059,6 +8215,32 @@ export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
  name: \`attachment-\${i + 1}.pdf\`,
 }));
 
+// Swaps in a new array whose items carry new content, which is the only way a caller can
+// legitimately invalidate the memoised options.
+export const UploadingFileList: React.FC = () => {
+ const [items, setItems] = React.useState<FileListItem[]>(loadingItems);
+
+ return (
+ <>
+ <ActionButton
+ label="Finish upload"
+ onPress={() => {
+ setItems((prev) =>
+ prev.map((item) => ({ ...item, isLoading: false })),
+ );
+ }}
+ />
+ <FileList
+ aria-label="Uploaded files"
+ items={items}
+ onRemove={(id) => {
+ setItems((prev) => prev.filter((item) => item.id !== id));
+ }}
+ />
+ </>
+ );
+};
+
 interface BasicProps {
  onRemove?: (id: string) => void;
  disabledKeys?: Iterable<string> | "all";
@@ -9847,7 +10029,12 @@ children: React.ReactNode
 locale?: string
 messages?: LocalizedStrings
 /**
- * @default true
+ * Whether to \`console.warn\` about message ids that resolve through the
+ * deprecated bare-id fallback or fall all the way through to their
+ * \`defaultMessage\`. These warnings are development guidance, so they are off
+ * in production builds \u2014 pass \`true\` to opt back in.
+ * 
+ * @default process.env.NODE_ENV !== "production"
  */
 shouldLogMissingMessages?: boolean
 }`,stories:{usage:[{id:"core-utilities-i18nprovider--string-format",name:"String Format",snippet:`const StringFormat = ({ children }) => {
@@ -9987,7 +10174,6 @@ The following strings are used by the \`ImageDropZone\` component and can be ove
 | Key | Default (en) |
 | ------------------------------- | ------------ |
 | \`bui.imageDropZone.selectImage\` | Select Image |
-| \`bui.imageDropZone.delete\` | Delete |
 
 \`\`\`jsx
 import { I18nProvider, ImageDropZone } from "@baseline-ui/core";
@@ -9997,7 +10183,6 @@ import { I18nProvider, ImageDropZone } from "@baseline-ui/core";
  messages={{
  en: {
  "bui.imageDropZone.selectImage": "Choose Image",
- "bui.imageDropZone.delete": "Remove",
  },
  }}
 >
@@ -10420,6 +10605,8 @@ renderImage?: (
 imageContainerStyle?: React.CSSProperties
 /**
  * The dimensions of the image.
+ * 
+ * @default { width: imageWidth, aspectRatio }
  */
 imageDimensions?: | Dimension
 | ((
@@ -10878,6 +11065,35 @@ export function ScrollIntoViewImageGalleryExample() {
  );
 }
 
+// Counts \`renderImage\` calls so a spec can prove that a re-render which changes nothing
+// the gallery reads does not throw away the list box's cached options. \`Report\` publishes
+// the tally taken *before* its own render, so two clicks bracket exactly one re-render.
+export function RenderCountingImageGalleryExample() {
+ const calls = React.useRef(0);
+ const [reported, setReported] = React.useState(0);
+
+ const renderImage = React.useCallback<
+ Exclude<React.ComponentProps<typeof ImageGallery>["renderImage"], undefined>
+ >((item) => {
+ calls.current += 1;
+
+ return <img src={item.data?.src} alt={item.data?.alt} />;
+ }, []);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="lg">
+ <ActionButton
+ label="Report"
+ onPress={() => {
+ setReported(calls.current);
+ }}
+ />
+ <Text data-testid="render-count">{reported.toString()}</Text>
+ <ImageGallery defaultItems={items} renderImage={renderImage} />
+ </Box>
+ );
+}
+
 export function RTLImageGalleryExample(
  props: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete">,
 ) {
@@ -12183,10 +12399,13 @@ renderDragPreview?: (items: DragItem[]) => React.JSX.Element
  * 
  * @param section ListSection
  * @param ref React.RefObject<HTMLDivElement>
+ * @param headingProps ARIA props for the heading element \u2014 spread these onto the header's
+ *   root (and attach \`ref\`) so the section group's \`aria-labelledby\` resolves to it.
  */
 renderSectionHeader?: (
   section: Node<ListItem>,
   ref: React.Ref<HTMLSpanElement>,
+  headingProps?: React.HTMLAttributes<HTMLElement>,
 ) => React.ReactNode
 /**
  * Whether to show the selected checkmark icon.
@@ -12879,27 +13098,45 @@ console.log(greet('Markdown Maverick'));
 2. Selection options: The component can be configured to allow single, multiple, or no selection.
 3. Disabled items support: Certain menu items can be disabled, preventing user interaction.
 4. Sections support: Related items can be grouped into sections for better organization and navigation.
-5. Keyboard navigation: Users can navigate through the menu using their keyboard, including arrow keys, home/end, and page up/down.
-6. Auto-scroll: The menu automatically scrolls as the user navigates through it with their keyboard.
-7. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.
-8. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.
-9. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.
+5. Submenus: Any option can nest an \`items\` array to open a cascading submenu of arbitrary depth.
+6. Keyboard navigation: Users can navigate through the menu using their keyboard, including arrow keys, home/end, and page up/down.
+7. Auto-scroll: The menu automatically scrolls as the user navigates through it with their keyboard.
+8. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.
+9. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.
+10. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.
+
+Pass the list of options via \`items\` and a \`triggerLabel\` for the default
+\`ActionButton\` trigger. \`Menu\` renders its own trigger and popover \u2014 it does not
+take children.
 
 \`\`\`jsx
-import { ActionButton } from "../../utils";
-import { Menu } from "@storybook/addon-docs/blocks";
+import { Menu } from "@baseline-ui/core";
 
 const items = [
- {
- label: "Cut",
- id: "cut",
- keyboardShortcut: "\u2318X",
- },
+ { id: "cut", label: "Cut", keyboardShortcut: "\u2318X" },
+ { id: "copy", label: "Copy", keyboardShortcut: "\u2318C" },
+ { id: "paste", label: "Paste", keyboardShortcut: "\u2318V" },
 ];
 
-<Menu items={items}>
- <ActionButton label="Label" />
-</Menu>;
+export default function App() {
+ return <Menu items={items} triggerLabel="Edit" onAction={(id) => {}} />;
+}
+\`\`\`
+
+To render a custom trigger, pass \`renderTrigger\` instead of \`triggerLabel\`. If
+you need on/off state rather than a command list, use \`ToggleButton\`; to pick a
+value from a set with an always-visible field, use \`Select\`.
+
+Each option accepts an optional leading \`icon\` (a \`@baseline-ui/icons\` component)
+and a \`keyboardShortcut\` string rendered at the trailing edge of the item.
+
+\`\`\`jsx
+import { CopyIcon, TrashIcon } from "@baseline-ui/icons/16";
+
+const items = [
+ { id: "copy", label: "Copy", keyboardShortcut: "\u2318C", icon: CopyIcon },
+ { id: "delete", label: "Delete", keyboardShortcut: "\u232B", icon: TrashIcon },
+];
 \`\`\`
 
 The \`Menu\` component can be configured to allow single, multiple, or no selection. The default is no selection. To allow single selection, set the \`selectionMode\` prop to \`single\`. To allow multiple selection, set the \`selectionMode\` prop to \`multiple\`.
@@ -12927,9 +13164,93 @@ const items = [
 ];
 \`\`\`
 
-The \`Menu\` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the \`selectedKeys\` prop to an array of item IDs. The value of the selected keys must match the \`id\` prop of the items.
+Pass the object form of \`selectionMode\` to make individual sections independent
+selection groups. \`selectedKeys\` and \`defaultSelectedKeys\` are then keyed by
+section id, and \`onSelectionChange\` receives the changed section's selection
+plus its \`sectionId\`.
+
+\`\`\`tsx
+<Menu
+ items={itemsWithSections}
+ selectionMode={{ edit: "single", theme: "multiple" }}
+ selectedKeys={{ edit: editKeys, theme: themeKeys }}
+ onSelectionChange={(keys, meta) => {
+ if (meta) setSelection((prev) => ({ ...prev, [meta.sectionId]: keys }));
+ }}
+/>
+\`\`\`
+
+Menu-wide selection (a string \`selectionMode\`) and per-section selection are
+mutually exclusive within one menu. Enter activation closes the menu. Pointer
+activation closes single-select menus and keeps multi-select menus open, while
+Space activation keeps both selection modes open.
+
+Give any option an \`items\` array to turn it into a submenu trigger. The option
+renders with a trailing chevron and opens a nested menu on hover or when
+activated with \`ArrowRight\` / \`Enter\`. Submenus nest arbitrarily and may
+themselves contain leaf options, sections, or deeper submenus.
+
+\`\`\`jsx
+const items = [
+ { id: "new", label: "New" },
+ {
+ id: "share",
+ label: "Share",
+ items: [
+ { id: "email", label: "Email link" },
+ { id: "sms", label: "SMS" },
+ {
+ id: "more",
+ label: "More services",
+ items: [
+ { id: "slack", label: "Slack" },
+ { id: "teams", label: "Teams" },
+ ],
+ },
+ ],
+ },
+];
+\`\`\`
+
+\`onAction\` fires for the activated leaf at any depth (with that leaf's \`id\`);
+activating a submenu trigger does not fire \`onAction\`. Selecting a leaf closes
+the whole cascade. A single flat \`disabledKeys\` array disables triggers and
+nested items at any level. In RTL locales the chevron and the submenu's opening
+direction flip automatically.
+
+Selection can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally via \`defaultSelectedKeys\`. To control it, pass \`selectedKeys\` and handle \`onSelectionChange\`. The keys must match the \`id\` of the items. See the [Single Selection](#single-selection) example above.
+
+The open state can likewise be controlled or uncontrolled. When uncontrolled, use \`defaultOpen\`; to control it, pass \`isOpen\` and handle \`onOpenChange\`.
+
+Each menu item exposes the standard React Aria interaction-state attributes, and Baseline UI adds class hooks on the trigger, popover, and item subparts.
 
-The \`Menu\` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the \`isOpen\` prop to a boolean value.`,props:`interface MenuProps {
+| Selector | Description |
+| ---------------------------------- | ------------------------------------------------------- |
+| \\[data-focused] | Whether the item is focused. |
+| \\[data-focus-visible] | Whether the item is keyboard focused. |
+| \\[data-hovered] | Whether the item is currently hovered with a mouse. |
+| \\[data-pressed] | Whether the item is currently pressed. |
+| \\[data-selected] | Whether the item is selected (selection modes). |
+| \\[data-disabled] | Whether the item is disabled. |
+| \\[data-has-submenu] | Whether the item opens a submenu. |
+| \\[data-open] | Whether the item's submenu is open. |
+| .BaselineUI-Menu-Trigger | The trigger button. |
+| .BaselineUI-Menu-Popover | The root popover container. |
+| .BaselineUI-Menu-SubmenuPopover | A nested submenu popover container. |
+| .BaselineUI-Menu-SubmenuChevron | The trailing chevron on a submenu trigger. |
+| .BaselineUI-Menu-OptionDescription | The trailing text of an item (e.g. \`keyboardShortcut\`). |
+
+| Key | Function |
+| --------------------- | ---------------------------------------------------------------------------------- |
+| \`Enter\` / \`Space\` | Opens the menu from the trigger; activates the focused item. |
+| \`ArrowDown\` | Opens the menu focusing the first item; moves focus down. |
+| \`ArrowUp\` | Opens the menu focusing the last item; moves focus up. |
+| \`Home\` / \`End\` | Moves focus to the first / last item. |
+| \`PageUp\` / \`PageDown\` | Moves focus up / down by a page. |
+| \`A\`\u2013\`Z\` | Typeahead \u2014 focuses the next item starting with the typed letters. |
+| \`ArrowRight\` | Opens the focused submenu (\`ArrowLeft\` in RTL). |
+| \`ArrowLeft\` | Closes the current submenu and returns focus to its trigger (\`ArrowRight\` in RTL). |
+| \`Escape\` | Closes the menu (or the current submenu level). |`,props:`interface MenuProps {
 /**
  * Whether the overlay is open by default (controlled).
  */
@@ -12961,39 +13282,18 @@ contentClassName?: string
  */
 itemClassName?: string
 /**
- * A list of items to render in the menu. Items have the following shape:
- * 
- * \`\`\`ts
- * export type MenuOption = {
- *   id: string;
- *   label: string;
- *   keyboardShortcut?: string;
- *   icon?: React.FC<IconProps>;
- * };
- * 
- * export type MenuSection = {
- *   id: string;
- *   title?: string;
- *   type: "section";
- *   children: MenuOption[];
- * };
+ * A list of items to render in the menu. See \`MenuItem\`.
  * 
- * export type MenuItem = MenuOption | MenuSection;
- * \`\`\`
+ * A \`MenuSection\` may opt into independent selection by listing its id in the
+ * object form of \`selectionMode\` (e.g. \`selectionMode={{ view: "single" }}\`).
  */
 items: MenuItem[]
 /**
  * A function that renders the trigger element of the component. The default
  * implementation renders an \`ActionButton\` component.
- * 
- * \`\`\`tsx
- * <Menu renderTrigger={({ buttonProps, ref }) => <ActionButton {...buttonProps} label="Label" ref={ref} />
- * \`\`\`
  */
 renderTrigger?: (options: {
-  buttonProps: ActionButtonProps & {
-    isOpen: boolean;
-  };
+  buttonProps: ActionButtonProps & { isOpen: boolean };
   ref: React.RefObject<HTMLButtonElement>;
 }) => React.ReactNode
 /**
@@ -13001,6 +13301,33 @@ renderTrigger?: (options: {
  * function that accepts a boolean indicating whether the menu is open.
  */
 triggerLabel?: React.ReactNode | ((isOpen: boolean) => React.ReactNode)
+/**
+ * \`"single"\`/\`"multiple"\` select the whole menu. A record keyed by section id
+ * makes each listed section an independent selection group.
+ */
+selectionMode?: | "none"
+| "single"
+| "multiple"
+| Record<string, "single" | "multiple">
+/**
+ * A menu-wide selection (\`"all"\` or an iterable of keys) or a per-section
+ * record of \`Selection\`. The iterable form preserves the pre-existing
+ * \`AriaMenuProps.selectedKeys\` shape (arrays stay assignable).
+ */
+selectedKeys?: "all" | Iterable<Key> | Record<string, Selection>
+/**
+ * Initial selection, in the same flat-or-per-section shape as \`selectedKeys\`.
+ */
+defaultSelectedKeys?: | "all"
+| Iterable<Key>
+| Record<string, "all" | Iterable<Key>>
+/**
+ * Fires on user selection. In per-section mode, the second argument carries
+ * the \`sectionId\` of the section whose selection changed; it is \`undefined\`
+ * in menu-wide mode. Typed optional so existing one-arg handlers stay
+ * assignable.
+ */
+onSelectionChange?: (keys: Selection, meta?: { sectionId: string }) => void
 placement?: any
 }`,stories:{usage:[{id:"core-collections-menu--basic",name:"Basic",snippet:'const Basic = () => <Menu triggerLabel="Menu Trigger" items={items} />;'},{id:"core-collections-menu--with-sections",name:"With Sections",snippet:'const WithSections = () => <Menu triggerLabel="Menu Trigger" items={itemsWithSections} />;'},{id:"core-collections-menu--controlled-open",name:"Controlled Open",snippet:'const ControlledOpen = () => <Menu triggerLabel="Menu Trigger" items={items} isOpen />;'},{id:"core-collections-menu--disabled",name:"Disabled",snippet:'const Disabled = () => <Menu triggerLabel="Menu Trigger" items={items} isDisabled />;'},{id:"core-collections-menu--with-disabled-keys",name:"With Disabled Keys",snippet:'const WithDisabledKeys = () => <Menu triggerLabel="Menu Trigger" items={items} disabledKeys={["paste"]} />;'},{id:"core-collections-menu--single-selection",name:"Single Selection",snippet:`const SingleSelection = () => {
     const [selectedKey, setSelectedKey] = React.useState(
@@ -13034,13 +13361,17 @@ placement?: any
 };`},{id:"core-collections-menu--with-selected-keys-controlled",name:"With Selected Keys Controlled",snippet:`const WithSelectedKeysControlled = () => <Menu
     triggerLabel="Menu Trigger"
     items={items}
-    selectedKeys={["light"]}
+    selectedKeys={new Set(["light"])}
     selectionMode="single" />;`},{id:"core-collections-menu--long-menu",name:"Long Menu",snippet:`const LongMenu = () => <Menu
     triggerLabel="Menu Trigger"
     items={longListItems}
     selectionMode="single"
     defaultOpen
-    autoFocus="first" />;`},{id:"core-collections-menu--with-custom-trigger",name:"With Custom Trigger",snippet:`const WithCustomTrigger = () => <Menu
+    autoFocus="first" />;`},{id:"core-collections-menu--with-submenu",name:"With Submenu",snippet:'const WithSubmenu = () => <Menu triggerLabel="Menu Trigger" items={itemsWithSubmenu} defaultOpen />;'},{id:"core-collections-menu--with-icons",name:"With Icons",snippet:'const WithIcons = () => <Menu triggerLabel="Menu Trigger" items={itemsWithIcons} defaultOpen />;'},{id:"core-collections-menu--with-disabled-submenu",name:"With Disabled Submenu",snippet:`const WithDisabledSubmenu = () => <Menu
+    triggerLabel="Menu Trigger"
+    items={itemsWithSubmenu}
+    disabledKeys={["share"]}
+    defaultOpen />;`},{id:"core-collections-menu--with-long-labels",name:"With Long Labels",snippet:'const WithLongLabels = () => <Menu triggerLabel="Menu Trigger" items={longLabelItems} defaultOpen />;'},{id:"core-collections-menu--with-custom-trigger",name:"With Custom Trigger",snippet:`const WithCustomTrigger = () => <Menu
     triggerLabel="Menu Trigger"
     renderTrigger={({ buttonProps, ref }) => (
       <ActionButton
@@ -13049,12 +13380,32 @@ placement?: any
         size="sm"
         ref={ref}
       />
-    )} />;`}],implementation:`import React from "react";
+    )} />;`},{id:"core-collections-menu--section-level-selection",name:"Section Level Selection",snippet:`const SectionLevelSelection = () => {
+    const [sel, setSel] = React.useState<Record<string, Selection>>({
+      edit: new Set<Key>(["copy"]),
+      theme: new Set<Key>(["light", "dark"]),
+    });
+
+    return (
+        <Menu
+            triggerLabel="Menu Trigger"
+            items={itemsWithSections}
+            isOpen
+            selectionMode={{ edit: "single", theme: "multiple" }}
+            selectedKeys={{ edit: sel.edit, theme: sel.theme }}
+            onSelectionChange={(keys, meta) => {
+              if (meta) setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
+            }} />
+    );
+};`}],implementation:`import React from "react";
 
+import { I18nProvider } from "../../I18nProvider/I18nProvider";
 import { Menu } from "../Menu";
-import { items } from "./data";
+import { items, itemsWithSections, itemsWithSubmenu } from "./data";
 
 import type { MenuProps } from "../Menu.types";
+import type { Key } from "react-aria";
+import type { Selection } from "react-stately";
 
 export const MenuExample: React.FC<
  MenuProps & {
@@ -13084,63 +13435,218 @@ export const MenuActionValueExample: React.FC<{ label: string }> = ({
  <div data-testid="menu-action-value">{received}</div>
  </>
  );
-};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).",documentation:`\`MessageFormat\` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).
+};
 
-\`\`\`jsx
-import { MessageFormat, I18nProvider } from "../../utils";
+export const MenuSelectionExample: React.FC<{
+ label: string;
+ selectionMode: "single" | "multiple";
+}> = ({ label, selectionMode }) => {
+ const [selected, setSelected] = React.useState<Selection>(new Set());
+ return (
+ <>
+ <Menu
+ items={items}
+ triggerLabel={label}
+ selectionMode={selectionMode}
+ selectedKeys={selected}
+ onSelectionChange={setSelected}
+ />
+ <div data-testid="menu-selection">
+ {selected === "all" ? "all" : [...selected].map(String).join(",")}
+ </div>
+ </>
+ );
+};
 
-const messages = {
- en: {
- hello: "Hello {name}!",
- },
- fr: {
- hello: "Bonjour {name}!",
- },
+export const MenuOpenChangeExample: React.FC<{ label: string }> = ({
+ label,
+}) => {
+ const [log, setLog] = React.useState<string[]>([]);
+ return (
+ <>
+ <Menu
+ items={items}
+ triggerLabel={label}
+ onOpenChange={(isOpen) => {
+ setLog((prev) => [...prev, String(isOpen)]);
+ }}
+ />
+ <div data-testid="menu-open-log">{log.join(",")}</div>
+ </>
+ );
 };
 
-const App = () => (
- <I18nProvider locale="en" messages={messages}>
- <MessageFormat id="hello" values={{ name: "World" }} />
+export const MenuRtlSubmenuExample: React.FC<{ label: string }> = ({
+ label,
+}) => (
+ <I18nProvider locale="ar">
+ <Menu items={itemsWithSubmenu} triggerLabel={label} />
  </I18nProvider>
 );
-\`\`\``,props:`interface MessageFormatProps {
-/**
- * By default \`<MessageFormat>\` will render the formatted string into a
- * \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
- * it with another React element (recommended), specify a different tagName
- * (e.g., 'div')
- */
-elementType?: React.ElementType | "div" | "span"
-/**
- * The id of the message to format.
- */
-id: string
-/**
- * The default message to use if the message id is not found.
- */
-defaultMessage?: string
-}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="addSignature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
 
-* The content outside the modal is hidden from screen readers.
-* The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.
-* Focus is trapped within the modal when it is open. It is automatically returned to the element that triggered the modal when it is closed.
-* Scrolling of the page is disabled when the modal is open.
-
-When your SDK or component library is embedded inside a host application you don't control, the host page may have its own interactive UI (inputs, buttons, etc.) that users need to access even while a modal is open. By default, the modal traps focus and hides outside elements from assistive technologies, which would block interaction with the host app's UI.
+export const MenuFunctionLabelExample: React.FC = () => (
+ <Menu
+ items={items}
+ triggerLabel={(isOpen) => (isOpen ? "Opened" : "Closed")}
+ />
+);
 
-Use the \`disableFocusManagement\` prop on \`ModalContent\` to prevent focus trapping and restoration, allowing users to interact with elements outside the modal's container.
+export const MenuPerSectionTypeCheck: React.FC = () => (
+ <Menu
+ items={items}
+ triggerLabel="types"
+ selectionMode={{ a: "single", b: "multiple" }}
+ selectedKeys={{ a: new Set<Key>(["x"]), b: new Set<Key>() }}
+ onSelectionChange={(keys, meta) => {
+ void keys;
+ void meta?.sectionId;
+ }}
+ />
+);
 
-Combine this with \`UNSAFE_enableInert\` to ensure that background elements behind the modal (inside the \`FrameProvider\` container) remain truly non-interactive while the host page's UI stays accessible.
+const fmtSelection = (sel: Selection): string =>
+ sel === "all" ? "all" : [...sel].map(String).join(",");
 
-\`\`\`jsx
-import {
- Dialog,
- Modal,
- ModalTrigger,
- ModalContent,
- ModalClose,
- DialogTitle,
-} from "../../utils";
+export const MenuSectionSelectionExample: React.FC<{
+ label: string;
+ disallowEmptySelection?: boolean;
+}> = ({ label, disallowEmptySelection }) => {
+ const [sel, setSel] = React.useState<Record<string, Selection>>({
+ edit: new Set<Key>(),
+ theme: new Set<Key>(["light"]),
+ });
+ const [lastSection, setLastSection] = React.useState("");
+ return (
+ <>
+ <Menu
+ items={itemsWithSections}
+ triggerLabel={label}
+ selectionMode={{ edit: "single", theme: "multiple" }}
+ selectedKeys={{ edit: sel.edit, theme: sel.theme }}
+ disallowEmptySelection={disallowEmptySelection}
+ onSelectionChange={(keys, meta) => {
+ if (!meta) return;
+ setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
+ setLastSection(meta.sectionId);
+ }}
+ />
+ <div data-testid="menu-section-selection-edit">
+ {fmtSelection(sel.edit)}
+ </div>
+ <div data-testid="menu-section-selection-theme">
+ {fmtSelection(sel.theme)}
+ </div>
+ <div data-testid="menu-section-selection-lastsection">{lastSection}</div>
+ </>
+ );
+};
+
+export const MenuDisabledSectionSelectionExample: React.FC = () => (
+ <Menu
+ items={itemsWithSections}
+ triggerLabel="Menu"
+ selectionMode={{ edit: "single" }}
+ disabledKeys={["copy"]}
+ />
+);
+
+export const MenuOneShotDisabledKeysSectionSelectionExample: React.FC = () => {
+ const disabledKeys = ["copy"][Symbol.iterator]();
+
+ return (
+ <Menu
+ items={itemsWithSections}
+ triggerLabel="Menu"
+ selectionMode={{ edit: "single" }}
+ disabledKeys={disabledKeys}
+ />
+ );
+};
+
+export function MenuUncontrolledSectionSelectionExample() {
+ const [lastSection, setLastSection] = React.useState("");
+ const [themeKeys, setThemeKeys] = React.useState("");
+ return (
+ <>
+ <Menu
+ triggerLabel="Options"
+ items={itemsWithSections}
+ selectionMode={{ theme: "multiple" }}
+ defaultSelectedKeys={{ theme: new Set<Key>(["light"]) }}
+ onSelectionChange={(keys, meta) => {
+ if (!meta) return;
+ setLastSection(meta.sectionId);
+ setThemeKeys(fmtSelection(keys));
+ }}
+ />
+ <div data-testid="menu-uncontrolled-lastsection">{lastSection}</div>
+ <div data-testid="menu-uncontrolled-keys">{themeKeys}</div>
+ </>
+ );
+}
+
+export const MenuPartialSectionSelectionExample: React.FC<{
+ label: string;
+}> = ({ label }) => {
+ const [sel, setSel] = React.useState<Record<string, Selection>>({
+ edit: new Set<Key>(),
+ });
+ const [action, setAction] = React.useState("");
+ return (
+ <>
+ <Menu
+ items={itemsWithSections}
+ triggerLabel={label}
+ selectionMode={{ edit: "single" }}
+ selectedKeys={{ edit: sel.edit }}
+ onSelectionChange={(keys, meta) => {
+ if (meta) setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
+ }}
+ onAction={(key) => {
+ setAction(String(key));
+ }}
+ />
+ <div data-testid="menu-partial-action">{action}</div>
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```',props:`interface MessageFormatProps {
+/**
+ * By default \`<MessageFormat>\` will render the formatted string into a
+ * \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
+ * it with another React element (recommended), specify a different tagName
+ * (e.g., 'div')
+ */
+elementType?: React.ElementType | "div" | "span"
+/**
+ * The id of the message to format.
+ */
+id: string
+/**
+ * The default message to use if the message id is not found.
+ */
+defaultMessage?: string
+}`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="myApp.addSignature" defaultMessage="Add signature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
+
+* The content outside the modal is hidden from screen readers.
+* The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.
+* Focus is trapped within the modal when it is open. It is automatically returned to the element that triggered the modal when it is closed.
+* Scrolling of the page is disabled when the modal is open.
+
+When your SDK or component library is embedded inside a host application you don't control, the host page may have its own interactive UI (inputs, buttons, etc.) that users need to access even while a modal is open. By default, the modal traps focus and hides outside elements from assistive technologies, which would block interaction with the host app's UI.
+
+Use the \`disableFocusManagement\` prop on \`ModalContent\` to prevent focus trapping and restoration, allowing users to interact with elements outside the modal's container.
+
+Combine this with \`UNSAFE_enableInert\` to ensure that background elements behind the modal (inside the \`FrameProvider\` container) remain truly non-interactive while the host page's UI stays accessible.
+
+\`\`\`jsx
+import {
+ Dialog,
+ Modal,
+ ModalTrigger,
+ ModalContent,
+ ModalClose,
+ DialogTitle,
+} from "../../utils";
 
 <Modal>
  <ModalTrigger>
@@ -16204,25 +16710,13 @@ export const PopoverDefaultOpenWithArrowExample = () => {
  );
 };
 
-export const PopoverContainedFocusExample = () => {
- return (
- <Popover type="dialog">
- <PopoverTrigger>
- <ActionButton label="Open" />
- </PopoverTrigger>
- <PopoverContent shouldContainFocus={true}>
- <Dialog
- size="content"
- className={sprinkles({
- padding: "md",
- display: "flex",
- gap: "xl",
- flexDirection: "column",
- })}
- style={{
- width: 200,
- }}
- >
+export const PopoverContainedFocusExample = ({
+ shouldContainFocus = true,
+}: {
+ shouldContainFocus?: boolean;
+}) => {
+ const content = (
+ <>
  <Text type="label">The focus is contained within the popover.</Text>
 
  <TextInput
@@ -16234,10 +16728,55 @@ export const PopoverContainedFocusExample = () => {
  label="Button"
  style={{ width: "100%", justifyContent: "center" }}
  />
+ </>
+ );
+ const contentClassName = sprinkles({
+ padding: "md",
+ display: "flex",
+ gap: "xl",
+ flexDirection: "column",
+ });
+
+ const popover = (
+ <Popover type="dialog">
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ shouldContainFocus={shouldContainFocus}
+ isNonModal={!shouldContainFocus}
+ >
+ {shouldContainFocus ? (
+ <Dialog
+ size="content"
+ className={contentClassName}
+ style={{ width: 200 }}
+ >
+ {content}
  </Dialog>
+ ) : (
+ // No Dialog: useDialog opts the overlay into focus containment,
+ // which disables the Tab-out restore path.
+ <Box className={contentClassName} style={{ width: 200 }}>
+ {content}
+ </Box>
+ )}
  </PopoverContent>
  </Popover>
  );
+
+ // The contained variant is the \`ContainedFocus\` story: a wrapper or sibling
+ // here rebaselines its visual snapshot.
+ if (shouldContainFocus) {
+ return popover;
+ }
+
+ return (
+ <Box display="flex" flexDirection="column" gap="lg" alignItems="flex-start">
+ {popover}
+ <ActionButton label="After" />
+ </Box>
+ );
 };
 
 export const PopoverWithScrollableViewportExample: React.FC<{
@@ -18315,18 +18854,20 @@ function App() {
 }
 \`\`\`
 
-We can group items into sections by passing the \`items\` prop an array of objects that contain a \`type\` property with a value of \`section\`. The \`children\` property of the section object should be an array of options. The \`id\` property of the section object should be unique.
+We can group items into sections by passing the \`items\` prop an array of section objects. A section is any item with both a \`title\` and a \`children\` array of options \u2014 items missing either one are treated as plain options. The \`id\` of each section must be unique.
+
+Sections are visually separated by a divider above every section but the first.
 
 \`\`\`jsx
 const itemsWithSections = [
  {
  id: "solid",
- type: "section",
+ title: "Solid",
  children: items,
  },
  {
  id: "dashed",
- type: "section",
+ title: "Dashed",
  children: [
  {
  id: "ellipse-dashed",
@@ -18350,6 +18891,18 @@ const itemsWithSections = [
 <Select items={itemsWithSections} label="Label" />;
 \`\`\`
 
+By default each section's \`title\` is used only as the group's accessible name. Set \`showSectionHeader\` to render it as a visible heading above the section's options. This works the same way when the list is virtualized with \`Virtualizer\`.
+
+<a href="?path=/story/core-forms-select--with-section-headers">View story</a>
+
+\`\`\`jsx
+<Select
+ items={itemsWithSections}
+ showSectionHeader={true}
+ aria-label="Choose an item"
+/>
+\`\`\`
+
 The \`Select\` component supports selecting multiple options by setting the \`selectionMode\` prop to \`"multiple"\`. When in multiselect mode, selected items are displayed as removable tags in the button, the popover stays open after selection, and checkboxes are shown instead of checkmarks.
 
 \`\`\`jsx
@@ -18553,14 +19106,16 @@ import { Virtualizer, ListLayout } from "@baseline-ui/core";
 \`\`\`
 
 | Key | Function |
-| ----------- | ------------------------------------------------------------------------------------ |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| \`Tab\` | Moves focus to and from the trigger. The popup itself is not a tab stop |
 | \`Space\` | Opens the listbox popup or toggles selection of the focused item in multiselect mode |
 | \`Enter\` | Opens the listbox popup or selects the focused item if the popup is open |
 | \`Escape\` | Closes the listbox popup |
 | \`ArrowDown\` | Opens the listbox popup and focuses the first item if no item is focused |
 | \`ArrowUp\` | Opens the listbox popup and focuses the last item if no item is focused |
-| \`Home\` | focuses the first item |
-| \`End\` | focuses the last item |
+| \`Home\` | Focuses the first item |
+| \`End\` | Focuses the last item |
+| Printable characters | Focuses the first item matching the typed characters |
 
 **Note:** In multiselect mode (\`selectionMode="multiple"\`), the \`Space\` key toggles selection of the focused item, and the popover remains open after selection.
 
@@ -18590,6 +19145,8 @@ The \`renderTrigger\` prop allows you to completely replace the default trigger
 | \`.BaselineUI-Select-Label\` | Label element |
 | \`.BaselineUI-Select-Popover\` | Popover container |
 | \`.BaselineUI-Select-SearchInput\` | Search input (when wrapped with \`Autocomplete\`) |
+| \`.BaselineUI-ListBox\` | Listbox inside the popover |
+| \`.BaselineUI-ListBox-Section\` | A section within the listbox |
 | \`[data-disabled]\` | Applied when \`isDisabled\` is true |
 | \`[data-readonly]\` | Applied when \`isReadOnly\` is true |
 | \`[data-focused]\` | Applied when the trigger is focused |
@@ -18598,6 +19155,7 @@ The \`renderTrigger\` prop allows you to completely replace the default trigger
 | \`[data-pressed]\` | Applied when the trigger is pressed |
 | \`[data-open]\` | Applied when the popover is open |
 
+* **ComboBox** \u2014 Use this instead when users should be able to type directly into the trigger to filter or enter a value
 * **IconSelect** \u2014 Select variant with an icon trigger instead of a text button
 * **ButtonSelect** \u2014 Select variant styled as a button
 * **ListBox** \u2014 Standalone listbox without the trigger/popover wrapper
@@ -18740,125 +19298,125 @@ hideSelectAll?: boolean
  */
 hideClear?: boolean
 }`,stories:{usage:[{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-label",name:"WithLabel",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-label",name:"WithLabel",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-description",name:"WithDescription",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-description",name:"WithDescription",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-error",name:"WithError",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-error",name:"WithError",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-error-and-error-message",name:"WithErrorAndErrorMessage",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-error-and-error-message",name:"WithErrorAndErrorMessage",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-warning",name:"WithWarning",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-warning",name:"WithWarning",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-warning-and-warning-message",name:"WithWarningAndWarningMessage",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-warning-and-warning-message",name:"WithWarningAndWarningMessage",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--ghost",name:"Ghost",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--ghost",name:"Ghost",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-disabled",name:"WithDisabled",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-disabled",name:"WithDisabled",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-disabled-items",name:"WithDisabledItems",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-disabled-items",name:"WithDisabledItems",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-sections",name:"WithSections",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-sections",name:"WithSections",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-default-open",name:"WithDefaultOpen",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-default-open",name:"WithDefaultOpen",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-controlled-open",name:"WithControlledOpen",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-controlled-open",name:"WithControlledOpen",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-label-at-start",name:"WithLabelAtStart",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-label-at-start",name:"WithLabelAtStart",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--scrollable",name:"Scrollable",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--scrollable",name:"Scrollable",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--long-list",name:"LongList",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--long-list",name:"LongList",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-custom-trigger",name:"WithCustomTrigger",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
-  29 | type Story = StoryObj<typeof meta>;
-  30 |
-> 31 | export {
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--with-custom-trigger",name:"WithCustomTrigger",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+  32 | type Story = StoryObj<typeof meta>;
+  33 |
+> 34 | export {
      | ^
-  32 |   Basic,
-  33 |   WithLabel,
-  34 |   WithDescription,`}},{id:"core-forms-select-multiselect--read-only",name:"Read Only",snippet:`const ReadOnly = () => <Select
+  35 |   Basic,
+  36 |   WithLabel,
+  37 |   WithDescription,`}},{id:"core-forms-select-multiselect--read-only",name:"Read Only",snippet:`const ReadOnly = () => <Select
     aria-label="Choose Stroke Style"
     items={items}
     placeholder="Choose Stroke Style"
@@ -18917,7 +19475,29 @@ hideClear?: boolean
     aria-label="Choose Stroke Style"
     items={items}
     placeholder="Choose Stroke Style"
-    selectionMode="multiple" />;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
+    selectionMode="multiple" />;`},{id:"core-forms-select-multiselect--with-error-and-tags",name:"With Error And Tags",snippet:`const WithErrorAndTags = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    selectionMode="multiple"
+    label="Label"
+    validationState="error"
+    errorMessage="Pick fewer shapes"
+    defaultValue={["ellipse", "square", "polygon"]}
+    maxCount={3} />;`,description:"Tags competing with the status icon for trigger width."},{id:"core-forms-select-multiselect--long-labels-as-tags",name:"Long Labels As Tags",snippet:`const LongLabelsAsTags = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    selectionMode="multiple"
+    defaultValue={["long1", "long2"]} />;`},{id:"core-forms-select-multiselect--read-only-with-tags-open",name:"Read Only With Tags Open",snippet:`const ReadOnlyWithTagsOpen = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    selectionMode="multiple"
+    label="Label"
+    isReadOnly
+    value={["ellipse", "square"]}
+    defaultOpen />;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
 import React from "react";
 import { useFilter } from "react-aria";
 import { Autocomplete, Virtualizer } from "react-aria-components";
@@ -18926,11 +19506,16 @@ import { useListData } from "react-stately";
 import { ActionButton } from "../../ActionButton";
 import { items } from "../../ListBox/__tests__/testComponents";
 import { virtualizeAutocompleteItems } from "../../Menu/__tests__/data";
-import { VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS } from "../../Virtualizer";
+import { itemsWithSectionTitles } from "../../UNSAFE_ListBox/__tests__/testComponents";
+import {
+ ListLayout,
+ VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
+} from "../../Virtualizer";
 import { IconSelect } from "../IconSelect";
 import { Select } from "../Select";
 
 import type { IconSelectProps } from "../Select.types";
+import type { Key } from "@react-types/shared";
 
 export const SelectExample: React.FC<
  Omit<React.ComponentProps<typeof Select>, "items">
@@ -18938,13 +19523,28 @@ export const SelectExample: React.FC<
  return (
  <Select
  placeholder="Choose an item"
- {...args}
  optionClassName={(item) => item.label}
+ {...args}
  items={items}
  />
  );
 };
 
+// "Apples" is a substring of "Pineapples" \u2014 exercises exact string matching
+// in the tester's option() locator.
+const substringItems = [
+ { id: "apples", label: "Apples" },
+ { id: "pineapples", label: "Pineapples" },
+];
+
+export const SelectSubstringLabelsExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select placeholder="Choose an item" {...args} items={substringItems} />
+ );
+};
+
 export const SelectGetTargetRectExample: React.FC = () => {
  const [called, setCalled] = React.useState(false);
 
@@ -19001,90 +19601,228 @@ export const SelectCustomTriggerExample: React.FC<
 };
 
 export const IconSelectExample: React.FC<
- Omit<IconSelectProps, "items" | "icon" | "aria-label">
+ Omit<IconSelectProps, "items" | "aria-label">
 > = (args) => {
  return (
  <IconSelect
  placeholder="Choose an item"
+ icon={EllipseIcon}
  {...args}
  items={items}
- icon={EllipseIcon}
  aria-label="Aria Label"
  />
  );
 };
 
-export const SelectWithVirtualizeAutocompleteExample: React.FC<
+export const VirtualSelectWithSectionHeadersExample: React.FC<
  Omit<React.ComponentProps<typeof Select>, "items">
 > = (args) => {
- const list = useListData({
- initialItems: virtualizeAutocompleteItems,
- });
- const { contains } = useFilter({ sensitivity: "base" });
- const filter = (textValue, inputValue) => contains(textValue, inputValue);
  return (
- <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>
- <Autocomplete filter={filter}>
+ <Virtualizer
+ layout={ListLayout}
+ layoutOptions={{
+ rowHeight: 36,
+ headingHeight: 40,
+ }}
+ >
  <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ showSectionHeader={true}
  {...args}
- items={list.items}
- placeholder="Select multiple options"
- maxHeight={300}
- style={{
- width: 400,
- }}
+ items={itemsWithSectionTitles}
+ defaultOpen={true}
+ maxHeight={400}
  />
- </Autocomplete>
  </Virtualizer>
  );
-};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"`Separator` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.",documentation:`\`Separator\` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.
-
-\`\`\`jsx
-import { Separator } from "../../utils";
-
-<Separator />;
-\`\`\`
-
-By default, the separator is horizontal.
-
-\`\`\`jsx
-import { Separator } from "../../utils";
-
-<div>
- Section 1
- <Separator />
- Section 2
-</div>;
-\`\`\`
-
-The \`orientation\` prop can be used to change the orientation of the separator.
-
-\`\`\`jsx
-import { Separator } from "../../utils";
+};
 
-<div>
- Section 1
- <Separator orientation="vertical" variant="secondary" />
- Section 2
-</div>;
-\`\`\`
+export const SelectWithSectionHeadersExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ showSectionHeader={true}
+ {...args}
+ items={itemsWithSectionTitles}
+ defaultOpen={true}
+ />
+ );
+};
 
-| Selector | Description |
-| ------------------ | ----------------------------------------------------------------------- |
-| \\[data-orientation] | The orientation of the separator. It can be \`horizontal\` or \`vertical\`. |`,props:`interface SeparatorProps {
-/**
- * The orientation of the separator.
- * 
- * @default 'horizontal'
- */
-orientation?: "horizontal" | "vertical"
 /**
- * The HTML element type that will be used to render the separator.
+ * Owns \`isOpen\` so the controlled-open contract can be driven from outside the
+ * Select, with a sibling readout of the current state.
  */
-elementType?: string
-/**
- * @deprecated Do not use in new components. This is a legacy block
- * identifier; new components should exclude it via
+export const ControlledOpenSelectExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ return (
+ <>
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ {...args}
+ items={items}
+ isOpen={isOpen}
+ onOpenChange={setIsOpen}
+ />
+ <button
+ data-testid="open-externally"
+ onClick={() => {
+ setIsOpen(true);
+ }}
+ >
+ Open
+ </button>
+ <span data-testid="open-state">{String(isOpen)}</span>
+ </>
+ );
+};
+
+/**
+ * Custom trigger that renders the multi-select half of the \`renderTrigger\`
+ * payload \u2014 \`selectionMode\`, \`maxCount\` and \`onRemove\` \u2014 which the default
+ * \`SelectButton\` otherwise keeps to itself.
+ */
+export const MultiSelectCustomTriggerExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select
+ aria-label="Choose an item"
+ selectionMode="multiple"
+ {...args}
+ items={items}
+ renderTrigger={({
+ buttonProps,
+ ref,
+ selectedValue,
+ selectionMode,
+ onRemove,
+ maxCount,
+ }) => (
+ <div>
+ <ActionButton
+ {...buttonProps}
+ ref={ref}
+ label={\`\${selectionMode}|\${maxCount}|\${selectedValue?.length ?? 0}\`}
+ variant="popover"
+ />
+ <button
+ data-testid="remove-first"
+ onClick={() => {
+ const first = selectedValue?.[0];
+ if (first) {
+ onRemove?.(new Set([first.id]));
+ }
+ }}
+ >
+ Remove first
+ </button>
+ </div>
+ )}
+ />
+ );
+};
+
+export const SelectWithVirtualizeAutocompleteExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ const list = useListData({
+ initialItems: virtualizeAutocompleteItems,
+ });
+ const { contains } = useFilter({ sensitivity: "base" });
+ const filter = (textValue, inputValue) => contains(textValue, inputValue);
+ return (
+ <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>
+ <Autocomplete filter={filter}>
+ <Select
+ {...args}
+ items={list.items}
+ placeholder="Select multiple options"
+ maxHeight={300}
+ style={{
+ width: 400,
+ }}
+ />
+ </Autocomplete>
+ </Virtualizer>
+ );
+};
+
+/**
+ * \`optionClassName\` reads component state, and \`items\` is module-level so React Aria's
+ * per-item element cache applies. Pinned open so the state change comes from selecting an
+ * option rather than from an outside press the popover would swallow.
+ */
+export const CountingSelectExample: React.FC = () => {
+ const [selected, setSelected] = React.useState<Key | null>(null);
+
+ return (
+ <Select
+ aria-label="Counting select"
+ items={items}
+ isOpen={true}
+ optionClassName={(item) =>
+ item.id === selected ? "option-picked" : "option-plain"
+ }
+ onSelectionChange={setSelected}
+ />
+ );
+};`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"`Separator` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.",documentation:`\`Separator\` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.
+
+\`\`\`jsx
+import { Separator } from "../../utils";
+
+<Separator />;
+\`\`\`
+
+By default, the separator is horizontal.
+
+\`\`\`jsx
+import { Separator } from "../../utils";
+
+<div>
+ Section 1
+ <Separator />
+ Section 2
+</div>;
+\`\`\`
+
+The \`orientation\` prop can be used to change the orientation of the separator.
+
+\`\`\`jsx
+import { Separator } from "../../utils";
+
+<div>
+ Section 1
+ <Separator orientation="vertical" variant="secondary" />
+ Section 2
+</div>;
+\`\`\`
+
+| Selector | Description |
+| ------------------ | ----------------------------------------------------------------------- |
+| \\[data-orientation] | The orientation of the separator. It can be \`horizontal\` or \`vertical\`. |`,props:`interface SeparatorProps {
+/**
+ * The orientation of the separator.
+ * 
+ * @default 'horizontal'
+ */
+orientation?: "horizontal" | "vertical"
+/**
+ * The HTML element type that will be used to render the separator.
+ */
+elementType?: string
+/**
+ * @deprecated Do not use in new components. This is a legacy block
+ * identifier; new components should exclude it via
  * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
  * Retained on existing components for backward compatibility.
  * 
@@ -23293,7 +24031,7 @@ export const TaggedPaginationExample: React.FC<
  {...props}
  />
  );
-};`},similarTo:[],figmaUrl:null},Text:{id:"core-content-text",breadcrumb:"Core/Content/Text",importStatement:'import { Text, VariantViewer } from "@baseline-ui/core";',description:"`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.",documentation:'`Text` is a typography primitive that renders strings with consistent type, size, and weight from the design system. Use it whenever you need to display textual content so that headings, body copy, values, and helper text stay visually aligned.\n\n```jsx\nimport { Text } from "@storybook/addon-docs/blocks";\n\n<Text type="subtitle" size="sm">\n Text\n</Text>;\n```\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `value` and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`. You can see all the variants [here](/story/core-text--variants)',props:`interface TextProps {
+};`},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
@@ -23349,6 +24087,13 @@ children: React.ReactNode
  * @default "span"
  */
 elementType?: React.ElementType
+/**
+ * A slot name that wires this text into a parent container's context \u2014
+ * e.g. \`slot="description"\` or \`slot="label"\` \u2014 so the container can
+ * associate it via \`aria-describedby\` / \`aria-labelledby\` without manually
+ * threading an \`id\`. Pass \`null\` to opt out of an ambient slot.
+ */
+slot?: string | null
 }`,stories:{usage:[{id:"core-content-text--basic",name:"Basic",snippet:"const Basic = () => <Text>Sample Text</Text>;"},{id:"core-content-text--variants",name:"Variants",snippet:`const Variants = (args) => (
   <VariantViewer<React.ComponentProps<typeof Text>>
     header={["Small", "Medium", "Large"]}
@@ -23383,8 +24128,24 @@ elementType?: React.ElementType
     }}
     defaultProps={args}
   />
-);`}],implementation:`import React from "react";
+);`},{id:"core-content-text--slots",name:"Slots",snippet:`const Slots = () => (
+  <TextField>
+    {/* The raw React Aria Label carries no Baseline styling, so it inherits
+        the storybook default (black) text and fails contrast against the dark
+        theme background. Give it the themed foreground; the slot wiring below
+        is the point of this story. */}
+    <Label style={{ color: themeVars.color.text.primary }}>
+      Display name
+    </Label>
+    <Input />
+    <Text slot="description" type="helper" size="sm">
+      This is shown to other members of your workspace.
+    </Text>
+  </TextField>
+);`,description:"`Text` opts into a container's context when given a `slot`. Here a raw React Aria `TextField` provides a `TextContext`, and `<Text slot=\"description\">` picks up the id the field exposes for that slot \u2014 wiring itself as the field's `aria-describedby` without a manually threaded `id`."}],implementation:`import React from "react";
+import { TextContext } from "react-aria-components";
 
+import { UNSAFE_ListBox } from "../../UNSAFE_ListBox";
 import { Text } from "../Text";
 
 export function TextWithRef() {
@@ -23405,65 +24166,61 @@ export function TextWithRef() {
  <span data-testid="tag-name">{tag}</span>
  </>
  );
+}
+
+const SLOTTED_TEXT_CONTEXT = {
+ slots: {
+ description: { id: "provided-description-id" },
+ },
+};
+
+export function TextInSlotContext() {
+ return (
+ <TextContext.Provider value={SLOTTED_TEXT_CONTEXT}>
+ <Text slot="description" data-block-id="slotted">
+ Description
+ </Text>
+ </TextContext.Provider>
+ );
+}
+
+export function TextBareInSlotContext() {
+ // A slotless <Text> inside a slotted context that has no default slot must
+ // render (opt out) rather than throw "A slot prop is required".
+ return (
+ <TextContext.Provider value={SLOTTED_TEXT_CONTEXT}>
+ <Text id="bare-id" data-testid="bare">
+ Description
+ </Text>
+ </TextContext.Provider>
+ );
+}
+
+export function TextInListBoxRenderOption() {
+ // A bare <Text> in renderOption lands inside RAC's ListBoxItem, which provides
+ // a TextContext whose default slot maps to the option's generated label id.
+ // A slotless <Text> must opt out (no inherited id) rather than silently adopt
+ // that label id \u2014 otherwise two Texts in one option collide on the same id.
+ return (
+ <UNSAFE_ListBox
+ aria-label="Options"
+ items={[{ id: "opt-1", label: "Option 1" }]}
+ renderOption={(item) => (
+ <Text data-testid="render-option">{item.label}</Text>
+ )}
+ />
+ );
+}
+
+export function TextOptOutOfSlotContext() {
+ return (
+ <TextContext.Provider value={SLOTTED_TEXT_CONTEXT}>
+ <Text slot={null} id="own-id" data-block-id="opt-out">
+ Description
+ </Text>
+ </TextContext.Provider>
+ );
 }`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.",documentation:'`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.\n\n* This component is built on top of the `input` element (or `textarea` in multi-line mode).\n* It provides visual and ARIA labels to the input element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to assistive technology via ARIA.\n* It supports description and other state messages which are linked to the input element via ARIA.\n\n```jsx\nimport { TextInput } from "@baseline-ui/core";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nFor numeric entry use `NumberInput`, for search fields use `SearchInput`, and for color values use `ColorInput`.\n\n`TextInput` supports two variants: `primary` (default) and `ghost`. Set the variant with the `variant` prop.\n\n```jsx\n<TextInput placeholder="Placeholder" variant="primary" />\n<TextInput placeholder="Placeholder" variant="ghost" />\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\n<TextInput label="Label" placeholder="Placeholder" />\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\n<TextInput\n label="Label"\n labelPosition="start"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\n<TextInput label="Label" description="Description" placeholder="Placeholder" />\n```\n\nYou can put the `TextInput` into an error state by setting `validationState` to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error; passing `errorMessage` on its own is enough to render the error\nstate. When `description` is also present, it takes precedence and the error\nmessage is not shown.\n\n```jsx\n<TextInput\n label="Label"\n validationState="error"\n errorMessage="Error message"\n placeholder="Placeholder"\n/>\n```\n\nYou can put the `TextInput` into a warning state by setting `validationState` to\n`"warning"`. You can also pass `warningMessage` to provide additional\ninformation about the warning.\n\n```jsx\n<TextInput\n label="Label"\n validationState="warning"\n warningMessage="Warning message"\n placeholder="Placeholder"\n/>\n```\n\nYou can make the `TextInput` read only by passing an `isReadOnly` prop.\n\n```jsx\n<TextInput label="Label" isReadOnly defaultValue="Read-only value" />\n```\n\nYou can disable the `TextInput` by passing an `isDisabled` prop.\n\n```jsx\n<TextInput\n label="Label"\n isDisabled\n defaultValue="Disabled value"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can control the `TextInput` by passing a `value` prop together with an\n`onChange` prop. `onChange` is called with the new string value (not a DOM\nevent).\n\n```jsx\nconst [value, setValue] = useState("Controlled value");\n\n<TextInput\n label="Label"\n value={value}\n onChange={(value) => setValue(value)}\n placeholder="Placeholder"\n/>;\n```\n\nSet `isMultiLine` to render the field as a resizable `<textarea>` instead of a\nsingle-line `<input>`. The field starts at a minimum height and can be dragged\nto resize in both directions, except when it is read only or disabled. All\nstates (error, warning, disabled, read only, ghost) are supported, just like the\nsingle-line input.\n\n```jsx\n<TextInput\n label="Label"\n isMultiLine\n defaultValue="Lorem ipsum"\n description="Helper text"\n/>\n```\n\nUse the `rows` prop to set the initial number of visible text rows.\n\n```jsx\n<TextInput label="Label" isMultiLine rows={5} placeholder="Placeholder" />\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying input element.\n\n```jsx\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>\n```\n\nThese selectors are applied to the underlying `<input>` / `<textarea>` element. The root wrapper is also exposed via the `BaselineUI-TextInput` class and the field element via the `BaselineUI-TextInput-Input` class.\n\n| Selector | Description |\n| ------------------------- | ------------------------------------------------------------------- |\n| `[data-readonly]` | Whether the input is read only. |\n| `[data-disabled]` | Whether the input is disabled. |\n| `[data-validation-state]` | The validation state of the input (`error`, `warning`, or `valid`). |\n| `[data-focused]` | Whether the input is focused, either via a mouse or keyboard. |\n| `[data-focus-visible]` | Whether the input is keyboard focused. |\n\n| Key | Function |\n| ---------------- | ---------------------------------------------------------------------------- |\n| <kbd>Enter</kbd> | Submits the form in single-line mode; inserts a new line in multi-line mode. |',props:`interface TextInputProps {
-/**
- * @deprecated Do not use in new components. This is a legacy block
- * identifier; new components should exclude it via
- * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
- * Retained on existing components for backward compatibility.
- * 
- * The unique identifier for the block. This is used to identify the block in
- * the DOM and in the block map. It is added as a data attribute
- * \`data-block-id\` to the root element of the block if a DOM node is
- * rendered.
- */
-data-block-id?: string
-/**
- * @deprecated Do not use in new components. This is a legacy block group
- * marker; new components should exclude it via
- * \`Omit<StylingProps, keyof BlockProps>\` (see \`StatusCard\` / \`Code\`).
- * Retained on existing components for backward compatibility.
- * 
- * Represents a data block group. This is similar to \`data-block-id\` but it
- * doesn't have to be unique just like \`class\`. This is used to group blocks
- * together in the DOM and in the block map. It is added as a data attribute
- * \`data-block-class\` to the root element of the block if a DOM node is
- * rendered.
- */
-data-block-class?: string
-/**
- * The className applied to the root element of the component.
- */
-className?: string
-/**
- * The style applied to the root element of the component.
- */
-style?: React.CSSProperties
-/**
- * The description to display below the input.
- */
-description?: string
-/**
- * The error message to display when the input is in an error state.
- */
-errorMessage?: string
-/**
- * The warning message to display when the input is in a warning state.
- */
-warningMessage?: string
-/**
- * The style object to apply to the input element
- */
-inputStyle?: React.CSSProperties
-/**
- * The class name to apply to the input element
- */
-inputClassName?: string
-/**
- * The number of visible text rows for the multi-line input. Only applies when
- * \`isMultiLine\` is set.
- */
-rows?: number
 variant?: any
 labelPosition?: any
 isMultiLine?: any
@@ -26806,6 +27563,7 @@ export const VirtualizedTreeViewWithRenameExample: React.FC<
     VirtualizedScrollIntoViewExample,
     VirtualListBoxGridLayoutExample,
     VirtualListBoxListLayoutExample,
+    VirtualListBoxWithSectionHeadersExample,
     VirtualListBoxWithSectionsExample,
 } from "@baseline-ui/core";`,description:"`UNSAFE_ListBox` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.",documentation:`\`UNSAFE_ListBox\` is a low-level selectable list with custom option rendering, grouped sections, drag-and-drop reordering, and virtualization. Use it to build bespoke list UIs \u2014 such as font pickers, layer panels, or large catalogs \u2014 where the standard list components are too constrained.
 
@@ -26902,6 +27660,34 @@ const fonts = [
 />;
 \`\`\`
 
+Rendered options and sections are cached per item object. Reading component state from
+\`renderOption\`, \`optionClassName\`, \`optionStyle\`, \`renderSectionHeader\`, \`sectionClassName\`
+or \`sectionStyle\` works \u2014 the options re-render when the state changes \u2014 and toggling
+\`showSectionHeader\` or \`withSectionHeaderPadding\` does too.
+
+The cost only applies when \`items\` is memoized, since an inline \`items={data.map(...)}\`
+produces new item objects every render and the cache never applies in the first place. With
+stable items, any of these props changing identity rebuilds every option and section, so
+memoize the ones that don't depend on state \u2014 including object literals passed to
+\`optionStyle\`, which are new on every render.
+
+\`\`\`jsx
+const [highlighted, setHighlighted] = useState(null);
+
+// Rebuilds only when the highlight moves; \`fonts\` is module-level, so the cache applies.
+const optionStyle = useCallback(
+ (item) => ({ fontWeight: item.id === highlighted ? "bold" : "normal" }),
+ [highlighted],
+);
+
+<UNSAFE_ListBox
+ items={fonts}
+ aria-label="Fonts"
+ optionStyle={optionStyle}
+ onAction={setHighlighted}
+/>;
+\`\`\`
+
 \`\`\`jsx
 <UNSAFE_ListBox
  items={items}
@@ -26999,6 +27785,10 @@ style?: React.CSSProperties
 /**
  * The custom render function for the listbox options.
  * 
+ * Reading component state here works, at the cost of rebuilding every cached option and
+ * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
+ * for when that cost applies.
+ * 
  * @param item ListOption
  * @param options ListBoxItemRenderProps
  */
@@ -27008,6 +27798,9 @@ renderOption?: (
 ) => React.ReactNode
 /**
  * The CSS class name for the option.
+ * 
+ * Compared by identity, so an inline function or an unmemoized value rebuilds every
+ * cached option and section on each render. A plain string is compared by value.
  */
 optionClassName?: | string
 | ((
@@ -27016,6 +27809,9 @@ optionClassName?: | string
   ) => string | undefined)
 /**
  * The style of the option.
+ * 
+ * Compared by identity, so an inline function or object literal rebuilds every cached
+ * option and section on each render \u2014 memoize it to avoid that.
  */
 optionStyle?: | React.CSSProperties
 | ((
@@ -27025,15 +27821,25 @@ optionStyle?: | React.CSSProperties
 /**
  * The custom render function for the listbox sections.
  * 
+ * Reading component state here works, at the cost of rebuilding every cached option and
+ * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
+ * for when that cost applies.
+ * 
  * @param section ListSection
  */
 renderSectionHeader?: (section: ListSection) => React.ReactNode
 /**
  * The CSS class name for the section.
+ * 
+ * Compared by identity, so an inline function or an unmemoized value rebuilds every
+ * cached option and section on each render. A plain string is compared by value.
  */
 sectionClassName?: string | ((section: ListSection) => string | undefined)
 /**
  * The style of the section.
+ * 
+ * Compared by identity, so an inline function or object literal rebuilds every cached
+ * option and section on each render \u2014 memoize it to avoid that.
  */
 sectionStyle?: | React.CSSProperties
 | ((section: ListSection) => React.CSSProperties | undefined)
@@ -27069,6 +27875,11 @@ withSectionHeaderPadding?: boolean
  * 
  * type ListItem = ListOption | ListSection;
  * \`\`\`
+ * 
+ * Rendered options and sections are cached per item object. Building this array inline
+ * (\`items={data.map(...)}\`) produces new item objects every render, so nothing is ever
+ * reused and the customisation props cost nothing; memoize it and the cache applies,
+ * which is when their identity starts to matter.
  */
 items?: ListItem[]
 /**
@@ -27155,7 +27966,7 @@ listBoxHandle?: React.RefObject<ListHandle>
     items={items}
     aria-label="List box"
     selectionMode="multiple"
-    defaultSelectedKeys={["item-0"]} />;`},{id:"core-collections-unsafe-listbox--virtualized-horizontal",name:"Virtualized Horizontal",snippet:'const VirtualizedHorizontal = () => <VirtualListBoxGridLayoutExample items={items} aria-label="List box" selectionMode="multiple" />;'},{id:"core-collections-unsafe-listbox--virtualized-with-sections",name:"Virtualized With Sections",snippet:'const VirtualizedWithSections = () => <VirtualListBoxWithSectionsExample items={items} aria-label="List box" selectionMode="single" />;'},{id:"core-collections-unsafe-listbox--virtualized-scroll-into-view",name:"Virtualized Scroll Into View",snippet:"const VirtualizedScrollIntoView = () => <VirtualizedScrollIntoViewExample />;"}],implementation:`import { XIcon } from "@baseline-ui/icons/16";
+    defaultSelectedKeys={["item-0"]} />;`},{id:"core-collections-unsafe-listbox--virtualized-horizontal",name:"Virtualized Horizontal",snippet:'const VirtualizedHorizontal = () => <VirtualListBoxGridLayoutExample items={items} aria-label="List box" selectionMode="multiple" />;'},{id:"core-collections-unsafe-listbox--virtualized-with-sections",name:"Virtualized With Sections",snippet:'const VirtualizedWithSections = () => <VirtualListBoxWithSectionsExample items={items} aria-label="List box" selectionMode="single" />;'},{id:"core-collections-unsafe-listbox--virtualized-with-section-separators",name:"Virtualized With Section Separators",snippet:'const VirtualizedWithSectionSeparators = () => <VirtualListBoxWithSectionHeadersExample items={items} aria-label="List box" selectionMode="single" />;'},{id:"core-collections-unsafe-listbox--virtualized-scroll-into-view",name:"Virtualized Scroll Into View",snippet:"const VirtualizedScrollIntoView = () => <VirtualizedScrollIntoViewExample />;"}],implementation:`import { XIcon } from "@baseline-ui/icons/16";
 import {
  EllipseDashedIcon,
  EllipseIcon,
@@ -27185,7 +27996,10 @@ import {
 import { useDragAndDrop } from "../hooks/useDragAndDrop";
 import { UNSAFE_ListBox as ListBox } from "../ListBox";
 
-import type { ListItem } from "../../shared/types/List";
+import type {
+ ListItem,
+ ListOption as ListOptionType,
+} from "../../shared/types/List";
 import type { ListHandle } from "../ListBox.types";
 import type { DroppableCollectionReorderEvent } from "@react-types/shared";
 
@@ -27762,16 +28576,85 @@ export const VirtualListBoxWithSectionsExample: React.FC<
  );
 };
 
-export const VirtualizedScrollIntoViewExample: React.FC = () => {
- const listBoxHandle = React.useRef<ListHandle>(null);
- const items = Array.from({ length: 10_000 }).map((_, i) => ({
- id: \`item-\${i}\`,
- label: \`Item \${i}\`,
- }));
-
+export const VirtualListBoxWithSectionHeadersExample: React.FC<
+ Omit<React.ComponentProps<typeof ListBox>, "items">
+> = (args) => {
  return (
- <Box display="flex" flexDirection="column" gap="md" style={{ width: 300 }}>
- <Box display="flex" flexDirection="column" gap="sm">
+ <Virtualizer
+ layout={ListLayout}
+ layoutOptions={{
+ rowHeight: 36,
+ headingHeight: 40,
+ }}
+ >
+ <ListBox
+ {...args}
+ items={itemsWithSectionTitles}
+ showSectionHeader={true}
+ style={{
+ height: 400,
+ width: 300,
+ overflow: "auto",
+ }}
+ aria-label="Virtualized list box with section headers"
+ />
+ </Virtualizer>
+ );
+};
+
+const leadingSection = {
+ id: "leading",
+ title: "Leading",
+ children: [{ id: "leading-item", label: "Leading item" }],
+} as ListItem;
+
+export const VirtualListBoxWithPrependableSectionExample: React.FC = () => {
+ const [showLeadingSection, setShowLeadingSection] = React.useState(false);
+
+ return (
+ <>
+ <ActionButton
+ onPress={() => {
+ setShowLeadingSection(true);
+ }}
+ label="Prepend section"
+ />
+ <Virtualizer
+ layout={ListLayout}
+ layoutOptions={{
+ rowHeight: 36,
+ headingHeight: 40,
+ }}
+ >
+ <ListBox
+ items={
+ showLeadingSection
+ ? [leadingSection, ...itemsWithSectionTitles]
+ : itemsWithSectionTitles
+ }
+ showSectionHeader={true}
+ style={{
+ height: 400,
+ width: 300,
+ overflow: "auto",
+ }}
+ aria-label="Virtualized list box with a prependable section"
+ />
+ </Virtualizer>
+ </>
+ );
+};
+
+export const VirtualizedScrollIntoViewExample: React.FC = () => {
+ const listBoxHandle = React.useRef<ListHandle>(null);
+ const items = Array.from({ length: 10_000 }).map((_, i) => ({
+ id: \`item-\${i}\`,
+ label: \`Item \${i}\`,
+ }));
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md" style={{ width: 300 }}>
+ <Box display="flex" flexDirection="column" gap="sm">
  <Text type="body" size="sm">
  Scroll to items in a virtualized list (10,000 items). Items that
  aren&apos;t currently rendered will be scrolled into view.
@@ -27819,7 +28702,110 @@ export const VirtualizedScrollIntoViewExample: React.FC = () => {
  </Virtualizer>
  </Box>
  );
-};`},similarTo:[],figmaUrl:null},Virtualizer:{id:"core-collections-virtualizer",breadcrumb:"Core/Collections/Virtualizer",importStatement:'import { Virtualizer } from "react-aria-components";',description:"`Virtualizer` renders large collections efficiently by keeping only the visible portion of the collection in the DOM. In baseline-ui it is typically paired with collection components such as `UNSAFE_ListBox`, `TreeView`, and `ImageGallery`.",documentation:`\`Virtualizer\` renders large collections efficiently by keeping only the visible portion of the collection in the DOM. In baseline-ui it is typically paired with collection components such as \`UNSAFE_ListBox\`, \`TreeView\`, and \`ImageGallery\`.
+};
+
+// Each example varies exactly one prop off \`count\` and keeps the rest at stable
+// module-level identity; varying several at once would let one invalidate the cache for
+// the others, hiding a missing \`dependencies\` entry.
+const stableRenderOption = (item: ListOptionType) => <span>{item.label}</span>;
+const stableOptionClassName = () => "option-stable";
+const stableOptionStyle = () => ({ marginBlockStart: "0px" });
+const stableSectionClassName = () => "section-stable";
+const stableSectionStyle = () => ({ marginBlockStart: "0px" });
+
+// Offset off the \`0px\` browser default so the pre-click assertion also proves the prop
+// reached the DOM, not just that it refreshed.
+const varyingMargin = (count: number) => ({
+ marginBlockStart: \`\${count + 2}px\`,
+});
+
+const CountingExample: React.FC<{
+ children: (count: number) => React.ReactNode;
+}> = ({ children }) => {
+ const [count, setCount] = React.useState(0);
+
+ return (
+ <>
+ <ActionButton
+ label="Increment"
+ onPress={() => {
+ setCount(count + 1);
+ }}
+ />
+ {children(count)}
+ </>
+ );
+};
+
+export const CountingOptionListBoxExample: React.FC<{
+ vary: "renderOption" | "optionClassName" | "optionStyle";
+ // Options inside a section render through a second, nested collection that inherits the
+ // root \`dependencies\` only via React Aria's collection context.
+ sectioned?: boolean;
+}> = ({ vary, sectioned = false }) => (
+ <CountingExample>
+ {(count) => (
+ <ListBox
+ items={sectioned ? itemsWithSectionTitles : items}
+ aria-label="Counting option list box"
+ renderOption={
+ vary === "renderOption"
+ ? (item) => <span>{\`\${item.label} count-\${count}\`}</span>
+ : stableRenderOption
+ }
+ optionClassName={
+ vary === "optionClassName"
+ ? () => \`option-count-\${count}\`
+ : stableOptionClassName
+ }
+ optionStyle={
+ vary === "optionStyle"
+ ? () => varyingMargin(count)
+ : stableOptionStyle
+ }
+ />
+ )}
+ </CountingExample>
+);
+
+export const CountingSectionListBoxExample: React.FC<{
+ vary:
+ | "renderSectionHeader"
+ | "sectionClassName"
+ | "sectionStyle"
+ | "showSectionHeader"
+ | "withSectionHeaderPadding";
+}> = ({ vary }) => (
+ <CountingExample>
+ {(count) => (
+ <ListBox
+ items={itemsWithSectionTitles}
+ aria-label="Counting section list box"
+ // \`withSectionHeaderPadding\` only reaches the DOM through the default header, so
+ // that variant must not supply a custom one.
+ showSectionHeader={vary === "showSectionHeader" ? count > 0 : true}
+ withSectionHeaderPadding={
+ vary === "withSectionHeaderPadding" ? count > 0 : false
+ }
+ renderSectionHeader={
+ vary === "renderSectionHeader"
+ ? (section) => \`\${section.title} count-\${count}\`
+ : undefined
+ }
+ sectionClassName={
+ vary === "sectionClassName"
+ ? () => \`section-count-\${count}\`
+ : stableSectionClassName
+ }
+ sectionStyle={
+ vary === "sectionStyle"
+ ? () => varyingMargin(count)
+ : stableSectionStyle
+ }
+ />
+ )}
+ </CountingExample>
+);`},similarTo:[],figmaUrl:null},Virtualizer:{id:"core-collections-virtualizer",breadcrumb:"Core/Collections/Virtualizer",importStatement:'import { Virtualizer } from "react-aria-components";',description:"`Virtualizer` renders large collections efficiently by keeping only the visible portion of the collection in the DOM. In baseline-ui it is typically paired with collection components such as `UNSAFE_ListBox`, `TreeView`, and `ImageGallery`.",documentation:`\`Virtualizer\` renders large collections efficiently by keeping only the visible portion of the collection in the DOM. In baseline-ui it is typically paired with collection components such as \`UNSAFE_ListBox\`, \`TreeView\`, and \`ImageGallery\`.
 
 * Efficient rendering for very large collections
 * Preset layout options for list boxes, tree views, and image galleries
@@ -30797,25 +31783,13 @@ export const PopoverDefaultOpenWithArrowExample = () => {
  );
 };
 
-export const PopoverContainedFocusExample = () => {
- return (
- <Popover type="dialog">
- <PopoverTrigger>
- <ActionButton label="Open" />
- </PopoverTrigger>
- <PopoverContent shouldContainFocus={true}>
- <Dialog
- size="content"
- className={sprinkles({
- padding: "md",
- display: "flex",
- gap: "xl",
- flexDirection: "column",
- })}
- style={{
- width: 200,
- }}
- >
+export const PopoverContainedFocusExample = ({
+ shouldContainFocus = true,
+}: {
+ shouldContainFocus?: boolean;
+}) => {
+ const content = (
+ <>
  <Text type="label">The focus is contained within the popover.</Text>
 
  <TextInput
@@ -30827,10 +31801,55 @@ export const PopoverContainedFocusExample = () => {
  label="Button"
  style={{ width: "100%", justifyContent: "center" }}
  />
+ </>
+ );
+ const contentClassName = sprinkles({
+ padding: "md",
+ display: "flex",
+ gap: "xl",
+ flexDirection: "column",
+ });
+
+ const popover = (
+ <Popover type="dialog">
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ shouldContainFocus={shouldContainFocus}
+ isNonModal={!shouldContainFocus}
+ >
+ {shouldContainFocus ? (
+ <Dialog
+ size="content"
+ className={contentClassName}
+ style={{ width: 200 }}
+ >
+ {content}
  </Dialog>
+ ) : (
+ // No Dialog: useDialog opts the overlay into focus containment,
+ // which disables the Tab-out restore path.
+ <Box className={contentClassName} style={{ width: 200 }}>
+ {content}
+ </Box>
+ )}
  </PopoverContent>
  </Popover>
  );
+
+ // The contained variant is the \`ContainedFocus\` story: a wrapper or sibling
+ // here rebaselines its visual snapshot.
+ if (shouldContainFocus) {
+ return popover;
+ }
+
+ return (
+ <Box display="flex" flexDirection="column" gap="lg" alignItems="flex-start">
+ {popover}
+ <ActionButton label="After" />
+ </Box>
+ );
 };
 
 export const PopoverWithScrollableViewportExample: React.FC<{
@@ -31957,25 +32976,13 @@ export const PopoverDefaultOpenWithArrowExample = () => {
  );
 };
 
-export const PopoverContainedFocusExample = () => {
- return (
- <Popover type="dialog">
- <PopoverTrigger>
- <ActionButton label="Open" />
- </PopoverTrigger>
- <PopoverContent shouldContainFocus={true}>
- <Dialog
- size="content"
- className={sprinkles({
- padding: "md",
- display: "flex",
- gap: "xl",
- flexDirection: "column",
- })}
- style={{
- width: 200,
- }}
- >
+export const PopoverContainedFocusExample = ({
+ shouldContainFocus = true,
+}: {
+ shouldContainFocus?: boolean;
+}) => {
+ const content = (
+ <>
  <Text type="label">The focus is contained within the popover.</Text>
 
  <TextInput
@@ -31987,10 +32994,55 @@ export const PopoverContainedFocusExample = () => {
  label="Button"
  style={{ width: "100%", justifyContent: "center" }}
  />
+ </>
+ );
+ const contentClassName = sprinkles({
+ padding: "md",
+ display: "flex",
+ gap: "xl",
+ flexDirection: "column",
+ });
+
+ const popover = (
+ <Popover type="dialog">
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ shouldContainFocus={shouldContainFocus}
+ isNonModal={!shouldContainFocus}
+ >
+ {shouldContainFocus ? (
+ <Dialog
+ size="content"
+ className={contentClassName}
+ style={{ width: 200 }}
+ >
+ {content}
  </Dialog>
+ ) : (
+ // No Dialog: useDialog opts the overlay into focus containment,
+ // which disables the Tab-out restore path.
+ <Box className={contentClassName} style={{ width: 200 }}>
+ {content}
+ </Box>
+ )}
  </PopoverContent>
  </Popover>
  );
+
+ // The contained variant is the \`ContainedFocus\` story: a wrapper or sibling
+ // here rebaselines its visual snapshot.
+ if (shouldContainFocus) {
+ return popover;
+ }
+
+ return (
+ <Box display="flex" flexDirection="column" gap="lg" alignItems="flex-start">
+ {popover}
+ <ActionButton label="After" />
+ </Box>
+ );
 };
 
 export const PopoverWithScrollableViewportExample: React.FC<{
@@ -32756,7 +33808,15 @@ iconTooltip?: ActionIconButtonProps["tooltip"]
     placeholder="Select"
     items={items}
     isReadOnly
-    value="square" />;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
+    value="square" />;`},{id:"core-forms-select-iconselect--without-icon",name:"Without Icon",snippet:`const WithoutIcon = () => <IconSelect
+    aria-label="Choose Stroke Style"
+    placeholder="Select"
+    items={items}
+    icon={undefined} />;`},{id:"core-forms-select-iconselect--with-default-open",name:"With Default Open",snippet:`const WithDefaultOpen = () => <IconSelect
+    aria-label="Choose Stroke Style"
+    placeholder="Select"
+    items={items}
+    defaultOpen />;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
 import React from "react";
 import { useFilter } from "react-aria";
 import { Autocomplete, Virtualizer } from "react-aria-components";
@@ -32765,11 +33825,16 @@ import { useListData } from "react-stately";
 import { ActionButton } from "../../ActionButton";
 import { items } from "../../ListBox/__tests__/testComponents";
 import { virtualizeAutocompleteItems } from "../../Menu/__tests__/data";
-import { VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS } from "../../Virtualizer";
+import { itemsWithSectionTitles } from "../../UNSAFE_ListBox/__tests__/testComponents";
+import {
+ ListLayout,
+ VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
+} from "../../Virtualizer";
 import { IconSelect } from "../IconSelect";
 import { Select } from "../Select";
 
 import type { IconSelectProps } from "../Select.types";
+import type { Key } from "@react-types/shared";
 
 export const SelectExample: React.FC<
  Omit<React.ComponentProps<typeof Select>, "items">
@@ -32777,13 +33842,28 @@ export const SelectExample: React.FC<
  return (
  <Select
  placeholder="Choose an item"
- {...args}
  optionClassName={(item) => item.label}
+ {...args}
  items={items}
  />
  );
 };
 
+// "Apples" is a substring of "Pineapples" \u2014 exercises exact string matching
+// in the tester's option() locator.
+const substringItems = [
+ { id: "apples", label: "Apples" },
+ { id: "pineapples", label: "Pineapples" },
+];
+
+export const SelectSubstringLabelsExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select placeholder="Choose an item" {...args} items={substringItems} />
+ );
+};
+
 export const SelectGetTargetRectExample: React.FC = () => {
  const [called, setCalled] = React.useState(false);
 
@@ -32840,19 +33920,136 @@ export const SelectCustomTriggerExample: React.FC<
 };
 
 export const IconSelectExample: React.FC<
- Omit<IconSelectProps, "items" | "icon" | "aria-label">
+ Omit<IconSelectProps, "items" | "aria-label">
 > = (args) => {
  return (
  <IconSelect
  placeholder="Choose an item"
+ icon={EllipseIcon}
  {...args}
  items={items}
- icon={EllipseIcon}
  aria-label="Aria Label"
  />
  );
 };
 
+export const VirtualSelectWithSectionHeadersExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Virtualizer
+ layout={ListLayout}
+ layoutOptions={{
+ rowHeight: 36,
+ headingHeight: 40,
+ }}
+ >
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ showSectionHeader={true}
+ {...args}
+ items={itemsWithSectionTitles}
+ defaultOpen={true}
+ maxHeight={400}
+ />
+ </Virtualizer>
+ );
+};
+
+export const SelectWithSectionHeadersExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ showSectionHeader={true}
+ {...args}
+ items={itemsWithSectionTitles}
+ defaultOpen={true}
+ />
+ );
+};
+
+/**
+ * Owns \`isOpen\` so the controlled-open contract can be driven from outside the
+ * Select, with a sibling readout of the current state.
+ */
+export const ControlledOpenSelectExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ return (
+ <>
+ <Select
+ aria-label="Choose an item"
+ placeholder="Choose an item"
+ {...args}
+ items={items}
+ isOpen={isOpen}
+ onOpenChange={setIsOpen}
+ />
+ <button
+ data-testid="open-externally"
+ onClick={() => {
+ setIsOpen(true);
+ }}
+ >
+ Open
+ </button>
+ <span data-testid="open-state">{String(isOpen)}</span>
+ </>
+ );
+};
+
+/**
+ * Custom trigger that renders the multi-select half of the \`renderTrigger\`
+ * payload \u2014 \`selectionMode\`, \`maxCount\` and \`onRemove\` \u2014 which the default
+ * \`SelectButton\` otherwise keeps to itself.
+ */
+export const MultiSelectCustomTriggerExample: React.FC<
+ Omit<React.ComponentProps<typeof Select>, "items">
+> = (args) => {
+ return (
+ <Select
+ aria-label="Choose an item"
+ selectionMode="multiple"
+ {...args}
+ items={items}
+ renderTrigger={({
+ buttonProps,
+ ref,
+ selectedValue,
+ selectionMode,
+ onRemove,
+ maxCount,
+ }) => (
+ <div>
+ <ActionButton
+ {...buttonProps}
+ ref={ref}
+ label={\`\${selectionMode}|\${maxCount}|\${selectedValue?.length ?? 0}\`}
+ variant="popover"
+ />
+ <button
+ data-testid="remove-first"
+ onClick={() => {
+ const first = selectedValue?.[0];
+ if (first) {
+ onRemove?.(new Set([first.id]));
+ }
+ }}
+ >
+ Remove first
+ </button>
+ </div>
+ )}
+ />
+ );
+};
+
 export const SelectWithVirtualizeAutocompleteExample: React.FC<
  Omit<React.ComponentProps<typeof Select>, "items">
 > = (args) => {
@@ -32876,6 +34073,27 @@ export const SelectWithVirtualizeAutocompleteExample: React.FC<
  </Autocomplete>
  </Virtualizer>
  );
+};
+
+/**
+ * \`optionClassName\` reads component state, and \`items\` is module-level so React Aria's
+ * per-item element cache applies. Pinned open so the state change comes from selecting an
+ * option rather than from an outside press the popover would swallow.
+ */
+export const CountingSelectExample: React.FC = () => {
+ const [selected, setSelected] = React.useState<Key | null>(null);
+
+ return (
+ <Select
+ aria-label="Counting select"
+ items={items}
+ isOpen={true}
+ optionClassName={(item) =>
+ item.id === selected ? "option-picked" : "option-plain"
+ }
+ onSelectionChange={setSelected}
+ />
+ );
 };`},similarTo:[],figmaUrl:null},IconSlider:{id:"core-forms-slider-iconslider",importStatement:'import { IconSlider } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconSliderProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
@@ -32986,6 +34204,21 @@ import { ActionButton, I18nProvider, ThemeProvider } from "@baseline-ui/core";
 
 It\u2019s important to wrap your application with the \`ThemeProvider\` and \`I18nProvider\` components. The \`ThemeProvider\` component provides the theme to all the components in the tree, and the \`I18nProvider\` component provides the locale to all the components in the tree.
 
+### Translations
+
+Components render English out of the box. Translations ship as one JSON file per locale so projects that only need English don\u2019t pay for the other 32 \u2014 import the ones you need and pass them to \`I18nProvider\`:
+
+\`\`\`jsx
+import { I18nProvider } from "@baseline-ui/core";
+import de from "@baseline-ui/core/intl/de.json";
+
+<I18nProvider locale="de-DE" messages={{ de }}>
+ <YourApp />
+</I18nProvider>;
+\`\`\`
+
+Any string a catalog omits falls back to English. See [Internationalization](?path=/docs/internationalization--docs) for the full list of locales and message IDs, lazy loading, and overriding individual strings.
+
 ### Styling
 
 Import the following files at the top of your stylesheet to use the Baseline UI styles:
@@ -33254,22 +34487,24 @@ function App() {
 }
 \`\`\``,internationalization:`# Internationalization
 
-It\u2019s important the content of your website is accessible to as many people as possible. This includes people who speak different languages and people who use screen readers. Internationalization (i18n) is the process of making your website accessible to people who speak different languages. Baseline UI supports internationalization for many of the components out of the box. This includes translation for the built-in strings, localization of dates and times, number formatting, and currency formatting.
+It\u2019s important the content of your website is accessible to as many people as possible. This includes people who speak different languages and people who use screen readers. Internationalization (i18n) is the process of making your website accessible to people who speak different languages. Baseline UI supports internationalization for many of the components out of the box: localization of dates and times, number formatting, currency formatting, collation, and text direction all follow the active locale with no setup.
+
+Translated strings are the one part you opt into. Components render English until you import a catalog and pass it to \`I18nProvider\`, so an application that ships in English carries none of the other locales in its bundle. See [Loading a translation catalog](#loading-a-translation-catalog).
 
 ## Localization
 
-Localization is the process of translating your website into different languages. Baseline UI supports localization of the built-in strings, dates and times, number/currency formatting, collating and sorting, text search, and more. It\u2019s built on top of [react-aria](https://react-spectrum.adobe.com/react-aria), which provides translations of built-in strings for many languages. You can also provide your own translations for custom strings.
+Localization is the process of translating your website into different languages. Baseline UI supports localization of the built-in strings, dates and times, number/currency formatting, collating and sorting, text search, and more. It\u2019s built on top of [react-aria](https://react-spectrum.adobe.com/react-aria), whose own strings \u2014 the announcements a date picker or a drag handle makes to a screen reader \u2014 are bundled and translated for you. Baseline UI\u2019s strings are the ones you load a catalog for, and you can add your own on top.
 
-Baseline UI automatically detects a user\u2019s preferred language from the browser, and it uses that language for all localization. It\u2019s possible to override the language used for localization by providing a \`locale\` prop to the \`Provider\` component.
+Baseline UI automatically detects a user\u2019s preferred language from the browser, and it uses that language for all localization. It\u2019s possible to override the language used for localization by providing a \`locale\` prop to the \`I18nProvider\` component.
 
 See [\`useMessageFormatter\`](https://react-spectrum.adobe.com/react-aria/useMessageFormatter.html), [\`DateFormat\`](/?path=/docs/utilities-dateformat--docs), [\`NumberFormat\`](/?path=/docs/utilities-numberformat--docs), and [\`useCollator\`](https://react-spectrum.adobe.com/react-aria/useCollator.html) for more information about using our internationalization hooks.
 
 ### Example
 
-The rootmost element of your application should define the [\`lang\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and [\`dir\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes so that the browser knows which language and direction the user interface should be rendered in. This can be done with the \`useLocale\` hook from \`../../utils\`:
+The rootmost element of your application should define the [\`lang\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and [\`dir\`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes so that the browser knows which language and direction the user interface should be rendered in. This can be done with the \`useLocale\` hook:
 
 \`\`\`jsx
-import { useLocale } from "../../utils";
+import { useLocale } from "@baseline-ui/core";
 
 function YourApp() {
  let { locale, direction } = useLocale();
@@ -33285,27 +34520,128 @@ function YourApp() {
 You can also override the language used for localization with the [\`I18nProvider\`](/?path=/docs/utilities-i18nprovider--docs) component:
 
 \`\`\`jsx
-import { I18nProvider } from "../../utils";
+import { I18nProvider } from "@baseline-ui/core";
 
 <I18nProvider locale="fr-FR">
  <YourApp />
 </I18nProvider>;
 \`\`\`
 
+Setting \`locale\` alone switches date, number and collation formatting, and flips text direction for RTL languages. It does not translate Baseline UI\u2019s own strings \u2014 for that, load a catalog.
+
+### Loading a translation catalog
+
+Import the catalogs for the languages you ship and hand them to \`I18nProvider\`:
+
+\`\`\`jsx
+import { I18nProvider } from "@baseline-ui/core";
+import de from "@baseline-ui/core/intl/de.json";
+import fr from "@baseline-ui/core/intl/fr.json";
+
+// Hoisted out of render: a fresh object each render rebuilds the message
+// formatter, so every string reformats on every pass.
+const messages = { de, fr };
+
+<I18nProvider locale="de-DE" messages={messages}>
+ <YourApp />
+</I18nProvider>;
+\`\`\`
+
+Each file is a flat map of \`bui.*\` ID to translated string, so your bundler includes only
+the locales you actually import. The key you file a catalog under is matched against the
+active locale exactly first, then by language, then by any other region of that language \u2014
+so \`{ de }\` answers for \`de\`, \`de-DE\` and \`de-AT\` alike, and \`{ de, "de-AT" }\` under
+\`de-AT\` uses the Austrian entry.
+
+TypeScript needs \`resolveJsonModule\` enabled to import the files, and Node ESM needs a
+\`with { type: "json" }\` import attribute.
+
+To avoid shipping every language up front, put each catalog behind a dynamic \`import()\`
+and load one when the user picks a language. Write the specifiers out in full \u2014 a
+template literal over a bare package subpath is not statically analyzable, so bundlers
+cannot split on it:
+
+\`\`\`jsx
+const catalogs = {
+ de: () => import("@baseline-ui/core/intl/de.json"),
+ fr: () => import("@baseline-ui/core/intl/fr.json"),
+};
+
+const [messages, setMessages] = useState({});
+
+async function selectLocale(locale) {
+ const catalog = await catalogs[locale]();
+
+ setMessages({ [locale]: catalog.default });
+}
+\`\`\`
+
+An ID your catalog omits falls back to that component's English \`defaultMessage\`, so a
+partial catalog is a valid one \u2014 you are never forced to translate a string before you
+ship it. Outside production, each such ID is reported once in the console.
+
+If you supply catalogs but none of them matches the active locale \u2014 \`{ de }\` while the
+locale is \`ja-JP\`, say \u2014 every string falls back to English and that is reported once for
+the locale rather than once per ID. It means the catalog keys and the locale disagree,
+which no per-ID warning can tell you. Supplying no catalogs at all is the supported
+English-only mode and stays silent.
+
 ### Supported locales
 
-The following locales are supported:
+A catalog ships for each of these locales, with an entry for every message ID:
+
+### Message IDs
+
+Every string Baseline UI can render is keyed by a \`bui.<component>.<key>\` ID. The same
+list is exported as a value, so you can derive translation coverage in a test instead of
+committing a copy that goes stale on the next upgrade:
+
+\`\`\`ts
+import { messageIds } from "@baseline-ui/core";
+
+const uncovered = messageIds.filter((id) => !(id in ourCatalog.en));
+\`\`\`
+
+For the English string behind each ID \u2014 and the translator context that goes with it \u2014
+read \`@baseline-ui/core/messages.json\`, the extracted source messages keyed by ID.
 
-### Translations list
+### Translating them yourself
 
-This list includes the IDs for all of the translations in the \`messages\` object for the \`en\` locale. This can be used to find the ID of a translation to use in the \`formatMessage\` function:
+If you localize the \`bui.*\` strings in your own pipeline rather than shipping our catalogs,
+hand your translators \`@baseline-ui/core/messages.json\` \u2014 the extracted source messages,
+keyed by ID and shaped the way a TMS expects:
+
+\`\`\`json
+{
+ "bui.select.more": {
+ "defaultMessage": "+{count} more",
+ "description": "Tag shown on the select trigger standing in for the selected options that did not fit \u2014 renders as '+3 more'. ..."
+ }
+}
+\`\`\`
+
+The \`description\` is the context a translator needs and cannot infer from the string
+alone \u2014 part of speech, sense, and where it renders. Translating \`bui.editor.mention\`
+without it yields the verb "to mention" where the noun label belongs, and
+\`bui.editor.shortcut\` becomes a desktop shortcut file rather than a key combination.
 
 ## Overriding Component Translations
 
 You can override any built-in component string by passing its \`bui.*\`-namespaced key to
 \`I18nProvider.messages\`. Only the keys you provide are overridden \u2014 all other strings
-fall back to each component's built-in defaults. You can also supply strings for locales
-that a component does not ship with natively.
+fall back to each component's English \`defaultMessage\`. Spread a shipped catalog and
+override on top of it to change a single string:
+
+\`\`\`jsx
+import de from "@baseline-ui/core/intl/de.json";
+
+<I18nProvider
+ locale="de-DE"
+ messages={{ de: { ...de, "bui.imageDropZone.selectImage": "Bild w\xE4hlen" } }}
+>
+ <YourApp />
+</I18nProvider>;
+\`\`\`
 
 Each component's documentation lists its overridable keys and shows an example. See:
 
@@ -33313,7 +34649,43 @@ Each component's documentation lists its overridable keys and shows an example.
 * [ColorInput](?path=/docs/components-colorinput--docs#translations)
 * [ImageDropZone](?path=/docs/components-imagedropzone--docs#translations)
 * [FreehandCanvas](?path=/docs/components-freehandcanvas--docs#translations)
-* [InlineAlert](?path=/docs/components-inlinealert--docs#translations)`,styling:`# Styling with Sprinkles
+* [InlineAlert](?path=/docs/components-inlinealert--docs#translations)
+
+### Migrating from bare IDs
+
+Older catalogs key off the bare tail of an ID (\`close\` rather than \`bui.drawer.close\`).
+That still resolves, with a deprecation warning, but it will be removed in a future
+major \u2014 and it is ambiguous: several bare IDs are claimed by more than one component,
+so a single entry silently translates all of them. That happens to work in English, but
+it forecloses any language where the word inflects differently per context.
+
+\`legacyMessageIdMap\` maps each bare ID to every namespaced ID that claims it, so a catalog
+can be re-keyed mechanically. Keep each original key alongside the IDs it maps to \u2014 a bare
+key may also be one your own app looks up, and Baseline UI resolves the namespaced entry
+either way:
+
+\`\`\`ts
+import { legacyMessageIdMap } from "@baseline-ui/core";
+
+const migrated = Object.fromEntries(
+ Object.entries(oldCatalog).flatMap(([key, value]) => [
+ [key, value],
+ ...(legacyMessageIdMap[key] ?? []).map((id) => [id, value]),
+ ]),
+);
+\`\`\`
+
+Review the ambiguous ones by hand \u2014 each deserves its own translation:
+
+| Bare ID | Also translates |
+| ----------- | ---------------------------------------------------------------------------------------- |
+| \`close\` | \`bui.alertDialog.close\`, \`bui.drawer.close\`, \`bui.editor.close\`, \`bui.inlineAlert.close\` |
+| \`more\` | \`bui.buttonSelect.more\`, \`bui.select.more\`, \`bui.toolbar.more\` |
+| \`cancel\` | \`bui.colorInput.cancel\`, \`bui.editor.cancel\`, \`bui.imageGallery.cancel\` |
+| \`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
 
 Baseline UI provides a powerful, type-safe styling system built on top of [vanilla-extract sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles/).
 
@@ -34223,7 +35595,7 @@ padding={[null, "lg", "xl"]}
 
 * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
 * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
-* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"1.1.0"};var u=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.0.0"};var u=`
 # Baseline UI MCP Server Guidelines
 
 This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.