@baseline-ui/mcp 2.1.0 → 2.4.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.
@@ -2348,6 +2348,14 @@ contentClassName?: string
2348
2348
  * The class name for the close button.
2349
2349
  */
2350
2350
  closeButtonClassName?: string
2351
+ /**
2352
+ * Overrides the accessible label of the close button (X) that dismisses
2353
+ * the dialog. This is distinct from \`cancelLabel\`, which is the visible
2354
+ * text of the footer cancel button.
2355
+ *
2356
+ * Message id: \`bui.alertDialog.close\`. Defaults to \`"Close"\`.
2357
+ */
2358
+ closeLabel?: string
2351
2359
  /**
2352
2360
  * The class name for the button group wrapper.
2353
2361
  */
@@ -2535,6 +2543,40 @@ sources: {
2535
2543
  * @default "lg"
2536
2544
  */
2537
2545
  size?: "sm" | "lg"
2546
+ /**
2547
+ * Overrides the accessible name of the button that starts audio playback.
2548
+ *
2549
+ * Message id: \`bui.audioPlayer.play\`. Defaults to \`"Play"\`.
2550
+ */
2551
+ playLabel?: string
2552
+ /**
2553
+ * Overrides the accessible name of the button that pauses audio playback.
2554
+ *
2555
+ * Message id: \`bui.audioPlayer.pause\`. Defaults to \`"Pause"\`.
2556
+ */
2557
+ pauseLabel?: string
2558
+ /**
2559
+ * Overrides the accessible name of the slider used to seek through the
2560
+ * audio track.
2561
+ *
2562
+ * Message id: \`bui.audioPlayer.audioTimeline\`. Defaults to
2563
+ * \`"Audio timeline"\`.
2564
+ */
2565
+ audioTimelineLabel?: string
2566
+ /**
2567
+ * Overrides the screen reader announcement made when audio playback
2568
+ * starts.
2569
+ *
2570
+ * Message id: \`bui.useMedia.playing\`. Defaults to \`"Playing"\`.
2571
+ */
2572
+ playingLabel?: string
2573
+ /**
2574
+ * Overrides the screen reader announcement made when audio playback is
2575
+ * paused.
2576
+ *
2577
+ * Message id: \`bui.useMedia.paused\`. Defaults to \`"Paused"\`.
2578
+ */
2579
+ pausedLabel?: string
2538
2580
  }`,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:""},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.",documentation:`\`Avatar\` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.
2539
2581
 
2540
2582
  \`\`\`jsx
@@ -3171,6 +3213,42 @@ title?: string
3171
3213
  headerVariant?: | "title"
3172
3214
  | "selectMonth"
3173
3215
  | "selectMonthAndYear"
3216
+ /**
3217
+ * Overrides the accessible label of the button that moves the calendar forward one month.
3218
+ *
3219
+ * Message id: \`bui.calendar.nextMonth\`. Defaults to \`"Next month"\`.
3220
+ */
3221
+ nextMonthLabel?: string
3222
+ /**
3223
+ * Overrides the accessible label of the button that moves the calendar back one month.
3224
+ *
3225
+ * Message id: \`bui.calendar.previousMonth\`. Defaults to \`"Previous month"\`.
3226
+ */
3227
+ previousMonthLabel?: string
3228
+ /**
3229
+ * Overrides the accessible label of the button that moves the calendar forward one year.
3230
+ *
3231
+ * Message id: \`bui.calendar.nextYear\`. Defaults to \`"Next year"\`.
3232
+ */
3233
+ nextYearLabel?: string
3234
+ /**
3235
+ * Overrides the accessible label of the button that moves the calendar back one year.
3236
+ *
3237
+ * Message id: \`bui.calendar.previousYear\`. Defaults to \`"Previous year"\`.
3238
+ */
3239
+ previousYearLabel?: string
3240
+ /**
3241
+ * Overrides the accessible label of the dropdown that jumps the calendar to a chosen month.
3242
+ *
3243
+ * Message id: \`bui.calendar.selectMonth\`. Defaults to \`"Select month"\`.
3244
+ */
3245
+ selectMonthLabel?: string
3246
+ /**
3247
+ * Overrides the accessible label of the dropdown that jumps the calendar to a chosen year.
3248
+ *
3249
+ * Message id: \`bui.calendar.selectYear\`. Defaults to \`"Select year"\`.
3250
+ */
3251
+ selectYearLabel?: string
3174
3252
  }`,stories:{usage:[{id:"core-forms-calendar--default",name:"Default",snippet:'const Default = () => <Calendar size="sm" aria-label="Event date" />;'},{id:"core-forms-calendar--with-title",name:"With Title",snippet:'const WithTitle = () => <Calendar size="sm" aria-label="Event date" title="Date" />;'},{id:"core-forms-calendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <Calendar
3175
3253
  size="sm"
3176
3254
  aria-label="Event date"
@@ -3609,6 +3687,42 @@ title?: string
3609
3687
  headerVariant?: | "title"
3610
3688
  | "selectMonth"
3611
3689
  | "selectMonthAndYear"
3690
+ /**
3691
+ * Overrides the accessible label of the button that moves the calendar forward one month.
3692
+ *
3693
+ * Message id: \`bui.calendar.nextMonth\`. Defaults to \`"Next month"\`.
3694
+ */
3695
+ nextMonthLabel?: string
3696
+ /**
3697
+ * Overrides the accessible label of the button that moves the calendar back one month.
3698
+ *
3699
+ * Message id: \`bui.calendar.previousMonth\`. Defaults to \`"Previous month"\`.
3700
+ */
3701
+ previousMonthLabel?: string
3702
+ /**
3703
+ * Overrides the accessible label of the button that moves the calendar forward one year.
3704
+ *
3705
+ * Message id: \`bui.calendar.nextYear\`. Defaults to \`"Next year"\`.
3706
+ */
3707
+ nextYearLabel?: string
3708
+ /**
3709
+ * Overrides the accessible label of the button that moves the calendar back one year.
3710
+ *
3711
+ * Message id: \`bui.calendar.previousYear\`. Defaults to \`"Previous year"\`.
3712
+ */
3713
+ previousYearLabel?: string
3714
+ /**
3715
+ * Overrides the accessible label of the dropdown that jumps the calendar to a chosen month.
3716
+ *
3717
+ * Message id: \`bui.calendar.selectMonth\`. Defaults to \`"Select month"\`.
3718
+ */
3719
+ selectMonthLabel?: string
3720
+ /**
3721
+ * Overrides the accessible label of the dropdown that jumps the calendar to a chosen year.
3722
+ *
3723
+ * Message id: \`bui.calendar.selectYear\`. Defaults to \`"Select year"\`.
3724
+ */
3725
+ selectYearLabel?: string
3612
3726
  }`,stories:{usage:[{id:"core-forms-rangecalendar--default",name:"Default",snippet:'const Default = () => <RangeCalendar size="sm" aria-label="Trip dates" />;'},{id:"core-forms-rangecalendar--with-title",name:"With Title",snippet:'const WithTitle = () => <RangeCalendar size="sm" aria-label="Trip dates" title="Date" />;'},{id:"core-forms-rangecalendar--with-default-value",name:"With Default Value",snippet:`const WithDefaultValue = () => <RangeCalendar
3613
3727
  size="sm"
3614
3728
  aria-label="Trip dates"
@@ -4057,7 +4171,9 @@ pickerMode?: "active" | "lazy"
4057
4171
  */
4058
4172
  storePickedColorKey?: string
4059
4173
  /**
4060
- * The label to show on the add color button.
4174
+ * The label to show on the add color button that opens the color picker
4175
+ * for defining a new custom color. Not to be confused with \`addLabel\`,
4176
+ * which labels the "Add" confirmation button inside that picker.
4061
4177
  *
4062
4178
  * @default Add Color
4063
4179
  */
@@ -4074,6 +4190,52 @@ removeColorButtonLabel?: string
4074
4190
  * @default Custom Colors
4075
4191
  */
4076
4192
  customColorsLabel?: string
4193
+ /**
4194
+ * Overrides the label of the button that saves the custom color being
4195
+ * defined into the palette (shown inside the new-color picker in
4196
+ * \`pickerMode="lazy"\`). Not to be confused with \`addColorButtonLabel\`,
4197
+ * which labels the button that opens that picker.
4198
+ *
4199
+ * Message id: \`bui.colorInput.add\`. Defaults to \`"Add"\`.
4200
+ */
4201
+ addLabel?: string
4202
+ /**
4203
+ * Overrides the label of the button that abandons the custom color being
4204
+ * defined (shown inside the new-color picker in \`pickerMode="lazy"\`).
4205
+ *
4206
+ * Message id: \`bui.colorInput.cancel\`. Defaults to \`"Cancel"\`.
4207
+ */
4208
+ cancelLabel?: string
4209
+ /**
4210
+ * Overrides the accessible name of the dialog holding the color picker
4211
+ * used to define a new custom color, in \`pickerMode="lazy"\`.
4212
+ *
4213
+ * Message id: \`bui.colorInput.newColor\`. Defaults to \`"New Custom Color"\`.
4214
+ */
4215
+ newColorLabel?: string
4216
+ /**
4217
+ * Overrides the accessible name of the control that switches the notation
4218
+ * a color is entered in (HEX, RGB).
4219
+ *
4220
+ * Message id: \`bui.colorInput.colorFormat\`. Defaults to \`"Color Format"\`.
4221
+ */
4222
+ colorFormatLabel?: string
4223
+ /**
4224
+ * Overrides the accessible name of the group of predefined color swatches.
4225
+ *
4226
+ * Message id: \`bui.colorInput.colorPresets\`. Defaults to \`"Color Presets"\`.
4227
+ */
4228
+ colorPresetsLabel?: string
4229
+ /**
4230
+ * Overrides the label of the swatch that clears the color selection, and the
4231
+ * accessible name of the trigger swatch while no color is set. Triggers that
4232
+ * render no swatch are unaffected; a custom \`renderTriggerButton\` must
4233
+ * forward the \`noneLabel\` it receives.
4234
+ *
4235
+ * Message ids: \`bui.colorInput.noColor\` (preset swatch),
4236
+ * \`bui.colorSwatch.none\` (trigger swatch). Both default to \`"None"\`.
4237
+ */
4238
+ noColorLabel?: string
4077
4239
  /**
4078
4240
  * An optional function to render the custom trigger button.
4079
4241
  *
@@ -4087,7 +4249,10 @@ renderTriggerButton?: (
4087
4249
  colorName?: string | boolean;
4088
4250
  triggerProps: AriaButtonProps<"button">;
4089
4251
  labelId?: string;
4090
- } & Pick<ColorSwatchProps, "isIndeterminate" | "indeterminateIcon">,
4252
+ } & Pick<
4253
+ ColorSwatchProps,
4254
+ "isIndeterminate" | "indeterminateIcon" | "noneLabel"
4255
+ >,
4091
4256
  ) => React.JSX.Element
4092
4257
  /**
4093
4258
  * Handler that is called when the user stops dragging or clicking on the
@@ -4101,6 +4266,20 @@ onChangeEnd?: (color: Color | null) => void
4101
4266
  * @default false
4102
4267
  */
4103
4268
  isIndeterminate?: boolean
4269
+ /**
4270
+ * Overrides the accessible name of the color trigger when the current
4271
+ * selection spans several different colors (\`isIndeterminate\` is \`true\`).
4272
+ *
4273
+ * Message id: \`bui.colorInput.indeterminate\`. Defaults to \`"Indeterminate"\`.
4274
+ */
4275
+ indeterminateLabel?: string
4276
+ /**
4277
+ * Overrides the label of the swatch representing a fully transparent
4278
+ * color.
4279
+ *
4280
+ * Message id: \`bui.colorInput.transparent\`. Defaults to \`"Transparent"\`.
4281
+ */
4282
+ transparentLabel?: string
4104
4283
  /**
4105
4284
  * Handler that is called when the user presses the trigger button. This can
4106
4285
  * be used to track events like clicks on the trigger button.
@@ -4373,6 +4552,13 @@ isIndeterminate?: boolean
4373
4552
  * @default HelpIcon
4374
4553
  */
4375
4554
  indeterminateIcon?: React.FC<IconProps> | null
4555
+ /**
4556
+ * Overrides the accessible label used when the swatch has no colour
4557
+ * applied.
4558
+ *
4559
+ * Message id: \`bui.colorSwatch.none\`. Defaults to \`"None"\`.
4560
+ */
4561
+ noneLabel?: string
4376
4562
  }`,stories:{usage:[{id:"core-content-colorswatch--basic",name:"Basic",snippet:'const Basic = () => <ColorSwatch color="#800800" />;'},{id:"core-content-colorswatch--variants",name:"Variants",snippet:`const Variants = (args) => (
4377
4563
  <VariantViewer
4378
4564
  header={["Enabled", "Focused", "Disabled"]}
@@ -5715,6 +5901,13 @@ warningMessage?: string
5715
5901
  * @default "none"
5716
5902
  */
5717
5903
  pickerType?: "none" | "presentation" | "calendar"
5904
+ /**
5905
+ * Overrides the accessible label of the button that opens the calendar
5906
+ * picker popover.
5907
+ *
5908
+ * Message id: \`bui.dateField.openCalendar\`. Defaults to \`"Open calendar"\`.
5909
+ */
5910
+ openCalendarLabel?: string
5718
5911
  }`,stories:{usage:[{id:"core-forms-datefield--basic",name:"Basic",snippet:'const Basic = () => <DateField onChange={fn()} aria-label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--with-label",name:"With Label",snippet:'const WithLabel = () => <DateField onChange={fn()} label="Event Date" granularity="day" />;'},{id:"core-forms-datefield--variants",name:"Variants",snippet:`const Variants = (args) => (
5719
5912
  <VariantViewer<React.ComponentProps<typeof DateField>>
5720
5913
  cellStyle={{ minWidth: 300 }}
@@ -7303,6 +7496,12 @@ contentStyle?: React.CSSProperties
7303
7496
  * The class name of the content container.
7304
7497
  */
7305
7498
  contentClassName?: string
7499
+ /**
7500
+ * Overrides the accessible label of the close button.
7501
+ *
7502
+ * Message id: \`bui.drawer.close\`. Defaults to \`"Close"\`.
7503
+ */
7504
+ closeLabel?: string
7306
7505
  }`,stories:{usage:[{id:"core-overlays-drawer--basic",name:"Basic",snippet:'const Basic = () => <Drawer title=""><div style={{ height: 400 }} /></Drawer>;'},{id:"core-overlays-drawer--with-action",name:"With Action",snippet:`const WithAction = () => <Drawer
7307
7506
  action={{
7308
7507
  icon: EllipseIcon,
@@ -7534,6 +7733,182 @@ saveOnEnter?: boolean
7534
7733
  * @default true
7535
7734
  */
7536
7735
  autoLink?: boolean
7736
+ /**
7737
+ * Overrides the accessible name of the toolbar button that inserts an
7738
+ * @-mention, and the accessible name of the mention combobox it opens.
7739
+ *
7740
+ * Message id: \`bui.editor.mention\`. Defaults to \`"Mention"\`.
7741
+ */
7742
+ mentionLabel?: string
7743
+ /**
7744
+ * Overrides the accessible name of the rich text toolbar's Bold toggle, and
7745
+ * the matching row in the keyboard shortcut dialog.
7746
+ *
7747
+ * Message id: \`bui.editor.bold\`. Defaults to \`"Bold"\`.
7748
+ */
7749
+ boldLabel?: string
7750
+ /**
7751
+ * Overrides the accessible name of the rich text toolbar's Italic toggle,
7752
+ * and the matching row in the keyboard shortcut dialog.
7753
+ *
7754
+ * Message id: \`bui.editor.italic\`. Defaults to \`"Italic"\`.
7755
+ */
7756
+ italicLabel?: string
7757
+ /**
7758
+ * Overrides the accessible name of the rich text toolbar's Underline
7759
+ * toggle, and the matching row in the keyboard shortcut dialog.
7760
+ *
7761
+ * Message id: \`bui.editor.underline\`. Defaults to \`"Underline"\`.
7762
+ */
7763
+ underlineLabel?: string
7764
+ /**
7765
+ * Overrides the accessible name of the toolbar control that sets the
7766
+ * colour of the selected text.
7767
+ *
7768
+ * Message id: \`bui.editor.fontColor\`. Defaults to \`"Font color"\`.
7769
+ */
7770
+ fontColorLabel?: string
7771
+ /**
7772
+ * Overrides the accessible name of the toolbar control that sets the
7773
+ * highlight colour drawn behind the selected text.
7774
+ *
7775
+ * Message id: \`bui.editor.backgroundColor\`. Defaults to \`"Background color"\`.
7776
+ */
7777
+ backgroundColorLabel?: string
7778
+ /**
7779
+ * Overrides the title of the keyboard shortcut dialog, and the accessible
7780
+ * name of the toolbar button that opens it.
7781
+ *
7782
+ * Message id: \`bui.editor.help\`. Defaults to \`"Help"\`.
7783
+ */
7784
+ helpLabel?: string
7785
+ /**
7786
+ * Overrides the accessible name of the icon button that dismisses the
7787
+ * keyboard shortcut dialog.
7788
+ *
7789
+ * Message id: \`bui.editor.close\`. Defaults to \`"Close"\`.
7790
+ */
7791
+ closeLabel?: string
7792
+ /**
7793
+ * Overrides the "Action" column header of the keyboard shortcut dialog's
7794
+ * table.
7795
+ *
7796
+ * Message id: \`bui.editor.action\`. Defaults to \`"Action"\`.
7797
+ */
7798
+ actionLabel?: string
7799
+ /**
7800
+ * Overrides the "Shortcut" column header of the keyboard shortcut dialog's
7801
+ * table.
7802
+ *
7803
+ * Message id: \`bui.editor.shortcut\`. Defaults to \`"Shortcut"\`.
7804
+ */
7805
+ shortcutLabel?: string
7806
+ /**
7807
+ * Overrides the row label for the "move focus to the toolbar" command in
7808
+ * the keyboard shortcut dialog.
7809
+ *
7810
+ * Message id: \`bui.editor.toolbarFocus\`. Defaults to \`"Toolbar Focus"\`.
7811
+ */
7812
+ toolbarFocusLabel?: string
7813
+ /**
7814
+ * Overrides the row label for the "select all" command in the keyboard
7815
+ * shortcut dialog.
7816
+ *
7817
+ * Message id: \`bui.editor.selectAll\`. Defaults to \`"Select All"\`.
7818
+ */
7819
+ selectAllLabel?: string
7820
+ /**
7821
+ * Overrides the row label for the "cut" command in the keyboard shortcut
7822
+ * dialog.
7823
+ *
7824
+ * Message id: \`bui.editor.cut\`. Defaults to \`"Cut"\`.
7825
+ */
7826
+ cutLabel?: string
7827
+ /**
7828
+ * Overrides the row label for the "copy" command in the keyboard shortcut
7829
+ * dialog.
7830
+ *
7831
+ * Message id: \`bui.editor.copy\`. Defaults to \`"Copy"\`.
7832
+ */
7833
+ copyLabel?: string
7834
+ /**
7835
+ * Overrides the row label for the "paste" command in the keyboard shortcut
7836
+ * dialog.
7837
+ *
7838
+ * Message id: \`bui.editor.paste\`. Defaults to \`"Paste"\`.
7839
+ */
7840
+ pasteLabel?: string
7841
+ /**
7842
+ * Overrides the row label for the "undo" command in the keyboard shortcut
7843
+ * dialog.
7844
+ *
7845
+ * Message id: \`bui.editor.undo\`. Defaults to \`"Undo"\`.
7846
+ */
7847
+ undoLabel?: string
7848
+ /**
7849
+ * Overrides the row label for the "redo" command in the keyboard shortcut
7850
+ * dialog.
7851
+ *
7852
+ * Message id: \`bui.editor.redo\`. Defaults to \`"Redo"\`.
7853
+ */
7854
+ redoLabel?: string
7855
+ /**
7856
+ * Overrides the row label for the "open help dialog" command in the
7857
+ * keyboard shortcut dialog.
7858
+ *
7859
+ * Message id: \`bui.editor.openHelpDialog\`. Defaults to \`"Open Help Dialog"\`.
7860
+ */
7861
+ openHelpDialogLabel?: string
7862
+ /**
7863
+ * Overrides the row label for the "submit" command in the keyboard
7864
+ * shortcut dialog.
7865
+ *
7866
+ * Message id: \`bui.editor.submit\`. Defaults to \`"Submit"\`.
7867
+ */
7868
+ submitLabel?: string
7869
+ /**
7870
+ * Overrides the accessible name of the link popover's toolbar trigger
7871
+ * button.
7872
+ *
7873
+ * Message id: \`bui.editor.addLink\`. Defaults to \`"Add Link"\`.
7874
+ */
7875
+ addLinkLabel?: string
7876
+ /**
7877
+ * Overrides the label of the button that changes the URL of an existing
7878
+ * link, shown in the link popover.
7879
+ *
7880
+ * Message id: \`bui.editor.editLink\`. Defaults to \`"Edit Link"\`.
7881
+ */
7882
+ editLinkLabel?: string
7883
+ /**
7884
+ * Overrides the label of the button that unlinks the selected text, shown
7885
+ * in the link popover.
7886
+ *
7887
+ * Message id: \`bui.editor.removeLink\`. Defaults to \`"Remove Link"\`.
7888
+ */
7889
+ removeLinkLabel?: string
7890
+ /**
7891
+ * Overrides the label of the URL field in the link popover.
7892
+ *
7893
+ * Message id: \`bui.editor.linkAnnotation\`. Defaults to \`"Link"\`.
7894
+ */
7895
+ linkAnnotationLabel?: string
7896
+ /**
7897
+ * Overrides the label of the Cancel button in the link popover's edit mode.
7898
+ * Distinct from \`cancelButtonAriaLabel\`, which labels the editor footer's
7899
+ * Cancel button.
7900
+ *
7901
+ * Message id: \`bui.editor.cancel\`. Defaults to \`"Cancel"\`.
7902
+ */
7903
+ linkCancelLabel?: string
7904
+ /**
7905
+ * Overrides the label of the Save button in the link popover's edit mode.
7906
+ * Distinct from \`submitButtonAriaLabel\`, which labels the editor footer's
7907
+ * Save button.
7908
+ *
7909
+ * Message id: \`bui.editor.save\`. Defaults to \`"Save"\`.
7910
+ */
7911
+ linkSaveLabel?: string
7537
7912
  }`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
7538
7913
  placeholder="Placeholder"
7539
7914
  aria-label="Editor"
@@ -8033,6 +8408,36 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
8033
8408
  editorHandle={editorHandleRef}
8034
8409
  />
8035
8410
  );
8411
+ };
8412
+
8413
+ /**
8414
+ * The \`value\` is plain text, never the canonical HTML the editor serializes
8415
+ * back \u2014 canonicalizing it would stop reproducing the re-apply on every render.
8416
+ */
8417
+ export const EditorControlledPlainValueBesideInput = () => {
8418
+ const [body, setBody] = React.useState("Hello there");
8419
+ const [name, setName] = React.useState("");
8420
+
8421
+ return (
8422
+ <>
8423
+ <input
8424
+ aria-label="Recipient name"
8425
+ value={name}
8426
+ onChange={(event) => {
8427
+ setName(event.currentTarget.value);
8428
+ }}
8429
+ />
8430
+ <Editor
8431
+ enableRichText={true}
8432
+ value={body}
8433
+ // Inline on purpose: a stable handler would let Editor's React.memo
8434
+ // block the re-render this test needs.
8435
+ onChange={(next) => {
8436
+ setBody(next);
8437
+ }}
8438
+ />
8439
+ </>
8440
+ );
8036
8441
  };`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
8037
8442
  /**
8038
8443
  * The description to display below the input.
@@ -8244,6 +8649,27 @@ onRemove?: (id: string) => void
8244
8649
  * button or keyboard.
8245
8650
  */
8246
8651
  disabledKeys?: Iterable<string> | "all"
8652
+ /**
8653
+ * Overrides the accessible name of a file row while it is loading, and of
8654
+ * its spinner.
8655
+ *
8656
+ * Message id: \`bui.fileList.loading\`. Defaults to \`"Loading {fileName}"\`.
8657
+ * A string is used as-is, with no placeholder substitution. To include
8658
+ * \`fileName\`, pass a function \u2014 it receives \`{ fileName }\` and its return
8659
+ * value is used verbatim.
8660
+ */
8661
+ loadingLabel?: string | ((values: { fileName: string }) => string)
8662
+ /**
8663
+ * Overrides the accessible name of a removable file row, telling keyboard
8664
+ * users how to delete it.
8665
+ *
8666
+ * Message id: \`bui.fileList.removeHint\`. Defaults to
8667
+ * \`"{fileName}, press Delete or Backspace to remove"\`. A string is used
8668
+ * as-is, with no placeholder substitution. To include \`fileName\`, pass a
8669
+ * function \u2014 it receives \`{ fileName }\` and its return value is used
8670
+ * verbatim.
8671
+ */
8672
+ removeHintLabel?: string | ((values: { fileName: string }) => string)
8247
8673
  }`,stories:{usage:[{id:"core-collections-filelist--basic",name:"Basic",snippet:`const Basic = () => {
8248
8674
  const [items, setItems] = React.useState(args.items);
8249
8675
  React.useEffect(() => {
@@ -8372,7 +8798,7 @@ disabledKeys?: Iterable<string> | "all"
8372
8798
  import { ActionButton } from "../../ActionButton";
8373
8799
  import { FileList } from "../FileList";
8374
8800
 
8375
- import type { FileListItem } from "../FileList.types";
8801
+ import type { FileListItem, FileListProps } from "../FileList.types";
8376
8802
 
8377
8803
  export const defaultItems: FileListItem[] = [
8378
8804
  { id: "1", name: "report.pdf" },
@@ -8453,11 +8879,16 @@ export const UploadingFileList: React.FC = () => {
8453
8879
  interface BasicProps {
8454
8880
  onRemove?: (id: string) => void;
8455
8881
  disabledKeys?: Iterable<string> | "all";
8882
+ removeHintLabel?: FileListProps["removeHintLabel"];
8883
+ /** Playwright cannot serialize a function prop, so the callback form is built here. */
8884
+ useFunctionLabel?: boolean;
8456
8885
  }
8457
8886
 
8458
8887
  export const BasicFileList: React.FC<BasicProps> = ({
8459
8888
  onRemove,
8460
8889
  disabledKeys,
8890
+ removeHintLabel,
8891
+ useFunctionLabel,
8461
8892
  }) => {
8462
8893
  const [items, setItems] = React.useState<FileListItem[]>(defaultItems);
8463
8894
  return (
@@ -8465,6 +8896,11 @@ export const BasicFileList: React.FC<BasicProps> = ({
8465
8896
  aria-label="Uploaded files"
8466
8897
  items={items}
8467
8898
  disabledKeys={disabledKeys}
8899
+ removeHintLabel={
8900
+ useFunctionLabel
8901
+ ? ({ fileName }) => \`Remove \${fileName}?\`
8902
+ : removeHintLabel
8903
+ }
8468
8904
  onRemove={(id) => {
8469
8905
  onRemove?.(id);
8470
8906
  setItems((current) => current.filter((item) => item.id !== id));
@@ -8477,8 +8913,25 @@ export const EmptyFileList: React.FC = () => (
8477
8913
  <FileList aria-label="Empty" items={[]} />
8478
8914
  );
8479
8915
 
8480
- export const LoadingFileList: React.FC = () => (
8481
- <FileList aria-label="Uploaded files" items={loadingItems} />
8916
+ interface LoadingProps {
8917
+ loadingLabel?: FileListProps["loadingLabel"];
8918
+ /** Playwright cannot serialize a function prop, so the callback form is built here. */
8919
+ useFunctionLabel?: boolean;
8920
+ }
8921
+
8922
+ export const LoadingFileList: React.FC<LoadingProps> = ({
8923
+ loadingLabel,
8924
+ useFunctionLabel,
8925
+ }) => (
8926
+ <FileList
8927
+ aria-label="Uploaded files"
8928
+ items={loadingItems}
8929
+ loadingLabel={
8930
+ useFunctionLabel
8931
+ ? ({ fileName }) => \`Working on \${fileName}\`
8932
+ : loadingLabel
8933
+ }
8934
+ />
8482
8935
  );
8483
8936
 
8484
8937
  export const ErrorFileList: React.FC = () => (
@@ -10242,14 +10695,48 @@ children: React.ReactNode
10242
10695
  locale?: string
10243
10696
  messages?: LocalizedStrings
10244
10697
  /**
10245
- * Whether to \`console.warn\` about message ids that resolve through the
10246
- * deprecated bare-id fallback or fall all the way through to their
10247
- * \`defaultMessage\`. These warnings are development guidance, so they are off
10248
- * in production builds \u2014 pass \`true\` to opt back in.
10698
+ * Whether to \`console.warn\` about message-resolution failures \u2014 see
10699
+ * {@link MessageIssueCode} for the kinds. These warnings are development
10700
+ * guidance, so they are off in production builds \u2014 pass \`true\` to opt back
10701
+ * in. Ignored when \`onMessageIssue\` is supplied.
10249
10702
  *
10250
10703
  * @default process.env.NODE_ENV !== "production"
10251
10704
  */
10252
10705
  shouldLogMissingMessages?: boolean
10706
+ /**
10707
+ * Called for every message-resolution failure, with enough detail to tell an
10708
+ * unresolved id from a malformed message and route either into your own
10709
+ * diagnostics.
10710
+ *
10711
+ * Supplying a handler takes ownership of these failures: Baseline UI reports
10712
+ * to it instead of writing to the console, so \`shouldLogMissingMessages\` no
10713
+ * longer applies. Unlike the console warnings, the handler is also called in
10714
+ * production builds.
10715
+ *
10716
+ * Issues are deduplicated: after mount, each distinct failure is reported
10717
+ * once per locale rather than once per render, and changing the locale starts
10718
+ * a fresh set.
10719
+ *
10720
+ * Called **during render** \u2014 except \`locale-alias-collision\`, which is
10721
+ * reported from an effect \u2014 so it must not set state synchronously. Collect
10722
+ * into a ref, or defer with \`queueMicrotask\`, if a failure needs to reach the
10723
+ * UI. A handler that throws is caught and its own error logged, so a broken
10724
+ * handler cannot take the tree down.
10725
+ *
10726
+ * @example
10727
+ * \`\`\`tsx
10728
+ * <I18nProvider
10729
+ * messages={messages}
10730
+ * onMessageIssue={(issue) => {
10731
+ * if (issue.code === "missing-message") return;
10732
+ * telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
10733
+ * }}
10734
+ * >
10735
+ * {children}
10736
+ * </I18nProvider>
10737
+ * \`\`\`;
10738
+ */
10739
+ onMessageIssue?: (issue: MessageIssue) => void
10253
10740
  }`,stories:{usage:[{id:"core-utilities-i18nprovider--string-format",name:"String Format",snippet:`const StringFormat = ({ children }) => {
10254
10741
  const { locale } = useLocale();
10255
10742
  return <I18nProvider locale={locale}>{children}</I18nProvider>;
@@ -10257,6 +10744,8 @@ shouldLogMissingMessages?: boolean
10257
10744
  import React from "react";
10258
10745
 
10259
10746
  import { useI18n } from "../../../hooks";
10747
+ import { Pagination } from "../../Pagination";
10748
+ import { I18nProvider } from "../I18nProvider";
10260
10749
 
10261
10750
  export const messages = {
10262
10751
  en: { greeting: "Hello, {name} !" },
@@ -10308,7 +10797,23 @@ export const LocaleStringExample: React.FC<{
10308
10797
  {formatter.formatMessage("greeting", { name })}
10309
10798
  </div>
10310
10799
  );
10311
- };`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
10800
+ };
10801
+
10802
+ const paginationCatalog = {
10803
+ en: { "bui.pagination.pageXofY": "Catalog position" },
10804
+ };
10805
+
10806
+ /** The same ID resolved twice: from the catalog, and from an override prop. */
10807
+ export const OverridePrecedenceExample: React.FC = () => (
10808
+ <I18nProvider locale="en" messages={paginationCatalog}>
10809
+ <Pagination aria-label="from catalog" maxValue={10} />
10810
+ <Pagination
10811
+ aria-label="from prop"
10812
+ maxValue={10}
10813
+ pageXofYLabel="Prop position"
10814
+ />
10815
+ </I18nProvider>
10816
+ );`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
10312
10817
 
10313
10818
  * Automatic handling of Keyboard focus management and cross browser normalization
10314
10819
  * Labeling support for screen readers (aria-describedby)
@@ -10843,6 +11348,28 @@ layoutTransition?: Transition | boolean
10843
11348
  * @default "Are you sure you want to delete this item?"
10844
11349
  */
10845
11350
  deleteConfirmationTitle?: string | ((selectedKeys: Selection) => string)
11351
+ /**
11352
+ * Overrides the label of the button that permanently deletes the selected
11353
+ * image(s), and the accessible label of each image's individual delete
11354
+ * button.
11355
+ *
11356
+ * Message id: \`bui.imageGallery.delete\`. Defaults to \`"Delete"\`.
11357
+ */
11358
+ deleteLabel?: string
11359
+ /**
11360
+ * Overrides the label of the button that dismisses the delete confirmation
11361
+ * modal without deleting anything.
11362
+ *
11363
+ * Message id: \`bui.imageGallery.cancel\`. Defaults to \`"Cancel"\`.
11364
+ */
11365
+ cancelLabel?: string
11366
+ /**
11367
+ * Overrides the accessible label announced while an image is still
11368
+ * loading.
11369
+ *
11370
+ * Message id: \`bui.imageGallery.loading\`. Defaults to \`"Loading"\`.
11371
+ */
11372
+ loadingLabel?: string
10846
11373
  }`,stories:{usage:[{id:"core-collections-imagegallery--basic",name:"Basic",snippet:'const Basic = () => <ImageGallery fit="cover" aria-label="Image gallery" defaultItems={items.slice(0, 4)} />;'},{id:"core-collections-imagegallery--more-items",name:"More Items",snippet:'const MoreItems = () => <ImageGallery fit="cover" aria-label="Image gallery" defaultItems={items} />;'},{id:"core-collections-imagegallery--with-medium-size",name:"With Medium Size",snippet:`const WithMediumSize = () => <ImageGallery
10847
11374
  fit="cover"
10848
11375
  aria-label="Image gallery"
@@ -11526,6 +12053,12 @@ onAction?: () => void
11526
12053
  * close button will be rendered.
11527
12054
  */
11528
12055
  onClose?: () => void
12056
+ /**
12057
+ * Overrides the accessible label of the close button.
12058
+ *
12059
+ * Message id: \`bui.inlineAlert.close\`. Defaults to \`"Close"\`.
12060
+ */
12061
+ closeLabel?: string
11529
12062
  /**
11530
12063
  * The arrangement of the variable.
11531
12064
  *
@@ -13863,7 +14396,7 @@ export const MenuPartialSectionSelectionExample: React.FC<{
13863
14396
  <div data-testid="menu-partial-action">{action}</div>
13864
14397
  </>
13865
14398
  );
13866
- };`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```',props:`interface MessageFormatProps {
14399
+ };`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage`.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\n<MessageFormat id="bui.pagination.pageXofY" values={{ arg0: 2, arg1: 10 }} />\n// \u2192 "Page 2 of 10"\n```',props:`interface MessageFormatProps {
13867
14400
  /**
13868
14401
  * By default \`<MessageFormat>\` will render the formatted string into a
13869
14402
  * \`<React.Fragment>\`. If you need to customize rendering, you can either wrap
@@ -13879,6 +14412,11 @@ id: string
13879
14412
  * The default message to use if the message id is not found.
13880
14413
  */
13881
14414
  defaultMessage?: string
14415
+ /**
14416
+ * Values for the message's ICU placeholders, e.g. \`{ arg0: 2, arg1: 10 }\` for
14417
+ * \`"Page {arg0} of {arg1}"\`.
14418
+ */
14419
+ values?: Record<string, any>
13882
14420
  }`,stories:{usage:[{id:"core-utilities-messageformat--basic",name:"Basic",snippet:'const Basic = () => <MessageFormat id="myApp.addSignature" defaultMessage="Add signature" elementType={Text} />;'}],implementation:""},similarTo:[],figmaUrl:null},Modal:{id:"core-overlays-modal",breadcrumb:"Core/Overlays/Modal",importStatement:'import { DialogExample, Modal } from "@baseline-ui/core";',description:"`Modal` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.",documentation:`\`Modal\` renders content in an overlay above the page, trapping focus and blocking interaction with the background. Use it when a task or message must be addressed before the user can return to the underlying view.
13883
14421
 
13884
14422
  * The content outside the modal is hidden from screen readers.
@@ -14948,6 +15486,18 @@ size?: "xs" | "sm" | "md" | "lg"
14948
15486
  * Whether to hide the increment and decrement actions.
14949
15487
  */
14950
15488
  hideActions?: boolean
15489
+ /**
15490
+ * Overrides the accessible name announcing the current position in the
15491
+ * document.
15492
+ *
15493
+ * Message id: \`bui.pagination.pageXofY\`. Defaults to
15494
+ * \`"Page {arg0} of {arg1}"\`, where \`arg0\` is the current page and \`arg1\`
15495
+ * the total page count. A string is used as-is, with no placeholder
15496
+ * substitution. To include the numbers, pass a function \u2014 it receives
15497
+ * \`{ page, totalPages }\` and its return value is used verbatim.
15498
+ */
15499
+ pageXofYLabel?: | string
15500
+ | ((values: { page: number; totalPages: number }) => string)
14951
15501
  minValue?: any
14952
15502
  defaultValue?: any
14953
15503
  }`,stories:{usage:[{id:"core-forms-pagination--primary",name:"Primary",snippet:'const Primary = () => <Pagination maxValue={10} aria-label="Pagination" />;'},{id:"core-forms-pagination--variants",name:"Variants",snippet:`const Variants = (args) => (
@@ -15011,7 +15561,29 @@ defaultValue?: any
15011
15561
  },
15012
15562
  }}>
15013
15563
  <Pagination maxValue={10} aria-label="Pagination" />
15014
- </I18nProvider>;`}],implementation:""},similarTo:[],figmaUrl:null},Panel:{id:"core-utilities-panel",breadcrumb:"Core/Utilities/Panel",importStatement:`import {
15564
+ </I18nProvider>;`}],implementation:`import React from "react";
15565
+
15566
+ import { Pagination } from "../Pagination";
15567
+
15568
+ /**
15569
+ * Pagination whose \`pageXofYLabel\` is the callback form. Playwright cannot
15570
+ * serialize a function prop, so it is built here rather than in the spec.
15571
+ *
15572
+ * The label does arithmetic on \`page\` so the assertion fails if the callback
15573
+ * is ever handed the formatted string instead of the number.
15574
+ */
15575
+ export function FunctionPageLabelPagination() {
15576
+ return (
15577
+ <Pagination
15578
+ aria-label="test"
15579
+ maxValue={100}
15580
+ defaultValue={5}
15581
+ pageXofYLabel={({ page, totalPages }) =>
15582
+ \`Currently \${page}/\${totalPages}, next is \${page + 1}\`
15583
+ }
15584
+ />
15585
+ );
15586
+ }`},similarTo:[],figmaUrl:null},Panel:{id:"core-utilities-panel",breadcrumb:"Core/Utilities/Panel",importStatement:`import {
15015
15587
  PanelCollapsibleStoryExample,
15016
15588
  PanelConditionalExample,
15017
15589
  PanelControlledExample,
@@ -19551,6 +20123,36 @@ hideSelectAll?: boolean
19551
20123
  * @default false
19552
20124
  */
19553
20125
  hideClear?: boolean
20126
+ /**
20127
+ * Overrides the label of the button that unticks every selected option.
20128
+ *
20129
+ * Message id: \`bui.select.clear\`. Defaults to \`"Clear"\`.
20130
+ */
20131
+ clearLabel?: string
20132
+ /**
20133
+ * Overrides the placeholder and accessible name of the input that filters
20134
+ * the option list.
20135
+ *
20136
+ * Message id: \`bui.select.search\`. Defaults to \`"Search"\`.
20137
+ */
20138
+ searchLabel?: string
20139
+ /**
20140
+ * Overrides the label of the button that ticks every option in a
20141
+ * multi-select list.
20142
+ *
20143
+ * Message id: \`bui.select.selectAll\`. Defaults to \`"Select All"\`.
20144
+ */
20145
+ selectAllLabel?: string
20146
+ /**
20147
+ * Overrides the tag shown on the select trigger standing in for the
20148
+ * selected options that did not fit.
20149
+ *
20150
+ * Message id: \`bui.select.more\`. Defaults to \`"+{count} more"\`, where
20151
+ * \`count\` is the number of hidden options. A string is used as-is, with
20152
+ * no placeholder substitution. To include \`count\`, pass a function \u2014 it
20153
+ * receives \`{ count }\` and its return value is used verbatim.
20154
+ */
20155
+ moreLabel?: string | ((values: { count: number }) => string)
19554
20156
  }`,stories:{usage:[{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
19555
20157
  32 | type Story = StoryObj<typeof meta>;
19556
20158
  33 |
@@ -19772,13 +20374,19 @@ import type { IconSelectProps } from "../Select.types";
19772
20374
  import type { Key } from "@react-types/shared";
19773
20375
 
19774
20376
  export const SelectExample: React.FC<
19775
- Omit<React.ComponentProps<typeof Select>, "items">
19776
- > = (args) => {
20377
+ Omit<React.ComponentProps<typeof Select>, "items"> & {
20378
+ /** Playwright cannot serialize a function prop, so the callback form is built here. */
20379
+ useFunctionLabel?: boolean;
20380
+ }
20381
+ > = ({ useFunctionLabel, ...args }) => {
19777
20382
  return (
19778
20383
  <Select
19779
20384
  placeholder="Choose an item"
19780
20385
  optionClassName={(item) => item.label}
19781
20386
  {...args}
20387
+ moreLabel={
20388
+ useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
20389
+ }
19782
20390
  items={items}
19783
20391
  />
19784
20392
  );
@@ -20906,6 +21514,23 @@ isDisabled?: boolean
20906
21514
  * (e.g. "Checkout").
20907
21515
  */
20908
21516
  aria-label?: string
21517
+ /**
21518
+ * Overrides the fallback accessible name of a step when the application
21519
+ * supplies no title.
21520
+ *
21521
+ * Message id: \`bui.stepper.step\`. Defaults to \`"Step {index}"\`, where
21522
+ * \`index\` is the step's 1-based position. A string is used as-is, with
21523
+ * no placeholder substitution. To include \`index\`, pass a function \u2014 it
21524
+ * receives \`{ index }\` and its return value is used verbatim.
21525
+ */
21526
+ stepLabel?: string | ((values: { index: number }) => string)
21527
+ /**
21528
+ * Overrides the screen-reader-only suffix marking a step the reader has
21529
+ * finished.
21530
+ *
21531
+ * Message id: \`bui.stepper.completed\`. Defaults to \`"Completed"\`.
21532
+ */
21533
+ completedLabel?: string
20909
21534
  }`,stories:{usage:[{id:"core-navigation-stepper--default",name:"Default",snippet:`const Default = () => <Stepper
20910
21535
  items={items}
20911
21536
  aria-label="Checkout"
@@ -21078,6 +21703,22 @@ export const checkoutItems: StepperItem[] = [
21078
21703
 
21079
21704
  const defaultItems = checkoutItems;
21080
21705
 
21706
+ /**
21707
+ * Condensed Stepper whose \`stepLabel\` is the callback form. Playwright cannot
21708
+ * serialize a function prop, so it is built here rather than in the spec.
21709
+ */
21710
+ export function FunctionStepLabelStepper() {
21711
+ return (
21712
+ <Stepper
21713
+ items={defaultItems.map(({ key }) => ({ key }))}
21714
+ variant="condensed"
21715
+ defaultSelectedStep="cart"
21716
+ aria-label="Checkout"
21717
+ stepLabel={({ index }) => \`Phase \${index}\`}
21718
+ />
21719
+ );
21720
+ }
21721
+
21081
21722
  export interface ControlledStepperProps {
21082
21723
  items?: StepperItem[];
21083
21724
  initialSelected?: Key;
@@ -23041,6 +23682,7 @@ interface AsyncLoadingTableExampleProps {
23041
23682
  totalCount?: number;
23042
23683
  loadingDelay?: number;
23043
23684
  scrollOffset?: number;
23685
+ loadingLabel?: string;
23044
23686
  }
23045
23687
 
23046
23688
  /** Virtualized table that loads more rows automatically near the end. */
@@ -23054,6 +23696,7 @@ export const AsyncLoadingTableExample: React.FC<
23054
23696
  totalCount = 60,
23055
23697
  loadingDelay = 50,
23056
23698
  scrollOffset = 1,
23699
+ loadingLabel,
23057
23700
  }) => {
23058
23701
  const dataset = generateLargeDataset(totalCount);
23059
23702
  const [visibleCount, setVisibleCount] = useState(initialCount);
@@ -23119,6 +23762,7 @@ export const AsyncLoadingTableExample: React.FC<
23119
23762
  }
23120
23763
  isLoading={isLoading}
23121
23764
  scrollOffset={scrollOffset}
23765
+ loadingLabel={loadingLabel}
23122
23766
  >
23123
23767
  {(row) => {
23124
23768
  const typedRow = row as ReturnType<typeof generateLargeDataset>[0];
@@ -26571,6 +27215,14 @@ onKeyDown?: KeyboardProps["onKeyDown"]
26571
27215
  * @default true
26572
27216
  */
26573
27217
  isSingleTabStop?: boolean
27218
+ /**
27219
+ * Overrides the accessible label of the overflow button that reveals the
27220
+ * toolbar items which did not fit in the available width. This prop is
27221
+ * only relevant when \`isCollapsible\` is true.
27222
+ *
27223
+ * Message id: \`bui.toolbar.more\`. Defaults to \`"More"\`.
27224
+ */
27225
+ moreLabel?: string
26574
27226
  }`,stories:{usage:[{id:"core-miscellaneous-toolbar--basic",name:"Basic",snippet:'const Basic = () => <Toolbar style={{ display: "flex", flexDirection: "row", alignItems: "center" }}><ToolbarChildren /></Toolbar>;'},{id:"core-miscellaneous-toolbar--vertical",name:"Vertical",snippet:`const Vertical = () => <Toolbar
26575
27227
  orientation="vertical"
26576
27228
  style={{ display: "flex", flexDirection: "column", alignItems: "center" }} />;`},{id:"core-miscellaneous-toolbar--with-tooltip",name:"With Tooltip",snippet:"const WithTooltip = () => <Toolbar><ChildrenWithTooltip /></Toolbar>;"},{id:"core-miscellaneous-toolbar--with-over-flow",name:"With Over Flow",snippet:'const WithOverFlow = () => <Toolbar style={{ width: "max-content", display: "flex", alignItems: "center" }} />;'},{id:"core-miscellaneous-toolbar--with-tabbing-within",name:"With Tabbing Within",snippet:`const WithTabbingWithin = () => <Toolbar
@@ -26645,6 +27297,7 @@ export const CollapsibleChildren: React.FC<{
26645
27297
  onDisabledPress?: () => void;
26646
27298
  maxWidth?: number;
26647
27299
  onKeyDown?: (e: React.KeyboardEvent) => void;
27300
+ moreLabel?: string;
26648
27301
  }> = ({
26649
27302
  onPageAdd,
26650
27303
  onPageRemove,
@@ -26653,6 +27306,7 @@ export const CollapsibleChildren: React.FC<{
26653
27306
  onDisabledPress,
26654
27307
  maxWidth: _maxWidth,
26655
27308
  onKeyDown,
27309
+ moreLabel,
26656
27310
  }) => {
26657
27311
  const [maxWidth, setMaxWidth] = useState(_maxWidth);
26658
27312
 
@@ -26682,7 +27336,11 @@ export const CollapsibleChildren: React.FC<{
26682
27336
  justifyContent: "center",
26683
27337
  }}
26684
27338
  onKeyDown={onKeyDown}
26685
- collapsibleMenuProps={{
27339
+ moreLabel={moreLabel}
27340
+ collapsibleMenuProps={
27341
+ moreLabel
27342
+ ? undefined
27343
+ : {
26686
27344
  renderTrigger: ({ buttonProps, ref }) => (
26687
27345
  <ActionIconButton
26688
27346
  {...buttonProps}
@@ -26694,7 +27352,8 @@ export const CollapsibleChildren: React.FC<{
26694
27352
  tooltip={true}
26695
27353
  />
26696
27354
  ),
26697
- }}
27355
+ }
27356
+ }
26698
27357
  >
26699
27358
  <ActionButton
26700
27359
  iconStart={EllipseIcon}
@@ -27418,11 +28077,32 @@ secondaryActionAriaLabel?: string | ((key: Key) => string)
27418
28077
  * @default "start"
27419
28078
  */
27420
28079
  actionsPosition?: "start" | "end"
28080
+ /**
28081
+ * Overrides the accessible label of the button that expands a tree item to
28082
+ * reveal its children.
28083
+ *
28084
+ * Message id: \`bui.treeView.expand\`. Defaults to \`"Expand"\`.
28085
+ */
28086
+ expandLabel?: string
28087
+ /**
28088
+ * Overrides the accessible label of the button that collapses a tree item
28089
+ * to hide its children.
28090
+ *
28091
+ * Message id: \`bui.treeView.collapse\`. Defaults to \`"Collapse"\`.
28092
+ */
28093
+ collapseLabel?: string
27421
28094
  /**
27422
28095
  * The callback function that is called when the item is renamed. The rename
27423
28096
  * functionality is disabled if not provided.
27424
28097
  */
27425
28098
  onRename?: (options: { key: Key; value: string }) => void
28099
+ /**
28100
+ * Overrides the accessible label of the input shown while an item is being
28101
+ * renamed.
28102
+ *
28103
+ * Message id: \`bui.treeView.rename\`. Defaults to \`"Rename"\`.
28104
+ */
28105
+ renameLabel?: string
27426
28106
  /**
27427
28107
  * The callback function that is called when the item is clicked.
27428
28108
  */
@@ -27640,6 +28320,27 @@ export function TreeViewWithPrimaryActionAtEnd({
27640
28320
  );
27641
28321
  }
27642
28322
 
28323
+ export function TreeViewWithSwappableLabels(): React.JSX.Element {
28324
+ const [swapped, setSwapped] = useState(false);
28325
+ const items = useMemo(() => getTreeItems({}), []);
28326
+
28327
+ return (
28328
+ <Box display="flex" flexDirection="column" gap="md">
28329
+ <ActionButton
28330
+ label="Swap labels"
28331
+ onPress={() => {
28332
+ setSwapped(true);
28333
+ }}
28334
+ />
28335
+ <TreeView
28336
+ items={items}
28337
+ defaultExpandedKeys={["documents"]}
28338
+ expandLabel={swapped ? "Aufklappen" : "Expand"}
28339
+ />
28340
+ </Box>
28341
+ );
28342
+ }
28343
+
27643
28344
  export function TreeViewWithCustomTitle(): React.JSX.Element {
27644
28345
  return (
27645
28346
  <TreeView
@@ -34114,13 +34815,19 @@ import type { IconSelectProps } from "../Select.types";
34114
34815
  import type { Key } from "@react-types/shared";
34115
34816
 
34116
34817
  export const SelectExample: React.FC<
34117
- Omit<React.ComponentProps<typeof Select>, "items">
34118
- > = (args) => {
34818
+ Omit<React.ComponentProps<typeof Select>, "items"> & {
34819
+ /** Playwright cannot serialize a function prop, so the callback form is built here. */
34820
+ useFunctionLabel?: boolean;
34821
+ }
34822
+ > = ({ useFunctionLabel, ...args }) => {
34119
34823
  return (
34120
34824
  <Select
34121
34825
  placeholder="Choose an item"
34122
34826
  optionClassName={(item) => item.label}
34123
34827
  {...args}
34828
+ moreLabel={
34829
+ useFunctionLabel ? ({ count }) => \`\${count} others\` : args.moreLabel
34830
+ }
34124
34831
  items={items}
34125
34832
  />
34126
34833
  );
@@ -34517,6 +35224,22 @@ Import the following files at the top of your stylesheet to use the Baseline UI
34517
35224
 
34518
35225
  Make sure the class names present in this stylesheet aren\u2019t changed by your bundler during the build process.
34519
35226
 
35227
+ ## Bundle size
35228
+
35229
+ Components, hooks and utilities are tree shakeable. Importing from \`@baseline-ui/core\` bundles what you name and what it depends on, not the whole library \u2014 keep importing from the package root, there are no deep entry points to reach for:
35230
+
35231
+ \`\`\`jsx
35232
+ // Bundles Checkbox, not the rest of the library.
35233
+ import { Checkbox } from "@baseline-ui/core";
35234
+
35235
+ // Bundles the hook alone, not the components that also use it.
35236
+ import { useLocalStorage } from "@baseline-ui/core";
35237
+ \`\`\`
35238
+
35239
+ This applies to the ESM build, which bundlers pick up through the package's \`module\` field. The CommonJS build is a single file and cannot be split, so a CommonJS \`require\` still pulls in the whole library.
35240
+
35241
+ Styles aren't split: \`@baseline-ui/core/dist/index.css\` carries every component's CSS regardless of what you import.
35242
+
34520
35243
  ## Charts
34521
35244
 
34522
35245
  Chart components live in a separate package so projects that don\u2019t need data visualizations don\u2019t pay the bundle cost. Install it alongside the core packages:
@@ -34866,14 +35589,19 @@ locale is \`ja-JP\`, say \u2014 every string falls back to English and that is r
34866
35589
  the locale rather than once per ID. It means the catalog keys and the locale disagree,
34867
35590
  which no per-ID warning can tell you. It stays quiet when the active locale is itself
34868
35591
  English, since falling back to English is then the intended result. Supplying no catalogs
34869
- at all is the supported English-only mode and stays silent.
35592
+ at all is the supported English-only mode and reports nothing about coverage \u2014 a string
35593
+ that will not format is still reported, since that is a broken template rather than a
35594
+ missing translation.
34870
35595
 
34871
- Only \`bui.*\` IDs are reported. An app that routes its own strings through
34872
- [\`useI18n\`](#your-own-strings) is missing no translation Baseline UI can tell it how to add.
35596
+ Only missing \`bui.*\` IDs are reported. An app that routes its own strings through
35597
+ [\`useI18n\`](#your-own-strings) is missing no translation Baseline UI can tell it how to
35598
+ add. A string that will not format is reported whatever its ID, since whoever wrote the
35599
+ template can act on it.
34873
35600
 
34874
35601
  ### Controlling the warnings
34875
35602
 
34876
- The warnings above \u2014 the missing-ID, no-matching-catalog, duplicate-locale-key and
35603
+ The warnings above \u2014 the missing-ID, malformed-template, no-matching-catalog,
35604
+ duplicate-locale-key and
34877
35605
  [bare-ID deprecation](#migrating-from-bare-ids) ones \u2014 are development guidance, so they
34878
35606
  are off when \`process.env.NODE_ENV === "production"\`. That keeps a consumer who never
34879
35607
  touched \`messages\` from logging Baseline UI's internal IDs to their end users. Set
@@ -34895,8 +35623,53 @@ touched \`messages\` from logging Baseline UI's internal IDs to their end users.
34895
35623
  </I18nProvider>;
34896
35624
  \`\`\`
34897
35625
 
34898
- Each distinct warning is logged once and reset when the locale changes, so switching
34899
- languages re-reports what the new locale is missing.
35626
+ After mount, each distinct warning is logged once and the set resets when the locale
35627
+ changes, so switching languages re-reports what the new locale is missing.
35628
+
35629
+ ### Collecting the failures yourself
35630
+
35631
+ A console warning is hard to act on: you cannot tell the failure kinds apart, route them
35632
+ into your own diagnostics, or keep them out of the console of a product that embeds
35633
+ Baseline UI. Pass \`onMessageIssue\` to receive each one as an object instead:
35634
+
35635
+ \`\`\`tsx
35636
+ <I18nProvider
35637
+ locale="de-DE"
35638
+ messages={messages}
35639
+ onMessageIssue={(issue) => {
35640
+ // A translation you know is still being written \u2014 ignore it.
35641
+ if (issue.code === "missing-message") return;
35642
+
35643
+ telemetry.report(issue.code, { id: issue.id, locale: issue.locale });
35644
+ }}
35645
+ >
35646
+ <YourApp />
35647
+ </I18nProvider>
35648
+ \`\`\`
35649
+
35650
+ Every issue carries a \`code\`, the \`locale\` it concerns, the \`message\` Baseline UI would
35651
+ otherwise have logged \u2014 whose wording is not part of the contract \u2014 and, for the codes
35652
+ that are about a single string, the \`id\`:
35653
+
35654
+ | \`code\` | What happened |
35655
+ | ------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
35656
+ | \`missing-message\` | No supplied catalog answers for \`id\`; its \`defaultMessage\` renders instead. \`bui.*\` IDs only. |
35657
+ | \`malformed-message\` | A catalog entry or \`defaultMessage\` would not parse or format as ICU. \`source\` says which, \`error\` is the throw. Any \`id\`. |
35658
+ | \`deprecated-message-id\` | \`id\` resolved only through the [bare-ID fallback](#migrating-from-bare-ids). |
35659
+ | \`no-catalog-for-locale\` | Catalogs were supplied, but none covers the active locale. Not reported for English locales. |
35660
+ | \`locale-alias-collision\` | One locale supplied under two ID formats; the hyphenated entry wins. |
35661
+
35662
+ Supplying a handler takes ownership of these failures: Baseline UI reports to it instead
35663
+ of writing to the console, so \`shouldLogMissingMessages\` no longer applies. Unlike the
35664
+ warnings, the handler is also called in production builds \u2014 that is the point of routing
35665
+ them into your own diagnostics. Deduplication is unchanged, so you get one call per
35666
+ distinct failure per locale rather than one per render.
35667
+
35668
+ The handler is called during render \u2014 except \`locale-alias-collision\`, which is reported
35669
+ from an effect \u2014 so it must not set state synchronously. Collect into a ref, or defer
35670
+ with \`queueMicrotask\`, if a failure needs to reach the UI. Further
35671
+ \`code\` values may be added in a minor release: branch on the ones you care about and let
35672
+ the rest fall through to a default.
34900
35673
 
34901
35674
  ### Your own strings
34902
35675
 
@@ -34929,6 +35702,83 @@ The catalogs you pass to \`useI18n\` are merged per locale with the ones on \`I1
34929
35702
  and the provider wins on a shared key \u2014 so an application can hold its own strings locally
34930
35703
  while a host app still overrides any \`bui.*\` string from above.
34931
35704
 
35705
+ ### Outside a render
35706
+
35707
+ Some strings are not composed while a component renders: an alert raised from an async
35708
+ task, a label built in a plain utility module, a value handed to a non-React API.
35709
+ \`createMessageFormatter\` gives you the same formatter without a component around it:
35710
+
35711
+ \`\`\`ts
35712
+ import { createMessageFormatter } from "@baseline-ui/core";
35713
+ import de from "@baseline-ui/core/intl/de.json";
35714
+
35715
+ const formatMessage = createMessageFormatter({
35716
+ locale: "de-DE",
35717
+ messages: { de },
35718
+ });
35719
+
35720
+ formatMessage("bui.editor.bold");
35721
+ formatMessage("bui.stepper.step", { index: 2 });
35722
+ \`\`\`
35723
+
35724
+ It runs on the same engine as \`useI18n\`, so for a given locale, catalog and set of values
35725
+ it returns exactly the string a component would render \u2014 the same catalog resolution, the
35726
+ same \`defaultMessage\` fallback, the same warnings.
35727
+
35728
+ What differs is where its inputs come from. There is no surrounding \`I18nProvider\`, so
35729
+ \`locale\` is required rather than inherited, and \`messages\` are the only catalogs consulted
35730
+ \u2014 nothing is merged in from a provider. \`shouldLogMissingMessages\` defaults the same way
35731
+ it does on \`I18nProvider\`: off in production builds, on everywhere else, and
35732
+ \`onMessageIssue\` takes the same ownership of failures when you pass one:
35733
+
35734
+ \`\`\`ts
35735
+ const formatMessage = createMessageFormatter({
35736
+ locale: "de-DE",
35737
+ messages: { de },
35738
+ onMessageIssue: (issue) => telemetry.report(issue.code, { id: issue.id }),
35739
+ });
35740
+ \`\`\`
35741
+
35742
+ Issues are deduplicated per formatter rather than per provider, since a formatter is bound
35743
+ to one locale and never resets. One is raised eagerly rather than on first use: supplying the same locale in two key formats
35744
+ (\`fr_CA\` and \`fr-CA\`) is reported when the formatter is built, so it also surfaces during
35745
+ server-side rendering.
35746
+
35747
+ An invalid \`locale\` throws \u2014 unlike the keys of \`messages\`, it must be a BCP 47 tag
35748
+ (\`fr-CA\`, not \`fr_CA\`).
35749
+
35750
+ Build the formatter once per locale and reuse it rather than calling this per message: it
35751
+ keeps each template it has compiled, and its own record of which warnings it has logged.
35752
+
35753
+ Inside a component, keep using \`useI18n\`: it follows the locale and catalogs of the
35754
+ provider above it, and re-formats when either changes.
35755
+
35756
+ ### From a class component
35757
+
35758
+ \`useI18n\` is a hook, so a class component cannot call it. Render
35759
+ [\`MessageFormat\`](/?path=/docs/core-utilities-messageformat--docs) instead \u2014 it resolves
35760
+ the same IDs, against the same catalogs, under the same \`I18nProvider\`, so a class
35761
+ component localizes without being rewritten as a function component first:
35762
+
35763
+ \`\`\`jsx
35764
+ import { MessageFormat } from "@baseline-ui/core";
35765
+
35766
+ class Header extends React.Component {
35767
+ render() {
35768
+ return (
35769
+ <MessageFormat
35770
+ id="myApp.greeting"
35771
+ values={{ name: this.props.name }}
35772
+ elementType="h1"
35773
+ />
35774
+ );
35775
+ }
35776
+ }
35777
+ \`\`\`
35778
+
35779
+ \`values\` fills the message's ICU placeholders, and \`elementType\` chooses what the string
35780
+ renders into (a fragment by default).
35781
+
34932
35782
  ### Supported locales
34933
35783
 
34934
35784
  A catalog ships for each of these locales, with an entry for every message ID:
@@ -34945,9 +35795,10 @@ import { messageIds } from "@baseline-ui/core";
34945
35795
  const uncovered = messageIds.filter((id) => !(id in ourCatalog.en));
34946
35796
  \`\`\`
34947
35797
 
34948
- Below is every ID with the English string it renders. For the translator context that goes
34949
- with each one, read \`@baseline-ui/core/messages.json\` \u2014 the extracted source messages keyed
34950
- by ID.
35798
+ Below is every ID with the English string it renders, and the prop that overrides it on a
35799
+ single component instance (see [Overriding one instance](#overriding-one-instance)). For
35800
+ the translator context that goes with each one, read \`@baseline-ui/core/messages.json\` \u2014
35801
+ the extracted source messages keyed by ID.
34951
35802
 
34952
35803
  ### Translating them yourself
34953
35804
 
@@ -34987,6 +35838,49 @@ import de from "@baseline-ui/core/intl/de.json";
34987
35838
  </I18nProvider>;
34988
35839
  \`\`\`
34989
35840
 
35841
+ ### Overriding one instance
35842
+
35843
+ \`I18nProvider.messages\` changes a string everywhere it renders. To change it for one
35844
+ component instance \u2014 two galleries on the same page whose delete buttons should read
35845
+ differently \u2014 pass the override prop from the [Message IDs](#translations-list) table
35846
+ instead:
35847
+
35848
+ \`\`\`jsx
35849
+ <ImageGallery deleteLabel="Remove page" />
35850
+ <ImageGallery deleteLabel="Remove signature" />
35851
+ \`\`\`
35852
+
35853
+ A prop wins over an \`I18nProvider\` catalog entry for the same ID, which in turn wins over
35854
+ the built-in English default. For most props an empty string is a real override:
35855
+ \`closeLabel=""\` renders an empty label rather than falling back to \`"Close"\`.
35856
+
35857
+ The props that pre-date this feature keep their existing behaviour and treat \`""\` as
35858
+ unset: \`aria-label\` on \`Pagination\` and \`Stepper\`, \`Pagination\`'s \`incrementAriaLabel\` and
35859
+ \`decrementAriaLabel\`, \`ButtonSelect\`'s \`moreAriaLabel\`, \`ColorInput\`'s
35860
+ \`addColorButtonLabel\`, \`removeColorButtonLabel\` and \`customColorsLabel\`, \`Editor\`'s
35861
+ \`submitButtonAriaLabel\` and \`cancelButtonAriaLabel\`, \`FreehandCanvas\`'s \`undoLabel\` and
35862
+ \`redoLabel\`, and \`ImageDropZone\`'s \`pickerButtonLabel\`.
35863
+
35864
+ Five IDs interpolate a value \u2014 \`bui.fileList.loading\`, \`bui.fileList.removeHint\`,
35865
+ \`bui.pagination.pageXofY\`, \`bui.select.more\`, and \`bui.stepper.step\`. Their props accept
35866
+ either form:
35867
+
35868
+ \`\`\`jsx
35869
+ {
35870
+ /* A string renders verbatim \u2014 placeholders are not substituted. */
35871
+ }
35872
+ <Stepper stepLabel="Current stage" />;
35873
+
35874
+ {
35875
+ /* A function receives the values and returns the finished string. */
35876
+ }
35877
+ <Stepper stepLabel={({ index }) => \`Phase \${index}\`} />;
35878
+ \`\`\`
35879
+
35880
+ The props only cover Baseline UI's own \`bui.*\` strings. Strings that come from the
35881
+ underlying accessibility layer \u2014 drag-and-drop announcements, calendar cell descriptions \u2014
35882
+ are not overridable this way.
35883
+
34990
35884
  Each component's documentation lists its overridable keys and shows an example. See:
34991
35885
 
34992
35886
  * [Pagination](?path=/docs/core-forms-pagination--docs#translations)
@@ -35939,7 +36833,7 @@ padding={[null, "lg", "xl"]}
35939
36833
 
35940
36834
  * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
35941
36835
  * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
35942
- * [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.1.0"};var u=`
36836
+ * [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"2.4.0"};var u=`
35943
36837
  # Baseline UI MCP Server Guidelines
35944
36838
 
35945
36839
  This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.