@dso-toolkit/core 99.1.0 → 99.3.0

package/dist/collection/components/accordion/components/accordion-section.css

@@ -53,6 +53,7 @@
   font-family: Asap, sans-serif;
   font-size: 1em;
   font-weight: 600;
+  letter-spacing: inherit;
   line-height: 1.375em;
   margin: 0;
   padding-block: 12px;

package/dist/collection/components/advanced-select/advanced-select.css

@@ -32,6 +32,7 @@
   line-height: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
 }
 .active-option.open {
   border-radius: 4px 4px 0 0;
@@ -478,6 +479,7 @@
   line-height: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   border: none;
   text-align: start;
   background-color: #fff;

package/dist/collection/components/autosuggest/autosuggest.js

@@ -77,6 +77,7 @@ export class Autosuggest {
             this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : "");
         };
         this.onFocusIn = () => {
+            this.input?.select();
             if (this.suggestions && this.suggestions.length > 1) {
                 this.openSuggestions();
             }
@@ -133,6 +134,21 @@ export class Autosuggest {
             this.closeSuggestions();
         }
     }
+    handleSearchBarButtonKeydown(event) {
+        if (event.defaultPrevented || this.loading || (event.key !== "ArrowDown" && event.key !== "ArrowUp")) {
+            return;
+        }
+        if (!this.input || event.target === this.input || !this.isEventInOwnSearchBar(event)) {
+            return;
+        }
+        event.preventDefault();
+        this.input.focus();
+        this.openSuggestions(event.key === "ArrowDown" ? "first" : "last");
+    }
+    isEventInOwnSearchBar(event) {
+        const searchBar = this.host.closest(".dso-search-bar");
+        return !!searchBar && event.composedPath().includes(searchBar);
+    }
     onDocumentClick(event) {
         if ((this.showSuggestions || this.notFound) &&
             this.listbox &&
@@ -486,7 +502,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '319f44b80807f98e51decd2a275375216c28363d' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '27cfa8bc81482dca996532582d210a0edcee11b2' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element), _preventFocus: true }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element) }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||
@@ -722,6 +738,12 @@ export class Autosuggest {
     }
     static get listeners() {
         return [{
+                "name": "keydown",
+                "method": "handleSearchBarButtonKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "click",
                 "method": "onDocumentClick",
                 "target": "document",

package/dist/collection/components/document-component/document-component.css

@@ -5,6 +5,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

package/dist/collection/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.css

@@ -13,6 +13,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

package/dist/collection/components/dropdown-menu/dropdown-menu.css

@@ -13,6 +13,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

package/dist/collection/components/header/header.css

@@ -107,6 +107,7 @@ div[popover] {
   font-size: 1rem;
   font-weight: 600;
   line-height: normal;
+  letter-spacing: inherit;
   position: relative;
 }
 .dropdown-menu button::after {
@@ -189,18 +190,22 @@ div[popover] {
   background-color: #39870c;
   color: #fff;
 }
+.dropdown-menu .dropdown-menu-options ul li a:hover, .dropdown-menu .dropdown-menu-options ul li a:hover:visited,
+.dropdown-menu .dropdown-menu-options ul li button:hover,
+.dropdown-menu .dropdown-menu-options ul li button:hover:visited {
+  color: #275937;
+}
 .dropdown-menu .dropdown-menu-options ul li a:hover,
 .dropdown-menu .dropdown-menu-options ul li button:hover {
   background-color: #fff;
-  color: #275937;
   text-decoration: underline;
 }
 .dropdown-menu .dropdown-menu-options ul li a:visited,
 .dropdown-menu .dropdown-menu-options ul li button:visited {
-  color: #191919;
+  color: #fff;
 }
-.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus-visible),
-.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus-visible) {
+.dropdown-menu .dropdown-menu-options ul li a:visited:not(:hover):not(:focus):not(:focus-visible),
+.dropdown-menu .dropdown-menu-options ul li button:visited:not(:hover):not(:focus):not(:focus-visible) {
   color: #275937;
 }
 .dropdown-menu .dropdown-menu-options ul li.dso-active a {

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

@@ -9,6 +9,17 @@
   box-sizing: border-box;
 }
 
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  border: 0;
+  overflow: hidden;
+  clip-path: rect(0 0 0 0);
+}
+
 ::slotted(span[slot=symbol]) {
   background-color: #fff;
   display: block;
@@ -43,6 +54,8 @@
 }
 .legend-item-right-content dso-slide-toggle {
   line-height: 1;
-  margin-inline-start: 8px;
   padding-block-start: 0 !important;
+}
+.legend-item-right-content dso-icon-button {
+  margin-inline-start: 4px;
 }

package/dist/collection/components/legend/legend-item/legend-item.i18n.js

@@ -4,6 +4,8 @@ export const translations = {
             delete: "Remove layer",
             disabledInfo: "More info",
             options: "Edit layer",
+            optionsAvailable: "Edit layer button is now available",
+            optionsUnavailable: "Edit layer button is now disabled",
             makeActive: "Make {{label}} active",
             makeActiveDefault: "Make active",
         },
@@ -13,6 +15,8 @@ export const translations = {
             delete: "Kaartlaag verwijderen",
             disabledInfo: "Meer informatie",
             options: "Kaartlaag bewerken",
+            optionsAvailable: "De knop Kaartlaag bewerken is nu beschikbaar",
+            optionsUnavailable: "De knop Kaartlaag bewerken is nu uitgeschakeld",
             makeActive: "Maak {{label}} actief",
             makeActiveDefault: "Maak actief",
         },

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

@@ -1,4 +1,4 @@
-import { Host, forceUpdate, h, } from "@stencil/core";
+import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 import { i18n } from "../../../utils/i18n";
 import { translations } from "./legend-item.i18n";
@@ -36,9 +36,12 @@ export class LegendItem {
         return (h("dso-icon-button", { label: this.text("delete"), icon: "trash", variant: "tertiary", id: "delete-button", onDsoClick: (e) => this.dsoDelete.emit({ originalEvent: e.detail.originalEvent }) }));
     }
     renderViewMode(hasOptions, accessibleLabel) {
+        if (!this.activatable) {
+            return [];
+        }
         return [
-            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", toggled: this.showOptions, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
-            this.activatable && (h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })),
+            h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) }),
+            hasOptions && (h(Fragment, null, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.active ? this.text("optionsAvailable") : this.text("optionsUnavailable")), h("dso-icon-button", { disabled: !this.active || this.disabled, label: this.text("options"), icon: "more-horizontal", variant: "tertiary", toggled: this.showOptions, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) }))),
         ];
     }
     renderRightContent(hasOptions, accessibleLabel) {
@@ -57,7 +60,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '6e91a31c332be4e64344129f9a55b494362dc864', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '2df3e538658684f067f514cdd4ca34ee889c1048', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '6b8ecd2ba1ea41963d3967700685e52bc30cf6cf' }, h("slot", { key: '36668d6047e34c91505ee305cd32fade84c02542', name: "symbol" }))), h("div", { key: '47a0733a9c62fc325305e6d26c93483dc68f525b' }, h("slot", { key: 'a9b9991c904252ce3cfa4f302af0e8895ed1e52e', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '3ac075632a7288f7149067d50307ac8ff7d47456', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '98891613b35a41fcfbdef60ef1680261b2522b23', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'c60ac27647e62f70795bb71d2bc189bfb0d82502', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '726712b7ae2018348e247776de42cd649d762d5f', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '44e1d6a86ef49a88a59cf107e1c7ec9a59748a7b', name: "options" })))));
+        return (h(Host, { key: 'df30f74d55cc77242dd6267a7c41cdddc10e17e0', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'cc6af5ca94841169aa8e79abcf94c7570dabb2cc', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'd6ffae918a8cd36041a7af742fcc61e5db64a3d9' }, h("slot", { key: '3405be5254e5b39c6931b15a8b678720b313d353', name: "symbol" }))), h("div", { key: 'cc6c17f5c8e5b7ab4c95ca778ab9b4f15eecf5f7' }, h("slot", { key: 'e23881446ce219a1c2132b098383e36b45772a5f', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '30e37a1e3e9039a515e6c6e97503b968466cfc26', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '5b04a862380380febc92818bde9fb983129c7e82', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'f4804b908b16ae8e9cd19a27a2370cdedd5199b3', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'c45e84d5f3b2c9369fe62158e7d97dcf09ff6943', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '15cbfda78a1b8ff642086ad62c64a6c8f35cf56d', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.css

@@ -27,6 +27,7 @@
   font-size: inherit;
   font-family: inherit;
   line-height: inherit;
+  letter-spacing: inherit;
   background-color: transparent;
   cursor: pointer;
   display: block;

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

@@ -2,6 +2,7 @@ import { Fragment, forceUpdate, h, } from "@stencil/core";
 import { clsx } from "clsx";
 export class ListButton {
     constructor() {
+        this.focusIncrementButtonAfterRender = false;
         /**
          * Whether the List Button is checked.
          */
@@ -27,6 +28,10 @@ export class ListButton {
         if (!this.subcontentSlot?.hasAttribute("aria-hidden")) {
             this.subcontentSlot?.setAttribute("aria-hidden", "true");
         }
+        if (this.focusIncrementButtonAfterRender) {
+            this.focusIncrementButtonAfterRender = false;
+            void this.incrementButton?.setFocus();
+        }
     }
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
@@ -38,6 +43,9 @@ export class ListButton {
             if (!this.isNewCountValid(newValue)) {
                 return;
             }
+            if (direction === "decrement" && newValue === 1) {
+                this.focusIncrementButtonAfterRender = true;
+            }
             this.dsoCountChange.emit({
                 originalEvent: e,
                 count: newValue,
@@ -65,7 +73,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '442edba27a99b9d35c98e98d41962e94d0b8e054', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '77c14a46db6fb4c5c35095a8f10a28339aedffa7', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '5fb0f6d371f23008bfd162f40b96949c9e710d23', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '866575af2f598d1795bad098778153ccd84f8ff2' }, this.label, this.sublabel && h("span", { key: '35ec4dda7f219b166472ec5bb261c5be73ce0b63', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '9cf84fe5826746df38d8178a6740a680a4ef4cbd', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '83175e372d04d1a455dbad1e434f33e541f2f52a', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '999f3bca2e71d984efdf8082dc5c28bfd6aceef4', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'a69216cae841406387873c7558e52f11be674663', class: "subcontent" }, h("slot", { key: 'c7bdb35d41feaaf5684b9f90dda3d87716e58af9', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '7921e61e0a6c5f471603c7ce9cae81cd0d8b8356', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'bee2a17e37f9cdfb341c5c7a3ad497519d58c9bc' }, h("dso-icon-button", { key: '75fffae9c8f3eb1a5ac63fa9f351dedefbeaf600', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'b7f6582d5f81f3979423246cbddbb4e5ff1e4842', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '3a889058c9710ba9839e4b686e6494e4a3cbdf92', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '28dc8cacf3635cf83f3bc526cce61870c16213d7', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '80788b4dae346a6ca92c37d3a23f58993a6f061b', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '123ae2c35a23673eeaa39a42e021edabb4b240a2', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'a882a847c1e0a0da71d45afa5f6bdca506655c9d' }, this.label, this.sublabel && h("span", { key: 'c87a1d5a74e8f76943943f21eda4ca70977a120b', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '8f11fd1a6285c3ef92d61679c2f28b4875ddbe5c', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '987ab02881c3e7eaf6efb1a16fbbd75855be2959', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'f58beece16efb79cf8c169fd48430ad64be5fe56', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'f4c6f59c9a327ac075608952ab81c9f38c886464', class: "subcontent" }, h("slot", { key: 'e0d025b91a7f60170dce5975a31926673e00f6f1', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'ce9f805f4cca58986ea9a1c18b5c6f982325b4d2', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'baa2dbcef366d7da042161dacdfe6548aa2e7667' }, h("dso-icon-button", { key: '98c240428924462f07caabbd3187409c08147062', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '4ce7451b2740c43259a610077a7d37022607764f', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '340c4db349360e7adab309d84fe02a40795237ac', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'd1365a96fb41df03e35ce8687d994d102e338f84', ref: (element) => (this.incrementButton = element), label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }
@@ -97,7 +105,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "sublabel": {
@@ -116,7 +124,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "sublabel"
             },
             "count": {
@@ -135,7 +143,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "count"
             },
             "min": {
@@ -154,7 +162,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "min"
             },
             "max": {
@@ -173,7 +181,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "max"
             },
             "checked": {
@@ -232,7 +240,7 @@ export class ListButton {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "subcontent-prefix"
             }
         };

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '29bfc8cd84b58cb4212e83458128be6fd0a76996', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'd9b8e664223d4763b318ca259cd3090ccc3b0a96', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -26,7 +26,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '4844cb7dc1f22b46db47516b2482c67673eb70f7', class: "form-group dso-radios" }, h("legend", { key: 'b0acfbdfe97f083ed88bfdc12a3e5da85f71e7c7', class: "sr-only" }, "Achtergrond"), h("div", { key: '6cf325954514f6279761f99ade9f6297fd0f2931', class: "dso-label-container" }, h("span", { key: '924198ae3890df319ce186a44b44d59640b21d1e', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'fc609656c7c56a80d192ad7f68048a63b238777c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '26e0f25a4b9d26dfe2ad804c65253a08205909d4', class: "form-group dso-radios" }, h("legend", { key: 'fe913ce00c8ace09909deffc9e7e39a8891fe7f9', class: "sr-only" }, "Achtergrond"), h("div", { key: '7ecc76a72df6571c43902b8431bbf579259204c7', class: "dso-label-container" }, h("span", { key: 'abd27ffee2fa309cf2248a8f11a3e20e2053a1b2', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'fa9c69b1cd28e2646c8a92cbd6550d39c1ba3113', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-controls/map-controls.css

@@ -5,6 +5,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;

package/dist/collection/components/map-controls/map-controls.js

@@ -102,7 +102,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        return (h(Fragment, { key: 'b5613c0128da6dc889d909f0c8b923e581c72589' }, h("dso-icon-button", { key: '444f1e007a61b852699d40965117c6f083eb416b', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: '50c496a3d31f767ed324341d9d7f83cafa6a9246', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '912209fd160ae1e979e15bef3f0a020f5b232e5b', icon: "layers" }), h("span", { key: '79b628ca8331bef70b8c15576176895583edd8bb' }, this.text("layersButton"))), h("dso-button-group", { key: 'c690b9a34bef0d7a68bf38b22abd1707d9dc157b', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: '23a699de08abec023e14fee7aaa82d88f29d26ed', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: '2b428ed044a22b08618c885ca96bc02efc3725a6', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: '92f97c6adc3e466ce3c8dfbcbf29e27a2e52c4c2', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '405d312a529d19a98dd00696d92c077db17ac19f' }, h("h2", { key: '30c65729ec16d6cee9c164a6bd5b575e512110a7', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '00e944ddbf73a462704c048d740bbae2ccbf0aff', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: '4caa8628d4af029f69f887b4434365c6cd9a5fd0' }, h("div", { key: '71f4998c5f3a8ac61bf13141648b699ead6eebec', class: "content" }, h("slot", { key: '7d2e87c33d999cb0f05594c7d2114896e991da4d' }))))));
+        return (h(Fragment, { key: 'df742112e2025fdbb83de9414b0d6ca52d997826' }, h("dso-icon-button", { key: '213c786fdd190c1c7d176d897cdce2ddce007f21', label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, tooltipPlacement: "left", class: "toggle-visibility-icon-button", onDsoClick: (e) => this.toggleVisibilityInternal(e.detail.originalEvent, __classPrivateFieldGet(this, _MapControls_toggleIconButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleIconButtonElement, element, "f")) }), h("button", { key: 'e08ce9dbbc17469f0cb103e38a6603b2f6752725', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open, onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'e22486c5b4ec4de15d389d4349c2c987cbabd760', icon: "layers" }), h("span", { key: '876c81f18078ad0f316d1d33883fd01aba0c1b65' }, this.text("layersButton"))), h("dso-button-group", { key: '411ee5039d8e818cbca28ed237d0d5c54ab0c463', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'ee2f5435b15e91beef74f20ade813801c2237b32', label: this.text("zoomIn"), icon: "plus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomIn.emit(e.detail.originalEvent), disabled: this.disableZoom === "in" || this.disableZoom === "both" }), h("dso-icon-button", { key: 'b51b4d38ecf01cdf1f414e0699c1809e86b7ff87', label: this.text("zoomOut"), icon: "minus", variant: "map", tooltipPlacement: "left", onDsoClick: (e) => this.dsoZoomOut.emit(e.detail.originalEvent), disabled: this.disableZoom === "out" || this.disableZoom === "both" })), h("section", { key: 'ad07928c1d78c7e562f792bba2b6c18ba401ce75', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '462993fe80b521ea3c032940087a1240040d08ed' }, h("h2", { key: 'edf05e60556acaf9295f4a5f53edfe5f93759c7d', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: '8883ececf16dee517102d9c27ca0cde32f412c78', class: "close-button", label: this.text("hidePanel", { title: this.text("title") }), icon: "cross", variant: "tertiary", onDsoClick: (e) => this.toggleVisibility(e.detail.originalEvent), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeIconButtonElement, element, "f")) })), h("dso-scrollable", { key: 'ee13b3dc2596f06e99bf0e48d1f080018f1bedca' }, h("div", { key: 'e79644ff58ff6408cbc2dd0e3f8cef853807619c', class: "content" }, h("slot", { key: 'c721808970823379205241f527b917ead66f9d15' }))))));
     }
     static get is() { return "dso-map-controls"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/components/map-layer-object.js

@@ -16,7 +16,7 @@ export class MapLayerObject {
         };
     }
     render() {
-        return (h(Host, { key: '4a130bd1a1101dcad1e43c85e726bc4762cc2d16', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '8bde3a870b9f63b69b4a8b285ae8c44f4f517d75', wijzigactie: this.wijzigactie }, h("div", { key: 'af2e838d91f3fd8fd849b42d560a59f95bc24e5c', class: "map-layer-object" }, h("div", { key: '28e9e187fae2a6048b21e11156907ca0aa537ea8' }, h("slot", { key: '2fb126fd291605cdc6a09d5ca0d009fc80900b74', name: "symbol" })), h("div", { key: 'd087db42616613e59a3e2a41b494927104e8fa78', class: "map-layer-object-heading" }, h("slot", { key: '398ad1c5b2439277433426823ca657937a1fd6c7' }), h("slot", { key: 'a9574ab95912476198ae33632ba162eeacd55826', name: "label" })), h("div", { key: '3dc1f9f6367333ad6153ddbc6bcb7727dc24ddd0', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '5e7c704d4ba3723bc8468924666e56b057b95c24', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
+        return (h(Host, { key: '7fbc1ef74509e1b4f80d56905fa764a34a333740', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: '86a25068d41d0113456e7705b522d343e7642127', wijzigactie: this.wijzigactie }, h("div", { key: 'aa6678b819aa10f8a1c2cc8bca459aa95deac593', class: "map-layer-object" }, h("div", { key: '38fbefa271b39f82918dae41eb66b58492ba5574' }, h("slot", { key: '95385dd080311a6601799a49451fbed2830d8203', name: "symbol" })), h("div", { key: 'e35e66f79ee298235be738d265017f5cf1564559', class: "map-layer-object-heading" }, h("slot", { key: '2a99347bb68d8e5bffe168587042f3f601ac4456' }), h("slot", { key: '5105e4e49f5d644c70f09df20569ccca5c0e550a', name: "label" })), h("div", { key: 'b91932b72b31233927163885102039924098ad0c', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '9087cd162ea7434ee1d7f4b977cbb75b7a2ab4ef', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange }))))));
     }
     static get is() { return "dso-map-layer-object"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-layer/map-layer.js

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '5bfdcbb4e726f7a48f846bc26fd8364252c5099f', wijzigactie: this.wijzigactie }, h("div", { key: '291fb7fb2fcd0b1d44203a0dfb6bafaab9588e9f', class: "map-layer" }, h("div", { key: 'd08241709d892e3f77770a071fe9e9abe633610c', class: "map-layer-heading" }, h("slot", { key: '373fb22886af662822fcc8576103060037da6d6a', name: "name" }), h("slot", { key: 'b9157528d8d5503b93782a5e2c868e120ade98d0', name: "label" })), this.activatable && (h("div", { key: '76864f4729567483fc8a321fa17ae87b8bf2576f', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'ea81c871f370e53e07e9e93f2f491e7d4f2d8a17', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'e27fe106577b51607e9cd347f2a70101063be38a' })));
+        return (h(WrapWijzigactie, { key: '58b032ccf7677ede268d977e40284fce488001cf', wijzigactie: this.wijzigactie }, h("div", { key: 'dfa603d5ff4e738955330e539cb27c04a06eb361', class: "map-layer" }, h("div", { key: 'd5b744910ec3ffbf76a1bc5e06c7c8a2862d7d33', class: "map-layer-heading" }, h("slot", { key: 'e52c97abb2ffd3dbeb8a1691567499d5b03628be', name: "name" }), h("slot", { key: 'f81a9b8d10970365dbc4a6d9e335cca4e2db6bd9', name: "label" })), this.activatable && (h("div", { key: 'db93351178c6ff143098d07bc1efb4aab486f97c', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'ab49a0cfd4105c9133a1c50da4496fddee2550fe', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'a9b8d33ee9c50c461c136a392fd57f177f84302a' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-message/map-message.js

@@ -20,11 +20,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: '98874d9384751a63909661881b47e45c48064460', class: {
+        return (h("div", { key: 'c38f46748c57f3034e24cacaa91b5f792dab80dc', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, role: role, "aria-atomic": "true" }, h("div", { key: '879de5f62a08c908c2cb6e023a1cc054534abfbc', class: "map-message-body" }, iconName && h("dso-icon", { key: 'bddfe00fecdfa60884a456dd5193273a26b8f863', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '4eaab42391ac5d6f69f15e88e4226b34c132cf15', class: "map-message-text" }, h("slot", { key: 'e13b1386423352f0f4e60da14ad9454eeef9ffbf', name: "message" }))), h("slot", { key: '34ad7d7cc731b348d64cfb425728377c44888bef', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: 'ca8ee505450598fb4a8271fcd89a54b46d7ba1c3', class: "map-message-body" }, iconName && h("dso-icon", { key: '8de97522b21cd5138769c72d424724a9ae28a958', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '2c22435cc51763c2eb070d228bf1f7cd44d6b3a3', class: "map-message-text" }, h("slot", { key: '1a0dc7b8f5a5c1ffaaeffdbd5c0a74f3a6048640', name: "message" }))), h("slot", { key: '0c3387b08b5f8f0196f2d09bb6ac994cceace168', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-overlays/map-overlays.js

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '0a39e720ffb64020c4945522c9cf73c2ac34654d', class: "form-group dso-checkboxes" }, h("legend", { key: '2897cece9bec007a875eec269ed789583d75d5c9', class: "sr-only" }, "Kaartlagen"), h("div", { key: '5c08fc7d22478ddf09c4d4b655fbd7d8adc05967', class: "dso-label-container" }, h("span", { key: '9020955add0be098ba539f897133ce75c4369dab', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1d46b41897948867eed4b95f2feb81f7bee548e7', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'b875d9db957b7c85aff87f3ef79e90b65e20a548', class: "form-group dso-checkboxes" }, h("legend", { key: '31dcc45e2cb253ca78990d097a40fa23fecfeb37', class: "sr-only" }, "Kaartlagen"), h("div", { key: '9072cd6b8adb0fe47558e775caa34168cb10ff57', class: "dso-label-container" }, h("span", { key: '70f1ee5af74eddfb45b06e00692842c6222c5ec7', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'd7180472b4d9d63a652b00b6dd2a9382f888f450', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'e14eec6ad6de8fa15819ab39fb1830eb49a55b38', class: "dso-mark-bar" }, h("div", { key: 'e1d4c20bc0b5d73596ce9daa35eb271e1b812498', class: "dso-mark-bar-input" }, h("input", { key: '349d818a4be946b75177c7652de4de810e1ada46', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'c62c0fe8c75261d764cc9d82942f38b040dd4db6', htmlFor: "search-input" }, h("dso-icon", { key: '4baa4aa80cf1f28cc244883b39c1302e99930ae3', class: "dso-search-icon", icon: "search" }), h("span", { key: '888e55f0beb7a0c7aa7d75ccd81b21d0894d315f', class: "label-text" }, this.label)), h("dso-icon-button", { key: '29a349369cce850b7383262722e1912901d8c2e4', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'af99215c7547c8c56941775b94d6491e2ff322a2', class: "dso-button-container" }, h("span", { key: '7f9a71a536f903628d9108d1df3a5086efa0ec47', class: "divider" }), h("dso-icon-button", { key: '9319ba0b23ae0a15c195cb4e9f787528e0fbb706', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'f2b4107a4f482406348532a94a61d23b21f8a29a', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: '70b698aeedf87fbd9ffa1fe4a8143703a99fbd63', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: '7818d8f7762b007d1dbc90b657f9673ab42c0234', class: "dso-mark-bar" }, h("div", { key: '01a6513b3af2f365472421554c6a2442c8f61a73', class: "dso-mark-bar-input" }, h("input", { key: '1580d1b4d30542d1ff3b12dd0551249871db145b', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'd6d87a36588e949b524214fa45dda0ee7962a031', htmlFor: "search-input" }, h("dso-icon", { key: '5fa410193b67370970cda0690c574f482a47a95d', class: "dso-search-icon", icon: "search" }), h("span", { key: '001a6eb612430876e7757cbe98ba9efd326bf19f', class: "label-text" }, this.label)), h("dso-icon-button", { key: '7ae27f8d2a5be8bc0ae59f30e036a9089c0cebcb', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '3640ab6ad6b59223bd5fa02543e4eff19b25d7d0', class: "dso-button-container" }, h("span", { key: '580893adcea6d950a262e32911a1cfc9c16fb25b', class: "divider" }), h("dso-icon-button", { key: '16533f6d69a10f68b7c7773087ce8a8fe11bfa17', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: 'b70d11b9693c5204137fefac12660589d1f8a3c4', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'a55ad1bfb0d5cf583be81f83abc66fe64af4881a', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/functional-components/body.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Body = () => {
+    return (h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })));
+};

package/dist/collection/components/modal/functional-components/footer.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Footer = () => {
+    return (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })));
+};

package/dist/collection/components/modal/functional-components/header.js

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const Header = ({ modalTitle, closable, ariaId, text, dsoClose }) => {
+    return modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: ariaId }, modalTitle), closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: text("close"), onDsoClick: (e) => dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: ariaId }, text("dialog")));
+};

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

@@ -72,6 +72,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;
@@ -101,6 +102,14 @@ button::-moz-focus-inner {
     --_dso-button-after-button-margin-block-start: 8px;
     --_dso-button-text-align: center;
   }
+  .dso-modal .modal-scrollable {
+    display: flex;
+    flex-direction: column;
+    min-block-size: 100%;
+  }
+  .dso-modal .dso-body {
+    flex: 1 1 auto;
+  }
 }
 @media screen and (max-height: 380px) {
   .dso-modal {
@@ -196,6 +205,11 @@ button::-moz-focus-inner {
   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 .dso-body p {
   margin-block: 0 var(--_dso-rich-content-margin-block, 16px);
   margin-inline: 0;

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

@@ -1,13 +1,19 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { v4 } from "uuid";
 import { getActiveElement } from "../../utils/get-active-element";
 import { i18n } from "../../utils/i18n";
+import { Body } from "./functional-components/body";
+import { Footer } from "./functional-components/footer";
+import { Header } from "./functional-components/header";
 import { translations } from "./modal.i18n";
 export class Modal {
     constructor() {
         this.startedMouseDownOutsideDialog = false;
         this.endedMouseUpOutsideDialog = false;
+        this.narrowViewBreakpoint = 768;
+        this.mediaCondition = `(min-width: ${this.narrowViewBreakpoint}px)`;
         this.ariaId = v4();
+        this.narrowView = window.innerWidth < this.narrowViewBreakpoint;
         /**
          * the role for the modal `dialog` | `alert` | `alertdialog`.
          */
@@ -27,6 +33,7 @@ export class Modal {
          */
         this.closable = false;
         this.text = i18n(() => this.host, translations);
+        this.changeListener = (largeScreen) => (this.narrowView = !largeScreen.matches);
         this.blockEscapeKey = (e) => {
             if (e.key === "Escape") {
                 e.preventDefault();
@@ -48,7 +55,11 @@ export class Modal {
             this.htmlDialogElement.showModal();
         }
     }
+    connectedCallback() {
+        window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
+    }
     disconnectedCallback() {
+        window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
         this.htmlDialogElement?.close();
         if (this.returnFocus === false) {
             return;
@@ -70,7 +81,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '7674d533c3fc1221e4f6b068f5a67354b63c36a6', 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: '65c3955ab2701ea990393b40956b5432a7ac273d', class: "dso-dialog" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '827512bb8a6039edb7bb6f8f62869f125afabac0' }, h("div", { key: 'ba0044a6743cc7ed8538d4979671c1d1ef795cf6', class: "dso-body", tabIndex: 0 }, h("slot", { key: '275d29d60dc4ced698265c179a260bb3b59b4719', name: "body" }))), this.hasFooter && (h("div", { key: 'f5976fc74d442fdaa68caf85bc1eac989483034c', class: "dso-footer" }, h("slot", { key: 'f7f7eafab9d1c81a09a8103bc76baf9d87c40914', name: "footer" }))))));
+        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))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -193,7 +204,8 @@ export class Modal {
     }
     static get states() {
         return {
-            "ariaId": {}
+            "ariaId": {},
+            "narrowView": {}
         };
     }
     static get events() {

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: 'dd28aba6c94e69bce7dd91e8c3bef5327d8f84dd', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '5db73647f2c75eda6bfabda1c5c850c7fbc025ea', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'e694e750218315308f99e58c8ff00ac2a65529da', class: "onboarding-tip-inner" }, h("div", { key: 'a36d26c91664b584496c2d6a02bd8a3b5782d7f6', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '594b2fe2727c65e0c8f8b4148e5271d40e57df72', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'a682d1907a1f699c768a9663827f350d82391591', icon: "light-bulb" }), h("slot", { key: 'c968e81733173c04d8eda1fdbd94cba1c5ef4dcc', name: "heading" }))), h("dso-icon-button", { key: 'd584bee8fdb9f9d36d2fd30f453c4184f79223ba', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: 'b9c2fe589a242f41db9df0a55dfa105a7b32c941' }))), h("div", { key: '22b2b1623a525cc7ebf6d6873fdd623afdfedd22', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        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) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");