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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @utrecht/component-library-css
 
+## 3.2.0
+
+### Minor Changes
+
+- 8d8babe: Add 5 missing CSS components to CSS component library bundle.
+
+  - `utrecht-combobox`
+  - `utrecht-currency-data`
+  - `utrecht-data-placeholder`
+  - `utrecht-listbox`
+  - `utrecht-logo-image`
+  - `utrecht-preserve-data`
+
+## 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);
 }
@@ -910,7 +911,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h1 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -924,7 +924,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h2 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -938,7 +937,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h3 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -952,7 +950,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h4 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -966,7 +963,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h5 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -980,7 +976,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
 }
 .utrecht-html h6 {
   break-inside: avoid-column;
-  page-break-after: avoid;
   page-break-inside: avoid;
   color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
   font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
@@ -1104,10 +1099,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 +1113,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 +1320,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 +1510,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 +1589,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 +1625,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 +1652,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 +1752,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,
@@ -1809,4 +1832,4 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html ul > li::marker {
   color: var(--utrecht-unordered-list-marker-color);
   content: "●";
-}
+}

package/dist/html.js

@@ -0,0 +1 @@
+var undefined$1 = undefined;export{undefined$1 as default};