@stihl-design-system/components 1.0.0-RC.37 → 1.0.0-RC.39

package/chunks/LinkCard.SIrSjRNL.js

@@ -0,0 +1,199 @@
+"use client";
+import { jsxs as P, jsx as h, Fragment as Ve } from "react/jsx-runtime";
+import { d as Ae } from "./index.D-sRdssb.js";
+import { c as n } from "./index.DL9mof6u.js";
+import { isValidElement as Be, cloneElement as Ie } from "react";
+import { DSFlag as He } from "../flag.CE32qHPa.js";
+import { DSHeading as Oe } from "../heading.DHLpT4dc.js";
+import { D as qe } from "./LinkButton.CWibqvhs.js";
+import { g as j } from "./helpers.CexwVao7.js";
+import '../assets/LinkCard.Bi9QqIDA.css';const Me = "ds-link-card_root_h40nd_1", Re = "ds-link-card_root--horizontal_h40nd_53", $e = "ds-link-card_image-wrapper_h40nd_58", Ge = "ds-link-card_content_h40nd_68", Je = "ds-link-card_header_h40nd_97", Ke = "ds-link-card_footer_h40nd_98", Qe = "ds-link-card_heading_h40nd_109", Ue = "ds-link-card_link_h40nd_113", Xe = "ds-link-card_description_h40nd_118", Ye = "ds-link-card_meta-data_h40nd_135", Ze = "ds-link-card_decorative-link_h40nd_152", et = "ds-link-card_flags_h40nd_156", tt = "ds-link-card_brand-flag_h40nd_165", i = {
+  root: Me,
+  rootHorizontal: Re,
+  imageWrapper: $e,
+  content: Ge,
+  header: Je,
+  footer: Ke,
+  heading: Qe,
+  link: Ue,
+  description: Xe,
+  metaData: Ye,
+  decorativeLink: Ze,
+  flags: et,
+  brandFlag: tt
+}, at = ({
+  href: p,
+  linkComponent: e,
+  flags: t,
+  flagListAriaLabel: m,
+  heading: f,
+  img: g,
+  brandFlag: o
+}) => {
+  if (!p && !e)
+    throw new Error(j("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent'."));
+  if (p && e)
+    throw new Error(j("DSLinkCard", "Please provide either the 'href' prop or a custom 'linkComponent', but not both."));
+  if (!f)
+    throw new Error(j("DSLinkCard", "The 'heading' prop is required and must be provided."));
+  t && t.length > 6 && console.warn(j("DSLinkCard", "It is recommended to provide a maximum of 6 flags for optimal display.")), t && t.length > 0 && !m && console.warn(j("DSLinkCard", "When providing flags, please also ensure to add the 'flagListAriaLabel' to describe the list of flags for non sighted screen reader users.")), o && g === void 0 && console.warn(j("DSLinkCard", "The 'brandFlag' prop is set to true, but no 'img' prop is provided. The 'brandFlag' will have no effect without an image."));
+}, it = (p) => {
+  const e = Ae.c(112);
+  let t, m, f, g, o, s, l, d, r, a, k, b, v, _;
+  e[0] !== p ? ({
+    heading: l,
+    brandFlag: t,
+    className: f,
+    cardClassNames: m,
+    decorativeLinkButtonProps: g,
+    description: o,
+    flagListAriaLabel: s,
+    flags: v,
+    href: d,
+    img: r,
+    linkComponent: a,
+    metaData: k,
+    orientation: _,
+    ...b
+  } = p, e[0] = p, e[1] = t, e[2] = m, e[3] = f, e[4] = g, e[5] = o, e[6] = s, e[7] = l, e[8] = d, e[9] = r, e[10] = a, e[11] = k, e[12] = b, e[13] = v, e[14] = _) : (t = e[1], m = e[2], f = e[3], g = e[4], o = e[5], s = e[6], l = e[7], d = e[8], r = e[9], a = e[10], k = e[11], b = e[12], v = e[13], _ = e[14]);
+  let c, A;
+  e[15] !== t || e[16] !== s || e[17] !== l || e[18] !== d || e[19] !== r || e[20] !== a || e[21] !== v || e[22] !== _ ? (c = v === void 0 ? [] : v, A = _ === void 0 ? "vertical" : _, process.env.NODE_ENV !== "production" && at({
+    href: d,
+    linkComponent: a,
+    heading: l,
+    flags: c,
+    flagListAriaLabel: s,
+    img: r,
+    brandFlag: t
+  }), e[15] = t, e[16] = s, e[17] = l, e[18] = d, e[19] = r, e[20] = a, e[21] = v, e[22] = _, e[23] = c, e[24] = A) : (c = e[23], A = e[24]);
+  let B;
+  e[25] !== g ? (B = g || {}, e[25] = g, e[26] = B) : B = e[26];
+  const {
+    label: V,
+    iconName: ae,
+    variant: Pe,
+    hideLabel: ie,
+    size: Ee
+  } = B, ne = Ee === void 0 ? "small" : Ee, I = Pe === "ghost" ? "ghost" : "filled", re = k || c.length > 0 || V;
+  let O;
+  e[27] !== m ? (O = m || {}, e[27] = m, e[28] = O) : O = e[28];
+  const {
+    brandFlag: oe,
+    contentWrapper: se,
+    descriptionWrapper: le,
+    decorativeLink: de,
+    flagsWrapper: ce,
+    footerWrapper: he,
+    headerWrapper: pe,
+    heading: me,
+    imageWrapper: fe,
+    metaDataWrapper: ge
+  } = O, ke = A === "horizontal";
+  let q;
+  e[29] !== f || e[30] !== ke ? (q = n(i.root, f, {
+    [i.rootHorizontal]: ke
+  }), e[29] = f, e[30] = ke, e[31] = q) : q = e[31];
+  const ve = q;
+  let M;
+  e[32] !== oe ? (M = n(i.brandFlag, oe), e[32] = oe, e[33] = M) : M = e[33];
+  const _e = M;
+  let R;
+  e[34] !== se ? (R = n(i.content, se), e[34] = se, e[35] = R) : R = e[35];
+  const Le = R;
+  let $;
+  e[36] !== le ? ($ = n(i.description, le), e[36] = le, e[37] = $) : $ = e[37];
+  const be = $;
+  let G;
+  e[38] !== de ? (G = n(i.decorativeLink, de), e[38] = de, e[39] = G) : G = e[39];
+  const Ce = G;
+  let J;
+  e[40] !== ce ? (J = n(i.flags, ce), e[40] = ce, e[41] = J) : J = e[41];
+  const ue = J;
+  let K;
+  e[42] !== he ? (K = n(i.footer, he), e[42] = he, e[43] = K) : K = e[43];
+  const Ne = K;
+  let Q;
+  e[44] !== pe ? (Q = n(i.header, pe), e[44] = pe, e[45] = Q) : Q = e[45];
+  const De = Q;
+  let U;
+  e[46] !== me ? (U = n(i.heading, me), e[46] = me, e[47] = U) : U = e[47];
+  const Se = U;
+  let X;
+  e[48] !== fe ? (X = n(i.imageWrapper, fe), e[48] = fe, e[49] = X) : X = e[49];
+  const we = X;
+  let Y;
+  e[50] !== ge ? (Y = n(i.metaData, ge), e[50] = ge, e[51] = Y) : Y = e[51];
+  const Fe = Y;
+  let C, u, N, D, S, w, F, z;
+  e[52] !== b ? ({
+    download: u,
+    hrefLang: N,
+    ping: D,
+    referrerPolicy: S,
+    rel: w,
+    target: F,
+    type: z,
+    ...C
+  } = b, e[52] = b, e[53] = C, e[54] = u, e[55] = N, e[56] = D, e[57] = S, e[58] = w, e[59] = F, e[60] = z) : (C = e[53], u = e[54], N = e[55], D = e[56], S = e[57], w = e[58], F = e[59], z = e[60]);
+  let Z;
+  e[61] !== u || e[62] !== d || e[63] !== N || e[64] !== a || e[65] !== D || e[66] !== S || e[67] !== w || e[68] !== F || e[69] !== z ? (Z = (L) => a && Be(a) ? Ie(a, {
+    ...a.props,
+    className: n(i.link, a.props.className),
+    children: /* @__PURE__ */ P(Ve, { children: [
+      L,
+      " ",
+      a.props.children
+    ] })
+  }) : /* @__PURE__ */ h("a", { href: d, className: i.link, download: u, hrefLang: N, ping: D, referrerPolicy: S, rel: w, target: F, type: z, children: L }), e[61] = u, e[62] = d, e[63] = N, e[64] = a, e[65] = D, e[66] = S, e[67] = w, e[68] = F, e[69] = z, e[70] = Z) : Z = e[70];
+  const ze = Z;
+  let ee;
+  e[71] !== ze || e[72] !== Se ? (ee = (L) => {
+    const Te = typeof L == "object" && L !== void 0, {
+      headingText: je,
+      headingSize: xe,
+      headingTag: ye
+    } = Te ? L : {
+      headingText: L
+    };
+    return /* @__PURE__ */ h(Oe, { tag: ye === void 0 ? "h3" : ye, size: xe === void 0 ? "medium" : xe, className: Se, children: ze(je) });
+  }, e[71] = ze, e[72] = Se, e[73] = ee) : ee = e[73];
+  const We = ee;
+  let W;
+  e[74] !== We || e[75] !== l ? (W = We(l), e[74] = We, e[75] = l, e[76] = W) : W = e[76];
+  let E;
+  e[77] !== o || e[78] !== be ? (E = o && /* @__PURE__ */ h("div", { className: be, children: o }), e[77] = o, e[78] = be, e[79] = E) : E = e[79];
+  let T;
+  e[80] !== De || e[81] !== W || e[82] !== E ? (T = /* @__PURE__ */ P("div", { className: De, children: [
+    W,
+    E
+  ] }), e[80] = De, e[81] = W, e[82] = E, e[83] = T) : T = e[83];
+  let x;
+  e[84] !== I || e[85] !== Ce || e[86] !== ie || e[87] !== ae || e[88] !== V || e[89] !== ne || e[90] !== s || e[91] !== c || e[92] !== ue || e[93] !== Ne || e[94] !== re || e[95] !== k || e[96] !== Fe ? (x = re && /* @__PURE__ */ P("div", { className: Ne, children: [
+    k && /* @__PURE__ */ h("div", { className: Fe, children: k }),
+    c.length > 0 && /* @__PURE__ */ h("ul", { className: ue, "aria-label": s, children: c.map(nt) }),
+    V && /* @__PURE__ */ h(qe, { iconName: ae, iconPosition: "right", variant: I, hideLabel: ie, size: ne, isFlush: I === "ghost", "aria-hidden": !0, className: Ce, children: V })
+  ] }), e[84] = I, e[85] = Ce, e[86] = ie, e[87] = ae, e[88] = V, e[89] = ne, e[90] = s, e[91] = c, e[92] = ue, e[93] = Ne, e[94] = re, e[95] = k, e[96] = Fe, e[97] = x) : x = e[97];
+  let y;
+  e[98] !== Le || e[99] !== T || e[100] !== x ? (y = /* @__PURE__ */ P("div", { className: Le, children: [
+    T,
+    x
+  ] }), e[98] = Le, e[99] = T, e[100] = x, e[101] = y) : y = e[101];
+  let H;
+  e[102] !== t || e[103] !== _e || e[104] !== we || e[105] !== r ? (H = r && /* @__PURE__ */ P("div", { className: we, children: [
+    t && /* @__PURE__ */ h(He, { color: "orange-base", className: _e, children: t }),
+    r
+  ] }), e[102] = t, e[103] = _e, e[104] = we, e[105] = r, e[106] = H) : H = e[106];
+  let te;
+  return e[107] !== C || e[108] !== ve || e[109] !== y || e[110] !== H ? (te = /* @__PURE__ */ P("div", { ...C, className: ve, children: [
+    y,
+    H
+  ] }), e[107] = C, e[108] = ve, e[109] = y, e[110] = H, e[111] = te) : te = e[111], te;
+};
+it.displayName = "DSLinkCard";
+function nt(p, e) {
+  return /* @__PURE__ */ h("li", { children: /* @__PURE__ */ h(He, { color: "grey-light", children: p }) }, e);
+}
+export {
+  it as D,
+  at as v
+};

package/combobox.Ds2prR5y.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as z } from "react/jsx-runtime";
+import { d as G } from "./chunks/index.D-sRdssb.js";
+import { v as H, c as J } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
+import { forwardRef as K } from "react";
+const Q = K((N, S) => {
+  const t = G.c(38);
+  let a, r, e, d, l, s, p, i, c, u, n, v, f, o, m, b;
+  if (t[0] !== N) {
+    const h = N ?? {}, {
+      id: q,
+      label: A,
+      className: B,
+      disabled: g,
+      dropdownOnFocus: w,
+      filterOption: L,
+      hideLabel: y,
+      invalid: D,
+      lang: E,
+      menuIsOpen: R,
+      popoverContent: j,
+      popoverInfoButtonProps: k,
+      required: F,
+      tabSelectsValue: M,
+      variant: V,
+      ..._
+    } = h;
+    s = q, i = A, a = B, d = L, u = R, n = j, v = k, o = _, r = g === void 0 ? !1 : g, e = w === void 0 ? !1 : w, l = y === void 0 ? !1 : y, p = D === void 0 ? !1 : D, c = E === void 0 ? "en" : E, f = F === void 0 ? !1 : F, m = M === void 0 ? !0 : M, b = V === void 0 ? "single" : V;
+    const $ = Array.isArray(o.options) ? o.options : [];
+    process.env.NODE_ENV !== "production" && H({
+      id: s,
+      label: i,
+      options: $,
+      hideLabel: l,
+      popoverContent: n
+    }), t[0] = N, t[1] = a, t[2] = r, t[3] = e, t[4] = d, t[5] = l, t[6] = s, t[7] = p, t[8] = i, t[9] = c, t[10] = u, t[11] = n, t[12] = v, t[13] = f, t[14] = o, t[15] = m, t[16] = b;
+  } else
+    a = t[1], r = t[2], e = t[3], d = t[4], l = t[5], s = t[6], p = t[7], i = t[8], c = t[9], u = t[10], n = t[11], v = t[12], f = t[13], o = t[14], m = t[15], b = t[16];
+  const O = b === "multi", I = !e || O;
+  let C;
+  t[17] !== a || t[18] !== r || t[19] !== e || t[20] !== d || t[21] !== l || t[22] !== s || t[23] !== p || t[24] !== O || t[25] !== i || t[26] !== c || t[27] !== u || t[28] !== n || t[29] !== v || t[30] !== S || t[31] !== f || t[32] !== o || t[33] !== I || t[34] !== m ? (C = {
+    id: s,
+    label: i,
+    className: a,
+    disabled: r,
+    filterOption: d,
+    hideLabel: l,
+    isMulti: O,
+    invalid: p,
+    lang: c,
+    menuIsOpen: u,
+    openMenuOnClick: e,
+    openMenuOnFocus: e,
+    isClearable: I,
+    required: f,
+    ref: S,
+    tabSelectsValue: m,
+    popoverContent: n,
+    popoverInfoButtonProps: v,
+    ...o
+  }, t[17] = a, t[18] = r, t[19] = e, t[20] = d, t[21] = l, t[22] = s, t[23] = p, t[24] = O, t[25] = i, t[26] = c, t[27] = u, t[28] = n, t[29] = v, t[30] = S, t[31] = f, t[32] = o, t[33] = I, t[34] = m, t[35] = C) : C = t[35];
+  const P = C;
+  let x;
+  return t[36] !== P ? (x = /* @__PURE__ */ z(J, { ...P }), t[36] = P, t[37] = x) : x = t[37], x;
+});
+Q.displayName = "DSCombobox";
+export {
+  Q as DSCombobox
+};

package/components/Combobox/Combobox.utils.d.ts

@@ -26,6 +26,8 @@ export interface ComboboxOption {
      * @default false
      */
     isDisabled?: boolean;
+    /** Custom data attributes. */
+    [key: `data-${string}`]: string | undefined;
 }
 export type ComboboxOptionsGroup = GroupBase<ComboboxOption>;
 export type ComboboxOptionsOrOptGroups = OptionsOrGroups<ComboboxOption, ComboboxOptionsGroup>;

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

@@ -47,6 +47,10 @@ export interface CustomReactSelectProps<IsMulti extends boolean> extends PickedR
      * @default 'en'
      */
     lang?: ComboboxLanguage;
+    /** Keeps the menu open or always closed, useful for specific testing scenarios.
+     * @default undefined
+     */
+    menuIsOpen?: boolean | undefined;
     /** Shows an info button next to the label that triggers a popover with the passed content. */
     popoverContent?: React.ReactNode;
     /** Popover info button props:

package/components/LinkCard/LinkCard.d.ts

@@ -5,6 +5,18 @@ type DecorativeLinkButtonProps = Pick<LinkButtonProps, 'iconPosition' | 'iconNam
     label?: string;
     variant?: Extract<LinkButtonProps['variant'], 'filled' | 'ghost'>;
 };
+type CardClassNames = {
+    brandFlag?: string;
+    contentWrapper?: string;
+    descriptionWrapper?: string;
+    decorativeLink?: string;
+    flagsWrapper?: string;
+    footerWrapper?: string;
+    headerWrapper?: string;
+    heading?: string;
+    imageWrapper?: string;
+    metaDataWrapper?: string;
+};
 export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLDivElement> {
     /**
      * The `heading` prop can either be a simple `string` or an object with specific properties.
@@ -20,13 +32,19 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     /** Orange brand flag text displayed on the image. */
     brandFlag?: string;
     /**
-     * ClassName for the content container inside the card.
-     */
-    classNameContent?: string;
-    /**
-     * ClassName for the card wrapper element.
+     * ClassNames for various parts of the LinkCard can be provided via the `cardClassNames` prop.
+     * - `brandFlag?: string` className for the brand flag element.
+     * - `contentWrapper?: string` className for the content wrapper element.
+     * - `descriptionWrapper?: string` className for the description wrapper element.
+     * - `decorativeLink?: string` className for the decorative link button element.
+     * - `flagsWrapper?: string` className for the flags wrapper element.
+     * - `footerWrapper?: string` className for the footer wrapper element.
+     * - `headerWrapper?: string` className for the header wrapper element.
+     * - `heading?: string` className for the heading element.
+     * - `imageWrapper?: string` className for the image wrapper element.
+     * - `metaDataWrapper?: string` className for the meta data wrapper element.
      */
-    classNameWrapper?: string;
+    cardClassNames?: CardClassNames;
     /**
      * Props for the decorative link button optionally displayed at the bottom of the card.
      *
@@ -52,11 +70,6 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     href?: string;
     /** Image element to be displayed within the card. */
     img?: React.ReactNode;
-    /**
-     * Makes the card layout responsive.
-     * @default true
-     */
-    isResponsive?: boolean;
     /** Link component to be used for the navigation. */
     linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
         onClick?: () => void;
@@ -71,10 +84,13 @@ export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement |
     orientation?: 'vertical' | 'horizontal';
 }
 /**
- * A simple, responsive & accessible Card component that can be used as a link to navigate to other pages.
+ * A simple, accessible Card component that can be used as a link to navigate to other pages.
  * The entire card is clickable and follows accessibility best practices.
  *
  * Design in Figma: [Link Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=26075-11591&p=f&t=WDN78eWtKR9F8yYp-11)
  */
-export declare const DSLinkCard: ({ heading, brandFlag, className, classNameContent, classNameWrapper, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, isResponsive, linkComponent, metaData, orientation, ...rest }: LinkCardProps) => JSX.Element;
+export declare const DSLinkCard: {
+    ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, ...rest }: LinkCardProps): JSX.Element;
+    displayName: string;
+};
 export {};

package/components/LinkCard/LinkCard.utils.d.ts

@@ -5,6 +5,6 @@ export type CardHeading = string | {
     headingSize?: HeadingSize;
     headingTag?: HeadingTag;
 };
-type ValidationProps = Pick<LinkCardProps, 'href' | 'linkComponent' | 'flags' | 'flagListAriaLabel' | 'heading' | 'isResponsive' | 'orientation' | 'img' | 'brandFlag'>;
-export declare const validateLinkCardProps: ({ href, linkComponent, flags, flagListAriaLabel, heading, isResponsive, orientation, img, brandFlag, }: ValidationProps) => void;
+type ValidationProps = Pick<LinkCardProps, 'href' | 'linkComponent' | 'flags' | 'flagListAriaLabel' | 'heading' | 'img' | 'brandFlag'>;
+export declare const validateLinkCardProps: ({ href, linkComponent, flags, flagListAriaLabel, heading, img, brandFlag, }: ValidationProps) => void;
 export {};

package/{customreactselect.BNwzk8Qi.js → customreactselect.CUmUV5IW.js}

@@ -3,7 +3,7 @@ import "react/jsx-runtime";
 import "./chunks/index.D-sRdssb.js";
 import "./chunks/index.DL9mof6u.js";
 import "react";
-import { c as f } from "./chunks/CustomReactSelect.D4kopDzX.js";
+import { c as f } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
 import "./chunks/useBreakpoint.1txsny17.js";
 import "./asterisk.B2ih8VwF.js";
 import "./chunks/Icon.CDLyB7Pv.js";

package/index.es.js

@@ -11,8 +11,8 @@ import { D as Y, v as j } from "./chunks/Checkbox.D5X5T6Yg.js";
 import { D as z, v as J } from "./chunks/CheckboxGroup.BIspWqeW.js";
 import { DSChipGroup as $ } from "./chipgroup.CY3pWyLO.js";
 import { C as ea, c as sa, b as oa, D as ra, g as ta, d as Ta, v as Sa, a as Ia } from "./chunks/Chip.DIp5hdRH.js";
-import { DSCombobox as pa } from "./combobox.C2XUM4fM.js";
-import { C as _a, b as Da, a as Aa, D as la, v as na } from "./chunks/CustomReactSelect.D4kopDzX.js";
+import { DSCombobox as pa } from "./combobox.Ds2prR5y.js";
+import { C as _a, b as Da, a as Aa, D as la, v as na } from "./chunks/CustomReactSelect.DS9Ey-jr.js";
 import { D as Oa, v as da } from "./chunks/Dialog.DMxHRrxo.js";
 import { a as va, D as Pa, v as Ca } from "./chunks/Drawer.CatmvDHJ.js";
 import { D as ua, v as La } from "./chunks/Fieldset.Bk8W5h13.js";
@@ -29,7 +29,7 @@ import { D as Oe, v as de } from "./chunks/InputPassword.Ctb0xbwg.js";
 import { D as ve, i as Pe, v as Ce } from "./chunks/InputSearch.C-r5ktR8.js";
 import { DSLink as ue } from "./link.BtZeNdii.js";
 import { D as ce, L as Re, a as fe, v as ge } from "./chunks/LinkButton.CWibqvhs.js";
-import { D as Be, v as be } from "./chunks/LinkCard.BjXQ85ZH.js";
+import { D as Be, v as be } from "./chunks/LinkCard.SIrSjRNL.js";
 import { DSLogo as Ge } from "./logo.DprmD8HU.js";
 import { D as He, u as Fe, v as Ve, a as Xe } from "./chunks/MegaMenu.qttkjGbD.js";
 import { D as Ze, N as Ke, a as ye, v as we } from "./chunks/NavigationTabs.SBNLx87A.js";

package/{linkcard.B43Y9rO4.js → linkcard.CyNfW13i.js}

@@ -6,7 +6,7 @@ import "react";
 import "./flag.CE32qHPa.js";
 import "./heading.DHLpT4dc.js";
 import "./chunks/LinkButton.CWibqvhs.js";
-import { D as s } from "./chunks/LinkCard.BjXQ85ZH.js";
+import { D as s } from "./chunks/LinkCard.SIrSjRNL.js";
 export {
   s as DSLinkCard
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stihl-design-system/components",
   "private": false,
-  "version": "1.0.0-RC.37",
+  "version": "1.0.0-RC.39",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.stihl.de/",
   "keywords": [
@@ -95,11 +95,11 @@
     "@emotion/styled": "^11.14.1",
     "@floating-ui/react": "^0.27.16",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "^1.56.0",
-    "@storybook/addon-a11y": "^9.1.8",
-    "@storybook/addon-docs": "9.1.8",
-    "@storybook/addon-links": "^9.1.8",
-    "@storybook/react-vite": "^9.1.8",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-a11y": "^9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "^9.1.17",
+    "@storybook/react-vite": "^9.1.17",
     "@storybook/test-runner": "^0.23.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
@@ -119,7 +119,7 @@
     "concurrently": "^9.2.1",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "^9.1.8",
+    "eslint-plugin-storybook": "^9.1.17",
     "globals": "^16.4.0",
     "globby": "^14.1.0",
     "http-server": "^14.1.1",
@@ -133,7 +133,7 @@
     "react-intersection-observer": "^9.16.0",
     "react-syntax-highlighter": "^15.6.6",
     "sass": "^1.93.2",
-    "storybook": "^9.1.8",
+    "storybook": "^9.1.17",
     "typescript": "^5.9.2",
     "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",

package/partials/index.js

@@ -206,8 +206,8 @@ function f(r, a) {
     {
       componentName: "DSLinkCard",
       componentNameLowercase: "linkcard",
-      cssFileName: "LinkCard.DgC0-Ow5.css",
-      cssFileContent: ':where(.ds-link-card_root_1v6ea_1){height:inherit}:where(.ds-link-card_root--responsive_1v6ea_4){container-type:inline-size;container-name:card-orientation}@container card-orientation (width > 687px){:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_wrapper_1v6ea_9){grid-template-rows:unset;grid-auto-columns:auto 1fr;grid-auto-flow:column;width:100%}:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_wrapper_1v6ea_9) :where(img){border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_wrapper_1v6ea_9) :where(.ds-link-card_content_1v6ea_21){padding:32px}}:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_wrapper_1v6ea_9){container-type:inline-size;container-name:card-content}@container card-content (width > 859px){:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_content_1v6ea_21){display:grid;grid-template-columns:2fr 1fr;gap:64px;width:100%}:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_content_1v6ea_21) :where(.ds-link-card_footer_1v6ea_36){margin-block-start:unset;align-items:flex-end;text-align:right}:where(.ds-link-card_root--responsive_1v6ea_4) :where(.ds-link-card_content_1v6ea_21) :where(.ds-link-card_flags_1v6ea_41){justify-content:flex-end}}:where(.ds-link-card_root--horizontal_1v6ea_45) :where(.ds-link-card_wrapper_1v6ea_9){grid-template-rows:unset;grid-auto-columns:auto 1fr;grid-auto-flow:column;width:100%}:where(.ds-link-card_root--horizontal_1v6ea_45) :where(.ds-link-card_wrapper_1v6ea_9) :where(img){border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}:where(.ds-link-card_root--horizontal_1v6ea_45) :where(.ds-link-card_wrapper_1v6ea_9) :where(.ds-link-card_content_1v6ea_21){padding:32px}:where(.ds-link-card_wrapper_1v6ea_9){position:relative;cursor:pointer;background-color:#fff;border-radius:4px;display:grid;grid-template-rows:auto 1fr;height:inherit;min-width:13rem;max-width:89.6875rem}:where(.ds-link-card_wrapper_1v6ea_9):hover{box-shadow:0 8px 48px #0000001a,0 2px 4px #0000000a}:where(.ds-link-card_wrapper_1v6ea_9) a:after{content:"";position:absolute;z-index:1;cursor:pointer;inset:0}:where(.ds-link-card_wrapper_1v6ea_9) a:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){:where(.ds-link-card_wrapper_1v6ea_9) a:focus{forced-color-adjust:auto;outline-color:Highlight}}:where(.ds-link-card_wrapper_1v6ea_9):has(:focus-visible) a:after{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){:where(.ds-link-card_wrapper_1v6ea_9):has(:focus-visible) a:after{forced-color-adjust:auto;outline-color:Highlight}}:where(.ds-link-card_wrapper_1v6ea_9):has(:focus-within) a:focus{outline:none}:where(.ds-link-card_wrapper_1v6ea_9){box-shadow:0 2px 12px #00000014,0 1px 2px #00000029}@media screen and (forced-colors: active){:where(.ds-link-card_wrapper_1v6ea_9){border:1px solid CanvasText}}:where(.ds-link-card_wrapper_1v6ea_9) :where(img){border-top-left-radius:4px;border-top-right-radius:4px;object-fit:cover;max-width:100%;width:100%;height:100%;aspect-ratio:16/9;display:block}:where(.ds-link-card_content_1v6ea_21){display:flex;flex-direction:column;gap:16px;padding:24px;order:1}:where(.ds-link-card_header_1v6ea_134),:where(.ds-link-card_footer_1v6ea_36){display:flex;flex-direction:column;align-items:flex-start;gap:16px}:where(.ds-link-card_footer_1v6ea_36){margin-block-start:auto}:where(.ds-link-card_heading_1v6ea_146){margin:0}:where(.ds-link-card_link_1v6ea_150){text-decoration:none;color:#252525}:where(.ds-link-card_description_1v6ea_155){overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.5;font-size-adjust:.414}:where(.ds-link-card_meta-data_1v6ea_172){overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414}:where(.ds-link-card_flags_1v6ea_41){display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}:where(.ds-link-card_brand-flag_1v6ea_198){position:absolute;top:8px;left:8px}'
+      cssFileName: "LinkCard.Bi9QqIDA.css",
+      cssFileContent: ':where(.ds-link-card_root_h40nd_1){background-color:#fff;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;height:fit-content;min-width:13rem;max-width:42.9375rem;position:relative;box-shadow:0 2px 12px #00000014,0 1px 2px #00000029}@media screen and (forced-colors: active){:where(.ds-link-card_root_h40nd_1){border:1px solid CanvasText}}:where(.ds-link-card_root_h40nd_1):hover{box-shadow:0 2px 12px #00000029,0 1px 2px #0003}:where(.ds-link-card_root_h40nd_1) a:after{content:"";position:absolute;z-index:1;cursor:pointer;inset:0}:where(.ds-link-card_root_h40nd_1) a:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){:where(.ds-link-card_root_h40nd_1) a:focus{forced-color-adjust:auto;outline-color:Highlight}}:where(.ds-link-card_root_h40nd_1):has(:focus-visible) a:after{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){:where(.ds-link-card_root_h40nd_1):has(:focus-visible) a:after{forced-color-adjust:auto;outline-color:Highlight}}:where(.ds-link-card_root_h40nd_1):has(:focus-within) a:focus{outline:none}:where(.ds-link-card_root--horizontal_h40nd_53){flex-direction:row;width:100%;max-width:89.6875rem}:where(.ds-link-card_root--horizontal_h40nd_53) :where(.ds-link-card_image-wrapper_h40nd_58){aspect-ratio:1/1;max-width:21.5625rem}:where(.ds-link-card_root--horizontal_h40nd_53) :where(.ds-link-card_image-wrapper_h40nd_58) img{border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}:where(.ds-link-card_root--horizontal_h40nd_53) :where(.ds-link-card_content_h40nd_68){padding:32px;height:auto}:where(.ds-link-card_image-wrapper_h40nd_58){width:100%;height:auto;aspect-ratio:16/9}:where(.ds-link-card_image-wrapper_h40nd_58) img{border-top-left-radius:4px;border-top-right-radius:4px;width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9}:where(.ds-link-card_content_h40nd_68){display:flex;flex-direction:column;gap:24px;padding:24px;height:100%;order:1}:where(.ds-link-card_header_h40nd_97),:where(.ds-link-card_footer_h40nd_98){display:flex;flex-direction:column;align-items:flex-start;gap:16px}:where(.ds-link-card_footer_h40nd_98){margin-block-start:auto}:where(.ds-link-card_heading_h40nd_109){margin:0}:where(.ds-link-card_link_h40nd_113){text-decoration:none;color:#252525}:where(.ds-link-card_description_h40nd_118){overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.5;font-size-adjust:.414}:where(.ds-link-card_meta-data_h40nd_135){overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414}:where(.ds-link-card_decorative-link_h40nd_152){margin-block-start:4px}:where(.ds-link-card_flags_h40nd_156){display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}:where(.ds-link-card_brand-flag_h40nd_165){position:absolute;top:8px;left:8px}'
     },
     {
       componentName: "DSLogo",

package/styles/scss/ds/lib/shadow.scss

@@ -3,6 +3,11 @@
     0px 2px 12px 0px rgba(0, 0, 0, 0.08),
     0px 1px 2px 0px rgba(0, 0, 0, 0.16);
 }
+@mixin shadow-m-hover {
+  box-shadow:
+    0px 2px 12px 0px rgba(0, 0, 0, 0.16),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.2);
+}
 @mixin shadow-l {
   box-shadow:
     0px 8px 48px 0px rgba(0, 0, 0, 0.1),

package/assets/LinkCard.DgC0-Ow5.css

@@ -1 +0,0 @@
-.ds-link-card_root_1v6ea_1{height:inherit}.ds-link-card_root--responsive_1v6ea_4{container-type:inline-size;container-name:card-orientation}@container card-orientation (width > 687px){.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_wrapper_1v6ea_9{grid-template-rows:unset;grid-auto-columns:auto 1fr;grid-auto-flow:column;width:100%}.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_wrapper_1v6ea_9 :where(img){border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_wrapper_1v6ea_9 .ds-link-card_content_1v6ea_21{padding:32px}}.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_wrapper_1v6ea_9{container-type:inline-size;container-name:card-content}@container card-content (width > 859px){.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_content_1v6ea_21{display:grid;grid-template-columns:2fr 1fr;gap:64px;width:100%}.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_content_1v6ea_21 .ds-link-card_footer_1v6ea_36{margin-block-start:unset;align-items:flex-end;text-align:right}.ds-link-card_root--responsive_1v6ea_4 .ds-link-card_content_1v6ea_21 .ds-link-card_flags_1v6ea_41{justify-content:flex-end}}.ds-link-card_root--horizontal_1v6ea_45 .ds-link-card_wrapper_1v6ea_9{grid-template-rows:unset;grid-auto-columns:auto 1fr;grid-auto-flow:column;width:100%}.ds-link-card_root--horizontal_1v6ea_45 .ds-link-card_wrapper_1v6ea_9 :where(img){border-top-right-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;aspect-ratio:1/1}.ds-link-card_root--horizontal_1v6ea_45 .ds-link-card_wrapper_1v6ea_9 .ds-link-card_content_1v6ea_21{padding:32px}.ds-link-card_wrapper_1v6ea_9{position:relative;cursor:pointer;background-color:#fff;border-radius:4px;display:grid;grid-template-rows:auto 1fr;height:inherit;min-width:13rem;max-width:89.6875rem}.ds-link-card_wrapper_1v6ea_9:hover{box-shadow:0 8px 48px #0000001a,0 2px 4px #0000000a}.ds-link-card_wrapper_1v6ea_9 a:after{content:"";position:absolute;z-index:1;cursor:pointer;inset:0}.ds-link-card_wrapper_1v6ea_9 a:focus{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-card_wrapper_1v6ea_9 a:focus{forced-color-adjust:auto;outline-color:Highlight}}.ds-link-card_wrapper_1v6ea_9:has(:focus-visible) a:after{outline:2px solid;outline-color:#252525;outline-offset:2px}@media screen and (forced-colors: active){.ds-link-card_wrapper_1v6ea_9:has(:focus-visible) a:after{forced-color-adjust:auto;outline-color:Highlight}}.ds-link-card_wrapper_1v6ea_9:has(:focus-within) a:focus{outline:none}.ds-link-card_wrapper_1v6ea_9{box-shadow:0 2px 12px #00000014,0 1px 2px #00000029}@media screen and (forced-colors: active){.ds-link-card_wrapper_1v6ea_9{border:1px solid CanvasText}}.ds-link-card_wrapper_1v6ea_9 :where(img){border-top-left-radius:4px;border-top-right-radius:4px;object-fit:cover;max-width:100%;width:100%;height:100%;aspect-ratio:16/9;display:block}.ds-link-card_content_1v6ea_21{display:flex;flex-direction:column;gap:16px;padding:24px;order:1}.ds-link-card_header_1v6ea_134,.ds-link-card_footer_1v6ea_36{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.ds-link-card_footer_1v6ea_36{margin-block-start:auto}.ds-link-card_heading_1v6ea_146{margin:0}.ds-link-card_link_1v6ea_150{text-decoration:none;color:#252525}.ds-link-card_description_1v6ea_155{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:1rem;line-height:1.5;font-size-adjust:.414}.ds-link-card_meta-data_1v6ea_172{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-family:STIHL Contraface Digital Text Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-style:normal;font-variant:normal;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;font-weight:400;font-size:.875rem;line-height:1.14;font-size-adjust:.414}.ds-link-card_flags_1v6ea_41{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.ds-link-card_brand-flag_1v6ea_198{position:absolute;top:8px;left:8px}