@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/stepper/stepper/stepper.js

@@ -0,0 +1,244 @@
+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)), 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, o) => (H(i, r, "write to private field"), o ? o.call(i, a) : r.set(i, a), a);
+import { __esDecorate as c, __runInitializers as d } from "tslib";
+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}`, R = 150;
+let le = (() => {
+  var b, p, u, l;
+  let i = [N("sbb-stepper")], r, a = [], o, x = G(q), f = [], v, k = [], S = [], y, I, w = [], E = [], A, F = [], L = [], O, T;
+  return l = class extends x {
+    constructor() {
+      var e, t;
+      super();
+      z(this, b);
+      z(this, p);
+      z(this, u);
+      this._observer = (d(this, f), new D(this, {
+        target: null,
+        callback: (s) => {
+          s.forEach((n) => {
+            n.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, 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", (s) => this._handleKeyDown(s)), (t = this.addEventListener) == null || t.call(this, "resizeChange", (s) => this._onSelectedStepResize(s));
+    }
+    /** If set to true, only the current and previous labels can be clicked and selected. */
+    get linear() {
+      return g(this, b);
+    }
+    set linear(e) {
+      h(this, b, e);
+    }
+    /** Overrides the behaviour of `orientation` property. */
+    set horizontalFrom(e) {
+      this._horizontalFrom = e && P.includes(e) ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+    }
+    get horizontalFrom() {
+      return this._horizontalFrom;
+    }
+    /** Steps orientation, either horizontal or vertical. */
+    get orientation() {
+      return g(this, p);
+    }
+    set orientation(e) {
+      h(this, p, e);
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return g(this, u);
+    }
+    set size(e) {
+      h(this, u, e);
+    }
+    /** The currently selected step. */
+    set selected(e) {
+      this._loaded && this._select(e);
+    }
+    get selected() {
+      var e;
+      return ((e = this.querySelector) == null ? void 0 : e.call(this, "sbb-step[data-selected]")) ?? null;
+    }
+    /** The currently selected step index. */
+    set selectedIndex(e) {
+      this._loaded && e !== null && this._select(this.steps[e]);
+    }
+    get selectedIndex() {
+      return this.selected ? this.steps.indexOf(this.selected) : null;
+    }
+    /** The steps of the stepper. */
+    get steps() {
+      var e;
+      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-step")) ?? []);
+    }
+    get _enabledSteps() {
+      return this.steps.filter((e) => {
+        var t;
+        return !((t = e.label) != null && t.hasAttribute("disabled"));
+      });
+    }
+    /** Selects the next step. */
+    next() {
+      this.selectedIndex !== null && this._select(this.steps[this.selectedIndex + 1]);
+    }
+    /** Selects the previous step. */
+    previous() {
+      this.selectedIndex !== null && this._select(this.steps[this.selectedIndex - 1]);
+    }
+    /** Resets the form in which the stepper is nested or every form of each step, if any. */
+    reset() {
+      var t, s, n;
+      const e = this.closest("form");
+      e ? e.reset() : this.querySelectorAll("form").forEach((m) => m.reset()), this.selectedIndex = 0, ((t = document.activeElement) == null ? void 0 : t.closest("sbb-stepper")) === this && ((n = (s = this.selected) == null ? void 0 : s.label) == null || n.focus());
+    }
+    _isValidStep(e) {
+      var t;
+      if (!e || !this.linear && ((t = e.label) != null && t.hasAttribute("disabled")))
+        return !1;
+      if (this.linear && !this.selected)
+        return e === this.steps[0];
+      if (this.linear && this.selectedIndex !== null) {
+        const s = this.steps.indexOf(e);
+        return s < this.selectedIndex || s === this.selectedIndex + 1;
+      }
+      return !0;
+    }
+    _select(e) {
+      var n, m, M;
+      if (!this._isValidStep(e))
+        return;
+      const t = {
+        currentIndex: this.selectedIndex,
+        currentStep: this.selected,
+        nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
+        nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
+      };
+      if (this.selected && !this.selected.validate(t))
+        return;
+      const s = this.selected;
+      s == null || s.deselect(), e.select(), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), ((n = document.activeElement) == null ? void 0 : n.closest("sbb-stepper")) === this && ((M = (m = this.selected) == null ? void 0 : m.label) == null || M.focus());
+    }
+    _setMarkerSize() {
+      if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
+        return;
+      const e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
+      this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
+    }
+    /**
+     * Sets the stepper height based on the height of the provided step.
+     */
+    _setStepperHeight(e) {
+      var t;
+      if (e && e.shadowRoot) {
+        const s = e.shadowRoot.querySelector(".sbb-step");
+        s && ((t = this.style) == null || t.setProperty("--sbb-stepper-content-height", `${s.offsetHeight}px`));
+      }
+    }
+    _calculateLabelOffsetTop() {
+      if (this.selectedIndex === null)
+        return;
+      let e = 0;
+      for (const t of this.steps) {
+        if (t === this.selected)
+          break;
+        e = t.label.offsetHeight + e;
+      }
+      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, n) => {
+        t.configure(s + 1, n.length, this._loaded);
+      }), this._select(this.selected || this._enabledSteps[0]), this._proxySize();
+    }
+    _updateLabels() {
+      this.steps.forEach((e) => {
+        var t;
+        e.slot = this.orientation === "horizontal" ? "step" : "step-label", e.setAttribute("data-orientation", this.orientation), (t = e.label) == null || t.setAttribute("data-orientation", this.orientation);
+      });
+    }
+    _checkOrientation() {
+      this.horizontalFrom && (this.orientation = W(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+    }
+    _configureLinearMode() {
+      this.steps.forEach((e, t) => {
+        var s;
+        (s = e.label) == null || s.toggleAttribute("disabled", this.linear && t > this.selectedIndex || !this.linear && e.label.hasAttribute("data-disabled"));
+      });
+    }
+    connectedCallback() {
+      super.connectedCallback(), window.addEventListener("resize", this._onStepperResize, {
+        passive: !0
+      }), this.toggleAttribute("data-disable-animation", !this._loaded);
+    }
+    disconnectedCallback() {
+      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), 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());
+    }
+    _proxySize() {
+      this.steps.forEach((e) => {
+        var t;
+        (t = e.label) == null || t.setAttribute("data-size", this.size);
+      });
+    }
+    _handleKeyDown(e) {
+      const t = this._enabledSteps;
+      if (!(!t || // don't trap nested handling
+      e.target !== this && e.target.parentElement !== this) && $(e)) {
+        const s = t.indexOf(this.selected), n = j(e, s, t.length);
+        this._select(t[n]), e.preventDefault();
+      }
+    }
+    render() {
+      return B`
+      <div class="sbb-stepper">
+        <div class="sbb-stepper__labels" role="tablist">
+          <slot name="step-label" @slotchange=${this._configure}></slot>
+        </div>
+        <div class="sbb-stepper__steps">
+          <slot name="step" @slotchange=${this._configure}></slot>
+        </div>
+      </div>
+    `;
+    }
+  }, b = new WeakMap(), p = new WeakMap(), u = new WeakMap(), o = l, (() => {
+    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;
+    } }, metadata: e }, null, f), c(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, s) => {
+      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, 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;
+    } }, metadata: e }, null, f), c(null, r = { value: o }, i, { kind: "class", name: o.name, metadata: e }, null, a), o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = J, d(o, a), o;
+})();
+export {
+  le as SbbStepperElement
+};

package/stepper/stepper.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './stepper/stepper.js';
 //# sourceMappingURL=stepper.d.ts.map

package/stepper/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/elements/stepper/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/elements/stepper/stepper.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC"}

package/stepper/stepper.js

@@ -1,241 +1,4 @@
-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);
-import { __esDecorate as c, __runInitializers as d } from "tslib";
-import { IntersectionController as R } 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;
-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 {
-    constructor() {
-      var e;
-      super();
-      x(this, b);
-      x(this, p);
-      x(this, u);
-      this._observer = (d(this, f), new R(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));
-    }
-    /** If set to true, only the current and previous labels can be clicked and selected. */
-    get linear() {
-      return g(this, b);
-    }
-    set linear(e) {
-      h(this, b, e);
-    }
-    /** Overrides the behaviour of `orientation` property. */
-    set horizontalFrom(e) {
-      this._horizontalFrom = e && P.includes(e) ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
-    }
-    get horizontalFrom() {
-      return this._horizontalFrom;
-    }
-    /** Steps orientation, either horizontal or vertical. */
-    get orientation() {
-      return g(this, p);
-    }
-    set orientation(e) {
-      h(this, p, e);
-    }
-    /**
-     * Size variant, either s or m.
-     * @default 'm' / 's' (lean)
-     */
-    get size() {
-      return g(this, u);
-    }
-    set size(e) {
-      h(this, u, e);
-    }
-    /** The currently selected step. */
-    set selected(e) {
-      this._loaded && this._select(e);
-    }
-    get selected() {
-      var e;
-      return ((e = this.querySelector) == null ? void 0 : e.call(this, "sbb-step[data-selected]")) ?? null;
-    }
-    /** The currently selected step index. */
-    set selectedIndex(e) {
-      this._loaded && e !== null && this._select(this.steps[e]);
-    }
-    get selectedIndex() {
-      return this.selected ? this.steps.indexOf(this.selected) : null;
-    }
-    /** The steps of the stepper. */
-    get steps() {
-      var e;
-      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-step")) ?? []);
-    }
-    get _enabledSteps() {
-      return this.steps.filter((e) => {
-        var t;
-        return !((t = e.label) != null && t.hasAttribute("disabled"));
-      });
-    }
-    /** Selects the next step. */
-    next() {
-      this.selectedIndex !== null && this._select(this.steps[this.selectedIndex + 1]);
-    }
-    /** Selects the previous step. */
-    previous() {
-      this.selectedIndex !== null && this._select(this.steps[this.selectedIndex - 1]);
-    }
-    /** Resets the form in which the stepper is nested or every form of each step, if any. */
-    reset() {
-      var t, s, o;
-      const e = this.closest("form");
-      e ? e.reset() : this.querySelectorAll("form").forEach((m) => m.reset()), this.selectedIndex = 0, ((t = document.activeElement) == null ? void 0 : t.closest("sbb-stepper")) === this && ((o = (s = this.selected) == null ? void 0 : s.label) == null || o.focus());
-    }
-    _isValidStep(e) {
-      var t;
-      if (!e || !this.linear && ((t = e.label) != null && t.hasAttribute("disabled")))
-        return !1;
-      if (this.linear && !this.selected)
-        return e === this.steps[0];
-      if (this.linear && this.selectedIndex !== null) {
-        const s = this.steps.indexOf(e);
-        return s < this.selectedIndex || s === this.selectedIndex + 1;
-      }
-      return !0;
-    }
-    _select(e) {
-      var o, m, M;
-      if (!this._isValidStep(e))
-        return;
-      const t = {
-        currentIndex: this.selectedIndex,
-        currentStep: this.selected,
-        nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
-        nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
-      };
-      if (this.selected && !this.selected.validate(t))
-        return;
-      const s = this.selected;
-      s == null || s.deselect(), e.select(), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), ((o = document.activeElement) == null ? void 0 : o.closest("sbb-stepper")) === this && ((M = (m = this.selected) == null ? void 0 : m.label) == null || M.focus());
-    }
-    _setMarkerSize() {
-      if (!this._loaded || !this.selected || this.selectedIndex === void 0 || !this.selected.label)
-        return;
-      const e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
-      this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
-    }
-    /**
-     * Sets the stepper height based on the height of the provided step.
-     */
-    _setStepperHeight(e) {
-      var t;
-      if (e && e.shadowRoot) {
-        const s = e.shadowRoot.querySelector(".sbb-step");
-        s && ((t = this.style) == null || t.setProperty("--sbb-stepper-content-height", `${s.offsetHeight}px`));
-      }
-    }
-    _calculateLabelOffsetTop() {
-      if (this.selectedIndex === null)
-        return;
-      let e = 0;
-      for (const t of this.steps) {
-        if (t === this.selected)
-          break;
-        e = t.label.offsetHeight + e;
-      }
-      return e + this.selected.label.offsetHeight + parseFloat(getComputedStyle(this).getPropertyValue("--sbb-spacing-fixed-6x")) * 16 * this.selectedIndex;
-    }
-    _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) => {
-        t.configure(s + 1, o.length, this._loaded);
-      }), this._select(this.selected || this._enabledSteps[0]), this._proxySize();
-    }
-    _updateLabels() {
-      this.steps.forEach((e) => {
-        var t;
-        e.slot = this.orientation === "horizontal" ? "step" : "step-label", e.setAttribute("data-orientation", this.orientation), (t = e.label) == null || t.setAttribute("data-orientation", this.orientation);
-      });
-    }
-    _checkOrientation() {
-      this.horizontalFrom && (this.orientation = W(this.horizontalFrom) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
-    }
-    _configureLinearMode() {
-      this.steps.forEach((e, t) => {
-        var s;
-        (s = e.label) == null || s.toggleAttribute("disabled", this.linear && t > this.selectedIndex || !this.linear && e.label.hasAttribute("data-disabled"));
-      });
-    }
-    connectedCallback() {
-      super.connectedCallback(), window.addEventListener("resize", this._onStepperResize, {
-        passive: !0
-      }), this.toggleAttribute("data-disable-animation", !this._loaded);
-    }
-    disconnectedCallback() {
-      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);
-    }
-    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());
-    }
-    _proxySize() {
-      this.steps.forEach((e) => {
-        var t;
-        (t = e.label) == null || t.setAttribute("data-size", this.size);
-      });
-    }
-    _handleKeyDown(e) {
-      const t = this._enabledSteps;
-      if (!(!t || // don't trap nested handling
-      e.target !== this && e.target.parentElement !== this) && $(e)) {
-        const s = t.indexOf(this.selected), o = j(e, s, t.length);
-        this._select(t[o]), e.preventDefault();
-      }
-    }
-    render() {
-      return B`
-      <div class="sbb-stepper">
-        <div class="sbb-stepper__labels" role="tablist">
-          <slot name="step-label" @slotchange=${this._configure}></slot>
-        </div>
-        <div class="sbb-stepper__steps">
-          <slot name="step" @slotchange=${this._configure}></slot>
-        </div>
-      </div>
-    `;
-    }
-  }, 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) => {
-      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;
-    } }, metadata: e }, null, f), c(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, s) => {
-      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) => {
-      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;
-    } }, metadata: e }, null, f), c(null, r = { value: n }, i, { kind: "class", name: n.name, metadata: e }, null, a), n = r.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = J, d(n, a), n;
-})();
+import { SbbStepperElement as r } from "./stepper/stepper.js";
 export {
-  le as SbbStepperElement
+  r as SbbStepperElement
 };

package/stepper.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './stepper/step.js';
 export * from './stepper/step-label.js';
 export * from './stepper/stepper.js';

package/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/elements/stepper.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/elements/stepper.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/stepper.js

@@ -1,3 +1,8 @@
-export * from "./stepper/step.js";
-export * from "./stepper/step-label.js";
-export * from "./stepper/stepper.js";
+import { SbbStepElement as b } from "./stepper/step/step.js";
+import { SbbStepLabelElement as r } from "./stepper/step-label/step-label.js";
+import { SbbStepperElement as o } from "./stepper/stepper/stepper.js";
+export {
+  b as SbbStepElement,
+  r as SbbStepLabelElement,
+  o as SbbStepperElement
+};

package/table/table-wrapper/table-wrapper.d.ts

@@ -10,7 +10,12 @@ export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base
     private _resizeObserver;
     private _tableWrapper;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
-    private _checkHorizontalScrollbar;
+    /**
+     *  Calculates whether the table is horizontally scrolled and adds the
+     *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
+     */
+    private _checkHorizontalScrollbarOffset;
+    private _calculateScrollOffset;
     protected render(): TemplateResult;
 }
 declare global {

package/table/table-wrapper/table-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E;;;OAGG;IACH,OAAO,CAAC,+BAA+B;IAWvC,OAAO,CAAC,sBAAsB;cAiBX,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/table/table-wrapper/table-wrapper.js

@@ -0,0 +1,50 @@
+import { __esDecorate as i, __runInitializers as p } from "tslib";
+import { ResizeController as n } from "@lit-labs/observers/resize-controller.js";
+import { css as h, LitElement as d, html as u } from "lit";
+import { customElement as f } from "lit/decorators.js";
+import { SbbNegativeMixin as w } from "../../core/mixins.js";
+const v = h`*,: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(:not(.sbb-table-wrapper-offset-none)) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
+let S = (() => {
+  var b;
+  let o = [f("sbb-table-wrapper")], a, e = [], t, l = w(d);
+  return b = class extends l {
+    constructor() {
+      super(...arguments), this._resizeObserver = new n(this, {
+        target: null,
+        skipInitial: !0,
+        callback: () => this._checkHorizontalScrollbarOffset()
+      });
+    }
+    firstUpdated(r) {
+      super.firstUpdated(r), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._tableWrapper.addEventListener("scroll", () => this._checkHorizontalScrollbarOffset(), {
+        passive: !0
+      }), this._resizeObserver.observe(this._tableWrapper);
+    }
+    /**
+     *  Calculates whether the table is horizontally scrolled and adds the
+     *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
+     */
+    _checkHorizontalScrollbarOffset() {
+      const r = this._calculateScrollOffset();
+      this.classList.remove("sbb-table-wrapper-offset-none", "sbb-table-wrapper-offset-left", "sbb-table-wrapper-offset-right", "sbb-table-wrapper-offset-both"), this.classList.add(`sbb-table-wrapper-offset-${r}`);
+    }
+    _calculateScrollOffset() {
+      const r = this._tableWrapper;
+      if (r.scrollWidth === r.offsetWidth)
+        return "none";
+      const c = r.scrollLeft === 0, s = r.scrollWidth - r.scrollLeft - r.offsetWidth <= 1;
+      return c ? s ? "none" : "right" : s ? "left" : "both";
+    }
+    render() {
+      return u`<div class="sbb-table-wrapper">
+      <slot></slot>
+    </div>`;
+    }
+  }, t = b, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    i(null, a = { value: t }, o, { kind: "class", name: t.name, metadata: r }, null, e), t = a.value, r && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), b.styles = v, p(t, e), t;
+})();
+export {
+  S as SbbTableWrapperElement
+};

package/table/table-wrapper.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './table-wrapper/table-wrapper.js';
 //# sourceMappingURL=table-wrapper.d.ts.map

package/table/table-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../src/elements/table/table-wrapper.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../src/elements/table/table-wrapper.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,kCAAkC,CAAC"}