@sbb-esta/lyne-elements 2.11.0 → 2.11.2

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

@@ -1,29 +1,30 @@
-var ne = (o) => {
+var oe = (o) => {
   throw TypeError(o);
 };
-var be = (o, a, n) => a.has(o) || ne("Cannot " + n);
-var b = (o, a, n) => (be(o, a, "read from private field"), n ? n.call(o) : a.get(o)), d = (o, a, n) => a.has(o) ? ne("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, n), r = (o, a, n, f) => (be(o, a, "write to private field"), f ? f.call(o, n) : a.set(o, n), n);
+var le = (o, a, n) => a.has(o) || oe("Cannot " + n);
+var b = (o, a, n) => (le(o, a, "read from private field"), n ? n.call(o) : a.get(o)), d = (o, a, n) => a.has(o) ? oe("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, n), r = (o, a, n, f) => (le(o, a, "write to private field"), f ? f.call(o, n) : a.set(o, n), n);
 import { __runInitializers as s, __esDecorate as c } from "tslib";
-import { css as fe, LitElement as pe, isServer as he, nothing as de, html as L } from "lit";
-import { customElement as me, property as h, state as S } from "lit/decorators.js";
-import { sbbInputModalityDetector as ue } from "../../core/a11y.js";
+import { css as fe, LitElement as pe, isServer as he, nothing as ae, html as z } from "lit";
+import { customElement as ue, property as p, state as I } from "lit/decorators.js";
+import { sbbInputModalityDetector as me } from "../../core/a11y.js";
 import { SbbLanguageController as _e } from "../../core/controllers.js";
-import { slotState as ge, forceType as A } from "../../core/decorators.js";
+import { slotState as ge, forceType as E } from "../../core/decorators.js";
 import { isLean as ve, isFirefox as ye, setOrRemoveAttribute as xe } from "../../core/dom.js";
 import { i18nOptional as ke } from "../../core/i18n.js";
-import { SbbNegativeMixin as we, SbbHydrationMixin as ze } from "../../core/mixins.js";
+import { SbbNegativeMixin as we, SbbHydrationMixin as Ee } from "../../core/mixins.js";
 import "../../icon.js";
-const Ee = fe`@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(: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])){--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])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused])[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]),[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) var(--sbb-focus-outline-style, 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-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(: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-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([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-duration, 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-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media (forced-colors: active){:host([data-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([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select],[data-input-type=sbb-date-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 ce = 0, Ie = 0;
-const C = /* @__PURE__ */ new WeakMap();
+const ze = fe`@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(: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])){--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])){--sbb-form-field-border-color: Highlight !important;--sbb-form-field-prefix-color: Highlight !important}}:host(:is([data-input-focused])[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]),[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;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([data-input-focused][data-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],[data-input-type=sbb-slider])) .sbb-form-field__wrapper:before{border-color:transparent}:host(:is([data-input-focused],[data-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(: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-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([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-duration, 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-form-field-input-text-size);transform:translateY(var(--sbb-form-field-floating-label-transform))}@media (forced-colors: active){:host([data-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([data-input-type=input],[data-input-type=select],[data-input-type=sbb-select],[data-input-type=sbb-date-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, Ie = 0;
+const A = /* @__PURE__ */ new WeakMap();
 let Ve = (() => {
-  var m, u, _, g, v, y, x, k, w, z, l;
-  let o = [me("sbb-form-field"), ge()], a, n = [], f, N = we(ze(pe)), D, T = [], O = [], F, $ = [], U = [], M, V = [], B = [], j, H = [], q = [], G, P = [], R = [], W, Y = [], J = [], K, Q = [], X = [], Z, ee = [], te = [], ie, re = [], se = [], oe, le = [], ae = [];
-  return l = class extends N {
+  var h, u, m, _, g, v, y, x, k, w, l;
+  let o = [ue("sbb-form-field"), ge()], a, n = [], f, L = we(Ee(pe)), S, C = [], N = [], F, D = [], T = [], O, $ = [], U = [], M, V = [], B = [], j, H = [], q = [], G, P = [], R = [], W, Y = [], J = [], K, Q = [], X = [], Z, ee = [], te = [], ie, re = [], se = [];
+  return l = class extends L {
     constructor() {
       super(...arguments);
-      d(this, m);
+      d(this, h);
       d(this, u);
+      d(this, m);
       d(this, _);
       d(this, g);
       d(this, v);
@@ -31,7 +32,6 @@ let Ve = (() => {
       d(this, x);
       d(this, k);
       d(this, w);
-      d(this, z);
       this._supportedNativeInputElements = [
         "input",
         "select",
@@ -55,8 +55,8 @@ let Ve = (() => {
         "tel",
         "text",
         "url"
-      ], r(this, m, s(this, T, "none")), r(this, u, (s(this, O), s(this, $, !1))), r(this, _, (s(this, U), s(this, V, ve() ? "s" : "m"))), r(this, g, (s(this, B), s(this, H, !1))), r(this, v, (s(this, q), s(this, P, "default"))), r(this, y, (s(this, R), s(this, Y, !1))), r(this, x, (s(this, J), s(this, Q, !1))), r(this, k, (s(this, X), s(this, ee, []))), this._originalInputAriaDescribedby = s(this, te), r(this, w, s(this, re, void 0)), r(this, z, (s(this, se), s(this, le, void 0))), this._language = (s(this, ae), new _e(this)), this._formFieldAttributeObserver = he ? null : new MutationObserver((e) => {
-        e.some((t) => t.type === "attributes") && this._readInputState();
+      ], r(this, h, s(this, C, "none")), r(this, u, (s(this, N), s(this, D, !1))), r(this, m, (s(this, T), s(this, $, ve() ? "s" : "m"))), r(this, _, (s(this, U), s(this, V, !1))), r(this, g, (s(this, B), s(this, H, "default"))), r(this, v, (s(this, q), s(this, P, !1))), r(this, y, (s(this, R), s(this, Y, !1))), r(this, x, (s(this, J), s(this, Q, []))), this._originalInputAriaDescribedby = s(this, X), r(this, k, s(this, ee, void 0)), r(this, w, (s(this, te), s(this, re, void 0))), this._language = (s(this, se), new _e(this)), this._formFieldAttributeObserver = he ? null : new MutationObserver((t) => {
+        t.some((e) => e.type === "attributes") && this._readInputState();
       }), this._inputAbortController = new AbortController();
     }
     /**
@@ -65,78 +65,78 @@ let Ve = (() => {
      * `reserve` does reserve one row for an error message.
      */
     get errorSpace() {
-      return b(this, m);
+      return b(this, h);
     }
-    set errorSpace(e) {
-      r(this, m, e);
+    set errorSpace(t) {
+      r(this, h, t);
     }
     /** Indicates whether the input is optional. */
     get optional() {
       return b(this, u);
     }
-    set optional(e) {
-      r(this, u, e);
+    set optional(t) {
+      r(this, u, t);
     }
     /**
      * Size variant, either l, m or s.
      * @default 'm' / 's' (lean)
      */
     get size() {
-      return b(this, _);
+      return b(this, m);
     }
-    set size(e) {
-      r(this, _, e);
+    set size(t) {
+      r(this, m, t);
     }
     /** Whether to display the form field without a border. */
     get borderless() {
-      return b(this, g);
+      return b(this, _);
     }
-    set borderless(e) {
-      r(this, g, e);
+    set borderless(t) {
+      r(this, _, t);
     }
     /** 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 b(this, v);
+      return b(this, g);
     }
-    set width(e) {
-      r(this, v, e);
+    set width(t) {
+      r(this, g, t);
     }
     /** Whether to visually hide the label. If hidden, screen readers will still read it. */
     get hiddenLabel() {
-      return b(this, y);
+      return b(this, v);
     }
-    set hiddenLabel(e) {
-      r(this, y, e);
+    set hiddenLabel(t) {
+      r(this, v, t);
     }
     /** Whether the label should float. If activated, the placeholder of the input is hidden. */
     get floatingLabel() {
-      return b(this, x);
+      return b(this, y);
     }
-    set floatingLabel(e) {
-      r(this, x, e);
+    set floatingLabel(t) {
+      r(this, y, t);
     }
     /** It is used internally to get the `error` slot. */
     get _errorElements() {
-      return b(this, k);
+      return b(this, x);
     }
-    set _errorElements(e) {
-      r(this, k, e);
+    set _errorElements(t) {
+      r(this, x, t);
     }
     /** Reference to the slotted input element. */
     get _input() {
-      return b(this, w);
+      return b(this, k);
     }
-    set _input(e) {
-      r(this, w, e);
+    set _input(t) {
+      r(this, k, t);
     }
     /** Reference to the slotted label elements. */
     get _label() {
-      return b(this, z);
+      return b(this, w);
     }
-    set _label(e) {
-      r(this, z, e);
+    set _label(t) {
+      r(this, w, t);
     }
     /** Returns the input element. */
     get inputElement() {
@@ -145,129 +145,121 @@ let Ve = (() => {
     connectedCallback() {
       super.connectedCallback(), this._registerInputListener(), this._syncNegative();
     }
-    willUpdate(e) {
-      super.willUpdate(e), e.has("negative") && this._syncNegative();
+    willUpdate(t) {
+      super.willUpdate(t), t.has("negative") && this._syncNegative();
     }
     disconnectedCallback() {
-      var e, t;
-      super.disconnectedCallback(), (e = this._formFieldAttributeObserver) == null || e.disconnect(), this._inputAbortController.abort(), ((t = this._input) == null ? void 0 : t.localName) === "input" && this._unpatchInputValue();
+      super.disconnectedCallback(), this._formFieldAttributeObserver?.disconnect(), this._inputAbortController.abort(), this._input?.localName === "input" && this._unpatchInputValue();
     }
-    _handleWrapperClick(e) {
-      var t, i;
-      this._isElementFocusExcluded(e) || (((t = this._input) == null ? void 0 : t.localName) === "sbb-select" && e.target.localName !== "sbb-select" ? (this._input.click(), this._input.focus()) : e.target.localName !== "label" && ((i = this._input) == null || i.focus()));
+    _handleWrapperClick(t) {
+      this._isElementFocusExcluded(t) || (this._input?.localName === "sbb-select" && t.target.localName !== "sbb-select" ? (this._input.click(), this._input.focus()) : t.target.localName !== "label" && this._input?.focus());
     }
-    _isElementFocusExcluded(e) {
-      return e.composedPath().some((t) => t instanceof window.HTMLElement && (t.getAttribute("tabindex") === "0" || t.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(t.localName));
+    _isElementFocusExcluded(t) {
+      return t.composedPath().some((e) => e instanceof window.HTMLElement && (e.getAttribute("tabindex") === "0" || e.hasAttribute("contenteditable")) || this._excludedFocusElements.includes(e.localName));
     }
     _onSlotLabelChange() {
-      const e = Array.from(this.querySelectorAll("label"));
-      this._label = e[0], this._syncLabelInputReferences();
+      const t = Array.from(this.querySelectorAll("label"));
+      this._label = t[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.
      */
     _onSlotInputChange() {
-      var t, i;
-      const e = this.querySelector(`:where(${this._supportedInputElements.join(",")})`);
-      if (this._assignSlots(), this._input && this._input.localName === "input" && e !== this._input && this._unpatchInputValue(), !e) {
+      const t = this.querySelector(`:where(${this._supportedInputElements.join(",")})`);
+      if (this._assignSlots(), this._input && this._input.localName === "input" && t !== this._input && this._unpatchInputValue(), !t) {
         this._input = void 0;
         return;
       }
-      this._input = e, 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"), (t = this._formFieldAttributeObserver) == null || t.disconnect(), (i = this._formFieldAttributeObserver) == null || i.observe(this._input, {
+      this._input = t, 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", "data-expanded"]
       }), this.setAttribute("data-input-type", this._input.localName), this._syncLabelInputReferences();
     }
     _syncLabelInputReferences() {
-      var e;
       if (!(!this._input || !this._label))
         if (this._supportedNativeInputElements.includes(this._input.localName))
-          this._input.id || (this._input.id = `sbb-form-field-input-${ce++}`), this._label.htmlFor = this._input.id;
+          this._input.id || (this._input.id = `sbb-form-field-input-${ne++}`), this._label.htmlFor = this._input.id;
         else {
-          this._label.id || (this._label.id = `sbb-form-field-label-${ce++}`);
-          const t = ((e = this._input.getAttribute("aria-labelledby")) == null ? void 0 : e.split(" ").filter((i) => !!i && i !== this._label.id)) ?? [];
+          this._label.id || (this._label.id = `sbb-form-field-label-${ne++}`);
+          const t = this._input.getAttribute("aria-labelledby")?.split(" ").filter((e) => !!e && e !== this._label.id) ?? [];
           this._input.setAttribute("aria-labelledby", [...t, this._label.id].join(" "));
         }
     }
     _registerInputListener() {
-      var t;
       if (!this._input)
         return;
-      this._inputAbortController.abort(), this._inputAbortController = new AbortController(), this._checkAndUpdateInputEmpty(), (t = this._getInputForm()) == null || t.addEventListener("reset", () => setTimeout(() => this.reset()), {
+      this._inputAbortController.abort(), this._inputAbortController = new AbortController(), this._checkAndUpdateInputEmpty(), this._getInputForm()?.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
-      }), this._input.addEventListener("invalid", (i) => i.preventDefault(), {
+      }), this._input.addEventListener("invalid", (e) => e.preventDefault(), {
         signal: this._inputAbortController.signal
       });
-      let e = this._input;
+      let t = this._input;
       if (this._input.localName === "input")
         this._patchInputValue();
       else if (this._input.localName === "sbb-select") {
         this._input.addEventListener("displayValueChange", () => this._checkAndUpdateInputEmpty(), {
           signal: this._inputAbortController.signal
         });
-        const i = this._input;
-        if (e = i.inputElement, !e) {
-          const p = {
+        const e = this._input;
+        if (t = e.inputElement, !t) {
+          const i = {
             hostUpdated: () => {
-              i.removeController(p), this._registerInputListener();
+              e.removeController(i), this._registerInputListener();
             }
           };
-          i.addController(p);
+          e.addController(i);
         }
       }
-      e == null || e.addEventListener("focusin", () => {
-        this.toggleAttribute("data-input-focused", !0), this.setAttribute("data-focus-origin", ue.mostRecentModality ?? "");
+      t?.addEventListener("focusin", () => {
+        this.toggleAttribute("data-input-focused", !0), this.setAttribute("data-focus-origin", me.mostRecentModality ?? "");
       }, {
         signal: this._inputAbortController.signal
-      }), e == null || e.addEventListener("focusout", () => ["data-focus-origin", "data-input-focused"].forEach((i) => this.removeAttribute(i)), {
+      }), t?.addEventListener("focusout", () => ["data-focus-origin", "data-input-focused"].forEach((e) => this.removeAttribute(e)), {
         signal: this._inputAbortController.signal
       });
     }
     _getInputForm() {
-      var e;
-      return this._input instanceof HTMLInputElement || this._input instanceof HTMLSelectElement ? this._input.form : (e = this._input) == null ? void 0 : e.closest("form");
+      return this._input instanceof HTMLInputElement || this._input instanceof HTMLSelectElement ? this._input.form : this._input?.closest("form");
     }
     // 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 e = this._input, t = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(e), "value");
-      if (!t || !t.set || !t.get)
+      const t = this._input, e = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(t), "value");
+      if (!e || !e.set || !e.get)
         return;
-      C.set(e, t);
-      const { get: i, set: p } = t, E = () => this._checkAndUpdateInputEmpty();
-      Object.defineProperty(e, "value", {
-        ...t,
+      A.set(t, e);
+      const { get: i, set: be } = e, de = () => this._checkAndUpdateInputEmpty();
+      Object.defineProperty(t, "value", {
+        ...e,
         get() {
           return i.call(this);
         },
-        set(I) {
-          p.call(this, I), E();
+        set(ce) {
+          be.call(this, ce), de();
         }
       });
     }
     _unpatchInputValue() {
-      const e = this._input, t = C.get(e);
-      t && (Object.defineProperty(e, "value", t), C.delete(e));
+      const t = this._input, e = A.get(t);
+      e && (Object.defineProperty(t, "value", e), A.delete(t));
     }
     _checkAndUpdateInputEmpty() {
-      var e;
-      this.toggleAttribute("data-input-empty", this._floatingLabelSupportedInputElements.includes((e = this._input) == null ? void 0 : e.localName) && this._isInputEmpty());
+      this.toggleAttribute("data-input-empty", this._floatingLabelSupportedInputElements.includes(this._input?.localName) && this._isInputEmpty());
     }
     _isInputEmpty() {
-      var t, i, p, E, I;
-      const e = this.querySelector("sbb-chip-group");
-      return e ? this._isInputValueEmpty() && e.value.length === 0 : this._input instanceof HTMLInputElement ? this._floatingLabelSupportedInputTypes.includes(this._input.type) && this._isInputValueEmpty() : this._input instanceof HTMLSelectElement ? ((p = (i = (t = this._input.selectedOptions) == null ? void 0 : t.item(0)) == null ? void 0 : i.label) == null ? void 0 : p.trim()) === "" : ((E = this._input) == null ? void 0 : E.localName) === "sbb-select" ? ((I = this._input.getDisplayValue()) == null ? void 0 : I.trim()) === "" : this._isInputValueEmpty();
+      const t = this.querySelector("sbb-chip-group");
+      return t ? this._isInputValueEmpty() && t.value.length === 0 : 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 e = this._input.value;
-      return ["", void 0, null].includes(e) || Array.isArray(e) && e.length === 0;
+      const t = this._input.value;
+      return ["", void 0, null].includes(t) || Array.isArray(t) && t.length === 0;
     }
     _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"));
+      this.querySelectorAll("label:not([slot])").forEach((t) => t.setAttribute("slot", "label")), this.querySelectorAll("sbb-form-error:not([slot])").forEach((t) => t.setAttribute("slot", "error"));
     }
     _readInputState() {
       this._input && (this.toggleAttribute("data-readonly", this._input.hasAttribute("readonly")), this.toggleAttribute("data-disabled", this._input.hasAttribute("disabled")), this.toggleAttribute("data-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")), this.toggleAttribute("data-has-popup-open", this._input.hasAttribute("data-expanded")));
@@ -275,17 +267,17 @@ let Ve = (() => {
     /**
      * It is used internally to set the aria-describedby attribute for the slotted input referencing available <sbb-form-error> instances.
      */
-    _onSlotErrorChange(e) {
-      this._errorElements = e.target.assignedElements();
-      for (const t of this._errorElements)
-        t.id || (t.id = `sbb-form-field-error-${++Ie}`), t.role || (t.role = "status", ye && t.setAttribute("role", "status"));
+    _onSlotErrorChange(t) {
+      this._errorElements = t.target.assignedElements();
+      for (const e of this._errorElements)
+        e.id || (e.id = `sbb-form-field-error-${++Ie}`), e.role || (e.role = "status", ye && e.setAttribute("role", "status"));
       this._applyAriaDescribedby(), this.toggleAttribute("data-has-error", !!this._errorElements.length), this._syncNegative();
     }
     _applyAriaDescribedby() {
-      const e = [];
-      this._originalInputAriaDescribedby && e.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((i) => e.push(i.id));
-      const t = e.join(" ");
-      this._input && xe(this._input, "aria-describedby", t);
+      const t = [];
+      this._originalInputAriaDescribedby && t.push(this._originalInputAriaDescribedby), this._errorElements.length && this._errorElements.forEach((i) => t.push(i.id));
+      const e = t.join(" ");
+      this._input && xe(this._input, "aria-describedby", e);
     }
     /** Manually reset the form field. Currently, this only resets the floating label. */
     reset() {
@@ -293,16 +285,13 @@ let Ve = (() => {
     }
     /** Manually clears the input value. It only works for inputs, selects are not supported. */
     clear() {
-      var e;
-      ((e = this._input) == null ? void 0 : e.localName) === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
+      this._input?.localName === "input" && (this._input.value = "", this._checkAndUpdateInputEmpty());
     }
     _syncNegative() {
-      var e;
-      (e = this.querySelectorAll) == null || e.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((t) => t.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((t) => t.toggleAttribute("negative", this.negative));
     }
     render() {
-      var e;
-      return L`
+      return z`
       <div class="sbb-form-field__space-wrapper">
         ${/* Queried by id from the autocomplete/select to be used as the anchor element */
       ""}
@@ -313,16 +302,16 @@ let Ve = (() => {
             <span class="sbb-form-field__label">
               <span class="sbb-form-field__label-ellipsis">
                 <slot name="label" @slotchange=${this._onSlotLabelChange}></slot>
-                ${this.optional ? L` <span aria-hidden="true"> ${ke[this._language.current]} </span>` : de}
+                ${this.optional ? z` <span aria-hidden="true"> ${ke[this._language.current]} </span>` : ae}
               </span>
             </span>
             <div class="sbb-form-field__input">
               <slot @slotchange=${this._onSlotInputChange}></slot>
             </div>
-            ${["select", "sbb-select"].includes((e = this._input) == null ? void 0 : e.localName) ? L`<sbb-icon
+            ${["select", "sbb-select"].includes(this._input?.localName) ? z`<sbb-icon
                   name="chevron-small-down-small"
                   class="sbb-form-field__select-input-icon"
-                ></sbb-icon>` : de}
+                ></sbb-icon>` : ae}
           </div>
           <slot name="suffix" @slotchange=${this._syncNegative}></slot>
         </div>
@@ -333,30 +322,30 @@ let Ve = (() => {
       </div>
     `;
     }
-  }, m = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), k = new WeakMap(), w = new WeakMap(), z = new WeakMap(), f = l, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(N[Symbol.metadata] ?? null) : void 0;
-    D = [h({ attribute: "error-space", reflect: !0 })], F = [A(), h({ type: Boolean })], M = [h({ reflect: !0 })], j = [A(), h({ reflect: !0, type: Boolean })], G = [h({ reflect: !0 })], W = [A(), h({ attribute: "hidden-label", reflect: !0, type: Boolean })], K = [A(), h({ attribute: "floating-label", reflect: !0, type: Boolean })], Z = [S()], ie = [S()], oe = [S()], c(l, null, D, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (t) => "errorSpace" in t, get: (t) => t.errorSpace, set: (t, i) => {
-      t.errorSpace = i;
-    } }, metadata: e }, T, O), c(l, null, F, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (t) => "optional" in t, get: (t) => t.optional, set: (t, i) => {
-      t.optional = i;
-    } }, metadata: e }, $, U), c(l, null, M, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (t) => "size" in t, get: (t) => t.size, set: (t, i) => {
-      t.size = i;
-    } }, metadata: e }, V, B), c(l, null, j, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, i) => {
-      t.borderless = i;
-    } }, metadata: e }, H, q), c(l, null, G, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (t) => "width" in t, get: (t) => t.width, set: (t, i) => {
-      t.width = i;
-    } }, metadata: e }, P, R), c(l, null, W, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (t) => "hiddenLabel" in t, get: (t) => t.hiddenLabel, set: (t, i) => {
-      t.hiddenLabel = i;
-    } }, metadata: e }, Y, J), c(l, null, K, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (t) => "floatingLabel" in t, get: (t) => t.floatingLabel, set: (t, i) => {
-      t.floatingLabel = i;
-    } }, metadata: e }, Q, X), c(l, null, Z, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (t) => "_errorElements" in t, get: (t) => t._errorElements, set: (t, i) => {
-      t._errorElements = i;
-    } }, metadata: e }, ee, te), c(l, null, ie, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (t) => "_input" in t, get: (t) => t._input, set: (t, i) => {
-      t._input = i;
-    } }, metadata: e }, re, se), c(l, null, oe, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (t) => "_label" in t, get: (t) => t._label, set: (t, i) => {
-      t._label = i;
-    } }, metadata: e }, le, ae), c(null, a = { value: f }, o, { kind: "class", name: f.name, metadata: e }, null, n), f = a.value, e && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), l.styles = Ee, s(f, n), f;
+  }, h = new WeakMap(), u = new WeakMap(), m = new WeakMap(), _ = new WeakMap(), g = new WeakMap(), v = new WeakMap(), y = new WeakMap(), x = new WeakMap(), k = new WeakMap(), w = new WeakMap(), f = l, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
+    S = [p({ attribute: "error-space", reflect: !0 })], F = [E(), p({ type: Boolean })], O = [p({ reflect: !0 })], M = [E(), p({ reflect: !0, type: Boolean })], j = [p({ reflect: !0 })], G = [E(), p({ attribute: "hidden-label", reflect: !0, type: Boolean })], W = [E(), p({ attribute: "floating-label", reflect: !0, type: Boolean })], K = [I()], Z = [I()], ie = [I()], c(l, null, S, { kind: "accessor", name: "errorSpace", static: !1, private: !1, access: { has: (e) => "errorSpace" in e, get: (e) => e.errorSpace, set: (e, i) => {
+      e.errorSpace = i;
+    } }, metadata: t }, C, N), c(l, null, F, { kind: "accessor", name: "optional", static: !1, private: !1, access: { has: (e) => "optional" in e, get: (e) => e.optional, set: (e, i) => {
+      e.optional = i;
+    } }, metadata: t }, D, T), c(l, null, O, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
+      e.size = i;
+    } }, metadata: t }, $, U), c(l, null, M, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, i) => {
+      e.borderless = i;
+    } }, metadata: t }, V, B), c(l, null, j, { kind: "accessor", name: "width", static: !1, private: !1, access: { has: (e) => "width" in e, get: (e) => e.width, set: (e, i) => {
+      e.width = i;
+    } }, metadata: t }, H, q), c(l, null, G, { kind: "accessor", name: "hiddenLabel", static: !1, private: !1, access: { has: (e) => "hiddenLabel" in e, get: (e) => e.hiddenLabel, set: (e, i) => {
+      e.hiddenLabel = i;
+    } }, metadata: t }, P, R), c(l, null, W, { kind: "accessor", name: "floatingLabel", static: !1, private: !1, access: { has: (e) => "floatingLabel" in e, get: (e) => e.floatingLabel, set: (e, i) => {
+      e.floatingLabel = i;
+    } }, metadata: t }, Y, J), c(l, null, K, { kind: "accessor", name: "_errorElements", static: !1, private: !1, access: { has: (e) => "_errorElements" in e, get: (e) => e._errorElements, set: (e, i) => {
+      e._errorElements = i;
+    } }, metadata: t }, Q, X), c(l, null, Z, { kind: "accessor", name: "_input", static: !1, private: !1, access: { has: (e) => "_input" in e, get: (e) => e._input, set: (e, i) => {
+      e._input = i;
+    } }, metadata: t }, ee, te), c(l, null, ie, { kind: "accessor", name: "_label", static: !1, private: !1, access: { has: (e) => "_label" in e, get: (e) => e._label, set: (e, i) => {
+      e._label = i;
+    } }, metadata: t }, re, se), c(null, a = { value: f }, o, { kind: "class", name: f.name, metadata: t }, null, n), f = a.value, t && Object.defineProperty(f, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), l.styles = ze, s(f, n), f;
 })();
 export {
   Ve as SbbFormFieldElement

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

@@ -1,42 +1,40 @@
-import { __esDecorate as l, __runInitializers as d } from "tslib";
-import { css as c, html as u } from "lit";
-import { customElement as v } from "lit/decorators.js";
-import { SbbButtonBaseElement as m } from "../../core/base-elements.js";
-import { SbbLanguageController as f } from "../../core/controllers.js";
-import { hostAttributes as h } from "../../core/decorators.js";
-import { i18nClearInput as p } from "../../core/i18n.js";
-import { SbbNegativeMixin as g } from "../../core/mixins.js";
+import { __esDecorate as s, __runInitializers as n } from "tslib";
+import { css as l, html as d } from "lit";
+import { customElement as c } from "lit/decorators.js";
+import { SbbButtonBaseElement as u } from "../../core/base-elements.js";
+import { SbbLanguageController as v } from "../../core/controllers.js";
+import { hostAttributes as m } from "../../core/decorators.js";
+import { i18nClearInput as f } from "../../core/i18n.js";
+import { SbbNegativeMixin as h } from "../../core/mixins.js";
 import "../../icon.js";
-const k = c`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
-let I = (() => {
+const p = l`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}:host{display:inline-block;-webkit-tap-highlight-color:transparent;height:fit-content;outline:none!important;--sbb-button-color-text: var(--sbb-color-charcoal);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-milk);--sbb-button-color-active-background: var(--sbb-color-cloud);--sbb-button-color-disabled-background: var(--sbb-color-milk);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-granite);--sbb-button-border-disabled-width: var(--sbb-border-width-1x);--sbb-button-border-disabled-style: dashed;--sbb-button-border-radius: var(--sbb-border-radius-infinity);--sbb-button-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-button-transition-easing-function: var(--sbb-animation-easing)}@media (forced-colors: active){:host{--sbb-button-color-text: ButtonText !important;--sbb-button-color-hover-background: Highlight !important;--sbb-button-color-active-background: Highlight !important;--sbb-button-color-disabled-background: Canvas !important;--sbb-button-color-disabled-border: GrayText !important;--sbb-button-color-disabled-text: GrayText !important}}:host .sbb-form-field-clear{position:relative;transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:color;border-radius:var(--sbb-button-border-radius);color:var(--sbb-button-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}:host .sbb-form-field-clear:before{position:absolute;content:"";inset:0;border-radius:var(--sbb-button-border-radius);background-color:var(--sbb-button-color-default-background);transition-duration:var(--sbb-button-transition-duration);transition-timing-function:var(--sbb-button-transition-easing-function);transition-property:inset,background-color}sbb-icon{transition:transform var(--sbb-button-transition-duration) var(--sbb-button-transition-easing-function);transform:translateY(var(--sbb-button-translate-y-content-hover, 0rem));display:flex}:host([negative]){--sbb-button-color-text: var(--sbb-color-milk);--sbb-button-color-default-background: var(--sbb-color-black-alpha-0);--sbb-button-color-hover-background: var(--sbb-color-charcoal);--sbb-button-color-active-background: var(--sbb-color-iron);--sbb-button-color-disabled-background: var(--sbb-color-charcoal);--sbb-button-color-disabled-border: var(--sbb-color-smoke);--sbb-button-color-disabled-text: var(--sbb-color-smoke)}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-form-field-clear{color:var(--sbb-button-color-disabled-text);cursor:default;pointer-events:none}:host(:is([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-disabled-background);border:var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style) var(--sbb-button-color-disabled-border)}:host(:is([data-focus-visible],:focus-visible)) .sbb-form-field-clear:before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}:host([data-focus-visible]){--sbb-focus-outline-style: initial}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover){--sbb-button-translate-y-content-hover: -.0625rem}}@media (any-hover: hover){:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled],:active,[data-active]):hover) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-hover-background)}}:host(:not([disabled],:disabled,[disabled-interactive],[data-disabled],[data-group-disabled]):is(:active,[data-active])) .sbb-form-field-clear:before{background-color:var(--sbb-button-color-active-background)}`;
+let F = (() => {
   var r;
-  let n = [v("sbb-form-field-clear"), h({
+  let i = [c("sbb-form-field-clear"), m({
     slot: "suffix"
-  })], b, a = [], o, e = g(m);
+  })], b, a = [], o, e = h(u);
   return r = class extends e {
     constructor() {
-      var t;
-      super(), this._language = new f(this), (t = this.addEventListener) == null || t.call(this, "click", () => this._handleClick());
+      super(), this._language = new v(this), this.addEventListener?.("click", () => this._handleClick());
     }
     connectedCallback() {
       super.connectedCallback(), this._formField = this.closest("sbb-form-field, [data-form-field]"), this._formField && (this.negative = this._formField.hasAttribute("negative"));
     }
     async _handleClick() {
-      var i, s;
-      const t = (i = this._formField) == null ? void 0 : i.inputElement;
-      !t || t.localName !== "input" || ((s = this._formField) == null || s.clear(), t.focus(), t.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
+      const t = this._formField?.inputElement;
+      !t || t.localName !== "input" || (this._formField?.clear(), t.focus(), t.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), t.dispatchEvent(new Event("change", { bubbles: !0 })));
     }
     willUpdate(t) {
-      super.willUpdate(t), this.setAttribute("aria-label", p[this._language.current]);
+      super.willUpdate(t), this.setAttribute("aria-label", f[this._language.current]);
     }
     renderTemplate() {
-      return u` <sbb-icon name="cross-small"></sbb-icon> `;
+      return d` <sbb-icon name="cross-small"></sbb-icon> `;
     }
   }, o = r, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(e[Symbol.metadata] ?? null) : void 0;
-    l(null, b = { value: o }, n, { kind: "class", name: o.name, metadata: t }, null, a), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = k, d(o, a), o;
+    s(null, b = { value: o }, i, { kind: "class", name: o.name, metadata: t }, null, a), o = b.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = p, n(o, a), o;
 })();
 export {
-  I as SbbFormFieldClearElement
+  F as SbbFormFieldClearElement
 };