@sbb-esta/lyne-elements-dev 5.10.0-dev.1791284739 → 5.10.0-dev.1791362600

package/form-field.pure.js

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

package/lean-off-brand-theme.css

@@ -1362,28 +1362,136 @@ summary {
   --sbb-error-icon-size: 1.0625rem;
   --sbb-error-font-size: var(--sbb-text-font-size-xs);
   --sbb-form-field-background-color: var(--sbb-background-color-1);
+  --sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
+  --sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
+  --sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
+  --sbb-form-field-background-color-required-highlight: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
+  --sbb-form-field-background-color-required-highlight: light-dark(
+    color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
+    color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
+  );
+  --sbb-form-field-background-color-required-highlight-negative: color-mix(
+    in srgb,
+    var(--sbb-color-peach) 10%,
+    var(--sbb-background-color-1-negative)
+  );
   --sbb-form-field-border-color: var(--sbb-border-color-5);
-  --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-color: var(--sbb-color-3);
+  --sbb-form-field-border-color-disabled: var(--sbb-color-graphite);
+  --sbb-form-field-border-color-disabled: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-border-color-focus: var(--sbb-border-color-3);
+  --sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
+  --sbb-form-field-border-color-error: var(--sbb-color-error);
+  --sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
+  --sbb-form-field-border-color-readonly: var(--sbb-color-graphite);
+  --sbb-form-field-border-color-readonly: light-dark(
+    var(--sbb-color-graphite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
   --sbb-form-field-label-color: var(--sbb-color-metal);
   --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-label-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-label-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-label-color-readonly: var(--sbb-color-granite);
+  --sbb-form-field-label-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
+  --sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
   --sbb-form-field-prefix-color: var(--sbb-color-metal);
   --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
+  --sbb-form-field-prefix-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-prefix-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-prefix-color-focus: var(--sbb-color-3);
+  --sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-prefix-color-readonly: var(--sbb-color-granite);
+  --sbb-form-field-prefix-color-readonly: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
+  --sbb-form-field-border-style: solid;
+  --sbb-form-field-border-style-disabled: dashed;
+  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
+  --sbb-form-field-border-width: var(--sbb-border-width-1x);
+  --sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
+  --sbb-form-field-color: var(--sbb-color-3);
+  --sbb-form-field-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-min-width: 9.375rem;
+  --sbb-form-field-max-width: 18.75rem;
   --sbb-form-field-text-color: var(--sbb-color-3);
+  --sbb-form-field-text-color-disabled: var(--sbb-color-3);
+  --sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
+  --sbb-form-field-text-color-error: var(--sbb-color-error);
+  --sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
   --sbb-form-field-arrow-color: var(--sbb-color-3);
+  --sbb-form-field-arrow-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-arrow-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-storm)
+  );
+  --sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
+  --sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
+  --sbb-form-field-placeholder-color-disabled: var(--sbb-color-granite);
+  --sbb-form-field-placeholder-color-disabled: light-dark(
+    var(--sbb-color-granite),
+    var(--sbb-color-smoke)
+  );
   --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
   --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
-  --sbb-form-field-min-height: var(--sbb-size-element-xs);
-  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);
-  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);
-  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);
-  --_sbb-form-field-label-to-input-overlapping: 0.625rem;
-  --_sbb-form-field-floating-label-transform: 0.34375rem;
-  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;
-  --_sbb-form-field-input-margin-block-end: -0.125rem;
+  --sbb-form-field-min-height-s: var(--sbb-size-element-xs);
+  --sbb-form-field-min-height-m: var(--sbb-size-element-m);
+  --sbb-form-field-min-height-l: var(--sbb-size-element-l);
+  --sbb-form-field-min-height: var(--sbb-form-field-min-height-s);
+  --sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
+  --sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
+  --sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
+  --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-s);
+  --sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
+  --sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
+  --sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
+  --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-s);
+  --sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
+  --sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
+  --sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
+  --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-s);
+  --_sbb-form-field-label-to-input-overlapping-s: 0.625rem;
+  --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
+  --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);
+  --_sbb-form-field-floating-label-transform-s: 0.34375rem;
+  --_sbb-form-field-floating-label-transform-m: 0.53125rem;
+  --_sbb-form-field-floating-label-transform-l: 0.53125rem;
+  --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);
+  --_sbb-form-field-spacer-margin-block-end-s: -0.53125rem;
+  --_sbb-form-field-spacer-margin-block-end-m: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+  );
+  --_sbb-form-field-spacer-margin-block-end-l: calc(
+    -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+  );
+  --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);
+  --_sbb-form-field-input-margin-block-end-s: -0.125rem;
+  --_sbb-form-field-input-margin-block-end-m: 0;
+  --_sbb-form-field-input-margin-block-end-l: 0;
+  --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-s);
   --sbb-header-action-color: var(--sbb-color-1);
   --sbb-header-action-background-color: transparent;
   --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
@@ -2021,6 +2129,23 @@ summary {
     --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
+    --sbb-form-field-border-color-disabled: GrayText;
+    --sbb-form-field-border-color-disabled-negative: GrayText;
+    --sbb-form-field-border-color-negative: ButtonBorder;
+    --sbb-form-field-border-color-focus: Highlight;
+    --sbb-form-field-border-color-focus-negative: Highlight;
+    --sbb-form-field-border-color-error: LinkText;
+    --sbb-form-field-border-color-error-negative: LinkText;
+    --sbb-form-field-label-color-disabled: GrayText;
+    --sbb-form-field-label-color-disabled-negative: GrayText;
+    --sbb-form-field-prefix-color-disabled: GrayText;
+    --sbb-form-field-prefix-color-disabled-negative: GrayText;
+    --sbb-form-field-prefix-color-focus: Highlight;
+    --sbb-form-field-prefix-color-focus-negative: Highlight;
+    --sbb-form-field-text-color-disabled: GrayText;
+    --sbb-form-field-text-color-disabled-negative: GrayText;
+    --sbb-form-field-text-color-error: LinkText;
+    --sbb-form-field-text-color-error-negative: LinkText;
     --sbb-header-action-border-color: CanvasText;
     --sbb-header-action-color: LinkText;
     --sbb-header-action-active-border-width: 0;
@@ -2143,9 +2268,22 @@ summary {
       )
       var(--_sbb-chip-group-margin-block-start-default-large);
     --sbb-flip-card-min-height: 20rem;
-    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;
-    --_sbb-form-field-floating-label-transform: 0.3125rem;
-    --_sbb-form-field-spacer-margin-block-end: -0.5rem;
+    --_sbb-form-field-label-to-input-overlapping-s: 0.6875rem;
+    --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
+    --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);
+    --_sbb-form-field-floating-label-transform-s: 0.3125rem;
+    --_sbb-form-field-floating-label-transform-m: 0.65625rem;
+    --_sbb-form-field-floating-label-transform-l: 0.65625rem;
+    --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);
+    --_sbb-form-field-spacer-margin-block-end-s: -0.5rem;
+    --_sbb-form-field-spacer-margin-block-end-m: calc(
+      -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
+    );
+    --_sbb-form-field-spacer-margin-block-end-l: calc(
+      -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
+    );
+    --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);
     --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
     --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
     --sbb-menu-max-width: 20rem;
@@ -3041,10 +3179,8 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
   }
 }
 :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  -webkit-text-fill-color: var(--sbb-color-granite);
-  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  color: var(--sbb-form-field-placeholder-color-disabled);
+  -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
 }
 :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
   vertical-align: middle;
@@ -3123,42 +3259,27 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
-  --sbb-form-field-border-color: var(--sbb-color-error);
-  --sbb-form-field-text-color: var(--sbb-color-error);
+  --sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
+  --sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
 }
 :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
 :is(:state(interacted),[state--interacted]):invalid,
 .ng-touched.ng-invalid,
 .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid])[negative] {
-  --sbb-form-field-border-color: var(--sbb-color-red85);
-  --sbb-form-field-text-color: var(--sbb-color-red85);
-}
-@media (forced-colors: active) {
-  :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
-  :is(:state(interacted),[state--interacted]):invalid,
-  .ng-touched.ng-invalid,
-  .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
-    --sbb-form-field-border-color: LinkText !important;
-    --sbb-form-field-text-color: LinkText !important;
-  }
+  --sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
+  --sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
 }
 
 :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
-  --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
-  --sbb-form-field-background-color: light-dark(
-    color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
-    color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
-  );
+  --sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
 }
 :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
 :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
-  --sbb-form-field-background-color: color-mix(
-    in srgb,
-    var(--sbb-color-peach) 10%,
-    var(--sbb-background-color-1-negative)
+  --sbb-form-field-background-color: var(
+    --sbb-form-field-background-color-required-highlight-negative
   );
 }
 
@@ -3493,7 +3614,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
 }
 .sbb-sort-header:not(.sbb-sort-header-disabled) {
-  cursor: pointer;
+  cursor: var(--sbb-cursor-pointer);
 }
 .sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
   color: var(--sbb-table-sort-header-hover-color);
@@ -3511,7 +3632,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
   outline: 0;
 }
 .sbb-sort-header-disabled .sbb-sort-header-container {
-  cursor: default;
+  cursor: var(--sbb-cursor-default);
 }
 .sbb-table-align-center .sbb-sort-header-container {
   text-align: center;
@@ -3823,9 +3944,10 @@ sbb-toggle:has(:focus-visible) {
 }
 
 .sbb-input {
+  --_sbb-input-border-width: var(--sbb-form-field-border-width);
   display: inline-block;
-  min-width: 9.375rem;
-  width: min(18.75rem, 100%);
+  min-width: var(--sbb-form-field-min-width);
+  width: min(var(--sbb-form-field-max-width), 100%);
   min-height: var(--sbb-form-field-min-height);
   max-height: var(--sbb-form-field-max-height);
   appearance: none;
@@ -3838,9 +3960,9 @@ sbb-toggle:has(:focus-visible) {
   color: var(--sbb-form-field-text-color);
   -webkit-text-fill-color: var(--sbb-form-field-text-color);
   opacity: 1;
-  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
+  border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
   border-radius: var(--sbb-form-field-border-radius);
-  padding-inline: var(--sbb-form-field-padding-inline);
+  padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
   font-size: var(--sbb-form-field-input-text-size) !important;
   font-weight: normal;
   letter-spacing: var(--sbb-letter-spacing-text) !important;
@@ -3854,62 +3976,39 @@ sbb-toggle:has(:focus-visible) {
 }
 
 .sbb-input:read-only, .sbb-input:disabled {
-  --sbb-form-field-background-color: var(--sbb-background-color-3);
-  --sbb-form-field-border-color: var(--sbb-color-graphite);
-  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
+  background-color: var(--sbb-form-field-background-color-disabled);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:read-only, .sbb-input:disabled {
-    --sbb-form-field-border-color: ButtonBorder;
-  }
-}
 .sbb-input:disabled {
-  --sbb-form-field-border-style: dashed;
+  border-style: var(--sbb-form-field-border-style-disabled);
+  color: var(--sbb-form-field-text-color-disabled);
+  border-color: var(--sbb-form-field-border-color-disabled);
 }
 
 .sbb-input:disabled::placeholder {
-  color: var(--sbb-color-granite);
-  color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
-  -webkit-text-fill-color: var(--sbb-color-granite);
-  -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+  color: var(--sbb-form-field-placeholder-color-disabled);
+  -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
 }
 
-@media (forced-colors: active) {
-  .sbb-input: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;
-  }
+.sbb-input:read-only {
+  border-color: var(--sbb-form-field-border-color-readonly);
 }
+
 .sbb-input:focus-visible {
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
   outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));
 }
 
 .sbb-input:focus {
-  --sbb-form-field-border-color: var(--sbb-border-color-3);
-  --sbb-form-field-border-width: var(--sbb-border-width-2x);
+  --_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
+  border-color: var(--sbb-form-field-border-color-focus);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:focus {
-    --sbb-form-field-border-color: Highlight;
-    --sbb-form-field-prefix-color: Highlight;
-  }
-}
 .sbb-input:user-invalid {
-  --sbb-form-field-border-color: var(--sbb-color-error);
-  --sbb-form-field-text-color: var(--sbb-color-error);
+  border-color: var(--sbb-form-field-border-color-error);
+  color: var(--sbb-form-field-text-color-error);
 }
 
-@media (forced-colors: active) {
-  .sbb-input:user-invalid {
-    --sbb-form-field-border-color: LinkText !important;
-    --sbb-form-field-text-color: LinkText !important;
-  }
-}
 .sbb-figure {
   display: grid;
   grid-template-rows: auto;