@sbb-esta/lyne-elements-dev 5.8.0-dev.1788874314 → 5.8.0-dev.1788940504

package/development/form-field.pure.js

@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
 
 //#endregion
 //#region src/elements/form-field/form-field/form-field.scss?inline
-var form_field_default = "@charset \"UTF-8\";\n:host {\n  --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n  --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n  --sbb-form-field-select-inline-padding-end: calc(\n    var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n  );\n  --sbb-form-field-label-size: calc(\n    var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-text-line-height: calc(\n    var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-margin-block-start: calc(\n    (\n        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n            --sbb-form-field-text-line-height\n          ) +\n          var(--_sbb-form-field-label-to-input-overlapping)\n      ) /\n      2\n  );\n  --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n  --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  display: inline-block;\n  color: var(--sbb-form-field-color);\n  font-weight: normal;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n  min-width: 9.375rem;\n  width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n  color: var(--sbb-color-3-negative);\n  --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n  --sbb-form-field-text-color: var(--sbb-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n  :host([negative]) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host([size=s]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-xs);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n  --_sbb-form-field-input-margin-block-end: -0.125rem;\n  --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n  --_sbb-form-field-floating-label-transform: 0.34375rem;\n  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n  :host([size=s]) {\n    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n    --_sbb-form-field-floating-label-transform: 0.3125rem;\n    --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n  }\n}\n\n:host([size=m]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-m);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-l);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n  --_sbb-form-field-input-margin-block-end: 0;\n  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n  --_sbb-form-field-floating-label-transform: 0.53125rem;\n  --_sbb-form-field-spacer-margin-block-end: calc(\n    -1 * var(--_sbb-form-field-label-to-input-overlapping)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host(:is([size=m], [size=l])) {\n    --_sbb-form-field-floating-label-transform: 0.65625rem;\n  }\n}\n\n:host([error-space=reserve]) {\n  --sbb-form-field-hint-min-height: calc(\n    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n  );\n  --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3);\n  --sbb-form-field-border-color: var(--sbb-color-graphite);\n  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n  --sbb-form-field-arrow-color: var(--sbb-color-granite);\n  --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n  --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-label-color: GrayText !important;\n    --sbb-form-field-prefix-color: GrayText !important;\n    --sbb-form-field-text-color: GrayText !important;\n    --sbb-form-field-border-color: GrayText !important;\n  }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-text-color: var(--sbb-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3);\n  --sbb-form-field-prefix-color: var(--sbb-color-3);\n  --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n  --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(focus),[state--focus])) {\n    --sbb-form-field-border-color: Highlight;\n    --sbb-form-field-prefix-color: Highlight;\n  }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n  --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n  --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n  :host([floating-label]) {\n    --sbb-select-placeholder-color: Canvas;\n  }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n  --sbb-form-field-label-size: 0rem;\n  --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n  --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-form-field__wrapper {\n  display: flex;\n  flex: 1;\n  gap: var(--sbb-form-field-gap);\n  padding-inline: var(--sbb-form-field-padding-inline);\n  border-radius: var(--sbb-form-field-border-radius);\n  min-height: var(--sbb-form-field-min-height);\n  max-height: var(--sbb-form-field-max-height);\n  background-color: var(--sbb-form-field-background-color);\n  position: relative;\n}\n.sbb-form-field__wrapper::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0;\n  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n  border-radius: var(--sbb-form-field-border-radius);\n  pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n  :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n    border-color: transparent;\n  }\n  .sbb-form-field__wrapper::after {\n    position: absolute;\n    border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n    inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n    inset-block-end: 0;\n    z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n  }\n  :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n    content: \"\";\n  }\n}\n\n::slotted(*[slot=prefix]) {\n  color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n  display: flex;\n  min-width: var(--sbb-icon-svg-width);\n  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n  display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n  display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n  display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n  padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n  ::slotted(*[slot=suffix]) {\n    color: var(--sbb-form-field-prefix-color);\n  }\n}\n.sbb-form-field__select-input-icon {\n  position: absolute;\n  top: 50%;\n  translate: 0 -50%;\n  display: none;\n  position: absolute;\n  inset-inline-end: 0;\n  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n  pointer-events: none;\n  color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n  display: inline-block;\n}\n\n.sbb-form-field__input-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  position: relative;\n  margin-block-start: var(--sbb-form-field-margin-block-start);\n  min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n  display: flex;\n  height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n  margin-block-end: var(--_sbb-form-field-spacer-margin-block-end);\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.sbb-form-field__label {\n  display: flex;\n  max-width: 100%;\n  cursor: var(--sbb-cursor-default);\n  position: absolute;\n  inset-block-start: 0;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-label-text-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n: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 {\n  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n  transform-origin: 0 0;\n  pointer-events: none;\n  backface-visibility: hidden;\n  will-change: transform, font-size;\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n  font-size: var(--sbb-form-field-input-text-size);\n  transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n    z-index: 1;\n  }\n}\n\n.sbb-form-field__label-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n  display: flex;\n  flex: 1;\n  align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n  margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n  display: flex;\n  min-height: var(--sbb-form-field-hint-min-height);\n  flex-direction: column;\n  margin-inline-start: var(--sbb-form-field-padding-inline);\n  margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
+var form_field_default = "@charset \"UTF-8\";\n:host {\n  --sbb-form-field-hint-divider-width: var(--sbb-spacing-fixed-1x);\n  --sbb-form-field-hint-padding-block-start: var(--sbb-form-field-hint-divider-width);\n  --sbb-form-field-select-inline-padding-end: calc(\n    var(--sbb-icon-svg-width) + var(--sbb-form-field-gap)\n  );\n  --sbb-form-field-label-size: calc(\n    var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-text-line-height: calc(\n    var(--sbb-form-field-input-text-size) * var(--sbb-typo-line-height-text)\n  );\n  --sbb-form-field-margin-block-start: calc(\n    (\n        var(--sbb-form-field-min-height) - var(--sbb-form-field-label-size) - var(\n            --sbb-form-field-text-line-height\n          ) +\n          var(--_sbb-form-field-label-to-input-overlapping)\n      ) /\n      2\n  );\n  --sbb-icon-svg-width: var(--sbb-form-field-icon-size);\n  --sbb-icon-svg-height: var(--sbb-form-field-icon-size);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  display: inline-block;\n  color: var(--sbb-form-field-color);\n  font-weight: normal;\n  line-height: var(--sbb-typo-line-height-text);\n}\n\n:host(:where(:not([width=collapse]))) {\n  min-width: 9.375rem;\n  width: min(18.75rem, 100%);\n}\n\n:host([negative]) {\n  color: var(--sbb-color-3-negative);\n  --sbb-form-field-background-color: var(--sbb-background-color-1-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n  --sbb-form-field-text-color: var(--sbb-color-3-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n  --sbb-form-field-arrow-color: var(--sbb-color-3-negative);\n}\n@media (forced-colors: active) {\n  :host([negative]) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host([size=s]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-xs);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-2x);\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-s);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xxs);\n  --_sbb-form-field-input-margin-block-end: -0.125rem;\n  --_sbb-form-field-label-to-input-overlapping: 0.625rem;\n  --_sbb-form-field-floating-label-transform: 0.34375rem;\n  --_sbb-form-field-spacer-margin-block-end: -0.53125rem;\n}\n@media (min-width: calc(64rem)) {\n  :host([size=s]) {\n    --_sbb-form-field-label-to-input-overlapping: 0.6875rem;\n    --_sbb-form-field-floating-label-transform: 0.3125rem;\n    --_sbb-form-field-spacer-margin-block-end: -0.5rem;\n  }\n}\n\n:host([size=s]:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) {\n  --_sbb-form-field-spacer-margin-block-end-textarea: var(--sbb-form-field-textarea-s-spacer);\n}\n\n:host([size=m]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-m);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);\n}\n\n:host([size=l]) {\n  --sbb-form-field-min-height: var(--sbb-size-element-l);\n  --sbb-form-field-padding-inline: var(--sbb-spacing-responsive-xxxs);\n}\n\n:host(:is([size=m], [size=l])) {\n  --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);\n  --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);\n  --_sbb-form-field-input-margin-block-end: 0;\n  --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);\n  --_sbb-form-field-floating-label-transform: 0.53125rem;\n  --_sbb-form-field-spacer-margin-block-end: calc(\n    -1 * var(--_sbb-form-field-label-to-input-overlapping)\n  );\n}\n@media (min-width: calc(64rem)) {\n  :host(:is([size=m], [size=l])) {\n    --_sbb-form-field-floating-label-transform: 0.65625rem;\n  }\n}\n\n:host([error-space=reserve]) {\n  --sbb-form-field-hint-min-height: calc(\n    var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs)\n  );\n  --sbb-form-field-hint-padding-block-start-override: var(--sbb-form-field-hint-divider-width);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3);\n  --sbb-form-field-border-color: var(--sbb-color-graphite);\n  --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));\n  --sbb-form-field-arrow-color: var(--sbb-color-granite);\n  --sbb-form-field-arrow-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-border-color: ButtonBorder;\n  }\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-background-color: var(--sbb-background-color-3-negative);\n  --sbb-form-field-border-color: var(--sbb-border-color-5);\n  --sbb-form-field-arrow-color: var(--sbb-border-color-5);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n  --sbb-form-field-border-style: dashed;\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(disabled),[state--disabled]))) {\n    --sbb-form-field-label-color: GrayText !important;\n    --sbb-form-field-prefix-color: GrayText !important;\n    --sbb-form-field-text-color: GrayText !important;\n    --sbb-form-field-border-color: GrayText !important;\n  }\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n  --sbb-form-field-text-color: var(--sbb-color-5);\n  --sbb-form-field-label-color: var(--sbb-color-5);\n  --sbb-form-field-prefix-color: var(--sbb-color-5);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly])):not([negative])) {\n  --sbb-form-field-label-color: var(--sbb-color-granite);\n  --sbb-form-field-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));\n  --sbb-form-field-prefix-color: var(--sbb-color-granite);\n  --sbb-form-field-prefix-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3);\n  --sbb-form-field-prefix-color: var(--sbb-color-3);\n  --sbb-form-field-border-width: var(--sbb-border-width-2x);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n  --sbb-form-field-border-color: var(--sbb-border-color-3-negative);\n  --sbb-form-field-prefix-color: var(--sbb-color-3-negative);\n}\n\n@media (forced-colors: active) {\n  :host(:is(:state(focus),[state--focus])) {\n    --sbb-form-field-border-color: Highlight;\n    --sbb-form-field-prefix-color: Highlight;\n  }\n}\n\n:host(:not(:where(:is(:state(has-error),[state--has-error]), :is(:state(has-hint),[state--has-hint])))) {\n  --sbb-form-field-hint-padding-block-start: 0;\n}\n\n:host([floating-label]) {\n  --sbb-select-placeholder-color: transparent;\n}\n@media (forced-colors: active) {\n  :host([floating-label]) {\n    --sbb-select-placeholder-color: Canvas;\n  }\n}\n\n:host(:is(:not(:is(:state(slotted-label),[state--slotted-label])), [hidden-label])) {\n  --sbb-form-field-label-size: 0rem;\n  --_sbb-form-field-label-to-input-overlapping: 0rem;\n}\n\n:host(:where(:is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) {\n  --sbb-form-field-overflow: visible;\n}\n\n.sbb-form-field__space-wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.sbb-form-field__space-wrapper::before {\n  content: \"​\";\n  user-select: none;\n  width: 0;\n  height: 0;\n}\n\n.sbb-form-field__wrapper {\n  display: flex;\n  flex: 1;\n  gap: var(--sbb-form-field-gap);\n  padding-inline: var(--sbb-form-field-padding-inline);\n  border-radius: var(--sbb-form-field-border-radius);\n  min-height: var(--sbb-form-field-min-height);\n  max-height: var(--sbb-form-field-max-height);\n  background-color: var(--sbb-form-field-background-color);\n  position: relative;\n}\n.sbb-form-field__wrapper::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset: 0;\n  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n  border-radius: var(--sbb-form-field-border-radius);\n  pointer-events: none;\n}\n:host(:where(:is(:state(focus),[state--focus]):is(:state(focus-origin-keyboard),[state--focus-origin-keyboard]))) .sbb-form-field__wrapper {\n  outline-offset: var(--sbb-focus-outline-offset);\n  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);\n  outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));\n}\n@media (forced-colors: none) {\n  :host(:is([borderless], :is(:state(input-element-sbb-slider),[state--input-element-sbb-slider]))) .sbb-form-field__wrapper::before {\n    border-color: transparent;\n  }\n  .sbb-form-field__wrapper::after {\n    position: absolute;\n    border-block-end: var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);\n    inset-inline: var(--sbb-form-field-border-block-end-inset-inline, var(--sbb-form-field-padding-inline));\n    inset-block-end: 0;\n    z-index: var(--sbb-form-field-focus-underline-z-index, initial);\n  }\n  :host(:where(:is(:state(focus),[state--focus]), :is(:state(disabled),[state--disabled]))[borderless]) .sbb-form-field__wrapper::after {\n    content: \"\";\n  }\n}\n\n::slotted(*[slot=prefix]) {\n  color: var(--sbb-form-field-prefix-color);\n}\n\n::slotted(*[slot=prefix]),\n::slotted(*[slot=suffix]) {\n  display: flex;\n  min-width: var(--sbb-icon-svg-width);\n  margin-block-start: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n:host(:where(:is(:state(empty),[state--empty]), :is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-clear) {\n  display: none;\n}\n\n:host(:is(:state(has-error),[state--has-error])) slot[name=hint] {\n  display: none;\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]), :is(:state(readonly),[state--readonly]))) ::slotted(sbb-form-field-text-counter) {\n  display: none;\n}\n\n::slotted(sbb-datepicker-toggle) {\n  padding-block-end: calc((var(--sbb-form-field-min-height) - var(--sbb-size-icon-ui-small)) / 2);\n}\n\n@media (forced-colors: active) {\n  ::slotted(*[slot=suffix]) {\n    color: var(--sbb-form-field-prefix-color);\n  }\n}\n.sbb-form-field__select-input-icon {\n  position: absolute;\n  top: 50%;\n  translate: 0 -50%;\n  display: none;\n  position: absolute;\n  inset-inline-end: 0;\n  margin-block-start: calc(-1 * var(--sbb-form-field-margin-block-start) / 2);\n  pointer-events: none;\n  color: var(--sbb-form-field-arrow-color);\n}\n:host(:is(:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(explicit-input-element-select),[state--explicit-input-element-select]))) .sbb-form-field__select-input-icon {\n  display: inline-block;\n}\n\n.sbb-form-field__input-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  position: relative;\n  margin-block-start: var(--sbb-form-field-margin-block-start);\n  min-width: 0;\n}\n\n.sbb-form-field__label-spacer {\n  display: flex;\n  height: calc(var(--sbb-form-field-label-text-size) * var(--sbb-typo-line-height-text));\n  margin-block-end: calc(var(--_sbb-form-field-spacer-margin-block-end) + var(--_sbb-form-field-spacer-margin-block-end-textarea, 0px));\n}\n\n:host(:not(:is(:state(slotted-label),[state--slotted-label]))) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  display: none;\n}\n:host([hidden-label]) :is(.sbb-form-field__label, .sbb-form-field__label-spacer) {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.sbb-form-field__label {\n  display: flex;\n  max-width: 100%;\n  cursor: var(--sbb-cursor-default);\n  position: absolute;\n  inset-block-start: 0;\n  color: var(--sbb-form-field-label-color);\n  font-size: var(--sbb-form-field-label-text-size);\n  letter-spacing: var(--sbb-letter-spacing-text);\n}\n: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 {\n  padding-inline-end: var(--sbb-form-field-select-inline-padding-end);\n}\n:host([floating-label]) .sbb-form-field__label {\n  transform-origin: 0 0;\n  pointer-events: none;\n  backface-visibility: hidden;\n  will-change: transform, font-size;\n  transition-duration: var(--sbb-disable-animation-duration, var(--sbb-animation-duration-2x));\n  transition-timing-function: var(--sbb-animation-easing);\n  transition-property: transform, font-size;\n}\n:host([floating-label]:is(:not(:where(:is(:state(focus),[state--focus])):not(:where(:is(:state(input-element-sbb-select),[state--input-element-sbb-select]))),\n:where(:is(:state(has-popup-open),[state--has-popup-open]))),\n:where(:is(:state(readonly),[state--readonly]))):where(:is(:state(empty),[state--empty]))) .sbb-form-field__label {\n  font-size: var(--sbb-form-field-input-text-size);\n  transform: translateY(var(--_sbb-form-field-floating-label-transform));\n}\n@media (forced-colors: active) {\n  :host(:where(:is(:state(input-element-textarea),[state--input-element-textarea]))) .sbb-form-field__label {\n    z-index: 1;\n  }\n}\n\n.sbb-form-field__label-ellipsis {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.sbb-form-field__input {\n  display: flex;\n  flex: 1;\n  align-items: start;\n}\n:host(:is(:is(:state(input-element-input),[state--input-element-input]),\n:is(:state(input-element-select),[state--input-element-select]),\n:is(:state(input-element-sbb-select),[state--input-element-sbb-select]),\n:is(:state(input-element-sbb-date-input),[state--input-element-sbb-date-input]),\n:is(:state(input-element-sbb-time-input),[state--input-element-sbb-time-input]))) .sbb-form-field__input {\n  margin-block-end: var(--_sbb-form-field-input-margin-block-end);\n}\n\n.sbb-form-field__hint {\n  display: flex;\n  min-height: var(--sbb-form-field-hint-min-height);\n  flex-direction: column;\n  margin-inline-start: var(--sbb-form-field-padding-inline);\n  margin-block-start: var(--sbb-form-field-hint-padding-block-start-override, var(--sbb-form-field-hint-padding-block-start));\n}\n";
 
 //#endregion
 //#region src/elements/form-field/form-field/form-field.component.ts

package/form-field/_form-field.global.scss

@@ -18,6 +18,7 @@ $theme: 'standard' !default;
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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: #{sbb.theme-pattern-select(
       (
         'standard': var(--sbb-size-element-m),

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=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:var(--_sbb-form-field-spacer-margin-block-end);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]))){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}
 `;let C=0;const w=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">
         ${``}

package/lean-off-brand-theme.css

@@ -1373,6 +1373,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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);

package/lean-safety-theme.css

@@ -1393,6 +1393,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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);

package/lean-theme.css

@@ -1393,6 +1393,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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);

package/off-brand-theme.css

@@ -1373,6 +1373,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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-m);
   --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.8.0-dev.1788874314",
+  "version": "5.8.0-dev.1788940504",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/e0cd632b0b04d213956fa80609b92da64499af76"
+    "https://github.com/sbb-design-systems/lyne-components/commit/2e3be1f11f87ad6cb47ae8e3f5857ed363f26104"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1393,6 +1393,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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-m);
   --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);

package/standard-theme.css

@@ -1393,6 +1393,7 @@ summary {
   --sbb-form-field-arrow-color: var(--sbb-color-3);
   --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-m);
   --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
   --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);