@sbb-esta/lyne-elements-dev 0.0.0 → 4.0.0-dev.1775551720

package/mini-calendar-day.component-DOMxLDsW.js

@@ -0,0 +1,106 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbButtonBaseElement as a } from "./core/base-elements.js";
+import { forceType as o, omitEmptyConverter as s } from "./core/decorators.js";
+import { readConfig as c } from "./core/config/config.js";
+import "./core/datetime/date-adapter.js";
+import { defaultDateAdapter as l } from "./core/datetime/native-date-adapter.js";
+//#region src/elements/mini-calendar/mini-calendar-day/mini-calendar-day.scss?inline
+var u = ":host{--sbb-mini-calendar-day-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:block;height:var(--sbb-mini-calendar-day-dimensions);width:var(--sbb-mini-calendar-day-dimensions);margin:.0625rem;border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-color-storm);color:light-dark(var(--sbb-color-storm),var(--sbb-color-smoke));background-color:currentcolor}@media(any-hover:hover){:host(:hover){scale:var(--sbb-mini-calendar-day-scale);transition:scale var(--sbb-mini-calendar-day-animation-easing) var(--sbb-mini-calendar-day-animation-duration)}}: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);outline-offset:.125rem}:host([color=charcoal]){color:var(--sbb-background-color-2-inverted)}:host([color=cloud]){color:var(--sbb-background-color-4-inverted)}:host([color=orange]){color:var(--sbb-color-orange-light)}:host([color=red]){color:var(--sbb-color-error)}:host([color=sky]){color:var(--sbb-color-sky-light)}:host([marker=circle]){background-color:var(--sbb-color-1-inverted);border:.0625rem solid currentcolor}:host([marker=target]){background:radial-gradient(circle,currentcolor 0%,currentcolor 25%,var(--sbb-color-1-inverted) 25%,var(--sbb-color-1-inverted) 50%,currentcolor 50%,currentcolor 100%)}:host([marker=slash]){position:relative}:host([marker=slash]):before{content:\"\";position:absolute;inset:0;background-image:linear-gradient(-45deg,transparent 45%,var(--sbb-color-1-inverted) 45%,var(--sbb-color-1-inverted) 55%,transparent 55%)}:host([marker=cross]){position:relative}:host([marker=cross]):before{content:\"\";position:absolute;inset:0;background-image:linear-gradient(-45deg,transparent 45%,var(--sbb-color-1-inverted) 45%,var(--sbb-color-1-inverted) 55%,transparent 55%),linear-gradient(45deg,transparent 45%,var(--sbb-color-1-inverted) 45%,var(--sbb-color-1-inverted) 55%,transparent 55%)}", d = (() => {
+	let d = a, f, p = [], m = [], h, g = [], _ = [], v, y = [], b = [];
+	return class extends d {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [o(), i()], h = [o(), i({
+				reflect: !0,
+				converter: s
+			})], v = [o(), i({
+				reflect: !0,
+				converter: s
+			})], e(this, null, f, {
+				kind: "accessor",
+				name: "date",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "date" in e,
+					get: (e) => e.date,
+					set: (e, t) => {
+						e.date = t;
+					}
+				},
+				metadata: t
+			}, p, m), e(this, null, h, {
+				kind: "accessor",
+				name: "marker",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "marker" in e,
+					get: (e) => e.marker,
+					set: (e, t) => {
+						e.marker = t;
+					}
+				},
+				metadata: t
+			}, g, _), e(this, null, v, {
+				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
+			}, y, b), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-mini-calendar-day";
+		}
+		static {
+			this.styles = r(u);
+		}
+		#e;
+		get date() {
+			return this.#e;
+		}
+		set date(e) {
+			this.#e = e;
+		}
+		#t;
+		get marker() {
+			return this.#t;
+		}
+		set marker(e) {
+			this.#t = e;
+		}
+		#n;
+		get color() {
+			return this.#n;
+		}
+		set color(e) {
+			this.#n = e;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("date") && this.date && (this.internals.ariaLabel = this._dateAdapter.getAccessibilityFormatDate(this.date));
+		}
+		renderTemplate() {
+			return n``;
+		}
+		constructor() {
+			super(...arguments), this._dateAdapter = c().datetime?.dateAdapter ?? l, this.#e = t(this, p, ""), this.#t = (t(this, m), t(this, g, "")), this.#n = (t(this, _), t(this, y, "")), t(this, b);
+		}
+	};
+})();
+//#endregion
+export { d as t };

package/mini-calendar-month.component-BAN0k3N6.js

@@ -0,0 +1,74 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS 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 { boxSizingStyles as s } from "./core/styles.js";
+import { SbbPropertyWatcherController as c } from "./core/controllers.js";
+import { readConfig as l } from "./core/config/config.js";
+import "./core/datetime/date-adapter.js";
+import { defaultDateAdapter as u } from "./core/datetime/native-date-adapter.js";
+//#region src/elements/mini-calendar/mini-calendar-month/mini-calendar-month.scss?inline
+var d = ":host{display:inline-block}:host(:is(:state(show-year),[state--show-year])){--sbb-mini-calendar-month-visibilty-year: visible}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-mini-calendar-month-grid-auto-flow: row;--sbb-mini-calendar-month-height: 3rem;--sbb-mini-calendar-month-grid-template-rows: none;--sbb-mini-calendar-month-grid-template-columns: repeat(7, 1fr)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) ::slotted(sbb-mini-calendar-day:first-child){grid-column-start:var(--sbb-mini-calendar-month-offset)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){--sbb-mini-calendar-month-grid-auto-flow: column;--sbb-mini-calendar-month-height: auto;--sbb-mini-calendar-month-grid-template-rows: repeat(7, 1fr);--sbb-mini-calendar-month-grid-template-columns: none}:host(:is(:state(orientation-vertical),[state--orientation-vertical])) ::slotted(sbb-mini-calendar-day:first-child){grid-row-start:var(--sbb-mini-calendar-month-offset)}.sbb-mini-calendar-month-wrapper{display:grid;height:var(--sbb-mini-calendar-month-height);grid-auto-flow:var(--sbb-mini-calendar-month-grid-auto-flow);grid-auto-rows:.5rem;grid-template-columns:var(--sbb-mini-calendar-month-grid-template-columns);grid-template-rows:var(--sbb-mini-calendar-month-grid-template-rows)}.sbb-mini-calendar-month-label-year,.sbb-mini-calendar-month-label-month{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);color:var(--sbb-mini-calendar-month-label-color)}.sbb-mini-calendar-month-label-year{visibility:var(--sbb-mini-calendar-month-visibilty-year)}", f = (() => {
+	let f = a, p, m = [], h = [];
+	return class extends f {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [o(), i()], e(this, null, p, {
+				kind: "accessor",
+				name: "date",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "date" in e,
+					get: (e) => e.date,
+					set: (e, t) => {
+						e.date = t;
+					}
+				},
+				metadata: t
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-mini-calendar-month";
+		}
+		static {
+			this.styles = [s, r(d)];
+		}
+		#e;
+		get date() {
+			return this.#e;
+		}
+		set date(e) {
+			this.#e = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, m, ""), this._dateAdapter = (t(this, h), l().datetime?.dateAdapter ?? u), this._monthNames = this._dateAdapter.getMonthNames("short"), this._monthLabel = null, this._yearLabel = null, this._previousOrientation = null, this.addController(new c(this, () => this.closest("sbb-mini-calendar"), { orientation: (e) => {
+				this._previousOrientation && this.internals.states.delete(`orientation-${this._previousOrientation}`), this._previousOrientation = e.orientation, this._previousOrientation && this.internals.states.add(`orientation-${this._previousOrientation}`);
+			} }));
+		}
+		willUpdate(e) {
+			if (super.willUpdate(e), e.has("date") && this.date) {
+				if (!this.date.match(/^\d{4}-(0[1-9]|1[0-2])$/)) return;
+				let e = this.date.split("-"), t = this._dateAdapter.createDate(+e[0], +e[1], 1), n = this._dateAdapter.getFirstWeekOffset(t);
+				this.style?.setProperty("--sbb-mini-calendar-month-offset", `${n + 1}`), this._monthLabel = `${this._monthNames[e[1] - 1]}.`, this._yearLabel = String(this._dateAdapter.getYear(t));
+			}
+		}
+		render() {
+			return n`
+      <div class="sbb-mini-calendar-month-label-year">${this._yearLabel}</div>
+      <div class="sbb-mini-calendar-month-wrapper">
+        <slot></slot>
+      </div>
+      <div class="sbb-mini-calendar-month-label-month">${this._monthLabel}</div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { f as t };

package/mini-calendar.component-DJfOT7ir.js

@@ -0,0 +1,144 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { ɵstateController as o } from "./core/mixins.js";
+import { isArrowKeyOrPageKeysPressed as s } from "./core/a11y.js";
+import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
+import { readConfig as l } from "./core/config/config.js";
+import { defaultDateAdapter as u } from "./core/datetime/native-date-adapter.js";
+//#region src/elements/mini-calendar/mini-calendar/mini-calendar.scss?inline
+var d = ":host{display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x)}", f = (() => {
+	let f = a, p, m = [], h = [];
+	return class extends f {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [i({ reflect: !0 })], e(this, null, p, {
+				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
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-mini-calendar";
+		}
+		static {
+			this.styles = r(d);
+		}
+		#e;
+		get orientation() {
+			return this.#e;
+		}
+		set orientation(e) {
+			this.#e = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, m, "horizontal"), this._keydownAbortController = (t(this, h), null), this._dateAdapter = l().datetime?.dateAdapter ?? u, this.addController(new c(this, {
+				config: {
+					childList: !0,
+					subtree: !0
+				},
+				callback: () => this._setMonthsShowYear()
+			}));
+		}
+		_getMiniCalendarMonths() {
+			return Array.from(this.querySelectorAll?.("sbb-mini-calendar-month") ?? []);
+		}
+		_getMiniCalendarDays() {
+			return Array.from(this._getMiniCalendarMonths().flatMap((e) => Array.from(e.querySelectorAll?.("sbb-mini-calendar-day") ?? [])));
+		}
+		_setMonthsShowYear() {
+			this._getMiniCalendarMonths().forEach((e, t) => {
+				let n = e.date.split("-");
+				n.length > 0 && (t === 0 || +n[1] == 1 ? o(e).add("show-year") : o(e).delete("show-year"));
+			});
+		}
+		_handleKeydownCalendarDay(e) {
+			s(e) && e.preventDefault();
+			let t = this._getMiniCalendarDays(), n = t.find((t) => t === e.target), r = this._navigateByKeyboardDayView(t, n, e), i = document.activeElement;
+			r !== i && (r.tabIndex = 0, r?.focus(), i.tabIndex = -1);
+		}
+		_navigateByKeyboardDayView(e, t, n) {
+			let r = this.orientation === "horizontal" ? {
+				leftRight: 1,
+				upDown: 7
+			} : {
+				leftRight: 7,
+				upDown: 1
+			}, i = this._dateAdapter.parse(t.date), a = this._dateAdapter.getDate(i), o = this._dateAdapter.getFirstWeekOffset(i);
+			switch (n.key) {
+				case "ArrowUp": return this._findDayArrowKeys(e, t, -r.upDown);
+				case "ArrowDown": return this._findDayArrowKeys(e, t, r.upDown);
+				case "ArrowLeft": return this._findDayArrowKeys(e, t, -r.leftRight);
+				case "ArrowRight": return this._findDayArrowKeys(e, t, r.leftRight);
+				case "PageUp": if (this.orientation === "horizontal") {
+					let n = a - (a % 7 || 7);
+					return this._findDaySpecialKeys(e, t, -n, r.upDown);
+				} else {
+					let n = (Math.ceil((a + o) / 7) - 1) * 7 - o + 1 - a;
+					return this._findDaySpecialKeys(e, t, n, r.upDown);
+				}
+				case "PageDown": if (this.orientation === "horizontal") {
+					let n = this._dateAdapter.getNumDaysInMonth(i), o = n - a - (n - a) % 7;
+					return this._findDaySpecialKeys(e, t, o, -r.upDown);
+				} else {
+					let n = Math.ceil((a + o) / 7) * 7 - o - a;
+					return this._findDaySpecialKeys(e, t, n, -r.upDown);
+				}
+				case "Home": {
+					let n = a - 1;
+					return this._findDaySpecialKeys(e, t, -n, 1);
+				}
+				case "End": {
+					let n = this._dateAdapter.getNumDaysInMonth(i);
+					return this._findDaySpecialKeys(e, t, n - a, -1);
+				}
+				default: return t;
+			}
+		}
+		_findDayArrowKeys(e, t, n) {
+			let r = this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date), n), i = this._dateAdapter.toIso8601(r);
+			return e.find((e) => e.date === i) || t;
+		}
+		_findDaySpecialKeys(e, t, n, r) {
+			let i = this._dateAdapter.addCalendarDays(this._dateAdapter.deserialize(t.date), n), a = this._dateAdapter.toIso8601(i);
+			return e.find((e) => e.date === a) || this._findDaySpecialKeys(e, t, n + r, r);
+		}
+		_handleSlotchange() {
+			this._setupKeydownListener();
+		}
+		_setupKeydownListener() {
+			this._keydownAbortController?.abort(), this._keydownAbortController = new AbortController(), this._getMiniCalendarDays().forEach((e, t) => {
+				e.addEventListener("keydown", (e) => this._handleKeydownCalendarDay(e), { signal: this._keydownAbortController.signal }), t !== 0 && (e.tabIndex = -1);
+			});
+		}
+		focus() {
+			this._getMiniCalendarDays()?.find((e) => e.tabIndex === 0)?.focus();
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._setupKeydownListener();
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._keydownAbortController?.abort();
+		}
+		render() {
+			return n`<slot @slotchange=${this._handleSlotchange}></slot>`;
+		}
+	};
+})();
+//#endregion
+export { f as t };

package/mini-calendar.js

@@ -0,0 +1,7 @@
+import { t as e } from "./mini-calendar-day.component-DOMxLDsW.js";
+import { t } from "./mini-calendar-month.component-BAN0k3N6.js";
+import { t as n } from "./mini-calendar.component-DJfOT7ir.js";
+import "./mini-calendar.pure.js";
+n.define(), e.define(), t.define();
+//#endregion
+export { e as SbbMiniCalendarDayElement, n as SbbMiniCalendarElement, t as SbbMiniCalendarMonthElement };

package/mini-calendar.pure.js

@@ -0,0 +1,4 @@
+import { t as e } from "./mini-calendar-day.component-DOMxLDsW.js";
+import { t } from "./mini-calendar-month.component-BAN0k3N6.js";
+import { t as n } from "./mini-calendar.component-DJfOT7ir.js";
+export { e as SbbMiniCalendarDayElement, n as SbbMiniCalendarElement, t as SbbMiniCalendarMonthElement };

package/navigation/common/navigation-action-common.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../navigation-action-common-2ix0xrBs.js";
+export { e as SbbNavigationActionCommonElementMixin };

package/navigation/common.js

@@ -0,0 +1,5 @@
+import { t as e } from "../navigation-action-common-2ix0xrBs.js";
+//#region src/elements/navigation/common.ts
+console.warn("The entrypoint '@sbb-esta/elements/navigation/common.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationActionCommonElementMixin };

package/navigation/navigation/navigation.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../navigation.component-D3xUqPZB.js";
+export { e as SbbNavigationElement };

package/navigation/navigation-button/navigation-button.component.js

@@ -0,0 +1,10 @@
+import { SbbButtonBaseElement as e } from "../../core/base-elements.js";
+import { SbbNavigationActionCommonElementMixin as t } from "../common/navigation-action-common.js";
+//#region src/elements/navigation/navigation-button/navigation-button.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-navigation-button";
+	}
+};
+//#endregion
+export { n as SbbNavigationButtonElement };

package/navigation/navigation-button.js

@@ -0,0 +1,4 @@
+import { SbbNavigationButtonElement as e } from "./navigation-button/navigation-button.component.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-button.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationButtonElement };

package/navigation/navigation-link/navigation-link.component.js

@@ -0,0 +1,10 @@
+import { SbbLinkBaseElement as e } from "../../core/base-elements.js";
+import { SbbNavigationActionCommonElementMixin as t } from "../common/navigation-action-common.js";
+//#region src/elements/navigation/navigation-link/navigation-link.component.ts
+var n = class extends t(e) {
+	static {
+		this.elementName = "sbb-navigation-link";
+	}
+};
+//#endregion
+export { n as SbbNavigationLinkElement };

package/navigation/navigation-link.js

@@ -0,0 +1,4 @@
+import { SbbNavigationLinkElement as e } from "./navigation-link/navigation-link.component.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-link.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationLinkElement };

package/navigation/navigation-list/navigation-list.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../navigation-list.component-BIl68kYy.js";
+export { e as SbbNavigationListElement };

package/navigation/navigation-list.js

@@ -0,0 +1,4 @@
+import { t as e } from "../navigation-list.component-BIl68kYy.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-list.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationListElement };

package/navigation/navigation-marker/navigation-marker.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../navigation-marker.component-DKxK16IU.js";
+export { e as SbbNavigationMarkerElement };

package/navigation/navigation-marker.js

@@ -0,0 +1,4 @@
+import { t as e } from "../navigation-marker.component-DKxK16IU.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-marker.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationMarkerElement };

package/navigation/navigation-section/navigation-section.component.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../navigation-section.component-CvjXVn5r.js";
+export { e as SbbNavigationSectionElement };

package/navigation/navigation-section.js

@@ -0,0 +1,4 @@
+import { t as e } from "../navigation-section.component-CvjXVn5r.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation-section.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationSectionElement };

package/navigation/navigation.js

@@ -0,0 +1,4 @@
+import { t as e } from "../navigation.component-D3xUqPZB.js";
+e.define(), console.warn("The entrypoint '@sbb-esta/elements/navigation/navigation.js' has been deprecated.\nUse either '@sbb-esta/elements/navigation.js' or '@sbb-esta/elements/navigation.pure.js' instead.");
+//#endregion
+export { e as SbbNavigationElement };

package/navigation-action-common-2ix0xrBs.js

@@ -0,0 +1,64 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { isLean as i } from "./core/dom.js";
+import { boxSizingStyles as a } from "./core/styles.js";
+import { html as o } from "lit/static-html.js";
+import "./icon.js";
+//#region src/elements/navigation/common/navigation-action.scss?inline
+var s = ":host{--sbb-navigation-action-color: var(--sbb-color-4-negative);--sbb-navigation-action-icon-display: none;display:block;outline:none!important}:host(:is(:state(section-action),[state--section-action]):is(:state(action-active),[state--action-active]).sbb-active){--sbb-navigation-action-icon-display: block}:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color: var(--sbb-color-5)}@media(forced-colors:active){:host(:is(:state(action-active),[state--action-active])){--sbb-navigation-action-color: Highlight}}sbb-icon{display:var(--sbb-navigation-action-icon-display);position:absolute;inset-inline-start:calc((var(--sbb-size-icon-ui-small) + var(--sbb-spacing-fixed-1x)) * -1);inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2);translate:0 -50%}@media(any-hover:hover){:host(:hover){--sbb-navigation-action-color: var(--sbb-color-5)}}@media(forced-colors:active){:host(:is(:state(button),[state--button])){--sbb-navigation-action-color: ButtonText}}:is(.sbb-navigation-button,.sbb-navigation-link){--sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));margin-block:var(--sbb-title-margin-block, 0);margin-inline:0;font-family:var(--sbb-typo-font-family);font-weight:700;line-height:var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));letter-spacing:var(--sbb-typo-letter-spacing-heading);font-size:var(--sbb-title-font-size);cursor:var(--sbb-cursor-pointer);position:relative;text-decoration:none;display:flex;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease;-webkit-hyphens:auto;hyphens:auto;text-align:left;color:var(--sbb-navigation-action-color);outline:none}@media(forced-colors:active){:is(.sbb-navigation-button,.sbb-navigation-link){transition:none}}:host([size=m]) :is(.sbb-navigation-button,.sbb-navigation-link){--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);font-weight:700}:host([size=s]) :is(.sbb-navigation-button,.sbb-navigation-link){--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}:host(:focus-visible) :is(.sbb-navigation-button,.sbb-navigation-link),:is(.sbb-navigation-button,.sbb-navigation-link):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:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}", c = (c) => (() => {
+	let l = c, u, d = [], f = [];
+	return class extends l {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			u = [r({ reflect: !0 })], e(this, null, u, {
+				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
+			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.styles = [a, n(s)];
+		}
+		#e;
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		get marker() {
+			return this._navigationMarker;
+		}
+		get section() {
+			return this._navigationSection;
+		}
+		constructor(...e) {
+			super(...e), this.#e = t(this, d, i() ? "s" : "l"), this.connectedSection = t(this, f), this._navigationMarker = null, this._navigationSection = null, this.addEventListener?.("click", () => {
+				!this.matches(":is(:state(action-active),[state--action-active])") && this._navigationMarker && !this.connectedSection && this.marker?.select(this);
+			});
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._navigationMarker = this.closest("sbb-navigation-marker"), this._navigationSection = this.closest("sbb-navigation-section"), this.toggleState("section-action", !!this._navigationSection);
+		}
+		renderTemplate() {
+			return o`<sbb-icon name="dash-small"></sbb-icon> <slot></slot>`;
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/navigation-list.component-BIl68kYy.js

@@ -0,0 +1,71 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS 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, omitEmptyConverter as s } from "./core/decorators.js";
+import { isLean as c } from "./core/dom.js";
+import { SbbNamedSlotListMixin as l } from "./core/mixins.js";
+import { boxSizingStyles as u } from "./core/styles.js";
+//#region src/elements/navigation/navigation-list/navigation-list.scss?inline
+var d = ":host{display:block}.sbb-navigation-list__content{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-spacing-fixed-2x);margin-block:var(--sbb-spacing-fixed-1x)}.sbb-navigation-list__label{--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;display:block;color:var(--sbb-color-5);padding-block-end:var(--sbb-spacing-fixed-2x)}:host(:not(:is(:state(slotted-label),[state--slotted-label]),[label])) .sbb-navigation-list__label{display:none}", f = (() => {
+	let f = l(a), p, m = [], h = [];
+	return class extends f {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [o(), i({
+				reflect: !0,
+				converter: s
+			})], e(this, null, p, {
+				kind: "accessor",
+				name: "label",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "label" in e,
+					get: (e) => e.label,
+					set: (e, t) => {
+						e.label = t;
+					}
+				},
+				metadata: t
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation-list";
+		}
+		static {
+			this.styles = [u, r(d)];
+		}
+		#e;
+		get label() {
+			return this.#e;
+		}
+		set label(e) {
+			this.#e = e;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("listChildren") && this.listChildren.forEach((e) => e.size = c() ? "s" : "m");
+		}
+		render() {
+			return n`
+      <span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">
+        <slot name="label">${this.label}</slot>
+      </span>
+      ${this.renderList({
+				class: "sbb-navigation-list__content",
+				ariaLabelledby: "sbb-navigation-link-label-id"
+			})}
+    `;
+		}
+		constructor() {
+			super(...arguments), this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"], this.#e = t(this, m, ""), t(this, h);
+		}
+	};
+})();
+//#endregion
+export { f as t };