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

package/partials/lib/partials.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { Format } from '../shared';
+import { Format } from '../shared';
 type GetMetaIconLinksOptions = {
     format?: Format;
 };

package/partials/mystihl-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" fill="none"><g clip-path="url(#a)"><path fill="#F37A1F" d="M512 0H0v512h512V0Z"/><path fill="#fff" fill-rule="evenodd" d="M44 222v30l212-96 212 96v-30l-212-96-212 96Zm26 35v129h28V274.5h316V386h28V257l-186-85-186 85Zm328 59v-26H114v26h284Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h512v512H0z"/></clipPath></defs></svg>

package/radio.DTZNJzMU.js

@@ -0,0 +1,115 @@
+"use client";
+import { j as i } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as h } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as $, useRef as C, useState as E, useEffect as L, useCallback as O } from "react";
+import { u as P } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import './assets/radio.-Xxx5wL4.css';const R = (r) => r.replace(/\s+/g, ""), U = "_radio-root_2r9h1_76", q = "_radio-root--disabled_2r9h1_97", z = "_radio-root--with-custom-area_2r9h1_100", F = "_radio_2r9h1_76", G = "_dot_2r9h1_121", J = "_radio--invalid_2r9h1_145", K = "_label_2r9h1_150", M = "_label--bold_2r9h1_165", Q = "_label--hidden_2r9h1_177", T = "_label--with-custom-area_2r9h1_189", X = "_custom-area_2r9h1_193", Y = "_hint_2r9h1_201", Z = "_hint--visible_2r9h1_225", ee = "_hint--unchecked-hidden_2r9h1_229", te = "_hint--hidden_2r9h1_234", oe = "_input_2r9h1_247", e = {
+  "radio-root": "_radio-root_2r9h1_76",
+  radioRoot: U,
+  "radio-root--disabled": "_radio-root--disabled_2r9h1_97",
+  radioRootDisabled: q,
+  "radio-root--with-custom-area": "_radio-root--with-custom-area_2r9h1_100",
+  radioRootWithCustomArea: z,
+  radio: F,
+  dot: G,
+  "radio--invalid": "_radio--invalid_2r9h1_145",
+  radioInvalid: J,
+  label: K,
+  "label--bold": "_label--bold_2r9h1_165",
+  labelBold: M,
+  "label--hidden": "_label--hidden_2r9h1_177",
+  labelHidden: Q,
+  "label--with-custom-area": "_label--with-custom-area_2r9h1_189",
+  labelWithCustomArea: T,
+  "custom-area": "_custom-area_2r9h1_193",
+  customArea: X,
+  hint: Y,
+  "hint--visible": "_hint--visible_2r9h1_225",
+  hintVisible: Z,
+  "hint--unchecked-hidden": "_hint--unchecked-hidden_2r9h1_229",
+  hintUncheckedHidden: ee,
+  "hint--hidden": "_hint--hidden_2r9h1_234",
+  hintHidden: te,
+  input: oe
+}, ie = $(
+  ({
+    label: r,
+    name: b,
+    value: m,
+    checked: f,
+    className: v,
+    customArea: a,
+    defaultChecked: x = !1,
+    disabled: s = !1,
+    hideLabel: k = !1,
+    hint: l,
+    invalid: j = !1,
+    isBold: N = !1,
+    hideUncheckedHint: n = !1,
+    onChange: _,
+    ...g
+  }, d) => {
+    const H = C(null), t = C(null), [w, D] = E(x), u = f !== void 0, c = u ? f : w;
+    L(() => {
+      t.current && n && ((t.current.style.height === "0px" || t.current.style.height === "") && c ? (t.current.style.height = `${t.current.scrollHeight}px`, t.current.style.opacity = "1") : (t.current.style.opacity = "0", t.current.style.height = "0px"));
+    }, [t, c]);
+    const p = P(k), A = h(
+      e.radioRoot,
+      {
+        [e.radioRootDisabled]: s,
+        [e.radioRootWithCustomArea]: !!a
+      },
+      v
+    ), W = h(e.label, {
+      [e.labelBold]: N,
+      // hide label only visually to keep them available for assistive technologies
+      [e.labelHidden]: p,
+      [e.labelWithCustomArea]: !!a
+    }), B = () => !n && l ? !0 : !!(n && l && c), V = h(e.hint, {
+      [e.hintHidden]: p,
+      [e.hintUncheckedHidden]: n,
+      [e.hintVisible]: B()
+    }), I = h(e.radio, {
+      [e.radioInvalid]: j
+    }), S = O(
+      (o) => {
+        if (s) {
+          o.preventDefault();
+          return;
+        }
+        u || D(o.target.checked), _ && _(o);
+      },
+      [s, u, _]
+    ), y = l ? `${R(b)}-${R(m)}-description` : void 0;
+    return /* @__PURE__ */ i.jsxs("label", { className: A, children: [
+      /* @__PURE__ */ i.jsx(
+        "input",
+        {
+          type: "radio",
+          value: m,
+          name: b,
+          className: e.input,
+          ref: (o) => {
+            typeof d == "function" ? d(o) : d !== null && (d.current = o), H.current = o;
+          },
+          onChange: S,
+          ...g,
+          disabled: s,
+          checked: c,
+          "aria-label": typeof r == "string" ? r : void 0,
+          "aria-describedby": y
+        }
+      ),
+      /* @__PURE__ */ i.jsx("span", { className: I, children: /* @__PURE__ */ i.jsx("div", { className: e.dot }) }),
+      /* @__PURE__ */ i.jsxs("span", { className: W, children: [
+        r,
+        a && /* @__PURE__ */ i.jsx("div", { className: e.customArea, children: a }),
+        /* @__PURE__ */ i.jsx("span", { id: y, className: V, ref: t, children: l })
+      ] })
+    ] });
+  }
+);
+ie.displayName = "DSRadio";
+export {
+  ie as DSRadio
+};

package/radio.d.ts

@@ -1 +1,2 @@
 export * from './components/Radio/Radio'
+export {}

package/radiogroup.SYkZm2DG.js

@@ -0,0 +1,10 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/Fieldset.C9K8BYmH.js";
+import "./radio.DTZNJzMU.js";
+import { D as a } from "./chunks/RadioGroup.D4UOflwr.js";
+export {
+  a as DSRadioGroup
+};

package/radiogroup.d.ts

@@ -1 +1,2 @@
 export * from './components/RadioGroup/RadioGroup'
+export {}

package/select.CYbwR3RW.js

@@ -0,0 +1,12 @@
+"use client";
+import "./chunks/jsx-runtime.C115EyI4.js";
+import "./chunks/index.CvOaL64Y.js";
+import "react";
+import "./chunks/useBreakpoint.5xBNDiCf.js";
+import "./asterisk.DDn-yX4P.js";
+import "./chunks/Icon.C2o2seDb.js";
+import "./systemfeedback.ZzRUAVYX.js";
+import { D as s } from "./chunks/Select.Ds86q4UC.js";
+export {
+  s as DSSelect
+};

package/select.d.ts

@@ -1 +1,2 @@
 export * from './components/Select/Select'
+export {}

package/skiptocontent.DUQWopO4.js

@@ -0,0 +1,46 @@
+"use client";
+import { j as p } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as k } from "./chunks/index.CvOaL64Y.js";
+import { g as n } from "./chunks/helpers.B1JT5ShS.js";
+import "react";
+import { DSLink as c } from "./link.Clk5_BYp.js";
+import './assets/skiptocontent.CHcqLS7S.css';const h = "_skip-to-content_cxg2l_76", l = "_skip-to-content--dark_cxg2l_83", s = {
+  "skip-to-content": "_skip-to-content_cxg2l_76",
+  skipToContent: h,
+  "skip-to-content--dark": "_skip-to-content--dark_cxg2l_83",
+  skipToContentDark: l
+}, f = ({
+  children: e = "Skip to main content",
+  className: i,
+  targetElementId: t = "main",
+  theme: o = "light",
+  ...r
+}) => {
+  t.startsWith("#") && console.warn(
+    n(
+      "DSSkipToContent",
+      'The targetElementId should not start with a "#" character. Please provide the id of the element you want to skip to.'
+    )
+  ), (t.startsWith("http") || t.startsWith(".")) && console.warn(
+    n(
+      "DSSkipToContent",
+      'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
+    )
+  );
+  const a = k(s.skipToContent, i, {
+    [s.skipToContentDark]: o === "dark"
+  });
+  return /* @__PURE__ */ p.jsx(
+    c,
+    {
+      ...r,
+      className: a,
+      href: `#${t}`,
+      theme: o,
+      children: e
+    }
+  );
+};
+export {
+  f as DSSkipToContent
+};

package/skiptocontent.d.ts

@@ -0,0 +1,2 @@
+export * from './components/SkipToContent/SkipToContent'
+export {}

package/spinner.D-xrotcu.js

@@ -0,0 +1,58 @@
+"use client";
+import { j as r } from "./chunks/jsx-runtime.C115EyI4.js";
+import { c as n } from "./chunks/index.CvOaL64Y.js";
+import { D as _ } from "./chunks/Icon.C2o2seDb.js";
+import './assets/spinner.D_Nnf1ZG.css';const m = "_root_11iwi_76", z = "_root-size-small_11iwi_82", c = "_root-size-medium_11iwi_86", S = "_root-size-large_11iwi_90", d = "_root-size-x-large_11iwi_94", g = "_root-size-inherit_11iwi_98", w = "_rotate_11iwi_1", u = "_screenReaderOnly_11iwi_123", e = {
+  root: m,
+  "root-size-small": "_root-size-small_11iwi_82",
+  rootSizeSmall: z,
+  "root-size-medium": "_root-size-medium_11iwi_86",
+  rootSizeMedium: c,
+  "root-size-large": "_root-size-large_11iwi_90",
+  rootSizeLarge: S,
+  "root-size-x-large": "_root-size-x-large_11iwi_94",
+  rootSizeXLarge: d,
+  "root-size-inherit": "_root-size-inherit_11iwi_98",
+  rootSizeInherit: g,
+  rotate: w,
+  screenReaderOnly: u
+}, L = ({
+  aria: i,
+  className: t,
+  size: o = "small",
+  theme: s = "light",
+  ...a
+}) => {
+  const l = n(e.root, t, {
+    [e.rootSizeSmall]: o === "small",
+    [e.rootSizeMedium]: o === "medium",
+    [e.rootSizeLarge]: o === "large",
+    [e.rootSizeXLarge]: o === "x-large",
+    [e.rootSizeInherit]: o === "inherit"
+  });
+  return /* @__PURE__ */ r.jsxs(
+    "span",
+    {
+      className: l,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": (i == null ? void 0 : i["aria-label"]) || void 0,
+      ...a,
+      children: [
+        /* @__PURE__ */ r.jsx("span", { className: e.screenReaderOnly, children: " " }),
+        /* @__PURE__ */ r.jsx(
+          _,
+          {
+            name: "loading-spinner",
+            theme: s,
+            focusable: "false",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  L as DSSpinner
+};

package/spinner.d.ts

@@ -1 +1,2 @@
 export * from './components/Spinner/Spinner'
+export {}

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

@@ -1 +1 @@
-@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")}
+@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")}@font-face{font-family:STIHL Contraface Digital Text Demi;font-weight:400;font-style:normal;font-display:swap;src:url(./STIHLContrafaceDigitalTextDemi.woff2) format("woff2"),url(./STIHLContrafaceDigitalTextDemi.woff) format("woff")}

package/styles/scss/_index.scss

@@ -12,10 +12,13 @@
 @import 'lib/_grid-sidebar-sidebar.scss';
 @import 'lib/_heading.scss';
 @import 'lib/_helpers.scss';
+@import 'lib/_high-contrast.scss';
 @import 'lib/_hover.scss';
 @import 'lib/_link.scss';
 @import 'lib/_media-query.scss';
+@import 'lib/_shadow.scss';
 @import 'lib/_spacing.scss';
+@import 'lib/_spacing-dynamic.scss';
 @import 'lib/_text.scss';
 @import 'lib/_theme.scss';
 @import 'lib/_transition.scss';

package/styles/scss/lib/_animation.scss

@@ -1,6 +1,21 @@
-$ds-animation-duration-short: var(--ds-animation-duration, 550ms);
-$ds-animation-duration-medium: var(--ds-animation-duration, 1100ms);
-$ds-animation-duration-long: var(--ds-animation-duration, 1650ms);
+$ds-animation-duration-100: var(--ds-animation-duration, 100ms);
+$ds-animation-duration-250: var(--ds-animation-duration, 250ms);
+$ds-animation-duration-400: var(--ds-animation-duration, 400ms);
 
-$ds-animation-timing-function-ease-in-out: ease-in-out;
-$ds-animation-timing-function-linear: linear;
+$ds-animation-durations: (
+  '100': $ds-animation-duration-100,
+  '250': $ds-animation-duration-250,
+  '400': $ds-animation-duration-400,
+);
+
+$ds-motion-functional-linear: linear;
+$ds-motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
+$ds-motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
+$ds-motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
+
+$ds-animation-easing-functions: (
+  'linear': $ds-motion-functional-linear,
+  'ease-in': $ds-motion-functional-ease-in,
+  'ease-out': $ds-motion-functional-ease-out,
+  'ease-in-out': $ds-motion-functional-ease-in-out,
+);

package/styles/scss/lib/_breakpoints.scss

@@ -3,7 +3,6 @@ $ds-breakpoint-s: 320;
 $ds-breakpoint-m: 768;
 $ds-breakpoint-l: 1024;
 $ds-breakpoint-xl: 1536;
-// only used in grid, exposed in media query stories for custom control over grid
 $ds-breakpoint-xxl: 1668;
 
 $ds-breakpoints: (

package/styles/scss/lib/_container-query.scss

@@ -13,7 +13,7 @@
       }
     }
   } @else {
-    @error "Passed #{$min} breakpoint is not available for used ds-container-query-min() mixin.";
+    @error "[STIHL Design System] - [ds-container-query-min()]: Passed '#{$min}' breakpoint is not available in ds-container-query-min() mixin.";
   }
 }
 
@@ -30,7 +30,7 @@
       }
     }
   } @else {
-    @error "Passed #{$max} breakpoint is not available for used ds-container-query-max() mixin.";
+    @error "[STIHL Design System] - [ds-container-query-max()]: Passed '#{$max}' breakpoint is not available in ds-container-query-max() mixin.";
   }
 }
 
@@ -53,6 +53,6 @@
       }
     }
   } @else {
-    @error "Passed #{$min} and/or #{$max} breakpoint is not available for used ds-container-query-min-max() mixin.";
+    @error "[STIHL Design System] - [ds-container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds-container-query-min-max() mixin.";
   }
 }

package/styles/scss/lib/_focus.scss

@@ -1,4 +1,5 @@
 @import '_theme';
+@import '_high-contrast';
 
 @mixin outline($theme, $offset, $thickness: 2px) {
   outline: $thickness solid;
@@ -9,7 +10,7 @@
   );
   outline-offset: $offset;
 
-  @media screen and (forced-colors: active) {
+  @include high-contrast-media-query {
     forced-color-adjust: auto;
     outline-color: Highlight;
   }

package/styles/scss/lib/_grid-extended.scss

@@ -5,7 +5,7 @@ $ds-grid-extended-column-end: extended-end;
   grid-column: $ds-grid-extended-column-start / $ds-grid-extended-column-end;
 
   @media (min-width: 1668px) {
-    margin-left: -32px;
-    margin-right: -32px;
+    margin-inline-start: -32px;
+    margin-inline-end: -32px;
   }
 }

package/styles/scss/lib/_grid-narrow.scss

@@ -1,3 +1,5 @@
+// The max-width of the narrow content center/left area in our grid.
+$ds-grid-narrow-max-width: 948px;
 $ds-grid-narrow-left-column-start: narrow-left-start;
 $ds-grid-narrow-left-column-end: narrow-left-end;
 $ds-grid-narrow-center-column-start: narrow-center-start;

package/styles/scss/lib/_grid-sidebar-sidebar.scss

@@ -15,6 +15,7 @@ $ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
     grid-row: span 300;
     grid-column: $ds-grid-sidebar-sidebar-1-column-start /
       $ds-grid-sidebar-sidebar-1-column-end;
+    margin-block-end: 0;
     @if ($is-open == true) {
       width: 264px;
       max-width: 264px;
@@ -33,16 +34,17 @@ $ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
     // https://stackoverflow.com/a/49076465/2346207
     // https://stackoverflow.com/a/56876772/2346207
     grid-row: span 300;
+    margin-block-end: 0;
     @if ($is-open == true) {
       grid-column: $ds-grid-sidebar-sidebar-2-column-start /
         $ds-grid-sidebar-sidebar-2-column-end;
       display: unset;
       width: 320px;
       max-width: 320px;
-      margin-left: -24px;
+      margin-inline-start: -24px;
     }
   }
   @media (min-width: 1535px) {
-    margin-left: -32px;
+    margin-inline-start: -32px;
   }
 }

package/styles/scss/lib/_grid-sidebar.scss

@@ -2,14 +2,13 @@
 
 @mixin ds-grid-sidebar($is-sidebar-1-open: false, $is-sidebar-2-open: false) {
   @if $is-sidebar-1-open == false and $is-sidebar-2-open == true {
-    @error "Sidebar 1 cannot be visually closed when sidebar 2 is open";
+    @error "[STIHL Design System] - [ds-grid-sidebar()]: Sidebar 1 cannot be visually closed when sidebar 2 is open";
   }
 
   display: grid;
   --ds-grid-sidebar-gap: 16px;
   gap: var(--ds-grid-sidebar-gap);
   min-width: 320px;
-  box-sizing: content-box;
   grid-template-columns:
     var(--ds-internal-grid-safe-zone)
     [main-start] repeat(4, minmax(0, 1fr))
@@ -43,7 +42,7 @@
     }
   }
 
-  @media (min-width: 768px) {
+  @include ds-media-query-min('m') {
     --ds-grid-sidebar-gap: 24px;
     gap: var(--ds-grid-sidebar-gap);
     grid-template-columns:
@@ -57,16 +56,14 @@
     --ds-grid-span-one-quarter: span 3;
   }
 
-  @media (min-width: 1024px) {
+  @include ds-media-query-min('l') {
     --ds-grid-sidebar-gap: 0px;
     gap: var(--ds-grid-sidebar-gap);
     column-gap: 24px;
-    // The children get a margin-bottom to imitate row-gap behavior
+    // The children get a margin-block-end to imitate row-gap behavior
     // This is counteracted for the last row in the parent
-    margin-bottom: -24px;
-    & > * {
-      margin-bottom: 24px;
-    }
+    margin-block-end: -24px;
+
     @if $is-sidebar-1-open == false {
       grid-template-columns:
         [sidebar-1-start] fit-content(64px)
@@ -74,11 +71,6 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(6, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 28 + 24 = 52
-       */
-      --ds-internal-grid-safe-zone-right: 28px;
     } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
       grid-template-columns:
         [sidebar-1-start] fit-content(264px)
@@ -86,11 +78,6 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(6, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 26 + 24 = 50
-       */
-      --ds-internal-grid-safe-zone-right: 26px;
     } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
       grid-template-columns:
         [sidebar-1-start] fit-content(264px)
@@ -99,28 +86,33 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(6, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 30 + 24 = 54
-       */
-      --ds-internal-grid-safe-zone-right: 30px;
     }
 
     --ds-internal-grid-safe-zone-left: 2px;
+    /**
+     * The safe zone + gap equal to what is called "margin" in the designs.
+     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
+     * HOWEVER, in code, the margins are always the same!
+     * 26 + 24 = 50
+     */
+    --ds-internal-grid-safe-zone-right: 26px;
 
     --ds-grid-span-one-half: span 3;
     --ds-grid-span-one-third: span 2;
     --ds-grid-span-two-thirds: span 4;
-  }
 
-  @media (min-width: 1536px) {
-    column-gap: 32px;
-    // The children get a margin-bottom to imitate row-gap behavior
+    // The children get a margin-block-end to imitate row-gap behavior
     // This is counteracted for the last row in the parent
-    margin-bottom: -32px;
     & > * {
-      margin-bottom: 32px;
+      margin-block-end: 24px;
     }
+  }
+
+  @include ds-media-query-min('xl') {
+    column-gap: 32px;
+    // The children get a margin-block-end to imitate row-gap behavior
+    // This is counteracted for the last row in the parent
+    margin-block-end: -32px;
 
     @if $is-sidebar-1-open == false {
       grid-template-columns:
@@ -129,11 +121,6 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(12, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 40 + 32 = 72
-       */
-      --ds-internal-grid-safe-zone-right: 40px;
     } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == false {
       grid-template-columns:
         [sidebar-1-start] fit-content(264px)
@@ -141,11 +128,6 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(12, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 32 + 32 = 64
-       */
-      --ds-internal-grid-safe-zone-right: 32px;
     } @else if $is-sidebar-1-open == true and $is-sidebar-2-open == true {
       grid-template-columns:
         [sidebar-1-start] fit-content(264px)
@@ -154,18 +136,26 @@
         var(--ds-internal-grid-safe-zone-left)
         [main-start] repeat(12, minmax(0, 1fr))
         [main-end] var(--ds-internal-grid-safe-zone-right);
-      /* The safe zone + gap equal to what is called "margin" in the designs,
-       * the "margin" on the right differs based on the status of the sidebar 1 and 2
-       * 36 + 32 = 68
-       */
-      --ds-internal-grid-safe-zone-right: 36px;
     }
 
     --ds-internal-grid-safe-zone-left: 0px;
+    /**
+     * The safe zone + gap equal to what is called "margin" in the designs.
+     * The "margin" on the right differs ONLY in Figma, based on the status of the sidebar 1 and 2.
+     * HOWEVER, in code, the margins are always the same!
+     * 32 + 32 = 64
+     */
+    --ds-internal-grid-safe-zone-right: 32px;
 
     --ds-grid-span-one-half: span 6;
     --ds-grid-span-one-third: span 4;
     --ds-grid-span-two-thirds: span 8;
+
+    // The children get a margin-block-end to imitate row-gap behavior
+    // This is counteracted for the last row in the parent
+    & > * {
+      margin-block-end: 32px;
+    }
   }
 
   @media (min-width: 2304px) {