@dso-toolkit/core 99.3.0 → 99.5.0

package/dist/collection/components/modal/modal.css

@@ -16,27 +16,28 @@
   display: block;
 }
 
-:host([fullscreen]) dialog {
+:host dialog.fullscreen {
   inline-size: 100dvi;
+  max-inline-size: calc(100% - 32px);
   block-size: 100dvb;
 }
-:host([fullscreen]) dialog .dso-dialog {
+:host dialog.fullscreen .dso-dialog {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
   block-size: 100%;
 }
-:host([fullscreen]) dialog .dso-dialog > dso-scrollable {
-  flex-grow: 1;
-  max-block-size: unset;
-}
-:host([fullscreen]) dialog .dso-footer {
+:host dialog.fullscreen .dso-footer {
   flex-shrink: 0;
 }
-
+:host dialog.fullscreen dso-scrollable {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
 @media screen and (max-width: 480px) {
   :host dialog {
     inline-size: 100dvi;
+    max-inline-size: calc(100% - 32px);
     block-size: 100dvb;
   }
   :host dialog .dso-dialog {
@@ -45,13 +46,13 @@
     inline-size: 100%;
     block-size: 100%;
   }
-  :host dialog .dso-dialog > dso-scrollable {
-    flex-grow: 1;
-    max-block-size: unset;
-  }
   :host dialog .dso-footer {
     flex-shrink: 0;
   }
+  :host dialog dso-scrollable {
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
 }
 
 .sr-only {
@@ -93,6 +94,7 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
   inline-size: var(--_dso-modal-inline-size, fit-content);
+  max-inline-size: min(100% - 32px, var(--_dso-modal-inline-size, 640px));
   margin: var(--_dso-modal-margin, auto);
 }
 @media screen and (max-width: 767px) {
@@ -102,27 +104,35 @@ button::-moz-focus-inner {
     --_dso-button-after-button-margin-block-start: 8px;
     --_dso-button-text-align: center;
   }
+  .dso-modal .dso-dialog {
+    display: flex;
+    flex-direction: column;
+  }
+  .dso-modal > .dso-dialog > dso-scrollable {
+    flex: 1 1 auto;
+  }
   .dso-modal .modal-scrollable {
     display: flex;
     flex-direction: column;
     min-block-size: 100%;
   }
+  .dso-modal .dso-header,
+  .dso-modal .dso-footer {
+    flex: 0 0 auto;
+  }
   .dso-modal .dso-body {
     flex: 1 1 auto;
   }
 }
-@media screen and (max-height: 380px) {
-  .dso-modal {
-    min-block-size: 216px;
-    margin-block-start: 8px;
-    margin-block-end: 8px;
-  }
-}
 .dso-modal::backdrop {
   background-color: rgba(255, 255, 255, 0.6);
 }
 .dso-modal .dso-dialog {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
   inline-size: var(--_dso-modal-dialog-inline-size, 640px);
+  max-inline-size: 100%;
+  max-block-size: calc(100dvb - 32px);
   margin-block-start: var(--_dso-modal-dialog-margin-block-start, 0);
   margin-inline-start: var(--_dso-modal-dialog-margin-inline-start, auto);
   margin-inline-end: var(--_dso-modal-dialog-margin-inline-end, auto);
@@ -131,10 +141,9 @@ button::-moz-focus-inner {
   box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
   animation: 200ms ease-out 0s 1 ModalFadeIn;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-height: 380px) {
   .dso-modal .dso-dialog {
-    max-inline-size: 100%;
-    margin-block-start: 0;
+    min-block-size: 220px;
   }
 }
 .dso-modal .dso-header {
@@ -149,66 +158,23 @@ button::-moz-focus-inner {
 }
 .dso-modal .dso-header dso-icon-button {
   position: absolute;
-  inset-block-start: var(--_dso-modal-header-close-btn, 22px);
-  inset-inline-end: 17px;
+  inset-block-start: 22px;
+  inset-inline-end: 16px;
 }
 @media screen and (max-height: 380px) {
   .dso-modal .dso-header {
     padding-block: 8px;
     padding-inline: 16px;
   }
-}
-.dso-modal > .dso-dialog > .dso-body p {
-  margin-block: 0 var(--_dso-rich-content-margin-block, 16px);
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > .dso-body ul,
-.dso-modal > .dso-dialog > .dso-body ol {
-  margin-block-end: 16px;
-}
-.dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-.dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
-  padding-inline-start: 24px;
-}
-.dso-modal > .dso-dialog > .dso-body ul ul,
-.dso-modal > .dso-dialog > .dso-body ul ol,
-.dso-modal > .dso-dialog > .dso-body ol ul,
-.dso-modal > .dso-dialog > .dso-body ol ol {
-  margin-block-end: 0;
-}
-.dso-modal > .dso-dialog > .dso-body pre {
-  margin-block: 0 16px;
-  margin-inline: 0;
-}
-.dso-modal > .dso-dialog > .dso-body blockquote {
-  padding-block: 16px;
-  padding-inline: 1.5rem;
-}
-.dso-modal > .dso-dialog > .dso-body dso-highlight-box {
-  margin-block-end: 1.5rem;
-}
-.dso-modal > .dso-dialog > .dso-body img {
-  block-size: auto;
-  max-inline-size: 100%;
-}
-.dso-modal > .dso-dialog > .dso-body {
-  block-size: calc(100% - 96px - 1.5rem);
-  /* prettier-ignore */
-  max-block-size: var(--_dso-modal-body-max-block-size, calc(70vh - 144px - 1.5em));
-  min-block-size: 1.5rem;
-  overflow-x: auto;
-  padding: 32px;
+  .dso-modal .dso-header dso-icon-button {
+    inset-block-start: 14px;
+  }
 }
 .dso-modal > .dso-dialog > dso-scrollable {
-  block-size: calc(100% - 96px - 1.5rem);
-  /* prettier-ignore */
-  max-block-size: var(--_dso-modal-body-max-block-size, calc(70vh - 144px - 1.5em));
   min-block-size: 6.5rem;
 }
-@media screen and (min-width: 480px) and (max-width: 767px) {
-  .dso-modal > .dso-dialog > dso-scrollable.narrow {
-    max-block-size: var(--_dso-modal-body-max-block-size, calc(100vh - 32px));
-  }
+.dso-modal > .dso-dialog > dso-scrollable.narrow {
+  max-block-size: calc(100dvb - 32px);
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin-block: 0 var(--_dso-rich-content-margin-block, 16px);

package/dist/collection/components/modal/modal.js

@@ -1,4 +1,5 @@
 import { Fragment, h } from "@stencil/core";
+import { clsx } from "clsx";
 import { v4 } from "uuid";
 import { getActiveElement } from "../../utils/get-active-element";
 import { i18n } from "../../utils/i18n";
@@ -81,7 +82,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '5bf0dd2d3c65fbd1590b96bbe92838076246f507', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '42ca0a18d4e91eaa6e78739b20deb5bc11281599', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
+        return (h("dialog", { key: '39b0faca17e1b2ecb01bfe655a45bd818e1029ce', class: clsx("dso-modal", { fullscreen: this.fullscreen }), role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'fd189c17664c0e0215190d7daa14074bd319a23c', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -65,7 +65,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: 'efa9562670f37b9c3fcc4fdf23a0437a50adf481', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '3773eeb116a6649e3d148e3834b52b22df30ed54', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '8fa8ac6f8dea236497cf48bc3c51a9b61de0f734', class: "onboarding-tip-inner" }, h("div", { key: '0a58c5f7a0d96730dbad3672ceef6ee5422ecb34', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'c29e53b3c90fab777a516997ca772751c55d12bb', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '6c8adde6c36ae5f1c9637286d59d6c0e58d4c940', icon: "light-bulb" }), h("slot", { key: 'bf42aadbcd8b94a339924a87325699f09b93c995', name: "heading" }))), h("dso-icon-button", { key: '7a2e502fa17df9ceac99610702237d37b6806408', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b584371b8e75e573b661df4b903c922d9c8f1682' }))), h("div", { key: 'c8a90fd4fcff76340bfaa7f7c89b388b7599e726', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: '5c0cd11775c061c504bd7e2cec6d2381882af4fb', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'e55bbecc565577f2ca8e4b3485b2aca542d997f1', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '490586f0aac540a18518584c9fca5d2661695992', class: "onboarding-tip-inner" }, h("div", { key: '9f11afb09eb86a828f353546a234f6f4c63a9792', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '2eac0fed6658e2c3cadf74bdd8c46fbcc66f9e5a', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '92884e49128c478e0f05b7815b7884b5890f1bd9', icon: "light-bulb", "aria-hidden": "true" }), h("slot", { key: '017d2fa43397e05066bc95f8c3f890745d32cc08', name: "heading" }))), h("dso-icon-button", { key: 'a5f29b63450c4567a0bd4590f652e2be97e2fdb2', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'dd55b81e8c9a0964a27c3cdc717aaf88b2b3a1b9' }))), h("div", { key: '01d86e851f71da393edd8acc4614cb5488a53776', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -65,7 +65,7 @@ export class OzonContentToggletip {
         this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: '054b1fc1100947196245910b357fb80c29182c54' }, h("span", { key: 'e3ade161d65fe3322ae0651dae6b529593c60a07', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: 'ba60e0ba165e0bb01781e89c9461bbc0e077ea3f' }, h("span", { key: 'e29b2372fd93624b5a7cc8c5181bb4ca68a5cccc', class: "toggletip-label" }, h("slot", { key: '21e96fe27e6ea3a86f03184f41c36a66aeb1596b', name: "label" })), "\u2060", h("dso-icon", { key: 'b4ab7245c3042967aff5dd4db73075edb751f3b4', icon: this.icon }))), !this.icon && h("slot", { key: '4aa818c5599151181a219b71ae23a8fb4d600e8a', name: "label" })), h(Tooltip, { key: '78420c36405e0076a8c8d8fce22bf866afe8e0ac', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '21a1c7363cc32b4bc8637e7bc28b2ffcd35ba000', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '93e1e8ac4e49b4d28eee9079e78c0369177ed0f9' })))));
+        return (h(Fragment, { key: '392c4b990e112812cc53b5a5a120dcd2b6832c58' }, h("span", { key: 'c49a758817b4c7943423dc5183c7eac9a1f2ba68', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '3d20b0a91e3b7cc52957c5cd115fb8b031dc08b1' }, h("span", { key: '539bafef106110cae98527e53f2483123e0721fe', class: "toggletip-label" }, h("slot", { key: '9d732c39097bfe0c0703814101eda41944131912', name: "label" })), "\u2060", h("dso-icon", { key: '48560f1f969bfa4847f52ecb0d3853b6eeb74f97', icon: this.icon }))), !this.icon && h("slot", { key: '34a397b2ace1ff4044d9357054c5c832d36f7ff9', name: "label" })), h(Tooltip, { key: '1bd0f751ae7665ac41ed2417cabd292b13c931d5', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '4ffcef2a061513cab95768ef7484eac3176c0130', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '5d2ed386147bd59730e19aec64828c697dfe3b51' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/ozon-content.css

@@ -736,21 +736,7 @@ button.dso-tertiary dso-icon + span:not(.sr-only),
 button.dso-tertiary span:not(.sr-only) + dso-icon,
 label.dso-tertiary dso-icon + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-}
-a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
+  margin-inline-start: 4px;
 }
 a.dso-tertiary dso-icon,
 a.dso-tertiary span,

package/dist/collection/components/ozon-content/ozon-content.js

@@ -33,7 +33,7 @@ export class OzonContent {
             annotated: this.annotated,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: '1927b2fc3ffe8dfa33268a2ed3a8980b2601b5de' }, transformed);
+        return h(Fragment, { key: '5a8d6af931890f48dff2a8233c4c2a54bb0fda93' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '67ada8aa839bc1bbf2b2f4287dafa1dd083fa948', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '5bb094e65e22665d8440bfa5963e447f049c3142', class: "panel-heading" }, h("slot", { key: '3c45923be0acb79a9ae9490c258ba3451d4ed22c', name: "heading" }), h("dso-icon-button", { key: 'dc09ab8819ff3d9dd8ee17ef6cfec58b52ea1e23', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '58a2bf0c6ac622062d60842303d3648d595e70ff', class: "panel-body" }, h("slot", { key: '04fd70c30319215c827fed78fe3be42a3a76d608' }))));
+        return (h("div", { key: '8fac01bb43014a44a749a1d45f9e679c20594737', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '1d713c9c888cee755e71683967ff0e377fc624c9', class: "panel-heading" }, h("slot", { key: 'dda8556dbe5e8fa093ff11887b1d27eb7f9acb10', name: "heading" }), h("dso-icon-button", { key: '41210da716ed386c9161ec56dfed61ba001f2888', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '65678bbe11a0e341422356e9a610f5498a849212', class: "panel-body" }, h("slot", { key: 'ef324ca8986e9e85b1e7201eec0f613ab8141102' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '04a03ddc2aec20e38f7de8a2195a93435e1a1f03', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c267438b6fdb1f28c5ed8d8a249f97a25134a6bf', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '48bed56012a2ed540aeee5cc3455b53e11406bc2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '3f0a73e4b3f6a145c07147b86e64789f532a3f49', name: "symbol" })), h("div", { key: '184289023c49d898a3fba857528c78543d896fa6', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '262ed6cc2fcd856ed5c2ad9242a2104b80b75c5d', name: "meta" }), this.interaction !== null && h("slot", { key: '1a3da7c4ac5e66724301e37aa07334d3f07dbaad', name: "interaction" })), h("div", { key: '391825de86e308361ba4496a9dcd885fc1354ad1', class: "dso-plekinfo-card-content" }, h("slot", { key: '5064056cbbfee42319f27e62edf7a0d6dee08fa1', name: "content" })))));
+        return (h(Host, { key: '437d4a33a0e211aadf0dc8bcbc7a496da9397248', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '9f1fd4476439c0ef2615ef833d72c616f1cc6a93', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: 'b94b3600602cdeaf62bc27db494e9f072ecb1e32', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '0baef3101fbc038d44bedb0ba8b088f4d60c57e3', name: "symbol" })), h("div", { key: 'bdb88b0aa83edf3290dc6caf9a37f46a46aec59c', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'b8f6cf68630a0f47c1fa359c840428693686bc62', name: "meta" }), this.interaction !== null && h("slot", { key: '7b161f07954e118fbfca5d0ba08abe3192dc74cd', name: "interaction" })), h("div", { key: 'a512be16ff20690a3e391784b8fd503c5f913b5d', class: "dso-plekinfo-card-content" }, h("slot", { key: 'c834eb19244f613204d77953dc604668b5470b7b', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: 'e402d0ec2c2b45b293c8f26902934a2793785f11' }, h("span", { key: 'b7ece49dcb89895db3481e434b560d39043e1ba4', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '09ee99d87723c31afe6dbb2c0649956237ee61d9', icon: "spinner" })), h("span", { key: 'a80c70df92ed32cb10dbd723022e299a8bea33fe', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'b704af2a0e3f0de7de1d80789a6f709163c888d3' }, h("span", { key: '64a093e0ca5fc8537fa46cd2d9e0e4edcd7d54ad', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'b3c2bf36581157070ee8730533cc2f875008c246', icon: "spinner" })), h("span", { key: 'f7670e47fc323563d694d575306abee23e99fb02', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '51ea303051a8e3ab5e406390872be0dcb7648bc3' }, h("div", { key: '2857e9d69cfe614abc8a0c8e8c6b62ad0f350a04', class: "project-item-header" }, h("div", { key: 'd203ee91ffe4a45dabacc80697e6f93fbe7220c3', class: "project-item-title" }, h("slot", { key: '509814470a58601a8fa0851c2fec38f3ad74d990', name: "title" }), this.label && (h("dso-label", { key: 'a38f0be207e4d31fae870f10bb04534c88f9e58e', status: "error", compact: true }, this.label))), h("div", { key: 'a08754ab2b09bf45977d977999cea844c9f75ccf', class: "project-item-actions" }, h("slot", { key: '702756f5fe1746d325027b0993ee18b3d2bc624a', name: "actions" }))), h("div", { key: '53d5ebd9895697b6e1227b26e4461b3c9830221c', class: "project-item-info" }, h("div", { key: '1140f2c0c8b3ef5c7bca5bddf1a2c430bea57ab9', class: "project-item-progress" }, h("slot", { key: '564f3e4d3eb5ba3bb8f98bce6603798b3ea28b04', name: "progress" })), h("div", { key: 'e20ddc7a8dc4fbdb60bfd2278b27b7c89c020fa8', class: "project-item-status" }, h("slot", { key: 'd8ac3b2df80b4cc24ff3f011b66b64108d0bce6b', name: "status" })))));
+        return (h(Fragment, { key: '45871b523685ebd7853b0ce31a7603fded861378' }, h("div", { key: '9624e80d73a5921660b2073a16a5921967a8d00f', class: "project-item-header" }, h("div", { key: 'af01b343a5a3bf8b5a8e7cbb80bbfaa22e1e554a', class: "project-item-title" }, h("slot", { key: '7c0cf1ce893fa4059a18393157d0cb6c33600d7a', name: "title" }), this.label && (h("dso-label", { key: '95a66a8617d79966c8c99b6306e6340b4c106fb8', status: "error", compact: true }, this.label))), h("div", { key: '8ae177b7420a0066fa82138a949ee3c764a7ddfd', class: "project-item-actions" }, h("slot", { key: 'aadf3ebbf05ce3b0fd91844870abf0c6c04913f8', name: "actions" }))), h("div", { key: '5c9ae37b5fc857f5a08398be04429181c0ee2a02', class: "project-item-info" }, h("div", { key: 'a2473acd2492c6e512a81bc675f8e7c9d64f38e3', class: "project-item-progress" }, h("slot", { key: 'd2b9c40914b6d920531dcd6230f15027413d6218', name: "progress" })), h("div", { key: '8970e4b1e91e7d26e26ca3cb45554ab4053b0a96', class: "project-item-status" }, h("slot", { key: 'edaf1a22822b1ba3d97e78bd0b04428eb962ffe0', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -53,7 +53,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '8810a98831ec68281fdb4b932207a58a6cdb63da', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd9605668d6f91bba83aeb69abadf099387d7c72f' })));
+        return (h(Host, { key: '035e0fbd46df2b7bb17eaa4341082f1d242a5155', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '25bb0eb9de92fcf9b95a2c0a0bb642788b625946' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

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

@@ -106,9 +106,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: '39886c77763609df1091051fbb068bf85e46b50d', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'd68080f2402ad6fa0f002f791efa7500206a3668', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: '7b93ceaa980dcc36ee2174a8375db7fc3565174e', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'cc1a6675b18fc6cceefb8f7b5c7a2204a4ba75d1', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: '459ded76d0d5876c6fe5d326da81dd901a5f9e25' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'a2b0dd1d02d2a11a4b6bac4a5d87dfcc585accf3' }))));
     }
     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: 'f5177c3667563f988ee7325755871f6e1af4d2ee', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '34c467709db2058c287c30c90e87c3f7d4cad523', 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

@@ -48,7 +48,10 @@ export class Selectable {
     }
     render() {
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '95f3d9e70e5e84af47aaeb22717b24e512f60b69' }, h("div", { key: 'b476892628f8d31b7d7c02943b176d4556fdfc3d', class: "dso-selectable-container" }, h("div", { key: '34a9f1229fc3dfad9680fed68e96a8cde4462d0d', class: "dso-selectable-input-wrapper" }, h("input", { key: '63bbaf3a1c42c4cf7a5ea5096b947d7b61d2e01c', 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: 'af36de898ee7482871fb01d6d9efa21f0eb5d500', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '40624e717f271af06aee5ba7fc5d272483929750', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'ffa7a4635c7334676988c52e48d5c7960a38f62a' }, h("slot", { key: 'f47c40ef36bb8b84ef55de6cdcc80a9f50b17e0a', name: "info" })))), h("slot", { key: 'a72b777da30dfbea0124a3b75adf0280128dd0e5', name: "options" })));
+        const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
+            .filter((value) => value !== undefined)
+            .join(" ") || undefined;
+        return (h(Fragment, { key: 'e6e672ee66f8a47952dd5a74834c3757ee47aa7d' }, h("div", { key: 'd8c39c71eb6e4e1427494226d77f714671e35b8d', class: "dso-selectable-container" }, h("div", { key: '174f6e75a3c6440d48f75076f0edaf31a9190c44', class: "dso-selectable-input-wrapper" }, h("input", { key: '1b87c90cf5291788c5e33749ef562c90f5df5ad2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "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: '859a37b1dd61f8cc2e01e6fa0430452a6b0ba29d', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '8bc3861cf7b3a95eb97922ad71bc62964e7d5f5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '0ec96182bd8e10616a74beb6a67f70248b59b8b2' }, h("slot", { key: 'e9baed2501c400f2a40cf6f5c98f40aefeb3740d', name: "info" })))), h("slot", { key: 'a90703246e7e0bd0aa5f8472cb262eb031ef6c98', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -179,13 +182,32 @@ export class Selectable {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "To link this control to an element that describes it."
+                    "text": "To link this control to the Info that describes it.\r\nThe property `infoFixed` should be set to true.\r\nThe slot `info` should be filled.\r\n\r\nImplemented with `aria-describedby` on the `<input>` element; works alongside `errormessage`."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "described-by-id"
             },
+            "errormessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To link this control to an element containing an error message.\r\n\r\nThe value is the id of the element containing the error message. Implemented with `aria-describedby` on the\r\n`<input>` element; works alongside `describedById`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "errormessage"
+            },
             "labelledById": {
                 "type": "string",
                 "mutable": false,

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: 'e12cfaf0004c50f66121104c124548082d521a8c', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'da2e4f459b2ceb176fa8f88484943b3a00809246', icon: "chevron-right" })));
+        return (h("a", { key: 'b1d674b864fd216fcb084f4b7fedbc2f227c4278', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'a258bc4b68fe756513fbf1f8b41f20504a289439', 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: '7291becfe58cfdec1c9e21a50eef04b5dff72339' }, h("button", { key: 'c42b7de446e15d26d311e8e2b85bd61afacf0137', 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: '93cebbaa53dd978b48ba60863749856f03a5204b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'fac4d1de935a905682dfc2b7ac3800c81c012881', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'd40be60369da898f6cc08813bc97326959affe31', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9d57223f2aa69d6e1b739c650afe34bdaae4c32f', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4542bb62c22b73aac39bf2e87a740e8d77d43780', htmlFor: this.identifier }, h("slot", { key: '1110114d4b96e4f9b87182bc7b8cc4805d07705d' })))));
+        return (h(Fragment, { key: 'f29e98abd199c5131882103b2baeebd9d55715e2' }, h("button", { key: '768b778d2a35dc6fb5293c4a6947d6fb6de62239', 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: '287c4a04cc8d9bae3be93a687366f482908ce75d', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'e60a6542a1f33a120f5f60ef27e44bb18d999fb3', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '62f24316cf0a6fc9d7b2bf7a3eb2ba05e355ebf3', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '225a274cec5a2848522935d4d471d76c1383b5dc', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'e63be2ae88ed2c4de80410fb262cb46439679425', htmlFor: this.identifier }, h("slot", { key: 'eac4fbd7ee0590be61ef17ad4148c92ee6e35e92' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '6ca6b26ed474a78d633d09e35804b79f9d63b3d9', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'df15ccd200b3cf97986061649d30cf0c29eacbcf', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'aa873e2a3a66edd83cb2201b4b67a6b870ae7cf7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'f06e716b611998ee3041b120e3ab9bcc2ac9daa3', onSubmit: (e) => this.handleForm(e) }, h("div", { key: 'f776d80c9821095bc2d57c473ca41067ed337040', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '8a5c8731ebe09e5304ca55d41d2f56dd730a9152' }, "Heel moeilijk"), h("span", { key: 'ed77602612e229c6297192d74ce1bd54663b4b53' }, "Heel makkelijk")), h("div", { key: 'b056b09f7d8d371ffd5dc4db9e605680befa4d4b', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '3d6733ce56f73b4e35b3f5d68388bd22f6ef4450', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'f93cbf6d816962a848f15b40055a8b9ff3f26fdc', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'e83390a76e6d45fc72a9c9f7d45e6650941c91b9' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: 'c671091557cb1096c47f88e99eb7e6bb42838479', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '952782116562f822ba8a8788104a9817739b4601', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '67fb62008f260e99c956709ca2cea83f22121460' }, "Heel moeilijk"), h("span", { key: 'eacf518d23c1e618162ce116890bcae4c28df240' }, "Heel makkelijk")), h("div", { key: 'bf9a0977e6e7508b362680aa49f78b9319ce7915', 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: '01f22023d3f1b066b6d6707cc7fc6185e2263cad', type: "submit", class: "dso-secondary" }, h("span", { key: '2dd146d805c4f096cc0a25f264e4b2fd7d9b197c' }, "Antwoord verzenden")))));
+        })), h("button", { key: '1cb51daa334ca994ede7ea2bbc74534635f42921', type: "submit", class: "dso-secondary" }, h("span", { key: '044a0844ae775fed12db6089e76dd449494ad84b' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }

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

@@ -736,21 +736,7 @@ button.dso-tertiary dso-icon + span:not(.sr-only),
 button.dso-tertiary span:not(.sr-only) + dso-icon,
 label.dso-tertiary dso-icon + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-}
-a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-a.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-button.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-button.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-button.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],
-label.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
-label.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
-label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-inline-start: 0;
+  margin-inline-start: 4px;
 }
 a.dso-tertiary dso-icon,
 a.dso-tertiary span,
@@ -1097,8 +1083,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --_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

@@ -46,7 +46,7 @@ export class Table {
     render() {
         const caption = this.host.querySelector(":scope > table > caption")?.textContent?.trim();
         const dialogLabel = caption || "Uitvergrote tabel";
-        return (h(Host, { key: 'a95e11e99ecccb0a19db29df6bb54ade6dd5732c', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '232ede1b0f1a58f9801c50652def10551c6641b4', 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: '207e7807c5bc17b52701c617f41cff0f9e239c32', "is-responsive": this.isResponsive?.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '6270bc4b55067cfa800b57c688e599f90db426eb', 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;

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

@@ -60,7 +60,7 @@ export class Tabs {
         this.mutationObserver?.disconnect();
     }
     render() {
-        return (h(Host, { key: '3c676d294bdb129c9321902ff081954c4551bc12' }, h("div", { key: 'aeb78fe7afdad4e4c4217eed202c50a3eb770a29', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '41bcc4eecb74bd8b5fd873ab59efd891e643bd67' })), h("div", { key: 'c17061b7b3e98161610b1e666ee0c6a0a1b3e27c', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'e45b459c3a90976f90bf7b24f5f86a27fa83ebe2', name: "panel" }))));
+        return (h(Host, { key: '378e4fa22a57c3379ace6d0329d0dd2ffd35c04a' }, h("div", { key: 'b791083acc1c6b614abc8b9c40abcd63df8bf0ba', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '29c8e59ef344c9a3c9fdc3b5e41e8b6700434a17' })), h("div", { key: '7f2c1d9a3a5d712807336d925d262ffac3ec23c7', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'dd4d5314dd77338bb217b01563d629259bbfb2f7', 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: '3b509399cb18265b87630898b9b7f875f4585c85' }, h("dso-icon", { key: '6fcf4915bcab665a27ef1a3cefeb89f692b22d4b', icon: "clock-outline" }), h("slot", { key: '38ab4337882a2b43b5d6a09643b18ca2239f196d' }), h("slot", { key: '13be4d3ee34a92b4595f251069950ee1ac62bb68', name: "button" })));
+        return (h(Fragment, { key: '4bde48340c627e60f8655d71e11d358ce3706f63' }, h("dso-icon", { key: '33020e99bfc7d8fba1f799c0ea4324c417bd64d1', icon: "clock-outline" }), h("slot", { key: 'be1174fc29ad9eae607fbced2dc2ffc9874e2973' }), h("slot", { key: '7b6ff42a67dcaeb757c24473cb3c8caa4456c90b', 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: '6f0adb2c86ef41db812225635aaf4572a9b66ee3', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '608e0dabdd84836113adb9b7f7fb6e216d748d05', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '69e082b52547d254f1d183ea9fc72b63667b2b3f', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: '7d17b7f5d9711e6f055d644c3082bbc0df74830d', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: '49ee9aa97a61c765a296b58ace247aac181c0841' })))));
+        return (h(Host, { key: 'e08707c05d17ee0a049dd74d6524c0b26b1dc639', class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { key: '12baf3facd788c17da5019ad2f01512701933e0a', class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { key: '80cb136e9339aa6132528110cc98472a0ed1b0a5', "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { key: 'ed2853f256c5a66d1ef77a157b9f461e379fc658', "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", { key: 'b5365e342858376bc75ed209c9a458fd05b05b49' })))));
     }
     activatePopper() {
         this.hidden = false;

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

@@ -170,7 +170,7 @@ export class TreeView {
         return false;
     }
     render() {
-        return (h("div", { key: 'f2a4a8eefce8c9a30941491babe5de9693b0c45d', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '8f0575f2b75c1f273177987ca4692fe64878274e', 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: '045da3d6b0bc4381b3e439890e7f8db679fc8f9a', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'de2140f76fd20b0fa2bf85e60a79dede60a62082', 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"; }