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

package/partials/lib/partials.d.ts

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

package/radio.Bhu9OUY-.js

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

package/radiogroup.oILRMrX-.js

@@ -0,0 +1,102 @@
+"use client";
+import { j as d } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as N } from "./chunks/index.CvOaL64Y.js";
+import { forwardRef as P, useState as C } from "react";
+import { DSFieldset as y } from "./fieldset.DGcIKzDI.js";
+import { DSRadio as z } from "./radio.Bhu9OUY-.js";
+import { s as c } from "./chunks/RadioGroup.module.bi3leRes.js";
+import { g as a } from "./chunks/helpers.B1JT5ShS.js";
+const f = (o) => `The "${o}" prop is required. Please add the "${o}" prop to the DSRadioGroup component.`, M = ({
+  description: o,
+  id: e,
+  legend: t,
+  name: s,
+  options: i,
+  systemFeedback: n
+}) => {
+  if (!e && (o || n))
+    throw new Error(
+      a(
+        "DSRadioGroup",
+        'A unique "id" prop is required when providing the description or systemFeedback property. Please add an unique "id" prop to the DSRadioGroup component.'
+      )
+    );
+  if (!t)
+    throw new Error(
+      a("DSRadioGroup", f("legend"))
+    );
+  if (!s)
+    throw new Error(
+      a("DSRadioGroup", f("name"))
+    );
+  if (!i)
+    throw new Error(
+      a("DSRadioGroup", f("options"))
+    );
+}, O = P(
+  ({
+    legend: o,
+    name: e,
+    options: t,
+    alignment: s = "vertical",
+    className: i,
+    defaultValue: n,
+    description: m,
+    disabled: l = !1,
+    id: h,
+    invalid: p = !1,
+    required: S = !1,
+    systemFeedback: u,
+    value: D,
+    onChange: R,
+    ...G
+  }, v) => {
+    process.env.NODE_ENV !== "production" && M({ description: m, id: h, legend: o, name: e, options: t, systemFeedback: u });
+    const [E, x] = C(n), w = D !== void 0, g = w ? D : E, j = N(c.root, {
+      // In case of longer copy, use vertical alignment
+      [c.rootHorizontal]: s === "horizontal",
+      [c.rootInvalid]: p && !!u
+    }), q = (r) => {
+      if (l) {
+        r.preventDefault();
+        return;
+      }
+      w || x(
+        r.target.value
+      ), R && R(r);
+    };
+    return /* @__PURE__ */ d.jsx(
+      y,
+      {
+        id: h,
+        legend: o,
+        className: i,
+        description: m,
+        disabled: l,
+        required: S,
+        invalid: p,
+        systemFeedback: u,
+        ...G,
+        role: "radiogroup",
+        onChange: q,
+        children: /* @__PURE__ */ d.jsx("div", { className: j, children: t.map((r) => /* @__PURE__ */ d.jsx(
+          z,
+          {
+            name: e,
+            checked: r.value === g,
+            disabled: l,
+            invalid: p,
+            required: S,
+            ref: r.value === g ? v : null,
+            ...r
+          },
+          r.label + r.value
+        )) })
+      }
+    );
+  }
+);
+O.displayName = "DSRadioGroup";
+export {
+  O as DSRadioGroup
+};

package/select.OGcreXnT.js

@@ -0,0 +1,190 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as _ } from "./chunks/index.CvOaL64Y.js";
+import { useRef as $, useState as C, useEffect as W } from "react";
+import { u as F } from "./chunks/useBreakpoint.5xBNDiCf.js";
+import { Asterisk as M } from "./asterisk.DU8THnoC.js";
+import { DSIcon as O } from "./icon.PX9_1kNB.js";
+import { DSSystemFeedback as V } from "./systemfeedback.C7iXO5A1.js";
+import { g as f } from "./chunks/helpers.B1JT5ShS.js";
+import './assets/select.D2qBxaHP.css';const J = "_root_quxca_187", K = "_hint_quxca_195", Q = "_label_quxca_195", T = "_wrapper_quxca_199", U = "_affix_quxca_205", X = "_affix--small_quxca_225", Y = "_affix--disabled_quxca_237", Z = "_prefix_quxca_240", z = "_affix--readonly_quxca_243", G = "_suffix_quxca_253", ee = "_action-button_quxca_260", ae = "_label--hidden_quxca_277", te = "_feedback_quxca_304", ce = "_select-wrapper_quxca_309", se = "_select_quxca_309", ne = "_select--invalid_quxca_428", le = "_select--small_quxca_435", oe = "_input--has-leading-icon_quxca_481", ie = "_input--has-action-button_quxca_484", re = "_input--has-second-action-button_quxca_487", _e = "_select--has-leading-icon_quxca_490", ue = "_select--has-action-button_quxca_493", de = "_select--has-second-action-button_quxca_496", xe = "_select--has-affix_quxca_499", fe = "_select--is-ready_quxca_511", he = "_select--placeholder_quxca_523", pe = "_chevron_quxca_532", be = "_chevron--small_quxca_536", me = "_chevron--disabled_quxca_539", e = {
+  root: J,
+  hint: K,
+  label: Q,
+  wrapper: T,
+  affix: U,
+  "affix--small": "_affix--small_quxca_225",
+  affixSmall: X,
+  "affix--disabled": "_affix--disabled_quxca_237",
+  affixDisabled: Y,
+  prefix: Z,
+  "affix--readonly": "_affix--readonly_quxca_243",
+  affixReadonly: z,
+  suffix: G,
+  "action-button": "_action-button_quxca_260",
+  actionButton: ee,
+  "label--hidden": "_label--hidden_quxca_277",
+  labelHidden: ae,
+  feedback: te,
+  "select-wrapper": "_select-wrapper_quxca_309",
+  selectWrapper: ce,
+  select: se,
+  "select--invalid": "_select--invalid_quxca_428",
+  selectInvalid: ne,
+  "select--small": "_select--small_quxca_435",
+  selectSmall: le,
+  "input--has-leading-icon": "_input--has-leading-icon_quxca_481",
+  inputHasLeadingIcon: oe,
+  "input--has-action-button": "_input--has-action-button_quxca_484",
+  inputHasActionButton: ie,
+  "input--has-second-action-button": "_input--has-second-action-button_quxca_487",
+  inputHasSecondActionButton: re,
+  "select--has-leading-icon": "_select--has-leading-icon_quxca_490",
+  selectHasLeadingIcon: _e,
+  "select--has-action-button": "_select--has-action-button_quxca_493",
+  selectHasActionButton: ue,
+  "select--has-second-action-button": "_select--has-second-action-button_quxca_496",
+  selectHasSecondActionButton: de,
+  "select--has-affix": "_select--has-affix_quxca_499",
+  selectHasAffix: xe,
+  "select--is-ready": "_select--is-ready_quxca_511",
+  selectIsReady: fe,
+  "select--placeholder": "_select--placeholder_quxca_523",
+  selectPlaceholder: he,
+  chevron: pe,
+  "chevron--small": "_chevron--small_quxca_536",
+  chevronSmall: be,
+  "chevron--disabled": "_chevron--disabled_quxca_539",
+  chevronDisabled: me
+}, qe = ({
+  id: a,
+  label: n,
+  options: s
+}) => {
+  if (!a)
+    throw new Error(
+      f(
+        "DSSelect",
+        'A unique "id" prop is required. Please add an unique "id" prop to the DSSelect component.'
+      )
+    );
+  if (!n)
+    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 (!s || s.length === 0)
+    throw new Error(
+      f(
+        "DSSelect",
+        'Options are always required. Please add an "options" prop to the DSSelect component.'
+      )
+    );
+}, ve = (a, n, s) => a === "" || n !== void 0 && n !== "" ? !1 : !(s !== void 0 && s !== ""), Ae = ({
+  id: a,
+  label: n,
+  options: s,
+  className: H,
+  defaultValue: h,
+  disabled: p = !1,
+  hideLabel: w = !1,
+  hint: u,
+  invalid: r = !1,
+  placeholder: d = "Select",
+  required: b = !1,
+  size: m = "medium",
+  systemFeedback: x,
+  value: q,
+  ...D
+}) => {
+  process.env.NODE_ENV !== "production" && qe({
+    id: a,
+    label: n,
+    options: s
+  });
+  const i = $(null), [I, j] = C(
+    ve(d, h, q)
+  );
+  W(() => {
+    if (!i.current)
+      return;
+    const l = () => {
+      if (!i.current)
+        return;
+      const o = i.current.value;
+      j(o === "");
+    }, c = i.current;
+    return c.addEventListener("change", l), () => {
+      c.removeEventListener("change", l);
+    };
+  }, []);
+  const A = F(w), v = `${a}-label`, S = `${a}-feedback`, g = `${a}-hint`, B = u ? ` ${g}` : "", N = (l) => [
+    d && /* @__PURE__ */ t.jsx("option", { value: "", children: d }, `${a}-hidden-option-disabled-placeholder`),
+    ...l.map((c) => {
+      if ("options" in c) {
+        const { label: o, options: R } = c;
+        return /* @__PURE__ */ t.jsx("optgroup", { label: o, children: R.map(y) }, o);
+      } else
+        return y(c);
+    })
+  ], y = ({ label: l, value: c, isDisabled: o }) => /* @__PURE__ */ t.jsx("option", { value: c, disabled: o, children: l }, c), P = _(e.root, H), E = _(e.select, {
+    [e.selectSmall]: m === "small",
+    [e.selectInvalid]: r,
+    [e.selectPlaceholder]: I
+  }), L = _(e.label, {
+    // hide label only visually to keep them available for assistive technologies
+    [e.labelHidden]: A
+  }), k = _(e.chevron, {
+    [e.chevronSmall]: m === "small",
+    [e.chevronDisabled]: p
+  });
+  return /* @__PURE__ */ t.jsxs("div", { className: P, children: [
+    /* @__PURE__ */ t.jsxs("label", { className: L, id: v, htmlFor: a, children: [
+      n,
+      b && /* @__PURE__ */ t.jsx(M, {})
+    ] }),
+    u && /* @__PURE__ */ t.jsx("div", { className: e.hint, id: g, children: u }),
+    r && x && /* @__PURE__ */ t.jsx(
+      V,
+      {
+        className: e.feedback,
+        message: x,
+        type: "invalid",
+        id: S,
+        "aria-live": "assertive"
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: e.selectWrapper, children: [
+      /* @__PURE__ */ t.jsx(
+        "select",
+        {
+          ...D,
+          id: a,
+          ref: i,
+          className: E,
+          "aria-labelledby": `${v}${B}`,
+          "aria-describedby": r && x ? S : void 0,
+          "aria-invalid": r,
+          defaultValue: h,
+          value: q,
+          disabled: p,
+          required: b,
+          children: N(s)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        O,
+        {
+          name: "chevron-down",
+          className: k,
+          "aria-hidden": "true"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  Ae as DSSelect
+};

package/spinner.Diy_EeFY.js

@@ -0,0 +1,58 @@
+"use client";
+import { j as t } from "./chunks/jsx-runtime.C-kxDJ4g.js";
+import { c as n } from "./chunks/index.CvOaL64Y.js";
+import { DSIcon as _ } from "./icon.PX9_1kNB.js";
+import './assets/spinner.C5rBmKiF.css';const m = "_root_1xfbe_63", z = "_root-size-small_1xfbe_69", c = "_root-size-medium_1xfbe_73", x = "_root-size-large_1xfbe_77", S = "_root-size-x-large_1xfbe_81", f = "_root-size-inherit_1xfbe_85", d = "_rotate_1xfbe_1", b = "_screenReaderOnly_1xfbe_105", e = {
+  root: m,
+  "root-size-small": "_root-size-small_1xfbe_69",
+  rootSizeSmall: z,
+  "root-size-medium": "_root-size-medium_1xfbe_73",
+  rootSizeMedium: c,
+  "root-size-large": "_root-size-large_1xfbe_77",
+  rootSizeLarge: x,
+  "root-size-x-large": "_root-size-x-large_1xfbe_81",
+  rootSizeXLarge: S,
+  "root-size-inherit": "_root-size-inherit_1xfbe_85",
+  rootSizeInherit: f,
+  rotate: d,
+  screenReaderOnly: b
+}, p = ({
+  aria: r,
+  className: i,
+  size: o = "small",
+  theme: s = "light",
+  ...a
+}) => {
+  const l = n(e.root, i, {
+    [e.rootSizeSmall]: o === "small",
+    [e.rootSizeMedium]: o === "medium",
+    [e.rootSizeLarge]: o === "large",
+    [e.rootSizeXLarge]: o === "x-large",
+    [e.rootSizeInherit]: o === "inherit"
+  });
+  return /* @__PURE__ */ t.jsxs(
+    "span",
+    {
+      className: l,
+      role: "alert",
+      "aria-live": "assertive",
+      "aria-label": (r == null ? void 0 : r["aria-label"]) || void 0,
+      ...a,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { className: e.screenReaderOnly, children: " " }),
+        /* @__PURE__ */ t.jsx(
+          _,
+          {
+            name: "loading-spinner",
+            theme: s,
+            focusable: "false",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  p as DSSpinner
+};

package/styles/scss/_index.scss

@@ -12,6 +12,7 @@
 @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';

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-sidebar-sidebar.scss

@@ -39,10 +39,10 @@ $ds-grid-sidebar-sidebar-2-column-end: sidebar-2-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

@@ -9,7 +9,6 @@
   --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,15 +56,15 @@
     --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-block-end: -24px;
     & > * {
-      margin-bottom: 24px;
+      margin-block-end: 24px;
     }
     @if $is-sidebar-1-open == false {
       grid-template-columns:
@@ -74,11 +73,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 +80,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,27 +88,29 @@
         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) {
+  @include ds-media-query-min('xl') {
     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-block-end: -32px;
     & > * {
-      margin-bottom: 32px;
+      margin-block-end: 32px;
     }
 
     @if $is-sidebar-1-open == false {
@@ -129,11 +120,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 +127,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,14 +135,16 @@
         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;