@sbb-esta/lyne-elements 2.5.0 → 2.6.0

package/stepper/stepper.js

@@ -2,36 +2,36 @@ var C = (i) => {
   throw TypeError(i);
 };
 var H = (i, r, a) => r.has(i) || C("Cannot " + a);
-var g = (i, r, a) => (H(i, r, "read from private field"), a ? a.call(i) : r.get(i)), x = (i, r, a) => r.has(i) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), h = (i, r, a, n) => (H(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
+var g = (i, r, a) => (H(i, r, "read from private field"), a ? a.call(i) : r.get(i)), z = (i, r, a) => r.has(i) ? C("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(i) : r.set(i, a), h = (i, r, a, n) => (H(i, r, "write to private field"), n ? n.call(i, a) : r.set(i, a), a);
 import { __esDecorate as c, __runInitializers as d } from "tslib";
-import { IntersectionController as R } from "@lit-labs/observers/intersection-controller.js";
+import { IntersectionController as D } from "@lit-labs/observers/intersection-controller.js";
 import { css as U, LitElement as q, html as B } from "lit";
 import { customElement as N, property as _ } from "lit/decorators.js";
 import { isArrowKeyPressed as $, getNextElementIndex as j } from "../core/a11y.js";
 import { forceType as K } from "../core/decorators.js";
 import { breakpoints as P, isLean as V, isBreakpoint as W } from "../core/dom.js";
 import { SbbHydrationMixin as G } from "../core/mixins.js";
-const J = U`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, D = 150;
+const J = U`*,:before,:after{box-sizing:border-box}:host{--sbb-stepper-orientation: row;--sbb-stepper-border-width: var(--sbb-border-width-1x);--sbb-stepper-marker-size: 0;--sbb-stepper-marker-width: var(--sbb-border-width-3x);--sbb-stepper-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-6x) );--sbb-stepper-marker-color: var(--sbb-color-charcoal);display:block;position:relative;counter-reset:step-label}@media (forced-colors: active){:host{--sbb-stepper-marker-color: ButtonText}}:host([data-disable-animation]){--sbb-disable-animation-duration: 0s}:host([orientation=vertical]){--sbb-stepper-orientation: column}.sbb-stepper{width:100%}.sbb-stepper__labels{display:flex;flex-direction:var(--sbb-stepper-orientation);position:relative;justify-content:space-between;margin-block-end:var(--sbb-spacing-responsive-m)}.sbb-stepper__labels:before{content:"";position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1);background-color:var(--sbb-stepper-marker-color)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-fixed-4x);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=horizontal]) .sbb-stepper__labels:before{inset-block-end:calc(var(--sbb-stepper-border-width) * -1);height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host([orientation=vertical]) .sbb-stepper__labels{padding-inline-start:var(--sbb-spacing-fixed-4x);border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-color-cloud)}:host([orientation=vertical]) .sbb-stepper__labels:before{inset-block-start:0;width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}`, R = 150;
 let le = (() => {
   var b, p, u, l;
-  let i = [N("sbb-stepper")], r, a = [], n, v = G(q), f = [], z, k = [], S = [], y, I, w = [], E = [], A, F = [], O = [], L, T;
-  return l = class extends v {
+  let i = [N("sbb-stepper")], r, a = [], n, x = G(q), f = [], v, k = [], S = [], y, I, w = [], E = [], A, F = [], L = [], O, T;
+  return l = class extends x {
     constructor() {
       var e;
       super();
-      x(this, b);
-      x(this, p);
-      x(this, u);
-      this._observer = (d(this, f), new R(this, {
+      z(this, b);
+      z(this, p);
+      z(this, u);
+      this._observer = (d(this, f), new D(this, {
         target: null,
         callback: (t) => {
           t.forEach((s) => {
             s.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
           });
         }
-      })), h(this, b, d(this, k, !1)), this._horizontalFrom = (d(this, S), null), h(this, p, d(this, w, "horizontal")), h(this, u, (d(this, E), d(this, F, V() ? "s" : "m"))), this._loaded = (d(this, O), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
-        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), D);
-      }, (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleKeyDown(t));
+      })), h(this, b, d(this, k, !1)), this._horizontalFrom = (d(this, S), null), h(this, p, d(this, w, "horizontal")), h(this, u, (d(this, E), d(this, F, V() ? "s" : "m"))), this._loaded = (d(this, L), !1), this._resizeObserverTimeout = null, this._onStepperResize = () => {
+        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.toggleAttribute("data-disable-animation", !0), this._resizeObserverTimeout = setTimeout(() => this.toggleAttribute("data-disable-animation", !1), R);
+      }, (e = this.addEventListener) == null || e.call(this, "keydown", (t) => this._handleKeyDown(t)), this.addEventListener("resizeChange", (t) => this._onSelectedStepResize(t));
     }
     /** If set to true, only the current and previous labels can be clicked and selected. */
     get linear() {
@@ -158,6 +158,9 @@ let le = (() => {
       }
       return e + this.selected.label.offsetHeight + parseFloat(getComputedStyle(this).getPropertyValue("--sbb-spacing-fixed-6x")) * 16 * this.selectedIndex;
     }
+    _onSelectedStepResize(e) {
+      this._setStepperHeight(e.target);
+    }
     _configure() {
       const e = this.steps;
       e.forEach((t) => t.configure(this._loaded)), e.filter((t) => t.label).map((t) => t.label).forEach((t, s, o) => {
@@ -188,7 +191,7 @@ let le = (() => {
       super.disconnectedCallback(), window.removeEventListener("resize", this._onStepperResize);
     }
     async firstUpdated(e) {
-      super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), D);
+      super.firstUpdated(e), await this.updateComplete, this._loaded = !0, this.selectedIndex = this.linear ? 0 : Number(this.getAttribute("selected-index")) || 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.toggleAttribute("data-disable-animation", !1), R);
     }
     willUpdate(e) {
       super.willUpdate(e), e.has("orientation") && !this.horizontalFrom && (this._updateLabels(), this._setMarkerSize()), e.has("linear") && this._loaded && this._configureLinearMode(), e.has("size") && (this._proxySize(), this._setMarkerSize());
@@ -220,8 +223,8 @@ let le = (() => {
     `;
     }
   }, b = new WeakMap(), p = new WeakMap(), u = new WeakMap(), n = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
-    z = [K(), _({ type: Boolean })], y = [_({ attribute: "horizontal-from", reflect: !0 })], I = [_({ reflect: !0 })], A = [_({ reflect: !0 })], L = [_({ attribute: !1 })], T = [_({ attribute: "selected-index", type: Number })], c(l, null, z, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, s) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+    v = [K(), _({ type: Boolean })], y = [_({ attribute: "horizontal-from", reflect: !0 })], I = [_({ reflect: !0 })], A = [_({ reflect: !0 })], O = [_({ attribute: !1 })], T = [_({ attribute: "selected-index", type: Number })], c(l, null, v, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, s) => {
       t.linear = s;
     } }, metadata: e }, k, S), c(l, null, y, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, s) => {
       t.horizontalFrom = s;
@@ -229,7 +232,7 @@ let le = (() => {
       t.orientation = s;
     } }, metadata: e }, w, E), c(l, null, A, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
       t.size = s;
-    } }, metadata: e }, F, O), c(l, null, L, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, s) => {
+    } }, metadata: e }, F, L), c(l, null, O, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, s) => {
       t.selected = s;
     } }, metadata: e }, null, f), c(l, null, T, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, s) => {
       t.selectedIndex = s;

package/table/table-wrapper.js

@@ -1,12 +1,12 @@
 import { __esDecorate as s, __runInitializers as c } from "tslib";
 import { ResizeController as i } from "@lit-labs/observers/resize-controller.js";
-import { css as p, LitElement as d, html as h } from "lit";
+import { css as p, LitElement as h, html as d } from "lit";
 import { customElement as n } from "lit/decorators.js";
 import { SbbNegativeMixin as u } from "../core/mixins.js";
-const w = p`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
+const w = p`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{height:100%;overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
 let _ = (() => {
   var b;
-  let e = [n("sbb-table-wrapper")], l, t = [], r, o = u(d);
+  let e = [n("sbb-table-wrapper")], l, t = [], r, o = u(h);
   return b = class extends o {
     constructor() {
       super(...arguments), this._resizeObserver = new i(this, {
@@ -22,7 +22,7 @@ let _ = (() => {
       this.toggleAttribute("data-has-horizontal-scrollbar", this._tableWrapper.scrollWidth > this._tableWrapper.offsetWidth);
     }
     render() {
-      return h`<div class="sbb-table-wrapper">
+      return d`<div class="sbb-table-wrapper">
       <slot></slot>
     </div>`;
     }

package/table.css

@@ -7,10 +7,10 @@
   --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
   --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
 }
-.sbb-table tbody tr:nth-child(odd),
-.sbb-table-m tbody tr:nth-child(odd),
-.sbb-table-s tbody tr:nth-child(odd),
-.sbb-table-xs tbody tr:nth-child(odd) {
+.sbb-table tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
+.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
   background-color: var(--sbb-table-row-striped-color);
 }
 .sbb-table,
@@ -25,14 +25,35 @@
   --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;
 }
+.sbb-table thead > tr:last-of-type > th,
+.sbb-table-m thead > tr:last-of-type > th,
+.sbb-table-s thead > tr:last-of-type > th,
+.sbb-table-xs thead > tr:last-of-type > th {
+  border-bottom: var(--sbb-table-border);
+}
+.sbb-table thead > tr:first-of-type > th,
+.sbb-table-m thead > tr:first-of-type > th,
+.sbb-table-s thead > tr:first-of-type > th,
+.sbb-table-xs thead > tr:first-of-type > th {
+  border-block-start: var(--sbb-table-border);
+}
+.sbb-table thead > tr:first-of-type > th:first-of-type,
+.sbb-table-m thead > tr:first-of-type > th:first-of-type,
+.sbb-table-s thead > tr:first-of-type > th:first-of-type,
+.sbb-table-xs thead > tr:first-of-type > th:first-of-type {
+  border-start-start-radius: var(--sbb-table-border-radius);
+}
+.sbb-table thead > tr:first-of-type > th:last-of-type,
+.sbb-table-m thead > tr:first-of-type > th:last-of-type,
+.sbb-table-s thead > tr:first-of-type > th:last-of-type,
+.sbb-table-xs thead > tr:first-of-type > th:last-of-type {
+  border-start-end-radius: var(--sbb-table-border-radius);
+}
 .sbb-table thead > tr > th,
 .sbb-table-m thead > tr > th,
 .sbb-table-s thead > tr > th,
@@ -44,23 +65,17 @@
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
-  border-bottom: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
   text-align: left;
 }
-.sbb-table thead > tr > th:last-of-type,
-.sbb-table-m thead > tr > th:last-of-type,
-.sbb-table-s thead > tr > th:last-of-type,
-.sbb-table-xs thead > tr > th:last-of-type {
-  border-right: none;
-}
-.sbb-table tbody > tr:first-of-type td,
-.sbb-table-m tbody > tr:first-of-type td,
-.sbb-table-s tbody > tr:first-of-type td,
-.sbb-table-xs tbody > tr:first-of-type td {
-  border-top: none;
+.sbb-table thead > tr > th:first-of-type,
+.sbb-table-m thead > tr > th:first-of-type,
+.sbb-table-s thead > tr > th:first-of-type,
+.sbb-table-xs thead > tr > th:first-of-type {
+  border-inline-start: var(--sbb-table-border);
 }
 .sbb-table tbody > tr > td,
 .sbb-table-m tbody > tr > td,
@@ -72,16 +87,29 @@
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
-  border-top: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.sbb-table tbody > tr > td:last-of-type,
-.sbb-table-m tbody > tr > td:last-of-type,
-.sbb-table-s tbody > tr > td:last-of-type,
-.sbb-table-xs tbody > tr > td:last-of-type {
-  border-right: none;
+.sbb-table tbody > tr > td:first-of-type,
+.sbb-table-m tbody > tr > td:first-of-type,
+.sbb-table-s tbody > tr > td:first-of-type,
+.sbb-table-xs tbody > tr > td:first-of-type {
+  border-inline-start: var(--sbb-table-border);
+}
+.sbb-table tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-m tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-s tbody > tr:last-of-type > td:first-of-type,
+.sbb-table-xs tbody > tr:last-of-type > td:first-of-type {
+  border-end-start-radius: var(--sbb-table-border-radius);
+}
+.sbb-table tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-m tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-s tbody > tr:last-of-type > td:last-of-type,
+.sbb-table-xs tbody > tr:last-of-type > td:last-of-type {
+  border-end-end-radius: var(--sbb-table-border-radius);
 }
 .sbb-table caption,
 .sbb-table-m caption,
@@ -144,12 +172,12 @@ sbb-table-wrapper[negative] .sbb-table,
   --sbb-table-caption-color: var(--sbb-color-cement);
 }
 
-.sbb-table--striped tbody tr:nth-child(odd) {
+.sbb-table--striped tbody tr:nth-child(odd) :is(th, td) {
   background-color: var(--sbb-table-row-striped-color);
 }
 
-.sbb-table--unstriped tbody tr:nth-child(odd) {
-  background-color: unset;
+.sbb-table--unstriped tbody tr:nth-child(odd) :is(th, td) {
+  background-color: var(--sbb-table-background-color);
 }
 
 .sbb-table--theme-iron {
@@ -162,6 +190,10 @@ sbb-table-wrapper[negative] .sbb-table,
   --sbb-table-cell-color: var(--sbb-color-cloud);
 }
 
+.sbb-table-header-row:last-of-type > th {
+  border-bottom: var(--sbb-table-border);
+}
+
 .sbb-table-header-cell {
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
   font-family: var(--sbb-typo-font-family);
@@ -170,19 +202,12 @@ sbb-table-wrapper[negative] .sbb-table,
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
   font-weight: bold;
-  border-bottom: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-header-padding-block);
   padding-inline: var(--sbb-table-header-padding-inline);
   text-align: left;
 }
-.sbb-table-header-cell:last-of-type {
-  border-right: none;
-}
-
-.sbb-table-data-row:first-of-type td {
-  border-top: none;
-}
 
 .sbb-table-row--striped {
   background-color: var(--sbb-table-row-striped-color);
@@ -195,14 +220,12 @@ sbb-table-wrapper[negative] .sbb-table,
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
   font-size: var(--sbb-text-font-size);
-  border-top: var(--sbb-table-border);
-  border-right: var(--sbb-table-border);
+  background-color: var(--sbb-table-background-color);
+  border-block-end: var(--sbb-table-border);
+  border-inline-end: var(--sbb-table-border);
   padding-block: var(--sbb-table-cell-padding-block);
   padding-inline: var(--sbb-table-cell-padding-inline);
 }
-.sbb-table-data-cell:last-of-type {
-  border-right: none;
-}
 
 .sbb-table-caption {
   --sbb-text-font-size: var(--sbb-font-size-text-xs);
@@ -216,6 +239,14 @@ sbb-table-wrapper[negative] .sbb-table,
   text-align: left;
 }
 
+.sbb-table-filter {
+  padding-block-start: 0 !important;
+}
+
+.sbb-table-sticky {
+  position: sticky !important;
+}
+
 html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
   --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);

package/time-input/time-input.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { CSSResultGroup, LitElement, PropertyDeclaration, TemplateResult } from 'lit';
 import { SbbDateLike } from '../core/interfaces.js';
 /**
  * * Combined with a native input, it displays the input's value as a formatted time.
@@ -13,9 +13,7 @@ export declare class SbbTimeInputElement extends LitElement {
         readonly validationChange: "validationChange";
     };
     /** Reference of the native input connected to the datepicker. */
-    set input(value: string | HTMLElement | null);
-    get input(): string | HTMLElement | null;
-    private _input;
+    accessor input: string | HTMLElement | null;
     private accessor _inputElement;
     /** Formats the current input's value as date. */
     set valueAsDate(date: SbbDateLike | null);
@@ -27,13 +25,13 @@ export declare class SbbTimeInputElement extends LitElement {
     /** Emits whenever the internal validation state changes. */
     private _validationChange;
     private _statusContainer;
-    private _abortController;
+    private _inputAbortController;
+    private _inputIdReferenceController;
     private _language;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    firstUpdated(_changedProperties: PropertyValues): void;
-    private _setupInputElement;
-    private _registerInputElement;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration): void;
+    private _configureInputElement;
     /**
      * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
      * to force the input change when the typed value is the same of the current one.

package/time-input/time-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAanF;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAEX,iEAAiE;IACjE,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,EAGlD;IACD,IAAW,KAAK,IAAI,MAAM,GAAG,WAAW,GAAG,IAAI,CAE9C;IACD,OAAO,CAAC,MAAM,CAAqC;IAE1C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAExE,iDAAiD;IACjD,IACW,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAc9C;IACD,IAAW,WAAW,IAAI,IAAI,GAAG,IAAI,CAEpC;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,4DAA4D;IAC5D,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,gBAAgB,CAAyB;IACjD,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAK5B,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAMtE,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,qBAAqB;IA8C7B;;;OAGG;IACH,OAAO,CAAC,YAAY;IA4BpB,8BAA8B;IAC9B,OAAO,CAAC,WAAW;IAKnB,yDAAyD;IACzD,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAoBnB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,2BAA2B;cAWhB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
+{"version":3,"file":"time-input.d.ts","sourceRoot":"","sources":["../../../src/elements/time-input/time-input.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAGnB,UAAU,EACV,KAAK,mBAAmB,EACxB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAC;AAanF;;;;;GAKG;AACH,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;MAGlB;IAGX,iEAAiE;IACjE,SACgB,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAQ;IAEjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiC;IAExE,iDAAiD;IACjD,IACW,WAAW,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAc9C;IACD,IAAW,WAAW,IAAI,IAAI,GAAG,IAAI,CAEpC;IAED;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,4DAA4D;IAC5D,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAO,CAAC,gBAAgB,CAAwB;IAChD,OAAO,CAAC,qBAAqB,CAAyB;IACtD,OAAO,CAAC,2BAA2B,CAA+C;IAClF,OAAO,CAAC,SAAS,CAAmC;IAEpC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,aAAa,CAC3B,IAAI,CAAC,EAAE,WAAW,EAClB,QAAQ,CAAC,EAAE,OAAO,EAClB,OAAO,CAAC,EAAE,mBAAmB,GAC5B,IAAI;IAQP,OAAO,CAAC,sBAAsB;IA4D9B;;;OAGG;IACH,OAAO,CAAC,YAAY;IA4BpB,8BAA8B;IAC9B,OAAO,CAAC,WAAW;IAKnB,yDAAyD;IACzD,OAAO,CAAC,YAAY;IAMpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAQ1B,uFAAuF;IACvF,OAAO,CAAC,YAAY;IAIpB,kDAAkD;IAClD,OAAO,CAAC,WAAW;IAoBnB,qDAAqD;IACrD,OAAO,CAAC,kBAAkB;IA6B1B,OAAO,CAAC,2BAA2B;cAWhB,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/time-input.js

@@ -1,44 +1,45 @@
-var v = (n) => {
+var T = (n) => {
   throw TypeError(n);
 };
-var w = (n, s, a) => s.has(n) || v("Cannot " + a);
-var I = (n, s, a) => (w(n, s, "read from private field"), a ? a.call(n) : s.get(n)), A = (n, s, a) => s.has(n) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, l) => (w(n, s, "write to private field"), l ? l.call(n, a) : s.set(n, a), a);
-import { __runInitializers as h, __esDecorate as m } from "tslib";
-import { css as S, LitElement as O, html as k } from "lit";
-import { customElement as L, property as y, state as x } from "lit/decorators.js";
-import { ref as H } from "lit/directives/ref.js";
-import { SbbLanguageController as R } from "./core/controllers.js";
-import { findInput as M } from "./core/dom.js";
-import { EventEmitter as D, forwardEvent as V } from "./core/eventing.js";
-import { i18nTimeInputChange as U } from "./core/i18n.js";
-const $ = S`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, P = /[0-9.:,\-;_hH]/, z = /^([0-9]{1,2})([0-9]{2})$/, G = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
-let Z = (() => {
-  var o, r;
-  let n = [L("sbb-time-input")], s, a = [], l, d = O, _ = [], E, b, g = [], f = [], C;
-  var p = (r = class extends d {
+var V = (n, s, a) => s.has(n) || T("Cannot " + a);
+var E = (n, s, a) => (V(n, s, "read from private field"), a ? a.call(n) : s.get(n)), g = (n, s, a) => s.has(n) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(n) : s.set(n, a), c = (n, s, a, u) => (V(n, s, "write to private field"), u ? u.call(n, a) : s.set(n, a), a);
+import { __runInitializers as m, __esDecorate as b } from "tslib";
+import { css as x, LitElement as H, isServer as R, html as M } from "lit";
+import { customElement as U, property as L, state as z } from "lit/decorators.js";
+import { ref as $ } from "lit/directives/ref.js";
+import { SbbIdReferenceController as P, SbbLanguageController as G } from "./core/controllers.js";
+import { EventEmitter as O, forwardEvent as k } from "./core/eventing.js";
+import { i18nTimeInputChange as j } from "./core/i18n.js";
+const q = x`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;display:block}`, K = /[0-9.:,\-;_hH]/, W = /^([0-9]{1,2})([0-9]{2})$/, X = /^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;
+let it = (() => {
+  var p, h, r;
+  let n = [U("sbb-time-input")], s, a = [], u, f = H, C = [], v, A = [], w = [], y, I = [], D = [], S;
+  var _ = (r = class extends f {
     constructor() {
       super(...arguments);
-      A(this, o);
-      this._input = (h(this, _), null), c(this, o, h(this, g, null)), this._didChange = (h(this, f), new D(this, p.events.didChange, {
+      g(this, p);
+      g(this, h);
+      c(this, p, (m(this, C), m(this, A, null))), c(this, h, (m(this, w), m(this, I, null))), this._didChange = (m(this, D), new O(this, _.events.didChange, {
         bubbles: !0,
         cancelable: !0
-      })), this._validationChange = new D(this, p.events.validationChange, {
+      })), this._validationChange = new O(this, _.events.validationChange, {
         bubbles: !0,
         composed: !1
-      }), this._abortController = new AbortController(), this._language = new R(this);
+      }), this._inputAbortController = new AbortController(), this._inputIdReferenceController = new P(this, "input"), this._language = new G(this);
     }
+    // TODO: Replace HTMLElement by HTMLInputElement
     /** Reference of the native input connected to the datepicker. */
-    set input(t) {
-      this._input = t, this._setupInputElement();
-    }
     get input() {
-      return this._input;
+      return E(this, p);
+    }
+    set input(t) {
+      c(this, p, t);
     }
     get _inputElement() {
-      return I(this, o);
+      return E(this, h);
     }
     set _inputElement(t) {
-      c(this, o, t);
+      c(this, h, t);
     }
     /** Formats the current input's value as date. */
     set valueAsDate(t) {
@@ -55,36 +56,28 @@ let Z = (() => {
       return this._formatValueAsDate(this._parseInput((t = this._inputElement) == null ? void 0 : t.value)) ?? null;
     }
     connectedCallback() {
-      super.connectedCallback(), this._setupInputElement();
+      super.connectedCallback(), this._configureInputElement();
     }
     disconnectedCallback() {
       var t;
-      super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._setupInputElement();
-    }
-    _setupInputElement() {
-      var i;
-      const t = M(this, this.input);
-      if (!t) {
-        (i = this._abortController) == null || i.abort();
-        return;
-      }
-      this._inputElement !== t && (this._inputElement = t, this._registerInputElement(), this._updateValue(this._inputElement.value));
-    }
-    _registerInputElement() {
-      var t;
-      (t = this._abortController) == null || t.abort(), this._inputElement && (this._abortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (e) => V(e, this), {
-        signal: this._abortController.signal
-      }), this._inputElement.addEventListener("keydown", (e) => this._preventCharInsert(e), { signal: this._abortController.signal }), this._inputElement.addEventListener("change", (e) => this._updateValue(e.target.value), {
-        signal: this._abortController.signal,
+      super.disconnectedCallback(), (t = this._inputAbortController) == null || t.abort(), this._inputElement = null;
+    }
+    requestUpdate(t, e, i) {
+      super.requestUpdate(t, e, i), !R && (!t || t === "input") && this.hasUpdated && this._configureInputElement();
+    }
+    _configureInputElement() {
+      var e, i, l, d;
+      const t = this.input instanceof HTMLInputElement ? this.input : this._inputIdReferenceController.find() ?? ((i = (e = this.closest) == null ? void 0 : e.call(this, "sbb-form-field")) == null ? void 0 : i.querySelector("input")) ?? null;
+      t !== this._inputElement && ((l = this._inputAbortController) == null || l.abort(), (d = this._inputElement) == null || d.removeAttribute("data-sbb-time-input"), this._inputElement = t, this._inputElement && (this._updateValue(this._inputElement.value), this._inputAbortController = new AbortController(), this._inputElement.toggleAttribute("data-sbb-time-input", !0), this._inputElement.type = "text", this._inputElement.inputMode = "numeric", this._inputElement.maxLength = 5, this._inputElement.placeholder || (this._inputElement.placeholder = "HH:MM"), this._inputElement.addEventListener("input", (o) => k(o, this), {
+        signal: this._inputAbortController.signal
+      }), this._inputElement.addEventListener("keydown", (o) => this._preventCharInsert(o), { signal: this._inputAbortController.signal }), this._inputElement.addEventListener("change", (o) => this._updateValue(o.target.value), {
+        signal: this._inputAbortController.signal,
         capture: !0
-      }), this._inputElement.addEventListener("change", (e) => {
-        this._emitChange(e), this._updateAccessibilityMessage();
+      }), this._inputElement.addEventListener("change", (o) => {
+        this._emitChange(o), this._updateAccessibilityMessage();
       }, {
-        signal: this._abortController.signal
-      }));
+        signal: this._inputAbortController.signal
+      })));
     }
     /**
      * Updates `value` and `valueAsDate`. The direct update on the `_inputElement` is required
@@ -93,14 +86,14 @@ let Z = (() => {
     _updateValue(t) {
       if (this._statusContainer && (this._statusContainer.innerText = ""), !this._inputElement)
         return;
-      const e = this._parseInput(t), i = !!e && this._isTimeValid(e), u = !t || t.trim() === "" || i;
-      u && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
-      const T = !this._inputElement.hasAttribute("data-sbb-invalid");
-      this._inputElement.toggleAttribute("data-sbb-invalid", !u), T !== u && this._validationChange.emit({ valid: u });
+      const e = this._parseInput(t), i = !!e && this._isTimeValid(e), l = !t || t.trim() === "" || i;
+      l && e && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this._inputElement, this._formatValue(e)), this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })));
+      const d = !this._inputElement.hasAttribute("data-sbb-invalid");
+      this._inputElement.toggleAttribute("data-sbb-invalid", !l), d !== l && this._validationChange.emit({ valid: l });
     }
     /** Emits the change event. */
     _emitChange(t) {
-      V(t, this), this._didChange.emit();
+      k(t, this), this._didChange.emit();
     }
     /** Returns the right format for the `value` property. */
     _formatValue(t) {
@@ -123,11 +116,11 @@ let Z = (() => {
       const e = t == null ? void 0 : t.trim();
       if (!e)
         return null;
-      const i = e.match(z);
+      const i = e.match(W);
       if (i)
         return { hours: +i[1] || 0, minutes: +i[2] || 0 };
-      const u = e.match(G);
-      return u ? { hours: +u[1] || 0, minutes: +u[2] || 0 } : null;
+      const l = e.match(X);
+      return l ? { hours: +l[1] || 0, minutes: +l[2] || 0 } : null;
     }
     /**  Only allow typing numbers and separator keys. */
     _preventCharInsert(t) {
@@ -145,37 +138,37 @@ let Z = (() => {
         "PageDown",
         "Delete"
       ];
-      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !P.test(t.key) && t.preventDefault();
+      !t.ctrlKey && !t.altKey && !t.metaKey && !e.includes(t.key) && !K.test(t.key) && t.preventDefault();
     }
     // We use a programmatic approach to avoid initial setting the message
     // and to not immediately change output if language should change (no reason to read out message).
     _updateAccessibilityMessage() {
       var e;
-      this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${U[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
+      this._inputElement.hasAttribute("data-sbb-invalid") || (this._statusContainer.innerText = `${j[this._language.current]} ${(e = this._inputElement) == null ? void 0 : e.value}.`);
     }
     render() {
-      return k`
+      return M`
       <p
         role="status"
-        ${H((t) => this._statusContainer = t)}
+        ${$((t) => this._statusContainer = t)}
       ></p>
     `;
     }
-  }, o = new WeakMap(), l = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
-    E = [y()], b = [x()], C = [y({ attribute: !1 })], m(r, null, E, { kind: "setter", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, set: (e, i) => {
+  }, p = new WeakMap(), h = new WeakMap(), u = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    v = [L()], y = [z()], S = [L({ attribute: !1 })], b(r, null, v, { kind: "accessor", name: "input", static: !1, private: !1, access: { has: (e) => "input" in e, get: (e) => e.input, set: (e, i) => {
       e.input = i;
-    } }, metadata: t }, null, _), m(r, null, b, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
+    } }, metadata: t }, A, w), b(r, null, y, { kind: "accessor", name: "_inputElement", static: !1, private: !1, access: { has: (e) => "_inputElement" in e, get: (e) => e._inputElement, set: (e, i) => {
       e._inputElement = i;
-    } }, metadata: t }, g, f), m(r, null, C, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
+    } }, metadata: t }, I, D), b(r, null, S, { kind: "setter", name: "valueAsDate", static: !1, private: !1, access: { has: (e) => "valueAsDate" in e, set: (e, i) => {
       e.valueAsDate = i;
-    } }, metadata: t }, null, _), m(null, s = { value: l }, n, { kind: "class", name: l.name, metadata: t }, null, a), p = l = s.value, t && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = $, r.events = {
+    } }, metadata: t }, null, C), b(null, s = { value: u }, n, { kind: "class", name: u.name, metadata: t }, null, a), _ = u = s.value, t && Object.defineProperty(u, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = q, r.events = {
     didChange: "didChange",
     validationChange: "validationChange"
-  }, h(l, a), r);
-  return p = l;
+  }, m(u, a), r);
+  return _ = u;
 })();
 export {
-  Z as SbbTimeInputElement
+  it as SbbTimeInputElement
 };