@utrecht/web-component-library-stencil 4.2.0 → 5.0.0

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TableRow {
     render() {
-        return (h(Host, { key: 'aee29755a992b5474d573c384d871be54c30a402', role: "row" }, h("slot", { key: 'ba08000e6008dbda42e255d5d6c53bc88d3fe0ca' })));
+        return (h(Host, { key: 'fc8a3e131bde6f8d908f749b6b541f79cc7c8b67', role: "row" }, h("slot", { key: 'f16d1d97a91992593faa87c1c089eabb34b24396' })));
     }
     static get is() { return "utrecht-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table.css

@@ -11,10 +11,10 @@
 /* stylelint-disable-next-line block-no-empty */
 /* stylelint-disable-next-line block-no-empty */
 :host {
+  border-collapse: separate;
   /* `border-collapse: collapse` results in a broken border for sticky header and sticky footer.
    * Therefore we need to use `border-collapse: separate` instead.
    */
-  border-collapse: separate;
   border-color: var(--utrecht-table-border-color, 0);
   border-spacing: 0;
   border-style: solid;

package/dist/collection/components/table.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class Table {
     render() {
-        return (h(Host, { key: 'ef50808d5c636a1e78863ac5cc58d9e646fe39a3', role: "table" }, h("slot", { key: '8bf8fe04e68aec61fa2b7bd8c7eea9f582e43e39' })));
+        return (h(Host, { key: '2fec1e86a16421adf2797f840065a6776f42aa91', role: "table" }, h("slot", { key: 'eda9de106f8c6cf11b442cb6b02ec553a664fc91' })));
     }
     static get is() { return "utrecht-table"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea.css

@@ -35,13 +35,13 @@
 /* stylelint-disable order/properties-alphabetical-order */
 .utrecht-textarea {
   /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
-  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
-  block-size: initial; /* harden */
-  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
-  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
   border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
+  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
+  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
+  block-size: initial; /* harden */
   box-sizing: border-box;
   color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
@@ -68,13 +68,19 @@
       var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textarea-border-width);
   border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
-  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 
+.utrecht-textarea--hover {
+  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+}
+
 .utrecht-textarea--disabled {
   background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -115,6 +121,15 @@
   opacity: 100%;
 }
 
+.utrecht-textarea--html-textarea {
+  /* `:hover` is declared before the other states, so that with equal specificity
+   * `:focus`, `:invalid`, `:read-only` and `:disabled` take precedence over `:hover`. */
+}
+.utrecht-textarea--html-textarea:hover {
+  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
+}
 .utrecht-textarea--html-textarea:focus {
   background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
@@ -142,10 +157,10 @@
       var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textarea-border-width);
   border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
-  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textarea--html-textarea {

package/dist/collection/components/textarea.js

@@ -32,10 +32,10 @@ export class Textarea {
     }
     render() {
         const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
-        return (h("textarea", { key: '689087acae39ee0f730d823effefc57f75508bab', autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        return (h("textarea", { key: '8d0619b0eac3d52387c9e1ad77f9a497abbd5567', autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.value = evt.target.value;
                 this.utrechtInput.emit(evt);
-            } }, h("slot", { key: 'd21ede5c922cc5b44bba7fa6e3dde8999fc3152b' })));
+            } }, h("slot", { key: 'db9c1df13699bd0462e0f70601c777ab10b60e6c' })));
     }
     static get is() { return "utrecht-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textbox.css

@@ -56,27 +56,40 @@
       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));
-  border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)));
+  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
+  min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
+  min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
+  --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
+  --_utrecht-textbox-border-block-end-width: var(
+    --utrecht-textbox-border-bottom-width,
+    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
+  );
   border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
   border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
   border-style: solid;
+  border-width: var(--_utrecht-textbox-border-width);
+  border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
   box-sizing: border-box;
+  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
   color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
+  --_utrecht-textbox-padding-block-end: var(
+    --utrecht-textbox-padding-block-end,
+    var(--utrecht-form-control-padding-block-end, 0)
+  );
+  --_utrecht-textbox-padding-block-start: var(
+    --utrecht-textbox-padding-block-start,
+    var(--utrecht-form-control-padding-block-start, 0)
+  );
+  block-size: initial; /* harden */
   display: block;
   font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial)); /* harden with `initial` */
   inline-size: 100%;
   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: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
   overflow: hidden;
-  padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
-  padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
+  padding-block-end: var(--_utrecht-textbox-padding-block-end);
+  padding-block-start: var(--_utrecht-textbox-padding-block-start);
   padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   white-space: nowrap;
@@ -90,10 +103,10 @@
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textbox-border-width);
   border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
-  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 
@@ -104,6 +117,12 @@
   cursor: var(--utrecht-action-disabled-cursor, not-allowed);
 }
 
+.utrecht-textbox--hover {
+  background-color: var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
+
 .utrecht-textbox--focus {
   background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
@@ -216,6 +235,15 @@
   font-variant-ligatures: none;
 }
 
+.utrecht-textbox--html-input {
+  /* `:hover` is declared before the other states, so that with equal specificity
+   * `:focus`, `:user-invalid`, `:read-only` and `:disabled` take precedence over `:hover`. */
+}
+.utrecht-textbox--html-input:hover {
+  background-color: var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
+  color: var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
+}
 .utrecht-textbox--html-input:focus {
   background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
@@ -243,10 +271,10 @@
       var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
     )
   );
-  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
+  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
   border-width: var(--_utrecht-textbox-border-width);
   border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
-  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
+  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
   color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
 }
 .utrecht-textbox--html-input {

package/dist/collection/components/textbox.js

@@ -21,7 +21,7 @@ export class Textbox {
     }
     render() {
         const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
-        return (h("input", { key: '20f1da7a717b9c77d8f2f03166eebd7546b830d2', class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+        return (h("input", { key: '3671df819b27514737503c16b6520ef0ad2dbf9a', class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
                 this.value = evt.target.value;
                 this.utrechtInput.emit(evt);
             } }));

package/dist/collection/components/top-task-link.css

@@ -24,10 +24,13 @@
   --utrecht-icon-color: currentColor;
   --utrecht-icon-size: var(--utrecht-toptask-link-icon-size);
   background-color: var(--utrecht-toptask-link-background-color);
+  border-radius: var(--utrecht-toptask-link-border-radius);
   color: var(--utrecht-toptask-link-color);
   display: flex;
   flex-direction: column;
+  font-family: var(--utrecht-toptask-link-font-family);
   font-size: var(--utrecht-toptask-link-font-size);
+  font-weight: var(--utrecht-toptask-link-font-weight);
   line-height: var(--utrecht-toptask-link-line-height);
   max-inline-size: var(--utrecht-toptask-link-max-inline-size);
   min-block-size: var(--utrecht-toptask-link-min-block-size);

package/dist/collection/components/top-task-link.js

@@ -11,7 +11,7 @@ export class TopTaskLink {
         this.target = undefined;
     }
     render() {
-        return (h("a", { key: '6c36538bce3eefed7b3f7916bc1721569cbba7b1', class: "utrecht-toptask-link", href: this.href, rel: this.external ? 'external noopener noreferrer' : undefined, target: this.target }, h("span", { key: '2b644561e7c14f9394f3b65809f5761291df025b', class: "utrecht-toptask-link__icon" }, h("slot", { key: '9c387d8b5f723ec5f81a50ffa858a342ddec89b5', name: "icon" })), h("span", { key: 'cb334c1f480b51d712c0d2b0af1e79567df1e81f', class: "utrecht-toptask-link__title" }, h("slot", { key: '47ce86a9c24484f4d2dc636631c6e5ced544207d' }))));
+        return (h("a", { key: '20396d609dfcbb5d69ab9a75e6869dc6b05d175c', class: "utrecht-toptask-link", href: this.href, rel: this.external ? 'external noopener noreferrer' : undefined, target: this.target }, h("span", { key: 'fffb35bfa5f56185a19ea30c7ef9bc8d8d4fbfe3', class: "utrecht-toptask-link__icon" }, h("slot", { key: 'abeabce4941f636b6f8339a685e434b5b385b1eb', name: "icon" })), h("span", { key: '3b225cc620ac2d983997aa5380f63195186ab3b7', class: "utrecht-toptask-link__title" }, h("slot", { key: '2d21e5e38f1b63fae1fac529dc70c7437c33139d' }))));
     }
     static get is() { return "utrecht-top-task-link"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/top-task-nav.js

@@ -8,7 +8,7 @@ export class TopTaskNav {
     render() {
         // TODO: Add accessible name for navigation landmark,
         // using `aria-labelledby` and a heading.
-        return (h("nav", { key: '391c9049974b3d7940ba47714901ae7d2a316f31', class: "utrecht-toptask-nav utrecht-toptask-nav--grid" }, h("slot", { key: 'eb47564782acd7bd3080a34bbd0fb5b7e5129e88' })));
+        return (h("nav", { key: '9e411e744d9265c0e2c462c7f71526bd70711bb4', class: "utrecht-toptask-nav utrecht-toptask-nav--grid" }, h("slot", { key: '8723db579b4cbb808531a4979e1820e2e2b32e4b' })));
     }
     static get is() { return "utrecht-top-task-nav"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/url-data.js

@@ -6,7 +6,7 @@
 import { h } from "@stencil/core";
 export class URLData {
     render() {
-        return (h("span", { key: '8e856d9cd6473d1e79882068b5d33aa144023aa3', class: "utrecht-url-data" }, h("slot", { key: 'f5a23705220eed2860696549cc260c7e7c0f9595' })));
+        return (h("span", { key: 'b0a01e1ce7975fa1423ac3262c59a6d433dab6e3', class: "utrecht-url-data" }, h("slot", { key: '294eb754c63c1bc0786b2d81c5a7c47aec32516f' })));
     }
     static get is() { return "utrecht-url-data"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -14,7 +14,7 @@ import { UtrechtCode } from './utrecht-code.js';
 import { UtrechtCodeBlock } from './utrecht-code-block.js';
 import { UtrechtColorSample } from './utrecht-color-sample.js';
 import { UtrechtColumnLayout } from './utrecht-column-layout.js';
-import { UtrechtContactCardTemplate } from './utrecht-contact-card-template.js';
+import { UtrechtContactCard } from './utrecht-contact-card.js';
 import { UtrechtCustomCheckbox } from './utrecht-custom-checkbox.js';
 import { UtrechtDataBadge } from './utrecht-data-badge.js';
 import { UtrechtDataList } from './utrecht-data-list.js';
@@ -91,6 +91,7 @@ import { UtrechtIconContainerTextiel } from './utrecht-icon-container-textiel.js
 import { UtrechtIconCross } from './utrecht-icon-cross.js';
 import { UtrechtIconDakloos } from './utrecht-icon-dakloos.js';
 import { UtrechtIconDementie } from './utrecht-icon-dementie.js';
+import { UtrechtIconDigitaleWeerbaarheid } from './utrecht-icon-digitale-weerbaarheid.js';
 import { UtrechtIconDocumenten } from './utrecht-icon-documenten.js';
 import { UtrechtIconDuurzaam } from './utrecht-icon-duurzaam.js';
 import { UtrechtIconEenzaamheid } from './utrecht-icon-eenzaamheid.js';
@@ -165,6 +166,7 @@ import { UtrechtIconMeldingKlacht } from './utrecht-icon-melding-klacht.js';
 import { UtrechtIconMeldingOpenbareruimte } from './utrecht-icon-melding-openbareruimte.js';
 import { UtrechtIconMeldingVerlichting } from './utrecht-icon-melding-verlichting.js';
 import { UtrechtIconMenselijk } from './utrecht-icon-menselijk.js';
+import { UtrechtIconMensenhandel } from './utrecht-icon-mensenhandel.js';
 import { UtrechtIconMenuDot } from './utrecht-icon-menu-dot.js';
 import { UtrechtIconMenuDotOpen } from './utrecht-icon-menu-dot-open.js';
 import { UtrechtIconMeterkast } from './utrecht-icon-meterkast.js';
@@ -201,6 +203,7 @@ import { UtrechtIconParticipatiePitch } from './utrecht-icon-participatie-pitch.
 import { UtrechtIconPaspoort } from './utrecht-icon-paspoort.js';
 import { UtrechtIconPhone } from './utrecht-icon-phone.js';
 import { UtrechtIconPinterest } from './utrecht-icon-pinterest.js';
+import { UtrechtIconPolarisatie } from './utrecht-icon-polarisatie.js';
 import { UtrechtIconPresentatie } from './utrecht-icon-presentatie.js';
 import { UtrechtIconPrijskaartje } from './utrecht-icon-prijskaartje.js';
 import { UtrechtIconReadAloud } from './utrecht-icon-read-aloud.js';
@@ -218,6 +221,7 @@ import { UtrechtIconSportEnCultuur } from './utrecht-icon-sport-en-cultuur.js';
 import { UtrechtIconSportVoetbal } from './utrecht-icon-sport-voetbal.js';
 import { UtrechtIconStandaardProjecten } from './utrecht-icon-standaard-projecten.js';
 import { UtrechtIconStookverbod } from './utrecht-icon-stookverbod.js';
+import { UtrechtIconStraatintimidatie } from './utrecht-icon-straatintimidatie.js';
 import { UtrechtIconStrand } from './utrecht-icon-strand.js';
 import { UtrechtIconStrooien } from './utrecht-icon-strooien.js';
 import { UtrechtIconSubsidie } from './utrecht-icon-subsidie.js';
@@ -252,10 +256,15 @@ import { UtrechtIconVuurwerk } from './utrecht-icon-vuurwerk.js';
 import { UtrechtIconWandelstok } from './utrecht-icon-wandelstok.js';
 import { UtrechtIconWarm } from './utrecht-icon-warm.js';
 import { UtrechtIconWarning } from './utrecht-icon-warning.js';
+import { UtrechtIconWeerbaarheid } from './utrecht-icon-weerbaarheid.js';
 import { UtrechtIconWerken } from './utrecht-icon-werken.js';
 import { UtrechtIconWerkzaamheden } from './utrecht-icon-werkzaamheden.js';
 import { UtrechtIconWhatsapp } from './utrecht-icon-whatsapp.js';
 import { UtrechtIconWijkDenkmee } from './utrecht-icon-wijk-denkmee.js';
+import { UtrechtIconWijkDialoog } from './utrecht-icon-wijk-dialoog.js';
+import { UtrechtIconWijkGesprek } from './utrecht-icon-wijk-gesprek.js';
+import { UtrechtIconWijkGroepsgesprek } from './utrecht-icon-wijk-groepsgesprek.js';
+import { UtrechtIconWijkInspraak } from './utrecht-icon-wijk-inspraak.js';
 import { UtrechtIconWijkOverlast } from './utrecht-icon-wijk-overlast.js';
 import { UtrechtIconWijkPark } from './utrecht-icon-wijk-park.js';
 import { UtrechtIconWijkProjecten } from './utrecht-icon-wijk-projecten.js';
@@ -283,6 +292,7 @@ import { UtrechtMapMarker } from './utrecht-map-marker.js';
 import { UtrechtMark } from './utrecht-mark.js';
 import { UtrechtMultilineData } from './utrecht-multiline-data.js';
 import { UtrechtNavBar } from './utrecht-nav-bar.js';
+import { UtrechtNote } from './utrecht-note.js';
 import { UtrechtNumberBadge } from './utrecht-number-badge.js';
 import { UtrechtNumberData } from './utrecht-number-data.js';
 import { UtrechtPage } from './utrecht-page.js';
@@ -319,7 +329,7 @@ import { UtrechtTextbox } from './utrecht-textbox.js';
 import { UtrechtTopTaskLink } from './utrecht-top-task-link.js';
 import { UtrechtTopTaskNav } from './utrecht-top-task-nav.js';
 import { UtrechtUrlData } from './utrecht-url-data.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-2f0ff193.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-169bb78d.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {
@@ -340,7 +350,7 @@ const defineCustomElements = (opts) => {
             UtrechtCodeBlock,
             UtrechtColorSample,
             UtrechtColumnLayout,
-            UtrechtContactCardTemplate,
+            UtrechtContactCard,
             UtrechtCustomCheckbox,
             UtrechtDataBadge,
             UtrechtDataList,
@@ -417,6 +427,7 @@ const defineCustomElements = (opts) => {
             UtrechtIconCross,
             UtrechtIconDakloos,
             UtrechtIconDementie,
+            UtrechtIconDigitaleWeerbaarheid,
             UtrechtIconDocumenten,
             UtrechtIconDuurzaam,
             UtrechtIconEenzaamheid,
@@ -491,6 +502,7 @@ const defineCustomElements = (opts) => {
             UtrechtIconMeldingOpenbareruimte,
             UtrechtIconMeldingVerlichting,
             UtrechtIconMenselijk,
+            UtrechtIconMensenhandel,
             UtrechtIconMenuDot,
             UtrechtIconMenuDotOpen,
             UtrechtIconMeterkast,
@@ -527,6 +539,7 @@ const defineCustomElements = (opts) => {
             UtrechtIconPaspoort,
             UtrechtIconPhone,
             UtrechtIconPinterest,
+            UtrechtIconPolarisatie,
             UtrechtIconPresentatie,
             UtrechtIconPrijskaartje,
             UtrechtIconReadAloud,
@@ -544,6 +557,7 @@ const defineCustomElements = (opts) => {
             UtrechtIconSportVoetbal,
             UtrechtIconStandaardProjecten,
             UtrechtIconStookverbod,
+            UtrechtIconStraatintimidatie,
             UtrechtIconStrand,
             UtrechtIconStrooien,
             UtrechtIconSubsidie,
@@ -578,10 +592,15 @@ const defineCustomElements = (opts) => {
             UtrechtIconWandelstok,
             UtrechtIconWarm,
             UtrechtIconWarning,
+            UtrechtIconWeerbaarheid,
             UtrechtIconWerken,
             UtrechtIconWerkzaamheden,
             UtrechtIconWhatsapp,
             UtrechtIconWijkDenkmee,
+            UtrechtIconWijkDialoog,
+            UtrechtIconWijkGesprek,
+            UtrechtIconWijkGroepsgesprek,
+            UtrechtIconWijkInspraak,
             UtrechtIconWijkOverlast,
             UtrechtIconWijkPark,
             UtrechtIconWijkProjecten,
@@ -609,6 +628,7 @@ const defineCustomElements = (opts) => {
             UtrechtMark,
             UtrechtMultilineData,
             UtrechtNavBar,
+            UtrechtNote,
             UtrechtNumberBadge,
             UtrechtNumberData,
             UtrechtPage,

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}