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

package/development/visual-checkbox.pure.js

@@ -1,2 +1,2 @@
-import { t as SbbVisualCheckboxElement } from "./visual-checkbox.component-cvNCtfMJ.js";
+import { t as SbbVisualCheckboxElement } from "./visual-checkbox.component-rdeoQN40.js";
 export { SbbVisualCheckboxElement };

package/{error.component-D8ehHa6T.js → error.component-B_D8WUP5.js}

@@ -3,7 +3,7 @@ import { SbbElement as n } from "./core/base-elements.js";
 import { SbbNegativeMixin as r } from "./core/mixins.js";
 import { boxSizingStyles as i } from "./core/styles.js";
 //#region src/elements/form-field/error/error.scss?inline
-var a = ":host{--_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);--sbb-icon-svg-width: var(--sbb-error-icon-size);--sbb-icon-svg-height: var(--sbb-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-error-color);min-height:var(--_sbb-error-height);font-size:var(--sbb-error-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}@media(forced-colors:active){:host{--sbb-error-color: LinkText !important}}:host([negative]){--sbb-error-color: var(--sbb-color-red85)}.error__icon{display:flex;align-items:center;height:var(--_sbb-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentcolor;height:var(--_sbb-error-height)}", o = 0, s = class extends r(n) {
+var a = ":host{--_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em);--sbb-icon-svg-width: var(--sbb-error-icon-size);--sbb-icon-svg-height: var(--sbb-error-icon-size);display:flex;align-items:flex-start;color:var(--sbb-error-color);min-height:var(--_sbb-error-height);font-size:var(--sbb-error-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}@media(forced-colors:active){:host{--sbb-error-color: LinkText !important}}:host([negative]){--sbb-error-color: var(--sbb-color-red85)}.error__icon{display:flex;align-items:center;height:var(--_sbb-error-height);margin-inline-end:var(--sbb-spacing-fixed-1x)}.error-content{line-height:var(--sbb-typo-line-height-text);vertical-align:text-top}.error__icon-svg{stroke:currentcolor;height:var(--_sbb-error-height)}", o = class extends r(n) {
 	static {
 		this.elementName = "sbb-error";
 	}
@@ -11,7 +11,7 @@ var a = ":host{--_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em)
 		this.styles = [i, t(a)];
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.id ||= `sbb-error-${o++}`;
+		super.connectedCallback();
 		let e = this.closest?.("sbb-form-field");
 		e && (this.negative = e.hasAttribute("negative"));
 	}
@@ -41,4 +41,4 @@ var a = ":host{--_sbb-error-height: calc(var(--sbb-typo-line-height-text) * 1em)
 	}
 };
 //#endregion
-export { s as t };
+export { o as t };

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

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

package/form-field/error.js

@@ -1,4 +1,4 @@
-import { t as e } from "../error.component-D8ehHa6T.js";
+import { t as e } from "../error.component-B_D8WUP5.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/form-field/error.js' has been deprecated.\nUse either '@sbb-esta/elements/form-field.js' or '@sbb-esta/elements/form-field.pure.js' instead.");
 //#endregion
 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-BKjqLhmy.js";
+import { n as e, t } from "../../form-field.component-D50q1wC0.js";
 export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };

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

@@ -0,0 +1,82 @@
+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 { 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 = [
+	100,
+	50,
+	25,
+	10,
+	0
+], l = (() => {
+	let l = s, u, d = [], f = [];
+	return class extends l {
+		constructor() {
+			super(...arguments), this.#e = t(this, d, 0), this._language = (t(this, f), new i(this)), this._abortController = null;
+		}
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+			u = [r()], e(this, null, u, {
+				kind: "accessor",
+				name: "_remainingCharacters",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_remainingCharacters" in e,
+					get: (e) => e._remainingCharacters,
+					set: (e, t) => {
+						e._remainingCharacters = t;
+					}
+				},
+				metadata: t
+			}, d, f), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-form-field-text-counter";
+		}
+		static {
+			this.styles = [s.styles];
+		}
+		#e;
+		get _remainingCharacters() {
+			return this.#e;
+		}
+		set _remainingCharacters(e) {
+			this.#e = e;
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.internals.ariaHidden = "true", this._abortController?.abort(), this._abortController = new AbortController(), this.formField && (this.formField.addEventListener("ɵinput", () => this._onInputUpdate(), { signal: this._abortController.signal }), this.formField.addEventListener("input", () => this._onInputUpdate(), { signal: this._abortController.signal }), this.formField.addEventListener("ɵinputattributechange", () => this._onInputUpdate(), { signal: this._abortController.signal }), this.formField.addEventListener("focusin", (e) => {
+				e.target === this.formField?.inputElement && (this.internals.ariaLabel = this._infoText());
+			}, { signal: this._abortController.signal }), this._onInputUpdate());
+		}
+		disconnectedCallback() {
+			super.disconnectedCallback(), this._abortController?.abort();
+		}
+		_onInputUpdate() {
+			let e = this.formField?.inputElement;
+			if (!e) return;
+			let t = e.maxLength ?? 0, n = e.value?.length ?? 0;
+			this._remainingCharacters = Math.max(t - n, 0), [...c.map((e) => Math.round(e / 100 * t))].includes(this._remainingCharacters) && o.announce(this._infoText());
+		}
+		_infoText() {
+			return `${this._remainingCharacters} ${a[this._language.current]}`;
+		}
+		render() {
+			return n`${this._remainingCharacters}<slot>
+        ${a[this._language.current]}</slot
+      >`;
+		}
+	};
+})();
+//#endregion
+export { l as SbbFormFieldTextCounterElement };

package/form-field/form-field.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../form-field.component-BKjqLhmy.js";
+import { n as e, t } from "../form-field.component-D50q1wC0.js";
 e.define(), console.warn("The entrypoint '@sbb-esta/elements/form-field/form-field.js' has been deprecated.\nUse either '@sbb-esta/elements/form-field.js' or '@sbb-esta/elements/form-field.pure.js' instead.");
 //#endregion
 export { t as SbbFormFieldControlEvent, e as SbbFormFieldElement };

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

@@ -0,0 +1,2 @@
+import { t as e } from "../../hint.component-BVUUrSSu.js";
+export { e as SbbHintElement };

package/form-field.component-D50q1wC0.js

@@ -0,0 +1,478 @@
+import { __esDecorate as e, __runInitializers as t } from "tslib";
+import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
+import { property as o, state as s } from "lit/decorators.js";
+import { SbbElement as ee } from "./core/base-elements.js";
+import { forceType as c } from "./core/decorators.js";
+import { isLean as l } from "./core/dom.js";
+import { SbbNegativeMixin as u, appendAriaElements as d, removeAriaElements as f } from "./core/mixins.js";
+import { boxSizingStyles as p } from "./core/styles.js";
+import { SbbLanguageController as m } from "./core/controllers.js";
+import { i18nOptional as te } from "./core/i18n.js";
+import "./icon.js";
+import { sbbInputModalityDetector as h } from "./core/a11y.js";
+//#region src/elements/form-field/form-field/form-field.scss?inline
+var g = "@charset \"UTF-8\";:host{--sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);--sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-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(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );display:inline-block;color:var(--sbb-form-field-color);font-weight:400}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}: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(min-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(min-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-hint-min-height: calc( var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs) );--sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-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(--sbb-color-graphite);--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));--sbb-form-field-arrow-color: var(--sbb-color-granite);--sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), 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(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), 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(--sbb-color-granite);--sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), 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]),:is(:state(has-hint),[state--has-hint])))){--sbb-form-field-hint-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{display:flex;flex-direction:column;height:100%}.sbb-form-field__space-wrapper:before{content:\"​\";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;flex:1;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);position:relative}.sbb-form-field__wrapper:before{content:\"\";display:block;position:absolute;inset:0;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}: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:transparent}:host(:where(:is(:state(focus),[state--focus]),:is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper:after{content:\"\";position:absolute;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);inset-block-end:0;z-index:var(--sbb-form-field-focus-underline-z-index, initial)}}::slotted(*[slot=prefix]){color:var(--sbb-form-field-prefix-color)}::slotted(*[slot=prefix]),::slotted(*[slot=suffix]){display:flex;min-width:var(--sbb-icon-svg-width);margin-block-start:calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2)}:host(:where(:is(:state(empty),[state--empty]),:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear){display:none}:host(:is(:state(has-error),[state--has-error])) slot[name=hint]{display:none}:host(:where(:is(:state(disabled),[state--disabled]),:is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter){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%;transform:translateY(-50%);position:absolute;inset-inline-end:0;margin-block-start:calc(-1 * var(--sbb-form-field-margin-block-start) / 2);pointer-events:none;color:var(--sbb-form-field-arrow-color)}.sbb-form-field__input-container{display:flex;flex-direction:column;flex:1 1 auto;position:relative;margin-block-start:var(--sbb-form-field-margin-block-start);min-width:0}.sbb-form-field__label-spacer{display:flex;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)}: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){border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-form-field__label{display:flex;max-width:100%;cursor:var(--sbb-cursor-default);position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);font-size:var(--sbb-form-field-label-text-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}: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{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input{display:flex;flex:1;align-items:start}: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__hint{display:flex;min-height:var(--sbb-form-field-hint-min-height);flex-direction:column;margin-block-start:var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start))}", _ = 0, v = /* @__PURE__ */ new WeakMap(), y = [
+	"input",
+	"textarea",
+	"select"
+], b = class extends Event {
+	get control() {
+		return this._control;
+	}
+	constructor(e) {
+		super("formfieldcontrol"), this._control = e;
+	}
+}, x = (() => {
+	let b = u(ee), x, 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, Q = [], $ = [];
+	return class extends b {
+		static {
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
+			x = [o({
+				attribute: "error-space",
+				reflect: !0
+			})], w = [c(), o({ type: Boolean })], D = [o({ reflect: !0 })], A = [c(), o({
+				reflect: !0,
+				type: Boolean
+			})], N = [o({ reflect: !0 })], I = [c(), o({
+				attribute: "hidden-label",
+				reflect: !0,
+				type: Boolean
+			})], z = [c(), o({
+				attribute: "floating-label",
+				reflect: !0,
+				type: Boolean
+			})], H = [s()], G = [s()], J = [s()], Z = [s()], e(this, null, x, {
+				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
+			}, S, C), e(this, null, w, {
+				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
+			}, T, E), e(this, null, D, {
+				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
+			}, O, k), e(this, null, A, {
+				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
+			}, j, M), e(this, null, N, {
+				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
+			}, P, F), e(this, null, I, {
+				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
+			}, L, R), e(this, null, z, {
+				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
+			}, B, V), e(this, null, H, {
+				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
+			}, U, W), e(this, null, G, {
+				kind: "accessor",
+				name: "_hintElements",
+				static: !1,
+				private: !1,
+				access: {
+					has: (e) => "_hintElements" in e,
+					get: (e) => e._hintElements,
+					set: (e, t) => {
+						e._hintElements = t;
+					}
+				},
+				metadata: t
+			}, K, q), e(this, null, J, {
+				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
+			}, Y, X), e(this, null, Z, {
+				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
+			}, Q, $), t && Object.defineProperty(this, Symbol.metadata, {
+				enumerable: !0,
+				configurable: !0,
+				writable: !0,
+				value: t
+			});
+		}
+		static {
+			this.elementName = "sbb-form-field";
+		}
+		static {
+			this.styles = [p, a(g)];
+		}
+		#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 _hintElements() {
+			return this.#c;
+		}
+		set _hintElements(e) {
+			this.#c = e;
+		}
+		#l;
+		get _input() {
+			return this.#l;
+		}
+		set _input(e) {
+			this.#l = e;
+		}
+		#u;
+		get _label() {
+			return this.#u;
+		}
+		set _label(e) {
+			this.#u = 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, S, "none"), this.#t = (t(this, C), t(this, T, !1)), this.#n = (t(this, E), t(this, O, l() ? "s" : "m")), this.#r = (t(this, k), t(this, j, !1)), this.#i = (t(this, M), t(this, P, "default")), this.#a = (t(this, F), t(this, L, !1)), this.#o = (t(this, R), t(this, B, !1)), this.#s = (t(this, V), t(this, U, [])), this.#c = (t(this, W), t(this, K, [])), this.#l = (t(this, q), t(this, Y, null)), this.#u = (t(this, X), t(this, Q, void 0)), this._language = (t(this, $), new m(this)), this._formFieldAttributeObserver = r ? null : new MutationObserver((e) => {
+				e.some((e) => e.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty(), this.dispatchEvent(new Event("ɵinputattributechange")));
+			}), 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-${h.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._assignAriaDescribedByElements(), 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._input?.localName === "textarea") && 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._input.localName === "textarea") && this._unpatchInputValue()), e ? (this._input = e, this._registerInputFormListener(), this._assignAriaDescribedByElements(), this._readInputState(), this._checkAndUpdateInputEmpty(), this._input.localName === "textarea" ? (this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), this._patchInputValue()) : 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",
+					"maxlength"
+				]
+			}), this.internals.states.add(`input-type-${this._input.localName}`), this._syncLabelInputReferences(), "changed") : (this._input = null, "no-input"));
+		}
+		_syncLabelInputReferences() {
+			if (!(!this._input || !this._label)) if (y.includes(this._input.localName) || customElements.get(this._input.localName)?.formAssociated) this._input.id ||= `sbb-form-field-input-${_++}`, this._label.htmlFor = this._input.id;
+			else {
+				this._label.id ||= `sbb-form-field-label-${_++}`;
+				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 y.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 || v.has(e)) return;
+			let t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), "value");
+			if (!t || !t.set || !t.get) return;
+			v.set(e, t);
+			let { get: n, set: r } = t, i = () => {
+				this._checkAndUpdateInputEmpty(), this.dispatchEvent(new Event("ɵinput"));
+			};
+			Object.defineProperty(e, "value", {
+				...t,
+				get() {
+					return n.call(this);
+				},
+				set(e) {
+					r.call(this, e), i();
+				}
+			});
+		}
+		_unpatchInputValue() {
+			let e = this._input, t = v.get(e);
+			t && (Object.defineProperty(e, "value", t), v.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 = f(this._input.ariaDescribedByElements, ...this._errorElements ?? [], ...this._hintElements ?? [])), this._errorElements = t;
+			for (let e of this._errorElements) e.role ||= "status";
+			this._assignAriaDescribedByElements(), this.toggleState("has-error", !!this._errorElements.length), this._syncNegative();
+		}
+		_onSlotHintChange(e) {
+			let t = e.target.assignedElements();
+			this._input?.ariaDescribedByElements?.length && this._hintElements?.length && (this._input.ariaDescribedByElements = f(this._input.ariaDescribedByElements, ...this._hintElements)), this._hintElements = t, this._assignAriaDescribedByElements(), this.toggleState("has-hint", !!this._hintElements.length), this._syncNegative();
+		}
+		_assignAriaDescribedByElements() {
+			if (this._input) {
+				let e = this._errorElements.length ? this._errorElements : this._hintElements;
+				this._input.ariaDescribedByElements = d(this._input.ariaDescribedByElements, ...e);
+			}
+		}
+		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,sbb-hint,sbb-form-field-text-counter").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 n`
+      <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 ? n` <span aria-hidden="true"> ${te[this._language.current]} </span>` : i}
+              </span>
+            </span>
+            <div class="sbb-form-field__input">
+              <slot @slotchange=${this._onSlotInputChange}></slot>
+            </div>
+            ${this.hasUpdated && ["select", "sbb-select"].includes(this._input?.localName) ? n`<sbb-icon
+                  name="chevron-small-down-small"
+                  class="sbb-form-field__select-input-icon"
+                ></sbb-icon>` : i}
+          </div>
+          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
+        </div>
+
+        <div class="sbb-form-field__hint">
+          <slot name="hint" @slotchange=${this._onSlotHintChange}></slot>
+          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
+        </div>
+      </div>
+    `;
+		}
+	};
+})();
+//#endregion
+export { x as n, b as t };

package/form-field.js

@@ -1,7 +1,9 @@
-import { t as e } from "./error.component-D8ehHa6T.js";
-import { SbbFormFieldClearElement as t } from "./form-field/form-field-clear/form-field-clear.component.js";
-import { n, t as r } from "./form-field.component-BKjqLhmy.js";
+import { t as e } from "./error.component-B_D8WUP5.js";
+import { n as t, t as n } from "./form-field.component-D50q1wC0.js";
+import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
+import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
+import { t as a } from "./hint.component-BVUUrSSu.js";
 import "./form-field.pure.js";
-e.define(), n.define(), t.define();
+e.define(), r.define(), t.define(), i.define(), a.define();
 //#endregion
-export { e as SbbErrorElement, t as SbbFormFieldClearElement, r as SbbFormFieldControlEvent, n as SbbFormFieldElement };
+export { e as SbbErrorElement, r as SbbFormFieldClearElement, n as SbbFormFieldControlEvent, t as SbbFormFieldElement, i as SbbFormFieldTextCounterElement, a as SbbHintElement };

package/form-field.pure.js

@@ -1,4 +1,6 @@
-import { t as e } from "./error.component-D8ehHa6T.js";
-import { SbbFormFieldClearElement as t } from "./form-field/form-field-clear/form-field-clear.component.js";
-import { n, t as r } from "./form-field.component-BKjqLhmy.js";
-export { e as SbbErrorElement, t as SbbFormFieldClearElement, r as SbbFormFieldControlEvent, n as SbbFormFieldElement };
+import { t as e } from "./error.component-B_D8WUP5.js";
+import { n as t, t as n } from "./form-field.component-D50q1wC0.js";
+import { SbbFormFieldClearElement as r } from "./form-field/form-field-clear/form-field-clear.component.js";
+import { SbbFormFieldTextCounterElement as i } from "./form-field/form-field-text-counter/form-field-text-counter.component.js";
+import { t as a } from "./hint.component-BVUUrSSu.js";
+export { e as SbbErrorElement, r as SbbFormFieldClearElement, n as SbbFormFieldControlEvent, t as SbbFormFieldElement, i as SbbFormFieldTextCounterElement, a as SbbHintElement };