@baseline-ui/mcp 3.10.1 → 3.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/{chunk-TLZDJ64O.js → chunk-WAT3IN5N.js} +395 -76
- package/dist/index.js +1 -1
- package/dist/server.cjs +395 -76
- package/dist/server.js +1 -1
- package/package.json +1 -1
- package/sbom.json +6 -6
|
@@ -3176,6 +3176,7 @@ export const AlertDialogWithIconExample: React.FC<
|
|
|
3176
3176
|
* Play and pause audio files
|
|
3177
3177
|
* Seek through audio files
|
|
3178
3178
|
* Display the current time and duration of the audio file
|
|
3179
|
+
* Announces the position to screen readers after a seek, in words where the browser supports \`Intl.DurationFormat\` and as a clock time (\`01:05\`) otherwise
|
|
3179
3180
|
* Built on top of native \`<audio>\` element so all the file formats supported by the browser are supported
|
|
3180
3181
|
* Exposed to screen readers via ARIA attributes
|
|
3181
3182
|
* Supports mouse, keyboard, and touch interactions
|
|
@@ -3256,35 +3257,44 @@ size?: "sm" | "lg"
|
|
|
3256
3257
|
/**
|
|
3257
3258
|
* Overrides the accessible name of the button that starts audio playback.
|
|
3258
3259
|
*
|
|
3259
|
-
* Message id: \`bui.audioPlayer.play\`.
|
|
3260
|
+
* Message id: \`bui.audioPlayer.play\`.
|
|
3261
|
+
*
|
|
3262
|
+
* @default "Play"
|
|
3260
3263
|
*/
|
|
3261
3264
|
playLabel?: string
|
|
3262
3265
|
/**
|
|
3263
3266
|
* Overrides the accessible name of the button that pauses audio playback.
|
|
3264
3267
|
*
|
|
3265
|
-
* Message id: \`bui.audioPlayer.pause\`.
|
|
3268
|
+
* Message id: \`bui.audioPlayer.pause\`.
|
|
3269
|
+
*
|
|
3270
|
+
* @default "Pause"
|
|
3266
3271
|
*/
|
|
3267
3272
|
pauseLabel?: string
|
|
3268
3273
|
/**
|
|
3269
3274
|
* Overrides the accessible name of the slider used to seek through the
|
|
3270
3275
|
* audio track.
|
|
3271
3276
|
*
|
|
3272
|
-
* Message id: \`bui.audioPlayer.audioTimeline\`.
|
|
3273
|
-
*
|
|
3277
|
+
* Message id: \`bui.audioPlayer.audioTimeline\`.
|
|
3278
|
+
*
|
|
3279
|
+
* @default "Audio timeline"
|
|
3274
3280
|
*/
|
|
3275
3281
|
audioTimelineLabel?: string
|
|
3276
3282
|
/**
|
|
3277
3283
|
* Overrides the screen reader announcement made when audio playback
|
|
3278
3284
|
* starts.
|
|
3279
3285
|
*
|
|
3280
|
-
* Message id: \`bui.useMedia.playing\`.
|
|
3286
|
+
* Message id: \`bui.useMedia.playing\`.
|
|
3287
|
+
*
|
|
3288
|
+
* @default "Playing"
|
|
3281
3289
|
*/
|
|
3282
3290
|
playingLabel?: string
|
|
3283
3291
|
/**
|
|
3284
3292
|
* Overrides the screen reader announcement made when audio playback is
|
|
3285
3293
|
* paused.
|
|
3286
3294
|
*
|
|
3287
|
-
* Message id: \`bui.useMedia.paused\`.
|
|
3295
|
+
* Message id: \`bui.useMedia.paused\`.
|
|
3296
|
+
*
|
|
3297
|
+
* @default "Paused"
|
|
3288
3298
|
*/
|
|
3289
3299
|
pausedLabel?: string
|
|
3290
3300
|
}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:`import React from "react";
|
|
@@ -5914,7 +5924,16 @@ noneLabel?: string
|
|
|
5914
5924
|
aria-label="Indeterminate"
|
|
5915
5925
|
tooltip
|
|
5916
5926
|
indeterminateIcon={null} />
|
|
5917
|
-
</Box>;`}],implementation
|
|
5927
|
+
</Box>;`}],implementation:`import React from "react";
|
|
5928
|
+
|
|
5929
|
+
import { ColorSwatch } from "../ColorSwatch";
|
|
5930
|
+
|
|
5931
|
+
import type { ColorSwatchProps } from "../ColorSwatch.types";
|
|
5932
|
+
|
|
5933
|
+
export const ForwardedLabelColorSwatchExample: React.FC<ColorSwatchProps> = ({
|
|
5934
|
+
"aria-label": ariaLabel,
|
|
5935
|
+
...props
|
|
5936
|
+
}) => <ColorSwatch {...props} aria-label={ariaLabel} />;`},similarTo:[],figmaUrl:null},ColorSwatchPicker:{id:"core-forms-colorswatchpicker",breadcrumb:"Core/Forms/ColorSwatchPicker",importStatement:`import { ColorSwatchPicker } from '@baseline-ui/core';
|
|
5918
5937
|
import { colorItems } from '../RadioGroup/__tests__/testComponents';
|
|
5919
5938
|
import { FillColorIcon } from '@baseline-ui/icons/24';`,description:"`ColorSwatchPicker` is a keyboard-navigable row of color swatches from which a user picks one color. Pressing the selected swatch again clears the selection and calls `onChange` with `undefined`. Use it when you want users to choose from a curated palette without the overhead of a full color picker.",documentation:`\`ColorSwatchPicker\` is a keyboard-navigable row of color swatches from which a user picks one color. Pressing the selected swatch again clears the selection and calls \`onChange\` with \`undefined\`. Use it when you want users to choose from a curated palette without the overhead of a full color picker.
|
|
5920
5939
|
|
|
@@ -7649,11 +7668,15 @@ openCalendarLabel?: string
|
|
|
7649
7668
|
errorMessage="Invalid date" />;`}],implementation:`import {
|
|
7650
7669
|
CalendarDate,
|
|
7651
7670
|
CalendarDateTime,
|
|
7671
|
+
GregorianCalendar,
|
|
7672
|
+
JapaneseCalendar,
|
|
7652
7673
|
parseDate,
|
|
7653
7674
|
parseZonedDateTime,
|
|
7675
|
+
toCalendar,
|
|
7654
7676
|
} from "@internationalized/date";
|
|
7655
7677
|
import React from "react";
|
|
7656
7678
|
|
|
7679
|
+
import { I18nProvider } from "../../I18nProvider";
|
|
7657
7680
|
import { DateField } from "../DateField";
|
|
7658
7681
|
|
|
7659
7682
|
import type { DateFieldProps } from "../DateField.types";
|
|
@@ -7692,17 +7715,41 @@ export const MinMaxDateFieldExample: React.FC<
|
|
|
7692
7715
|
const placeholders = {
|
|
7693
7716
|
dateTime: new CalendarDateTime(2022, 11, 7, 9, 30),
|
|
7694
7717
|
zonedDateTime: parseZonedDateTime("2022-11-07T09:30[America/Los_Angeles]"),
|
|
7718
|
+
heisei: new CalendarDateTime(
|
|
7719
|
+
new JapaneseCalendar(),
|
|
7720
|
+
"heisei",
|
|
7721
|
+
31,
|
|
7722
|
+
4,
|
|
7723
|
+
15,
|
|
7724
|
+
10,
|
|
7725
|
+
30,
|
|
7726
|
+
),
|
|
7727
|
+
reiwa: new CalendarDateTime(
|
|
7728
|
+
new JapaneseCalendar(),
|
|
7729
|
+
"reiwa",
|
|
7730
|
+
1,
|
|
7731
|
+
5,
|
|
7732
|
+
15,
|
|
7733
|
+
10,
|
|
7734
|
+
30,
|
|
7735
|
+
),
|
|
7736
|
+
zonedHeisei: toCalendar(
|
|
7737
|
+
parseZonedDateTime("2019-04-15T10:30[Asia/Tokyo]"),
|
|
7738
|
+
new JapaneseCalendar(),
|
|
7739
|
+
),
|
|
7740
|
+
bc: new CalendarDateTime(new GregorianCalendar(), "BC", 1, 12, 15, 10, 30),
|
|
7695
7741
|
};
|
|
7696
7742
|
|
|
7697
7743
|
export const ControlledDateTimeFieldExample: React.FC<{
|
|
7698
7744
|
placeholder?: keyof typeof placeholders;
|
|
7699
7745
|
initialValue?: keyof typeof placeholders;
|
|
7700
|
-
|
|
7746
|
+
locale?: string;
|
|
7747
|
+
}> = ({ placeholder, initialValue, locale }) => {
|
|
7701
7748
|
const [value, setValue] = React.useState<DateValue | null>(
|
|
7702
7749
|
initialValue ? placeholders[initialValue] : null,
|
|
7703
7750
|
);
|
|
7704
7751
|
return (
|
|
7705
|
-
|
|
7752
|
+
<I18nProvider locale={locale}>
|
|
7706
7753
|
<button
|
|
7707
7754
|
onClick={() => {
|
|
7708
7755
|
setValue(null);
|
|
@@ -7726,7 +7773,7 @@ export const ControlledDateTimeFieldExample: React.FC<{
|
|
|
7726
7773
|
onChange={setValue}
|
|
7727
7774
|
/>
|
|
7728
7775
|
<output data-testid="value">{value?.toString() ?? ""}</output>
|
|
7729
|
-
|
|
7776
|
+
</I18nProvider>
|
|
7730
7777
|
);
|
|
7731
7778
|
};
|
|
7732
7779
|
|
|
@@ -9160,7 +9207,7 @@ avatarName?: string
|
|
|
9160
9207
|
* of plain text, this label is used to provide an accessible label for the
|
|
9161
9208
|
* textarea element.
|
|
9162
9209
|
*
|
|
9163
|
-
* @default Editing Area
|
|
9210
|
+
* @default "Editing Area", localized through the active \`I18nProvider\`
|
|
9164
9211
|
*/
|
|
9165
9212
|
editableContentAriaLabel?: string
|
|
9166
9213
|
/**
|
|
@@ -10651,7 +10698,7 @@ export const HeadlessHtmlStylesDemo: React.FC = () => (
|
|
|
10651
10698
|
</HeadlessDemoRow>
|
|
10652
10699
|
</Box>
|
|
10653
10700
|
);`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:`import { FileInput, VariantViewer } from '@baseline-ui/core';
|
|
10654
|
-
import { fn } from 'storybook/test';`,description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
|
|
10701
|
+
import { fn } from 'storybook/test';`,description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default, in the active locale) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default, in the active locale), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
|
|
10655
10702
|
/**
|
|
10656
10703
|
* The description to display below the input. Hidden while an \`errorMessage\`
|
|
10657
10704
|
* or \`warningMessage\` is shown.
|
|
@@ -10687,13 +10734,13 @@ label?: React.ReactNode
|
|
|
10687
10734
|
/**
|
|
10688
10735
|
* The label shown on the file picker button.
|
|
10689
10736
|
*
|
|
10690
|
-
* @default "Choose file"
|
|
10737
|
+
* @default "Choose file", localized through the active \`I18nProvider\`
|
|
10691
10738
|
*/
|
|
10692
10739
|
buttonLabel?: React.ReactNode
|
|
10693
10740
|
/**
|
|
10694
10741
|
* The text shown when no file has been selected.
|
|
10695
10742
|
*
|
|
10696
|
-
* @default "No file chosen"
|
|
10743
|
+
* @default "No file chosen", localized through the active \`I18nProvider\`
|
|
10697
10744
|
*/
|
|
10698
10745
|
placeholder?: string
|
|
10699
10746
|
/**
|
|
@@ -11485,14 +11532,15 @@ errorMessage?: string
|
|
|
11485
11532
|
/**
|
|
11486
11533
|
* The label of the button rendered in the \`button\` variant.
|
|
11487
11534
|
*
|
|
11488
|
-
* @default "Upload"
|
|
11535
|
+
* @default "Upload", localized through the active \`I18nProvider\`
|
|
11489
11536
|
*/
|
|
11490
11537
|
buttonLabel?: string
|
|
11491
11538
|
/**
|
|
11492
11539
|
* The text rendered inside the clickable drop area in the dropzone
|
|
11493
11540
|
* variants.
|
|
11494
11541
|
*
|
|
11495
|
-
* @default "Drop files here or click to upload"
|
|
11542
|
+
* @default "Drop files here or click to upload", localized through the active
|
|
11543
|
+
* \`I18nProvider\`
|
|
11496
11544
|
*/
|
|
11497
11545
|
dropzoneLabel?: string
|
|
11498
11546
|
/**
|
|
@@ -12589,7 +12637,8 @@ value?: FreehandCanvasLine[]
|
|
|
12589
12637
|
label?: string
|
|
12590
12638
|
/**
|
|
12591
12639
|
* The accessible name of the canvas. Without it, the canvas is named by
|
|
12592
|
-
* \`label\` or \`aria-labelledby\`, and by "Drawing canvas"
|
|
12640
|
+
* \`label\` or \`aria-labelledby\`, and by "Drawing canvas", localized through
|
|
12641
|
+
* the active \`I18nProvider\`, when neither is set.
|
|
12593
12642
|
*/
|
|
12594
12643
|
aria-label?: string
|
|
12595
12644
|
/**
|
|
@@ -12626,6 +12675,9 @@ undoLabel?: string
|
|
|
12626
12675
|
redoLabel?: string
|
|
12627
12676
|
/**
|
|
12628
12677
|
* Description for the canvas.
|
|
12678
|
+
*
|
|
12679
|
+
* @default "This is a canvas for drawing using a mouse or touch input.",
|
|
12680
|
+
* localized through the active \`I18nProvider\`
|
|
12629
12681
|
*/
|
|
12630
12682
|
description?: string
|
|
12631
12683
|
}`,stories:{usage:[{id:"core-miscellaneous-freehandcanvas--basic",name:"Basic",snippet:`const Basic = () => <FreehandCanvas
|
|
@@ -14435,6 +14487,7 @@ import { ImageGallery, ImageSize } from "../ImageGallery";
|
|
|
14435
14487
|
import { items } from "./data";
|
|
14436
14488
|
|
|
14437
14489
|
import type { ListHandle } from "../../UNSAFE_ListBox/ListBox.types";
|
|
14490
|
+
import type { Item } from "../ImageGallery.types";
|
|
14438
14491
|
import type { Key } from "react-stately";
|
|
14439
14492
|
|
|
14440
14493
|
const SCALE_FACTOR = 1.5;
|
|
@@ -14873,6 +14926,37 @@ export function RerenderOnDemandImageGalleryExample({
|
|
|
14873
14926
|
{gallery}
|
|
14874
14927
|
</Virtualizer>
|
|
14875
14928
|
);
|
|
14929
|
+
}
|
|
14930
|
+
|
|
14931
|
+
export function RemoveOnDemandImageGalleryExample({
|
|
14932
|
+
keysToRemove,
|
|
14933
|
+
...props
|
|
14934
|
+
}: Omit<React.ComponentProps<typeof ImageGallery>, "items"> & {
|
|
14935
|
+
keysToRemove: string[];
|
|
14936
|
+
}) {
|
|
14937
|
+
const [currentItems, setCurrentItems] = useState<Item[]>(items.slice(0, 6));
|
|
14938
|
+
|
|
14939
|
+
React.useEffect(() => {
|
|
14940
|
+
const onRemove = () => {
|
|
14941
|
+
setCurrentItems((prev) =>
|
|
14942
|
+
prev.filter((item) => !keysToRemove.includes(item.id)),
|
|
14943
|
+
);
|
|
14944
|
+
};
|
|
14945
|
+
|
|
14946
|
+
window.addEventListener("repro:remove", onRemove);
|
|
14947
|
+
|
|
14948
|
+
return () => {
|
|
14949
|
+
window.removeEventListener("repro:remove", onRemove);
|
|
14950
|
+
};
|
|
14951
|
+
}, [keysToRemove]);
|
|
14952
|
+
|
|
14953
|
+
return (
|
|
14954
|
+
<ImageGallery
|
|
14955
|
+
items={currentItems}
|
|
14956
|
+
onListChange={setCurrentItems}
|
|
14957
|
+
{...props}
|
|
14958
|
+
/>
|
|
14959
|
+
);
|
|
14876
14960
|
}`},similarTo:[],figmaUrl:null},InlineAlert:{id:"core-status-inlinealert",breadcrumb:"Core/Status/InlineAlert",importStatement:`import { InlineAlert } from '@baseline-ui/core';
|
|
14877
14961
|
import { fn } from 'storybook/test';`,description:"`InlineAlert` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.",documentation:`\`InlineAlert\` is a status message anchored next to related content, with success, warning, error, or info styling and optional action and dismiss buttons. Use it for persistent, in-context feedback that should stay visible without interrupting the user's flow.
|
|
14878
14962
|
|
|
@@ -16123,13 +16207,22 @@ export const InlineToolbarExample = ({
|
|
|
16123
16207
|
children,
|
|
16124
16208
|
itemsAsFunction,
|
|
16125
16209
|
childWithoutRef,
|
|
16210
|
+
keepOpenOnClickIn,
|
|
16126
16211
|
...args
|
|
16127
16212
|
}: Partial<React.ComponentProps<typeof InlineToolbar>> & {
|
|
16128
16213
|
itemsAsFunction?: boolean;
|
|
16129
16214
|
childWithoutRef?: boolean;
|
|
16215
|
+
keepOpenOnClickIn?: string;
|
|
16130
16216
|
}) => {
|
|
16131
16217
|
return (
|
|
16132
|
-
<InlineToolbar
|
|
16218
|
+
<InlineToolbar
|
|
16219
|
+
{...(keepOpenOnClickIn && {
|
|
16220
|
+
shouldCloseOnInteractOutside: (el: Element) =>
|
|
16221
|
+
!el.closest(keepOpenOnClickIn),
|
|
16222
|
+
})}
|
|
16223
|
+
{...args}
|
|
16224
|
+
items={itemsAsFunction ? () => items : items}
|
|
16225
|
+
>
|
|
16133
16226
|
{React.Children.count(children) > 0 ? (
|
|
16134
16227
|
children!
|
|
16135
16228
|
) : childWithoutRef ? (
|
|
@@ -16274,8 +16367,9 @@ type?: "body" | "label"
|
|
|
16274
16367
|
title?: string
|
|
16275
16368
|
/**
|
|
16276
16369
|
* Optional ARIA role, useful for specifying a different role for the link.
|
|
16277
|
-
*
|
|
16278
|
-
*
|
|
16370
|
+
* When omitted, the link role comes from \`href\` on an \`a\` element, or is set
|
|
16371
|
+
* when \`onPress\` is passed or \`elementType\` is not \`a\`; an \`a\` with neither
|
|
16372
|
+
* \`href\` nor \`onPress\` has no link role.
|
|
16279
16373
|
*/
|
|
16280
16374
|
role?: AriaRole
|
|
16281
16375
|
}`,stories:{usage:[{id:"core-navigation-link--basic",name:"Basic",snippet:'const Basic = () => <Link href="https://www.pspdfkit.com">Link</Link>;'},{id:"core-navigation-link--variants",name:"Variants",snippet:`const Variants = (args) => (
|
|
@@ -24430,10 +24524,11 @@ underlayClassName?: string | ((state: { isOpen: boolean }) => string | undefined
|
|
|
24430
24524
|
children: | React.JSX.Element
|
|
24431
24525
|
| ((state: OverlayTriggerState) => React.JSX.Element)
|
|
24432
24526
|
/**
|
|
24433
|
-
* The container element for the popover.
|
|
24434
|
-
*
|
|
24435
|
-
*
|
|
24436
|
-
*
|
|
24527
|
+
* The container element for the popover. When omitted, the popover renders
|
|
24528
|
+
* into the container from the nearest \`PortalContainerProvider\`, then the one
|
|
24529
|
+
* from the nearest \`FrameProvider\`, and otherwise into the document body. A
|
|
24530
|
+
* \`FrameProvider\` also acts as a \`PortalContainerProvider\` for its children,
|
|
24531
|
+
* so one nested inside a \`PortalContainerProvider\` takes precedence.
|
|
24437
24532
|
*/
|
|
24438
24533
|
portalContainer?: HTMLElement
|
|
24439
24534
|
/**
|
|
@@ -27092,7 +27187,7 @@ export const PopoverTriggerButtonExample: React.FC<{
|
|
|
27092
27187
|
return (
|
|
27093
27188
|
<PopoverExample popoverProps={{ type }}>{buttons[button]}</PopoverExample>
|
|
27094
27189
|
);
|
|
27095
|
-
};`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:"import { Portal } from '@baseline-ui/core';",description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into a separate overlay container\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
|
|
27190
|
+
};`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:"import { Portal } from '@baseline-ui/core';",description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into a separate overlay container\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context, which a nested `FrameProvider` replaces for its own children\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
|
|
27096
27191
|
/**
|
|
27097
27192
|
* The container element in which the overlay portal will be placed.
|
|
27098
27193
|
*
|
|
@@ -27239,9 +27334,8 @@ textValue?: string
|
|
|
27239
27334
|
*/
|
|
27240
27335
|
textStyle?: React.CSSProperties
|
|
27241
27336
|
/**
|
|
27242
|
-
*
|
|
27243
|
-
* \`
|
|
27244
|
-
* is not fired as focus shifts to the action buttons.
|
|
27337
|
+
* Called when the preview is pressed. Pressing the delete button shown by
|
|
27338
|
+
* \`onDelete\` does not call it.
|
|
27245
27339
|
*/
|
|
27246
27340
|
onPress?: PressProps["onPress"]
|
|
27247
27341
|
/**
|
|
@@ -27255,7 +27349,8 @@ onDelete?: ActionButtonProps["onPress"]
|
|
|
27255
27349
|
*/
|
|
27256
27350
|
deleteAriaLabel?: string
|
|
27257
27351
|
/**
|
|
27258
|
-
* The
|
|
27352
|
+
* The accessible name of the preview's pressable area, which calls
|
|
27353
|
+
* \`onPress\`.
|
|
27259
27354
|
*/
|
|
27260
27355
|
addAriaLabel?: string
|
|
27261
27356
|
/**
|
|
@@ -29144,7 +29239,7 @@ The Select supports \`primary\` (default) and \`ghost\` variants.
|
|
|
29144
29239
|
|
|
29145
29240
|
<a href="?path=/story/core-forms-select--ghost">View ghost variant story</a>
|
|
29146
29241
|
|
|
29147
|
-
|
|
29242
|
+
Set \`isDisabled\` to disable the Select, \`isReadOnly\` to make it read-only, and \`validationState\` to \`"error"\` or \`"warning"\` to show an error or warning state.
|
|
29148
29243
|
|
|
29149
29244
|
In multiselect mode, the "Select All" and "Clear" footer buttons can be hidden individually using the \`hideSelectAll\` and \`hideClear\` props.
|
|
29150
29245
|
|
|
@@ -30428,7 +30523,7 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
|
|
|
30428
30523
|
import { IconSlider } from "../IconSlider";
|
|
30429
30524
|
import { Slider } from "../Slider";
|
|
30430
30525
|
|
|
30431
|
-
import type { IconSliderProps } from "../Slider.types";
|
|
30526
|
+
import type { IconSliderProps, SliderProps } from "../Slider.types";
|
|
30432
30527
|
|
|
30433
30528
|
const TestIcon = () => <div>Icon</div>;
|
|
30434
30529
|
|
|
@@ -30451,6 +30546,19 @@ export const SliderWithExternalDescriptionExample: React.FC = () => (
|
|
|
30451
30546
|
aria-describedby="external-hint"
|
|
30452
30547
|
/>
|
|
30453
30548
|
</>
|
|
30549
|
+
);
|
|
30550
|
+
|
|
30551
|
+
export const SliderWithExternalLabelExample: React.FC<SliderProps> = (
|
|
30552
|
+
props,
|
|
30553
|
+
) => (
|
|
30554
|
+
<>
|
|
30555
|
+
<span id="external-label">Layer</span>
|
|
30556
|
+
<Slider
|
|
30557
|
+
aria-labelledby="external-label"
|
|
30558
|
+
includeNumberInput={true}
|
|
30559
|
+
{...props}
|
|
30560
|
+
/>
|
|
30561
|
+
</>
|
|
30454
30562
|
);`},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:"import { Slider } from '@baseline-ui/core';",description:"`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.",documentation:'`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nUse the `description` prop to show helper text below the slider. It is announced as the slider\'s accessible description.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
|
|
30455
30563
|
/**
|
|
30456
30564
|
* @deprecated Do not use in new components. This is a legacy block
|
|
@@ -30548,7 +30656,7 @@ numberInputStyle?: NumberInputProps["style"]
|
|
|
30548
30656
|
import { IconSlider } from "../IconSlider";
|
|
30549
30657
|
import { Slider } from "../Slider";
|
|
30550
30658
|
|
|
30551
|
-
import type { IconSliderProps } from "../Slider.types";
|
|
30659
|
+
import type { IconSliderProps, SliderProps } from "../Slider.types";
|
|
30552
30660
|
|
|
30553
30661
|
const TestIcon = () => <div>Icon</div>;
|
|
30554
30662
|
|
|
@@ -30571,6 +30679,19 @@ export const SliderWithExternalDescriptionExample: React.FC = () => (
|
|
|
30571
30679
|
aria-describedby="external-hint"
|
|
30572
30680
|
/>
|
|
30573
30681
|
</>
|
|
30682
|
+
);
|
|
30683
|
+
|
|
30684
|
+
export const SliderWithExternalLabelExample: React.FC<SliderProps> = (
|
|
30685
|
+
props,
|
|
30686
|
+
) => (
|
|
30687
|
+
<>
|
|
30688
|
+
<span id="external-label">Layer</span>
|
|
30689
|
+
<Slider
|
|
30690
|
+
aria-labelledby="external-label"
|
|
30691
|
+
includeNumberInput={true}
|
|
30692
|
+
{...props}
|
|
30693
|
+
/>
|
|
30694
|
+
</>
|
|
30574
30695
|
);`},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from '@baseline-ui/core';
|
|
30575
30696
|
import { CaretUpIcon } from '@baseline-ui/icons/12';`,description:"`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.",documentation:'`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.\n\n* Supports multiple status variants: `active`, `warning`, `error`, `denied`, and `success`\n* Tinted variants available for a lighter, more subtle appearance\n* Default icons for each variant, with support for custom icons\n* Optional trailing element support via `renderTrailingElement` prop\n* Pulsing animation for the `active` variant icon\n* Exposed to assistive technologies using semantic HTML\n\n```jsx\nimport { StatusCard } from "@baseline-ui/core";\n\n<StatusCard variant="active" title="Disclosure" description="Running..." />;\n```\n\nThe `StatusCard` component supports the following variants: `active`, `warning`, `error`, `denied`, and `success`. Each variant also has a tinted version, `{variant}-tinted`, with a lighter background and subtle colored borders.\n\nTinted variants provide a lighter, more subtle appearance with colored backgrounds and borders:\n\nYou can provide a custom icon component to replace the default icon for a variant:\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<StatusCard\n variant="active"\n title="Custom Status"\n description="Using a custom icon"\n icon={EllipseIcon}\n/>;\n```\n\nThe `renderTrailingElement` prop allows you to render custom content at the end of the status card. This is useful for displaying indicators like caret icons, action buttons, or other UI elements.\n\n```jsx\nimport { StatusCard } from "@baseline-ui/core";\nimport { CaretUpIcon } from "@baseline-ui/icons/12";\nimport { Box } from "@baseline-ui/core";\n\n<StatusCard\n variant="active"\n title="With Trailing Element"\n description="Custom trailing content"\n renderTrailingElement={() => (\n <Box padding="sm" display="inline-flex">\n <CaretUpIcon size={12} />\n </Box>\n )}\n/>;\n```\n\nThe `StatusCard` component uses semantic HTML elements to ensure proper accessibility:\n\n* The title is rendered as an `<h4>` element\n* The description is rendered as a `<span>` element\n* The component structure is exposed to assistive technologies through proper HTML semantics\n\nThe `StatusCard` component itself does not handle keyboard interactions. If you need interactive behavior, wrap it in a clickable element or use it within an interactive component like `Disclosure`.',props:`interface StatusCardProps {
|
|
30576
30697
|
/**
|
|
@@ -36143,6 +36264,12 @@ You can pass a \`timeout\` prop to the \`toastQueue.add\` method to set the time
|
|
|
36143
36264
|
|
|
36144
36265
|
\`\`\`tsx
|
|
36145
36266
|
toastQueue.add(alertProps, { timeout: 1000 });
|
|
36267
|
+
\`\`\`
|
|
36268
|
+
|
|
36269
|
+
The toast region renders with a \`z-index\` of 1, so an open \`Modal\` (\`z-index\` 1000) covers it, and clicking a covered toast closes the modal. To show toasts above your overlays, pass a higher \`z-index\` through \`style\`:
|
|
36270
|
+
|
|
36271
|
+
\`\`\`tsx
|
|
36272
|
+
<GlobalToastRegion toastQueue={toastQueue} style={{ zIndex: 1001 }} />
|
|
36146
36273
|
\`\`\``,props:`interface ToastProps {
|
|
36147
36274
|
/**
|
|
36148
36275
|
* @deprecated Do not use in new components. This is a legacy block
|
|
@@ -36191,6 +36318,8 @@ import { ToastQueue } from "react-stately";
|
|
|
36191
36318
|
|
|
36192
36319
|
import { ActionButton } from "../../ActionButton";
|
|
36193
36320
|
import { Box } from "../../Box";
|
|
36321
|
+
import { Dialog } from "../../Dialog";
|
|
36322
|
+
import { Modal, ModalContent, ModalTrigger } from "../../Modal";
|
|
36194
36323
|
import { NumberInput } from "../../NumberInput";
|
|
36195
36324
|
import { Select } from "../../Select";
|
|
36196
36325
|
import { Separator } from "../../Separator";
|
|
@@ -36480,6 +36609,30 @@ export const VariantsExample = ({
|
|
|
36480
36609
|
</Box>
|
|
36481
36610
|
</>
|
|
36482
36611
|
);
|
|
36612
|
+
};
|
|
36613
|
+
|
|
36614
|
+
export const ToastInModalExample = () => {
|
|
36615
|
+
const toastQueue = useMemo(() => new ToastQueue<ToastContent>(), []);
|
|
36616
|
+
const showToast = () => {
|
|
36617
|
+
toastQueue.add({ title: "Toast Title", description: "Toast Description" });
|
|
36618
|
+
};
|
|
36619
|
+
|
|
36620
|
+
return (
|
|
36621
|
+
<>
|
|
36622
|
+
<GlobalToastRegion toastQueue={toastQueue} style={{ zIndex: 1001 }} />
|
|
36623
|
+
<ActionButton label="Show Toast" onPress={showToast} />
|
|
36624
|
+
<Modal>
|
|
36625
|
+
<ModalTrigger>
|
|
36626
|
+
<ActionButton label="Open Modal" />
|
|
36627
|
+
</ModalTrigger>
|
|
36628
|
+
<ModalContent>
|
|
36629
|
+
<Dialog aria-label="Modal">
|
|
36630
|
+
<ActionButton label="Show Toast" onPress={showToast} />
|
|
36631
|
+
</Dialog>
|
|
36632
|
+
</ModalContent>
|
|
36633
|
+
</Modal>
|
|
36634
|
+
</>
|
|
36635
|
+
);
|
|
36483
36636
|
};`},similarTo:[],figmaUrl:null},ToggleButton:{id:"core-buttons-togglebutton",breadcrumb:"Core/Buttons/ToggleButton",importStatement:`import { Box, ToggleButton, VariantViewer } from '@baseline-ui/core';
|
|
36484
36637
|
import { EllipseIcon } from '@baseline-ui/icons/20';`,description:"`ToggleButton` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.",documentation:`\`ToggleButton\` is a button with a labeled text that maintains a selected or unselected state. Use it for on/off controls where the option needs a visible text label, such as toggling a filter, mode, or preference.
|
|
36485
36638
|
|
|
@@ -36986,10 +37139,15 @@ export const StateSpecificIcon: React.FC<
|
|
|
36986
37139
|
/>
|
|
36987
37140
|
);
|
|
36988
37141
|
|
|
36989
|
-
export const LabelledByTooltip: React.FC
|
|
37142
|
+
export const LabelledByTooltip: React.FC<{ isLabelled?: boolean }> = ({
|
|
37143
|
+
isLabelled = true,
|
|
37144
|
+
}) => (
|
|
36990
37145
|
<>
|
|
36991
37146
|
<span id="toggle-label">Mute</span>
|
|
36992
|
-
<ToggleIconButtonExample
|
|
37147
|
+
<ToggleIconButtonExample
|
|
37148
|
+
aria-labelledby={isLabelled ? "toggle-label" : undefined}
|
|
37149
|
+
tooltip={true}
|
|
37150
|
+
/>
|
|
36993
37151
|
</>
|
|
36994
37152
|
);`},similarTo:[],figmaUrl:null},Toolbar:{id:"core-miscellaneous-toolbar",breadcrumb:"Core/Miscellaneous/Toolbar",importStatement:`import { ChildrenWithTooltip, CollapsibleChildren, Toolbar, ToolbarChildren, WithInput } from '@baseline-ui/core';
|
|
36995
37153
|
import { ToolbarChildren, ChildrenWithTooltip } from './__tests__/testComponents';`,description:"`Toolbar` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.",documentation:`\`Toolbar\` is a container that groups related interactive controls into a single, arrow-key navigable region with optional collapsing into a menu when space is limited. Use it to expose a set of frequent actions, such as formatting or document controls, alongside the content they act on.
|
|
@@ -37724,10 +37882,11 @@ variant?: "default" | "inverse"
|
|
|
37724
37882
|
*/
|
|
37725
37883
|
includeArrow?: boolean
|
|
37726
37884
|
/**
|
|
37727
|
-
* The container element for the
|
|
37728
|
-
*
|
|
37729
|
-
*
|
|
37730
|
-
*
|
|
37885
|
+
* The container element for the tooltip. When omitted, the tooltip renders
|
|
37886
|
+
* into the container from the nearest \`PortalContainerProvider\`, then the one
|
|
37887
|
+
* from the nearest \`FrameProvider\`, and otherwise into the document body. A
|
|
37888
|
+
* \`FrameProvider\` also acts as a \`PortalContainerProvider\` for its children,
|
|
37889
|
+
* so one nested inside a \`PortalContainerProvider\` takes precedence.
|
|
37731
37890
|
*/
|
|
37732
37891
|
portalContainer?: HTMLElement
|
|
37733
37892
|
/**
|
|
@@ -40398,7 +40557,170 @@ export const CountingSectionListBoxExample: React.FC<{
|
|
|
40398
40557
|
/>
|
|
40399
40558
|
)}
|
|
40400
40559
|
</CountingExample>
|
|
40401
|
-
);`},similarTo:[],figmaUrl:null},
|
|
40560
|
+
);`},similarTo:[],figmaUrl:null},VideoPlayer:{id:"core-media-videoplayer",breadcrumb:"Core/Media/VideoPlayer",importStatement:"import { VideoPlayer } from '@baseline-ui/core';",description:"`VideoPlayer` is an accessible video player with play, pause, seek, elapsed-time display and full screen for any browser-supported video source. The controls sit over the bottom of the video and hide while it plays. Use it to embed recordings, clips, or other video assets directly in your interface.",documentation:`\`VideoPlayer\` is an accessible video player with play, pause, seek, elapsed-time display and full screen for any browser-supported video source. The controls sit over the bottom of the video and hide while it plays. Use it to embed recordings, clips, or other video assets directly in your interface.
|
|
40561
|
+
|
|
40562
|
+
* Play and pause video files
|
|
40563
|
+
* Seek through video files
|
|
40564
|
+
* Display the current time and duration of the video file
|
|
40565
|
+
* Announces the position to screen readers after a seek, in words where the browser supports \`Intl.DurationFormat\` and as a clock time (\`01:05\`) otherwise
|
|
40566
|
+
* Show a spinner until the video's metadata has loaded
|
|
40567
|
+
* Full screen, where the browser allows it
|
|
40568
|
+
* Controls hide after a short delay while the video plays, and return on pointer movement or a tap
|
|
40569
|
+
* Built on top of the native \`<video>\` element so all the file formats supported by the browser are supported
|
|
40570
|
+
* Exposed to screen readers via ARIA attributes
|
|
40571
|
+
* Supports mouse, keyboard, and touch interactions
|
|
40572
|
+
|
|
40573
|
+
\`\`\`jsx
|
|
40574
|
+
import { VideoPlayer } from "@baseline-ui/core";
|
|
40575
|
+
|
|
40576
|
+
function App() {
|
|
40577
|
+
return (
|
|
40578
|
+
<VideoPlayer
|
|
40579
|
+
sources={[
|
|
40580
|
+
{
|
|
40581
|
+
url: "movie.mp4",
|
|
40582
|
+
type: "video/mp4",
|
|
40583
|
+
},
|
|
40584
|
+
]}
|
|
40585
|
+
aria-label="Product tour"
|
|
40586
|
+
/>
|
|
40587
|
+
);
|
|
40588
|
+
}
|
|
40589
|
+
\`\`\`
|
|
40590
|
+
|
|
40591
|
+
Pass \`poster\` to show an image until playback starts.
|
|
40592
|
+
|
|
40593
|
+
While the video plays, the controls hide once the pointer has been still for \`controlsHideDelay\` milliseconds (3000 by default). Pointer movement or a tap brings them back. They stay visible while the video is paused or loading, while a pointer is held down on the player, and while keyboard focus is inside them. The player root exposes the state as \`data-controls-visible\`.
|
|
40594
|
+
|
|
40595
|
+
The mute button turns the sound off and on, and follows the video's \`muted\` state when other code changes it.
|
|
40596
|
+
|
|
40597
|
+
The full screen button only appears in browsers that allow full screen. It makes the whole player, not only the video, fill the screen, so the controls remain available.`,props:`interface VideoPlayerProps {
|
|
40598
|
+
/**
|
|
40599
|
+
* The sources of the video file. The \`url\` is the URL of the video file, and
|
|
40600
|
+
* the \`type\` is the MIME type of the video file.
|
|
40601
|
+
*
|
|
40602
|
+
* \`\`\`tsx
|
|
40603
|
+
* <VideoPlayer
|
|
40604
|
+
* sources={[
|
|
40605
|
+
* { url: "/movie.mp4", type: "video/mp4" },
|
|
40606
|
+
* { url: "/movie.webm", type: "video/webm" },
|
|
40607
|
+
* ]}
|
|
40608
|
+
* />
|
|
40609
|
+
* \`\`\`
|
|
40610
|
+
*/
|
|
40611
|
+
sources: {
|
|
40612
|
+
url: string;
|
|
40613
|
+
type: string;
|
|
40614
|
+
}[]
|
|
40615
|
+
/**
|
|
40616
|
+
* The URL of an image shown on the video until playback starts.
|
|
40617
|
+
*/
|
|
40618
|
+
poster?: string
|
|
40619
|
+
/**
|
|
40620
|
+
* How long, in milliseconds, the controls stay visible after the last pointer
|
|
40621
|
+
* movement or tap while the video plays. The controls always stay visible
|
|
40622
|
+
* while the video is paused or loading, while a pointer is held down on the
|
|
40623
|
+
* player, and while keyboard focus is inside them.
|
|
40624
|
+
*
|
|
40625
|
+
* @default 3000
|
|
40626
|
+
*/
|
|
40627
|
+
controlsHideDelay?: number
|
|
40628
|
+
/**
|
|
40629
|
+
* Overrides the accessible name of the button that starts video playback.
|
|
40630
|
+
*
|
|
40631
|
+
* Message id: \`bui.videoPlayer.play\`.
|
|
40632
|
+
*
|
|
40633
|
+
* @default "Play"
|
|
40634
|
+
*/
|
|
40635
|
+
playLabel?: string
|
|
40636
|
+
/**
|
|
40637
|
+
* Overrides the accessible name of the button that pauses video playback.
|
|
40638
|
+
*
|
|
40639
|
+
* Message id: \`bui.videoPlayer.pause\`.
|
|
40640
|
+
*
|
|
40641
|
+
* @default "Pause"
|
|
40642
|
+
*/
|
|
40643
|
+
pauseLabel?: string
|
|
40644
|
+
/**
|
|
40645
|
+
* Overrides the accessible name of the slider used to seek through the
|
|
40646
|
+
* video.
|
|
40647
|
+
*
|
|
40648
|
+
* Message id: \`bui.videoPlayer.videoTimeline\`.
|
|
40649
|
+
*
|
|
40650
|
+
* @default "Video timeline"
|
|
40651
|
+
*/
|
|
40652
|
+
videoTimelineLabel?: string
|
|
40653
|
+
/**
|
|
40654
|
+
* Overrides the accessible name of the spinner shown while the video is
|
|
40655
|
+
* loading.
|
|
40656
|
+
*
|
|
40657
|
+
* Message id: \`bui.videoPlayer.loading\`.
|
|
40658
|
+
*
|
|
40659
|
+
* @default "Loading video"
|
|
40660
|
+
*/
|
|
40661
|
+
loadingLabel?: string
|
|
40662
|
+
/**
|
|
40663
|
+
* Overrides the accessible name of the button that turns off the sound.
|
|
40664
|
+
*
|
|
40665
|
+
* Message id: \`bui.videoPlayer.mute\`.
|
|
40666
|
+
*
|
|
40667
|
+
* @default "Mute"
|
|
40668
|
+
*/
|
|
40669
|
+
muteLabel?: string
|
|
40670
|
+
/**
|
|
40671
|
+
* Overrides the accessible name of the button that turns the sound back on.
|
|
40672
|
+
*
|
|
40673
|
+
* Message id: \`bui.videoPlayer.unmute\`.
|
|
40674
|
+
*
|
|
40675
|
+
* @default "Unmute"
|
|
40676
|
+
*/
|
|
40677
|
+
unmuteLabel?: string
|
|
40678
|
+
/**
|
|
40679
|
+
* Overrides the accessible name of the button that makes the player fill the
|
|
40680
|
+
* screen.
|
|
40681
|
+
*
|
|
40682
|
+
* Message id: \`bui.videoPlayer.enterFullScreen\`.
|
|
40683
|
+
*
|
|
40684
|
+
* @default "Enter full screen"
|
|
40685
|
+
*/
|
|
40686
|
+
enterFullScreenLabel?: string
|
|
40687
|
+
/**
|
|
40688
|
+
* Overrides the accessible name of the button that leaves full screen.
|
|
40689
|
+
*
|
|
40690
|
+
* Message id: \`bui.videoPlayer.exitFullScreen\`.
|
|
40691
|
+
*
|
|
40692
|
+
* @default "Exit full screen"
|
|
40693
|
+
*/
|
|
40694
|
+
exitFullScreenLabel?: string
|
|
40695
|
+
/**
|
|
40696
|
+
* Overrides the screen reader announcement made when video playback starts.
|
|
40697
|
+
*
|
|
40698
|
+
* Message id: \`bui.useMedia.playing\`.
|
|
40699
|
+
*
|
|
40700
|
+
* @default "Playing"
|
|
40701
|
+
*/
|
|
40702
|
+
playingLabel?: string
|
|
40703
|
+
/**
|
|
40704
|
+
* Overrides the screen reader announcement made when video playback is
|
|
40705
|
+
* paused.
|
|
40706
|
+
*
|
|
40707
|
+
* Message id: \`bui.useMedia.paused\`.
|
|
40708
|
+
*
|
|
40709
|
+
* @default "Paused"
|
|
40710
|
+
*/
|
|
40711
|
+
pausedLabel?: string
|
|
40712
|
+
}`,stories:{usage:[{id:"core-media-videoplayer--basic",name:"Basic",snippet:`const Basic = () => <VideoPlayer
|
|
40713
|
+
aria-label="Big Buck Bunny"
|
|
40714
|
+
sources={[
|
|
40715
|
+
{ url: "video.webm", type: "video/webm" },
|
|
40716
|
+
{ url: "video.mp4", type: "video/mp4" },
|
|
40717
|
+
]} />;`},{id:"core-media-videoplayer--with-poster",name:"With Poster",snippet:`const WithPoster = () => <VideoPlayer
|
|
40718
|
+
aria-label="Big Buck Bunny"
|
|
40719
|
+
sources={[
|
|
40720
|
+
{ url: "video.webm", type: "video/webm" },
|
|
40721
|
+
{ url: "video.mp4", type: "video/mp4" },
|
|
40722
|
+
]}
|
|
40723
|
+
poster="poster.jpg" />;`}],implementation:""},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\`.
|
|
40402
40724
|
|
|
40403
40725
|
* Efficient rendering for very large collections
|
|
40404
40726
|
* Preset layout options for list boxes, tree views, and image galleries
|
|
@@ -41314,16 +41636,18 @@ const migrated = Object.fromEntries(
|
|
|
41314
41636
|
Review the ambiguous ones by hand \u2014 each deserves its own translation:
|
|
41315
41637
|
|
|
41316
41638
|
| Bare ID | Also translates |
|
|
41317
|
-
| ----------- |
|
|
41639
|
+
| ----------- | -------------------------------------------------------------------------------------------------- |
|
|
41318
41640
|
| \`close\` | \`bui.alertDialog.close\`, \`bui.drawer.close\`, \`bui.editor.close\`, \`bui.inlineAlert.close\` |
|
|
41319
41641
|
| \`more\` | \`bui.buttonSelect.more\`, \`bui.select.more\`, \`bui.toolbar.more\` |
|
|
41320
41642
|
| \`cancel\` | \`bui.colorInput.cancel\`, \`bui.editor.cancel\`, \`bui.imageGallery.cancel\` |
|
|
41321
41643
|
| \`redo\` | \`bui.editor.redo\`, \`bui.freehandCanvas.redo\` |
|
|
41322
41644
|
| \`selectAll\` | \`bui.editor.selectAll\`, \`bui.select.selectAll\` |
|
|
41323
41645
|
| \`undo\` | \`bui.editor.undo\`, \`bui.freehandCanvas.undo\` |
|
|
41324
|
-
| \`loading\` | \`bui.fileList.loading\`, \`bui.imageGallery.loading\`, \`bui.table.loading\` |
|
|
41646
|
+
| \`loading\` | \`bui.fileList.loading\`, \`bui.imageGallery.loading\`, \`bui.table.loading\`, \`bui.videoPlayer.loading\` |
|
|
41325
41647
|
| \`nextPage\` | \`bui.pagination.nextPage\`, \`bui.taggedPagination.nextPage\` |
|
|
41326
|
-
| \`prevPage\` | \`bui.pagination.prevPage\`, \`bui.taggedPagination.prevPage\`
|
|
41648
|
+
| \`prevPage\` | \`bui.pagination.prevPage\`, \`bui.taggedPagination.prevPage\` |
|
|
41649
|
+
| \`pause\` | \`bui.audioPlayer.pause\`, \`bui.videoPlayer.pause\` |
|
|
41650
|
+
| \`play\` | \`bui.audioPlayer.play\`, \`bui.videoPlayer.play\` |`,styling:`# Styling with Sprinkles
|
|
41327
41651
|
|
|
41328
41652
|
Baseline UI provides a powerful, type-safe styling system built on top of [vanilla-extract sprinkles](https://vanilla-extract.style/documentation/packages/sprinkles/).
|
|
41329
41653
|
|
|
@@ -42246,7 +42570,7 @@ padding={[null, "lg", "xl"]}
|
|
|
42246
42570
|
|
|
42247
42571
|
* [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
|
|
42248
42572
|
* [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
|
|
42249
|
-
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var m={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--expanded","core-collections-filelist--expanded-disabled","core-collections-filelist--grid","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-expanded","core-collections-filelist--many-grid","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-description","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-image--basic","core-content-image--contain","core-content-image--fallback","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--inline-content","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--compact","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--samples-inside-disabled","core-forms-fileuploader--samples-inside-grid","core-forms-fileuploader--samples-outside","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-completed-step","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.10.1"};var b=`
|
|
42573
|
+
* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var m={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundIcon","SoundMutedIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--expanded","core-collections-filelist--expanded-disabled","core-collections-filelist--grid","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-expanded","core-collections-filelist--many-grid","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-description","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-image--basic","core-content-image--contain","core-content-image--fallback","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--inline-content","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--compact","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--samples-inside-disabled","core-forms-fileuploader--samples-inside-grid","core-forms-fileuploader--samples-outside","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-media-videoplayer--basic","core-media-videoplayer--with-poster","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-completed-step","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.11.0"};var b=`
|
|
42250
42574
|
# Baseline UI MCP Server Guidelines
|
|
42251
42575
|
|
|
42252
42576
|
This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
|
|
@@ -42263,11 +42587,12 @@ This MCP server provides AI assistants with structured access to Baseline UI's c
|
|
|
42263
42587
|
Access the following resources through the MCP server:
|
|
42264
42588
|
|
|
42265
42589
|
- **list_components**: Browse all available components with descriptions and similar component suggestions
|
|
42266
|
-
- **list_icons**: Complete icon library organized by size (
|
|
42590
|
+
- **list_icons**: Complete icon library organized by size (8, 12, 16, 20, 24, 36)
|
|
42267
42591
|
- **getting_started**: Quick start guide for integrating Baseline UI into new projects
|
|
42268
42592
|
- **theming**: Comprehensive theming system documentation for customizing the design system
|
|
42269
42593
|
- **nutrient_web_viewer_theming**: Specialized theming guide for the Nutrient Web Viewer
|
|
42270
42594
|
- **internationalization**: Guidelines for implementing multi-language support
|
|
42595
|
+
- **styling**: Styling patterns, sprinkles usage, and design tokens
|
|
42271
42596
|
- **guidelines**: This resource with best practices and recommendations
|
|
42272
42597
|
|
|
42273
42598
|
## Styling Guidelines
|
|
@@ -42289,15 +42614,7 @@ When recommending styling or customization approaches:
|
|
|
42289
42614
|
4. **Theming Support**: Design systems with themes enabled; use the theming guides for color scheme customization
|
|
42290
42615
|
5. **Browser Compatibility**: Ensure components are used in browser environments with required APIs
|
|
42291
42616
|
6. **Box Component Usage**: Use the Box component to wrap all components that need to be styled with the design system. The Box component is a generic container component that can be used to wrap other components. It is used to provide a consistent API for layout and spacing. You can use any sprinkle as a prop to add styling to the box.
|
|
42292
|
-
`,l=`
|
|
42293
|
-
A list of available components with descriptions and similar component suggestions. In case don't find the exact component you are looking for, you can look for similar components in the "Similar To" column. The "Similar To" column is a list of components that are similar to the one you are looking for.
|
|
42294
|
-
|
|
42295
|
-
A component can be imported using:
|
|
42296
|
-
|
|
42297
|
-
\`\`\`tsx
|
|
42298
|
-
import { ComponentName } from "@baseline-ui/core";
|
|
42299
|
-
\`\`\`
|
|
42300
|
-
`,c=`
|
|
42617
|
+
`,l='\nA list of available components with descriptions and similar component suggestions. In case don\'t find the exact component you are looking for, you can look for similar components in the "Similar To" column. The "Similar To" column is a list of components that are similar to the one you are looking for.\n\nA component can be imported using: \n\n```tsx\nimport { ComponentName } from "@baseline-ui/core";\n```\n\nChart components (`BarChart`, `LineChart`, `PieChart`) are imported from `@baseline-ui/charts` instead.\n',d=`
|
|
42301
42618
|
A complete icon library organized by size with import instructions. The icons are organized by size and can be imported using the import statement provided.
|
|
42302
42619
|
|
|
42303
42620
|
An icon can be imported using:
|
|
@@ -42320,40 +42637,42 @@ Detailed documentation, props, and story IDs for any Baseline UI component. This
|
|
|
42320
42637
|
|
|
42321
42638
|
The response is a JSON object containing:
|
|
42322
42639
|
|
|
42323
|
-
- **
|
|
42324
|
-
- **
|
|
42325
|
-
|
|
42326
|
-
|
|
42327
|
-
|
|
42328
|
-
|
|
42329
|
-
- **
|
|
42330
|
-
|
|
42331
|
-
- **
|
|
42332
|
-
|
|
42333
|
-
|
|
42334
|
-
|
|
42335
|
-
|
|
42640
|
+
- **id**: Storybook component ID (e.g., "core-buttons-actionbutton")
|
|
42641
|
+
- **breadcrumb**: Storybook docs path (e.g., "Core/Buttons/ActionButton"); omitted when the component has no docs page
|
|
42642
|
+
- **importStatement**: Import lines copied from the component's stories; they can include story helpers or omit the component
|
|
42643
|
+
- **documentation**: Markdown documentation, or null when the component has no docs page
|
|
42644
|
+
- **props**: A single TypeScript interface string, not a JSON array, with descriptions and defaults in its doc comments; empty when no prop types could be extracted
|
|
42645
|
+
- **stories**: An object with:
|
|
42646
|
+
- **usage**: Array of stories, each with:
|
|
42647
|
+
- **id**: Story ID (can be used with get_story_url)
|
|
42648
|
+
- **name**: Human-readable name of the story
|
|
42649
|
+
- **snippet**: Source of the story; absent when \`error\` is set
|
|
42650
|
+
- **description**: What this story demonstrates, when it has a description
|
|
42651
|
+
- **warning**: Why the snippet may be incomplete, when it is
|
|
42652
|
+
- **error**: An object with \`name\` and \`message\` saying why no snippet could be extracted, when none could
|
|
42653
|
+
- **implementation**: A single string with the source of the component's shared example components; empty when it has none
|
|
42336
42654
|
|
|
42337
42655
|
## Usage
|
|
42338
42656
|
|
|
42339
42657
|
Use this resource to:
|
|
42340
42658
|
- Understand all available props and their types for a component
|
|
42341
42659
|
- Check required vs optional props
|
|
42342
|
-
-
|
|
42660
|
+
- Read default values and usage examples
|
|
42343
42661
|
- Find interactive stories to see components in action
|
|
42344
42662
|
- Verify accessibility features and behavior
|
|
42345
42663
|
|
|
42346
42664
|
## Import Format
|
|
42347
42665
|
|
|
42348
|
-
Components
|
|
42666
|
+
Components are imported from \`@baseline-ui/core\`, and chart components from \`@baseline-ui/charts\`:
|
|
42349
42667
|
\`\`\`tsx
|
|
42350
42668
|
import { ComponentName } from "@baseline-ui/core";
|
|
42669
|
+
import { ChartName } from "@baseline-ui/charts";
|
|
42351
42670
|
\`\`\`
|
|
42352
42671
|
`,f=`
|
|
42353
42672
|
Generate a live demo URL for a Baseline UI story. Use a story ID from the Storybook index; the component info tool lists them for each component. The response is the URL, or an error result with suggestions when the story id is unknown. You can use this URL to understand the structure of the component and how to customize it.
|
|
42354
42673
|
`,y=`
|
|
42355
42674
|
Get the Figma URL for a given component. The response is the URL, or an error result when the component has no linked Figma design. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
|
|
42356
|
-
`,
|
|
42675
|
+
`,c=`
|
|
42357
42676
|
Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
|
|
42358
42677
|
|
|
42359
42678
|
## Usage
|
|
@@ -42369,8 +42688,8 @@ List all 8 available resources in the Baseline UI MCP server with their descript
|
|
|
42369
42688
|
## Available Resources
|
|
42370
42689
|
|
|
42371
42690
|
The Baseline UI MCP server includes:
|
|
42372
|
-
1. **list_components** - Complete list of all components with
|
|
42373
|
-
2. **list_icons** -
|
|
42691
|
+
1. **list_components** - Complete list of all components with descriptions and similar suggestions
|
|
42692
|
+
2. **list_icons** - The full icon catalog organized by size (8, 12, 16, 20, 24, 36)
|
|
42374
42693
|
3. **getting_started** - Installation, setup, and basic usage guide
|
|
42375
42694
|
4. **theming** - Custom themes, color schemes, and theme implementation
|
|
42376
42695
|
5. **styling** - Styling patterns, sprinkles usage, and design tokens
|
|
@@ -42401,15 +42720,15 @@ Use this tool to:
|
|
|
42401
42720
|
- Consult **list_components** to find the right component for your needs
|
|
42402
42721
|
- Reference **theming** for custom design systems
|
|
42403
42722
|
- Check **styling** for CSS and design token guidance
|
|
42404
|
-
`;var k=`# List of available components in Baseline UI design system
|
|
42723
|
+
`;var k=n=>n.replaceAll(/\s+/g," ").trim().replaceAll("|",String.raw`\|`),P=`# List of available components in Baseline UI design system
|
|
42405
42724
|
| Name | Description | Similar To |
|
|
42406
42725
|
| --- | --- | --- |
|
|
42407
|
-
${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${e}|${t?.join(", ")||""}|`).join(`
|
|
42726
|
+
${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${k(e)}|${t?.join(", ")||""}|`).join(`
|
|
42408
42727
|
`)}
|
|
42409
|
-
`,
|
|
42728
|
+
`,D=Object.entries(m).map(([n,e])=>`## ${n}
|
|
42410
42729
|
|
|
42411
42730
|
${e.map(t=>"- "+t).join(`
|
|
42412
42731
|
`)}`).join(`
|
|
42413
42732
|
|
|
42414
|
-
`),
|
|
42415
|
-
export{
|
|
42733
|
+
`),B=new Set(r);function A(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function j(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:D}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!B.has(t)){let a=A(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:d,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:c,mimeType:"text/markdown"}],null,2)}]})),n}
|
|
42734
|
+
export{j as a};
|