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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/core/styles/features/form-field.scss +19 -33
  2. package/development/form-field.pure.js +2 -2
  3. package/form-field/_form-field.global.scss +162 -43
  4. package/form-field.pure.js +2 -2
  5. package/lean-off-brand-theme.css +180 -81
  6. package/lean-safety-theme.css +180 -81
  7. package/lean-theme.css +180 -81
  8. package/off-brand-theme.css +180 -81
  9. package/package.json +2 -2
  10. package/safety-theme.css +180 -81
  11. package/standard-theme.css +180 -81
package/core/styles/features/form-field.scss CHANGED
@@ -1,10 +1,11 @@
1
- @use '../mixins/functions';
2
1
  @use '../mixins/typo';
3
2
 
4
3
  .sbb-input {
4
+ --_sbb-input-border-width: var(--sbb-form-field-border-width);
5
+
5
6
  display: inline-block;
6
- min-width: #{functions.px-to-rem-build(150)};
7
- width: min(#{functions.px-to-rem-build(300)}, 100%);
7
+ min-width: var(--sbb-form-field-min-width);
8
+ width: min(var(--sbb-form-field-max-width), 100%);
8
9
  min-height: var(--sbb-form-field-min-height);
9
10
  max-height: var(--sbb-form-field-max-height);
10
11
  appearance: none;
@@ -19,10 +20,10 @@
19
20
  // Fill color needed for Safari
20
21
  -webkit-text-fill-color: var(--sbb-form-field-text-color);
21
22
  opacity: 1;
22
- border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
23
+ border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style)
23
24
  var(--sbb-form-field-border-color);
24
25
  border-radius: var(--sbb-form-field-border-radius);
25
- padding-inline: var(--sbb-form-field-padding-inline);
26
+ padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
26
27
 
27
28
  // Using `!important` keeps the utility consistent with the existing form-field
28
29
  // rules when normalize/reset styles are loaded by the consumer.
@@ -37,28 +38,22 @@
37
38
 
38
39
  &:read-only,
39
40
  &:disabled {
40
- --sbb-form-field-background-color: var(--sbb-background-color-3);
41
- --sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
42
-
43
- @media (forced-colors: active) {
44
- --sbb-form-field-border-color: ButtonBorder;
45
- }
41
+ background-color: var(--sbb-form-field-background-color-disabled);
46
42
  }
47
43
 
48
44
  &:disabled {
49
- --sbb-form-field-border-style: dashed;
45
+ border-style: var(--sbb-form-field-border-style-disabled);
46
+ color: var(--sbb-form-field-text-color-disabled);
47
+ border-color: var(--sbb-form-field-border-color-disabled);
50
48
 
51
49
  &::placeholder {
52
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
53
- -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
50
+ color: var(--sbb-form-field-placeholder-color-disabled);
51
+ -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
54
52
  }
53
+ }
55
54
 
56
- @media (forced-colors: active) {
57
- --sbb-form-field-label-color: GrayText !important;
58
- --sbb-form-field-prefix-color: GrayText !important;
59
- --sbb-form-field-text-color: GrayText !important;
60
- --sbb-form-field-border-color: GrayText !important;
61
- }
55
+ &:read-only {
56
+ border-color: var(--sbb-form-field-border-color-readonly);
62
57
  }
63
58
 
64
59
  &:focus-visible {
@@ -68,22 +63,13 @@
68
63
  }
69
64
 
70
65
  &:focus {
71
- --sbb-form-field-border-color: var(--sbb-border-color-3);
72
- --sbb-form-field-border-width: var(--sbb-border-width-2x);
66
+ --_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
73
67
 
74
- @media (forced-colors: active) {
75
- --sbb-form-field-border-color: Highlight;
76
- --sbb-form-field-prefix-color: Highlight;
77
- }
68
+ border-color: var(--sbb-form-field-border-color-focus);
78
69
  }
79
70
 
80
71
  &:user-invalid {
81
- --sbb-form-field-border-color: var(--sbb-color-error);
82
- --sbb-form-field-text-color: var(--sbb-color-error);
83
-
84
- @media (forced-colors: active) {
85
- --sbb-form-field-border-color: LinkText !important;
86
- --sbb-form-field-text-color: LinkText !important;
87
- }
72
+ border-color: var(--sbb-form-field-border-color-error);
73
+ color: var(--sbb-form-field-text-color-error);
88
74
  }
89
75
  }
package/development/form-field.pure.js CHANGED
@@ -56,7 +56,7 @@ var SbbErrorElement = class extends SbbNegativeMixin(SbbElement) {
56
56
 
57
57
  //#endregion
58
58
  //#region src/elements/form-field/form-field/form-field.scss?inline
59
- 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";
59
+ 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: var(--sbb-form-field-min-width);\n width: min(var(--sbb-form-field-max-width), 100%);\n}\n\n:host([negative]) {\n color: var(--sbb-form-field-color-negative);\n --sbb-form-field-background-color: var(--sbb-form-field-background-color-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-negative);\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-negative);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-negative);\n --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-negative);\n}\n\n:host([size=s]) {\n --sbb-form-field-min-height: var(--sbb-form-field-min-height-s);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-s);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-s);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-s);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-s);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-s);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-s);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-s);\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-form-field-min-height-m);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-m);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-m);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-m);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-m);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);\n}\n\n:host([size=l]) {\n --sbb-form-field-min-height: var(--sbb-form-field-min-height-l);\n --sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-l);\n --sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-l);\n --sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-l);\n --_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-l);\n --_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-l);\n --_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-l);\n --_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-l);\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-form-field-background-color-disabled);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-background-color: var(--sbb-form-field-background-color-disabled-negative);\n --sbb-form-field-arrow-color: var(--sbb-form-field-arrow-color-disabled-negative);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled);\n --sbb-form-field-border-style: var(--sbb-form-field-border-style-disabled);\n}\n\n:host(:where(:is(:state(disabled),[state--disabled]))[negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-disabled-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-disabled-negative);\n --sbb-form-field-text-color: var(--sbb-form-field-text-color-disabled-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-disabled-negative);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly);\n}\n\n:host(:where(:is(:state(readonly),[state--readonly]))[negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-readonly-negative);\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-readonly-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-readonly-negative);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))) {\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus);\n --sbb-form-field-border-width: var(--sbb-form-field-border-width-focus);\n}\n\n:host(:where(:is(:state(focus),[state--focus]))[negative]) {\n --sbb-form-field-prefix-color: var(--sbb-form-field-prefix-color-focus-negative);\n --sbb-form-field-border-color: var(--sbb-form-field-border-color-focus-negative);\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";
60
60
 
61
61
  //#endregion
62
62
  //#region src/elements/form-field/form-field/form-field.component.ts
@@ -775,7 +775,7 @@ var SbbFormFieldClearElement = class extends SbbNegativeMixin(SbbButtonBaseEleme
775
775
 
776
776
  //#endregion
777
777
  //#region src/elements/form-field/hint/hint.scss?inline
778
- var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-form-field-label-color: var(--sbb-color-5);\n}\n";
778
+ var hint_default = ":host {\n --sbb-form-field-hint-font-size: var(--sbb-text-font-size-xxs);\n display: inline-block;\n color: var(--sbb-form-field-label-color);\n font-size: var(--sbb-form-field-hint-font-size);\n letter-spacing: var(--sbb-letter-spacing-text);\n line-height: var(--sbb-typo-line-height-text);\n}\n\n:host([negative]) {\n --sbb-form-field-label-color: var(--sbb-form-field-label-color-negative);\n}\n";
779
779
 
780
780
  //#endregion
781
781
  //#region src/elements/form-field/hint/hint.component.ts
package/form-field/_form-field.global.scss CHANGED
@@ -7,71 +7,170 @@ $theme: 'standard' !default;
7
7
  --sbb-error-icon-size: #{sbb.px-to-rem-build(17)};
8
8
  --sbb-error-font-size: var(--sbb-text-font-size-xs);
9
9
  --sbb-form-field-background-color: var(--sbb-background-color-1);
10
+ --sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
11
+ --sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
12
+ --sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
13
+ --sbb-form-field-background-color-required-highlight: light-dark(
14
+ color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
15
+ color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
16
+ );
17
+ --sbb-form-field-background-color-required-highlight-negative: color-mix(
18
+ in srgb,
19
+ var(--sbb-color-peach) 10%,
20
+ var(--sbb-background-color-1-negative)
21
+ );
10
22
  --sbb-form-field-border-color: var(--sbb-border-color-5);
23
+ --sbb-form-field-border-color-disabled: light-dark(
24
+ var(--sbb-color-graphite),
25
+ var(--sbb-color-smoke)
26
+ );
27
+ --sbb-form-field-border-color-negative: var(--sbb-border-color-5);
28
+ --sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
29
+ --sbb-form-field-border-color-focus: var(--sbb-border-color-3);
30
+ --sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
31
+ --sbb-form-field-border-color-error: var(--sbb-color-error);
32
+ --sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
33
+ --sbb-form-field-border-color-readonly: light-dark(
34
+ var(--sbb-color-graphite),
35
+ var(--sbb-color-smoke)
36
+ );
37
+ --sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
38
+ --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
39
+ --sbb-form-field-label-color-disabled: light-dark(
40
+ var(--sbb-color-granite),
41
+ var(--sbb-color-smoke)
42
+ );
43
+ --sbb-form-field-label-color-negative: var(--sbb-color-5);
44
+ --sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
45
+ --sbb-form-field-label-color-readonly: light-dark(
46
+ var(--sbb-color-granite),
47
+ var(--sbb-color-smoke)
48
+ );
49
+ --sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
50
+ --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
51
+ --sbb-form-field-prefix-color-disabled: light-dark(
52
+ var(--sbb-color-granite),
53
+ var(--sbb-color-storm)
54
+ );
55
+ --sbb-form-field-prefix-color-negative: var(--sbb-color-5);
56
+ --sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
57
+ --sbb-form-field-prefix-color-focus: var(--sbb-color-3);
58
+ --sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
59
+ --sbb-form-field-prefix-color-readonly: light-dark(
60
+ var(--sbb-color-granite),
61
+ var(--sbb-color-storm)
62
+ );
63
+ --sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
11
64
  --sbb-form-field-border-style: solid;
65
+ --sbb-form-field-border-style-disabled: dashed;
12
66
  --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
13
67
  --sbb-form-field-border-width: var(--sbb-border-width-1x);
68
+ --sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
14
69
  --sbb-form-field-color: var(--sbb-color-3);
15
- --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
16
- --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
70
+ --sbb-form-field-color-negative: var(--sbb-color-3-negative);
71
+ --sbb-form-field-min-width: #{sbb.px-to-rem-build(150)};
72
+ --sbb-form-field-max-width: #{sbb.px-to-rem-build(300)};
17
73
  --sbb-form-field-text-color: var(--sbb-color-3);
74
+ --sbb-form-field-text-color-disabled: var(--sbb-color-3);
75
+ --sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
76
+ --sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
77
+ --sbb-form-field-text-color-error: var(--sbb-color-error);
78
+ --sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
18
79
  --sbb-form-field-arrow-color: var(--sbb-color-3);
80
+ --sbb-form-field-arrow-color-disabled: light-dark(
81
+ var(--sbb-color-granite),
82
+ var(--sbb-color-storm)
83
+ );
84
+ --sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
85
+ --sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
86
+ --sbb-form-field-placeholder-color-disabled: light-dark(
87
+ var(--sbb-color-granite),
88
+ var(--sbb-color-smoke)
89
+ );
19
90
  --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
20
91
  --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
21
92
  --sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
93
+ --sbb-form-field-min-height-s: var(--sbb-size-element-xs);
94
+ --sbb-form-field-min-height-m: var(--sbb-size-element-m);
95
+ --sbb-form-field-min-height-l: var(--sbb-size-element-l);
22
96
  --sbb-form-field-min-height: #{sbb.theme-pattern-select(
23
97
  (
24
- 'standard': var(--sbb-size-element-m),
25
- 'lean': var(--sbb-size-element-xs),
98
+ 'standard': var(--sbb-form-field-min-height-m),
99
+ 'lean': var(--sbb-form-field-min-height-s),
26
100
  ),
27
101
  $theme
28
102
  )};
103
+ --sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
104
+ --sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
105
+ --sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
29
106
  --sbb-form-field-padding-inline: #{sbb.theme-pattern-select(
30
107
  (
31
- 'standard': var(--sbb-spacing-fixed-3x),
32
- 'lean': var(--sbb-spacing-fixed-2x),
108
+ 'standard': var(--sbb-form-field-padding-inline-m),
109
+ 'lean': var(--sbb-form-field-padding-inline-s),
33
110
  ),
34
111
  $theme
35
112
  )};
113
+ --sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
114
+ --sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
115
+ --sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
36
116
  --sbb-form-field-input-text-size: #{sbb.theme-pattern-select(
37
117
  (
38
- 'standard': var(--sbb-text-font-size-m),
39
- 'lean': var(--sbb-text-font-size-s),
118
+ 'standard': var(--sbb-form-field-input-text-size-m),
119
+ 'lean': var(--sbb-form-field-input-text-size-s),
40
120
  ),
41
121
  $theme
42
122
  )};
123
+ --sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
124
+ --sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
125
+ --sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
43
126
  --sbb-form-field-label-text-size: #{sbb.theme-pattern-select(
44
127
  (
45
- 'standard': var(--sbb-text-font-size-xs),
46
- 'lean': var(--sbb-text-font-size-xxs),
128
+ 'standard': var(--sbb-form-field-label-text-size-m),
129
+ 'lean': var(--sbb-form-field-label-text-size-s),
47
130
  ),
48
131
  $theme
49
132
  )};
133
+ --_sbb-form-field-label-to-input-overlapping-s: #{sbb.px-to-rem-build(10)};
134
+ --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
135
+ --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
50
136
  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
51
137
  (
52
- 'standard': var(--sbb-spacing-fixed-1x),
53
- 'lean': #{sbb.px-to-rem-build(10)},
138
+ 'standard': var(--_sbb-form-field-label-to-input-overlapping-m),
139
+ 'lean': var(--_sbb-form-field-label-to-input-overlapping-s),
54
140
  ),
55
141
  $theme
56
142
  )};
143
+ --_sbb-form-field-floating-label-transform-s: #{sbb.px-to-rem-build(5.5)};
144
+ --_sbb-form-field-floating-label-transform-m: #{sbb.px-to-rem-build(8.5)};
145
+ --_sbb-form-field-floating-label-transform-l: #{sbb.px-to-rem-build(8.5)};
57
146
  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
58
147
  (
59
- 'standard': #{sbb.px-to-rem-build(8.5)},
60
- 'lean': #{sbb.px-to-rem-build(5.5)},
148
+ 'standard': var(--_sbb-form-field-floating-label-transform-m),
149
+ 'lean': var(--_sbb-form-field-floating-label-transform-s),
61
150
  ),
62
151
  $theme
63
152
  )};
153
+ --_sbb-form-field-spacer-margin-block-end-s: #{sbb.px-to-rem-build(-8.5)};
154
+ --_sbb-form-field-spacer-margin-block-end-m: calc(
155
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
156
+ );
157
+ --_sbb-form-field-spacer-margin-block-end-l: calc(
158
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
159
+ );
64
160
  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
65
161
  (
66
- 'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
67
- 'lean': #{sbb.px-to-rem-build(-8.5)},
162
+ 'standard': var(--_sbb-form-field-spacer-margin-block-end-m),
163
+ 'lean': var(--_sbb-form-field-spacer-margin-block-end-s),
68
164
  ),
69
165
  $theme
70
166
  )};
167
+ --_sbb-form-field-input-margin-block-end-s: #{sbb.px-to-rem-build(-2)};
168
+ --_sbb-form-field-input-margin-block-end-m: 0;
169
+ --_sbb-form-field-input-margin-block-end-l: 0;
71
170
  --_sbb-form-field-input-margin-block-end: #{sbb.theme-pattern-select(
72
171
  (
73
- 'standard': 0,
74
- 'lean': #{sbb.px-to-rem-build(-2)},
172
+ 'standard': var(--_sbb-form-field-input-margin-block-end-m),
173
+ 'lean': var(--_sbb-form-field-input-margin-block-end-s),
75
174
  ),
76
175
  $theme
77
176
  )};
@@ -79,27 +178,57 @@ $theme: 'standard' !default;
79
178
 
80
179
  @mixin forced-colors {
81
180
  --sbb-form-field-border-color: ButtonBorder;
181
+ --sbb-form-field-border-color-disabled: GrayText;
182
+ --sbb-form-field-border-color-disabled-negative: GrayText;
183
+ --sbb-form-field-border-color-negative: ButtonBorder;
184
+ --sbb-form-field-border-color-focus: Highlight;
185
+ --sbb-form-field-border-color-focus-negative: Highlight;
186
+ --sbb-form-field-border-color-error: LinkText;
187
+ --sbb-form-field-border-color-error-negative: LinkText;
188
+ --sbb-form-field-label-color-disabled: GrayText;
189
+ --sbb-form-field-label-color-disabled-negative: GrayText;
190
+ --sbb-form-field-prefix-color-disabled: GrayText;
191
+ --sbb-form-field-prefix-color-disabled-negative: GrayText;
192
+ --sbb-form-field-prefix-color-focus: Highlight;
193
+ --sbb-form-field-prefix-color-focus-negative: Highlight;
194
+ --sbb-form-field-text-color-disabled: GrayText;
195
+ --sbb-form-field-text-color-disabled-negative: GrayText;
196
+ --sbb-form-field-text-color-error: LinkText;
197
+ --sbb-form-field-text-color-error-negative: LinkText;
82
198
  }
83
199
 
84
200
  @mixin breakpoint-large {
201
+ --_sbb-form-field-label-to-input-overlapping-s: #{sbb.px-to-rem-build(11)};
202
+ --_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
203
+ --_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
85
204
  --_sbb-form-field-label-to-input-overlapping: #{sbb.theme-pattern-select(
86
205
  (
87
- 'standard': var(--sbb-spacing-fixed-1x),
88
- 'lean': #{sbb.px-to-rem-build(11)},
206
+ 'standard': var(--_sbb-form-field-label-to-input-overlapping-m),
207
+ 'lean': var(--_sbb-form-field-label-to-input-overlapping-s),
89
208
  ),
90
209
  $theme
91
210
  )};
211
+ --_sbb-form-field-floating-label-transform-s: #{sbb.px-to-rem-build(5)};
212
+ --_sbb-form-field-floating-label-transform-m: #{sbb.px-to-rem-build(10.5)};
213
+ --_sbb-form-field-floating-label-transform-l: #{sbb.px-to-rem-build(10.5)};
92
214
  --_sbb-form-field-floating-label-transform: #{sbb.theme-pattern-select(
93
215
  (
94
- 'standard': #{sbb.px-to-rem-build(10.5)},
95
- 'lean': #{sbb.px-to-rem-build(5)},
216
+ 'standard': var(--_sbb-form-field-floating-label-transform-m),
217
+ 'lean': var(--_sbb-form-field-floating-label-transform-s),
96
218
  ),
97
219
  $theme
98
220
  )};
221
+ --_sbb-form-field-spacer-margin-block-end-s: #{sbb.px-to-rem-build(-8)};
222
+ --_sbb-form-field-spacer-margin-block-end-m: calc(
223
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-m)
224
+ );
225
+ --_sbb-form-field-spacer-margin-block-end-l: calc(
226
+ -1 * var(--_sbb-form-field-label-to-input-overlapping-l)
227
+ );
99
228
  --_sbb-form-field-spacer-margin-block-end: #{sbb.theme-pattern-select(
100
229
  (
101
- 'standard': calc(-1 * var(--_sbb-form-field-label-to-input-overlapping)),
102
- 'lean': #{sbb.px-to-rem-build(-8)},
230
+ 'standard': var(--_sbb-form-field-spacer-margin-block-end-m),
231
+ 'lean': var(--_sbb-form-field-spacer-margin-block-end-s),
103
232
  ),
104
233
  $theme
105
234
  )};
@@ -157,8 +286,8 @@ $theme: 'standard' !default;
157
286
 
158
287
  // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
159
288
  &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
160
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
161
- -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
289
+ color: var(--sbb-form-field-placeholder-color-disabled);
290
+ -webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
162
291
  }
163
292
 
164
293
  // Fix positioning issue for select which occurs in Safari
@@ -228,17 +357,12 @@ $theme: 'standard' !default;
228
357
  ),
229
358
  :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)),
230
359
  &:state(interacted):state(invalid) {
231
- --sbb-form-field-border-color: var(--sbb-color-error);
232
- --sbb-form-field-text-color: var(--sbb-color-error);
360
+ --sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
361
+ --sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
233
362
 
234
363
  &[negative] {
235
- --sbb-form-field-border-color: var(--sbb-color-red85);
236
- --sbb-form-field-text-color: var(--sbb-color-red85);
237
- }
238
-
239
- @media (forced-colors: active) {
240
- --sbb-form-field-border-color: LinkText !important;
241
- --sbb-form-field-text-color: LinkText !important;
364
+ --sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
365
+ --sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
242
366
  }
243
367
  }
244
368
  }
@@ -250,16 +374,11 @@ $theme: 'standard' !default;
250
374
  :root.sbb-form-field-required-highlight
251
375
  &:has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]),
252
376
  &.sbb-form-field-required-highlight {
253
- --sbb-form-field-background-color: light-dark(
254
- color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
255
- color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
256
- );
377
+ --sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
257
378
 
258
379
  &[negative] {
259
- --sbb-form-field-background-color: color-mix(
260
- in srgb,
261
- var(--sbb-color-peach) 10%,
262
- var(--sbb-background-color-1-negative)
380
+ --sbb-form-field-background-color: var(
381
+ --sbb-form-field-background-color-required-highlight-negative
263
382
  );
264
383
  }
265
384
  }
package/form-field.pure.js CHANGED
@@ -20,7 +20,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
20
20
  <span class="error-content">
21
21
  <slot></slot>
22
22
  </span>
23
- `}},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}
23
+ `}},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}
24
24
  `;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`
25
25
  <div class="sbb-form-field__space-wrapper">
26
26
  ${``}
@@ -49,7 +49,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbButtonBaseElem
49
49
  <slot name="error" @slotchange=${this._onSlotErrorChange}></slot>
50
50
  </div>
51
51
  </div>
52
- `}}})();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)}
52
+ `}}})();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)}
53
53
  `,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>
54
54
  ${u[this._language.current]}</slot
55
55
  >`}}})();export{x as SbbErrorElement,O as SbbFormFieldClearElement,E as SbbFormFieldControlEvent,D as SbbFormFieldElement,M as SbbFormFieldTextCounterElement,A as SbbHintElement};