@dso-toolkit/core 92.0.0 → 94.0.0

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

@@ -1,7 +1,25 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
-import debounce from "debounce";
-const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()), 50));
+// Accumulate resized targets in a Set and flush once per animation frame.
+const pendingTargets = new Set();
+let flushRafId = null;
+function flushPendingTargets() {
+    flushRafId = null;
+    pendingTargets.forEach((el) => el._setScrollState());
+    pendingTargets.clear();
+}
+const resizeObserver = new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+        const el = getScrollableComponentFromResizeObserverEntry(entry);
+        if (el) {
+            pendingTargets.add(el);
+        }
+    });
+    // RAF throttling, to prevent multiple calls to flushPendingTargets within the same frame
+    if (flushRafId === null) {
+        flushRafId = requestAnimationFrame(flushPendingTargets);
+    }
+});
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
     if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
         return target.parentNode.host;
@@ -86,9 +104,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '569d76f0c59ce43126449e32ef132771d546ad6f', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '648c4f43114bc18fceab87d6996ced8cbfa9a19e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '22411d1426e932361af33d43829f469ed3f9eba7', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '706ca039bd792b3de4063b03d7b580f656f70872', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'c6c6eb665ef037e5e47f22d26a4216610301832d' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'a918c122651856c44d79a9191016d41d0638f75b' }))));
     }
     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: 'b59a81cd8c691e00a08e9bcb59b50283f6b4caa3', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: 'a91832f2d36347c8649cb21f96f3db4568b96c4f', 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.js

@@ -46,7 +46,7 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: 'f81f4f99bc21e817e72f7a1cf8819d0d9a3aafdd' }, h("div", { key: '6027967f85f8c526b6f2cb84c1a26b04b67db10d', class: "dso-selectable-container" }, h("div", { key: '095e946614f2360a19a365bb8fe866ab393cc798', class: "dso-selectable-input-wrapper" }, h("input", { key: '0a4ba657536ae3491bef90b720d49b897cfd2da6', 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: 'b62095b1332b2251453774ce19b9d926c4d29240', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'dcabe0bf6194bc50fc07136f732169d4b9e65b81', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '640976fb646e7a57430e6701db778815bec6bbf6' }, h("slot", { key: '8b276e1be739177525d4d529efe0acb1c38afd43', name: "info" })))), h("slot", { key: '6e43d7742fecf815fea944e3c03429e54416aeea', name: "options" })));
+        return (h(Fragment, { key: '5410abfaf50d7322265385857e2f12344bb492af' }, h("div", { key: '06bdebb73196de12c6298be11e60b98e7e6bd135', class: "dso-selectable-container" }, h("div", { key: '329560e74e007d57a3ffb63d2d6ad758323c3887', class: "dso-selectable-input-wrapper" }, h("input", { key: '86e9e64b27464689f78a16b3cdc7939f9f2a8af0', 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: 'a23c9b19cac577d5e7e8f82eb3e42b27dcd767c9', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'c1148c96b99875608bac0dbf1e0eba04134216c5', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'bbae1e175d6dc0cd1fa18500f2c8579dd06a42e9' }, h("slot", { key: '6c3bbf1ce3f5005450ab8794d4de2827a2885185', name: "info" })))), h("slot", { key: '383aa686357ecc4c1e8e222fd629864e7c07a97f', 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: '593f9128df0af49283ddfbcc59e71d09c172709d', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'cbacc69d1f96fe96f0413047ba2b72b2ce98100e', icon: "chevron-right" })));
+        return (h("a", { key: '6272ff4ac153043a24cce71e4eb873f572ea532d', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '8986359d60c02746f4f0fcf37d869fb3fe79aecb', 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: 'c67f22a23e080ae6469e83b99d8e566eb2d913ec' }, h("button", { key: '227665cf8e5efbd69719c8fd468940baafe5a23a', 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: 'bc0c8c827438c4ebbc7b79b795227ee92ec3ce2d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '2fdaf8de62b852738285490ccda1dfdbfd13e76f', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'd6e7c97a8f8c71a5c0c5082484ed49dfded9403f', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: 'aa0e8877592955dbe90d35804be6f213bc6303d3', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '284891e11ad364cb7e3cc0dd3978cdb001da1230', htmlFor: this.identifier }, h("slot", { key: '9e688b645bb439955db471c8e158a8441833a674' })))));
+        return (h(Fragment, { key: '50edc998dadf5520c4535be2041ba83c82a2e5a5' }, h("button", { key: '5533a3d6b6d4563844540d1b74cf071e9cbd5e8c', 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: 'd4f1835fb09009d124b82a4d5f0a275414fb9096', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '6cd505236a332bd7a5189f7bc48cb01111c197e1', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'bcc074eb2642b202018bcb56b7fe70640e8cd903', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4c991ff3fe274158b4aff20fa49f4a276b268145', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'b66498ac0e40ceef29deeb7439c9626d361cd924', htmlFor: this.identifier }, h("slot", { key: '9a4ea064380ce3364b0935eb8fea28101c92f2cc' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -458,7 +458,7 @@ button.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -477,11 +477,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);
   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);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -489,16 +491,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);
 }
 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);
 }
 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);
 }
 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: 'f129ab62861a035a21d6aa89af2cd7b7f164fc90', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'db1aa23985a54cdb6aba626ba149c4f5d88844e4', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '41382ad4b378e38dd5a9ff459e0678002e62efa9' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '82937dbb48eb6ac7d12605f5883ed59751b9fd76', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '245c312ed64026be170cf83c4e2f05a39797ab2f', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'cc5d676feb980a778d6840eba891dbd3a0a83398' }, "Heel moeilijk"), h("span", { key: 'ff12910eaf60d8bdff15f0d63e4beb690f9fef73' }, "Heel makkelijk")), h("div", { key: '2c5d2cfea1a5283065a70ac6848b953a7d48daad', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: 'acafdfc063471b8d84bbf88eb9d6a63523fb1a2c', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '33aed8858723743e671bf05da4ccac6d77b75adb', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'f257dac855e12e6c2a2cc0cd32dd010a0a094697' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '0cc8da20b5a63dac3a081edfa0384e32580a7555', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '45e9ded430e3f630e8c59576d3277b30b0bce35d', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a1f5eadf1c4ffd790e0e10a957747a3343f8f90f' }, "Heel moeilijk"), h("span", { key: '792b1e46f56c0bc574caf54bf37b6cd16a528cda' }, "Heel makkelijk")), h("div", { key: '50781e609bf9501d2f60cc6bf21042afeca91d62', 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: '66e49d2363b577a10479753a6aec6f0ab7e5ed9d', type: "submit", class: "dso-secondary" }, h("span", { key: 'fcd08d5ae7a2fd2d95f2a0cd9d6fd7356fd513ec' }, "Antwoord verzenden")))));
+        })), h("button", { key: '632969c59d644db477d89fa40bff566356a159e3', type: "submit", class: "dso-secondary" }, h("span", { key: '8b603a6816f662842d84f6e0f3952ff0911def27' }, "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: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -58,11 +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);
   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);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -72,6 +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);
 }
 a.dso-primary:active,
 button.dso-primary:active,
@@ -79,6 +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);
 }
 a.dso-primary[disabled], a.dso-primary[disabled]:hover,
 button.dso-primary[disabled],
@@ -88,6 +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);
 }
 a.dso-primary.dso-small,
 button.dso-primary.dso-small,
@@ -228,7 +233,7 @@ label.dso-secondary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -259,11 +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);
   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);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -273,6 +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);
 }
 a.dso-secondary:active,
 button.dso-secondary:active,
@@ -280,6 +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);
 }
 a.dso-secondary[disabled], a.dso-secondary[disabled]:hover,
 button.dso-secondary[disabled],
@@ -289,6 +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);
 }
 a.dso-secondary.dso-small,
 button.dso-secondary.dso-small,
@@ -485,7 +495,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -519,7 +529,7 @@ label.dso-tertiary {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -550,11 +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);
   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);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -564,6 +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);
 }
 a.dso-tertiary:active,
 button.dso-tertiary:active,
@@ -571,6 +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);
 }
 a.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,
 button.dso-tertiary[disabled],
@@ -580,6 +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);
 }
 a.dso-tertiary.dso-small,
 button.dso-tertiary.dso-small,
@@ -665,7 +680,8 @@ button.dso-tertiary,
 label.dso-tertiary {
   border: 0;
   line-height: 1;
-  padding: 0;
+  padding-inline: 0;
+  padding-block: var(--_dt-button-padding-block-tertiary, 0);
   background-color: transparent;
 }
 a.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,
@@ -810,7 +826,7 @@ label.dso-map {
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -833,11 +849,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);
   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);
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -847,6 +865,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);
 }
 a.dso-map:active,
 button.dso-map:active,
@@ -854,6 +873,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);
 }
 a.dso-map[disabled], a.dso-map[disabled]:hover,
 button.dso-map[disabled],
@@ -863,6 +883,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);
 }
 a.dso-map.dso-small,
 button.dso-map.dso-small,
@@ -1069,258 +1090,29 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-inline-start: 16px;
+  margin-block-start: var(--_dt-button-after-button-margin-block-start, 0);
+  margin-inline-start: var(--_dt-button-after-button-margin-inline-start, 16px);
 }
 
-@keyframes ModalFadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
 :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;
   display: block;
   margin-block-end: 24px;
 }
 
-.dso-header {
-  min-block-size: 32px;
-}
-.dso-header h2 {
-  color: #275937;
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-.dso-header .dso-close {
-  color: #275937;
-}
-
-:host .dso-modal {
-  margin: 0;
-  background-color: transparent;
-  inline-size: 100dvi;
-  overflow: visible;
-  padding: 0;
-  border: 0;
-}
-:host .dso-modal::backdrop {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-:host .dso-modal .dso-dialog {
-  inline-size: 640px;
-  background-color: #fff;
-  opacity: 1;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
-  animation: 200ms ease-out 0s 1 ModalFadeIn;
-}
-:host .dso-modal .dso-header {
-  position: relative;
-  padding: 16px;
-  border-block-end: 1px solid #ccc;
-}
-:host .dso-modal .dso-header h2 {
-  max-inline-size: calc(100% - 24px);
-  margin: 0;
-  color: #275937;
-}
-:host .dso-modal .dso-header .dso-close {
-  position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 13px;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
-}
-:host .dso-modal > .dso-dialog > .dso-body p {
-  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-:host .dso-modal > .dso-dialog > .dso-body ul,
-:host .dso-modal > .dso-dialog > .dso-body ol {
-  margin-block-end: 16px;
-}
-:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-:host .dso-modal > .dso-dialog > .dso-body ul ul,
-:host .dso-modal > .dso-dialog > .dso-body ul ol,
-:host .dso-modal > .dso-dialog > .dso-body ol ul,
-:host .dso-modal > .dso-dialog > .dso-body ol ol {
-  margin-block-end: 0;
-}
-:host .dso-modal > .dso-dialog > .dso-body pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-:host .dso-modal > .dso-dialog > .dso-body blockquote {
-  padding-block: 16px;
-  padding-inline: 24px;
-}
-:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
-:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
-}
-:host .dso-modal > .dso-dialog > .dso-body img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-:host .dso-modal > .dso-dialog > .dso-body {
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 1.5rem;
-  overflow-x: auto;
-  padding: 32px;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable {
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 6.5rem;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
-  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
-  margin-block-end: 16px;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ul,
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ol,
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ul,
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ol {
-  margin-block-end: 0;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
-  padding-block: 16px;
-  padding-inline: 24px;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
-  margin-block-end: 24px;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
-  padding: 32px;
-}
-:host .dso-modal .dso-body:focus-visible {
-  outline: none;
-}
-@media screen and (max-width: 767px) {
-  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  :host .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  :host .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  :host .dso-modal .dso-footer button.dso-tertiary,
-  :host .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
-:host .dso-modal .dso-footer {
-  min-block-size: 80px;
-  padding-block: 16px;
-  padding-inline: 32px;
-  text-align: end;
-}
-@media screen and (min-width: 768px) {
-  :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
-    margin-inline-start: 16px;
-  }
-  :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-}
-@media screen and (max-width: 767px) {
-  :host .dso-modal .dso-dialog {
-    max-inline-size: 100%;
-    margin-block-start: 0;
-  }
-  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  :host .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  :host .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  :host .dso-modal .dso-footer button.dso-tertiary,
-  :host .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
-@media screen and (max-height: 380px) {
-  :host .dso-modal .dso-dialog {
-    min-block-size: 216px;
-    margin-block-start: 8px;
-    margin-block-end: 8px;
-  }
-  :host .dso-modal .dso-header {
-    padding-block: 8px;
-    padding-inline: 16px;
-  }
-  :host .dso-modal .dso-header .dso-close {
-    inset-block-start: 8px;
-  }
-  :host .dso-modal .dso-body {
-    padding-block: 16px;
-    padding-inline: 24px;
-  }
-  :host .dso-modal .dso-footer {
-    min-block-size: auto;
-    overflow: auto;
-    padding-block: 8px;
-    padding-inline: 32px;
-  }
-}
-
-.dso-modal .dso-dialog.dso-table-dialog {
-  margin-block-start: 1rem;
-  margin-inline-start: 1rem;
-  margin-inline-end: 1rem;
-  inline-size: 100%;
-}
-.dso-modal .dso-dialog.dso-table-dialog .dso-body {
-  max-block-size: calc(100vh - 112px - 1.5em - 2rem);
-}
-@media screen and (max-width: 767px) {
-  .dso-modal .dso-dialog.dso-table-dialog {
-    max-inline-size: 100%;
-  }
-}
-
 :host([is-responsive=true]) .dso-table-body {
   border: 1px solid #ccc;
   margin-block-end: 0;
   overflow-y: auto;
   inline-size: 100%;
 }
-:host([is-responsive=true]) .dso-table-body.dso-body {
-  inline-size: calc(100% - 64px);
-}
 
 .dso-table-utilities:not([hidden]) {
   align-items: center;

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

@@ -7,9 +7,6 @@ export class Table {
          */
         this.noModal = false;
         this.modalActive = false;
-        this.dialogCloseEventListener = () => {
-            this.closeModal();
-        };
     }
     startResponsiveBehavior() {
         this.resizeObserver?.observe(this.host);
@@ -20,18 +17,13 @@ export class Table {
     componentDidLoad() {
         this.startResponsiveBehavior();
     }
-    componentDidRender() {
-        if (this.modalActive) {
-            this.dialogElement?.showModal();
-        }
-    }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();
     }
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: 'ce32806b2e7be5a2c6c76203fd9a6caf72da5e7b', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '9b42504f9ccf434da80bf5efe1c6bb20f72219a3', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive ? (h("dialog", { class: "dso-modal", ref: (element) => (this.dialogElement = element), onClose: this.dialogCloseEventListener, "aria-label": dialogLabel }, h("div", { class: "dso-dialog dso-table-dialog" }, h("div", { class: "dso-header" }, h("h2", { class: { "sr-only": !caption } }, dialogLabel), h("dso-icon-button", { icon: "cross", 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))))));
+        return (h(Host, { key: '2fe24a3a4ef9884afc25e5bb36f0e5f19a5173f8', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '701e3c1c18a073857dea5070b3a9844b96ca305f', 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;
@@ -39,7 +31,6 @@ export class Table {
     }
     closeModal() {
         this.placeholderHeight = undefined;
-        this.dialogElement?.close();
         this.modalActive = false;
     }
     setResponsiveTable([dsoTable]) {