@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771859294

package/status/status.component.js

@@ -0,0 +1,71 @@
+var h = (t) => {
+  throw TypeError(t);
+};
+var y = (t, s, e) => s.has(t) || h("Cannot " + e);
+var f = (t, s, e) => (y(t, s, "read from private field"), e ? e.call(t) : s.get(t)), _ = (t, s, e) => s.has(t) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), n = (t, s, e, r) => (y(t, s, "write to private field"), r ? r.call(t, e) : s.set(t, e), e);
+import { __esDecorate as g, __runInitializers as b } from "tslib";
+import { css as v, LitElement as x, html as S } from "lit";
+import { customElement as z, property as k } from "lit/decorators.js";
+import { SbbElementInternalsMixin as I } from "../core/mixins.js";
+import { boxSizingStyles as E } from "../core/styles.js";
+import { SbbIconNameMixin as w } from "../icon.js";
+const N = v`:host{--sbb-status-color: var(--sbb-color-4);--sbb-status-gap: var(--sbb-spacing-fixed-1x);--sbb-status-text-color: var(--sbb-status-color);--_sbb-status-icon-color: var(--sbb-status-color);display:block}:host([type=error]){--sbb-status-color: var(--sbb-color-error)}:host([type=success]){--sbb-status-color: var(--sbb-color-success)}:host([type=warning]){--sbb-status-color: var(--sbb-color-2)}:host([type=pending]){--sbb-status-color: var(--sbb-color-sky)}:host([type=incomplete]){--sbb-status-color: var(--sbb-color-error)}:host([type=not-started]){--sbb-status-color: var(--sbb-color-5);--sbb-status-text-color: var(--sbb-color-2)}:host([type=in-progress]){--sbb-status-color: var(--sbb-color-pink)}.sbb-status{--sbb-text-font-size: var(--sbb-text-font-size-s);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);display:flex;gap:var(--sbb-status-gap);color:var(--_sbb-status-text-color-override, var(--sbb-status-text-color))}.sbb-status__icon{display:flex;flex-shrink:0;color:var(--_sbb-status-icon-color);margin-block-start:calc((var(--_sbb-status-title-font-size, var(--sbb-text-font-size-s)) * var(--_sbb-status-title-line-height, var(--sbb-typo-line-height-text)) - var(--sbb-size-icon-ui-small)) / 2)}.sbb-status__content-slot{display:inline;margin:0;padding:0}::slotted(sbb-title){margin-block:0}`;
+let P = (() => {
+  var i, l;
+  let t = [z("sbb-status")], s, e = [], r, p = w(I(x)), u, m = [], d = [];
+  return l = class extends p {
+    constructor() {
+      super(...arguments);
+      _(this, i);
+      this._statusTypes = /* @__PURE__ */ new Map([
+        ["info", "circle-information-small"],
+        ["success", "circle-tick-small"],
+        ["warning", "circle-exclamation-point-small"],
+        ["error", "circle-cross-small"],
+        ["pending", "circle-three-dots-small"],
+        ["incomplete", "circle-dotted-part-x-small"],
+        ["not-started", "circle-dotted-small"],
+        ["in-progress", "circle-dotted-part-small"]
+      ]), n(this, i, b(this, m, "info")), b(this, d);
+    }
+    /** The type of the status. */
+    get type() {
+      return f(this, i);
+    }
+    set type(a) {
+      n(this, i, a);
+    }
+    _handleSlotchange() {
+      const a = Array.from(this.children).find((o) => o.localName === "sbb-title");
+      a && (a.slot = "title");
+    }
+    _configureTitle(a) {
+      const o = a.target.assignedElements().find((c) => c.localName === "sbb-title");
+      o && (customElements.upgrade(o), o.visualLevel = "5");
+    }
+    renderIconName() {
+      return super.renderIconName() || this._statusTypes.get(this.type);
+    }
+    render() {
+      return S`
+      <div class="sbb-status">
+        <span class="sbb-status__icon"> ${this.renderIconSlot()} </span>
+        <span class="sbb-status__content">
+          <slot name="title" @slotchange=${this._configureTitle}></slot>
+          <p class="sbb-status__content-slot" @slotchange=${this._handleSlotchange}>
+            <slot></slot>
+          </p>
+        </span>
+      </div>
+    `;
+    }
+  }, i = new WeakMap(), r = l, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+    u = [k({ reflect: !0 })], g(l, null, u, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (o) => "type" in o, get: (o) => o.type, set: (o, c) => {
+      o.type = c;
+    } }, metadata: a }, m, d), g(null, s = { value: r }, t, { kind: "class", name: r.name, metadata: a }, null, e), r = s.value, a && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+  })(), l.styles = [E, N], b(r, e), r;
+})();
+export {
+  P as SbbStatusElement
+};

package/status.js

@@ -0,0 +1,4 @@
+import { SbbStatusElement as b } from "./status/status.component.js";
+export {
+  b as SbbStatusElement
+};

package/stepper/step/step.component.js

@@ -0,0 +1,116 @@
+import { __esDecorate as b, __runInitializers as p } from "tslib";
+import { ResizeController as h } from "@lit-labs/observers/resize-controller.js";
+import { css as d, LitElement as c, html as m } from "lit";
+import { customElement as u } from "lit/decorators.js";
+import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
+import { SbbElementInternalsMixin as y, removeAriaElements as g, appendAriaElements as f } from "../../core/mixins.js";
+import { boxSizingStyles as _ } from "../../core/styles.js";
+const E = d`: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 x = 0, A = (() => {
+  var e;
+  let l = [u("sbb-step")], n, r = [], s, o = y(c);
+  return e = class extends o {
+    /** The label of the step. */
+    get label() {
+      return this._label;
+    }
+    get stepper() {
+      return this.closest("sbb-stepper");
+    }
+    constructor() {
+      super(), this._stepResizeObserver = new h(this, {
+        target: null,
+        skipInitial: !0,
+        callback: () => setTimeout(() => this._onStepElementResize())
+      }), this._label = null, this.addEventListener?.("click", (t) => this._handleClick(t)), this.addController(new v(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 i = t.composedPath().filter((a) => a instanceof window.HTMLElement);
+      i.some((a) => this._isGoNextElement(a)) ? this.stepper?.next() : i.some((a) => this._isGoPreviousElement(a)) && 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-${x++}`, 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 i = t;
+      this.internals.ariaLabelledByElements = g(this.internals.ariaLabelledByElements, this._label), this._label = i instanceof Element ? i : null, this.internals.ariaLabelledByElements = f(this.internals.ariaLabelledByElements, this._label);
+    }
+    render() {
+      return m`
+      <div class="sbb-step--wrapper">
+        <div class="sbb-step">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+  }, s = e, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    b(null, n = { value: s }, l, { kind: "class", name: s.name, metadata: t }, null, r), s = n.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.role = "tabpanel", e.styles = [_, E], e.events = {
+    validate: "validate",
+    resizechange: "resizechange"
+  }, p(s, r), s;
+})();
+export {
+  A as SbbStepElement
+};

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

@@ -0,0 +1,102 @@
+import { __esDecorate as n, __runInitializers as p } from "tslib";
+import { css as c, html as d } from "lit";
+import { customElement as h } from "lit/decorators.js";
+import { SbbButtonBaseElement as f } from "../../core/base-elements.js";
+import { SbbPropertyWatcherController as v } from "../../core/controllers.js";
+import { SbbDisabledMixin as x, removeAriaElements as u, appendAriaElements as m } from "../../core/mixins.js";
+import { boxSizingStyles as g } from "../../core/styles.js";
+import { SbbIconNameMixin as y } from "../../icon.js";
+const z = c`: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 _ = 0, B = (() => {
+  var s;
+  let l = [h("sbb-step-label")], r, o = [], i, b = y(x(f));
+  return s = class extends 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 v(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 a = e.steps.indexOf(t);
+        return a < e.selectedIndex || a === e.selectedIndex + 1;
+      }
+      return !0;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.id ||= `sbb-step-label-${_++}`, 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, a) {
+      a && 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 = u(this.internals.ariaControlsElements, this._step), this._step = e instanceof Element ? e : null, this.internals.ariaControlsElements = m(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 d`
+      <div class="sbb-step-label">
+        <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
+        <span class="sbb-step-label__text"><slot></slot></span>
+      </div>
+    `;
+    }
+  }, i = s, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: t }, null, o), i = r.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), s.role = "tab", s.styles = [g, z], p(i, o), i;
+})();
+export {
+  B as SbbStepLabelElement
+};

package/stepper/step-label.js

@@ -0,0 +1,4 @@
+import { SbbStepLabelElement as t } from "./step-label/step-label.component.js";
+export {
+  t as SbbStepLabelElement
+};

package/stepper/step.js

@@ -0,0 +1,4 @@
+import { SbbStepElement as b } from "./step/step.component.js";
+export {
+  b as SbbStepElement
+};

package/stepper/stepper/stepper.component.js

@@ -0,0 +1,236 @@
+var q = (s) => {
+  throw TypeError(s);
+};
+var T = (s, r, a) => r.has(s) || q("Cannot " + a);
+var f = (s, r, a) => (T(s, r, "read from private field"), a ? a.call(s) : r.get(s)), v = (s, r, a) => r.has(s) ? q("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, a), d = (s, r, a, n) => (T(s, r, "write to private field"), n ? n.call(s, a) : r.set(s, a), a);
+import { __esDecorate as c, __runInitializers as o } from "tslib";
+import { IntersectionController as H } from "@lit-labs/observers/intersection-controller.js";
+import { css as R, LitElement as B, html as D } from "lit";
+import { customElement as U, property as u } from "lit/decorators.js";
+import { isArrowKeyPressed as Q, getNextElementIndex as $ } from "../../core/a11y.js";
+import { SbbMediaQueryBreakpointUltraAndAbove as j, SbbMediaQueryBreakpointLargeAndAbove as K, SbbMediaQueryBreakpointSmallAndAbove as N, SbbMediaQueryBreakpointZeroAndAbove as P, SbbMediaMatcherController as V } from "../../core/controllers/media-matchers-controller.js";
+import { forceType as W } from "../../core/decorators.js";
+import { isLean as Z } from "../../core/dom.js";
+import { SbbHydrationMixin as G, SbbElementInternalsMixin as J } from "../../core/mixins.js";
+import { boxSizingStyles as X } from "../../core/styles.js";
+const Y = R`: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}`, A = 150, C = {
+  zero: P,
+  small: N,
+  large: K,
+  ultra: j
+};
+class ee extends Event {
+  constructor(r, a, n, _) {
+    super("stepchange", { bubbles: !0, composed: !0 }), this.selectedIndex = r, this.previousIndex = a, this.selectedStep = n, this.previousStep = _;
+  }
+}
+let ue = (() => {
+  var h, b, p, l;
+  let s = [U("sbb-stepper")], r, a = [], n, _ = G(J(B)), m = [], x, z = [], S = [], k, I, y = [], E = [], w, M = [], L = [], O, F;
+  return l = class extends _ {
+    constructor() {
+      super();
+      v(this, h);
+      v(this, b);
+      v(this, p);
+      this._observer = (o(this, m), new H(this, {
+        target: null,
+        callback: (e) => {
+          e.forEach((t) => {
+            t.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
+          });
+        }
+      })), d(this, h, o(this, z, !1)), this._horizontalFrom = (o(this, S), null), d(this, b, o(this, y, "horizontal")), d(this, p, (o(this, E), o(this, M, Z() ? "s" : "m"))), this._requestedSelected = (o(this, L), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new V(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"), A);
+      }, 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) {
+      d(this, h, e);
+    }
+    /** Overrides the behavior of `orientation` property. */
+    set horizontalFrom(e) {
+      this._horizontalFrom = e && C[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, b);
+    }
+    set orientation(e) {
+      d(this, b, e);
+    }
+    /**
+     * Size variant, either s or m.
+     * @default 'm' / 's' (lean)
+     */
+    get size() {
+      return f(this, p);
+    }
+    set size(e) {
+      d(this, p, 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, i = this.selected, g = {
+        currentIndex: t,
+        currentStep: i,
+        nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null,
+        nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null
+      };
+      if (this.selected && !this.selected.validate(g))
+        return;
+      this.selected?.deselect(), e.select(), this.dispatchEvent(new ee(this.selectedIndex, t, this.selected, i)), 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, i) => {
+        e.configure(this._loaded), e.label?.configure(t + 1, i.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(C[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"), A);
+      });
+    }
+    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) && Q(e)) {
+        const i = t.indexOf(this.selected), g = $(e, i, t.length);
+        this._select(t[g]), e.preventDefault();
+      }
+    }
+    render() {
+      return D`
+      <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(), b = new WeakMap(), p = new WeakMap(), n = l, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    x = [W(), u({ type: Boolean })], k = [u({ attribute: "horizontal-from", reflect: !0 })], I = [u({ reflect: !0 })], w = [u({ reflect: !0 })], O = [u({ attribute: !1 })], F = [u({ attribute: "selected-index", type: Number })], c(l, null, x, { kind: "accessor", name: "linear", static: !1, private: !1, access: { has: (t) => "linear" in t, get: (t) => t.linear, set: (t, i) => {
+      t.linear = i;
+    } }, metadata: e }, z, S), c(l, null, k, { kind: "setter", name: "horizontalFrom", static: !1, private: !1, access: { has: (t) => "horizontalFrom" in t, set: (t, i) => {
+      t.horizontalFrom = i;
+    } }, metadata: e }, null, m), c(l, null, I, { kind: "accessor", name: "orientation", static: !1, private: !1, access: { has: (t) => "orientation" in t, get: (t) => t.orientation, set: (t, i) => {
+      t.orientation = i;
+    } }, metadata: e }, y, E), c(l, null, w, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
+      t.size = i;
+    } }, metadata: e }, M, L), c(l, null, O, { kind: "setter", name: "selected", static: !1, private: !1, access: { has: (t) => "selected" in t, set: (t, i) => {
+      t.selected = i;
+    } }, metadata: e }, null, m), c(l, null, F, { kind: "setter", name: "selectedIndex", static: !1, private: !1, access: { has: (t) => "selectedIndex" in t, set: (t, i) => {
+      t.selectedIndex = i;
+    } }, metadata: e }, null, m), c(null, r = { value: n }, s, { 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 = [X, Y], l.events = {
+    stepchange: "stepchange"
+  }, o(n, a), n;
+})();
+export {
+  ee as SbbStepChangeEvent,
+  ue as SbbStepperElement
+};

package/stepper/stepper.js

@@ -0,0 +1,5 @@
+import { SbbStepChangeEvent as b, SbbStepperElement as p } from "./stepper/stepper.component.js";
+export {
+  b as SbbStepChangeEvent,
+  p as SbbStepperElement
+};

package/stepper.js

@@ -0,0 +1,9 @@
+import { SbbStepElement as b } from "./stepper/step/step.component.js";
+import { SbbStepLabelElement as S } from "./stepper/step-label/step-label.component.js";
+import { SbbStepChangeEvent as m, SbbStepperElement as o } from "./stepper/stepper/stepper.component.js";
+export {
+  m as SbbStepChangeEvent,
+  b as SbbStepElement,
+  S as SbbStepLabelElement,
+  o as SbbStepperElement
+};

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

@@ -0,0 +1,69 @@
+var h = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, l) => e.has(t) || h("Cannot " + l);
+var p = (t, e, l) => (d(t, e, "read from private field"), l ? l.call(t) : e.get(t)), m = (t, e, l) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, l), v = (t, e, l, a) => (d(t, e, "write to private field"), a ? a.call(t, l) : e.set(t, l), l);
+import { __esDecorate as _, __runInitializers as c } from "tslib";
+import { ResizeController as S } from "@lit-labs/observers/resize-controller.js";
+import { css as w, LitElement as y, isServer as L, html as g } from "lit";
+import { customElement as x, property as z } from "lit/decorators.js";
+import { forceType as C } from "../../core/decorators.js";
+import { SbbNegativeMixin as E, SbbElementInternalsMixin as O } from "../../core/mixins.js";
+const A = w`: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 B = (() => {
+  var o, i;
+  let t = [x("sbb-table-wrapper")], e, l = [], a, b = E(O(y)), n, f = [], u = [];
+  return i = class extends b {
+    constructor() {
+      super();
+      m(this, o, c(this, f, !1));
+      c(this, u), this.addController(new S(this, {
+        skipInitial: !0,
+        callback: () => this._checkHorizontalScrollbarOffset()
+      })), this.addEventListener?.("scroll", () => this._checkHorizontalScrollbarOffset(), {
+        passive: !0
+      });
+    }
+    /** Whether the table wrapper is focusable. */
+    get focusable() {
+      return p(this, o);
+    }
+    set focusable(s) {
+      v(this, o, s);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._updateScrollbarClass();
+    }
+    willUpdate(s) {
+      super.willUpdate(s), s.has("focusable") && (this.focusable ? this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex")), s.has("negative") && this._updateScrollbarClass();
+    }
+    _updateScrollbarClass() {
+      L || (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 s = 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-${s}`);
+    }
+    _calculateScrollOffset() {
+      if (this.scrollWidth === this.offsetWidth)
+        return "none";
+      const s = this.scrollLeft === 0, r = this.scrollWidth - this.scrollLeft - this.offsetWidth <= 1;
+      return s ? r ? "none" : "right" : r ? "left" : "both";
+    }
+    render() {
+      return g`<slot></slot>`;
+    }
+  }, o = new WeakMap(), a = i, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+    n = [C(), z({ reflect: !0, type: Boolean })], _(i, null, n, { kind: "accessor", name: "focusable", static: !1, private: !1, access: { has: (r) => "focusable" in r, get: (r) => r.focusable, set: (r, k) => {
+      r.focusable = k;
+    } }, metadata: s }, f, u), _(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: s }, null, l), a = e.value, s && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), i.role = "section", i.styles = A, c(a, l), a;
+})();
+export {
+  B as SbbTableWrapperElement
+};

package/table/table-wrapper.js

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