@utrecht/component-library-css 9.0.11 → 9.0.12

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.
@@ -96,10 +96,10 @@
96
96
  }
97
97
 
98
98
  .utrecht-accordion__panel {
99
- border-top: none;
100
99
  border-color: var(--utrecht-accordion-panel-border-color);
101
100
  border-style: solid;
102
101
  border-width: var(--utrecht-accordion-panel-border-width);
102
+ border-top: none;
103
103
  padding-bottom: var(--utrecht-accordion-panel-padding-block-end);
104
104
  padding-top: var(--utrecht-accordion-panel-padding-block-start);
105
105
  padding-right: var(--utrecht-accordion-panel-padding-inline-end);
@@ -658,10 +658,10 @@
658
658
  .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
659
659
  .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
660
660
  height: 0;
661
- border-bottom-width: var(--utrecht-breadcrumb-nav-min-block-size);
662
- border-top-width: var(--utrecht-breadcrumb-nav-min-block-size);
663
661
  border-color: transparent;
664
662
  border-style: solid;
663
+ border-bottom-width: var(--utrecht-breadcrumb-nav-min-block-size);
664
+ border-top-width: var(--utrecht-breadcrumb-nav-min-block-size);
665
665
  content: " ";
666
666
  display: block;
667
667
  width: 0;
@@ -927,12 +927,12 @@
927
927
  align-items: center;
928
928
  background-color: var(--_utrecht-button-background-color);
929
929
  height: fit-content;
930
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
931
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
932
930
  border-color: var(--_utrecht-button-border-color);
933
931
  border-radius: var(--utrecht-button-border-radius);
934
932
  border-style: solid;
935
933
  border-width: var(--_utrecht-button-border-width);
934
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
935
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
936
936
  box-sizing: border-box;
937
937
  color: var(--_utrecht-button-color);
938
938
  column-gap: var(--utrecht-button-column-gap);
@@ -1298,12 +1298,12 @@
1298
1298
  align-items: center;
1299
1299
  background-color: var(--_utrecht-button-background-color);
1300
1300
  height: fit-content;
1301
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
1302
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
1303
1301
  border-color: var(--_utrecht-button-border-color);
1304
1302
  border-radius: var(--utrecht-button-border-radius);
1305
1303
  border-style: solid;
1306
1304
  border-width: var(--_utrecht-button-border-width);
1305
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
1306
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
1307
1307
  box-sizing: border-box;
1308
1308
  color: var(--_utrecht-button-color);
1309
1309
  column-gap: var(--utrecht-button-column-gap);
@@ -2143,6 +2143,127 @@
2143
2143
  border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
2144
2144
  color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
2145
2145
  }
2146
+ .utrecht-customizable-text-input {
2147
+ display: inline-block;
2148
+ max-width: min(100%, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
2149
+ position: relative;
2150
+ }
2151
+
2152
+ .utrecht-customizable-text-input__inner {
2153
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
2154
+ --_utrecht-textbox-border-block-end-width: var(
2155
+ --utrecht-textbox-border-bottom-width,
2156
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
2157
+ );
2158
+ border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
2159
+ border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
2160
+ border-style: solid;
2161
+ border-width: var(--_utrecht-textbox-border-width);
2162
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
2163
+ box-sizing: border-box;
2164
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
2165
+ color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
2166
+ cursor: text;
2167
+ display: flex;
2168
+ min-height: calc(var(--utrecht-pointer-target-min-size, 44px) - var(--_utrecht-textbox-border-width) - var(--_utrecht-textbox-border-block-end-width));
2169
+ }
2170
+ .utrecht-customizable-text-input__inner:has(input[prince-xml-ignore-pseudo-class-focus-visible], .utrecht-textbox--focus-visible) {
2171
+ --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
2172
+ var(--utrecht-focus-inverse-outline-color, transparent);
2173
+ box-shadow: var(--_utrecht-focus-ring-box-shadow);
2174
+ outline-color: var(--utrecht-focus-outline-color, revert);
2175
+ outline-offset: var(--utrecht-focus-outline-offset, revert);
2176
+ outline-style: var(--utrecht-focus-outline-style, revert);
2177
+ outline-width: var(--utrecht-focus-outline-width, revert);
2178
+ z-index: 1;
2179
+ background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2180
+ border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2181
+ color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2182
+ }
2183
+ .utrecht-customizable-text-input__inner:has(input[aria-invalid=true], .utrecht-textbox--invalid) {
2184
+ --_utrecht-textbox-border-width: var(
2185
+ --utrecht-textbox-invalid-border-width,
2186
+ var(
2187
+ --utrecht-form-control-invalid-border-width,
2188
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
2189
+ )
2190
+ );
2191
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2192
+ border-width: var(--_utrecht-textbox-border-width);
2193
+ border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
2194
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2195
+ color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2196
+ }
2197
+ .utrecht-customizable-text-input__inner:has(input:read-only, .utrecht-textbox--read-only) {
2198
+ background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2199
+ border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2200
+ color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2201
+ }
2202
+ .utrecht-customizable-text-input__inner:has(input:disabled, .utrecht-textbox--disabled) {
2203
+ background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
2204
+ border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
2205
+ color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
2206
+ cursor: var(--utrecht-action-disabled-cursor, not-allowed);
2207
+ }
2208
+
2209
+ .utrecht-customizable-text-input__wrap-input {
2210
+ display: flex;
2211
+ min-width: 0;
2212
+ order: 2;
2213
+ }
2214
+
2215
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox,
2216
+ .utrecht-customizable-text-input__slot {
2217
+ margin-bottom: calc(var(--_utrecht-textbox-border-block-end-width) * -1);
2218
+ margin-top: calc(var(--_utrecht-textbox-border-width) * -1);
2219
+ }
2220
+
2221
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox {
2222
+ width: clamp(var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px)), var(--_utrecht-textbox-max-inline-size, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
2223
+ max-width: none;
2224
+ min-width: 0;
2225
+ padding-bottom: calc(var(--_utrecht-textbox-padding-block-end) + var(--_utrecht-textbox-border-block-end-width));
2226
+ padding-top: calc(var(--_utrecht-textbox-padding-block-start) + var(--_utrecht-textbox-border-width));
2227
+ }
2228
+ .utrecht-customizable-text-input__wrap-input .utrecht-textbox, .utrecht-customizable-text-input__wrap-input .utrecht-textbox:focus, .utrecht-customizable-text-input__wrap-input .utrecht-textbox[prince-xml-ignore-pseudo-class-focus-visible], .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--focus-visible, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--invalid, .utrecht-customizable-text-input__wrap-input .utrecht-textbox.utrecht-textbox--disabled {
2229
+ background-color: transparent;
2230
+ border-width: 0;
2231
+ box-shadow: none;
2232
+ color: currentColor;
2233
+ outline: none;
2234
+ }
2235
+
2236
+ .utrecht-customizable-text-input__wrap-input .utrecht-combobox {
2237
+ display: flex;
2238
+ position: static;
2239
+ }
2240
+
2241
+ .utrecht-customizable-text-input__slot {
2242
+ --utrecht-icon-size: var(--utrecht-textbox-icon-size, 1em);
2243
+ align-items: center;
2244
+ display: flex;
2245
+ justify-content: center;
2246
+ white-space: nowrap;
2247
+ }
2248
+
2249
+ .utrecht-customizable-text-input__slot:is(label),
2250
+ .utrecht-customizable-text-input__slot--label {
2251
+ cursor: inherit;
2252
+ }
2253
+
2254
+ .utrecht-customizable-text-input__slot--start {
2255
+ order: 1;
2256
+ }
2257
+ .utrecht-customizable-text-input__slot--start.utrecht-customizable-text-input__action {
2258
+ margin-left: calc(var(--_utrecht-textbox-border-width) * -1);
2259
+ }
2260
+
2261
+ .utrecht-customizable-text-input__slot--end {
2262
+ order: 3;
2263
+ }
2264
+ .utrecht-customizable-text-input__slot--end.utrecht-customizable-text-input__action {
2265
+ margin-right: calc(var(--_utrecht-textbox-border-width) * -1);
2266
+ }
2146
2267
  .utrecht-badge-data,
2147
2268
  .utrecht-data-badge {
2148
2269
  background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
@@ -2542,7 +2663,7 @@
2542
2663
  .utrecht-form-fieldset--html-fieldset,
2543
2664
  .utrecht-form-fieldset__fieldset--html-fieldset {
2544
2665
  all: revert;
2545
- border: 0;
2666
+ border-width: 0;
2546
2667
  margin-right: 0;
2547
2668
  margin-left: 0;
2548
2669
  min-width: 0;
@@ -2721,7 +2842,7 @@
2721
2842
 
2722
2843
  .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
2723
2844
  height: 1px !important;
2724
- border: 0 !important;
2845
+ border-width: 0 !important;
2725
2846
  clip-path: inset(50%) !important;
2726
2847
  width: 1px !important;
2727
2848
  margin: -1px !important;
@@ -3371,7 +3492,6 @@
3371
3492
  break-after: avoid;
3372
3493
  break-inside: avoid-column;
3373
3494
  break-inside: avoid;
3374
- break-after: avoid-page;
3375
3495
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3376
3496
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3377
3497
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -3388,7 +3508,6 @@
3388
3508
  break-after: avoid;
3389
3509
  break-inside: avoid-column;
3390
3510
  break-inside: avoid;
3391
- break-after: avoid-page;
3392
3511
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3393
3512
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3394
3513
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -3405,7 +3524,6 @@
3405
3524
  break-after: avoid;
3406
3525
  break-inside: avoid-column;
3407
3526
  break-inside: avoid;
3408
- break-after: avoid-page;
3409
3527
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3410
3528
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3411
3529
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -3422,7 +3540,6 @@
3422
3540
  break-after: avoid;
3423
3541
  break-inside: avoid-column;
3424
3542
  break-inside: avoid;
3425
- break-after: avoid-page;
3426
3543
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3427
3544
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3428
3545
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -3439,7 +3556,6 @@
3439
3556
  break-after: avoid;
3440
3557
  break-inside: avoid-column;
3441
3558
  break-inside: avoid;
3442
- break-after: avoid-page;
3443
3559
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3444
3560
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3445
3561
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -3456,7 +3572,6 @@
3456
3572
  break-after: avoid;
3457
3573
  break-inside: avoid-column;
3458
3574
  break-inside: avoid;
3459
- break-after: avoid-page;
3460
3575
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3461
3576
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3462
3577
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -7194,7 +7309,7 @@
7194
7309
  -webkit-font-smoothing: auto !important;
7195
7310
  -moz-osx-font-smoothing: auto !important;
7196
7311
  background-color: var(--utrecht-root-background-color, Canvas);
7197
- border: 0;
7312
+ border-width: 0;
7198
7313
  box-sizing: border-box;
7199
7314
  color: var(--utrecht-root-color, CanvasText);
7200
7315
  font-family: var(--utrecht-root-font-family);
@@ -7335,14 +7450,14 @@
7335
7450
  color: var(--utrecht-search-bar-list-item-is-selected-color);
7336
7451
  }
7337
7452
  .utrecht-select {
7338
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7453
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
7454
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
7455
+ border-style: solid;
7339
7456
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
7340
7457
  border-top-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7341
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
7342
7458
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7343
7459
  border-left-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7344
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
7345
- border-style: solid;
7460
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7346
7461
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
7347
7462
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
7348
7463
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -7400,10 +7515,10 @@
7400
7515
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
7401
7516
  )
7402
7517
  );
7403
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7518
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7404
7519
  border-width: var(--_utrecht-select-border-width);
7405
7520
  border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
7406
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
7521
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
7407
7522
  }
7408
7523
  .utrecht-select--html-select {
7409
7524
  }
@@ -7848,7 +7963,9 @@
7848
7963
 
7849
7964
  .utrecht-table__header--hidden {
7850
7965
  height: 1px;
7851
- border: 0 solid silver;
7966
+ border-color: silver;
7967
+ border-style: solid;
7968
+ border-width: 0;
7852
7969
  clip-path: inset(50%);
7853
7970
  width: 1px;
7854
7971
  outline: 1px solid red;
@@ -7905,13 +8022,13 @@
7905
8022
  font-variant-numeric: lining-nums tabular-nums;
7906
8023
  }
7907
8024
  .utrecht-textarea {
7908
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
7909
- height: initial;
7910
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
7911
- border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
7912
8025
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
7913
8026
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
7914
8027
  border-style: solid;
8028
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
8029
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8030
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8031
+ height: initial;
7915
8032
  box-sizing: border-box;
7916
8033
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
7917
8034
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -7938,10 +8055,10 @@
7938
8055
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
7939
8056
  )
7940
8057
  );
7941
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8058
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
7942
8059
  border-width: var(--_utrecht-textarea-border-width);
7943
8060
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
7944
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8061
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
7945
8062
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
7946
8063
  }
7947
8064
 
@@ -8006,10 +8123,10 @@
8006
8123
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
8007
8124
  )
8008
8125
  );
8009
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8126
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8010
8127
  border-width: var(--_utrecht-textarea-border-width);
8011
8128
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
8012
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
8129
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
8013
8130
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8014
8131
  }
8015
8132
  .utrecht-textarea--html-textarea:read-only {
@@ -8037,27 +8154,40 @@
8037
8154
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
8038
8155
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
8039
8156
  );
8040
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
8041
- height: initial;
8042
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
8043
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
8157
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8158
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
8159
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
8160
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
8161
+ --_utrecht-textbox-border-block-end-width: var(
8162
+ --utrecht-textbox-border-bottom-width,
8163
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8164
+ );
8044
8165
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
8045
8166
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
8046
8167
  border-style: solid;
8168
+ border-width: var(--_utrecht-textbox-border-width);
8169
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
8047
8170
  box-sizing: border-box;
8171
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
8048
8172
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8173
+ --_utrecht-textbox-padding-block-end: var(
8174
+ --utrecht-textbox-padding-block-end,
8175
+ var(--utrecht-form-control-padding-block-end, 0)
8176
+ );
8177
+ --_utrecht-textbox-padding-block-start: var(
8178
+ --utrecht-textbox-padding-block-start,
8179
+ var(--utrecht-form-control-padding-block-start, 0)
8180
+ );
8181
+ height: initial;
8049
8182
  display: block;
8050
8183
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8051
8184
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8052
8185
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8053
8186
  width: 100%;
8054
8187
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
8055
- min-height: var(--utrecht-pointer-target-min-size, 44px);
8056
- min-width: var(--utrecht-pointer-target-min-size, 44px);
8057
- max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8058
8188
  overflow: hidden;
8059
- padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
8060
- padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
8189
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
8190
+ padding-top: var(--_utrecht-textbox-padding-block-start);
8061
8191
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
8062
8192
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
8063
8193
  white-space: nowrap;
@@ -8071,10 +8201,10 @@
8071
8201
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8072
8202
  )
8073
8203
  );
8074
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8204
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8075
8205
  border-width: var(--_utrecht-textbox-border-width);
8076
8206
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
8077
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8207
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8078
8208
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8079
8209
  }
8080
8210
 
@@ -8195,10 +8325,10 @@
8195
8325
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8196
8326
  )
8197
8327
  );
8198
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8328
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8199
8329
  border-width: var(--_utrecht-textbox-border-width);
8200
8330
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
8201
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
8331
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
8202
8332
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8203
8333
  }
8204
8334
  .utrecht-textbox--html-input:read-only {
@@ -8408,10 +8538,13 @@
8408
8538
  --utrecht-icon-color: currentColor;
8409
8539
  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
8410
8540
  background-color: var(--utrecht-toptask-link-background-color);
8541
+ border-radius: var(--utrecht-toptask-link-border-radius);
8411
8542
  color: var(--utrecht-toptask-link-color);
8412
8543
  display: flex;
8413
8544
  flex-direction: column;
8545
+ font-family: var(--utrecht-toptask-link-font-family);
8414
8546
  font-size: var(--utrecht-toptask-link-font-size);
8547
+ font-weight: var(--utrecht-toptask-link-font-weight);
8415
8548
  line-height: var(--utrecht-toptask-link-line-height);
8416
8549
  max-width: var(--utrecht-toptask-link-max-inline-size);
8417
8550
  min-height: var(--utrecht-toptask-link-min-block-size);
@@ -8873,12 +9006,12 @@
8873
9006
  align-items: center;
8874
9007
  background-color: var(--_utrecht-button-background-color);
8875
9008
  height: fit-content;
8876
- border-bottom-color: var(--_utrecht-button-border-bottom-color);
8877
- border-bottom-width: var(--_utrecht-button-border-block-end-width);
8878
9009
  border-color: var(--_utrecht-button-border-color);
8879
9010
  border-radius: var(--utrecht-button-border-radius);
8880
9011
  border-style: solid;
8881
9012
  border-width: var(--_utrecht-button-border-width);
9013
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
9014
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
8882
9015
  box-sizing: border-box;
8883
9016
  color: var(--_utrecht-button-color);
8884
9017
  column-gap: var(--utrecht-button-column-gap);
@@ -9009,7 +9142,7 @@
9009
9142
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
9010
9143
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
9011
9144
  all: revert;
9012
- border: 0;
9145
+ border-width: 0;
9013
9146
  margin-right: 0;
9014
9147
  margin-left: 0;
9015
9148
  min-width: 0;
@@ -9096,7 +9229,6 @@
9096
9229
  break-after: avoid;
9097
9230
  break-inside: avoid-column;
9098
9231
  break-inside: avoid;
9099
- break-after: avoid-page;
9100
9232
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9101
9233
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9102
9234
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -9110,7 +9242,6 @@
9110
9242
  break-after: avoid;
9111
9243
  break-inside: avoid-column;
9112
9244
  break-inside: avoid;
9113
- break-after: avoid-page;
9114
9245
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9115
9246
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9116
9247
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -9124,7 +9255,6 @@
9124
9255
  break-after: avoid;
9125
9256
  break-inside: avoid-column;
9126
9257
  break-inside: avoid;
9127
- break-after: avoid-page;
9128
9258
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9129
9259
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9130
9260
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -9138,7 +9268,6 @@
9138
9268
  break-after: avoid;
9139
9269
  break-inside: avoid-column;
9140
9270
  break-inside: avoid;
9141
- break-after: avoid-page;
9142
9271
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9143
9272
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9144
9273
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -9152,7 +9281,6 @@
9152
9281
  break-after: avoid;
9153
9282
  break-inside: avoid-column;
9154
9283
  break-inside: avoid;
9155
- break-after: avoid-page;
9156
9284
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9157
9285
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9158
9286
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -9166,7 +9294,6 @@
9166
9294
  break-after: avoid;
9167
9295
  break-inside: avoid-column;
9168
9296
  break-inside: avoid;
9169
- break-after: avoid-page;
9170
9297
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9171
9298
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9172
9299
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -9461,14 +9588,14 @@
9461
9588
  );
9462
9589
  }
9463
9590
  .utrecht-html select {
9464
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9591
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
9592
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
9593
+ border-style: solid;
9465
9594
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
9466
9595
  border-top-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9467
- border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
9468
9596
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9469
9597
  border-left-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9470
- border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
9471
- border-style: solid;
9598
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9472
9599
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
9473
9600
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
9474
9601
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -9517,10 +9644,10 @@
9517
9644
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
9518
9645
  )
9519
9646
  );
9520
- background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
9647
+ border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
9521
9648
  border-width: var(--_utrecht-select-border-width);
9522
9649
  border-bottom-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)))));
9523
- border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
9650
+ background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
9524
9651
  }
9525
9652
  .utrecht-html hr {
9526
9653
  border-color: var(--utrecht-separator-color);
@@ -9639,13 +9766,13 @@
9639
9766
  color: var(--utrecht-table-row-alternate-odd-color);
9640
9767
  }
9641
9768
  .utrecht-html textarea {
9642
- background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
9643
- height: initial;
9644
- border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
9645
- border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
9646
9769
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
9647
9770
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
9648
9771
  border-style: solid;
9772
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
9773
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
9774
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
9775
+ height: initial;
9649
9776
  box-sizing: border-box;
9650
9777
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
9651
9778
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -9686,10 +9813,10 @@
9686
9813
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
9687
9814
  )
9688
9815
  );
9689
- background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
9816
+ border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
9690
9817
  border-width: var(--_utrecht-textarea-border-width);
9691
9818
  border-bottom-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
9692
- border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
9819
+ background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
9693
9820
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
9694
9821
  }
9695
9822
  .utrecht-html textarea:read-only {
@@ -9729,27 +9856,40 @@
9729
9856
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
9730
9857
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
9731
9858
  );
9732
- background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
9733
- height: initial;
9734
- border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
9735
- border-bottom-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
9859
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9860
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
9861
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
9862
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
9863
+ --_utrecht-textbox-border-block-end-width: var(
9864
+ --utrecht-textbox-border-bottom-width,
9865
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9866
+ );
9736
9867
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
9737
9868
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
9738
9869
  border-style: solid;
9870
+ border-width: var(--_utrecht-textbox-border-width);
9871
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
9739
9872
  box-sizing: border-box;
9873
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
9740
9874
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
9875
+ --_utrecht-textbox-padding-block-end: var(
9876
+ --utrecht-textbox-padding-block-end,
9877
+ var(--utrecht-form-control-padding-block-end, 0)
9878
+ );
9879
+ --_utrecht-textbox-padding-block-start: var(
9880
+ --utrecht-textbox-padding-block-start,
9881
+ var(--utrecht-form-control-padding-block-start, 0)
9882
+ );
9883
+ height: initial;
9741
9884
  display: block;
9742
9885
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
9743
9886
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
9744
9887
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
9745
9888
  width: 100%;
9746
9889
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
9747
- min-height: var(--utrecht-pointer-target-min-size, 44px);
9748
- min-width: var(--utrecht-pointer-target-min-size, 44px);
9749
- max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9750
9890
  overflow: hidden;
9751
- padding-bottom: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
9752
- padding-top: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
9891
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
9892
+ padding-top: var(--_utrecht-textbox-padding-block-start);
9753
9893
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
9754
9894
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
9755
9895
  white-space: nowrap;
@@ -9825,10 +9965,10 @@
9825
9965
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9826
9966
  )
9827
9967
  );
9828
- background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
9968
+ border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
9829
9969
  border-width: var(--_utrecht-textbox-border-width);
9830
9970
  border-bottom-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
9831
- border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
9971
+ background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
9832
9972
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
9833
9973
  }
9834
9974
  .utrecht-html input:not([type]):read-only,