@utrecht/component-library-css 3.0.1-alpha.9 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utrecht/component-library-css
 
+## 3.1.0
+
+### Minor Changes
+
+- f9c23c6: Add `utrecht-accordion__button--utrecht` class name.
+  Add `utrecht-accordion__button-icon` class name.
+- f9c23c6: Add `utrecht.accordion.button.icon.gap` design token.
+
 ## 3.0.0
 
 ### Major Changes

package/dist/html.css

@@ -810,10 +810,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html code {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
-  font-size: var(--utrecht-code-font-size);
+  font-size: var(--utrecht-code-font-size, inherit);
   font-variant-ligatures: none;
   line-height: var(--utrecht-code-line-height);
 }
@@ -1104,10 +1105,11 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html pre:has(> code:only-child) {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
-  font-size: var(--utrecht-code-font-size);
+  font-size: var(--utrecht-code-font-size, inherit);
   font-variant-ligatures: none;
   line-height: var(--utrecht-code-line-height);
   --utrecht-code-color: var(--utrecht-code-block-color, inherit);
@@ -1117,7 +1119,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
   background-color: var(--utrecht-code-block-background-color);
   display: block;
-  font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));
+  font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size, inherit));
   line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
   margin-block-end: var(--utrecht-code-block-margin-block-end);
   margin-block-start: var(--utrecht-code-block-margin-block-start);
@@ -1324,6 +1326,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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));
   inline-size: 100%;
+  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
   padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
   padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
@@ -1512,7 +1516,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
-  min-block-size: var(--utrecht-textarea-min-block-size);
+  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -1590,6 +1595,28 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i],
 .utrecht-html input[type=url i],
 .utrecht-html input[type=week i] {
+  /* 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)
+   * and very wide or very narrow fonts.
+   * For monospace fonts it can be set to `1ch`.
+   */
+  --_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(
+    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
+      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
+      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
+      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; /* harden */
   border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
@@ -1604,7 +1631,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: initial; /* harden */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
-  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
+  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)));
   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));
@@ -1629,9 +1658,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i]:focus,
 .utrecht-html input[type=url i]:focus,
 .utrecht-html input[type=week i]:focus {
-  background-color: var(--utrecht-textbox-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-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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))));
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.
@@ -1729,9 +1758,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=time i]:disabled,
 .utrecht-html input[type=url i]:disabled,
 .utrecht-html input[type=week i]:disabled {
-  background-color: var(--utrecht-textbox-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-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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-html input:not([type])::placeholder,

package/dist/index.css

@@ -50,6 +50,7 @@
   --utrecht-button-focus-scale: 1;
   --utrecht-button-hover-scale: 1;
   --utrecht-button-inline-size: 100%;
+  --utrecht-button-min-inline-size: 100%;
   --utrecht-button-subtle-background-color: var(--utrecht-accordion-button-background-color);
   --utrecht-button-subtle-padding-inline-start: var(--utrecht-accordion-button-padding-inline-start);
   --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
@@ -67,11 +68,15 @@
   --utrecht-button-subtle-focus-color: var(--utrecht-accordion-button-focus-color);
   --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-border-color);
   --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-border-width);
+  --utrecht-button-icon-gap: var(--utrecht-accordion-button-gap, var(--utrecht-space-text-xs));
+  align-items: baseline;
   justify-content: start !important;
   position: relative;
+  text-align: start;
 }
-.utrecht-accordion__button[aria-expanded]::after {
-  background-color: var(--utrecht-accordion-button-icon-background-color);
+
+.utrecht-accordion__button--utrecht[aria-expanded]::after {
+  background-color: var(--utrecht-accordion-button-icon-utrecht-background-color);
   background-position: center;
   background-repeat: no-repeat;
   block-size: var(--utrecht-accordion-button-icon-size);
@@ -81,16 +86,23 @@
   inset-inline-end: 0;
   position: absolute;
 }
-.utrecht-accordion__button[aria-expanded=false]::after {
-  background-image: var(--utrecht-accordion-icon-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
+.utrecht-accordion__button--utrecht[aria-expanded=false]::after {
+  background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E"));
 }
-.utrecht-accordion__button[aria-expanded=true]::after {
-  background-image: var(--utrecht-accordion-icon-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
+.utrecht-accordion__button--utrecht[aria-expanded=true]::after {
+  background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E"));
   background-position: center;
   background-repeat: no-repeat;
   content: "";
 }
 
+.utrecht-accordion__button-icon {
+  display: flex;
+}
+.utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon {
+  transform: rotate(180deg);
+}
+
 .utrecht-accordion__panel {
   border-block-start: none;
   border-color: var(--utrecht-accordion-panel-border-color);
@@ -381,8 +393,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
   color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%)));
   display: inline-block;
-  font-family: var(--utrecht-document-font-family, sans-serif);
-  font-size: var(--utrecht-badge-counter-font-size);
+  font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)));
+  font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size));
   font-style: var(--utrecht-badge-counter-font-style, normal); /* no inheritance */
   font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold)); /* no inheritance */
   line-height: 1;
@@ -748,24 +760,23 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   padding-inline-start: var(--utrecht-breadcrumb-nav-item-padding-inline-start, 8px);
 }
 
+.utrecht-breadcrumb-nav__link--current {
+  --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
+  /* configure the `current` `cursor` only when the current state is applied */
+  --_utrecht-breadcrumb-nav-link-current-cursor: var(--utrecht-action-inert-cursor, default);
+  font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
+}
+
 .utrecht-breadcrumb-nav__link--disabled {
   --utrecht-link-placeholder-color: var(
     --utrecht-breadcrumb-nav-link-disabled-color,
     var(--utrecht-breadcrumb-nav-link-color)
   );
+  /* configure the `disabled` `cursor` only when the current state is applied */
+  --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed);
   background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color));
-  color: var(--utrecht-link-placeholder-color);
-  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
-}
-
-.utrecht-breadcrumb-nav__link--current {
-  /*
-   * `current` should apply to `disabled` links too, and it should override `disabled`.
-   * The override is the reason why this selector is not ordered alphabetically.
-   */
-  --utrecht-link-current-font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
-  cursor: var(--utrecht-action-inert-cursor, default);
-  font-weight: var(--utrecht-breadcrumb-nav-link-current-font-weight, inherit);
+  /* Use the `current` cursor when available, otherwise use the `disabled` cursor */
+  cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor));
 }
 
 /* stylelint-disable-next-line block-no-empty */
@@ -1726,10 +1737,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  */
 .utrecht-code {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
-  font-size: var(--utrecht-code-font-size);
+  font-size: var(--utrecht-code-font-size, inherit);
   font-variant-ligatures: none;
   line-height: var(--utrecht-code-line-height);
 }
@@ -1751,10 +1763,11 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
  */
 .utrecht-code-block {
   /* Use `monospace` as fallback both when the custom property isn't set and when the font is not available */
+  /* Use `inherit` as font-size, to override interfering CSS such as: `code { font-size: 16px }` */
   background-color: var(--utrecht-code-background-color);
   color: var(--utrecht-code-color);
   font-family: var(--utrecht-code-font-family, monospace), monospace;
-  font-size: var(--utrecht-code-font-size);
+  font-size: var(--utrecht-code-font-size, inherit);
   font-variant-ligatures: none;
   line-height: var(--utrecht-code-line-height);
   --utrecht-code-color: var(--utrecht-code-block-color, inherit);
@@ -1764,7 +1777,7 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   --utrecht-code-font-family: var(--utrecht-code-block-font-family, monospace);
   background-color: var(--utrecht-code-block-background-color);
   display: block;
-  font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size));
+  font-size: var(--utrecht-code-block-font-size, var(--utrecht-code-font-size, inherit));
   line-height: var(--utrecht-code-block-line-height, var(--utrecht-code-line-height));
   margin-block-end: var(--utrecht-code-block-margin-block-end);
   margin-block-start: var(--utrecht-code-block-margin-block-start);
@@ -3111,8 +3124,8 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
 }
 
 .utrecht-form-label--disabled {
+  color: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
   cursor: var(--utrecht-action-disabled-cursor, revert);
-  font-weight: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
 }
 
 .utrecht-form-label--radio {
@@ -3229,6 +3242,10 @@ so do not apply these styles to an HTML `<dialog>` element without `open` attrib
   inline-size: 100%;
 }
 
+.utrecht-form-toggle__track--html-label {
+  cursor: inherit;
+}
+
 .utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track {
   background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color));
 }
@@ -4431,6 +4448,86 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-start: 0;
 }
 
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-bar {
+  background-color: var(--utrecht-nav-bar-background-color);
+  color: var(--utrecht-nav-bar-color);
+  display: flex;
+  justify-content: center;
+}
+@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+  .utrecht-nav-bar {
+    border-block-end-color: currentColor;
+    border-block-end-style: solid;
+    border-block-end-width: 1px;
+    /* add `padding` in `forced-colors` mode to make room for contrasting focus ring */
+    border-block-start-color: currentColor;
+    border-block-start-style: solid;
+    border-block-start-width: 1px;
+    padding-block-end: calc(var(--utrecht-focus-outline-width) * 2);
+    padding-block-start: calc(var(--utrecht-focus-outline-width) * 2);
+  }
+}
+
+.utrecht-nav-bar__content {
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: space-between;
+  /* Wrap content to accomodate:
+    * - 400% zoom
+    * - longer text due to automatic translation
+    * - longer text due to editorial content requirements
+    */
+  max-inline-size: var(--utrecht-nav-bar-content-max-inline-size);
+}
+
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ */
+.utrecht-nav-list {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
+  align-items: stretch;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  inline-size: 100%;
+  justify-content: start;
+}
+
+.utrecht-nav-list--center > * {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+.utrecht-nav-list__item {
+  list-style: none;
+  display: inline-flex;
+}
+
+/* Style for the navigation links */
+.utrecht-nav-list__link {
+  font-weight: var(--utrecht-nav-list-link-font-weight);
+  max-inline-size: var(--utrecht-nav-bar-link-max-inline-size, 30ch);
+  padding-block-end: var(--utrecht-nav-bar-link-padding-block-end);
+  padding-block-start: var(--utrecht-nav-bar-link-padding-block-start);
+  padding-inline-end: var(--utrecht-nav-bar-link-padding-inline-end);
+  padding-inline-start: var(--utrecht-nav-bar-link-padding-inline-start);
+  text-decoration: none;
+}
+
 /**
  * @license EUPL-1.2
  * Copyright (c) 2021 The Knights Who Say NIH! B.V.
@@ -5595,6 +5692,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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));
   inline-size: 100%;
+  min-block-size: var(--utrecht-select-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   max-inline-size: var(--utrecht-select-max-inline-size, var(--utrecht-form-control-max-inline-size));
   padding-block-end: var(--utrecht-select-padding-block-end, var(--utrecht-form-control-padding-block-end));
   padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
@@ -5873,6 +5972,15 @@ however browsers don't seem to have implemented great looking supixel tweening y
  */
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
+.utrecht-table-container--overflow-inline {
+  background-attachment: local, local, scroll, scroll;
+  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
+  background-position: left center, right center, left center, right center;
+  background-repeat: no-repeat;
+  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
+  overflow: auto;
+}
+
 .utrecht-table {
   /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
    * Therefore we need to use `border-collapse: separate` instead.
@@ -6222,7 +6330,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   inline-size: 100%;
   line-height: var(--utrecht-textarea-line-height, initial);
   max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
-  min-block-size: var(--utrecht-textarea-min-block-size);
+  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
   padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
   padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
   padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
@@ -6369,6 +6478,28 @@ however browsers don't seem to have implemented great looking supixel tweening y
  * https://github.com/hudochenkov/stylelint-order/pull/162 */
 /* stylelint-disable order/properties-alphabetical-order */
 .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)
+   * and very wide or very narrow fonts.
+   * For monospace fonts it can be set to `1ch`.
+   */
+  --_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(
+    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
+      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
+      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
+      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; /* harden */
   border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
@@ -6383,7 +6514,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-weight: initial; /* harden */
   inline-size: 100%;
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
-  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
+  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)));
   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));
@@ -6406,16 +6539,16 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 
 .utrecht-textbox--disabled {
-  background-color: var(--utrecht-textbox-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-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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-textbox--focus {
-  background-color: var(--utrecht-textbox-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-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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-textbox--focus-visible {
@@ -6454,6 +6587,53 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-numeric: slashed-zero;
 }
 
+.utrecht-textbox--postal-code-nl-size {
+  /* Dutch postal code: 4 numbers, 1 space and 2 letters */
+  --utrecht-textbox-value-max-length: 7;
+}
+
+.utrecht-textbox--house-number-size {
+  /* Dutch house number is 99999 at most: 5 numbers */
+  --utrecht-textbox-value-max-length: 5;
+}
+
+.utrecht-textbox--house-letter-size {
+  /* Dutch house letter is 1 letter */
+  --utrecht-textbox-value-max-length: 1;
+}
+
+.utrecht-textbox--house-addition-size {
+  /* Dutch house addition is optional, between 1 and 4 alphanumeric characters */
+  --utrecht-textbox-value-max-length: 4;
+}
+
+.utrecht-textbox--voorvoegsel-size {
+  /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
+   * of all allowed values. The longest value is 10 characters.
+   * The class name is in Dutch because it is a Dutch concept. */
+  --utrecht-textbox-value-max-length: 10;
+}
+
+.utrecht-textbox--tel-size {
+  /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
+  --utrecht-textbox-value-max-length: 19;
+}
+
+.utrecht-textbox--tel-nl-size {
+  /* Dutch telephone number: 10 number, typically with at most 3 spaces */
+  --utrecht-textbox-value-max-length: 13;
+}
+
+.utrecht-textbox--iban-size {
+  /* Maximum IBAN: 33 characters, plus 8 spaces (one space after every 4 characters) */
+  --utrecht-textbox-value-max-length: 41;
+}
+
+.utrecht-textbox--iban-nl-size {
+  /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
+  --utrecht-textbox-value-max-length: 22;
+}
+
 /**
  * This class name is experimental.
  */
@@ -6485,9 +6665,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
    */
 }
 .utrecht-textbox--html-input:focus {
-  background-color: var(--utrecht-textbox-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-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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))));
   /* - The browser default focus ring should apply when these CSS custom properties are not set.
    * - Make the `box-shadow` value available, so components that have their own `box-shadow`
    *   can combine it with the focus ring box shadow.
@@ -6525,9 +6705,9 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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:disabled {
-  background-color: var(--utrecht-textbox-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-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
-  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+  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-textbox--html-input::placeholder {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.1-alpha.9",
+  "version": "3.1.0",
   "author": "Community for NL Design System",
   "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
   "license": "EUPL-1.2",

package/LICENSE.txt

@@ -1,287 +0,0 @@
-                      EUROPEAN UNION PUBLIC LICENCE v. 1.2
-                      EUPL © the European Union 2007, 2016
-
-This European Union Public Licence (the ‘EUPL’) applies to the Work (as defined
-below) which is provided under the terms of this Licence. Any use of the Work,
-other than as authorised under this Licence is prohibited (to the extent such
-use is covered by a right of the copyright holder of the Work).
-
-The Work is provided under the terms of this Licence when the Licensor (as
-defined below) has placed the following notice immediately following the
-copyright notice for the Work:
-
-        Licensed under the EUPL
-
-or has expressed by any other means his willingness to license under the EUPL.
-
-1. Definitions
-
-In this Licence, the following terms have the following meaning:
-
-- ‘The Licence’: this Licence.
-
-- ‘The Original Work’: the work or software distributed or communicated by the
-  Licensor under this Licence, available as Source Code and also as Executable
-  Code as the case may be.
-
-- ‘Derivative Works’: the works or software that could be created by the
-  Licensee, based upon the Original Work or modifications thereof. This Licence
-  does not define the extent of modification or dependence on the Original Work
-  required in order to classify a work as a Derivative Work; this extent is
-  determined by copyright law applicable in the country mentioned in Article 15.
-
-- ‘The Work’: the Original Work or its Derivative Works.
-
-- ‘The Source Code’: the human-readable form of the Work which is the most
-  convenient for people to study and modify.
-
-- ‘The Executable Code’: any code which has generally been compiled and which is
-  meant to be interpreted by a computer as a program.
-
-- ‘The Licensor’: the natural or legal person that distributes or communicates
-  the Work under the Licence.
-
-- ‘Contributor(s)’: any natural or legal person who modifies the Work under the
-  Licence, or otherwise contributes to the creation of a Derivative Work.
-
-- ‘The Licensee’ or ‘You’: any natural or legal person who makes any usage of
-  the Work under the terms of the Licence.
-
-- ‘Distribution’ or ‘Communication’: any act of selling, giving, lending,
-  renting, distributing, communicating, transmitting, or otherwise making
-  available, online or offline, copies of the Work or providing access to its
-  essential functionalities at the disposal of any other natural or legal
-  person.
-
-2. Scope of the rights granted by the Licence
-
-The Licensor hereby grants You a worldwide, royalty-free, non-exclusive,
-sublicensable licence to do the following, for the duration of copyright vested
-in the Original Work:
-
-- use the Work in any circumstance and for all usage,
-- reproduce the Work,
-- modify the Work, and make Derivative Works based upon the Work,
-- communicate to the public, including the right to make available or display
-  the Work or copies thereof to the public and perform publicly, as the case may
-  be, the Work,
-- distribute the Work or copies thereof,
-- lend and rent the Work or copies thereof,
-- sublicense rights in the Work or copies thereof.
-
-Those rights can be exercised on any media, supports and formats, whether now
-known or later invented, as far as the applicable law permits so.
-
-In the countries where moral rights apply, the Licensor waives his right to
-exercise his moral right to the extent allowed by law in order to make effective
-the licence of the economic rights here above listed.
-
-The Licensor grants to the Licensee royalty-free, non-exclusive usage rights to
-any patents held by the Licensor, to the extent necessary to make use of the
-rights granted on the Work under this Licence.
-
-3. Communication of the Source Code
-
-The Licensor may provide the Work either in its Source Code form, or as
-Executable Code. If the Work is provided as Executable Code, the Licensor
-provides in addition a machine-readable copy of the Source Code of the Work
-along with each copy of the Work that the Licensor distributes or indicates, in
-a notice following the copyright notice attached to the Work, a repository where
-the Source Code is easily and freely accessible for as long as the Licensor
-continues to distribute or communicate the Work.
-
-4. Limitations on copyright
-
-Nothing in this Licence is intended to deprive the Licensee of the benefits from
-any exception or limitation to the exclusive rights of the rights owners in the
-Work, of the exhaustion of those rights or of other applicable limitations
-thereto.
-
-5. Obligations of the Licensee
-
-The grant of the rights mentioned above is subject to some restrictions and
-obligations imposed on the Licensee. Those obligations are the following:
-
-Attribution right: The Licensee shall keep intact all copyright, patent or
-trademarks notices and all notices that refer to the Licence and to the
-disclaimer of warranties. The Licensee must include a copy of such notices and a
-copy of the Licence with every copy of the Work he/she distributes or
-communicates. The Licensee must cause any Derivative Work to carry prominent
-notices stating that the Work has been modified and the date of modification.
-
-Copyleft clause: If the Licensee distributes or communicates copies of the
-Original Works or Derivative Works, this Distribution or Communication will be
-done under the terms of this Licence or of a later version of this Licence
-unless the Original Work is expressly distributed only under this version of the
-Licence — for example by communicating ‘EUPL v. 1.2 only’. The Licensee
-(becoming Licensor) cannot offer or impose any additional terms or conditions on
-the Work or Derivative Work that alter or restrict the terms of the Licence.
-
-Compatibility clause: If the Licensee Distributes or Communicates Derivative
-Works or copies thereof based upon both the Work and another work licensed under
-a Compatible Licence, this Distribution or Communication can be done under the
-terms of this Compatible Licence. For the sake of this clause, ‘Compatible
-Licence’ refers to the licences listed in the appendix attached to this Licence.
-Should the Licensee's obligations under the Compatible Licence conflict with
-his/her obligations under this Licence, the obligations of the Compatible
-Licence shall prevail.
-
-Provision of Source Code: When distributing or communicating copies of the Work,
-the Licensee will provide a machine-readable copy of the Source Code or indicate
-a repository where this Source will be easily and freely available for as long
-as the Licensee continues to distribute or communicate the Work.
-
-Legal Protection: This Licence does not grant permission to use the trade names,
-trademarks, service marks, or names of the Licensor, except as required for
-reasonable and customary use in describing the origin of the Work and
-reproducing the content of the copyright notice.
-
-6. Chain of Authorship
-
-The original Licensor warrants that the copyright in the Original Work granted
-hereunder is owned by him/her or licensed to him/her and that he/she has the
-power and authority to grant the Licence.
-
-Each Contributor warrants that the copyright in the modifications he/she brings
-to the Work are owned by him/her or licensed to him/her and that he/she has the
-power and authority to grant the Licence.
-
-Each time You accept the Licence, the original Licensor and subsequent
-Contributors grant You a licence to their contributions to the Work, under the
-terms of this Licence.
-
-7. Disclaimer of Warranty
-
-The Work is a work in progress, which is continuously improved by numerous
-Contributors. It is not a finished work and may therefore contain defects or
-‘bugs’ inherent to this type of development.
-
-For the above reason, the Work is provided under the Licence on an ‘as is’ basis
-and without warranties of any kind concerning the Work, including without
-limitation merchantability, fitness for a particular purpose, absence of defects
-or errors, accuracy, non-infringement of intellectual property rights other than
-copyright as stated in Article 6 of this Licence.
-
-This disclaimer of warranty is an essential part of the Licence and a condition
-for the grant of any rights to the Work.
-
-8. Disclaimer of Liability
-
-Except in the cases of wilful misconduct or damages directly caused to natural
-persons, the Licensor will in no event be liable for any direct or indirect,
-material or moral, damages of any kind, arising out of the Licence or of the use
-of the Work, including without limitation, damages for loss of goodwill, work
-stoppage, computer failure or malfunction, loss of data or any commercial
-damage, even if the Licensor has been advised of the possibility of such damage.
-However, the Licensor will be liable under statutory product liability laws as
-far such laws apply to the Work.
-
-9. Additional agreements
-
-While distributing the Work, You may choose to conclude an additional agreement,
-defining obligations or services consistent with this Licence. However, if
-accepting obligations, You may act only on your own behalf and on your sole
-responsibility, not on behalf of the original Licensor or any other Contributor,
-and only if You agree to indemnify, defend, and hold each Contributor harmless
-for any liability incurred by, or claims asserted against such Contributor by
-the fact You have accepted any warranty or additional liability.
-
-10. Acceptance of the Licence
-
-The provisions of this Licence can be accepted by clicking on an icon ‘I agree’
-placed under the bottom of a window displaying the text of this Licence or by
-affirming consent in any other similar way, in accordance with the rules of
-applicable law. Clicking on that icon indicates your clear and irrevocable
-acceptance of this Licence and all of its terms and conditions.
-
-Similarly, you irrevocably accept this Licence and all of its terms and
-conditions by exercising any rights granted to You by Article 2 of this Licence,
-such as the use of the Work, the creation by You of a Derivative Work or the
-Distribution or Communication by You of the Work or copies thereof.
-
-11. Information to the public
-
-In case of any Distribution or Communication of the Work by means of electronic
-communication by You (for example, by offering to download the Work from a
-remote location) the distribution channel or media (for example, a website) must
-at least provide to the public the information requested by the applicable law
-regarding the Licensor, the Licence and the way it may be accessible, concluded,
-stored and reproduced by the Licensee.
-
-12. Termination of the Licence
-
-The Licence and the rights granted hereunder will terminate automatically upon
-any breach by the Licensee of the terms of the Licence.
-
-Such a termination will not terminate the licences of any person who has
-received the Work from the Licensee under the Licence, provided such persons
-remain in full compliance with the Licence.
-
-13. Miscellaneous
-
-Without prejudice of Article 9 above, the Licence represents the complete
-agreement between the Parties as to the Work.
-
-If any provision of the Licence is invalid or unenforceable under applicable
-law, this will not affect the validity or enforceability of the Licence as a
-whole. Such provision will be construed or reformed so as necessary to make it
-valid and enforceable.
-
-The European Commission may publish other linguistic versions or new versions of
-this Licence or updated versions of the Appendix, so far this is required and
-reasonable, without reducing the scope of the rights granted by the Licence. New
-versions of the Licence will be published with a unique version number.
-
-All linguistic versions of this Licence, approved by the European Commission,
-have identical value. Parties can take advantage of the linguistic version of
-their choice.
-
-14. Jurisdiction
-
-Without prejudice to specific agreement between parties,
-
-- any litigation resulting from the interpretation of this License, arising
-  between the European Union institutions, bodies, offices or agencies, as a
-  Licensor, and any Licensee, will be subject to the jurisdiction of the Court
-  of Justice of the European Union, as laid down in article 272 of the Treaty on
-  the Functioning of the European Union,
-
-- any litigation arising between other parties and resulting from the
-  interpretation of this License, will be subject to the exclusive jurisdiction
-  of the competent court where the Licensor resides or conducts its primary
-  business.
-
-15. Applicable Law
-
-Without prejudice to specific agreement between parties,
-
-- this Licence shall be governed by the law of the European Union Member State
-  where the Licensor has his seat, resides or has his registered office,
-
-- this licence shall be governed by Belgian law if the Licensor has no seat,
-  residence or registered office inside a European Union Member State.
-
-Appendix
-
-‘Compatible Licences’ according to Article 5 EUPL are:
-
-- GNU General Public License (GPL) v. 2, v. 3
-- GNU Affero General Public License (AGPL) v. 3
-- Open Software License (OSL) v. 2.1, v. 3.0
-- Eclipse Public License (EPL) v. 1.0
-- CeCILL v. 2.0, v. 2.1
-- Mozilla Public Licence (MPL) v. 2
-- GNU Lesser General Public Licence (LGPL) v. 2.1, v. 3
-- Creative Commons Attribution-ShareAlike v. 3.0 Unported (CC BY-SA 3.0) for
-  works other than software
-- European Union Public Licence (EUPL) v. 1.1, v. 1.2
-- Québec Free and Open-Source Licence — Reciprocity (LiLiQ-R) or Strong
-  Reciprocity (LiLiQ-R+).
-
-The European Commission may update this Appendix to later versions of the above
-licences without producing a new version of the EUPL, as long as they provide
-the rights granted in Article 2 of this Licence and protect the covered Source
-Code from exclusive appropriation.
-
-All other changes or additions to this Appendix require the production of a new
-EUPL version.