@dso-toolkit/core 100.1.0 → 100.2.0

package/dist/collection/components/grid-column/grid-column.css

@@ -0,0 +1,289 @@
+:host {
+  display: block;
+  position: relative;
+  min-block-size: 1px;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
+  float: inline-start;
+  inline-size: 100%;
+}
+
+:host([columns~=xs-1]) {
+  inline-size: 8.3333333333%;
+}
+
+:host([columns~=xs-2]) {
+  inline-size: 16.6666666667%;
+}
+
+:host([columns~=xs-3]) {
+  inline-size: 25%;
+}
+
+:host([columns~=xs-4]) {
+  inline-size: 33.3333333333%;
+}
+
+:host([columns~=xs-5]) {
+  inline-size: 41.6666666667%;
+}
+
+:host([columns~=xs-6]) {
+  inline-size: 50%;
+}
+
+:host([columns~=xs-7]) {
+  inline-size: 58.3333333333%;
+}
+
+:host([columns~=xs-8]) {
+  inline-size: 66.6666666667%;
+}
+
+:host([columns~=xs-9]) {
+  inline-size: 75%;
+}
+
+:host([columns~=xs-10]) {
+  inline-size: 83.3333333333%;
+}
+
+:host([columns~=xs-11]) {
+  inline-size: 91.6666666667%;
+}
+
+:host([columns~=xs-12]) {
+  inline-size: 100%;
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-1]) {
+    inline-size: 8.3333333333%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-2]) {
+    inline-size: 16.6666666667%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-3]) {
+    inline-size: 25%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-4]) {
+    inline-size: 33.3333333333%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-5]) {
+    inline-size: 41.6666666667%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-6]) {
+    inline-size: 50%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-7]) {
+    inline-size: 58.3333333333%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-8]) {
+    inline-size: 66.6666666667%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-9]) {
+    inline-size: 75%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-10]) {
+    inline-size: 83.3333333333%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-11]) {
+    inline-size: 91.6666666667%;
+  }
+}
+
+@media (min-width: 768px) {
+  :host([columns~=sm-12]) {
+    inline-size: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-1]) {
+    inline-size: 8.3333333333%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-2]) {
+    inline-size: 16.6666666667%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-3]) {
+    inline-size: 25%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-4]) {
+    inline-size: 33.3333333333%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-5]) {
+    inline-size: 41.6666666667%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-6]) {
+    inline-size: 50%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-7]) {
+    inline-size: 58.3333333333%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-8]) {
+    inline-size: 66.6666666667%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-9]) {
+    inline-size: 75%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-10]) {
+    inline-size: 83.3333333333%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-11]) {
+    inline-size: 91.6666666667%;
+  }
+}
+
+@media (min-width: 992px) {
+  :host([columns~=md-12]) {
+    inline-size: 100%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-1]) {
+    inline-size: 8.3333333333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-2]) {
+    inline-size: 16.6666666667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-3]) {
+    inline-size: 25%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-4]) {
+    inline-size: 33.3333333333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-5]) {
+    inline-size: 41.6666666667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-6]) {
+    inline-size: 50%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-7]) {
+    inline-size: 58.3333333333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-8]) {
+    inline-size: 66.6666666667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-9]) {
+    inline-size: 75%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-10]) {
+    inline-size: 83.3333333333%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-11]) {
+    inline-size: 91.6666666667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  :host([columns~=lg-12]) {
+    inline-size: 100%;
+  }
+}
+
+dialog.grid-column-content {
+  position: absolute;
+  inset-block-start: var(--_dso-grid-column-overlay-inset-block-start);
+  inset-inline-start: var(--_dso-grid-column-overlay-inset-inline-start);
+  inline-size: var(--_dso-grid-column-overlay-inline-size);
+  max-inline-size: none;
+  max-block-size: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background-color: #fff;
+}
+dialog.grid-column-content::backdrop {
+  background-color: rgba(255, 255, 255, 0.6);
+}

package/dist/collection/components/grid-column/grid-column.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/grid-column/grid-column.js

@@ -0,0 +1,185 @@
+import { Host, h, } from "@stencil/core";
+const overlayMediaQuery = "(min-width: 768px)";
+/**
+ * @slot - The default slot for the column content.
+ */
+export class GridColumn {
+    constructor() {
+        /**
+         * When set, the column content expands to the full width of the row and renders as a modal overlay with a backdrop.
+         * The column keeps its own place in the row; the overlay panel is anchored to the row and scrolls with the page.
+         * Below the sm breakpoint the overlay does not apply and the content stays in the flow of the page.
+         */
+        this.overlay = false;
+        this.overlayActive = false;
+        this.syncOverlayActive = () => {
+            this.overlayActive = this.overlay && (this.mediaQueryList?.matches ?? false);
+        };
+        this.handleDialogClick = (event) => {
+            if (!this.dialogElement || event.target !== this.dialogElement) {
+                return;
+            }
+            const { left, right, top, bottom } = this.dialogElement.getBoundingClientRect();
+            if (event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom) {
+                this.dsoClose.emit({ originalEvent: event });
+            }
+        };
+        this.handleDialogCancel = (event) => {
+            event.preventDefault();
+            this.dsoClose.emit({ originalEvent: event });
+        };
+        this.handleDialogClose = (event) => {
+            this.dsoClose.emit({ originalEvent: event });
+            if (this.overlayActive && this.dialogElement && !this.dialogElement.open) {
+                this.dialogElement.showModal();
+            }
+        };
+    }
+    overlayWatcher() {
+        this.syncOverlayActive();
+    }
+    connectedCallback() {
+        this.mediaQueryList = window.matchMedia(overlayMediaQuery);
+        this.mediaQueryList.addEventListener("change", this.syncOverlayActive);
+        this.syncOverlayActive();
+    }
+    disconnectedCallback() {
+        this.mediaQueryList?.removeEventListener("change", this.syncOverlayActive);
+        this.mediaQueryList = undefined;
+        this.stopObserving();
+    }
+    componentDidRender() {
+        if (!this.overlayActive) {
+            this.stopObserving();
+            return;
+        }
+        if (this.dialogElement && !this.dialogElement.open) {
+            this.dialogElement.showModal();
+        }
+        this.positionOverlay();
+        this.startObserving();
+    }
+    positionOverlay() {
+        const row = this.host.parentElement;
+        if (!row?.classList.contains("row")) {
+            console.warn('Grid Column: overlay requires the column to be a direct child of a "row" element');
+            return;
+        }
+        const rowRect = row.getBoundingClientRect();
+        const hostRect = this.host.getBoundingClientRect();
+        const gutter = parseFloat(getComputedStyle(this.host).paddingInlineStart) || 0;
+        this.host.style.setProperty("--_dso-grid-column-overlay-inset-block-start", `${hostRect.top + window.scrollY}px`);
+        this.host.style.setProperty("--_dso-grid-column-overlay-inset-inline-start", `${rowRect.left + window.scrollX + gutter}px`);
+        this.host.style.setProperty("--_dso-grid-column-overlay-inline-size", `${rowRect.width - gutter * 2}px`);
+    }
+    startObserving() {
+        if (this.resizeObserver) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.positionOverlay());
+        this.resizeObserver.observe(document.body);
+        this.resizeObserver.observe(this.host);
+        if (this.host.parentElement) {
+            this.resizeObserver.observe(this.host.parentElement);
+        }
+    }
+    stopObserving() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    render() {
+        return (h(Host, { key: '73c7d20be67a5e8930429f249d1bd56fe7edc0a1' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
+    }
+    static get is() { return "dso-grid-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["grid-column.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["grid-column.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "columns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The column widths per breakpoint (e.g. \"xs-4\", \"md-6 lg-8\"). Without \"col-\" prefix. Widths only; push, pull and\r\noffset are not supported."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "columns"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set, the column content expands to the full width of the row and renders as a modal overlay with a backdrop.\r\nThe column keeps its own place in the row; the overlay panel is anchored to the row and scrolls with the page.\r\nBelow the sm breakpoint the overlay does not apply and the content stays in the flow of the page."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "overlay",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overlayActive": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user dismisses the overlay: a click on the backdrop or the Escape key."
+                },
+                "complexType": {
+                    "original": "GridColumnCloseEvent",
+                    "resolved": "GridColumnCloseEvent",
+                    "references": {
+                        "GridColumnCloseEvent": {
+                            "location": "import",
+                            "path": "./grid-column.interfaces",
+                            "id": "src/components/grid-column/grid-column.interfaces.ts::GridColumnCloseEvent",
+                            "referenceLocation": "GridColumnCloseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "overlay",
+                "methodName": "overlayWatcher"
+            }];
+    }
+}

package/dist/collection/components/header/header.js

@@ -271,7 +271,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '0ea04cc1432dd27da79f2fecaf342beb4486f99a', "is-compact": this.isCompact }, h("div", { key: '471e73275bf1d645fbcb83e35dc6bb5612a800ba', class: "dso-header" }, h("div", { key: '795356c3f82e93df6ff699db5b36540aaee7e832', class: "logo-container" }, h("slot", { key: '9dcdcdf2f5e6292fe31b25915d263e3505047312', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '931dc1762425cf848f2cc1570a5b32334e7475b4', "is-compact": this.isCompact }, h("div", { key: '64ace8bce4093b7de3480da9ddf815a608cbcba0', class: "dso-header" }, h("div", { key: '48d423ba2cc9597823df24ddf5b17f4a68d7e551', class: "logo-container" }, h("slot", { key: '2e3a9ceb11a5996543285f3638c2dd07f5108ca4', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/hero-image/hero-image.css

@@ -0,0 +1,60 @@
+:host {
+  --dso-hero-image-background-color: #ebf3e6;
+  margin-inline-start: calc(50% - 50vw);
+  margin-inline-end: calc(50% - 50vw);
+  padding-inline-start: calc(50vw - 50% - 16px);
+  padding-inline-end: calc(50vw - 50% - 16px);
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--dso-hero-image-background-color);
+}
+@media only screen and (min-width: 768px) {
+  :host {
+    min-block-size: 352px;
+  }
+}
+
+::slotted([slot=image]) {
+  display: block;
+  inline-size: 100%;
+  min-block-size: calc(16.6666666667vw + 1dvi);
+  background-color: var(--dso-hero-image-background-color);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+@media only screen and (min-width: 768px) {
+  ::slotted([slot=image]) {
+    position: absolute;
+    inset: 0;
+    min-block-size: unset;
+  }
+}
+
+.hero-image-container {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  inline-size: 100%;
+  padding-inline: 16px;
+  padding-block-end: 16px;
+  margin-block-start: 16px;
+}
+@media (min-width: 768px) {
+  .hero-image-container {
+    margin-block-start: 40px;
+  }
+}
+@media (min-width: 992px) {
+  .hero-image-container {
+    max-inline-size: 992px;
+    margin-block-start: 40px;
+  }
+}
+@media (min-width: 992px) {
+  .hero-image-container ::slotted(*) {
+    display: block;
+    inline-size: clamp(0px, 38vw, 545px);
+  }
+}

package/dist/collection/components/hero-image/hero-image.js

@@ -0,0 +1,22 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot image - Element that provides the background image, e.g. a `div` with a custom CSS class that sets `background-image`.
+ * @slot - The Highlight Box with Rich Content that is shown on top of or below the image.
+ */
+export class HeroImage {
+    render() {
+        return (h(Host, { key: '7c30ba2c5660bc9b428949f4f6764e08fba8d8c8' }, h("slot", { key: 'eb65537dce2c8422fc2c609632aaa9770831297e', name: "image" }), h("div", { key: '5faa577dc81d1d959dd8645f6c20187088aa5605', class: "hero-image-container" }, h("slot", { key: '8dfe7c0a62775948e9f4d92333200dc77a3ca573' }))));
+    }
+    static get is() { return "dso-hero-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hero-image.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["hero-image.css"]
+        };
+    }
+}

package/dist/collection/components/highlight-box/highlight-box.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '3293b12fe82396580186ef78dee0165063fa1a04', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'b8c864d67fcd3ea0d84a2037648ca72ce47103c4', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: 'df482099bbb3e4b303238c36d2afcde6dfa6bba4', name: "icon" }))), h("slot", { key: 'a68efd769d984c6d936d4b0db53d7532ed648b35' })));
+        return (h(Host, { key: '3f403b11a77983f350a586d3e399d9d643a5f811', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'bdc42b95c78bbec4af466b4a84ecb4b02f561e23', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: 'ee8165e3d3d9208294531fdfe9dbd42a455e6509', name: "icon" }))), h("slot", { key: 'd3279de601388485b296e13c1415b179f69b0591' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/history-item/history-item.js

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: '6ee1da1085393e583f0e85e50697bfc853c2af9e', class: "history-item" }, h("div", { key: '361d172b8b8bbbd167ea8c58576bd1ab4bf08bbe', class: "history-item-date" }, h("slot", { key: '8f0f5d47cf94de8023b3687c1784a97c00876007', name: "date" })), h("div", { key: 'b680c670f027bd5754980ea7c6ff6104eb9413a0', class: "history-item-content" }, h("div", { key: '651d82ba7c7ed75b8d3cd6077c65cb0e0bfab006', class: "history-item-status-message" }, h("dso-icon", { key: '6f5ef066d9e4bf89ac262efbe8025dc1734ba34d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'c1f4ece7a1595c06a5f8f74254d5e74c4a0e4b43', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '27d0d4773e69c803f729b65f4f477a5028d5c964', class: "history-item-title" }, h("a", { key: '40396bbda7f322d0aef8e7269c20abc952b48a5e', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'c894e2ec83f673e0bfa5a6c20e29c9b06c39dda8', class: "history-item-title-content" }, h("slot", { key: '95d995d100db11d6c557c75ead872360d1db06c0', name: "title" })), "\u2060", h("dso-icon", { key: 'edd01a4d570c81bc9982c2f5dc29136d0dd5b121', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '292647d2665d1cc8b81cd32e61d9bee6eef26087', class: "history-item-explanation" }, h("slot", { key: '262ae4842b243aeb8cd86a0c034d6e7b4d7062e5', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '884a462c276e462488aec156ff56c27bb694e1c8', class: "history-item-warning" }, h("dso-icon", { key: '2e061864eae872e8b53f8ed4eae414354c080f56', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '7a53f699357bb4effbda29cba09817e40346c770', name: "warning" }))))));
+        return (h("div", { key: '27087f663a39e6d805adf7b1da3db2adadcbf5c9', class: "history-item" }, h("div", { key: '90417592ddc3cecec81c670f53f071ef51d7436f', class: "history-item-date" }, h("slot", { key: '71955c1a77d41683298e863c631c04d5ced10fd7', name: "date" })), h("div", { key: '4e2c0ad8a72e8671296a57e8dad61c94398ed396', class: "history-item-content" }, h("div", { key: '2cd2d65d3f889000f5e5e5dde35bd776d13569e7', class: "history-item-status-message" }, h("dso-icon", { key: '3f83e54705b31eb22610a16b83587429764c2def', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '13516e1f9c14db2fbb81baca7a49b170a5a1ce65', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '82c28d0d8d6861e0bac768d2d14cc2a7e7c78e95', class: "history-item-title" }, h("a", { key: '80be42478cc05c5cfdb612b3327d8051a346abf0', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '975753beb272fcd210663794f89c8fa9c3cedc2c', class: "history-item-title-content" }, h("slot", { key: '6e78a3a9978eb2a1b5fd2abc7effd7dd9f7c4c5e', name: "title" })), "\u2060", h("dso-icon", { key: 'd034fdef92aa0495c74e6644f8a602b0bc54e259', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: 'a5455e11a0fb58a041bc30bff77704eba37e6c8a', class: "history-item-explanation" }, h("slot", { key: '659996d3818b763b18210a606733ceb807c4e4b5', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '1f42a56c4cf5b1fb27ded1aa188c87da126524b1', class: "history-item-warning" }, h("dso-icon", { key: '4999d4d30e3173a888483fa203ff430c66c96ada', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'ffbdf71422a2d6745655fdab1b02cb3dc24b51a0', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '1df02b97b48721e7527fc3ae617ff32e00db961b', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'f3c2fea315141aa82455dab1de3a1b75a097a12c', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/icon-button/icon-button.js

@@ -77,7 +77,7 @@ export class IconButton {
         this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: '4c930bb2fd38dfce8db767072ff7ad994dfbd869', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '1137f9ab4dcdb979544781d03b657e24359cc801', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '5ec39345d360e556d7b23a11d67eec64aaab48ab', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '5ee25dbb3bf536e7d1b07d6443db275a7b40447a', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'b7a99cc0b448fecc555a01ef9f5ecf6e6267464a', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '97218a9eb10b3e6aa6384aa91b76140610587fc5', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("dso-icon-button", { key: '62d95155d61bfd7c671c5964c7837e587cf6998c', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3a3fa3f36c53a01e0c2a9ceff9c17002543596cd' }, h("slot", { key: 'f5eba0eb7309ecb410bab297c6cb871deb2bb8f2' }), !this.fixed && (h("dso-icon-button", { key: 'e0546bb603a08250cb872df96bc76ea961a03c53', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js

@@ -114,7 +114,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'bebf2c54d9740a143661f2a4a8f289764e742c1c', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'a89e0ea637d63255a786ed190ac19fdd48b330ca', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: 'd3840f4ba7c517e4715bfa8b487b97ba7fc5a8c0', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '2752725c430ae05daeef3087fe19ec028a1fe5f4', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: 'f95b0b1205464a42d3970095a36b7e475d78aaa6', name: "toggletip" }))))));
+        return (h(Host, { key: 'd5b28d8f99d79e58d3e46c3b1ca299c69113eede', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: '49b0e63ffff14227787556ae0d812fe5db60e3bf', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: '5e33be53cdec59870cd510d54d6b0ee63b5c3e62', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '68c59df3ceb38673be699a3425ab42eb08e195c6', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: '4e0e7f0aca340e25fe585ca43d429bc669faca05', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '5c9b842e1f9f77163b62d7d52c9496d053e55180', id: "description", hidden: true }, this.description)), h("span", { key: 'fe2b8532daf462fbe9b225a08f97c7d15a32a8cd', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'ed0ad0b7c36553bd5c746b6cd21d1cc916d71e2d', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'b1e37746f98e5cc20eaa63cd41b36b31278c5ebd', id: "description", hidden: true }, this.description)), h("span", { key: '4a2887664a746f9ad1178ae5a91d3898e7f59efb', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '37507f728c4128b9945c8f9856de45be70db10c9', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '21ff5269993d5b3aeabf667c01e671b1d41a9aca', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'feb885d773d0884f1f9d5c0ae07ff8b5488614c4', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }