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

package/dist/cjs/utrecht-multiline-data.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 
 const multilineDataCss = ".utrecht-multiline-data{white-space:pre-line;white-space-collapse:preserve-breaks}.utrecht-multiline-data--html-pre{font-family:inherit;margin-block-end:0;margin-block-start:0}:host{white-space:pre-line;white-space-collapse:preserve-breaks}:host([hidden]){display:none !important}";
 
 const MultilineData = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("pre", { class: "utrecht-multiline-data utrecht-multiline-data--html-pre" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("pre", { class: "utrecht-multiline-data utrecht-multiline-data--html-pre" }, index.h("slot", null)));
+    }
 };
 MultilineData.style = multilineDataCss;
 

package/dist/cjs/utrecht-multiline-data.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-multiline-data.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,0RAA0R;;MCatS,aAAa;;;;EACxB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,yDAAyD,IAClEA,qBAAa,CACT,EACN;GACH;;;;;;","names":["h"],"sources":["src/components/multiline-data.scss?tag=utrecht-multiline-data&encapsulation=shadow","src/components/multiline-data.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/multiline-data/css\";\n\n:host {\n  @include utrecht-multiline-data;\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-multiline-data',\n  styleUrl: 'multiline-data.scss',\n  shadow: true,\n})\nexport class MultilineData {\n  render() {\n    return (\n      <pre class=\"utrecht-multiline-data utrecht-multiline-data--html-pre\">\n        <slot></slot>\n      </pre>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-multiline-data.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,0RAA0R;;MCatS,aAAa;;;;IACxB,MAAM;QACJ,QACEA,iBAAK,KAAK,EAAC,yDAAyD,IAClEA,qBAAa,CACT,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/multiline-data.scss?tag=utrecht-multiline-data&encapsulation=shadow","src/components/multiline-data.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/multiline-data/css\";\n\n:host {\n  @include utrecht-multiline-data;\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-multiline-data',\n  styleUrl: 'multiline-data.scss',\n  shadow: true,\n})\nexport class MultilineData {\n  render() {\n    return (\n      <pre class=\"utrecht-multiline-data utrecht-multiline-data--html-pre\">\n        <slot></slot>\n      </pre>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/utrecht-page-footer.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 
 const pageFooterCss = ".utrecht-page-footer{--utrecht-document-color:currentColor;--utrecht-heading-color:currentColor;--utrecht-link-color:currentColor;--utrecht-link-focus-color:currentColor;--utrecht-link-hover-color:currentColor;--utrecht-link-active-color:currentColor;--utrecht-link-visited-color:currentColor;background-color:var(--utrecht-page-footer-background-color);background-image:var(--utrecht-page-footer-background-image);color:var(--utrecht-page-footer-color);font-family:var(--utrecht-document-font-family);font-size:var(--utrecht-document-font-size);padding-block-end:var(--utrecht-page-footer-padding-block-end);padding-block-start:var(--utrecht-page-footer-padding-block-start);padding-inline-end:var(--utrecht-page-footer-padding-inline-end);padding-inline-start:var(--utrecht-page-footer-padding-inline-start)}.utrecht-page-footer__address--reset-address{font-style:inherit;margin-block-end:0;margin-block-start:0}:host{display:block}:host([hidden]){display:none !important}";
 
 const PageFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("footer", { class: "utrecht-page-footer" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("footer", { class: "utrecht-page-footer" }, index.h("slot", null)));
+    }
 };
 PageFooter.style = pageFooterCss;
 

package/dist/cjs/utrecht-page-footer.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-page-footer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,g9BAAg9B;;MCYz9B,UAAU;;;;EACrB,MAAM;IACJ,QACEA,oBAAQ,KAAK,EAAC,qBAAqB,IACjCA,qBAAa,CACN,EACT;GACH;;;;;;","names":["h"],"sources":["src/components/page-footer.scss?tag=utrecht-page-footer&encapsulation=shadow","src/components/page-footer.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/page-footer/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-page-footer',\n  styleUrl: 'page-footer.scss',\n  shadow: true,\n})\nexport class PageFooter {\n  render() {\n    return (\n      <footer class=\"utrecht-page-footer\">\n        <slot></slot>\n      </footer>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-page-footer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,g9BAAg9B;;MCYz9B,UAAU;;;;IACrB,MAAM;QACJ,QACEA,oBAAQ,KAAK,EAAC,qBAAqB,IACjCA,qBAAa,CACN,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/page-footer.scss?tag=utrecht-page-footer&encapsulation=shadow","src/components/page-footer.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/page-footer/css\";\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Gemeente Utrecht\n */\n\n@Component({\n  tag: 'utrecht-page-footer',\n  styleUrl: 'page-footer.scss',\n  shadow: true,\n})\nexport class PageFooter {\n  render() {\n    return (\n      <footer class=\"utrecht-page-footer\">\n        <slot></slot>\n      </footer>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/utrecht-pagination.cjs.entry.js

@@ -2,40 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 const clsx_m = require('./clsx.m-b21b5592.js');
 
 const paginationCss = ".utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link:focus{--_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-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}.utrecht-pagination{font-family:var(--utrecht-pagination-font-family, var(--utrecht-document-font-family));font-size:var(--utrecht-pagination-font-size, var(--utrecht-document-font-family));margin-block-end:calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-end, 0));margin-block-start:calc(var(--utrecht-space-around, 0) * var(--utrecht-pagination-margin-block-start, 0))}.utrecht-pagination--distanced{--utrecht-space-around:1}.utrecht-pagination__relative-link{background-color:var(--utrecht-pagination-relative-link-background-color);border-color:var(--utrecht-pagination-relative-link-border-color);border-radius:var(--utrecht-pagination-relative-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-relative-link-border-width, 0);color:var(--utrecht-pagination-relative-link-color);display:inline-block;font-weight:var(--utrecht-pagination-relative-link-font-weight);padding-block-end:var(--utrecht-pagination-relative-link-padding-block-end);padding-block-start:var(--utrecht-pagination-relative-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-relative-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-relative-link-padding-inline-start);text-decoration:var(--utrecht-pagination-relative-link-text-decoration);text-transform:var(--utrecht-pagination-relative-link-text-transform)}.utrecht-pagination__relative-link--next{margin-inline-start:var(--utrecht-pagination-relative-link-distanced-margin-inline-start)}.utrecht-pagination__relative-link--prev{margin-inline-end:var(--utrecht-pagination-relative-link-distanced-margin-inline-end)}.utrecht-pagination__relative-link--disabled{background-color:var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color));color:var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__relative-link--hover,.utrecht-pagination__relative-link:hover{background-color:var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color));border-color:var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color));color:var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color))}.utrecht-pagination__page-link{background-color:var(--utrecht-pagination-page-link-background-color);border-color:var(--utrecht-pagination-page-link-border-color, 0);border-radius:var(--utrecht-pagination-page-link-border-radius);border-style:solid;border-width:var(--utrecht-pagination-page-link-border-width);color:var(--utrecht-pagination-page-link-color);display:inline-block;font-weight:var(--utrecht-pagination-page-link-font-weight);padding-block-end:var(--utrecht-pagination-page-link-padding-block-end);padding-block-start:var(--utrecht-pagination-page-link-padding-block-start);padding-inline-end:var(--utrecht-pagination-page-link-padding-inline-end);padding-inline-start:var(--utrecht-pagination-page-link-padding-inline-start);text-decoration:var(--utrecht-pagination-page-link-text-decoration)}.utrecht-pagination__page-link--current{--utrecht-pagination-page-link-background-color:var(--utrecht-pagination-page-link-current-background-color);--utrecht-pagination-page-link-border-color:var(--utrecht-pagination-page-link-current-border-color);--utrecht-pagination-page-link-color:var(--utrecht-pagination-page-link-current-color)}.utrecht-pagination__page-link~.utrecht-pagination__page-link{margin-inline-start:var(--utrecht-pagination-page-link-distanced-margin-inline-start)}.utrecht-pagination__page-link--hover,.utrecht-pagination__page-link:hover{background-color:var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color));border-color:var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color));color:var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color))}.utrecht-pagination__page-link:focus,.utrecht-pagination__relative-link:focus{--_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-pagination__page-link:focus:not(:focus-visible),.utrecht-pagination__relative-link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}:host{display:block}:host([hidden]){display:none !important}";
 
 const Pagination = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.links = undefined;
-    this.next = undefined;
-    this.prev = undefined;
-    this.currentIndex = undefined;
-  }
-  render() {
-    const { currentIndex } = this;
-    const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
-    const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
-    const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
-    const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (index.h("span", { class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (index.h("a", { href: href, class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
-    const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (index.h("a", { class: clsx_m.clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
-    return (index.h("nav", { class: "utrecht-pagination" }, index.h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), index.h("span", { role: "group", class: "utrecht-pagination__pages" }, links
-      .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
-      .map((link, arrayIndex) => {
-      const index = typeof link.index === 'number' ? link.index : arrayIndex;
-      return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
-          ? index === currentIndex + 1
-            ? 'next'
-            : index === currentIndex - 1
-              ? 'prev'
-              : null
-          : null, textContent: link.index || index }, link);
-    })
-      .map((link) => PageLink(link))), index.h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.links = undefined;
+        this.next = undefined;
+        this.prev = undefined;
+        this.currentIndex = undefined;
+    }
+    render() {
+        const { currentIndex } = this;
+        const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;
+        const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;
+        const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;
+        const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) => disabled ? (index.h("span", { class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), "aria-label": title || null }, textContent)) : (index.h("a", { href: href, class: clsx_m.clsx('utrecht-pagination__relative-link', disabled && 'utrecht-pagination__relative-link--disabled', rel === 'next' && 'utrecht-pagination__relative-link--next', rel === 'prev' && 'utrecht-pagination__relative-link--prev'), rel: rel, "aria-label": title || null }, textContent));
+        const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (index.h("a", { class: clsx_m.clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current'), href: href, "aria-current": current ? 'true' : null, rel: rel }, textContent));
+        return (index.h("nav", { class: "utrecht-pagination" }, index.h("span", { class: "utrecht-pagination__before" }, prev ? RelativeLink(Object.assign(Object.assign({}, prev), { rel: 'prev', textContent: 'Vorige' })) : ''), index.h("span", { role: "group", class: "utrecht-pagination__pages" }, links
+            .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))
+            .map((link, arrayIndex) => {
+            const index = typeof link.index === 'number' ? link.index : arrayIndex;
+            return Object.assign({ index, current: typeof currentIndex === 'number' && index === currentIndex, rel: typeof currentIndex === 'number'
+                    ? index === currentIndex + 1
+                        ? 'next'
+                        : index === currentIndex - 1
+                            ? 'prev'
+                            : null
+                    : null, textContent: link.index || index }, link);
+        })
+            .map((link) => PageLink(link))), index.h("span", { class: "utrecht-pagination__before" }, next ? RelativeLink(Object.assign(Object.assign({}, next), { rel: 'next', textContent: 'Volgende' })) : '')));
+    }
 };
 Pagination.style = paginationCss;
 

package/dist/cjs/utrecht-pagination.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-pagination.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,m1KAAm1K;;MCa51K,UAAU;;;;;;;;EAMrB,MAAM;IACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;IAC9B,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;IAC7E,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1E,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAC7F,QAAQ,IACNA,kBACE,KAAK,EAAEC,WAAI,CACT,mCAAmC,EACnC,QAAQ,IAAI,6CAA6C,EACzD,GAAG,KAAK,MAAM,IAAI,yCAAyC,EAC3D,GAAG,KAAK,MAAM,IAAI,yCAAyC,CAC5D,gBACW,KAAK,IAAI,IAAI,IAExB,WAAW,CACP,KAEPD,eACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAEC,WAAI,CACT,mCAAmC,EACnC,QAAQ,IAAI,6CAA6C,EACzD,GAAG,KAAK,MAAM,IAAI,yCAAyC,EAC3D,GAAG,KAAK,MAAM,IAAI,yCAAyC,CAC5D,EACD,GAAG,EAAE,GAAG,gBACI,KAAK,IAAI,IAAI,IAExB,WAAW,CACV,CACL,CAAC;IAEJ,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,MAC5ED,eACE,KAAK,EAAEC,WAAI,CAAC,+BAA+B,EAAE,OAAO,IAAI,wCAAwC,CAAC,EACjG,IAAI,EAAE,IAAI,kBACI,OAAO,GAAG,MAAM,GAAG,IAAI,EACrC,GAAG,EAAE,GAAG,IAEP,WAAW,CACV,CACL,CAAC;IAEF,QACED,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,GAAG,YAAY,iCAAM,IAAI,KAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,IAAG,GAAG,EAAE,CACrE,EACPA,kBAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,2BAA2B,IACjD,KAAK;OACH,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;OACtE,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU;MACpB,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;MACvE,uBACE,KAAK,EACL,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,IAAI,KAAK,KAAK,YAAY,EACnE,GAAG,EACD,OAAO,YAAY,KAAK,QAAQ;YAC5B,KAAK,KAAK,YAAY,GAAG,CAAC;cACxB,MAAM;cACN,KAAK,KAAK,YAAY,GAAG,CAAC;gBAC1B,MAAM;gBACN,IAAI;YACN,IAAI,EACV,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,IAC7B,IAAI,EACP;KACH,CAAC;OACD,GAAG,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC3B,EACPA,kBAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,GAAG,YAAY,iCAAM,IAAI,KAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,IAAG,GAAG,EAAE,CACvE,CACH,EACN;GACH;;;;;;","names":["h","clsx"],"sources":["src/components/pagination.scss?tag=utrecht-pagination&encapsulation=shadow","src/components/pagination.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/pagination/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, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  @Prop() links: string;\n  @Prop() next: string;\n  @Prop() prev: string;\n  @Prop({ attribute: 'current-index' }) currentIndex: number;\n\n  render() {\n    const { currentIndex } = this;\n    const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;\n    const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;\n    const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;\n\n    const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) =>\n      disabled ? (\n        <span\n          class={clsx(\n            'utrecht-pagination__relative-link',\n            disabled && 'utrecht-pagination__relative-link--disabled',\n            rel === 'next' && 'utrecht-pagination__relative-link--next',\n            rel === 'prev' && 'utrecht-pagination__relative-link--prev',\n          )}\n          aria-label={title || null}\n        >\n          {textContent}\n        </span>\n      ) : (\n        <a\n          href={href}\n          class={clsx(\n            'utrecht-pagination__relative-link',\n            disabled && 'utrecht-pagination__relative-link--disabled',\n            rel === 'next' && 'utrecht-pagination__relative-link--next',\n            rel === 'prev' && 'utrecht-pagination__relative-link--prev',\n          )}\n          rel={rel}\n          aria-label={title || null}\n        >\n          {textContent}\n        </a>\n      );\n\n    const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (\n      <a\n        class={clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current')}\n        href={href}\n        aria-current={current ? 'true' : null}\n        rel={rel}\n      >\n        {textContent}\n      </a>\n    );\n\n    return (\n      <nav class=\"utrecht-pagination\">\n        <span class=\"utrecht-pagination__before\">\n          {prev ? RelativeLink({ ...prev, rel: 'prev', textContent: 'Vorige' }) : ''}\n        </span>\n        <span role=\"group\" class=\"utrecht-pagination__pages\">\n          {links\n            .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))\n            .map((link, arrayIndex) => {\n              const index = typeof link.index === 'number' ? link.index : arrayIndex;\n              return {\n                index,\n                current: typeof currentIndex === 'number' && index === currentIndex,\n                rel:\n                  typeof currentIndex === 'number'\n                    ? index === currentIndex + 1\n                      ? 'next'\n                      : index === currentIndex - 1\n                      ? 'prev'\n                      : null\n                    : null,\n                textContent: link.index || index,\n                ...link,\n              };\n            })\n            .map((link) => PageLink(link))}\n        </span>\n        <span class=\"utrecht-pagination__before\">\n          {next ? RelativeLink({ ...next, rel: 'next', textContent: 'Volgende' }) : ''}\n        </span>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-pagination.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,m1KAAm1K;;MCa51K,UAAU;;;;;;;;IAMrB,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC9B,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC;QAC7E,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC1E,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAE1E,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAC7F,QAAQ,IACNA,kBACE,KAAK,EAAEC,WAAI,CACT,mCAAmC,EACnC,QAAQ,IAAI,6CAA6C,EACzD,GAAG,KAAK,MAAM,IAAI,yCAAyC,EAC3D,GAAG,KAAK,MAAM,IAAI,yCAAyC,CAC5D,gBACW,KAAK,IAAI,IAAI,IAExB,WAAW,CACP,KAEPD,eACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAEC,WAAI,CACT,mCAAmC,EACnC,QAAQ,IAAI,6CAA6C,EACzD,GAAG,KAAK,MAAM,IAAI,yCAAyC,EAC3D,GAAG,KAAK,MAAM,IAAI,yCAAyC,CAC5D,EACD,GAAG,EAAE,GAAG,gBACI,KAAK,IAAI,IAAI,IAExB,WAAW,CACV,CACL,CAAC;QAEJ,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,GAAG,IAAI,EAAE,WAAW,GAAG,EAAE,EAAE,MAC5ED,eACE,KAAK,EAAEC,WAAI,CAAC,+BAA+B,EAAE,OAAO,IAAI,wCAAwC,CAAC,EACjG,IAAI,EAAE,IAAI,kBACI,OAAO,GAAG,MAAM,GAAG,IAAI,EACrC,GAAG,EAAE,GAAG,IAEP,WAAW,CACV,CACL,CAAC;QAEF,QACED,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,GAAG,YAAY,iCAAM,IAAI,KAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,IAAG,GAAG,EAAE,CACrE,EACPA,kBAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,2BAA2B,IACjD,KAAK;aACH,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACtE,GAAG,CAAC,CAAC,IAAI,EAAE,UAAU;YACpB,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC;YACvE,uBACE,KAAK,EACL,OAAO,EAAE,OAAO,YAAY,KAAK,QAAQ,IAAI,KAAK,KAAK,YAAY,EACnE,GAAG,EACD,OAAO,YAAY,KAAK,QAAQ;sBAC5B,KAAK,KAAK,YAAY,GAAG,CAAC;0BACxB,MAAM;0BACN,KAAK,KAAK,YAAY,GAAG,CAAC;8BAC1B,MAAM;8BACN,IAAI;sBACN,IAAI,EACV,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,KAAK,IAC7B,IAAI,EACP;SACH,CAAC;aACD,GAAG,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAC3B,EACPA,kBAAM,KAAK,EAAC,4BAA4B,IACrC,IAAI,GAAG,YAAY,iCAAM,IAAI,KAAE,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,IAAG,GAAG,EAAE,CACvE,CACH,EACN;KACH;;;;;;","names":["h","clsx"],"sources":["src/components/pagination.scss?tag=utrecht-pagination&encapsulation=shadow","src/components/pagination.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/pagination/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, h, Prop } from '@stencil/core';\nimport clsx from 'clsx';\n\n@Component({\n  tag: 'utrecht-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  @Prop() links: string;\n  @Prop() next: string;\n  @Prop() prev: string;\n  @Prop({ attribute: 'current-index' }) currentIndex: number;\n\n  render() {\n    const { currentIndex } = this;\n    const links = typeof this.links === 'string' ? JSON.parse(this.links) : null;\n    const next = typeof this.next === 'string' ? JSON.parse(this.next) : null;\n    const prev = typeof this.prev === 'string' ? JSON.parse(this.next) : null;\n\n    const RelativeLink = ({ disabled = false, href = '', rel = null, textContent = '', title = '' }) =>\n      disabled ? (\n        <span\n          class={clsx(\n            'utrecht-pagination__relative-link',\n            disabled && 'utrecht-pagination__relative-link--disabled',\n            rel === 'next' && 'utrecht-pagination__relative-link--next',\n            rel === 'prev' && 'utrecht-pagination__relative-link--prev',\n          )}\n          aria-label={title || null}\n        >\n          {textContent}\n        </span>\n      ) : (\n        <a\n          href={href}\n          class={clsx(\n            'utrecht-pagination__relative-link',\n            disabled && 'utrecht-pagination__relative-link--disabled',\n            rel === 'next' && 'utrecht-pagination__relative-link--next',\n            rel === 'prev' && 'utrecht-pagination__relative-link--prev',\n          )}\n          rel={rel}\n          aria-label={title || null}\n        >\n          {textContent}\n        </a>\n      );\n\n    const PageLink = ({ current = false, href = '', rel = null, textContent = '' }) => (\n      <a\n        class={clsx('utrecht-pagination__page-link', current && 'utrecht-pagination__page-link--current')}\n        href={href}\n        aria-current={current ? 'true' : null}\n        rel={rel}\n      >\n        {textContent}\n      </a>\n    );\n\n    return (\n      <nav class=\"utrecht-pagination\">\n        <span class=\"utrecht-pagination__before\">\n          {prev ? RelativeLink({ ...prev, rel: 'prev', textContent: 'Vorige' }) : ''}\n        </span>\n        <span role=\"group\" class=\"utrecht-pagination__pages\">\n          {links\n            .sort((a, b) => (a.index === b.index ? 0 : a.index > b.index ? 1 : -1))\n            .map((link, arrayIndex) => {\n              const index = typeof link.index === 'number' ? link.index : arrayIndex;\n              return {\n                index,\n                current: typeof currentIndex === 'number' && index === currentIndex,\n                rel:\n                  typeof currentIndex === 'number'\n                    ? index === currentIndex + 1\n                      ? 'next'\n                      : index === currentIndex - 1\n                      ? 'prev'\n                      : null\n                    : null,\n                textContent: link.index || index,\n                ...link,\n              };\n            })\n            .map((link) => PageLink(link))}\n        </span>\n        <span class=\"utrecht-pagination__before\">\n          {next ? RelativeLink({ ...next, rel: 'next', textContent: 'Volgende' }) : ''}\n        </span>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/utrecht-progress-list-item.cjs.entry.js

@@ -2,35 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 const clsx_m = require('./clsx.m-b21b5592.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.checked = false;
-    this.from = undefined;
-    this.to = undefined;
-    this.appearance = undefined;
-    this.details = false;
-    this._open = false;
-  }
-  render() {
-    const { appearance, checked, details, from, _open, to } = this;
-    return (index.h("li", { class: clsx_m.clsx('denhaag-process-steps__step', {
-        'denhaag-process-steps__step--checked': checked,
-        'denhaag-process-steps__step--not-checked': !checked,
-      }) }, index.h("div", { class: "denhaag-process-steps__step-header" }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker', {
-        'denhaag-step-marker--checked': checked,
-        'denhaag-step-marker--not-checked': !checked,
-      }) }, index.h("slot", { name: "marker" }), checked && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, index.h("path", { 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", stroke: "currentColor", "stroke-width": "1.75" })))), details ? (index.h("utrecht-button", { onClick: () => (this._open = !this._open), appearance: "subtle-button", class: "denhaag-process-steps__step-header-toggle", "aria-controls": "details", "aria-expanded": _open ? 'true' : 'false' }, index.h("p", { class: clsx_m.clsx('denhaag-process-steps__step-heading', {
-        'denhaag-process-steps__step-heading--checked': checked,
-      }) }, index.h("slot", null)))) : (index.h("p", { class: clsx_m.clsx('denhaag-process-steps__step-heading', {
-        'denhaag-process-steps__step-heading--checked': checked,
-      }) }, index.h("slot", null)))), index.h("div", { class: clsx_m.clsx('denhaag-process-steps__step-body') }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), index.h("div", { class: "denhaag-process-steps__step-meta" }, index.h("slot", { name: "body" }))), index.h("div", { id: "details", class: clsx_m.clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, index.h("slot", { name: "details" }))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checked = false;
+        this.from = undefined;
+        this.to = undefined;
+        this.appearance = undefined;
+        this.details = false;
+        this._open = false;
+    }
+    render() {
+        const { appearance, checked, details, from, _open, to } = this;
+        return (index.h("li", { class: clsx_m.clsx('denhaag-process-steps__step', {
+                'denhaag-process-steps__step--checked': checked,
+                'denhaag-process-steps__step--not-checked': !checked,
+            }) }, index.h("div", { class: "denhaag-process-steps__step-header" }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker', {
+                'denhaag-step-marker--checked': checked,
+                'denhaag-step-marker--not-checked': !checked,
+            }) }, index.h("slot", { name: "marker" }), checked && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, index.h("path", { 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", stroke: "currentColor", "stroke-width": "1.75" })))), details ? (index.h("utrecht-button", { onClick: () => (this._open = !this._open), appearance: "subtle-button", class: "denhaag-process-steps__step-header-toggle", "aria-controls": "details", "aria-expanded": _open ? 'true' : 'false' }, index.h("p", { class: clsx_m.clsx('denhaag-process-steps__step-heading', {
+                'denhaag-process-steps__step-heading--checked': checked,
+            }) }, index.h("slot", null)))) : (index.h("p", { class: clsx_m.clsx('denhaag-process-steps__step-heading', {
+                'denhaag-process-steps__step-heading--checked': checked,
+            }) }, index.h("slot", null)))), index.h("div", { class: clsx_m.clsx('denhaag-process-steps__step-body') }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker__connector', `denhaag-step-marker__connector--${appearance}`, `denhaag-step-marker__connector--${from}-to-${to}`) }), index.h("div", { class: "denhaag-process-steps__step-meta" }, index.h("slot", { name: "body" }))), index.h("div", { id: "details", class: clsx_m.clsx('denhaag-process-steps__step-details', !_open && 'denhaag-process-steps__step-details--hidden') }, index.h("slot", { name: "details" }))));
+    }
 };
 StepProgressListItem.style = progressListCss;
 

package/dist/cjs/utrecht-progress-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-list-item.entry.cjs.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,QACEA,gBACE,KAAK,EAAEC,WAAI,CAAC,6BAA6B,EAAE;QACzC,sCAAsC,EAAE,OAAO;QAC/C,0CAA0C,EAAE,CAAC,OAAO;OACrD,CAAC,IAEFD,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,iBACE,KAAK,EAAEC,WAAI,CAAC,qBAAqB,EAAE;QACjC,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEFD,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACNA,iBACE,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,IAEtBA,kBACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACL,OAAO,IACNA,4BACE,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,IAEvCA,eACE,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEFD,qBAAQ,CACN,CACW,KAEjBA,eACE,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE;QACjD,8CAA8C,EAAE,OAAO;OACxD,CAAC,IAEFD,qBAAQ,CACN,CACL,CACG,EACNA,iBAAK,KAAK,EAAEC,WAAI,CAAC,kCAAkC,CAAC,IAClDD,iBACE,KAAK,EAAEC,WAAI,CACT,gCAAgC,EAChC,mCAAmC,UAAU,EAAE,EAC/C,mCAAmC,IAAI,OAAO,EAAE,EAAE,CACnD,GACI,EACPD,iBAAK,KAAK,EAAC,kCAAkC,IAC3CA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACNA,iBACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE,CAAC,KAAK,IAAI,6CAA6C,CAAC,IAE3GD,kBAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACH,EACL;GACH;;;;;;","names":["h","clsx"],"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.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCc1jZ,oBAAoB;;;uBACJ,KAAK;;;;uBAIJ,KAAK;qBACN,KAAK;;IAChC,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAC/D,QACEA,gBACE,KAAK,EAAEC,WAAI,CAAC,6BAA6B,EAAE;gBACzC,sCAAsC,EAAE,OAAO;gBAC/C,0CAA0C,EAAE,CAAC,OAAO;aACrD,CAAC,IAEFD,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,iBACE,KAAK,EAAEC,WAAI,CAAC,qBAAqB,EAAE;gBACjC,8BAA8B,EAAE,OAAO;gBACvC,kCAAkC,EAAE,CAAC,OAAO;aAC7C,CAAC,IAEFD,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACNA,iBACE,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,IAEtBA,kBACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACL,OAAO,IACNA,4BACE,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,IAEvCA,eACE,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE;gBACjD,8CAA8C,EAAE,OAAO;aACxD,CAAC,IAEFD,qBAAQ,CACN,CACW,KAEjBA,eACE,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE;gBACjD,8CAA8C,EAAE,OAAO;aACxD,CAAC,IAEFD,qBAAQ,CACN,CACL,CACG,EACNA,iBAAK,KAAK,EAAEC,WAAI,CAAC,kCAAkC,CAAC,IAClDD,iBACE,KAAK,EAAEC,WAAI,CACT,gCAAgC,EAChC,mCAAmC,UAAU,EAAE,EAC/C,mCAAmC,IAAI,OAAO,EAAE,EAAE,CACnD,GACI,EACPD,iBAAK,KAAK,EAAC,kCAAkC,IAC3CA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACF,EACNA,iBACE,EAAE,EAAC,SAAS,EACZ,KAAK,EAAEC,WAAI,CAAC,qCAAqC,EAAE,CAAC,KAAK,IAAI,6CAA6C,CAAC,IAE3GD,kBAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACH,EACL;KACH;;;;;;","names":["h","clsx"],"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/cjs/utrecht-progress-list.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("ol", { class: "denhaag-process-steps" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("ol", { class: "denhaag-process-steps" }, index.h("slot", null)));
+    }
 };
 StepProgressList.style = progressListCss;
 

package/dist/cjs/utrecht-progress-list.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCa1jZ,gBAAgB;;;;EAC3B,MAAM;IACJ,QACEA,gBAAI,KAAK,EAAC,uBAAuB,IAC/BA,qBAAa,CACV,EACL;GACH;;;;;;","names":["h"],"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.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCa1jZ,gBAAgB;;;;IAC3B,MAAM;QACJ,QACEA,gBAAI,KAAK,EAAC,uBAAuB,IAC/BA,qBAAa,CACV,EACL;KACH;;;;;;","names":["h"],"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/cjs/utrecht-progress-sublist-item.cjs.entry.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 const clsx_m = require('./clsx.m-b21b5592.js');
 
 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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.appearance = undefined;
-    this.checked = false;
-  }
-  render() {
-    const { appearance, checked } = this;
-    return (index.h("li", { class: clsx_m.clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, index.h("div", { class: "denhaag-process-steps__step-header" }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
-        'denhaag-step-marker--checked': checked,
-        'denhaag-step-marker--not-checked': !checked,
-      }) }, index.h("slot", { name: "marker" }), checked && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, index.h("path", { 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", stroke: "currentColor", "stroke-width": "1.75" })))), index.h("p", { class: clsx_m.clsx('denhaag-process-steps__sub-step-heading', {
-        'denhaag-process-steps__sub-step-heading--checked': checked,
-      }) }, index.h("slot", null)))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.appearance = undefined;
+        this.checked = false;
+    }
+    render() {
+        const { appearance, checked } = this;
+        return (index.h("li", { class: clsx_m.clsx('denhaag-process-steps__sub-step', `denhaag-process-steps__sub-step--${appearance}`) }, index.h("div", { class: "denhaag-process-steps__step-header" }, index.h("div", { class: clsx_m.clsx('denhaag-step-marker', 'denhaag-step-marker--nested', {
+                'denhaag-step-marker--checked': checked,
+                'denhaag-step-marker--not-checked': !checked,
+            }) }, index.h("slot", { name: "marker" }), checked && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", class: "denhaag-icon", focusable: "false", "aria-hidden": "true", "shape-rendering": "auto" }, index.h("path", { 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", stroke: "currentColor", "stroke-width": "1.75" })))), index.h("p", { class: clsx_m.clsx('denhaag-process-steps__sub-step-heading', {
+                'denhaag-process-steps__sub-step-heading--checked': checked,
+            }) }, index.h("slot", null)))));
+    }
 };
 StepProgressSublistItem.style = progressListCss;
 

package/dist/cjs/utrecht-progress-sublist-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-progress-sublist-item.entry.cjs.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,QACEA,gBAAI,KAAK,EAAEC,WAAI,CAAC,iCAAiC,EAAE,oCAAoC,UAAU,EAAE,CAAC,IAClGD,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,iBACE,KAAK,EAAEC,WAAI,CAAC,qBAAqB,EAAE,6BAA6B,EAAE;QAChE,8BAA8B,EAAE,OAAO;QACvC,kCAAkC,EAAE,CAAC,OAAO;OAC7C,CAAC,IAEFD,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACNA,iBACE,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,IAEtBA,kBACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACNA,eACE,KAAK,EAAEC,WAAI,CAAC,yCAAyC,EAAE;QACrD,kDAAkD,EAAE,OAAO;OAC5D,CAAC,IAEFD,qBAAQ,CACN,CACA,CACH,EACL;GACH;;;;;;","names":["h","clsx"],"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.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,+iZAA+iZ;;MCc1jZ,uBAAuB;;;;uBAEN,KAAK;;IACjC,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACrC,QACEA,gBAAI,KAAK,EAAEC,WAAI,CAAC,iCAAiC,EAAE,oCAAoC,UAAU,EAAE,CAAC,IAClGD,iBAAK,KAAK,EAAC,oCAAoC,IAC7CA,iBACE,KAAK,EAAEC,WAAI,CAAC,qBAAqB,EAAE,6BAA6B,EAAE;gBAChE,8BAA8B,EAAE,OAAO;gBACvC,kCAAkC,EAAE,CAAC,OAAO;aAC7C,CAAC,IAEFD,kBAAM,IAAI,EAAC,QAAQ,GAAG,EACrB,OAAO,KACNA,iBACE,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,IAEtBA,kBACE,CAAC,EAAC,sIAAsI,EACxI,MAAM,EAAC,cAAc,kBACR,MAAM,GACb,CACJ,CACP,CACG,EACNA,eACE,KAAK,EAAEC,WAAI,CAAC,yCAAyC,EAAE;gBACrD,kDAAkD,EAAE,OAAO;aAC5D,CAAC,IAEFD,qBAAQ,CACN,CACA,CACH,EACL;KACH;;;;;;","names":["h","clsx"],"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/cjs/utrecht-sidenav.cjs.entry.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 const clsx_m = require('./clsx.m-b21b5592.js');
 
 const sidenavCss = ".utrecht-sidenav{--utrecht-sidenav-connection-color:var(--utrecht-sidenav-item-marker-color);--utrecht-sidenav-connection-inline-size:2px;--utrecht-sidenav-marker-current-color:var(--utrecht-sidenav-link-hover-color);--utrecht-sidenav-marker-offset:26px;--utrecht-sidenav-connection-block-size:100%;--utrecht-sidenav-marker-height:8px;--utrecht-sidenav-marker-outline-width:2px;border-block-end:1px solid var(--utrecht-color-grey-80);border-block-start:1px solid var(--utrecht-color-grey-80);inline-size:19rem;margin-block-end:0;margin-block-start:0;padding-block-end:0;padding-block-start:0}.utrecht-sidenav__list{margin-block-end:0;margin-block-start:0.2rem;padding-block-end:0;padding-block-start:0;padding-inline-start:0}.utrecht-sidenav__list--child{margin-block-start:0;padding-inline-end:0;padding-inline-start:1.4rem}.utrecht-sidenav__item{list-style:none;margin-inline-start:0;position:relative}.utrecht-sidenav__item--current{color:var(--utrecht-sidenav-item-hover-color, var(--utrecht-link-hover-color, red))}.utrecht-sidenav__item--last{border-block-end:none}.utrecht-sidenav__item-separator:not(.utrecht-sidenav__item--last .utrecht-sidenav__item-separator){border-block-end:1px solid var(--utrecht-color-grey-80);display:block;margin-inline-start:var(--utrecht-space-inline-lg)}.utrecht-sidenav__link{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));display:block;margin-inline-start:0;padding-block-end:var(--utrecht-space-block-xs);padding-block-start:var(--utrecht-space-block-xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link:hover{color:var(--utrecht-sidenav-link-hover-color, var(--utrecht-link-hover-color, red));text-decoration:underline}.utrecht-sidenav__link--focus-visible,.utrecht-sidenav__link:focus{--_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-sidenav__link--parent{padding-block-end:0}.utrecht-sidenav__connection,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling,.utrecht-sidenav__link--parent,.utrecht-sidenav__link--child)::after{background:var(--utrecht-sidenav-connection-color);block-size:calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width));content:\"\";display:block;inline-size:var(--utrecht-sidenav-connection-inline-size);inset-block-end:0;inset-block-start:calc(var(--utrecht-sidenav-marker-offset));inset-inline-start:3px;overflow:hidden;position:absolute;z-index:5}.utrecht-sidenav__connection--last,.utrecht-sidenav__connection--parent,.utrecht-sidenav__connection--sibling{display:none}.utrecht-sidenav__marker,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-item-marker-color);block-size:var(--utrecht-sidenav-marker-height);border-radius:100%;content:\"\";inline-size:8px;inset-block-start:20px;inset-inline-start:var(--utrecht-sidenav-marker-offset);overflow:hidden;position:absolute;transform:translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset)));z-index:10}.utrecht-sidenav__marker--child,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before{background-color:transparent;block-size:4px;border:2px solid var(--utrecht-sidenav-link-color);inline-size:4px;inset-block-start:16px;inset-inline-start:1.2rem;transform:translateY(-50%) translateX(-19.5px)}.utrecht-sidenav__marker--current,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before{background-color:var(--utrecht-sidenav-marker-current-color)}.utrecht-sidenav__link--child,.utrecht-sidenav__link--current-child{color:var(--utrecht-sidenav-link-color, var(--utrecht-link-color, blue));margin-block-end:0;margin-block-start:0;padding-block-end:var(--utrecht-space-block-2xs);padding-block-start:var(--utrecht-space-block-2xs);padding-inline-end:var(--utrecht-space-inline-3xs);padding-inline-start:var(--utrecht-space-inline-lg);text-decoration:none}.utrecht-sidenav__link--current,.utrecht-sidenav__link--current-child{font-weight:var(--utrecht-typography-weight-scale-bold-font-weight)}.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before{background-color:var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before,.utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before,.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before{background-color:var(--utrecht-sidenav-link-hover-color);border:2px solid var(--utrecht-sidenav-link-hover-color)}.utrecht-sidenav--pseudo-elements{}.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::after{display:none}.utrecht-sidenav__link:focus:not(:focus-visible){box-shadow:none;outline-style:revert}";
 
 const Sidenav = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.json = undefined;
-  }
-  render() {
-    const items = JSON.parse(this.json);
-    return (index.h("nav", { class: "utrecht-sidenav" }, index.h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index$1, array) => (index.h("li", { key: href, class: clsx_m.clsx('utrecht-sidenav__item', index$1 + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, index.h("a", { class: clsx_m.clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, index.h("div", { class: clsx_m.clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), index.h("div", { class: clsx_m.clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index$1 + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (index.h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (index.h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, index.h("a", { class: clsx_m.clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, index.h("div", { class: clsx_m.clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), index.h("div", { class: "utrecht-sidenav__item-separator" })))))));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.json = undefined;
+    }
+    render() {
+        const items = JSON.parse(this.json);
+        return (index.h("nav", { class: "utrecht-sidenav" }, index.h("ul", { class: "utrecht-sidenav__list" }, items.map(({ href, title, current, focus, children, sibling, haschildren }, index$1, array) => (index.h("li", { key: href, class: clsx_m.clsx('utrecht-sidenav__item', index$1 + 1 === array.length && 'utrecht-sidenav__item--last', sibling && 'utrecht-sidenav__item--sibling', haschildren && 'utrecht-sidenav__item--parent') }, index.h("a", { class: clsx_m.clsx('utrecht-sidenav__link', current && 'utrecht-sidenav__link--current', focus && 'utrecht-sidenav__link--focus', sibling && 'utrecht-sidenav__link--sibling', haschildren && 'utrecht-sidenav__link--parent'), href: href }, index.h("div", { class: clsx_m.clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current') }), index.h("div", { class: clsx_m.clsx('utrecht-sidenav__connection', haschildren && 'utrecht-sidenav__connection--parent', sibling && 'utrecht-sidenav__connection--sibling', index$1 + 1 === array.length && 'utrecht-sidenav__connection--last') }), title), children ? (index.h("ul", { class: "utrecht-sidenav__list utrecht-sidenav__list--child" }, children.map(({ href, title, current, focus }) => (index.h("li", { key: href, class: "utrecht-sidenav__item utrecht-sidenav__item--child" }, index.h("a", { class: clsx_m.clsx('utrecht-sidenav__link', 'utrecht-sidenav__link--child', current && 'utrecht-sidenav__link--current', current && 'utrecht-sidenav__link--current-child', focus && 'utrecht-sidenav__link--focus'), href: href }, index.h("div", { class: clsx_m.clsx('utrecht-sidenav__marker', 'utrecht-sidenav__marker--child', current && 'utrecht-sidenav__marker--current', current && 'utrecht-sidenav__marker--current-child') }), title)))))) : (''), index.h("div", { class: "utrecht-sidenav__item-separator" })))))));
+    }
 };
 Sidenav.style = sidenavCss;
 

package/dist/cjs/utrecht-sidenav.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"utrecht-sidenav.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,m5MAAm5M;;MCcz5M,OAAO;;;;;EAGlB,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,QACEA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,gBAAI,KAAK,EAAC,uBAAuB,IAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,EAAEC,OAAK,EAAE,KAAK,MACvFD,gBACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvBD,OAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,IAAI,6BAA6B,EAC3D,OAAO,IAAI,gCAAgC,EAC3C,WAAW,IAAI,+BAA+B,CAC/C,IAEDD,eACE,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvB,OAAO,IAAI,gCAAgC,EAC3C,KAAK,IAAI,8BAA8B,EACvC,OAAO,IAAI,gCAAgC,EAC3C,WAAW,IAAI,+BAA+B,CAC/C,EACD,IAAI,EAAE,IAAI,IAEVF,iBAAK,KAAK,EAAEE,WAAI,CAAC,yBAAyB,EAAE,OAAO,IAAI,kCAAkC,CAAC,GAAQ,EAClGF,iBACE,KAAK,EAAEE,WAAI,CACT,6BAA6B,EAC7B,WAAW,IAAI,qCAAqC,EACpD,OAAO,IAAI,sCAAsC,EACjDD,OAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,IAAI,mCAAmC,CAClE,GACI,EACN,KAAK,CACJ,EACH,QAAQ,IACPD,gBAAI,KAAK,EAAC,oDAAoD,IAC3D,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAC5CA,gBAAI,GAAG,EAAE,IAAI,EAAE,KAAK,EAAC,oDAAoD,IACvEA,eACE,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvB,8BAA8B,EAC9B,OAAO,IAAI,gCAAgC,EAC3C,OAAO,IAAI,sCAAsC,EACjD,KAAK,IAAI,8BAA8B,CACxC,EACD,IAAI,EAAE,IAAI,IAEVF,iBACE,KAAK,EAAEE,WAAI,CACT,yBAAyB,EACzB,gCAAgC,EAChC,OAAO,IAAI,kCAAkC,EAC7C,OAAO,IAAI,wCAAwC,CACpD,GACI,EACN,KAAK,CACJ,CACD,CACN,CAAC,CACC,KAEL,EAAE,CACH,EACDF,iBAAK,KAAK,EAAC,iCAAiC,GAAO,CAChD,CACN,CAAC,CACC,CACD,EACN;GACH;;;;;;","names":["h","index","clsx"],"sources":["src/components/sidenav.scss?tag=utrecht-sidenav&encapsulation=shadow","src/components/sidenav.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/navigatie sidenav/css\";\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-sidenav',\n  styleUrl: 'sidenav.scss',\n  shadow: true,\n})\nexport class Sidenav {\n  @Prop() json: string;\n\n  render() {\n    const items = JSON.parse(this.json);\n\n    return (\n      <nav class=\"utrecht-sidenav\">\n        <ul class=\"utrecht-sidenav__list\">\n          {items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (\n            <li\n              key={href}\n              class={clsx(\n                'utrecht-sidenav__item',\n                index + 1 === array.length && 'utrecht-sidenav__item--last',\n                sibling && 'utrecht-sidenav__item--sibling',\n                haschildren && 'utrecht-sidenav__item--parent',\n              )}\n            >\n              <a\n                class={clsx(\n                  'utrecht-sidenav__link',\n                  current && 'utrecht-sidenav__link--current',\n                  focus && 'utrecht-sidenav__link--focus',\n                  sibling && 'utrecht-sidenav__link--sibling',\n                  haschildren && 'utrecht-sidenav__link--parent',\n                )}\n                href={href}\n              >\n                <div class={clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current')}></div>\n                <div\n                  class={clsx(\n                    'utrecht-sidenav__connection',\n                    haschildren && 'utrecht-sidenav__connection--parent',\n                    sibling && 'utrecht-sidenav__connection--sibling',\n                    index + 1 === array.length && 'utrecht-sidenav__connection--last',\n                  )}\n                ></div>\n                {title}\n              </a>\n              {children ? (\n                <ul class=\"utrecht-sidenav__list utrecht-sidenav__list--child\">\n                  {children.map(({ href, title, current, focus }) => (\n                    <li key={href} class=\"utrecht-sidenav__item utrecht-sidenav__item--child\">\n                      <a\n                        class={clsx(\n                          'utrecht-sidenav__link',\n                          'utrecht-sidenav__link--child',\n                          current && 'utrecht-sidenav__link--current',\n                          current && 'utrecht-sidenav__link--current-child',\n                          focus && 'utrecht-sidenav__link--focus',\n                        )}\n                        href={href}\n                      >\n                        <div\n                          class={clsx(\n                            'utrecht-sidenav__marker',\n                            'utrecht-sidenav__marker--child',\n                            current && 'utrecht-sidenav__marker--current',\n                            current && 'utrecht-sidenav__marker--current-child',\n                          )}\n                        ></div>\n                        {title}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              ) : (\n                ''\n              )}\n              <div class=\"utrecht-sidenav__item-separator\"></div>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"],"version":3}
+{"file":"utrecht-sidenav.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,m5MAAm5M;;MCcz5M,OAAO;;;;;IAGlB,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEpC,QACEA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,gBAAI,KAAK,EAAC,uBAAuB,IAC9B,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,EAAEC,OAAK,EAAE,KAAK,MACvFD,gBACE,GAAG,EAAE,IAAI,EACT,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvBD,OAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,IAAI,6BAA6B,EAC3D,OAAO,IAAI,gCAAgC,EAC3C,WAAW,IAAI,+BAA+B,CAC/C,IAEDD,eACE,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvB,OAAO,IAAI,gCAAgC,EAC3C,KAAK,IAAI,8BAA8B,EACvC,OAAO,IAAI,gCAAgC,EAC3C,WAAW,IAAI,+BAA+B,CAC/C,EACD,IAAI,EAAE,IAAI,IAEVF,iBAAK,KAAK,EAAEE,WAAI,CAAC,yBAAyB,EAAE,OAAO,IAAI,kCAAkC,CAAC,GAAQ,EAClGF,iBACE,KAAK,EAAEE,WAAI,CACT,6BAA6B,EAC7B,WAAW,IAAI,qCAAqC,EACpD,OAAO,IAAI,sCAAsC,EACjDD,OAAK,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,IAAI,mCAAmC,CAClE,GACI,EACN,KAAK,CACJ,EACH,QAAQ,IACPD,gBAAI,KAAK,EAAC,oDAAoD,IAC3D,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAC5CA,gBAAI,GAAG,EAAE,IAAI,EAAE,KAAK,EAAC,oDAAoD,IACvEA,eACE,KAAK,EAAEE,WAAI,CACT,uBAAuB,EACvB,8BAA8B,EAC9B,OAAO,IAAI,gCAAgC,EAC3C,OAAO,IAAI,sCAAsC,EACjD,KAAK,IAAI,8BAA8B,CACxC,EACD,IAAI,EAAE,IAAI,IAEVF,iBACE,KAAK,EAAEE,WAAI,CACT,yBAAyB,EACzB,gCAAgC,EAChC,OAAO,IAAI,kCAAkC,EAC7C,OAAO,IAAI,wCAAwC,CACpD,GACI,EACN,KAAK,CACJ,CACD,CACN,CAAC,CACC,KAEL,EAAE,CACH,EACDF,iBAAK,KAAK,EAAC,iCAAiC,GAAO,CAChD,CACN,CAAC,CACC,CACD,EACN;KACH;;;;;;","names":["h","index","clsx"],"sources":["src/components/sidenav.scss?tag=utrecht-sidenav&encapsulation=shadow","src/components/sidenav.tsx"],"sourcesContent":["/**\n * @license EUPL-1.2\n * Copyright (c) 2021 Robbert Broersma\n */\n\n@import \"~@utrecht/components/navigatie sidenav/css\";\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-sidenav',\n  styleUrl: 'sidenav.scss',\n  shadow: true,\n})\nexport class Sidenav {\n  @Prop() json: string;\n\n  render() {\n    const items = JSON.parse(this.json);\n\n    return (\n      <nav class=\"utrecht-sidenav\">\n        <ul class=\"utrecht-sidenav__list\">\n          {items.map(({ href, title, current, focus, children, sibling, haschildren }, index, array) => (\n            <li\n              key={href}\n              class={clsx(\n                'utrecht-sidenav__item',\n                index + 1 === array.length && 'utrecht-sidenav__item--last',\n                sibling && 'utrecht-sidenav__item--sibling',\n                haschildren && 'utrecht-sidenav__item--parent',\n              )}\n            >\n              <a\n                class={clsx(\n                  'utrecht-sidenav__link',\n                  current && 'utrecht-sidenav__link--current',\n                  focus && 'utrecht-sidenav__link--focus',\n                  sibling && 'utrecht-sidenav__link--sibling',\n                  haschildren && 'utrecht-sidenav__link--parent',\n                )}\n                href={href}\n              >\n                <div class={clsx('utrecht-sidenav__marker', current && 'utrecht-sidenav__marker--current')}></div>\n                <div\n                  class={clsx(\n                    'utrecht-sidenav__connection',\n                    haschildren && 'utrecht-sidenav__connection--parent',\n                    sibling && 'utrecht-sidenav__connection--sibling',\n                    index + 1 === array.length && 'utrecht-sidenav__connection--last',\n                  )}\n                ></div>\n                {title}\n              </a>\n              {children ? (\n                <ul class=\"utrecht-sidenav__list utrecht-sidenav__list--child\">\n                  {children.map(({ href, title, current, focus }) => (\n                    <li key={href} class=\"utrecht-sidenav__item utrecht-sidenav__item--child\">\n                      <a\n                        class={clsx(\n                          'utrecht-sidenav__link',\n                          'utrecht-sidenav__link--child',\n                          current && 'utrecht-sidenav__link--current',\n                          current && 'utrecht-sidenav__link--current-child',\n                          focus && 'utrecht-sidenav__link--focus',\n                        )}\n                        href={href}\n                      >\n                        <div\n                          class={clsx(\n                            'utrecht-sidenav__marker',\n                            'utrecht-sidenav__marker--child',\n                            current && 'utrecht-sidenav__marker--current',\n                            current && 'utrecht-sidenav__marker--current-child',\n                          )}\n                        ></div>\n                        {title}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              ) : (\n                ''\n              )}\n              <div class=\"utrecht-sidenav__item-separator\"></div>\n            </li>\n          ))}\n        </ul>\n      </nav>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/utrecht-surface.cjs.entry.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-d59bfa6c.js');
+const index = require('./index-e1edb849.js');
 
 const surfaceCss = ".utrecht-surface{background-color:var(--utrecht-surface-background-color, inherit);color:var(--utrecht-surface-color, inherit)}.utrecht-surface--html-body{margin-block-end:0;margin-block-start:0;margin-inline-end:0;margin-inline-start:0}:host{display:block}:host([hidden]){display:none !important}";
 
 const Code = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", { class: "utrecht-surface" }, index.h("slot", null)));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h("div", { class: "utrecht-surface" }, index.h("slot", null)));
+    }
 };
 Code.style = surfaceCss;