@utrecht/web-component-library-stencil 4.0.0 → 4.1.0

package/dist/collection/components/separator.css

@@ -4,10 +4,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-separator {
   border-color: var(--utrecht-separator-color);
   border-style: solid;
@@ -20,11 +25,6 @@
   --utrecht-space-around: 1;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/sidenav.css

@@ -3,12 +3,17 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-sidenav {
   --utrecht-sidenav-connection-color: var(--utrecht-sidenav-item-marker-color);
   --utrecht-sidenav-connection-inline-size: 2px;
@@ -184,14 +189,10 @@
 
 .utrecht-sidenav--pseudo-elements {
   /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
+}
+.utrecht-sidenav--pseudo-elements {
   /* stylelint-enable selector-pseudo-class-parentheses-space-inside */
 }
 .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after {
   display: none;
-}
-
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+}

package/dist/collection/components/skip-link.css

@@ -3,18 +3,23 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
-/* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
-/* stylelint-disable-next-line block-no-empty */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/* stylelint-disable-next-line block-no-empty */
+/* stylelint-disable-next-line block-no-empty */
 .utrecht-skip-link {
   /* Use `ButtonFace` as default `background-color`
    * to ensure the skip link is not transparent and unreadable
@@ -110,11 +115,6 @@
   text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration));
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline-flex;
 }

package/dist/collection/components/spotlight-section.css

@@ -4,10 +4,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-spotlight-section {
   background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
   border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
@@ -55,11 +60,6 @@
   --_utrecht-spotlight-section-color: var(--utrecht-spotlight-section-ok-color);
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/status-badge.css

@@ -4,15 +4,20 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-status-badge {
   /*
    * `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
@@ -39,6 +44,16 @@
   padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
   padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
   text-decoration: none; /* no inheritance */
+}
+@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-status-badge {
+    border-color: currentColor;
+    border-style: solid;
+    /* Warning: there layout difference because of the added 1px border */
+    border-width: 1px;
+  }
+}
+.utrecht-status-badge {
   --utrecht-badge-background-color: var(--utrecht-status-badge-background-color);
   --utrecht-badge-border-radius: var(--utrecht-status-badge-border-radius);
   --utrecht-badge-color: var(--utrecht-status-badge-color);
@@ -56,14 +71,6 @@
   min-inline-size: var(--utrecht-status-badge-min-inline-size, 1em);
   text-transform: var(--utrecht-status-badge-text-transform, inherit);
 }
-@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-  .utrecht-status-badge {
-    border-color: currentColor;
-    border-style: solid;
-    /* Warning: there layout difference because of the added 1px border */
-    border-width: 1px;
-  }
-}
 
 .utrecht-status-badge--danger {
   background-color: var(--utrecht-status-badge-danger-background-color, hsl(0, 100%, 40%));
@@ -124,11 +131,6 @@
   color: var(--utrecht-status-badge-inactive-color, var(--utrecht-status-badge-danger-color, white));
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: inline-block;
 }

package/dist/collection/components/surface.css

@@ -4,10 +4,15 @@
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 .utrecht-surface {
   background-color: var(--utrecht-surface-background-color, inherit);
   color: var(--utrecht-surface-color, inherit);
@@ -20,11 +25,6 @@
   margin-inline-start: 0;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/table-body.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   --_utrecht-table-header-cell-z-index: 2;
   display: table-row-group;

package/dist/collection/components/table-caption.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);

package/dist/collection/components/table-cell.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
   /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */

package/dist/collection/components/table-container.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 utrecht-table-container {
   display: block;
   overflow: auto;
@@ -20,10 +20,6 @@ utrecht-table-container {
   background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
 }
 
-utrecht-table-container table {
-  /* stylelint-disable no-descending-specificity */
-  /* stylelint-enable no-descending-specificity */
-}
 utrecht-table-container table > caption {
   break-inside: avoid;
   color: var(--utrecht-table-caption-color);
@@ -89,9 +85,15 @@ utrecht-table-container table > tr > td, utrecht-table-container table > thead >
   border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
   vertical-align: top;
 }
+utrecht-table-container table {
+  /* stylelint-disable no-descending-specificity */
+}
 utrecht-table-container table > tr > td:last-child, utrecht-table-container table > thead > tr > td:last-child, utrecht-table-container table > tbody > tr > td:last-child, utrecht-table-container table > tfoot > tr > td:last-child {
   padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
 }
 utrecht-table-container table > tr > td:first-child, utrecht-table-container table > thead > tr > td:first-child, utrecht-table-container table > tbody > tr > td:first-child, utrecht-table-container table > tfoot > tr > td:first-child {
   padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
+}
+utrecht-table-container table {
+  /* stylelint-enable no-descending-specificity */
 }

package/dist/collection/components/table-footer.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   --_utrecht-table-header-cell-z-index: 5;
   z-index: 3;

package/dist/collection/components/table-header-cell.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
   /* In tables `block-size` acts as `min-block-size`, but `min-block-size` is a clearer name for the design token */

package/dist/collection/components/table-header.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   --_utrecht-table-header-cell-vertical-align: bottom;
   --_utrecht-table-header-cell-z-index: 8;

package/dist/collection/components/table-row.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   break-inside: avoid;
   page-break-inside: avoid;

package/dist/collection/components/table.css

@@ -3,13 +3,13 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
    * Therefore we need to use `border-collapse: separate` instead.

package/dist/collection/components/textarea.css

@@ -3,20 +3,30 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* TODO: Enable ordering properties when the plugin supports logical CSS properties
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 .utrecht-textarea {
   /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
   background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
@@ -99,14 +109,6 @@
   opacity: 100%;
 }
 
-.utrecht-textarea--html-textarea {
-  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
-  /*
-   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
-}
 .utrecht-textarea--html-textarea:focus {
   background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -140,11 +142,21 @@
   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))));
   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 {
+  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
+}
 .utrecht-textarea--html-textarea:read-only {
   background-color: var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
+.utrecht-textarea--html-textarea {
+  /*
+   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
+   *
+   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
+   */
+}
 .utrecht-textarea--html-textarea:disabled {
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -157,11 +169,6 @@
   opacity: 100%;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }

package/dist/collection/components/textbox.css

@@ -3,20 +3,30 @@
  * Copyright (c) 2020-2024 Frameless B.V.
  * Copyright (c) 2021-2024 Gemeente Utrecht
  */
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* stylelint-disable-next-line block-no-empty */
 /**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
+/**
+* @license EUPL-1.2
+* Copyright (c) 2020-2024 Frameless B.V.
+* Copyright (c) 2021-2024 Gemeente Utrecht
+*/
 /* TODO: Enable ordering properties when the plugin supports logical CSS properties
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 .utrecht-textbox {
   /* The average character inline-size is an approximation, with a default that works for Dutch text.
    * The average might need to be configured specifically, for other scripts (CJK characters)
@@ -26,11 +36,11 @@
   --_utrecht-textbox-value-char: 0.667em + 0.334ch;
   /* Because this element uses `border-box` box-sizing, we need to manually add up the
     * border width, padding width and the content width.
-    * 
+    *
     * Browsers and browser addons can add buttons inside the content box, for example
     * for autocomplete. To avoid overlap between the UI and the text, we reserve
     * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
-    * 
+    *
     * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
     */
   --_utrecht-textbox-max-inline-size: calc(
@@ -49,6 +59,7 @@
   border-style: solid;
   box-sizing: border-box;
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  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)); /* harden with `initial` */
@@ -57,10 +68,12 @@
   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-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;
 }
 
 .utrecht-textbox--invalid {
@@ -197,14 +210,6 @@
   font-variant-ligatures: none;
 }
 
-.utrecht-textbox--html-input {
-  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
-  /*
-   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
-   *
-   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
-   */
-}
 .utrecht-textbox--html-input:focus {
   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))));
@@ -238,11 +243,21 @@
   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))));
   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 {
+  /* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
+}
 .utrecht-textbox--html-input: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-textbox--html-input {
+  /*
+   * The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
+   *
+   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
+   */
+}
 .utrecht-textbox--html-input: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))));
@@ -266,11 +281,6 @@
   font-variant-numeric: lining-nums tabular-nums;
 }
 
-/**
- * @license EUPL-1.2
- * Copyright (c) 2020-2024 Frameless B.V.
- * Copyright (c) 2021-2024 Gemeente Utrecht
- */
 :host {
   display: block;
 }