@sbb-esta/lyne-elements-dev 5.0.0-next.1-dev.1777393579 → 5.0.0-next.1-dev.1777453303

package/checkbox-common-CbMkoAks.js

@@ -0,0 +1,76 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { unsafeCSS as n } from "lit";
+import { property as r } from "lit/decorators.js";
+import { SbbFormAssociatedCheckboxMixin as i, boxSizingStyles as a, forceType as o } from "./core.js";
+//#region src/elements/checkbox/common/checkbox-common.scss?inline
+var s = "@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{position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font-size:var(--sbb-checkbox-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text)}.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))}", c = (c) => {
+	let l = i(c);
+	return (() => {
+		let i = l, c, u = [], d = [];
+		return class extends i {
+			constructor() {
+				super(...arguments), this.#e = t(this, u, !1), this._group = (t(this, d), null);
+			}
+			static {
+				let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+				c = [o(), r({ type: Boolean })], e(this, null, c, {
+					kind: "accessor",
+					name: "indeterminate",
+					static: !1,
+					private: !1,
+					access: {
+						has: (e) => "indeterminate" in e,
+						get: (e) => e.indeterminate,
+						set: (e, t) => {
+							e.indeterminate = t;
+						}
+					},
+					metadata: t
+				}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
+					enumerable: !0,
+					configurable: !0,
+					writable: !0,
+					value: t
+				});
+			}
+			static {
+				this.styles = [
+					l.styles ?? [],
+					a,
+					n(s)
+				];
+			}
+			#e;
+			get indeterminate() {
+				return this.#e;
+			}
+			set indeterminate(e) {
+				this.#e = e;
+			}
+			get group() {
+				return this._group;
+			}
+			connectedCallback() {
+				super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), [
+					"disabled",
+					"required",
+					"size"
+				].forEach((e) => this.requestUpdate(e));
+			}
+			willUpdate(e) {
+				super.willUpdate(e), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+			}
+			isDisabledExternally() {
+				return this.group?.disabled ?? !1;
+			}
+			isRequiredExternally() {
+				return this.group?.required ?? !1;
+			}
+			withUserInteraction() {
+				this.indeterminate &&= !1;
+			}
+		};
+	})();
+};
+//#endregion
+export { c as t };

package/checkbox-panel/checkbox-panel.component.js

@@ -1,16 +1,16 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r } from "lit";
 import { property as i } from "lit/decorators.js";
-import { SbbElement as a, SbbPanelMixin as o, SbbScreenReaderOnlyElement as s, SbbUpdateSchedulerMixin as c, boxSizingStyles as l, panelCommonStyle as u } from "../core.js";
-import { SbbCheckboxCommonElementMixin as d, checkboxCommonStyle as f } from "../checkbox/common/checkbox-common.js";
-import { SbbVisualCheckboxElement as p } from "../visual-checkbox.pure.js";
+import { SbbElement as a, SbbPanelMixin as o, SbbUpdateSchedulerMixin as s, screenReaderOnlyStyles as c } from "../core.js";
+import { SbbCheckboxCommonElementMixin as l } from "../checkbox/common/checkbox-common.js";
+import { SbbVisualCheckboxElement as u } from "../visual-checkbox.pure.js";
 //#region src/elements/checkbox-panel/checkbox-panel.component.ts
-var m = (() => {
-	let m = o(d(c(a))), h, g = [], _ = [];
-	return class extends m {
+var d = (() => {
+	let d = o(l(s(a))), f, p = [], m = [];
+	return class extends d {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-			h = [i()], e(this, null, h, {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(d[Symbol.metadata] ?? null) : void 0;
+			f = [i()], e(this, null, f, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -23,7 +23,7 @@ var m = (() => {
 					}
 				},
 				metadata: t
-			}, g, _), t && Object.defineProperty(this, Symbol.metadata, {
+			}, p, m), t && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -34,16 +34,12 @@ var m = (() => {
 			this.elementName = "sbb-checkbox-panel";
 		}
 		static {
-			this.elementDependencies = [s, p];
+			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [
-				l,
-				f,
-				u
-			];
+			this.styles = [super.styles ?? [], c];
 		}
-		#e = t(this, g, null);
+		#e = t(this, p, null);
 		get value() {
 			return this.#e;
 		}
@@ -76,16 +72,16 @@ var m = (() => {
               </span>
             </span>
             <slot name="subtext"></slot>
-            ${this.expansionState ? n`<sbb-screen-reader-only>${this.expansionState}</sbb-screen-reader-only>` : r}
+            ${this.expansionState ? n`<span class="sbb-screen-reader-only">${this.expansionState}</span>` : r}
           </span>
         </span>
       </span>
     `;
 		}
 		constructor() {
-			super(...arguments), t(this, _);
+			super(...arguments), t(this, m);
 		}
 	};
 })();
 //#endregion
-export { m as SbbCheckboxPanelElement };
+export { d as SbbCheckboxPanelElement };

package/{checkbox.component-CR2aIgjA.js → checkbox.component-DLkmHbNb.js}

@@ -1,20 +1,20 @@
-import { n as e, t } from "./checkbox-common-DSmxKbmR.js";
-import { __esDecorate as n, __runInitializers as r } from "tslib";
-import { html as i, unsafeCSS as a } from "lit";
-import { property as o } from "lit/decorators.js";
-import { SbbElement as s, boxSizingStyles as c, getOverride as l, isLean as u } from "./core.js";
-import { SbbIconNameMixin as d } from "./icon.pure.js";
-import { SbbVisualCheckboxElement as f } from "./visual-checkbox.pure.js";
+import { t as e } from "./checkbox-common-CbMkoAks.js";
+import { __esDecorate as t, __runInitializers as n } from "tslib";
+import { html as r, unsafeCSS as i } from "lit";
+import { property as a } from "lit/decorators.js";
+import { SbbElement as o, getOverride as s, isLean as c } from "./core.js";
+import { SbbIconNameMixin as l } from "./icon.pure.js";
+import { SbbVisualCheckboxElement as u } from "./visual-checkbox.pure.js";
 //#region src/elements/checkbox/checkbox.scss?inline
-var p = ":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))}", m = (() => {
-	let m = d(t(s)), h, g = [], _ = [], v, y = [], b = [], x, S = [], C = [];
-	return class extends m {
+var d = ":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))}", f = (() => {
+	let f = l(e(o)), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [];
+	return class extends f {
 		static {
-			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
-			h = [o()], v = [o({ reflect: !0 }), l((e, t) => e.group?.size ?? t)], x = [o({
+			let e = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [a()], g = [a({ reflect: !0 }), s((e, t) => e.group?.size ?? t)], y = [a({
 				attribute: "icon-placement",
 				reflect: !0
-			})], n(this, null, h, {
+			})], t(this, null, p, {
 				kind: "accessor",
 				name: "value",
 				static: !1,
@@ -27,7 +27,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, g, _), n(this, null, v, {
+			}, m, h), t(this, null, g, {
 				kind: "accessor",
 				name: "size",
 				static: !1,
@@ -40,7 +40,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, y, b), n(this, null, x, {
+			}, _, v), t(this, null, y, {
 				kind: "accessor",
 				name: "iconPlacement",
 				static: !1,
@@ -53,7 +53,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 					}
 				},
 				metadata: e
-			}, S, C), e && Object.defineProperty(this, Symbol.metadata, {
+			}, b, x), e && Object.defineProperty(this, Symbol.metadata, {
 				enumerable: !0,
 				configurable: !0,
 				writable: !0,
@@ -64,30 +64,26 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.elementName = "sbb-checkbox";
 		}
 		static {
-			this.elementDependencies = [f];
+			this.elementDependencies = [u];
 		}
 		static {
-			this.styles = [
-				c,
-				e,
-				a(p)
-			];
+			this.styles = [super.styles ?? [], i(d)];
 		}
-		#e = r(this, g, null);
+		#e = n(this, m, null);
 		get value() {
 			return this.#e;
 		}
 		set value(e) {
 			this.#e = e;
 		}
-		#t = (r(this, _), r(this, y, u() ? "xs" : "m"));
+		#t = (n(this, h), n(this, _, c() ? "xs" : "m"));
 		get size() {
 			return this.#t;
 		}
 		set size(e) {
 			this.#t = e;
 		}
-		#n = (r(this, b), r(this, S, "end"));
+		#n = (n(this, v), n(this, b, "end"));
 		get iconPlacement() {
 			return this.#n;
 		}
@@ -95,7 +91,7 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
 			this.#n = e;
 		}
 		render() {
-			return i`
+			return r`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -117,9 +113,9 @@ var p = ":host{outline:none!important;display:inline-block}:host([icon-placement
     `;
 		}
 		constructor() {
-			super(...arguments), r(this, C);
+			super(...arguments), n(this, x);
 		}
 	};
 })();
 //#endregion
-export { m as t };
+export { f as t };

package/checkbox.js

@@ -1,7 +1,7 @@
-import { t as e } from "./checkbox.component-CR2aIgjA.js";
-import { n as t, t as n } from "./checkbox-common-DSmxKbmR.js";
+import { t as e } from "./checkbox.component-DLkmHbNb.js";
+import { t } from "./checkbox-common-CbMkoAks.js";
 import "./checkbox.pure.js";
 //#region src/elements/checkbox.ts
 e.define();
 //#endregion
-export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };
+export { t as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement };

package/checkbox.pure.js

@@ -1,3 +1,3 @@
-import { t as e } from "./checkbox.component-CR2aIgjA.js";
-import { n as t, t as n } from "./checkbox-common-DSmxKbmR.js";
-export { n as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement, t as checkboxCommonStyle };
+import { t as e } from "./checkbox.component-DLkmHbNb.js";
+import { t } from "./checkbox-common-CbMkoAks.js";
+export { t as SbbCheckboxCommonElementMixin, e as SbbCheckboxElement };

package/chip/chip/chip.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chip.component-34R1PNPV.js";
+import { t as e } from "../../chip.component-C46iCslu.js";
 export { e as SbbChipElement };

package/{chip.component-34R1PNPV.js → chip.component-C46iCslu.js}

@@ -1,7 +1,7 @@
 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 { SbbDisabledMixin as a, SbbElement as o, SbbLanguageController as s, SbbNegativeMixin as c, SbbReadonlyMixin as l, boxSizingStyles as u, i18nChipDelete as d, screenReaderOnlyStyles 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 = (() => {
@@ -36,13 +36,17 @@ var m = ":host{--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chi
 			this.elementName = "sbb-chip";
 		}
 		static {
-			this.elementDependencies = [p, u];
+			this.elementDependencies = [p];
 		}
 		static {
 			this.role = "option";
 		}
 		static {
-			this.styles = [d, r(m)];
+			this.styles = [
+				u,
+				f,
+				r(m)
+			];
 		}
 		static {
 			this.events = { requestdelete: "requestdelete" };
@@ -83,7 +87,7 @@ var m = ":host{--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chi
         @click=${this._handleDeleteButtonClick}
       >
       </sbb-mini-button>
-      <sbb-screen-reader-only>, ${f[this._language.current]}</sbb-screen-reader-only>
+      <span class="sbb-screen-reader-only">, ${d[this._language.current]}</span>
     `;
 		}
 	};

package/chip.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./chip-group.component-DbNctvjy.js";
-import { t as n } from "./chip.component-34R1PNPV.js";
+import { t as n } from "./chip.component-C46iCslu.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-DbNctvjy.js";
-import { t as n } from "./chip.component-34R1PNPV.js";
+import { t as n } from "./chip.component-C46iCslu.js";
 export { n as SbbChipElement, t as SbbChipGroupElement, e as SbbChipInputTokenEndEvent };

package/{compact-paginator.component-Dyu9bezr.js → compact-paginator.component-CoAxdqWU.js}

@@ -1,18 +1,18 @@
 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";
+import { SbbElement as n, i18nPage as r, i18nPaginatorOf as i } from "./core.js";
+import { SbbDividerElement as a } from "./divider.pure.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?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) {
+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);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}", l = class extends s(n) {
 	static {
 		this.elementName = "sbb-compact-paginator";
 	}
 	static {
-		this.elementDependencies = [s, r];
+		this.elementDependencies = [a];
 	}
 	static {
-		this.styles = [i, t(u)];
+		this.styles = [super.styles ?? [], t(c)];
 	}
 	static {
 		this.events = { page: "page" };
@@ -23,14 +23,14 @@ var u = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content
         >${this.pageIndex + 1}<sbb-divider
           orientation="vertical"
           class="sbb-compact-paginator__divider"
-          style=${c({ "--sbb-divider-color": "currentcolor" })}
+          style=${o({ "--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>
+      <span class="sbb-screen-reader-only">
+        ${`${this.accessibilityPageLabel ? this.accessibilityPageLabel : r[this.language.current]} ${this.pageIndex + 1} ${i[this.language.current]} ${this.numberOfPages()}`}
+      </span>
     `;
 	}
 	renderPaginator() {
@@ -40,4 +40,4 @@ var u = ":host{display:flex;gap:var(--sbb-compact-paginator-gap);justify-content
 	}
 };
 //#endregion
-export { d as t };
+export { l as t };

package/core/mixins/named-slot-list-mixin.js

@@ -1,7 +1,7 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, nothing as r } from "lit";
 import { state as i } from "lit/decorators.js";
-import { SbbScreenReaderOnlyElement as a } from "../screen-reader-only/screen-reader-only.component.js";
+import { screenReaderOnlyStyles as a } from "../styles/styles.js";
 //#region src/elements/core/mixins/named-slot-list-mixin.ts
 var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 	let l = c, u, d = [], f = [];
@@ -35,7 +35,10 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
 			});
 		}
 		static {
-			this.elementDependencies = [a];
+			this.elementDependencies = [];
+		}
+		static {
+			this.styles = [c.styles ?? [], a];
 		}
 		#e;
 		get listChildren() {
@@ -68,7 +71,7 @@ var o = "data-ssr-child-count", s = "li", c = (c) => (() => {
               `)}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : i.length === 1 ? n`<sbb-screen-reader-only>${e.ariaLabel}</sbb-screen-reader-only>
+        ` : i.length === 1 ? n`<span class="sbb-screen-reader-only">${e.ariaLabel}</span>
           <span class=${e.class || this.localName}>
             <span><slot name=${i[0].name}></slot></span>
           </span>

package/core/mixins/panel-mixin.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../panel-mixin-By8Uy5yz.js";
-export { t as SbbPanelMixin, e as panelCommonStyle };
+import { t as e } from "../../panel-mixin-DcdteEmP.js";
+export { e as SbbPanelMixin };

package/core/styles/a11y.scss

@@ -1,15 +1,10 @@
 @use './mixins/a11y';
+@use './screen-reader-only';
 
-.sbb-screen-reader-only {
-  @include a11y.screen-reader-only;
-}
-
-.sbb-focus-outline:focus-visible {
+:is(.sbb-focus-outline, .sbb-focus-outline-dark):focus-visible {
   @include a11y.focus-outline;
 }
 
 .sbb-focus-outline-dark:focus-visible {
-  @include a11y.focus-outline;
-
   --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
 }

package/core/styles/core.scss

@@ -301,6 +301,12 @@ $theme: 'standard' !default;
 @use '../../time-input/time-input.global' as time-input with (
   $theme: $theme
 );
+@use '../../title/title-common.global' as title-common with (
+  $theme: $theme
+);
+@use '../../title/title.global' as title with (
+  $theme: $theme
+);
 @use '../../toggle-check/toggle-check.global' as toggle-check with (
   $theme: $theme
 );
@@ -415,6 +421,8 @@ $theme: 'standard' !default;
   @include timetable-form-field.base;
   @include timetable-occupancy.base;
   @include time-input.base;
+  @include title-common.base;
+  @include title.base;
   @include toggle-check.base;
   @include toggle.base;
   @include toggle-option.base;
@@ -457,31 +465,6 @@ $theme: 'standard' !default;
   // Infinity border radius, can be used to achieve rounded border on start and end
   --sbb-border-radius-infinity: calc(infinity * 1px);
 
-  // TODO: Remove complete block when new lean theme is complete
-  // TODO: Also remove all occurrences of the variables in lyne-components (e.g. --sbb-title-font-size-level-1-lean)
-  // Only render the block in standard theme as fallback for CSS class usage
-  @if not string.index($theme, 'lean') {
-    &.sbb-lean {
-      --sbb-title-font-size-level-1-lean: var(--sbb-heading-font-size-2);
-      --sbb-title-font-size-level-2-lean: var(--sbb-heading-font-size-3);
-      --sbb-title-font-size-level-3-lean: var(--sbb-heading-font-size-4);
-      --sbb-title-font-size-level-4-lean: var(--sbb-heading-font-size-5);
-      --sbb-title-font-size-level-5-lean: var(--sbb-heading-font-size-6);
-      --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-75x);
-      --sbb-heading-margin-block-1-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-2-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-3x);
-      --sbb-heading-margin-block-3-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-responsive-xxxs);
-      --sbb-heading-margin-block-4-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-2x);
-      --sbb-heading-margin-block-5-lean: var(--sbb-spacing-responsive-s)
-        var(--sbb-spacing-fixed-1x);
-      --sbb-heading-margin-block-6-lean: var(--sbb-spacing-responsive-s) 0;
-    }
-  }
-
   // When the input modality is either mouse or touch,
   // the focus outline should be hidden.
   // We achieve this by setting the outline style to none.
@@ -514,14 +497,6 @@ $theme: 'standard' !default;
     @include teaser-panel.base-breakpoint-large;
     @include teaser-product-common.base-breakpoint-large;
     @include time-input.base-breakpoint-large;
-
-    // TODO: Remove complete block when new lean theme is complete
-    // Only render the block in standard theme as fallback for CSS class usage
-    @if not string.index($theme, 'lean') {
-      &.sbb-lean {
-        --sbb-title-font-size-level-6-lean: var(--sbb-typo-scale-0-875x);
-      }
-    }
   }
 
   @include mediaqueries.mq($from: ultra) {

package/core/styles/mixins/card.scss

@@ -155,9 +155,6 @@
     var(--sbb-focus-outline-color-default),
     var(--sbb-focus-outline-color-dark)
   );
-
-  // Propagate card text color to title text color to ensure correct color in forced colors mode
-  --sbb-title-text-color-normal-override: var(--sbb-card-color);
   --sbb-card-animation-duration: var(
     --sbb-disable-animation-duration,
     var(--sbb-animation-duration-1x)
@@ -183,6 +180,11 @@
     border-radius: var(--sbb-card-border-radius);
     pointer-events: none;
   }
+
+  @include a11y.if-forced-colors {
+    // Propagate card text color to title text color to ensure correct color in forced colors mode
+    --sbb-title-color: var(--sbb-card-color);
+  }
 }
 
 @mixin card--hover {

package/core/styles/mixins/typo.scss

@@ -13,70 +13,52 @@
 }
 
 @mixin title--level-1 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
+  --sbb-title-font-size: var(--sbb-heading-font-size-1);
 }
 
 @mixin title--level-1-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-1-lean,
-    var(--sbb-heading-margin-block-1)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
 }
 
 @mixin title--level-2 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
+  --sbb-title-font-size: var(--sbb-heading-font-size-2);
 }
 
 @mixin title--level-2-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-2-lean,
-    var(--sbb-heading-margin-block-2)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-2);
 }
 
 @mixin title--level-3 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
+  --sbb-title-font-size: var(--sbb-heading-font-size-3);
 }
 
 @mixin title--level-3-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-3-lean,
-    var(--sbb-heading-margin-block-3)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-3);
 }
 
 @mixin title--level-4 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
+  --sbb-title-font-size: var(--sbb-heading-font-size-4);
 }
 
 @mixin title--level-4-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-4-lean,
-    var(--sbb-heading-margin-block-4)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-4);
 }
 
 @mixin title--level-5 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
+  --sbb-title-font-size: var(--sbb-heading-font-size-5);
 }
 
 @mixin title--level-5-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-5-lean,
-    var(--sbb-heading-margin-block-5)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-5);
 }
 
 @mixin title--level-6 {
-  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
+  --sbb-title-font-size: var(--sbb-heading-font-size-6);
   --sbb-title-line-height: var(--sbb-typo-line-height-text);
 }
 
 @mixin title--level-6-spacing {
-  --sbb-title-margin-block: var(
-    --sbb-heading-margin-block-6-lean,
-    var(--sbb-heading-margin-block-6)
-  );
+  --sbb-title-margin-block: var(--sbb-heading-margin-block-6);
 }
 
 @mixin title-1($exclude-spacing: false) {
@@ -128,7 +110,7 @@
 }
 
 @mixin title--negative {
-  --sbb-title-text-color-normal: var(--sbb-color-3-negative);
+  --sbb-title-color: var(--sbb-color-3-negative);
 }
 
 // ----------------------------------------------------------------------------------------------------

package/core/styles/screen-reader-only.scss

@@ -0,0 +1,5 @@
+@use './mixins/a11y';
+
+.sbb-screen-reader-only {
+  @include a11y.screen-reader-only;
+}