@sbb-esta/lyne-elements-dev 4.9.0-dev.1775028444 → 4.9.0-dev.1775050914

package/card/common.js

@@ -1,4 +1,4 @@
-import { t as e } from "../card-action-common-BNe4LRHp.js";
+import { t as e } from "../card-action-common-Ct0e9dtO.js";
 //#region src/elements/card/common.ts
 console.warn("The entrypoint '@sbb-esta/elements/card/common.js' has been deprecated.\nUse either '@sbb-esta/elements/card.js' or '@sbb-esta/elements/card.pure.js' instead.");
 //#endregion

package/{card-action-common-BNe4LRHp.js → card-action-common-Ct0e9dtO.js}

@@ -1,17 +1,17 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n } from "lit";
+import { unsafeCSS as n } from "lit";
 import { property as r } from "lit/decorators.js";
 import { ɵstateController as i } from "./core/mixins.js";
 import { boxSizingStyles as a } from "./core/styles.js";
 import { html as o } from "lit/static-html.js";
 import { IS_FOCUSABLE_QUERY as s } from "./core/a11y.js";
 import { MutationController as c } from "@lit-labs/observers/mutation-controller.js";
-//#region src/elements/card/common/card-action.scss?lit&inline
-var l = n`: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 = (n) => (() => {
-	let u = n, d = [], f;
-	return class extends u {
+//#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) => (() => {
+	let d = u, f = [], p;
+	return class extends d {
 		constructor() {
-			super(...arguments), this._active = (t(this, d), !1), this._card = null, this._cardMutationObserver = new c(this, {
+			super(...arguments), this._active = (t(this, f), !1), this._card = null, this._cardMutationObserver = new c(this, {
 				target: null,
 				config: {
 					childList: !0,
@@ -28,11 +28,11 @@ var l = n`:host{display:block;outline:none!important;position:absolute;inset:0}:
 			});
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-			f = [r({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			p = [r({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, f, {
+			})], e(this, null, p, {
 				kind: "setter",
 				name: "active",
 				static: !1,
@@ -44,7 +44,7 @@ var l = n`:host{display:block;outline:none!important;position:absolute;inset:0}:
 					}
 				},
 				metadata: t
-			}, null, d), t && Object.defineProperty(this, Symbol.metadata, {
+			}, null, f), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -52,7 +52,7 @@ var l = n`:host{display:block;outline:none!important;position:absolute;inset:0}:
 			});
 		}
 		static {
-			this.styles = [a, l];
+			this.styles = [a, n(l)];
 		}
 		set active(e) {
 			this._active = e, this._onActiveChange();

package/card-badge.component-BSOEYrN4.js

@@ -0,0 +1,65 @@
+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 { boxSizingStyles as o } from "./core/styles.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-weight:700;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);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 {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], e(this, null, l, {
+				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
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card-badge";
+		}
+		static {
+			this.role = "text";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "charcoal");
+		get color() {
+			return this.#e;
+		}
+		set color(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.slot ||= "badge";
+		}
+		render() {
+			return n`
+      <span class="sbb-card-badge-background" aria-hidden="true"></span>
+      <span class="sbb-card-badge-content">
+        <slot></slot>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/card.component-D14GBu6y.js

@@ -0,0 +1,62 @@
+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 { boxSizingStyles as o } from "./core/styles.js";
+//#region src/elements/card/card/card.scss?inline
+var s = ":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-title-text-color-normal-override: var(--sbb-card-color);--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}: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}", c = (() => {
+	let c = a, l, u = [], d = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], e(this, null, l, {
+				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
+			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-card";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "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, d);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/card.js

@@ -1,8 +1,8 @@
-import { t as e } from "./card-badge.component-CtpSWL9S.js";
+import { t as e } from "./card-badge.component-BSOEYrN4.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-Bd-2-dP3.js";
-import { t as i } from "./card-action-common-BNe4LRHp.js";
+import { t as r } from "./card.component-D14GBu6y.js";
+import { t as i } from "./card-action-common-Ct0e9dtO.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-CtpSWL9S.js";
+import { t as e } from "./card-badge.component-BSOEYrN4.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-Bd-2-dP3.js";
-import { t as i } from "./card-action-common-BNe4LRHp.js";
+import { t as r } from "./card.component-D14GBu6y.js";
+import { t as i } from "./card-action-common-Ct0e9dtO.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-D9By2rDH.js";
+import { t as e } from "../../carousel.component-BxKrGk84.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-BdW4Fe7j.js";
+import { t as e } from "../../carousel-item.component-DUII_cjr.js";
 export { e as SbbCarouselItemElement };

package/carousel/carousel-item.js

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

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

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

package/carousel/carousel-list.js

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

package/carousel/carousel.js

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

package/{carousel-item.component-BdW4Fe7j.js → carousel-item.component-DUII_cjr.js}

@@ -1,12 +1,12 @@
-import { css as e, html as t } from "lit";
+import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n } from "./core/base-elements.js";
-//#region src/elements/carousel/carousel-item/carousel-item.scss?lit&inline
-var r = e`:host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}`, i = class extends n {
+//#region src/elements/carousel/carousel-item/carousel-item.scss?inline
+var r = ":host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}", i = class extends n {
 	static {
 		this.elementName = "sbb-carousel-item";
 	}
 	static {
-		this.styles = r;
+		this.styles = t(r);
 	}
 	static {
 		this.events = {
@@ -18,7 +18,7 @@ var r = e`:host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb
 		super.connectedCallback(), this.internals.role = "group", this.internals.ariaRoleDescription = "slide";
 	}
 	render() {
-		return t`<slot></slot>`;
+		return e`<slot></slot>`;
 	}
 };
 //#endregion

package/{carousel-list.component-CXKdk4dv.js → carousel-list.component-C0i7aHTM.js}

@@ -1,17 +1,17 @@
-import { css as e, html as t } from "lit";
+import { html as e, unsafeCSS as t } from "lit";
 import { SbbElement as n } from "./core/base-elements.js";
 import { SbbLanguageController as r } from "./core/controllers.js";
 import { i18nCarouselItemAriaLabel as i } from "./core/i18n.js";
 import { ResizeController as a } from "@lit-labs/observers/resize-controller.js";
 import { isArrowKeyPressed as o } from "./core/a11y.js";
 import { IntersectionController as s } from "@lit-labs/observers/intersection-controller.js";
-//#region src/elements/carousel/carousel-list/carousel-list.scss?lit&inline
-var c = e`:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}`, l = class extends n {
+//#region src/elements/carousel/carousel-list/carousel-list.scss?inline
+var c = ":host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:\"\";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}", l = class extends n {
 	static {
 		this.elementName = "sbb-carousel-list";
 	}
 	static {
-		this.styles = c;
+		this.styles = t(c);
 	}
 	constructor() {
 		super(), this._currentIndex = 0, this._language = new r(this), this._observedCarouselItems = [], this._beforeShowObserver = new s(this, {
@@ -84,7 +84,7 @@ var c = e`:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);d
 		super.connectedCallback(), this.internals.ariaLive = "polite", this.internals.ariaAtomic = "true";
 	}
 	render() {
-		return t`<slot @slotchange=${this._handleSlotchange}></slot>`;
+		return e`<slot @slotchange=${this._handleSlotchange}></slot>`;
 	}
 };
 //#endregion

package/{carousel.component-D9By2rDH.js → carousel.component-BxKrGk84.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";
@@ -7,16 +7,16 @@ import { boxSizingStyles as s } from "./core/styles.js";
 import { SbbLanguageController as c } from "./core/controllers/language-controller.js";
 import { i18nCarouselArrowsNavigationHint as l, i18nNextSlide as u, i18nPreviousSlide as d, i18nSlide as f } from "./core/i18n/i18n.js";
 import "./screen-reader-only.js";
-//#region src/elements/carousel/carousel/carousel.scss?lit&inline
-var p = n`: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 n = a, m, h = [], g = [];
-	return class extends n {
+//#region src/elements/carousel/carousel/carousel.scss?inline
+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(n[Symbol.metadata] ?? null) : void 0;
-			m = [o(), i({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+			h = [o(), i({
 				reflect: !0,
 				type: Boolean
-			})], e(this, null, m, {
+			})], e(this, null, h, {
 				kind: "accessor",
 				name: "shadow",
 				static: !1,
@@ -29,7 +29,7 @@ var p = n`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-car
 					}
 				},
 				metadata: t
-			}, h, g), t && Object.defineProperty(this, Symbol.metadata, {
+			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -40,7 +40,7 @@ var p = n`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-car
 			this.elementName = "sbb-carousel";
 		}
 		static {
-			this.styles = [s, p];
+			this.styles = [s, r(p)];
 		}
 		#e;
 		get shadow() {
@@ -50,7 +50,7 @@ var p = n`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-car
 			this.#e = e;
 		}
 		constructor() {
-			super(), this.#e = t(this, h, !1), this._paginator = (t(this, g), null), this._abortController = null, this._language = new c(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 c(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);
 			});
 		}
@@ -82,7 +82,7 @@ var p = n`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-car
 			}
 		}
 		render() {
-			return r`
+			return n`
       <div class="sbb-carousel">
         <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
           >${l[this._language.current]}</sbb-screen-reader-only

package/carousel.js

@@ -1,6 +1,6 @@
-import { t as e } from "./carousel-item.component-BdW4Fe7j.js";
-import { t } from "./carousel-list.component-CXKdk4dv.js";
-import { t as n } from "./carousel.component-D9By2rDH.js";
+import { t as e } from "./carousel-item.component-DUII_cjr.js";
+import { t } from "./carousel-list.component-C0i7aHTM.js";
+import { t as n } from "./carousel.component-BxKrGk84.js";
 import "./carousel.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/carousel.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./carousel-item.component-BdW4Fe7j.js";
-import { t } from "./carousel-list.component-CXKdk4dv.js";
-import { t as n } from "./carousel.component-D9By2rDH.js";
+import { t as e } from "./carousel-item.component-DUII_cjr.js";
+import { t } from "./carousel-list.component-C0i7aHTM.js";
+import { t as n } from "./carousel.component-BxKrGk84.js";
 export { n as SbbCarouselElement, e as SbbCarouselItemElement, t as SbbCarouselListElement };

package/checkbox/checkbox.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../checkbox.component-Cax24yN1.js";
+import { t as e } from "../checkbox.component-ROzxEnPh.js";
 export { e as SbbCheckboxElement };

package/checkbox/checkbox.js

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

package/checkbox/common/checkbox-common.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../checkbox-common-CPIIGgkG.js";
+import { n as e, t } from "../../checkbox-common-DdieysTG.js";
 export { t as SbbCheckboxCommonElementMixin, e as checkboxCommonStyle };

package/checkbox/common.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../checkbox-common-CPIIGgkG.js";
+import { n as e, t } from "../checkbox-common-DdieysTG.js";
 //#region src/elements/checkbox/common.ts
 console.warn("The entrypoint '@sbb-esta/elements/checkbox/common.js' has been deprecated.\nUse either '@sbb-esta/elements/checkbox.js' or '@sbb-esta/elements/checkbox.pure.js' instead.");
 //#endregion

package/{checkbox-common-CPIIGgkG.js → checkbox-common-DdieysTG.js}

@@ -1,11 +1,12 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n } from "lit";
+import { unsafeCSS as n } from "lit";
 import { property as r } from "lit/decorators.js";
 import "./core/base-elements.js";
 import { forceType as i } from "./core/decorators.js";
 import { SbbFormAssociatedCheckboxMixin as a } from "./core/mixins.js";
-//#region src/elements/checkbox/common/checkbox-common.scss?lit&inline
-var o = n`@charset "UTF-8";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb-text-font-size-xs);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-checkbox-font-size: var(--sbb-text-font-size-s);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-checkbox-font-size: var(--sbb-text-font-size-m);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`, s = (n) => (() => {
+//#endregion
+//#region src/elements/checkbox/common/checkbox-common.ts
+var o = n("@charset \"UTF-8\";:host([size=xs]){--sbb-checkbox-font-size: var(--sbb-text-font-size-xs);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-checkbox-font-size: var(--sbb-text-font-size-s);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-checkbox-font-size: var(--sbb-text-font-size-m);--sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m)}:host(:disabled){--sbb-checkbox-cursor: var(--sbb-cursor-default);--sbb-checkbox-label-color: var(--sbb-color-granite);--sbb-checkbox-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}"), s = (n) => (() => {
 	let o = a(n), s, c = [], l = [];
 	return class extends o {
 		constructor() {

package/{checkbox.component-Cax24yN1.js → checkbox.component-ROzxEnPh.js}

@@ -1,6 +1,6 @@
-import { n as e, t } from "./checkbox-common-CPIIGgkG.js";
+import { n as e, t } from "./checkbox-common-DdieysTG.js";
 import { __esDecorate as n, __runInitializers as r } from "tslib";
-import { css as i, html as a } from "lit";
+import { html as i, unsafeCSS as a } from "lit";
 import { property as o } from "lit/decorators.js";
 import { SbbElement as s } from "./core/base-elements.js";
 import { getOverride as c } from "./core/decorators.js";
@@ -8,16 +8,16 @@ import { isLean as l } from "./core/dom.js";
 import { boxSizingStyles as u } from "./core/styles.js";
 import { SbbIconNameMixin as d } from "./icon.js";
 import "./visual-checkbox.js";
-//#region src/elements/checkbox/checkbox.scss?lit&inline
-var f = i`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{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))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`, p = (() => {
-	let i = d(t(s)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
-	return class extends i {
+//#region src/elements/checkbox/checkbox.scss?inline
+var f = ":host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{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))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}", p = (() => {
+	let p = d(t(s)), m, h = [], g = [], _, v = [], y = [], b, x = [], S = [];
+	return class extends p {
 		static {
-			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-			p = [o()], g = [o({ reflect: !0 }), c((e, t) => e.group?.size ?? t)], y = [o({
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
+			m = [o()], _ = [o({ reflect: !0 }), c((e, t) => e.group?.size ?? t)], b = [o({
 				attribute: "icon-placement",
 				reflect: !0
-			})], n(this, null, p, {
+			})], n(this, null, m, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -30,7 +30,7 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
 					}
 				},
 				metadata: e
-			}, m, h), n(this, null, g, {
+			}, h, g), n(this, null, _, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -43,7 +43,7 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
 					}
 				},
 				metadata: e
-			}, _, v), n(this, null, y, {
+			}, v, y), n(this, null, b, {
 				kind: "accessor",
 				name: "iconPlacement",
 				static: !1,
@@ -56,7 +56,7 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
 					}
 				},
 				metadata: e
-			}, b, x), e && Object.defineProperty(this, Symbol.metadata, {
+			}, x, S), e && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -70,24 +70,24 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
 			this.styles = [
 				u,
 				e,
-				f
+				a(f)
 			];
 		}
-		#e = r(this, m, null);
+		#e = r(this, h, null);
 		get value() {
 			return this.#e;
 		}
 		set value(e) {
 			this.#e = e;
 		}
-		#t = (r(this, h), r(this, _, l() ? "xs" : "m"));
+		#t = (r(this, g), r(this, v, l() ? "xs" : "m"));
 		get size() {
 			return this.#t;
 		}
 		set size(e) {
 			this.#t = e;
 		}
-		#n = (r(this, v), r(this, b, "end"));
+		#n = (r(this, y), r(this, x, "end"));
 		get iconPlacement() {
 			return this.#n;
 		}
@@ -95,7 +95,7 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
 			this.#n = e;
 		}
 		render() {
-			return a`
+			return i`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -117,7 +117,7 @@ var f = i`:host{outline:none!important;display:inline-block}:host([icon-placemen
     `;
 		}
 		constructor() {
-			super(...arguments), r(this, x);
+			super(...arguments), r(this, S);
 		}
 	};
 })();

package/checkbox.js

@@ -2,8 +2,8 @@ import { SbbCheckboxGroupElement as e } from "./checkbox-group/checkbox-group.co
 import "./checkbox-group.pure.js";
 import { SbbCheckboxPanelElement as t } from "./checkbox-panel/checkbox-panel.component.js";
 import "./checkbox-panel.pure.js";
-import { t as n } from "./checkbox.component-Cax24yN1.js";
-import { n as r, t as i } from "./checkbox-common-CPIIGgkG.js";
+import { t as n } from "./checkbox.component-ROzxEnPh.js";
+import { n as r, t as i } from "./checkbox-common-DdieysTG.js";
 import "./checkbox.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./checkbox.component-Cax24yN1.js";
-import { n as t, t as n } from "./checkbox-common-CPIIGgkG.js";
+import { t as e } from "./checkbox.component-ROzxEnPh.js";
+import { n as t, t as n } from "./checkbox-common-DdieysTG.js";
 export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };

package/chip/chip/chip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chip.component-3kuQjaZq.js";
+import { t as e } from "../../chip.component-Cu5guQs8.js";
 export { e as SbbChipElement };

package/chip/chip-group/chip-group.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chip-group.component-CpXuOisx.js";
+import { n as e, t } from "../../chip-group.component-DJzUToem.js";
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip-group.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../chip-group.component-CpXuOisx.js";
+import { n as e, t } from "../chip-group.component-DJzUToem.js";
 t.define(), console.warn("The entrypoint '@sbb-esta/elements/chip/chip-group.js' has been deprecated.\nUse either '@sbb-esta/elements/chip.js' or '@sbb-esta/elements/chip.pure.js' instead.");
 //#endregion
 export { t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/chip/chip.js

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