@stihl-design-system/components 1.0.0-RC.0 → 1.0.0-RC.1

package/radio.fd841ab0.js

@@ -0,0 +1,79 @@
+import "./assets/Radio.79d98dde.css";
+import { j as s } from "./chunks/jsx-runtime.5c071667.js";
+import { c as d } from "./chunks/index.8021d3e0.js";
+import { forwardRef as H, useRef as I, useState as R, useCallback as S } from "react";
+import { u as g } from "./chunks/useBreakpoint.6c1b06c2.js";
+const B = "_root_l6los_25", V = "_root--disabled_l6los_44", w = "_radio_l6los_48", E = "_dot_l6los_63", L = "_radio--invalid_l6los_85", O = "_label_l6los_90", P = "_label--hidden_l6los_100", U = "_input_l6los_113", o = {
+  root: B,
+  "root--disabled": "_root--disabled_l6los_44",
+  rootDisabled: V,
+  radio: w,
+  dot: E,
+  "radio--invalid": "_radio--invalid_l6los_85",
+  radioInvalid: L,
+  label: O,
+  "label--hidden": "_label--hidden_l6los_100",
+  labelHidden: P,
+  input: U
+}, q = H(
+  ({
+    label: t,
+    name: c,
+    value: _,
+    defaultChecked: u = !1,
+    disabled: a = !1,
+    hideLabel: f = !1,
+    checked: r,
+    invalid: m = !1,
+    className: p,
+    onChange: i,
+    ...b
+  }, e) => {
+    const h = I(null), [v, x] = R(u), n = r !== void 0, C = n ? r : v, j = g(f), k = d(
+      o.root,
+      {
+        [o.rootDisabled]: a
+      },
+      p
+    ), N = d(o.label, {
+      // hide label only visually to keep them available for assistive technologies
+      [o.labelHidden]: j
+    }), D = d(o.radio, {
+      [o.radioInvalid]: m
+    }), y = S(
+      (l) => {
+        if (a) {
+          l.preventDefault();
+          return;
+        }
+        n || x(l.target.checked), i && i(l);
+      },
+      [a, n, i]
+    );
+    return /* @__PURE__ */ s.jsxs("label", { className: k, children: [
+      /* @__PURE__ */ s.jsx(
+        "input",
+        {
+          type: "radio",
+          value: _,
+          name: c,
+          className: o.input,
+          ref: (l) => {
+            typeof e == "function" ? e(l) : e !== null && (e.current = l), h.current = l;
+          },
+          onChange: y,
+          ...b,
+          disabled: a,
+          checked: C,
+          "aria-label": typeof t == "string" ? t : void 0
+        }
+      ),
+      /* @__PURE__ */ s.jsx("span", { className: D, children: /* @__PURE__ */ s.jsx("div", { className: o.dot }) }),
+      /* @__PURE__ */ s.jsx("span", { className: N, children: t })
+    ] });
+  }
+);
+q.displayName = "DSRadio";
+export {
+  q as DSRadio
+};

package/{radiogroup.6a22fe96.js → radiogroup.e1c8ea3d.js}

@@ -2,8 +2,8 @@
 import { j as d } from "./chunks/jsx-runtime.5c071667.js";
 import { c as q } from "./chunks/index.8021d3e0.js";
 import { forwardRef as N, useState as P } from "react";
-import { DSFieldset as C } from "./fieldset.fb7b7e49.js";
-import { DSRadio as y } from "./radio.1b205d64.js";
+import { DSFieldset as C } from "./fieldset.fdd84bda.js";
+import { DSRadio as y } from "./radio.fd841ab0.js";
 import { s as c } from "./chunks/RadioGroup.module.59ca486a.js";
 import { g as s } from "./chunks/helpers.ea3ca41a.js";
 const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, z = ({

package/select.88d40c51.js

@@ -0,0 +1,188 @@
+import "./assets/Select.b9c135c2.css";
+import { j as s } from "./chunks/jsx-runtime.5c071667.js";
+import { c as _ } from "./chunks/index.8021d3e0.js";
+import { useRef as R, useState as q, useEffect as W } from "react";
+import { u as F } from "./chunks/useBreakpoint.6c1b06c2.js";
+import { Asterisk as M } from "./asterisk.cb74ea72.js";
+import { DSIcon as O } from "./icon.b4211784.js";
+import { DSSystemFeedback as V } from "./systemfeedback.8515a4e0.js";
+import { g as f } from "./chunks/helpers.ea3ca41a.js";
+const J = "_root_1txp8_73", K = "_hint_1txp8_81", Q = "_label_1txp8_81", T = "_wrapper_1txp8_85", U = "_affix_1txp8_91", X = "_affix--small_1txp8_109", Y = "_affix--disabled_1txp8_121", Z = "_prefix_1txp8_125", z = "_suffix_1txp8_131", G = "_action-button_1txp8_136", ee = "_label--hidden_1txp8_153", te = "_feedback_1txp8_180", se = "_select-wrapper_1txp8_185", ne = "_select_1txp8_185", ae = "_select--invalid_1txp8_304", le = "_select--small_1txp8_311", ce = "_input--has-leading-icon_1txp8_357", oe = "_input--has-action-button_1txp8_360", ie = "_input--has-second-action-button_1txp8_363", re = "_select--has-leading-icon_1txp8_366", _e = "_select--has-action-button_1txp8_369", de = "_select--has-second-action-button_1txp8_372", pe = "_select--has-affix_1txp8_375", xe = "_select--is-ready_1txp8_387", fe = "_select--placeholder_1txp8_399", ue = "_chevron_1txp8_408", he = "_chevron--small_1txp8_412", be = "_chevron--disabled_1txp8_415", e = {
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: T,
+  affix: U,
+  "affix--small": "_affix--small_1txp8_109",
+  affixSmall: X,
+  "affix--disabled": "_affix--disabled_1txp8_121",
+  affixDisabled: Y,
+  prefix: Z,
+  suffix: z,
+  "action-button": "_action-button_1txp8_136",
+  actionButton: G,
+  "label--hidden": "_label--hidden_1txp8_153",
+  labelHidden: ee,
+  feedback: te,
+  "select-wrapper": "_select-wrapper_1txp8_185",
+  selectWrapper: se,
+  select: ne,
+  "select--invalid": "_select--invalid_1txp8_304",
+  selectInvalid: ae,
+  "select--small": "_select--small_1txp8_311",
+  selectSmall: le,
+  "input--has-leading-icon": "_input--has-leading-icon_1txp8_357",
+  inputHasLeadingIcon: ce,
+  "input--has-action-button": "_input--has-action-button_1txp8_360",
+  inputHasActionButton: oe,
+  "input--has-second-action-button": "_input--has-second-action-button_1txp8_363",
+  inputHasSecondActionButton: ie,
+  "select--has-leading-icon": "_select--has-leading-icon_1txp8_366",
+  selectHasLeadingIcon: re,
+  "select--has-action-button": "_select--has-action-button_1txp8_369",
+  selectHasActionButton: _e,
+  "select--has-second-action-button": "_select--has-second-action-button_1txp8_372",
+  selectHasSecondActionButton: de,
+  "select--has-affix": "_select--has-affix_1txp8_375",
+  selectHasAffix: pe,
+  "select--is-ready": "_select--is-ready_1txp8_387",
+  selectIsReady: xe,
+  "select--placeholder": "_select--placeholder_1txp8_399",
+  selectPlaceholder: fe,
+  chevron: ue,
+  "chevron--small": "_chevron--small_1txp8_412",
+  chevronSmall: he,
+  "chevron--disabled": "_chevron--disabled_1txp8_415",
+  chevronDisabled: be
+}, me = ({
+  id: t,
+  label: l,
+  options: a
+}) => {
+  if (!t)
+    throw new Error(
+      f(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!l)
+    throw new Error(
+      f(
+        "DSSelect",
+        `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`
+      )
+    );
+  if (!a || a.length === 0)
+    throw new Error(
+      f(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, ve = (t, l, a) => t === "" || l !== void 0 && l !== "" ? !1 : !(a !== void 0 && a !== ""), Be = ({
+  id: t,
+  label: l,
+  options: a,
+  className: D,
+  defaultValue: u,
+  disabled: h = !1,
+  hideLabel: I = !1,
+  hint: d,
+  invalid: r = !1,
+  placeholder: p = "Select",
+  required: b = !1,
+  size: m = "medium",
+  systemFeedback: x,
+  value: v,
+  ...y
+}) => {
+  process.env.NODE_ENV !== "production" && me({
+    id: t,
+    label: l,
+    options: a
+  });
+  const i = R(null), [j, A] = q(
+    ve(p, u, v)
+  );
+  W(() => {
+    if (!i.current)
+      return;
+    const c = () => {
+      if (!i.current)
+        return;
+      const o = i.current.value;
+      A(o === "");
+    }, n = i.current;
+    return n.addEventListener("change", c), () => {
+      n.removeEventListener("change", c);
+    };
+  }, []);
+  const B = F(I), S = `${t}-label`, g = `${t}-feedback`, H = `${t}-hint`, N = d ? ` ${H}` : "", P = (c) => [
+    p && /* @__PURE__ */ s.jsx("option", { value: "", children: p }, `${t}-hidden-option-disabled-placeholder`),
+    ...c.map((n) => {
+      if ("options" in n) {
+        const { label: o, options: C } = n;
+        return /* @__PURE__ */ s.jsx("optgroup", { label: o, children: C.map(w) }, o);
+      } else
+        return w(n);
+    })
+  ], w = ({ label: c, value: n, isDisabled: o }) => /* @__PURE__ */ s.jsx("option", { value: n, disabled: o, children: c }, n), E = _(e.root, D), L = _(e.select, {
+    [e.selectSmall]: m === "small",
+    [e.selectInvalid]: r,
+    [e.selectPlaceholder]: j
+  }), k = _(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: B
+  }), $ = _(e.chevron, {
+    [e.chevronSmall]: m === "small",
+    [e.chevronDisabled]: h
+  });
+  return /* @__PURE__ */ s.jsxs("div", { className: E, children: [
+    /* @__PURE__ */ s.jsxs("label", { className: k, id: S, htmlFor: t, children: [
+      l,
+      b && /* @__PURE__ */ s.jsx(M, {})
+    ] }),
+    d && /* @__PURE__ */ s.jsx("div", { className: e.hint, id: H, children: d }),
+    r && x && /* @__PURE__ */ s.jsx(
+      V,
+      {
+        className: e.feedback,
+        message: x,
+        type: "invalid",
+        id: g,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ s.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ s.jsx(
+        "select",
+        {
+          ...y,
+          id: t,
+          ref: i,
+          className: L,
+          "aria-labelledby": `${S}${N}`,
+          "aria-describedby": r && x ? g : void 0,
+          "aria-invalid": r,
+          defaultValue: u,
+          value: v,
+          disabled: h,
+          required: b,
+          children: P(a)
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: $,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Be as DSSelect
+};

package/styles/fonts/font-face.min.css

@@ -1 +1 @@
-@font-face{font-family:STIHL Contraface Display Title;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDisplayTitling.woff2) format("woff2"),url(./STIHLContrafaceDisplayTitling.woff) format("woff")}@font-face{font-family:STIHL Contraface Text Bold;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceText-Bold.woff2) format("woff2"),url(./STIHLContrafaceText-Bold.woff) format("woff")}@font-face{font-family:STIHL Contraface Text Regular;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceText.woff2) format("woff2"),url(./STIHLContrafaceText.woff) format("woff")}
+@font-face{font-family:STIHL Contraface Digital Display Title;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalDisplayTitling.woff2) format("woff2"),url(./STIHLContrafaceDigitalDisplayTitling.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Bold;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText-Bold.woff2) format("woff2"),url(./STIHLContrafaceDigitalText-Bold.woff) format("woff")}@font-face{font-family:STIHL Contraface Digital Text Regular;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalText.woff2) format("woff2"),url(./STIHLContrafaceDigitalText.woff) format("woff")}

package/styles/scss/lib/_heading.scss

@@ -19,27 +19,35 @@
 
 // Mixins for specific heading sizes
 @mixin ds-heading-x-large {
-  @include base-heading('STIHL Contraface Display Title', 1.625rem, 1.2);
+  @include base-heading(
+    'STIHL Contraface Digital Display Title',
+    1.625rem,
+    1.2
+  );
   @include responsive-heading('l', 1.875rem, 1.25);
 }
 
 @mixin ds-heading-large {
-  @include base-heading('STIHL Contraface Display Title', 1.375rem, 1.25);
+  @include base-heading(
+    'STIHL Contraface Digital Display Title',
+    1.375rem,
+    1.25
+  );
   @include responsive-heading('l', 1.625rem, 1.2);
 }
 
 @mixin ds-heading-medium {
-  @include base-heading('STIHL Contraface Text Bold', 1.25rem, 1.2);
+  @include base-heading('STIHL Contraface Digital Text Bold', 1.25rem, 1.2);
 }
 
 @mixin ds-heading-medium-uppercase {
-  @include base-heading('STIHL Contraface Display Title', 1.25rem, 1.2);
+  @include base-heading('STIHL Contraface Digital Display Title', 1.25rem, 1.2);
 }
 
 @mixin ds-heading-small {
-  @include base-heading('STIHL Contraface Text Bold', 1rem, 1.5);
+  @include base-heading('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
 
 @mixin ds-heading-small-uppercase {
-  @include base-heading('STIHL Contraface Display Title', 1rem, 1.5);
+  @include base-heading('STIHL Contraface Digital Display Title', 1rem, 1.5);
 }

package/styles/scss/lib/_text.scss

@@ -14,50 +14,50 @@
 
 // Mixins for specific text sizes
 @mixin ds-text-large {
-  @include base-text('STIHL Contraface Text Regular', 1.25rem, 1.6);
+  @include base-text('STIHL Contraface Digital Text Regular', 1.25rem, 1.6);
 }
 
 @mixin ds-text-large-bold {
-  @include base-text('STIHL Contraface Text Bold', 1.25rem, 1.6);
+  @include base-text('STIHL Contraface Digital Text Bold', 1.25rem, 1.6);
 }
 
 @mixin ds-text-medium {
-  @include base-text('STIHL Contraface Text Regular', 1rem, 1.5);
+  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.5);
 }
 
 @mixin ds-text-medium-bold {
-  @include base-text('STIHL Contraface Text Bold', 1rem, 1.5);
+  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.5);
 }
 
 @mixin ds-text-small {
-  @include base-text('STIHL Contraface Text Regular', 0.875rem, 1.14);
+  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
 }
 
 @mixin ds-text-small-bold {
-  @include base-text('STIHL Contraface Text Bold', 0.875rem, 1.14);
+  @include base-text('STIHL Contraface Digital Text Bold', 0.875rem, 1.14);
 }
 
 @mixin ds-text-x-small {
-  @include base-text('STIHL Contraface Text Regular', 0.75rem, 1.33);
+  @include base-text('STIHL Contraface Digital Text Regular', 0.75rem, 1.33);
 }
 
 @mixin ds-text-x-small-bold {
-  @include base-text('STIHL Contraface Text Bold', 0.75rem, 1.33);
+  @include base-text('STIHL Contraface Digital Text Bold', 0.75rem, 1.33);
 }
 
 @mixin ds-text-xx-small {
-  @include base-text('STIHL Contraface Text Regular', 0.625rem, 1.6);
+  @include base-text('STIHL Contraface Digital Text Regular', 0.625rem, 1.6);
 }
 
 // Utility text styles
 @mixin ds-utility-medium {
-  @include base-text('STIHL Contraface Text Regular', 1rem, 1.25);
+  @include base-text('STIHL Contraface Digital Text Regular', 1rem, 1.25);
 }
 
 @mixin ds-utility-medium-bold {
-  @include base-text('STIHL Contraface Text Bold', 1rem, 1.25);
+  @include base-text('STIHL Contraface Digital Text Bold', 1rem, 1.25);
 }
 
 @mixin ds-utility-small {
-  @include base-text('STIHL Contraface Text Regular', 0.875rem, 1.14);
+  @include base-text('STIHL Contraface Digital Text Regular', 0.875rem, 1.14);
 }

package/switch.96fd1689.js

@@ -0,0 +1,65 @@
+import "./assets/Switch.781e3de6.css";
+import { j as t } from "./chunks/jsx-runtime.5c071667.js";
+import { c as u } from "./chunks/index.8021d3e0.js";
+import "react";
+import { DSIcon as b } from "./icon.b4211784.js";
+import { DSSpinner as f } from "./spinner.ee015469.js";
+const x = "_root_19ej2_25", k = "_root--label-right_19ej2_53", S = "_root--stretched_19ej2_56", g = "_loader_19ej2_66", w = "_thumb_19ej2_119", C = "_root--checked_19ej2_134", e = {
+  root: x,
+  "root--label-right": "_root--label-right_19ej2_53",
+  rootLabelRight: k,
+  "root--stretched": "_root--stretched_19ej2_56",
+  rootStretched: S,
+  switch: "_switch_19ej2_61",
+  loader: g,
+  thumb: w,
+  "root--checked": "_root--checked_19ej2_134",
+  rootChecked: C
+}, I = ({
+  children: h,
+  aria: i,
+  alignLabel: l = "left",
+  checked: r = !1,
+  className: _,
+  dataTrackingid: n,
+  disabled: s = !1,
+  loading: o = !1,
+  stretched: d = !1,
+  onClick: a,
+  ...m
+}) => {
+  const j = u(e.root, _, {
+    [e.rootChecked]: r === !0,
+    [e.rootStretched]: d === !0,
+    [e.rootLabelRight]: l === "right"
+  }), p = (c) => {
+    if (s || o) {
+      c.preventDefault();
+      return;
+    }
+    a && a(c);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "button",
+    {
+      className: j,
+      "data-trackingid": n,
+      onClick: p,
+      ...i,
+      ...m,
+      type: "button",
+      role: "switch",
+      "aria-checked": r,
+      "aria-disabled": s || o,
+      "aria-busy": o,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: h }),
+        !o && /* @__PURE__ */ t.jsx("span", { className: e.switch, children: /* @__PURE__ */ t.jsx("span", { className: e.thumb, children: /* @__PURE__ */ t.jsx(b, { name: "check", "aria-hidden": "true" }) }) }),
+        o && /* @__PURE__ */ t.jsx("span", { className: e.loader, children: /* @__PURE__ */ t.jsx(f, { aria: { "aria-label": "Loading state" } }) })
+      ]
+    }
+  );
+};
+export {
+  I as DSSwitch
+};

package/{systemfeedback.6bbd1505.js → systemfeedback.8515a4e0.js}

@@ -1,25 +1,25 @@
-import "./assets/SystemFeedback.f4421d60.css";
+import "./assets/SystemFeedback.c30264c0.css";
 import { j as o } from "./chunks/jsx-runtime.5c071667.js";
 import { c } from "./chunks/index.8021d3e0.js";
 import { DSIcon as n } from "./icon.b4211784.js";
-const i = "_root_1f2l9_25", l = {
+const i = "_root_1adys_25", m = {
   root: i
-}, m = {
+}, l = {
   valid: "circle-check-colored",
   invalid: "diamond-exclamationmark-colored",
   warning: "triangle-exclamationmark-colored"
-}, f = ({
+}, j = ({
   className: r,
   message: e,
-  type: t,
-  ...s
+  type: s,
+  ...t
 }) => {
-  const a = c(l.root, r);
-  return /* @__PURE__ */ o.jsxs("div", { className: a, ...s, role: "alert", children: [
-    /* @__PURE__ */ o.jsx(n, { name: m[t], "aria-hidden": "true" }),
+  const a = c(m.root, r);
+  return /* @__PURE__ */ o.jsxs("div", { className: a, ...t, role: "alert", children: [
+    /* @__PURE__ */ o.jsx(n, { name: l[s], "aria-hidden": "true" }),
     e
   ] });
 };
 export {
-  f as DSSystemFeedback
+  j as DSSystemFeedback
 };

package/text.de8facb9.js

@@ -0,0 +1,57 @@
+import "./assets/Text.ac70cc84.css";
+import { j } from "./chunks/jsx-runtime.5c071667.js";
+import { c as x } from "./chunks/index.8021d3e0.js";
+const c = "_root_1d3j7_25", n = "_root--large_1d3j7_31", u = "_root--large-bold_1d3j7_41", b = "_root--medium_1d3j7_51", S = "_root--medium-bold_1d3j7_61", g = "_root--small_1d3j7_71", B = "_root--small-bold_1d3j7_81", i = "_root--x-small_1d3j7_91", X = "_root--x-small-bold_1d3j7_101", k = "_root--xx-small_1d3j7_111", p = "_root--theme-dark_1d3j7_121", o = {
+  root: c,
+  "root--large": "_root--large_1d3j7_31",
+  rootLarge: n,
+  "root--large-bold": "_root--large-bold_1d3j7_41",
+  rootLargeBold: u,
+  "root--medium": "_root--medium_1d3j7_51",
+  rootMedium: b,
+  "root--medium-bold": "_root--medium-bold_1d3j7_61",
+  rootMediumBold: S,
+  "root--small": "_root--small_1d3j7_71",
+  rootSmall: g,
+  "root--small-bold": "_root--small-bold_1d3j7_81",
+  rootSmallBold: B,
+  "root--x-small": "_root--x-small_1d3j7_91",
+  rootXSmall: i,
+  "root--x-small-bold": "_root--x-small-bold_1d3j7_101",
+  rootXSmallBold: X,
+  "root--xx-small": "_root--xx-small_1d3j7_111",
+  rootXxSmall: k,
+  "root--theme-dark": "_root--theme-dark_1d3j7_121",
+  rootThemeDark: p
+}, h = ({
+  children: t,
+  className: m,
+  size: l = "medium",
+  tag: d = "p",
+  theme: a = "light",
+  weight: r = "normal",
+  ..._
+}) => {
+  const s = d, e = x(o.root, m, {
+    // large
+    [o.rootLarge]: l === "large",
+    [o.rootLargeBold]: l === "large" && r === "bold",
+    // medium
+    [o.rootMedium]: l == "medium",
+    [o.rootMediumBold]: l === "medium" && r === "bold",
+    // small
+    [o.rootSmall]: l == "small",
+    [o.rootSmallBold]: l == "small" && r === "bold",
+    // x-small
+    [o.rootXSmall]: l == "x-small",
+    [o.rootXSmallBold]: l == "x-small" && r === "bold",
+    // xx-small
+    [o.rootXxSmall]: l == "xx-small",
+    // dark theme
+    [o.rootThemeDark]: a === "dark"
+  });
+  return /* @__PURE__ */ j.jsx(s, { className: e, ..._, children: t });
+};
+export {
+  h as DSText
+};