@utrecht/web-component-library-stencil 1.1.0 → 1.1.1-alpha.0

package/dist/components/utrecht-icon-zwemmen.js.map

@@ -1 +1 @@
-{"file":"utrecht-icon-zwemmen.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,oBAAkB;;;;;;EAC7B,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,s7DAAs7D,GAAE,CAC57D,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconZwemmen"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-zwemmen&encapsulation=shadow","src/components/generated/utrecht-icon-zwemmen/utrecht-icon-zwemmen.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-zwemmen',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconZwemmen {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M26.4 15.13a3.521 3.521 0 0 1 1.49-4.74 3.49 3.49 0 0 1 4.72 1.49c.89 1.72.23 3.84-1.49 4.74-1.71.9-3.83.23-4.72-1.49Zm5.76 4.52c-1.53 0-3.06.43-4.47 1.18-.88.47-1.8.74-2.74.74-.57 0-1.14-.1-1.72-.31-1.23-.45-2.25-1.19-3.57-1.48a7.72 7.72 0 0 0-1.65-.18c-1.24 0-2.48.3-3.62.84-1.13.54-2.14 1.15-3.43 1.15h-.25c-1.36-.08-2.35-.83-3.55-1.33-1.02-.43-2.1-.65-3.18-.65-.73 0-1.46.1-2.18.3-.44.13-.86.29-1.26.48-.35.16-.56.52-.56.9v.14c0 .72.74 1.21 1.4.92.91-.4 1.81-.74 2.81-.74.56 0 1.15.11 1.8.38 1.08.45 2 1.07 3.17 1.35.6.14 1.2.21 1.81.21 1.09 0 2.18-.23 3.2-.66 1.12-.47 2.04-1.15 3.29-1.31.17-.02.33-.03.49-.03 1.02 0 2.01.36 2.89.86 1.31.75 2.66 1.09 4.01 1.09 1.52 0 3.03-.43 4.46-1.21.87-.47 1.77-.72 2.69-.72.63 0 1.27.12 1.91.37.23.09.45.19.67.29.65.3 1.39-.2 1.39-.92v-.07c0-.38-.2-.73-.54-.9a7.69 7.69 0 0 0-3.3-.73Zm-4.47 5.61c-.88.47-1.8.74-2.74.74-.57 0-1.14-.1-1.72-.31-1.23-.45-2.25-1.19-3.57-1.48a7.72 7.72 0 0 0-1.65-.18c-1.24 0-2.48.3-3.62.84-1.13.54-2.14 1.15-3.43 1.15h-.25c-1.36-.08-2.35-.83-3.55-1.33-1.02-.43-2.1-.65-3.18-.65-.73 0-1.46.1-2.18.3-.44.13-.86.29-1.26.48-.35.16-.56.52-.56.9v.14c0 .72.74 1.21 1.4.92.91-.4 1.81-.74 2.81-.74.56 0 1.15.11 1.8.38 1.08.45 2 1.07 3.17 1.35.6.14 1.2.21 1.81.21 1.09 0 2.18-.23 3.2-.66 1.12-.47 2.04-1.15 3.29-1.31.17-.02.33-.03.49-.03 1.02 0 2.01.36 2.89.86 1.31.75 2.66 1.09 4.01 1.09 1.52 0 3.03-.43 4.46-1.21.87-.47 1.77-.72 2.69-.72.63 0 1.27.12 1.91.37.23.09.45.19.67.29.65.3 1.39-.2 1.39-.92v-.06c0-.38-.2-.73-.54-.9a7.69 7.69 0 0 0-3.3-.73c-1.53 0-3.06.43-4.47 1.18Zm-13.6-14.41-7.62 3.82c-.46.23-.65.79-.42 1.25l.06.13c.23.46.78.65 1.24.42l5.86-2.89 1.17-.58c.99-.49 2.19-.08 2.68.91l-8.65 4.11c.29.13.42.23.69.36.68.34 1.21.61 1.76.64h.13c.6 0 1.16-.27 2.04-.7.17-.09.35-.17.53-.26 1.42-.68 2.97-1.04 4.48-1.04.7 0 1.4.08 2.08.23 1.02.23 1.87.64 2.61 1.01.42.21.82.4 1.21.55.35.13.78.21.78.21s.57.03.78-.33c.21-.35-.06-.78-.06-.78l-.72-1.28c-1.07-2.17-3.1-3.99-4.81-5.24a5.725 5.725 0 0 0-5.82-.56Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-icon-zwemmen.js","mappings":";;AAAA,MAAM,YAAY,GAAG,qSAAqS;;MCO7SA,oBAAkB;;;;;;EAC7B,MAAM;IACJ,QACE,WAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,cAAc,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,IAC5G,YAAM,CAAC,EAAC,q7DAAq7D,GAAE,CAC37D,EAEA;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["UtrechtIconZwemmen"],"sources":["src/components/icon/generated.scss?tag=utrecht-icon-zwemmen&encapsulation=shadow","src/components/generated/utrecht-icon-zwemmen/utrecht-icon-zwemmen.stencil.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021-2022 Gemeente Utrecht\n * Copyright (c) 2021-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/icon/css/mixin\";\n\n:host {\n  @include utrecht-icon;\n}\n\nsvg {\n  @include utrecht-icon__svg;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-icon-zwemmen',\n  styleUrl: \"../../icon/generated.scss\",\n  shadow: true,\n})\nexport class UtrechtIconZwemmen {\n  render() {\n    return (\n      <svg viewBox=\"0 0 36 36\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" height=\"1em\" width=\"1em\">\n  <path d=\"M26.4 15.13a3.521 3.521 0 0 1 1.49-4.74 3.49 3.49 0 0 1 4.72 1.49c.89 1.72.23 3.84-1.49 4.74-1.71.9-3.83.23-4.72-1.49m5.76 4.52c-1.53 0-3.06.43-4.47 1.18-.88.47-1.8.74-2.74.74-.57 0-1.14-.1-1.72-.31-1.23-.45-2.25-1.19-3.57-1.48a7.72 7.72 0 0 0-1.65-.18c-1.24 0-2.48.3-3.62.84-1.13.54-2.14 1.15-3.43 1.15h-.25c-1.36-.08-2.35-.83-3.55-1.33-1.02-.43-2.1-.65-3.18-.65-.73 0-1.46.1-2.18.3-.44.13-.86.29-1.26.48-.35.16-.56.52-.56.9v.14c0 .72.74 1.21 1.4.92.91-.4 1.81-.74 2.81-.74.56 0 1.15.11 1.8.38 1.08.45 2 1.07 3.17 1.35.6.14 1.2.21 1.81.21 1.09 0 2.18-.23 3.2-.66 1.12-.47 2.04-1.15 3.29-1.31.17-.02.33-.03.49-.03 1.02 0 2.01.36 2.89.86 1.31.75 2.66 1.09 4.01 1.09 1.52 0 3.03-.43 4.46-1.21.87-.47 1.77-.72 2.69-.72.63 0 1.27.12 1.91.37.23.09.45.19.67.29.65.3 1.39-.2 1.39-.92v-.07c0-.38-.2-.73-.54-.9a7.69 7.69 0 0 0-3.3-.73Zm-4.47 5.61c-.88.47-1.8.74-2.74.74-.57 0-1.14-.1-1.72-.31-1.23-.45-2.25-1.19-3.57-1.48a7.72 7.72 0 0 0-1.65-.18c-1.24 0-2.48.3-3.62.84-1.13.54-2.14 1.15-3.43 1.15h-.25c-1.36-.08-2.35-.83-3.55-1.33-1.02-.43-2.1-.65-3.18-.65-.73 0-1.46.1-2.18.3-.44.13-.86.29-1.26.48-.35.16-.56.52-.56.9v.14c0 .72.74 1.21 1.4.92.91-.4 1.81-.74 2.81-.74.56 0 1.15.11 1.8.38 1.08.45 2 1.07 3.17 1.35.6.14 1.2.21 1.81.21 1.09 0 2.18-.23 3.2-.66 1.12-.47 2.04-1.15 3.29-1.31.17-.02.33-.03.49-.03 1.02 0 2.01.36 2.89.86 1.31.75 2.66 1.09 4.01 1.09 1.52 0 3.03-.43 4.46-1.21.87-.47 1.77-.72 2.69-.72.63 0 1.27.12 1.91.37.23.09.45.19.67.29.65.3 1.39-.2 1.39-.92v-.06c0-.38-.2-.73-.54-.9a7.69 7.69 0 0 0-3.3-.73c-1.53 0-3.06.43-4.47 1.18Zm-13.6-14.41-7.62 3.82c-.46.23-.65.79-.42 1.25l.06.13c.23.46.78.65 1.24.42l5.86-2.89 1.17-.58c.99-.49 2.19-.08 2.68.91l-8.65 4.11c.29.13.42.23.69.36.68.34 1.21.61 1.76.64h.13c.6 0 1.16-.27 2.04-.7.17-.09.35-.17.53-.26 1.42-.68 2.97-1.04 4.48-1.04.7 0 1.4.08 2.08.23 1.02.23 1.87.64 2.61 1.01.42.21.82.4 1.21.55.35.13.78.21.78.21s.57.03.78-.33c.21-.35-.06-.78-.06-.78l-.72-1.28c-1.07-2.17-3.1-3.99-4.81-5.24a5.725 5.725 0 0 0-5.82-.56Z\"/>\n</svg>\n\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-link-button.js

@@ -12,16 +12,88 @@ const LinkButton = /*@__PURE__*/ proxyCustomElement(class LinkButton extends HTM
     this.type = undefined;
     this.inline = undefined;
     this.pressed = undefined;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formEnctype = undefined;
+    this.formMethod = undefined;
+    this.formNoValidate = undefined;
+    this.formTarget = undefined;
+    this.popoverTarget = undefined;
+    this.popoverTargetAction = undefined;
+    this.name = undefined;
+    this.value = undefined;
   }
   render() {
-    return (h("button", { class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button' }, h("slot", null)));
+    const { hostElement, name, value, form, formAction, formEnctype, formTarget, formNoValidate, formMethod, popoverTargetAction, popoverTarget, type, } = this;
+    const handleClick = () => {
+      const button = this.hostElement.querySelector('button[hidden]');
+      if (button) {
+        button.click();
+      }
+    };
+    let button = hostElement.querySelector('button[hidden]');
+    const needsButton = !!(name ||
+      form ||
+      formTarget ||
+      formEnctype ||
+      formMethod ||
+      formNoValidate ||
+      popoverTarget ||
+      popoverTargetAction ||
+      type === 'submit');
+    if (button && !needsButton) {
+      button.parentNode.removeChild(button);
+    }
+    if (!button && needsButton) {
+      button = hostElement.ownerDocument.createElement('button');
+      button.hidden = true;
+      button.tabIndex = -1;
+      button.ariaHidden = 'true';
+      hostElement.appendChild(button);
+    }
+    const setAttribute = (el, name, value) => {
+      if (typeof value === 'string') {
+        el.setAttribute(name, value);
+      }
+      else {
+        el.removeAttribute(name);
+      }
+    };
+    if (button) {
+      setAttribute(button, 'name', name);
+      setAttribute(button, 'type', type);
+      setAttribute(button, 'form', form);
+      setAttribute(button, 'formaction', formAction);
+      setAttribute(button, 'form', form);
+      setAttribute(button, 'formtarget', formTarget);
+      setAttribute(button, 'formenctype', formEnctype);
+      setAttribute(button, 'formmethod', formMethod);
+      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);
+      setAttribute(button, 'popovertargetaction', popoverTargetAction);
+      setAttribute(button, 'popovertarget', popoverTarget);
+      setAttribute(button, 'type', type);
+      button.style.display = 'none';
+      button.value = value || '';
+    }
+    return (h("button", { class: clsx('utrecht-link-button', 'utrecht-link-button--html-button', this.disabled && 'utrecht-link-button--disabled', this.inline && 'utrecht-link-button--inline', this.pressed && 'utrecht-link-button--pressed'), disabled: this.disabled, "aria-pressed": typeof this.pressed === 'boolean' ? this.pressed : undefined, type: this.type || 'button', onClick: handleClick }, h("slot", null)));
   }
+  get hostElement() { return this; }
   static get style() { return linkButtonCss; }
 }, [1, "utrecht-link-button", {
     "disabled": [4],
     "type": [1],
     "inline": [4],
-    "pressed": [4]
+    "pressed": [4],
+    "form": [513],
+    "formAction": [513, "formaction"],
+    "formEnctype": [513, "formenctype"],
+    "formMethod": [513, "formmethod"],
+    "formNoValidate": [516, "formnovalidate"],
+    "formTarget": [513, "formtarget"],
+    "popoverTarget": [513, "popovertarget"],
+    "popoverTargetAction": [513, "popovertargetaction"],
+    "name": [1],
+    "value": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/utrecht-link-button.js.map

@@ -1 +1 @@
-{"file":"utrecht-link-button.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,q7HAAq7H;;MCc97H,UAAU;;;;;;;;;;EAKrB,MAAM;IACJ,QACE,cACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,kCAAkC,EAClC,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,MAAM,IAAI,6BAA6B,EAC5C,IAAI,CAAC,OAAO,IAAI,8BAA8B,CAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EAC1E,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,IAE3B,eAAa,CACN,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/link-button.scss?tag=utrecht-link-button&encapsulation=shadow","src/components/link-button.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/link-button/css\";\n\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  @Prop() disabled: boolean;\n  @Prop() type: string;\n  @Prop() inline: boolean;\n  @Prop() pressed: boolean;\n  render() {\n    return (\n      <button\n        class={clsx(\n          'utrecht-link-button',\n          'utrecht-link-button--html-button',\n          this.disabled && 'utrecht-link-button--disabled',\n          this.inline && 'utrecht-link-button--inline',\n          this.pressed && 'utrecht-link-button--pressed',\n        )}\n        disabled={this.disabled}\n        aria-pressed={typeof this.pressed === 'boolean' ? this.pressed : undefined}\n        type={this.type || 'button'}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-link-button.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,q7HAAq7H;;MCc97H,UAAU;;;;;;;;;;;;;;;;;;;;EAgBrB,MAAM;IACJ,MAAM,EACJ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,IAAI,GACL,GAAG,IAAI,CAAC;IAET,MAAM,WAAW,GAAG;MAClB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAA6B,CAAC;MAC5F,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,KAAK,EAAE,CAAC;OAChB;KACF,CAAC;IAEF,IAAI,MAAM,GAAG,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAA6B,CAAC;IAErF,MAAM,WAAW,GAAG,CAAC,EACnB,IAAI;MACJ,IAAI;MACJ,UAAU;MACV,WAAW;MACX,UAAU;MACV,cAAc;MACd,aAAa;MACb,mBAAmB;MACnB,IAAI,KAAK,QAAQ,CAClB,CAAC;IACF,IAAI,MAAM,IAAI,CAAC,WAAW,EAAE;MAC1B,MAAM,CAAC,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;KACvC;IAED,IAAI,CAAC,MAAM,IAAI,WAAW,EAAE;MAC1B,MAAM,GAAG,WAAW,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;MAC3D,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;MACrB,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;MACrB,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC;MAC3B,WAAW,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;KACjC;IAED,MAAM,YAAY,GAAG,CAAC,EAAe,EAAE,IAAY,EAAE,KAAqB;MACxE,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;OAC9B;WAAM;QACL,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;OAC1B;KACF,CAAC;IAEF,IAAI,MAAM,EAAE;MACV,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACnC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACnC,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACnC,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;MAC/C,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACnC,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;MAC/C,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;MACjD,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,CAAC,CAAC;MAC/C,YAAY,CAAC,MAAM,EAAE,gBAAgB,EAAE,cAAc,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;MACnE,YAAY,CAAC,MAAM,EAAE,qBAAqB,EAAE,mBAAmB,CAAC,CAAC;MACjE,YAAY,CAAC,MAAM,EAAE,eAAe,EAAE,aAAa,CAAC,CAAC;MACrD,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;MACnC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;MAC9B,MAAM,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;KAC5B;IAED,QACE,cACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,kCAAkC,EAClC,IAAI,CAAC,QAAQ,IAAI,+BAA+B,EAChD,IAAI,CAAC,MAAM,IAAI,6BAA6B,EAC5C,IAAI,CAAC,OAAO,IAAI,8BAA8B,CAC/C,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,SAAS,EAC1E,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,EAC3B,OAAO,EAAE,WAAW,IAEpB,eAAa,CACN,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/link-button.scss?tag=utrecht-link-button&encapsulation=shadow","src/components/link-button.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/link-button/css\";\n\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, Element, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  @Prop() disabled: boolean;\n  @Prop() type: string;\n  @Prop() inline: boolean;\n  @Prop() pressed: boolean;\n  @Prop({ attribute: 'form', reflect: true }) form: string;\n  @Prop({ attribute: 'formaction', reflect: true }) formAction: string;\n  @Prop({ attribute: 'formenctype', reflect: true }) formEnctype: string;\n  @Prop({ attribute: 'formmethod', reflect: true }) formMethod: string;\n  @Prop({ attribute: 'formnovalidate', reflect: true }) formNoValidate: boolean;\n  @Prop({ attribute: 'formtarget', reflect: true }) formTarget: string;\n  @Prop({ attribute: 'popovertarget', reflect: true }) popoverTarget: string;\n  @Prop({ attribute: 'popovertargetaction', reflect: true }) popoverTargetAction: string;\n  @Prop() name: string;\n  @Prop() value: string;\n  @Element() hostElement: HTMLElement;\n  render() {\n    const {\n      hostElement,\n      name,\n      value,\n      form,\n      formAction,\n      formEnctype,\n      formTarget,\n      formNoValidate,\n      formMethod,\n      popoverTargetAction,\n      popoverTarget,\n      type,\n    } = this;\n\n    const handleClick = () => {\n      const button = this.hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n      if (button) {\n        button.click();\n      }\n    };\n\n    let button = hostElement.querySelector('button[hidden]') as HTMLButtonElement | null;\n\n    const needsButton = !!(\n      name ||\n      form ||\n      formTarget ||\n      formEnctype ||\n      formMethod ||\n      formNoValidate ||\n      popoverTarget ||\n      popoverTargetAction ||\n      type === 'submit'\n    );\n    if (button && !needsButton) {\n      button.parentNode.removeChild(button);\n    }\n\n    if (!button && needsButton) {\n      button = hostElement.ownerDocument.createElement('button');\n      button.hidden = true;\n      button.tabIndex = -1;\n      button.ariaHidden = 'true';\n      hostElement.appendChild(button);\n    }\n\n    const setAttribute = (el: HTMLElement, name: string, value?: string | null) => {\n      if (typeof value === 'string') {\n        el.setAttribute(name, value);\n      } else {\n        el.removeAttribute(name);\n      }\n    };\n\n    if (button) {\n      setAttribute(button, 'name', name);\n      setAttribute(button, 'type', type);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formaction', formAction);\n      setAttribute(button, 'form', form);\n      setAttribute(button, 'formtarget', formTarget);\n      setAttribute(button, 'formenctype', formEnctype);\n      setAttribute(button, 'formmethod', formMethod);\n      setAttribute(button, 'formnovalidate', formNoValidate ? '' : null);\n      setAttribute(button, 'popovertargetaction', popoverTargetAction);\n      setAttribute(button, 'popovertarget', popoverTarget);\n      setAttribute(button, 'type', type);\n      button.style.display = 'none';\n      button.value = value || '';\n    }\n\n    return (\n      <button\n        class={clsx(\n          'utrecht-link-button',\n          'utrecht-link-button--html-button',\n          this.disabled && 'utrecht-link-button--disabled',\n          this.inline && 'utrecht-link-button--inline',\n          this.pressed && 'utrecht-link-button--pressed',\n        )}\n        disabled={this.disabled}\n        aria-pressed={typeof this.pressed === 'boolean' ? this.pressed : undefined}\n        type={this.type || 'button'}\n        onClick={handleClick}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-pre-heading.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const preHeadingCss = ":host{color:var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-pre-heading-font-size);font-weight:var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-pre-heading-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-start, 0));order:var(--utrecht-pre-heading-order, 0)}:host([hidden]){display:none !important}";
+const preHeadingCss = ":host{display:contents}p{color:var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-pre-heading-font-size);font-weight:var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-pre-heading-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-pre-heading-margin-block-start, 0));order:var(--utrecht-pre-heading-order, 0)}:host([hidden]){display:none !important}";
 
 const PreHeading = /*@__PURE__*/ proxyCustomElement(class PreHeading extends HTMLElement {
   constructor() {
@@ -9,7 +9,7 @@ const PreHeading = /*@__PURE__*/ proxyCustomElement(class PreHeading extends HTM
     this.__attachShadow();
   }
   render() {
-    return (h("p", { class: "utrecht-pre-heading" }, h("slot", null)));
+    return (h("p", null, h("slot", null)));
   }
   static get style() { return preHeadingCss; }
 }, [1, "utrecht-pre-heading"]);

package/dist/components/utrecht-pre-heading.js.map

@@ -1 +1 @@
-{"file":"utrecht-pre-heading.js","mappings":";;AAAA,MAAM,aAAa,GAAG,otBAAotB;;MCa7tB,UAAU;;;;;;EACrB,MAAM;IACJ,QACE,SAAG,KAAK,EAAC,qBAAqB,IAC5B,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pre-heading.scss?tag=utrecht-pre-heading&encapsulation=shadow","src/components/pre-heading.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/pre-heading/css/mixin\";\n\n:host {\n  @include utrecht-pre-heading;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-pre-heading',\n  styleUrl: 'pre-heading.scss',\n  shadow: true,\n})\nexport class PreHeading {\n  render() {\n    return (\n      <p class=\"utrecht-pre-heading\">\n        <slot></slot>\n      </p>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-pre-heading.js","mappings":";;AAAA,MAAM,aAAa,GAAG,uuBAAuuB;;MCahvB,UAAU;;;;;;EACrB,MAAM;IACJ,QACE,aACE,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pre-heading.scss?tag=utrecht-pre-heading&encapsulation=shadow","src/components/pre-heading.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@utrecht/components/pre-heading/css/mixin\";\n\n:host {\n  display: contents;\n}\n\np {\n  @include utrecht-pre-heading;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-pre-heading',\n  styleUrl: 'pre-heading.scss',\n  shadow: true,\n})\nexport class PreHeading {\n  render() {\n    return (\n      <p>\n        <slot></slot>\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-progress-list-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$2 } from './button.js';
 
-const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:0;padding-block-start:0}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:center;gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
+const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:var(--denhaag-process-steps-step-padding-block-end);padding-block-start:var(--denhaag-process-steps-step-padding-block-start)}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:var(--denhaag-process-steps-step-header-align-items);gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
 
 const StepProgressListItem = /*@__PURE__*/ proxyCustomElement(class StepProgressListItem extends HTMLElement {
   constructor() {

package/dist/components/utrecht-progress-list-item.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-list-item.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,25YAA25Y;;MCct6Y,oBAAoB;;;;;mBACJ,KAAK;;;;mBAIJ,KAAK;iBACN,KAAK;;EAChC,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;IAC/D,QACE,UACE,KAAK,EAAE,IAAI,CAAC,6BAA6B,EAAE;QACzC,sCAAsC,EAAE,OAAO;QAC/C,0CAA0C,EAAE,CAAC,OAAO;OACrD,CAAC,IAEF,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE;QACjC,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEF,YAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACN,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAC,OAAO,iBACL,MAAM,qBACF,MAAM,IAEtB,YACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACL,OAAO,IACN,sBACE,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EACzC,UAAU,EAAC,eAAe,EAC1B,KAAK,EAAC,2CAA2C,mBACnC,SAAS,mBACR,KAAK,GAAG,MAAM,GAAG,OAAO,IAEvC,SACE,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEF,eAAQ,CACN,CACW,KAEjB,SACE,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEF,eAAQ,CACN,CACL,CACG,EACN,WAAK,KAAK,EAAE,IAAI,CAAC,kCAAkC,CAAC,IAClD,WACE,KAAK,EAAE,IAAI,CACT,gCAAgC,EAChC,mCAAmC,UAAU,EAAE,EAC/C,mCAAmC,IAAI,OAAO,EAAE,EAAE,CACnD,GACI,EACP,WAAK,KAAK,EAAC,kCAAkC,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,WACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE,CAAC,KAAK,IAAI,6CAA6C,CAAC,IAE3G,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACH,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-list-item&encapsulation=shadow","src/components/progress-list-item.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop, State } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-progress-list-item',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressListItem {\n  @Prop() checked: boolean = false;\n  @Prop() from?: string;\n  @Prop() to?: string;\n  @Prop() appearance?: string;\n  @Prop() details?: boolean = false;\n  @State() _open?: boolean = false;\n  render() {\n    const { appearance, checked, details, from, _open, to } = this;\n    return (\n      <li\n        class={clsx('denhaag-process-steps__step', {\n          'denhaag-process-steps__step--checked': checked,\n          'denhaag-process-steps__step--not-checked': !checked,\n        })}\n      >\n        <div class=\"denhaag-process-steps__step-header\">\n          <div\n            class={clsx('denhaag-step-marker', {\n              'denhaag-step-marker--checked': checked,\n              'denhaag-step-marker--not-checked': !checked,\n            })}\n          >\n            <slot name=\"marker\" />\n            {checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                class=\"denhaag-icon\"\n                focusable=\"false\"\n                aria-hidden=\"true\"\n                shape-rendering=\"auto\"\n              >\n                <path\n                  d=\"M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.75\"\n                ></path>\n              </svg>\n            )}\n          </div>\n          {details ? (\n            <utrecht-button\n              onClick={() => (this._open = !this._open)}\n              appearance=\"subtle-button\"\n              class=\"denhaag-process-steps__step-header-toggle\"\n              aria-controls=\"details\"\n              aria-expanded={_open ? 'true' : 'false'}\n            >\n              <p\n                class={clsx('denhaag-process-steps__step-heading', {\n                  'denhaag-process-steps__step-heading--checked': checked,\n                })}\n              >\n                <slot />\n              </p>\n            </utrecht-button>\n          ) : (\n            <p\n              class={clsx('denhaag-process-steps__step-heading', {\n                'denhaag-process-steps__step-heading--checked': checked,\n              })}\n            >\n              <slot />\n            </p>\n          )}\n        </div>\n        <div class={clsx('denhaag-process-steps__step-body')}>\n          <div\n            class={clsx(\n              'denhaag-step-marker__connector',\n              `denhaag-step-marker__connector--${appearance}`,\n              `denhaag-step-marker__connector--${from}-to-${to}`,\n            )}\n          ></div>\n          <div class=\"denhaag-process-steps__step-meta\">\n            <slot name=\"body\" />\n          </div>\n        </div>\n        <div\n          id=\"details\"\n          class={clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden')}\n        >\n          <slot name=\"details\" />\n        </div>\n      </li>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-progress-list-item.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCc1jZ,oBAAoB;;;;;mBACJ,KAAK;;;;mBAIJ,KAAK;iBACN,KAAK;;EAChC,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;IAC/D,QACE,UACE,KAAK,EAAE,IAAI,CAAC,6BAA6B,EAAE;QACzC,sCAAsC,EAAE,OAAO;QAC/C,0CAA0C,EAAE,CAAC,OAAO;OACrD,CAAC,IAEF,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE;QACjC,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEF,YAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACN,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAC,OAAO,iBACL,MAAM,qBACF,MAAM,IAEtB,YACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACL,OAAO,IACN,sBACE,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,EACzC,UAAU,EAAC,eAAe,EAC1B,KAAK,EAAC,2CAA2C,mBACnC,SAAS,mBACR,KAAK,GAAG,MAAM,GAAG,OAAO,IAEvC,SACE,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEF,eAAQ,CACN,CACW,KAEjB,SACE,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEF,eAAQ,CACN,CACL,CACG,EACN,WAAK,KAAK,EAAE,IAAI,CAAC,kCAAkC,CAAC,IAClD,WACE,KAAK,EAAE,IAAI,CACT,gCAAgC,EAChC,mCAAmC,UAAU,EAAE,EAC/C,mCAAmC,IAAI,OAAO,EAAE,EAAE,CACnD,GACI,EACP,WAAK,KAAK,EAAC,kCAAkC,IAC3C,YAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACN,WACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAE,IAAI,CAAC,qCAAqC,EAAE,CAAC,KAAK,IAAI,6CAA6C,CAAC,IAE3G,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACH,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-list-item&encapsulation=shadow","src/components/progress-list-item.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop, State } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-progress-list-item',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressListItem {\n  @Prop() checked: boolean = false;\n  @Prop() from?: string;\n  @Prop() to?: string;\n  @Prop() appearance?: string;\n  @Prop() details?: boolean = false;\n  @State() _open?: boolean = false;\n  render() {\n    const { appearance, checked, details, from, _open, to } = this;\n    return (\n      <li\n        class={clsx('denhaag-process-steps__step', {\n          'denhaag-process-steps__step--checked': checked,\n          'denhaag-process-steps__step--not-checked': !checked,\n        })}\n      >\n        <div class=\"denhaag-process-steps__step-header\">\n          <div\n            class={clsx('denhaag-step-marker', {\n              'denhaag-step-marker--checked': checked,\n              'denhaag-step-marker--not-checked': !checked,\n            })}\n          >\n            <slot name=\"marker\" />\n            {checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                class=\"denhaag-icon\"\n                focusable=\"false\"\n                aria-hidden=\"true\"\n                shape-rendering=\"auto\"\n              >\n                <path\n                  d=\"M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.75\"\n                ></path>\n              </svg>\n            )}\n          </div>\n          {details ? (\n            <utrecht-button\n              onClick={() => (this._open = !this._open)}\n              appearance=\"subtle-button\"\n              class=\"denhaag-process-steps__step-header-toggle\"\n              aria-controls=\"details\"\n              aria-expanded={_open ? 'true' : 'false'}\n            >\n              <p\n                class={clsx('denhaag-process-steps__step-heading', {\n                  'denhaag-process-steps__step-heading--checked': checked,\n                })}\n              >\n                <slot />\n              </p>\n            </utrecht-button>\n          ) : (\n            <p\n              class={clsx('denhaag-process-steps__step-heading', {\n                'denhaag-process-steps__step-heading--checked': checked,\n              })}\n            >\n              <slot />\n            </p>\n          )}\n        </div>\n        <div class={clsx('denhaag-process-steps__step-body')}>\n          <div\n            class={clsx(\n              'denhaag-step-marker__connector',\n              `denhaag-step-marker__connector--${appearance}`,\n              `denhaag-step-marker__connector--${from}-to-${to}`,\n            )}\n          ></div>\n          <div class=\"denhaag-process-steps__step-meta\">\n            <slot name=\"body\" />\n          </div>\n        </div>\n        <div\n          id=\"details\"\n          class={clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden')}\n        >\n          <slot name=\"details\" />\n        </div>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-progress-list.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:0;padding-block-start:0}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:center;gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
+const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:var(--denhaag-process-steps-step-padding-block-end);padding-block-start:var(--denhaag-process-steps-step-padding-block-start)}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:var(--denhaag-process-steps-step-header-align-items);gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
 
 const StepProgressList = /*@__PURE__*/ proxyCustomElement(class StepProgressList extends HTMLElement {
   constructor() {

package/dist/components/utrecht-progress-list.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-list.js","mappings":";;AAAA,MAAM,eAAe,GAAG,25YAA25Y;;MCat6Y,gBAAgB;;;;;;EAC3B,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,uBAAuB,IAC/B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-list&encapsulation=shadow","src/components/progress-list.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-progress-list',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressList {\n  render() {\n    return (\n      <ol class=\"denhaag-process-steps\">\n        <slot></slot>\n      </ol>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-progress-list.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCa1jZ,gBAAgB;;;;;;EAC3B,MAAM;IACJ,QACE,UAAI,KAAK,EAAC,uBAAuB,IAC/B,eAAa,CACV,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-list&encapsulation=shadow","src/components/progress-list.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-progress-list',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressList {\n  render() {\n    return (\n      <ol class=\"denhaag-process-steps\">\n        <slot></slot>\n      </ol>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-progress-sublist-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:0;padding-block-start:0}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:center;gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
+const progressListCss = ".denhaag-process-steps__step{position:relative;padding-block-end:var(--denhaag-process-steps-step-padding-block-end);padding-block-start:var(--denhaag-process-steps-step-padding-block-start)}.denhaag-process-steps__step+.denhaag-process-steps__step{margin-block-start:var(--denhaag-process-steps-step-distance)}.denhaag-process-steps{--denhaag-process-steps-step-distance:40px;--denhaag-process-steps-sub-step-distance:24px;font-family:var(--denhaag-process-steps-font-family);font-size:var(--denhaag-process-steps-font-size);line-height:var(--denhaag-process-steps-line-height);list-style:none;margin-block-start:0;margin-block-end:0;padding-inline-start:0;position:relative}.denhaag-process-steps__step-header{display:flex;align-items:var(--denhaag-process-steps-step-header-align-items);gap:16px}.denhaag-process-steps__step-header-toggle{--utrecht-button-subtle-font-size:inherit;--utrecht-button-subtle-background-color:transparent;--utrecht-button-subtle-color:auto;--utrecht-button-padding-block-end:0;--utrecht-button-padding-block-start:0;--utrecht-button-padding-inline-end:0;--utrecht-button-padding-inline-start:0;--utrecht-button-icon-gap:4px;border:0;background-color:inherit;appearance:none;padding-block-end:0;padding-block-start:0;padding-inline-end:0;padding-inline-start:0;margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0;display:flex;align-items:center;gap:0}.denhaag-process-steps__step-heading{display:flex;align-items:center;color:var(--denhaag-process-steps-step-heading-color);font-family:var(--denhaag-process-steps-step-heading-font-family);font-size:var(--denhaag-process-steps-step-heading-font-size);font-weight:var(--denhaag-process-steps-step-heading-font-weight);line-height:var(--denhaag-process-steps-step-heading-line-height);text-align:start;margin-block-start:0;margin-block-end:0}.denhaag-process-steps__step-heading--not-checked{color:var(--denhaag-process-steps-step-heading-not-checked-color)}.denhaag-process-steps__step-heading--checked{color:var(--denhaag-process-steps-step-heading-checked-color);font-size:var(--denhaag-process-steps-step-heading-checked-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-checked-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--current{color:var(--denhaag-process-steps-step-heading-current-color);font-size:var(--denhaag-process-steps-step-heading-current-font-size, var(--denhaag-process-steps-step-heading-font-size));font-weight:var(--denhaag-process-steps-step-heading-current-font-weight, var(--denhaag-process-steps-step-heading-font-weight))}.denhaag-process-steps__step-heading--warning{color:var(--denhaag-process-steps-step-heading-warning-color)}.denhaag-process-steps__step-heading--error{color:var(--denhaag-process-steps-step-heading-error-color)}.denhaag-process-steps__step-details{display:block}.denhaag-process-steps__step-details--hidden{display:none}.denhaag-process-steps__step-body{position:relative}.denhaag-process-steps__step-meta{position:relative;margin-inline-start:calc(var(--denhaag-step-marker-size) + 16px);font-size:var(--denhaag-process-steps-step-meta-font-size);color:var(--denhaag-process-steps-step-meta-color)}.denhaag-process-steps__step-meta--date{font-size:var(--denhaag-process-steps-step-meta-date-font-size, var(--denhaag-process-steps-step-meta-font-size));color:var(--denhaag-process-steps-step-meta-date-color, var(--denhaag-process-steps-step-meta-color))}.denhaag-process-steps__sub-step{position:relative;align-items:baseline;display:flex;flex-direction:row;gap:23px;margin-block-start:var(--denhaag-process-steps-sub-step-distance)}.denhaag-process-steps__sub-step-heading{margin-block-end:0;margin-block-start:0;}.denhaag-step-marker{position:relative;z-index:1;align-items:center;background-color:var(--denhaag-step-marker-background-color);block-size:var(--denhaag-step-marker-size);border-style:solid;border-width:var(--denhaag-step-marker-border-width);border-color:var(--denhaag-step-marker-border-color, transparent);border-radius:var(--denhaag-step-marker-border-radius, 50%);box-sizing:border-box;color:var(--denhaag-step-marker-color);display:flex;flex-grow:0;font-family:var(--denhaag-step-marker-font-family);font-size:var(--denhaag-step-marker-font-size);font-weight:var(--denhaag-step-marker-font-weight);inline-size:var(--denhaag-step-marker-size);justify-content:center;margin-block-end:var(--denhaag-step-marker-margin);margin-block-start:var(--denhaag-step-marker-margin);padding-inline-end:0;min-inline-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size));min-block-size:var(--denhaag-step-marker-min-size, var(--denhaag-step-marker-size))}.denhaag-step-marker .denhaag-icon{block-size:var(--denhaag-step-marker-icon-size);inline-size:var(--denhaag-step-marker-icon-size)}.denhaag-step-marker--nested{block-size:var(--denhaag-step-marker-nested-size);min-block-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));min-inline-size:var(--denhaag-step-marker-nested-min-size, var(--denhaag-step-marker-nested-size));inline-size:var(--denhaag-step-marker-nested-size);border-width:var(--denhaag-step-marker-nested-border-width, var(--denhaag-step-marker-border-width));margin-inline-start:calc((var(--denhaag-step-marker-size) - var(--denhaag-step-marker-nested-size)) / 2)}.denhaag-step-marker--nested .denhaag-icon{block-size:var(--denhaag-step-marker-nested-icon-size);inline-size:var(--denhaag-step-marker-nested-icon-size)}.denhaag-step-marker--not-checked{background-color:var(--denhaag-step-marker-not-checked-background-color);border-color:var(--denhaag-step-marker-not-checked-border-color);color:var(--denhaag-step-marker-not-checked-color)}.denhaag-step-marker--not-checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-not-checked-nested-background-color, var(--denhaag-step-marker-not-checked-background-color));border-color:var(--denhaag-step-marker-not-checked-nested-border-color, var(--denhaag-step-marker-not-checked-border-color));color:var(--denhaag-step-marker-not-checked-nested-color, var(--denhaag-step-marker-not-checked-color))}.denhaag-step-marker--checked{background-color:var(--denhaag-step-marker-checked-background-color);border-color:var(--denhaag-step-marker-checked-border-color);color:var(--denhaag-step-marker-checked-color)}.denhaag-step-marker--checked.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-checked-nested-background-color, var(--denhaag-step-marker-checked-background-color));border-color:var(--denhaag-step-marker-checked-nested-border-color, var(--denhaag-step-marker-checked-border-color));color:var(--denhaag-step-marker-checked-nested-color, var(--denhaag-step-marker-checked-color))}.denhaag-step-marker--current{background-color:var(--denhaag-step-marker-current-background-color);border-color:var(--denhaag-step-marker-current-border-color);color:var(--denhaag-step-marker-current-color)}.denhaag-step-marker--current.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-current-nested-background-color, var(--denhaag-step-marker-current-background-color));border-color:var(--denhaag-step-marker-current-nested-border-color, var(--denhaag-step-marker-current-border-color));color:var(--denhaag-step-marker-current-nested-color, var(--denhaag-step-marker-current-color))}.denhaag-step-marker--disabled{background-color:var(--denhaag-step-marker-disabled-background-color);border-color:var(--denhaag-step-marker-disabled-border-color);color:var(--denhaag-step-marker-disabled-color)}.denhaag-step-marker--disabled.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-disabled-nested-background-color, var(--denhaag-step-marker-disabled-background-color));border-color:var(--denhaag-step-marker-disabled-nested-border-color, var(--denhaag-step-marker-disabled-border-color));color:var(--denhaag-step-marker-disabled-nested-color, var(--denhaag-step-marker-disabled-color))}.denhaag-step-marker--warning{background-color:var(--denhaag-step-marker-warning-background-color);border-color:var(--denhaag-step-marker-warning-border-color);color:var(--denhaag-step-marker-warning-color)}.denhaag-step-marker--warning.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-warning-nested-background-color, var(--denhaag-step-marker-warning-background-color));border-color:var(--denhaag-step-marker-warning-nested-border-color, var(--denhaag-step-marker-warning-border-color));color:var(--denhaag-step-marker-warning-nested-color, var(--denhaag-step-marker-warning-color))}.denhaag-step-marker--error{background-color:var(--denhaag-step-marker-error-background-color);border-color:var(--denhaag-step-marker-error-border-color);color:var(--denhaag-step-marker-error-color)}.denhaag-step-marker--error.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-error-nested-background-color, var(--denhaag-step-marker-error-background-color));border-color:var(--denhaag-step-marker-error-nested-border-color, var(--denhaag-step-marker-error-border-color));color:var(--denhaag-step-marker-error-nested-color, var(--denhaag-step-marker-error-color))}.denhaag-step-marker--default{background-color:var(--denhaag-step-marker-default-background-color);border-color:var(--denhaag-step-marker-default-border-color);color:var(--denhaag-step-marker-default-color)}.denhaag-step-marker--default.denhaag-step-marker--nested{background-color:var(--denhaag-step-marker-default-nested-background-color, var(--denhaag-step-marker-default-background-color));border-color:var(--denhaag-step-marker-default-nested-border-color, var(--denhaag-step-marker-default-border-color));color:var(--denhaag-step-marker-default-nested-color, var(--denhaag-step-marker-default-color))}.denhaag-step-marker__connector{position:absolute;left:calc(var(--denhaag-step-marker-size) / 2);top:0;height:100%;outline:var(--denhaag-step-marker-connector-width, 1px) var(--denhaag-step-marker-connector-style, dashed) var(--denhaag-step-marker-connector-color)}.denhaag-step-marker__connector--main-to-main{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-size))}.denhaag-step-marker__connector--main-to-nested{top:calc(-1 * var(--denhaag-step-marker-size) / 2);padding-block-end:calc(var(--denhaag-process-steps-step-distance) + var(--denhaag-step-marker-nested-size))}.denhaag-step-marker__connector--nested-to-nested{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-sub-step-distance)}.denhaag-step-marker__connector--nested-to-main{top:var(--denhaag-step-marker-nested-size);padding-block-end:var(--denhaag-process-steps-step-distance)}.denhaag-step-marker__connector--not-checked{outline-width:var(--denhaag-step-marker-connector-not-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-not-checked-outline-style, dashed);outline-color:var(--denhaag-step-marker-connector-not-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--checked,.denhaag-step-marker__connector--current{outline-width:var(--denhaag-step-marker-connector-checked-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-checked-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-checked-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--warning{outline-width:var(--denhaag-step-marker-connector-warning-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-warning-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-warning-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--error{outline-width:var(--denhaag-step-marker-connector-error-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-error-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-error-outline-color, var(--denhaag-step-marker-connector-outline-color))}.denhaag-step-marker__connector--default{outline-width:var(--denhaag-step-marker-connector-default-outline-width, var(--denhaag-step-marker-connector-outline-width, 1px));outline-style:var(--denhaag-step-marker-connector-default-outline-style, solid);outline-color:var(--denhaag-step-marker-connector-default-outline-color, var(--denhaag-step-marker-connector-outline-color))}:host{display:contents}:host([hidden]){display:none !important}";
 
 const StepProgressSublistItem = /*@__PURE__*/ proxyCustomElement(class StepProgressSublistItem extends HTMLElement {
   constructor() {

package/dist/components/utrecht-progress-sublist-item.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-sublist-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,25YAA25Y;;MCct6Y,uBAAuB;;;;;;mBAEN,KAAK;;EACjC,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACrC,QACE,UAAI,KAAK,EAAE,IAAI,CAAC,iCAAiC,EAAE,oCAAoC,UAAU,EAAE,CAAC,IAClG,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,6BAA6B,EAAE;QAChE,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEF,YAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACN,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAC,OAAO,iBACL,MAAM,qBACF,MAAM,IAEtB,YACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACN,SACE,KAAK,EAAE,IAAI,CAAC,yCAAyC,EAAE;QACrD,kDAAkD,EAAE,OAAO;OAC5D,CAAC,IAEF,eAAQ,CACN,CACA,CACH,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-sublist-item&encapsulation=shadow","src/components/progress-sublist-item.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-progress-sublist-item',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressSublistItem {\n  @Prop() appearance?: string;\n  @Prop() checked?: boolean = false;\n  render() {\n    const { appearance, checked } = this;\n    return (\n      <li class={clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`)}>\n        <div class=\"denhaag-process-steps__step-header\">\n          <div\n            class={clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {\n              'denhaag-step-marker--checked': checked,\n              'denhaag-step-marker--not-checked': !checked,\n            })}\n          >\n            <slot name=\"marker\" />\n            {checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                class=\"denhaag-icon\"\n                focusable=\"false\"\n                aria-hidden=\"true\"\n                shape-rendering=\"auto\"\n              >\n                <path\n                  d=\"M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.75\"\n                ></path>\n              </svg>\n            )}\n          </div>\n          <p\n            class={clsx('denhaag-process-steps__sub-step-heading', {\n              'denhaag-process-steps__sub-step-heading--checked': checked,\n            })}\n          >\n            <slot />\n          </p>\n        </div>\n      </li>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-progress-sublist-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCc1jZ,uBAAuB;;;;;;mBAEN,KAAK;;EACjC,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACrC,QACE,UAAI,KAAK,EAAE,IAAI,CAAC,iCAAiC,EAAE,oCAAoC,UAAU,EAAE,CAAC,IAClG,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WACE,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,6BAA6B,EAAE;QAChE,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEF,YAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACN,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,cAAc,EACpB,SAAS,EAAC,OAAO,iBACL,MAAM,qBACF,MAAM,IAEtB,YACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACN,SACE,KAAK,EAAE,IAAI,CAAC,yCAAyC,EAAE;QACrD,kDAAkD,EAAE,OAAO;OAC5D,CAAC,IAEF,eAAQ,CACN,CACA,CACH,EACL;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-list.scss?tag=utrecht-progress-sublist-item&encapsulation=shadow","src/components/progress-sublist-item.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\n@import \"~@gemeente-denhaag/process-steps/dist/index.css\";\n@import \"~@gemeente-denhaag/step-marker/dist/index.css\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","/**\n * @license EUPL-1.2\n * Copyright (c) 2020-2022 Gemeente Utrecht\n * Copyright (c) 2020-2022 Frameless B.V.\n */\n\nimport { Component, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-progress-sublist-item',\n  styleUrl: 'progress-list.scss',\n  shadow: true,\n})\nexport class StepProgressSublistItem {\n  @Prop() appearance?: string;\n  @Prop() checked?: boolean = false;\n  render() {\n    const { appearance, checked } = this;\n    return (\n      <li class={clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`)}>\n        <div class=\"denhaag-process-steps__step-header\">\n          <div\n            class={clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {\n              'denhaag-step-marker--checked': checked,\n              'denhaag-step-marker--not-checked': !checked,\n            })}\n          >\n            <slot name=\"marker\" />\n            {checked && (\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"1em\"\n                height=\"1em\"\n                viewBox=\"0 0 24 24\"\n                class=\"denhaag-icon\"\n                focusable=\"false\"\n                aria-hidden=\"true\"\n                shape-rendering=\"auto\"\n              >\n                <path\n                  d=\"M20.664 5.253a1 1 0 01.083 1.411l-10.666 12a1 1 0 01-1.495 0l-5.333-6a1 1 0 011.494-1.328l4.586 5.159 9.92-11.16a1 1 0 011.411-.082z\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.75\"\n                ></path>\n              </svg>\n            )}\n          </div>\n          <p\n            class={clsx('denhaag-process-steps__sub-step-heading', {\n              'denhaag-process-steps__sub-step-heading--checked': checked,\n            })}\n          >\n            <slot />\n          </p>\n        </div>\n      </li>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-textarea.js

@@ -37,7 +37,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
   }
   render() {
     const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;
-    return (h("textarea", { autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+    return (h("textarea", { autoComplete: autocomplete || null, class: clsx('utrecht-textarea', 'utrecht-textarea--html-textarea', disabled && 'utrecht-textarea--disabled', invalid && 'utrecht-textarea--invalid', readOnly && 'utrecht-textarea--readonly'), cols: cols !== HTML_DEFAULT_COLS ? cols : null, disabled: disabled, dir: "auto", placeholder: placeholder || null, readonly: readOnly, required: required, spellcheck: spellcheck || null, rows: rows !== HTML_DEFAULT_ROWS ? rows : null, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
         this.value = evt.target.value;
         this.utrechtInput.emit(evt);
       } }, h("slot", null)));

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

@@ -1 +1 @@
-{"file":"utrecht-textarea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,i6RAAi6R;;ACQr7R;;;;;;;;;;AAUA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;MAOf,QAAQ;;;;;;;;;wBACY,EAAE;gBACV,iBAAiB;sBACV,KAAK;oBACU,KAAK;mBACN,KAAK;uBACnB,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBAC3B,iBAAiB;iBAChB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEjH,QACE,gBACE,YAAY,EAAE,YAAY,IAAI,IAAI,EAClC,KAAK,EAAE,IAAI,CACT,kBAAkB,EAClB,iCAAiC,EACjC,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,2BAA2B,EACtC,QAAQ,IAAI,4BAA4B,CACzC,EACD,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAAI,IAAI,EAC9B,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;QACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC7B,IAED,eAAQ,CACC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/textarea.scss?tag=utrecht-textarea&encapsulation=shadow","src/components/textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textarea/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 */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * I would prefer to set `rows` and `cols` only when the properties are actually set,\n * and explicitly configure them when they are set.\n *\n * Currently Stencil offers no way to detect of the property value is the default value.\n * `this.hasOwnProperty('cols')` does not work, for example.\n *\n * As a workaround, there is a check if `cols` and `rows` are equal to the\n * `<textarea>` defaults of `2` and `20`.\n */\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class Textarea {\n  @Prop() autocomplete: string = '';\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop() spellcheck: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;\n\n    return (\n      <textarea\n        autoComplete={autocomplete || null}\n        class={clsx(\n          'utrecht-textarea',\n          'utrecht-textarea--html-textarea',\n          disabled && 'utrecht-textarea--disabled',\n          invalid && 'utrecht-textarea--invalid',\n          readOnly && 'utrecht-textarea--readonly',\n        )}\n        cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n        disabled={disabled}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        spellcheck={spellcheck || null}\n        rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLTextAreaElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      >\n        <slot />\n      </textarea>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-textarea.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,i6RAAi6R;;ACQr7R;;;;;;;;;;AAUA,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,iBAAiB,GAAG,CAAC,CAAC;MAOf,QAAQ;;;;;;;;;wBACY,EAAE;gBACV,iBAAiB;sBACV,KAAK;oBACU,KAAK;mBACN,KAAK;uBACnB,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBAC3B,iBAAiB;iBAChB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEjH,QACE,gBACE,YAAY,EAAE,YAAY,IAAI,IAAI,EAClC,KAAK,EAAE,IAAI,CACT,kBAAkB,EAClB,iCAAiC,EACjC,QAAQ,IAAI,4BAA4B,EACxC,OAAO,IAAI,2BAA2B,EACtC,QAAQ,IAAI,4BAA4B,CACzC,EACD,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IAAI,IAAI,EAC9B,IAAI,EAAE,IAAI,KAAK,iBAAiB,GAAG,IAAI,GAAG,IAAI,EAC9C,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;QACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA8B,CAAC,KAAK,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC7B,IAED,eAAQ,CACC,EACX;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/textarea.scss?tag=utrecht-textarea&encapsulation=shadow","src/components/textarea.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textarea/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 */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * I would prefer to set `rows` and `cols` only when the properties are actually set,\n * and explicitly configure them when they are set.\n *\n * Currently Stencil offers no way to detect of the property value is the default value.\n * `this.hasOwnProperty('cols')` does not work, for example.\n *\n * As a workaround, there is a check if `cols` and `rows` are equal to the\n * `<textarea>` defaults of `2` and `20`.\n */\nconst HTML_DEFAULT_COLS = 20;\nconst HTML_DEFAULT_ROWS = 2;\n\n@Component({\n  tag: 'utrecht-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class Textarea {\n  @Prop() autocomplete: string = '';\n  @Prop() cols: number = HTML_DEFAULT_COLS;\n  @Prop() spellcheck: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() rows: number = HTML_DEFAULT_ROWS;\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autocomplete, cols, disabled, invalid, placeholder, readOnly, required, rows, spellcheck, value } = this;\n\n    return (\n      <textarea\n        autoComplete={autocomplete || null}\n        class={clsx(\n          'utrecht-textarea',\n          'utrecht-textarea--html-textarea',\n          disabled && 'utrecht-textarea--disabled',\n          invalid && 'utrecht-textarea--invalid',\n          readOnly && 'utrecht-textarea--readonly',\n        )}\n        cols={cols !== HTML_DEFAULT_COLS ? cols : null}\n        disabled={disabled}\n        dir=\"auto\"\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        spellcheck={spellcheck || null}\n        rows={rows !== HTML_DEFAULT_ROWS ? rows : null}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLTextAreaElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      >\n        <slot />\n      </textarea>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-textbox.js

@@ -26,7 +26,7 @@ const Textbox = /*@__PURE__*/ proxyCustomElement(class Textbox extends HTMLEleme
   }
   render() {
     const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;
-    return (h("input", { class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, min: min ? min : null, max: max ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
+    return (h("input", { class: clsx('utrecht-textbox', 'utrecht-textbox--html-input', disabled && 'utrecht-textbox--disabled', invalid && 'utrecht-textbox--invalid', readOnly && 'utrecht-textbox--readonly'), type: type || 'text', autoComplete: autoComplete ? autoComplete : null, disabled: disabled, dir: "auto", min: typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null, max: typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null, pattern: pattern ? pattern : null, placeholder: placeholder || null, readonly: readOnly, required: required, value: value, onBlur: (evt) => this.utrechtBlur.emit(evt), onChange: (evt) => this.utrechtChange.emit(evt), onFocus: (evt) => this.utrechtFocus.emit(evt), onInput: (evt) => {
         this.value = evt.target.value;
         this.utrechtInput.emit(evt);
       } }));
@@ -36,8 +36,8 @@ const Textbox = /*@__PURE__*/ proxyCustomElement(class Textbox extends HTMLEleme
     "autoComplete": [513, "autocomplete"],
     "disabled": [516],
     "invalid": [516],
-    "min": [1],
-    "max": [1],
+    "min": [8],
+    "max": [8],
     "pattern": [1],
     "placeholder": [1],
     "readOnly": [516, "readonly"],

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

@@ -1 +1 @@
-{"file":"utrecht-textbox.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,q+TAAq+T;;MCa3+T,OAAO;;;;;;;;;wBACyD,EAAE;oBAChC,KAAK;mBACN,KAAK;eAC3B,EAAE;eACF,EAAE;mBACE,EAAE;uBACE,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBACV,EAAE;iBAClB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAElH,QACE,aACE,KAAK,EAAE,IAAI,CACT,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,EAChD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EACrB,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,EACrB,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;QACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC7B,GACD,EACF;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/textbox.scss?tag=utrecht-textbox&encapsulation=shadow","src/components/textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textbox/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 */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;\n\n    return (\n      <input\n        class={clsx(\n          'utrecht-textbox',\n          'utrecht-textbox--html-input',\n          disabled && 'utrecht-textbox--disabled',\n          invalid && 'utrecht-textbox--invalid',\n          readOnly && 'utrecht-textbox--readonly',\n        )}\n        type={type || 'text'}\n        autoComplete={autoComplete ? autoComplete : null}\n        disabled={disabled}\n        min={min ? min : null}\n        max={max ? max : null}\n        pattern={pattern ? pattern : null}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLInputElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-textbox.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,q+TAAq+T;;MCa3+T,OAAO;;;;;;;;;wBACyD,EAAE;oBAChC,KAAK;mBACN,KAAK;eAClB,EAAE;eACF,EAAE;mBACP,EAAE;uBACE,EAAE;oBACoC,KAAK;oBAC5B,KAAK;gBACV,EAAE;iBAClB,EAAE;;EAM1B,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAElH,QACE,aACE,KAAK,EAAE,IAAI,CACT,iBAAiB,EACjB,6BAA6B,EAC7B,QAAQ,IAAI,2BAA2B,EACvC,OAAO,IAAI,0BAA0B,EACrC,QAAQ,IAAI,2BAA2B,CACxC,EACD,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,YAAY,EAAE,YAAY,GAAG,YAAY,GAAG,IAAI,EAChD,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAC,MAAM,EACV,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,GAAG,EAAE,OAAO,GAAG,KAAK,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,IAAI,EACjF,OAAO,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI,EACjC,WAAW,EAAE,WAAW,IAAI,IAAI,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3C,QAAQ,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,EAC/C,OAAO,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,OAAO,EAAE,CAAC,GAAG;QACX,IAAI,CAAC,KAAK,GAAI,GAAG,CAAC,MAA2B,CAAC,KAAK,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC7B,GACD,EACF;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/textbox.scss?tag=utrecht-textbox&encapsulation=shadow","src/components/textbox.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/textbox/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 */\n\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-textbox',\n  styleUrl: 'textbox.scss',\n  shadow: true,\n})\nexport class Textbox {\n  @Prop({ attribute: 'autocomplete', reflect: true }) autoComplete: string = '';\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) invalid: boolean = false;\n  @Prop() min: number | string = '';\n  @Prop() max: number | string = '';\n  @Prop() pattern: string = '';\n  @Prop() placeholder: string = '';\n  @Prop({ attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop({ reflect: true }) type: string = '';\n  @Prop() value: string = '';\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { autoComplete, disabled, invalid, min, max, pattern, placeholder, readOnly, required, type, value } = this;\n\n    return (\n      <input\n        class={clsx(\n          'utrecht-textbox',\n          'utrecht-textbox--html-input',\n          disabled && 'utrecht-textbox--disabled',\n          invalid && 'utrecht-textbox--invalid',\n          readOnly && 'utrecht-textbox--readonly',\n        )}\n        type={type || 'text'}\n        autoComplete={autoComplete ? autoComplete : null}\n        disabled={disabled}\n        dir=\"auto\"\n        min={typeof min === 'number' ? String(min) : typeof min === 'string' ? min : null}\n        max={typeof max === 'number' ? String(max) : typeof max === 'string' ? max : null}\n        pattern={pattern ? pattern : null}\n        placeholder={placeholder || null}\n        readonly={readOnly}\n        required={required}\n        value={value}\n        onBlur={(evt) => this.utrechtBlur.emit(evt)}\n        onChange={(evt) => this.utrechtChange.emit(evt)}\n        onFocus={(evt) => this.utrechtFocus.emit(evt)}\n        onInput={(evt) => {\n          this.value = (evt.target as HTMLInputElement).value;\n          this.utrechtInput.emit(evt);\n        }}\n      />\n    );\n  }\n}\n"],"version":3}