@stihl-design-system/components 1.0.0-RC.14 → 1.0.0-RC.16

package/combobox.BhzaJrs7.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as q } from "react/jsx-runtime";
+import { d as w } from "./chunks/index.CgTHIF3K.js";
+import { v as D, c as L } from "./chunks/CustomReactSelect.C2yN7CYh.js";
+const P = (b) => {
+  const e = w.c(27);
+  let l, t, o, s, i, n, a, d, c, r, v;
+  e[0] !== b ? ({
+    id: t,
+    label: o,
+    className: l,
+    disabled: i,
+    dropdownOnFocus: n,
+    hideLabel: a,
+    invalid: d,
+    lang: c,
+    required: r,
+    variant: v,
+    ...s
+  } = b, e[0] = b, e[1] = l, e[2] = t, e[3] = o, e[4] = s, e[5] = i, e[6] = n, e[7] = a, e[8] = d, e[9] = c, e[10] = r, e[11] = v) : (l = e[1], t = e[2], o = e[3], s = e[4], i = e[5], n = e[6], a = e[7], d = e[8], c = e[9], r = e[10], v = e[11]);
+  const x = i === void 0 ? !1 : i, p = n === void 0 ? !1 : n, C = a === void 0 ? !1 : a, O = d === void 0 ? !1 : d, g = c === void 0 ? "en" : c, E = r === void 0 ? !1 : r, N = v === void 0 ? "single" : v;
+  if (process.env.NODE_ENV !== "production") {
+    const {
+      options: h
+    } = s;
+    D({
+      id: t,
+      label: o,
+      options: h
+    });
+  }
+  const u = N === "multi", F = !p || u;
+  let f;
+  e[12] !== l || e[13] !== x || e[14] !== p || e[15] !== C || e[16] !== t || e[17] !== O || e[18] !== u || e[19] !== o || e[20] !== g || e[21] !== E || e[22] !== s || e[23] !== F ? (f = {
+    id: t,
+    label: o,
+    className: l,
+    disabled: x,
+    hideLabel: C,
+    isMulti: u,
+    invalid: O,
+    lang: g,
+    openMenuOnClick: p,
+    openMenuOnFocus: p,
+    isClearable: F,
+    required: E,
+    ...s
+  }, e[12] = l, e[13] = x, e[14] = p, e[15] = C, e[16] = t, e[17] = O, e[18] = u, e[19] = o, e[20] = g, e[21] = E, e[22] = s, e[23] = F, e[24] = f) : f = e[24];
+  const M = f;
+  let m;
+  return e[25] !== M ? (m = /* @__PURE__ */ q(L, { ...M }), e[25] = M, e[26] = m) : m = e[26], m;
+};
+export {
+  P as DSCombobox
+};

package/components/Accordion/Accordion.d.ts

@@ -18,7 +18,7 @@ export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement
      * @default 'right'
      */
     chevronPosition?: ChevronPosition;
-    /** Custom area below the summary. */
+    /** Custom area below the summary. **Cannot be used together with numberIndicatorValue**. */
     hint?: React.ReactNode;
     /** Aligns the accordion with text.
      * @default false
@@ -28,6 +28,8 @@ export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement
      * @default false
      */
     isOpen?: boolean;
+    /** Number Indicator value displayed next to the label. **Cannot be used together with hint**. */
+    numberIndicatorValue?: string;
     /** Size of the accordion.
      * @default 'medium'
      */
@@ -35,5 +37,7 @@ export interface AccordionProps extends DetailsHTMLAttributes<HTMLDetailsElement
 }
 /**
  * A component that renders an accordion using the `details` HTML element.
+ *
+ * Design in Figma: [Accordion](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=17260-166)
  */
 export declare const DSAccordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDetailsElement>>;

package/components/Accordion/Accordion.utils.d.ts

@@ -9,6 +9,6 @@ export type Summary = string | {
     headingSize?: HeadingSize;
     headingTag?: HeadingTag;
 };
-type ValidationProps = Pick<AccordionProps, 'children' | 'summary'>;
-export declare const validateAccordionProps: ({ children, summary, }: ValidationProps) => void;
+type ValidationProps = Pick<AccordionProps, 'children' | 'hint' | 'numberIndicatorValue' | 'summary'>;
+export declare const validateAccordionProps: ({ children, summary, hint, numberIndicatorValue, }: ValidationProps) => void;
 export {};

package/components/AriaLiveRegions/AriaLiveRegions.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 /**
  * A component that provides hidden ARIA live regions for accessibility, allowing screen readers to announce changes dynamically.
  */

package/components/Asterisk/Asterisk.d.ts

@@ -1 +1,2 @@
+import { JSX } from 'react';
 export declare const Asterisk: () => JSX.Element;

package/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,45 @@
+import { SelectedAriaAttributes } from '../../types';
+import { BreadcrumbAriaAttributes } from './Breadcrumb.utils';
+import { JSX } from 'react';
+export interface BreadcrumbLink {
+    /** The link label text. */
+    label: string;
+    /** The href for the link if no framework-specific link component wrapper is provided. */
+    href?: string;
+    /**  Name of the icon to display.*/
+    iconName?: string;
+    /** The framework-specific link component wrapper, e.g., `Link` for `next` or `react-router-dom`. */
+    wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;
+}
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /** ARIA attributes to ensure accessibility
+     *
+     *  `{'aria-label'? string;`
+     *  `'aria-labelledby'?: string;}`
+     * */
+    aria: SelectedAriaAttributes<BreadcrumbAriaAttributes>;
+    /** Breadcrumb link array structure with optional and required parameters
+     *  `{ label: string;`
+     *  `href?: string;`
+     *  `iconName?: IconName;`
+     *  `wrapper?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement>>;}[]`
+     */
+    links: BreadcrumbLink[];
+    /** Show all (...) button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the show all button.
+     * (default) 'Show all links'
+     */
+    showAllButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
+}
+/**
+ * A breadcrumb provides orientation to users within the structure of a website or application.
+ *
+ * Design in Figma: [Breadcrumb](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=23527-3393)
+ * */
+export declare const DSBreadcrumb: ({ aria, className, links, showAllButtonProps, ...rest }: BreadcrumbProps) => JSX.Element;

package/components/Breadcrumb/Breadcrumb.utils.d.ts

@@ -0,0 +1,4 @@
+import { BreadcrumbProps } from './Breadcrumb';
+export type BreadcrumbAriaAttributes = 'aria-label' | 'aria-labelledby';
+export declare const MAX_VISIBLE_LINKS = 4;
+export declare const validateBreadcrumbProps: ({ aria, links }: BreadcrumbProps) => void;

package/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable, IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { ButtonAriaAttribute, ButtonSize, ButtonVariant } from './Button.utils';
@@ -12,8 +12,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      *  `'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';}`
      * */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
-    /** Identifier for analytics tracking. */
-    dataTrackingid?: string;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
     /** Disables the button, preventing user interaction.
      * @default false
      */
@@ -56,5 +56,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 /**
  * Use the Button component to initialize an important action or to highlight the user journey.
+ *
+ * Design in Figma: [Button](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-3943&t=UBsmFURFENnuYSW1-11)
  * */
-export declare const DSButton: ({ children, aria, className, dataTrackingid, disabled, hideLabel, iconName, iconPosition, iconSource, isFlush, loading, size, theme, variant, onClick, ...rest }: ButtonProps) => JSX.Element;
+export declare const DSButton: ({ children, aria, className, disabled, hideLabel, iconName, iconPosition, iconSource, isFlush, loading, size, theme, variant, onClick, ...rest }: ButtonProps) => JSX.Element;

package/components/ButtonRound/ButtonRound.d.ts

@@ -1,6 +1,7 @@
 import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
 import { ButtonRoundVariant } from './ButtonRound.utils';
+import { JSX } from 'react';
 export interface ButtonRoundProps extends Omit<ButtonProps, 'hideLabel' | 'size' | 'iconPosition' | 'isFlush'> {
     children: React.ReactNode;
     /** Visual style variant of the button.
@@ -14,5 +15,7 @@ export interface ButtonRoundProps extends Omit<ButtonProps, 'hideLabel' | 'size'
 }
 /**
  * Icon only Buttons should only used for functions where visible labels are not needed to define the function e.g. modal close or pagination buttons.
+ *
+ * Design in Figma: [Button Round](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=168-4016&t=UBsmFURFENnuYSW1-4)
  * */
-export declare const DSButtonRound: ({ children, aria, className, dataTrackingid, disabled, iconName, iconSource, loading, theme, variant, onClick, ...rest }: ButtonRoundProps) => JSX.Element;
+export declare const DSButtonRound: ({ children, aria, className, disabled, iconName, iconSource, loading, theme, variant, onClick, ...rest }: ButtonRoundProps) => JSX.Element;

package/components/Checkbox/Checkbox.d.ts

@@ -31,5 +31,7 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 /**
  * A control element that allows users to make a binary choice. It can either be checked or unchecked.
+ *
+ * Design in Figma: [Checkbox](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1017-2328&t=UBsmFURFENnuYSW1-11)
  * */
 export declare const DSCheckbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import { FieldsetHTMLAttributes } from 'react';
+import { FieldsetHTMLAttributes, JSX } from 'react';
 import { FieldsetProps } from '../Fieldset/Fieldset';
 export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     /** DSCheckbox elements within the checkbox group. */
@@ -43,5 +43,7 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
  * The `DSCheckboxGroup` component offers a cohesive and accessible solution for grouping `DSCheckbox` elements,
  * complete with customizable legends, direction options, and integrated validation feedback,
  * enhancing the user experience in form designs.
+ *
+ * Design in Figma: [Checkbox Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=5626-11362&t=UBsmFURFENnuYSW1-4)
  * */
 export declare const DSCheckboxGroup: ({ children, legend, className, description, direction, disabled, id, invalid, required, systemFeedback, ...rest }: CheckboxGroupProps) => JSX.Element;

package/components/ChipGroup/ChipGroup.d.ts

@@ -38,5 +38,7 @@ export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * A component for selecting single or multiple chips, with options for selection (like radio buttons) or removal.
  * Supports different sizes. Use icons sparingly to reduce cognitive load.
+ *
+ * Design in Figma: [Chip Group](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=18691-978)
  */
 export declare const DSChipGroup: React.FC<ChipGroupProps>;

package/components/Combobox/Combobox.d.ts

@@ -1,4 +1,5 @@
 import { CustomReactSelectProps } from './CustomReactSelect/CustomReactSelect';
+import { JSX } from 'react';
 type CommonComboboxProps = {
     /** Opens the dropdown on click or focus.
      * @default false
@@ -18,6 +19,8 @@ export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
 }), '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 {};

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

@@ -1,11 +1,12 @@
+import { JSX } from 'react';
 import { GroupBase } from 'react-select';
 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. */
     id: string;

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

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

package/components/Dialog/Dialog.d.ts

@@ -1,9 +1,18 @@
-import { DialogHTMLAttributes } from 'react';
+import { DialogHTMLAttributes, JSX } from 'react';
 export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
     /** Content within the Dialog. */
     children: React.ReactNode;
-    /** Label for the close button. */
-    closeButtonLabel?: string;
+    /** 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
      */
@@ -29,6 +38,8 @@ export interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
  * 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, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;
+export declare const DSDialog: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, isOpen, onClose, ...rest }: DialogProps) => JSX.Element;

package/components/Drawer/Drawer.d.ts

@@ -1,12 +1,20 @@
-import { DialogHTMLAttributes } from 'react';
+import { DialogHTMLAttributes, JSX } from 'react';
 import { DrawerPosition } from './Drawer.utils';
 export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
     /** Content within the Drawer. */
     children: React.ReactNode;
-    /** Label for the close button.
-     * @default 'Close modal'
+    /** Close button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the close button.
+     * (default) 'Close dialog'
+     *
      */
-    closeButtonLabel?: string;
+    closeButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+    };
     /** Disables closing the Drawer by clicking on the backdrop.
      * @default false
      */
@@ -35,5 +43,7 @@ export interface DrawerProps extends DialogHTMLAttributes<HTMLDialogElement> {
 /**
  * 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, closeButtonLabel, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;
+export declare const DSDrawer: ({ children, className, closeButtonProps, disableBackdropClose, footer, header, hideCloseButton, position, isOpen, onClose, ...rest }: DrawerProps) => JSX.Element;

package/components/Fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
-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. */
@@ -36,5 +36,7 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
 }
 /**
  * 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/Flag/Flag.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -19,5 +20,7 @@ export interface FlagProps extends React.HTMLAttributes<HTMLSpanElement> {
 }
 /**
  * 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/FloatingActionButton/FloatingActionButton.d.ts

@@ -1,5 +1,6 @@
 import { IconName } from '../../types';
 import { ButtonProps } from '../Button/Button';
+import { JSX } from 'react';
 export interface FloatingActionButtonProps extends Omit<ButtonProps, 'hideLabel' | 'iconPosition' | 'variant' | 'isFlush'> {
     children: React.ReactNode;
     /** Name of the icon to display.
@@ -13,5 +14,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: ({ aria, children, className, disabled, iconName, iconSource, loading, size, theme, onClick, ...rest }: FloatingActionButtonProps) => JSX.Element;

package/components/Heading/Heading.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, JSX } from 'react';
 import { Theme } from '../../types';
 import { HeadingSize, HeadingTag } from './Heading.utils';
 export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
@@ -20,5 +20,7 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 /**
  * The `DSHeading` component is used to specify heading styling and hierarchy in documents.
  * It allows for consistent heading styles across different parts of your application.
+ *
+ * Design in Figma: [Heading](https://www.figma.com/design/d9wrOp4aCplDsV9AVC87Xn/Typography-%F0%9F%85%B0%EF%B8%8F?node-id=3-2186&t=TeSgud7dB5pnld5s-11)
  * */
 export declare const DSHeading: ({ children, className, size, tag, theme, ...rest }: HeadingProps) => JSX.Element;

package/components/Icon/Icon.d.ts

@@ -1,4 +1,4 @@
-import { HTMLProps, SVGProps } from 'react';
+import { HTMLProps, SVGProps, JSX } from 'react';
 import { IconName, SelectedAriaAttributes, Theme } from '../../types';
 import { IconAriaAttribute, IconSize } from './Icon.utils';
 export interface IconProps {
@@ -25,5 +25,7 @@ export interface IconProps {
  * The STIHL Iconography ranges from content and feature icons to product or system icons.
  * The STIHL Design System is using an SVG icon system to visually present an icon object.
  * Icons are provided as assets and can be bundled into the application.
+ *
+ * Design in Figma: [Icon](https://www.figma.com/design/U218NNP4OsipaHOtv5flns/Iconography-%E2%9E%A1%EF%B8%8F?node-id=0-1)
  */
 export declare const DSIcon: ({ aria, className, name, size, source, theme, ...rest }: IconProps & (HTMLProps<HTMLImageElement> | SVGProps<SVGSVGElement>)) => JSX.Element;

package/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable, IconName } from '../../types';
 import { IconProps } from '../Icon/Icon';
 import { InputSize, SupportedInputTypes } from './Input.utils';
@@ -7,14 +7,25 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     id: string;
     /** Label text displayed above the input. */
     label: string;
-    /** Accessibility label for the action button or icon. */
-    actionButtonLabel?: string;
-    /** Name of the icon used in the action button. */
-    actionButtonIconName?: IconName;
-    /** Custom source URL for the action button icon. */
-    actionButtonIconSource?: IconProps['source'];
-    /** Callback function called when the action button is clicked. */
-    actionButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Action button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `iconName`: Name of the icon used in the action button.
+     *
+     * `iconSource`: Custom source URL for the action button icon.
+     *
+     * `label`: Accessibility label for the action button or icon.
+     *
+     * `onClick`: Callback function called when the action button is clicked.
+     */
+    actionButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        iconName?: IconName;
+        iconSource?: string;
+        label?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
     /**
      * Provides hints to the browser for what type of data the input expects.
      * Use standardized values from the W3C specification for input purposes:
@@ -69,5 +80,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * a leading icon, prefix and suffix.
  *
  * Depending on the `type` prop it expects different input types.
+ *
+ * Design in Figma: [Input](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=1744-7211&t=UBsmFURFENnuYSW1-4)
  */
-export declare const DSInput: ({ id, label, actionButtonLabel, actionButtonIconName, actionButtonIconSource, actionButtonOnClick, className, disabled, hint, hideLabel, invalid, leadingIconName, leadingIconSource, prefix, readonly, required, size, suffix, systemFeedback, type, ...rest }: InputProps) => JSX.Element;
+export declare const DSInput: ({ id, label, actionButtonProps, className, disabled, hint, hideLabel, invalid, leadingIconName, leadingIconSource, prefix, readonly, required, size, suffix, systemFeedback, type, ...rest }: InputProps) => JSX.Element;

package/components/Input/Input.utils.d.ts

@@ -7,7 +7,7 @@ export declare const SUPPORTED_INPUT_TYPES: readonly ["color", "date", "datetime
 export type SupportedInputTypes = (typeof SUPPORTED_INPUT_TYPES)[number];
 export declare const UNSUPPORTED_INPUT_TYPES: readonly ["week", "hidden", "button", "checkbox", "password", "radio", "search", "reset", "submit", "image", "datetime"];
 export type UnSupportedInputTypes = (typeof UNSUPPORTED_INPUT_TYPES)[number];
-type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonIconName' | 'actionButtonIconSource'>;
+type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | 'leadingIconName' | 'leadingIconSource' | 'actionButtonProps'>;
 /**
  * Validates the given properties of the DSInput component for common configuration errors.
  * This function is intended to be used in development mode to provide developers with
@@ -16,7 +16,7 @@ type ValidationProps = Pick<InputProps, 'id' | 'label' | 'prefix' | 'suffix' | '
  * @param validationProps - The subset of DSInput properties to validate. This includes
  *                          properties related to the prefix, suffix, icons and action button of the input.
  */
-export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonIconName, actionButtonIconSource, }: ValidationProps) => void;
+export declare const validateInputProps: ({ id, label, prefix, suffix, leadingIconName, leadingIconSource, actionButtonProps, }: ValidationProps) => void;
 /**
  * Validates the input type for the DSInput component and provides warnings for certain unsupported types.
  *

package/components/InputPassword/InputPassword.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
@@ -39,14 +39,21 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * @default 'medium'
      */
     size?: InputSize;
-    /** The show password button text label (for assistive technologies).
-     * @default 'Show password'
+    /** Toggle password visibility button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `hidePasswordText`: The hide password button text label (for assistive technologies).
+     * (default) 'Hide password'
+     *
+     * `showPasswordText`: The show password button text label (for assistive technologies).
+     * (default) 'Show password'
      */
-    showPasswordText?: string;
-    /** The hide password button text label (for assistive technologies).
-     * @default 'Hide password'
-     */
-    hidePasswordText?: string;
+    togglePasswordVisibilityButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        hidePasswordText?: string;
+        showPasswordText?: string;
+    };
 }
 /**
  * The `<DSInputPassword />` component is an input field that allows users to enter and edit passwords.
@@ -54,5 +61,7 @@ export interface InputPasswordProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * a hint and a system feedback message.
  *
  * The user can toggle the visibility of the password by clicking on the action button.
+ *
+ * Design in Figma: [Input Password](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6655&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputPassword: ({ id, label, autoComplete, className, disabled, hidePasswordText, hint, hideLabel, invalid, readonly, required, showPasswordText, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;
+export declare const DSInputPassword: ({ id, label, autoComplete, className, disabled, hint, hideLabel, invalid, readonly, required, togglePasswordVisibilityButtonProps, size, systemFeedback, ...rest }: InputPasswordProps) => JSX.Element;

package/components/InputSearch/InputSearch.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, JSX } from 'react';
 import { BreakpointCustomizable } from '../../types';
 import { InputSize } from '../Input/Input.utils';
 export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'size'> {
@@ -33,10 +33,20 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
      * @default false
      */
     required?: boolean;
-    /** Accessibility label for the submit button.
-     * @default 'Search'
+    /** Submit button props:
+     *
+     * `data-*`: Custom data attributes.
+     *
+     * `label`: Accessibility label for the submit button.
+     *  (default) 'Search'
+     *
+     * `onClick`: Callback function called when the submit button is clicked.
      */
-    submitButtonLabel?: string;
+    submitButtonProps?: {
+        [key: `data-${string}`]: string | undefined;
+        label?: string;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
     /** Defines a system feedback message, shown when `invalid={true}`. */
     systemFeedback?: string;
     /** Size of the input.
@@ -45,8 +55,6 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
     size?: InputSize;
     /** Value of the input. */
     value?: string;
-    /** Callback function called when the submit button is clicked. */
-    submitButtonOnClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
  * The `<DSInputSearch />` component can be used as a dedicated search field input.
@@ -55,5 +63,7 @@ export interface InputSearchProps extends Omit<InputHTMLAttributes<HTMLInputElem
  *
  * A search button is always available on the right to submit the search request.
  * Additionally when the input is filled, a button to clear the input value becomes visible.
+ *
+ * Design in Figma: [Input Search](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=2141-6712&t=UBsmFURFENnuYSW1-11)
  */
-export declare const DSInputSearch: ({ id, label, className, clearButtonLabel, disabled, hint, hideLabel, invalid, readonly, required, size, submitButtonLabel, systemFeedback, value, submitButtonOnClick, onChange, ...rest }: InputSearchProps) => JSX.Element;
+export declare const DSInputSearch: ({ id, label, className, clearButtonLabel, disabled, hint, hideLabel, invalid, readonly, required, size, systemFeedback, value, submitButtonProps, onChange, ...rest }: InputSearchProps) => JSX.Element;