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

package/chip.component-34R1PNPV.js

@@ -0,0 +1,92 @@
+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 { SbbDisabledMixin as a, SbbElement as o, SbbLanguageController as s, SbbNegativeMixin as c, SbbReadonlyMixin as l, SbbScreenReaderOnlyElement as u, boxSizingStyles as d, i18nChipDelete as f } from "./core.js";
+import { SbbMiniButtonElement as p } from "./button.pure.js";
+//#region src/elements/chip/chip/chip.scss?inline
+var m = ":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)}}", h = (() => {
+	let h = c(a(l(o))), g, _ = [], v = [];
+	return class extends h {
+		constructor() {
+			super(...arguments), this.#e = t(this, _, null), this._language = (t(this, v), new s(this));
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+			g = [i()], e(this, null, g, {
+				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
+			}, _, v), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-chip";
+		}
+		static {
+			this.elementDependencies = [p, u];
+		}
+		static {
+			this.role = "option";
+		}
+		static {
+			this.styles = [d, r(m)];
+		}
+		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 { h as t };

package/chip.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./chip-group.component-DJzUToem.js";
-import { t as n } from "./chip.component-Cu5guQs8.js";
+import { n as e, t } from "./chip-group.component-DbNctvjy.js";
+import { t as n } from "./chip.component-34R1PNPV.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-DJzUToem.js";
-import { t as n } from "./chip.component-Cu5guQs8.js";
+import { n as e, t } from "./chip-group.component-DbNctvjy.js";
+import { t as n } from "./chip.component-34R1PNPV.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-DHFuoi2A.js";
+import { t as e } from "../clock.component-DHb5YwM4.js";
 export { e as SbbClockElement };

package/clock.component-DHb5YwM4.js

@@ -0,0 +1,147 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o, boxSizingStyles as s } from "./core.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 = ":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 E = o, D, O = [], k = [];
+	return class extends E {
+		constructor() {
+			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(E[Symbol.metadata] ?? null) : void 0;
+			D = [a()], e(this, null, D, {
+				kind: "accessor",
+				name: "now",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "now" in e,
+					get: (e) => e.now,
+					set: (e, t) => {
+						e.now = t;
+					}
+				},
+				metadata: t
+			}, O, k), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-clock";
+		}
+		static {
+			this.styles = [s, i(p)];
+		}
+		#e;
+		get now() {
+			return this.#e;
+		}
+		set now(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this._resetIntervalId = setInterval(() => this._resetClock(), w * 1e3);
+		}
+		willUpdate(e) {
+			super.willUpdate(e), !r && e.has("now") && this._startOrConfigureClock();
+		}
+		firstUpdated(e) {
+			super.firstUpdated(e), r || (document.addEventListener("visibilitychange", this._handlePageVisibilityChange, !1), this._startOrConfigureClock());
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._removeEventListeners(), clearInterval(this._resetIntervalId);
+		}
+		async _startOrConfigureClock() {
+			this.now ? (await this._stopClock(), this._resetSecondsHandAnimation(), this._setHandsStartingPosition()) : await this._startClock();
+		}
+		async _startClock() {
+			this._clockHandHours?.addEventListener("animationend", this._moveHoursHandFn, T), this._clockHandSeconds?.addEventListener("animationend", this._moveMinutesHandFn, T), await new Promise((e) => setTimeout(() => {
+				this._setHandsStartingPosition(), this.style?.setProperty("--sbb-clock-animation-play-state", "running"), this._state = "running", e();
+			}, _));
+		}
+		async _stopClock() {
+			clearInterval(this._handMovement), this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._clockHandMinutes?.classList.add("sbb-clock__hand-minutes--no-transition"), this.style?.setProperty("--sbb-clock-animation-play-state", "paused"), this._state = "paused";
+		}
+		async _resetClock() {
+			this._state === "running" && (await this._stopClock(), await this._startClock());
+		}
+		_setHandsStartingPosition() {
+			this._assignCurrentTime();
+			let e = g - this._seconds, t = h - this._minutes, n = m - this._hours, r = 0, i = 0;
+			e > 0 && (r += e, i = 1), t > 0 && (r += (t - i) * S, i = 1), n > 0 && (r += (n - i) * C), this.style?.setProperty("--sbb-clock-hours-animation-start-angle", `${Math.ceil(this._hours * y + this._minutes / 2)}deg`), this.style?.setProperty("--sbb-clock-hours-animation-duration", `${r}s`), this.style?.setProperty("--sbb-clock-seconds-animation-start-angle", `${Math.ceil(this._seconds * x)}deg`), this.style?.setProperty("--sbb-clock-seconds-animation-duration", `${e}s`), this._setMinutesHand(), this._clockHandSeconds?.classList.add("sbb-clock__hand-seconds--initial-minute"), this._clockHandHours?.classList.add("sbb-clock__hand-hours--initial-hour"), this.internals.states.add("initialized");
+		}
+		_assignCurrentTime() {
+			let e = this.now ? null : /* @__PURE__ */ new Date(), [t, n, r] = e ? [
+				e.getHours(),
+				e.getMinutes(),
+				e.getSeconds()
+			] : this.now.split(":").map((e) => +e);
+			this._hours = t % 12, this._minutes = n, this._seconds = r;
+		}
+		_setMinutesHand() {
+			this._clockHandMinutes?.style.setProperty("transform", `rotateZ(${Math.ceil(this._minutes * b)}deg)`);
+		}
+		_moveHoursHand() {
+			this._removeHoursAnimationStyles();
+			let e = Math.ceil(this._hours * y + this._minutes / 2);
+			e >= v && (e -= v), this._clockHandHours?.style.setProperty("transform", `rotateZ(${e}deg)`);
+		}
+		_moveMinutesHand() {
+			this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(() => this._addMinutesAndSetHands(), g * 1e3);
+		}
+		_addMinutesAndSetHands() {
+			this._minutes++, this._setMinutesHand();
+		}
+		_resetSecondsHandAnimation() {
+			this._clockHandSeconds && (this._clockHandSeconds.style.animation = "", this._clockHandSeconds.offsetHeight, this._clockHandSeconds.style.removeProperty("animation"));
+		}
+		_removeEventListeners() {
+			document?.removeEventListener("visibilitychange", this._handlePageVisibilityChange), this._clockHandHours?.removeEventListener("animationend", this._moveHoursHandFn), this._clockHandSeconds?.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
+		}
+		_removeHoursAnimationStyles() {
+			this._clockHandHours?.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
+		}
+		_removeSecondsAnimationStyles() {
+			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 n`
+      <span class="sbb-clock__face" .innerHTML=${l}></span>
+      <span
+        class="sbb-clock__hand-hours"
+        .innerHTML=${u}
+        ${c((e) => {
+				this._clockHandHours = e;
+			})}
+      ></span>
+      <span
+        class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
+        .innerHTML=${d}
+        ${c((e) => {
+				this._clockHandMinutes = e;
+			})}
+      ></span>
+      <span
+        class="sbb-clock__hand-seconds"
+        .innerHTML=${f}
+        ${c((e) => {
+				this._clockHandSeconds = e;
+			})}
+      ></span>
+    `;
+		}
+	};
+})();
+//#endregion
+export { E as t };

package/clock.js

@@ -1,4 +1,4 @@
-import { t as e } from "./clock.component-DHFuoi2A.js";
+import { t as e } from "./clock.component-DHb5YwM4.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-DHFuoi2A.js";
+import { t as e } from "./clock.component-DHb5YwM4.js";
 export { e as SbbClockElement };

package/compact-paginator.component-Dyu9bezr.js

@@ -0,0 +1,43 @@
+import { html as e, unsafeCSS as t } from "lit";
+import { SbbElement as n, SbbScreenReaderOnlyElement as r, boxSizingStyles as i, i18nPage as a, i18nPaginatorOf as o } from "./core.js";
+import { SbbDividerElement as s } from "./divider.pure.js";
+import { styleMap as c } from "lit/directives/style-map.js";
+import { SbbPaginatorCommonElementMixin as l } from "./paginator/common/paginator-common.js";
+//#region src/elements/paginator/compact-paginator/compact-paginator.scss?inline
+var u = ":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);line-height:var(--sbb-typo-line-height-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}", d = class extends l(n) {
+	static {
+		this.elementName = "sbb-compact-paginator";
+	}
+	static {
+		this.elementDependencies = [s, r];
+	}
+	static {
+		this.styles = [i, t(u)];
+	}
+	static {
+		this.events = { page: "page" };
+	}
+	_renderPageNumbers() {
+		return e`
+      <span class="sbb-paginator__pages" aria-hidden="true"
+        >${this.pageIndex + 1}<sbb-divider
+          orientation="vertical"
+          class="sbb-compact-paginator__divider"
+          style=${c({ "--sbb-divider-color": "currentcolor" })}
+          ?negative=${this.negative}
+        ></sbb-divider
+        >${this.numberOfPages()}</span
+      >
+      <sbb-screen-reader-only>
+        ${`${this.accessibilityPageLabel ? this.accessibilityPageLabel : a[this.language.current]} ${this.pageIndex + 1} ${o[this.language.current]} ${this.numberOfPages()}`}
+      </sbb-screen-reader-only>
+    `;
+	}
+	renderPaginator() {
+		return e`
+      ${this.pagerPosition === "start" ? e`${this.renderPrevNextButtons()} ${this._renderPageNumbers()}` : e`${this._renderPageNumbers()} ${this.renderPrevNextButtons()}`}
+    `;
+	}
+};
+//#endregion
+export { d as t };

package/container/container/container.component.js

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

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

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

package/container.component-CJL8qqFp.js

@@ -0,0 +1,114 @@
+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, forceType as s, ɵstateController as c } from "./core.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 = [s(), i({
+				type: Boolean,
+				reflect: !0
+			})], m = [s(), 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 = [o, 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");
+				c(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 };

package/container.js

@@ -1,5 +1,5 @@
-import { t as e } from "./container.component-CkYADvvc.js";
-import { t } from "./sticky-bar.component-DDBq8uXU.js";
+import { t as e } from "./container.component-CJL8qqFp.js";
+import { t } from "./sticky-bar.component-B_cdkr-V.js";
 import "./container.pure.js";
 e.define(), t.define();
 //#endregion

package/container.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./container.component-CkYADvvc.js";
-import { t } from "./sticky-bar.component-DDBq8uXU.js";
+import { t as e } from "./container.component-CJL8qqFp.js";
+import { t } from "./sticky-bar.component-B_cdkr-V.js";
 export { e as SbbContainerElement, t as SbbStickyBarElement };

package/core/a11y/focus-visible-within-controller.js

@@ -1,12 +1,11 @@
 import { sbbInputModalityDetector as e } from "./input-modality-detector.js";
-import { ɵstateController as t } from "../mixins/element-internals-mixin.js";
 //#region src/elements/core/a11y/focus-visible-within-controller.ts
-var n = class {
-	constructor(n) {
-		this._host = n, this._focusinHandler = () => {
-			t(this._host).toggle("has-visible-focus-within", e.mostRecentModality === "keyboard");
+var t = class {
+	constructor(t) {
+		this._host = t, this._focusinHandler = () => {
+			this._host.toggleState?.("has-visible-focus-within", e.mostRecentModality === "keyboard");
 		}, this._focusoutHandler = () => {
-			t(this._host).delete("has-visible-focus-within");
+			this._host.toggleState?.("has-visible-focus-within", !1);
 		}, this._host.addController(this);
 	}
 	hostConnected() {
@@ -17,4 +16,4 @@ var n = class {
 	}
 };
 //#endregion
-export { n as SbbFocusVisibleWithinController };
+export { t as SbbFocusVisibleWithinController };

package/core/a11y/input-modality-detector.js

@@ -1,6 +1,6 @@
 import { isFakeMousedownFromScreenReader as e, isFakeTouchstartFromScreenReader as t } from "./fake-event-detection.js";
 import { isServer as n } from "lit";
-import { getEventTarget as r } from "../eventing.js";
+import { getEventTarget as r } from "../eventing/event-target.js";
 //#region src/elements/core/a11y/input-modality-detector.ts
 var i = { ignoreKeys: [
 	18,

package/core/base-elements/button-base-element.js

@@ -2,9 +2,10 @@ import { SbbActionBaseElement as e } from "./action-base-element.js";
 import { __esDecorate as t, __runInitializers as n } from "tslib";
 import { isServer as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { forceType as a, hostAttributes as o } from "../decorators.js";
-import { isEventPrevented as s } from "../eventing.js";
-import { SbbFormAssociatedMixin as c } from "../mixins.js";
+import { forceType as a } from "../decorators/force-type.js";
+import { hostAttributes as o } from "../decorators/host-attributes.js";
+import { isEventPrevented as s } from "../eventing/is-event-prevented.js";
+import { SbbFormAssociatedMixin as c } from "../mixins/form-associated-mixin.js";
 //#region src/elements/core/base-elements/button-base-element.ts
 var l = (() => {
 	let i = [o({ tabindex: "0" })], a, s = [], l, u = c(e);