@stihl-design-system/components 1.0.0-RC.13 → 1.0.0-RC.15

package/chunks/{InputStepper.xmWGU9pU.js → InputStepper.BgUod0gn.js}

@@ -1,54 +1,56 @@
 "use client";
-import { j as n } from "./jsx-runtime.C115EyI4.js";
-import { c as u } from "./index.CvOaL64Y.js";
-import { useState as m, useRef as N, useEffect as w } from "react";
-import { u as mt } from "./useBreakpoint.5xBNDiCf.js";
-import { M as E, a as H, u as M } from "./Input.utils.ChV6RJsh.js";
-import { Asterisk as ft } from "../asterisk.DpzETKdT.js";
-import { DSButton as X } from "../button.M4nXjcUn.js";
-import { DSSystemFeedback as bt } from "../systemfeedback.C3Pfxxpp.js";
-import { g as S } from "./helpers.B1JT5ShS.js";
-import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_1pm8g_1", ht = "ds-input-stepper_input--invalid_1pm8g_113", xt = "ds-input-stepper_input--small_1pm8g_120", St = "ds-input-stepper_input--has-leading-icon_1pm8g_173", yt = "ds-input-stepper_input--has-action-button_1pm8g_176", It = "ds-input-stepper_input--has-second-action-button_1pm8g_179", vt = "ds-input-stepper_input--has-affix_1pm8g_191", At = "ds-input-stepper_input--is-ready_1pm8g_205", Dt = "ds-input-stepper_root_1pm8g_215", Bt = "ds-input-stepper_hint_1pm8g_223", Nt = "ds-input-stepper_label_1pm8g_223", wt = "ds-input-stepper_wrapper_1pm8g_227", Et = "ds-input-stepper_affix_1pm8g_233", Ht = "ds-input-stepper_affix--small_1pm8g_254", Lt = "ds-input-stepper_affix--disabled_1pm8g_267", jt = "ds-input-stepper_prefix_1pm8g_275", Rt = "ds-input-stepper_affix--readonly_1pm8g_278", kt = "ds-input-stepper_suffix_1pm8g_288", Ct = "ds-input-stepper_action-button_1pm8g_295", $t = "ds-input-stepper_label--hidden_1pm8g_313", Ft = "ds-input-stepper_label--disabled_1pm8g_326", Vt = "ds-input-stepper_feedback_1pm8g_346", Pt = "ds-input-stepper_second-action-button_1pm8g_360", Tt = "ds-input-stepper_value-announcer_1pm8g_364", e = {
-  input: gt,
+import { j as n } from "./jsx-runtime.BteaETFx.js";
+import { c as u } from "./index.CEyLAtio.js";
+import { useState as _, useRef as N, useEffect as w } from "react";
+import { h as _t } from "./has-window.ut_-aShB.js";
+import { u as ft } from "./useBreakpoint.BzR_yaIv.js";
+import { u as M } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
+import { Asterisk as bt } from "../asterisk.DdCXwXQh.js";
+import { DSButton as X } from "../button.Nknx8eP1.js";
+import { M as E, a as H } from "./Input.utils.BolAdXy6.js";
+import { DSSystemFeedback as gt } from "../systemfeedback.bHSsfiy3.js";
+import { g as S } from "./helpers.CcqWV-wZ.js";
+import '../assets/InputStepper.BXz1MMBg.css';const ht = "ds-input-stepper_input_1pm8g_1", xt = "ds-input-stepper_input--invalid_1pm8g_113", St = "ds-input-stepper_input--small_1pm8g_120", yt = "ds-input-stepper_input--has-leading-icon_1pm8g_173", It = "ds-input-stepper_input--has-action-button_1pm8g_176", vt = "ds-input-stepper_input--has-second-action-button_1pm8g_179", At = "ds-input-stepper_input--has-affix_1pm8g_191", Dt = "ds-input-stepper_input--is-ready_1pm8g_205", Bt = "ds-input-stepper_root_1pm8g_215", Nt = "ds-input-stepper_hint_1pm8g_223", wt = "ds-input-stepper_label_1pm8g_223", Et = "ds-input-stepper_wrapper_1pm8g_227", Ht = "ds-input-stepper_affix_1pm8g_233", Lt = "ds-input-stepper_affix--small_1pm8g_254", jt = "ds-input-stepper_affix--disabled_1pm8g_267", Rt = "ds-input-stepper_prefix_1pm8g_275", kt = "ds-input-stepper_affix--readonly_1pm8g_278", Ct = "ds-input-stepper_suffix_1pm8g_288", $t = "ds-input-stepper_action-button_1pm8g_295", Ft = "ds-input-stepper_label--hidden_1pm8g_313", Vt = "ds-input-stepper_label--disabled_1pm8g_326", Pt = "ds-input-stepper_feedback_1pm8g_346", Tt = "ds-input-stepper_second-action-button_1pm8g_360", Wt = "ds-input-stepper_value-announcer_1pm8g_364", e = {
+  input: ht,
   "input--invalid": "ds-input-stepper_input--invalid_1pm8g_113",
-  inputInvalid: ht,
+  inputInvalid: xt,
   "input--small": "ds-input-stepper_input--small_1pm8g_120",
-  inputSmall: xt,
+  inputSmall: St,
   "input--has-leading-icon": "ds-input-stepper_input--has-leading-icon_1pm8g_173",
-  inputHasLeadingIcon: St,
+  inputHasLeadingIcon: yt,
   "input--has-action-button": "ds-input-stepper_input--has-action-button_1pm8g_176",
-  inputHasActionButton: yt,
+  inputHasActionButton: It,
   "input--has-second-action-button": "ds-input-stepper_input--has-second-action-button_1pm8g_179",
-  inputHasSecondActionButton: It,
+  inputHasSecondActionButton: vt,
   "input--has-affix": "ds-input-stepper_input--has-affix_1pm8g_191",
-  inputHasAffix: vt,
+  inputHasAffix: At,
   "input--is-ready": "ds-input-stepper_input--is-ready_1pm8g_205",
-  inputIsReady: At,
-  root: Dt,
-  hint: Bt,
-  label: Nt,
-  wrapper: wt,
-  affix: Et,
+  inputIsReady: Dt,
+  root: Bt,
+  hint: Nt,
+  label: wt,
+  wrapper: Et,
+  affix: Ht,
   "affix--small": "ds-input-stepper_affix--small_1pm8g_254",
-  affixSmall: Ht,
+  affixSmall: Lt,
   "affix--disabled": "ds-input-stepper_affix--disabled_1pm8g_267",
-  affixDisabled: Lt,
-  prefix: jt,
+  affixDisabled: jt,
+  prefix: Rt,
   "affix--readonly": "ds-input-stepper_affix--readonly_1pm8g_278",
-  affixReadonly: Rt,
-  suffix: kt,
+  affixReadonly: kt,
+  suffix: Ct,
   "action-button": "ds-input-stepper_action-button_1pm8g_295",
-  actionButton: Ct,
+  actionButton: $t,
   "label--hidden": "ds-input-stepper_label--hidden_1pm8g_313",
-  labelHidden: $t,
+  labelHidden: Ft,
   "label--disabled": "ds-input-stepper_label--disabled_1pm8g_326",
-  labelDisabled: Ft,
-  feedback: Vt,
+  labelDisabled: Vt,
+  feedback: Pt,
   "second-action-button": "ds-input-stepper_second-action-button_1pm8g_360",
-  secondActionButton: Pt,
+  secondActionButton: Tt,
   "value-announcer": "ds-input-stepper_value-announcer_1pm8g_364",
-  valueAnnouncer: Tt
-}, Wt = ({
+  valueAnnouncer: Wt
+}, Mt = ({
   id: s,
   label: f,
   prefix: b,
@@ -58,7 +60,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
     throw new Error(
       S(
         "DSInputStepper",
-        'A unique "id" prop is required. Please add an unique "id" prop to the DSInputStepper component.'
+        'A unique "id" prop is required. Please add a unique "id" prop to the DSInputStepper component.'
       )
     );
   if (!f)
@@ -79,7 +81,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
       `Suffix length must not exceed ${H} characters.`
     )
   );
-}, Yt = ({
+}, te = ({
   id: s,
   label: f,
   announcementText: b = "Value changed to",
@@ -103,13 +105,13 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
   onChange: k,
   ...J
 }) => {
-  process.env.NODE_ENV !== "production" && Wt({
+  process.env.NODE_ENV !== "production" && Mt({
     id: s,
     label: f,
     prefix: r,
     suffix: c
   });
-  const [K, Q] = m(!1), [_, v] = m(x), [A, C] = m(""), [Y, Z] = m(!1), [z, tt] = m({}), a = N(null), et = r == null ? void 0 : r.substring(0, E), D = N(null), nt = c == null ? void 0 : c.substring(0, H), B = N(null), st = mt(G);
+  const [K, Q] = _(!1), [m, v] = _(x), [A, C] = _(""), [Y, Z] = _(!1), [z, tt] = _({}), a = N(null), et = r == null ? void 0 : r.substring(0, E), D = N(null), nt = c == null ? void 0 : c.substring(0, H), B = N(null), st = ft(G);
   w(() => {
     x && v(x);
   }, [x]), w(() => {
@@ -143,7 +145,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
     }
     tt(i), Q(!0);
   }, [r, c, p, Y]), M(() => {
-    (async () => {
+    _t && (async () => {
       "fonts" in document && (await document.fonts.load(
         '1em "STIHL Contraface Digital Text Regular"'
       ), Z(!0));
@@ -185,13 +187,13 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
   }, dt = () => {
     var t;
     (t = a.current) == null || t.stepUp(), W();
-  }, _t = (t) => {
+  }, mt = (t) => {
     v(t.target.value), k && k(t);
   };
   return /* @__PURE__ */ n.jsxs("div", { className: pt, children: [
     /* @__PURE__ */ n.jsxs("label", { className: ot, id: F, htmlFor: s, children: [
       f,
-      R && /* @__PURE__ */ n.jsx(ft, {})
+      R && /* @__PURE__ */ n.jsx(bt, {})
     ] }),
     y && /* @__PURE__ */ n.jsx("div", { className: e.hint, id: P, children: y }),
     /* @__PURE__ */ n.jsx(
@@ -205,7 +207,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
       }
     ),
     h && I && /* @__PURE__ */ n.jsx(
-      bt,
+      gt,
       {
         className: e.feedback,
         message: I,
@@ -242,8 +244,8 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
           required: R,
           step: U,
           type: "number",
-          value: _,
-          onChange: _t
+          value: m,
+          onChange: mt
         }
       ),
       c && /* @__PURE__ */ n.jsx(
@@ -265,7 +267,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
           className: ut,
           size: p,
           onClick: ct,
-          disabled: l || d || !!_ && Number(_) <= j,
+          disabled: l || d || !!m && Number(m) <= j,
           type: "button",
           children: q
         }
@@ -280,7 +282,7 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
           className: lt,
           size: p,
           onClick: dt,
-          disabled: l || d || !!_ && Number(_) >= L,
+          disabled: l || d || !!m && Number(m) >= L,
           type: "button",
           children: O
         }
@@ -289,6 +291,6 @@ import '../assets/InputStepper.C0eAYr7P.css';const gt = "ds-input-stepper_input_
   ] });
 };
 export {
-  Yt as D,
-  Wt as v
+  te as D,
+  Mt as v
 };

package/chunks/NavigationTabList.D3zzmWIL.js

@@ -0,0 +1,60 @@
+"use client";
+import { j as r } from "./jsx-runtime.BteaETFx.js";
+import { isValidElement as u, cloneElement as v } from "react";
+import { D as h } from "./Icon.CvVRQw6C.js";
+import { NumberIndicator as f } from "../numberindicator.kZ-G6BbU.js";
+import '../assets/NavigationTabList.B6x56sAV.css';const g = "ds-tabs_tabs-wrapper_nm2bv_1", j = "ds-tabs_scroll-wrapper_nm2bv_6", w = "ds-tabs_scroller_nm2bv_17", B = "ds-tabs_scroller--centered_nm2bv_28", x = "ds-tabs_tab_nm2bv_1", N = "ds-tabs_scroll-button_nm2bv_105", W = "ds-tabs_scroll-button--hidden_nm2bv_110", D = "ds-tabs_scroll-button--right_nm2bv_114", E = "ds-tabs_indicator_nm2bv_126", R = {
+  "tabs-wrapper": "ds-tabs_tabs-wrapper_nm2bv_1",
+  tabsWrapper: g,
+  "scroll-wrapper": "ds-tabs_scroll-wrapper_nm2bv_6",
+  scrollWrapper: j,
+  scroller: w,
+  "scroller--centered": "ds-tabs_scroller--centered_nm2bv_28",
+  scrollerCentered: B,
+  tab: x,
+  "scroll-button": "ds-tabs_scroll-button_nm2bv_105",
+  scrollButton: N,
+  "scroll-button--hidden": "ds-tabs_scroll-button--hidden_nm2bv_110",
+  scrollButtonHidden: W,
+  "scroll-button--right": "ds-tabs_scroll-button--right_nm2bv_114",
+  scrollButtonRight: D,
+  indicator: E
+}, F = ({
+  tabs: a,
+  tabRefs: b,
+  scrollerClass: _,
+  scrollerRef: d,
+  selectedTabIndex: o,
+  handleNavigationKeydown: i,
+  setSelectedTab: p
+}) => /* @__PURE__ */ r.jsx("ul", { className: _, ref: d, children: a.map(
+  ({ id: n, linkComponent: s, iconName: c, numberIndicatorValue: e }, t) => {
+    if (!u(s))
+      return null;
+    const m = v(s, {
+      // Add aria-current to the selected tab (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
+      "aria-current": o === t ? "page" : void 0,
+      children: /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        c && /* @__PURE__ */ r.jsx(h, { name: c, "aria-hidden": "true" }),
+        s.props.children,
+        e && /* @__PURE__ */ r.jsx(f, { label: e })
+      ] }),
+      className: R.tab,
+      id: n,
+      tabIndex: o === t ? 0 : -1,
+      // onKeyDown for focus handling and keyboard navigation
+      onKeyDown: (l) => i(l, t),
+      onClick: () => {
+        s.props.onClick && s.props.onClick(), p(t);
+      },
+      ref: (l) => {
+        b.current[t] = l;
+      }
+    });
+    return /* @__PURE__ */ r.jsx("li", { children: m }, n);
+  }
+) });
+export {
+  F as N,
+  R as s
+};

package/chunks/NavigationTabs.ni5Zoq0z.js

@@ -0,0 +1,72 @@
+"use client";
+import { j as p } from "./jsx-runtime.BteaETFx.js";
+import { useState as b, useEffect as N } from "react";
+import { TabList as g } from "../tablist.BCOOuiX4.js";
+import { g as s, r as f } from "./helpers.CcqWV-wZ.js";
+const E = ["left", "center"], S = ["prev", "next"], m = ({
+  aria: e,
+  tabs: t,
+  activeTabIndex: o
+}) => {
+  var a, r;
+  if (!e || typeof e != "object" || Object.keys(e).length === 0 || !e["aria-label"] && !e["aria-labelledby"] || ((a = e["aria-label"]) == null ? void 0 : a.trim()) === "" && ((r = e["aria-labelledby"]) == null ? void 0 : r.trim()) === "")
+    throw new Error(
+      s(
+        "DSNavigationTabs",
+        'A valid "aria-label" or "aria-labelledby" property is required. Ensure the "aria" prop is a non-empty object and includes either "aria-label" or "aria-labelledby" with a non-empty string value.'
+      )
+    );
+  if (Array.isArray(t)) {
+    if (t.length === 0)
+      throw new Error(
+        s("DSNavigationTabs", "The tabs array must not be empty.")
+      );
+  } else throw new Error(
+    s(
+      "DSNavigationTabs",
+      f("tabs", "DSNavigationTabs")
+    )
+  );
+  if (o != null && (o < 0 || o >= t.length))
+    throw new Error(
+      s(
+        "DSNavigationTabs",
+        `Invalid activeTabIndex: ${o}. It must be between 0 and ${t.length - 1}.`
+      )
+    );
+}, w = ({
+  aria: e,
+  tabs: t,
+  alignment: o = "left",
+  className: a,
+  activeTabIndex: r,
+  ...l
+}) => {
+  process.env.NODE_ENV !== "production" && m({
+    aria: e,
+    tabs: t,
+    activeTabIndex: r
+  });
+  const [n, i] = b(r);
+  return N(() => {
+    r != null && i(r);
+  }, [r]), /* @__PURE__ */ p.jsx(
+    g,
+    {
+      aria: e,
+      tabs: t,
+      setSelectedTabIndex: i,
+      selectedTabIndex: n,
+      alignment: o,
+      className: a,
+      isNavigation: !0,
+      ...l
+    }
+  );
+};
+export {
+  w as D,
+  E as N,
+  S as a,
+  m as v
+};

package/chunks/{Notification.nx5vTamN.js → Notification.BmXWqd85.js}

@@ -1,9 +1,9 @@
 "use client";
-import { j as n } from "./jsx-runtime.C115EyI4.js";
-import { c as s } from "./index.CvOaL64Y.js";
-import { DSButton as f } from "../button.M4nXjcUn.js";
-import { D as u } from "./Icon.BCmt_XBG.js";
-import '../assets/Notification.DbRapUJo.css';const j = "ds-notification_root_1cajm_1", g = "ds-notification_root--success_1cajm_26", N = "ds-notification_root--error_1cajm_30", h = "ds-notification_root--warning_1cajm_34", I = "ds-notification_root--hide-icon_1cajm_38", x = "ds-notification_content_1cajm_52", A = "ds-notification_content--hide-close-button_1cajm_59", H = "ds-notification_content--hide-icon_1cajm_62", C = "ds-notification_icon_1cajm_66", S = "ds-notification_message_1cajm_70", p = "ds-notification_custom-action-area_1cajm_167", o = {
+import { j as n } from "./jsx-runtime.BteaETFx.js";
+import { c as s } from "./index.CEyLAtio.js";
+import { DSButton as f } from "../button.Nknx8eP1.js";
+import { D as u } from "./Icon.CvVRQw6C.js";
+import '../assets/Notification.DZIF-Wo6.css';const j = "ds-notification_root_1cajm_1", g = "ds-notification_root--success_1cajm_26", N = "ds-notification_root--error_1cajm_30", h = "ds-notification_root--warning_1cajm_34", I = "ds-notification_root--hide-icon_1cajm_38", x = "ds-notification_content_1cajm_52", A = "ds-notification_content--hide-close-button_1cajm_59", H = "ds-notification_content--hide-icon_1cajm_62", C = "ds-notification_icon_1cajm_66", S = "ds-notification_message_1cajm_70", p = "ds-notification_custom-action-area_1cajm_167", o = {
   root: j,
   "root--success": "ds-notification_root--success_1cajm_26",
   rootSuccess: g,

package/chunks/RadioGroup.DVyupPKV.js

@@ -0,0 +1,150 @@
+"use client";
+import { j as h } from "./jsx-runtime.BteaETFx.js";
+import { c as P } from "./index.CEyLAtio.js";
+import { forwardRef as A, useState as C } from "react";
+import { D as q } from "./Fieldset.CPuNSQNU.js";
+import { DSRadio as I } from "../radio.DZEIaDlU.js";
+import { g as a, r as f } from "./helpers.CcqWV-wZ.js";
+import '../assets/RadioGroup.CM2mYOzc.css';const b = "ds-radio-group_root_12fot_1", B = "ds-radio-group_root--horizontal_12fot_9", M = "ds-radio-group_root--invalid_12fot_12", m = {
+  root: b,
+  "root--horizontal": "ds-radio-group_root--horizontal_12fot_9",
+  rootHorizontal: B,
+  "root--invalid": "ds-radio-group_root--invalid_12fot_12",
+  rootInvalid: M
+}, D = (t) => t.some(({ hint: e }) => !!e), G = (t) => t.some(({ customArea: e }) => !!e), O = ({
+  legend: t,
+  name: e,
+  options: r,
+  description: l,
+  direction: i,
+  id: s,
+  systemFeedback: n
+}) => {
+  if (!s && (l || n))
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSRadioGroup component.'
+      )
+    );
+  if (!t)
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        f("legend", "DSRadioGroup")
+      )
+    );
+  if (!e)
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        f("name", "DSRadioGroup")
+      )
+    );
+  if (Array.isArray(r)) {
+    if (r.length === 0)
+      throw new Error(
+        a("DSRadioGroup", "The options array must not be empty.")
+      );
+  } else throw new Error(
+    a(
+      "DSRadioGroup",
+      f("options", "DSRadioGroup")
+    )
+  );
+  if (i === "horizontal" && D(r))
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        "Horizontal direction is not possible when options contain a hint. Please remove hints or change direction property to 'vertical'."
+      )
+    );
+  if (i === "horizontal" && G(r))
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        "Horizontal direction is not possible when options contain a custom area. Please remove custom areas or change direction property to 'vertical'."
+      )
+    );
+}, V = A(
+  ({
+    legend: t,
+    name: e,
+    options: r,
+    className: l,
+    defaultValue: i,
+    description: s,
+    direction: n = "vertical",
+    disabled: d = !1,
+    hideUncheckedHints: v = !1,
+    id: p,
+    invalid: u = !1,
+    required: S = !1,
+    systemFeedback: c,
+    value: w,
+    onChange: R,
+    ...z
+  }, E) => {
+    process.env.NODE_ENV !== "production" && O({
+      legend: t,
+      name: e,
+      options: r,
+      description: s,
+      direction: n,
+      id: p,
+      systemFeedback: c
+    });
+    const [y, H] = C(i), g = w !== void 0, _ = g ? w : y, x = P(m.root, {
+      // In case of longer copy, use vertical direction
+      [m.rootHorizontal]: n === "horizontal" && !D(r) && !G(r),
+      [m.rootInvalid]: u && !!c
+    }), j = (o) => {
+      if (d) {
+        o.preventDefault();
+        return;
+      }
+      g || H(
+        o.target.value
+      ), R && R(o);
+    }, N = D(r) && !v;
+    return /* @__PURE__ */ h.jsx(
+      q,
+      {
+        id: p,
+        legend: t,
+        className: l,
+        description: s,
+        disabled: d,
+        required: S,
+        invalid: u,
+        systemFeedback: c,
+        ...z,
+        role: "radiogroup",
+        onChange: j,
+        children: /* @__PURE__ */ h.jsx("div", { className: x, children: r.map((o) => /* @__PURE__ */ h.jsx(
+          I,
+          {
+            name: e,
+            checked: o.value === _,
+            disabled: d,
+            hideUncheckedHint: v,
+            hint: o.hint,
+            invalid: u,
+            isBold: N,
+            required: S,
+            ref: o.value === _ ? E : null,
+            ...o
+          },
+          p + o.label + o.value + o.hint
+        )) })
+      }
+    );
+  }
+);
+V.displayName = "DSRadioGroup";
+export {
+  V as D,
+  G as a,
+  D as o,
+  O as v
+};