@stihl-design-system/components 1.0.0-RC.2 → 1.0.0-RC.4

package/buttonround.CXsBk9nL.js

@@ -0,0 +1,118 @@
+"use client";
+import { j as l } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as _ } from "./chunks/index.CvOaL64Y.js";
+import { D as y } from "./chunks/Icon.9gDIp6p4.js";
+import { DSSpinner as H } from "./spinner.BskX4ovu.js";
+import './assets/buttonround.C3ph5Yyu.css';const p = "_root_eez0z_125", F = "_root--highlight_eez0z_194", O = "_root--dark-highlight_eez0z_194", G = "_root--filled_eez0z_272", I = "_root--outline_eez0z_300", S = "_root--ghost_eez0z_327", x = "_root--ghost-flush_eez0z_352", j = "_root--small_eez0z_358", L = "_root--dark-filled_eez0z_433", C = "_root--dark-outline_eez0z_492", N = "_root--dark-ghost_eez0z_550", R = "_root--dark-ghost-flush_eez0z_606", B = "_root--icon-left_eez0z_665", E = "_root--icon-only_eez0z_681", T = "_root--icon-only-small_eez0z_690", q = "_loader_eez0z_701", w = "_icon--hidden_eez0z_713", A = "_label--hidden_eez0z_717", J = "_label--loading_eez0z_729", o = {
+  root: p,
+  "root--highlight": "_root--highlight_eez0z_194",
+  rootHighlight: F,
+  "root--dark-highlight": "_root--dark-highlight_eez0z_194",
+  rootDarkHighlight: O,
+  "root--filled": "_root--filled_eez0z_272",
+  rootFilled: G,
+  "root--outline": "_root--outline_eez0z_300",
+  rootOutline: I,
+  "root--ghost": "_root--ghost_eez0z_327",
+  rootGhost: S,
+  "root--ghost-flush": "_root--ghost-flush_eez0z_352",
+  rootGhostFlush: x,
+  "root--small": "_root--small_eez0z_358",
+  rootSmall: j,
+  "root--dark-filled": "_root--dark-filled_eez0z_433",
+  rootDarkFilled: L,
+  "root--dark-outline": "_root--dark-outline_eez0z_492",
+  rootDarkOutline: C,
+  "root--dark-ghost": "_root--dark-ghost_eez0z_550",
+  rootDarkGhost: N,
+  "root--dark-ghost-flush": "_root--dark-ghost-flush_eez0z_606",
+  rootDarkGhostFlush: R,
+  "root--icon-left": "_root--icon-left_eez0z_665",
+  rootIconLeft: B,
+  "root--icon-only": "_root--icon-only_eez0z_681",
+  rootIconOnly: E,
+  "root--icon-only-small": "_root--icon-only-small_eez0z_690",
+  rootIconOnlySmall: T,
+  loader: q,
+  "icon--hidden": "_icon--hidden_eez0z_713",
+  iconHidden: w,
+  "label--hidden": "_label--hidden_eez0z_717",
+  labelHidden: A,
+  "label--loading": "_label--loading_eez0z_729",
+  labelLoading: J
+}, U = ({
+  children: d,
+  aria: z,
+  className: c,
+  dataTrackingid: g,
+  disabled: i = !1,
+  iconName: n = "placeholder",
+  iconSource: s,
+  loading: t = !1,
+  theme: r = "light",
+  variant: e = "filled",
+  onClick: a,
+  ...k
+}) => {
+  const u = _(
+    o.root,
+    o.rootIconOnlySmall,
+    c,
+    {
+      // variant
+      [o.rootFilled]: e === "filled",
+      [o.rootHighlight]: e === "highlight",
+      // dark theme
+      [o.rootDarkFilled]: r === "dark" && e === "filled",
+      [o.rootDarkHighlight]: r === "dark" && e === "highlight"
+    }
+  ), f = _(o.label, o.labelHidden, {
+    // set label opacity to 0 when loading to prevent button size from changing
+    [o.labelLoading]: t
+  }), m = _(o.icon, {
+    // set icon opacity to 0 when loading to prevent button size from changing
+    [o.iconHidden]: t
+  }), b = r === "light" && e === "filled" ? "dark" : "light", D = (h) => {
+    if (i || t) {
+      h.preventDefault();
+      return;
+    }
+    a && a(h);
+  };
+  return /* @__PURE__ */ l.jsxs(
+    "button",
+    {
+      className: u,
+      "data-trackingid": g,
+      type: "button",
+      onClick: D,
+      ...z,
+      ...k,
+      "aria-disabled": i || t,
+      "aria-busy": t,
+      children: [
+        t && /* @__PURE__ */ l.jsx(
+          H,
+          {
+            className: o.loader,
+            aria: { "aria-label": "Loading state" }
+          }
+        ),
+        /* @__PURE__ */ l.jsx("span", { className: f, children: d }),
+        (n || s) && /* @__PURE__ */ l.jsx(
+          y,
+          {
+            name: n,
+            theme: b,
+            source: s,
+            className: m,
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  U as DSButtonRound
+};

package/{checkbox.Bx5D_GAe.js → checkbox.B43oeMeC.js}

@@ -1,50 +1,50 @@
 "use client";
 import { j as c } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as r } from "./chunks/index.CvOaL64Y.js";
+import { c as d } from "./chunks/index.CvOaL64Y.js";
 import { forwardRef as I, useRef as H, useState as M, useEffect as g, useCallback as B } from "react";
 import { u as E } from "./chunks/useBreakpoint.5xBNDiCf.js";
-import { DSIcon as b } from "./icon.CmAhxgHK.js";
-import { DSSystemFeedback as V } from "./systemfeedback.rBgdiL5T.js";
-import './assets/checkbox.Bbc6PYDK.css';const w = "_root_1upux_125", L = "_root--disabled_1upux_144", O = "_checkbox_1upux_148", P = "_icon-check_1upux_162", R = "_icon-minus_1upux_163", U = "_checkbox--invalid_1upux_184", q = "_label--hidden_1upux_189", z = "_input_1upux_202", A = "_label_1upux_189", F = "_feedback_1upux_316", e = {
+import { D as b } from "./chunks/Icon.9gDIp6p4.js";
+import { DSSystemFeedback as V } from "./systemfeedback.4Hkfigi-.js";
+import './assets/checkbox.BsFEWfQe.css';const w = "_root_10jm0_125", L = "_root--disabled_10jm0_144", O = "_checkbox_10jm0_148", P = "_icon-check_10jm0_162", R = "_icon-minus_10jm0_163", U = "_checkbox--invalid_10jm0_184", q = "_label--hidden_10jm0_189", z = "_input_10jm0_202", A = "_label_10jm0_189", F = "_feedback_10jm0_316", e = {
   root: w,
-  "root--disabled": "_root--disabled_1upux_144",
+  "root--disabled": "_root--disabled_10jm0_144",
   rootDisabled: L,
   checkbox: O,
-  "icon-check": "_icon-check_1upux_162",
+  "icon-check": "_icon-check_10jm0_162",
   iconCheck: P,
-  "icon-minus": "_icon-minus_1upux_163",
+  "icon-minus": "_icon-minus_10jm0_163",
   iconMinus: R,
-  "checkbox--invalid": "_checkbox--invalid_1upux_184",
+  "checkbox--invalid": "_checkbox--invalid_10jm0_184",
   checkboxInvalid: U,
-  "label--hidden": "_label--hidden_1upux_189",
+  "label--hidden": "_label--hidden_10jm0_189",
   labelHidden: q,
   input: z,
   label: A,
   feedback: F
 }, G = I(
   ({
-    label: d,
-    checked: _,
+    label: _,
+    checked: m,
     className: k,
-    defaultChecked: p = !1,
+    defaultChecked: f = !1,
     disabled: s = !1,
-    hideLabel: m = !1,
+    hideLabel: x = !1,
     indeterminate: i = !1,
     invalid: l = !1,
-    systemFeedback: x,
+    systemFeedback: h,
     onChange: t,
-    ...f
+    ...j
   }, n) => {
-    const a = H(null), [C, j] = M(p), N = E(m);
+    const a = H(null), [p, C] = M(f), D = E(x);
     g(() => {
       a && a.current && (a.current.indeterminate = i);
     }, [i]);
-    const u = _ !== void 0, h = u ? _ : C, D = r(e.root, {
+    const r = m !== void 0, u = r ? m : p, N = d(e.root, {
       [e.rootDisabled]: s
-    }), v = r(e.label, {
+    }), v = d(e.label, {
       // hide label only visually to keep them available for assistive technologies
-      [e.labelHidden]: N
-    }), S = r(e.checkbox, {
+      [e.labelHidden]: D
+    }), S = d(e.checkbox, {
       [e.checkboxInvalid]: l
     }), y = B(
       (o) => {
@@ -52,12 +52,12 @@ import './assets/checkbox.Bbc6PYDK.css';const w = "_root_1upux_125", L = "_root-
           o.preventDefault();
           return;
         }
-        u || j(o.target.checked), t && t(o);
+        r || C(o.target.checked), t && t(o);
       },
-      [s, u, t]
+      [s, r, t]
     );
     return /* @__PURE__ */ c.jsxs("div", { className: k, children: [
-      /* @__PURE__ */ c.jsxs("label", { className: D, children: [
+      /* @__PURE__ */ c.jsxs("label", { className: N, children: [
         /* @__PURE__ */ c.jsx(
           "input",
           {
@@ -66,12 +66,12 @@ import './assets/checkbox.Bbc6PYDK.css';const w = "_root_1upux_125", L = "_root-
             ref: (o) => {
               typeof n == "function" ? n(o) : n !== null && (n.current = o), a.current = o;
             },
-            ...f,
-            checked: h,
+            ...j,
+            checked: u,
             disabled: s,
-            "aria-label": d,
+            "aria-label": _,
             "aria-invalid": l,
-            "aria-checked": i ? "mixed" : h,
+            "aria-checked": i ? "mixed" : u,
             onChange: y
           }
         ),
@@ -93,13 +93,13 @@ import './assets/checkbox.Bbc6PYDK.css';const w = "_root_1upux_125", L = "_root-
             }
           )
         ] }),
-        /* @__PURE__ */ c.jsx("span", { className: v, children: d })
+        /* @__PURE__ */ c.jsx("span", { className: v, children: _ })
       ] }),
-      l && x && /* @__PURE__ */ c.jsx(
+      l && h && /* @__PURE__ */ c.jsx(
         V,
         {
           className: e.feedback,
-          message: x,
+          message: h,
           type: "invalid"
         }
       )

package/checkboxgroup.C7aCjYds.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C-kxDJ4g.js";
+import "./chunks/index.CvOaL64Y.js";
+import "./chunks/Fieldset.BokeZzG5.js";
+import "./chunks/RadioGroup.module.bi3leRes.js";
+import { D as e } from "./chunks/CheckboxGroup.CS6Q_TeZ.js";
+export {
+  e as DSCheckboxGroup
+};

package/chunks/AriaLiveRegions.utils.DzWI5KCU.js

@@ -0,0 +1,31 @@
+"use client";
+import { g as i } from "./helpers.B1JT5ShS.js";
+import "react";
+const e = "ds-alert-live-region", n = "ds-status-live-region", r = () => document.getElementById(e), a = () => document.getElementById(n), g = () => {
+  const t = document.querySelectorAll(
+    `#${e}`
+  ), o = document.querySelectorAll(
+    `#${n}`
+  );
+  if (t.length > 1)
+    throw new Error(
+      i(
+        "DSAriaLiveRegions",
+        `The DSAriaLiveRegions component with id="${e}" should only be present once on the page. Found ${t.length} instances.`
+      )
+    );
+  if (o.length > 1)
+    throw new Error(
+      i(
+        "DSAriaLiveRegions",
+        `The DSAriaLiveRegions component with id="${n}" should only be present once on the page. Found ${o.length} instances.`
+      )
+    );
+};
+export {
+  e as A,
+  n as a,
+  a as b,
+  r as g,
+  g as v
+};

package/{checkboxgroup.gQwSHy4i.js → chunks/CheckboxGroup.CS6Q_TeZ.js}

@@ -1,40 +1,40 @@
 "use client";
-import { j as u } from "./chunks/jsx-runtime.C-kxDJ4g.js";
-import { c as b } from "./chunks/index.CvOaL64Y.js";
-import { DSFieldset as f } from "./fieldset.yE6WV6Ls.js";
-import { s as p } from "./chunks/RadioGroup.module.B35YQcsb.js";
+import { j as u } from "./jsx-runtime.C-kxDJ4g.js";
+import { c as D } from "./index.CvOaL64Y.js";
+import { D as b } from "./Fieldset.BokeZzG5.js";
+import { s as p } from "./RadioGroup.module.bi3leRes.js";
 import l from "react";
-import { g as i } from "./chunks/helpers.B1JT5ShS.js";
-import { DSCheckbox as D } from "./checkbox.Bx5D_GAe.js";
-const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSCheckboxGroup component.`, S = ({
+import { g as s } from "./helpers.B1JT5ShS.js";
+import { DSCheckbox as f } from "../checkbox.B43oeMeC.js";
+const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSCheckboxGroup component.`, k = ({
   children: o,
   description: e,
-  id: s,
+  id: i,
   legend: n,
   systemFeedback: r
 }) => {
-  if (!s && (e || r))
+  if (!i && (e || r))
     throw new Error(
-      i(
+      s(
         "DSCheckboxGroup",
         'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSCheckboxGroup component.'
       )
     );
   if (!n)
     throw new Error(
-      i("DSCheckboxGroup", C("legend"))
+      s("DSCheckboxGroup", C("legend"))
     );
   if (!o)
     throw new Error(
-      i(
+      s(
         "DSCheckboxGroup",
         "The component requires DSCheckbox components to be explicitly set as its children. Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group."
       )
     );
   l.Children.forEach(o, (t) => {
-    if (!(l.isValidElement(t) && t.type === D))
+    if (!(l.isValidElement(t) && t.type === f))
       throw new Error(
-        i(
+        s(
           "DSCheckboxGroup",
           "The component requires the children to be DSCheckbox elements. Ensure that you include individual DSCheckbox components within the DSCheckboxGroup to create a cohesive checkbox group."
         )
@@ -43,7 +43,7 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
 }, y = ({
   children: o,
   legend: e,
-  alignment: s = "vertical",
+  alignment: i = "vertical",
   className: n,
   description: r,
   disabled: t = !1,
@@ -53,14 +53,20 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
   systemFeedback: c,
   ...x
 }) => {
-  process.env.NODE_ENV !== "production" && S({ children: o, legend: e, description: r, id: h, systemFeedback: c });
-  const d = b(p.root, {
+  process.env.NODE_ENV !== "production" && k({
+    children: o,
+    legend: e,
+    description: r,
+    id: h,
+    systemFeedback: c
+  });
+  const d = D(p.root, {
     // In case of longer copy, use vertical alignment
-    [p.rootHorizontal]: s === "horizontal",
+    [p.rootHorizontal]: i === "horizontal",
     [p.rootInvalid]: a && !!c
   });
   return /* @__PURE__ */ u.jsx(
-    f,
+    b,
     {
       id: h,
       legend: e,
@@ -76,5 +82,6 @@ const C = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the
   );
 };
 export {
-  y as DSCheckboxGroup
+  y as D,
+  k as v
 };