@sbb-esta/lyne-elements-dev 4.13.1-dev.1781017607 → 5.0.0-dev.1781076451

package/flip-card.component-CtUxr9yF.js

@@ -0,0 +1,138 @@
+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, state as o } from "lit/decorators.js";
+import { IS_FOCUSABLE_QUERY as s, SbbElement as c, SbbLanguageController as l, SbbPropertyWatcherController as u, buttonResetStyles as d, forceType as f, i18nFlipCard as p, i18nReverseCard as m, screenReaderOnlyStyles as h, ɵstateController as g } from "./core.js";
+import { SbbSecondaryButtonStaticElement as _ } from "./button.pure.js";
+import { ResizeController as v } from "@lit-labs/observers/resize-controller.js";
+import { until as y } from "lit/directives/until.js";
+//#region src/elements/flip-card/flip-card/flip-card.scss?inline
+var b = ":host{--sbb-flip-card-summary-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-5x) );--sbb-flip-card-summary-transition-delay: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );position:relative;display:block}@media(any-hover:hover){:host(:hover){--sbb-flip-card-background-color: color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent);--sbb-flip-card-background-color: light-dark( color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent), var(--sbb-color-iron) );--sbb-flip-card-translate-title-y-hover: -.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform: rotate(45deg);--sbb-flip-card-details-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-flip-card-summary-transition-delay: 0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity: 0;--sbb-flip-card-summary-pointer-events: none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity: 1;--sbb-flip-card-details-translate-y: 0}@media(min-width:37.5rem)and (max-width:63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 15rem}}@media(min-width:90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height: 25rem}}.sbb-flip-card{position:relative;display:flex;height:100%;flex-flow:wrap;flex-direction:column;min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out,min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height),var(--sbb-flip-card-details-height))}@media(forced-colors:active){.sbb-flip-card:after{content:\"\";border:var(--sbb-flip-card-border) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);position:absolute;inset:0;pointer-events:none}}@media(forced-colors:active)and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:Highlight}}.sbb-flip-card:before{content:\"\";opacity:0;pointer-events:none;position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding);background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);border-radius:16rem;transition:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-3x)) ease-out}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;inset-inline-start:0;inset-block-end:0;width:100%;height:100%;border-radius:var(--sbb-flip-card-border-radius);transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-5x))}.sbb-flip-card--toggle-button{position:absolute;inset-inline-start:var(--sbb-flip-card-padding);inset-block-end:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform, none);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{position:absolute;inset:0;width:100%;border-radius:var(--sbb-flip-card-border-radius);cursor:var(--sbb-cursor-pointer)}.sbb-flip-card-button:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}", x = (() => {
+	let x = c, S, C = [], w = [], T, E = [], D = [];
+	return class extends x {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
+			S = [f(), a({ attribute: "accessibility-label" })], T = [o()], e(this, null, S, {
+				kind: "accessor",
+				name: "accessibilityLabel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityLabel" in e,
+					get: (e) => e.accessibilityLabel,
+					set: (e, t) => {
+						e.accessibilityLabel = t;
+					}
+				},
+				metadata: t
+			}, C, w), e(this, null, T, {
+				kind: "accessor",
+				name: "_flipped",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_flipped" in e,
+					get: (e) => e._flipped,
+					set: (e, t) => {
+						e._flipped = t;
+					}
+				},
+				metadata: t
+			}, E, D), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-flip-card";
+		}
+		static {
+			this.elementDependencies = [_];
+		}
+		static {
+			this.styles = [
+				d,
+				h,
+				i(b)
+			];
+		}
+		static {
+			this.events = { flip: "flip" };
+		}
+		#e;
+		get accessibilityLabel() {
+			return this.#e;
+		}
+		set accessibilityLabel(e) {
+			this.#e = e;
+		}
+		get summary() {
+			return this.querySelector?.("sbb-flip-card-summary");
+		}
+		get details() {
+			return this.querySelector?.("sbb-flip-card-details");
+		}
+		get _detailsContentElement() {
+			return this.details.shadowRoot.firstElementChild;
+		}
+		get isFlipped() {
+			return this._flipped;
+		}
+		#t;
+		get _flipped() {
+			return this.#t;
+		}
+		set _flipped(e) {
+			this.#t = e;
+		}
+		constructor() {
+			super(), this.#e = t(this, C, ""), this.#t = (t(this, w), t(this, E, !1)), this._language = (t(this, D), new l(this)), this._cardDetailsResizeObserver = new v(this, {
+				target: null,
+				skipInitial: !0,
+				callback: () => this._setCardDetailsHeight()
+			}), this.addEventListener?.("click", (e) => {
+				(e.target === this || !e.target?.matches?.(s)) && this.toggle();
+			}), this.addController(new u(this, () => this.summary, { imageAlignment: (e) => {
+				this._previousImageAlignment && this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`), this._previousImageAlignment = e.imageAlignment, this._previousImageAlignment && this.internals.states.add(`image-alignment-${this._previousImageAlignment}`);
+			} }));
+		}
+		toggle() {
+			this._flipped = !this._flipped, this._flipped ? (this._setCardDetailsHeight(), this._cardDetailsResizeObserver.observe(this._detailsContentElement)) : this._cardDetailsResizeObserver.unobserve(this._detailsContentElement), this.toggleState("flipped", this._flipped), g(this.details)?.toggle("flipped", this._flipped), this.summary.inert = this._flipped, this.details.inert = !this._flipped, this.dispatchEvent(new Event("flip", {
+				bubbles: !0,
+				composed: !0
+			}));
+		}
+		_setCardDetailsHeight() {
+			let e = Math.floor(this._detailsContentElement.offsetHeight);
+			this.style?.setProperty("--sbb-flip-card-details-height", `${e}px`);
+		}
+		async _accessibilityLabel() {
+			return r ? "" : (await this.hydrationComplete, this._flipped ? m[this._language.current] : `${(this.accessibilityLabel ? this.accessibilityLabel : this.summary?.textContent?.trim()) ?? ""}, ${p[this._language.current]}`);
+		}
+		render() {
+			return n`
+      <div class="sbb-flip-card">
+        <button
+          class="sbb-flip-card-button"
+          aria-expanded=${this._flipped.toString()}
+          type="button"
+        >
+          <span class="sbb-screen-reader-only">${y(this._accessibilityLabel(), "")}</span>
+        </button>
+        <slot name="summary" @slotchange=${() => this.summary.inert = this._flipped}></slot>
+        <slot name="details" @slotchange=${() => this.details.inert = !this._flipped}></slot>
+        <sbb-secondary-button-static class="sbb-flip-card--toggle-button" size="s">
+          <sbb-icon
+            class="sbb-flip-card--toggle-button-icon"
+            slot="icon"
+            name="plus-small"
+          ></sbb-icon>
+        </sbb-secondary-button-static>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { x as t };

package/flip-card.js

@@ -1,6 +1,6 @@
-import { t as e } from "./flip-card-details.component-DaKTOPiS.js";
-import { t } from "./flip-card-summary.component-BSKe6OsO.js";
-import { t as n } from "./flip-card.component-D8D-b1oO.js";
+import { t as e } from "./flip-card-details.component-D4C0Fde7.js";
+import { t } from "./flip-card-summary.component-ZvTeHtPV.js";
+import { t as n } from "./flip-card.component-CtUxr9yF.js";
 import "./flip-card.pure.js";
 n.define(), e.define(), t.define();
 //#endregion

package/flip-card.pure.js

@@ -1,4 +1,4 @@
-import { t as e } from "./flip-card-details.component-DaKTOPiS.js";
-import { t } from "./flip-card-summary.component-BSKe6OsO.js";
-import { t as n } from "./flip-card.component-D8D-b1oO.js";
+import { t as e } from "./flip-card-details.component-D4C0Fde7.js";
+import { t } from "./flip-card-summary.component-ZvTeHtPV.js";
+import { t as n } from "./flip-card.component-CtUxr9yF.js";
 export { e as SbbFlipCardDetailsElement, n as SbbFlipCardElement, t as SbbFlipCardSummaryElement };

package/footer/_footer.global.scss

@@ -0,0 +1,17 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-footer-background-color: var(--sbb-background-color-3);
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(76)};
+  --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
+  --sbb-footer-font-size: var(--sbb-text-font-size-s);
+  --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
+  --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
+  --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
+}
+
+@mixin breakpoint-small {
+  --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)};
+}

package/footer/footer.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../footer.component-DVnt-rqs.js";
+import { t as e } from "../footer.component-x4yuXpWV.js";
 export { e as SbbFooterElement };

package/footer.component-x4yuXpWV.js

@@ -0,0 +1,126 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { nothing as n, unsafeCSS as r } from "lit";
+import { property as i } from "lit/decorators.js";
+import { SbbElement as a, SbbNegativeMixin as o, forceType as s, screenReaderOnlyStyles as c } from "./core.js";
+import { html as l, unsafeStatic as u } from "lit/static-html.js";
+//#region src/elements/footer/footer.scss?inline
+var d = ":host{--sbb-link-text-decoration-line: none;display:block}:host([negative]){--sbb-footer-background-color: var(--sbb-background-color-2-negative);--sbb-footer-color: var(--sbb-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-footer{font-size:var(--sbb-footer-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);color:var(--sbb-footer-color);padding-block:var(--sbb-footer-padding-block);background-color:var(--sbb-footer-background-color)}@media(forced-colors:active){.sbb-footer{border-block-start:var(--sbb-border-width-1x) solid CanvasText}}:host(:not([expanded])) .sbb-footer-wrapper{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-footer-wrapper{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-footer-wrapper{padding-inline:var(--sbb-page-spacing-padding, var(--sbb-spacing-responsive-xxs))}::slotted(.sbb-link-list-button-group){display:flex;flex-direction:column;gap:var(--sbb-spacing-fixed-6x);align-items:flex-start}:host([variant=clock-columns]) slot{display:grid;grid-template-columns:auto;grid-template-rows:auto;column-gap:var(--sbb-footer-gap-horizontal)}@media(min-width:37.5rem){:host([variant=clock-columns]) slot{grid-template-columns:calc(50% - var(--sbb-footer-gap-horizontal) / 2)}}@media(min-width:90rem){:host([variant=clock-columns]) slot{max-width:var(--sbb-footer-content-max-width);margin-inline:auto;grid-template-columns:repeat(4,1fr)}}:host([variant=clock-columns]) ::slotted(*:not(:last-child,sbb-divider)){margin-block-end:var(--sbb-footer-gap-vertical)}:host([variant=clock-columns]) ::slotted(sbb-clock){width:var(--sbb-footer-clock-width);grid-row:1}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-clock){align-self:start;grid-row:2}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-clock){grid-row:1;grid-column:4/5;justify-self:end}}:host([variant=clock-columns]) ::slotted(sbb-divider){margin-block:calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) var(--sbb-spacing-responsive-s)}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:3;grid-column:1/4;width:100%}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(sbb-divider){grid-row:2}}@media(min-width:37.5rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+2)){grid-row:1}:host([variant=clock-columns]) ::slotted(:nth-child(3)),:host([variant=clock-columns]) ::slotted(:nth-child(4)){grid-row:2}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:4}}@media(min-width:64rem){:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/4}}@media(min-width:90rem){:host([variant=clock-columns]) ::slotted(:nth-child(-n+4)){grid-row:1}:host([variant=clock-columns]) ::slotted(*:last-child){grid-row:3}:host([variant=clock-columns]) ::slotted(sbb-divider),:host([variant=clock-columns]) ::slotted(*:last-child){grid-column:1/5}}", f = (() => {
+	let f = o(a), p, m = [], h = [], g, _ = [], v = [], y, b = [], x = [], S, C = [], w = [];
+	return class extends f {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+			p = [i({ reflect: !0 })], g = [s(), i({
+				reflect: !0,
+				type: Boolean
+			})], y = [s(), i({ attribute: "accessibility-title" })], S = [i({ attribute: "accessibility-title-level" })], e(this, null, p, {
+				kind: "accessor",
+				name: "variant",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "variant" in e,
+					get: (e) => e.variant,
+					set: (e, t) => {
+						e.variant = t;
+					}
+				},
+				metadata: t
+			}, m, h), e(this, null, g, {
+				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
+			}, _, v), e(this, null, y, {
+				kind: "accessor",
+				name: "accessibilityTitle",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityTitle" in e,
+					get: (e) => e.accessibilityTitle,
+					set: (e, t) => {
+						e.accessibilityTitle = t;
+					}
+				},
+				metadata: t
+			}, b, x), e(this, null, S, {
+				kind: "accessor",
+				name: "accessibilityTitleLevel",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "accessibilityTitleLevel" in e,
+					get: (e) => e.accessibilityTitleLevel,
+					set: (e, t) => {
+						e.accessibilityTitleLevel = t;
+					}
+				},
+				metadata: t
+			}, C, w), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-footer";
+		}
+		static {
+			this.styles = [c, r(d)];
+		}
+		#e = t(this, m, "default");
+		get variant() {
+			return this.#e;
+		}
+		set variant(e) {
+			this.#e = e;
+		}
+		#t = (t(this, h), t(this, _, !1));
+		get expanded() {
+			return this.#t;
+		}
+		set expanded(e) {
+			this.#t = e;
+		}
+		#n = (t(this, v), t(this, b, ""));
+		get accessibilityTitle() {
+			return this.#n;
+		}
+		set accessibilityTitle(e) {
+			this.#n = e;
+		}
+		#r = (t(this, x), t(this, C, "1"));
+		get accessibilityTitleLevel() {
+			return this.#r;
+		}
+		set accessibilityTitleLevel(e) {
+			this.#r = e;
+		}
+		render() {
+			let e = `h${this.accessibilityTitleLevel}`, t = l`<${u(e)} class="sbb-screen-reader-only"
+        >${this.accessibilityTitle}</${u(e)}>`;
+			return l`
+      <footer class="sbb-footer">
+        <div class="sbb-footer-wrapper">
+          ${this.accessibilityTitle ? t : n}
+          <slot></slot>
+        </div>
+      </footer>
+    `;
+		}
+		constructor() {
+			super(...arguments), t(this, w);
+		}
+	};
+})();
+//#endregion
+export { f as t };

package/footer.js

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

package/footer.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./footer.component-DVnt-rqs.js";
+import { t as e } from "./footer.component-x4yuXpWV.js";
 export { e as SbbFooterElement };

package/form-field/_form-field.global.scss

@@ -0,0 +1,274 @@
+@use '../core/styles' as sbb;
+
+$theme: 'standard' !default;
+
+@mixin base {
+  --sbb-error-color: var(--sbb-color-error);
+  --sbb-error-icon-size: #{sbb.px-to-rem-build(17)};
+  --sbb-error-font-size: var(--sbb-text-font-size-xs);
+  --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-border-color: var(--sbb-border-color-5);
+  --sbb-form-field-border-style: solid;
+  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
+  --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-color: var(--sbb-color-3);
+  --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
+  --sbb-form-field-min-height: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-size-element-m),
+        'lean': var(--sbb-size-element-xs),
+      ),
+      $theme
+    )};
+  --sbb-form-field-padding-inline: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-3x),
+        'lean': var(--sbb-spacing-fixed-2x),
+      ),
+      $theme
+    )};
+  --sbb-form-field-input-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-m),
+        'lean': var(--sbb-text-font-size-s),
+      ),
+      $theme
+    )};
+  --sbb-form-field-label-text-size: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-text-font-size-xs),
+        'lean': var(--sbb-text-font-size-xxs),
+      ),
+      $theme
+    )};
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(10)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(8.5)},
+        'lean': #{sbb.px-to-rem-build(5.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8.5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-input-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': 0,
+        'lean': #{sbb.px-to-rem-build(-2)},
+      ),
+      $theme
+    )};
+}
+
+@mixin forced-colors {
+  --sbb-form-field-border-color: ButtonBorder;
+}
+
+@mixin breakpoint-large {
+  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
+      (
+        'standard': var(--sbb-spacing-fixed-1x),
+        'lean': #{sbb.px-to-rem-build(11)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
+      (
+        'standard': #{sbb.px-to-rem-build(10.5)},
+        'lean': #{sbb.px-to-rem-build(5)},
+      ),
+      $theme
+    )};
+  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
+      (
+        'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
+        'lean': #{sbb.px-to-rem-build(-8)},
+      ),
+      $theme
+    )};
+}
+
+@mixin rules {
+  :is(sbb-form-field, sbb-timetable-form-field) {
+    :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
+      @include sbb.ellipsis;
+      @include sbb.input-reset;
+
+      // Form elements are naturally in 'display: inline-block'; however, since the form-element container
+      // is in 'display: flex' (class "sbb-form-field__input"), they are block-ified, as per documentation:
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts#the_flex_container
+      // Setting 'display: flex' should not change anything on lyne-elements, but is useful for consumers of lyne-angular,
+      // since the rule is valid for Angular custom components which have an inner form element.
+      display: flex;
+
+      // Use !important here to not interfere with Firefox focus ring definition
+      // which appears in normalize CSS of several frameworks.
+      outline: none !important;
+      overflow: var(--sbb-form-field-overflow, hidden);
+      width: 100%;
+      box-sizing: border-box;
+      color: var(--sbb-form-field-text-color);
+
+      // Fill color needed for Safari
+      -webkit-text-fill-color: var(--sbb-form-field-text-color);
+      opacity: 1;
+      background-color: transparent;
+
+      // To be more specific than the styles in normalize.scss we need to use !important
+      // TODO: Find a better solution
+      font-size: var(--sbb-form-field-input-text-size) !important;
+      letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
+      font-family: var(--sbb-typo-font-family) !important;
+      line-height: var(--sbb-typo-line-height-text) !important;
+
+      &::placeholder {
+        @include sbb.placeholder;
+      }
+    }
+
+    &[floating-label] :where(input, select, textarea, sbb-select)::placeholder,
+      // This covers the placeholder of the sbb-date-input and sbb-time-input
+    &[floating-label] :where(sbb-date-input, sbb-time-input)::after {
+      color: transparent !important;
+      -webkit-text-fill-color: transparent !important;
+
+      @media (forced-colors: active) {
+        color: Canvas !important;
+        -webkit-text-fill-color: Canvas !important;
+      }
+    }
+
+    // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
+    &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
+      color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+      -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    }
+
+    // Fix positioning issue for select which occurs in Safari
+    :where(select) {
+      vertical-align: middle;
+    }
+
+    :where(select, sbb-select) {
+      padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
+    }
+
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      :where(input, sbb-date-input, sbb-time-input) {
+      // We shrink the input's height to support all types of inputs (especially type=number).
+      // Factor 1.25 ensures, letters are not cut.
+      height: calc(var(--sbb-form-field-input-text-size) * 1.25);
+
+      // Avoids Safari bug, where text gets misaligned with type=number
+      line-height: 1 !important;
+
+      // We add the missing block spacing to fit the line-height
+      margin-block: calc(
+        0.5 * (var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25))
+      );
+    }
+
+    // This rule matches the analogous one in the form-field.scss,
+    // and it's useful for Angular custom components, assuming that they have an internal form element.
+    #{sbb.theme-pattern-select(('standard': "&[size='s']", 'lean': "&:not([size='m'],[size='l'])"),$theme)}
+      > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
+      margin-block-end: #{sbb.px-to-rem-build(-2)};
+    }
+
+    :where(textarea) {
+      @include sbb.scrollbar;
+
+      position: relative;
+      resize: none;
+
+      // White-space break needed for Firefox
+      white-space: break-spaces;
+      overflow-y: auto;
+      min-height: calc((var(--sbb-typo-line-height-text) * 1em));
+      height: 100%;
+    }
+
+    &[size='l'] :where(textarea) {
+      padding-block-end: #{sbb.px-to-rem-build(5.5)};
+    }
+
+    &[negative] :where(textarea) {
+      @include sbb.scrollbar-variables--color-negative;
+    }
+
+    &:has(
+      :is(
+        :is(input, textarea, select):user-invalid,
+        :state(interacted):invalid,
+        .ng-touched.ng-invalid,
+        .sbb-invalid
+      )
+    ),
+    :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
+      --sbb-form-field-border-color: var(--sbb-color-error);
+      --sbb-form-field-text-color: var(--sbb-color-error);
+
+      &[negative] {
+        --sbb-form-field-border-color: var(--sbb-color-red85);
+        --sbb-form-field-text-color: var(--sbb-color-red85);
+      }
+
+      @media (forced-colors: active) {
+        --sbb-form-field-border-color: LinkText !important;
+        --sbb-form-field-text-color: LinkText !important;
+      }
+    }
+  }
+
+  :is(sbb-form-field, sbb-timetable-form-field):state(empty):not(
+      :state(readonly),
+      :state(disabled)
+    ) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      --sbb-form-field-background-color: light-dark(
+        color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+        color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+      );
+
+      &[negative] {
+        --sbb-form-field-background-color: color-mix(
+          in srgb,
+          var(--sbb-color-peach) 10%,
+          var(--sbb-background-color-1-negative)
+        );
+      }
+    }
+  }
+
+  // In high contrast we set, regardless of any state, an Asterix (*) for required fields, to ensure the requirement is visible.
+  :is(sbb-form-field, sbb-timetable-form-field):not(:state(readonly), :state(disabled)) {
+    :root.sbb-form-field-required-highlight
+      &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
+    &.sbb-form-field-required-highlight {
+      @media (forced-colors: active) {
+        label::after {
+          content: ' *';
+          color: Highlight;
+        }
+      }
+    }
+  }
+}

package/form-field/error/error.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../error.component-DbIaA-xT.js";
+import { t as e } from "../../error.component-D0rmgyFk.js";
 export { e as SbbErrorElement };

package/form-field/form-field/form-field.component.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../form-field.component-Bi6alIG7.js";
+import { n as e, t } from "../../form-field.component-eH2C_qPG.js";
 export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };

package/form-field/form-field-clear/form-field-clear.component.js

@@ -1,21 +1,20 @@
 import { html as e } from "lit";
-import { SbbButtonBaseElement as t } from "../../core/base-elements.js";
-import { SbbNegativeMixin as n } from "../../core/mixins.js";
-import { boxSizingStyles as r } from "../../core/styles.js";
-import { miniButtonStyle as i } from "../../button.pure.js";
-import { SbbLanguageController as a } from "../../core/controllers.js";
-import { i18nClearInput as o } from "../../core/i18n.js";
-import "../../icon.js";
+import { SbbButtonBaseElement as t, SbbLanguageController as n, SbbNegativeMixin as r, i18nClearInput as i } from "../../core.js";
+import { miniButtonStyle as a } from "../../button.pure.js";
+import { SbbIconElement as o } from "../../icon.pure.js";
 //#region src/elements/form-field/form-field-clear/form-field-clear.component.ts
-var s = class extends n(t) {
+var s = class extends r(t) {
 	static {
 		this.elementName = "sbb-form-field-clear";
 	}
 	static {
-		this.styles = [r, i];
+		this.elementDependencies = [o];
+	}
+	static {
+		this.styles = [a];
 	}
 	constructor() {
-		super(), this._language = new a(this), this.addEventListener?.("click", () => this._handleClick());
+		super(), this._language = new n(this), this.addEventListener?.("click", () => this._handleClick());
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._formField = this.closest("sbb-form-field"), this._formField && (this.slot ||= "suffix", this.negative = this._formField.hasAttribute("negative"));
@@ -28,7 +27,7 @@ var s = class extends n(t) {
 		})), e.dispatchEvent(new Event("change", { bubbles: !0 })));
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.internals.ariaLabel = o[this._language.current];
+		super.willUpdate(e), this.internals.ariaLabel = i[this._language.current];
 	}
 	renderTemplate() {
 		return e`<sbb-icon name="cross-small"></sbb-icon>`;

package/form-field/form-field-text-counter/form-field-text-counter.component.js

@@ -1,10 +1,7 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n } from "lit";
 import { state as r } from "lit/decorators.js";
-import { SbbLanguageController as i } from "../../core/controllers.js";
-import { i18nRemainingCharacters as a } from "../../core/i18n.js";
-import "../../screen-reader-only.js";
-import { sbbLiveAnnouncer as o } from "../../core/a11y/live-announcer.js";
+import { SbbLanguageController as i, i18nRemainingCharacters as a, sbbLiveAnnouncer as o } from "../../core.js";
 import { SbbHintElement as s } from "../hint/hint.component.js";
 //#region src/elements/form-field/form-field-text-counter/form-field-text-counter.component.ts
 var c = [
@@ -44,9 +41,6 @@ var c = [
 		static {
 			this.elementName = "sbb-form-field-text-counter";
 		}
-		static {
-			this.styles = [s.styles];
-		}
 		#e;
 		get _remainingCharacters() {
 			return this.#e;