@utrecht/web-component-library-stencil 1.2.1 → 1.4.0

package/dist/components/utrecht-form-toggle.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as clsx } from './clsx.m.js';
+import { c as clsx } from './clsx.js';
 
 const formToggleCss = ".utrecht-form-toggle{align-items:center;block-size:var(--utrecht-form-toggle-height, 2em);border-color:var(--utrecht-form-toggle-border-color, currentColor);border-radius:var(--utrecht-form-toggle-border-radius, 999rem);border-style:var(--utrecht-form-toggle-border-style, solid);border-width:var(--utrecht-form-toggle-border-width, 1px);color:var(--utrecht-form-toggle-color);cursor:var(--utrecht-action-activate-cursor, revert);display:flex;inline-size:var(--utrecht-form-toggle-width, 6em);padding-block-end:var(--utrecht-form-toggle-padding-block-end);padding-block-start:var(--utrecht-form-toggle-padding-block-start);padding-inline-end:var(--utrecht-form-toggle-padding-inline-end);padding-inline-start:var(--utrecht-form-toggle-padding-inline-start);position:relative;-webkit-user-select:none;user-select:none}@media screen and (-ms-high-contrast: active), screen and (forced-colors: active){.utrecht-form-toggle{--utrecht-form-toggle-background-color:ButtonFace;--utrecht-form-toggle-border-color:buttonborder;--utrecht-form-toggle-border-width:1px;--utrecht-form-toggle-border-radius:var(--utrecht-form-toggle-track-border-radius);--utrecht-form-toggle-thumb-background-color:ButtonText;--utrecht-form-toggle-thumb-disabled-background-color:GrayText;border-color:var(--utrecht-form-toggle-track-disabled-border-color, var(--utrecht-form-toggle-track-border-color));border-width:min(var(--utrecht-form-toggle-border-width, 1px), 1px);}}.utrecht-form-toggle--focus-visible,.utrecht-form-toggle--html-div:focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--hover,.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):not(.utrecht-form-toggle--html-div:disabled):hover{background-color:var(--utrecht-form-toggle-hover-background-color, var(--utrecht-form-toggle-background-color));color:var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color))}.utrecht-form-toggle--disabled,.utrecht-form-toggle--html-div:disabled{border-color:var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor));border-style:var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid));border-width:var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px));cursor:var(--utrecht-action-disabled-cursor, not-allowed)}.utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-background-color, currentColor);border-radius:var(--utrecht-form-toggle-thumb-border-radius, 50%);box-shadow:var(--utrecht-form-toggle-thumb-box-shadow);margin-inline-end:var(--utrecht-form-toggle-thumb-margin-inline-end, 0);margin-inline-start:var(--utrecht-form-toggle-thumb-margin-inline-start, 0);min-block-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);min-inline-size:var(--utrecht-form-toggle-thumb-min-inline-size, 1.5em);z-index:20}.utrecht-form-toggle__thumb--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-start:auto}.utrecht-form-toggle__thumb--not-checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked)~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{margin-inline-end:auto}.utrecht-form-toggle__thumb--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track .utrecht-form-toggle__thumb{background-color:var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa);box-shadow:var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0)}.utrecht-form-toggle__track{align-items:center;background-color:var(--utrecht-form-toggle-accent-color);block-size:100%;border-radius:var(--utrecht-form-toggle-track-border-radius, var(--utrecht-form-toggle-border-radius));display:flex;inline-size:100%}.utrecht-form-toggle__track--html-label{cursor:inherit}.utrecht-form-toggle__track--checked,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color))}.utrecht-form-toggle__track--disabled,.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled~.utrecht-form-toggle__track{background-color:var(--utrecht-form-toggle-background-disabled-background-color, #ddd);color:var(--utrecht-form-toggle-disabled-color, black)}.utrecht-form-toggle__track--focus-visible{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox{block-size:1px !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;inline-size:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important}.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:focus-visible~.utrecht-form-toggle__track{--_utrecht-focus-ring-box-shadow:0 0 0 var(--utrecht-focus-outline-width, 0)\n    var(--utrecht-focus-inverse-outline-color, transparent);box-shadow:var(--_utrecht-focus-ring-box-shadow);outline-color:var(--utrecht-focus-outline-color, revert);outline-offset:var(--utrecht-focus-outline-offset, revert);outline-style:var(--utrecht-focus-outline-style, revert);outline-width:var(--utrecht-focus-outline-width, revert)}:host{display:inline-block}:host([hidden]){display:none !important}";
+const UtrechtFormToggleStyle0 = formToggleCss;
 
 const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTMLElement {
     constructor() {
@@ -38,9 +39,9 @@ const FormToggle = /*@__PURE__*/ proxyCustomElement(class FormToggle extends HTM
                 toggleInteraction();
             }
         };
-        return (h("div", { class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
+        return (h("div", { key: '54f5470a38cb60e12130f75e9b24ac02b9d96db9', class: clsx('utrecht-form-toggle', checked && 'utrecht-form-toggle--checked', !checked && 'utrecht-form-toggle--not-checked', disabled && 'utrecht-form-toggle--disabled'), tabIndex: disabled ? null : 0, role: "switch", "aria-disabled": disabled ? 'true' : null, onClick: handleClick, onKeyPress: handleKeyPress, onKeyUp: handleKeyUp }, h("div", { key: 'a265ad79b987d81de246ed844e7383b8bbddc69d', class: "utrecht-form-toggle__label utrecht-form-toggle__label--off" }), h("div", { key: '5832e80fa189690f6b6aad72b14bf6d073af9f43', class: "utrecht-form-toggle__label utrecht-form-toggle__label--on" }), h("div", { key: '2866dd1126c200d2c4f88ec05fc949d66ac2857f', class: clsx('utrecht-form-toggle__track', checked && 'utrecht-form-toggle__track--checked', !checked && 'utrecht-form-toggle__track--not-checked', disabled && 'utrecht-form-toggle__track--disabled') }, h("div", { key: 'a8da4d30ac7036f5cca07ab77b12e354de09acad', class: clsx('utrecht-form-toggle__thumb', checked && 'utrecht-form-toggle__thumb--checked', !checked && 'utrecht-form-toggle__thumb--not-checked', disabled && 'utrecht-form-toggle__thumb--disabled') }))));
     }
-    static get style() { return formToggleCss; }
+    static get style() { return UtrechtFormToggleStyle0; }
 }, [1, "utrecht-form-toggle", {
         "disabled": [516],
         "checked": [516]

package/dist/components/utrecht-form-toggle.js.map

@@ -1 +1 @@
-{"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,8mMAA8mM;;MCavnM,UAAU;;;;;;;;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,iBAAiB,EAAE,CAAC;SACrB,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG;YACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;gBAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;aACtB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG;YACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC3C,iBAAiB,EAAE,CAAC;aACrB;SACF,CAAC;QAEF,QACE,WACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,WAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,WAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,WACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-toggle.scss?tag=utrecht-form-toggle&encapsulation=shadow","src/components/form-toggle.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-toggle-css/src\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n  @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n  @extend .utrecht-form-toggle--hover;\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-form-toggle',\n  styleUrl: 'form-toggle.scss',\n  shadow: true,\n})\nexport class FormToggle {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled } = this;\n\n    const toggleInteraction = () => {\n      if (!this.disabled) {\n        this.checked = !this.checked;\n        this.utrechtInput.emit(this);\n        this.utrechtChange.emit(this);\n      }\n    };\n\n    const handleClick = () => {\n      toggleInteraction();\n    };\n\n    const handleKeyPress = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        // Do not scroll the page using Space when the toggle is focussed\n        evt.preventDefault();\n      }\n    };\n\n    const handleKeyUp = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        toggleInteraction();\n      }\n    };\n\n    return (\n      <div\n        class={clsx(\n          'utrecht-form-toggle',\n          checked && 'utrecht-form-toggle--checked',\n          !checked && 'utrecht-form-toggle--not-checked',\n          disabled && 'utrecht-form-toggle--disabled',\n        )}\n        tabIndex={disabled ? null : 0}\n        role=\"switch\"\n        aria-disabled={disabled ? 'true' : null}\n        onClick={handleClick}\n        onKeyPress={handleKeyPress}\n        onKeyUp={handleKeyUp}\n      >\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n        <div\n          class={clsx(\n            'utrecht-form-toggle__track',\n            checked && 'utrecht-form-toggle__track--checked',\n            !checked && 'utrecht-form-toggle__track--not-checked',\n            disabled && 'utrecht-form-toggle__track--disabled',\n          )}\n        >\n          <div\n            class={clsx(\n              'utrecht-form-toggle__thumb',\n              checked && 'utrecht-form-toggle__thumb--checked',\n              !checked && 'utrecht-form-toggle__thumb--not-checked',\n              disabled && 'utrecht-form-toggle__thumb--disabled',\n            )}\n          ></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form-toggle.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,8mMAA8mM,CAAC;AACroM,gCAAe,aAAa;;MCYf,UAAU;;;;;;;;;wBACwB,KAAK;uBACN,KAAK;;IAMjD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAEnC,MAAM,iBAAiB,GAAG;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,iBAAiB,EAAE,CAAC;SACrB,CAAC;QAEF,MAAM,cAAc,GAAG,CAAC,GAAG;YACzB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;;gBAE3C,GAAG,CAAC,cAAc,EAAE,CAAC;aACtB;SACF,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,GAAG;YACtB,IAAI,GAAG,CAAC,IAAI,KAAK,OAAO,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;gBAC3C,iBAAiB,EAAE,CAAC;aACrB;SACF,CAAC;QAEF,QACE,4DACE,KAAK,EAAE,IAAI,CACT,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,CAAC,OAAO,IAAI,kCAAkC,EAC9C,QAAQ,IAAI,+BAA+B,CAC5C,EACD,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,CAAC,EAC7B,IAAI,EAAC,QAAQ,mBACE,QAAQ,GAAG,MAAM,GAAG,IAAI,EACvC,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,cAAc,EAC1B,OAAO,EAAE,WAAW,IAEpB,4DAAK,KAAK,EAAC,4DAA4D,GAAO,EAC9E,4DAAK,KAAK,EAAC,2DAA2D,GAAO,EAC7E,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,IAED,4DACE,KAAK,EAAE,IAAI,CACT,4BAA4B,EAC5B,OAAO,IAAI,qCAAqC,EAChD,CAAC,OAAO,IAAI,yCAAyC,EACrD,QAAQ,IAAI,sCAAsC,CACnD,GACI,CACH,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form-toggle.scss?tag=utrecht-form-toggle&encapsulation=shadow","src/components/form-toggle.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/form-toggle-css/src\";\n\n:host {\n  display: inline-block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):focus {\n  @extend .utrecht-form-toggle--focus;\n}\n\n.utrecht-form-toggle:not(.utrecht-form-toggle--disabled):hover {\n  @extend .utrecht-form-toggle--hover;\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-form-toggle',\n  styleUrl: 'form-toggle.scss',\n  shadow: true,\n})\nexport class FormToggle {\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) checked: boolean = false;\n  @Event() utrechtBlur: EventEmitter;\n  @Event() utrechtChange: EventEmitter;\n  @Event() utrechtFocus: EventEmitter;\n  @Event() utrechtInput: EventEmitter;\n\n  render() {\n    const { checked, disabled } = this;\n\n    const toggleInteraction = () => {\n      if (!this.disabled) {\n        this.checked = !this.checked;\n        this.utrechtInput.emit(this);\n        this.utrechtChange.emit(this);\n      }\n    };\n\n    const handleClick = () => {\n      toggleInteraction();\n    };\n\n    const handleKeyPress = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        // Do not scroll the page using Space when the toggle is focussed\n        evt.preventDefault();\n      }\n    };\n\n    const handleKeyUp = (evt) => {\n      if (evt.code === 'Space' || evt.key === ' ') {\n        toggleInteraction();\n      }\n    };\n\n    return (\n      <div\n        class={clsx(\n          'utrecht-form-toggle',\n          checked && 'utrecht-form-toggle--checked',\n          !checked && 'utrecht-form-toggle--not-checked',\n          disabled && 'utrecht-form-toggle--disabled',\n        )}\n        tabIndex={disabled ? null : 0}\n        role=\"switch\"\n        aria-disabled={disabled ? 'true' : null}\n        onClick={handleClick}\n        onKeyPress={handleKeyPress}\n        onKeyUp={handleKeyUp}\n      >\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--off\"></div>\n        <div class=\"utrecht-form-toggle__label utrecht-form-toggle__label--on\"></div>\n        <div\n          class={clsx(\n            'utrecht-form-toggle__track',\n            checked && 'utrecht-form-toggle__track--checked',\n            !checked && 'utrecht-form-toggle__track--not-checked',\n            disabled && 'utrecht-form-toggle__track--disabled',\n          )}\n        >\n          <div\n            class={clsx(\n              'utrecht-form-toggle__thumb',\n              checked && 'utrecht-form-toggle__thumb--checked',\n              !checked && 'utrecht-form-toggle__thumb--not-checked',\n              disabled && 'utrecht-form-toggle__thumb--disabled',\n            )}\n          ></div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-form.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const formCss = ".utrecht-form{display:block;max-inline-size:var(--utrecht-form-max-inline-size)}:host{display:block;max-inline-size:var(--utrecht-form-max-inline-size)}.utrecht-form__heading:empty{display:none}:host([hidden]){display:none !important}";
+const UtrechtFormStyle0 = formCss;
 
 const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
     constructor() {
@@ -21,7 +22,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
         });
         return (h("form", { action: action, "aria-labelledby": headingId, autocomplete: autocomplete, enctype: enctype, method: method, novalidate: noValidate, target: target }, h("div", { class: "utrecht-form__heading", id: headingId }, h("slot", { name: "heading" })), h("slot", null)));
     }
-    static get style() { return formCss; }
+    static get style() { return UtrechtFormStyle0; }
 }, [4, "utrecht-form", {
         "action": [1],
         "autocomplete": [1],

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

@@ -1 +1 @@
-{"file":"utrecht-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,4OAA4O;;MCa/O,IAAI;;;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC5F,CAAC,CAAC;QAEH,QACE,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS,IAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,EACN,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form.scss?tag=utrecht-form","src/components/form.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/form-css/src\";\n\n:host {\n  @include utrecht-form;\n}\n\n.utrecht-form__heading:empty {\n  display: none;\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';\n\n@Component({\n  tag: 'utrecht-form',\n  styleUrl: 'form.scss',\n  shadow: false,\n})\nexport class Form {\n  @Prop() action?: string;\n  @Prop() autocomplete?: string;\n  @Prop() enctype?: string;\n  @Prop() method?: string;\n  @Prop({ attribute: 'novalidate' }) noValidate?: string;\n  @Prop() target?: string;\n  render() {\n    const { action, autocomplete, enctype, method, target, noValidate } = this;\n    const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n      const c = parseInt(n, 10);\n      return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n    });\n\n    return (\n      <form\n        action={action}\n        aria-labelledby={headingId}\n        autocomplete={autocomplete}\n        enctype={enctype}\n        method={method}\n        novalidate={noValidate}\n        target={target}\n      >\n        <div class=\"utrecht-form__heading\" id={headingId}>\n          <slot name=\"heading\" />\n        </div>\n        <slot></slot>\n      </form>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-form.js","mappings":";;AAAA,MAAM,OAAO,GAAG,4OAA4O,CAAC;AAC7P,0BAAe,OAAO;;MCYT,IAAI;;;;;;;;;;;IAOf,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAC3E,MAAM,SAAS,GAAG,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC3E,MAAM,CAAC,GAAG,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC1B,OAAO,CAAC,CAAC,IAAI,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;SAC5F,CAAC,CAAC;QAEH,QACE,YACE,MAAM,EAAE,MAAM,qBACG,SAAS,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEd,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,SAAS,IAC9C,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,EACN,eAAa,CACR,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/form.scss?tag=utrecht-form","src/components/form.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/form-css/src\";\n\n:host {\n  @include utrecht-form;\n}\n\n.utrecht-form__heading:empty {\n  display: none;\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';\n\n@Component({\n  tag: 'utrecht-form',\n  styleUrl: 'form.scss',\n  shadow: false,\n})\nexport class Form {\n  @Prop() action?: string;\n  @Prop() autocomplete?: string;\n  @Prop() enctype?: string;\n  @Prop() method?: string;\n  @Prop({ attribute: 'novalidate' }) noValidate?: string;\n  @Prop() target?: string;\n  render() {\n    const { action, autocomplete, enctype, method, target, noValidate } = this;\n    const headingId = '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (n) => {\n      const c = parseInt(n, 10);\n      return (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16);\n    });\n\n    return (\n      <form\n        action={action}\n        aria-labelledby={headingId}\n        autocomplete={autocomplete}\n        enctype={enctype}\n        method={method}\n        novalidate={noValidate}\n        target={target}\n      >\n        <div class=\"utrecht-form__heading\" id={headingId}>\n          <slot name=\"heading\" />\n        </div>\n        <slot></slot>\n      </form>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const heading1Css = ":host{display:contents}:host([hidden]){display:none !important}h1{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid}";
+const UtrechtHeading1Style0 = heading1Css;
 
 const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const Heading1 = /*@__PURE__*/ proxyCustomElement(class Heading1 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h1", null, h("slot", null)));
+        return (h("h1", { key: '30bf0309a22d4580e4d2f035d96a85b0fd7aed7a' }, h("slot", { key: 'ae2b518e72b3a1179baca0fa6be63736df7576ef' })));
     }
-    static get style() { return heading1Css; }
+    static get style() { return UtrechtHeading1Style0; }
 }, [1, "utrecht-heading-1"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,cACE,eAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-1.scss?tag=utrecht-heading-1&encapsulation=shadow","src/components/heading-1.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-1-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh1 {\n  @include utrecht-heading-1;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-1',\n  styleUrl: 'heading-1.scss',\n  shadow: true,\n})\nexport class Heading1 {\n  render() {\n    return (\n      <h1>\n        <slot></slot>\n      </h1>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-1.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-1.scss?tag=utrecht-heading-1&encapsulation=shadow","src/components/heading-1.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-1-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh1 {\n  @include utrecht-heading-1;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-1',\n  styleUrl: 'heading-1.scss',\n  shadow: true,\n})\nexport class Heading1 {\n  render() {\n    return (\n      <h1>\n        <slot></slot>\n      </h1>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const heading4Css = ":host{display:contents}:host([hidden]){display:none !important}h4{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid}";
+const UtrechtHeading4Style0 = heading4Css;
 
 const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const Heading4 = /*@__PURE__*/ proxyCustomElement(class Heading4 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h4", null, h("slot", null)));
+        return (h("h4", { key: '495f19b93781a49a15a907a45eabe44af7954e2d' }, h("slot", { key: 'e5a2baf3d2380da0c65bda613bcaa0b59b5eff32' })));
     }
-    static get style() { return heading4Css; }
+    static get style() { return UtrechtHeading4Style0; }
 }, [1, "utrecht-heading-4"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,cACE,eAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-4.scss?tag=utrecht-heading-4&encapsulation=shadow","src/components/heading-4.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-4-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh4 {\n  @include utrecht-heading-4;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-4',\n  styleUrl: 'heading-4.scss',\n  shadow: true,\n})\nexport class Heading4 {\n  render() {\n    return (\n      <h4>\n        <slot></slot>\n      </h4>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-4.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-4.scss?tag=utrecht-heading-4&encapsulation=shadow","src/components/heading-4.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-4-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh4 {\n  @include utrecht-heading-4;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-4',\n  styleUrl: 'heading-4.scss',\n  shadow: true,\n})\nexport class Heading4 {\n  render() {\n    return (\n      <h4>\n        <slot></slot>\n      </h4>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const heading5Css = ":host{display:contents}:host([hidden]){display:none !important}h5{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid}";
+const UtrechtHeading5Style0 = heading5Css;
 
 const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const Heading5 = /*@__PURE__*/ proxyCustomElement(class Heading5 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h5", null, h("slot", null)));
+        return (h("h5", { key: 'f68577183f5776b0eaa550024e23b69c3c60c7a4' }, h("slot", { key: '86f4f70516d905b7692379d6e87e93be52280fcd' })));
     }
-    static get style() { return heading5Css; }
+    static get style() { return UtrechtHeading5Style0; }
 }, [1, "utrecht-heading-5"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,cACE,eAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-5.scss?tag=utrecht-heading-5&encapsulation=shadow","src/components/heading-5.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-5-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh5 {\n  @include utrecht-heading-5;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-5',\n  styleUrl: 'heading-5.scss',\n  shadow: true,\n})\nexport class Heading5 {\n  render() {\n    return (\n      <h5>\n        <slot></slot>\n      </h5>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-5.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-5.scss?tag=utrecht-heading-5&encapsulation=shadow","src/components/heading-5.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-5-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh5 {\n  @include utrecht-heading-5;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-5',\n  styleUrl: 'heading-5.scss',\n  shadow: true,\n})\nexport class Heading5 {\n  render() {\n    return (\n      <h5>\n        <slot></slot>\n      </h5>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const heading6Css = ":host{display:contents}:host([hidden]){display:none !important}h6{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid}";
+const UtrechtHeading6Style0 = heading6Css;
 
 const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const Heading6 = /*@__PURE__*/ proxyCustomElement(class Heading6 extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return (h("h6", null, h("slot", null)));
+        return (h("h6", { key: '49fafa5e86bacd0e46af5489d31da621facd5b3c' }, h("slot", { key: '14b0baa49df2ce65542b1ae0163f885579b720d1' })));
     }
-    static get style() { return heading6Css; }
+    static get style() { return UtrechtHeading6Style0; }
 }, [1, "utrecht-heading-6"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB;;MCO/xB,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,cACE,eAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-6.scss?tag=utrecht-heading-6&encapsulation=shadow","src/components/heading-6.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-6-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh6 {\n  @include utrecht-heading-6;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-6',\n  styleUrl: 'heading-6.scss',\n  shadow: true,\n})\nexport class Heading6 {\n  render() {\n    return (\n      <h6>\n        <slot></slot>\n      </h6>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-6.js","mappings":";;AAAA,MAAM,WAAW,GAAG,wxBAAwxB,CAAC;AAC7yB,8BAAe,WAAW;;MCMb,QAAQ;;;;;;IACnB,MAAM;QACJ,QACE,6DACE,8DAAa,CACV,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-6.scss?tag=utrecht-heading-6&encapsulation=shadow","src/components/heading-6.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-6-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n\nh6 {\n  @include utrecht-heading-6;\n}\n","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading-6',\n  styleUrl: 'heading-6.scss',\n  shadow: true,\n})\nexport class Heading6 {\n  render() {\n    return (\n      <h6>\n        <slot></slot>\n      </h6>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const headingGroupCss = ":host{display:contents}hgroup{--utrecht-pre-heading-order:-1;display:flex;flex-direction:column;margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-group-margin-block-start, 0))}hgroup>*{--utrecht-space-around:0}:host([hidden]){display:none !important}";
+const UtrechtHeadingGroupStyle0 = headingGroupCss;
 
 const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const HeadingGroup = /*@__PURE__*/ proxyCustomElement(class HeadingGroup extends
         this.__attachShadow();
     }
     render() {
-        return (h("hgroup", null, h("slot", null)));
+        return (h("hgroup", { key: 'a087c2e881fe0ccd660e496db6be7ec9befab7b4' }, h("slot", { key: '253d3313b76f500865ab54dc28057d47eb5981a0' })));
     }
-    static get style() { return headingGroupCss; }
+    static get style() { return UtrechtHeadingGroupStyle0; }
 }, [1, "utrecht-heading-group"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

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

@@ -1 +1 @@
-{"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kYAAkY;;MCa7Y,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,kBACE,eAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-group.scss?tag=utrecht-heading-group&encapsulation=shadow","src/components/heading-group.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/heading-group-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\nhgroup {\n  @include utrecht-heading-group;\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-heading-group',\n  styleUrl: 'heading-group.scss',\n  shadow: true,\n})\nexport class HeadingGroup {\n  render() {\n    return (\n      <hgroup>\n        <slot></slot>\n      </hgroup>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading-group.js","mappings":";;AAAA,MAAM,eAAe,GAAG,kYAAkY,CAAC;AAC3Z,kCAAe,eAAe;;MCYjB,YAAY;;;;;;IACvB,MAAM;QACJ,QACE,iEACE,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading-group.scss?tag=utrecht-heading-group&encapsulation=shadow","src/components/heading-group.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/heading-group-css/src/mixin\";\n\n:host {\n  display: contents;\n}\n\nhgroup {\n  @include utrecht-heading-group;\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-heading-group',\n  styleUrl: 'heading-group.scss',\n  shadow: true,\n})\nexport class HeadingGroup {\n  render() {\n    return (\n      <hgroup>\n        <slot></slot>\n      </hgroup>\n    );\n  }\n}\n"],"version":3}

package/dist/components/utrecht-heading.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
 const headingCss = ".utrecht-heading-1{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-1-font-size, revert);font-weight:var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-1-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-1--distanced{--utrecht-space-around:1}.utrecht-heading-2{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-2-font-size, revert);font-weight:var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-2-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-2--distanced{--utrecht-space-around:1}.utrecht-heading-3{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-3-font-size, revert);font-weight:var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-3-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-3--distanced{--utrecht-space-around:1}.utrecht-heading-4{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-4-font-size, revert);font-weight:var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-4-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-4--distanced{--utrecht-space-around:1}.utrecht-heading-5{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-5-font-size, revert);font-weight:var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-5-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-5--distanced{--utrecht-space-around:1}.utrecht-heading-6{break-inside:avoid-column;page-break-after:avoid;page-break-inside:avoid;color:var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));font-family:var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));font-size:var(--utrecht-heading-6-font-size, revert);font-weight:var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));line-height:var(--utrecht-heading-6-line-height);margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));page-break-after:avoid}.utrecht-heading-6--distanced{--utrecht-space-around:1}:host{display:block}:host([hidden]){display:none !important}";
+const UtrechtHeadingStyle0 = headingCss;
 
 const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLElement {
     constructor() {
@@ -32,7 +33,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
             return (h("div", { class: "utrecht-heading", role: "heading", "aria-level": this.level }, h("slot", null)));
         }
     }
-    static get style() { return headingCss; }
+    static get style() { return UtrechtHeadingStyle0; }
 }, [1, "utrecht-heading", {
         "level": [2]
     }]);

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

@@ -1 +1 @@
-{"file":"utrecht-heading.js","mappings":";;AAAA,MAAM,UAAU,GAAG,kvJAAkvJ;;MCOxvJ,OAAO;;;;;;;IAMlB,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM;YACL,QACE,WAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,IAChE,eAAa,CACT,EACN;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading.scss?tag=utrecht-heading&encapsulation=shadow","src/components/heading.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-1-css/src\";\n@import \"~@utrecht/heading-2-css/src\";\n@import \"~@utrecht/heading-3-css/src\";\n@import \"~@utrecht/heading-4-css/src\";\n@import \"~@utrecht/heading-5-css/src\";\n@import \"~@utrecht/heading-6-css/src\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading',\n  styleUrl: 'heading.scss',\n  shadow: true,\n})\nexport class Heading {\n  /**\n   * Heading level\n   */\n  @Prop() level: number;\n\n  render() {\n    if (this.level === 1) {\n      return (\n        <h1 class=\"utrecht-heading-1\">\n          <slot></slot>\n        </h1>\n      );\n    } else if (this.level === 2) {\n      return (\n        <h2 class=\"utrecht-heading-2\">\n          <slot></slot>\n        </h2>\n      );\n    } else if (this.level === 3) {\n      return (\n        <h3 class=\"utrecht-heading-3\">\n          <slot></slot>\n        </h3>\n      );\n    } else if (this.level === 4) {\n      return (\n        <h4 class=\"utrecht-heading-4\">\n          <slot></slot>\n        </h4>\n      );\n    } else if (this.level === 5) {\n      return (\n        <h5 class=\"utrecht-heading-5\">\n          <slot></slot>\n        </h5>\n      );\n    } else if (this.level === 6) {\n      return (\n        <h6 class=\"utrecht-heading-6\">\n          <slot></slot>\n        </h6>\n      );\n    } else {\n      return (\n        <div class=\"utrecht-heading\" role=\"heading\" aria-level={this.level}>\n          <slot></slot>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"utrecht-heading.js","mappings":";;AAAA,MAAM,UAAU,GAAG,kvJAAkvJ,CAAC;AACtwJ,6BAAe,UAAU;;MCMZ,OAAO;;;;;;;IAMlB,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YACpB,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;YAC3B,QACE,UAAI,KAAK,EAAC,mBAAmB,IAC3B,eAAa,CACV,EACL;SACH;aAAM;YACL,QACE,WAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,SAAS,gBAAa,IAAI,CAAC,KAAK,IAChE,eAAa,CACT,EACN;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/heading.scss?tag=utrecht-heading&encapsulation=shadow","src/components/heading.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/heading-1-css/src\";\n@import \"~@utrecht/heading-2-css/src\";\n@import \"~@utrecht/heading-3-css/src\";\n@import \"~@utrecht/heading-4-css/src\";\n@import \"~@utrecht/heading-5-css/src\";\n@import \"~@utrecht/heading-6-css/src\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'utrecht-heading',\n  styleUrl: 'heading.scss',\n  shadow: true,\n})\nexport class Heading {\n  /**\n   * Heading level\n   */\n  @Prop() level: number;\n\n  render() {\n    if (this.level === 1) {\n      return (\n        <h1 class=\"utrecht-heading-1\">\n          <slot></slot>\n        </h1>\n      );\n    } else if (this.level === 2) {\n      return (\n        <h2 class=\"utrecht-heading-2\">\n          <slot></slot>\n        </h2>\n      );\n    } else if (this.level === 3) {\n      return (\n        <h3 class=\"utrecht-heading-3\">\n          <slot></slot>\n        </h3>\n      );\n    } else if (this.level === 4) {\n      return (\n        <h4 class=\"utrecht-heading-4\">\n          <slot></slot>\n        </h4>\n      );\n    } else if (this.level === 5) {\n      return (\n        <h5 class=\"utrecht-heading-5\">\n          <slot></slot>\n        </h5>\n      );\n    } else if (this.level === 6) {\n      return (\n        <h6 class=\"utrecht-heading-6\">\n          <slot></slot>\n        </h6>\n      );\n    } else {\n      return (\n        <div class=\"utrecht-heading\" role=\"heading\" aria-level={this.level}>\n          <slot></slot>\n        </div>\n      );\n    }\n  }\n}\n"],"version":3}