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

package/components/Popover/Popover.utils.d.ts

@@ -0,0 +1,53 @@
+import { PopoverProps } from './Popover';
+export declare const usePopover: ({ initialOpen, placement, isOpen: controlledOpen, popoverOffset, onOpenChange: setControlledOpen, }?: PopoverProps) => {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    popoverOffset: number;
+    setOpen: (isOpen: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+};
+export declare const validatePopoverAnchor: (children: React.ReactNode) => void;
+export declare const validatePopoverChildren: ({ hasContent, hasAnchor, }: {
+    hasContent: boolean;
+    hasAnchor: boolean;
+}) => void;

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

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

package/components/Radio/Radio.d.ts

@@ -1,24 +1,42 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
-
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** Label text displayed next to the radio */
-    label: React.ReactNode;
-    /** Name of the radio group */
+    /** Label text displayed next to the radio. */
+    label: string;
+    /** Name of the radio group. */
     name: string;
-    /** Set the value of the radio */
+    /** Set the value of the radio. */
     value: string;
-    /** Disables the radio, preventing user interaction */
-    disabled?: boolean;
-    /** Hides the radio label, can be responsive
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
     /** Controls whether the radio is checked. */
     checked?: boolean;
-    /** Marks the radio as invalid, typically used for form validation */
+    /** Allows the addition of e.g. decorative icons for an option.  */
+    customArea?: React.ReactNode;
+    /** Changes the position of the custom area and lifts size restrictions.
+     * @default false
+     */
+    isCustomAreaAbove?: boolean;
+    /** Disables the radio, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Id of the parent Fieldset, required for a11y when systemFeedback is set
+     */
+    fieldsetId?: string;
+    /** Makes the label use `ds.utility-medium-bold` if any option has a `hint` and `hideUncheckedHint` is set to false.
+     * @default false
+     */
+    isBold?: boolean;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /** Marks the radio as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Callback function triggered when the state of the radio changes */
+    /** Controls whether the hint is displayed when the radio button is not checked.
+     * @default false
+     */
+    hideUncheckedHint?: boolean;
+    /** Callback function called when the state of the radio changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/components/RadioGroup/RadioGroup.d.ts

@@ -1,7 +1,6 @@
 import { FieldsetHTMLAttributes } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 import { RadioGroupOption } from './RadioGroup.utils';
-
 export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
     /**
      * The `legend` prop can either be a simple `string` or an object with specific properties.
@@ -14,44 +13,55 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
      * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} legend
      */
     legend: FieldsetProps['legend'];
-    /** Name of the radio group */
+    /** Name of the radio group. */
     name: string;
     /**
-     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button
-     * `{label: string; value: string}[]`
-     * @prop {{label: string; value: string}[]} options
+     * An array of RadioGroupOption Objects containing the label and the value of each Radio Button.
+     * `{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string}[]`
+     * @prop {{label: string; value: string; className?: string; customArea?: React.ReactNode; isCustomAreaAbove?: boolean; hint?: string;}[]} options
      */
     options: RadioGroupOption[];
+    /** Value of the selected Option in **uncontrolled RadioGroup** component. */
+    defaultValue?: string;
+    /** Short descriptive text displayed beneath the legend. */
+    description?: FieldsetProps['description'];
     /**
-     * Set the alignment of the radio buttons
+     * Set the direction of the radio buttons.
+     * `direction="horizontal"` is not possible if a `hint` or `customArea` is passed to the `options`.
+     * @default 'vertical'
      */
-    alignment?: 'vertical' | 'horizontal';
-    /**
-     * Value of the selected Option in **uncontrolled RadioGroup** component
+    direction?: 'vertical' | 'horizontal';
+    /** Disables the radio group, preventing user interaction.
+     * @default false
      */
-    defaultValue?: string;
-    /** Short descriptive text displayed beneath the legend */
-    description?: FieldsetProps['description'];
-    /** Disables the radio group, preventing user interaction */
     disabled?: boolean;
-    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set */
+    /** Controls whether the hint is displayed when the radio buttons are not checked. If set to `false` labels of radio buttons with hints will be displayed in bold.
+     * @default false
+     */
+    hideUncheckedHints?: boolean;
+    /** Unique id for the radio group, needs to be set for proper accessibility functionality, if `description` or `systemFeedback` are set. */
     id?: string;
-    /** Marks the radio group as invalid, typically used for form validation */
+    /** Marks the radio group as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
     /** Marks the radio group as required.
-     *  When this property is set, an asterisk (*) is automatically appended to the radio group's legend
+     *  When this property is set, an asterisk (*) is automatically appended to the radio 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;
-    /** Set the value of the selected option */
+    /** Set the value of the selected option. */
     value?: string;
-    /** Callback function triggered when the value of the radio group changes */
+    /** Callback function called when the value of the radio group changes. */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**
  * The `DSRadioGroup` component offers a cohesive and accessible solution for grouping radio buttons,
- * 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: [Radio Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=860-2728)
  * */
 export declare const DSRadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/RadioGroup/RadioGroup.utils.d.ts

@@ -1,7 +1,8 @@
 import { RadioProps } from '../Radio/Radio';
 import { RadioGroupProps } from './RadioGroup';
-
-export type RadioGroupOption = Pick<RadioProps, 'label' | 'value'>;
-type ValidationProps = Pick<RadioGroupProps, 'description' | 'id' | 'legend' | 'name' | 'options' | 'systemFeedback'>;
-export declare const validateProps: ({ description, id, legend, name, options, systemFeedback, }: ValidationProps) => void;
+export type RadioGroupOption = Pick<RadioProps, 'label' | 'value' | 'className' | 'customArea' | 'hint' | 'isCustomAreaAbove'>;
+type ValidationProps = Pick<RadioGroupProps, 'legend' | 'name' | 'options' | 'description' | 'direction' | 'id' | 'systemFeedback'>;
+export declare const optionsHaveHint: (options: RadioGroupOption[]) => boolean;
+export declare const optionsHaveCustomAreaInline: (options: RadioGroupOption[]) => boolean;
+export declare const validateRadioGroupProps: ({ legend, name, options, description, direction, id, systemFeedback, }: ValidationProps) => void;
 export {};

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

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

package/components/Scroller/Scroller.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, JSX } from 'react';
+export interface ScrollerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content to be displayed within the scroller. */
+    children?: React.ReactNode;
+    /** Scrolls the scroll area to the left either smooth or immediately.
+     *  `{scrollPosition: number;`
+     *  `isSmooth?: boolean;}`
+     */
+    scrollToPosition?: {
+        scrollPosition: number;
+        isSmooth?: boolean;
+    };
+}
+/**
+ * The <DSScroller> component enables horizontal scrolling when a single item or a group of items
+ *  exceeds the container width, allowing users to navigate content side-to-side seamlessly.
+ *
+ * Design in Figma: [Scroller](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6263-49213&t=wRBNgx5siTv3aUkL-11)
+ */
+export declare const DSScroller: ({ children, className, scrollToPosition, ...rest }: ScrollerProps) => JSX.Element;

package/components/Scroller/Scroller.utils.d.ts

@@ -0,0 +1,3 @@
+export declare const SCROLLER_DIRECTION: readonly ["prev", "next"];
+export type ScrollerDirection = (typeof SCROLLER_DIRECTION)[number];
+export declare const SCROLL_MARGIN_INLINE = 48;

package/components/Select/Select.d.ts

@@ -1,44 +1,55 @@
 import { SelectHTMLAttributes } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { SelectOptionsOrOptGroups, SelectSize } from './Select.utils';
-
 export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
-    /** Unique id for the select */
+    /** Unique id for the select. */
     id: string;
-    /** Label text displayed above the select */
+    /** Label text displayed above the select. */
     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 SelectOption = {label: string; value: string | number; isDisabled?: boolean;}`
      *  `type SelectOptionsGroup = {label: string; options: SelectOption[];}`
      *  `type SelectOptionsOrOptGroups = (SelectOption | SelectOptionsGroup)[];`
      * */
     options: SelectOptionsOrOptGroups;
-    /** Disables the select, preventing user interaction */
+    /** Disables the select, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Hides the select label, can be responsive
+    /** Hides the select 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 select as invalid, typically used for form validation */
+    /** Marks the select as invalid, typically used for form validation.
+     * @default false
+     */
     invalid?: boolean;
-    /** Modifies the empty option label to ensure a conscious choice. */
+    /** Modifies the empty option label to ensure a conscious choice.
+     * @default 'Select'
+     */
     placeholder?: string;
-    /** Indicates that the select is required */
+    /** Indicates that the select is required.
+     * @default false
+     */
     required?: boolean;
-    /** Size of the select */
+    /** Size of the select.
+     * @default 'medium'
+     */
     size?: SelectSize;
-    /** Defines a system feedback message, shown when `invalid={true}` */
+    /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
 }
 /**
  * Use the DSSelect component to efficiently navigate through and select from a range of options,
  * enhancing user interaction and decision-making in your application.
  *
+ * Design in Figma: [Select](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=8139-4888)
  *
  * <div className="ds-alert">If you are looking for a component with a **custom dropdown** or the ability to **filter** and **select multiple options**, please take a look at
  * [DSCombobox](/docs/components-combobox--documentation)</div>
  * */
-export declare const DSSelect: ({ id, label, options, className, defaultValue, disabled, hideLabel, hint, invalid, placeholder, required, size, systemFeedback, value, ...rest }: SelectProps) => JSX.Element;
+export declare const DSSelect: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLSelectElement>>;

package/components/Select/Select.utils.d.ts

@@ -1,7 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { GroupBase, OptionsOrGroups } from 'react-select';
 import { SelectProps } from './Select';
-
 type ValidationProps = Pick<SelectProps, 'id' | 'label' | 'options'>;
 export interface SelectOption extends HTMLAttributes<HTMLOptionElement> {
     label: string;

package/components/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,19 @@
+import { LinkButtonProps } from '../LinkButton/LinkButton';
+export interface SkipToContentProps extends Pick<LinkButtonProps, 'className' | 'theme'> {
+    /** Content within the SkipToContent Link.
+     * @default 'Skip to main content'
+     */
+    children?: string;
+    /** id of the element to be focused by the SkipToContent Link.
+     * @default 'main'
+     */
+    targetElementId?: string;
+}
+/**
+ * The `<DSSkipToContent />` component is an accessibility feature that allows users, especially those using screen readers or keyboard navigation, to quickly jump to the targeted content of a webpage without having to focus all the navigation items first. This improves the user experience by making it easier and faster to access important information.
+ *
+ * Focus the section below by using the tab key to see the "Skip To Content" component in action.
+ *
+ * Design in Figma: [Skip To Content](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=16333-2371)
+ */
+export declare const DSSkipToContent: import('react').ForwardRefExoticComponent<SkipToContentProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/SkipToContent/SkipToContent.test.d.ts

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

package/components/Slider/Slider.d.ts

@@ -0,0 +1,63 @@
+import { InputHTMLAttributes } from 'react';
+import { BreakpointCustomizable } from '../../types';
+import { InputSize } from '../Input/Input.utils';
+export interface SliderProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Unique id for the Slider. */
+    id: string;
+    /** Label text displayed above the Slider. */
+    label: string;
+    /** Disables the Slider, preventing user interaction.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Hides the Slider label, can be responsive.
+     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
+     * @default false
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /** Controls the visibility of an additional number input for granular value control.
+     * Cannot be used if step > 1 is set.
+     * @default false
+     */
+    hideNumberInput?: boolean;
+    /** Short descriptive text displayed beneath the label. */
+    hint?: string;
+    /**  Controls if the tooltip is visible outside of interactions. Only usable when `hideNumberInput={true}`.
+     * @default false
+     */
+    isTooltipAlwaysVisible?: boolean;
+    /**
+     * Sets the maximum value
+     * @default 100
+     */
+    max?: number | string;
+    /**
+     * Sets greatest value in the range of permitted values.
+     * @default 0
+     */
+    min?: number | string;
+    /**
+     * Specifies the granularity that the value must adhere to.
+     * @default 1
+     */
+    step?: number | string;
+    /** Number input props:
+     * `suffix`:  Text displayed as a suffix inside the input, maximum 5 characters.
+     *
+     * `size`:  Size of the input.
+     *  (default): `'medium'`
+     */
+    numberInputProps?: {
+        suffix?: string;
+        size?: InputSize;
+    };
+}
+/**
+ * The `<DSSlider />` component is a flexible range input that allows users to select a value within a defined range.
+ * It supports various customizations, including a label, hint, tooltip and an optional number input for precise value selection.
+ *
+ * The component also features configurable step values and min/max limits for better user guidance.
+ *
+ * Design in Figma: [Input Slider](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=29536-27468&t=31EIQag1wrGVM75J-4)
+ */
+export declare const DSSlider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/Slider/Slider.test.d.ts

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

package/components/Slider/Slider.utils.d.ts

@@ -0,0 +1,65 @@
+import { SliderProps } from './Slider';
+export declare const MAXIMUM_TICK_AMOUNT = 11;
+export declare const LABEL_LENGTH_BREAKPOINT = 4;
+/**
+ * Returns the number of characters in a number, including the minus sign if present.
+ *
+ * @param {number} num - The number to check.
+ * @returns {number} The total length of the number including all characters.
+ *
+ * @example
+ * getNumberLength(12345); // 5
+ * getNumberLength(-9876); // 5 (includes the minus sign)
+ * getNumberLength(0);     // 1
+ */
+export declare const getNumberLength: (num: number) => number;
+/**
+ * Checks if a given value is aligned to a specific step interval,
+ * starting from a defined minimum value. The check allows for minor
+ * floating-point inaccuracies using an epsilon tolerance.
+ *
+ * @param {number} value - The numeric value to check for alignment.
+ * @param {number} step - The step size that defines valid intervals.
+ * @param {number} parsedMin - The minimum value from which steps start.
+ * @returns {boolean} `true` if the value is aligned to the step; otherwise, `false`.
+ */
+export declare const isStepAligned: (value: number, step: number, parsedMin: number) => boolean;
+/**
+ * Snaps a numeric value to the nearest valid step within a defined range,
+ * clamping it between the provided min and max values.
+ *
+ * @param value - The input number to be snapped.
+ * @param step - The step size as a number or string (e.g., '0.5', 1).
+ * @param min - The minimum allowed value.
+ * @param max - The maximum allowed value.
+ * @returns The value snapped to the nearest step, clamped and precision-adjusted.
+ */
+export declare const snapValueToStep: (value: number, step: string | number, min: number, max: number) => number;
+/**
+ * Calculates the CSS `left` offset for a tick mark on a slider component,
+ * adjusting its position so that it aligns visually with the slider thumb.
+ *
+ * The function computes the percentage position of the tick based on the
+ * provided `tickValue` in relation to the `parsedMin` and `parsedMax` range,
+ * then applies a correction (`shift`) to ensure proper alignment with the thumb.
+ *
+ * The shift is calculated with a linear formula derived to meet specific
+ * alignment criteria at 0%, 50%, and 100%.
+ *
+ * @param tickValue - The numeric value of the current tick mark.
+ * @param parsedMin - The minimum value of the slider range.
+ * @param parsedMax - The maximum value of the slider range.
+ * @returns A CSS `left` value string using `calc()` to properly position the tick.
+ */
+export declare const getTickLeftOffset: (tickValue: number, parsedMin: number, parsedMax: number) => string;
+type ValidationProps = Pick<SliderProps, 'id' | 'label'>;
+/**
+ * Validates the given properties of the DSSlider 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 DSSlider properties to validate. This includes
+ *                          properties related to the prefix, suffix, icons and action button of the input.
+ */
+export declare const validateSliderProps: ({ id, label }: ValidationProps) => void;
+export {};

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

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

package/components/Spinner/Spinner.d.ts

@@ -1,15 +1,24 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { SelectedAriaAttributes, Theme } from '../../types';
 import { SpinnerAriaAttribute, SpinnerSize } from './Spinner.utils';
-
 export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
-    /** Size of the spinner */
+    /** Size of the spinner.
+     * @default 'small'
+     */
     size?: SpinnerSize;
-    /** Defines the theme */
+    /** Defines the theme.
+     * @default 'light'
+     */
     theme?: Theme;
 }
+/**
+ *
+ * Shows the loading state and that the user request is being processed.
+ *
+ * Design in Figma: [Spinner](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26-3)
+ */
 export declare const DSSpinner: ({ aria, className, size, theme, ...rest }: SpinnerProps) => JSX.Element;

package/components/Switch/Switch.d.ts

@@ -1,30 +1,41 @@
 import { ButtonHTMLAttributes } from 'react';
 import { SelectedAriaAttributes } from '../../types';
 import { SwitchAriaAttribute, SwitchLabelPosition } from './Switch.utils';
-
 export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Content within the label */
+    /** Content within the label. */
     children: React.ReactNode;
-    /** ARIA attributes to enhance accessibility
+    /** ARIA attributes to enhance accessibility.
      * `{'aria-label'? string;}`
      */
     aria?: SelectedAriaAttributes<SwitchAriaAttribute>;
-    /** Alignment of the label */
+    /** Alignment of the label.
+     * @default 'left'
+     */
     alignLabel?: SwitchLabelPosition;
-    /** Controls whether the switch is checked. */
+    /** Controls whether the switch is checked.
+     * @default false
+     */
     checked?: boolean;
-    /** Identifier for analytics tracking */
-    dataTrackingid?: string;
-    /** Disables the switch, preventing user interaction */
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
+    /** Disables the switch, preventing user interaction.
+     * @default false
+     */
     disabled?: boolean;
-    /** Shows loading indicator */
+    /** Shows loading indicator.
+     * @default false
+     */
     loading?: boolean;
-    /** Stretches the Switch over the parent's width */
+    /** Stretches the Switch over the parent's width.
+     * @default false
+     */
     stretched?: boolean;
-    /** Callback function triggered when the switch is clicked */
+    /** Callback function called when the switch is clicked. */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * Often used in settings, in which users can communicate their choice through binary selection.
+ *
+ * Design in Figma: [Switch](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=513-2)
  * */
-export declare const DSSwitch: ({ children, aria, alignLabel, checked, className, dataTrackingid, disabled, loading, stretched, onClick, ...rest }: SwitchProps) => JSX.Element;
+export declare const DSSwitch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,10 +1,19 @@
-import { HTMLAttributes } from 'react';
-import { SystemFeedbackType } from './SystemFeedback.utils';
-
+import { HTMLAttributes, JSX } from 'react';
+import { SystemFeedbackVariant } from './SystemFeedback.utils';
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
-    /** Defines the message */
+    /** Unique id for connecting the system feedback with aria attributes like aria-describedby. */
+    id: string;
+    /** Defines the message. */
     message: string;
-    /** Defines the type */
-    type: SystemFeedbackType;
+    /** Defines the variant (e.g. "error", "success" or "warning"). */
+    variant: SystemFeedbackVariant;
 }
-export declare const DSSystemFeedback: ({ className, message, type, ...rest }: SystemFeedbackProps) => JSX.Element;
+/**
+ * Use the SystemFeedback component to provide clear and immediate feedback to the user
+ * about the status of a system process or validation state.
+ *
+ * Design in Figma: [SystemFeedback](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=14690-32&t=qoxy54r8T2z3eW8T-4)
+ *
+ * <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 DSSystemFeedback: ({ id, message, variant, className, ...rest }: SystemFeedbackProps) => JSX.Element;

package/components/SystemFeedback/SystemFeedback.utils.d.ts

@@ -1,8 +1,5 @@
-interface SystemFeedbackIcons {
-    valid: 'circle-check-colored';
-    invalid: 'diamond-exclamationmark-colored';
-    warning: 'triangle-exclamationmark-colored';
-}
-export declare const systemFeedbackIcons: SystemFeedbackIcons;
-export type SystemFeedbackType = 'valid' | 'invalid' | 'warning';
+type SystemFeedbackIcon = 'circle-check-colored' | 'diamond-exclamationmark-colored' | 'triangle-exclamationmark-colored';
+export declare const SYSTEM_FEEDBACK_VARIANT: readonly ["success", "error", "warning"];
+export type SystemFeedbackVariant = (typeof SYSTEM_FEEDBACK_VARIANT)[number];
+export declare const SYSTEM_FEEDBACK_ICON_MAP: Record<SystemFeedbackVariant, SystemFeedbackIcon>;
 export {};

package/components/Tabs/TabList/NavigationTabList/NavigationTabList.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { NavigationTab } from '../../../NavigationTabs/NavigationTabs';
+interface NavigationTabListProps {
+    tabs: NavigationTab[];
+    tabRefs: React.RefObject<HTMLAnchorElement[]>;
+    scrollerClass: string;
+    scrollerRef: React.RefObject<HTMLUListElement>;
+    selectedTabIndex: number;
+    handleNavigationKeydown: (event: React.KeyboardEvent<HTMLAnchorElement>, index: number) => void;
+    setSelectedTab: (index: number) => void;
+}
+/**
+ * The NavigationTabList component is an internal component used inside the TabList component.
+ * It renders an unordered list with list items that contain anchor elements.
+ *
+ * Consumers can pass in a link component which is cloned and modified. This allows us to add
+ * DSIcon and NumberIndicator and other props.
+ * Additionally the link component can be a regular anchor element or a Link component from
+ * React Router/Next or any other routing framework.
+ */
+export declare const NavigationTabList: ({ tabs, tabRefs, scrollerClass, scrollerRef, selectedTabIndex, handleNavigationKeydown, setSelectedTab, }: NavigationTabListProps) => JSX.Element;
+export {};