@sbb-esta/lyne-elements 4.8.1 → 4.10.0

package/form-field.component-CWj6jfYZ.js

@@ -1,447 +0,0 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n, html as r, isServer as i, nothing as a } from "lit";
-import { property as o, state as s } from "lit/decorators.js";
-import { SbbElement as c } from "./core/base-elements.js";
-import { forceType as l } from "./core/decorators.js";
-import { isLean as u } from "./core/dom.js";
-import { SbbNegativeMixin as d, appendAriaElements as f, removeAriaElements as p } from "./core/mixins.js";
-import { boxSizingStyles as m } from "./core/styles.js";
-import { SbbLanguageController as h } from "./core/controllers.js";
-import { i18nOptional as g } from "./core/i18n.js";
-import "./icon.js";
-import { sbbInputModalityDetector as _ } from "./core/a11y.js";
-//#region src/elements/form-field/form-field/form-field.scss?lit&inline
-var v = n`:host{--sbb-form-field-error-divider-width:var(--sbb-spacing-fixed-1x);--sbb-form-field-error-padding-block-start:var(--sbb-form-field-error-divider-width);--sbb-form-field-select-inline-padding-end:calc(var(--sbb-icon-svg-width) + var(--sbb-form-field-gap));--sbb-form-field-label-size:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-text-line-height:calc(var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text));--sbb-form-field-margin-block-start:calc(( var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(--sbb-form-field-text-line-height) + var(--_sbb-form-field-label-to-input-overlapping) ) / 2);--sbb-icon-svg-width:var(--sbb-form-field-icon-size);--sbb-icon-svg-height:var(--sbb-form-field-icon-size);--sbb-focus-outline-color:var(--lightningcss-light,var(--sbb-focus-outline-color-default))var(--lightningcss-dark,var(--sbb-focus-outline-color-dark));color:var(--sbb-form-field-color);display:inline-block}:host(:where(:not([width=collapse]))){width:min(18.75rem,100%);min-width:9.375rem}:host([negative]){color:var(--sbb-color-3-negative);--sbb-form-field-background-color:var(--sbb-background-color-1-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5);--sbb-form-field-text-color:var(--sbb-color-3-negative);--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host([negative]){--sbb-form-field-border-color:ButtonBorder}}:host([size=s]){--sbb-form-field-min-height:var(--sbb-size-element-xs);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-2x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-s);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xxs);--_sbb-form-field-label-to-input-overlapping:.625rem;--_sbb-form-field-floating-label-transform:.34375rem;--_sbb-form-field-spacer-margin-block-end:-.53125rem}@media (width>=64rem){:host([size=s]){--_sbb-form-field-label-to-input-overlapping:.6875rem;--_sbb-form-field-floating-label-transform:.3125rem;--_sbb-form-field-spacer-margin-block-end:-.5rem}}:host([size=m]){--sbb-form-field-min-height:var(--sbb-size-element-m);--sbb-form-field-padding-inline:var(--sbb-spacing-fixed-3x);--sbb-form-field-input-text-size:var(--sbb-text-font-size-m);--sbb-form-field-label-text-size:var(--sbb-text-font-size-xs);--_sbb-form-field-label-to-input-overlapping:var(--sbb-spacing-fixed-1x);--_sbb-form-field-floating-label-transform:.53125rem;--_sbb-form-field-spacer-margin-block-end:calc(-1 * var(--_sbb-form-field-label-to-input-overlapping))}@media (width>=64rem){:host([size=m]){--_sbb-form-field-floating-label-transform:.65625rem}}:host([size=l]){--sbb-form-field-min-height:var(--sbb-size-element-l);--sbb-form-field-padding-inline:var(--sbb-spacing-responsive-xxxs)}:host([error-space=reserve]){--sbb-form-field-error-min-height:calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));--sbb-form-field-error-padding-block-start-override:var(--sbb-form-field-error-divider-width)}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-background-color:var(--sbb-background-color-3);--sbb-form-field-border-color:var(--lightningcss-light,var(--sbb-color-graphite))var(--lightningcss-dark,var(--sbb-color-smoke));--sbb-form-field-arrow-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-storm))}@media (forced-colors:active){:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))){--sbb-form-field-border-color:ButtonBorder}}:host(:where(:is(:state(readonly),[state--readonly]),:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-background-color:var(--sbb-background-color-3-negative);--sbb-form-field-border-color:var(--sbb-border-color-5);--sbb-form-field-arrow-color:var(--sbb-border-color-5)}:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-smoke));--sbb-form-field-prefix-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-storm));--sbb-form-field-border-style:dashed}@media (forced-colors:active){:host(:where(:is(:state(disabled),[state--disabled]))){--sbb-form-field-label-color:GrayText!important;--sbb-form-field-prefix-color:GrayText!important;--sbb-form-field-text-color:GrayText!important;--sbb-form-field-border-color:GrayText!important}}:host(:where(:is(:state(disabled),[state--disabled]))[negative]){--sbb-form-field-text-color:var(--sbb-color-5);--sbb-form-field-label-color:var(--sbb-color-5);--sbb-form-field-prefix-color:var(--sbb-color-5)}:host(:where(:is(:state(readonly),[state--readonly])):not([negative])){--sbb-form-field-label-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-smoke));--sbb-form-field-prefix-color:var(--lightningcss-light,var(--sbb-color-granite))var(--lightningcss-dark,var(--sbb-color-storm))}:host(:where(:is(:state(focus),[state--focus]))){--sbb-form-field-border-color:var(--sbb-border-color-3);--sbb-form-field-prefix-color:var(--sbb-color-3);--sbb-form-field-border-width:var(--sbb-border-width-2x)}:host(:where(:is(:state(focus),[state--focus]))[negative]){--sbb-form-field-border-color:var(--sbb-border-color-3-negative);--sbb-form-field-prefix-color:var(--sbb-color-3-negative)}@media (forced-colors:active){:host(:is(:state(focus),[state--focus])){--sbb-form-field-border-color:Highlight;--sbb-form-field-prefix-color:Highlight}}:host(:not(:where(:is(:state(has-error),[state--has-error])))){--sbb-form-field-error-padding-block-start:0}:host([floating-label]){--sbb-select-placeholder-color:transparent}@media (forced-colors:active){:host([floating-label]){--sbb-select-placeholder-color:Canvas}}:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])),[hidden-label])){--sbb-form-field-label-size:0rem;--_sbb-form-field-label-to-input-overlapping:0rem}:host(:where(:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))){--sbb-form-field-overflow:visible}.sbb-form-field__space-wrapper{flex-direction:column;height:100%;display:flex}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{gap:var(--sbb-form-field-gap);padding-inline:var(--sbb-form-field-padding-inline);border-radius:var(--sbb-form-field-border-radius);min-height:var(--sbb-form-field-min-height);max-height:var(--sbb-form-field-max-height);background-color:var(--sbb-form-field-background-color);flex:1;display:flex;position:relative}.sbb-form-field__wrapper:before{content:"";border:var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);border-radius:var(--sbb-form-field-border-radius);pointer-events:none;display:block;position:absolute;inset:0}:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__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);outline-offset:var(--sbb-form-field-outline-offset,var(--sbb-focus-outline-offset))}@media (forced-colors:none){:host(:is([borderless],:is(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:#0000}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:"";border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);inset-inline:var(--sbb-form-field-padding-inline);z-index:var(--sbb-form-field-focus-underline-z-index,initial);position:absolute;inset-block-end:0}}::slotted([slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted([slot=prefix]),::slotted([slot=suffix]){min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);display:flex}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){padding-block-end:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}@media (forced-colors:active){::slotted([slot=suffix]){color:var(--sbb-form-field-prefix-color)}}.sbb-form-field__select-input-icon{top:50%;pointer-events:none;color:var(--sbb-form-field-arrow-color);margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);position:absolute;inset-inline-end:0;transform:translateY(-50%)}.sbb-form-field__input-container{flex-direction:column;flex:auto;min-width:0;margin-block-start:var(--sbb-form-field-margin-block-start);display:flex;position:relative}.sbb-form-field__label-spacer{height:calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));margin-block-end:var(--_sbb-form-field-spacer-margin-block-end);display:flex}:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){display:none}:host([hidden-label]) :is(.sbb-form-field__label,.sbb-form-field__label-spacer){clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sbb-form-field__label{max-width:100%;cursor:var(--sbb-cursor-default);color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text);display:flex;position:absolute;inset-block-start:0}:host(:where(:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))) .sbb-form-field__label{padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}:host([floating-label]) .sbb-form-field__label{transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform, font-size;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-type-sbb-select),[state--input-type-sbb-select]))),:where(:is(:state(has-popup-open),[state--has-popup-open]))),:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label{font-size:var(--sbb-form-field-input-text-size);transform:translateY(var(--_sbb-form-field-floating-label-transform))}@media (forced-colors:active){:host(:where(:is(:state(input-type-textarea),[state--input-type-textarea]))) .sbb-form-field__label{z-index:1}}.sbb-form-field__label-ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sbb-form-field__input{flex:1;align-items:start;display:flex}:host([size=s]:is(:is(:state(input-type-input),[state--input-type-input]),:is(:state(input-type-select),[state--input-type-select]),:is(:state(input-type-sbb-select),[state--input-type-sbb-select]),:is(:state(input-type-sbb-date-input),[state--input-type-sbb-date-input]),:is(:state(input-type-sbb-time-input),[state--input-type-sbb-time-input]))) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{min-height:var(--sbb-form-field-error-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-error-padding-block-start-override,var(--sbb-form-field-error-padding-block-start));display:flex}`, y = 0, b = /* @__PURE__ */ new WeakMap(), x = [
-	"input",
-	"textarea",
-	"select"
-], S = class extends Event {
-	get control() {
-		return this._control;
-	}
-	constructor(e) {
-		super("formfieldcontrol"), this._control = e;
-	}
-}, C = (() => {
-	let n = d(c), S, C = [], w = [], T, E = [], D = [], O, k = [], A = [], j, M = [], N = [], P, F = [], I = [], L, R = [], z = [], B, V = [], H = [], U, W = [], G = [], K, q = [], J = [], Y, X = [], Z = [];
-	return class extends n {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-			S = [o({
-				attribute: "error-space",
-				reflect: !0
-			})], T = [l(), o({ type: Boolean })], O = [o({ reflect: !0 })], j = [l(), o({
-				reflect: !0,
-				type: Boolean
-			})], P = [o({ reflect: !0 })], L = [l(), o({
-				attribute: "hidden-label",
-				reflect: !0,
-				type: Boolean
-			})], B = [l(), o({
-				attribute: "floating-label",
-				reflect: !0,
-				type: Boolean
-			})], U = [s()], K = [s()], Y = [s()], e(this, null, S, {
-				kind: "accessor",
-				name: "errorSpace",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "errorSpace" in e,
-					get: (e) => e.errorSpace,
-					set: (e, t) => {
-						e.errorSpace = t;
-					}
-				},
-				metadata: t
-			}, C, w), e(this, null, T, {
-				kind: "accessor",
-				name: "optional",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "optional" in e,
-					get: (e) => e.optional,
-					set: (e, t) => {
-						e.optional = t;
-					}
-				},
-				metadata: t
-			}, E, D), e(this, null, O, {
-				kind: "accessor",
-				name: "size",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "size" in e,
-					get: (e) => e.size,
-					set: (e, t) => {
-						e.size = t;
-					}
-				},
-				metadata: t
-			}, k, A), e(this, null, j, {
-				kind: "accessor",
-				name: "borderless",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "borderless" in e,
-					get: (e) => e.borderless,
-					set: (e, t) => {
-						e.borderless = t;
-					}
-				},
-				metadata: t
-			}, M, N), e(this, null, P, {
-				kind: "accessor",
-				name: "width",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "width" in e,
-					get: (e) => e.width,
-					set: (e, t) => {
-						e.width = t;
-					}
-				},
-				metadata: t
-			}, F, I), e(this, null, L, {
-				kind: "accessor",
-				name: "hiddenLabel",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "hiddenLabel" in e,
-					get: (e) => e.hiddenLabel,
-					set: (e, t) => {
-						e.hiddenLabel = t;
-					}
-				},
-				metadata: t
-			}, R, z), e(this, null, B, {
-				kind: "accessor",
-				name: "floatingLabel",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "floatingLabel" in e,
-					get: (e) => e.floatingLabel,
-					set: (e, t) => {
-						e.floatingLabel = t;
-					}
-				},
-				metadata: t
-			}, V, H), e(this, null, U, {
-				kind: "accessor",
-				name: "_errorElements",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "_errorElements" in e,
-					get: (e) => e._errorElements,
-					set: (e, t) => {
-						e._errorElements = t;
-					}
-				},
-				metadata: t
-			}, W, G), e(this, null, K, {
-				kind: "accessor",
-				name: "_input",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "_input" in e,
-					get: (e) => e._input,
-					set: (e, t) => {
-						e._input = t;
-					}
-				},
-				metadata: t
-			}, q, J), e(this, null, Y, {
-				kind: "accessor",
-				name: "_label",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "_label" in e,
-					get: (e) => e._label,
-					set: (e, t) => {
-						e._label = t;
-					}
-				},
-				metadata: t
-			}, X, Z), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		static {
-			this.elementName = "sbb-form-field";
-		}
-		static {
-			this.styles = [m, v];
-		}
-		#e;
-		get errorSpace() {
-			return this.#e;
-		}
-		set errorSpace(e) {
-			this.#e = e;
-		}
-		#t;
-		get optional() {
-			return this.#t;
-		}
-		set optional(e) {
-			this.#t = e;
-		}
-		#n;
-		get size() {
-			return this.#n;
-		}
-		set size(e) {
-			this.#n = e;
-		}
-		#r;
-		get borderless() {
-			return this.#r;
-		}
-		set borderless(e) {
-			this.#r = e;
-		}
-		#i;
-		get width() {
-			return this.#i;
-		}
-		set width(e) {
-			this.#i = e;
-		}
-		#a;
-		get hiddenLabel() {
-			return this.#a;
-		}
-		set hiddenLabel(e) {
-			this.#a = e;
-		}
-		#o;
-		get floatingLabel() {
-			return this.#o;
-		}
-		set floatingLabel(e) {
-			this.#o = e;
-		}
-		#s;
-		get _errorElements() {
-			return this.#s;
-		}
-		set _errorElements(e) {
-			this.#s = e;
-		}
-		#c;
-		get _input() {
-			return this.#c;
-		}
-		set _input(e) {
-			this.#c = e;
-		}
-		#l;
-		get _label() {
-			return this.#l;
-		}
-		set _label(e) {
-			this.#l = e;
-		}
-		get inputElement() {
-			return this._input;
-		}
-		get label() {
-			return this._label;
-		}
-		constructor() {
-			super(), this._excludedFocusElements = [
-				"button",
-				"sbb-popover",
-				"sbb-option",
-				"sbb-chip"
-			], this._floatingLabelSupportedInputElements = [
-				"input",
-				"select",
-				"textarea",
-				"sbb-select"
-			], this._floatingLabelSupportedInputTypes = [
-				"email",
-				"number",
-				"password",
-				"search",
-				"tel",
-				"text",
-				"url"
-			], this.#e = t(this, C, "none"), this.#t = (t(this, w), t(this, E, !1)), this.#n = (t(this, D), t(this, k, u() ? "s" : "m")), this.#r = (t(this, A), t(this, M, !1)), this.#i = (t(this, N), t(this, F, "default")), this.#a = (t(this, I), t(this, R, !1)), this.#o = (t(this, z), t(this, V, !1)), this.#s = (t(this, H), t(this, W, [])), this.#c = (t(this, G), t(this, q, null)), this.#l = (t(this, J), t(this, X, void 0)), this._language = (t(this, Z), new h(this)), this._formFieldAttributeObserver = i ? null : new MutationObserver((e) => {
-				e.some((e) => e.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty());
-			}), this._inputFormAbortController = new AbortController(), this._control = null, this.addEventListener?.("focusin", (e) => {
-				(e.target === this.inputElement || e.target === this.inputElement?.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${_.mostRecentModality}`));
-			}, { passive: !0 }), this.addEventListener?.("focusout", (e) => {
-				if (e.target === this.inputElement || e.target === this.inputElement?.inputElement) {
-					this._checkAndUpdateInputEmpty(), this.internals.states.delete("focus");
-					for (let e of this.internals.states) e.startsWith("focus-origin-") && this.internals.states.delete(e);
-				}
-			}, { passive: !0 }), this.addEventListener("input", () => this._checkAndUpdateInputEmpty()), this.addEventListener("displayvaluechange", () => this._checkAndUpdateInputEmpty()), this.addEventListener("invalid", (e) => e.preventDefault(), { capture: !0 }), this.addEventListener("formfieldcontrol", (e) => {
-				this._control = e.control, this._connectInputElement() === "unchanged" && (this._assignErrorMessageElements(), this._readInputState(), this._checkAndUpdateInputEmpty());
-			});
-		}
-		connectedCallback() {
-			super.connectedCallback(), this._assignSlots(), this._connectInputElement(), this._syncNegative(), this._syncSize();
-		}
-		willUpdate(e) {
-			super.willUpdate(e), e.has("negative") && this._syncNegative(), e.has("size") && this._syncSize();
-		}
-		disconnectedCallback() {
-			super.disconnectedCallback(), this._formFieldAttributeObserver?.disconnect(), this._inputFormAbortController.abort(), this._input?.localName === "input" && this._unpatchInputValue();
-		}
-		_handleWrapperClick(e) {
-			this._isElementFocusExcluded(e) || (this._control?.onContainerClick ? this._control?.onContainerClick(e) : e.target.localName !== "label" && (this._input?.localName === "sbb-select" && e.target.localName !== "sbb-select" && this._input.click(), this._input?.focus()));
-		}
-		_isElementFocusExcluded(e) {
-			return e.composedPath().some((e) => e instanceof window.HTMLElement && (e.getAttribute("tabindex") === "0" || e.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(e.localName));
-		}
-		_onSlotLabelChange() {
-			this._label = Array.from(this.querySelectorAll("label"))[0], this._syncLabelInputReferences();
-		}
-		_onSlotInputChange() {
-			this._assignSlots(), this._connectInputElement();
-		}
-		_assignSlots() {
-			this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
-		}
-		_connectInputElement() {
-			let e;
-			if (this._control?.id) e = this.getRootNode().getElementById(this._control.id);
-			else {
-				let t = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)"));
-				e = (t.find((e) => this._isInputElement(e)) || t[0]) ?? null;
-			}
-			return e === this._input ? "unchanged" : (this._input && (this.internals.states.delete(`input-type-${this._input.localName}`), this._input.localName === "input" && this._unpatchInputValue()), e ? (this._input = e, this._registerInputFormListener(), this._assignErrorMessageElements(), this._readInputState(), this._checkAndUpdateInputEmpty(), this._input.localName === "textarea" ? this._input.setAttribute("rows", this._input.getAttribute("rows") || "3") : this._input.localName === "input" ? this._patchInputValue() : (this._input.localName === "select" || this._input.localName === "sbb-select") && !this.hasUpdated && this.hydrationComplete.then(() => this.requestUpdate()), this._formFieldAttributeObserver?.disconnect(), this._formFieldAttributeObserver?.observe(this._input, {
-				attributes: !0,
-				attributeFilter: [
-					"readonly",
-					"disabled",
-					"form",
-					"class",
-					"data-expanded"
-				]
-			}), this.internals.states.add(`input-type-${this._input.localName}`), this._syncLabelInputReferences(), "changed") : (this._input = null, "no-input"));
-		}
-		_syncLabelInputReferences() {
-			if (!(!this._input || !this._label)) if (x.includes(this._input.localName) || customElements.get(this._input.localName)?.formAssociated) this._input.id ||= `sbb-form-field-input-${y++}`, this._label.htmlFor = this._input.id;
-			else {
-				this._label.id ||= `sbb-form-field-label-${y++}`;
-				let e = this._input.getAttribute("aria-labelledby")?.split(" ").filter((e) => !!e && e !== this._label.id) ?? [];
-				this._input.setAttribute("aria-labelledby", [...e, this._label.id].join(" "));
-			}
-		}
-		_isInputElement(e) {
-			return x.includes(e.localName) || !!customElements.get(e.localName)?.formAssociated;
-		}
-		_readInputState() {
-			this.toggleState("readonly", this._control?.readOnly ?? this._input.hasAttribute("readonly")), this.toggleState("disabled", this._control?.disabled ?? this._input.hasAttribute("disabled")), this.toggleState("has-popup-open", this._input.hasAttribute("data-expanded"));
-		}
-		_registerInputFormListener() {
-			this._inputFormAbortController.abort();
-			let { signal: e } = this._inputFormAbortController = new AbortController();
-			(this._input?.form ?? this._input?.closest("form"))?.addEventListener("reset", () => setTimeout(() => this.reset()), { signal: e });
-		}
-		_patchInputValue() {
-			let e = this._input;
-			if (!e || b.has(e)) return;
-			let t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), "value");
-			if (!t || !t.set || !t.get) return;
-			b.set(e, t);
-			let { get: n, set: r } = t, i = () => this._checkAndUpdateInputEmpty();
-			Object.defineProperty(e, "value", {
-				...t,
-				get() {
-					return n.call(this);
-				},
-				set(e) {
-					r.call(this, e), i();
-				}
-			});
-		}
-		_unpatchInputValue() {
-			let e = this._input, t = b.get(e);
-			t && (Object.defineProperty(e, "value", t), b.delete(e));
-		}
-		_checkAndUpdateInputEmpty() {
-			this.toggleState("empty", this._control?.empty ?? (((this._floatingLabelSupportedInputElements.includes(this._input?.localName) || this._input?.constructor?.formFieldAssociated) ?? !1) && this._isInputEmpty()));
-		}
-		_isInputEmpty() {
-			let e = this.querySelector("sbb-chip-group");
-			return e ? this._isInputValueEmpty() && (Array.isArray(e.value) ? e.value.length === 0 : !e.querySelector("sbb-chip")) : this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? this._input.selectedOptions?.item(0)?.label?.trim() === "" : this._input?.localName === "sbb-select" ? this._input.getDisplayValue?.()?.trim() === "" : this._isInputValueEmpty();
-		}
-		_isInputValueEmpty() {
-			let e = this._input.value;
-			return [
-				"",
-				void 0,
-				null
-			].includes(e) || Array.isArray(e) && e.length === 0;
-		}
-		_onSlotErrorChange(e) {
-			let t = e.target.assignedElements();
-			this._input && this._input.ariaDescribedByElements?.length && (this._input.ariaDescribedByElements = p(this._input.ariaDescribedByElements, ...this._errorElements ?? [])), this._errorElements = t;
-			for (let e of this._errorElements) e.role ||= "status";
-			this._assignErrorMessageElements(), this.toggleState("has-error", !!this._errorElements.length), this._syncNegative();
-		}
-		_assignErrorMessageElements() {
-			this._input && (this._input.ariaDescribedByElements = f(this._input.ariaDescribedByElements, ...this._errorElements));
-		}
-		reset() {
-			this._checkAndUpdateInputEmpty();
-		}
-		clear() {
-			this._input?.localName === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
-		}
-		_syncNegative() {
-			this.querySelectorAll?.("sbb-error,sbb-mini-button,sbb-mini-button-link,sbb-form-field-clear,sbb-datepicker-next-day,sbb-datepicker-previous-day,sbb-datepicker-toggle,sbb-select,sbb-autocomplete,sbb-autocomplete-grid,sbb-chip-group").forEach((e) => e.toggleAttribute("negative", this.negative));
-		}
-		_syncSize() {
-			this.querySelectorAll?.("sbb-autocomplete,sbb-autocomplete-grid,sbb-select").forEach((e) => e.size = this.size === "s" ? "s" : "m");
-		}
-		render() {
-			return r`
-      <div class="sbb-form-field__space-wrapper">
-        ${""}
-        <div @click=${this._handleWrapperClick} class="sbb-form-field__wrapper" id="overlay-anchor">
-          <slot name="prefix" @slotchange=${this._syncNegative}></slot>
-          <div class="sbb-form-field__input-container">
-            <span class="sbb-form-field__label-spacer" aria-hidden="true"></span>
-            <span class="sbb-form-field__label">
-              <span class="sbb-form-field__label-ellipsis">
-                <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? r` <span aria-hidden="true"> ${g[this._language.current]} </span>` : a}
-              </span>
-            </span>
-            <div class="sbb-form-field__input">
-              <slot @slotchange=${this._onSlotInputChange}></slot>
-            </div>
-            ${this.hasUpdated && ["select", "sbb-select"].includes(this._input?.localName) ? r`<sbb-icon
-                  name="chevron-small-down-small"
-                  class="sbb-form-field__select-input-icon"
-                ></sbb-icon>` : a}
-          </div>
-          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
-        </div>
-
-        <div class="sbb-form-field__error">
-          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
-        </div>
-      </div>
-    `;
-		}
-	};
-})();
-//#endregion
-export { C as n, S as t };

package/header-action-common-W_j0KPr-.js

@@ -1,62 +0,0 @@
-import { __esDecorate as e, __runInitializers as t } from "tslib";
-import { css as n } from "lit";
-import { property as r } from "lit/decorators.js";
-import { boxSizingStyles as i } from "./core/styles.js";
-import { html as a } from "lit/static-html.js";
-import { SbbIconNameMixin as o } from "./icon.js";
-//#region src/elements/header/common/header-action.scss?lit&inline
-var s = n`:host{--sbb-header-action-active-border-margin-inline:var(--sbb-header-action-padding-inline);--sbb-header-action-min-width:var(--sbb-header-action-min-height);--sbb-header-action-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--_sbb-header-first-item-padding-shift:calc(-1 * var(--sbb-header-action-padding-inline));--sbb-header-first-item-margin-inline-start:calc(var(--_sbb-header-first-item-padding-shift) - var(--sbb-header-first-item-icon-shift));display:inline-block;outline:none!important}@media (any-hover:hover){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-3);--sbb-header-action-translate-y:-.0625rem;--sbb-header-action-background-inset:calc(var(--sbb-border-width-2x) * -1)}}@media (any-hover:hover) and (forced-colors:active){:host(:hover:not(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-background-color:var(--sbb-background-color-4)}@media (forced-colors:active){:host(:is(:active,:is(:state(active),[state--active]))){--sbb-header-action-border-color:Highlight}}:host(.sbb-active){--sbb-header-action-active-border-scale:1}@media (forced-colors:active){:host(.sbb-active){--sbb-header-action-border-color:Highlight}:host(:is(:state(button),[state--button])){--sbb-header-action-color:ButtonText}}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))){--sbb-header-first-item-margin-inline-start:var(--_sbb-header-first-item-padding-shift)}.sbb-action-base{font-family:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;font-size:inherit;text-align:inherit;color:var(--sbb-header-action-color);min-height:var(--sbb-header-action-min-height);min-width:var(--sbb-header-action-min-width);padding-inline:var(--sbb-header-action-padding-inline-zero,var(--sbb-header-action-padding-inline));cursor:var(--sbb-cursor-pointer);-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;text-decoration:none;display:flex;position:relative}.sbb-action-base:before{content:"";inset:var(--sbb-header-action-background-inset,0);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-header-action-background-color);transition-duration:var(--sbb-header-action-transition-duration);transition-timing-function:var(--sbb-header-action-transition-easing);border:var(--sbb-border-width-1x) solid var(--sbb-header-action-border-color);transition-property:inset,background-color;position:absolute}@media (forced-colors:active){.sbb-action-base:before{border-width:var(--sbb-border-width-2x)}}:host(:focus-visible) .sbb-action-base:before,.sbb-action-base:focus-visible:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}.sbb-action-base:after{content:"";border-block-end:var(--sbb-header-action-active-border-width) solid var(--sbb-header-action-active-border-color);inset:auto 0 calc(-1 * var(--sbb-header-action-active-border-width));margin-inline:var(--sbb-header-action-active-border-margin-inline);scale:var(--sbb-header-action-active-border-scale,0);transition:scale var(--sbb-header-action-transition-easing) var(--sbb-header-action-transition-duration);position:absolute}.sbb-header-action__wrapper{align-items:center;gap:var(--sbb-header-action-gap);white-space:nowrap;transform:translateY(var(--sbb-header-action-translate-y,0));transition:transform var(--sbb-header-action-transition-duration) var(--sbb-header-action-transition-easing);will-change:transform;max-width:100%;display:flex}.sbb-header-action__icon{--sbb-icon-svg-stroke-color:currentcolor;--sbb-icon-svg-stroke-width:1px;min-width:var(--sbb-header-action-icon-dimension);min-height:var(--sbb-header-action-icon-dimension);line-height:0}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-header-action__icon{display:none}.sbb-header-action__text{--sbb-text-font-size:var(--sbb-text-font-size-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);white-space:nowrap;text-overflow:ellipsis;font-weight:700;display:block;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{display:none}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host(:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):not(:is(:state(slotted),[state--slotted]))) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}@media (width<=37.4375rem){:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=small]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=63.9375rem){:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=large]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=89.9375rem){:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=ultra]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}@media (width<=98.9375rem){:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])){--_sbb-header-first-item-padding-shift:calc(-.5 * (var(--sbb-header-action-min-width) - var(--sbb-header-action-icon-dimension)));--sbb-header-action-padding-inline-zero:0;--sbb-header-action-active-border-margin-inline:calc(.5 * (100% - var(--sbb-size-icon-ui-small)))}:host([expand-from=ultra--max-content]:is(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name])):is(:state(slotted),[state--slotted])) .sbb-header-action__text{clip-path:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;display:flex;position:absolute;overflow:hidden}}::slotted([slot=icon]:is(sbb-image,img)){width:var(--sbb-header-action-icon-dimension);height:var(--sbb-header-action-icon-dimension);border-radius:var(--sbb-border-radius-infinity)}`, c = (n) => (() => {
-	let c = o(n), l, u = [], d = [];
-	return class extends c {
-		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-			l = [r({
-				attribute: "expand-from",
-				reflect: !0
-			})], e(this, null, l, {
-				kind: "accessor",
-				name: "expandFrom",
-				static: !1,
-				private: !1,
-				access: {
-					has: (e) => "expandFrom" in e,
-					get: (e) => e.expandFrom,
-					set: (e, t) => {
-						e.expandFrom = t;
-					}
-				},
-				metadata: t
-			}, u, d), t && Object.defineProperty(this, Symbol.metadata, {
-				enumerable: !0,
-				configurable: !0,
-				writable: !0,
-				value: t
-			});
-		}
-		static {
-			this.styles = [i, s];
-		}
-		#e = t(this, u, "large");
-		get expandFrom() {
-			return this.#e;
-		}
-		set expandFrom(e) {
-			this.#e = e;
-		}
-		renderTemplate() {
-			return a`
-        <span class="sbb-header-action__wrapper">
-          <span class="sbb-header-action__icon"> ${super.renderIconSlot()} </span>
-          <span class="sbb-header-action__text">
-            <slot></slot>
-          </span>
-        </span>
-      `;
-		}
-		constructor() {
-			super(...arguments), t(this, d);
-		}
-	};
-})();
-//#endregion
-export { c as t };

package/header-environment.component-DduyZo6W.js

@@ -1,36 +0,0 @@
-import { css as e, html as t } from "lit";
-import { SbbElement as n } from "./core/base-elements.js";
-import { boxSizingStyles as r } from "./core/styles.js";
-import { MutationController as i } from "@lit-labs/observers/mutation-controller.js";
-//#region src/elements/header/header-environment/header-environment.scss?lit&inline
-var a = e`:host{font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;inset-block-start:0;inset-inline-end:0}:host(:dir(rtl)){--sbb-header-environment-rotate:-45deg}:host(:is(:state(env-dev),[state--env-dev])){--sbb-header-environment-background-color:var(--sbb-color-orange)}:host(:is(:state(env-edu),[state--env-edu])){--sbb-header-environment-background-color:var(--sbb-color-green)}:host(:is(:state(env-int),[state--env-int])),:host(:is(:state(env-inte),[state--env-inte])){--sbb-header-environment-background-color:var(--sbb-color-granite)}:host(:is(:state(env-loc),[state--env-loc])){--sbb-header-environment-background-color:var(--sbb-color-pink)}:host(:is(:state(env-test),[state--env-test])){--sbb-header-environment-background-color:var(--sbb-color-sky)}:host:before{content:"";border-block-start:var(--sbb-header-environment-size) solid var(--sbb-header-environment-background-color);border-inline-start:var(--sbb-header-environment-size) solid transparent}.sbb-header-environment__text{color:var(--sbb-header-environment-color);rotate:var(--sbb-header-environment-rotate);padding-block-end:var(--sbb-spacing-fixed-4x);position:absolute}`, o = class extends n {
-	static {
-		this.elementName = "sbb-header-environment";
-	}
-	static {
-		this.styles = [r, a];
-	}
-	constructor() {
-		super(), this._env = null, this.addController(new i(this, {
-			config: {
-				characterData: !0,
-				subtree: !0
-			},
-			callback: () => {
-				this._slottedTextChange();
-			}
-		}));
-	}
-	_slottedTextChange() {
-		this._env && this.internals.states.delete(`env-${this._env}`), this._env = this.textContent?.trim() ?? "", this._env && this.internals.states.add(`env-${this._env}`);
-	}
-	render() {
-		return t`
-      <span class="sbb-header-environment__text">
-        <slot></slot>
-      </span>
-    `;
-	}
-};
-//#endregion
-export { o as t };