@utrecht/web-component-library-stencil 1.0.0-alpha.521 → 1.0.0-alpha.523

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

@@ -168,6 +168,7 @@
 .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-bottom-width: var(--utrecht-textarea-border-bottom-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));
@@ -178,7 +179,7 @@
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: initial; /* harden */
-  height: initial; /* harden */
+  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);
@@ -188,7 +189,6 @@
   padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   resize: vertical;
   resize: block;
-  width: 100%;
 }
 
 .utrecht-textarea--invalid {

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

@@ -59,6 +59,7 @@
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-textbox {
   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-bottom-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));
@@ -69,14 +70,13 @@
   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: initial; /* harden */
-  height: 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));
   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));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
-  width: 100%;
 }
 
 .utrecht-textbox--invalid {

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

@@ -1033,7 +1033,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   white-space: nowrap;
 }
 .utrecht-html ol {
-  /* Configure `width` and `text-align` for `--center` */
+  /* Configure `box-sizing` and `text-align` for `--center` */
+  box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)));
   line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)));
@@ -1041,7 +1042,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)));
   padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch));
   text-align: start;
-  width: max-content;
   --utrecht-space-around: 1;
 }
 .utrecht-html ol > li {
@@ -1298,12 +1298,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
   color: var(--utrecht-select-color, var(--utrecht-form-control-color));
   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%;
   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));
   padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
   padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
-  width: 100%;
   /* <select> does not support :read-only */
 }
 .utrecht-html select:disabled {
@@ -1361,10 +1361,10 @@ however browsers don't seem to have implemented great looking supixel tweening y
   border-width: var(--utrecht-table-border-width, 0);
   font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-table-font-size, inherit);
+  inline-size: 100%;
   line-height: var(--utrecht-table-line-height, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
-  width: 100%;
   --utrecht-space-around: 1;
 }
 .utrecht-html caption {
@@ -1454,6 +1454,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html 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-bottom-width: var(--utrecht-textarea-border-bottom-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));
@@ -1464,7 +1465,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
   font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
   font-weight: initial; /* harden */
-  height: initial; /* harden */
+  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);
@@ -1474,7 +1475,6 @@ however browsers don't seem to have implemented great looking supixel tweening y
   padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
   resize: vertical;
   resize: block;
-  width: 100%;
 }
 .utrecht-html 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))));
@@ -1541,6 +1541,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
 .utrecht-html input[type=url i],
 .utrecht-html input[type=week i] {
   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-bottom-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));
@@ -1551,14 +1552,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
   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: initial; /* harden */
-  height: 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));
   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));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
-  width: 100%;
 }
 .utrecht-html input:not([type]):disabled,
 .utrecht-html input[type=date i]:disabled,
@@ -1734,6 +1734,8 @@ however browsers don't seem to have implemented great looking supixel tweening y
   font-variant-ligatures: none;
 }
 .utrecht-html ul {
+  /* Configure `box-sizing` and `text-align` for `--center` */
+  box-sizing: border-box;
   font-family: var(--utrecht-document-font-family, inherit);
   font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
   line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));

package/dist/collection/components/icon/generated.css

@@ -9,12 +9,12 @@
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 :host {
+  block-size: var(--utrecht-icon-size);
   color: var(--utrecht-icon-color);
   display: inline-block;
-  height: var(--utrecht-icon-size);
+  inline-size: var(--utrecht-icon-size);
   inset-block-start: var(--utrecht-icon-inset-block-start, 0);
   position: relative;
-  width: var(--utrecht-icon-size);
 }
 
 svg {
@@ -24,6 +24,8 @@ svg {
    * 
    *   <svg width="128px" height="128px">
    */
+  /* stylelint-disable-next-line property-disallowed-list */
   height: 100%;
+  /* stylelint-disable-next-line property-disallowed-list */
   width: 100%;
 }

package/dist/collection/components/icon/index.css

@@ -9,12 +9,12 @@
  * Copyright (c) 2021-2022 Frameless B.V.
  */
 :host {
+  block-size: var(--utrecht-icon-size);
   color: var(--utrecht-icon-color);
   display: inline-block;
-  height: var(--utrecht-icon-size);
+  inline-size: var(--utrecht-icon-size);
   inset-block-start: var(--utrecht-icon-inset-block-start, 0);
   position: relative;
-  width: var(--utrecht-icon-size);
 }
 
 ::slotted(svg) {
@@ -24,6 +24,8 @@
    * 
    *   <svg width="128px" height="128px">
    */
+  /* stylelint-disable-next-line property-disallowed-list */
   height: 100%;
+  /* stylelint-disable-next-line property-disallowed-list */
   width: 100%;
 }

package/dist/collection/components/map-marker/index.css

@@ -12,6 +12,7 @@
   --utrecht-icon-size: var(--utrecht-map-marker-icon-size);
   align-items: center;
   background-color: var(--utrecht-map-marker-background-color);
+  block-size: var(--utrecht-map-marker-size);
   border-color: var(--utrecht-map-marker-border-color);
   border-radius: 50%;
   border-style: solid;
@@ -19,7 +20,6 @@
   box-shadow: 13px 3px 3px -2px var(--utrecht-map-marker-box-shadow-color);
   color: var(--utrecht-map-marker-color);
   display: flex;
-  height: var(--utrecht-map-marker-size);
+  inline-size: var(--utrecht-map-marker-size);
   justify-content: center;
-  width: var(--utrecht-map-marker-size);
 }

package/dist/collection/components/navigatie sidenav/index.css

@@ -23,11 +23,11 @@
   --utrecht-sidenav-marker-outline-width: 2px;
   border-block-end: 1px solid var(--utrecht-color-grey-80);
   border-block-start: 1px solid var(--utrecht-color-grey-80);
+  inline-size: 19rem;
   margin-block-end: 0;
   margin-block-start: 0;
   padding-block-end: 0;
   padding-block-start: 0;
-  width: 19rem;
 }
 
 .utrecht-sidenav__list {
@@ -106,15 +106,15 @@
 .utrecht-sidenav__link--parent,
 .utrecht-sidenav__link--child)::after {
   background: var(--utrecht-sidenav-connection-color);
+  block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
   bottom: 0;
   content: "";
   display: block;
-  height: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));
+  inline-size: var(--utrecht-sidenav-connection-inline-size);
   left: 3px;
   overflow: hidden;
   position: absolute;
   top: calc(var(--utrecht-sidenav-marker-offset));
-  width: var(--utrecht-sidenav-connection-inline-size);
   z-index: 5;
 }
 
@@ -128,27 +128,27 @@
 /* Little fix to move the dot to the right */
 .utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before {
   background-color: var(--utrecht-sidenav-item-marker-color);
+  block-size: var(--utrecht-sidenav-marker-height);
   border-radius: 100%;
   content: "";
-  height: var(--utrecht-sidenav-marker-height);
+  inline-size: 8px;
   left: var(--utrecht-sidenav-marker-offset);
   overflow: hidden;
   position: absolute;
   top: 20px; /* Hard value? */
   transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));
-  width: 8px;
   z-index: 10;
 }
 
 /* Add dot bullets on child links */
 .utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before {
   background-color: transparent;
+  block-size: 4px;
   border: 2px solid var(--utrecht-sidenav-link-color);
-  height: 4px;
+  inline-size: 4px;
   left: 1.2rem;
   top: 16px;
   transform: translateY(-50%) translateX(-19.5px);
-  width: 4px;
 }
 
 /* selector must override .utrecht-sidenav__marker--child */

package/dist/collection/components/table/table.css

@@ -15,9 +15,9 @@
   border-width: var(--utrecht-table-border-width, 0);
   font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
   font-size: var(--utrecht-table-font-size, inherit);
+  inline-size: 100%;
   line-height: var(--utrecht-table-line-height, inherit);
   margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
   margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
-  width: 100%;
   display: table;
 }

package/dist/collection/components/textbox/index.css

@@ -24,6 +24,7 @@
 /* stylelint-disable-next-line block-no-empty */
 .utrecht-textbox {
   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-bottom-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));
@@ -34,14 +35,13 @@
   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: initial; /* harden */
-  height: 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));
   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));
   padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
-  width: 100%;
 }
 
 .utrecht-textbox--invalid {

package/dist/components/index.stencil4.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const indexCss = ".utrecht-icon{color:var(--utrecht-icon-color);display:inline-block;height:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative;width:var(--utrecht-icon-size)}.utrecht-icon svg{height:100%;width:100%}:host{display:inline;}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host{border-color:currentColor;border-radius:5px;border-style:solid;border-width:1px}}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative}.utrecht-icon svg{height:100%;width:100%}:host{display:inline;}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){:host{border-color:currentColor;border-radius:5px;border-style:solid;border-width:1px}}:host([hidden]){display:none !important}";
 
 const DigidLogo = /*@__PURE__*/ proxyCustomElement(class DigidLogo extends HTMLElement {
   constructor() {

package/dist/components/index.stencil4.js.map

@@ -1 +1 @@
-{"file":"index.stencil4.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,ieAAie;;MCare,SAAS;;;;;;EACpB,MAAM;IACJ,QACE,WACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,aAAa,IAErB,yBAAoB,EACpB,YAAM,CAAC,EAAC,oFAAoF,GAAG,EAC/F,YACE,CAAC,EAAC,wZAAwZ,EAC1Z,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,iKAAiK,EACnK,IAAI,EAAC,SAAS,GACd,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/digid-logo/index.scss?tag=utrecht-digid-logo&encapsulation=shadow","./src/components/digid-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n@import \"~@utrecht/components/icon/css\";\n\n@mixin utrecht-black-icon--media-query-forced-colors {\n  /* A black icon can become invisible on a forced black background.\n   * Add a contrasting border color */\n  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {\n    border-color: currentColor;\n    border-radius: 5px;\n    border-style: solid;\n\n    /* Warning: there layout difference because of the added 1px border */\n    border-width: 1px;\n  }\n}\n\n:host {\n  display: inline;\n\n  @include utrecht-black-icon--media-query-forced-colors;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-digid-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class DigidLogo {\n  render() {\n    return (\n      <svg\n        class=\"utrecht-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        version=\"1.1\"\n        viewBox=\"0 0 150 150\"\n      >\n        <title>DigiD</title>\n        <path d=\"M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z\" />\n        <path\n          d=\"M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z\"\n          fill=\"#FFFFFF\"\n        />\n        <path\n          d=\"M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z\"\n          fill=\"#E17000\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}
+{"file":"index.stencil4.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,2eAA2e;;MCa/e,SAAS;;;;;;EACpB,MAAM;IACJ,QACE,WACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,KAAK,EACb,OAAO,EAAC,aAAa,IAErB,yBAAoB,EACpB,YAAM,CAAC,EAAC,oFAAoF,GAAG,EAC/F,YACE,CAAC,EAAC,wZAAwZ,EAC1Z,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,iKAAiK,EACnK,IAAI,EAAC,SAAS,GACd,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/digid-logo/index.scss?tag=utrecht-digid-logo&encapsulation=shadow","./src/components/digid-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n@import \"~@utrecht/components/icon/css\";\n\n@mixin utrecht-black-icon--media-query-forced-colors {\n  /* A black icon can become invisible on a forced black background.\n   * Add a contrasting border color */\n  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {\n    border-color: currentColor;\n    border-radius: 5px;\n    border-style: solid;\n\n    /* Warning: there layout difference because of the added 1px border */\n    border-width: 1px;\n  }\n}\n\n:host {\n  display: inline;\n\n  @include utrecht-black-icon--media-query-forced-colors;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-digid-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class DigidLogo {\n  render() {\n    return (\n      <svg\n        class=\"utrecht-icon\"\n        width=\"100%\"\n        height=\"100%\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        version=\"1.1\"\n        viewBox=\"0 0 150 150\"\n      >\n        <title>DigiD</title>\n        <path d=\"M136 150H14c-8 0-14-6-14-14V14C0 6 6 0 14 0h122c8 0 14 6 14 14v122c0 8-6 14-14 14z\" />\n        <path\n          d=\"M17 115V79h10c12 0 19 6 19 17 0 13-8 19-19 19H17zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25zM54 77c3 0 4 1 4 3s-1 4-4 4c-2 0-3-2-3-4s1-3 3-3zm3 38h-6V88h6v27zM72 109h6c6 0 9 3 9 7 0 5-4 9-14 9-8 0-11-2-11-7 0-2 1-4 4-6l-2-3c0-2 1-3 3-4-3-2-4-4-4-8 0-6 4-10 11-10l4 1h9v4h-4l2 5c0 6-4 9-12 9h-3l-1 1c0 2 1 2 3 2zm1 12c6 0 8-2 8-4s-1-2-3-2l-9-1-2 3c0 2 2 4 6 4zm6-24c0-3-2-5-5-5s-5 1-5 5 1 5 5 5c3 0 5-1 5-5z\"\n          fill=\"#FFFFFF\"\n        />\n        <path\n          d=\"M94 77c2 0 3 1 3 3s-1 4-3 4c-3 0-4-2-4-4s1-3 4-3zm3 38h-6V88h6v27zM105 115V79h10c12 0 18 6 18 17 0 13-7 19-19 19h-9zm6-6h4c7 0 12-4 12-13 0-8-5-12-13-12h-3v25z\"\n          fill=\"#E17000\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-breadcrumb.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const indexCss = ".utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{block-size:0;border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;inline-size:0;inset-block-start:50%;inset-inline-start:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb__heading{display:none}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start, 8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;height:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%;width:0}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-color:var(--utrecht-link-text-decoration-color, currentColor);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color, var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{block-size:0;border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;inline-size:0;inset-block-start:50%;inset-inline-start:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-breadcrumb{--utrecht-focus-background-color:var(--utrecht-breadcrumb-link-focus-background-color);--utrecht-link-background-color:var(--utrecht-breadcrumb-link-background-color);--utrecht-link-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-focus-color:var(--utrecht-breadcrumb-link-focus-color, var(--utrecht-breadcrumb-link-color));--utrecht-link-focus-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-hover-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-hover-text-decoration:var(--utrecht-link-text-decoration);--utrecht-link-visited-color:var(--utrecht-breadcrumb-link-color);--utrecht-link-visited-text-decoration:var(--utrecht-link-text-decoration);font-family:var(--utrecht-document-font-family, inherit);font-size:var(--utrecht-breadcrumb-font-size);text-transform:var(--utrecht-document-text-transform, inherit)}.utrecht-breadcrumb__heading{display:none}.utrecht-breadcrumb__list{block-size:var(--utrecht-breadcrumb-block-size);display:flex}ol.utrecht-breadcrumb__list{list-style:none;margin-block-end:0;margin-block-start:0;padding-inline-start:0}.utrecht-breadcrumb__item{block-size:100%}.utrecht-breadcrumb__link{background-color:var(--utrecht-breadcrumb-link-background-color);display:block;padding-block-end:var(--utrecht-breadcrumb-item-padding-block-end, 8px);padding-block-start:var(--utrecht-breadcrumb-item-padding-block-start, 8px);padding-inline-end:var(--utrecht-breadcrumb-item-padding-inline-end, 8px);padding-inline-start:var(--utrecht-breadcrumb-item-padding-inline-start, 8px)}.utrecht-breadcrumb--arrows{--utrecht-breadcrumb-arrow-size:24px;overflow:hidden}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link{padding-inline-end:0;position:relative}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{block-size:0;border-block-end-width:var(--utrecht-breadcrumb-block-size);border-block-start-width:var(--utrecht-breadcrumb-block-size);border-color:transparent;border-style:solid;content:\" \";display:block;inline-size:0;left:100%;margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));position:absolute;top:50%}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::after{border-inline-start-color:var(--utrecht-breadcrumb-link-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);z-index:2}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link::before{border-inline-start-color:var(--utrecht-document-background-color);border-inline-start-width:var(--utrecht-breadcrumb-arrow-size);margin-block-start:calc(-1 * var(--utrecht-breadcrumb-block-size));margin-inline-start:1px;z-index:1}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus{background-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link--focus::after,.utrecht-breadcrumb--arrows .utrecht-breadcrumb__link:focus::after{border-inline-start-color:var(--utrecht-breadcrumb-link-focus-background-color)}.utrecht-breadcrumb--arrows .utrecht-breadcrumb__item~.utrecht-breadcrumb__item .utrecht-breadcrumb__link{padding-inline-start:calc(var(--utrecht-breadcrumb-item-padding-inline-start) + var(--utrecht-breadcrumb-arrow-size))}.utrecht-breadcrumb__item~.utrecht-breadcrumb__item{margin-inline-start:var(--utrecht-breadcrumb-item-divider-inline-size)}.utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-color:var(--utrecht-link-text-decoration-color, currentColor);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color, var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}:host{display:block}:host([hidden]){display:none !important}";
 
 const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTMLElement {
   constructor() {

package/dist/components/utrecht-breadcrumb.js.map

@@ -1 +1 @@
-{"file":"utrecht-breadcrumb.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,kyRAAkyR;;MCYtyR,UAAU;;;;;;;;EAIrB,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAElB,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;IAE3C,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,KAAK,QAAQ,IAAI,4BAA4B,CAAC,IAC1F,UAAI,KAAK,EAAC,0BAA0B,EAAC,SAAS,QAAC,QAAQ,EAAC,mCAAmC,IACxF,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,MACzC,UACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,0BAA0B,EAChC,SAAS,QACT,QAAQ,EAAC,6BAA6B,EACtC,QAAQ,EAAC,iBAAiB,IAE1B,SACE,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,cAAc,EAAE,OAAO,IAAI,uBAAuB,CAAC,EAC3F,IAAI,EAAE,IAAI,kBACI,OAAO,GAAG,UAAU,GAAG,IAAI,EACzC,QAAQ,EAAC,MAAM,IAEf,YAAM,KAAK,EAAC,0BAA0B,EAAC,QAAQ,EAAC,MAAM,IACnD,KAAK,CACD,EACP,YAAM,QAAQ,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,GAAG,CAAC,GAAI,CAC9C,CACD,CACN,CAAC,CACC,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/breadcrumb/index.scss?tag=utrecht-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/breadcrumb/css\";\n@import \"~@utrecht/components/link/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 */\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-breadcrumb',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Prop() json: string;\n  @Prop() variant: string;\n\n  render() {\n    const { json, variant } = this;\n    console.log(json);\n\n    const items = json ? JSON.parse(json) : [];\n\n    return (\n      <nav class={clsx('utrecht-breadcrumb', variant === 'arrows' && 'utrecht-breadcrumb--arrows')}>\n        <ol class=\"utrecht-breadcrumb__list\" itemscope itemtype=\"https://schema.org/BreadcrumbList\">\n          {items.map(({ href, title, current }, index) => (\n            <li\n              key={href}\n              class=\"utrecht-breadcrumb__item\"\n              itemscope\n              itemtype=\"https://schema.org/ListItem\"\n              itemprop=\"itemListElement\"\n            >\n              <a\n                class={clsx('utrecht-breadcrumb__link', 'utrecht-link', current && 'utrecht-link--current')}\n                href={href}\n                aria-current={current ? 'location' : null}\n                itemprop=\"item\"\n              >\n                <span class=\"utrecht-breadcrumb__text\" itemprop=\"name\">\n                  {title}\n                </span>\n                <meta itemprop=\"position\" content={index + 1} />\n              </a>\n            </li>\n          ))}\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-breadcrumb.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,4yRAA4yR;;MCYhzR,UAAU;;;;;;;;EAIrB,MAAM;IACJ,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAElB,MAAM,KAAK,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;IAE3C,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,OAAO,KAAK,QAAQ,IAAI,4BAA4B,CAAC,IAC1F,UAAI,KAAK,EAAC,0BAA0B,EAAC,SAAS,QAAC,QAAQ,EAAC,mCAAmC,IACxF,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,MACzC,UACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,0BAA0B,EAChC,SAAS,QACT,QAAQ,EAAC,6BAA6B,EACtC,QAAQ,EAAC,iBAAiB,IAE1B,SACE,KAAK,EAAE,IAAI,CAAC,0BAA0B,EAAE,cAAc,EAAE,OAAO,IAAI,uBAAuB,CAAC,EAC3F,IAAI,EAAE,IAAI,kBACI,OAAO,GAAG,UAAU,GAAG,IAAI,EACzC,QAAQ,EAAC,MAAM,IAEf,YAAM,KAAK,EAAC,0BAA0B,EAAC,QAAQ,EAAC,MAAM,IACnD,KAAK,CACD,EACP,YAAM,QAAQ,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,GAAG,CAAC,GAAI,CAC9C,CACD,CACN,CAAC,CACC,CACD,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/breadcrumb/index.scss?tag=utrecht-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/breadcrumb/css\";\n@import \"~@utrecht/components/link/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 */\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-breadcrumb',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Prop() json: string;\n  @Prop() variant: string;\n\n  render() {\n    const { json, variant } = this;\n    console.log(json);\n\n    const items = json ? JSON.parse(json) : [];\n\n    return (\n      <nav class={clsx('utrecht-breadcrumb', variant === 'arrows' && 'utrecht-breadcrumb--arrows')}>\n        <ol class=\"utrecht-breadcrumb__list\" itemscope itemtype=\"https://schema.org/BreadcrumbList\">\n          {items.map(({ href, title, current }, index) => (\n            <li\n              key={href}\n              class=\"utrecht-breadcrumb__item\"\n              itemscope\n              itemtype=\"https://schema.org/ListItem\"\n              itemprop=\"itemListElement\"\n            >\n              <a\n                class={clsx('utrecht-breadcrumb__link', 'utrecht-link', current && 'utrecht-link--current')}\n                href={href}\n                aria-current={current ? 'location' : null}\n                itemprop=\"item\"\n              >\n                <span class=\"utrecht-breadcrumb__text\" itemprop=\"name\">\n                  {title}\n                </span>\n                <meta itemprop=\"position\" content={index + 1} />\n              </a>\n            </li>\n          ))}\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-contact-card-template.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$4 } from './index.stencil.js';
 import { d as defineCustomElement$3 } from './index.stencil2.js';
 import { d as defineCustomElement$2 } from './index.stencil3.js';
 
-const indexCss = ".utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-color:var(--utrecht-link-text-decoration-color, currentColor);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color, var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:hsl(207, 60%, 91%);background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-xl);padding-block-start:var(--utrecht-space-block-xl);padding-inline-end:var(--utrecht-space-inline-xl);padding-inline-start:var(--utrecht-space-inline-xl)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{margin-block-start:var(--utrecht-space-row-lg);width:100%}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
+const indexCss = ".utrecht-link{--utrecht-icon-size:var(--utrecht-link-icon-size, 1em);color:var(--utrecht-link-color, blue);text-decoration:var(--utrecht-link-text-decoration, underline);text-decoration-color:var(--utrecht-link-text-decoration-color, currentColor);text-decoration-skip-ink:all;text-decoration-thickness:max(var(--utrecht-link-text-decoration-thickness), 1px);text-underline-offset:var(--utrecht-link-text-underline-offset)}.utrecht-link--icon-left{background-image:var(--utrecht-link-icon-left-background-image, none);background-position:0 0.25em;background-repeat:no-repeat;color:var(--utrecht-link-color, blue);font-weight:var(--utrecht-typography-weight-scale-bold-font-weight);padding-inline-start:var(--utrecht-space-block-md);text-decoration:none}.utrecht-link:visited,.utrecht-link--visited{color:var(--utrecht-link-visited-color, var(--utrecht-link-color))}.utrecht-link:hover,.utrecht-link--hover{color:var(--utrecht-link-hover-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-hover-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-hover-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px)}.utrecht-link--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus{background-color:var(--utrecht-link-focus-background-color, transparent);color:var(--utrecht-link-focus-color, var(--utrecht-link-color));text-decoration:var(--utrecht-link-focus-text-decoration, var(--utrecht-link-text-decoration, underline));text-decoration-skip:none;text-decoration-skip-ink:none;text-decoration-thickness:max(var(--utrecht-link-focus-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-link:active,.utrecht-link--active{color:var(--utrecht-link-active-color, var(--utrecht-link-color))}.utrecht-link--telephone{white-space:nowrap}.utrecht-link--box-content{color:unset;display:inline-block;text-decoration:unset;text-decoration-skip-ink:unset;text-decoration-thickness:unset;text-underline-offset:unset}.utrecht-link--placeholder{color:var(--utrecht-link-placeholder-color, var(--utrecht-link-color));cursor:var(--utrecht-action-disabled-cursor);text-decoration:none}.utrecht-contact-card{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;--utrecht-heading-2-text-transform:uppercase;--utrecht-heading-2-font-size:var(--utrecht-typography-scale-md-font-size);--utrecht-contact-card-background-color:hsl(207 60% 91%);--utrecht-contact-card-background-color-2:hsl(207 60% 96%);background-color:hsl(207, 60%, 91%);background-image:linear-gradient(45deg, var(--utrecht-contact-card-background-color), var(--utrecht-contact-card-background-color) 50%, var(--utrecht-contact-card-background-color-2) 50%, var(--utrecht-contact-card-background-color-2));background-position-x:66%;background-size:200%;color:var(--utrecht-color-black);padding-block-end:var(--utrecht-space-block-xl);padding-block-start:var(--utrecht-space-block-xl);padding-inline-end:var(--utrecht-space-inline-xl);padding-inline-start:var(--utrecht-space-inline-xl)}.utrecht-contact-card__content{display:flex;flex-direction:row}.utrecht-contact-card__section{inline-size:100%;margin-block-start:var(--utrecht-space-row-lg)}.utrecht-contact-card__telephone{--utrecht-paragraph-font-size:var(--utrecht-typography-scale-2xl-font-size)}";
 
 const ContactCardTemplate = /*@__PURE__*/ proxyCustomElement(class ContactCardTemplate extends HTMLElement {
   constructor() {

package/dist/components/utrecht-contact-card-template.js.map

@@ -1 +1 @@
-{"file":"utrecht-contact-card-template.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,01JAA01J;;MCO91J,mBAAmB;;;;;;EAC9B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC/B,+CAAsD,EACtD,WAAK,KAAK,EAAC,+BAA+B,IACxC,WAAK,KAAK,EAAC,+BAA+B,IACxC,wCAA+C,EAC/C,yBAAmB,KAAK,EAAC,iCAAiC,IACxD,SACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,sCAAsC,EAC5C,KAAK,EAAC,qCAAqC,aAGzC,CACc,EACpB,yEAA2E,CACvE,EACN,WAAK,KAAK,EAAC,+BAA+B,IACxC,sCAA6C,EAC7C,6BACE,SACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,yCAAyC,EAC9C,KAAK,EAAC,mDAAmD,uBAGvD,CACc,CAChB,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/contact-card-template/index.scss?tag=utrecht-contact-card-template&encapsulation=shadow","./src/components/contact-card-template/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/link/css/index\";\n@import \"~@utrecht/components/templates/contact-card-template/css\";\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-contact-card-template',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class ContactCardTemplate {\n  render() {\n    return (\n      <div class=\"utrecht-contact-card\">\n        <utrecht-heading-2>Hulp en contact</utrecht-heading-2>\n        <div class=\"utrecht-contact-card__content\">\n          <div class=\"utrecht-contact-card__section\">\n            <utrecht-heading-3>Telefoon</utrecht-heading-3>\n            <utrecht-paragraph class=\"utrecht-contact-card__telephone\">\n              <a\n                href=\"tel:14-030\"\n                class=\"utrecht-link utrecht-link--telephone\"\n                title=\"Telefoonnummer van gemeente Utrecht\"\n              >\n                14 030\n              </a>\n            </utrecht-paragraph>\n            <utrecht-paragraph>Maandag t/m vrijdag 8.30 – 17.30 uur</utrecht-paragraph>\n          </div>\n          <div class=\"utrecht-contact-card__section\">\n            <utrecht-heading-3>E-mail</utrecht-heading-3>\n            <utrecht-paragraph>\n              <a\n                class=\"utrecht-link\"\n                href=\"https://www.utrecht.nl/reactieformulier\"\n                title=\"Algemeen reactieformulier van de gemeente Utrecht\"\n              >\n                reactieformulier\n              </a>\n            </utrecht-paragraph>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-contact-card-template.js","mappings":";;;;;AAAA,MAAM,QAAQ,GAAG,g2JAAg2J;;MCOp2J,mBAAmB;;;;;;EAC9B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC/B,+CAAsD,EACtD,WAAK,KAAK,EAAC,+BAA+B,IACxC,WAAK,KAAK,EAAC,+BAA+B,IACxC,wCAA+C,EAC/C,yBAAmB,KAAK,EAAC,iCAAiC,IACxD,SACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,sCAAsC,EAC5C,KAAK,EAAC,qCAAqC,aAGzC,CACc,EACpB,yEAA2E,CACvE,EACN,WAAK,KAAK,EAAC,+BAA+B,IACxC,sCAA6C,EAC7C,6BACE,SACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,yCAAyC,EAC9C,KAAK,EAAC,mDAAmD,uBAGvD,CACc,CAChB,CACF,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/contact-card-template/index.scss?tag=utrecht-contact-card-template&encapsulation=shadow","./src/components/contact-card-template/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/link/css/index\";\n@import \"~@utrecht/components/templates/contact-card-template/css\";\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-contact-card-template',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class ContactCardTemplate {\n  render() {\n    return (\n      <div class=\"utrecht-contact-card\">\n        <utrecht-heading-2>Hulp en contact</utrecht-heading-2>\n        <div class=\"utrecht-contact-card__content\">\n          <div class=\"utrecht-contact-card__section\">\n            <utrecht-heading-3>Telefoon</utrecht-heading-3>\n            <utrecht-paragraph class=\"utrecht-contact-card__telephone\">\n              <a\n                href=\"tel:14-030\"\n                class=\"utrecht-link utrecht-link--telephone\"\n                title=\"Telefoonnummer van gemeente Utrecht\"\n              >\n                14 030\n              </a>\n            </utrecht-paragraph>\n            <utrecht-paragraph>Maandag t/m vrijdag 8.30 – 17.30 uur</utrecht-paragraph>\n          </div>\n          <div class=\"utrecht-contact-card__section\">\n            <utrecht-heading-3>E-mail</utrecht-heading-3>\n            <utrecht-paragraph>\n              <a\n                class=\"utrecht-link\"\n                href=\"https://www.utrecht.nl/reactieformulier\"\n                title=\"Algemeen reactieformulier van de gemeente Utrecht\"\n              >\n                reactieformulier\n              </a>\n            </utrecht-paragraph>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-eherkenning-logo.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const indexCss = ".utrecht-icon{color:var(--utrecht-icon-color);display:inline-block;height:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative;width:var(--utrecht-icon-size)}.utrecht-icon svg{height:100%;width:100%}:host{display:inline}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative}.utrecht-icon svg{height:100%;width:100%}:host{display:inline}:host([hidden]){display:none !important}";
 
 const EherkenningLogo = /*@__PURE__*/ proxyCustomElement(class EherkenningLogo extends HTMLElement {
   constructor() {

package/dist/components/utrecht-eherkenning-logo.js.map

@@ -1 +1 @@
-{"file":"utrecht-eherkenning-logo.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uTAAuT;;MCa3T,eAAe;;;;;;EAC1B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,IAC7F,+BAA0B,EAC1B,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EAC9C,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,ykBAAykB,GAC3kB,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,8JAA8J,GAChK,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,4RAA4R,GAC9R,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,wKAAwK,GAC1K,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,0JAA0J,GAC5J,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/eherkenning-logo/index.scss?tag=utrecht-eherkenning-logo&encapsulation=shadow","./src/components/eherkenning-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/icon/css\";\n\n:host {\n  display: inline;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-eherkenning-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class EherkenningLogo {\n  render() {\n    return (\n      <svg class=\"utrecht-icon\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"-1 0 81 80\">\n        <title>Eherkenning</title>\n        <rect fill=\"#E0E0E0\" width=\"80\" height=\"80\" />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#00328C\"\n          d=\"M37.363,23.178c0,2.027,0,4.055,0,6.08c-4.257,0-9.55,0-14.208,0  c-1.662,0-3.648-0.207-4.799,0.193c-1.041,0.359-1.796,1.169-2.176,2.111c-0.439,1.084-0.32,2.8-0.32,4.414c0,3.425,0,6.055,0,9.475  c0,1.531-0.159,3.325,0.191,4.479c0.316,1.042,1.316,2.194,2.561,2.496c1.318,0.319,3.094,0.064,4.672,0.064  c4.599,0,9.521,0,14.08,0c0,2.025,0,4.053,0,6.08c-6.402-0.083-12.492,0.112-18.176,0c-4.937-0.099-8.966-3.966-9.344-8.833  c-0.226-2.883,0-5.901,0-8.769c0-2.971-0.19-5.932,0-8.767c0.328-4.896,4.208-8.676,8.959-9.024c3.002-0.222,6.129,0,9.28,0  C31.145,23.178,34.26,23.178,37.363,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M42.867,23.178c1.962,0,3.926,0,5.888,0c0,4.864,0,9.729,0,14.592  c-1.984,0-3.969,0-5.952,0c0-4.801,0-9.6,0-14.399C42.797,23.279,42.792,23.188,42.867,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M64.434,23.178c1.941,0,3.883,0,5.824,0c0,11.798,0,23.595,0,35.393  c-1.962,0-3.926,0-5.888,0c0-4.992,0-9.984,0-14.977c-5.077,0-10.155,0-15.232,0c0.824-1.95,1.651-3.896,2.56-5.76  c4.203,0,8.405,0,12.608,0c0.15-4.693,0.021-9.664,0.064-14.464C64.365,23.279,64.36,23.188,64.434,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#00328C\"\n          d=\"M19.89,37.77c5.376,0,10.752,0,16.129,0c-0.772,2.022-1.748,3.843-2.56,5.824  c-4.544,0-9.088,0-13.633,0c0-1.877,0-3.755,0-5.633C19.821,37.87,19.816,37.781,19.89,37.77z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M42.93,43.594c1.941,0,3.883,0,5.824,0c0,4.992,0,9.984,0,14.977  c-1.984,0-3.969,0-5.952,0c0-4.93,0-9.856,0-14.783C42.8,43.678,42.851,43.62,42.93,43.594z\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-eherkenning-logo.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,iUAAiU;;MCarU,eAAe;;;;;;EAC1B,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,YAAY,IAC7F,+BAA0B,EAC1B,YAAM,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,GAAG,EAC9C,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,ykBAAykB,GAC3kB,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,8JAA8J,GAChK,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,4RAA4R,GAC9R,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,wKAAwK,GAC1K,EACF,yBACY,SAAS,EACnB,IAAI,EAAC,SAAS,EACd,CAAC,EAAC,0JAA0J,GAC5J,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/eherkenning-logo/index.scss?tag=utrecht-eherkenning-logo&encapsulation=shadow","./src/components/eherkenning-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/icon/css\";\n\n:host {\n  display: inline;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-eherkenning-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class EherkenningLogo {\n  render() {\n    return (\n      <svg class=\"utrecht-icon\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"-1 0 81 80\">\n        <title>Eherkenning</title>\n        <rect fill=\"#E0E0E0\" width=\"80\" height=\"80\" />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#00328C\"\n          d=\"M37.363,23.178c0,2.027,0,4.055,0,6.08c-4.257,0-9.55,0-14.208,0  c-1.662,0-3.648-0.207-4.799,0.193c-1.041,0.359-1.796,1.169-2.176,2.111c-0.439,1.084-0.32,2.8-0.32,4.414c0,3.425,0,6.055,0,9.475  c0,1.531-0.159,3.325,0.191,4.479c0.316,1.042,1.316,2.194,2.561,2.496c1.318,0.319,3.094,0.064,4.672,0.064  c4.599,0,9.521,0,14.08,0c0,2.025,0,4.053,0,6.08c-6.402-0.083-12.492,0.112-18.176,0c-4.937-0.099-8.966-3.966-9.344-8.833  c-0.226-2.883,0-5.901,0-8.769c0-2.971-0.19-5.932,0-8.767c0.328-4.896,4.208-8.676,8.959-9.024c3.002-0.222,6.129,0,9.28,0  C31.145,23.178,34.26,23.178,37.363,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M42.867,23.178c1.962,0,3.926,0,5.888,0c0,4.864,0,9.729,0,14.592  c-1.984,0-3.969,0-5.952,0c0-4.801,0-9.6,0-14.399C42.797,23.279,42.792,23.188,42.867,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M64.434,23.178c1.941,0,3.883,0,5.824,0c0,11.798,0,23.595,0,35.393  c-1.962,0-3.926,0-5.888,0c0-4.992,0-9.984,0-14.977c-5.077,0-10.155,0-15.232,0c0.824-1.95,1.651-3.896,2.56-5.76  c4.203,0,8.405,0,12.608,0c0.15-4.693,0.021-9.664,0.064-14.464C64.365,23.279,64.36,23.188,64.434,23.178z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#00328C\"\n          d=\"M19.89,37.77c5.376,0,10.752,0,16.129,0c-0.772,2.022-1.748,3.843-2.56,5.824  c-4.544,0-9.088,0-13.633,0c0-1.877,0-3.755,0-5.633C19.821,37.87,19.816,37.781,19.89,37.77z\"\n        />\n        <path\n          fill-rule=\"evenodd\"\n          fill=\"#FF0079\"\n          d=\"M42.93,43.594c1.941,0,3.883,0,5.824,0c0,4.992,0,9.984,0,14.977  c-1.984,0-3.969,0-5.952,0c0-4.93,0-9.856,0-14.783C42.8,43.678,42.851,43.62,42.93,43.594z\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-eidas-logo.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const indexCss = ".utrecht-icon{color:var(--utrecht-icon-color);display:inline-block;height:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative;width:var(--utrecht-icon-size)}.utrecht-icon svg{height:100%;width:100%}:host{display:inline}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-icon{block-size:var(--utrecht-icon-size);color:var(--utrecht-icon-color);display:inline-block;inline-size:var(--utrecht-icon-size);inset-block-start:var(--utrecht-icon-inset-block-start, 0);position:relative}.utrecht-icon svg{height:100%;width:100%}:host{display:inline}:host([hidden]){display:none !important}";
 
 const EidasLogo = /*@__PURE__*/ proxyCustomElement(class EidasLogo extends HTMLElement {
   constructor() {

package/dist/components/utrecht-eidas-logo.js.map

@@ -1 +1 @@
-{"file":"utrecht-eidas-logo.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,uTAAuT;;MCa3T,SAAS;;;;;;EACpB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YACE,CAAC,EAAC,6LAA6L,EAC/L,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,0IAA0I,EAC5I,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,0hCAA0hC,EAC5hC,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/eidas-logo/index.scss?tag=utrecht-eidas-logo&encapsulation=shadow","./src/components/eidas-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/icon/css\";\n\n:host {\n  display: inline;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-eidas-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class EidasLogo {\n  render() {\n    return (\n      <svg class=\"utrecht-icon\" viewBox=\"0 0 21 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M21 17.3383C21 18.2955 20.2291 19.0664 19.272 19.0664H1.72805C0.770872 19.0664 0 18.2955 0 17.3383V1.72805C0 0.770879 0.777296 0 1.72805 0H19.272C20.2291 0 21 0.777303 21 1.72805V17.3383Z\"\n          fill=\"#2C4375\"\n        />\n        <path\n          d=\"M7.88867 19.0984V15.9057C7.88867 14.5952 8.94862 13.5353 10.2591 13.5353H17.0493C18.3598 13.5353 19.4197 14.6017 19.4197 15.9057V19.0984\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M9.38546 9.78369C9.55891 9.19911 9.83513 8.72373 10.2141 8.34472C10.5932 7.97213 11.075 7.69589 11.6724 7.51602C12.2698 7.33615 12.9765 7.24622 13.8051 7.24622C14.4989 7.24622 15.1028 7.32973 15.6231 7.49675C16.1435 7.66377 16.5932 7.92716 16.985 8.2869C17.4411 8.71089 17.7495 9.20553 17.9101 9.76442C18.0707 10.3233 18.1542 11.0299 18.1542 11.8651V17.0428C18.1542 17.486 18.0514 17.8201 17.8523 18.0385C17.6467 18.2569 17.3833 18.3661 17.0557 18.3661C16.7281 18.3661 16.4647 18.2569 16.272 18.0385C16.0792 17.8201 15.9765 17.4925 15.9765 17.0428V11.7173C15.9765 10.7987 15.803 10.1113 15.4497 9.66163C15.0964 9.21196 14.4989 8.98069 13.6445 8.98069C13.0278 8.98069 12.5525 9.0899 12.2056 9.31474C11.8651 9.53958 11.6274 9.84793 11.4925 10.2526C11.3576 10.6574 11.2934 11.1584 11.2934 11.7559V17.0428C11.2934 17.4796 11.197 17.8137 10.9979 18.0321C10.7987 18.2505 10.5353 18.3597 10.1949 18.3597C9.87367 18.3597 9.6103 18.2505 9.41758 18.0321C9.21844 17.8137 9.12207 17.4796 9.12207 17.0428V11.8779C9.12207 11.0621 9.21201 10.3683 9.38546 9.78369Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M13.169 0.648804L13.683 2.0942L15.3275 2.08778L13.9913 2.98071L14.5052 4.41968L13.169 3.52675L11.8457 4.41968L12.3532 2.98071L11.0234 2.08778L12.668 2.0942L13.169 0.648804Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M18.2893 1.59314L18.7968 3.03854L20.4413 3.03211L19.1116 3.91862L19.6191 5.35759L18.2893 4.46466L16.9595 5.35759L17.4735 3.91862L16.1309 3.03211L17.7882 3.03854L18.2893 1.59314Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M3.60369 14.833L4.11118 16.2784L5.75573 16.272L4.41954 17.1585L4.93346 18.5975L3.60369 17.7045L2.27392 18.5975L2.78784 17.1585L1.45166 16.272L3.09619 16.2784L3.60369 14.833Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M4.80536 5.51819L5.31284 6.96358L6.95739 6.95716L5.62763 7.84367L6.13512 9.28264L4.80536 8.38971L3.47559 9.28264L3.98308 7.84367L2.65332 6.95716L4.30428 6.96358L4.80536 5.51819Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M8.43483 2.07495L8.93591 3.52035L10.5869 3.51392L9.25068 4.40043L9.76459 5.83941L8.43483 4.94647L7.10507 5.83941L7.61256 4.40043L6.27637 3.51392L7.92733 3.52035L8.43483 2.07495Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M3.12176 10.3234L3.62925 11.7688L5.28021 11.7623L3.94402 12.6488L4.45152 14.0878L3.12176 13.1949L1.79198 14.0878L2.3059 12.6488L0.969727 11.7623L2.61426 11.7688L3.12176 10.3234Z\"\n          fill=\"#F2CD23\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-eidas-logo.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,iUAAiU;;MCarU,SAAS;;;;;;EACpB,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC1F,YACE,CAAC,EAAC,6LAA6L,EAC/L,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,0IAA0I,EAC5I,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,0hCAA0hC,EAC5hC,IAAI,EAAC,OAAO,GACZ,EACF,YACE,CAAC,EAAC,8KAA8K,EAChL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,+KAA+K,EACjL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,EACF,YACE,CAAC,EAAC,mLAAmL,EACrL,IAAI,EAAC,SAAS,GACd,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/eidas-logo/index.scss?tag=utrecht-eidas-logo&encapsulation=shadow","./src/components/eidas-logo/index.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/icon/css\";\n\n:host {\n  display: inline;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Rijksoverheid\n * Copyright (c) 2021 Robbert Broersma\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-eidas-logo',\n  styleUrl: 'index.scss',\n  shadow: true,\n})\nexport class EidasLogo {\n  render() {\n    return (\n      <svg class=\"utrecht-icon\" viewBox=\"0 0 21 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M21 17.3383C21 18.2955 20.2291 19.0664 19.272 19.0664H1.72805C0.770872 19.0664 0 18.2955 0 17.3383V1.72805C0 0.770879 0.777296 0 1.72805 0H19.272C20.2291 0 21 0.777303 21 1.72805V17.3383Z\"\n          fill=\"#2C4375\"\n        />\n        <path\n          d=\"M7.88867 19.0984V15.9057C7.88867 14.5952 8.94862 13.5353 10.2591 13.5353H17.0493C18.3598 13.5353 19.4197 14.6017 19.4197 15.9057V19.0984\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M9.38546 9.78369C9.55891 9.19911 9.83513 8.72373 10.2141 8.34472C10.5932 7.97213 11.075 7.69589 11.6724 7.51602C12.2698 7.33615 12.9765 7.24622 13.8051 7.24622C14.4989 7.24622 15.1028 7.32973 15.6231 7.49675C16.1435 7.66377 16.5932 7.92716 16.985 8.2869C17.4411 8.71089 17.7495 9.20553 17.9101 9.76442C18.0707 10.3233 18.1542 11.0299 18.1542 11.8651V17.0428C18.1542 17.486 18.0514 17.8201 17.8523 18.0385C17.6467 18.2569 17.3833 18.3661 17.0557 18.3661C16.7281 18.3661 16.4647 18.2569 16.272 18.0385C16.0792 17.8201 15.9765 17.4925 15.9765 17.0428V11.7173C15.9765 10.7987 15.803 10.1113 15.4497 9.66163C15.0964 9.21196 14.4989 8.98069 13.6445 8.98069C13.0278 8.98069 12.5525 9.0899 12.2056 9.31474C11.8651 9.53958 11.6274 9.84793 11.4925 10.2526C11.3576 10.6574 11.2934 11.1584 11.2934 11.7559V17.0428C11.2934 17.4796 11.197 17.8137 10.9979 18.0321C10.7987 18.2505 10.5353 18.3597 10.1949 18.3597C9.87367 18.3597 9.6103 18.2505 9.41758 18.0321C9.21844 17.8137 9.12207 17.4796 9.12207 17.0428V11.8779C9.12207 11.0621 9.21201 10.3683 9.38546 9.78369Z\"\n          fill=\"white\"\n        />\n        <path\n          d=\"M13.169 0.648804L13.683 2.0942L15.3275 2.08778L13.9913 2.98071L14.5052 4.41968L13.169 3.52675L11.8457 4.41968L12.3532 2.98071L11.0234 2.08778L12.668 2.0942L13.169 0.648804Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M18.2893 1.59314L18.7968 3.03854L20.4413 3.03211L19.1116 3.91862L19.6191 5.35759L18.2893 4.46466L16.9595 5.35759L17.4735 3.91862L16.1309 3.03211L17.7882 3.03854L18.2893 1.59314Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M3.60369 14.833L4.11118 16.2784L5.75573 16.272L4.41954 17.1585L4.93346 18.5975L3.60369 17.7045L2.27392 18.5975L2.78784 17.1585L1.45166 16.272L3.09619 16.2784L3.60369 14.833Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M4.80536 5.51819L5.31284 6.96358L6.95739 6.95716L5.62763 7.84367L6.13512 9.28264L4.80536 8.38971L3.47559 9.28264L3.98308 7.84367L2.65332 6.95716L4.30428 6.96358L4.80536 5.51819Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M8.43483 2.07495L8.93591 3.52035L10.5869 3.51392L9.25068 4.40043L9.76459 5.83941L8.43483 4.94647L7.10507 5.83941L7.61256 4.40043L6.27637 3.51392L7.92733 3.52035L8.43483 2.07495Z\"\n          fill=\"#F2CD23\"\n        />\n        <path\n          d=\"M3.12176 10.3234L3.62925 11.7688L5.28021 11.7623L3.94402 12.6488L4.45152 14.0878L3.12176 13.1949L1.79198 14.0878L2.3059 12.6488L0.969727 11.7623L2.61426 11.7688L3.12176 10.3234Z\"\n          fill=\"#F2CD23\"\n        />\n      </svg>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form-field-textarea.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-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;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));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;height:initial;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);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));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block;width:100%}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );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-bottom-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor)}.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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );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-bottom-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));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:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
+const indexCss = ".utrecht-form-label{color:var(--utrecht-form-label-color);font-size:var(--utrecht-form-label-font-size);font-weight:var(--utrecht-form-label-font-weight)}.utrecht-form-label--checkbox{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--checked{font-weight:var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-label--disabled{cursor:var(--utrecht-action-disabled-cursor, revert);font-weight:var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color))}.utrecht-form-label--radio{color:var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));cursor:var(--utrecht-action-activate-cursor, revert);font-weight:var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight))}.utrecht-form-field{font-family:var(--utrecht-document-font-family, inherit);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));max-inline-size:var(--utrecht-form-field-max-inline-size);page-break-inside:avoid}.utrecht-form-field--distanced{--utrecht-space-around:1}.utrecht-form-field--invalid{border-inline-start-color:var(--utrecht-form-field-invalid-border-inline-start-color);border-inline-start-style:solid;border-inline-start-width:var(--utrecht-form-field-invalid-border-inline-start-width);padding-inline-start:var(--utrecht-form-field-invalid-padding-inline-start)}.utrecht-form-field--checkbox{display:grid;gap:0 var(--utrecht-checkbox-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-checkbox-size) 100fr;}.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)))}.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-checkbox-margin-inline-end, 12px)}.utrecht-form-field--radio{display:grid;gap:0 var(--utrecht-radio-button-margin-inline-end, 12px);grid-template-areas:\"input label\" \"input description\" \"input description-invalid\";grid-template-columns:var(--utrecht-radio-button-size) 100fr;}.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input){margin-inline-start:calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)))}.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input{margin-inline-end:var(--utrecht-radio-button-margin-inline-end, 12px)}.utrecht-form-field__input{grid-area:input;order:5}.utrecht-form-field__label{grid-area:label;margin-block-end:var(--utrecht-form-field-label-margin-block-end);margin-block-start:0;order:1}.utrecht-form-field .utrecht-form-field-description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field .utrecht-form-field-description--invalid{grid-area:description-invalid;order:3}.utrecht-form-field__description{grid-area:description;margin-block-end:var(--utrecht-form-field-description-margin-block-end);margin-block-start:var(--utrecht-form-field-description-margin-block-start);order:2}.utrecht-form-field__description--before{grid-area:description-before;order:4}.utrecht-textarea{background-color:var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));block-size:initial;border-width:var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));border-bottom-width:var(--utrecht-textarea-border-bottom-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;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));font-size:var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));font-weight:initial;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);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));padding-inline-start:var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));resize:vertical;resize:block}.utrecht-textarea--invalid{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );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-bottom-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));color:var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor)}.utrecht-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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea__placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}.utrecht-textarea--html-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))));color:var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));cursor:var(--utrecht-action-disabled-cursor)}.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))));color:var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-textarea--html-textarea:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-textarea--html-textarea:invalid,.utrecht-textarea--html-textarea[aria-invalid=true]{--_utrecht-textarea-border-width:var(\n    --utrecht-textarea-invalid-border-width,\n    var(\n      --utrecht-form-control-invalid-border-width,\n      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))\n    )\n  );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-bottom-width:var(--utrecht-textarea-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textarea-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textarea-border-width)))));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:read-only{background-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))));border-color:var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));color:var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))))}.utrecht-textarea--html-textarea::placeholder{color:var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));font-style:var(--utrecht-form-control-placeholder-font-style);opacity:100%}:host{display:block}:host([hidden]){display:none !important}";
 
 const FormFieldTextarea = /*@__PURE__*/ proxyCustomElement(class FormFieldTextarea extends HTMLElement {
   constructor() {