@utrecht/component-library-css 9.0.11 → 9.0.13

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;
@@ -2759,6 +2880,54 @@
2759
2880
  justify-content: var(--_utrecht-grid-justify-content, initial);
2760
2881
  container-type: inline-size;
2761
2882
  }
2883
+ .utrecht-grid--cols-1 {
2884
+ --_utrecht-grid-columns-total: 1;
2885
+ --_utrecht-grid-columns-default: 1;
2886
+ }
2887
+ .utrecht-grid--cols-2 {
2888
+ --_utrecht-grid-columns-total: 2;
2889
+ --_utrecht-grid-columns-default: 1;
2890
+ }
2891
+ .utrecht-grid--cols-3 {
2892
+ --_utrecht-grid-columns-total: 3;
2893
+ --_utrecht-grid-columns-default: 1;
2894
+ }
2895
+ .utrecht-grid--cols-4 {
2896
+ --_utrecht-grid-columns-total: 4;
2897
+ --_utrecht-grid-columns-default: 1;
2898
+ }
2899
+ .utrecht-grid--cols-5 {
2900
+ --_utrecht-grid-columns-total: 5;
2901
+ --_utrecht-grid-columns-default: 1;
2902
+ }
2903
+ .utrecht-grid--cols-6 {
2904
+ --_utrecht-grid-columns-total: 6;
2905
+ --_utrecht-grid-columns-default: 1;
2906
+ }
2907
+ .utrecht-grid--cols-7 {
2908
+ --_utrecht-grid-columns-total: 7;
2909
+ --_utrecht-grid-columns-default: 1;
2910
+ }
2911
+ .utrecht-grid--cols-8 {
2912
+ --_utrecht-grid-columns-total: 8;
2913
+ --_utrecht-grid-columns-default: 1;
2914
+ }
2915
+ .utrecht-grid--cols-9 {
2916
+ --_utrecht-grid-columns-total: 9;
2917
+ --_utrecht-grid-columns-default: 1;
2918
+ }
2919
+ .utrecht-grid--cols-10 {
2920
+ --_utrecht-grid-columns-total: 10;
2921
+ --_utrecht-grid-columns-default: 1;
2922
+ }
2923
+ .utrecht-grid--cols-11 {
2924
+ --_utrecht-grid-columns-total: 11;
2925
+ --_utrecht-grid-columns-default: 1;
2926
+ }
2927
+ .utrecht-grid--cols-12 {
2928
+ --_utrecht-grid-columns-total: 12;
2929
+ --_utrecht-grid-columns-default: 1;
2930
+ }
2762
2931
  .utrecht-grid--xs-1 {
2763
2932
  --_utrecht-columns: 1;
2764
2933
  }
@@ -3371,7 +3540,6 @@
3371
3540
  break-after: avoid;
3372
3541
  break-inside: avoid-column;
3373
3542
  break-inside: avoid;
3374
- break-after: avoid-page;
3375
3543
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3376
3544
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3377
3545
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -3388,7 +3556,6 @@
3388
3556
  break-after: avoid;
3389
3557
  break-inside: avoid-column;
3390
3558
  break-inside: avoid;
3391
- break-after: avoid-page;
3392
3559
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3393
3560
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3394
3561
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -3405,7 +3572,6 @@
3405
3572
  break-after: avoid;
3406
3573
  break-inside: avoid-column;
3407
3574
  break-inside: avoid;
3408
- break-after: avoid-page;
3409
3575
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3410
3576
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3411
3577
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -3422,7 +3588,6 @@
3422
3588
  break-after: avoid;
3423
3589
  break-inside: avoid-column;
3424
3590
  break-inside: avoid;
3425
- break-after: avoid-page;
3426
3591
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3427
3592
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3428
3593
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -3439,7 +3604,6 @@
3439
3604
  break-after: avoid;
3440
3605
  break-inside: avoid-column;
3441
3606
  break-inside: avoid;
3442
- break-after: avoid-page;
3443
3607
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3444
3608
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3445
3609
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -3456,7 +3620,6 @@
3456
3620
  break-after: avoid;
3457
3621
  break-inside: avoid-column;
3458
3622
  break-inside: avoid;
3459
- break-after: avoid-page;
3460
3623
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
3461
3624
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
3462
3625
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -3543,12 +3706,12 @@
3543
3706
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
3544
3707
  align-items: center;
3545
3708
  border-radius: var(--utrecht-button-border-radius, 0);
3709
+ column-gap: var(--utrecht-button-column-gap, var(--utrecht-button-icon-gap));
3546
3710
  cursor: pointer;
3547
3711
  display: inline-flex;
3548
3712
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
3549
3713
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
3550
3714
  font-weight: var(--utrecht-button-font-weight);
3551
- gap: var(--utrecht-button-icon-gap);
3552
3715
  width: var(--utrecht-button-inline-size, auto);
3553
3716
  justify-content: center;
3554
3717
  line-height: inherit;
@@ -7194,7 +7357,7 @@
7194
7357
  -webkit-font-smoothing: auto !important;
7195
7358
  -moz-osx-font-smoothing: auto !important;
7196
7359
  background-color: var(--utrecht-root-background-color, Canvas);
7197
- border: 0;
7360
+ border-width: 0;
7198
7361
  box-sizing: border-box;
7199
7362
  color: var(--utrecht-root-color, CanvasText);
7200
7363
  font-family: var(--utrecht-root-font-family);
@@ -7335,14 +7498,14 @@
7335
7498
  color: var(--utrecht-search-bar-list-item-is-selected-color);
7336
7499
  }
7337
7500
  .utrecht-select {
7338
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7501
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
7502
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
7503
+ border-style: solid;
7339
7504
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
7340
7505
  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
7506
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
7343
7507
  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;
7508
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
7346
7509
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
7347
7510
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
7348
7511
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -7400,10 +7563,10 @@
7400
7563
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
7401
7564
  )
7402
7565
  );
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))));
7566
+ 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
7567
  border-width: var(--_utrecht-select-border-width);
7405
7568
  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))));
7569
+ 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
7570
  }
7408
7571
  .utrecht-select--html-select {
7409
7572
  }
@@ -7848,7 +8011,9 @@
7848
8011
 
7849
8012
  .utrecht-table__header--hidden {
7850
8013
  height: 1px;
7851
- border: 0 solid silver;
8014
+ border-color: silver;
8015
+ border-style: solid;
8016
+ border-width: 0;
7852
8017
  clip-path: inset(50%);
7853
8018
  width: 1px;
7854
8019
  outline: 1px solid red;
@@ -7905,13 +8070,13 @@
7905
8070
  font-variant-numeric: lining-nums tabular-nums;
7906
8071
  }
7907
8072
  .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
8073
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
7913
8074
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
7914
8075
  border-style: solid;
8076
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
8077
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
8078
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
8079
+ height: initial;
7915
8080
  box-sizing: border-box;
7916
8081
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
7917
8082
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -7938,10 +8103,10 @@
7938
8103
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
7939
8104
  )
7940
8105
  );
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))));
8106
+ 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
8107
  border-width: var(--_utrecht-textarea-border-width);
7943
8108
  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))));
8109
+ 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
8110
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
7946
8111
  }
7947
8112
 
@@ -8006,10 +8171,10 @@
8006
8171
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
8007
8172
  )
8008
8173
  );
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))));
8174
+ 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
8175
  border-width: var(--_utrecht-textarea-border-width);
8011
8176
  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))));
8177
+ 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
8178
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
8014
8179
  }
8015
8180
  .utrecht-textarea--html-textarea:read-only {
@@ -8037,27 +8202,40 @@
8037
8202
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
8038
8203
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
8039
8204
  );
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)));
8205
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
8206
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
8207
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
8208
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
8209
+ --_utrecht-textbox-border-block-end-width: var(
8210
+ --utrecht-textbox-border-bottom-width,
8211
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8212
+ );
8044
8213
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
8045
8214
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
8046
8215
  border-style: solid;
8216
+ border-width: var(--_utrecht-textbox-border-width);
8217
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
8047
8218
  box-sizing: border-box;
8219
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
8048
8220
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
8221
+ --_utrecht-textbox-padding-block-end: var(
8222
+ --utrecht-textbox-padding-block-end,
8223
+ var(--utrecht-form-control-padding-block-end, 0)
8224
+ );
8225
+ --_utrecht-textbox-padding-block-start: var(
8226
+ --utrecht-textbox-padding-block-start,
8227
+ var(--utrecht-form-control-padding-block-start, 0)
8228
+ );
8229
+ height: initial;
8049
8230
  display: block;
8050
8231
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
8051
8232
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
8052
8233
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
8053
8234
  width: 100%;
8054
8235
  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
8236
  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));
8237
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
8238
+ padding-top: var(--_utrecht-textbox-padding-block-start);
8061
8239
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
8062
8240
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
8063
8241
  white-space: nowrap;
@@ -8071,10 +8249,10 @@
8071
8249
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8072
8250
  )
8073
8251
  );
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))));
8252
+ 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
8253
  border-width: var(--_utrecht-textbox-border-width);
8076
8254
  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))));
8255
+ 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
8256
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8079
8257
  }
8080
8258
 
@@ -8195,10 +8373,10 @@
8195
8373
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
8196
8374
  )
8197
8375
  );
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))));
8376
+ 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
8377
  border-width: var(--_utrecht-textbox-border-width);
8200
8378
  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))));
8379
+ 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
8380
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
8203
8381
  }
8204
8382
  .utrecht-textbox--html-input:read-only {
@@ -8408,10 +8586,13 @@
8408
8586
  --utrecht-icon-color: currentColor;
8409
8587
  --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
8410
8588
  background-color: var(--utrecht-toptask-link-background-color);
8589
+ border-radius: var(--utrecht-toptask-link-border-radius);
8411
8590
  color: var(--utrecht-toptask-link-color);
8412
8591
  display: flex;
8413
8592
  flex-direction: column;
8593
+ font-family: var(--utrecht-toptask-link-font-family);
8414
8594
  font-size: var(--utrecht-toptask-link-font-size);
8595
+ font-weight: var(--utrecht-toptask-link-font-weight);
8415
8596
  line-height: var(--utrecht-toptask-link-line-height);
8416
8597
  max-width: var(--utrecht-toptask-link-max-inline-size);
8417
8598
  min-height: var(--utrecht-toptask-link-min-block-size);
@@ -8873,12 +9054,12 @@
8873
9054
  align-items: center;
8874
9055
  background-color: var(--_utrecht-button-background-color);
8875
9056
  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
9057
  border-color: var(--_utrecht-button-border-color);
8879
9058
  border-radius: var(--utrecht-button-border-radius);
8880
9059
  border-style: solid;
8881
9060
  border-width: var(--_utrecht-button-border-width);
9061
+ border-bottom-color: var(--_utrecht-button-border-bottom-color);
9062
+ border-bottom-width: var(--_utrecht-button-border-block-end-width);
8882
9063
  box-sizing: border-box;
8883
9064
  color: var(--_utrecht-button-color);
8884
9065
  column-gap: var(--utrecht-button-column-gap);
@@ -9009,7 +9190,7 @@
9009
9190
  margin-bottom: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
9010
9191
  margin-top: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
9011
9192
  all: revert;
9012
- border: 0;
9193
+ border-width: 0;
9013
9194
  margin-right: 0;
9014
9195
  margin-left: 0;
9015
9196
  min-width: 0;
@@ -9096,7 +9277,6 @@
9096
9277
  break-after: avoid;
9097
9278
  break-inside: avoid-column;
9098
9279
  break-inside: avoid;
9099
- break-after: avoid-page;
9100
9280
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9101
9281
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9102
9282
  font-size: var(--utrecht-heading-1-font-size, revert);
@@ -9110,7 +9290,6 @@
9110
9290
  break-after: avoid;
9111
9291
  break-inside: avoid-column;
9112
9292
  break-inside: avoid;
9113
- break-after: avoid-page;
9114
9293
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9115
9294
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9116
9295
  font-size: var(--utrecht-heading-2-font-size, revert);
@@ -9124,7 +9303,6 @@
9124
9303
  break-after: avoid;
9125
9304
  break-inside: avoid-column;
9126
9305
  break-inside: avoid;
9127
- break-after: avoid-page;
9128
9306
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9129
9307
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9130
9308
  font-size: var(--utrecht-heading-3-font-size, revert);
@@ -9138,7 +9316,6 @@
9138
9316
  break-after: avoid;
9139
9317
  break-inside: avoid-column;
9140
9318
  break-inside: avoid;
9141
- break-after: avoid-page;
9142
9319
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9143
9320
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9144
9321
  font-size: var(--utrecht-heading-4-font-size, revert);
@@ -9152,7 +9329,6 @@
9152
9329
  break-after: avoid;
9153
9330
  break-inside: avoid-column;
9154
9331
  break-inside: avoid;
9155
- break-after: avoid-page;
9156
9332
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9157
9333
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9158
9334
  font-size: var(--utrecht-heading-5-font-size, revert);
@@ -9166,7 +9342,6 @@
9166
9342
  break-after: avoid;
9167
9343
  break-inside: avoid-column;
9168
9344
  break-inside: avoid;
9169
- break-after: avoid-page;
9170
9345
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
9171
9346
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
9172
9347
  font-size: var(--utrecht-heading-6-font-size, revert);
@@ -9461,14 +9636,14 @@
9461
9636
  );
9462
9637
  }
9463
9638
  .utrecht-html select {
9464
- background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9639
+ border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
9640
+ border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
9641
+ border-style: solid;
9465
9642
  border-bottom-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
9466
9643
  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
9644
  border-right-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
9469
9645
  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;
9646
+ background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
9472
9647
  color: var(--utrecht-select-color, var(--utrecht-form-control-color));
9473
9648
  font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
9474
9649
  font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -9517,10 +9692,10 @@
9517
9692
  var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
9518
9693
  )
9519
9694
  );
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))));
9695
+ 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
9696
  border-width: var(--_utrecht-select-border-width);
9522
9697
  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))));
9698
+ 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
9699
  }
9525
9700
  .utrecht-html hr {
9526
9701
  border-color: var(--utrecht-separator-color);
@@ -9639,13 +9814,13 @@
9639
9814
  color: var(--utrecht-table-row-alternate-odd-color);
9640
9815
  }
9641
9816
  .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
9817
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
9647
9818
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
9648
9819
  border-style: solid;
9820
+ border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
9821
+ border-bottom-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
9822
+ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
9823
+ height: initial;
9649
9824
  box-sizing: border-box;
9650
9825
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
9651
9826
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -9686,10 +9861,10 @@
9686
9861
  var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
9687
9862
  )
9688
9863
  );
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))));
9864
+ 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
9865
  border-width: var(--_utrecht-textarea-border-width);
9691
9866
  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))));
9867
+ 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
9868
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
9694
9869
  }
9695
9870
  .utrecht-html textarea:read-only {
@@ -9729,27 +9904,40 @@
9729
9904
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
9730
9905
  var(--utrecht-textbox-autocomplete-ui-size, 44px)
9731
9906
  );
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)));
9907
+ max-width: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
9908
+ min-height: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
9909
+ min-width: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
9910
+ --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
9911
+ --_utrecht-textbox-border-block-end-width: var(
9912
+ --utrecht-textbox-border-bottom-width,
9913
+ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9914
+ );
9736
9915
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
9737
9916
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
9738
9917
  border-style: solid;
9918
+ border-width: var(--_utrecht-textbox-border-width);
9919
+ border-bottom-width: var(--_utrecht-textbox-border-block-end-width);
9739
9920
  box-sizing: border-box;
9921
+ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
9740
9922
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
9923
+ --_utrecht-textbox-padding-block-end: var(
9924
+ --utrecht-textbox-padding-block-end,
9925
+ var(--utrecht-form-control-padding-block-end, 0)
9926
+ );
9927
+ --_utrecht-textbox-padding-block-start: var(
9928
+ --utrecht-textbox-padding-block-start,
9929
+ var(--utrecht-form-control-padding-block-start, 0)
9930
+ );
9931
+ height: initial;
9741
9932
  display: block;
9742
9933
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
9743
9934
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
9744
9935
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
9745
9936
  width: 100%;
9746
9937
  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
9938
  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));
9939
+ padding-bottom: var(--_utrecht-textbox-padding-block-end);
9940
+ padding-top: var(--_utrecht-textbox-padding-block-start);
9753
9941
  padding-right: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
9754
9942
  padding-left: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
9755
9943
  white-space: nowrap;
@@ -9825,10 +10013,10 @@
9825
10013
  var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
9826
10014
  )
9827
10015
  );
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))));
10016
+ 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
10017
  border-width: var(--_utrecht-textbox-border-width);
9830
10018
  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))));
10019
+ 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
10020
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
9833
10021
  }
9834
10022
  .utrecht-html input:not([type]):read-only,