@sbb-esta/lyne-elements 3.4.0 → 3.6.0

package/button/common.js

@@ -1,5 +1,5 @@
 import { SbbButtonCommonElementMixin as n } from "./common/button-common.js";
-import { a, b as r, p as b, s as m, t as s } from "../transparent-button-rf30m88X.js";
+import { a, b as r, p as b, s as m, t as s } from "../transparent-button-xudJxob_.js";
 export {
   n as SbbButtonCommonElementMixin,
   a as buttonAccentStyle,

package/button.js

@@ -13,7 +13,7 @@ import { SbbSecondaryButtonStaticElement as T } from "./button/secondary-button-
 import { SbbAccentButtonStaticElement as C } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as P } from "./button/transparent-button-static/transparent-button-static.component.js";
 import { SbbButtonCommonElementMixin as h } from "./button/common/button-common.js";
-import { a as q, b as v, p as w, s as z, t as D } from "./transparent-button-rf30m88X.js";
+import { a as q, b as v, p as w, s as z, t as D } from "./transparent-button-xudJxob_.js";
 export {
   m as SbbAccentButtonElement,
   s as SbbAccentButtonLinkElement,

package/core/mixins/element-internals-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element-internals-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/element-internals-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAA2B,MAAM,KAAK,CAAC;AAEzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA8C5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,2BAA2B,EAAE,OAAO,GAAG,IAAI,CAAC;QAC5C,oBAAoB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAChD,uBAAuB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACnD,mBAAmB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAC/C,wBAAwB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACpD,sBAAsB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAClD,gBAAgB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;KAC7C;CACF;AAyKD,MAAM,WAAW,8BAA8B;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,4BAA4B;IACxD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAC/C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;CAC5D;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACjC,OAAO,EAAE,GAAG,IAGd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACvC,OAAO,EAAE,GAAG,IAId,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,4BAA4B,CAAC,GAAG,CAAC,GAAG,8BAmC1D,CAAC"}
+{"version":3,"file":"element-internals-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/element-internals-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAA2B,MAAM,KAAK,CAAC;AAEzE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AA8C5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,SAAS;QACjB,2BAA2B,EAAE,OAAO,GAAG,IAAI,CAAC;QAC5C,oBAAoB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAChD,uBAAuB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACnD,mBAAmB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAC/C,wBAAwB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QACpD,sBAAsB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;QAClD,gBAAgB,EAAE,SAAS,OAAO,EAAE,GAAG,IAAI,CAAC;KAC7C;CACF;AAyKD,MAAM,WAAW,8BAA8B;IAC7C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,4BAA4B;IACxD,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAC/C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;CAC5D;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACjC,OAAO,EAAE,GAAG,IAGd,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,OAAO,EAAE,GAAG,IAAI,EACpC,GAAG,mBAAmB,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,KACvC,OAAO,EAAE,GAAG,IAId,CAAC;AAEF;;;GAGG;AAEH,eAAO,MAAM,wBAAwB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,4BAA4B,CAAC,GAAG,CAAC,GAAG,8BA2C1D,CAAC"}

package/core/mixins/element-internals-mixin.js

@@ -1,5 +1,5 @@
-import { isServer as g } from "lit";
-const E = !g && !CSS.supports("selector(:state(loading))") ? class extends Set {
+import { isServer as E } from "lit";
+const g = E || !CSS.supports("selector(:state(loading))") ? class extends Set {
   constructor(e) {
     super(), this._host = e, this._host.addController(this);
   }
@@ -19,40 +19,40 @@ const E = !g && !CSS.supports("selector(:state(loading))") ? class extends Set {
     this._host.toggleAttribute(`state--${e}`, a);
   }
 } : null;
-if (!g) {
-  let d = 0;
-  const e = (l) => l.shadowRoot?.host ?? (l instanceof Element ? l : (() => {
+if (!E) {
+  let h = 0;
+  const e = (r) => r.shadowRoot?.host ?? (r instanceof Element ? r : (() => {
     throw new Error("Unable to resolve related element! This should never happen.");
-  })()), a = { attributes: !0, attributeFilter: ["id"] }, c = (l, u, m) => {
+  })()), a = { attributes: !0, attributeFilter: ["id"] }, c = (r, d, m) => {
     const i = m[Element.name] ?? m[ElementInternals.name];
-    l.setAttribute(u, i.id ||= `aria-ref-${d++}`);
-  }, f = (l, u, m) => {
-    l.setAttribute(u, Object.values(m).reduce((i, o) => i.concat(o)).filter((i, o, t) => t.indexOf(i) === o).map((i) => i.id || (i.id = `aria-ref-${d++}`)).join(" "));
+    r.setAttribute(d, i.id ||= `aria-ref-${h++}`);
+  }, u = (r, d, m) => {
+    r.setAttribute(d, Object.values(m).reduce((i, l) => i.concat(l)).filter((i, l, t) => t.indexOf(i) === l).map((i) => i.id || (i.id = `aria-ref-${h++}`)).join(" "));
   };
-  for (const l of [ElementInternals, Element]) {
-    const u = l.prototype;
-    if (!("ariaActiveDescendantElement" in u)) {
+  for (const r of [ElementInternals, Element]) {
+    const d = r.prototype;
+    if (!("ariaActiveDescendantElement" in d)) {
       const m = "aria-activedescendant", i = /* @__PURE__ */ new WeakMap();
-      Object.defineProperty(u, "ariaActiveDescendantElement", {
+      Object.defineProperty(d, "ariaActiveDescendantElement", {
         enumerable: !0,
         configurable: !0,
         get() {
-          const o = e(this), t = o.getAttribute(m)?.split(/\s+/)[0] ?? null;
-          return t ? o.getRootNode().getElementById?.(t) ?? null : null;
+          const l = e(this), t = l.getAttribute(m)?.split(/\s+/)[0] ?? null;
+          return t ? l.getRootNode().getElementById?.(t) ?? null : null;
         },
-        set(o) {
-          if (o !== null && !(o instanceof Element))
-            throw new TypeError(`Failed to set the 'ariaActiveDescendantElement' property on '${l.name}': Failed to convert value to 'Element'.`);
-          const t = e(this), s = i.get(t);
-          if (s?.observer?.disconnect(), o === null)
-            s && (delete s.elements[l.name], Object.keys(s).length ? s.observer.observe(Object.values(s.elements)[0], a) : (i.delete(t), t.removeAttribute(m)));
-          else if (s)
-            s.elements[l.name] = o, c(t, m, s.elements), Object.values(s.elements).forEach((n) => s.observer.observe(n, a));
+        set(l) {
+          if (l !== null && !(l instanceof Element))
+            throw new TypeError(`Failed to set the 'ariaActiveDescendantElement' property on '${r.name}': Failed to convert value to 'Element'.`);
+          const t = e(this), n = i.get(t);
+          if (n?.observer?.disconnect(), l === null)
+            n && (delete n.elements[r.name], Object.keys(n).length ? n.observer.observe(Object.values(n.elements)[0], a) : (i.delete(t), t.removeAttribute(m)));
+          else if (n)
+            n.elements[r.name] = l, c(t, m, n.elements), Object.values(n.elements).forEach((s) => n.observer.observe(s, a));
           else {
-            const n = { [l.name]: o };
-            c(t, m, n);
-            const r = new MutationObserver(() => c(t, m, n));
-            r.observe(o, a), i.set(t, { elements: n, observer: r });
+            const s = { [r.name]: l };
+            c(t, m, s);
+            const o = new MutationObserver(() => c(t, m, s));
+            o.observe(l, a), i.set(t, { elements: s, observer: o });
           }
         }
       });
@@ -65,63 +65,67 @@ if (!g) {
       "ariaLabelledByElements",
       "ariaOwnsElements"
     ])
-      if (!(m in u)) {
-        const i = /* @__PURE__ */ new WeakMap(), o = `aria-${m.slice(4, -8).toLowerCase()}`;
-        Object.defineProperty(u, m, {
+      if (!(m in d)) {
+        const i = /* @__PURE__ */ new WeakMap(), l = `aria-${m.slice(4, -8).toLowerCase()}`;
+        Object.defineProperty(d, m, {
           enumerable: !0,
           configurable: !0,
           get() {
-            const t = e(this), s = t.getAttribute(o)?.split(/\s+/).filter((n, r, h) => h.indexOf(n) === r).map((n) => t.getRootNode().getElementById?.(n)).filter((n) => n instanceof Element);
-            return s?.length ? Object.freeze(s) : null;
+            const t = e(this), n = t.getAttribute(l)?.split(/\s+/).filter((s, o, f) => f.indexOf(s) === o).map((s) => t.getRootNode().getElementById?.(s)).filter((s) => s instanceof Element);
+            return n?.length ? Object.freeze(n) : null;
           },
           set(t) {
-            if (t !== null && (!Array.isArray(t) || t.some((r) => !(r instanceof Element))))
-              throw new TypeError(`Failed to set the '${m}' property on '${l.name}': Failed to convert value to 'Element'.`);
-            const s = e(this);
-            t = t?.filter((r, h, b) => b.indexOf(r) === h) ?? null;
-            const n = i.get(s);
-            if (n?.observer?.disconnect(), t === null)
-              n && (delete n.elements[l.name], Object.keys(n.elements).length ? Object.values(n.elements).reduce((r, h) => r.concat(h)).forEach((r) => n.observer.observe(r, a)) : i.delete(s));
-            else if (n)
-              n.elements[l.name] = t, f(s, o, n.elements), Object.values(n.elements).reduce((r, h) => r.concat(h)).forEach((r) => n.observer.observe(r, a));
+            if (t !== null && (!Array.isArray(t) || t.some((o) => !(o instanceof Element))))
+              throw new TypeError(`Failed to set the '${m}' property on '${r.name}': Failed to convert value to 'Element'.`);
+            const n = e(this);
+            t = t?.filter((o, f, b) => b.indexOf(o) === f) ?? null;
+            const s = i.get(n);
+            if (s?.observer?.disconnect(), t === null)
+              s && (delete s.elements[r.name], Object.keys(s.elements).length ? Object.values(s.elements).reduce((o, f) => o.concat(f)).forEach((o) => s.observer.observe(o, a)) : i.delete(n));
+            else if (s)
+              s.elements[r.name] = t, u(n, l, s.elements), Object.values(s.elements).reduce((o, f) => o.concat(f)).forEach((o) => s.observer.observe(o, a));
             else {
-              const r = { [l.name]: t };
-              f(s, o, r);
-              const h = new MutationObserver(() => f(s, o, r));
-              t.forEach((b) => h.observe(b, a)), i.set(s, { elements: r, observer: h });
+              const o = { [r.name]: t };
+              u(n, l, o);
+              const f = new MutationObserver(() => u(n, l, o));
+              t.forEach((b) => f.observe(b, a)), i.set(n, { elements: o, observer: f });
             }
           }
         });
       }
   }
 }
-const y = (d, ...e) => {
+const y = (h, ...e) => {
   const a = e.filter((c) => !!c);
-  return d?.length ? d.concat(a) : e.length ? a : null;
-}, O = (d, ...e) => {
+  return h?.length ? h.concat(a) : e.length ? a : null;
+}, O = (h, ...e) => {
   e = e.filter((c) => !!c);
-  const a = d?.filter((c) => !e.includes(c)) ?? null;
+  const a = h?.filter((c) => !e.includes(c)) ?? null;
   return a?.length ? a : null;
-}, S = (d) => {
-  class e extends d {
+}, A = (h) => {
+  class e extends h {
     constructor(...c) {
-      super(...c), this.internals = this.attachInternals(), E && Object.defineProperty(this.internals, "states", {
-        value: new E(this),
-        writable: !1,
-        configurable: !1,
-        enumerable: !1
-      });
-      const f = this.constructor.role;
-      f && (this.internals.role = f);
+      if (super(...c), this.internals = this.attachInternals(), g)
+        Object.defineProperty(this.internals, "states", {
+          value: new g(this),
+          writable: !1,
+          configurable: !1,
+          enumerable: !1
+        });
+      else
+        for (const r of this.getAttributeNames().filter((d) => d.startsWith("state--")))
+          this.internals.states.add(r.slice(7)), this.removeAttribute(r);
+      const u = this.constructor.role;
+      u && (this.internals.role = u);
     }
-    toggleState(c, f) {
-      f || f !== !1 && !this.internals.states.has(c) ? this.internals.states.add(c) : this.internals.states.delete(c);
+    toggleState(c, u) {
+      u || u !== !1 && !this.internals.states.has(c) ? this.internals.states.add(c) : this.internals.states.delete(c);
     }
   }
   return e;
 };
 export {
-  S as SbbElementInternalsMixin,
+  A as SbbElementInternalsMixin,
   y as appendAriaElements,
   O as removeAriaElements
 };

package/core/styles/core.scss

@@ -205,7 +205,7 @@ sbb-form-field {
   &:has(
     :is(
       :is(input, textarea, select):user-invalid,
-      :is(:state(interacted), [state--interacted]):invalid,
+      :state(interacted):invalid,
       .ng-touched.ng-invalid,
       .sbb-invalid
     )
@@ -563,13 +563,13 @@ sbb-dialog-actions {
     --sbb-dialog-actions-border-color: var(--sbb-color-iron);
   }
 
-  sbb-dialog:is(:state(overflows), [state--overflows]) & {
+  sbb-dialog:state(overflows) & {
     --sbb-dialog-actions-border-color: transparent;
 
     @include shadows.shadow-level-9-soft;
   }
 
-  sbb-dialog[negative]:is(:state(overflows), [state--overflows]) & {
+  sbb-dialog[negative]:state(overflows) & {
     @include shadows.shadow-level-9-soft-negative;
   }
 }

package/core.css

@@ -991,24 +991,6 @@
   --sbb-size-element-s: var(--sbb-size-element-s-zero);
   --sbb-size-element-m: var(--sbb-size-element-m-zero);
   --sbb-size-element-l: var(--sbb-size-element-l-zero);
-  /**
-   * Micro (value corresponds to --sbb-breakpoint-micro-min)
-   */
-  /**
-   * Small (value corresponds to --sbb-breakpoint-small-min)
-   */
-  /**
-   * Medium (value corresponds to --sbb-breakpoint-medium-min)
-   */
-  /**
-   * Large (value corresponds to --sbb-breakpoint-large-min)
-   */
-  /**
-   * Wide (value corresponds to --sbb-breakpoint-wide-min)
-   */
-  /**
-   * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
-   */
 }
 @media (forced-colors: active) {
   :root {
@@ -1018,6 +1000,11 @@
     --sbb-focus-outline-width: var(--sbb-border-width-2x);
   }
 }
+:root {
+  /**
+   * Micro (value corresponds to --sbb-breakpoint-micro-min)
+   */
+}
 @media (min-width: 22.5rem) {
   :root {
     /* Layout */
@@ -1026,6 +1013,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-micro);
   }
 }
+:root {
+  /**
+   * Small (value corresponds to --sbb-breakpoint-small-min)
+   */
+}
 @media (min-width: 37.5rem) {
   :root {
     /* Title */
@@ -1040,6 +1032,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
   }
 }
+:root {
+  /**
+   * Medium (value corresponds to --sbb-breakpoint-medium-min)
+   */
+}
 @media (min-width: 52.5rem) {
   :root {
     /* Title */
@@ -1076,6 +1073,11 @@
     --sbb-size-element-l: var(--sbb-size-element-l-medium);
   }
 }
+:root {
+  /**
+   * Large (value corresponds to --sbb-breakpoint-large-min)
+   */
+}
 @media (min-width: 64rem) {
   :root {
     /* Title */
@@ -1090,6 +1092,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
   }
 }
+:root {
+  /**
+   * Wide (value corresponds to --sbb-breakpoint-wide-min)
+   */
+}
 @media (min-width: 80rem) {
   :root {
     /* Spacing */
@@ -1100,6 +1107,11 @@
     --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-wide);
   }
 }
+:root {
+  /**
+   * Ultra (value corresponds to --sbb-breakpoint-ultra-min)
+   */
+}
 @media (min-width: 90rem) {
   :root {
     /* Title */
@@ -1136,7 +1148,6 @@
   --sbb-title-margin-block-end-level-4: var(--sbb-spacing-fixed-3x);
   --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-2x);
   --sbb-title-margin-block-end-level-6: var(--sbb-spacing-fixed-1x);
-  --sbb-border-radius-infinity: 100000em;
 }
 :root.sbb-lean {
   --sbb-title-font-size-level-1: var(--sbb-font-size-title-2);
@@ -1154,6 +1165,9 @@
   --sbb-title-margin-block-end-level-5: var(--sbb-spacing-fixed-1x);
   --sbb-title-margin-block-end-level-6: 0;
 }
+:root {
+  --sbb-border-radius-infinity: 100000em;
+}
 :root:has(sbb-header[size=s]) {
   --sbb-header-height: 3.25rem;
 }
@@ -1343,14 +1357,14 @@ sbb-form-field[negative] :where(textarea)::-webkit-scrollbar-button, sbb-form-fi
   }
 }
 sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted), [state--interacted]):invalid,
+:is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
   --sbb-form-field-border-color: var(--sbb-color-red125);
   --sbb-form-field-text-color: var(--sbb-color-red125);
 }
 sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-:is(:state(interacted), [state--interacted]):invalid,
+:is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid))[negative] {
   --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
@@ -1358,7 +1372,7 @@ sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
 }
 @media (forced-colors: active) {
   sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
-  :is(:state(interacted), [state--interacted]):invalid,
+  :is(:state(interacted),[state--interacted]):invalid,
   .ng-touched.ng-invalid,
   .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) sbb-form-field:has(:is(:invalid, .ng-invalid)) {
     --sbb-form-field-border-color: LinkText !important;
@@ -1620,11 +1634,11 @@ sbb-toggle:has(:focus-visible) {
 sbb-dialog[negative] sbb-dialog-actions {
   --sbb-dialog-actions-border-color: var(--sbb-color-iron);
 }
-sbb-dialog:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+sbb-dialog:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
   --sbb-dialog-actions-border-color: transparent;
   box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color);
 }
-sbb-dialog[negative]:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+sbb-dialog[negative]:is(:state(overflows),[state--overflows]) sbb-dialog-actions {
   box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-negative-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
 }