@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/bundle/dso-tab.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DmmKAUIT.js';
 import { i as isModifiedEvent } from './p-Hgv-pDpy.js';
 
 const tabCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}`;
@@ -35,11 +35,10 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
      * @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)));
     }
     get host() { return this; }
     static get style() { return tabCss(); }
@@ -67,6 +66,3 @@ const DsoTab = Tab;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTab, defineCustomElement };
-//# sourceMappingURL=dso-tab.js.map
-
-//# sourceMappingURL=dso-tab.js.map

package/dist/bundle/dso-table.js

@@ -1,9 +1,6 @@
-import { T as Table, d as defineCustomElement$1 } from './p-ChdQ7Urg.js';
+import { T as Table, d as defineCustomElement$1 } from './p-C3e8S8uz.js';
 
 const DsoTable = Table;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTable, defineCustomElement };
-//# sourceMappingURL=dso-table.js.map
-
-//# sourceMappingURL=dso-table.js.map

package/dist/bundle/dso-tabs.js

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { p as proxyCustomElement, H, f as forceUpdate, h, c as Host, t as transformTag } from './p-DmmKAUIT.js';
 
 const tabsCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}`;
 
@@ -44,31 +44,27 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends H {
         return this.enabledTabs[this.enabledTabs.length - 1];
     }
     moveFocusToTab(tab) {
-        tab === null || tab === void 0 ? void 0 : tab._dsoFocus();
+        tab?._dsoFocus();
     }
     moveFocusToPreviousTab(focussedTab) {
-        var _a;
         const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.enabledTabs[index - 1]) !== null && _a !== void 0 ? _a : this.lastTab;
+        const next = this.enabledTabs[index - 1] ?? this.lastTab;
         this.moveFocusToTab(next);
     }
     moveFocusToNextTab(focussedTab) {
-        var _a;
         const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);
-        const next = (_a = this.enabledTabs[index + 1]) !== null && _a !== void 0 ? _a : this.firstTab;
+        const next = this.enabledTabs[index + 1] ?? this.firstTab;
         this.moveFocusToTab(next);
     }
     connectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) !== null && _a !== void 0 ? _a : (this.mutationObserver = new MutationObserver(() => forceUpdate(this.host)));
+        this.mutationObserver ?? (this.mutationObserver = new MutationObserver(() => forceUpdate(this.host)));
         this.mutationObserver.observe(this.host, { childList: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b430219c96edf6edf2ed4016acd351fe73d2ab09' }, h("div", { key: '6d3bbbefcd781cbdf454d99d4997fc0bce695f79', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '94650f25cc3330c3a99ec9adc97b57cc31085e63' })), h("div", { key: 'c9096ce7f23e183cc61752e2774afe9dd4c1fb3a', role: "tabpanel", tabindex: "0" }, h("slot", { key: '8226777ee10de8cf42661549f0cb6bef7c0ca54c', name: "panel" }))));
+        return (h(Host, { key: 'f148573cca7a6fe4e659cb3b4f014f928debe1b1' }, h("div", { key: '1b063b75b918d4914e697ee637f2c1997489c8c5', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '97cdc322078a0bc101471f38926160572229a2a6' })), h("div", { key: 'a3673df296590880938cece38a25a38cac5ada6a', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'a3b54d69d3829ea188bd30ee47fdb847d06fb6ae', name: "panel" }))));
     }
     get host() { return this; }
     static get style() { return tabsCss(); }
@@ -91,6 +87,3 @@ const DsoTabs = Tabs;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTabs, defineCustomElement };
-//# sourceMappingURL=dso-tabs.js.map
-
-//# sourceMappingURL=dso-tabs.js.map

package/dist/bundle/dso-tijdreis-banner.js

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
-import { d as defineCustomElement$2 } from './p-Btk7RWKm.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-DmmKAUIT.js';
+import { d as defineCustomElement$2 } from './p-DE7WGgpi.js';
 
-const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
+const tijdreisBannerCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:#8b4a6a;color:#fff;display:grid;block-size:100%;padding-block:8px;padding-inline:24px}@media screen and (min-width: 768px){:host{align-items:center;justify-content:center;gap:8px;grid-template-columns:auto auto auto;grid-template-areas:"icon slot button"}}@media screen and (max-width: 767px){:host{align-items:start;grid-template-columns:max-content auto;grid-template-areas:"icon slot" ". button";padding-block:16px;gap:16px 8px}}:host dso-icon{grid-area:icon}:host slot:not([name]){grid-area:slot;margin-inline-end:10px}:host ::slotted([slot=button]){--_dso-button-secondary-background-color:transparent;--_dso-button-secondary-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-background-color:rgba(235, 225, 235, 0.2);--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-background-color:rgba(235, 225, 235, 0.4);--_dso-button-secondary-active-border-color:rgba(235, 225, 235, 0.3);--_dso-button-secondary-disabled-background-color:transparent;--_dso-button-secondary-disabled-color:rgba(235, 225, 235, 0.7);--_dso-button-secondary-disabled-border-color:rgba(235, 225, 235, 0.7)}@media screen and (min-width: 768px){:host ::slotted([slot=button]){margin-inline-start:32px !important;}}@media screen and (max-width: 767px){:host ::slotted([slot=button]){grid-area:button;justify-self:start}}`;
 
 const TijdreisBanner = /*@__PURE__*/ proxyCustomElement(class TijdreisBanner extends H {
     constructor(registerHost) {
@@ -12,7 +12,7 @@ const TijdreisBanner = /*@__PURE__*/ proxyCustomElement(class TijdreisBanner ext
         this.__attachShadow();
     }
     render() {
-        return (h(Fragment, { key: '8ff21b653f7eabfa2d8c26aa873c456dd79b7dae' }, h("dso-icon", { key: 'dd2abde6521d77468808e5ab37cbaf3a9a8d77dd', icon: "clock" }), h("slot", { key: '595ab3d3e30f98abaeb40b2840462274a33de83b' }), h("slot", { key: '03a8e2060bec34dd1dbe078cd100a47b7474f9b4', name: "button" })));
+        return (h(Fragment, { key: 'ca501369642979c39d6d6438136b4611b9427442' }, h("dso-icon", { key: '1b9693a680255a1355fa3397bbfeb74efb7ae8cb', icon: "clock-outline" }), h("slot", { key: '2f80ffd91c3aff2ced7401bd386b37fdca144f5f' }), h("slot", { key: '3c3e38b71aab6d2a9348ad109180ec32dbc95c9c', name: "button" })));
     }
     static get style() { return tijdreisBannerCss(); }
 }, [257, "dso-tijdreis-banner"]);
@@ -39,6 +39,3 @@ const DsoTijdreisBanner = TijdreisBanner;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTijdreisBanner, defineCustomElement };
-//# sourceMappingURL=dso-tijdreis-banner.js.map
-
-//# sourceMappingURL=dso-tijdreis-banner.js.map

package/dist/bundle/dso-toggletip.js

@@ -1,9 +1,112 @@
-import { T as Toggletip, d as defineCustomElement$1 } from './p-zCo78EB0.js';
+import { p as proxyCustomElement, H, h, F as Fragment, t as transformTag } from './p-DmmKAUIT.js';
+import { d as defineCustomElement$6 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$5 } from './p-CYWYJZS6.js';
+import { d as defineCustomElement$4 } from './p-0JNed3EY.js';
+import { d as defineCustomElement$3 } from './p-cvGwDktk.js';
+import { d as defineCustomElement$2 } from './p-DzcBPvon.js';
+
+const toggletipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:inline-block;--tooltip-margin-block-start:0;--tooltip-margin-inline-start:3px;--tooltip-margin-inline-end:units.$u1 * -1 !important}:host(:focus){outline:none;z-index:410}`;
+
+const Toggletip = /*@__PURE__*/ proxyCustomElement(class Toggletip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.active = false;
+        /**
+         * Toggletip label.
+         */
+        this.label = "Toelichting";
+        /**
+         * Toggletip position.
+         */
+        this.position = "right";
+        this.click = () => {
+            if (this.active) {
+                this.close();
+            }
+            else {
+                this.open();
+            }
+        };
+        this.open = () => {
+            this.active = true;
+            this.host.addEventListener("keydown", this.keyDownListener);
+            this.host.addEventListener("focusout", this.focusOutListener);
+        };
+        this.close = () => {
+            this.host.removeEventListener("focusout", this.focusOutListener);
+            this.host.removeEventListener("keydown", this.keyDownListener);
+            this.active = false;
+        };
+        this.focusOutListener = (event) => {
+            if (!this.host.contains(event.relatedTarget)) {
+                this.close();
+            }
+        };
+        this.keyDownListener = (event) => {
+            if (!event.defaultPrevented && event.key === "Escape") {
+                this.close();
+                this.infoButton?.setFocus();
+                event.preventDefault();
+            }
+            return;
+        };
+    }
+    render() {
+        return (h(Fragment, { key: '4c9604dd74759a421760d242694ccb53c2307da2' }, h("dso-info-button", { key: '9d67231c629f46761b15e68cff995a9cb3bd59e7', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '3a6603f0967d27fa05a1fe383baae787138b0a3a', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '6de1cdda99e8df1bf1fee502572b8407042f45d5' }))));
+    }
+    get host() { return this; }
+    static get style() { return toggletipCss(); }
+}, [257, "dso-toggletip", {
+        "label": [1],
+        "position": [1],
+        "small": [4],
+        "secondary": [4],
+        "active": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-toggletip", "dso-icon", "dso-icon-button", "dso-info-button", "dso-scrollable", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-toggletip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), Toggletip);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "dso-icon-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-info-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-scrollable":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const DsoToggletip = Toggletip;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoToggletip, defineCustomElement };
-//# sourceMappingURL=dso-toggletip.js.map
-
-//# sourceMappingURL=dso-toggletip.js.map

package/dist/bundle/dso-tooltip.js

@@ -1,9 +1,6 @@
-import { T as Tooltip, d as defineCustomElement$1 } from './p-CBhOl8xD.js';
+import { T as Tooltip, d as defineCustomElement$1 } from './p-DzcBPvon.js';
 
 const DsoTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTooltip, defineCustomElement };
-//# sourceMappingURL=dso-tooltip.js.map
-
-//# sourceMappingURL=dso-tooltip.js.map

package/dist/bundle/dso-tree-view.js

@@ -1,15 +1,11 @@
-import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DBWrx_3r.js';
+import { h, F as Fragment, p as proxyCustomElement, H, d as createEvent, t as transformTag } from './p-DmmKAUIT.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { d as defineCustomElement$3 } from './p-Btk7RWKm.js';
-import { d as defineCustomElement$2 } from './p-BOYwoGz-.js';
+import { d as defineCustomElement$3 } from './p-DE7WGgpi.js';
+import { d as defineCustomElement$2 } from './p-CdS6sfbr.js';
 
-const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
-    var _a, _b, _c, _d;
-    return (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) }), role: "none" }, h("div", { class: "tree-branch-control" }, item.hasItems ? (h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, h("dso-icon", { icon: item.open ? "minus-square" : "plus-square" }))) : (h("dso-icon", null))), h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), (_c = item.icons) === null || _c === void 0 ? void 0 :
-        _c.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
-};
+const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!item.items?.length }), role: "none" }, h("div", { class: "tree-branch-control" }, item.hasItems ? (h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, h("dso-icon", { icon: item.open ? "minus-square-outline" : "plus-square-outline" }))) : (h("dso-icon", null))), h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!item.items?.length) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), item.icons?.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, item.items?.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
 
-const treeViewCss = () => `:host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}`;
+const treeViewCss = () => `:host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:"";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:"";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:"";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:"";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-flex;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}`;
 
 const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
     constructor(registerHost) {
@@ -97,7 +93,6 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
      * @returns Whether the item was found.
      */
     async focusItem(path) {
-        var _a;
         const tree = this.tree;
         if (!tree || path.length === 0) {
             return false;
@@ -106,7 +101,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         if (!itemToFocus) {
             throw new Error("No itemToFocus found");
         }
-        const elementToFocus = Array.from((_a = tree.querySelectorAll("p")) !== null && _a !== void 0 ? _a : [])
+        const elementToFocus = Array.from(tree.querySelectorAll("p") ?? [])
             .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)
             .find((item) => item.dataset["itemId"] === itemToFocus.id);
         if (!elementToFocus) {
@@ -148,27 +143,25 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         TreeView.setFocus(tree, focusableItem);
     }
     static expandItemOrFocusChild(tree, target) {
-        var _a;
-        if ((target === null || target === void 0 ? void 0 : target.getAttribute("aria-expanded")) === "true") {
+        if (target?.getAttribute("aria-expanded") === "true") {
             TreeView.moveFocus(tree, target, "next");
         }
         else {
-            const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            const controlElement = target.previousElementSibling?.firstElementChild;
             if (controlElement instanceof H) {
                 controlElement.click();
             }
         }
     }
     static collapseItemOrFocusParent(tree, target) {
-        var _a, _b, _c;
-        if ((target === null || target === void 0 ? void 0 : target.getAttribute("aria-expanded")) === "true") {
-            const controlElement = (_a = target.previousElementSibling) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+        if (target?.getAttribute("aria-expanded") === "true") {
+            const controlElement = target.previousElementSibling?.firstElementChild;
             if (controlElement instanceof H) {
                 controlElement.click();
             }
         }
         else {
-            const parentTarget = (_c = (_b = target === null || target === void 0 ? void 0 : target.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.previousElementSibling;
+            const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;
             if (parentTarget instanceof H) {
                 TreeView.setFocus(tree, parentTarget);
             }
@@ -181,9 +174,9 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         }
         const current = focusableItems.indexOf(el);
         char = char.toLowerCase();
-        let nextItem = focusableItems.find((item, index) => { var _a; return index > current && ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(char)); });
+        let nextItem = focusableItems.find((item, index) => index > current && item.textContent?.toLowerCase().startsWith(char));
         if (!nextItem) {
-            nextItem = focusableItems.find((item, index) => { var _a; return index < current && ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().startsWith(char)); });
+            nextItem = focusableItems.find((item, index) => index < current && item.textContent?.toLowerCase().startsWith(char));
         }
         if (nextItem) {
             TreeView.setFocus(tree, nextItem);
@@ -192,11 +185,10 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends H {
         return false;
     }
     render() {
-        var _a;
-        return (h("div", { key: 'ab7c4a9d862e3f99c50365d744d6376366737d3d', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'a41b478cccd6b39ee30b47ca28c5a34549a270a0', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: '8bf51f3fd72fec3a41306955c59e35eb273699d7', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '38bace04d50bc9179fe4730b2211408d88ca759e', role: "tree", "aria-label": "Objectenboom" }, this.collection?.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get style() { return treeViewCss(); }
-}, [257, "dso-tree-view", {
+}, [1, "dso-tree-view", {
         "collection": [16],
         "focusItem": [64]
     }]);
@@ -228,6 +220,3 @@ const DsoTreeView = TreeView;
 const defineCustomElement = defineCustomElement$1;
 
 export { DsoTreeView, defineCustomElement };
-//# sourceMappingURL=dso-tree-view.js.map
-
-//# sourceMappingURL=dso-tree-view.js.map