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

package/{chip-group.component-CpXuOisx.js → chip-group.component-DJzUToem.js}

@@ -1,5 +1,5 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r, isServer as i } from "lit";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
 import { SbbElement as o } from "./core/base-elements.js";
 import { forceType as s } from "./core/decorators.js";
@@ -10,8 +10,8 @@ import { i18nChipGroupInputDescription as h, i18nSelectionRequired as g } from "
 import { getNextElementIndex as _, isArrowKeyPressed as v } from "./core/a11y.js";
 import { isLean as y } from "./core/dom/lean-context.js";
 import { SbbChipElement as b } from "./chip/chip/chip.component.js";
-//#region src/elements/chip/chip-group/chip-group.scss?lit&inline
-var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`, S = class extends CustomEvent {
+//#region src/elements/chip/chip-group/chip-group.scss?inline
+var x = ":host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}", S = class extends CustomEvent {
 	get detail() {
 		return this;
 	}
@@ -29,17 +29,17 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 		this.label = e;
 	}
 }, C = (() => {
-	let n = d(c(u(l(o)))), C = [], w, T, E = [], D = [], O, k = [], A = [], j, M = [], N = [];
-	return class extends n {
+	let C = d(c(u(l(o)))), w = [], T, E, D = [], O = [], k, A = [], j = [], M, N = [], P = [];
+	return class extends C {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			w = [a({ type: Array })], T = [a({ attribute: !1 })], O = [a({
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(C[Symbol.metadata] ?? null) : void 0;
+			T = [a({ type: Array })], E = [a({ attribute: !1 })], k = [a({
 				attribute: "separator-keys",
 				type: Array
-			})], j = [s(), a({
+			})], M = [s(), a({
 				attribute: "add-on-blur",
 				type: Boolean
-			})], e(this, null, w, {
+			})], e(this, null, T, {
 				kind: "setter",
 				name: "value",
 				static: !1,
@@ -51,7 +51,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 					}
 				},
 				metadata: t
-			}, null, C), e(this, null, T, {
+			}, null, w), e(this, null, E, {
 				kind: "accessor",
 				name: "displayWith",
 				static: !1,
@@ -64,7 +64,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 					}
 				},
 				metadata: t
-			}, E, D), e(this, null, O, {
+			}, D, O), e(this, null, k, {
 				kind: "accessor",
 				name: "separatorKeys",
 				static: !1,
@@ -77,7 +77,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 					}
 				},
 				metadata: t
-			}, k, A), e(this, null, j, {
+			}, A, j), e(this, null, M, {
 				kind: "accessor",
 				name: "addOnBlur",
 				static: !1,
@@ -90,7 +90,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 					}
 				},
 				metadata: t
-			}, M, N), t && Object.defineProperty(this, Symbol.metadata, {
+			}, N, P), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -104,7 +104,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 			this.role = "listbox";
 		}
 		static {
-			this.styles = [f, x];
+			this.styles = [f, i(x)];
 		}
 		static {
 			this.events = {
@@ -147,7 +147,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 			this.#n = e;
 		}
 		constructor() {
-			super(), this.#e = (t(this, C), t(this, E, null)), this.#t = (t(this, D), t(this, k, ["Enter"])), this.#n = (t(this, A), t(this, M, !1)), this._inputAttributeObserver = (t(this, N), i ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new p(this), this.addEventListener?.(b.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new m(this, () => this.closest("sbb-form-field"), {
+			super(), this.#e = (t(this, w), t(this, D, null)), this.#t = (t(this, O), t(this, A, ["Enter"])), this.#n = (t(this, j), t(this, N, !1)), this._inputAttributeObserver = (t(this, P), r ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new p(this), this.addEventListener?.(b.events.requestdelete, (e) => this._deleteChip(e.target)), this.addEventListener?.("keydown", (e) => this._onChipKeyDown(e)), this.addController(new m(this, () => this.closest("sbb-form-field"), {
 				size: (e) => this._updateSize(e.size),
 				label: (e) => this._updateLabelState(e),
 				hiddenLabel: (e) => this._updateLabelState(e)
@@ -263,7 +263,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 			})), this.dispatchEvent(new Event("change", { bubbles: !0 }));
 		}
 		_createChipElement(e, t) {
-			if (i) return;
+			if (r) return;
 			let n = document.createElement("sbb-chip");
 			n.value = e, n.innerText = t ?? (e ? this.displayWith?.(e) : null) ?? "", this.insertBefore(n, this._inputElement ?? this.querySelector("input"));
 		}
@@ -282,7 +282,7 @@ var x = n`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-
 			this._inputElement && this._inputElement.setAttribute("aria-description", `${h[this._language.current]} ${this.value.length}`);
 		}
 		render() {
-			return r`<slot @slotchange=${this._setupComponent}></slot>`;
+			return n`<slot @slotchange=${this._setupComponent}></slot>`;
 		}
 	};
 })();

package/chip-label/chip-label.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chip-label.component-CFDlJJZv.js";
+import { t as e } from "../chip-label.component-B76PdOCg.js";
 export { e as SbbChipLabelElement };

package/chip-label.component-B76PdOCg.js

@@ -0,0 +1,80 @@
+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/chip-label/chip-label.scss?inline
+var s = ":host{display:inline-block}:host([color=charcoal]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-background-color-2-inverted)}:host([color=white]){--sbb-chip-label-color: var(--sbb-color-granite);--sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-label-background-color: var(--sbb-background-color-1)}:host([color=granite]){--sbb-chip-label-color: var(--sbb-color-2-inverted);--sbb-chip-label-background-color: var(--sbb-color-granite);--sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm))}:host([size=xs]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-chip-label-font-size: var(--sbb-text-font-size-xs)}:host([size=s]){--sbb-chip-label-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-chip-label-font-size: var(--sbb-text-font-size-s)}.sbb-chip-label{line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-text) * var(--sbb-chip-label-font-size) + var(--sbb-chip-label-padding-block) * 2);background-color:var(--sbb-chip-label-background-color);padding-inline:var(--sbb-chip-label-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-label-color);font-size:var(--sbb-chip-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);overflow:hidden}@media(forced-colors:active){.sbb-chip-label{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip-label{display:flex}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}", c = (() => {
+	let c = a, l, u = [], d = [], f, p = [], m = [];
+	return class extends c {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+			l = [i({ reflect: !0 })], f = [i({ reflect: !0 })], e(this, null, l, {
+				kind: "accessor",
+				name: "size",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "size" in e,
+					get: (e) => e.size,
+					set: (e, t) => {
+						e.size = t;
+					}
+				},
+				metadata: t
+			}, u, d), e(this, null, f, {
+				kind: "accessor",
+				name: "color",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "color" in e,
+					get: (e) => e.color,
+					set: (e, t) => {
+						e.color = t;
+					}
+				},
+				metadata: t
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip-label";
+		}
+		static {
+			this.styles = [o, r(s)];
+		}
+		#e = t(this, u, "xxs");
+		get size() {
+			return this.#e;
+		}
+		set size(e) {
+			this.#e = e;
+		}
+		#t = (t(this, d), t(this, p, "milk"));
+		get color() {
+			return this.#t;
+		}
+		set color(e) {
+			this.#t = e;
+		}
+		render() {
+			return n`
+      <span class="sbb-chip-label">
+        <span class="sbb-chip__text-wrapper">
+          <slot></slot>
+        </span>
+      </span>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, m);
+		}
+	};
+})();
+//#endregion
+export { c as t };

package/chip-label.js

@@ -1,4 +1,4 @@
-import { t as e } from "./chip-label.component-CFDlJJZv.js";
+import { t as e } from "./chip-label.component-B76PdOCg.js";
 import "./chip-label.pure.js";
 //#region src/elements/chip-label.ts
 e.define();

package/chip-label.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./chip-label.component-CFDlJJZv.js";
+import { t as e } from "./chip-label.component-B76PdOCg.js";
 export { e as SbbChipLabelElement };

package/chip.component-Cu5guQs8.js

@@ -0,0 +1,98 @@
+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 { SbbDisabledMixin as o, SbbNegativeMixin as s, SbbReadonlyMixin as c } from "./core/mixins.js";
+import { boxSizingStyles as l } from "./core/styles.js";
+import { SbbMiniButtonElement as u } from "./button.pure.js";
+import { SbbLanguageController as d } from "./core/controllers.js";
+import { i18nChipDelete as f } from "./core/i18n.js";
+import "./screen-reader-only.js";
+//#region src/elements/chip/chip/chip.scss?inline
+var p = ":host{--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:inline-flex;align-items:stretch;background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height)}:host(:focus){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-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;font-size:var(--sbb-chip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}";
+//#endregion
+//#region src/elements/chip/chip/chip.component.ts
+u.define();
+var m = (() => {
+	let u = s(o(c(a))), m, h = [], g = [];
+	return class extends u {
+		constructor() {
+			super(...arguments), this.#e = t(this, h, null), this._language = (t(this, g), new d(this));
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+			m = [i()], e(this, null, m, {
+				kind: "accessor",
+				name: "value",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "value" in e,
+					get: (e) => e.value,
+					set: (e, t) => {
+						e.value = t;
+					}
+				},
+				metadata: t
+			}, h, g), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip";
+		}
+		static {
+			this.role = "option";
+		}
+		static {
+			this.styles = [l, r(p)];
+		}
+		static {
+			this.events = { requestdelete: "requestdelete" };
+		}
+		#e;
+		get value() {
+			return this.#e;
+		}
+		set value(e) {
+			this.#e = e;
+		}
+		willUpdate(e) {
+			super.willUpdate(e), e.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+		}
+		_deleteButton() {
+			return this.shadowRoot.querySelector("sbb-mini-button");
+		}
+		_handleDeleteButtonClick() {
+			this.dispatchEvent(new Event("requestdelete", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		render() {
+			return n`
+      <div class="sbb-chip__label-wrapper">
+        <span class="sbb-chip__label">
+          <slot>${this.value ?? ""}</slot>
+        </span>
+      </div>
+      <sbb-mini-button
+        aria-hidden="true"
+        class="sbb-chip__delete"
+        icon-name="cross-tiny-small"
+        @click=${this._handleDeleteButtonClick}
+      >
+      </sbb-mini-button>
+      <sbb-screen-reader-only>, ${f[this._language.current]}</sbb-screen-reader-only>
+    `;
+		}
+	};
+})();
+//#endregion
+export { m as t };

package/chip.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./chip-group.component-CpXuOisx.js";
-import { t as n } from "./chip.component-3kuQjaZq.js";
+import { n as e, t } from "./chip-group.component-DJzUToem.js";
+import { t as n } from "./chip.component-Cu5guQs8.js";
 import "./chip.pure.js";
 n.define(), t.define();
 //#endregion

package/chip.pure.js

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

package/clock/clock.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../clock.component-CZq8NuSw.js";
+import { t as e } from "../clock.component-DHFuoi2A.js";
 export { e as SbbClockElement };

package/{clock.component-CZq8NuSw.js → clock.component-DHFuoi2A.js}

@@ -1,24 +1,24 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r, isServer as i } from "lit";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
 import { property as a } from "lit/decorators.js";
 import { SbbElement as o } from "./core/base-elements.js";
 import { boxSizingStyles as s } from "./core/styles.js";
 import { ref as c } from "lit/directives/ref.js";
 //#region src/elements/clock/assets/sbb_clock_face.svg?raw
-var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><g class=\"face\"><circle fill=\"var(--sbb-clock-background-color)\" cx=\"52.5\" cy=\"52.5\" r=\"52.5\"/><path d=\"M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z\"/><g><path d=\"M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z\"/></g></g></svg>\n", u = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path id=\"mod_clock_svg_hours\" d=\"M55.7 64.5h-6.4l.6-44h5.2z\"/></svg>\n", d = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path d=\"M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z\"/></svg>\n", f = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path d=\"M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z\"/></svg>\n", p = n`:host{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, "paused")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, "paused");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle, 0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle, 0deg))}97.5%,to{transform:rotate(360deg)}}`, m = 12, h = 60, g = 60, _ = 50, v = 360, y = 30, b = 6, x = 360 / 58.5, S = 60, C = 3600, w = C / 2, T = {
+var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><g class=\"face\"><circle fill=\"var(--sbb-clock-background-color)\" cx=\"52.5\" cy=\"52.5\" r=\"52.5\"/><path d=\"M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z\"/><g><path d=\"M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z\"/></g></g></svg>\n", u = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path id=\"mod_clock_svg_hours\" d=\"M55.7 64.5h-6.4l.6-44h5.2z\"/></svg>\n", d = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path d=\"M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z\"/></svg>\n", f = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 105 105\"><path d=\"M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z\"/></svg>\n", p = ":host{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;inset:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__face{fill:var(--sbb-clock-face-color)}.sbb-clock__hand-minutes{transition:transform var(--sbb-disable-animation-duration, .2s) cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, \"paused\")}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, \"paused\");animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state, \"paused\");animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration, 0s);animation-play-state:var(--sbb-clock-animation-play-state, \"paused\");animation-iteration-count:1}:host(:not(:is(:state(initialized),[state--initialized]))) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle, 0deg))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle, 0deg))}97.5%,to{transform:rotate(360deg)}}", m = 12, h = 60, g = 60, _ = 50, v = 360, y = 30, b = 6, x = 360 / 58.5, S = 60, C = 3600, w = C / 2, T = {
 	once: !0,
 	passive: !0
 }, E = (() => {
-	let n = o, E, D = [], O = [];
-	return class extends n {
+	let E = o, D, O = [], k = [];
+	return class extends E {
 		constructor() {
-			super(...arguments), this.#e = t(this, D, null), this._state = (t(this, O), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
+			super(...arguments), this.#e = t(this, O, null), this._state = (t(this, k), "paused"), this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand(), this._handlePageVisibilityChange = async () => {
 				this.now || (document.visibilityState === "hidden" ? await this._stopClock() : await this._startClock());
 			};
 		}
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			E = [a()], e(this, null, E, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(E[Symbol.metadata] ?? null) : void 0;
+			D = [a()], e(this, null, D, {
 				kind: "accessor",
 				name: "now",
 				static: !1,
@@ -31,7 +31,7 @@ var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\
 					}
 				},
 				metadata: t
-			}, D, O), t && Object.defineProperty(this, Symbol.metadata, {
+			}, O, k), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -42,7 +42,7 @@ var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\
 			this.elementName = "sbb-clock";
 		}
 		static {
-			this.styles = [s, p];
+			this.styles = [s, i(p)];
 		}
 		#e;
 		get now() {
@@ -55,10 +55,10 @@ var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\
 			super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), w * 1e3);
 		}
 		willUpdate(e) {
-			super.willUpdate(e), !i && e.has("now") && this._startOrConfigureClock();
+			super.willUpdate(e), !r && e.has("now") && this._startOrConfigureClock();
 		}
 		firstUpdated(e) {
-			super.firstUpdated(e), i || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
+			super.firstUpdated(e), r || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
 		}
 		disconnectedCallback() {
 			super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
@@ -117,7 +117,7 @@ var l = "<svg focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\
 			this._clockHandSeconds?.classList.remove("sbb-clock__hand-seconds--initial-minute"), this._clockHandMinutes?.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
 		}
 		render() {
-			return r`
+			return n`
       <span class="sbb-clock__face" .innerHTML=${l}></span>
       <span
         class="sbb-clock__hand-hours"

package/clock.js

@@ -1,4 +1,4 @@
-import { t as e } from "./clock.component-CZq8NuSw.js";
+import { t as e } from "./clock.component-DHFuoi2A.js";
 import "./clock.pure.js";
 //#region src/elements/clock.ts
 e.define();

package/clock.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./clock.component-CZq8NuSw.js";
+import { t as e } from "./clock.component-DHFuoi2A.js";
 export { e as SbbClockElement };

package/{compact-paginator.component-CoFi8QhW.js → compact-paginator.component-Co8YvCZK.js}

@@ -1,4 +1,4 @@
-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 { boxSizingStyles as r } from "./core/styles.js";
 import { i18nPage as i, i18nPaginatorOf as a } from "./core/i18n.js";
@@ -6,19 +6,19 @@ import "./divider.js";
 import "./screen-reader-only.js";
 import { styleMap as o } from "lit/directives/style-map.js";
 import { SbbPaginatorCommonElementMixin as s } from "./paginator/common/paginator-common.js";
-//#region src/elements/paginator/compact-paginator/compact-paginator.scss?lit&inline
-var c = e`:host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}`, l = class extends s(n) {
+//#region src/elements/paginator/compact-paginator/compact-paginator.scss?inline
+var c = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content:var(--sbb-paginator-compact-justify-content, start);min-height:var(--sbb-compact-paginator-height)}:host([size=s]){--sbb-compact-paginator-height: var(--sbb-size-element-xs)}:host([size=m]){--sbb-compact-paginator-height: var(--sbb-size-element-m)}:host([negative]){--sbb-compact-paginator-color: var(--sbb-color-5)}:host([pager-position=end]){--sbb-paginator-compact-justify-content: end}.sbb-paginator__pages{font-size:var(--sbb-compact-paginator-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;align-items:center;justify-content:center;gap:var(--sbb-compact-paginator-pages-gap);color:var(--sbb-compact-paginator-color)}.sbb-compact-paginator__divider{height:1rem}", l = class extends s(n) {
 	static {
 		this.elementName = "sbb-compact-paginator";
 	}
 	static {
-		this.styles = [r, c];
+		this.styles = [r, t(c)];
 	}
 	static {
 		this.events = { page: "page" };
 	}
 	_renderPageNumbers() {
-		return t`
+		return e`
       <span class="sbb-paginator__pages" aria-hidden="true"
         >${this.pageIndex + 1}<sbb-divider
           orientation="vertical"
@@ -34,8 +34,8 @@ var c = e`:host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-conten
     `;
 	}
 	renderPaginator() {
-		return t`
-      ${this.pagerPosition === "start" ? t`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : t`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
+		return e`
+      ${this.pagerPosition === "start" ? e`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : e`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
     `;
 	}
 };

package/container/container/container.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../container.component-mgU80iW0.js";
+import { t as e } from "../../container.component-CkYADvvc.js";
 export { e as SbbContainerElement };

package/container/container.js

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

package/container/sticky-bar/sticky-bar.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../sticky-bar.component-DnPfDrKx.js";
+import { t as e } from "../../sticky-bar.component-DDBq8uXU.js";
 export { e as SbbStickyBarElement };

package/container/sticky-bar.js

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

package/container.component-CkYADvvc.js

@@ -0,0 +1,117 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a } from "./core/base-elements.js";
+import { forceType as o } from "./core/decorators.js";
+import { ɵstateController as s } from "./core/mixins.js";
+import { boxSizingStyles as c } from "./core/styles.js";
+//#region src/elements/container/container/container.scss?inline
+var l = "@charset \"UTF-8\";:host{display:block}:host(:is(:not([color]),[color=white])){--sbb-container-background-color: var(--sbb-background-color-1)}:host([color=milk]){--sbb-container-background-color: var(--sbb-background-color-3)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-1-negative)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-background-color-1-negative)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-background-color-2-negative)}:host(:is(:state(slotted-image),[state--slotted-image])){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host(:is(:state(slotted-image),[state--slotted-image])[background-expanded]){position:relative}@media(min-width:90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:\"\xA0\";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-layout-base-offset-responsive));margin-inline:auto;width:100%}@media(min-width:90rem){:host(:not([expanded])) .sbb-container{max-width:var(--sbb-spacing-max-width, calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}:host(:is(:state(slotted-image),[state--slotted-image]):not([background-expanded])) .sbb-container{position:relative}:host(:is(:state(slotted-image),[state--slotted-image])) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;inset:0;height:100%;width:100%}", u = (() => {
+	let u = a, d, f = [], p = [], m, h = [], g = [], _, v = [], y = [];
+	return class extends u {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+			d = [o(), i({
+				type: Boolean,
+				reflect: !0
+			})], m = [o(), i({
+				type: Boolean,
+				reflect: !0,
+				attribute: "background-expanded"
+			})], _ = [i({ reflect: !0 })], e(this, null, d, {
+				kind: "accessor",
+				name: "expanded",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "expanded" in e,
+					get: (e) => e.expanded,
+					set: (e, t) => {
+						e.expanded = t;
+					}
+				},
+				metadata: t
+			}, f, p), e(this, null, m, {
+				kind: "accessor",
+				name: "backgroundExpanded",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "backgroundExpanded" in e,
+					get: (e) => e.backgroundExpanded,
+					set: (e, t) => {
+						e.backgroundExpanded = t;
+					}
+				},
+				metadata: t
+			}, h, g), e(this, null, _, {
+				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
+			}, v, y), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-container";
+		}
+		static {
+			this.styles = [c, r(l)];
+		}
+		#e = t(this, f, !1);
+		get expanded() {
+			return this.#e;
+		}
+		set expanded(e) {
+			this.#e = e;
+		}
+		#t = (t(this, p), t(this, h, !1));
+		get backgroundExpanded() {
+			return this.#t;
+		}
+		set backgroundExpanded(e) {
+			this.#t = e;
+		}
+		#n = (t(this, g), t(this, v, "white"));
+		get color() {
+			return this.#n;
+		}
+		set color(e) {
+			this.#n = e;
+		}
+		willUpdate(e) {
+			if (super.willUpdate(e), e.has("expanded")) {
+				let e = this.querySelector?.("sbb-sticky-bar");
+				s(e)?.toggle("expanded", this.expanded);
+			}
+		}
+		render() {
+			return n`
+      <div class="sbb-container">
+        <slot name="image"></slot>
+        <div class="sbb-container__content">
+          <slot></slot>
+        </div>
+      </div>
+      <slot name="sticky-bar"></slot>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, y);
+		}
+	};
+})();
+//#endregion
+export { u as t };