@stihl-design-system/components 1.0.0-RC.3 → 1.0.0-RC.30

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

@@ -0,0 +1,60 @@
+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;
+    titleDisabled: string;
+    titleRemovable: string;
+    titleDeactivate: string;
+    titleActivate: 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;
+    titleDisabled: string;
+    titleRemovable: string;
+    titleDeactivate: string;
+    titleActivate: string;
+};
+export declare const DS_CHIP_GROUP_TRANSLATIONS: {
+    [key in 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 getChipTitle: (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,7 +1,6 @@
 import { IconName } from '../../types';
 import { ComboboxProps } from './Combobox';
 import { GroupBase, OptionsOrGroups } from 'react-select';
-
 export type ComboboxVariant = 'single' | 'multi';
 type ValidationProps = Pick<ComboboxProps, 'id' | 'label' | 'options'>;
 /**
@@ -16,9 +15,15 @@ export declare const validateComboboxProps: ({ id, label, options, }: Validation
 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;
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;

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

@@ -1,60 +1,72 @@
 import { GroupBase } from 'react-select';
-import { BreakpointCustomizable, Optional } from '../../types';
-import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox/Combobox.utils';
+import { BreakpointCustomizable, Optional } from '../../../types';
+import { ComboboxAriaTranslations, ComboboxLanguage, ComboboxOption, ComboboxOptionsGroup, ComboboxOptionsOrOptGroups, ComboboxSize } from '../Combobox.utils';
 import { PublicBaseSelectProps } from 'react-select/dist/declarations/src/Select';
 import { StateManagerProps } from 'react-select/dist/declarations/src/useStateManager';
-
 type IncludedReactSelectKeys = 'className' | 'form' | 'inputValue' | 'menuIsOpen' | 'name' | 'onBlur' | 'onFocus' | 'openMenuOnClick' | 'openMenuOnFocus' | 'tabIndex';
-type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<Optional<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, 'inputValue'>, IncludedReactSelectKeys>;
-type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>;
+type PickedReactSelectProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<PublicBaseSelectProps<OptionType, IsMulti, GroupType>, IncludedReactSelectKeys>, IncludedReactSelectKeys>;
+type PickedReactSelectStateManagerProps<OptionType, IsMulti extends boolean, GroupType extends GroupBase<OptionType>> = Optional<Pick<StateManagerProps<OptionType, IsMulti, GroupType>, 'defaultInputValue'>, 'defaultInputValue'>;
 export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedReactSelectProps<ComboboxOption, IsMulti, ComboboxOptionsGroup>, PickedReactSelectStateManagerProps<ComboboxOption, IsMulti, ComboboxOptionsGroup> {
-    /** Unique id for the DSCombobox */
+    /** Unique id for the DSCombobox. */
     id: string;
-    /** Label text displayed above the DSCombobox */
+    /** Label text displayed above the DSCombobox. */
     label: string;
     /**
-     * Defines the options, can be a mixed array of options and option groups
+     * 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 */
+    /** The value of autoComplete to use for the DSCombobox. */
     autoComplete?: string;
-    /** Value of the selected Option in **uncontrolled DSCombobox** component */
+    /** Value of the initially selected Option. */
     defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Disables the DSCombobox, preventing user interaction */
+    /** Disables the DSCombobox, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the DSCombobox label, can be responsive
+    /** 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 */
+    /** Short descriptive text displayed beneath the label. */
     hint?: string;
-    /** Marks the DSCombobox as invalid, typically used for form validation */
+    /** Marks the DSCombobox as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Allows selection of multiple options */
+    /** 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 */
+    /** Sets language to use for the screen reader messages and "No options found" message, if no translations object is provided.
+     * @default 'en'
+     */
     lang?: ComboboxLanguage;
-    /** Indicates that the DSCombobox is required */
+    /** Indicates that the DSCombobox is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the input */
+    /** Size of the Combobox.
+     * @default 'medium'
+     */
     size?: ComboboxSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** 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 of the DSCombobox. */
     value?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
-    /** Callback function triggered when the selection of the DSCombobox changes */
-    onChange?: (newValue: IsMulti extends true ? ComboboxOption[] : ComboboxOption) => void;
-    /** Callback function triggered when the value of the DSCombobox input changes */
+    /** 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
+ * via the DSCombobox component.
  * */
-export declare const CustomReactSelect: <IsMulti extends boolean>({ id, label, options, className, disabled, hint, hideLabel, invalid, isMulti, lang, required, size, systemFeedback, translations, value, onChange, onInputChange, ...rest }: CustomReactSelectProps<IsMulti>) => JSX.Element;
+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

@@ -0,0 +1,45 @@
+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;
+}
+/**
+ * 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,29 @@ 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;
     /**
-     * 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;

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

@@ -1,11 +1,17 @@
 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'>;
-export declare const validateProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
+export declare const validateFieldsetProps: ({ description, id, legend, systemFeedback, }: ValidationProps) => void;
 export {};

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 {};

package/components/FileList/FileList.utils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Formats a file size in bytes into a human-readable string using appropriate units (bytes, kb, mb).
+ *
+ * @param {number} fileSizeInBytes - The size of the file in bytes.
+ * @returns {string} The formatted file size as a string with the appropriate unit (bytes, kb, mb).
+ *
+ * @example
+ * formatFileSize(500); // "500 bytes"
+ * formatFileSize(2048); // "2 kb"
+ * formatFileSize(10485760); // "10 mb"
+ */
+export declare const formatFileSize: (fileSizeInBytes: number) => string;
+export declare const FILE_ICON_EXTENSIONS: {
+    nonDisplayableImages: string[];
+    documents: string[];
+    videos: string[];
+    archives: string[];
+};

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

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

package/components/Flag/Flag.d.ts

@@ -0,0 +1,26 @@
+import { IconName } from '../../types';
+import { IconProps } from '../Icon/Icon';
+import { FlagColor } from './Flag.utils';
+import { JSX } from 'react';
+export interface FlagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Content within the Flag. */
+    children: React.ReactNode;
+    /**
+     * Background color of the Flag. It can either be a predefined color token (recommended) or a custom color value (e.g. #F37A1F).
+     *
+     * Possible predefined values: `grey-light` `yellow-light` `red-light` `green-light` `orange-base`
+     *
+     * @default 'grey-light'
+     */
+    color: FlagColor;
+    /** Name of the icon to display. */
+    iconName?: IconName;
+    /** URL or path for a custom icon. */
+    iconSource?: IconProps['source'];
+}
+/**
+ * A read-only component, often representing a status or category.
+ *
+ * Design in Figma: [Flag](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=19511-2443)
+ * */
+export declare const DSFlag: ({ children, className, color, iconName, iconSource, ...rest }: FlagProps) => JSX.Element;

package/components/Flag/Flag.test.d.ts

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

package/components/Flag/Flag.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const FLAG_COLOR: readonly ["grey-light", "yellow-light", "red-light", "green-light", "orange-base"];
+export type FlagColor = (typeof FLAG_COLOR)[number] | (string & Record<never, never>);

package/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,7 +1,11 @@
+import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
-
 export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
     children: React.ReactNode;
+    /** Name of the icon to display.
+     * @default 'placeholder'
+     */
+    iconName?: IconName;
 }
 /**
  * FABs are used to highlight actions by laying over the content.
@@ -9,5 +13,7 @@ export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel'
  * Sizes:
  * - medium (e.g. back-to-top)
  * - small (e.g. menu drawer of the sidebar navigation)
+ *
+ * Design in Figma: [Floating Action Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-5095&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSFloatingActionButton: ({ aria, children, className, dataTrackingid, disabled, iconName, iconSource, loading, size, theme, onClick, ...rest }: FloatingActionButtonProps) => JSX.Element;
+export declare const DSFloatingActionButton: import('react').ForwardRefExoticComponent<FloatingActionButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/Header/Header.d.ts

@@ -0,0 +1,68 @@
+import { JSX } from 'react';
+import { BrandAddOnProps, BrandAreaLogoProps } from '../TopBar/TopBar';
+import { HeaderVariant, SlotProps } from './Header.utils';
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Brand addOn props:
+     *
+     * `children`: Content of the brand addOn.
+     *
+     * `subTitle`: Sub title below the title. **Only available with `variant="double"`**.
+     *
+     * `variant`: Variant of the brand addOn.
+     *            Defaults to `'single'`
+     */
+    brandAddOnProps?: BrandAddOnProps;
+    /** Content of the Header. */
+    children?: React.ReactNode;
+    /** Makes the DSHeader sticky on scroll.
+     * @default false
+     */
+    isHeaderSticky?: boolean;
+    /** Logo props:
+     *
+     * `aria`: Accessibility attributes for screen readers.
+     *         Ensure to provide a descriptive label via `aria-label`.
+     *
+     * `href`: Defines the URL to link to. If you provide a URL, the component will be rendered as a link.
+     *         Defaults to `'/'`.
+     *
+     * `logo`: Defines which logo to display (e.g., main or sub-brand).
+     *         Defaults to `'main'`.
+     *
+     * `target`: Specifies the target of the link.
+     *           Defaults to `'_self'`.
+     * */
+    logoProps?: BrandAreaLogoProps;
+    /** Sets the visual style variant of the DSHeader.
+     * @default 'main'
+     */
+    variant?: HeaderVariant;
+}
+export declare const DSHeaderContext: import('react').Context<{
+    variant: HeaderVariant;
+    bannerAreaRef?: React.RefObject<HTMLDivElement | null>;
+    brandAddOnProps?: BrandAddOnProps;
+    hasBrandAddOn?: boolean;
+    setHasBrandAddOn?: React.Dispatch<React.SetStateAction<boolean>>;
+    isFixedMainNavigation?: boolean;
+    isHeaderSticky?: boolean;
+    isMobile?: boolean;
+    isStickyMainNavigationVisible?: boolean;
+    mainNavigationAreaRef?: React.RefObject<HTMLDivElement | null>;
+    topBarAreaRef?: React.RefObject<HTMLDivElement | null>;
+    logoProps?: BrandAreaLogoProps;
+}>;
+/**
+ * The `<DSHeader />` component renders a semantic `<header>` element that
+ * serves as the top-level container for your page’s header region.
+ * It manages the DSTopBar element and renders any children passed to it.
+ *
+ * Design in Figma: [Header](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=5381-2186&t=7P7x6ASRWyOtQQJG-4)
+ */
+export declare const DSHeader: {
+    ({ children, brandAddOnProps, className, isHeaderSticky, variant, logoProps, ...rest }: HeaderProps): JSX.Element;
+    /** attach static members */
+    BannerArea: import('react').FC<SlotProps>;
+    MainNavigationArea: import('react').FC<SlotProps>;
+    displayName: string;
+};

package/components/Header/Header.utils.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare const HEADER_VARIANT: readonly ["full", "main"];
+export type HeaderVariant = (typeof HEADER_VARIANT)[number];
+/** Props for any “slot” component */
+export interface SlotProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/** Props for slot component with optional children */
+export interface OptionalSlotProps extends Omit<SlotProps, 'children'> {
+    children?: React.ReactNode;
+}
+export declare const validateHeaderChildren: ({ hasBrandArea, hasPrimaryArea, hasSecondaryArea, }: {
+    hasBrandArea: boolean;
+    hasPrimaryArea: boolean;
+    hasSecondaryArea: boolean;
+}) => void;

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

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