@sbb-esta/lyne-elements 1.0.0 → 1.2.1

package/core/mixins.js

@@ -1,16 +1,16 @@
-import { property as o, state as g } from "lit/decorators.js";
-import { defaultConverter as h, isServer as b, html as l, nothing as u, css as C } from "lit";
-import { hostAttributes as x } from "./decorators.js";
-import { preventScrollOnSpacebarPress as p, forwardEventToHost as S, EventEmitter as k } from "./eventing.js";
-import { getLocalName as v } from "./dom.js";
+import { property as o, state as y } from "lit/decorators.js";
+import { defaultConverter as u, html as b, nothing as p, css as x } from "lit";
+import { hostAttributes as k } from "./decorators.js";
+import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
+import { getLocalName as f } from "./dom.js";
 import "../screen-reader-only.js";
-var w = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, r, s, t) => {
-  for (var e = E(r, s), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && w(r, s, e), e;
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, s, r, t) => {
+  for (var e = E(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && S(s, r, e), e;
 };
-const y = (n) => {
-  class r extends n {
+const C = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -30,22 +30,22 @@ const y = (n) => {
   }
   return P([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "disabled"), r;
-}, W = (n) => {
-  class r extends y(n) {
+  ], s.prototype, "disabled"), s;
+}, J = (n) => {
+  class s extends C(n) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
-  return r;
+  return s;
 };
-var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, d = (n, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? R(r, s) : r, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(r, s, e) : a(e)) || e);
-  return t && e && $(r, s, e), e;
+var $ = Object.defineProperty, R = Object.getOwnPropertyDescriptor, c = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? R(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+  return t && e && $(s, r, e), e;
 };
 const A = (n) => {
-  const s = class s extends n {
+  const r = class r extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -133,23 +133,23 @@ const A = (n) => {
       this.internals.setFormValue(this.value);
     }
   };
-  s.formAssociated = !0;
-  let r = s;
-  return d([
+  r.formAssociated = !0;
+  let s = r;
+  return c([
     o()
-  ], r.prototype, "name", 1), d([
+  ], s.prototype, "name", 1), c([
     o()
-  ], r.prototype, "value", 1), d([
-    g()
-  ], r.prototype, "formDisabled", 2), r;
+  ], s.prototype, "value", 1), c([
+    y()
+  ], s.prototype, "formDisabled", 2), s;
 };
-var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, L = (n, r, s, t) => {
-  for (var e = q(r, s), i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && O(r, s, e), e;
+var O = Object.defineProperty, q = Object.getOwnPropertyDescriptor, L = (n, s, r, t) => {
+  for (var e = q(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && O(s, r, e), e;
 };
-const U = (n) => {
-  class r extends n {
+const D = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._required = !1;
     }
@@ -172,38 +172,38 @@ const U = (n) => {
   }
   return L([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "required"), r;
+  ], s.prototype, "required"), s;
 };
-var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, f = (n, r, s, t) => {
-  for (var e = t > 1 ? void 0 : t ? M(r, s) : r, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = (t ? a(r, s, e) : a(e)) || e);
-  return t && e && D(r, s, e), e;
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
+  return t && e && M(s, r, e), e;
 };
-const Y = (n) => {
-  let r = class extends y(U(A(n))) {
+const Q = (n) => {
+  let s = class extends C(D(A(n))) {
     constructor() {
-      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (s) => {
-        s.key === " " && this._handleUserInteraction();
+      super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
+        r.key === " " && this._handleUserInteraction();
       }, this._handleUserInteraction = () => {
-        var s;
-        this.disabled || ((s = this.withUserInteraction) == null || s.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
+        var r;
+        this.disabled || ((r = this.withUserInteraction) == null || r.call(this), this.checked = !this.checked, this._attributeMutationBlocked = !0, this.dispatchEvent(new InputEvent("input", { composed: !0, bubbles: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 })), this.dispatchEvent(new CustomEvent("didChange", { bubbles: !0 })));
       }, this.internals.role = "checkbox";
     }
-    set checked(s) {
-      const t = typeof s == "object" ? s.attribute : !1;
-      t && (s = s.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!s, this.updateFormValue();
+    set checked(r) {
+      const t = typeof r == "object" ? r.attribute : !1;
+      t && (r = r.value), this.hasUpdated && !t && (this._attributeMutationBlocked = !0), this._checked = !!r, this.updateFormValue();
     }
     get checked() {
       return this._checked;
     }
     connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", p), this.addEventListener("keyup", this._handleKeyboardInteraction);
+      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", v), this.addEventListener("keyup", this._handleKeyboardInteraction);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", p), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", v), this.removeEventListener("keyup", this._handleKeyboardInteraction);
     }
-    attributeChangedCallback(s, t, e) {
-      (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, t, e);
+    attributeChangedCallback(r, t, e) {
+      (r !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(r, t, e);
     }
     /**
      * Is called whenever the form is being reset.
@@ -222,42 +222,50 @@ const Y = (n) => {
      *
      * @internal
      */
-    formStateRestoreCallback(s, t) {
-      s && (this.checked = s === "true");
+    formStateRestoreCallback(r, t) {
+      r && (this.checked = r === "true");
     }
     updateFormValue() {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
   };
-  return f([
+  return m([
     o({
       type: Boolean,
       converter: {
-        ...h,
+        ...u,
         // We need to pass information to the setter so that we know it was called by attribute change.
-        fromAttribute: (s, t) => {
+        fromAttribute: (r, t) => {
           var i, a;
-          return { value: (a = (i = h).fromAttribute) == null ? void 0 : a.call(i, s, t), attribute: !0 };
+          return { value: (a = (i = u).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
         }
       }
     })
-  ], r.prototype, "checked", 1), r = f([
-    x({
+  ], s.prototype, "checked", 1), s = m([
+    k({
       tabindex: "0"
     })
-  ], r), r;
-}, B = "litElementHydrateSupport", H = b || globalThis.testGroup === "ssr-non-hydrated", I = (n) => {
-  class r extends n {
-    constructor() {
-      super(...arguments), this._hydrationRequired = !1, this._hydrationComplete = new Promise(
-        (t) => this._resolveHydration = t
-      ), this._handleBeforeHydrationSlotchange = (t) => {
-        if (!this._hydrationRequired)
-          return;
-        t.stopImmediatePropagation();
-        const e = t.target;
-        this.hydrationComplete.then(() => S(t, e));
-      };
+  ], s), s;
+}, I = (n) => {
+  class s extends n {
+    constructor(...t) {
+      var e;
+      if (super(...t), this._hydrationComplete = new Promise(
+        (i) => this._resolveHydration = i
+      ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
+        this._resolveHydration(!1);
+      else {
+        const i = (l) => {
+          this._hydrationRequired && l.stopImmediatePropagation();
+        }, a = { capture: !0 }, d = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
+        d != null && d.length && (d.forEach(
+          (l) => l.addEventListener("slotchange", i, a)
+        ), this.hydrationComplete.then(
+          () => d.forEach((l) => {
+            l.removeEventListener("slotchange", i, a), l.assignedNodes().length && l.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+          })
+        ));
+      }
     }
     /**
      * Returns a Promise that resolves when the element has completed hydration.
@@ -270,54 +278,31 @@ const Y = (n) => {
     get hydrationComplete() {
       return this._hydrationComplete;
     }
-    createRenderRoot() {
-      var t, e;
-      if (this._hydrationRequired = !!this.shadowRoot && B in globalThis && (b || !H), !this._hydrationRequired)
-        this._resolveHydration(!1);
-      else {
-        const i = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
-        i != null && i.length && (i.forEach(
-          (a) => a.addEventListener("slotchange", this._handleBeforeHydrationSlotchange, {
-            capture: !0
-          })
-        ), this.hydrationComplete.then(
-          () => i.forEach(
-            (a) => a.removeEventListener("slotchange", this._handleBeforeHydrationSlotchange)
-          )
-        )), (e = this.recoverSsrState) == null || e.call(this);
-      }
-      return super.createRenderRoot();
-    }
-    willUpdate(t) {
-      var e;
-      super.willUpdate(t), b && ((e = this.recoverSsrState) == null || e.call(this));
+    /** Returns whether hydration is required and not completed. */
+    get hydrationRequired() {
+      return this._hydrationRequired;
     }
     update(t) {
       super.update(t), this._hydrationRequired && (this._hydrationRequired = !1, this._resolveHydration(!0));
     }
-    /** Reads and removes an attribute with the given name. Either returns the attributte value or null. */
-    getAndRemoveAttribute(t) {
-      const e = this.getAttribute(t);
-      return this.removeAttribute(t), e;
-    }
   }
-  return r;
+  return s;
 };
-var N = Object.defineProperty, V = (n, r, s, t) => {
+var N = Object.defineProperty, B = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && N(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && N(s, r, e), e;
 };
-const m = "data-ssr-child-count", _ = "li", Z = (n) => {
-  class r extends I(n) {
+const _ = "data-ssr-child-count", g = "li", W = (n) => {
+  class s extends I(n) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
         t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, i) => e.setAttribute("slot", `${_}-${i}`)
-        ), this.removeAttribute(m));
+          (e, i) => e.setAttribute("slot", `${g}-${i}`)
+        ), this.removeAttribute(_));
       };
     }
     connectedCallback() {
@@ -339,17 +324,17 @@ const m = "data-ssr-child-count", _ = "li", Z = (n) => {
      */
     renderList(t = {}) {
       const e = this.listSlotNames();
-      return e.length >= 2 ? l`
+      return e.length >= 2 ? b`
           <ul
-            class=${t.class || (this.localName ?? v(this))}
-            aria-label=${t.ariaLabel || u}
-            aria-labelledby=${t.ariaLabelledby || u}
+            class=${t.class || (this.localName ?? f(this))}
+            aria-label=${t.ariaLabel || p}
+            aria-labelledby=${t.ariaLabelledby || p}
           >
-            ${e.map((i) => l`<li><slot name=${i}></slot></li>`)}
+            ${e.map((i) => b`<li><slot name=${i}></slot></li>`)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : e.length === 1 ? l`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || (this.localName ?? v(this))}>
+        ` : e.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+          <span class=${t.class || (this.localName ?? f(this))}>
             <span><slot name=${e[0]}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
@@ -364,7 +349,7 @@ const m = "data-ssr-child-count", _ = "li", Z = (n) => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotNames() {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(m) ?? 0) })).map((e, i) => `${_}-${i}`);
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((e, i) => `${g}-${i}`);
     }
     /**
      * Returns a hidden slot, which is intended as the children change detection.
@@ -372,38 +357,38 @@ const m = "data-ssr-child-count", _ = "li", Z = (n) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return l`<span hidden><slot></slot></span>`;
+      return b`<span hidden><slot></slot></span>`;
     }
   }
-  return V([
-    g()
-  ], r.prototype, "listChildren"), r;
+  return B([
+    y()
+  ], s.prototype, "listChildren"), s;
 };
-var j = Object.defineProperty, T = (n, r, s, t) => {
+var V = Object.defineProperty, j = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && j(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && V(s, r, e), e;
 };
-const ee = (n) => {
-  class r extends n {
+const Y = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return T([
+  return j([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "negative"), r;
+  ], s.prototype, "negative"), s;
 };
-var F = Object.defineProperty, c = (n, r, s, t) => {
+var H = Object.defineProperty, h = (n, s, r, t) => {
   for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
-    (a = n[i]) && (e = a(r, s, e) || e);
-  return e && F(r, s, e), e;
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && H(s, r, e), e;
 };
-const te = (n) => {
+const Z = (n) => {
   var t;
-  const r = (t = class extends n {
+  const s = (t = class extends n {
     constructor() {
-      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new k(
+      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
         this,
         t.events.panelConnected,
         { bubbles: !0 }
@@ -415,15 +400,15 @@ const te = (n) => {
   }, t.events = {
     panelConnected: "panelConnected"
   }, t);
-  return c([
+  return h([
     o()
-  ], r.prototype, "color"), c([
+  ], s.prototype, "color"), h([
     o({ reflect: !0, type: Boolean })
-  ], r.prototype, "borderless"), c([
+  ], s.prototype, "borderless"), h([
     o()
-  ], r.prototype, "expansionState"), r;
-}, re = (n) => {
-  class r extends n {
+  ], s.prototype, "expansionState"), s;
+}, ee = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -439,18 +424,18 @@ const te = (n) => {
       return await this._updatePromise, t;
     }
   }
-  return r;
-}, se = C`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+  return s;
+}, te = x`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  y as SbbDisabledMixin,
-  W as SbbDisabledTabIndexActionMixin,
-  Y as SbbFormAssociatedCheckboxMixin,
+  C as SbbDisabledMixin,
+  J as SbbDisabledTabIndexActionMixin,
+  Q as SbbFormAssociatedCheckboxMixin,
   A as SbbFormAssociatedMixin,
   I as SbbHydrationMixin,
-  Z as SbbNamedSlotListMixin,
-  ee as SbbNegativeMixin,
-  te as SbbPanelMixin,
-  U as SbbRequiredMixin,
-  re as SbbUpdateSchedulerMixin,
-  se as panelCommonStyle
+  W as SbbNamedSlotListMixin,
+  Y as SbbNegativeMixin,
+  Z as SbbPanelMixin,
+  D as SbbRequiredMixin,
+  ee as SbbUpdateSchedulerMixin,
+  te as panelCommonStyle
 };

package/core/observers/intersection-observer.d.ts

@@ -8,7 +8,7 @@ export declare class NodeIntersectionObserver implements IntersectionObserver {
     unobserve(): void;
 }
 export declare const AgnosticIntersectionObserver: typeof NodeIntersectionObserver | {
-    new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit | undefined): IntersectionObserver;
+    new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit): IntersectionObserver;
     prototype: IntersectionObserver;
 };
 //# sourceMappingURL=intersection-observer.d.ts.map

package/core/styles/_index.scss

@@ -18,6 +18,7 @@
 @forward './mixins/pearl-chain-bullet';
 @forward './mixins/scrollbar';
 @forward './mixins/shadows';
+@forward './mixins/table';
 @forward './mixins/typo';
 
 // Internals

package/core/styles/mixins/buttons.scss

@@ -118,7 +118,7 @@
       color: var(--sbb-button-color-default-text);
       cursor: pointer;
       user-select: none;
-      display: var(--sbb-button-display);
+      display: flex;
 
       // Renders background and border in the background absolute to enable the hover animation
       &::before {

package/core/styles/mixins/table.scss

@@ -0,0 +1,148 @@
+@use './typo';
+
+/*
+ * SBB table mixin
+ * Notes:
+ * We cannot use `border-collapse` because it is not compatible with the `border-radius` property.
+ * Therefore, we have to build the grid avoiding double borders.
+ */
+@mixin table {
+  @include table--striped;
+  @include table--m;
+
+  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
+  --sbb-table-border-color: var(--sbb-color-cloud);
+  --sbb-table-border-radius: var(--sbb-border-radius-4x);
+  --sbb-table-background-color: var(--sbb-color-white);
+  --sbb-table-row-striped-color: var(--sbb-color-milk);
+  --sbb-table-color: inherit;
+  --sbb-table-caption-color: var(--sbb-color-granite);
+  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+
+  background-color: var(--sbb-table-background-color);
+  border: var(--sbb-table-border);
+  border-radius: var(--sbb-table-border-radius);
+  border-spacing: 0;
+  caption-side: bottom;
+  color: var(--sbb-table-color);
+  table-layout: auto;
+
+  thead {
+    & > tr > th {
+      @include table-header-cell;
+    }
+  }
+
+  tbody {
+    & > tr {
+      @include table-data-row;
+
+      & > td {
+        @include table-data-cell;
+      }
+    }
+  }
+
+  caption {
+    @include table-caption;
+  }
+}
+
+@mixin table-header-cell {
+  @include typo.text-xs--bold;
+
+  border-bottom: var(--sbb-table-border);
+  border-right: var(--sbb-table-border);
+  padding-block: var(--sbb-table-header-padding-block);
+  padding-inline: var(--sbb-table-header-padding-inline);
+  text-align: left;
+
+  // To avoid double border
+  &:last-of-type {
+    border-right: none;
+  }
+}
+
+@mixin table-data-row {
+  // To avoid double borders
+  &:first-of-type td {
+    border-top: none;
+  }
+}
+
+@mixin table-data-cell {
+  @include typo.text-s--regular;
+
+  border-top: var(--sbb-table-border);
+  border-right: var(--sbb-table-border);
+  padding-block: var(--sbb-table-cell-padding-block);
+  padding-inline: var(--sbb-table-cell-padding-inline);
+
+  // To avoid double border
+  &:last-of-type {
+    border-right: none;
+  }
+}
+
+@mixin table-caption {
+  @include typo.text-xs--regular;
+
+  // Defaults are needed for cases where the caption is used outside a table
+  color: var(--sbb-table-caption-color, var(--sbb-color-granite));
+  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
+  text-align: left;
+}
+
+@mixin table--striped {
+  tbody tr:nth-child(odd) {
+    @include table-row--striped;
+  }
+}
+
+@mixin table--unstriped {
+  tbody tr:nth-child(odd) {
+    background-color: unset;
+  }
+}
+
+@mixin table-row--striped {
+  background-color: var(--sbb-table-row-striped-color);
+}
+
+@mixin table--negative {
+  --sbb-table-border-color: var(--sbb-color-anthracite);
+  --sbb-table-background-color: var(--sbb-color-midnight);
+  --sbb-table-color: var(--sbb-color-white);
+  --sbb-table-row-striped-color: var(--sbb-color-charcoal);
+  --sbb-table-caption-color: var(--sbb-color-cement);
+}
+
+@mixin table--m {
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
+}
+
+@mixin table--s {
+  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
+  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
+
+  tbody > tr > td {
+    @include typo.text-xs--regular;
+  }
+}
+
+@mixin table--theme-iron {
+  --sbb-table-cell-color: var(--sbb-color-iron);
+
+  tbody > tr > td {
+    color: var(--sbb-table-cell-color);
+  }
+}
+
+@mixin table--theme-iron-negative {
+  --sbb-table-cell-color: var(--sbb-color-cloud);
+}

package/core/styles/standard-theme.scss

@@ -7,3 +7,4 @@
 @use './animation';
 @use './layout';
 @use './lists';
+@use './table';