@luscii-healthtech/web-ui 60.1.0 → 60.2.2

package/dist/src/components/Checkbox/LabeledCheckboxCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the checkbox cards should be distributed.

package/dist/src/components/Checkbox/LabeledCheckboxGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Any additional information to show underneath the radio group.

package/dist/src/components/DatePicker/LabeledDatePicker.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 import { type DatePickerProps } from "./DatePicker";
 type Props = DatePickerProps & {
-    label?: string;
+    /**
+     * The visible label above the date picker.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     helperText?: React.ReactNode;
     errorText?: React.ReactNode;
     /**

package/dist/src/components/Input/Input.d.ts

@@ -21,6 +21,8 @@ export type FakeEventTarget = {
 };
 export interface InputProps extends CustomHTMLInputProps {
     clearable?: boolean;
+    /** Accessible name of the clear button shown when `clearable`. Defaults to "Clear". */
+    clearButtonLabel?: string;
     isDisabled?: boolean;
     withPrefix?: string;
     withSuffix?: string;

package/dist/src/components/Input/LabeledInput.d.ts

@@ -11,8 +11,18 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label, linked to the input with `htmlFor`. When omitted, give
+     * the input an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/components/Input/StyledInput.d.ts

@@ -25,4 +25,6 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    /** Accessible name of the clear button. */
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/InputSelect/InputSelect.d.ts

@@ -24,6 +24,7 @@ declare const InputSelectWithSubComponents: React.ForwardRefExoticComponent<Inpu
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;

package/dist/src/components/InputSelect/InputSelectInput.d.ts

@@ -8,4 +8,5 @@ export declare const InputSelectInput: React.ForwardRefExoticComponent<Omit<Omit
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/NaturalLanguageForm/NaturalLanguageForm.d.ts

@@ -25,6 +25,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;
@@ -59,6 +60,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
             isError?: boolean;
             isClearIconVisible?: boolean;
             onClickClearField?: () => void;
+            clearButtonLabel?: string;
         } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
         Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
             children?: React.ReactNode;

package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts

@@ -8,4 +8,5 @@ export declare const NaturalLanguageFormInput: React.ForwardRefExoticComponent<O
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts

@@ -9,6 +9,7 @@ export declare const NaturalLanguageFormInputSelect: React.ForwardRefExoticCompo
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;

package/dist/src/components/Radio/LabeledRadioCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the radio cards should be distributed.

package/dist/src/components/Radio/LabeledRadioGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * The orientation of the radio buttons in the group. This only has a

package/dist/src/components/Select/LabeledSelect.d.ts

@@ -8,7 +8,15 @@ export declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<Omit<Om
     height?: import("../../system/Sizes").FormHeightNames;
     isError?: boolean;
 } & React.RefAttributes<HTMLSelectElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label above the select.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/components/Select/LabeledSelectSearchable.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import { type SelectProps } from "./Select";
 export declare const LabeledSelectSearchable: React.ForwardRefExoticComponent<Omit<SelectProps<import("./Select.types").OptionMinimal, any, import("react-select").GroupBase<import("./Select.types").OptionMinimal>>, "isError"> & {
-    label?: string;
+    /**
+     * The visible label above the select, linked to it with `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. Keep it phrasing content (no headings or blocks) and
+     * non-interactive: all of its text becomes the select's accessible name.
+     */
+    label?: React.ReactNode;
     /**
      * Any additional information to show underneath the select.
      */

package/dist/src/components/forms/shared/FieldsetLegend.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type ReactNode } from "react";
+type Props = {
+    /**
+     * A string is rendered as body text. Any other node is rendered as-is, so
+     * it can be a `Heading` or contain an icon. A `<legend>` may contain
+     * phrasing and heading content.
+     */
+    children: ReactNode;
+};
+/**
+ * The title of a labelled group (radio group, checkbox group, …), rendered as
+ * the `<legend>` of its `<fieldset>`, so it names the group.
+ *
+ * Browsers render a fieldset's legend outside of the fieldset's (flex)
+ * layout, so the legend gets `display: contents` and its content becomes the
+ * flex item instead. That content must be a single element to stay one item
+ * that follows the parent `Stack`'s gap: a string is wrapped in `Text`, a
+ * single element is rendered as-is, and anything else (a fragment, several
+ * nodes) is wrapped in a block `span`.
+ */
+export declare const FieldsetLegend: FC<Props>;
+export {};

package/dist/src/generated/components/Checkbox/LabeledCheckboxCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the checkbox cards should be distributed.

package/dist/src/generated/components/Checkbox/LabeledCheckboxGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Any additional information to show underneath the radio group.

package/dist/src/generated/components/DatePicker/LabeledDatePicker.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 import { type DatePickerProps } from "./DatePicker";
 type Props = DatePickerProps & {
-    label?: string;
+    /**
+     * The visible label above the date picker.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     helperText?: React.ReactNode;
     errorText?: React.ReactNode;
     /**

package/dist/src/generated/components/Input/Input.d.ts

@@ -21,6 +21,8 @@ export type FakeEventTarget = {
 };
 export interface InputProps extends CustomHTMLInputProps {
     clearable?: boolean;
+    /** Accessible name of the clear button shown when `clearable`. Defaults to "Clear". */
+    clearButtonLabel?: string;
     isDisabled?: boolean;
     withPrefix?: string;
     withSuffix?: string;

package/dist/src/generated/components/Input/LabeledInput.d.ts

@@ -11,8 +11,18 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label, linked to the input with `htmlFor`. When omitted, give
+     * the input an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/generated/components/Input/StyledInput.d.ts

@@ -25,4 +25,6 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    /** Accessible name of the clear button. */
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/generated/components/InputSelect/InputSelect.d.ts

@@ -24,6 +24,7 @@ declare const InputSelectWithSubComponents: React.ForwardRefExoticComponent<Inpu
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;

package/dist/src/generated/components/InputSelect/InputSelectInput.d.ts

@@ -8,4 +8,5 @@ export declare const InputSelectInput: React.ForwardRefExoticComponent<Omit<Omit
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageForm.d.ts

@@ -25,6 +25,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;
@@ -59,6 +60,7 @@ declare const NaturalLanguageFormWithSubComponents: React.ForwardRefExoticCompon
             isError?: boolean;
             isClearIconVisible?: boolean;
             onClickClearField?: () => void;
+            clearButtonLabel?: string;
         } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
         Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
             children?: React.ReactNode;

package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInput.d.ts

@@ -8,4 +8,5 @@ export declare const NaturalLanguageFormInput: React.ForwardRefExoticComponent<O
     isError?: boolean;
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
+    clearButtonLabel?: string;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/src/generated/components/NaturalLanguageForm/NaturalLanguageFormInputSelect.d.ts

@@ -9,6 +9,7 @@ export declare const NaturalLanguageFormInputSelect: React.ForwardRefExoticCompo
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
     Select: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
         children?: React.ReactNode;

package/dist/src/generated/components/Radio/LabeledRadioCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the radio cards should be distributed.

package/dist/src/generated/components/Radio/LabeledRadioGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * The orientation of the radio buttons in the group. This only has a

package/dist/src/generated/components/Select/LabeledSelect.d.ts

@@ -8,7 +8,15 @@ export declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<Omit<Om
     height?: import("../../system/Sizes").FormHeightNames;
     isError?: boolean;
 } & React.RefAttributes<HTMLSelectElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label above the select.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/generated/components/Select/LabeledSelectSearchable.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import { type SelectProps } from "./Select";
 export declare const LabeledSelectSearchable: React.ForwardRefExoticComponent<Omit<SelectProps<import("./Select.types").OptionMinimal, any, import("react-select").GroupBase<import("./Select.types").OptionMinimal>>, "isError"> & {
-    label?: string;
+    /**
+     * The visible label above the select, linked to it with `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. Keep it phrasing content (no headings or blocks) and
+     * non-interactive: all of its text becomes the select's accessible name.
+     */
+    label?: React.ReactNode;
     /**
      * Any additional information to show underneath the select.
      */

package/dist/src/generated/components/forms/shared/FieldsetLegend.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type ReactNode } from "react";
+type Props = {
+    /**
+     * A string is rendered as body text. Any other node is rendered as-is, so
+     * it can be a `Heading` or contain an icon. A `<legend>` may contain
+     * phrasing and heading content.
+     */
+    children: ReactNode;
+};
+/**
+ * The title of a labelled group (radio group, checkbox group, …), rendered as
+ * the `<legend>` of its `<fieldset>`, so it names the group.
+ *
+ * Browsers render a fieldset's legend outside of the fieldset's (flex)
+ * layout, so the legend gets `display: contents` and its content becomes the
+ * flex item instead. That content must be a single element to stay one item
+ * that follows the parent `Stack`'s gap: a string is wrapped in `Text`, a
+ * single element is rendered as-is, and anything else (a fragment, several
+ * nodes) is wrapped in a block `span`.
+ */
+export declare const FieldsetLegend: FC<Props>;
+export {};

package/dist/stories/InputSelect.stories.d.ts

@@ -12,6 +12,7 @@ declare const meta: {
             isError?: boolean;
             isClearIconVisible?: boolean;
             onClickClearField?: () => void;
+            clearButtonLabel?: string;
         } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
         Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
             children?: React.ReactNode;

package/dist/stories/LabeledCheckbox.stories.d.ts

@@ -41,3 +41,8 @@ export declare const Disabled: Story;
 export declare const Indeterminate: Story;
 export declare const MultipleCheckboxes: Story;
 export declare const WithHelperAndErrorText: Story;
+/**
+ * Besides a string, `title` takes a node, such as a `Heading`. It's still
+ * rendered as the fieldset's `<legend>`, so it names the group.
+ */
+export declare const GroupTitleAsNode: Story;

package/dist/stories/LabeledDatePicker.stories.d.ts

@@ -24,7 +24,7 @@ declare const meta: {
         zIndex?: 10 | 20 | 30 | 40 | 50;
         popperZIndex?: 10 | 20 | 30 | 40 | 50;
     } & {
-        label?: string;
+        label?: React.ReactNode;
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;
         fullWidth?: boolean;
@@ -53,3 +53,8 @@ type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const HelperText: Story;
 export declare const ErrorText: Story;
+/**
+ * Besides a string, `label` takes a node, for example to add a muted
+ * "(optional)" next to the text. Keep it phrasing content and non-interactive.
+ */
+export declare const LabelAsNode: Story;

package/dist/stories/LabeledInput.stories.d.ts

@@ -10,8 +10,9 @@ declare const meta: {
         isError?: boolean;
         isClearIconVisible?: boolean;
         onClickClearField?: () => void;
+        clearButtonLabel?: string;
     } & import("react").RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
-        label?: string;
+        label?: React.ReactNode;
         icon?: React.FC<import("../src").IconProps>;
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;
@@ -52,6 +53,18 @@ export declare const HelperText: Story;
  * their own, more specific CSS if needed.
  */
 export declare const HelperTextWithHtml: Story;
+/**
+ * The prefix, suffix and icon are visually part of the field, so clicking
+ * them focuses the input.
+ */
+export declare const PrefixSuffixAndIcon: Story;
+/**
+ * Besides a string, `label` takes a node, for example to add a muted
+ * "(optional)" next to the text. It's rendered inside the `<label>`, so keep
+ * it phrasing content and non-interactive: all of its text becomes the
+ * input's accessible name.
+ */
+export declare const LabelAsNode: Story;
 export declare const ErrorText: Story;
 /**
  * Demonstrates the `fullWidth` prop. The input, helper text, and error text

package/dist/stories/LabeledRadio.stories.d.ts

@@ -37,3 +37,13 @@ export declare const OverviewLabeledRadioCard: Story;
 export declare const UsingLabelAndSubtitleProps: Story;
 export declare const UsingChildrenPropForCustomContent: Story;
 export declare const SingleColumnWithIcons: Story;
+/**
+ * Besides a string, `title` takes a node, such as a `Heading` with an info
+ * icon. It's still rendered as the fieldset's `<legend>`, so it names the
+ * group. All of its text names the group, including the info button's label
+ * (screen readers announce "Frequency, About frequency").
+ *
+ * `Heading as="h4"` adds a real heading to the page outline; pick a level
+ * that fits the page, or use `as="span"` when only the styling is wanted.
+ */
+export declare const GroupTitleAsNode: Story;

package/dist/stories/LabeledSelectSearchable.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from "@storybook/react-vite";
 declare const meta: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Omit<import("../src").SelectProps<import("../src").OptionMinimal, any, import("react-select").GroupBase<import("../src").OptionMinimal>>, "isError"> & {
-        label?: string;
+        label?: React.ReactNode;
         helperText?: React.ReactNode;
         errorText?: React.ReactNode;
         fullWidth?: boolean;
@@ -38,3 +38,8 @@ export declare const Disabled: Story;
  * stretch to fill the container width instead of taking their intrinsic size.
  */
 export declare const FullWidth: Story;
+/**
+ * Besides a string, `label` takes a node, for example to add a muted
+ * "(optional)" next to the text. Keep it phrasing content and non-interactive.
+ */
+export declare const LabelAsNode: Story;

package/dist/stories/NaturalLanguageForm.stories.d.ts

@@ -16,6 +16,7 @@ declare const meta: {
             isError?: boolean;
             isClearIconVisible?: boolean;
             onClickClearField?: () => void;
+            clearButtonLabel?: string;
         } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
         Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
             children?: React.ReactNode;
@@ -50,6 +51,7 @@ declare const meta: {
                 isError?: boolean;
                 isClearIconVisible?: boolean;
                 onClickClearField?: () => void;
+                clearButtonLabel?: string;
             } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
             Select: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref">, "width"> & {
                 children?: React.ReactNode;

package/dist/stories/SearchInput.stories.d.ts

@@ -9,3 +9,4 @@ type Story = StoryObj<typeof meta>;
 export declare const Base: Story;
 export declare const SearchExample: Story;
 export declare const WithQuery: Story;
+export declare const ClearWithKeyboard: Story;

package/dist/stories/Select.stories.d.ts

@@ -234,6 +234,11 @@ export declare const LabeledSelect: {
     name: string;
     render: (args: any) => import("react").JSX.Element;
 };
+/**
+ * Besides a string, `label` takes a node, for example to add a muted
+ * "(optional)" next to the text. Keep it phrasing content and non-interactive.
+ */
+export declare const LabeledSelectLabelAsNode: Story;
 export declare const HIDE_Docs_ListGoodLength: Story;
 export declare const HIDE_Docs_ListTooLong: Story;
 export declare const HIDE_Docs_Sorted: Story;