@stihl-design-system/components 1.0.0-RC.4 → 1.0.0-RC.40

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,8 +1,7 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, JSX } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
-
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** DSCheckbox elements within the checkbox group */
+    /** DSCheckbox elements within the checkbox group. */
     children: React.ReactNode;
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -15,28 +14,49 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the checkboes
+     * Set the direction of the checkboxes.
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /** Disables the checkbox group, preventing user interaction.
+     * @default false
      */
-    alignment?: 'vertical' | 'horizontal';
-    /** Short descriptive text displayed beneath the legend */
-    description?: FieldsetProps['description'];
-    /** Disables the checkbox group, preventing user interaction */
     disabled?: boolean;
-    /** Unique id for the checkbox group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Unique id for the checkbox group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the checkbox group as invalid, typically used for form validation */
+    /** Marks the checkbox group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Marks the checkbox group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the checkbox group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the checkbox group's legend.
+     * @default false
      * */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
- * complete with customizable legends, alignment options, and integrated validation feedback,
+ * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
+ *
+ * Design in Figma: [Checkbox Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=5626-11362&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSCheckboxGroup: ({ children, legend, alignment, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

package/components/CheckboxGroup/CheckboxGroup.utils.d.ts

@@ -1,5 +1,4 @@
 import { CheckboxGroupProps } from './CheckboxGroup';
-
 type ValidationProps = Pick<CheckboxGroupProps, 'children' | 'description' | 'id' | 'legend' | 'systemFeedback'>;
 export declare const validateCheckboxGroupProps: ({ children, description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

package/components/ChipGroup/Chip.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    disableTooltips?: boolean;
+    groupId: string;
+    isRemovable: boolean;
+    lang?: ChipGroupLanguage;
+    selectionMode: ChipGroupSelectionMode;
+    size?: ChipGroupSize;
+    translations?: ChipGroupAriaTranslations;
+}
+export declare const DSChip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/components/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** An array of Chip Objects containing the id and label and other optional parameters.
+     * `{id: string; label: string; disabled?: boolean; iconName?: IconName; isSelected?: boolean; onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;}[]`*/
+    chips: Chip[];
+    /** Unique id for the DSChipGroup. */
+    id: string;
+    /** Label text displayed above the DSChipGroup. */
+    label: string;
+    /** Disables tooltips for all chips in the group.
+     * @default false
+     */
+    disableTooltips?: boolean;
+    /** Hides the DSChipGroup label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Allows removal of Chips.
+     * @default false
+     */
+    isRemovable?: boolean;
+    /** Sets language to use for the screen reader messages, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: ChipGroupLanguage;
+    /** Defines if only one Chip or multiple Chips can be selected. Ignored if `isRemovable=true`.
+     * @default 'single'
+     */
+    selectionMode?: ChipGroupSelectionMode;
+    /** Size of the Chips.
+     * @default 'medium'
+     */
+    size?: ChipGroupSize;
+    /** Translations for the DSChipGroup. Use our [customization page](/?path=/story/components-chip-group-translations--documentation) for creating custom translations. */
+    translations?: ChipGroupAriaTranslations;
+    /** Callback function called when the selection of the DSChipGroup changes. */
+    onChipsChange?: (chips: Chip[]) => void;
+}
+/**
+ * A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
+ * Supports different sizes. Use icons sparingly to reduce cognitive load.
+ *
+ * Design in Figma: [Chip Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=18691-978)
+ */
+export declare const DSChipGroup: React.FC<ChipGroupProps>;

package/components/ChipGroup/ChipGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/ChipGroup/ChipGroup.utils.d.ts

@@ -0,0 +1,58 @@
+import { IconName } from '../../types';
+import { ChipGroupProps } from './ChipGroup';
+type ValidationProps = Pick<ChipGroupProps, 'chips' | 'id' | 'label'>;
+export declare const validateChipGroupProps: ({ chips, id, label, }: ValidationProps) => void;
+export declare const validateIsLiveRegionPresent: () => void;
+export interface Chip {
+    /** Unique id for the Chip. */
+    id: string | number;
+    /** Label text displayed inside the Chip. */
+    label: string;
+    /** Disables the Chip, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Name of the icon to display */
+    iconName?: IconName;
+    /** Displays the Chip as selected */
+    isSelected?: boolean;
+    /** Callback function called when the Chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}
+export declare const CHIP_GROUP_SIZE: readonly ["medium", "small"];
+export type ChipGroupSize = (typeof CHIP_GROUP_SIZE)[number];
+export type ChipGroupSelectionMode = 'single' | 'multiple';
+export type ChipGroupLanguage = 'de' | 'en';
+export type ChipGroupAriaTranslations = typeof DS_CHIP_GROUP_TRANSLATIONS_EN;
+export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: {
+    disabled: string;
+    selected: string;
+    selectChip: string;
+    unselectAction: string;
+    selectAction: string;
+    addToSelection: string;
+    removeFromSelection: string;
+    removeChip: string;
+    tooltipDisabled: string;
+    tooltipRemovable: string;
+    tooltipDeactivate: string;
+    tooltipActivate: string;
+};
+export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: {
+    disabled: string;
+    selected: string;
+    selectChip: string;
+    unselectAction: string;
+    selectAction: string;
+    addToSelection: string;
+    removeFromSelection: string;
+    removeChip: string;
+    tooltipDisabled: string;
+    tooltipRemovable: string;
+    tooltipDeactivate: string;
+    tooltipActivate: string;
+};
+export declare const DS_CHIP_GROUP_TRANSLATIONS: Record<ChipGroupLanguage, ChipGroupAriaTranslations>;
+export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
+export declare const getChipTooltip: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
+export {};

package/components/ChipGroup/ChipGroup.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Combobox/Combobox.d.ts

@@ -1,18 +1,39 @@
-import { CustomReactSelectProps } from '../CustomReactSelect/CustomReactSelect';
-
+import { CustomReactSelectProps } from './CustomReactSelect/CustomReactSelect';
 type CommonComboboxProps = {
-    /** Opens the dropdown on click or focus */
+    /** Opens the dropdown on click or focus.
+     * @default false
+     */
     dropdownOnFocus?: boolean;
+    /** Selects a focused value in the MenuList when the Tab key is pressed.
+     * @default true
+     */
+    tabSelectsValue?: boolean;
 };
 export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant?: 'single';
 }) | (CustomReactSelectProps<true> & {
-    /** Defines if only one option or multiple options can be selected */
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
     variant: 'multi';
 }), 'isMulti' | 'openMenuOnClick' | 'openMenuOnFocus'> & CommonComboboxProps;
 /**
  * The DSCombobox component offers an autocomplete-style interface, allowing for efficient and intuitive selection from a dynamic list of options, suitable for both single and multi-select purposes.
+ *
+ * Design in Figma: [Combobox](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2659-3954)
  * */
-export declare const DSCombobox: ({ id, label, className, disabled, dropdownOnFocus, hideLabel, invalid, lang, required, variant, ...rest }: ComboboxProps) => JSX.Element;
+export declare const DSCombobox: import('react').ForwardRefExoticComponent<Omit<(CustomReactSelectProps<false> & {
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
+    variant?: "single";
+}) | (CustomReactSelectProps<true> & {
+    /** Defines if only one option or multiple options can be selected.
+     * @default 'single'
+     */
+    variant: "multi";
+}), "isMulti" | "openMenuOnClick" | "openMenuOnFocus"> & CommonComboboxProps & import('react').RefAttributes<HTMLInputElement>>;
 export {};

package/components/Combobox/Combobox.utils.d.ts

@@ -1,9 +1,9 @@
 import { IconName } from '../../types';
 import { ComboboxProps } from './Combobox';
-import { GroupBase, OptionsOrGroups } from 'react-select';
-
+import { FilterOptionOption, GroupBase, OptionsOrGroups } from 'react-select';
 export type ComboboxVariant = 'single' | 'multi';
-type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
+type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options' | 'hideLabel' | 'popoverContent'>;
+export type ComboboxFilterOption<Option> = FilterOptionOption<Option>;
 /**
  * Validates the given properties of the DSCombobox component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -12,14 +12,22 @@ type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
  * @param validationProps - The subset of DSCombobox properties to validate. This includes
  *                          id and label.
  */
-export declare const validateComboboxProps: ({ id, label, options, }: ValidationProps) => void;
+export declare const validateComboboxProps: ({ id, label, options, hideLabel, popoverContent, }: ValidationProps) => void;
 export declare const COMBOBOX_SIZE: readonly ["medium", "small"];
 export type ComboboxSize = (typeof COMBOBOX_SIZE)[number];
 export interface ComboboxOption {
+    /** Label text displayed as the option. */
     label: string;
+    /** Value of the option. */
     value: string | number;
+    /** Name of the icon to display. */
     leadingIconName?: IconName;
+    /** Disables the Option, preventing user interaction.
+     * @default false
+     */
     isDisabled?: boolean;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
 export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;
@@ -50,9 +58,8 @@ export declare const DS_COMBOBOX_TRANSLATIONS_EN: {
     result_one: string;
     result_other: string;
     resultsAvailable: string;
+    togglePopover: string;
 };
 export declare const DS_COMBOBOX_TRANSLATIONS_DE: ComboboxAriaTranslations;
-export declare const DS_COMBOBOX_TRANSLATIONS: {
-    [key in ComboboxLanguage]: ComboboxAriaTranslations;
-};
+export declare const DS_COMBOBOX_TRANSLATIONS: Record<ComboboxLanguage, ComboboxAriaTranslations>;
 export {};

package/components/Combobox/CustomReactSelect/CustomReactSelect.d.ts

@@ -0,0 +1,88 @@
+import { GroupBase, Props } from 'react-select';
+import { BreakpointCustomizable, Optional } from '../../../types';
+import { ComboboxAriaTranslations, ComboboxFilterOption, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox.utils';
+type IncludedReactSelectKeys = 'className' | 'filterOption' | 'form' | 'defaultInputValue' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
+type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<Props<OptionType, IsMulti, GroupType>, IncludedReactSelectKeys>, IncludedReactSelectKeys>;
+export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
+    /** Unique id for the DSCombobox. */
+    id: string;
+    /** Label text displayed above the DSCombobox. */
+    label: string;
+    /**
+     * Defines the options, can be a mixed array of options and option groups.
+     *  `type ComboboxOption = {label: string; value: string | number; leadingIconName?: IconName; isDisabled?: boolean;}`
+     *  `type ComboboxOptionsGroup = {label: string; options: ComboboxOption[];}`
+     *  `type ComboboxOptionsOrOptGroups = (ComboboxOption | ComboboxOptionsGroup)[];`
+     * */
+    options: ComboboxOptionsOrOptGroups;
+    /** The value of autoComplete to use for the DSCombobox. */
+    autoComplete?: string;
+    /** Value of the initially selected Option. */
+    defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
+    /** Disables the DSCombobox, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Custom method to filter whether an option should be displayed in the menu */
+    filterOption?: ((option: ComboboxFilterOption<ComboboxOption>, inputValue: string) => boolean) | null;
+    /** Hides the DSCombobox label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Marks the DSCombobox as invalid, typically used for form validation.
+     * @default false
+     */
+    invalid?: boolean;
+    /** Allows selection of multiple options.
+     * @default false
+     */
+    isMulti: boolean;
+    /** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided.
+     * @default 'en'
+     */
+    lang?: ComboboxLanguage;
+    /** Keeps the menu open or always closed, useful for specific testing scenarios.
+     * @default undefined
+     */
+    menuIsOpen?: boolean | undefined;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Indicates that the DSCombobox is required.
+     * @default false
+     */
+    required?: boolean;
+    /** Size of the Combobox.
+     * @default 'medium'
+     */
+    size?: ComboboxSize;
+    /** Defines a system feedback message, shown when `invalid={true}`- */
+    systemFeedback?: string;
+    /** Translations for the DSCombobox. Use our [customization page](/?path=/story/components-combobox-translations--documentation) for creating custom translations. */
+    translations?: ComboboxAriaTranslations;
+    /** Value of the DSCombobox. */
+    value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
+    /** Callback function called when the selection of the DSCombobox changes. */
+    onValueChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
+    /** Callback function called when the value of the DSCombobox input changes. */
+    onInputChange?: (newValue: string) => void;
+}
+/**
+ * Internal customized react select component, which is in parts exposed to our consumers
+ * via the DSCombobox component.
+ * */
+export declare const CustomReactSelect: import('react').ForwardRefExoticComponent<CustomReactSelectProps<boolean> & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/components/Combobox/CustomReactSelect/CustomReactSelect.utils.d.ts

@@ -0,0 +1,3 @@
+import { AriaLiveMessages, GroupBase } from 'react-select';
+import { ComboboxAriaTranslations } from '../Combobox.utils';
+export declare const defaultAriaLiveMessages: (translations: ComboboxAriaTranslations) => AriaLiveMessages<unknown, boolean, GroupBase<unknown>>;

package/components/Combobox/CustomReactSelect/CustomReactSelect.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/{CustomReactSelect → Combobox/CustomReactSelect}/OptionCheckbox.d.ts

@@ -1,5 +1,4 @@
-import { HTMLAttributes } from 'react';
-
+import { HTMLAttributes, JSX } from 'react';
 export interface CheckboxProps extends HTMLAttributes<HTMLDivElement> {
     /** Content displayed next to the checkbox */
     label: string;

package/components/Dialog/Dialog.d.ts

@@ -1,11 +1,45 @@
-import { HTMLAttributes } from 'react';
-
-type DialogProps = {
+import { DialogHTMLAttributes, JSX } from 'react';
+export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Dialog. */
     children: React.ReactNode;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close dialog'
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Disables closing the Dialog by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Dialog's footer. For example a CTA button. */
     footer?: React.ReactNode;
+    /** Content within the Dialog's header. For example a Heading. */
     header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Dialog is open.
+     * @default false
+     */
     isOpen?: boolean;
+    /** Callback function called when the Dialog is closed. */
     onClose?: () => void;
-} & HTMLAttributes<HTMLDialogElement>;
-export declare const DSDialog: ({ children, className, footer, header, isOpen, onClose, }: DialogProps) => JSX.Element;
-export {};
+}
+/**
+ * A component that renders a modal dialog, which can be used for displaying
+ * important messages, forms, or confirmations.
+ *
+ * Design in Figma: [Dialog](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=14115-4051)
+ *
+ * <div className="ds-info">For more information on the different types of notifications and to determine which is best suited for your needs, please refer to our [Notification Guidelines](/docs/templates-notification-guidelines--documentation) and explore the decision trees provided.</div>
+ */
+export declare const DSDialog: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;

package/components/Dialog/Dialog.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Dialog/Dialog.utils.d.ts

@@ -0,0 +1,11 @@
+import { DialogProps } from './Dialog';
+type ValidationProps = Pick<DialogProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDialog component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSDialog properties to validate.
+ */
+export declare const validateDialogProps: ({ tabIndex }: ValidationProps) => void;
+export {};

package/components/Dialog/Dialog.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Drawer/Drawer.d.ts

@@ -0,0 +1,49 @@
+import { DialogHTMLAttributes, JSX } from 'react';
+import { DrawerPosition } from './Drawer.utils';
+export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
+    /** Content within the Drawer. */
+    children: React.ReactNode;
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close dialog'
+     *
+     */
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+    /** Disables closing the Drawer by clicking on the backdrop.
+     * @default false
+     */
+    disableBackdropClose?: boolean;
+    /** Content within the Drawer's footer. For example a CTA button. */
+    footer?: React.ReactNode;
+    /** Content within the Drawer's header. For example a Heading. */
+    header?: React.ReactNode;
+    /**
+     * If `true`, hides the close button. Ensure you provide an alternative method for closing,
+     * such as a button in the footer or within the children components.
+     * @default false
+     */
+    hideCloseButton?: boolean;
+    /** Determines if the Drawer is open.
+     * @default false
+     */
+    isOpen?: boolean;
+    /** Specifies the final position of the Drawer after opening.
+     * @default 'start'
+     */
+    position?: DrawerPosition;
+    /** Callback function called when the Drawer is closed. */
+    onClose?: () => void;
+}
+/**
+ * A component that renders a modal drawer, which can be used for navigation,
+ * displaying additional information, or providing extra controls.
+ *
+ * Design in Figma: [Drawer](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=16282-9317)
+ */
+export declare const DSDrawer: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;

package/components/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Drawer/Drawer.utils.d.ts

@@ -0,0 +1,13 @@
+import { DrawerProps } from './Drawer';
+export declare const DRAWER_POSITION: readonly ["start", "end"];
+export type DrawerPosition = (typeof DRAWER_POSITION)[number];
+type ValidationProps = Pick<DrawerProps, 'tabIndex'>;
+/**
+ * Validates the given properties of the DSDrawer component for common configuration errors.
+ * This function is intended to be used in development mode to provide developers with
+ * warnings about potential misuse of the component.
+ *
+ * @param validationProps - The subset of DSDrawer properties to validate.
+ */
+export declare const validateDrawerProps: ({ tabIndex }: ValidationProps) => void;
+export {};

package/components/Drawer/Drawer.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Fieldset/Fieldset.d.ts

@@ -1,8 +1,7 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, JSX } from 'react';
 import { Legend } from './Fieldset.utils';
-
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /** Child elements within the fieldset */
+    /** Child elements within the fieldset. */
     children: React.ReactNode;
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -15,22 +14,42 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: Legend;
-    /** Short descriptive text displayed beneath the legend */
+    /** Short descriptive text displayed beneath the legend. */
     description?: string | React.ReactNode;
-    /** Disables the fieldset, preventing user interaction */
+    /** Disables the fieldset, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Unique id for the fieldset, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the fieldset as invalid, typically used for form validation */
+    /** Marks the fieldset as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
+    /** Shows an info button next to the label that triggers a popover with the passed content. */
+    popoverContent?: React.ReactNode;
+    /** Popover info button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the default anchor button.
+     * (default) 'Toggle popover'
+     */
+    popoverInfoButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /**
-     * Undocumented property for visually setting the Asterisk
+     * Undocumented property for visually setting the Asterisk.
+     * @default false
      */
     required?: boolean;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**
  * The `DSFieldset` component is a versatile and accessible way to group related elements and labels in your forms.
+ *
+ * Design in Figma: [Fieldset](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=8-154)
  * */
-export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;
+export declare const DSFieldset: ({ children, legend, className, description, disabled, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;

package/components/Fieldset/Fieldset.utils.d.ts

@@ -1,9 +1,15 @@
 import { HeadingSize, HeadingTag } from '../Heading/Heading.utils';
 import { FieldsetProps } from './Fieldset';
-
 export type Legend = string | {
+    /** The text content for the legend. */
     headingText: string;
+    /** Defines the size of the heading, using predefined size types.
+     * @default 'medium'
+     */
     headingSize?: HeadingSize;
+    /** Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc.
+     * @default 'h2'
+     */
     headingTag?: HeadingTag;
 };
 type ValidationProps = Pick<FieldsetProps, 'description' | 'id' | 'legend' | 'systemFeedback'>;

package/components/FileList/FileList.d.ts

@@ -0,0 +1,13 @@
+import { FileWithFeedback } from '../InputFile/InputFile';
+import { InputFileTranslations } from '../InputFile/InputFile.utils';
+import { JSX } from 'react';
+interface FileListProps {
+    files: FileWithFeedback[];
+    onRemoveFile: (index: number) => void;
+    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+    fileListItemRemoveButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+    };
+}
+export declare const FileList: ({ files, onRemoveFile, fileListItemRemoveButtonProps, t, }: FileListProps) => JSX.Element;
+export {};

package/components/FileList/FileList.test.d.ts

@@ -0,0 +1 @@
+export {};