@sbb-esta/lyne-elements 3.0.0-next.0 → 3.0.0-next.2

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

@@ -1,38 +1,37 @@
-var de = (a) => {
+var ae = (a) => {
   throw TypeError(a);
 };
-var ce = (a, n, c) => n.has(a) || de("Cannot " + c);
-var f = (a, n, c) => (ce(a, n, "read from private field"), c ? c.call(a) : n.get(a)), p = (a, n, c) => n.has(a) ? de("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, c), r = (a, n, c, m) => (ce(a, n, "write to private field"), m ? m.call(a, c) : n.set(a, c), c);
-import { __esDecorate as h, __runInitializers as o } from "tslib";
-import { css as me, LitElement as ue, isServer as _e, nothing as fe, html as C } from "lit";
-import { customElement as ge, property as u, state as F } from "lit/decorators.js";
-import { sbbInputModalityDetector as ve } from "../../core/a11y.js";
-import { SbbLanguageController as ye } from "../../core/controllers.js";
-import { slotState as xe, forceType as L } from "../../core/decorators.js";
-import { isLean as we } from "../../core/dom.js";
-import { i18nOptional as ke } from "../../core/i18n.js";
-import { SbbNegativeMixin as Ee, SbbElementInternalsMixin as ze, SbbHydrationMixin as Ie } from "../../core/mixins.js";
+var le = (a, o, n) => o.has(a) || ae("Cannot " + n);
+var b = (a, o, n) => (le(a, o, "read from private field"), n ? n.call(a) : o.get(a)), d = (a, o, n) => o.has(a) ? ae("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, n), i = (a, o, n, f) => (le(a, o, "write to private field"), f ? f.call(a, n) : o.set(a, n), n);
+import { __esDecorate as c, __runInitializers as r } from "tslib";
+import { css as pe, LitElement as he, isServer as me, nothing as oe, html as I } from "lit";
+import { customElement as ue, property as p, state as S } from "lit/decorators.js";
+import { sbbInputModalityDetector as _e } from "../../core/a11y.js";
+import { SbbLanguageController as ge } from "../../core/controllers.js";
+import { slotState as ve, forceType as k } from "../../core/decorators.js";
+import { isLean as ye } from "../../core/dom.js";
+import { i18nOptional as xe } from "../../core/i18n.js";
+import { SbbNegativeMixin as we, SbbElementInternalsMixin as Ee, SbbHydrationMixin as ke, removeAriaElements as ze, appendAriaElements as Ie } from "../../core/mixins.js";
 import "../../icon.js";
-const Se = me`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--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-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--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-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-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-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@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-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-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: 52.5rem){: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=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-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host(:where(:state(disabled),[state--disabled])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host(:where(: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(:state(disabled),[state--disabled])[negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host(:where(:state(readonly),[state--readonly]):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:where(:state(focus),[state--focus])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:state(focus),[state--focus])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}@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(: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([data-slot-names~=label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider])){--sbb-form-field-overflow: visible}:host(:where(:state(input-type-textarea),[state--input-type-textarea])){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;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;top:0;right:0;bottom:0;left: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)}:host(:where(:state(focus),[state--focus]):where(: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)}@media (forced-colors: none){:host(:is([borderless],:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:state(focus),[state--focus],: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}}::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(:state(empty),[state--empty],:state(disabled),[state--disabled],:state(readonly),[state--readonly])) ::slotted(sbb-form-field-clear){display:none}::slotted(sbb-datepicker-toggle){height: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{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-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=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: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:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:where(:state(input-type-select),[state--input-type-select],: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(:state(focus),[state--focus]):not(:where(:state(input-type-sbb-select),[state--input-type-sbb-select])),:where(:state(has-popup-open),[state--has-popup-open])),:where(:state(readonly),[state--readonly])):where(: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(: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}:host([size=s]:is(:state(input-type-input),[state--input-type-input],:state(input-type-select),[state--input-type-select],:state(input-type-sbb-select),[state--input-type-sbb-select],:state(input-type-sbb-date-input),[state--input-type-sbb-date-input],:state(input-type-sbb-time-input),[state--input-type-sbb-time-input])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
-let pe = 0, Ae = 0;
-const N = /* @__PURE__ */ new WeakMap(), he = ["input", "textarea", "select"];
-let qe = (() => {
-  var _, g, v, y, x, w, k, E, z, I, l;
-  let a = [ge("sbb-form-field"), xe()], n, c = [], m, O = Ee(ze(Ie(ue))), U, $ = [], D = [], T, V = [], B = [], M, q = [], j = [], H, G = [], P = [], R, W = [], Y = [], J, K = [], Q = [], X, Z = [], ee = [], te, se = [], ie = [], re, oe = [], ae = [], le, ne = [], be = [];
-  return l = class extends O {
+const Se = pe`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{display:inline-block;--sbb-form-field-background-color: var(--sbb-color-white);--sbb-form-field-border-color: var(--sbb-color-smoke);--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-min-height: var(--sbb-size-element-m);--sbb-form-field-label-color: var(--sbb-color-metal);--sbb-form-field-prefix-color: var(--sbb-color-metal);--sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-form-field-text-color: var(--sbb-color-charcoal);--sbb-form-field-arrow-color: var(--sbb-color-charcoal);--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-gap: var(--sbb-spacing-fixed-2x);--sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);--sbb-form-field-select-inline-padding-end: calc( var(--sbb-icon-svg-width) + var(--sbb-form-field-gap) );--sbb-form-field-overflow: hidden;--sbb-form-field-input-text-size: var(--sbb-font-size-text-m);--sbb-form-field-label-text-size: var(--sbb-font-size-text-xs);--sbb-form-field-label-size: calc( var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-text-line-height: calc( var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-body-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-form-field-spacer-margin-block-end: calc( -1 * var(--sbb-form-field-label-to-input-overlapping) );--sbb-form-field-floating-label-transform: .53125rem;--sbb-icon-svg-width: var(--sbb-size-icon-ui-small);--sbb-icon-svg-height: var(--sbb-size-icon-ui-small);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default)}@media (min-width: 52.5rem){:host{--sbb-form-field-floating-label-transform: .65625rem}}@media (forced-colors: active){:host{--sbb-form-field-border-color: ButtonBorder}}:host(:where(:not([width=collapse]))){min-width:9.375rem;width:min(18.75rem,100%)}:host([negative]){--sbb-form-field-background-color: var(--sbb-color-midnight);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke);--sbb-form-field-text-color: var(--sbb-color-milk);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-form-field-arrow-color: var(--sbb-color-milk)}@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-font-size-text-s);--sbb-form-field-label-text-size: var(--sbb-font-size-text-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: 52.5rem){: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=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-body-text) * var(--sbb-font-size-text-xs) );--sbb-form-field-error-padding-block-start-override: var(--sbb-form-field-error-divider-width)}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-background-color: var(--sbb-color-milk);--sbb-form-field-border-color: var(--sbb-color-graphite);--sbb-form-field-arrow-color: var(--sbb-color-granite)}@media (forced-colors: active){:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:where(:state(readonly),[state--readonly],:state(disabled),[state--disabled])[negative]){--sbb-form-field-background-color: var(--sbb-color-charcoal);--sbb-form-field-border-color: var(--sbb-color-smoke);--sbb-form-field-arrow-color: var(--sbb-color-smoke)}:host(:where(:state(disabled),[state--disabled])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite);--sbb-form-field-border-style: dashed}@media (forced-colors: active){:host(:where(: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(:state(disabled),[state--disabled])[negative]){--sbb-form-field-text-color: var(--sbb-color-smoke);--sbb-form-field-label-color: var(--sbb-color-smoke);--sbb-form-field-prefix-color: var(--sbb-color-smoke)}:host(:where(:state(readonly),[state--readonly]):not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:where(:state(focus),[state--focus])){--sbb-form-field-border-color: var(--sbb-color-charcoal);--sbb-form-field-prefix-color: var(--sbb-color-charcoal);--sbb-form-field-border-width: var(--sbb-border-width-2x)}:host(:where(:state(focus),[state--focus])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}@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(: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([data-slot-names~=label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host(:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider])){--sbb-form-field-overflow: visible}:host(:where(:state(input-type-textarea),[state--input-type-textarea])){--sbb-form-field-max-height: fit-content}.sbb-form-field__space-wrapper{display:flex;flex-direction:column}.sbb-form-field__space-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-form-field__wrapper{display:flex;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)}:host(:where(:state(focus),[state--focus]):where(: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)}@media (forced-colors: none){:host(:is([borderless],:where(:state(input-type-sbb-slider),[state--input-type-sbb-slider]))) .sbb-form-field__wrapper:before{border-color:transparent}:host(:where(:state(focus),[state--focus],: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}}::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(:state(empty),[state--empty],:state(disabled),[state--disabled],: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%;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{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-body-text));margin-block-end:var(--sbb-form-field-spacer-margin-block-end)}:host(:not([data-slot-names~=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: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:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color);--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host([size=s]) .sbb-form-field__label{--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:where(:state(input-type-select),[state--input-type-select],: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(:state(focus),[state--focus]):not(:where(:state(input-type-sbb-select),[state--input-type-sbb-select])),:where(:state(has-popup-open),[state--has-popup-open])),:where(:state(readonly),[state--readonly])):where(: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(: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}:host([size=s]:is(:state(input-type-input),[state--input-type-input],:state(input-type-select),[state--input-type-select],:state(input-type-sbb-select),[state--input-type-sbb-select],:state(input-type-sbb-date-input),[state--input-type-sbb-date-input],:state(input-type-sbb-time-input),[state--input-type-sbb-time-input])) .sbb-form-field__input{margin-block-end:-.125rem}.sbb-form-field__error{display:flex;min-height:var(--sbb-form-field-error-min-height);margin-block-start:var(--sbb-form-field-error-padding-block-start-override, var(--sbb-form-field-error-padding-block-start))}`;
+let ne = 0;
+const z = /* @__PURE__ */ new WeakMap(), be = ["input", "textarea", "select"];
+let Ve = (() => {
+  var h, m, u, _, g, v, y, x, w, E, l;
+  let a = [ue("sbb-form-field"), ve()], o, n = [], f, A = we(Ee(ke(he))), L, N = [], C = [], F, U = [], B = [], O, $ = [], D = [], M, T = [], V = [], q, j = [], H = [], G, P = [], R = [], W, Y = [], J = [], K, Q = [], X = [], Z, ee = [], te = [], se, ie = [], re = [];
+  return l = class extends A {
     constructor() {
-      var t, e;
       super();
-      p(this, _);
-      p(this, g);
-      p(this, v);
-      p(this, y);
-      p(this, x);
-      p(this, w);
-      p(this, k);
-      p(this, E);
-      p(this, z);
-      p(this, I);
+      d(this, h);
+      d(this, m);
+      d(this, u);
+      d(this, _);
+      d(this, g);
+      d(this, v);
+      d(this, y);
+      d(this, x);
+      d(this, w);
+      d(this, E);
       this._excludedFocusElements = ["button", "sbb-popover", "sbb-option", "sbb-chip"], this._floatingLabelSupportedInputElements = [
         "input",
         "select",
@@ -48,17 +47,17 @@ let qe = (() => {
         "tel",
         "text",
         "url"
-      ], r(this, _, o(this, $, "none")), r(this, g, (o(this, D), o(this, V, !1))), r(this, v, (o(this, B), o(this, q, we() ? "s" : "m"))), r(this, y, (o(this, j), o(this, G, !1))), r(this, x, (o(this, P), o(this, W, "default"))), r(this, w, (o(this, Y), o(this, K, !1))), r(this, k, (o(this, Q), o(this, Z, !1))), r(this, E, (o(this, ee), o(this, se, []))), r(this, z, (o(this, ie), o(this, oe, void 0))), r(this, I, (o(this, ae), o(this, ne, void 0))), this._language = (o(this, be), new ye(this)), this._formFieldAttributeObserver = _e ? null : new MutationObserver((s) => {
-        s.some((i) => i.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty());
-      }), this._inputFormAbortController = new AbortController(), (t = this.addEventListener) == null || t.call(this, "focusin", (s) => {
-        (s.target === this.inputElement || s.target === this.inputElement.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${ve.mostRecentModality}`));
-      }, { passive: !0 }), (e = this.addEventListener) == null || e.call(this, "focusout", (s) => {
-        if (s.target === this.inputElement || s.target === this.inputElement.inputElement) {
+      ], i(this, h, r(this, N, "none")), i(this, m, (r(this, C), r(this, U, !1))), i(this, u, (r(this, B), r(this, $, ye() ? "s" : "m"))), i(this, _, (r(this, D), r(this, T, !1))), i(this, g, (r(this, V), r(this, j, "default"))), i(this, v, (r(this, H), r(this, P, !1))), i(this, y, (r(this, R), r(this, Y, !1))), i(this, x, (r(this, J), r(this, Q, []))), i(this, w, (r(this, X), r(this, ee, void 0))), i(this, E, (r(this, te), r(this, ie, void 0))), this._language = (r(this, re), new ge(this)), this._formFieldAttributeObserver = me ? null : new MutationObserver((e) => {
+        e.some((t) => t.type === "attributes") && this._input && (this._readInputState(), this._registerInputFormListener(), this._checkAndUpdateInputEmpty());
+      }), this._inputFormAbortController = new AbortController(), this.addEventListener?.("focusin", (e) => {
+        (e.target === this.inputElement || e.target === this.inputElement?.inputElement) && (this.internals.states.add("focus"), this.internals.states.add(`focus-origin-${_e.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 (const i of this.internals.states)
-            i.startsWith("focus-origin-") && this.internals.states.delete(i);
+          for (const t of this.internals.states)
+            t.startsWith("focus-origin-") && this.internals.states.delete(t);
         }
-      }, { passive: !0 }), this.addEventListener("input", () => this._checkAndUpdateInputEmpty()), this.addEventListener("displayValueChange", () => this._checkAndUpdateInputEmpty()), this.addEventListener("invalid", (s) => s.preventDefault(), { capture: !0 });
+      }, { passive: !0 }), this.addEventListener("input", () => this._checkAndUpdateInputEmpty()), this.addEventListener("displayValueChange", () => this._checkAndUpdateInputEmpty()), this.addEventListener("invalid", (e) => e.preventDefault(), { capture: !0 });
     }
     /**
      * Whether to reserve space for an error message.
@@ -66,78 +65,78 @@ let qe = (() => {
      * `reserve` does reserve one row for an error message.
      */
     get errorSpace() {
-      return f(this, _);
+      return b(this, h);
     }
-    set errorSpace(t) {
-      r(this, _, t);
+    set errorSpace(e) {
+      i(this, h, e);
     }
     /** Indicates whether the input is optional. */
     get optional() {
-      return f(this, g);
+      return b(this, m);
     }
-    set optional(t) {
-      r(this, g, t);
+    set optional(e) {
+      i(this, m, e);
     }
     /**
      * Size variant, either l, m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return f(this, v);
+      return b(this, u);
     }
-    set size(t) {
-      r(this, v, t);
+    set size(e) {
+      i(this, u, e);
     }
     /** Whether to display the form field without a border. */
     get borderless() {
-      return f(this, y);
+      return b(this, _);
     }
-    set borderless(t) {
-      r(this, y, t);
+    set borderless(e) {
+      i(this, _, e);
     }
     /** Defines the width of the component:
      * - `default`: the component has defined width and min-width;
      * - `collapse`: the component adapts itself to its inner input content. */
     get width() {
-      return f(this, x);
+      return b(this, g);
     }
-    set width(t) {
-      r(this, x, t);
+    set width(e) {
+      i(this, g, e);
     }
     /** Whether to visually hide the label. If hidden, screen readers will still read it. */
     get hiddenLabel() {
-      return f(this, w);
+      return b(this, v);
     }
-    set hiddenLabel(t) {
-      r(this, w, t);
+    set hiddenLabel(e) {
+      i(this, v, e);
     }
     /** Whether the label should float. If activated, the placeholder of the input is hidden. */
     get floatingLabel() {
-      return f(this, k);
+      return b(this, y);
     }
-    set floatingLabel(t) {
-      r(this, k, t);
+    set floatingLabel(e) {
+      i(this, y, e);
     }
     /** It is used internally to get the `error` slot. */
     get _errorElements() {
-      return f(this, E);
+      return b(this, x);
     }
-    set _errorElements(t) {
-      r(this, E, t);
+    set _errorElements(e) {
+      i(this, x, e);
     }
     /** Reference to the slotted input element. */
     get _input() {
-      return f(this, z);
+      return b(this, w);
     }
-    set _input(t) {
-      r(this, z, t);
+    set _input(e) {
+      i(this, w, e);
     }
     /** Reference to the slotted label elements. */
     get _label() {
-      return f(this, I);
+      return b(this, E);
     }
-    set _label(t) {
-      r(this, I, t);
+    set _label(e) {
+      i(this, E, e);
     }
     /** Returns the input element. */
     get inputElement() {
@@ -146,23 +145,21 @@ let qe = (() => {
     connectedCallback() {
       super.connectedCallback(), this._assignSlots(), this._connectInputElement(), this._syncNegative(), this._syncSize();
     }
-    willUpdate(t) {
-      super.willUpdate(t), t.has("negative") && this._syncNegative(), t.has("size") && this._syncSize();
+    willUpdate(e) {
+      super.willUpdate(e), e.has("negative") && this._syncNegative(), e.has("size") && this._syncSize();
     }
     disconnectedCallback() {
-      var t, e;
-      super.disconnectedCallback(), (t = this._formFieldAttributeObserver) == null || t.disconnect(), this._inputFormAbortController.abort(), ((e = this._input) == null ? void 0 : e.localName) === "input" && this._unpatchInputValue();
+      super.disconnectedCallback(), this._formFieldAttributeObserver?.disconnect(), this._inputFormAbortController.abort(), this._input?.localName === "input" && this._unpatchInputValue();
     }
-    _handleWrapperClick(t) {
-      var e, s;
-      this._isElementFocusExcluded(t) || t.target.localName !== "label" && (((e = this._input) == null ? void 0 : e.localName) === "sbb-select" && t.target.localName !== "sbb-select" && this._input.click(), (s = this._input) == null || s.focus());
+    _handleWrapperClick(e) {
+      this._isElementFocusExcluded(e) || e.target.localName !== "label" && (this._input?.localName === "sbb-select" && e.target.localName !== "sbb-select" && this._input.click(), this._input?.focus());
     }
-    _isElementFocusExcluded(t) {
-      return t.composedPath().some((e) => e instanceof window.HTMLElement && (e.getAttribute("tabindex") === "0" || e.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(e.localName));
+    _isElementFocusExcluded(e) {
+      return e.composedPath().some((t) => t instanceof window.HTMLElement && (t.getAttribute("tabindex") === "0" || t.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(t.localName));
     }
     _onSlotLabelChange() {
-      const t = Array.from(this.querySelectorAll("label"));
-      this._label = t[0], this._syncLabelInputReferences();
+      const e = Array.from(this.querySelectorAll("label"));
+      this._label = e[0], this._syncLabelInputReferences();
     }
     /**
      * It is used internally to assign the attributes of `<input>` to `_id` and `_input` and to observe the native readonly and disabled attributes.
@@ -171,102 +168,90 @@ let qe = (() => {
       this._assignSlots(), this._connectInputElement();
     }
     _assignSlots() {
-      this.querySelectorAll("label:not([slot])").forEach((t) => t.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((t) => t.setAttribute("slot", "error"));
+      this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((e) => e.setAttribute("slot", "error"));
     }
     _connectInputElement() {
-      var s, i;
-      const t = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)")), e = t.find((d) => this._isInputElement(d)) || t[0];
-      if (e !== this._input) {
-        if (this._input && (this.internals.states.delete(`input-type-${this._input.localName}`), this._input.localName === "input" && this._unpatchInputValue()), !e) {
+      const e = Array.from(this.querySelectorAll("*:not([slot],sbb-chip-group)")), t = e.find((s) => this._isInputElement(s)) || e[0];
+      if (t !== this._input) {
+        if (this._input && (this.internals.states.delete(`input-type-${this._input.localName}`), this._input.localName === "input" && this._unpatchInputValue()), !t) {
           this._input = void 0;
           return;
         }
-        this._input = e, this._applyAriaDescribedby(), this._readInputState(), this._registerInputFormListener(), 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()), (s = this._formFieldAttributeObserver) == null || s.disconnect(), (i = this._formFieldAttributeObserver) == null || i.observe(this._input, {
+        this._input = t, this._assignErrorMessageElements(), this._readInputState(), this._registerInputFormListener(), 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();
       }
     }
     _syncLabelInputReferences() {
-      var t, e, s, i;
       if (!(!this._input || !this._label))
-        if (he.includes(this._input.localName) || (t = customElements.get(this._input.localName)) != null && t.formAssociated)
-          (e = this._input).id || (e.id = `sbb-form-field-input-${pe++}`), this._label.htmlFor = this._input.id;
+        if (be.includes(this._input.localName) || customElements.get(this._input.localName)?.formAssociated)
+          this._input.id ||= `sbb-form-field-input-${ne++}`, this._label.htmlFor = this._input.id;
         else {
-          (s = this._label).id || (s.id = `sbb-form-field-label-${pe++}`);
-          const d = ((i = this._input.getAttribute("aria-labelledby")) == null ? void 0 : i.split(" ").filter((b) => !!b && b !== this._label.id)) ?? [];
-          this._input.setAttribute("aria-labelledby", [...d, this._label.id].join(" "));
+          this._label.id ||= `sbb-form-field-label-${ne++}`;
+          const e = this._input.getAttribute("aria-labelledby")?.split(" ").filter((t) => !!t && t !== this._label.id) ?? [];
+          this._input.setAttribute("aria-labelledby", [...e, this._label.id].join(" "));
         }
     }
-    _isInputElement(t) {
-      var e;
-      return he.includes(t.localName) || !!((e = customElements.get(t.localName)) != null && e.formAssociated);
+    _isInputElement(e) {
+      return be.includes(e.localName) || !!customElements.get(e.localName)?.formAssociated;
     }
     _readInputState() {
       this.toggleState("readonly", this._input.hasAttribute("readonly")), this.toggleState("disabled", this._input.hasAttribute("disabled")), this.toggleState("has-popup-open", this._input.hasAttribute("data-expanded"));
     }
     _registerInputFormListener() {
-      var i, d;
       this._inputFormAbortController.abort();
-      const { signal: t } = this._inputFormAbortController = new AbortController(), e = ((i = this._input) == null ? void 0 : i.form) ?? ((d = this._input) == null ? void 0 : d.closest("form")), s = () => setTimeout(() => this.reset());
-      e == null || e.addEventListener("reset", s, { signal: t });
+      const { signal: e } = this._inputFormAbortController = new AbortController(), t = this._input?.form ?? this._input?.closest("form"), s = () => setTimeout(() => this.reset());
+      t?.addEventListener("reset", s, { signal: e });
     }
     // We need to patch the value property of the HTMLInputElement in order
     // to be able to reset the floating label in the empty state.
     _patchInputValue() {
-      const t = this._input;
-      if (!t || N.has(t))
+      const e = this._input;
+      if (!e || z.has(e))
         return;
-      const e = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t), "value");
-      if (!e || !e.set || !e.get)
+      const t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), "value");
+      if (!t || !t.set || !t.get)
         return;
-      N.set(t, e);
-      const { get: s, set: i } = e, d = () => this._checkAndUpdateInputEmpty();
-      Object.defineProperty(t, "value", {
-        ...e,
+      z.set(e, t);
+      const { get: s, set: de } = t, ce = () => this._checkAndUpdateInputEmpty();
+      Object.defineProperty(e, "value", {
+        ...t,
         get() {
           return s.call(this);
         },
-        set(b) {
-          i.call(this, b), d();
+        set(fe) {
+          de.call(this, fe), ce();
         }
       });
     }
     _unpatchInputValue() {
-      const t = this._input, e = N.get(t);
-      e && (Object.defineProperty(t, "value", e), N.delete(t));
+      const e = this._input, t = z.get(e);
+      t && (Object.defineProperty(e, "value", t), z.delete(e));
     }
     _checkAndUpdateInputEmpty() {
-      var t;
-      this.toggleState("empty", this._floatingLabelSupportedInputElements.includes((t = this._input) == null ? void 0 : t.localName) && this._isInputEmpty());
+      this.toggleState("empty", this._floatingLabelSupportedInputElements.includes(this._input?.localName) && this._isInputEmpty());
     }
     _isInputEmpty() {
-      var e, s, i, d, b, S, A;
-      const t = this.querySelector("sbb-chip-group");
-      return t ? this._isInputValueEmpty() && (Array.isArray(t.value) ? t.value.length === 0 : !t.querySelector("sbb-chip")) : this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? ((i = (s = (e = this._input.selectedOptions) == null ? void 0 : e.item(0)) == null ? void 0 : s.label) == null ? void 0 : i.trim()) === "" : ((d = this._input) == null ? void 0 : d.localName) === "sbb-select" ? ((A = (S = (b = this._input).getDisplayValue) == null ? void 0 : S.call(b)) == null ? void 0 : A.trim()) === "" : this._isInputValueEmpty();
+      const 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() {
-      const t = this._input.value;
-      return ["", void 0, null].includes(t) || Array.isArray(t) && t.length === 0;
+      const e = this._input.value;
+      return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
     }
     /**
      * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
      */
-    _onSlotErrorChange(t) {
-      const e = t.target.assignedElements(), s = this._errorElements.filter((i) => !e.includes(i)).map((i) => i.id);
-      this._errorElements = e;
-      for (const i of this._errorElements)
-        i.id || (i.id = `sbb-form-field-error-${++Ae}`), i.role || (i.role = "status");
-      this._applyAriaDescribedby(s), this.toggleState("has-error", !!this._errorElements.length), this._syncNegative();
-    }
-    _applyAriaDescribedby(t = []) {
-      var d;
-      const e = ((d = this._input) == null ? void 0 : d.getAttribute("aria-describedby")) || "", s = e.split(" ").filter((b) => !!b && !t.includes(b)).filter((b, S, A) => A.indexOf(b) === S);
-      this._errorElements.length && this._errorElements.forEach((b) => {
-        s.includes(b.id) || s.push(b.id);
-      });
-      const i = s.join(" ");
-      this._input && i !== e && (i ? this._input.setAttribute("aria-describedby", i) : this._input.removeAttribute("aria-describedby"));
+    _onSlotErrorChange(e) {
+      const t = e.target.assignedElements();
+      this._input && this._input.ariaDescribedByElements?.length && (this._input.ariaDescribedByElements = ze(this._input.ariaDescribedByElements, ...this._errorElements ?? [])), this._errorElements = t;
+      for (const s of this._errorElements)
+        s.role ||= "status";
+      this._assignErrorMessageElements(), this.toggleState("has-error", !!this._errorElements.length), this._syncNegative();
+    }
+    _assignErrorMessageElements() {
+      this._input && (this._input.ariaDescribedByElements = Ie(this._input.ariaDescribedByElements, ...this._errorElements));
     }
     /** Manually reset the form field. Currently, this only resets the floating label. */
     reset() {
@@ -274,20 +259,16 @@ let qe = (() => {
     }
     /** Manually clears the input value. It only works for inputs, selects are not supported. */
     clear() {
-      var t;
-      ((t = this._input) == null ? void 0 : t.localName) === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
+      this._input?.localName === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
     }
     _syncNegative() {
-      var t;
-      (t = this.querySelectorAll) == null || t.call(this, "sbb-form-error,sbb-mini-button,sbb-popover-trigger,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));
+      this.querySelectorAll?.("sbb-form-error,sbb-mini-button,sbb-popover-trigger,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() {
-      var t;
-      (t = this.querySelectorAll) == null || t.call(this, "sbb-autocomplete,sbb-autocomplete-grid,sbb-select").forEach((e) => e.size = this.size === "s" ? "s" : "m");
+      this.querySelectorAll?.("sbb-autocomplete,sbb-autocomplete-grid,sbb-select").forEach((e) => e.size = this.size === "s" ? "s" : "m");
     }
     render() {
-      var t;
-      return C`
+      return I`
       <div class="sbb-form-field__space-wrapper">
         ${/* Queried by id from the autocomplete/select to be used as the anchor element */
       ""}
@@ -298,16 +279,16 @@ let qe = (() => {
             <span class="sbb-form-field__label">
               <span class="sbb-form-field__label-ellipsis">
                 <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? C` <span aria-hidden="true"> ${ke[this._language.current]} </span>` : fe}
+                ${this.optional ? I` <span aria-hidden="true"> ${xe[this._language.current]} </span>` : oe}
               </span>
             </span>
             <div class="sbb-form-field__input">
               <slot @slotchange=${this._onSlotInputChange}></slot>
             </div>
-            ${this.hasUpdated && ["select", "sbb-select"].includes((t = this._input) == null ? void 0 : t.localName) ? C`<sbb-icon
+            ${this.hasUpdated && ["select", "sbb-select"].includes(this._input?.localName) ? I`<sbb-icon
                   name="chevron-small-down-small"
                   class="sbb-form-field__select-input-icon"
-                ></sbb-icon>` : fe}
+                ></sbb-icon>` : oe}
           </div>
           <slot name="suffix" @slotchange=${this._syncNegative}></slot>
         </div>
@@ -318,31 +299,31 @@ let qe = (() => {
       </div>
     `;
     }
-  }, _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), w = new WeakMap(), k = new WeakMap(), E = new WeakMap(), z = new WeakMap(), I = new WeakMap(), m = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(O[Symbol.metadata] ?? null) : void 0;
-    U = [u({ attribute: "error-space", reflect: !0 })], T = [L(), u({ type: Boolean })], M = [u({ reflect: !0 })], H = [L(), u({ reflect: !0, type: Boolean })], R = [u({ reflect: !0 })], J = [L(), u({ attribute: "hidden-label", reflect: !0, type: Boolean })], X = [L(), u({ attribute: "floating-label", reflect: !0, type: Boolean })], te = [F()], re = [F()], le = [F()], h(l, null, U, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (e) => "errorSpace" in e, get: (e) => e.errorSpace, set: (e, s) => {
-      e.errorSpace = s;
-    } }, metadata: t }, $, D), h(l, null, T, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (e) => "optional" in e, get: (e) => e.optional, set: (e, s) => {
-      e.optional = s;
-    } }, metadata: t }, V, B), h(l, null, M, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, s) => {
-      e.size = s;
-    } }, metadata: t }, q, j), h(l, null, H, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, s) => {
-      e.borderless = s;
-    } }, metadata: t }, G, P), h(l, null, R, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (e) => "width" in e, get: (e) => e.width, set: (e, s) => {
-      e.width = s;
-    } }, metadata: t }, W, Y), h(l, null, J, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (e) => "hiddenLabel" in e, get: (e) => e.hiddenLabel, set: (e, s) => {
-      e.hiddenLabel = s;
-    } }, metadata: t }, K, Q), h(l, null, X, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (e) => "floatingLabel" in e, get: (e) => e.floatingLabel, set: (e, s) => {
-      e.floatingLabel = s;
-    } }, metadata: t }, Z, ee), h(l, null, te, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (e) => "_errorElements" in e, get: (e) => e._errorElements, set: (e, s) => {
-      e._errorElements = s;
-    } }, metadata: t }, se, ie), h(l, null, re, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (e) => "_input" in e, get: (e) => e._input, set: (e, s) => {
-      e._input = s;
-    } }, metadata: t }, oe, ae), h(l, null, le, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (e) => "_label" in e, get: (e) => e._label, set: (e, s) => {
-      e._label = s;
-    } }, metadata: t }, ne, be), h(null, n = { value: m }, a, { kind: "class", name: m.name, metadata: t }, null, c), m = n.value, t && Object.defineProperty(m, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.styles = Se, o(m, c), m;
+  }, h = new WeakMap(), m = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), w = new WeakMap(), E = new WeakMap(), f = l, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(A[Symbol.metadata] ?? null) : void 0;
+    L = [p({ attribute: "error-space", reflect: !0 })], F = [k(), p({ type: Boolean })], O = [p({ reflect: !0 })], M = [k(), p({ reflect: !0, type: Boolean })], q = [p({ reflect: !0 })], G = [k(), p({ attribute: "hidden-label", reflect: !0, type: Boolean })], W = [k(), p({ attribute: "floating-label", reflect: !0, type: Boolean })], K = [S()], Z = [S()], se = [S()], c(l, null, L, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, s) => {
+      t.errorSpace = s;
+    } }, metadata: e }, N, C), c(l, null, F, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, s) => {
+      t.optional = s;
+    } }, metadata: e }, U, B), c(l, null, O, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, s) => {
+      t.size = s;
+    } }, metadata: e }, $, D), c(l, null, M, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, s) => {
+      t.borderless = s;
+    } }, metadata: e }, T, V), c(l, null, q, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, s) => {
+      t.width = s;
+    } }, metadata: e }, j, H), c(l, null, G, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, s) => {
+      t.hiddenLabel = s;
+    } }, metadata: e }, P, R), c(l, null, W, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (t) => "floatingLabel" in t, get: (t) => t.floatingLabel, set: (t, s) => {
+      t.floatingLabel = s;
+    } }, metadata: e }, Y, J), c(l, null, K, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (t) => "_errorElements" in t, get: (t) => t._errorElements, set: (t, s) => {
+      t._errorElements = s;
+    } }, metadata: e }, Q, X), c(l, null, Z, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (t) => "_input" in t, get: (t) => t._input, set: (t, s) => {
+      t._input = s;
+    } }, metadata: e }, ee, te), c(l, null, se, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (t) => "_label" in t, get: (t) => t._label, set: (t, s) => {
+      t._label = s;
+    } }, metadata: e }, ie, re), c(null, o = { value: f }, a, { kind: "class", name: f.name, metadata: e }, null, n), f = o.value, e && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), l.styles = Se, r(f, n), f;
 })();
 export {
-  qe as SbbFormFieldElement
+  Ve as SbbFormFieldElement
 };

package/form-field/form-field-clear/form-field-clear.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field-clear.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field-clear/form-field-clear.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAQnE,OAAO,eAAe,CAAC;;AAEvB;;;GAGG;AACH,qBAEM,wBAAyB,SAAQ,6BAAsC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAA6B;IAChD,OAAO,CAAC,SAAS,CAAmC;;IAOpC,iBAAiB,IAAI,IAAI;YAU3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAMzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}
+{"version":3,"file":"form-field-clear.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/form-field/form-field-clear/form-field-clear.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAQnE,OAAO,eAAe,CAAC;;AAEvB;;;GAGG;AACH,qBAEM,wBAAyB,SAAQ,6BAAsC;IAC3E,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,UAAU,CAAC,CAA6B;IAChD,OAAO,CAAC,SAAS,CAAmC;;IAOpC,iBAAiB,IAAI,IAAI;YAU3B,YAAY;cAWP,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAKzD,cAAc,IAAI,cAAc;CAGpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,sBAAsB,EAAE,wBAAwB,CAAC;KAClD;CACF"}