@sbb-esta/lyne-elements 2.6.0 → 2.7.0

package/stepper/stepper.js

@@ -1,244 +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)), 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 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 = [], 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();
-      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, 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() {
-      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;
-    }
-    _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) => {
-        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), 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), 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(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: 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"}

package/table/table-wrapper.js

@@ -1,36 +1,4 @@
-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 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{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(h);
-  return b = class extends o {
-    constructor() {
-      super(...arguments), this._resizeObserver = new i(this, {
-        target: null,
-        skipInitial: !0,
-        callback: () => this._checkHorizontalScrollbar()
-      });
-    }
-    firstUpdated(a) {
-      super.firstUpdated(a), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._resizeObserver.observe(this._tableWrapper);
-    }
-    _checkHorizontalScrollbar() {
-      this.toggleAttribute("data-has-horizontal-scrollbar", this._tableWrapper.scrollWidth > this._tableWrapper.offsetWidth);
-    }
-    render() {
-      return d`<div class="sbb-table-wrapper">
-      <slot></slot>
-    </div>`;
-    }
-  }, r = b, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    s(null, l = { value: r }, e, { kind: "class", name: r.name, metadata: a }, null, t), r = l.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
-  })(), b.styles = w, c(r, t), r;
-})();
+import { SbbTableWrapperElement as b } from "./table-wrapper/table-wrapper.js";
 export {
-  _ as SbbTableWrapperElement
+  b as SbbTableWrapperElement
 };

package/table.css

@@ -25,6 +25,9 @@
   --sbb-table-color: inherit;
   --sbb-table-caption-color: var(--sbb-color-granite);
   --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
+  --sbb-table-sticky-shadow-width: 3rem;
+  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
+  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
   border-spacing: 0;
   caption-side: bottom;
   color: var(--sbb-table-color);
@@ -247,6 +250,40 @@ sbb-table-wrapper[negative] .sbb-table,
   position: sticky !important;
 }
 
+:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
+  content: "";
+  transition-timing-function: var(--sbb-table-sticky-shadow-transition-easing);
+  transition-duration: var(--sbb-table-sticky-shadow-transition-duration);
+  transition-property: visibility, opacity;
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  width: var(--sbb-table-sticky-shadow-width);
+  inset: 0;
+}
+
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left {
+  border-inline-end: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-left::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(-270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: unset;
+  inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+}
+
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right {
+  border-inline-start: var(--sbb-table-border);
+}
+:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) .sbb-table-sticky-border-elem-right::after {
+  visibility: visible;
+  opacity: 1;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
+  inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
+  inset-inline-end: unset;
+}
+
 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/table.d.ts

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

package/table.d.ts.map

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

package/table.js

@@ -1 +1,4 @@
-export * from "./table/table-wrapper.js";
+import { SbbTableWrapperElement as b } from "./table/table-wrapper/table-wrapper.js";
+export {
+  b as SbbTableWrapperElement
+};

package/tabs/tab/tab.js

@@ -0,0 +1,40 @@
+import { __esDecorate as o, __runInitializers as b } from "tslib";
+import { css as n, LitElement as c, html as m } from "lit";
+import { customElement as u } from "lit/decorators.js";
+const d = n`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:block}:host:after,:host:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}`;
+let p = (() => {
+  var l;
+  let r = [u("sbb-tab")], a, s = [], t, i = c;
+  return l = class extends i {
+    constructor() {
+      super(...arguments), this._label = null;
+    }
+    /** The `sbb-tab-label` associated with the tab. */
+    get label() {
+      return this._label;
+    }
+    _getTabLabel() {
+      let e = this.previousElementSibling;
+      for (; e && e.localName !== "sbb-tab-label"; )
+        e = e.previousElementSibling;
+      return e;
+    }
+    /** @internal */
+    configure() {
+      this._label = this._getTabLabel();
+    }
+    render() {
+      return m`
+      <div class="sbb-tab">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }, t = l, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    o(null, a = { value: t }, r, { kind: "class", name: t.name, metadata: e }, null, s), t = a.value, e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = d, b(t, s), t;
+})();
+export {
+  p as SbbTabElement
+};