@sbb-esta/lyne-elements-dev 4.7.0-dev.1773648082 → 4.7.0-dev.1773648656

package/stepper.component-D2vhtDCy.js

@@ -0,0 +1,286 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { forceType as o } from "./core/decorators.js";
+import { isLean as s } from "./core/dom.js";
+import { boxSizingStyles as c } from "./core/styles.js";
+import { getNextElementIndex as l, isArrowKeyPressed as u } from "./core/a11y.js";
+import { IntersectionController as d } from "@lit-labs/observers/intersection-controller.js";
+import { SbbMediaMatcherController as f, SbbMediaQueryBreakpointLargeAndAbove as p, SbbMediaQueryBreakpointSmallAndAbove as m, SbbMediaQueryBreakpointUltraAndAbove as h, SbbMediaQueryBreakpointZeroAndAbove as g } from "./core/controllers/media-matchers-controller.js";
+//#region src/elements/stepper/stepper/stepper.scss?lit&inline
+var _ = n`: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);counter-reset:step-label;display:block;position:relative}@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{flex-direction:var(--sbb-stepper-orientation);justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m);display:flex;position:relative}.sbb-stepper__labels:before{content:"";background-color:var(--sbb-stepper-marker-color);position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal]) .sbb-stepper__labels:before{height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-end:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=vertical]) .sbb-stepper__labels{border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-inline-start:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-stepper__labels:before{width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-start:0}.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}`, v = 150, y = {
+	zero: g,
+	small: m,
+	large: p,
+	ultra: h
+}, b = class extends Event {
+	constructor(e, t, n, r) {
+		super("stepchange", {
+			bubbles: !0,
+			composed: !0
+		}), this.selectedIndex = e, this.previousIndex = t, this.selectedStep = n, this.previousStep = r;
+	}
+}, x = (() => {
+	let n = a, p = [], m, h = [], g = [], x, S, C = [], w = [], T, E = [], D = [], O, k;
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			m = [o(), i({ type: Boolean })], x = [i({
+				attribute: "horizontal-from",
+				reflect: !0
+			})], S = [i({ reflect: !0 })], T = [i({ reflect: !0 })], O = [i({ attribute: !1 })], k = [i({
+				attribute: "selected-index",
+				type: Number
+			})], e(this, null, m, {
+				kind: "accessor",
+				name: "linear",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "linear" in e,
+					get: (e) => e.linear,
+					set: (e, t) => {
+						e.linear = t;
+					}
+				},
+				metadata: t
+			}, h, g), e(this, null, x, {
+				kind: "setter",
+				name: "horizontalFrom",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "horizontalFrom" in e,
+					set: (e, t) => {
+						e.horizontalFrom = t;
+					}
+				},
+				metadata: t
+			}, null, p), e(this, null, S, {
+				kind: "accessor",
+				name: "orientation",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "orientation" in e,
+					get: (e) => e.orientation,
+					set: (e, t) => {
+						e.orientation = t;
+					}
+				},
+				metadata: t
+			}, C, w), e(this, null, T, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, E, D), e(this, null, O, {
+				kind: "setter",
+				name: "selected",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "selected" in e,
+					set: (e, t) => {
+						e.selected = t;
+					}
+				},
+				metadata: t
+			}, null, p), e(this, null, k, {
+				kind: "setter",
+				name: "selectedIndex",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "selectedIndex" in e,
+					set: (e, t) => {
+						e.selectedIndex = t;
+					}
+				},
+				metadata: t
+			}, null, p), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-stepper";
+		}
+		static {
+			this.styles = [c, _];
+		}
+		static {
+			this.events = { stepchange: "stepchange" };
+		}
+		#e;
+		get linear() {
+			return this.#e;
+		}
+		set linear(e) {
+			this.#e = e;
+		}
+		set horizontalFrom(e) {
+			this._horizontalFrom = e && y[e] ? e : null, this._horizontalFrom && this._loaded && this._checkOrientation();
+		}
+		get horizontalFrom() {
+			return this._horizontalFrom;
+		}
+		#t;
+		get orientation() {
+			return this.#t;
+		}
+		set orientation(e) {
+			this.#t = e;
+		}
+		#n;
+		get size() {
+			return this.#n;
+		}
+		set size(e) {
+			this.#n = e;
+		}
+		set selected(e) {
+			this._loaded && this._select(e), this._requestedSelected = e;
+		}
+		get selected() {
+			return this.querySelector?.("sbb-step:is(:state(selected),[state--selected])") ?? null;
+		}
+		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;
+		}
+		get steps() {
+			let 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);
+		}
+		constructor() {
+			super(), this._observer = (t(this, p), new d(this, {
+				target: null,
+				callback: (e) => {
+					e.forEach((e) => {
+						e.intersectionRatio > 0 && (this._setStepperHeight(this.selected), this._setMarkerSize());
+					});
+				}
+			})), this.#e = t(this, h, !1), this._horizontalFrom = (t(this, g), null), this.#t = t(this, C, "horizontal"), this.#n = (t(this, w), t(this, E, s() ? "s" : "m")), this._requestedSelected = (t(this, D), null), this._requestedSelectedIndex = null, this._loaded = !1, this._resizeObserverTimeout = null, this._mediaMatcher = new f(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"), v);
+			}, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e)), this.addEventListener?.("resizechange", (e) => this._onSelectedStepResize(e));
+		}
+		next() {
+			this.selectedIndex !== null && this._select(this.steps[this.selectedIndex + 1]);
+		}
+		previous() {
+			this.selectedIndex !== null && this._select(this.steps[this.selectedIndex - 1]);
+		}
+		reset() {
+			let e = this.closest("form");
+			e ? e.reset() : this.querySelectorAll("form").forEach((e) => e.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;
+			let t = this.selectedIndex, n = this.selected, r = {
+				currentIndex: t,
+				currentStep: n,
+				nextIndex: this.selectedIndex === null ? null : this.selectedIndex + 1,
+				nextStep: this.selectedIndex === null ? null : this.steps[this.selectedIndex + 1]
+			};
+			this.selected && !this.selected.validate(r) || (this.selected?.deselect(), e.select(), this.dispatchEvent(new b(this.selectedIndex, t, this.selected, n)), 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;
+			let e = this.orientation === "horizontal" ? this.selected.label.offsetLeft + this.selected.label.offsetWidth : this._calculateLabelOffsetTop();
+			this.style.setProperty("--sbb-stepper-marker-size", `${e}px`);
+		}
+		_setStepperHeight(e) {
+			if (e && e.shadowRoot) {
+				let 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 (let 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, n) => {
+				e.configure(this._loaded), e.label?.configure(t + 1, n.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(y[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"), v);
+			});
+		}
+		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) {
+			let t = this._enabledSteps;
+			if (!(!t || e.target !== this && e.target.parentElement !== this) && u(e)) {
+				let n = l(e, t.indexOf(this.selected), t.length);
+				this._select(t[n]), e.preventDefault();
+			}
+		}
+		render() {
+			return r`
+      <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>
+    `;
+		}
+	};
+})();
+//#endregion
+export { x as n, b as t };

package/stepper.js

@@ -1,13 +1,7 @@
-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
-};
+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 };

package/stepper.pure.js

@@ -1,9 +1,4 @@
-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
-};
+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 };

package/sticky-bar.component-CYCOEGz7.js

@@ -0,0 +1,141 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { css as n, html as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { isLean as o, isZeroAnimationDuration as s } from "./core/dom.js";
+import { SbbUpdateSchedulerMixin as c } from "./core/mixins.js";
+import { boxSizingStyles as l } from "./core/styles.js";
+import { IntersectionController as u } from "@lit-labs/observers/intersection-controller.js";
+//#region src/elements/container/sticky-bar/sticky-bar.scss?lit&inline
+var d = n`:host{--sbb-sticky-bar-fade-in-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));--sbb-sticky-bar-fade-out-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-sticky-bar-slide-vertically-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--_sbb-sticky-bar-background-animation-duration:var(--sbb-sticky-bar-fade-out-animation-duration);display:contents}:host([size=s]){--sbb-sticky-bar-padding-block:var(--sbb-spacing-responsive-xxxs)}:host([size=m]){--sbb-sticky-bar-padding-block:var(--sbb-spacing-responsive-xs)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-sticky-background-color:var(--sbb-container-background-color,var(--sbb-background-color-1));--_sbb-sticky-bar-intersector-background-color:var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors:active){:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-forced-colors-border:var(--sbb-border-width-1x) solid CanvasText}}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=white]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-1)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=milk]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-3)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=midnight]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-1-negative)}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))[color=charcoal]){--sbb-sticky-bar-sticky-background-color:var(--sbb-background-color-2-negative)}:host(:is(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]),:is(:state(state-sticking),[state--state-sticking]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-unsticky),[state--state-unsticky]))){--_sbb-sticky-bar-background-animation-duration:0s}:host(:is(:state(sticking),[state--sticking]):is(:is(:state(slide-vertically),[state--slide-vertically]):not(:is(:state(state-unsticky),[state--state-unsticky]),:is(:state(state-unsticking),[state--state-unsticking])),:is(:state(state-sticking),[state--state-sticking]))){--sbb-sticky-bar-slide-vertically-animation-name:slide-in}:host(:is(:state(sticking),[state--sticking]):is(:state(state-unsticking),[state--state-unsticking])){--sbb-sticky-bar-slide-vertically-animation-name:slide-out}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(state-unsticky),[state--state-unsticky]))){--sbb-sticky-bar-position:relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name,unset);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:0s;animation-fill-mode:backwards;display:block;inset-block-end:0}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";z-index:-1;display:block;position:absolute;inset:0}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar__wrapper:before{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color,transparent);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border,none);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius)}.sbb-sticky-bar{padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px;display:flex}.sbb-sticky-bar:before{content:"";z-index:-1;transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-100% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)), 150% 100%, -100% 100%);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);position:absolute;inset:0}:host(:is(:state(sticking),[state--sticking]):not(:is(:state(state-unsticky),[state--state-unsticky]))) .sbb-sticky-bar:before{box-shadow:var(--sbb-box-shadow-level-11-soft)}:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-layout-base-offset-responsive));width:100%;margin-inline:auto}@media (width>=90rem){:host(:not(:is(:state(expanded),[state--expanded]))) .sbb-sticky-bar{max-width:var(--sbb-spacing-max-width,calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host(:is(:state(expanded),[state--expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-page-spacing-padding,var(--sbb-spacing-responsive-xxs))}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height,0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color,transparent);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);display:block;position:absolute}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0%)}}@keyframes slide-out{0%{transform:translateY(0%)}to{transform:translateY(100%)}}`, f = (() => {
+	let n = c(a), f, p = [], m = [], h, g = [], _ = [];
+	return class extends n {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+			f = [i({ reflect: !0 })], h = [i({ reflect: !0 })], e(this, null, f, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-sticky-bar";
+		}
+		static {
+			this.styles = [l, d];
+		}
+		static {
+			this.events = {
+				beforestick: "beforestick",
+				stick: "stick",
+				beforeunstick: "beforeunstick",
+				unstick: "unstick"
+			};
+		}
+		#e;
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		#t;
+		get size() {
+			return this.#t;
+		}
+		set size(e) {
+			this.#t = e;
+		}
+		set _state(e) {
+			this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = e, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
+		}
+		get _state() {
+			return this._stateInternal;
+		}
+		constructor() {
+			super(), this.#e = t(this, p, null), this.#t = (t(this, m), t(this, g, o() ? "s" : "m")), this._stateInternal = t(this, _), this._observer = new u(this, {
+				target: null,
+				callback: (e) => this._detectStickyState(e[0])
+			}), this._state = "sticky";
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot ||= "sticky-bar", this.startUpdate();
+			let e = this.closest("sbb-container");
+			e && this.toggleState("expanded", e.expanded), this._intersector && this._observer.observe(this._intersector);
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this.internals.states.delete("initialized");
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
+		}
+		_isZeroAnimationDuration() {
+			return s(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+		}
+		_detectStickyState(e) {
+			this.internals.states.add("initialized");
+			let t = !e.isIntersecting && e.boundingClientRect.top > 0, n = this._intersector?.getBoundingClientRect(), r = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+			this.toggleState("slide-vertically", t && this._intersector && Math.abs(n.bottom - r.bottom) > 30), this.toggleState("sticking", t), this.completeUpdate();
+		}
+		stick() {
+			this._state !== "unsticky" || !this._dispatchBeforeStickEvent() || (this._state = "sticking", (!this.internals.states.has("sticking") || this._isZeroAnimationDuration()) && this._stickyCallback());
+		}
+		unstick() {
+			this._state !== "sticky" || !this._dispatchBeforeUnStickEvent() || (this._state = "unsticking", (!this.internals.states.has("sticking") || this._isZeroAnimationDuration()) && this._unstickyCallback());
+		}
+		_stickyCallback() {
+			this._state = "sticky", this.dispatchEvent(new Event("stick"));
+		}
+		_unstickyCallback() {
+			this.dispatchEvent(new Event("unstick")), this._state = "unsticky";
+		}
+		_onAnimationEnd(e) {
+			(this._state === "sticking" || this._state === "sticky") && e.animationName === "slide-in" ? this._stickyCallback() : this._state === "unsticking" && e.animationName === "slide-out" && this._unstickyCallback();
+		}
+		_dispatchBeforeStickEvent() {
+			return this.dispatchEvent(new Event("beforestick", { cancelable: !0 }));
+		}
+		_dispatchBeforeUnStickEvent() {
+			return this.dispatchEvent(new Event("beforeunstick", { cancelable: !0 }));
+		}
+		render() {
+			return r`
+      <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
+        <div class="sbb-sticky-bar">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="sbb-sticky-bar__intersector"></div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { f as t };

package/styles-DpIXFSVm.js

@@ -0,0 +1,5 @@
+import { css as e } from "lit";
+//#region src/elements/tabs/common/tab-group-common.scss?lit&inline
+var t = e`:host{flex-direction:column;display:flex}: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{flex-wrap:wrap;display:flex}`, n = e`: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{align-items:center;gap:var(--sbb-tab-label-gap);color:var(--sbb-tab-label-color);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);-webkit-text-decoration:var(--sbb-tab-label-text-decoration);text-decoration:var(--sbb-tab-label-text-decoration);margin:0;display:flex;position:relative}:host(sbb-tab-nav-bar) ::slotted(a):after,:host(sbb-tab-label) .sbb-tab-label:after{content:"";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;position:absolute;inset-block-end:0;inset-inline:0}: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:"";width:var(--sbb-tab-group-width);height:var(--sbb-border-width-1x);background-color:var(--sbb-tab-label-line-color);position:absolute;inset-block-end:0;inset-inline-start:0}: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)}`;
+//#endregion
+export { t as n, n as t };

package/styles-uZGSPqgK.js

@@ -0,0 +1,5 @@
+import { css as e } from "lit";
+//#region src/elements/sidebar/common/sidebar-container-common.scss?lit&inline
+var t = e`:host{position:absolute;inset:0}`, n = e`:host{outline-color:var(--sbb-focus-outline-color);height:100%;display:block;position:relative;overflow:auto}`, r = e`:host{--sbb-icon-sidebar-button-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-icon-sidebar-button-transition-easing-function:var(--sbb-animation-easing);--sbb-icon-sidebar-button-dimension:var(--sbb-size-element-m);--sbb-icon-sidebar-button-border-radius:var(--sbb-border-radius-4x);--sbb-icon-sidebar-button-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-graphite));--sbb-icon-sidebar-button-current-color:var(--sbb-color-3);--sbb-icon-sidebar-button-current-border-width:var(--sbb-border-width-3x);--sbb-icon-sidebar-button-current-border-inset-block:var(--sbb-spacing-fixed-2x);--sbb-icon-sidebar-button__current-border-inset-inline-start:0;--sbb-icon-sidebar-button__color:var(--sbb-icon-sidebar-button-color);display:block;outline:none!important}@media (forced-colors:active){:host{--sbb-icon-sidebar-button-current-color:Highlight!important}:host(:is(:state(button),[state--button])){--sbb-icon-sidebar-button-color:ButtonText!important}:host(:is(:state(link),[state--link])){--sbb-icon-sidebar-button-color:LinkText!important}}@media (any-hover:hover){:host(:not(:active,:is(:state(active),[state--active])):hover){--sbb-icon-sidebar-button__hover-shift:.0625rem;--sbb-icon-sidebar-button__cursor:var(--sbb-cursor-pointer)}}.sbb-action-base{width:100%;height:var(--sbb-icon-sidebar-button-dimension);padding-block:0 calc(2 * var(--sbb-icon-sidebar-button__hover-shift,0rem));color:var(--sbb-icon-sidebar-button__color);border-radius:var(--sbb-icon-sidebar-button-border-radius);cursor:var(--sbb-icon-sidebar-button__cursor);-webkit-user-select:none;user-select:none;transition-duration:var(--sbb-icon-sidebar-button-transition-duration);transition-timing-function:var(--sbb-icon-sidebar-button-transition-easing-function);justify-content:center;align-items:center;transition-property:color,padding;display:flex;position:relative}:host(.sbb-active) .sbb-action-base{color:var(--sbb-icon-sidebar-button-current-color)}:host(.sbb-active) .sbb-action-base:before{content:"";inset-block:var(--sbb-icon-sidebar-button-current-border-inset-block);inset-inline:var(--sbb-icon-sidebar-button__current-border-inset-inline-start) 0;border-inline-start:var(--sbb-icon-sidebar-button-current-border-width) solid currentcolor;display:block;position:absolute}:host(:focus-visible) .sbb-action-base,.sbb-action-base: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);outline-offset:calc(-1 * var(--sbb-focus-outline-width) - .3125rem)}`;
+//#endregion
+export { n, t as r, r as t };