@sbb-esta/lyne-elements 1.0.0 → 1.2.0

package/core/mixins.js

@@ -1,15 +1,15 @@
-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 _ } from "lit/decorators.js";
+import { defaultConverter as b, html as l, nothing as h, css as y } from "lit";
+import { hostAttributes as C } from "./decorators.js";
+import { preventScrollOnSpacebarPress as u, forwardEventToHost as x, EventEmitter as k } from "./eventing.js";
+import { getLocalName as p } 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--)
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, E = (n, r, s, t) => {
+  for (var e = S(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;
 };
-const y = (n) => {
+const g = (n) => {
   class r extends n {
     constructor() {
       super(...arguments), this._disabled = !1;
@@ -28,23 +28,23 @@ const y = (n) => {
       return !1;
     }
   }
-  return P([
+  return E([
     o({ reflect: !0, type: Boolean })
   ], r.prototype, "disabled"), r;
-}, W = (n) => {
-  class r extends y(n) {
+}, G = (n) => {
+  class r extends g(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;
 };
-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--)
+var P = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, d = (n, r, s, t) => {
+  for (var e = t > 1 ? void 0 : t ? $(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;
+  return t && e && P(r, s, e), e;
 };
-const A = (n) => {
+const R = (n) => {
   const s = class s extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
@@ -140,15 +140,15 @@ const A = (n) => {
   ], r.prototype, "name", 1), d([
     o()
   ], r.prototype, "value", 1), d([
-    g()
+    _()
   ], r.prototype, "formDisabled", 2), r;
 };
-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--)
+var A = Object.defineProperty, O = Object.getOwnPropertyDescriptor, q = (n, r, s, t) => {
+  for (var e = O(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;
+  return e && A(r, s, e), e;
 };
-const U = (n) => {
+const L = (n) => {
   class r extends n {
     constructor() {
       super(...arguments), this._required = !1;
@@ -170,17 +170,17 @@ const U = (n) => {
       return !1;
     }
   }
-  return L([
+  return q([
     o({ reflect: !0, type: Boolean })
   ], r.prototype, "required"), r;
 };
-var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, f = (n, r, s, t) => {
+var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, v = (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;
 };
-const Y = (n) => {
-  let r = class extends y(U(A(n))) {
+const J = (n) => {
+  let r = class extends g(L(R(n))) {
     constructor() {
       super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (s) => {
         s.key === " " && this._handleUserInteraction();
@@ -197,10 +197,10 @@ const Y = (n) => {
       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", u), 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", u), this.removeEventListener("keyup", this._handleKeyboardInteraction);
     }
     attributeChangedCallback(s, t, e) {
       (s !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(s, t, e);
@@ -229,53 +229,39 @@ const Y = (n) => {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
   };
-  return f([
+  return v([
     o({
       type: Boolean,
       converter: {
-        ...h,
+        ...b,
         // We need to pass information to the setter so that we know it was called by attribute change.
         fromAttribute: (s, t) => {
           var i, a;
-          return { value: (a = (i = h).fromAttribute) == null ? void 0 : a.call(i, s, t), attribute: !0 };
+          return { value: (a = (i = b).fromAttribute) == null ? void 0 : a.call(i, s, t), attribute: !0 };
         }
       }
     })
-  ], r.prototype, "checked", 1), r = f([
-    x({
+  ], r.prototype, "checked", 1), r = v([
+    C({
       tabindex: "0"
     })
   ], r), r;
-}, B = "litElementHydrateSupport", H = b || globalThis.testGroup === "ssr-non-hydrated", I = (n) => {
+}, U = (n) => {
   class r extends n {
-    constructor() {
-      super(...arguments), this._hydrationRequired = !1, this._hydrationComplete = new Promise(
-        (t) => this._resolveHydration = t
-      ), this._handleBeforeHydrationSlotchange = (t) => {
+    constructor(...t) {
+      var e;
+      if (super(...t), this._hydrationComplete = new Promise(
+        (i) => this._resolveHydration = i
+      ), this._handleBeforeHydrationSlotchange = (i) => {
         if (!this._hydrationRequired)
           return;
-        t.stopImmediatePropagation();
-        const e = t.target;
-        this.hydrationComplete.then(() => S(t, e));
-      };
-    }
-    /**
-     * Returns a Promise that resolves when the element has completed hydration.
-     * The Promise value is a boolean that is `true` if the element required hydration
-     * and `false` if not.
-     *
-     * @return A promise of a boolean that resolves to true once the hydration completed.
-     * @internal
-     */
-    get hydrationComplete() {
-      return this._hydrationComplete;
-    }
-    createRenderRoot() {
-      var t, e;
-      if (this._hydrationRequired = !!this.shadowRoot && B in globalThis && (b || !H), !this._hydrationRequired)
+        i.stopImmediatePropagation();
+        const a = i.target;
+        this.hydrationComplete.then(() => x(i, a));
+      }, this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const i = (t = this.shadowRoot) == null ? void 0 : t.querySelectorAll("slot");
+        const i = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
         i != null && i.length && (i.forEach(
           (a) => a.addEventListener("slotchange", this._handleBeforeHydrationSlotchange, {
             capture: !0
@@ -284,40 +270,45 @@ const Y = (n) => {
           () => 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 a Promise that resolves when the element has completed hydration.
+     * The Promise value is a boolean that is `true` if the element required hydration
+     * and `false` if not.
+     *
+     * @return A promise of a boolean that resolves to true once the hydration completed.
+     * @internal
+     */
+    get hydrationComplete() {
+      return this._hydrationComplete;
+    }
+    /** 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;
 };
-var N = Object.defineProperty, V = (n, r, s, t) => {
+var B = Object.defineProperty, I = (n, r, s, 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;
+  return e && B(r, s, e), e;
 };
-const m = "data-ssr-child-count", _ = "li", Z = (n) => {
-  class r extends I(n) {
+const f = "data-ssr-child-count", m = "li", Q = (n) => {
+  class r extends U(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", `${m}-${i}`)
+        ), this.removeAttribute(f));
       };
     }
     connectedCallback() {
@@ -341,15 +332,15 @@ const m = "data-ssr-child-count", _ = "li", Z = (n) => {
       const e = this.listSlotNames();
       return e.length >= 2 ? l`
           <ul
-            class=${t.class || (this.localName ?? v(this))}
-            aria-label=${t.ariaLabel || u}
-            aria-labelledby=${t.ariaLabelledby || u}
+            class=${t.class || (this.localName ?? p(this))}
+            aria-label=${t.ariaLabel || h}
+            aria-labelledby=${t.ariaLabelledby || h}
           >
             ${e.map((i) => l`<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))}>
+          <span class=${t.class || (this.localName ?? p(this))}>
             <span><slot name=${e[0]}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
@@ -364,7 +355,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(f) ?? 0) })).map((e, i) => `${m}-${i}`);
     }
     /**
      * Returns a hidden slot, which is intended as the children change detection.
@@ -375,31 +366,31 @@ const m = "data-ssr-child-count", _ = "li", Z = (n) => {
       return l`<span hidden><slot></slot></span>`;
     }
   }
-  return V([
-    g()
+  return I([
+    _()
   ], r.prototype, "listChildren"), r;
 };
-var j = Object.defineProperty, T = (n, r, s, t) => {
+var N = Object.defineProperty, H = (n, r, s, 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;
+  return e && N(r, s, e), e;
 };
-const ee = (n) => {
+const W = (n) => {
   class r extends n {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
-  return T([
+  return H([
     o({ reflect: !0, type: Boolean })
   ], r.prototype, "negative"), r;
 };
-var F = Object.defineProperty, c = (n, r, s, t) => {
+var V = Object.defineProperty, c = (n, r, s, 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;
+  return e && V(r, s, e), e;
 };
-const te = (n) => {
+const Y = (n) => {
   var t;
   const r = (t = class extends n {
     constructor() {
@@ -422,7 +413,7 @@ const te = (n) => {
   ], r.prototype, "borderless"), c([
     o()
   ], r.prototype, "expansionState"), r;
-}, re = (n) => {
+}, Z = (n) => {
   class r extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
@@ -440,17 +431,17 @@ const te = (n) => {
     }
   }
   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}`;
+}, ee = y`: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,
-  A as SbbFormAssociatedMixin,
-  I as SbbHydrationMixin,
-  Z as SbbNamedSlotListMixin,
-  ee as SbbNegativeMixin,
-  te as SbbPanelMixin,
-  U as SbbRequiredMixin,
-  re as SbbUpdateSchedulerMixin,
-  se as panelCommonStyle
+  g as SbbDisabledMixin,
+  G as SbbDisabledTabIndexActionMixin,
+  J as SbbFormAssociatedCheckboxMixin,
+  R as SbbFormAssociatedMixin,
+  U as SbbHydrationMixin,
+  Q as SbbNamedSlotListMixin,
+  W as SbbNegativeMixin,
+  Y as SbbPanelMixin,
+  L as SbbRequiredMixin,
+  Z as SbbUpdateSchedulerMixin,
+  ee 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';

package/core/styles/table.scss

@@ -0,0 +1,56 @@
+@use './mixins/table';
+
+.sbb-table,
+.sbb-table-m,
+.sbb-table-s {
+  @include table.table;
+}
+
+.sbb-table-m {
+  @include table.table--m;
+}
+
+.sbb-table-s {
+  @include table.table--s;
+}
+
+sbb-table-wrapper[negative] .sbb-table,
+.sbb-table--negative {
+  @include table.table--negative;
+}
+
+.sbb-table--striped {
+  @include table.table--striped;
+}
+
+.sbb-table--unstriped {
+  @include table.table--unstriped;
+}
+
+.sbb-table--theme-iron {
+  @include table.table--theme-iron;
+
+  &.sbb-table--negative {
+    @include table.table--theme-iron-negative;
+  }
+}
+
+.sbb-table-header-cell {
+  @include table.table-header-cell;
+}
+
+.sbb-table-data-row {
+  @include table.table-data-row;
+}
+
+.sbb-table-row--striped {
+  @include table.table-row--striped;
+}
+
+.sbb-table-data-cell {
+  @include table.table-data-cell;
+}
+
+.sbb-table-caption {
+  @include table.table-caption;
+}

package/core/testing/private.d.ts

@@ -5,7 +5,6 @@ export * from './private/dispatch-events.js';
 export * from './private/event-objects.js';
 export * from './private/fixture.js';
 export * from './private/load-asset-as-base64.js';
-export * from './private/platform.js';
 export * from './private/type-in-element.js';
 export * from './private/visual-regression-snapshot.js';
 //# sourceMappingURL=private.d.ts.map

package/core/testing/private.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"private.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/private.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yCAAyC,CAAC"}
+{"version":3,"file":"private.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/private.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yCAAyC,CAAC"}

package/core/testing/wait-for-render.d.ts

@@ -14,5 +14,5 @@ export declare const isReactiveElement: (element: Element) => element is Reactiv
  *
  * @param root a parent node to wait for rendering on.
  */
-export declare const waitForLitRender: (root: ParentNode) => Promise<void>;
+export declare const waitForLitRender: <T extends HTMLElement | DocumentFragment = HTMLElement | DocumentFragment>(node: T | Promise<T>) => Promise<T>;
 //# sourceMappingURL=wait-for-render.d.ts.map

package/core/testing/wait-for-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-render.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,YACnB,OAAO,gEAGjB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,SAAgB,UAAU,KAAG,QAAQ,IAAI,CAUrE,CAAC"}
+{"version":3,"file":"wait-for-render.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAC;AAE3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,YACnB,OAAO,KACf,OAAO,IAAI,eAAe,GAAG,OAAO,CAAC,qBAAqB,CAE5D,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,CAAC,SAAS,WAAW,GAAG,gBAAgB,yCAElC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,KACnB,OAAO,CAAC,CAAC,CAeX,CAAC"}