@sbb-esta/lyne-elements 4.8.1 → 4.10.0

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-DTod_RRs.js → mini-calendar-month.component-BAN0k3N6.js}

@@ -1,5 +1,5 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r } from "lit";
+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";
@@ -8,13 +8,13 @@ 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?lit&inline
-var d = n`: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{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);display:grid}.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 n = a, f, p = [], m = [];
-	return class extends n {
+//#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(n[Symbol.metadata] ?? null) : void 0;
-			f = [o(), i()], e(this, null, f, {
+			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,
@@ -27,7 +27,7 @@ var d = n`:host{display:inline-block}:host(:is(:state(show-year),[state--show-ye
 					}
 				},
 				metadata: t
-			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -38,7 +38,7 @@ var d = n`:host{display:inline-block}:host(:is(:state(show-year),[state--show-ye
 			this.elementName = "sbb-mini-calendar-month";
 		}
 		static {
-			this.styles = [s, d];
+			this.styles = [s, r(d)];
 		}
 		#e;
 		get date() {
@@ -48,7 +48,7 @@ var d = n`:host{display:inline-block}:host(:is(:state(show-year),[state--show-ye
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, p, ""), this._dateAdapter = (t(this, m), 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) => {
+			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}`);
 			} }));
 		}
@@ -60,7 +60,7 @@ var d = n`:host{display:inline-block}:host(:is(:state(show-year),[state--show-ye
 			}
 		}
 		render() {
-			return r`
+			return n`
       <div class="sbb-mini-calendar-month-label-year">${this._yearLabel}</div>
       <div class="sbb-mini-calendar-month-wrapper">
         <slot></slot>

package/{mini-calendar.component-BCDHUUZG.js → mini-calendar.component-DJfOT7ir.js}

@@ -1,5 +1,5 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r } from "lit";
+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";
@@ -7,13 +7,13 @@ 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?lit&inline
-var d = n`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex-wrap:wrap;display:flex}`, f = (() => {
-	let n = a, f, p = [], m = [];
-	return class extends n {
+//#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(n[Symbol.metadata] ?? null) : void 0;
-			f = [i({ reflect: !0 })], e(this, null, f, {
+			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,
@@ -26,7 +26,7 @@ var d = n`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex
 					}
 				},
 				metadata: t
-			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -37,7 +37,7 @@ var d = n`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex
 			this.elementName = "sbb-mini-calendar";
 		}
 		static {
-			this.styles = d;
+			this.styles = r(d);
 		}
 		#e;
 		get orientation() {
@@ -47,7 +47,7 @@ var d = n`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, p, "horizontal"), this._keydownAbortController = (t(this, m), null), this._dateAdapter = l().datetime?.dateAdapter ?? u, this.addController(new c(this, {
+			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
@@ -136,7 +136,7 @@ var d = n`:host{gap:var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x);flex
 			super.disconnectedCallback(), this._keydownAbortController?.abort();
 		}
 		render() {
-			return r`<slot @slotchange=${this._handleSlotchange}></slot>`;
+			return n`<slot @slotchange=${this._handleSlotchange}></slot>`;
 		}
 	};
 })();

package/mini-calendar.js

@@ -1,6 +1,6 @@
-import { t as e } from "./mini-calendar-day.component-Tj7wlWj7.js";
-import { t } from "./mini-calendar-month.component-DTod_RRs.js";
-import { t as n } from "./mini-calendar.component-BCDHUUZG.js";
+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

package/mini-calendar.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./mini-calendar-day.component-Tj7wlWj7.js";
-import { t } from "./mini-calendar-month.component-DTod_RRs.js";
-import { t as n } from "./mini-calendar.component-BCDHUUZG.js";
+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

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

package/navigation/common.js

@@ -1,4 +1,4 @@
-import { t as e } from "../navigation-action-common-D_-gGOYm.js";
+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

package/navigation/navigation/navigation.component.js

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

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

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

package/navigation/navigation-list.js

@@ -1,4 +1,4 @@
-import { t as e } from "../navigation-list.component-DnB7FrKG.js";
+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

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

package/navigation/navigation-marker.js

@@ -1,4 +1,4 @@
-import { t as e } from "../navigation-marker.component-B7hmb9iS.js";
+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

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

package/navigation/navigation-section.js

@@ -1,4 +1,4 @@
-import { t as e } from "../navigation-section.component-C86pkDLG.js";
+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

@@ -1,4 +1,4 @@
-import { t as e } from "../navigation.component-BzgTWUiD.js";
+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-DnB7FrKG.js → navigation-list.component-BIl68kYy.js}

@@ -1,21 +1,21 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r } from "lit";
+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?lit&inline
-var d = n`:host{display:block}.sbb-navigation-list__content{font-size:inherit;align-items:flex-start;gap:var(--sbb-spacing-fixed-2x);margin:0;margin-block:var(--sbb-spacing-fixed-1x);flex-direction:column;padding:0;list-style:none;display:flex}.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);color:var(--sbb-color-5);padding-block-end:var(--sbb-spacing-fixed-2x);font-weight:700;display:block}:host(:not(:is(:state(slotted-label),[state--slotted-label]),[label])) .sbb-navigation-list__label{display:none}`, f = (() => {
-	let n = l(a), f, p = [], m = [];
-	return class extends n {
+//#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(n[Symbol.metadata] ?? null) : void 0;
-			f = [o(), i({
+			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, f, {
+			})], e(this, null, p, {
 				kind: "accessor",
 				name: "label",
 				static: !1,
@@ -28,7 +28,7 @@ var d = n`:host{display:block}.sbb-navigation-list__content{font-size:inherit;al
 					}
 				},
 				metadata: t
-			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+			}, m, h), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -39,7 +39,7 @@ var d = n`:host{display:block}.sbb-navigation-list__content{font-size:inherit;al
 			this.elementName = "sbb-navigation-list";
 		}
 		static {
-			this.styles = [u, d];
+			this.styles = [u, r(d)];
 		}
 		#e;
 		get label() {
@@ -52,7 +52,7 @@ var d = n`:host{display:block}.sbb-navigation-list__content{font-size:inherit;al
 			super.willUpdate(e), e.has("listChildren") && this.listChildren.forEach((e) => e.size = c() ? "s" : "m");
 		}
 		render() {
-			return r`
+			return n`
       <span class="sbb-navigation-list__label" id="sbb-navigation-link-label-id">
         <slot name="label">${this.label}</slot>
       </span>
@@ -63,7 +63,7 @@ var d = n`:host{display:block}.sbb-navigation-list__content{font-size:inherit;al
     `;
 		}
 		constructor() {
-			super(...arguments), this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"], this.#e = t(this, p, ""), t(this, m);
+			super(...arguments), this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"], this.#e = t(this, m, ""), t(this, h);
 		}
 	};
 })();

package/navigation-marker.component-DKxK16IU.js

@@ -0,0 +1,88 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbElement as i } from "./core/base-elements.js";
+import { isLean as a } from "./core/dom.js";
+import { SbbNamedSlotListMixin as o, ɵstateController as s } from "./core/mixins.js";
+import { boxSizingStyles as c } from "./core/styles.js";
+import { ResizeController as l } from "@lit-labs/observers/resize-controller.js";
+//#region src/elements/navigation/navigation-marker/navigation-marker.scss?inline
+var u = ":host{--sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);--sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);--sbb-navigation-marker-position-y: unset;--sbb-navigation-marker-width: 1.0625rem;--sbb-navigation-marker-border: var(--sbb-border-width-1x);--sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);--sbb-navigation-marker-margin-block: calc( 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 );display:block}:host([size=s]){--sbb-navigation-action-gap: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-width: .5rem;--sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-text);--sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-2x);--sbb-navigation-marker-position-x: calc( var(--sbb-navigation-marker-padding-inline-start) - var(--sbb-spacing-fixed-2x) );--sbb-navigation-marker-padding-inline-start: calc( var(--sbb-spacing-fixed-6x) + var(--sbb-spacing-fixed-1x) )}.sbb-navigation-marker{list-style:none;margin:0;padding:0;font-size:inherit;--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);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sbb-navigation-action-gap);padding-inline-start:var(--sbb-navigation-marker-padding-inline-start)}.sbb-navigation-marker:before{content:\"\";position:absolute;opacity:0;inset-inline-start:var(--sbb-navigation-marker-position-x);inset-block-start:var(--sbb-navigation-marker-position-y);width:var(--sbb-navigation-marker-width);border-block-start:var(--sbb-navigation-marker-border) solid var(--sbb-color-5);margin-block:var(--sbb-navigation-marker-margin-block);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-6x));transition-timing-function:ease;transition-property:opacity,inset-block-start}:host(:is(:state(has-active-action),[state--has-active-action])) .sbb-navigation-marker:before{opacity:1}@media(forced-colors:active){.sbb-navigation-marker:before{border-color:CanvasText}}:host([size=s]) .sbb-navigation-marker{--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}::slotted(:is(sbb-navigation-button,sbb-navigation-link)){margin-inline-start:var(--sbb-navigation-margin-inline-start)}", d = (() => {
+	let d = o(i), f, p = [], m = [];
+	return class extends d {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [r({ reflect: !0 })], e(this, null, f, {
+				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
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-navigation-marker";
+		}
+		static {
+			this.styles = [c, n(u)];
+		}
+		#e;
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		constructor() {
+			super(), this.listChildLocalNames = ["sbb-navigation-button", "sbb-navigation-link"], this.#e = t(this, p, a() ? "s" : "l"), this._currentActiveAction = t(this, m), this.addController(new l(this, {
+				skipInitial: !0,
+				callback: () => this._setMarkerPosition()
+			}));
+		}
+		willUpdate(e) {
+			super.willUpdate(e), (e.has("size") || e.has("listChildren")) && this._updateMarkerActions(), this.toggleState("has-active-action", !!this._currentActiveAction);
+		}
+		_updateMarkerActions() {
+			for (let e of this.listChildren) e.size = this.size;
+			this._currentActiveAction = this.listChildren.find((e) => e.matches(":is(:state(action-active),[state--action-active])")), this._setMarkerPosition();
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._checkActiveAction();
+		}
+		_checkActiveAction() {
+			let e = this.querySelector(":is(sbb-navigation-button, sbb-navigation-link).sbb-active");
+			e && this.select(e);
+		}
+		select(e) {
+			e && (this.reset(), s(e).add("action-active"), this._currentActiveAction = e, setTimeout(() => this._setMarkerPosition()));
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), setTimeout(() => this._setMarkerPosition());
+		}
+		reset() {
+			this._currentActiveAction &&= (s(this._currentActiveAction).delete("action-active"), this._currentActiveAction.connectedSection?.close(), void 0);
+		}
+		_setMarkerPosition() {
+			if (!this._currentActiveAction) return;
+			let e = this.listChildren.indexOf(this._currentActiveAction), t = this.shadowRoot.querySelector(`li:nth-child(${e + 1})`)?.offsetTop;
+			t != null && this.style?.setProperty("--sbb-navigation-marker-position-y", `${t}px`);
+		}
+		render() {
+			return this.renderList();
+		}
+	};
+})();
+//#endregion
+export { d as t };