@stihl-design-system/components 1.0.0-RC.46 → 1.0.0-RC.48

package/{combobox.CpX-Vlyd.js → combobox.C6cPz4AJ.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as z } from "react/jsx-runtime";
 import { d as G } from "./chunks/index.cKLI89Eg.js";
-import { v as H, c as J } from "./chunks/CustomReactSelect.yVERtd4R.js";
+import { v as H, c as J } from "./chunks/CustomReactSelect.DTAavYaz.js";
 import { forwardRef as K } from "react";
 const Q = K((N, S) => {
   const t = G.c(38);

package/components/Accordion/Accordion.d.ts

@@ -1,4 +1,5 @@
 import { DetailsHTMLAttributes, ToggleEventHandler } from 'react';
+import { Theme } from '../../types';
 import { AccordionSize, ChevronPosition, Summary } from './Accordion.utils';
 export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** Content to be displayed within the accordion. */
@@ -36,6 +37,10 @@ export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement
      * @default 'medium'
      */
     size?: AccordionSize;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
     /**
      * Event handler for the `toggle` event, which is fired when the open state of the accordion changes.
      * This can be used to synchronize the internal state of the `DSAccordion` with external state management or to perform side effects when the accordion is toggled.

package/components/ActionButton/ActionButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-import { IconName, SelectedAriaAttributes } from '../../types';
+import { IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { ActionButtonAriaAttribute, ActionButtonChevronDirection, ActionButtonIconPosition, ActionButtonIconSize, ActionButtonIndentLevel, ActionButtonWeight } from './ActionButton.utils';
 export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -48,6 +48,10 @@ export interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElemen
      * @default false
      */
     stretched?: boolean;
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
     /** Defines the weight. **Only available with `iconPosition='left'`**.
      * @default 'normal'
      */

package/components/ActionLink/ActionLink.d.ts

@@ -1,6 +1,6 @@
 import { CommonLinkProps } from '../LinkButton/LinkButton';
 import { ActionLinkIconPosition, ActionLinkIconSize, ActionLinkIndentLevel, ActionLinkWeight } from './ActionLink.utils';
-export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' | 'theme'> {
+export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition'> {
     /** Content within the link. */
     children: React.ReactNode;
     /** The position of the icon. `iconPosition='top'` requires either an `iconName` or `iconSource` to be set.

package/components/Button/Button.utils.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from './Button';
 export declare const BUTTON_SIZE: readonly ["medium", "small"];
 export type ButtonSize = (typeof BUTTON_SIZE)[number];
-export declare const BUTTON_VARIANT: readonly ["highlight", "filled", "outline", "ghost", "navigation"];
+export declare const BUTTON_VARIANT: readonly ["highlight", "filled", "outline", "ghost", "utility", "navigation"];
 export type ButtonVariant = (typeof BUTTON_VARIANT)[number];
 export type ButtonIconPosition = 'left' | 'right';
 export type ButtonAriaAttribute = 'aria-label' | 'aria-expanded' | 'aria-pressed' | 'aria-haspopup';

package/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Content displayed next to the checkbox. */
     label: string;
@@ -35,6 +35,13 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Callback function called when the state of the checkbox changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface CheckboxPropsWithTheme extends CheckboxProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * A control element that allows users to make a binary choice. It can either be checked or unchecked.
  *

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,4 +1,5 @@
 import { FieldsetHTMLAttributes, JSX } from 'react';
+import { Theme } from '../../types/common-types';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** DSCheckbox elements within the checkbox group. */
@@ -57,6 +58,13 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
     /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface CheckboxGroupPropsWithTheme extends CheckboxGroupProps {
+    /** Defines the theme. When using `theme="dark"`, the `theme` prop must also be set on each `DSCheckbox` child.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
  * complete with customizable legends, direction options, and integrated validation feedback,
@@ -64,4 +72,4 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
  *
  * 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, className, description, direction, disabled, hideLegend, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const DSCheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;

package/components/ChipGroup/Chip.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes } from 'react';
+import { Theme } from '../../types';
 import { Chip, ChipGroupAriaTranslations, ChipGroupLanguage, ChipGroupSelectionMode, ChipGroupSize } from './ChipGroup.utils';
 interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     disableTooltips?: boolean;
@@ -7,6 +8,7 @@ interface ChipProps extends Omit<Chip, 'onClick'>, Omit<HTMLAttributes<HTMLDivEl
     lang?: ChipGroupLanguage;
     selectionMode: ChipGroupSelectionMode;
     size?: ChipGroupSize;
+    theme?: Theme;
     translations?: ChipGroupAriaTranslations;
 }
 export declare const DSChip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/ChipGroup/ChipGroup.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } 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.
@@ -28,7 +28,10 @@ export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     isRemovable?: boolean;
-    /** Sets language to use for the screen reader messages, if no translations object is provided.
+    /** Sets language for screen reader messages and ICU plural rule resolution.
+     * Use `'de'` or `'en'` for preconfigured translations, or any
+     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
+     * when providing a custom `translations` object.
      * @default 'en'
      */
     lang?: ChipGroupLanguage;
@@ -45,6 +48,13 @@ export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Callback function called when the selection of the DSChipGroup changes. */
     onChipsChange?: (chips: Chip[]) => void;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface ChipGroupPropsWithTheme extends ChipGroupProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * 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.

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

@@ -1,4 +1,5 @@
 import { IconName } from '../../types';
+import { DSLanguage } from '../../utils';
 import { ChipGroupProps } from './ChipGroup';
 type ValidationProps = Pick<ChipGroupProps, 'chips' | 'id' | 'label'>;
 export declare const validateChipGroupProps: ({ chips, id, label, }: ValidationProps) => void;
@@ -21,37 +22,60 @@ export interface Chip {
 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: {
+export type ChipGroupLanguage = DSLanguage;
+export type ChipGroupAriaTranslations = {
+    /** Word "disabled" used in state announcements. */
     disabled: string;
+    /** Word "selected" used in state announcements. */
     selected: string;
+    /** Word "not selected" used in state announcements. */
     notSelected: string;
+    /** Word "removed" used in state announcements. */
     removed: string;
-    remaining: string;
+    /**
+     * Guidance for selecting/unselecting a chip via keyboard.
+     *
+     * Placeholder: `{action}` = the action label (e.g. selectAction/unselectAction).
+     */
     selectChip: string;
+    /** Action label for unselecting a chip. */
     unselectAction: string;
+    /** Action label for selecting a chip. */
     selectAction: string;
+    /** Guidance for adding an option to the selection. */
     addToSelection: string;
+    /** Guidance for removing an option from the selection. */
     removeFromSelection: string;
+    /** Guidance for removing the currently focused value. */
     removeChip: string;
+    /** Tooltip text for a disabled chip. */
     tooltipDisabled: string;
+    /** Tooltip text for a removable chip. */
     tooltipRemovable: string;
+    /** Tooltip text for deactivating a property. */
     tooltipDeactivate: string;
+    /** Tooltip text for activating a property. */
     tooltipActivate: string;
-    item_one: string;
-    item_other: string;
+    /**
+     * Announced when items are selected.
+     * ICU plural: resolves correct plural form based on CLDR rules for the locale.
+     * Results in messages like "3 items selected" or "1 item selected".
+     *
+     * Placeholder: `{count}` = number of selected items.
+     */
     countSelected: string;
+    /**
+     * Announced when items remain.
+     * ICU plural: resolves correct plural form based on CLDR rules for the locale.
+     * Results in messages like "3 items remaining" or "1 item remaining".
+     *
+     * Placeholder: `{count}` = number of remaining items.
+     */
     countRemaining: string;
 };
+export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: ChipGroupAriaTranslations;
 export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: ChipGroupAriaTranslations;
-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;
-/**
- * Helper to get the correct plural form for item count.
- * @param count - The number of items
- * @returns The appropriate plural form (item_one or item_other)
- */
-export declare const getItemPlural: (t: (key: keyof ChipGroupAriaTranslations, replacements?: string[]) => string, count: number) => string;
+export declare const DS_CHIP_GROUP_TRANSLATIONS: Record<string, ChipGroupAriaTranslations>;
+export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, values?: Record<string, string | number>) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
+export declare const getChipTooltip: (t: (key: keyof ChipGroupAriaTranslations, values?: Record<string, string | number>) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
 export {};

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

@@ -1,4 +1,5 @@
 import { IconName } from '../../types';
+import { DSLanguage } from '../../utils';
 import { ComboboxProps } from './Combobox';
 import { FilterOptionOption, GroupBase, OptionsOrGroups } from 'react-select';
 export type ComboboxVariant = 'single' | 'multi';
@@ -31,35 +32,91 @@ export interface ComboboxOption {
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
 export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;
-export type ComboboxLanguage = 'de' | 'en';
-export type ComboboxAriaTranslations = typeof DS_COMBOBOX_TRANSLATIONS_EN;
-export declare const DS_COMBOBOX_TRANSLATIONS_EN: {
+export type ComboboxLanguage = DSLanguage;
+export type ComboboxAriaTranslations = {
+    /** Placeholder text shown when no option is selected. */
     placeholder: string;
+    /** Guidance for keyboard navigation through options. */
     navigationGuidance: string;
+    /** Guidance for selecting the currently focused option. */
     selectGuidance: string;
+    /** Guidance for exiting the menu. */
     exitGuidance: string;
+    /** Guidance for using Tab to select and exit. */
     tabGuidance: string;
-    searchGuidance: string;
+    /**
+     * Guidance announced when the input is focused.
+     * Uses ICU select to conditionally include search guidance.
+     *
+     * Placeholders: `{label}` = combobox label, `{isSearchable}` = ICU select (true/false).
+     */
     inputGuidance: string;
+    /**
+     * Announced when a disabled option is focused.
+     *
+     * Placeholder: `{label}` = the label of the disabled option.
+     */
     selectOptionDisabled: string;
+    /**
+     * Announced when a value is focused.
+     *
+     * Placeholder: `{label}` = the label of the focused option.
+     */
     focusValue: string;
+    /** Word "of" used in position announcements (e.g. "1 of 2 options"). */
     of: string;
+    /** Word "disabled" used in state announcements. */
     disabled: string;
+    /** Word "selected" used in state announcements. */
     selected: string;
+    /** Word "deselected" used in state announcements. */
     deselected: string;
+    /** Guidance for focusing selected values in multi-select mode. */
     focusSelectedMultiGuidance: string;
+    /** Guidance for navigating between focused values. */
     valueGuidance: string;
+    /** Guidance for removing the currently focused value. */
     deleteGuidance: string;
+    /** Announced when all selected options have been cleared. */
     clearAllOptions: string;
+    /**
+     * Hint appended to filter results.
+     *
+     * Placeholder: `{inputValue}` = the current search term.
+     */
     filterTermHint: string;
+    /** Announced when no options match the filter. */
     filterNoOptions: string;
-    option_one: string;
-    option_other: string;
-    result_one: string;
-    result_other: string;
+    /**
+     * Announced when filter results are available.
+     * ICU plural: resolves correct plural form based on CLDR rules for the locale.
+     *
+     * Placeholder: `{count}` = number of results.
+     */
     resultsAvailable: string;
+    /**
+     * Announced when a single option is selected (used in onChange/onFocus messages).
+     *
+     * Placeholder: `{label}` = the selected option's label.
+     */
+    optionSelected: string;
+    /**
+     * Announced when multiple options are selected (used in onChange/onFocus messages).
+     * ICU plural.
+     *
+     * Placeholders: `{count}` = number of options, `{labels}` = comma-separated labels.
+     */
+    optionsSelected: string;
+    /**
+     * Announced to indicate the position of the focused option.
+     *
+     * Placeholders: `{index}` = current position, `{total}` = total options.
+     */
+    optionPosition: string;
+    /** Label for the popover toggle button. */
     togglePopover: string;
 };
+export declare const DS_COMBOBOX_TRANSLATIONS_EN: ComboboxAriaTranslations;
 export declare const DS_COMBOBOX_TRANSLATIONS_DE: ComboboxAriaTranslations;
-export declare const DS_COMBOBOX_TRANSLATIONS: Record<ComboboxLanguage, ComboboxAriaTranslations>;
+export declare const DS_COMBOBOX_TRANSLATIONS: Record<string, ComboboxAriaTranslations>;
 export {};

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

@@ -40,7 +40,11 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      * @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 for screen reader messages, the "No options found" message,
+     * and ICU plural rule resolution.
+     * Use `'de'` or `'en'` for preconfigured translations, or any
+     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
+     * when providing a custom `translations` object.
      * @default 'en'
      */
     lang?: ComboboxLanguage;

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

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

package/components/Fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
 import { FieldsetHTMLAttributes, JSX } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { Legend } from './Fieldset.utils';
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** Child elements within the fieldset. */
@@ -53,9 +53,16 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
     /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface FieldsetPropsWithTheme extends FieldsetProps {
+    /** Defines the theme. When using `theme="dark"`, the `theme` prop must also be set on each child component that supports it.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * 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, hideLegend, id, invalid, popoverContent, popoverInfoButtonProps, required, systemFeedback, ...rest }: FieldsetProps) => JSX.Element;
+export declare const DSFieldset: (props: FieldsetProps) => JSX.Element;

package/components/Flag/Flag.d.ts

@@ -8,11 +8,11 @@ export interface FlagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
      * 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`
+     * Possible predefined values: `status-info` `status-warning` `status-negative` `status-positive` `promo-highlight` `promo-neutral`
      *
-     * @default 'grey-light'
+     * @default 'status-info'
      */
-    color: FlagColor;
+    color?: FlagColor;
     /** Name of the icon to display. */
     iconName?: IconName;
     /** URL or path for a custom icon. */

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

@@ -1,2 +1,7 @@
-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>);
+export declare const FLAG_COLOR: readonly ["status-info", "status-warning", "status-negative", "status-positive", "promo-highlight", "promo-neutral"];
+/** @deprecated Use the new color names instead. These will be removed in the next stable release. */
+export declare const DEPRECATED_FLAG_COLOR: readonly ["grey-light", "yellow-light", "red-light", "green-light", "orange-base"];
+/** Maps deprecated color names to their new equivalents. */
+export declare const DEPRECATED_FLAG_COLOR_MAP: Record<(typeof DEPRECATED_FLAG_COLOR)[number], (typeof FLAG_COLOR)[number]>;
+export type DeprecatedFlagColor = (typeof DEPRECATED_FLAG_COLOR)[number];
+export type FlagColor = (typeof FLAG_COLOR)[number] | DeprecatedFlagColor | (string & Record<never, never>);

package/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable, IconName, SelectedAriaAttributes } from '../../types';
+import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { InputAriaAttribute, InputSize, SupportedInputTypes } from './Input.utils';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -91,6 +91,13 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
      */
     type?: SupportedInputTypes;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface InputPropsWithTheme extends InputProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 /**
  * The `<DSInput />` component is a versatile input field that allows users to enter and edit text.
  * It comes in two sizes (medium & small) and supports various customizations including an action button,

package/components/InputFile/FileList/FileList.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Theme } from '../../../utils/theme';
 import { FileWithUploadMeta } from '../InputFile';
 import { InputFileTranslations } from '../InputFile.utils';
 import { ProgressIndicatorVariant } from './ProgressIndicator/ProgressIndicator';
@@ -8,7 +9,8 @@ export interface FileListProps {
      */
     files: FileWithUploadMeta[];
     onRemoveFile: (index: number) => void;
-    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+    t: (key: keyof InputFileTranslations, values?: Record<string, string | number>) => string;
     showProgress?: ProgressIndicatorVariant;
+    theme?: Theme;
 }
-export declare const FileList: ({ files, onRemoveFile, t, showProgress, }: FileListProps) => JSX.Element;
+export declare const FileList: ({ files, onRemoveFile, t, showProgress, theme, }: FileListProps) => JSX.Element;

package/components/InputFile/FileList/FilePreview/FilePreview.d.ts

@@ -1,15 +1,21 @@
 import { JSX } from 'react';
+import { Theme } from '../../../../utils/theme';
 import { InputFileTranslations } from '../../InputFile.utils';
 export interface FilePreviewProps {
     /**
      * The file object to preview. Used to determine file type and generate preview.
      */
     file: File;
-    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+    /**
+     * Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+    t: (key: keyof InputFileTranslations, values?: Record<string, string | number>) => string;
 }
 /**
  * Renders a preview for a file based on its type and extension.
  * For displayable images, shows an actual image preview with error fallback.
  * For other file types, shows an appropriate icon.
  */
-export declare const FilePreview: ({ file, t }: FilePreviewProps) => JSX.Element;
+export declare const FilePreview: ({ file, theme, t, }: FilePreviewProps) => JSX.Element;

package/components/InputFile/FileList/ProgressIndicator/ProgressIndicator.d.ts

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { Theme } from '../../../../utils/theme';
 import { InputFileTranslations } from '../../InputFile.utils';
 export type ProgressIndicatorStatus = 'uploading' | 'error';
 export type ProgressIndicatorVariant = 'bar' | 'text';
@@ -19,7 +20,12 @@ export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElem
      * Variant of the progress indicator to display: 'bar' or 'text'
      */
     variant: ProgressIndicatorVariant;
-    t: (key: keyof InputFileTranslations, replacements?: string[]) => string;
+    /**
+     * Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+    t: (key: keyof InputFileTranslations, values?: Record<string, string | number>) => string;
 }
 /**
  * Accessible progress indicator for file uploads.
@@ -31,4 +37,4 @@ export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElem
  * - `aria-valuenow` reflects the provided percent value.
  * - Visual percentage text remains for sighted users; screen readers rely on `aria-label` and `aria-valuenow`.
  */
-export declare const ProgressIndicator: ({ className, fileName, id, percent, progressStatus, variant, t, }: ProgressIndicatorProps) => JSX.Element | null;
+export declare const ProgressIndicator: ({ className, fileName, id, percent, progressStatus, variant, theme, t, }: ProgressIndicatorProps) => JSX.Element | null;

package/components/InputFile/InputFile.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
+import { BreakpointCustomizable, Theme } from '../../types';
 import { ButtonVariant } from '../Button/Button.utils';
 import { ProgressIndicatorVariant } from './FileList/ProgressIndicator/ProgressIndicator';
 import { InputFileLanguage, InputFileTranslations } from './InputFile.utils';
@@ -55,7 +55,10 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
      * @default {base: true, m: false}
      */
     isHintOutsideDropzone?: BreakpointCustomizable<boolean>;
-    /** Sets language to use for messages, if no translations object is provided.
+    /** Sets language for messages and ICU plural rule resolution.
+     * Use `'de'` or `'en'` for preconfigured translations, or any
+     * [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
+     * when providing a custom `translations` object.
      * @default 'en'
      */
     lang?: InputFileLanguage;
@@ -99,6 +102,13 @@ export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Callback function invoked when files are selected. */
     onFilesSelect?: (files: FileWithUploadMeta[]) => void;
 }
+/** @internal Props including theme — not exported to consumers. */
+export interface InputFilePropsWithTheme extends InputFileProps {
+    /** Defines the theme.
+     * @default 'light'
+     */
+    theme?: Theme;
+}
 export type FileUploadStatus = 'uploading' | 'error' | 'success';
 export interface FileWithUploadMeta extends File {
     /** System feedback shown to the user. */

package/components/InputFile/InputFile.utils.d.ts

@@ -1,43 +1,61 @@
+import { DSLanguage } from '../../utils';
 import { InputFileProps } from './InputFile';
-export type InputFileLanguage = 'de' | 'en';
-export type InputFileTranslations = typeof DS_INPUT_FILE_TRANSLATIONS_EN;
-export declare const DS_INPUT_FILE_TRANSLATIONS_EN: {
+export type InputFileLanguage = DSLanguage;
+export type InputFileTranslations = {
+    /** Instructions for the drag-and-drop area. */
     dragAndDropInstructions: string;
+    /** Feedback message when file exceeds maximum size. */
     feedbackFileSize: string;
+    /** Feedback message when file type is not allowed. */
     feedbackFileType: string;
+    /**
+     * Label for the button to remove a file from selected files.
+     *
+     * Placeholder: `{fileName}` = the name of the file.
+     */
     fileListRemoveSelectionButtonLabel: string;
+    /**
+     * Label for the button to cancel an ongoing upload.
+     *
+     * Placeholder: `{fileName}` = the name of the file.
+     */
     fileListCancelUploadButtonLabel: string;
+    /**
+     * Label for the button to delete a file.
+     *
+     * Placeholder: `{fileName}` = the name of the file.
+     */
     fileListDeleteFileButtonLabel: string;
+    /**
+     * Announced when a file upload is in an indeterminate state.
+     *
+     * Placeholder: `{fileName}` = the name of the file.
+     */
     fileListIndeterminate: string;
+    /**
+     * Alt text for a file preview image.
+     *
+     * Placeholder: `{fileName}` = the name of the file.
+     */
     fileListPreviewAltText: string;
+    /** Hint text announced when files are selected. */
     filesSelectedHint: string;
+    /** Word "required" used in form field announcements. */
     required: string;
+    /** Label for the upload status section. */
     uploadStatus: string;
+    /** Text shown while a file is uploading. */
     uploading: string;
+    /** Text shown when upload is complete. */
     success: string;
+    /** Text for the retry upload action. */
     retry: string;
+    /** Label for the popover toggle button. */
     togglePopover: string;
 };
-export declare const DS_INPUT_FILE_TRANSLATIONS_DE: {
-    dragAndDropInstructions: string;
-    feedbackFileSize: string;
-    feedbackFileType: string;
-    fileListRemoveSelectionButtonLabel: string;
-    fileListCancelUploadButtonLabel: string;
-    fileListDeleteFileButtonLabel: string;
-    fileListIndeterminate: string;
-    fileListPreviewAltText: string;
-    filesSelectedHint: string;
-    required: string;
-    uploadStatus: string;
-    uploading: string;
-    success: string;
-    retry: string;
-    togglePopover: string;
-};
-export declare const DS_INPUT_FILE_TRANSLATIONS: {
-    [key in InputFileLanguage]: InputFileTranslations;
-};
+export declare const DS_INPUT_FILE_TRANSLATIONS_EN: InputFileTranslations;
+export declare const DS_INPUT_FILE_TRANSLATIONS_DE: InputFileTranslations;
+export declare const DS_INPUT_FILE_TRANSLATIONS: Record<string, InputFileTranslations>;
 /**
  * @param file  the File you just got from input.files[0]
  * @param acceptAttr  the literal string from your <input accept="…">