@stihl-design-system/components 1.0.0-RC.27 → 1.0.0-RC.29

package/components/ActionLink/ActionLink.d.ts

@@ -7,11 +7,11 @@ export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' |
      * @default 'left'
      */
     iconPosition?: ActionLinkIconPosition;
-    /** Size of the icon. Only available with `iconPosition='left'` and a custom `iconSource`.
+    /** Size of the icon. **Only available with `iconPosition='left'` and a custom `iconSource`**.
      * @default 'large'
      */
     iconSize?: ActionLinkIconSize;
-    /** Indent level of the link, used to align the link with other elements e.g. inside a DSAccordion. Only available with `iconPosition='left'`.
+    /** Indent level of the link, used to align the link with other elements e.g. inside a DSAccordion. **Only available with `iconPosition='left'`**.
      * @default 0
      */
     indentLevel?: ActionLinkIndentLevel;
@@ -21,11 +21,11 @@ export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' |
     isActive?: boolean;
     /** Number Indicator value displayed next to the label or above the icon. */
     numberIndicatorValue?: string;
-    /** Stretches the link over the parent's width. Only available with `iconPosition='left'`.
+    /** Stretches the link over the parent's width. **Only available with `iconPosition='left'`**.
      * @default false
      */
     stretched?: boolean;
-    /** Defines the weight. Only available with `iconPosition='left'`.
+    /** Defines the weight. **Only available with `iconPosition='left'`**.
      * @default 'normal'
      */
     weight?: ActionLinkWeight;
@@ -33,6 +33,6 @@ export interface ActionLinkProps extends Omit<CommonLinkProps, 'iconPosition' |
 /**
  * Use the ActionLink component when you want the users to navigate to another internal or external page, used in the DSDrawer as a mobile menu or in the DSTopBar of the DSHeader.
  *
- * Design in Figma: [Action Item](https://www.figma.com/design/DNB69TwlN0FaaVg7yVsYu4/DS895-%E2%80%93-Header-%7C-Design?node-id=5875-105748&t=aQoUwuH2oJa7RRay-4)
+ * Design in Figma: [Action Item](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=6307-72257&t=6MyKQ9TAUdzZ1XaJ-4)
  * */
 export declare const DSActionLink: import('react').ForwardRefExoticComponent<ActionLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/components/Combobox/Combobox.d.ts

@@ -4,6 +4,10 @@ type CommonComboboxProps = {
      * @default false
      */
     dropdownOnFocus?: boolean;
+    /** Selects a focused value in the MenuList when the Tab key is pressed.
+     * @default true
+     */
+    tabSelectsValue?: boolean;
 };
 export type ComboboxProps = Omit<(CustomReactSelectProps<false> & {
     /** Defines if only one option or multiple options can be selected.

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

@@ -20,7 +20,7 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
     options: ComboboxOptionsOrOptGroups;
     /** The value of autoComplete to use for the DSCombobox. */
     autoComplete?: string;
-    /** Value of the selected Option in **uncontrolled DSCombobox** component. */
+    /** Value of the initially selected Option. */
     defaultValue?: IsMulti extends true ? ComboboxOption[] : ComboboxOption;
     /** Disables the DSCombobox, preventing user interaction.
      * @default false

package/components/Header/Header.d.ts

@@ -6,7 +6,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
      *
      * `children`: Content of the brand addOn.
      *
-     * `subTitle`: Sub title below the title. Only available with `variant="double"`.
+     * `subTitle`: Sub title below the title. **Only available with `variant="double"`**.
      *
      * `variant`: Variant of the brand addOn.
      *            Defaults to `'single'`

package/components/Radio/Radio.d.ts

@@ -1,5 +1,4 @@
 import { InputHTMLAttributes } from 'react';
-import { BreakpointCustomizable } from '../../types';
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Label text displayed next to the radio. */
     label: string;
@@ -23,11 +22,6 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
      * Id of the parent Fieldset, required for a11y when systemFeedback is set
      */
     fieldsetId?: string;
-    /** Hides the radio label, can be responsive.
-     *  `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
-     * @default false
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
     /** Makes the label use `ds.utility-medium-bold` if any option has a `hint` and `hideUncheckedHint` is set to false.
      * @default false
      */

package/components/SystemFeedback/SystemFeedback.d.ts

@@ -1,11 +1,19 @@
 import { HTMLAttributes, JSX } from 'react';
-import { SystemFeedbackType } from './SystemFeedback.utils';
+import { SystemFeedbackVariant } from './SystemFeedback.utils';
 export interface SystemFeedbackProps extends HTMLAttributes<HTMLDivElement> {
-    /** Sets the id for connecting the system feedback with aria attributes like aria-describedby */
+    /** 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: ({ id, message, type, className, ...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/TopBar/TopBar.d.ts

@@ -32,7 +32,7 @@ export interface BrandAreaLogoProps {
 export interface BrandAddOnProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Content of the brand addOn. */
     children: React.ReactNode;
-    /** Sub title below the title. Only available with `variant="double"`. */
+    /** Sub title below the title. **Only available with `variant="double"`**. */
     subTitle?: string;
     /** Variant of the brand addOn.
      * @default 'single'

package/{customreactselect.Bu1i8wkh.js → customreactselect.Hnch9LGg.js}

@@ -3,12 +3,12 @@ import "react/jsx-runtime";
 import "./chunks/index.CgTHIF3K.js";
 import "./chunks/index.CEyLAtio.js";
 import "react";
-import { c as u } from "./chunks/CustomReactSelect.BPnzhvw1.js";
+import { c as u } from "./chunks/CustomReactSelect.iE5iTdez.js";
 import "./chunks/useBreakpoint.CMOR9ZOB.js";
 import "./asterisk.CR60hx8S.js";
-import "./chunks/Icon.C0161Glk.js";
-import "./systemfeedback.CLQCbTF6.js";
-import "./optioncheckbox.CEEPAq0u.js";
+import "./chunks/Icon.DGTYCv63.js";
+import "./chunks/SystemFeedback.B9f67mjJ.js";
+import "./optioncheckbox.D97W3zeW.js";
 export {
   u as CustomReactSelect
 };

package/{dialog.CGsUCqhR.js → dialog.7sWoqGwL.js}

@@ -3,8 +3,8 @@ import "react/jsx-runtime";
 import "./chunks/index.CgTHIF3K.js";
 import "./chunks/index.CEyLAtio.js";
 import "react";
-import "./chunks/Button.CC0qEsuR.js";
-import { D } from "./chunks/Dialog.BuEEJ199.js";
+import "./chunks/Button.B7xF1E19.js";
+import { D } from "./chunks/Dialog.B_2pKRnd.js";
 export {
   D as DSDialog
 };

package/{drawer.BcAo4TO0.js → drawer.DsF4KIPn.js}

@@ -3,8 +3,8 @@ import "react/jsx-runtime";
 import "./chunks/index.CgTHIF3K.js";
 import "./chunks/index.CEyLAtio.js";
 import "react";
-import "./chunks/Button.CC0qEsuR.js";
-import { D } from "./chunks/Drawer.BXUGmpJI.js";
+import "./chunks/Button.B7xF1E19.js";
+import { D } from "./chunks/Drawer.HFlBTcqN.js";
 export {
   D as DSDrawer
 };

package/{fieldset.DM9ELUJa.js → fieldset.DUFUMcT-.js}

@@ -4,8 +4,8 @@ import "./chunks/index.CEyLAtio.js";
 import "react";
 import "./asterisk.CR60hx8S.js";
 import "./heading.BXFBZhKv.js";
-import "./systemfeedback.CLQCbTF6.js";
-import { D as l } from "./chunks/Fieldset.BX46NuLh.js";
+import "./chunks/SystemFeedback.B9f67mjJ.js";
+import { D as l } from "./chunks/Fieldset.CjIfmN_5.js";
 export {
   l as DSFieldset
 };

package/{filelist.Cj9U-Jx8.js → filelist.nunJKxkv.js}

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as o, jsxs as I } from "react/jsx-runtime";
 import { d as P } from "./chunks/index.CgTHIF3K.js";
-import { D as k } from "./chunks/Button.CC0qEsuR.js";
-import { D as u } from "./chunks/Icon.C0161Glk.js";
-import { DSSystemFeedback as S } from "./systemfeedback.CLQCbTF6.js";
+import { D as k } from "./chunks/Button.B7xF1E19.js";
+import { D as u } from "./chunks/Icon.DGTYCv63.js";
+import { D as S } from "./chunks/SystemFeedback.B9f67mjJ.js";
 import { c as j } from "./chunks/index.CEyLAtio.js";
-import './assets/filelist.H_wKcSPX.css';const F = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), y = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), z = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), C = /[^\p{L}\d]+/giu, E = "$1\0$2", N = "";
+import './assets/filelist.H_wKcSPX.css';const F = new RegExp("([\\p{Ll}\\d])(\\p{Lu})", "gu"), z = new RegExp("(\\p{Lu})([\\p{Lu}][\\p{Ll}])", "gu"), y = new RegExp("(\\d)\\p{Ll}|(\\p{L})\\d", "u"), C = /[^\p{L}\d]+/giu, E = "$1\0$2", N = "";
 function R(t) {
   let e = t.trim();
-  e = e.replace(F, E).replace(y, E), e = e.replace(C, "\0");
+  e = e.replace(F, E).replace(z, E), e = e.replace(C, "\0");
   let a = 0, s = e.length;
   for (; e.charAt(a) === "\0"; )
     a++;
@@ -21,7 +21,7 @@ function R(t) {
 function A(t) {
   const e = R(t);
   for (let a = 0; a < e.length; a++) {
-    const s = e[a], c = z.exec(s);
+    const s = e[a], c = y.exec(s);
     if (c) {
       const i = c.index + (c[1] ?? c[2]).length;
       e.splice(a, 1, s.slice(0, i), s.slice(i));
@@ -145,7 +145,7 @@ const W = "ds-file-list_root_qx1ja_1", $ = "ds-file-list_file-wrapper_qx1ja_7",
           i("fileListRemoveSelectionButtonLabel", [r.name]),
           "."
         ] }),
-        r.feedback && /* @__PURE__ */ o(S, { type: "invalid", id: x(r.name), message: r.feedback, className: l.feedback }, p)
+        r.feedback && /* @__PURE__ */ o(S, { variant: "error", id: x(r.name), message: r.feedback, className: l.feedback }, p)
       ] }, p);
     }, e[10] = d, e[11] = v, e[12] = s, e[13] = i, e[14] = n) : n = e[14], m = a.map(n), e[4] = d, e[5] = a, e[6] = v, e[7] = s, e[8] = i, e[9] = m;
   } else

package/{flag.BHaAfp6B.js → flag.D_iN8iD6.js}

@@ -2,7 +2,7 @@
 import { jsxs as y, jsx as p } from "react/jsx-runtime";
 import { d as L } from "./chunks/index.CgTHIF3K.js";
 import { c as u } from "./chunks/index.CEyLAtio.js";
-import { D as w } from "./chunks/Icon.C0161Glk.js";
+import { D as w } from "./chunks/Icon.DGTYCv63.js";
 import './assets/flag.C7i3MAAP.css';const b = "ds-flag_root_14d3h_1", x = "ds-flag_root--color-grey-light_14d3h_28", G = "ds-flag_root--color-yellow-light_14d3h_31", N = "ds-flag_root--color-red-light_14d3h_34", S = "ds-flag_root--color-green-light_14d3h_37", D = "ds-flag_root--color-orange-base_14d3h_40", C = {
   root: b,
   "root--color-grey-light": "ds-flag_root--color-grey-light_14d3h_28",

package/{floatingactionbutton.DSZXUHB_.js → floatingactionbutton.DOH2k0gv.js}

@@ -2,8 +2,8 @@
 import { jsxs as L, jsx as I } from "react/jsx-runtime";
 import { d as R } from "./chunks/index.CgTHIF3K.js";
 import { c as O } from "./chunks/index.CEyLAtio.js";
-import { D as $ } from "./chunks/Icon.C0161Glk.js";
-import { DSSpinner as q } from "./spinner.CeGt8DxU.js";
+import { D as $ } from "./chunks/Icon.DGTYCv63.js";
+import { DSSpinner as q } from "./spinner.Dht6FspZ.js";
 import { forwardRef as G } from "react";
 import './assets/floatingactionbutton.l0nvFiJU.css';const J = "ds-floating-action-button_root_1any0_1", K = "ds-floating-action-button_root--dark_1any0_70", M = "ds-floating-action-button_root--small_1any0_108", P = "ds-floating-action-button_loader_1any0_129", Q = "ds-floating-action-button_icon--hidden_1any0_141", T = "ds-floating-action-button_label--hidden_1any0_145", e = {
   root: J,

package/{header.WhQHSuB1.js → header.Z4Oxj_xL.js}

@@ -5,7 +5,7 @@ import "./chunks/index.CEyLAtio.js";
 import "react";
 import "./chunks/helpers.BbWkXTr3.js";
 import "./chunks/useIsomorphicLayoutEffect.CnJ9AMFS.js";
-import { a as s, D } from "./chunks/Header.Djs1adPW.js";
+import { a as s, D } from "./chunks/Header.BSvyYrIV.js";
 export {
   s as DSHeader,
   D as DSHeaderContext

package/{icon.DwfGhFCd.js → icon.vMQcEBnH.js}

@@ -3,7 +3,7 @@ import "react/jsx-runtime";
 import "./chunks/index.CgTHIF3K.js";
 import "./chunks/index.CEyLAtio.js";
 import "react";
-import { D as e } from "./chunks/Icon.C0161Glk.js";
+import { D as e } from "./chunks/Icon.DGTYCv63.js";
 export {
   e as DSIcon
 };

package/index.d.ts

@@ -71,6 +71,8 @@ export * from './components/Spinner/Spinner';
 export * from './components/Spinner/Spinner.utils';
 export * from './components/Switch/Switch';
 export * from './components/Switch/Switch.utils';
+export * from './components/SystemFeedback/SystemFeedback';
+export * from './components/SystemFeedback/SystemFeedback.utils';
 export * from './components/Tabs/Tabs';
 export * from './components/Tabs/Tabs.utils';
 export * from './components/Text/Text';