@sbb-esta/lyne-elements 5.0.0-next.1 → 5.0.0-next.2

package/{calendar.component-nWdtZYqg.js → calendar.component-oS_T4s4k.js}

@@ -1,16 +1,16 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
 import { property as o, state as s } from "lit/decorators.js";
-import { DAYS_PER_ROW as c, MONDAY as l, MONTHS_PER_PAGE as ee, MONTHS_PER_ROW as u, SbbElement as te, SbbLanguageController as ne, SbbMediaMatcherController as re, SbbMediaQueryBreakpointLargeAndAbove as d, SbbScreenReaderOnlyElement as ie, THURSDAY as ae, TUESDAY as oe, WEDNESDAY as se, YEARS_PER_PAGE as f, YEARS_PER_ROW as p, boxSizingStyles as ce, defaultDateAdapter as le, forceType as m, handleDistinctChange as ue, i18nCalendarDateSelection as h, i18nCalendarWeekNumber as g, i18nNextMonth as de, i18nNextYear as fe, i18nNextYearRange as pe, i18nPreviousMonth as me, i18nPreviousYear as he, i18nPreviousYearRange as ge, i18nYearMonthSelection as _e, isArrowKeyOrPageKeysPressed as ve, plainDate as _, readConfig as ye } from "./core.js";
-import { SbbSecondaryButtonElement as be } from "./button.pure.js";
-import { SbbIconElement as xe } from "./icon.pure.js";
-import { SbbCalendarDayElement as Se } from "./calendar/calendar-day/calendar-day.component.js";
-import { SbbCalendarMonthElement as Ce } from "./calendar/calendar-month/calendar-month.component.js";
-import { SbbCalendarWeekdayElement as we } from "./calendar/calendar-weekday/calendar-weekday.component.js";
-import { SbbCalendarWeeknumberElement as Te } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { SbbCalendarYearElement as Ee } from "./calendar/calendar-year/calendar-year.component.js";
+import { DAYS_PER_ROW as c, MONDAY as l, MONTHS_PER_PAGE as ee, MONTHS_PER_ROW as u, SbbElement as te, SbbLanguageController as ne, SbbMediaMatcherController as re, SbbMediaQueryBreakpointLargeAndAbove as d, THURSDAY as ie, TUESDAY as ae, WEDNESDAY as oe, YEARS_PER_PAGE as f, YEARS_PER_ROW as p, defaultDateAdapter as se, forceType as m, handleDistinctChange as ce, i18nCalendarDateSelection as h, i18nCalendarWeekNumber as g, i18nNextMonth as le, i18nNextYear as ue, i18nNextYearRange as de, i18nPreviousMonth as fe, i18nPreviousYear as pe, i18nPreviousYearRange as me, i18nYearMonthSelection as he, isArrowKeyOrPageKeysPressed as ge, plainDate as _, readConfig as _e, screenReaderOnlyStyles as ve } from "./core.js";
+import { SbbSecondaryButtonElement as ye } from "./button.pure.js";
+import { SbbIconElement as be } from "./icon.pure.js";
+import { SbbCalendarDayElement as xe } from "./calendar/calendar-day/calendar-day.component.js";
+import { SbbCalendarMonthElement as Se } from "./calendar/calendar-month/calendar-month.component.js";
+import { SbbCalendarWeekdayElement as Ce } from "./calendar/calendar-weekday/calendar-weekday.component.js";
+import { SbbCalendarWeeknumberElement as we } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
+import { SbbCalendarYearElement as Te } from "./calendar/calendar-year/calendar-year.component.js";
 //#region src/elements/calendar/calendar/calendar.scss?inline
-var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-height-text);--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-cell-border-radius: calc( var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width) );--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) )}@media(min-width:37.5rem){:host{--sbb-calendar-control-view-change-height: 3rem}}:host(:is(:state(enhanced),[state--enhanced])){--sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x)}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-calendar-control-gap);margin-block-end:var(--sbb-calendar-control-margin-block-end)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-letter-spacing-text);text-transform:capitalize;cursor:var(--sbb-cursor-pointer);padding-inline:var(--sbb-calendar-control-view-change-padding-inline);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date: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:var(--sbb-spacing-fixed-1x)}@media(any-hover:hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-cell-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-overflow-break{contain:layout}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host(:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not(:is(:state(wide),[state--wide]))) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell,.sbb-calendar__table-header-cell-vertical{width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0;font-size:var(--sbb-text-font-size-xs);font-weight:400;letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:not([multiple])) .sbb-calendar__table-header-cell,:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-header-cell-vertical{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__day-cell{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day{--sbb-calendar-cell-justify-content: center;--sbb-calendar-day-height: 2.75rem;--sbb-calendar-day-extra-display: none;--sbb-calendar-day-value-height: unset;--sbb-calendar-day-crossed-out-top: 50%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -50%) rotate(-45deg)}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}", v = class extends Event {
+var Ee = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-height-text);--sbb-calendar-cell-size: 2.75rem;--sbb-calendar-cell-border-radius: calc( var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width) );--sbb-calendar-cell-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) )}@media(min-width:37.5rem){:host{--sbb-calendar-control-view-change-height: 3rem}}:host(:is(:state(enhanced),[state--enhanced])){--sbb-calendar-cell-padding-block-end: var(--sbb-spacing-fixed-3x)}.sbb-calendar__wrapper{width:100%;display:block;transition-duration:var(--sbb-calendar-cell-transition-duration)}.sbb-calendar__controls{width:100%;display:inline-flex;align-items:center;gap:var(--sbb-calendar-control-gap);margin-block-end:var(--sbb-calendar-control-margin-block-end)}.sbb-calendar__controls-month{width:100%;display:flex;gap:var(--sbb-calendar-tables-gap)}#sbb-calendar__controls-previous,#sbb-calendar__controls-next{-webkit-tap-highlight-color:transparent}.sbb-calendar__controls-change-date{appearance:none;box-sizing:border-box;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;display:flex;align-items:center;margin:auto;height:var(--sbb-calendar-control-view-change-height);font-size:var(--sbb-text-font-size-s);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-letter-spacing-text);text-transform:capitalize;cursor:var(--sbb-cursor-pointer);padding-inline:var(--sbb-calendar-control-view-change-padding-inline);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-calendar-control-view-change-background);color:var(--sbb-calendar-control-view-change-color);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);transition-property:background-color,padding-block-end}.sbb-calendar__controls-change-date:disabled{--sbb-calendar-control-view-change-background: var(--sbb-color-milk);--sbb-calendar-control-view-change-background: light-dark( var(--sbb-color-milk), var(--sbb-color-anthracite) );--sbb-calendar-control-view-change-color: var(--sbb-color-granite);--sbb-calendar-control-view-change-color: light-dark( var(--sbb-color-granite), var(--sbb-color-aluminium) );cursor:unset}.sbb-calendar__controls-change-date: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:var(--sbb-spacing-fixed-1x)}@media(any-hover:hover){.sbb-calendar__controls-change-date:not(:active,:disabled):hover{padding-block-end:var(--sbb-calendar-cell-hover-shift)}}.sbb-calendar__controls-change-date:not(:disabled):active{--sbb-calendar-control-view-change-background: var(--sbb-background-color-3)}.sbb-calendar__table-month-view,.sbb-calendar__table-year-view{--sbb-calendar-table-column-spaces: 6}.sbb-calendar__table-overflow-break{contain:layout}.sbb-calendar__table-container{display:flex;gap:var(--sbb-calendar-tables-gap);margin-inline:var(--sbb-calendar-margin);--sbb-calendar-min-width: calc(7 * var(--sbb-calendar-cell-size));--sbb-calendar-overflow: calc(100% - var(--sbb-calendar-min-width));--sbb-calendar-start-offset: min( 0px, -1 * (var(--sbb-calendar-overflow) / var(--sbb-calendar-table-column-spaces)) );--sbb-calendar-margin: var(--sbb-calendar-start-offset)}:host(:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 7 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) );--sbb-calendar-margin: calc(.5 * var(--sbb-calendar-start-offset))}:host([orientation=horizontal][week-numbers]) .sbb-calendar__table-container{--sbb-calendar-min-width: calc(8 * var(--sbb-calendar-cell-size))}:host([orientation=horizontal][week-numbers]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 2 * 8 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}:host([orientation=vertical]) .sbb-calendar__table-container{min-width:var(--sbb-calendar-min-width);--sbb-calendar-start-offset: 0}:host([orientation=vertical]:is(:state(wide),[state--wide])) .sbb-calendar__table-container{--sbb-calendar-min-width: calc( 13 * var(--sbb-calendar-cell-size) + var(--sbb-calendar-tables-gap) )}.sbb-calendar__table{width:100%;border-collapse:collapse;height:max-content;animation-name:show;animation-duration:var(--sbb-calendar-table-animation-duration)}.sbb-calendar__table.sbb-calendar__table-hide{--sbb-calendar-cell-transition-duration: 0ms;animation-name:hide;animation-duration:var(--sbb-calendar-table-animation-duration)}:host(:not(:is(:state(wide),[state--wide]))) .sbb-calendar__table{min-width:100%}.sbb-calendar__table-header,.sbb-calendar__table-body{text-align:center}.sbb-calendar__table-header-cell,.sbb-calendar__table-header-cell-vertical{width:var(--sbb-calendar-cell-size);color:var(--sbb-calendar-header-color);padding:0;font-size:var(--sbb-text-font-size-xs);font-weight:400;letter-spacing:var(--sbb-typo-letter-spacing-text)}:host(:not([multiple])) .sbb-calendar__table-header-cell,:host(:not([multiple])) .sbb-calendar__table-header-cell-vertical{height:var(--sbb-calendar-cell-size)}.sbb-calendar__table-header-cell-vertical{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}.sbb-calendar__table-data{position:relative;padding:0;text-align:center}.sbb-calendar__day-cell{padding-block-end:var(--sbb-calendar-cell-padding-block-end)}:host(:not(:is(:state(enhanced),[state--enhanced]))) sbb-calendar-day{--sbb-calendar-cell-justify-content: center;--sbb-calendar-day-height: 2.75rem;--sbb-calendar-day-extra-display: none;--sbb-calendar-day-value-height: unset;--sbb-calendar-day-crossed-out-top: 50%;--sbb-calendar-day-crossed-out-translate: translate(-50%, -50%) rotate(-45deg)}@keyframes show{0%{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}to{opacity:1;transform:translateY(0)}}@keyframes hide{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--sbb-calendar-table-animation-shift))}}", v = class extends Event {
 	get range() {
 		return this._range;
 	}
@@ -21,18 +21,18 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 		}), this._range = Object.freeze(e || []);
 	}
 }, y = (() => {
-	let y = te, b = [], x, S = [], C = [], w, Oe = [], T = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I, L = [], R = [], z, B = [], V = [], H, U = [], W = [], G, K = [], q = [], J, Y = [], X = [], Z, Q, ke = [], Ae = [], je, Me = [], $ = [];
+	let y = te, b = [], x, S = [], C = [], w, T = [], De = [], E, D = [], O = [], k, A = [], j = [], M, N = [], P = [], F, I, L = [], R = [], z, B = [], V = [], H, U = [], W = [], G, K = [], q = [], J, Y = [], X = [], Z, Q, Oe = [], ke = [], Ae, je = [], $ = [];
 	return class extends y {
 		static {
 			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
 			x = [m(), o({ type: Boolean })], w = [o()], E = [_(), o()], k = [_(), o()], M = [
 				m(),
-				ue((e, t) => e._onMultipleChanged(t)),
+				ce((e, t) => e._onMultipleChanged(t)),
 				o({ type: Boolean })
 			], F = [o()], I = [s()], z = [o({ attribute: "date-filter" })], H = [o({ reflect: !0 })], G = [m(), o({
 				attribute: "week-numbers",
 				type: Boolean
-			})], J = [s()], Z = [s()], Q = [s()], je = [s()], e(this, null, x, {
+			})], J = [s()], Z = [s()], Q = [s()], Ae = [s()], e(this, null, x, {
 				kind: "accessor",
 				name: "wide",
 				static: !1,
@@ -58,7 +58,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 					}
 				},
 				metadata: t
-			}, Oe, T), e(this, null, E, {
+			}, T, De), e(this, null, E, {
 				kind: "accessor",
 				name: "min",
 				static: !1,
@@ -199,7 +199,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 					}
 				},
 				metadata: t
-			}, ke, Ae), e(this, null, je, {
+			}, Oe, ke), e(this, null, Ae, {
 				kind: "accessor",
 				name: "_initialized",
 				static: !1,
@@ -212,7 +212,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 					}
 				},
 				metadata: t
-			}, Me, $), t && Object.defineProperty(this, Symbol.metadata, {
+			}, je, $), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -224,18 +224,17 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 		}
 		static {
 			this.elementDependencies = [
+				xe,
 				Se,
 				Ce,
 				we,
 				Te,
-				Ee,
-				xe,
-				ie,
-				be
+				be,
+				ye
 			];
 		}
 		static {
-			this.styles = [ce, a(De)];
+			this.styles = [ve, a(Ee)];
 		}
 		static {
 			this.events = {
@@ -347,13 +346,13 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 			this.#d = e;
 		}
 		constructor() {
-			super(), this.#e = (t(this, b), t(this, S, !1)), this.#t = (t(this, C), t(this, Oe, "day")), this.#n = (t(this, T), t(this, D, null)), this.#r = (t(this, O), t(this, A, null)), this.#i = (t(this, j), t(this, N, !1)), this.#a = (t(this, P), t(this, L, null)), this.#o = (t(this, R), t(this, B, null)), this.#s = (t(this, V), t(this, U, "horizontal")), this.#c = (t(this, W), t(this, K, !1)), this._dateAdapter = (t(this, q), ye().datetime?.dateAdapter ?? le), this.#l = t(this, Y, this._dateAdapter.today()), this._wideInternal = (t(this, X), !1), this.#u = t(this, ke, "day"), this._nextCalendarView = (t(this, Ae), "day"), this._keyboardNavigationDayViewParameters = {
+			super(), this.#e = (t(this, b), t(this, S, !1)), this.#t = (t(this, C), t(this, T, "day")), this.#n = (t(this, De), t(this, D, null)), this.#r = (t(this, O), t(this, A, null)), this.#i = (t(this, j), t(this, N, !1)), this.#a = (t(this, P), t(this, L, null)), this.#o = (t(this, R), t(this, B, null)), this.#s = (t(this, V), t(this, U, "horizontal")), this.#c = (t(this, W), t(this, K, !1)), this._dateAdapter = (t(this, q), _e().datetime?.dateAdapter ?? se), this.#l = t(this, Y, this._dateAdapter.today()), this._wideInternal = (t(this, X), !1), this.#u = t(this, Oe, "day"), this._nextCalendarView = (t(this, ke), "day"), this._keyboardNavigationDayViewParameters = {
 				firstDayInView: null,
 				lastDayInView: null,
 				firstMonthOffset: 0,
 				firstMonthLength: 0,
 				secondMonthOffset: 0
-			}, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._enhancedVariant = !1, this._resetFocus = !1, this._containingFocus = !1, this.#d = t(this, Me, !1), this._language = (t(this, $), new ne(this).withHandler(() => {
+			}, this._weeks = [], this._monthNames = this._dateAdapter.getMonthNames("long"), this._enhancedVariant = !1, this._resetFocus = !1, this._containingFocus = !1, this.#d = t(this, je, !1), this._language = (t(this, $), new ne(this).withHandler(() => {
 				this._monthNames = this._dateAdapter.getMonthNames("long"), this._createMonthRows();
 			})), this._mediaMatcher = new re(this, { [d]: () => this._init() }), this._onSlotChange = () => {
 				this._enhancedVariant = Array.from(this.children).some((e) => e.localName === "sbb-calendar-day"), this.toggleState("enhanced", this._enhancedVariant), this._setTabIndex();
@@ -447,9 +446,9 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 		_getWeek(e) {
 			let t = this._dateAdapter.createDate(this._dateAdapter.getYear(e), 1, 1), n = this._dateAdapter.getDayOfWeek(t), r = +!![
 				l,
+				ae,
 				oe,
-				se,
-				ae
+				ie
 			].includes(n), i = this._dateAdapter.addCalendarDays(t, this._dateAdapter.getFirstWeekOffset(t) * -1);
 			for (; this._dateAdapter.compareDate(i, e) <= 0;) {
 				let n = this._dateAdapter.addCalendarDays(i, 6);
@@ -594,7 +593,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 			}
 		}
 		_handleKeyboardEvent(e, t) {
-			ve(e) && e.preventDefault();
+			ge(e) && e.preventDefault();
 			let n = this._cells, r = n.findIndex((t) => t === e.target), i;
 			i = t ? this._navigateByKeyboardDayView(e, r, n, t) : this._navigateByKeyboard(e, r, n);
 			let a = (this._enhancedVariant ? document : this.shadowRoot).activeElement;
@@ -714,15 +713,15 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 			let e = this._wide ? this._dateAdapter.addCalendarMonths(this._activeDate, 1) : void 0;
 			return n`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentMonth(-1), me[this._language.current], this._previousMonthDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentMonth(-1), fe[this._language.current], this._previousMonthDisabled())}
         <div class="sbb-calendar__controls-month">
           ${this._createLabelForDayView(this._activeDate)}
           ${this._wide ? this._createLabelForDayView(e) : i}
-          <sbb-screen-reader-only role="status">
+          <span class="sbb-screen-reader-only" role="status">
             ${this._createAriaLabelForDayView(this._activeDate, e)}
-          </sbb-screen-reader-only>
+          </span>
         </div>
-        ${this._getArrow("right", () => this._goToDifferentMonth(1), de[this._language.current], this._nextMonthDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentMonth(1), le[this._language.current], this._nextMonthDisabled())}
       </div>
       <div class="sbb-calendar__table-overflow-break">
         <div class="sbb-calendar__table-container sbb-calendar__table-day-view">
@@ -743,7 +742,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
       <button
         type="button"
         class="sbb-calendar__date-selection sbb-calendar__controls-change-date"
-        aria-label="${_e[this._language.current]} ${t}"
+        aria-label="${he[this._language.current]} ${t}"
         @click=${() => {
 				this._resetFocus = !0, this._nextCalendarView = "year", this._startTableTransition();
 			}}
@@ -780,7 +779,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 			}}
                         ></sbb-calendar-weekday>
                       ` : n`
-                        <sbb-screen-reader-only>${e.long}</sbb-screen-reader-only>
+                        <span class="sbb-screen-reader-only">${e.long}</span>
                         <span aria-hidden="true">${e.narrow}</span>
                       `}
                 </th>
@@ -803,8 +802,8 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 				}}
                                 ></sbb-calendar-weeknumber>
                               ` : n`
-                                <sbb-screen-reader-only
-                                  >${`${g[this._language.current]} ${t[0]}`}</sbb-screen-reader-only
+                                <span class="sbb-screen-reader-only"
+                                  >${`${g[this._language.current]} ${t[0]}`}</span
                                 >
                                 <span aria-hidden="true">${t[0]}</span>
                               `}
@@ -826,8 +825,8 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 				}}
                               ></sbb-calendar-weeknumber>
                             ` : n`
-                              <sbb-screen-reader-only
-                                >${`${g[this._language.current]} ${t[r]}`}</sbb-screen-reader-only
+                              <span class="sbb-screen-reader-only"
+                                >${`${g[this._language.current]} ${t[r]}`}</span
                               >
                               <span aria-hidden="true">${t[r]}</span>
                             `}
@@ -864,8 +863,8 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 			}}
                               ></sbb-calendar-weeknumber>
                             ` : n`
-                              <sbb-screen-reader-only
-                                >${`${g[this._language.current]} ${e}`}</sbb-screen-reader-only
+                              <span class="sbb-screen-reader-only"
+                                >${`${g[this._language.current]} ${e}`}</span
                               >
                               <span aria-hidden="true">${e}</span>
                             `}
@@ -889,7 +888,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
                                 ${o.narrow}
                               </sbb-calendar-weekday>
                             ` : n`
-                              <sbb-screen-reader-only>${o.long}</sbb-screen-reader-only>
+                              <span class="sbb-screen-reader-only">${o.long}</span>
                               <span aria-hidden="true">${o.narrow}</span>
                             `}
                       </td>
@@ -919,9 +918,9 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 		_renderMonthView() {
 			return n`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentYear(-1), he[this._language.current], this._previousYearDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentYear(-1), pe[this._language.current], this._previousYearDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForMonthView()}</div>
-        ${this._getArrow("right", () => this._goToDifferentYear(1), fe[this._language.current], this._nextYearDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentYear(1), ue[this._language.current], this._nextYearDisabled())}
       </div>
       <div class="sbb-calendar__table-overflow-break">
         <div class="sbb-calendar__table-container sbb-calendar__table-month-view">
@@ -942,7 +941,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
         ${this._chosenYear} ${this._wide ? ` - ${this._chosenYear + 1}` : i}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
       </button>
-      <sbb-screen-reader-only role="status"> ${this._chosenYear} </sbb-screen-reader-only>`;
+      <span class="sbb-screen-reader-only" role="status"> ${this._chosenYear} </span>`;
 		}
 		_createMonthTable(e, t) {
 			return n`
@@ -980,9 +979,9 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
 		_renderYearView() {
 			return n`
       <div class="sbb-calendar__controls">
-        ${this._getArrow("left", () => this._goToDifferentYearRange(-f), ge(f)[this._language.current], this._previousYearRangeDisabled())}
+        ${this._getArrow("left", () => this._goToDifferentYearRange(-f), me(f)[this._language.current], this._previousYearRangeDisabled())}
         <div class="sbb-calendar__controls-month">${this._createLabelForYearView()}</div>
-        ${this._getArrow("right", () => this._goToDifferentYearRange(f), pe(f)[this._language.current], this._nextYearRangeDisabled())}
+        ${this._getArrow("right", () => this._goToDifferentYearRange(f), de(f)[this._language.current], this._nextYearRangeDisabled())}
       </div>
       <div class="sbb-calendar__table-overflow-break">
         <div class="sbb-calendar__table-container sbb-calendar__table-year-view">
@@ -1015,7 +1014,7 @@ var De = ":host{display:block;width:max-content;line-height:var(--sbb-typo-line-
         ${r}
         <sbb-icon name="chevron-small-up-small"></sbb-icon>
       </button>
-      <sbb-screen-reader-only role="status"> ${r} </sbb-screen-reader-only>
+      <span class="sbb-screen-reader-only" role="status"> ${r} </span>
     `;
 		}
 		_createYearTable(e, t = !1) {

package/calendar.js

@@ -1,11 +1,11 @@
-import { t as e } from "./calendar-day.component-B2eFdrLP.js";
+import { t as e } from "./calendar-day.component-CcZymuSD.js";
 import { SbbCalendarMonthElement as t } from "./calendar/calendar-month/calendar-month.component.js";
 import { SbbCalendarYearElement as n } from "./calendar/calendar-year/calendar-year.component.js";
 import { SbbCalendarWeekdayElement as r } from "./calendar/calendar-weekday/calendar-weekday.component.js";
 import { SbbCalendarWeeknumberElement as i } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { n as a, t as o } from "./calendar.component-nWdtZYqg.js";
-import { n as s, t as c } from "./calendar-cell-base-element-Bip0m9Wr.js";
+import { n as a, t as o } from "./calendar.component-oS_T4s4k.js";
+import { t as s } from "./calendar-cell-base-element-CUG1qYFb.js";
 import "./calendar.pure.js";
 o.define(), e.define(), t.define(), n.define(), r.define(), i.define();
 //#endregion
-export { c as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent, s as calendarCellBaseStyle };
+export { s as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent };

package/calendar.pure.js

@@ -1,8 +1,8 @@
-import { t as e } from "./calendar-day.component-B2eFdrLP.js";
+import { t as e } from "./calendar-day.component-CcZymuSD.js";
 import { SbbCalendarMonthElement as t } from "./calendar/calendar-month/calendar-month.component.js";
 import { SbbCalendarYearElement as n } from "./calendar/calendar-year/calendar-year.component.js";
 import { SbbCalendarWeekdayElement as r } from "./calendar/calendar-weekday/calendar-weekday.component.js";
 import { SbbCalendarWeeknumberElement as i } from "./calendar/calendar-weeknumber/calendar-weeknumber.component.js";
-import { n as a, t as o } from "./calendar.component-nWdtZYqg.js";
-import { n as s, t as c } from "./calendar-cell-base-element-Bip0m9Wr.js";
-export { c as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent, s as calendarCellBaseStyle };
+import { n as a, t as o } from "./calendar.component-oS_T4s4k.js";
+import { t as s } from "./calendar-cell-base-element-CUG1qYFb.js";
+export { s as SbbCalendarCellBaseElement, e as SbbCalendarDayElement, o as SbbCalendarElement, t as SbbCalendarMonthElement, r as SbbCalendarWeekdayElement, i as SbbCalendarWeeknumberElement, n as SbbCalendarYearElement, a as SbbMonthChangeEvent };

package/card/card/card.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card.component-DZrNg3sQ.js";
+import { t as e } from "../../card.component-WUQRK9jT.js";
 export { e as SbbCardElement };

package/card/card-badge/card-badge.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card-badge.component-CEqox6TU.js";
+import { t as e } from "../../card-badge.component-BLAK_y8x.js";
 export { e as SbbCardBadgeElement };

package/card/common/card-action-common.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../card-action-common-DIMD59l_.js";
+import { t as e } from "../../card-action-common-BNdGcJl-.js";
 export { e as SbbCardActionCommonElementMixin };

package/{card-action-common-DIMD59l_.js → card-action-common-BNdGcJl-.js}

@@ -1,11 +1,11 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { unsafeCSS as n } from "lit";
 import { property as r } from "lit/decorators.js";
-import { IS_FOCUSABLE_QUERY as i, boxSizingStyles as a, ɵstateController as o } from "./core.js";
+import { IS_FOCUSABLE_QUERY as i, screenReaderOnlyStyles as a, ɵstateController as o } from "./core.js";
 import { html as s } from "lit/static-html.js";
 import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
 //#region src/elements/card/common/card-action.scss?inline
-var l = ":host{display:block;outline:none!important;position:absolute;inset:0}:is(.sbb-card-button,.sbb-card-link){display:block;position:absolute;inset:0;border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-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)}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", u = (u) => (() => {
+var l = ":host{display:block;outline:none!important;position:absolute;inset:0}:is(.sbb-card-button,.sbb-card-link){display:block;position:absolute;inset:0;border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-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)}", u = (u) => (() => {
 	let d = u, f = [], p;
 	return class extends d {
 		constructor() {

package/{card-badge.component-CEqox6TU.js → card-badge.component-BLAK_y8x.js}

@@ -1,14 +1,14 @@
 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, boxSizingStyles as o } from "./core.js";
+import { SbbElement as a } from "./core.js";
 //#region src/elements/card/card-badge/card-badge.scss?inline
-var s = ":host{display:flex;position:relative;height:fit-content;width:fit-content;margin-inline-start:auto}:host:after{content:\"\";display:var(--sbb-card-badge-border-display, none);position:absolute;inset:0;border:var(--sbb-border-width-1x) solid CanvasText}:host{inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-card-badge-padding-inline)}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}:host(:dir(rtl)){--sbb-card-badge-skew: skew(-16deg, 0deg)}.sbb-card-badge-content{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:var(--sbb-card-badge-skew)}.sbb-card-badge-background:before{content:\"\";display:var(--sbb-card-badge-inline-border-display, block);position:absolute;inset:0;border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius)}", c = (() => {
-	let c = a, l, u = [], d = [];
-	return class extends c {
+var o = ":host{display:flex;position:relative;height:fit-content;width:fit-content;margin-inline-start:auto}:host:after{content:\"\";display:var(--sbb-card-badge-border-display, none);position:absolute;inset:0;border:var(--sbb-border-width-1x) solid CanvasText}:host{inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-card-badge-padding-inline)}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}:host(:dir(rtl)){--sbb-card-badge-skew: skew(-16deg, 0deg)}.sbb-card-badge-content{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);font-weight:700;position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:var(--sbb-card-badge-skew)}.sbb-card-badge-background:before{content:\"\";display:var(--sbb-card-badge-inline-border-display, block);position:absolute;inset:0;border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius)}", s = (() => {
+	let s = a, c, l = [], u = [];
+	return class extends s {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-			l = [i({ reflect: !0 })], e(this, null, l, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+			c = [i({ reflect: !0 })], e(this, null, c, {
 				kind: "accessor",
 				name: "color",
 				static: !1,
@@ -21,7 +21,7 @@ var s = ":host{display:flex;position:relative;height:fit-content;width:fit-conte
 					}
 				},
 				metadata: t
-			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+			}, l, u), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -35,9 +35,9 @@ var s = ":host{display:flex;position:relative;height:fit-content;width:fit-conte
 			this.role = "text";
 		}
 		static {
-			this.styles = [o, r(s)];
+			this.styles = [r(o)];
 		}
-		#e = t(this, u, "charcoal");
+		#e = t(this, l, "charcoal");
 		get color() {
 			return this.#e;
 		}
@@ -56,9 +56,9 @@ var s = ":host{display:flex;position:relative;height:fit-content;width:fit-conte
     `;
 		}
 		constructor() {
-			super(...arguments), t(this, d);
+			super(...arguments), t(this, u);
 		}
 	};
 })();
 //#endregion
-export { c as t };
+export { s as t };

package/card.component-WUQRK9jT.js

@@ -0,0 +1,61 @@
+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.js";
+//#region src/elements/card/card/card.scss?inline
+var o = ":host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color)}:host:after{content:\"\";position:absolute;inset:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}@media(forced-colors:active){:host{--sbb-title-color: var(--sbb-card-color)}}:host{--sbb-card-padding-block: var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline: var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:where([color=milk])){--sbb-card-background-color: var(--sbb-background-color-3);--sbb-card-border-color: transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-border-color-4-inverted);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host(:where(:not([color]))){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: var(--sbb-border-color-3);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media(forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events: none}@media(any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift: -.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media(any-hover:hover)and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color: Highlight}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color: ButtonText}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color: LinkText;--sbb-card-border-color: CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-padding-inline: var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display: block}.sbb-card__wrapper{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift, 0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}", s = (() => {
+	let s = a, c, l = [], u = [];
+	return class extends s {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+			c = [i({ reflect: !0 })], e(this, null, c, {
+				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
+			}, l, u), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card";
+		}
+		static {
+			this.styles = [r(o)];
+		}
+		#e = t(this, l, "white");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		render() {
+			return n`
+      <slot name="action"></slot>
+      <span class="sbb-card__wrapper">
+        <slot></slot>
+      </span>
+      <span class="sbb-card__badge-wrapper">
+        <slot name="badge"></slot>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, u);
+		}
+	};
+})();
+//#endregion
+export { s as t };

package/card.js

@@ -1,8 +1,8 @@
-import { t as e } from "./card-badge.component-CEqox6TU.js";
+import { t as e } from "./card-badge.component-BLAK_y8x.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-DZrNg3sQ.js";
-import { t as i } from "./card-action-common-DIMD59l_.js";
+import { t as r } from "./card.component-WUQRK9jT.js";
+import { t as i } from "./card-action-common-BNdGcJl-.js";
 import "./card.pure.js";
 r.define(), e.define(), t.define(), n.define();
 //#endregion

package/card.pure.js

@@ -1,6 +1,6 @@
-import { t as e } from "./card-badge.component-CEqox6TU.js";
+import { t as e } from "./card-badge.component-BLAK_y8x.js";
 import { SbbCardButtonElement as t } from "./card/card-button/card-button.component.js";
 import { SbbCardLinkElement as n } from "./card/card-link/card-link.component.js";
-import { t as r } from "./card.component-DZrNg3sQ.js";
-import { t as i } from "./card-action-common-DIMD59l_.js";
+import { t as r } from "./card.component-WUQRK9jT.js";
+import { t as i } from "./card-action-common-BNdGcJl-.js";
 export { i as SbbCardActionCommonElementMixin, e as SbbCardBadgeElement, t as SbbCardButtonElement, r as SbbCardElement, n as SbbCardLinkElement };

package/carousel/carousel/carousel.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel.component-a189Wn9e.js";
+import { t as e } from "../../carousel.component-9oMMOyWo.js";
 export { e as SbbCarouselElement };

package/carousel/carousel-item/carousel-item.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel-item.component-mHyHTxEd.js";
+import { t as e } from "../../carousel-item.component-DyZAdXL_.js";
 export { e as SbbCarouselItemElement };

package/carousel/carousel-list/carousel-list.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../carousel-list.component-ByZDFoLe.js";
+import { t as e } from "../../carousel-list.component-Ai0uJWB7.js";
 export { e as SbbCarouselListElement };

package/{carousel-item.component-mHyHTxEd.js → carousel-item.component-DyZAdXL_.js}

@@ -6,7 +6,7 @@ var r = ":host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-
 		this.elementName = "sbb-carousel-item";
 	}
 	static {
-		this.styles = t(r);
+		this.styles = [t(r)];
 	}
 	static {
 		this.events = {

package/{carousel-list.component-ByZDFoLe.js → carousel-list.component-Ai0uJWB7.js}

@@ -8,7 +8,7 @@ var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);di
 		this.elementName = "sbb-carousel-list";
 	}
 	static {
-		this.styles = t(c);
+		this.styles = [t(c)];
 	}
 	constructor() {
 		super(), this._currentIndex = 0, this._language = new r(this), this._observedCarouselItems = [], this._beforeShowObserver = new s(this, {

package/{carousel.component-a189Wn9e.js → carousel.component-9oMMOyWo.js}

@@ -1,17 +1,17 @@
 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, SbbLanguageController as o, SbbScreenReaderOnlyElement as s, boxSizingStyles as c, forceType as l, i18nCarouselArrowsNavigationHint as u, i18nNextSlide as d, i18nPreviousSlide as f, i18nSlide as p } from "./core.js";
+import { SbbElement as a, SbbLanguageController as o, forceType as s, i18nCarouselArrowsNavigationHint as c, i18nNextSlide as l, i18nPreviousSlide as u, i18nSlide as d, screenReaderOnlyStyles as f } from "./core.js";
 //#region src/elements/carousel/carousel/carousel.scss?inline
-var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}", h = (() => {
-	let h = a, g, _ = [], v = [];
-	return class extends h {
+var p = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}", m = (() => {
+	let m = a, h, g = [], _ = [];
+	return class extends m {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
-			g = [l(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [s(), i({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, g, {
+			})], e(this, null, h, {
 				kind: "accessor",
 				name: "shadow",
 				static: !1,
@@ -24,7 +24,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 					}
 				},
 				metadata: t
-			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -35,10 +35,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			this.elementName = "sbb-carousel";
 		}
 		static {
-			this.elementDependencies = [s];
-		}
-		static {
-			this.styles = [c, r(m)];
+			this.styles = [f, r(p)];
 		}
 		#e;
 		get shadow() {
@@ -48,7 +45,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, _, !1), this._paginator = (t(this, v), null), this._abortController = null, this._language = new o(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
+			super(), this.#e = t(this, g, !1), this._paginator = (t(this, _), null), this._abortController = null, this._language = new o(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
 				this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
 			});
 		}
@@ -65,7 +62,7 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 			let e = Array.from(this.children).find((e) => e.localName === "sbb-compact-paginator"), t = Array.from(this.children).find((e) => e.localName === "sbb-carousel-list");
 			if (!e || !t) return;
 			let n = t.querySelectorAll("sbb-carousel-item");
-			n && n.length > 0 && (e.length = n.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= d[this._language.current], e.accessibilityPreviousPageLabel ||= f[this._language.current], e.accessibilityPageLabel ||= p[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
+			n && n.length > 0 && (e.length = n.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= l[this._language.current], e.accessibilityPreviousPageLabel ||= u[this._language.current], e.accessibilityPageLabel ||= d[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
 		}
 		_setupPaginator() {
 			this._abortController?.abort(), this._paginator && (this._abortController = new AbortController(), this._paginator.addEventListener("click", () => this._scrollAtPaginatorChange(), { signal: this._abortController.signal }));
@@ -82,8 +79,8 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 		render() {
 			return n`
       <div class="sbb-carousel">
-        <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
-          >${u[this._language.current]}</sbb-screen-reader-only
+        <span class="sbb-screen-reader-only" id="sbb-carousel-arrows-navigation-hint"
+          >${c[this._language.current]}</span
         >
         <slot @slotchange=${this._handleSlotchange}></slot>
       </div>
@@ -92,4 +89,4 @@ var m = ":host{display:inline-block;overflow:hidden;border-radius:var(--sbb-caro
 	};
 })();
 //#endregion
-export { h as t };
+export { m as t };