@dso-toolkit/core 99.2.0 → 99.4.0

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;
@@ -735,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/map-controls/map-controls.js

@@ -102,7 +102,7 @@ export class MapControls {
         this.clearPostTransitionTimeout();
     }
     render() {
-        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' }))))));
+        return (h(Fragment, { key: '9d6ee4396cb3e93e4dcd6387ed423c5b56bb060b' }, h("dso-icon-button", { key: 'ad7ebb061a22ae2b414473326f1c23608fbe7f6c', expanded: this.open, label: this.text("layersButton"), icon: "layers", variant: "map", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), 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: 'ef99763dee19cac7b718b75556dfce20005232d9', type: "button", class: "dso-map toggle-visibility-button", "aria-controls": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), "aria-expanded": this.open ? "true" : "false", onClick: (e) => this.toggleVisibilityInternal(e, __classPrivateFieldGet(this, _MapControls_toggleButtonElement, "f")), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '74bf4db4f2a05d5cb2b4f89df7cb53a60b2ef106', icon: "layers" }), h("span", { key: 'cdcffb339c2c6ff0c20901dd2ca02fce5a960ea2' }, this.text("layersButton"))), h("dso-button-group", { key: 'cbc288e14fea237073b74b6c083738f8c5c1680f', class: "zoom-buttons", direction: "column" }, h("dso-icon-button", { key: 'e659c2746a2ea3e8c2f13f2f3793047066125a81', 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: '68a28a57c20e14deebabbefab089994bd3151f9a', 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: '029a667be45b3587483ab76d851921e12b453666', id: __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f"), hidden: this.hideContent, role: "region", onKeyDown: this.handlePanelKeyDown, "aria-labelledby": __classPrivateFieldGet(this, _MapControls_mapLayersPanelId, "f") }, h("header", { key: '6aeae301582eeef11bd525433b8fb3f778810c25' }, h("h2", { key: 'b141d0eb41bf774a423af275d5c006659a6d395b', id: __classPrivateFieldGet(this, _MapControls_mapLayersTitleId, "f"), tabIndex: -1 }, this.text("title")), h("dso-icon-button", { key: 'e8b3033cc1dd2d9c141f8c8110388b88327fe962', 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: '148768df00d681ef3f813f86e1b24b46726d5b97' }, h("div", { key: 'f720aca044f1b8aa534956975e91a725219307c5', class: "content" }, h("slot", { key: 'e10cff3a91a873e7ecca2e55cbbce6b410ba7416' }))))));
     }
     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: '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 }))))));
+        return (h(Host, { key: '4216426f3f863d225fd89f181debdab0999906eb', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h(WrapWijzigactie, { key: 'c81acbdfb183641d49af07d25e277cf46f089c13', wijzigactie: this.wijzigactie }, h("div", { key: 'fa255080ae12b99bf1443e03e7a646c7c13bcc16', class: "map-layer-object" }, h("div", { key: 'bee9848afcb4649c9ffe19bdf43063064bfeb05a' }, h("slot", { key: 'c6ca637b8b1adb02c235abada86d62d6ac841779', name: "symbol" })), h("div", { key: '04401ab4d201e308a4e7655d81bb0a513368102a', class: "map-layer-object-heading" }, h("slot", { key: '4c7d71b69a2d1bfa279cb444be9b9d4f293570ce' }), h("slot", { key: '07eb1f93be72bcd2a99fffb263fd1ac8abe37138', name: "label" })), h("div", { key: '46ad5ec5eacabec9427b0fce0755f7e4581a2366', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '4b521c9ee95bb59701c1addf070ce1799a1103ad', 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: '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' })));
+        return (h(WrapWijzigactie, { key: '60d851a5af1013001cb76e40b80a029d4a5fc46d', wijzigactie: this.wijzigactie }, h("div", { key: 'c79f082e7e7c6701a8be991b5b766db3d1bf7b61', class: "map-layer" }, h("div", { key: '142092c503ea096befd5254d4f81a73d91883dbb', class: "map-layer-heading" }, h("slot", { key: 'bed1c5d041ade7d76121843ae91eac59c23cffb4', name: "name" }), h("slot", { key: '5f114102e02a6643d82527d905a8a6c2cd48d331', name: "label" })), this.activatable && (h("div", { key: 'b90c295b108cbad39bf524259a0fc5bd19f95ee9', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'f5fb426eb1df99d0ab1729da40f9a65de954fd44', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'cd5a62a875e20bd1cde8e4dfcb20bfebcc72b4a1' })));
     }
     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: 'c38f46748c57f3034e24cacaa91b5f792dab80dc', class: {
+        return (h("div", { key: '25841279245a46c78d06c179ed80df66582f0008', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, 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 })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: '7c8e851c402259060d5d310392f9bc6d9ff24acb', class: "map-message-body" }, iconName && h("dso-icon", { key: '1711c92092ef3462b96650cfad487551c399a586', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'abec1d334734f12f87ec5e54254f57b376072787', class: "map-message-text" }, h("slot", { key: '09e75a6fb96ee9413bf79e86fb34e3e22c8519db', name: "message" }))), h("slot", { key: 'a3133aa9fd782e00609ffb4bfe87ee86c36835a3', 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: '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))))));
+        return (h("fieldset", { key: '9cfae60111a9bc482572d9ddc3b1d2c59cd872d4', class: "form-group dso-checkboxes" }, h("legend", { key: '1e475d5d74ff3b659cc745831196fee8c1fd33bc', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'd71f811d035775c27d67cb46f3111220b7aab037', class: "dso-label-container" }, h("span", { key: '4d613d4d2e112adccbdbf76597bf393c6858923f', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '3f83e3d58ca7704cdde1d0ae0be7dba25a00046f', 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: '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 }))));
+        return (h("div", { key: 'dafacd14ea816b9512b2511fd999854d9fad8d12', class: "dso-mark-bar" }, h("div", { key: '7819a7ff103741b51d13fa35225a63c47fb853da', class: "dso-mark-bar-input" }, h("input", { key: 'b51bbe2fd496188dbda47e4021fa6ddea7e33086', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'be835099cf10bb02179cc2a4b6e18490d7622428', htmlFor: "search-input" }, h("dso-icon", { key: '8730c96b5637396bd9ecc97dd868a139a3d60f08', class: "dso-search-icon", icon: "search" }), h("span", { key: 'f8a532a770cf52862f5e19abdd60c9a11b302e8c', class: "label-text" }, this.label)), h("dso-icon-button", { key: '1cd84ac5915c8aaac1f0de44135f50947b44e57b', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'c02a8f030cd9dc76c099c48f840eb9bb8e4017a0', class: "dso-button-container" }, h("span", { key: 'fc24cc939f698fefa6d6d5d53255c0d126fa8369', class: "divider" }), h("dso-icon-button", { key: '17f072d722b9d703786ed72ae24eded2b25c4539', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '0017a76062b3406c66dbb76931d797a2b488fe33', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'bfd05d3e830fc30a8c55cc66ef69be2911890866', 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/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 {
@@ -72,6 +73,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;
@@ -92,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) {
@@ -101,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);
@@ -130,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 {
@@ -148,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

@@ -5,6 +5,7 @@ button {
   font: inherit;
   font-family: inherit;
   font-size: inherit;
+  letter-spacing: inherit;
   line-height: inherit;
   margin: 0;
   overflow: visible;
@@ -735,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.css

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