@utrecht/web-component-library-stencil 1.1.1-alpha.8 → 1.2.0

package/dist/cjs/utrecht-textbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-textbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,q+TAAq+T;;MCa3+T,OAAO;;;;;;;4BACyD,EAAE;wBAChC,KAAK;uBACN,KAAK;mBAClB,EAAE;mBACF,EAAE;uBACP,EAAE;2BACE,EAAE;wBACoC,KAAK;wBAC5B,KAAK;oBACV,EAAE;qBAClB,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAElH,QACEA,mBACE,KAAK,EAAEC,WAAI,CACT,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,EAChD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;gBACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC7B,GACD,EACF;KACH;;;;;;","names":["h","clsx"],"sources":["src/components/textbox.scss?tag=utrecht-textbox&encapsulation=shadow","src/components/textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textbox/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() min: number | string = '';\n  @Prop() max: number | string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;\n\n    return (\n      <input\n        class={clsx(\n          'utrecht-textbox',\n          'utrecht-textbox--html-input',\n          disabled && 'utrecht-textbox--disabled',\n          invalid && 'utrecht-textbox--invalid',\n          readOnly && 'utrecht-textbox--readonly',\n        )}\n        type={type || 'text'}\n        autoComplete={autoComplete ? autoComplete : null}\n        disabled={disabled}\n        dir=\"auto\"\n        min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n        max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n        pattern={pattern ? pattern : null}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLInputElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-textbox.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,8xWAA8xW;;MCapyW,OAAO;;;;;;;4BACyD,EAAE;wBAChC,KAAK;uBACN,KAAK;mBAClB,EAAE;mBACF,EAAE;uBACP,EAAE;2BACE,EAAE;wBACoC,KAAK;wBAC5B,KAAK;oBACV,EAAE;qBAClB,EAAE;;IAM1B,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAElH,QACEA,mBACE,KAAK,EAAEC,WAAI,CACT,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,EAChD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;gBACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;gBACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;aAC7B,GACD,EACF;KACH;;;;;;","names":["h","clsx"],"sources":["src/components/textbox.scss?tag=utrecht-textbox&encapsulation=shadow","src/components/textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textbox/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() min: number | string = '';\n  @Prop() max: number | string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;\n\n    return (\n      <input\n        class={clsx(\n          'utrecht-textbox',\n          'utrecht-textbox--html-input',\n          disabled && 'utrecht-textbox--disabled',\n          invalid && 'utrecht-textbox--invalid',\n          readOnly && 'utrecht-textbox--readonly',\n        )}\n        type={type || 'text'}\n        autoComplete={autoComplete ? autoComplete : null}\n        disabled={disabled}\n        dir=\"auto\"\n        min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n        max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n        pattern={pattern ? pattern : null}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLInputElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"],"version":3}

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

@@ -24,8 +24,8 @@
   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;

package/dist/collection/components/breadcrumb-nav.css

@@ -71,24 +71,23 @@
   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 */

package/dist/collection/components/code-block.css

@@ -20,10 +20,11 @@
  */
 .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);
@@ -33,7 +34,7 @@
   --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);

package/dist/collection/components/code.css

@@ -15,10 +15,11 @@
  */
 .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);
 }

package/dist/collection/components/form-field-checkbox.css

@@ -138,8 +138,8 @@
 }
 
 .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 {

package/dist/collection/components/form-field-textarea.css

@@ -138,8 +138,8 @@
 }
 
 .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 {
@@ -225,7 +225,8 @@
   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));

package/dist/collection/components/form-field-textbox.css

@@ -138,8 +138,8 @@
 }
 
 .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 {
@@ -209,6 +209,28 @@
  * 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));
@@ -223,7 +245,9 @@
   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));
@@ -246,16 +270,16 @@
 }
 
 .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 {
@@ -294,6 +318,53 @@
   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.
  */
@@ -325,9 +396,9 @@
    */
 }
 .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.
@@ -365,9 +436,9 @@
   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/dist/collection/components/form-toggle.css

@@ -110,6 +110,10 @@
   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));
 }

package/dist/collection/components/html-content.css

@@ -809,10 +809,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);
 }
@@ -1103,10 +1104,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);
@@ -1116,7 +1118,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);
@@ -1323,6 +1325,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));
@@ -1510,7 +1514,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));
@@ -1588,6 +1593,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));
@@ -1602,7 +1629,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));
@@ -1627,9 +1656,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.
@@ -1727,9 +1756,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/collection/components/textarea.css

@@ -42,7 +42,8 @@
   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));

package/dist/collection/components/textbox.css

@@ -26,6 +26,28 @@
  * 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));
@@ -40,7 +62,9 @@
   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));
@@ -63,16 +87,16 @@
 }
 
 .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 {
@@ -111,6 +135,53 @@
   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.
  */
@@ -142,9 +213,9 @@
    */
 }
 .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.
@@ -182,9 +253,9 @@
   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/dist/components/utrecht-badge-counter.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const badgeCounterCss = ".utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));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-style:var(--utrecht-badge-counter-font-style, normal);font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));line-height:1;max-block-size:max-content;max-inline-size:max-content;min-block-size:var(--utrecht-badge-counter-min-size, 1em);min-inline-size:var(--utrecht-badge-counter-min-size, 1em);padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-align:center;text-decoration:none;white-space:nowrap}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-badge-counter{border-color:currentColor;border-style:solid;border-width:1px}}:host{display:inline-block}:host([hidden]){display:none !important}";
+const badgeCounterCss = ".utrecht-badge-counter{background-color:var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%)));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-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);font-weight:var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));line-height:1;max-block-size:max-content;max-inline-size:max-content;min-block-size:var(--utrecht-badge-counter-min-size, 1em);min-inline-size:var(--utrecht-badge-counter-min-size, 1em);padding-block-end:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-block-start:var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));padding-inline-end:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));padding-inline-start:var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));text-align:center;text-decoration:none;white-space:nowrap}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-badge-counter{border-color:currentColor;border-style:solid;border-width:1px}}:host{display:inline-block}:host([hidden]){display:none !important}";
 
 const BadgeCounter = /*@__PURE__*/ proxyCustomElement(class BadgeCounter extends HTMLElement {
     constructor() {

package/dist/components/utrecht-badge-counter.js.map

@@ -1 +1 @@
-{"file":"utrecht-badge-counter.js","mappings":";;AAAA,MAAM,eAAe,GAAG,6+CAA6+C;;MCax/C,YAAY;;;;;;;;;IAKvB,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,YAAY,GAAG,CAAC,CAAS,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,OAAO,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;QAE7G,OAAO,WAAK,KAAK,EAAC,uBAAuB,IAAE,WAAW,GAAG,WAAW,GAAG,eAAa,CAAO,CAAC;KAC7F;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badge-counter.scss?tag=utrecht-badge-counter&encapsulation=shadow","src/components/badge-counter.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/badge-counter/css\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-badge-counter',\n  styleUrl: 'badge-counter.scss',\n  shadow: true,\n})\nexport class BadgeCounter {\n  @Prop() value: number;\n  @Prop() max: number;\n  @Prop() locale: string;\n\n  render() {\n    const { locale, max, value } = this;\n\n    const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);\n    const formatNumber = (n: number) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));\n    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';\n\n    return <div class=\"utrecht-badge-counter\">{textContent ? textContent : <slot></slot>}</div>;\n  }\n}\n"],"version":3}
+{"file":"utrecht-badge-counter.js","mappings":";;AAAA,MAAM,eAAe,GAAG,ylDAAylD;;MCapmD,YAAY;;;;;;;;;IAKvB,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,OAAO,GAAG,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;QACpG,MAAM,YAAY,GAAG,CAAC,CAAS,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,WAAW,GAAG,OAAO,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,YAAY,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;QAE7G,OAAO,WAAK,KAAK,EAAC,uBAAuB,IAAE,WAAW,GAAG,WAAW,GAAG,eAAa,CAAO,CAAC;KAC7F;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badge-counter.scss?tag=utrecht-badge-counter&encapsulation=shadow","src/components/badge-counter.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/badge-counter/css\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-badge-counter',\n  styleUrl: 'badge-counter.scss',\n  shadow: true,\n})\nexport class BadgeCounter {\n  @Prop() value: number;\n  @Prop() max: number;\n  @Prop() locale: string;\n\n  render() {\n    const { locale, max, value } = this;\n\n    const limited = typeof max === 'number' && typeof value === 'number' && Number(value) > Number(max);\n    const formatNumber = (n: number) => (locale ? Intl.NumberFormat(locale).format(n) : String(n));\n    const textContent = limited ? `${formatNumber(max)}+` : typeof value === 'number' ? formatNumber(value) : '';\n\n    return <div class=\"utrecht-badge-counter\">{textContent ? textContent : <slot></slot>}</div>;\n  }\n}\n"],"version":3}