@utrecht/component-library-css 9.0.11 → 9.0.13

package/dist/index.css

@@ -97,10 +97,10 @@
 }
 
 .utrecht-accordion__panel {
-  border-block-start: none;
   border-color: var(--utrecht-accordion-panel-border-color);
   border-style: solid;
   border-width: var(--utrecht-accordion-panel-border-width);
+  border-block-start: none;
   padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
   padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
   padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
@@ -693,10 +693,10 @@
 .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::after,
 .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link::before {
   block-size: 0;
-  border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
-  border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
   border-color: transparent;
   border-style: solid;
+  border-block-end-width: var(--utrecht-breadcrumb-nav-min-block-size);
+  border-block-start-width: var(--utrecht-breadcrumb-nav-min-block-size);
   content: " ";
   display: block;
   inline-size: 0;
@@ -962,12 +962,12 @@
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   block-size: fit-content;
-  border-block-end-color: var(--_utrecht-button-border-bottom-color);
-  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   border-color: var(--_utrecht-button-border-color);
   border-radius: var(--utrecht-button-border-radius);
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
+  border-block-end-color: var(--_utrecht-button-border-bottom-color);
+  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
   column-gap: var(--utrecht-button-column-gap);
@@ -1342,12 +1342,12 @@
   align-items: center;
   background-color: var(--_utrecht-button-background-color);
   block-size: fit-content;
-  border-block-end-color: var(--_utrecht-button-border-bottom-color);
-  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   border-color: var(--_utrecht-button-border-color);
   border-radius: var(--utrecht-button-border-radius);
   border-style: solid;
   border-width: var(--_utrecht-button-border-width);
+  border-block-end-color: var(--_utrecht-button-border-bottom-color);
+  border-block-end-width: var(--_utrecht-button-border-block-end-width);
   box-sizing: border-box;
   color: var(--_utrecht-button-color);
   column-gap: var(--utrecht-button-column-gap);
@@ -2209,6 +2209,127 @@
   border-width: var(--utrecht-checkbox-indeterminate-border-width, var(--utrecht-checkbox-border-width));
   color: var(--utrecht-checkbox-indeterminate-color, var(--utrecht-checkbox-color));
 }
+.utrecht-customizable-text-input {
+  display: inline-block;
+  max-inline-size: min(100%, var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
+  position: relative;
+}
+
+.utrecht-customizable-text-input__inner {
+  --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
+  --_utrecht-textbox-border-block-end-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+  );
+  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
+  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
+  border-style: solid;
+  border-width: var(--_utrecht-textbox-border-width);
+  border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
+  box-sizing: border-box;
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
+  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  cursor: text;
+  display: flex;
+  min-block-size: calc(var(--utrecht-pointer-target-min-size, 44px) - var(--_utrecht-textbox-border-width) - var(--_utrecht-textbox-border-block-end-width));
+}
+.utrecht-customizable-text-input__inner:has(input:focus-visible, .utrecht-textbox--focus-visible) {
+  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
+    var(--utrecht-focus-inverse-outline-color, transparent);
+  box-shadow: var(--_utrecht-focus-ring-box-shadow);
+  outline-color: var(--utrecht-focus-outline-color, revert);
+  outline-offset: var(--utrecht-focus-outline-offset, revert);
+  outline-style: var(--utrecht-focus-outline-style, revert);
+  outline-width: var(--utrecht-focus-outline-width, revert);
+  z-index: 1;
+  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))));
+  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))));
+  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
+.utrecht-customizable-text-input__inner:has(input[aria-invalid=true], .utrecht-textbox--invalid) {
+  --_utrecht-textbox-border-width: var(
+    --utrecht-textbox-invalid-border-width,
+    var(
+      --utrecht-form-control-invalid-border-width,
+      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+    )
+  );
+  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))));
+  border-width: var(--_utrecht-textbox-border-width);
+  border-block-end-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)))));
+  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))));
+  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
+.utrecht-customizable-text-input__inner:has(input:read-only, .utrecht-textbox--read-only) {
+  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))));
+  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))));
+  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
+.utrecht-customizable-text-input__inner:has(input:disabled, .utrecht-textbox--disabled) {
+  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))));
+  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))));
+  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+}
+
+.utrecht-customizable-text-input__wrap-input {
+  display: flex;
+  min-inline-size: 0;
+  order: 2;
+}
+
+.utrecht-customizable-text-input__wrap-input .utrecht-textbox,
+.utrecht-customizable-text-input__slot {
+  margin-block-end: calc(var(--_utrecht-textbox-border-block-end-width) * -1);
+  margin-block-start: calc(var(--_utrecht-textbox-border-width) * -1);
+}
+
+.utrecht-customizable-text-input__wrap-input .utrecht-textbox {
+  inline-size: 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)));
+  max-inline-size: none;
+  min-inline-size: 0;
+  padding-block-end: calc(var(--_utrecht-textbox-padding-block-end) + var(--_utrecht-textbox-border-block-end-width));
+  padding-block-start: calc(var(--_utrecht-textbox-padding-block-start) + var(--_utrecht-textbox-border-width));
+}
+.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: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 {
+  background-color: transparent;
+  border-width: 0;
+  box-shadow: none;
+  color: currentColor;
+  outline: none;
+}
+
+.utrecht-customizable-text-input__wrap-input .utrecht-combobox {
+  display: flex;
+  position: static;
+}
+
+.utrecht-customizable-text-input__slot {
+  --utrecht-icon-size: var(--utrecht-textbox-icon-size, 1em);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+}
+
+.utrecht-customizable-text-input__slot:is(label),
+.utrecht-customizable-text-input__slot--label {
+  cursor: inherit;
+}
+
+.utrecht-customizable-text-input__slot--start {
+  order: 1;
+}
+.utrecht-customizable-text-input__slot--start.utrecht-customizable-text-input__action {
+  margin-inline-start: calc(var(--_utrecht-textbox-border-width) * -1);
+}
+
+.utrecht-customizable-text-input__slot--end {
+  order: 3;
+}
+.utrecht-customizable-text-input__slot--end.utrecht-customizable-text-input__action {
+  margin-inline-end: calc(var(--_utrecht-textbox-border-width) * -1);
+}
 .utrecht-badge-data,
 .utrecht-data-badge {
   background-color: var(--utrecht-data-badge-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));
@@ -2628,7 +2749,7 @@
 .utrecht-form-fieldset--html-fieldset,
 .utrecht-form-fieldset__fieldset--html-fieldset {
   all: revert;
-  border: 0;
+  border-width: 0;
   margin-inline-end: 0;
   margin-inline-start: 0;
   min-inline-size: 0;
@@ -2819,7 +2940,7 @@
 
 .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox {
   block-size: 1px !important;
-  border: 0 !important;
+  border-width: 0 !important;
   clip-path: inset(50%) !important;
   inline-size: 1px !important;
   margin: -1px !important;
@@ -2857,6 +2978,54 @@
   justify-content: var(--_utrecht-grid-justify-content, initial);
   container-type: inline-size;
 }
+.utrecht-grid--cols-1 {
+  --_utrecht-grid-columns-total: 1;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-2 {
+  --_utrecht-grid-columns-total: 2;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-3 {
+  --_utrecht-grid-columns-total: 3;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-4 {
+  --_utrecht-grid-columns-total: 4;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-5 {
+  --_utrecht-grid-columns-total: 5;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-6 {
+  --_utrecht-grid-columns-total: 6;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-7 {
+  --_utrecht-grid-columns-total: 7;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-8 {
+  --_utrecht-grid-columns-total: 8;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-9 {
+  --_utrecht-grid-columns-total: 9;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-10 {
+  --_utrecht-grid-columns-total: 10;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-11 {
+  --_utrecht-grid-columns-total: 11;
+  --_utrecht-grid-columns-default: 1;
+}
+.utrecht-grid--cols-12 {
+  --_utrecht-grid-columns-total: 12;
+  --_utrecht-grid-columns-default: 1;
+}
 .utrecht-grid--xs-1 {
   --_utrecht-columns: 1;
 }
@@ -3457,7 +3626,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-1-font-size, revert);
@@ -3474,7 +3642,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-2-font-size, revert);
@@ -3491,7 +3658,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-3-font-size, revert);
@@ -3508,7 +3674,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-4-font-size, revert);
@@ -3525,7 +3690,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-5-font-size, revert);
@@ -3542,7 +3706,6 @@
   break-after: avoid;
   break-inside: avoid-column;
   break-inside: avoid;
-  break-after: avoid-page;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
   font-size: var(--utrecht-heading-6-font-size, revert);
@@ -3630,12 +3793,12 @@
   --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
   align-items: center;
   border-radius: var(--utrecht-button-border-radius, 0);
+  column-gap: var(--utrecht-button-column-gap, var(--utrecht-button-icon-gap));
   cursor: pointer;
   display: inline-flex;
   font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
   font-weight: var(--utrecht-button-font-weight);
-  gap: var(--utrecht-button-icon-gap);
   inline-size: var(--utrecht-button-inline-size, auto);
   justify-content: center;
   line-height: inherit;
@@ -7338,7 +7501,7 @@
   -webkit-font-smoothing: auto !important;
   -moz-osx-font-smoothing: auto !important;
   background-color: var(--utrecht-root-background-color, Canvas);
-  border: 0;
+  border-width: 0;
   box-sizing: border-box;
   color: var(--utrecht-root-color, CanvasText);
   font-family: var(--utrecht-root-font-family);
@@ -7484,14 +7647,14 @@
   color: var(--utrecht-search-bar-list-item-is-selected-color);
 }
 .utrecht-select {
-  background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
+  border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
+  border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
+  border-style: solid;
   border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)));
   border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
-  border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color));
   border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
   border-inline-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width));
-  border-radius: var(--utrecht-select-border-radius, var(--utrecht-form-control-border-radius, 0));
-  border-style: solid;
+  background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color));
   color: var(--utrecht-select-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-select-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-select-font-size, var(--utrecht-form-control-font-size));
@@ -7549,10 +7712,10 @@
       var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  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))));
+  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))));
   border-width: var(--_utrecht-select-border-width);
   border-block-end-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)))));
-  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))));
+  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))));
 }
 .utrecht-select--html-select {
 }
@@ -7997,7 +8160,9 @@
 
 .utrecht-table__header--hidden {
   block-size: 1px;
-  border: 0 solid silver;
+  border-color: silver;
+  border-style: solid;
+  border-width: 0;
   clip-path: inset(50%);
   inline-size: 1px;
   outline: 1px solid red;
@@ -8054,13 +8219,13 @@
   font-variant-numeric: lining-nums tabular-nums;
 }
 .utrecht-textarea {
-  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial;
-  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
+  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
+  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
+  block-size: initial;
   box-sizing: border-box;
   color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -8087,10 +8252,10 @@
       var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  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))));
+  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))));
   border-width: var(--_utrecht-textarea-border-width);
   border-block-end-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)))));
-  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))));
+  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))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 
@@ -8155,10 +8320,10 @@
       var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  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))));
+  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))));
   border-width: var(--_utrecht-textarea-border-width);
   border-block-end-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)))));
-  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))));
+  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))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textarea--html-textarea:read-only {
@@ -8186,27 +8351,40 @@
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
       var(--utrecht-textbox-autocomplete-ui-size, 44px)
   );
-  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial;
-  border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
+  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
+  min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
+  --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
+  --_utrecht-textbox-border-block-end-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+  );
   border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--_utrecht-textbox-border-width);
+  border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
   box-sizing: border-box;
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  --_utrecht-textbox-padding-block-end: var(
+    --utrecht-textbox-padding-block-end,
+    var(--utrecht-form-control-padding-block-end, 0)
+  );
+  --_utrecht-textbox-padding-block-start: var(
+    --utrecht-textbox-padding-block-start,
+    var(--utrecht-form-control-padding-block-start, 0)
+  );
+  block-size: initial;
   display: block;
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
-  min-block-size: var(--utrecht-pointer-target-min-size, 44px);
-  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
-  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
   overflow: hidden;
-  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
-  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
+  padding-block-end: var(--_utrecht-textbox-padding-block-end);
+  padding-block-start: var(--_utrecht-textbox-padding-block-start);
   padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   white-space: nowrap;
@@ -8220,10 +8398,10 @@
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  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))));
+  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))));
   border-width: var(--_utrecht-textbox-border-width);
   border-block-end-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)))));
-  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))));
+  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))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 
@@ -8344,10 +8522,10 @@
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  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))));
+  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))));
   border-width: var(--_utrecht-textbox-border-width);
   border-block-end-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)))));
-  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))));
+  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))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textbox--html-input:read-only {
@@ -8418,7 +8596,9 @@
 @media (forced-colors: active) {
   .utrecht-tooltip {
     background-color: Canvas;
-    border: 1px solid CanvasText;
+    border-color: CanvasText;
+    border-style: solid;
+    border-width: 1px;
     color: CanvasText;
   }
 }
@@ -8574,10 +8754,13 @@
   --utrecht-icon-color: currentColor;
   --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
   background-color: var(--utrecht-toptask-link-background-color);
+  border-radius: var(--utrecht-toptask-link-border-radius);
   color: var(--utrecht-toptask-link-color);
   display: flex;
   flex-direction: column;
+  font-family: var(--utrecht-toptask-link-font-family);
   font-size: var(--utrecht-toptask-link-font-size);
+  font-weight: var(--utrecht-toptask-link-font-weight);
   line-height: var(--utrecht-toptask-link-line-height);
   max-inline-size: var(--utrecht-toptask-link-max-inline-size);
   min-block-size: var(--utrecht-toptask-link-min-block-size);