@utrecht/component-library-css 3.0.1-alpha.37 → 3.0.1-alpha.39

package/dist/html.css

@@ -1591,6 +1591,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));
@@ -1607,7 +1629,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
-  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
+  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));

package/dist/index.css

@@ -6465,6 +6465,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));
@@ -6481,7 +6503,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
   min-block-size: var(--utrecht-pointer-target-min-size, 44px);
   min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
-  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
+  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));
@@ -6552,6 +6574,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.
  */

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.1-alpha.37",
+  "version": "3.0.1-alpha.39",
   "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",