@dso-toolkit/core 88.1.0 → 89.0.0

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -67,7 +67,7 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }

package/dist/collection/components/plekinfo-card/plekinfo-card.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=plekinfo-card.interfaces.js.map

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -29,8 +29,7 @@ export class PlekinfoCard {
         this.mutationObserver.observe(this.host, { attributes: true, childList: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     clickEventHandler(e) {
@@ -50,7 +49,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '2866e252f13a703ee665c6873e9ebce171712f5a', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '9b7928fe32e1b9aee41bac41286c34c86cb740d3', wijzigactie: this.wijzigactie }, h("div", { key: '8f365899b1a72b6788b5f9fe3026cf08dcadf39c', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'a97698e558336efbb014e80c1af88052525f624e', name: "symbol" })), h("div", { key: '7e5171b34525d67b0ae06737e5ebe500c7d84201', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'e7c0cdc80915e9bc1733bed4d938866c3ee66260', name: "meta" }), this.interaction !== null && h("slot", { key: '18852deb9114ce7152b0844fe284ca91acdb890f', name: "interaction" })), h("div", { key: '104987489255f9de27c518138e85804f6b993158', class: "dso-plekinfo-card-content" }, h("slot", { key: '98b1ba6cabb7df67d7afe088e87fcd092545be8a', name: "content" })))));
+        return (h(Host, { key: 'a2c907d0f2be52a4816c2a0c7d73449a6f1463f2', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '712a59c849527b431093889eb75edbb54a6b6217', wijzigactie: this.wijzigactie }, h("div", { key: 'bf76d9c9dccc1bac5c20c12abc57a1a6f4cc42b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'afcdc38b574d5422c2a93819949d1a74c88e5960', name: "symbol" })), h("div", { key: 'b4f0b7014e90ef73531a0beab46e275824e00272', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'b19d778fedb08afff8850a890afc1c5a6ddc5348', name: "meta" }), this.interaction !== null && h("slot", { key: 'a1b83b992f140324e8635ca873560f6f16198a8c', name: "interaction" })), h("div", { key: '47e066a797fcc2de5964a32efd6159d07df4f642', class: "dso-plekinfo-card-content" }, h("slot", { key: 'd51a70ff7e321488f4f1c52ccebff926de5c5efa', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +75,8 @@ export class PlekinfoCard {
                         "PlekinfoWijzigactie": {
                             "location": "import",
                             "path": "./plekinfo-card.interfaces",
-                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoWijzigactie"
+                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoWijzigactie",
+                            "referenceLocation": "PlekinfoWijzigactie"
                         }
                     }
                 },
@@ -169,7 +169,8 @@ export class PlekinfoCard {
                         "PlekinfoCardClickEvent": {
                             "location": "import",
                             "path": "./plekinfo-card.interfaces",
-                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoCardClickEvent"
+                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoCardClickEvent",
+                            "referenceLocation": "PlekinfoCardClickEvent"
                         }
                     }
                 }
@@ -177,4 +178,3 @@ export class PlekinfoCard {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=plekinfo-card.js.map

package/dist/collection/components/progress-indicator/progress-indicator.i18n.js

@@ -10,4 +10,3 @@ export const translations = {
         },
     },
 };
-//# sourceMappingURL=progress-indicator.i18n.js.map

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '8ab3db9242f44f583258a9f313a8e3fbb9b72d0d' }, h("span", { key: '193a169135e1617727e86cc1c11cf87250220493', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '1d5e137b36f95fb9600545f58687a401276a27b7', icon: "spinner" })), h("span", { key: 'e5d674bd60e0037ad0e78ed7129ac74002ce38f2', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '5fa9e0caf06bc75410aa225a4e99e50b381bb396' }, h("span", { key: 'b89e86db1ffe6138b2ed33f08ea462e2501cf3c5', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'af7338d1bd50ca89206450c006f60f8b912eb9a7', icon: "spinner" })), h("span", { key: '6deb8a1b9a92d089d7260caee85f72c4ab7d46e8', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -83,4 +83,3 @@ export class Progressindicator {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=progress-indicator.js.map

package/dist/collection/components/project-item/project-item.css

@@ -17,7 +17,7 @@
   --_dt-dl-before-display: none;
   --_dt-dl-dt-font-weight: normal;
   --_dt-dl-dd-margin-block-start: 0;
-  --_dt-dl-dd-margin-inline-start: units.$u1;
+  --_dt-dl-dd-margin-inline-start: 8px;
   --_dt-dl-dd-padding-inline-start: 0;
   --_dt-dl-dt-inline-size: auto;
   --_dt-dl-dd-last-margin-block-end: 0;

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '12935f64b5c0cac32850e92ec594eac15fda660e' }, h("div", { key: '1125f19e534e74c3b50519b66b0117063e16ea9c', class: "project-item-header" }, h("div", { key: '262432d19146db36ef8dca100191299a1b991af1', class: "project-item-title" }, h("slot", { key: 'e84d0c1bc18e5f7c7a88ee21d522d5dfa8b2558a', name: "title" }), this.label && (h("dso-label", { key: 'cfe1a7b9d673c7e3513607cf86d745441df63ff7', status: "error", compact: true }, this.label))), h("div", { key: '05f7192b693cb027360cd10f081e09c767964f6b', class: "project-item-actions" }, h("slot", { key: '3e6aba40efd02de33a71a6288a9aab9845d124af', name: "actions" }))), h("div", { key: '3dc045a2481645f91906c2452ec7b64a1c009986', class: "project-item-info" }, h("div", { key: '7ab685ce1d25cca777f2239143b390ff630dc27a', class: "project-item-progress" }, h("slot", { key: '830643aa3b99b44dbcd6a8a5eab01a6ef0f8999e', name: "progress" })), h("div", { key: 'd87d23373afa3019b7f18668b13eabdec8a41cf4', class: "project-item-status" }, h("slot", { key: '7a52a02dca7d72cf356884333a3151e4c707c521', name: "status" })))));
+        return (h(Fragment, { key: 'ea5d57178d688d5153728f59d63fb9eca807902e' }, h("div", { key: '1601369295bde880747bca76a2d09e4af5e92df0', class: "project-item-header" }, h("div", { key: '2aea2de883cd682591c1ab8cff3f18589832d0bc', class: "project-item-title" }, h("slot", { key: '988bfa71770b9aa323a08f17d9fd4bd5430e0d11', name: "title" }), this.label && (h("dso-label", { key: 'bebc48107e8fdad8af897de5152e9848ab331bf7', status: "error", compact: true }, this.label))), h("div", { key: 'c8da0e2fb5f477dab60a3da9542c97d577a7c443', class: "project-item-actions" }, h("slot", { key: '7055bb2981bd48c6d46f236538caca79ab77a81b', name: "actions" }))), h("div", { key: 'ba0d34fff5d8f7d9de49faff24ec67471e42678f', class: "project-item-info" }, h("div", { key: '6d8549db9fe68754c112263f844343ba8d738236', class: "project-item-progress" }, h("slot", { key: 'f81d49758887cfc5df2a5a098fa7437a04b98c72', name: "progress" })), h("div", { key: 'f59d5570e3f34f7e307056d5429a0dc2a1194c60', class: "project-item-status" }, h("slot", { key: '14356e969dba3bd3118314a3e1b6cfcd8266fd5c', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }
@@ -39,4 +39,3 @@ export class ProjectItem {
         };
     }
 }
-//# sourceMappingURL=project-item.js.map

package/dist/collection/components/renvooi/renvooi-render-text.js

@@ -14,4 +14,3 @@ export const RenvooiRenderText = ({ text, mark, onMarkItemHighlight }) => {
         return (h("mark", { class: renvooiText.highlight ? "dso-highlight" : undefined, ref: (ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref) }, renvooiText.text));
     })));
 };
-//# sourceMappingURL=renvooi-render-text.js.map

package/dist/collection/components/renvooi/renvooi-render.js

@@ -13,4 +13,3 @@ export const RenvooiRender = ({ value, mark, onMarkItemHighlight }) => {
     }
     return (h(Fragment, null, h("del", null, h(RenvooiRenderText, { text: value.was, mark: mark, onMarkItemHighlight: onMarkItemHighlight })), h("ins", null, h(RenvooiRenderText, { text: value.wordt, mark: mark, onMarkItemHighlight: onMarkItemHighlight }))));
 };
-//# sourceMappingURL=renvooi-render.js.map

package/dist/collection/components/renvooi/renvooi.css

@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -67,7 +67,7 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }

package/dist/collection/components/renvooi/renvooi.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=renvooi.interfaces.js.map

package/dist/collection/components/renvooi/renvooi.js

@@ -16,7 +16,7 @@ export class Renvooi {
         return Array.isArray(this.value) ? this.value : [this.value];
     }
     render() {
-        return (h(Fragment, null, this.values.map((v) => (h(RenvooiRender, { value: v, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, v, this.values); }), onMarkItemHighlight: this.handleMarkItemHighlight })))));
+        return (h(Fragment, null, this.values.map((v) => (h(RenvooiRender, { value: v, mark: this.mark && ((text) => this.mark?.(text, v, this.values)), onMarkItemHighlight: this.handleMarkItemHighlight })))));
     }
     static get is() { return "dso-renvooi"; }
     static get encapsulation() { return "shadow"; }
@@ -42,7 +42,8 @@ export class Renvooi {
                         "RenvooiValue": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiValue"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiValue",
+                            "referenceLocation": "RenvooiValue"
                         }
                     }
                 },
@@ -67,7 +68,8 @@ export class Renvooi {
                         "RenvooiMarkFunction": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkFunction"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkFunction",
+                            "referenceLocation": "RenvooiMarkFunction"
                         }
                     }
                 },
@@ -100,11 +102,11 @@ export class Renvooi {
                         "RenvooiMarkItemHighlightEvent": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkItemHighlightEvent"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkItemHighlightEvent",
+                            "referenceLocation": "RenvooiMarkItemHighlightEvent"
                         }
                     }
                 }
             }];
     }
 }
-//# sourceMappingURL=renvooi.js.map

package/dist/collection/components/responsive-element/responsive-element.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=responsive-element.interfaces.js.map

package/dist/collection/components/responsive-element/responsive-element.js

@@ -18,11 +18,10 @@ export class ResponsiveElement {
         this.sizeAlias = elementSizes[0].alias;
         this.sizeWidth = 0;
         this.observer = new ResizeObserver(([entry]) => {
-            var _a, _b;
             if (!entry) {
                 throw new Error("No entry found");
             }
-            const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+            const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;
             this.sizeAlias = size;
             this.dsoSizeChange.emit(size);
         });
@@ -40,7 +39,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '8949125bfa2cbeee5544b5ea5fe7d3b5fc95495f', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '2fafcef7f364684ad31c6e1d95ec431ad2f06334' })));
+        return (h(Host, { key: 'ca9c1b61a8604e516e05bdce5117192964831c90', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd8465b9289ba9657d50c36cd0d43926e5ac47d3f' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +77,8 @@ export class ResponsiveElement {
                         "ResponsiveElementSize": {
                             "location": "import",
                             "path": "./responsive-element.interfaces",
-                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize",
+                            "referenceLocation": "ResponsiveElementSize"
                         }
                     }
                 }
@@ -98,7 +98,8 @@ export class ResponsiveElement {
                         "ResponsiveElementSize": {
                             "location": "import",
                             "path": "./responsive-element.interfaces",
-                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize",
+                            "referenceLocation": "ResponsiveElementSize"
                         }
                     },
                     "return": "Promise<ResponsiveElementSize>"
@@ -112,4 +113,3 @@ export class ResponsiveElement {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=responsive-element.js.map

package/dist/collection/components/scrollable/scrollable.css

@@ -21,7 +21,7 @@
   block-size: 100%;
   max-block-size: inherit;
   min-block-size: inherit;
-  overflow-y: auto;
+  overflow-y: hidden;
   padding-inline: var(--_dt-scrollable-container-padding-inline, 0);
   padding-block: var(--_dt-scrollable-container-padding-block, 0);
   border-end-start-radius: var(--_dt-scrollable-container-border-end-start-radius, 0);
@@ -52,6 +52,9 @@
   background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));
   inset-block-end: 0;
 }
+.dso-shadow-container .dso-scroll-container.dso-scroll-bottom, .dso-shadow-container .dso-scroll-container.dso-scroll-top, .dso-shadow-container .dso-scroll-container.dso-scroll-middle {
+  overflow-y: auto;
+}
 .dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before {
   opacity: 1;
 }

package/dist/collection/components/scrollable/scrollable.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=scrollable.interfaces.js.map

package/dist/collection/components/scrollable/scrollable.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
 import debounce from "debounce";
-const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
+const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
     if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
         return target.parentNode.host;
@@ -18,8 +18,7 @@ export class Scrollable {
     constructor() {
         // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
         this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
-            var _a;
-            const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
+            const element = target.parentElement?.closest("dso-scrollable");
             if (element !== this.host) {
                 return;
             }
@@ -50,7 +49,10 @@ export class Scrollable {
             return "noScroll";
         }
         const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
-        if (scrollHeight <= clientHeight) {
+        // At certain browser zoom levels (e.g. 25-50%), scrollHeight and clientHeight are
+        // rounded independently, causing a false overflow of up to ~8px. Returning "noScroll"
+        // keeps overflow-y: hidden (via CSS) which prevents the scrollbar from appearing.
+        if (scrollHeight - clientHeight < 8) {
             return "noScroll";
         }
         if (scrollTop === 0) {
@@ -84,9 +86,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'dee37c2609831086f1b3955405cb3e77fad6e00b', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'e2a462c19b66745489b8d6e2105b560aa872528c', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'e94af45c3732f7691a092af7bf842391af3c437c', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '154edbc32a0902fb5f006c647bbdeb9c564cf981', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '8cd3cf93c18bb02a2aef1eaf311381cdcbd632b2' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'b0a8bd4bb35413614c41ebb077bd7613e303682a' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +125,8 @@ export class Scrollable {
                         "DsoScrollEndEvent": {
                             "location": "import",
                             "path": "./scrollable.interfaces",
-                            "id": "src/components/scrollable/scrollable.interfaces.ts::DsoScrollEndEvent"
+                            "id": "src/components/scrollable/scrollable.interfaces.ts::DsoScrollEndEvent",
+                            "referenceLocation": "DsoScrollEndEvent"
                         }
                     }
                 }
@@ -155,4 +158,3 @@ export class Scrollable {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=scrollable.js.map

package/dist/collection/components/selectable/selectable.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=selectable.interfaces.js.map

package/dist/collection/components/selectable/selectable.js

@@ -25,11 +25,10 @@ export class Selectable {
      * @param active
      */
     async toggleInfo(active) {
-        this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
+        this.infoActive = active ?? !this.infoActive;
     }
     componentDidLoad() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
         this.mutationObserver.observe(this.host, {
             childList: true,
@@ -37,8 +36,7 @@ export class Selectable {
         this.setIndeterminate();
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
     }
     setIndeterminate() {
         if (!(this.input instanceof HTMLInputElement) || this.type !== "checkbox") {
@@ -47,9 +45,8 @@ export class Selectable {
         this.input.indeterminate = !!this.indeterminate;
     }
     render() {
-        var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '8a4ee13b4d34c210f5d4c4e9151b5d7d53802d37' }, h("div", { key: 'f67278b4fde95cd251323b97e79f93fb04c9b9e2', class: "dso-selectable-container" }, h("div", { key: 'e2359fe5b5d34b2f538d1a2d5f15f27eca3d329e', class: "dso-selectable-input-wrapper" }, h("input", { key: '09172958d3854b939b4d29d922ef5aabee8f2eb8', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '861f5e947c5e185e1e44f98fb2b9f5f8f1de0a90', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'b342d8fe01db69e44a8f4c14b435de26e4267fbe', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '58cf179b6ff01f2162ae3dbc5f90efbc32ae21bb' }, h("slot", { key: '5dbec26a759ae19daad1907b895a70b7d947bd07', name: "info" })))), h("slot", { key: 'f015ceda5af6134a7812cad315f28751a8b3c57a', name: "options" })));
+        return (h(Fragment, { key: '92526734f28bee1950a2f122a26cbf599d5c3a8f' }, h("div", { key: 'bdfd1c9a47b0d0d34c3c627b39d5804cf014856c', class: "dso-selectable-container" }, h("div", { key: 'f1f12523d41c4a6ecdc025a76e27e9eaef43d79d', class: "dso-selectable-input-wrapper" }, h("input", { key: '07429c725a6313cb7302720b5baab78ad3fa4f6a', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'de1df0aebbe572927f7187adb0780d635fd05a35', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'f2f6299fc6fa390398603d444b66a464160e4800', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'f3a602f0101f27fb6b6e9a528c911d1b8ce726d6' }, h("slot", { key: '2d80315a431d53b22a4329402f51bb7511972cff', name: "info" })))), h("slot", { key: '6409a2cafa87c8d579eb817b65d82c7f73099a81', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -57,8 +54,7 @@ export class Selectable {
         }
     }
     getIdentifier() {
-        var _a;
-        return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
+        return this.identifier ?? this.fallbackIdentifier;
     }
     static get is() { return "dso-selectable"; }
     static get encapsulation() { return "scoped"; }
@@ -327,7 +323,8 @@ export class Selectable {
                         "SelectableChangeEvent": {
                             "location": "import",
                             "path": "./selectable.interfaces",
-                            "id": "src/components/selectable/selectable.interfaces.ts::SelectableChangeEvent"
+                            "id": "src/components/selectable/selectable.interfaces.ts::SelectableChangeEvent",
+                            "referenceLocation": "SelectableChangeEvent"
                         }
                     }
                 }
@@ -369,4 +366,3 @@ export class Selectable {
             }];
     }
 }
-//# sourceMappingURL=selectable.js.map

package/dist/collection/components/skiplink/skiplink.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=skiplink.interfaces.js.map

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'b5a5885a85b0f58fe63af973f7cd453673c31388', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'c1e3ca48a711c1c6b1ed88df97b91636f27b383a', icon: "chevron-right" })));
+        return (h("a", { key: 'c78ada691201b00d93801b8dc232bf9111e8dfa8', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '5e069b50839ca41db1a6a098df3d7c73e1ebdd08', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }
@@ -82,11 +82,11 @@ export class Skiplink {
                         "SkiplinkClickEvent": {
                             "location": "import",
                             "path": "./skiplink.interfaces",
-                            "id": "src/components/skiplink/skiplink.interfaces.ts::SkiplinkClickEvent"
+                            "id": "src/components/skiplink/skiplink.interfaces.ts::SkiplinkClickEvent",
+                            "referenceLocation": "SkiplinkClickEvent"
                         }
                     }
                 }
             }];
     }
 }
-//# sourceMappingURL=skiplink.js.map

package/dist/collection/components/slide-toggle/slide-toggle.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=slide-toggle.interfaces.js.map

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -25,7 +25,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: 'f88a3ab9f40fa65dfc40766e0ba4e4986f41b4d5' }, h("button", Object.assign({ key: '40634c33c236dc5b0c4e8466cc0a5e66f7fda49f', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'fe409ecd9202a635179d92b135e659df10ee6dc9', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '75fb86fbba230bd789395a6d0545c74eade702f9', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '0d976634e2d3a8993678b933e06d845909b9314a', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'ddcb8c875e8d6c8163f82f71ef11ebef6ce80fe0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '8b33599fc06c16697dff6b89feeecb4176f4d4f5', htmlFor: this.identifier }, h("slot", { key: '306ed9a90810c5d11d813b59168f231017f5c3a4' })))));
+        return (h(Fragment, { key: 'fd420c3eabb3c18d3f89fb74d94071129b09c9c4' }, h("button", { key: '6869163132f3a92ec49c16bf110f01372cf753ac', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '3b14d668ef38a67327553afc556dfa2393bdd1e4', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '177d3abd24e397afecad42637d465d1f7cac4605', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'b3ed4d615406eff74ab55c20721ceabf8e26c62b', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '50f54882f08a02df04e89431cc50a4cc87017f5d', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'bf719234765f9c6bf5475b1d0dec6775831eb82b', htmlFor: this.identifier }, h("slot", { key: '3a34c3d2c3e5577d0b7fde8f48ada26d296b72c7' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -164,7 +164,8 @@ export class SlideToggle {
                         "SlideToggleActiveEvent": {
                             "location": "import",
                             "path": "./slide-toggle.interfaces",
-                            "id": "src/components/slide-toggle/slide-toggle.interfaces.ts::SlideToggleActiveEvent"
+                            "id": "src/components/slide-toggle/slide-toggle.interfaces.ts::SlideToggleActiveEvent",
+                            "referenceLocation": "SlideToggleActiveEvent"
                         }
                     }
                 }
@@ -172,4 +173,3 @@ export class SlideToggle {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=slide-toggle.js.map

package/dist/collection/components/survey-rating/survey-rating.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=survey-rating.interfaces.js.map

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '377269b580cbd00a35fe11f1049ecaf5a5c4487d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '2a9ef6ea761083ac436e86b9644730e756287a0c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '9218605298ca17dc79826d0660937724b1aa279f' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '180a6a112d5d7bb085881b6b84836b65e7941cf6', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'd889f88a9b50c4360a6b2bc206eabc3f2903bac0', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '200f9de2f49f1c19399fe57ddf55ef8866f1414e' }, "Heel moeilijk"), h("span", { key: 'bca6f67d09010dfa473d1ff001c38f3d6e215eba' }, "Heel makkelijk")), h("div", { key: 'cba9624f28dd7e53c818fd84e7135729f0a657d4', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '683754c8b7d191952d511d8226a77c8341b9da15', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '487255339ecf83e1f7d8a48f6132ca7d1aaa1f5c', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'e594f73ed57e0225d7c3a50742232ecd287b8601' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '8ae6b864fa965344fd6554eb063aae92ccb63b98', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '55ac6915d27500cf86bbc21fef9f146b03888cde', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '62560d49b2853b6a0ba2a0f2d2f1940c82c1aa28' }, "Heel moeilijk"), h("span", { key: '01d18168cfe9fbfdfb95b7a99534083495548f8d' }, "Heel makkelijk")), h("div", { key: '4c5b80510a2dae66e66049a6c85560759496be6f', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'bc3e579eb238799419595dc1e0f4df33c35c53e7', type: "submit", class: "dso-secondary" }, h("span", { key: 'df9c766f74fe501293e72fc6291f9bbe64c8910d' }, "Antwoord verzenden")))));
+        })), h("button", { key: 'd14bce6e921a617ee486a1fb387d4a7e8450a7ab', type: "submit", class: "dso-secondary" }, h("span", { key: '724007d5170cdde96845dfce1b06eabe9b63c613' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }
@@ -53,7 +53,8 @@ export class SurveyRating {
                         "SurveyRatingSubmitEvent": {
                             "location": "import",
                             "path": "./survey-rating.interfaces",
-                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingSubmitEvent"
+                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingSubmitEvent",
+                            "referenceLocation": "SurveyRatingSubmitEvent"
                         }
                     }
                 }
@@ -74,11 +75,11 @@ export class SurveyRating {
                         "SurveyRatingCloseEvent": {
                             "location": "import",
                             "path": "./survey-rating.interfaces",
-                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingCloseEvent"
+                            "id": "src/components/survey-rating/survey-rating.interfaces.ts::SurveyRatingCloseEvent",
+                            "referenceLocation": "SurveyRatingCloseEvent"
                         }
                     }
                 }
             }];
     }
 }
-//# sourceMappingURL=survey-rating.js.map

package/dist/collection/components/table/table.js

@@ -14,8 +14,7 @@ export class Table {
         };
     }
     startResponsiveBehavior() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
+        this.resizeObserver?.observe(this.host);
     }
     componentWillLoad() {
         this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));
@@ -24,28 +23,24 @@ export class Table {
         this.startResponsiveBehavior();
     }
     componentDidRender() {
-        var _a;
         if (this.modalActive) {
-            (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
+            this.dialogElement?.showModal();
         }
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver?.disconnect();
     }
     render() {
-        var _a, _b, _c;
-        const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '95fda5af5dda45cb55f0b37efee38bcaa99d84ac', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '388222068c1ed781740424faabce63a39764ff1c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), h("div", { class: "dso-body dso-table-body" }, h("slot", null))))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
+        const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
+        return (h(Host, { key: '24c6ce07b9d38a32576c4415dbcdd9fc86c137d7', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '51221f7be1aad0ec94169f1cf0b578ade02c1cbc', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener }, h("div", { class: "dso-dialog dso-table-dialog", "aria-labelledby": this.labelledbyId }, h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("dso-icon-button", { icon: "times", variant: "tertiary", class: "dso-close", label: "Sluiten", onClick: () => this.closeModal() })), h("div", { class: "dso-body dso-table-body" }, h("slot", null))))) : (h(Fragment, null, h("div", { class: "dso-table-utilities", hidden: !this.isResponsive && this.noModal }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption ?? "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" })))), h("div", { class: "dso-table-body" }, h("slot", null))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;
         this.modalActive = true;
     }
     closeModal() {
-        var _a;
         this.placeholderHeight = undefined;
-        (_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.close();
+        this.dialogElement?.close();
         this.modalActive = false;
     }
     setResponsiveTable([dsoTable]) {
@@ -103,4 +98,3 @@ export class Table {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=table.js.map

package/dist/collection/components/tabs/components/tab.js

@@ -29,11 +29,10 @@ export class Tab {
      * @internal
      */
     async _dsoFocus() {
-        var _a;
-        (_a = this.anchorOrButtonRef) === null || _a === void 0 ? void 0 : _a.focus();
+        this.anchorOrButtonRef?.focus();
     }
     render() {
-        return this.href ? (h("a", Object.assign({ role: "tab", href: this.href, onKeyUp: this.keyUpHandler, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null))) : (h("button", Object.assign({ role: "tab", type: "button", disabled: this.disabled, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null)));
+        return this.href ? (h("a", { role: "tab", href: this.href, onKeyUp: this.keyUpHandler, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false", ...(!this.active ? { tabIndex: -1 } : {}), ref: (element) => (this.anchorOrButtonRef = element) }, h("slot", null))) : (h("button", { role: "tab", type: "button", disabled: this.disabled, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false", ...(!this.active ? { tabIndex: -1 } : {}), ref: (element) => (this.anchorOrButtonRef = element) }, h("slot", null)));
     }
     static get is() { return "dso-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -126,7 +125,8 @@ export class Tab {
                         "TabsSwitchEvent": {
                             "location": "import",
                             "path": "../tabs.interfaces",
-                            "id": "src/components/tabs/tabs.interfaces.ts::TabsSwitchEvent"
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsSwitchEvent",
+                            "referenceLocation": "TabsSwitchEvent"
                         }
                     }
                 }
@@ -158,4 +158,3 @@ export class Tab {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=tab.js.map

package/dist/collection/components/tabs/tabs.interfaces.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=tabs.interfaces.js.map