@stihl-design-system/components 1.0.0-RC.7 → 1.0.0-RC.9

package/components/LinkStandalone/LinkStandalone.d.ts

@@ -4,7 +4,7 @@ import { LinkStandaloneVariant } from './LinkStandalone.utils';
 export interface LinkStandaloneProps extends CommonLinkProps {
     /** Content within the link */
     children: React.ReactNode;
-    /** Enables the active state */
+    /** Sets an underline */
     active?: boolean;
     /** Visual style variant of the Link Standalone */
     variant?: LinkStandaloneVariant;

package/components/Notification/Notification.d.ts

@@ -14,7 +14,7 @@ export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
     hideIcon?: boolean;
     /** Defines the variant */
     variant?: NotificationVariant;
-    /** Callback function triggered when the close button is clicked */
+    /** Callback function called when the close button is clicked */
     onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**
@@ -22,5 +22,7 @@ export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
  * or highlight important content.
  *
  * The background color and icon vary based on the value of the `variant` prop.
+ *
+ * <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 DSNotification: ({ children, variant, customActionArea, className, closeButtonLabel, hideCloseButton, hideIcon, onClose, ...rest }: NotificationProps) => JSX.Element;

package/components/Radio/Radio.d.ts

@@ -26,7 +26,7 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     invalid?: boolean;
     /** Controls whether the hint is displayed when the radio button is not checked */
     hideUncheckedHint?: boolean;
-    /** Callback function triggered when the state of the radio changes */
+    /** Callback function called when the state of the radio changes */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/components/RadioGroup/RadioGroup.d.ts

@@ -49,7 +49,7 @@ export interface RadioGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSe
     systemFeedback?: string;
     /** Set the value of the selected option */
     value?: string;
-    /** Callback function triggered when the value of the radio group changes */
+    /** Callback function called when the value of the radio group changes */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 /**

package/components/SkipToContent/SkipToContent.d.ts

@@ -9,4 +9,4 @@ export type SkipToContentProps = {
  *
  * Focus the section below by using the tab key to see the "Skip To Content" component in action.
  */
-export declare const DSSkipToContent: ({ children, className, targetElementId, theme, }: SkipToContentProps) => JSX.Element;
+export declare const DSSkipToContent: ({ children, className, targetElementId, theme, ...rest }: SkipToContentProps) => JSX.Element;

package/components/Switch/Switch.d.ts

@@ -21,7 +21,7 @@ export interface SwitchProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     /** Stretches the Switch over the parent's width */
     stretched?: boolean;
-    /** Callback function triggered when the switch is clicked */
+    /** Callback function called when the switch is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 /**

package/components/Toast/Toast.d.ts

@@ -17,5 +17,8 @@ export interface ToastProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'
 }
 /**
  * Toasts are small, non-intrusive messages that appear temporarily to provide feedback or information.
+ *
+ * <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 DSToast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;

package/{customreactselect.CD58gwtp.js → customreactselect.C2QK_Q8T.js}

@@ -2,12 +2,12 @@
 import "./chunks/jsx-runtime.C115EyI4.js";
 import "./chunks/index.CvOaL64Y.js";
 import "react";
-import { c as l } from "./chunks/CustomReactSelect.5dHi6PEO.js";
+import { c as l } from "./chunks/CustomReactSelect.C4rTVlvy.js";
 import "./chunks/useBreakpoint.5xBNDiCf.js";
-import "./asterisk.Cjbk-xZi.js";
+import "./asterisk.DDn-yX4P.js";
 import "./chunks/Icon.n4XZrQ4N.js";
-import "./systemfeedback.CUWch42u.js";
-import "./optioncheckbox.C4l2UIak.js";
+import "./systemfeedback._8gatmgR.js";
+import "./optioncheckbox.DwQEfxGG.js";
 export {
   l as CustomReactSelect
 };

package/dialog.BPX7RJtQ.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.CkHCQg3Y.js";
+import { D as e } from "./chunks/Dialog.TPjJ_yxK.js";
+export {
+  e as DSDialog
+};

package/drawer.BfEPcSsQ.js

@@ -0,0 +1,9 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./button.CkHCQg3Y.js";
+import { D as e } from "./chunks/Drawer.DrLGSch-.js";
+export {
+  e as DSDrawer
+};

package/drawer.d.ts

@@ -0,0 +1 @@
+export * from './components/Drawer/Drawer'

package/fieldset.4yvz0e7M.js

@@ -0,0 +1,11 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./asterisk.DDn-yX4P.js";
+import "./heading.CAkraI2D.js";
+import "./systemfeedback._8gatmgR.js";
+import { D as l } from "./chunks/Fieldset.P09LInkT.js";
+export {
+  l as DSFieldset
+};

package/heading.CAkraI2D.js

@@ -0,0 +1,50 @@
+"use client";
+import { j as l } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c } from "./chunks/index.CvOaL64Y.js";
+import './assets/heading.6bER-Eac.css';const u = "_root_11ho3_76", g = "_root--x-large_11ho3_79", h = "_root--x-large-uppercase_11ho3_95", d = "_root--large_11ho3_112", n = "_root--large-uppercase_11ho3_128", i = "_root--medium_11ho3_145", x = "_root--medium-uppercase_11ho3_155", L = "_root--small_11ho3_166", U = "_root--small-uppercase_11ho3_176", k = "_root--theme-dark_11ho3_187", o = {
+  root: u,
+  "root--x-large": "_root--x-large_11ho3_79",
+  rootXLarge: g,
+  "root--x-large-uppercase": "_root--x-large-uppercase_11ho3_95",
+  rootXLargeUppercase: h,
+  "root--large": "_root--large_11ho3_112",
+  rootLarge: d,
+  "root--large-uppercase": "_root--large-uppercase_11ho3_128",
+  rootLargeUppercase: n,
+  "root--medium": "_root--medium_11ho3_145",
+  rootMedium: i,
+  "root--medium-uppercase": "_root--medium-uppercase_11ho3_155",
+  rootMediumUppercase: x,
+  "root--small": "_root--small_11ho3_166",
+  rootSmall: L,
+  "root--small-uppercase": "_root--small-uppercase_11ho3_176",
+  rootSmallUppercase: U,
+  "root--theme-dark": "_root--theme-dark_11ho3_187",
+  rootThemeDark: k
+}, X = ({
+  children: e,
+  className: a,
+  size: r = "medium",
+  tag: t = "h2",
+  // default tag because of SEO reasons (h1 should be used only once per page)
+  theme: p = "light",
+  ...s
+}) => {
+  const _ = t, m = c(o.root, a, {
+    // sizes
+    [o.rootXLarge]: r === "x-large",
+    [o.rootXLargeUppercase]: r === "x-large-uppercase",
+    [o.rootLarge]: r === "large",
+    [o.rootLargeUppercase]: r === "large-uppercase",
+    [o.rootMedium]: r == "medium",
+    [o.rootMediumUppercase]: r == "medium-uppercase",
+    [o.rootSmall]: r == "small",
+    [o.rootSmallUppercase]: r == "small-uppercase",
+    // dark theme
+    [o.rootThemeDark]: p === "dark"
+  });
+  return /* @__PURE__ */ l.jsx(_, { className: m, ...s, children: e });
+};
+export {
+  X as DSHeading
+};

package/index.d.ts

@@ -8,6 +8,10 @@ export * from './components/CheckboxGroup/CheckboxGroup';
 export * from './components/CheckboxGroup/CheckboxGroup.utils';
 export * from './components/Combobox/Combobox';
 export * from './components/Combobox/Combobox.utils';
+export * from './components/Dialog/Dialog';
+export * from './components/Dialog/Dialog.utils';
+export * from './components/Drawer/Drawer';
+export * from './components/Drawer/Drawer.utils';
 export * from './components/Fieldset/Fieldset';
 export * from './components/Fieldset/Fieldset.utils';
 export * from './components/FloatingActionButton/FloatingActionButton';

package/index.es.js

@@ -1,39 +1,41 @@
 "use client";
 import { DSAriaLiveRegions as x } from "./arialiveregions.BK4T7Vhk.js";
-import { DSButton as u } from "./button.L1lgCuM9.js";
-import { DSButtonRound as c } from "./buttonround.ddSqXjYf.js";
-import { DSCheckbox as f } from "./checkbox.DNHdo6_n.js";
-import { D as E, v as A } from "./chunks/CheckboxGroup.DsQ6lI5a.js";
-import { DSCombobox as g } from "./combobox.CRlhqmuO.js";
-import { C as P, b as C, a as R, D as L, v as B } from "./chunks/CustomReactSelect.5dHi6PEO.js";
-import { D as X, v as b } from "./chunks/Fieldset.B1vsrHNv.js";
-import { DSFloatingActionButton as Z } from "./floatingactionbutton.D_e4vz2G.js";
-import { DSHeading as H } from "./heading.BTNroD1E.js";
-import { D as M, I as w, u as V } from "./chunks/Icon.n4XZrQ4N.js";
-import { DSInput as y } from "./input.DqSOhSMX.js";
-import { I as Y, M as q, a as j, S as z, U as J, h as Q, i as $, c as oo, s as eo, v as ao, b as to } from "./chunks/Input.utils.BGUhXCNP.js";
-import { D as so, v as po } from "./chunks/InputPassword.a7zHKrmM.js";
-import { D as So, i as lo, v as mo } from "./chunks/InputSearch.DITRiB92.js";
-import { D as Io, v as To } from "./chunks/InputStepper.Bf8NZ9pb.js";
-import { DSLink as xo } from "./link.SAcKvzJ3.js";
-import { DSLinkStandalone as No } from "./linkstandalone.DNe0Nydm.js";
-import { DSLogo as _o } from "./logo.BR_CUXFl.js";
-import { D as ho, a as Eo, N as Ao } from "./chunks/Notification.DVVuSOqG.js";
-import { D as go, a as vo, o as Po, v as Co } from "./chunks/RadioGroup.BO4pbAJw.js";
-import { D as Lo, S as Bo, g as Uo, v as Xo } from "./chunks/Select.COdS787F.js";
-import { DSSkipToContent as Go } from "./skiptocontent._YZRKxnc.js";
-import { DSSpinner as Fo } from "./spinner.DVa112nj.js";
-import { DSSwitch as ko } from "./switch.rd7PdLc9.js";
-import { DSText as wo } from "./text.CrYUewrP.js";
-import { D as Ko, T as yo, v as Wo } from "./chunks/Textarea.oqCrSopu.js";
-import { DSTitle as qo } from "./title.Dvp8LKJt.js";
-import { DSToastProvider as zo, useDSToast as Jo } from "./toastmanager.BncH_rUP.js";
-const o = ["medium", "small"], e = [
+import { DSButton as N } from "./button.CkHCQg3Y.js";
+import { DSButtonRound as _ } from "./buttonround.DX3u2Fio.js";
+import { DSCheckbox as f } from "./checkbox.BbmCDJCm.js";
+import { D as h, v as A } from "./chunks/CheckboxGroup.Dx_Hn8Dl.js";
+import { DSCombobox as O } from "./combobox.jDpV6bv-.js";
+import { C as P, b as C, a as R, D as L, v as B } from "./chunks/CustomReactSelect.C4rTVlvy.js";
+import { D as X, v as b } from "./chunks/Dialog.TPjJ_yxK.js";
+import { a as Z, D as F, v as H } from "./chunks/Drawer.DrLGSch-.js";
+import { D as w, v as M } from "./chunks/Fieldset.P09LInkT.js";
+import { DSFloatingActionButton as K } from "./floatingactionbutton.D_e4vz2G.js";
+import { DSHeading as y } from "./heading.CAkraI2D.js";
+import { D as q, I as j, u as z } from "./chunks/Icon.n4XZrQ4N.js";
+import { DSInput as Q } from "./input.lLMqAG-6.js";
+import { I as oo, M as ao, a as eo, S as ro, U as to, h as so, i as po, c as io, s as So, v as lo, b as mo } from "./chunks/Input.utils.ChV6RJsh.js";
+import { D as no, v as Io } from "./chunks/InputPassword.CSc1c98k.js";
+import { D as xo, i as No, v as uo } from "./chunks/InputSearch.DrgdGFT_.js";
+import { D as co, v as fo } from "./chunks/InputStepper.DJEuIr4C.js";
+import { DSLink as ho } from "./link.KZaBufPM.js";
+import { DSLinkStandalone as vo } from "./linkstandalone.B6tN-NXD.js";
+import { DSLogo as go } from "./logo.CqukakYv.js";
+import { D as Co, a as Ro, N as Lo } from "./chunks/Notification.B68mMDiB.js";
+import { D as Uo, a as Xo, o as bo, v as Go } from "./chunks/RadioGroup.B5jRveyI.js";
+import { D as Fo, S as Ho, g as ko, v as wo } from "./chunks/Select.Cl2eJR1z.js";
+import { DSSkipToContent as Vo } from "./skiptocontent.fP4SOp-p.js";
+import { DSSpinner as Wo } from "./spinner.DVa112nj.js";
+import { DSSwitch as Yo } from "./switch.KO8HZPNL.js";
+import { DSText as jo } from "./text.rgDKQBrU.js";
+import { D as Jo, T as Qo, v as $o } from "./chunks/Textarea.Sk9-GXfs.js";
+import { DSTitle as aa } from "./title.LY1ylQsb.js";
+import { DSToastProvider as ra, useDSToast as ta } from "./toastmanager.DifUvJcg.js";
+const o = ["medium", "small"], a = [
   "filled",
   "highlight",
   "outline",
   "ghost"
-], a = ["filled", "highlight"], t = [
+], e = ["filled", "highlight"], r = [
   "x-large",
   "x-large-uppercase",
   "large",
@@ -42,7 +44,7 @@ const o = ["medium", "small"], e = [
   "medium-uppercase",
   "small",
   "small-uppercase"
-], r = ["h1", "h2", "h3", "h4", "h5", "h6"], s = ["medium", "small"], p = [
+], t = ["h1", "h2", "h3", "h4", "h5", "h6"], s = ["medium", "small"], p = [
   "filled",
   "highlight",
   "outline",
@@ -69,81 +71,86 @@ const o = ["medium", "small"], e = [
   "small",
   "x-small",
   "xx-small"
-], n = ["bold", "normal"], I = ["x-large", "large"];
+], D = ["bold", "normal"], n = ["x-large", "large"];
 export {
-  a as BUTTON_ROUND_VARIANT,
+  e as BUTTON_ROUND_VARIANT,
   o as BUTTON_SIZE,
-  e as BUTTON_VARIANT,
+  a as BUTTON_VARIANT,
   P as COMBOBOX_SIZE,
+  Z as DRAWER_POSITION,
   x as DSAriaLiveRegions,
-  u as DSButton,
-  c as DSButtonRound,
+  N as DSButton,
+  _ as DSButtonRound,
   f as DSCheckbox,
-  E as DSCheckboxGroup,
-  g as DSCombobox,
-  X as DSFieldset,
-  Z as DSFloatingActionButton,
-  H as DSHeading,
-  M as DSIcon,
-  y as DSInput,
-  so as DSInputPassword,
-  So as DSInputSearch,
-  Io as DSInputStepper,
-  xo as DSLink,
-  No as DSLinkStandalone,
-  _o as DSLogo,
-  ho as DSNotification,
-  go as DSRadioGroup,
-  Lo as DSSelect,
-  Go as DSSkipToContent,
-  Fo as DSSpinner,
-  ko as DSSwitch,
-  wo as DSText,
-  Ko as DSTextarea,
-  qo as DSTitle,
-  zo as DSToastProvider,
+  h as DSCheckboxGroup,
+  O as DSCombobox,
+  X as DSDialog,
+  F as DSDrawer,
+  w as DSFieldset,
+  K as DSFloatingActionButton,
+  y as DSHeading,
+  q as DSIcon,
+  Q as DSInput,
+  no as DSInputPassword,
+  xo as DSInputSearch,
+  co as DSInputStepper,
+  ho as DSLink,
+  vo as DSLinkStandalone,
+  go as DSLogo,
+  Co as DSNotification,
+  Uo as DSRadioGroup,
+  Fo as DSSelect,
+  Vo as DSSkipToContent,
+  Wo as DSSpinner,
+  Yo as DSSwitch,
+  jo as DSText,
+  Jo as DSTextarea,
+  aa as DSTitle,
+  ra as DSToastProvider,
   C as DS_COMBOBOX_TRANSLATIONS,
   R as DS_COMBOBOX_TRANSLATIONS_DE,
   L as DS_COMBOBOX_TRANSLATIONS_EN,
-  t as HEADING_SIZE,
-  r as HEADING_TAG,
-  w as ICON_SIZE,
-  Y as INPUT_SIZE,
+  r as HEADING_SIZE,
+  t as HEADING_TAG,
+  j as ICON_SIZE,
+  oo as INPUT_SIZE,
   s as LINK_SIZE,
   i as LINK_STANDALONE_VARIANT,
   p as LINK_VARIANT,
-  q as MAX_PREFIX_LENGTH,
-  j as MAX_SUFFIX_LENGTH,
-  Eo as NOTIFICATION_ICONS,
-  Ao as NOTIFICATION_VARIANT,
-  Bo as SELECT_SIZE,
+  ao as MAX_PREFIX_LENGTH,
+  eo as MAX_SUFFIX_LENGTH,
+  Ro as NOTIFICATION_ICONS,
+  Lo as NOTIFICATION_VARIANT,
+  Ho as SELECT_SIZE,
   S as SPINNER_SIZE,
-  z as SUPPORTED_INPUT_TYPES,
-  yo as TEXTAREA_SIZE,
+  ro as SUPPORTED_INPUT_TYPES,
+  Qo as TEXTAREA_SIZE,
   m as TEXT_SIZE,
   l as TEXT_TAG,
-  n as TEXT_WEIGHT,
-  I as TITLE_SIZE,
-  J as UNSUPPORTED_INPUT_TYPES,
-  Uo as getIsPlaceholderSelected,
-  Q as hasShowPickerSupport,
-  $ as isCalendarInput,
-  oo as isTimeInput,
-  lo as isWithinForm,
-  vo as optionsHaveCustomArea,
-  Po as optionsHaveHint,
-  eo as showCustomCalendarOrTimeIndicator,
-  Jo as useDSToast,
-  V as useDynamicSvgImport,
+  D as TEXT_WEIGHT,
+  n as TITLE_SIZE,
+  to as UNSUPPORTED_INPUT_TYPES,
+  ko as getIsPlaceholderSelected,
+  so as hasShowPickerSupport,
+  po as isCalendarInput,
+  io as isTimeInput,
+  No as isWithinForm,
+  Xo as optionsHaveCustomArea,
+  bo as optionsHaveHint,
+  So as showCustomCalendarOrTimeIndicator,
+  ta as useDSToast,
+  z as useDynamicSvgImport,
   A as validateCheckboxGroupProps,
   B as validateComboboxProps,
-  b as validateFieldsetProps,
-  po as validateInputPasswordProps,
-  ao as validateInputProps,
-  mo as validateInputSearchProps,
-  To as validateInputStepperProps,
-  Co as validateRadioGroupProps,
-  Xo as validateSelectProps,
-  Wo as validateTextareaProps,
-  to as validateType
+  b as validateDialogProps,
+  H as validateDrawerProps,
+  M as validateFieldsetProps,
+  Io as validateInputPasswordProps,
+  lo as validateInputProps,
+  uo as validateInputSearchProps,
+  fo as validateInputStepperProps,
+  Go as validateRadioGroupProps,
+  wo as validateSelectProps,
+  $o as validateTextareaProps,
+  mo as validateType
 };