@sbb-esta/lyne-elements-dev 4.7.0-dev.1773388991 → 4.7.0-dev.1773393164

package/stepper/step/step.component.js

@@ -1,2 +1,111 @@
-import { t as e } from "../../step.component-BIOQdZVR.js";
-export { e as SbbStepElement };
+import { ResizeController as n } from "@lit-labs/observers/resize-controller.js";
+import { css as r, html as o } from "lit";
+import { SbbElement as b } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as l } from "../../core/controllers.js";
+import { removeAriaElements as p, appendAriaElements as h } from "../../core/mixins.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+const c = r`:host{--sbb-step-position: initial;--sbb-step-inset-block-start: unset;--sbb-step-opacity: 0;--sbb-step-display: none;--sbb-step-height: 0;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-animation-delay: 0;display:contents}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity: 1;--sbb-step-display: block;--sbb-step-height: fit-content;--sbb-step-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-step-animation-delay: var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position: absolute;--sbb-step-inset-block-start: 0}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{margin-inline-start:var(--sbb-spacing-fixed-4x);opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])) .sbb-step--wrapper{opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing),height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing),opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}.sbb-step{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:var(--sbb-step-position);width:100%;inset-block-start:var(--sbb-step-inset-block-start);opacity:var(--sbb-step-opacity);display:var(--sbb-step-display);height:var(--sbb-step-height);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete}@starting-style{.sbb-step{--sbb-step-opacity: 0}}`;
+let v = 0;
+const e = class e extends b {
+  /** The label of the step. */
+  get label() {
+    return this._label;
+  }
+  get stepper() {
+    return this.closest("sbb-stepper");
+  }
+  constructor() {
+    super(), this._stepResizeObserver = new n(this, {
+      target: null,
+      skipInitial: !0,
+      callback: () => setTimeout(() => this._onStepElementResize())
+    }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t)), this.addController(new l(this, () => this.stepper, {
+      orientation: (t) => {
+        this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+      }
+    }));
+  }
+  /**
+   * Selects and configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  select() {
+    !this.hasUpdated || !this.label || (this.internals.states.add("selected"), this.label.select());
+  }
+  /**
+   * Deselects and configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  deselect() {
+    this.label && (this.internals.states.delete("selected"), this.label.deselect());
+  }
+  /**
+   * Emits a validate event whenever step switch is triggered.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  validate(t) {
+    return this.dispatchEvent(new CustomEvent("validate", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0,
+      detail: t
+    }));
+  }
+  /**
+   * Configures the step.
+   * @internal
+   * TODO: @breaking-change: make protected
+   */
+  configure(t) {
+    t && this._assignLabel();
+  }
+  /** Watches for clicked elements with `sbb-stepper-next` or `sbb-stepper-previous` attributes. */
+  _handleClick(t) {
+    const s = t.composedPath().filter((i) => i instanceof window.HTMLElement);
+    s.some((i) => this._isGoNextElement(i)) ? this.stepper?.next() : s.some((i) => this._isGoPreviousElement(i)) && this.stepper?.previous();
+  }
+  _isGoNextElement(t) {
+    return t.hasAttribute("sbb-stepper-next") && !t.hasAttribute("disabled");
+  }
+  _isGoPreviousElement(t) {
+    return t.hasAttribute("sbb-stepper-previous") && !t.hasAttribute("disabled");
+  }
+  _onStepElementResize() {
+    this.matches(":is(:state(selected),[state--selected])") && this.dispatchEvent(new Event("resizechange", { bubbles: !0 }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-step-${v++}`, this.slot ||= "step", this._assignLabel();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.updateComplete.then(() => {
+      this._stepResizeObserver.observe(this.shadowRoot.querySelector(".sbb-step"));
+    });
+  }
+  _assignLabel() {
+    let t = this.previousElementSibling;
+    for (; t && t.localName !== "sbb-step-label"; )
+      t = t.previousElementSibling;
+    const s = t;
+    this.internals.ariaLabelledByElements = p(this.internals.ariaLabelledByElements, this._label), this._label = s instanceof Element ? s : null, this.internals.ariaLabelledByElements = h(this.internals.ariaLabelledByElements, this._label);
+  }
+  render() {
+    return o`
+      <div class="sbb-step--wrapper">
+        <div class="sbb-step">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+e.elementName = "sbb-step", e.role = "tabpanel", e.styles = [d, c], e.events = {
+  validate: "validate",
+  resizechange: "resizechange"
+};
+let a = e;
+export {
+  a as SbbStepElement
+};

package/stepper/step-label/step-label.component.js

@@ -1,2 +1,96 @@
-import { t as e } from "../../step-label.component-COJYo-MI.js";
-export { e as SbbStepLabelElement };
+import { css as a, html as o } from "lit";
+import { SbbButtonBaseElement as b } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as n } from "../../core/controllers.js";
+import { SbbDisabledMixin as l, removeAriaElements as p, appendAriaElements as c } from "../../core/mixins.js";
+import { boxSizingStyles as d } from "../../core/styles.js";
+import { SbbIconNameMixin as h } from "../../icon.js";
+const f = a`:host{--sbb-step-label-color: var(--sbb-color-4);--sbb-step-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-step-label-prefix-size: var(--sbb-size-element-xxs);--sbb-step-label-prefix-border-style: solid;--sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);--sbb-step-label-prefix-background-color: var(--sbb-background-color-1);--sbb-step-label-gap: var(--sbb-spacing-fixed-4x);position:relative;min-width:0;max-width:fit-content}:host:before{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);inset-block-start:calc(var(--sbb-text-font-size-l) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2);line-height:1;z-index:1;transform:translate(-50%,calc(-50% + var(--sbb-step-label-translate-y-content-hover, 0rem)));transition:transform var(--sbb-step-label-animation-duration) var(--sbb-animation-easing)}@media(forced-colors:active){:host{--sbb-step-label-color: ButtonText;--sbb-step-label-prefix-border-color: ButtonText}}:host(:is(:state(selected),[state--selected])){--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;--sbb-step-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color: Highlight !important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap: var(--sbb-spacing-fixed-3x);--sbb-step-label-prefix-size: var(--sbb-size-element-xxxs)}:host(:is(:state(size-s),[state--size-s])):before{inset-block-start:calc(var(--sbb-text-font-size-m) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2)}:host(:disabled){--sbb-step-label-color: var(--sbb-color-granite);--sbb-step-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));--sbb-step-label-prefix-border-style: dashed}@media(forced-colors:active){:host(:disabled){--sbb-step-label-color: GrayText !important}}@media(any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor: var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color: var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover: -.0625rem;--sbb-step-label-prefix-size-grow-hover: calc(var(--sbb-border-width-2x) * -1)}}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-l);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700;cursor:var(--sbb-step-label-cursor);position:relative;display:flex;gap:var(--sbb-step-label-gap);color:var(--sbb-step-label-color)}:host(:is(:state(size-s),[state--size-s])) .sbb-step-label{--sbb-text-font-size: var(--sbb-text-font-size-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);font-weight:700}.sbb-step-label__prefix{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";position:absolute;inset:calc(var(--sbb-step-label-prefix-size-grow-hover, 0rem));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);transform:translateY(var(--sbb-step-label-translate-y-content-hover, 0rem));transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,transform}`;
+let v = 0;
+const s = class s extends h(l(b)) {
+  /** The step controlled by the label. */
+  get step() {
+    return this._step;
+  }
+  get stepper() {
+    return this.closest("sbb-stepper");
+  }
+  set disabled(t) {
+    super.disabled = t, this.toggleState("user-disabled", t);
+  }
+  get disabled() {
+    return super.disabled;
+  }
+  constructor() {
+    super(), this._step = null, this.addEventListener?.("click", () => {
+      const t = this.stepper;
+      t && this.step && this._isNotDeactivatedByLinearMode(this.step) && (t.selected = this.step);
+    }), this.addController(new n(this, () => this.stepper, {
+      orientation: (t) => {
+        this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = t.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+      },
+      size: (t) => {
+        this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+      }
+    }));
+  }
+  _isNotDeactivatedByLinearMode(t) {
+    const e = this.stepper;
+    if (e?.linear && e.selectedIndex !== null) {
+      const i = e.steps.indexOf(t);
+      return i < e.selectedIndex || i === e.selectedIndex + 1;
+    }
+    return !0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.id ||= `sbb-step-label-${v++}`, this.slot ||= "step-label", this.internals.ariaSelected = "false", this.tabIndex = -1, this._assignStep();
+  }
+  /**
+   * Selects and configures the step label.
+   * @internal
+   */
+  select() {
+    this.tabIndex = 0, this.internals.ariaSelected = "true", this.internals.states.add("selected");
+  }
+  /**
+   * Deselects and configures the step label.
+   * @internal
+   */
+  deselect() {
+    this.tabIndex = -1, this.internals.ariaSelected = "false", this.internals.states.delete("selected");
+  }
+  /**
+   * Configures the step label.
+   * @internal
+   */
+  configure(t, e, i) {
+    i && this._assignStep(), this.internals.ariaPosInSet = `${t}`, this.internals.ariaSetSize = `${e}`;
+  }
+  _assignStep() {
+    let t = this.nextElementSibling;
+    for (; t && t.localName !== "sbb-step"; )
+      t = t.nextElementSibling;
+    const e = t;
+    this.internals.ariaControlsElements = p(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = c(this.internals.ariaControlsElements, this._step);
+  }
+  /**
+   * @internal
+   * Disables the step label and avoids setting the `disabled` state to preserve the initial
+   * disabled state in case of switching between linear and non-linear mode.
+   */
+  disable(t) {
+    super.disabled = t;
+  }
+  render() {
+    return o`
+      <div class="sbb-step-label">
+        <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+        <span class="sbb-step-label__text"><slot></slot></span>
+      </div>
+    `;
+  }
+};
+s.elementName = "sbb-step-label", s.role = "tab", s.styles = [d, f];
+let r = s;
+export {
+  r as SbbStepLabelElement
+};

package/stepper/step-label.js

@@ -1,4 +1,7 @@
-import { t as e } from "../step-label.component-COJYo-MI.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/stepper/step-label.js' has been deprecated.\nUse either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.");
-//#endregion
-export { e as SbbStepLabelElement };
+import { SbbStepLabelElement as e } from "./step-label/step-label.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/step-label.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
+export {
+  e as SbbStepLabelElement
+};

package/stepper/step.js

@@ -1,4 +1,7 @@
-import { t as e } from "../step.component-BIOQdZVR.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/stepper/step.js' has been deprecated.\nUse either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.");
-//#endregion
-export { e as SbbStepElement };
+import { SbbStepElement as e } from "./step/step.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/step.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
+export {
+  e as SbbStepElement
+};

package/stepper/stepper/stepper.component.js

@@ -1,2 +1,236 @@
-import { n as e, t } from "../../stepper.component-D2vhtDCy.js";
-export { t as SbbStepChangeEvent, e as SbbStepperElement };
+var M = (s) => {
+  throw TypeError(s);
+};
+var O = (s, i, a) => i.has(s) || M("Cannot " + a);
+var f = (s, i, a) => (O(s, i, "read from private field"), a ? a.call(s) : i.get(s)), m = (s, i, a) => i.has(s) ? M("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, a), o = (s, i, a, n) => (O(s, i, "write to private field"), n ? n.call(s, a) : i.set(s, a), a);
+import { __esDecorate as p, __runInitializers as d } from "tslib";
+import { IntersectionController as q } from "@lit-labs/observers/intersection-controller.js";
+import { css as T, html as A } from "lit";
+import { property as u } from "lit/decorators.js";
+import { isArrowKeyPressed as C, getNextElementIndex as H } from "../../core/a11y.js";
+import { SbbElement as R } from "../../core/base-elements.js";
+import { SbbMediaQueryBreakpointUltraAndAbove as B, SbbMediaQueryBreakpointLargeAndAbove as U, SbbMediaQueryBreakpointSmallAndAbove as D, SbbMediaQueryBreakpointZeroAndAbove as N, SbbMediaMatcherController as Q } from "../../core/controllers/media-matchers-controller.js";
+import { forceType as $ } from "../../core/decorators.js";
+import { isLean as j } from "../../core/dom.js";
+import { boxSizingStyles as K } from "../../core/styles.js";
+const P = T`: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-3);display:block;position:relative;counter-reset:step-label}@media(forced-colors:active){:host{--sbb-stepper-marker-color: ButtonText}}:host(:is(:state(disable-animation),[state--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:start;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-responsive-m);padding-block-end:var(--sbb-spacing-fixed-4x);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted)}: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-border-color-4-inverted)}: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}`, F = 150, L = {
+  zero: N,
+  small: D,
+  large: U,
+  ultra: B
+};
+class V extends Event {
+  constructor(i, a, n, _) {
+    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = i, this.previousIndex = a, this.selectedStep = n, this.previousStep = _;
+  }
+}
+let ne = (() => {
+  var h, c, b, l;
+  let s = R, i = [], a, n = [], _ = [], g, x, z = [], k = [], S, I = [], y = [], w, E;
+  return l = class extends s {
+    constructor() {
+      super();
+      m(this, h);
+      m(this, c);
+      m(this, b);
+      this._observer = (d(this, i), new q(this, {
+        target: null,
+        callback: (e) => {
+          e.forEach((t) => {
+            t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
+          });
+        }
+      })), o(this, h, d(this, n, !1)), this._horizontalFrom = (d(this, _), null), o(this, c, d(this, z, "horizontal")), o(this, b, (d(this, k), d(this, I, j() ? "s" : "m"))), this._requestedSelected = (d(this, y), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new Q(this, {}), this._onStepperResize = () => {
+        this._checkOrientation(), this._setStepperHeight(this.selected), clearTimeout(this._resizeObserverTimeout), this.internals.states.add("disable-animation"), this._resizeObserverTimeout = setTimeout(() => this.internals.states.delete("disable-animation"), F);
+      }, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
+    }
+    /** If set to true, only the current and previous labels can be clicked and selected. */
+    get linear() {
+      return f(this, h);
+    }
+    set linear(e) {
+      o(this, h, e);
+    }
+    /** Overrides the behavior of `orientation` property. */
+    set horizontalFrom(e) {
+      this._horizontalFrom = e && L[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+    }
+    get horizontalFrom() {
+      return this._horizontalFrom;
+    }
+    /** Steps orientation, either horizontal or vertical. */
+    get orientation() {
+      return f(this, c);
+    }
+    set orientation(e) {
+      o(this, c, e);
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return f(this, b);
+    }
+    set size(e) {
+      o(this, b, e);
+    }
+    /** The currently selected step. */
+    set selected(e) {
+      this._loaded && this._select(e), this._requestedSelected = e;
+    }
+    get selected() {
+      return this.querySelector?.("sbb-step:is(:state(selected),[state--selected])") ?? null;
+    }
+    /** The currently selected step index. */
+    set selectedIndex(e) {
+      this._loaded && e !== null && this._select(this.steps[e]), this._requestedSelectedIndex = e;
+    }
+    get selectedIndex() {
+      return this.selected ? this.steps.indexOf(this.selected) : null;
+    }
+    /** The steps of the stepper. */
+    get steps() {
+      const e = [];
+      return this.querySelectorAll?.("sbb-step").forEach((t) => {
+        customElements.upgrade(t), e.push(t);
+      }), e;
+    }
+    get _enabledSteps() {
+      return this.steps.filter((e) => e.label ? (customElements.upgrade(e.label), !e.label.disabled) : !1);
+    }
+    /** 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() {
+      const e = this.closest("form");
+      e ? e.reset() : this.querySelectorAll("form").forEach((t) => t.reset()), this.selectedIndex = 0, document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.focus();
+    }
+    _isSelectable(e) {
+      return e ? (customElements.upgrade(e), !(e.label && (customElements.upgrade(e.label), !this.linear && e.label.disabled))) : !1;
+    }
+    _select(e) {
+      if (!this._isSelectable(e) || e === this.selected)
+        return;
+      const t = this.selectedIndex, r = this.selected, v = {
+        currentIndex: t,
+        currentStep: r,
+        nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
+        nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
+      };
+      if (this.selected && !this.selected.validate(v))
+        return;
+      this.selected?.deselect(), e.select(), this.dispatchEvent(new V(this.selectedIndex, t, this.selected, r)), this._setMarkerSize(), this._setStepperHeight(e), this._configureLinearMode(), document.activeElement?.closest("sbb-stepper") === this && this.selected?.label?.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) {
+      if (e && e.shadowRoot) {
+        const t = e.shadowRoot.querySelector(".sbb-step");
+        t && this.style?.setProperty("--sbb-stepper-content-height", `${t.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() {
+      this.steps.forEach((e, t, r) => {
+        e.configure(this._loaded), e.label?.configure(t + 1, r.length, this._loaded);
+      }), this._select(this.selected || this._enabledSteps[0]);
+    }
+    _updateLabels() {
+      this.steps.forEach((e) => {
+        e.slot = this.orientation === "horizontal" ? "step" : "step-label";
+      });
+    }
+    _checkOrientation() {
+      this.horizontalFrom && (this.orientation = this._mediaMatcher.matches(L[this.horizontalFrom]) ? "horizontal" : "vertical", this._updateLabels()), setTimeout(() => this._setMarkerSize(), 0);
+    }
+    _configureLinearMode() {
+      this.steps.forEach((e, t) => {
+        e.label && (customElements.upgrade(e.label), e.label.disable(this.linear && t > this.selectedIndex || !this.linear && e.label.matches(":is(:state(user-disabled),[state--user-disabled])")));
+      });
+    }
+    connectedCallback() {
+      super.connectedCallback(), window.addEventListener("resize", this._onStepperResize, {
+        passive: !0
+      }), this.toggleState("disable-animation", !this._loaded);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), window.removeEventListener("resize", this._onStepperResize);
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.updateComplete.then(() => {
+        this._loaded = !0, this._configure(), this._requestedSelected && this.steps.indexOf(this._requestedSelected) !== -1 ? this.selectedIndex = this.steps.indexOf(this._requestedSelected) : this._requestedSelectedIndex ? this.selectedIndex = this._requestedSelectedIndex : this.selectedIndex = 0, this._observer.observe(this), this._checkOrientation(), setTimeout(() => this.internals.states.delete("disable-animation"), F);
+      });
+    }
+    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._setMarkerSize();
+    }
+    _handleKeyDown(e) {
+      const t = this._enabledSteps;
+      if (!(!t || // don't trap nested handling
+      e.target !== this && e.target.parentElement !== this) && C(e)) {
+        const r = t.indexOf(this.selected), v = H(e, r, t.length);
+        this._select(t[v]), e.preventDefault();
+      }
+    }
+    render() {
+      return A`
+      <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>
+    `;
+    }
+  }, h = new WeakMap(), c = new WeakMap(), b = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    a = [$(), u({ type: Boolean })], g = [u({ attribute: "horizontal-from", reflect: !0 })], x = [u({ reflect: !0 })], S = [u({ reflect: !0 })], w = [u({ attribute: !1 })], E = [u({ attribute: "selected-index", type: Number })], p(l, null, a, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, r) => {
+      t.linear = r;
+    } }, metadata: e }, n, _), p(l, null, g, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, r) => {
+      t.horizontalFrom = r;
+    } }, metadata: e }, null, i), p(l, null, x, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, r) => {
+      t.orientation = r;
+    } }, metadata: e }, z, k), p(l, null, S, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, r) => {
+      t.size = r;
+    } }, metadata: e }, I, y), p(l, null, w, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, r) => {
+      t.selected = r;
+    } }, metadata: e }, null, i), p(l, null, E, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, r) => {
+      t.selectedIndex = r;
+    } }, metadata: e }, null, i), e && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.elementName = "sbb-stepper", l.styles = [K, P], l.events = {
+    stepchange: "stepchange"
+  }, l;
+})();
+export {
+  V as SbbStepChangeEvent,
+  ne as SbbStepperElement
+};

package/stepper/stepper.js

@@ -1,4 +1,9 @@
-import { n as e, t } from "../stepper.component-D2vhtDCy.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/stepper/stepper.js' has been deprecated.\nUse either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.");
-//#endregion
-export { t as SbbStepChangeEvent, e as SbbStepperElement };
+import { SbbStepperElement as e } from "./stepper/stepper.component.js";
+import { SbbStepChangeEvent as r } from "./stepper/stepper.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/stepper/stepper.js' has been deprecated.
+Use either '@sbb-esta/elements/stepper.js' or '@sbb-esta/elements/stepper.pure.js' instead.`);
+export {
+  r as SbbStepChangeEvent,
+  e as SbbStepperElement
+};

package/stepper.js

@@ -1,7 +1,13 @@
-import { t as e } from "./step-label.component-COJYo-MI.js";
-import { t } from "./step.component-BIOQdZVR.js";
-import { n, t as r } from "./stepper.component-D2vhtDCy.js";
-import "./stepper.pure.js";
-t.define(), e.define(), n.define();
-//#endregion
-export { r as SbbStepChangeEvent, t as SbbStepElement, e as SbbStepLabelElement, n as SbbStepperElement };
+import { SbbStepLabelElement as e } from "./stepper/step-label/step-label.component.js";
+import { SbbStepElement as t } from "./stepper/step/step.component.js";
+import { SbbStepperElement as m } from "./stepper/stepper/stepper.component.js";
+import { SbbStepChangeEvent as S } from "./stepper/stepper/stepper.component.js";
+t.define();
+e.define();
+m.define();
+export {
+  S as SbbStepChangeEvent,
+  t as SbbStepElement,
+  e as SbbStepLabelElement,
+  m as SbbStepperElement
+};

package/stepper.pure.js

@@ -1,4 +1,9 @@
-import { t as e } from "./step-label.component-COJYo-MI.js";
-import { t } from "./step.component-BIOQdZVR.js";
-import { n, t as r } from "./stepper.component-D2vhtDCy.js";
-export { r as SbbStepChangeEvent, t as SbbStepElement, e as SbbStepLabelElement, n as SbbStepperElement };
+import { SbbStepLabelElement as b } from "./stepper/step-label/step-label.component.js";
+import { SbbStepElement as S } from "./stepper/step/step.component.js";
+import { SbbStepChangeEvent as m, SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
+export {
+  m as SbbStepChangeEvent,
+  S as SbbStepElement,
+  b as SbbStepLabelElement,
+  o as SbbStepperElement
+};

package/tab-label-common-D6k40yRU.js

@@ -0,0 +1,6 @@
+import { css as b } from "lit";
+const t = b`:host{display:flex;flex-direction:column}:host(:not([size])){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-default)}:host([size=s]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-s)}:host([size=l]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-l)}:host([size=xl]){--sbb-tab-group-content-gap: var(--sbb-tab-group-content-gap-size-xl)}.sbb-tab-group,.sbb-tab-nav-bar{display:flex;flex-wrap:wrap}`, s = b`:host{--sbb-tab-label-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-tab-label-outline-border-radius-internal: calc( var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset) )}:host(:is(:is(:state(size-s),[state--size-s]),[size=s])){--sbb-tab-label-height: var(--sbb-size-element-xs);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);--sbb-tab-label-font-size: var(--sbb-text-font-size-s)}:host(:is(:is(:state(size-l),[state--size-l]),[size=l])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-m)}:host(:is(:is(:state(size-xl),[state--size-xl]),[size=xl])){--sbb-tab-label-height: var(--sbb-size-element-m);--sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);--sbb-tab-label-font-size: var(--sbb-text-font-size-xl)}:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){pointer-events:var(--sbb-tab-label-pointer-events, unset)}@media(forced-colors:active){:host(sbb-tab-label),:host(sbb-tab-nav-bar) ::slotted(a){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a),:host(sbb-tab-label) .sbb-tab-label{position:relative;display:flex;align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);margin:0;padding-inline:var(--sbb-tab-label-inline-padding);min-height:var(--sbb-tab-label-height);transition:color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);font-size:var(--sbb-tab-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);font-weight:var(--sbb-tab-label-font-weight);text-decoration:var(--sbb-tab-label-text-decoration)}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{position:absolute;content:"";inset-inline:0;inset-block-end:0;height:var(--sbb-tab-label-marker-thickness);background-color:var(--sbb-tab-label-color);scale:var(--sbb-tab-label-marker-scale, 0);transition-duration:var(--sbb-tab-label-animation-duration);transition-timing-function:var(--sbb-tab-label-animation-easing);transition-property:scale,background-color}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider],:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])){position:relative}:host(sbb-tab-nav-bar) .sbb-tab-nav-bar>[data-has-divider]:before,:host(sbb-tab-label:is(:state(has-divider),[state--has-divider])):before{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color)}:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-text-decoration: line-through}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),:host(sbb-tab-label[disabled]){--sbb-tab-label-color: GrayText;--sbb-tab-label-amount-color: GrayText}}:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: var(--sbb-color-3);--sbb-tab-label-cursor: unset;--sbb-tab-label-pointer-events: none;--sbb-tab-label-marker-scale: 1}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),:host(sbb-tab-label[active]:not([disabled])){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}@media(any-hover:hover){:host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),:host(sbb-tab-label:hover:not([disabled])){--sbb-tab-label-marker-scale: 1}}:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: var(--sbb-color-3)}@media(forced-colors:active){:host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),:host(sbb-tab-label:active){--sbb-tab-label-color: ButtonText;--sbb-tab-label-amount-color: ButtonText}}:host(sbb-tab-nav-bar) ::slotted(a:focus-visible),:host(sbb-tab-label:focus-visible) .sbb-tab-label{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-tab-label-outline-border-radius-internal)}`;
+export {
+  s as a,
+  t
+};

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

@@ -1,2 +1,70 @@
-import { t as e } from "../../table-wrapper.component-DkaL4T5V.js";
-export { e as SbbTableWrapperElement };
+var c = (t) => {
+  throw TypeError(t);
+};
+var b = (t, s, e) => s.has(t) || c("Cannot " + e);
+var f = (t, s, e) => (b(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), u = (t, s, e, r) => (b(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
+import { __esDecorate as p, __runInitializers as h } from "tslib";
+import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
+import { css as v, isServer as k, html as _ } from "lit";
+import { property as S } from "lit/decorators.js";
+import { SbbElement as w } from "../../core/base-elements.js";
+import { forceType as y } from "../../core/decorators.js";
+import { SbbNegativeMixin as g } from "../../core/mixins.js";
+const L = v`:host{display:block;overflow:auto}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}::slotted(.sbb-table){width:100%}`;
+let U = (() => {
+  var o, l;
+  let t = g(w), s, e = [], r = [];
+  return l = class extends t {
+    constructor() {
+      super();
+      n(this, o, h(this, e, !1));
+      h(this, r), this.addController(new m(this, {
+        skipInitial: !0,
+        callback: () => this._checkHorizontalScrollbarOffset()
+      })), this.addEventListener?.("scroll", () => this._checkHorizontalScrollbarOffset(), {
+        passive: !0
+      });
+    }
+    /** Whether the table wrapper is focusable. */
+    get focusable() {
+      return f(this, o);
+    }
+    set focusable(i) {
+      u(this, o, i);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._updateScrollbarClass();
+    }
+    willUpdate(i) {
+      super.willUpdate(i), i.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), i.has("negative") && this._updateScrollbarClass();
+    }
+    _updateScrollbarClass() {
+      k || (this.negative ? (this.classList.remove("sbb-scrollbar-thick-track-visible"), this.classList.add("sbb-scrollbar-thick-negative-track-visible")) : (this.classList.remove("sbb-scrollbar-thick-negative-track-visible"), this.classList.add("sbb-scrollbar-thick-track-visible")));
+    }
+    /**
+     *  Calculates whether the table is horizontally scrolled and adds the
+     *  corresponding class `sbb-table-wrapper-offset-${none | left | right | both}`
+     */
+    _checkHorizontalScrollbarOffset() {
+      const i = 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-${i}`);
+    }
+    _calculateScrollOffset() {
+      if (this.scrollWidth === this.offsetWidth)
+        return "none";
+      const i = this.scrollLeft === 0, a = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+      return i ? a ? "none" : "right" : a ? "left" : "both";
+    }
+    render() {
+      return _`<slot></slot>`;
+    }
+  }, o = new WeakMap(), (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(t[Symbol.metadata] ?? null) : void 0;
+    s = [y(), S({ reflect: !0, type: Boolean })], p(l, null, s, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (a) => "focusable" in a, get: (a) => a.focusable, set: (a, d) => {
+      a.focusable = d;
+    } }, metadata: i }, e, r), i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), l.elementName = "sbb-table-wrapper", l.role = "section", l.styles = L, l;
+})();
+export {
+  U as SbbTableWrapperElement
+};

package/table/table-wrapper.js

@@ -1,4 +1,7 @@
-import { t as e } from "../table-wrapper.component-DkaL4T5V.js";
-e.define(), console.warn("The entrypoint '@sbb-esta/elements/table/table-wrapper.js' has been deprecated.\nUse either '@sbb-esta/elements/table.js' or '@sbb-esta/elements/table.pure.js' instead.");
-//#endregion
-export { e as SbbTableWrapperElement };
+import { SbbTableWrapperElement as e } from "./table-wrapper/table-wrapper.component.js";
+e.define();
+console.warn(`The entrypoint '@sbb-esta/elements/table/table-wrapper.js' has been deprecated.
+Use either '@sbb-esta/elements/table.js' or '@sbb-esta/elements/table.pure.js' instead.`);
+export {
+  e as SbbTableWrapperElement
+};