@dso-toolkit/core 97.1.0 → 98.0.0

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

@@ -17,13 +17,23 @@ export class ResponsiveElement {
     constructor() {
         this.sizeAlias = elementSizes[0].alias;
         this.sizeWidth = 0;
+        this.flushSizeChange = () => {
+            this.resizeFrameId = undefined;
+            if (!this.host.isConnected || !this.pendingSizeAlias || this.pendingSizeAlias === this.sizeAlias) {
+                return;
+            }
+            this.sizeAlias = this.pendingSizeAlias;
+            this.dsoSizeChange.emit(this.pendingSizeAlias);
+        };
         this.observer = new ResizeObserver(([entry]) => {
             if (!entry) {
                 throw new Error("No entry found");
             }
-            const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;
-            this.sizeAlias = size;
-            this.dsoSizeChange.emit(size);
+            this.pendingSizeAlias =
+                elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;
+            if (this.resizeFrameId === undefined) {
+                this.resizeFrameId = requestAnimationFrame(this.flushSizeChange);
+            }
         });
     }
     /**
@@ -36,10 +46,14 @@ export class ResponsiveElement {
         this.observer.observe(this.host);
     }
     disconnectedCallback() {
+        if (this.resizeFrameId !== undefined) {
+            cancelAnimationFrame(this.resizeFrameId);
+            this.resizeFrameId = undefined;
+        }
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '038f65aa40386d2858df83dcfe773cf4aee53ab0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'b3727cb82cb4a1086c0258f10a99804066021bb4' })));
+        return (h(Host, { key: '951db597536267301c181caca6c91a93cd779662', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd08f7db909908aa3cc2a4cb6af377641d4f14108' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@
   display: block;
   block-size: 100%;
   overflow-y: hidden;
-  border-radius: var(--_dt-scrollable-border-radius, 0);
+  border-radius: var(--_dso-scrollable-border-radius, 0);
 }
 
 *,
@@ -22,10 +22,10 @@
   max-block-size: inherit;
   min-block-size: inherit;
   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);
-  border-end-end-radius: var(--_dt-scrollable-container-border-end-end-radius, 0);
+  padding-inline: var(--_dso-scrollable-container-padding-inline, 0);
+  padding-block: var(--_dso-scrollable-container-padding-block, 0);
+  border-end-start-radius: var(--_dso-scrollable-container-border-end-start-radius, 0);
+  border-end-end-radius: var(--_dso-scrollable-container-border-end-end-radius, 0);
 }
 .dso-shadow-container .dso-scroll-container::before, .dso-shadow-container .dso-scroll-container::after {
   background-repeat: no-repeat;
@@ -41,8 +41,8 @@
   inline-size: 100%;
   pointer-events: none;
   z-index: 1;
-  border-end-start-radius: var(--_dt-scrollable-container-border-end-start-radius, 0);
-  border-end-end-radius: var(--_dt-scrollable-container-border-end-end-radius, 0);
+  border-end-start-radius: var(--_dso-scrollable-container-border-end-start-radius, 0);
+  border-end-end-radius: var(--_dso-scrollable-container-border-end-end-radius, 0);
 }
 .dso-shadow-container .dso-scroll-container::before {
   background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));

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

@@ -104,9 +104,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'ed3625bd1fa4bf665d8a23f9d0955552ad5af958', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'ed0bbf745960e504176c928ca73c992b052a6573', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'e73ef5a52c269162bdca08021ecb41f57c359876', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '48388133062fd7c505fdf61e6aa56b07995f1a15', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'b0f2331fcfd67bee198e3a754a8a9d25d6f1d852' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '101f6c87af97c82c68259d3aa42367c86b22190e' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: '9398b2180aeaef6d79d10b92ff336358d2832260', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '5b2ffd8b3df72bd51dc5feca2a9bbf118dbcdbdc', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
             return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
         })));
     }

package/dist/collection/components/selectable/selectable.css

@@ -1,5 +1,5 @@
 :host {
-  padding-inline-start: var(--_dt-selectable-padding-inline-start, 32px);
+  padding-inline-start: var(--_dso-selectable-padding-inline-start, 32px);
   position: relative;
   display: var(--dso-selectable-display, block);
 }
@@ -148,8 +148,8 @@
   display: inline-block;
   min-block-size: 24px;
   position: relative;
-  margin-inline-start: var(--_dt-selectable-input-wrapper-margin-inline-start, -32px);
-  padding-inline-start: var(--_dt-selectable-input-wrapper-padding-inline-start, 32px);
+  margin-inline-start: var(--_dso-selectable-input-wrapper-margin-inline-start, -32px);
+  padding-inline-start: var(--_dso-selectable-input-wrapper-padding-inline-start, 32px);
 }
 .dso-selectable-container .dso-selectable-input-wrapper input[type=radio]:focus + label::before,
 .dso-selectable-container .dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {

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

@@ -48,7 +48,7 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'f8cd51d0562d5718bfb2846a1a1f001d067d88c2' }, h("div", { key: '0334a8b7aa939eac065292c34ad37bf4e757be56', class: "dso-selectable-container" }, h("div", { key: 'a7fb59205e16eb3797ed1acaaa7acb3934583507', class: "dso-selectable-input-wrapper" }, h("input", { key: 'bb7f49b38b56e5ba6bb690292646343bbfe0f2eb', 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: '45a00a047487be4f1426d83a3366ffce52dc941e', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'ab533add5946fe56c6362ae99a6bc89aebe82b6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '832279eb9a49a7b16374f00218ea5e8c3841aeed' }, h("slot", { key: '9d93816bcc8c6d9a91da08001d889feec5fc5d64', name: "info" })))), h("slot", { key: '8aee73d7bc3fb2a634b8c9a445cd20318f436765', name: "options" })));
+        return (h(Fragment, { key: 'd5814a71742ca8b0b3f78807eb5a386f163f8278' }, h("div", { key: 'bdba2a9bf31ca6fa1598975fc4e64324b2a1080b', class: "dso-selectable-container" }, h("div", { key: '810bbaf6866fa7cb057956ef2c2bef00cb63067c', class: "dso-selectable-input-wrapper" }, h("input", { key: '395c942d95fd7f917ddb576c1fe2723e56f39aae', 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: '2038e8f214ab22735959d13b32b57883eba7b695', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'd9db3ed40fdf812a222543a47e7459594c3111d8', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '3418e757fcb61e1470833bdf91afdf5d45870a13' }, h("slot", { key: '9fe91514e106cb2aaf039abcee3c4812d7467dfc', name: "info" })))), h("slot", { key: 'defcf0b85f8abe843ce5d63a2266c787c15837c5', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

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: '95c237c77ce3220dc01b274ae188c964a8d00072', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'cc7bc50829c74cdda12ffe51a1033993ca7e36d5', icon: "chevron-right" })));
+        return (h("a", { key: '346217a7f45ef757960c491fff7bfc6cc243e2d4', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'abfe7c977b2bac13751670e72cacbb682a75d210', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

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: '274c335f42f2e4d520a0ae2a6bdf1b0d866a1beb' }, h("button", { key: '2c9189d9ecc995f108387c69189e3ee36f3e2df8', 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: 'd08d9ff2cb0506be4ea8a70767352ed7ee8044b6', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '72080e2b31f9f1e136b987a9b227fb448c3d3bec', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'fd487372b48443feab75884f897dedc009e0b23a', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4f2826e8798297f357be6d2a8d63c52eb722476d', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '69d7f71c94a7094882a2a8d08e29ce32dcdedc41', htmlFor: this.identifier }, h("slot", { key: 'add7fa3aa284c4a5907aa28f5d2a9fc8ecf12662' })))));
+        return (h(Fragment, { key: '8408764d23c087490d7ca07f922ea671e32d9fac' }, h("button", { key: 'e3765bea33ab37e2280c450d884a2043d970a6a6', 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: '53f0b3b1dbfc84e96be62a1fa180c77bbe5f4a4d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '011c27a6e67d9a8ee8e786a003ed4840a3decabe', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '394b11a6748d40f4e081149ac1e96d496d2e4312', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'e9bfd2127dbdc251145440acc53b44ccf7f4e3d0', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '29d0b9965ebfecea760304b309a889b63172161c', htmlFor: this.identifier }, h("slot", { key: '1dc7ff6c28d4719ab6199ca68f2335d57e6badee' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -511,7 +511,7 @@ button.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -530,13 +530,13 @@ button.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -544,19 +544,19 @@ button.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 button.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 button.dso-secondary.dso-small {
   line-height: 1rem;

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '1677870899bb965a52c65231446680da2bd1bcd2', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f7c31ea7cef21dad9c1cfa58a382e730ccc9447e', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '4040f276b4f74426f712068e17bcac8973d24655' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '1ba28f0e44795ce41b86d510f0c04c59e693e487', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '6d9b4a7ab6a468117bb2efa88494b3553862fa9e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '4fed647d59637e56d3f8ee5ecfa8b0ca7fe79b8e' }, "Heel moeilijk"), h("span", { key: '7bf78ac6e98558e6a7f6e48620f3fff910af83e1' }, "Heel makkelijk")), h("div", { key: '76b0ad0bf0d91a200410cc0a28660cf65d175043', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '5d37cadebe4a30b60a333ae312a8ec599e9dd689', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '105f896f31081bd20293985ace6d7757cf354858', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '08b870e41e17967458a1630ce47ce054471f8fe2' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '639198b670fa1e4a986b6a3d476e026c1d50b806', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '591d6e78de80f2c71b50002d9abbfbbd33c962dd', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'f9937a42a32019e48a7511d9237059242537babb' }, "Heel moeilijk"), h("span", { key: '2e0952f21cfe980b3151ea4aa78a1ef34eccf5ae' }, "Heel makkelijk")), h("div", { key: '9bac6c3b0167721de3a386db6cbeff88f122d646', 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: '0faabc7920e2b36079dc259a59456013a752bfb0', type: "submit", class: "dso-secondary" }, h("span", { key: 'a72c193c90971b95cfdecc2d61ceb5f480f688a1' }, "Antwoord verzenden")))));
+        })), h("button", { key: '3cd0c53fbe1fcf6c6b77ec04365c0bec421ecf04', type: "submit", class: "dso-secondary" }, h("span", { key: 'cd5e598cfec32413f22cb6f9216637fe1c67d7ca' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table.css

@@ -27,7 +27,7 @@ label.dso-primary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,13 +58,13 @@ label.dso-primary {
   background-color: var(--_dso-button-primary-background-color, #39870c);
   border-color: var(--_dso-button-primary-border-color, #39870c);
   color: var(--_dso-button-primary-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -74,7 +74,7 @@ label.dso-primary:hover {
   background-color: var(--_dso-button-primary-hover-background-color, #275937);
   border-color: var(--_dso-button-primary-hover-border-color, #275937);
   color: var(--_dso-button-primary-hover-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -82,7 +82,7 @@ label.dso-primary:active {
   background-color: var(--_dso-button-primary-active-background-color, #173521);
   border-color: var(--_dso-button-primary-active-border-color, #173521);
   color: var(--_dso-button-primary-active-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -92,7 +92,7 @@ label.dso-primary[disabled]:hover {
   background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);
   border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-primary-disabled-color, #fff);
-  float: var(--_dt-button-float-primary, none);
+  float: var(--_dso-button-float-primary, none);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -233,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -264,13 +264,13 @@ label.dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -280,7 +280,7 @@ label.dso-secondary:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -288,7 +288,7 @@ label.dso-secondary:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -298,7 +298,7 @@ label.dso-secondary[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -495,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -529,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -560,13 +560,13 @@ label.dso-tertiary {
   background-color: var(--_dso-button-tertiary-background-color, );
   border-color: var(--_dso-button-tertiary-border-color, );
   color: var(--_dso-button-tertiary-color, #39870c);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: auto;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -576,7 +576,7 @@ label.dso-tertiary:hover {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -584,7 +584,7 @@ label.dso-tertiary:active {
   background-color: var(--_dso-button-tertiary-active-background-color, );
   border-color: var(--_dso-button-tertiary-active-border-color, );
   color: var(--_dso-button-tertiary-active-color, #173521);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -594,7 +594,7 @@ label.dso-tertiary[disabled]:hover {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-tertiary, none);
+  float: var(--_dso-button-float-tertiary, none);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +665,7 @@ label.dso-tertiary {
   border: 0;
   line-height: 1;
   padding-inline: 0;
-  padding-block: var(--_dt-button-padding-block-tertiary, 0);
+  padding-block: var(--_dso-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +810,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: var(--_dt-button-text-align, start);
+  text-align: var(--_dso-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,13 +833,13 @@ label.dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
   min-inline-size: 56px;
-  inline-size: var(--_dt-button-inline-size, auto);
+  inline-size: var(--_dso-button-inline-size, auto);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -849,7 +849,7 @@ label.dso-map:hover {
   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);
   border-color: var(--_dso-button-secondary-hover-border-color, #275937);
   color: var(--_dso-button-secondary-hover-color, #275937);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -857,7 +857,7 @@ label.dso-map:active {
   background-color: var(--_dso-button-secondary-active-background-color, #275937);
   border-color: var(--_dso-button-secondary-active-border-color, #275937);
   color: var(--_dso-button-secondary-active-color, #fff);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -867,7 +867,7 @@ label.dso-map[disabled]:hover {
   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);
   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);
   color: var(--_dso-button-secondary-disabled-color, #afcf9d);
-  float: var(--_dt-button-float-secondary, none);
+  float: var(--_dso-button-float-secondary, none);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1074,19 +1074,19 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
-  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
+  margin-block-start: var(--_dso-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dso-button-after-button-margin-inline-start, 16px);
 }
 
 :host {
-  --_dt-modal-inline-size: 100dvi;
-  --_dt-modal-margin: 0;
-  --_dt-modal-dialog-inline-size: 100%;
-  --_dt-modal-dialog-margin-block-start: 1rem;
-  --_dt-modal-dialog-margin-inline-start: 1rem;
-  --_dt-modal-dialog-margin-inline-end: 1rem;
-  --_dt-modal-body-max-block-size: calc(100vh - 100px);
-  --_dt-modal-header-close-btn: 16px;
+  --_dso-modal-inline-size: 100dvi;
+  --_dso-modal-margin: 0;
+  --_dso-modal-dialog-inline-size: 100%;
+  --_dso-modal-dialog-margin-block-start: 1rem;
+  --_dso-modal-dialog-margin-inline-start: 1rem;
+  --_dso-modal-dialog-margin-inline-end: 1rem;
+  --_dso-modal-body-max-block-size: calc(100vh - 100px);
+  --_dso-modal-header-close-btn: 16px;
   display: block;
   margin-block-end: 24px;
 }

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

@@ -11,19 +11,42 @@ export class Table {
     startResponsiveBehavior() {
         this.resizeObserver?.observe(this.host);
     }
+    scheduleResponsiveTable(entry) {
+        this.pendingResizeEntry = entry;
+        if (this.resizeFrameId !== undefined) {
+            return;
+        }
+        this.resizeFrameId = requestAnimationFrame(() => {
+            this.resizeFrameId = undefined;
+            if (!this.pendingResizeEntry) {
+                return;
+            }
+            this.setResponsiveTable(this.pendingResizeEntry);
+            this.pendingResizeEntry = undefined;
+        });
+    }
     componentWillLoad() {
-        this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));
+        this.resizeObserver = new ResizeObserver(debounce((entries) => {
+            if (!entries[0]) {
+                throw new Error("No dsoTable found");
+            }
+            this.scheduleResponsiveTable(entries[0]);
+        }, 200));
     }
     componentDidLoad() {
         this.startResponsiveBehavior();
     }
     disconnectedCallback() {
+        if (this.resizeFrameId !== undefined) {
+            cancelAnimationFrame(this.resizeFrameId);
+            this.resizeFrameId = undefined;
+        }
         this.resizeObserver?.disconnect();
     }
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: 'c76e43a3d307c5a13aa57d4b328552b62947cb73', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '977e54037c55d351d7d91bab8be937089aaa98ff', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "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))))));
+        return (h(Host, { key: '69cdc1cfab5128a370adfef088396aaba646055c', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '0dff9b29546b769cdfcb4b10c36aa2c7bdb4954d', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dso-modal", { modalTitle: caption ? dialogLabel : undefined, closable: true, returnFocus: false, onDsoClose: () => this.closeModal() }, !caption && (h("span", { slot: "body", class: "sr-only" }, dialogLabel)), h("div", { slot: "body", class: "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;
@@ -33,14 +56,13 @@ export class Table {
         this.placeholderHeight = undefined;
         this.modalActive = false;
     }
-    setResponsiveTable([dsoTable]) {
-        if (!dsoTable) {
-            throw new Error("No dsoTable found");
-        }
+    setResponsiveTable(dsoTable) {
         const tableElement = dsoTable.target.querySelector("table");
         if (dsoTable && tableElement instanceof HTMLTableElement) {
-            this.isResponsive =
-                Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
+            const isResponsive = Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
+            if (this.isResponsive !== isResponsive) {
+                this.isResponsive = isResponsive;
+            }
         }
     }
     static get is() { return "dso-table"; }

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

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b9568d7dc32c55b0b54c37b28756274bb57cbacf' }, h("div", { key: '314522c3eba0fb007ce5d214d309ab20a4a9e53c', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '0ea47d9bd541ee8657b5c9be2f24b6f641051c17' })), h("div", { key: 'd7a531a6ee574d7deb3455c3f43d16f40a0faf1b', role: "tabpanel", tabindex: "0" }, h("slot", { key: '65e458b46fcf351079f225fb49336ffcc5dd7982', name: "panel" }))));
+        return (h(Host, { key: '69cdc0bd5753cc65ff546ba1c2969c3b9ac6482c' }, h("div", { key: '4171b7b417ecfb7c3b9d69cd50b2fef583b51081', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'ad50f36cc2b02bd54c7646e6a36d475a76695f94' })), h("div", { key: 'b9fe37167164089894407c8d1788a749d820503c', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'ea6204b048ae528b8f82b08bd4f73c0f3ada7ee0', name: "panel" }))));
     }
     static get is() { return "dso-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tijdreis-banner/tijdreis-banner.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class TijdreisBanner {
     render() {
-        return (h(Fragment, { key: '66e8423f1014107ccb518d0dc3c81930997a65d7' }, h("dso-icon", { key: '39b66a7b7f7ab1f75d3b31793ba1bd40a732ea66', icon: "clock-outline" }), h("slot", { key: '2d0cc6f630dd371fd3f81a8372c38b79bde279ff' }), h("slot", { key: '5044fee1b5aa973c5fda7bbb99679acf44a946bb', name: "button" })));
+        return (h(Fragment, { key: 'a20b08110a3df8900f6de701bcb3bc6b4d485984' }, h("dso-icon", { key: '778139814e1dc3de82f955047319acb38efc4b0c', icon: "clock-outline" }), h("slot", { key: '45e6529857a046f7bbec4fd0098689e7dddffa02' }), h("slot", { key: '251d8dd8f53477b8b7053b417f0d2f5a3d9739e1', name: "button" })));
     }
     static get is() { return "dso-tijdreis-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -186,7 +186,7 @@ export class Tooltip {
         }
     }
     render() {
-        return (h(Host, { key: '5d392cd8db6f4fcb40ff59caa691a7d5d934a131', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '780a52b475cb6e70de39d0b8504838a12ebec54c', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '563bbf50ff151581d813b9733eabfe399600b6bd', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'a9aef05954ee275aaa14d72ff98aedc4c914127c', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'ffdfb31efc7f3006f9c42c0fe0e45d18698641c6' })))));
+        return (h(Host, { key: '1831f694a8e5514eed8e5d8788636d4a6d02e07b', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '8495fc83da43cd9dc032056a70b293b8c64ed174', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: 'd0e810eb07ca36b02a30fade6bd8e0aebccd3c5d', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '9f91c5b9a9cff0edf1ed7b278a90f75cb12ffb00', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '59baf2ab49437a757728340931970f8de2652da6' })))));
     }
     activatePopper() {
         this.hidden = false;

package/dist/collection/components/tree-view/tree-view.js

@@ -46,7 +46,7 @@ export class TreeView {
             }
             event.preventDefault();
         };
-        // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven
+        // eslint-disable-next-line stencil/own-props-must-be-private -- accessed by tree-item.tsx via owner reference
         this.itemClick = (event, ancestors, item) => {
             if (!(event.target instanceof HTMLElement)) {
                 return;
@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: '8fa6eac8e8c49987f8d84e3eb5d6a36cca0aa4fc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '7e985edbbd740375b87cdc4de51acf898ce1a653', 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 }))))));
+        return (h("div", { key: 'b7a5d643eea6e407e4c31660b8f004511f409984', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '6d90ef1fef5afe13eb13fc37605e3a7026c710ba', 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 is() { return "dso-tree-view"; }
     static get encapsulation() { return "shadow"; }