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

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

@@ -117,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))));
@@ -229,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))));

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.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';
@@ -292,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';
@@ -328,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') {
@@ -349,7 +350,7 @@ const defineCustomElements = (opts) => {
             UtrechtCodeBlock,
             UtrechtColorSample,
             UtrechtColumnLayout,
-            UtrechtContactCardTemplate,
+            UtrechtContactCard,
             UtrechtCustomCheckbox,
             UtrechtDataBadge,
             UtrechtDataList,
@@ -627,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}