@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/form-field/form-field.js

@@ -1,32 +1,32 @@
-import { css as m, LitElement as u, html as n, nothing as f } from "lit";
+import { css as u, LitElement as m, html as d, nothing as f } from "lit";
 import { property as a, state as c, customElement as v } from "lit/decorators.js";
-import { sbbInputModalityDetector as g } from "../core/a11y.js";
-import { SbbConnectedAbortController as x, SbbLanguageController as w, SbbSlotStateController as y } from "../core/controllers.js";
-import { isFirefox as _, setOrRemoveAttribute as k } from "../core/dom.js";
-import { i18nOptional as z } from "../core/i18n.js";
-import { SbbNegativeMixin as A } from "../core/mixins.js";
-import { AgnosticMutationObserver as E } from "../core/observers.js";
+import { sbbInputModalityDetector as _ } from "../core/a11y.js";
+import { SbbConnectedAbortController as g, SbbLanguageController as x, SbbSlotStateController as y } from "../core/controllers.js";
+import { isFirefox as w, setOrRemoveAttribute as k } from "../core/dom.js";
+import { i18nOptional as A } from "../core/i18n.js";
+import { SbbNegativeMixin as E } from "../core/mixins.js";
+import { AgnosticMutationObserver as I } from "../core/observers.js";
 import "../icon.js";
-const L = m`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--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-label-size: calc( var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-input-size: calc( var(--sbb-font-size-text-m) * 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-input-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--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);display:inline-block}@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=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(:is([data-readonly],[data-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(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-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([data-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([data-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([data-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([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--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)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-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],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-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([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open])[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(:is([data-input-empty],[data-disabled],[data-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-font-size-text-xs) * var(--sbb-typo-line-height-body-text));margin-block-end:calc(-1 * var(--sbb-form-field-label-to-input-overlapping))}:host(:not([data-slot-names~=label],[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{--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);display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-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-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-font-size-text-m);transform:translateY(.53125rem)}@media (min-width: 52.5rem){:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{transform:translateY(.65625rem)}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-font-size-text-m)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.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))}`;
-var C = Object.defineProperty, N = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
-  for (var i = l > 1 ? void 0 : l ? N(t, r) : t, b = e.length - 1, d; b >= 0; b--)
-    (d = e[b]) && (i = (l ? d(t, r, i) : d(i)) || i);
-  return l && i && C(t, r, i), i;
+const z = u`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--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-label-size: calc( var(--sbb-font-size-text-xs) * var(--sbb-typo-line-height-body-text) );--sbb-form-field-input-size: calc( var(--sbb-font-size-text-m) * 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-input-size ) + var(--sbb-form-field-label-to-input-overlapping) ) / 2 );--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);display:inline-block}@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=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(:is([data-readonly],[data-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(:is([data-readonly],[data-disabled])){--sbb-form-field-border-color: ButtonBorder}}:host(:is([data-readonly],[data-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([data-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([data-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([data-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([data-readonly]:not([negative])){--sbb-form-field-label-color: var(--sbb-color-granite);--sbb-form-field-prefix-color: var(--sbb-color-granite)}:host(:is([data-input-focused],[data-has-popup-open])){--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)}@media (forced-colors: active){:host(:is([data-input-focused],[data-has-popup-open])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused],[data-has-popup-open])[negative]){--sbb-form-field-border-color: var(--sbb-color-milk);--sbb-form-field-prefix-color: var(--sbb-color-milk)}:host([data-invalid]){--sbb-form-field-border-color: var(--sbb-color-red125);--sbb-form-field-text-color: var(--sbb-color-red125)}@media (forced-colors: active){:host([data-invalid]){--sbb-form-field-border-color: LinkText !important;--sbb-form-field-text-color: LinkText !important}}:host([data-invalid][negative]){--sbb-form-field-border-color: var(--sbb-color-red-mode-dark);--sbb-form-field-text-color: var(--sbb-color-red-mode-dark)}:host(:not([data-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],[label]),[hidden-label])){--sbb-form-field-label-size: 0rem;--sbb-form-field-label-to-input-overlapping: 0rem}:host([data-input-type=sbb-slider]){--sbb-form-field-overflow: visible}:host([data-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([data-input-focused][data-focus-origin=keyboard]) .sbb-form-field__wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}@media (forced-colors: none){:host(:is([borderless],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-has-popup-open])[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(:is([data-input-empty],[data-disabled],[data-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-font-size-text-xs) * var(--sbb-typo-line-height-body-text));margin-block-end:calc(-1 * var(--sbb-form-field-label-to-input-overlapping))}:host(:not([data-slot-names~=label],[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{--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);display:flex;max-width:100%;cursor:default;position:absolute;inset-block-start:0;color:var(--sbb-form-field-label-color)}:host([data-input-type=select]) .sbb-form-field__label,:host([data-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-zero-time, var(--sbb-animation-duration-2x));transition-timing-function:var(--sbb-animation-easing);transition-property:transform,font-size}:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{font-size:var(--sbb-font-size-text-m);transform:translateY(.53125rem)}@media (min-width: 52.5rem){:host([floating-label]:is(:not([data-input-focused]:not([data-input-type=sbb-select]),[data-has-popup-open]),[data-readonly])[data-input-empty]) .sbb-form-field__label{transform:translateY(.65625rem)}}.sbb-form-field__label-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){--sbb-text-font-size: var(--sbb-font-size-text-m);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);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;border:none;padding:0;-webkit-appearance:none;outline:none!important;overflow:var(--sbb-form-field-overflow);width:100%;box-sizing:border-box;color:var(--sbb-form-field-text-color);-webkit-text-fill-color:var(--sbb-form-field-text-color);opacity:1;background-color:transparent;font-size:var(--sbb-font-size-text-m)!important;font-family:var(--sbb-typo-font-family)!important;line-height:var(--sbb-typo-line-height-body-text)!important}.sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-metal);-webkit-text-fill-color:var(--sbb-color-metal);opacity:1}:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:transparent!important;-webkit-text-fill-color:transparent!important}@media (forced-colors: active){:host([floating-label]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:Canvas!important;-webkit-text-fill-color:Canvas!important}}:host([data-disabled]:not([floating-label])) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select))::placeholder{color:var(--sbb-color-granite);-webkit-text-fill-color:var(--sbb-color-granite)}:host([data-input-type=select]) .sbb-form-field__input ::slotted(:where(input,select,textarea,sbb-select)){vertical-align:middle}.sbb-form-field__input ::slotted(:where(select,sbb-select)){padding-inline-end:var(--sbb-form-field-select-inline-padding-end)}.sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);position:relative;resize:none;white-space:break-spaces;overflow-y:auto;min-height:calc(var(--sbb-typo-line-height-body-text) * 1em)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,.sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-form-field__input ::slotted(textarea){--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-button,:host([negative]) .sbb-form-field__input ::slotted(textarea)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host([negative]) .sbb-form-field__input ::slotted(textarea){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.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))}`;
+var C = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, t, r, l) => {
+  for (var s = l > 1 ? void 0 : l ? L(t, r) : t, b = e.length - 1, n; b >= 0; b--)
+    (n = e[b]) && (s = (l ? n(t, r, s) : n(s)) || s);
+  return l && s && C(t, r, s), s;
 };
-let h = 0, S = 0;
-const p = ["sbb-autocomplete", "sbb-select"];
-let o = class extends A(u) {
+let p = 0, S = 0;
+const h = ["sbb-autocomplete", "sbb-select"];
+let o = class extends E(m) {
   constructor() {
-    super(), this.i = ["input", "select", "textarea"], this.o = [
-      ...this.i,
+    super(), this._supportedNativeInputElements = ["input", "select", "textarea"], this._supportedInputElements = [
+      ...this._supportedNativeInputElements,
       "sbb-select",
       "sbb-slider"
-    ], this.p = ["button", "sbb-popover"], this.q = [
+    ], this._excludedFocusElements = ["button", "sbb-popover"], this._floatingLabelSupportedInputElements = [
       "input",
       "select",
       "sbb-select",
       "textarea"
-    ], this.r = [
+    ], this._floatingLabelSupportedInputTypes = [
       "email",
       "number",
       "password",
@@ -34,161 +34,161 @@ let o = class extends A(u) {
       "tel",
       "text",
       "url"
-    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this.e = [], this.s = new x(this), this.t = new w(this), this.h = new E(
+    ], this.errorSpace = "none", this.size = "m", this.borderless = !1, this.width = "default", this.hiddenLabel = !1, this.floatingLabel = !1, this._errorElements = [], this._abort = new g(this), this._language = new x(this), this._formFieldAttributeObserver = new I(
       (e) => {
-        e.some((t) => t.type === "attributes") && this.j();
+        e.some((t) => t.type === "attributes") && this._readInputState();
       }
-    ), this.b = new AbortController(), new y(this);
+    ), this._inputAbortController = new AbortController(), new y(this);
   }
   /** Returns the input element. */
   get inputElement() {
-    return this.a;
+    return this._input;
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this.s.signal;
-    this.addEventListener("willOpen", (t) => this.u(t), { signal: e }), this.addEventListener("didClose", (t) => this.v(t), { signal: e }), this.k(), this.f();
+    const e = this._abort.signal;
+    this.addEventListener("willOpen", (t) => this._onPopupOpen(t), { signal: e }), this.addEventListener("didClose", (t) => this._onPopupClose(t), { signal: e }), this._registerInputListener(), this._syncNegative();
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("negative") && this.f();
+    super.willUpdate(e), e.has("negative") && this._syncNegative();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.h.disconnect(), this.b.abort();
+    super.disconnectedCallback(), this._formFieldAttributeObserver.disconnect(), this._inputAbortController.abort();
   }
-  u({ target: e }) {
-    p.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
+  _onPopupOpen({ target: e }) {
+    h.includes(e.localName) && this.toggleAttribute("data-has-popup-open", !0);
   }
-  v({ target: e }) {
-    p.includes(e.localName) && this.removeAttribute("data-has-popup-open");
+  _onPopupClose({ target: e }) {
+    h.includes(e.localName) && this.removeAttribute("data-has-popup-open");
   }
-  w(e) {
+  _handleWrapperClick(e) {
     var t, r;
-    this.x(e) || (((t = this.a) == null ? void 0 : t.localName) === "sbb-select" ? (this.a.click(), this.a.focus()) : e.target.localName !== "label" && ((r = this.a) == null || r.focus()));
+    this._isButtonOrPopup(e) || (((t = this._input) == null ? void 0 : t.localName) === "sbb-select" ? (this._input.click(), this._input.focus()) : e.target.localName !== "label" && ((r = this._input) == null || r.focus()));
   }
-  x(e) {
+  _isButtonOrPopup(e) {
     return e.composedPath().some(
-      (t) => t instanceof window.HTMLElement && t.getAttribute("role") === "button" || this.p.includes(t.localName)
+      (t) => t instanceof window.HTMLElement && t.getAttribute("role") === "button" || this._excludedFocusElements.includes(t.localName)
     );
   }
-  y() {
+  _onSlotLabelChange() {
     const e = Array.from(this.querySelectorAll("label"));
-    this.c = e[0], this.l();
+    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.
    */
-  z(e) {
-    this.a = e.target.assignedElements().find((t) => this.o.includes(t.localName)), this.A(), this.a && (this.g = this.a.getAttribute("aria-describedby"), this.m(), this.j(), this.k(), this.a.localName === "textarea" && this.a.setAttribute("rows", this.a.getAttribute("rows") || "3"), this.h.disconnect(), this.h.observe(this.a, {
+  _onSlotInputChange(e) {
+    this._input = e.target.assignedElements().find((t) => this._supportedInputElements.includes(t.localName)), this._assignSlots(), this._input && (this._originalInputAriaDescribedby = this._input.getAttribute("aria-describedby"), this._applyAriaDescribedby(), this._readInputState(), this._registerInputListener(), this._input.localName === "textarea" && this._input.setAttribute("rows", this._input.getAttribute("rows") || "3"), this._formFieldAttributeObserver.disconnect(), this._formFieldAttributeObserver.observe(this._input, {
       attributes: !0,
       attributeFilter: ["readonly", "disabled", "class", "data-sbb-invalid"]
-    }), this.setAttribute("data-input-type", this.a.localName), this.l());
+    }), this.setAttribute("data-input-type", this._input.localName), this._syncLabelInputReferences());
   }
-  l() {
+  _syncLabelInputReferences() {
     var e;
-    if (!(!this.a || !this.c))
-      if (this.i.includes(this.a.localName))
-        this.a.id || (this.a.id = `sbb-form-field-input-${h++}`), this.c.htmlFor = this.a.id;
+    if (!(!this._input || !this._label))
+      if (this._supportedNativeInputElements.includes(this._input.localName))
+        this._input.id || (this._input.id = `sbb-form-field-input-${p++}`), this._label.htmlFor = this._input.id;
       else {
-        this.c.id || (this.c.id = `sbb-form-field-label-${h++}`);
-        const t = ((e = this.a.getAttribute("aria-labelledby")) == null ? void 0 : e.split(" ").filter((r) => !!r && r !== this.c.id)) ?? [];
-        this.a.setAttribute("aria-labelledby", [...t, this.c.id].join(" "));
+        this._label.id || (this._label.id = `sbb-form-field-label-${p++}`);
+        const t = ((e = this._input.getAttribute("aria-labelledby")) == null ? void 0 : e.split(" ").filter((r) => !!r && r !== this._label.id)) ?? [];
+        this._input.setAttribute("aria-labelledby", [...t, this._label.id].join(" "));
       }
   }
-  k() {
+  _registerInputListener() {
     var t;
-    if (!this.a)
+    if (!this._input)
       return;
-    this.b.abort(), this.b = new AbortController(), this.d(), (t = this.B()) == null || t.addEventListener("reset", () => setTimeout(() => this.reset()), {
-      signal: this.b.signal
-    }), this.a.addEventListener("input", () => this.d(), {
-      signal: this.b.signal
-    }), this.a.addEventListener("blur", () => this.d(), {
-      signal: this.b.signal
+    this._inputAbortController.abort(), this._inputAbortController = new AbortController(), this._checkAndUpdateInputEmpty(), (t = this._getInputForm()) == null || t.addEventListener("reset", () => setTimeout(() => this.reset()), {
+      signal: this._inputAbortController.signal
+    }), this._input.addEventListener("input", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
+    }), this._input.addEventListener("blur", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
     });
-    let e = this.a;
-    this.a.localName === "sbb-select" && (this.a.addEventListener("stateChange", () => this.d(), {
-      signal: this.b.signal
-    }), e = this.a.inputElement), e.addEventListener(
+    let e = this._input;
+    this._input.localName === "sbb-select" && (this._input.addEventListener("stateChange", () => this._checkAndUpdateInputEmpty(), {
+      signal: this._inputAbortController.signal
+    }), e = this._input.inputElement), e.addEventListener(
       "focusin",
       () => {
         this.toggleAttribute("data-input-focused", !0), this.setAttribute(
           "data-focus-origin",
-          g.mostRecentModality ?? ""
+          _.mostRecentModality ?? ""
         );
       },
       {
-        signal: this.b.signal
+        signal: this._inputAbortController.signal
       }
     ), e.addEventListener(
       "focusout",
       () => ["data-focus-origin", "data-input-focused"].forEach((r) => this.removeAttribute(r)),
       {
-        signal: this.b.signal
+        signal: this._inputAbortController.signal
       }
     );
   }
-  B() {
+  _getInputForm() {
     var e;
-    return this.a instanceof HTMLInputElement || this.a instanceof HTMLSelectElement ? this.a.form : (e = this.a) == null ? void 0 : e.closest("form");
+    return this._input instanceof HTMLInputElement || this._input instanceof HTMLSelectElement ? this._input.form : (e = this._input) == null ? void 0 : e.closest("form");
   }
-  d() {
+  _checkAndUpdateInputEmpty() {
     var e;
     this.toggleAttribute(
       "data-input-empty",
-      this.q.includes((e = this.a) == null ? void 0 : e.localName) && this.C()
+      this._floatingLabelSupportedInputElements.includes((e = this._input) == null ? void 0 : e.localName) && this._isInputEmpty()
     );
   }
-  C() {
-    var e, t, r, l, i;
-    return this.a instanceof HTMLInputElement ? this.r.includes(this.a.type) && this.n() : this.a instanceof HTMLSelectElement ? ((r = (t = (e = this.a.selectedOptions) == null ? void 0 : e.item(0)) == null ? void 0 : t.label) == null ? void 0 : r.trim()) === "" : ((l = this.a) == null ? void 0 : l.localName) === "sbb-select" ? ((i = this.a.getDisplayValue()) == null ? void 0 : i.trim()) === "" : this.n();
+  _isInputEmpty() {
+    var e, t, r, l, s;
+    return this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? ((r = (t = (e = this._input.selectedOptions) == null ? void 0 : e.item(0)) == null ? void 0 : t.label) == null ? void 0 : r.trim()) === "" : ((l = this._input) == null ? void 0 : l.localName) === "sbb-select" ? ((s = this._input.getDisplayValue()) == null ? void 0 : s.trim()) === "" : this._isInputValueEmpty();
   }
-  n() {
-    const e = this.a.value;
+  _isInputValueEmpty() {
+    const e = this._input.value;
     return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
   }
-  A() {
+  _assignSlots() {
     this.querySelectorAll("label:not([slot])").forEach((e) => e.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach(
       (e) => e.setAttribute("slot", "error")
     );
   }
-  j() {
-    this.a && (this.toggleAttribute("data-readonly", this.a.hasAttribute("readonly")), this.toggleAttribute("data-disabled", this.a.hasAttribute("disabled")), this.toggleAttribute(
+  _readInputState() {
+    this._input && (this.toggleAttribute("data-readonly", this._input.hasAttribute("readonly")), this.toggleAttribute("data-disabled", this._input.hasAttribute("disabled")), this.toggleAttribute(
       "data-invalid",
-      this.a.hasAttribute("data-sbb-invalid") || this.a.classList.contains("sbb-invalid") || this.a.classList.contains("ng-touched") && this.a.classList.contains("ng-invalid")
+      this._input.hasAttribute("data-sbb-invalid") || this._input.classList.contains("sbb-invalid") || this._input.classList.contains("ng-touched") && this._input.classList.contains("ng-invalid")
     ));
   }
   /**
    * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
    */
-  D(e) {
-    this.e = e.target.assignedElements();
-    for (const t of this.e)
-      t.id || (t.id = `sbb-form-field-error-${++S}`), t.role || (t.role = "status", _ && t.setAttribute("role", "status"));
-    this.m(), this.toggleAttribute("data-has-error", !!this.e.length), this.f();
+  _onSlotErrorChange(e) {
+    this._errorElements = e.target.assignedElements();
+    for (const t of this._errorElements)
+      t.id || (t.id = `sbb-form-field-error-${++S}`), t.role || (t.role = "status", w && t.setAttribute("role", "status"));
+    this._applyAriaDescribedby(), this.toggleAttribute("data-has-error", !!this._errorElements.length), this._syncNegative();
   }
-  m() {
+  _applyAriaDescribedby() {
     const e = [];
-    this.g && e.push(this.g), this.e.length && this.e.forEach((r) => e.push(r.id));
+    this._originalInputAriaDescribedby && e.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((r) => e.push(r.id));
     const t = e.join(" ");
-    this.a && k(this.a, "aria-describedby", t);
+    this._input && k(this._input, "aria-describedby", t);
   }
   /** Manually reset the form field. Currently, this only resets the floating label. */
   reset() {
-    this.d();
+    this._checkAndUpdateInputEmpty();
   }
   /** Manually clears the input value. It only works for inputs, selects are not supported. */
   clear() {
     var e;
-    ((e = this.a) == null ? void 0 : e.localName) === "input" && (this.a.value = "", this.d());
+    ((e = this._input) == null ? void 0 : e.localName) === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
   }
   /**
    * Returns the input element.
    * @deprecated Use the 'inputElement' property instead
    */
   getInputElement() {
-    return this.a;
+    return this._input;
   }
-  f() {
+  _syncNegative() {
     var e;
     (e = this.querySelectorAll) == null || e.call(
       this,
@@ -197,70 +197,70 @@ let o = class extends A(u) {
   }
   render() {
     var e;
-    return n`
+    return d`
       <div class="sbb-form-field__space-wrapper">
         ${/* Queried by id from the autocomplete/select to be used as the anchor element */
     ""}
-        <div @click=${this.w} class="sbb-form-field__wrapper" id="overlay-anchor">
-          <slot name="prefix" @slotchange=${this.f}></slot>
+        <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.y}></slot>
-                ${this.optional ? n` <span aria-hidden="true"> ${z[this.t.current]} </span>` : f}
+                <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
+                ${this.optional ? d` <span aria-hidden="true"> ${A[this._language.current]} </span>` : f}
               </span>
             </span>
             <div class="sbb-form-field__input">
-              <slot @slotchange=${this.z}></slot>
+              <slot @slotchange=${this._onSlotInputChange}></slot>
             </div>
-            ${["select", "sbb-select"].includes((e = this.a) == null ? void 0 : e.localName) ? n`<sbb-icon
+            ${["select", "sbb-select"].includes((e = this._input) == null ? void 0 : e.localName) ? d`<sbb-icon
                   name="chevron-small-down-small"
                   class="sbb-form-field__select-input-icon"
                 ></sbb-icon>` : f}
           </div>
-          <slot name="suffix" @slotchange=${this.f}></slot>
+          <slot name="suffix" @slotchange=${this._syncNegative}></slot>
         </div>
 
         <div class="sbb-form-field__error">
-          <slot name="error" @slotchange=${this.D}></slot>
+          <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
         </div>
       </div>
     `;
   }
 };
-o.styles = L;
-s([
+o.styles = z;
+i([
   a({ attribute: "error-space", reflect: !0 })
 ], o.prototype, "errorSpace", 2);
-s([
+i([
   a({ type: Boolean })
 ], o.prototype, "optional", 2);
-s([
+i([
   a({ reflect: !0 })
 ], o.prototype, "size", 2);
-s([
+i([
   a({ reflect: !0, type: Boolean })
 ], o.prototype, "borderless", 2);
-s([
+i([
   a({ reflect: !0 })
 ], o.prototype, "width", 2);
-s([
+i([
   a({ attribute: "hidden-label", reflect: !0, type: Boolean })
 ], o.prototype, "hiddenLabel", 2);
-s([
+i([
   a({ attribute: "floating-label", reflect: !0, type: Boolean })
 ], o.prototype, "floatingLabel", 2);
-s([
+i([
   c()
-], o.prototype, "e", 2);
-s([
+], o.prototype, "_errorElements", 2);
+i([
   c()
-], o.prototype, "a", 2);
-s([
+], o.prototype, "_input", 2);
+i([
   c()
-], o.prototype, "c", 2);
-o = s([
+], o.prototype, "_label", 2);
+o = i([
   v("sbb-form-field")
 ], o);
 export {