@dso-toolkit/core 99.2.0 → 99.4.0

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;
@@ -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/document-component/document-component.js

@@ -182,17 +182,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: '2145a6437f81290f55bf2cea907db44002f3a083', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ef8bc038ddde2177a4157707304e5c857030632f', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '39b607942cee90cfc902bf765eb6de470519ac63', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'b0ff9ef46cd804028c8c6f9d560639a82a147cd0', class: "heading" }, h(Heading, { key: '436adf886700480f285a2841c4c6d83030e65dfe', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'abc8967f18030dc75483739e8f7eab1ce4582aa6', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: 'f0ebde88d6772dcdaad2e3a42f482ef4d32fcf61' }, this.notApplicable && h("span", { key: '1bdbfee2e02f056e85906b41077dcfabd90a97b8', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'ab219ee78e17196c53251cc3aac5c80ce91fb2e2', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'e140a570927c5268494ba8323b3faf671b319636', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '5679a925446c6516292b24ba5da57e94adcd8787' }, h("dso-badge", { key: '791891529218cfbda74906fd4d03dd9ba328b876', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: 'f83a29ab1dd637bd9479c881262afcf17d126068', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: 'eeab50c29fc34c00bc2eeab3e9100a1bdecfc417', class: "addons" }, this.label && (h("dso-label", { key: '1cce28f8ca5632648e126eba47db55c6591b721a', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '76dfa3937fe605257e2050abe4dc0addb43f0b22', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: 'a48ae7fa0947b4b20fada1cc2bb3387cdabab584', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'a711af7d939b538542082069e6c36e7372e09e71', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'a907eae0b2f170e6f062bae1bbe0c27d0df26a39', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'e533b0435eb0b066669e2b5918f39a1b3318f79b', class: "heading" }, h(Heading, { key: '55cc616a37e1002c47b1a0f5cf8dca5ca66762a8', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '5266e55024980b9642e9ee1997048ec753a3762d', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '741522372977aaa057d8b888ef16d5db9d499f03' }, this.notApplicable && h("span", { key: 'b0133fefda448ebfc16fed349c8c40ac8c0cd2ef', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '313dcfa39102b0b25a2c847cae3d347434d3365d', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '743f7f3d8779cde1fbcdd6fda72c073ff96fcfb2', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '0d4d8cadf90b7c9e8fec841f715690614fc79196' }, h("dso-badge", { key: '3eeb36147c84b66b844d3bfd4ea4d1ca8f8e7452', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '73f8baa4d973dd54189be2f82683b94bfa53b44d', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '5d52962a0e4c37ba953896a30079b4691a4ef843', class: "addons" }, this.label && (h("dso-label", { key: 'bee68bbf3e3e58c55e34a3185f152ed38d681f00', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '031bef8873307d4d5fbf1b4e471af85b87bad996', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
                 current: this.openAnnotation,
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: '5ddb12a206011881d4781e5f305cc732064f16bb', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'b7d21b712102e98a88ab4a13054ccd6de662e393', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '30c118338ade5a9dbc16a9647711c25752403adb', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: '1dd094f8321d2a74504e7589f220c1ae06c54c48', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'c8b2ab1dc5083d357231f103b7a41df1011fb854', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '38c0e52ff906a1800b23c32698c752640f7fb139', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '5a66f86a1eff551204fd0e8aa79bbba0b3c65c99', class: "content", part: "_content" }, h(AantekenAlert, { key: '04aac67e7bb009cffe76c204354e2b34bc65b821', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'e2597671ddc48b87adf6c822b6f2ec23faea5391', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'fe0d3240cf3def32bbef3f85a0581e39355af4fd', class: "children-container", part: "_children-container" }, h("slot", { key: '1293870b0d3eda48a51e774d9779bf48c6b09c3f' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '132a3e9c0cd8ac8bf4e06448a9f48c324e66da6a', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '65863fcad5d454b9966f05d7935dab6587c582df', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '8280151a2736110ae25cefeab90bfdcd0cbef021', class: "content", part: "_content" }, h(AantekenAlert, { key: '1a357b22370e08b7b0b29bead721f6448d93611e', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '8ee59e093dcb2f980accaa84c7d61ecf7719b23d', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'b8b0ee6631e85d6c99932b50aec1ab0970a35bb6', class: "children-container", part: "_children-container" }, h("slot", { key: '664dc036cf170e451d3635e97c2ad868c2b8f79e' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -207,7 +207,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '17ef11c09b5648fab55636dcd62872ccc081ce01', class: "dso-document-components" }, h("div", { key: '149cd4cf2293999258f6440216ce6b0971d9610f', class: "dso-navbar" }, h("ul", { key: '362e52584723259f16cf7d33f8afbf8b60103902', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '506e0e1e30af9c41225a1b2be6c9ebe3055fb2bb', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'd92fde8e8e4cc982f005c8571f010c27f36b48e4', class: "dso-document-components" }, h("div", { key: '954d3e761228f6e169f9f49a123ac4ab84f0dd12', class: "dso-navbar" }, h("ul", { key: 'e406db3e0f02b92036f72d99d9bd828b898a0877', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '0ef374e5b148ed43e5bca9c01d5f2f44c0ef280b', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.js

@@ -14,7 +14,7 @@ export class DropdownMenuGroup {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const labelId = this.label ? uuidv4() : undefined;
-        return (h(Host, { key: 'c980682012525ce3546015fe7540fcf4e7faf136' }, h("div", { key: '3f5c3a7cfd9ba183a32bb5e2a6d2755a18bc1456', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '66e08cb43cac066676dfe98eac5c30a00d6d1135', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: 'b3367a35147c303415c7f12910be0ba8dc5aad78' }))));
+        return (h(Host, { key: 'f639886cfa9c18db2e9c3736a2e73f57ca25ec6d' }, h("div", { key: 'b1e4bfaa31fb2dc7d8de3ca5000bcfbd6a92a953', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: 'd6478020f5809b0de212b31a8dca44a08ee54844', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '4d41b59001ef3446dcb5cce821be8301a147ea62' }))));
     }
     static get is() { return "dso-dropdown-menu-group"; }
     static get encapsulation() { return "shadow"; }

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-item/dropdown-menu-item.js

@@ -25,7 +25,7 @@ export class DropdownMenuItem {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const checked = checkable ? Boolean(this.checked) : undefined;
-        return (h(Host, { key: '5468bcac99a2e1ad213d5f1f120b323c5e6aaca0' }, h("div", { key: '069873f5c8de079328d8ea1b875682c575db81f0', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'db677f1410458682d3c5d9dcb796bb8221c9827f', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'ef98fef2183db8dbee9d5f3dbb3f1e46ce436750', icon: "check" }), h("slot", { key: '799feb352b1ff9af58c04a5dea11eee534f59027' }))), this.type === "link" && this.href && (h("a", { key: 'af569dd1cd167021b68bcef8bed8d0f463549bbd', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'c3130e6ee9a433bc7a21409772e6f47924d3c9fa', icon: "check" }), h("slot", { key: 'd9d9751cd6c6be4d4af00f6ef92c135d4d6ea4d4' }))))));
+        return (h(Host, { key: 'a04191fcbe7dffcee56715f8951b2b277d3877f2' }, h("div", { key: '43716fef5348565bd4c1561d78daf0ae6cc70aba', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'b0b85b023be5f29172ab0467e2289f1a83aff5fd', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '7cdd63f6e510af0a74aded1e682c41fafd7afde1', icon: "check" }), h("slot", { key: '241b0076fc3ef8e42f8a3a728a120ec71209dbd9' }))), this.type === "link" && this.href && (h("a", { key: '39ee287c71bc3a34e2f0b2893746211061f3dcaf', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: '8e54196b57b148312c2c03e6d254b8bd47790abe', icon: "check" }), h("slot", { key: '5c72fedaaee7841043e4a0249acfe3edcf3eabbb' }))))));
     }
     static get is() { return "dso-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

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;
@@ -454,13 +455,7 @@ button.dso-tertiary.dso-spinner-right::after {
 }
 button.dso-tertiary dso-icon + span:not(.sr-only),
 button.dso-tertiary span:not(.sr-only) + dso-icon {
-  margin-inline-start: 8px;
-}
-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] {
-  margin-inline-start: 0;
+  margin-inline-start: 4px;
 }
 button.dso-tertiary dso-icon,
 button.dso-tertiary span {

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

@@ -161,7 +161,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: 'fb24a3ee2a56ec3adce14f72da596f8d8d37e1bb', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: 'b0faa08f561a0e2dd92b2431eb51aa550d573050', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '87623c7e94e6d5d6295de723cafa3430fce2d535', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '4204d3bf86431d9b3a139330e27dc8ab6c5025af', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: 'dfef9de7599d5749d84ec01f054363fd928cec90' }, h("slot", { key: '6d9f409c730a0b95d66a2f63addeb2e6392edb04' })))));
+        return (h(Host, { key: '63dba747057e58c38f29d830b2a867dd02e07541', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '3711038ff64c7e43a27c1a0a072fa904db484068', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '45037c7c83a4edecf75762b703115c34c2a39804', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '34099ec42eef8744a3701e3fa90701e53791a8e5', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: 'd1b88fa03257379e7b213c29616b02f24872e2aa' }, h("slot", { key: '7e9c881bc357590c9750ddbe3a6f6fdac46733c7' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.js

@@ -36,10 +36,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: '4c3091a51fc1bb2f32805935da261c201a0fba0a', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: '9dc33dcdcf4c14039e36ff8faaaa7d9fa882b754', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '121a28ee5b55beae8e4abecc53592a4558b24a87', class: "slot-container" }, h("slot", { key: '724e8ce768758e32243d0bfab1fa004a6b385de2' }))));
+            }) }, h("div", { key: 'e52a32ab8bbec7bae7216b321747893b521d452b', class: "slot-container" }, h("slot", { key: '8a256f561b8136e2d584bb267dd83948d9810614' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

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/header/header.js

@@ -232,7 +232,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '0edd012815b6b408bde18b0bc5f1c474bf4e83a3', "is-compact": this.isCompact }, h("div", { key: 'abccc6c719264305b21546f45d335c9744ddc829', class: "dso-header" }, h("div", { key: '55fe9d36d3b61251fd6c189def02f080efdadb95', class: "logo-container" }, h("slot", { key: '90f81070b0aa4aedb2bb4973a1b2a45667b3261e', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'bafceec3e7c095cb67f876e8b5ed7a817e7db8c1', "is-compact": this.isCompact }, h("div", { key: 'bd6eaaede73b41374e9b11683c8fd94bf08c32f2', class: "dso-header" }, h("div", { key: '20bbba41193597e3b97ef6fbc84f1518c0b47d2a', class: "logo-container" }, h("slot", { key: 'b78e8f54a29a296ff77f687fe792ae9311e2b44c', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/highlight-box/highlight-box.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '6d2edcb003364f55698a546ca5a40e856158aa81', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'f152ce9645534e1a08e0126f0bcf9a91cc2200e6', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '1190733db19f9f4b4db653774eb42a3b7bde9cd4', name: "icon" }))), h("slot", { key: '680ad40b52431fc150af35c84c92331e6c02c12f' })));
+        return (h(Host, { key: '3293b12fe82396580186ef78dee0165063fa1a04', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'b8c864d67fcd3ea0d84a2037648ca72ce47103c4', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: 'df482099bbb3e4b303238c36d2afcde6dfa6bba4', name: "icon" }))), h("slot", { key: 'a68efd769d984c6d936d4b0db53d7532ed648b35' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h("div", { key: 'b67e23e7f07d7531c5706d80c49106e91af5dae2', class: "history-item" }, h("div", { key: '2bcbc3fee3c942a423f003ef9ce4bcc3ba124b86', class: "history-item-date" }, h("slot", { key: '9a04dba1bb81f4a870b33bde13002a92734c8102', name: "date" })), h("div", { key: '91daca3a71a76f2f9663aeb24e6a4e3800ecb9b2', class: "history-item-content" }, h("div", { key: '1d6a1fc7af37d112157687af439a4dac5aa3c17f', class: "history-item-status-message" }, h("dso-icon", { key: 'cd1992357281912da0c0c2df3f28fd50edce759e', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'dfa34dda001994183b18ca0ffc8139890bceef28', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '68d46276748a4e57f288c902451a7d6574134bfb', class: "history-item-title" }, h("a", { key: '8f165c45b9270f2670297a61acc45f46f4f2b62a', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '6d849f615d9d399d8b78a1c2af2bee11e5dbace1', class: "history-item-title-content" }, h("slot", { key: '3dd08130e599dda37b271263f56fd756c37dd6bc', name: "title" })), "\u2060", h("dso-icon", { key: '986fbcd03a59597b8c3cd1147d020a520536773b', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '55ad3fe97ab3e98e9ea33d155e4231040496e4d3', class: "history-item-explanation" }, h("slot", { key: '71a3433b7e25fd0bcf5ab6de7e76ab3cf5c2469d', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '0c988802670db9c5451cb0efbc38b2dda5c88b7b', class: "history-item-warning" }, h("dso-icon", { key: '96a6eb82355cf42430f27403c88ac4deb54bc2e6', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '962c43f05db675480e25914a4c3855d2ec93867b', name: "warning" }))))));
+        return (h("div", { key: '6ee1da1085393e583f0e85e50697bfc853c2af9e', class: "history-item" }, h("div", { key: '361d172b8b8bbbd167ea8c58576bd1ab4bf08bbe', class: "history-item-date" }, h("slot", { key: '8f0f5d47cf94de8023b3687c1784a97c00876007', name: "date" })), h("div", { key: 'b680c670f027bd5754980ea7c6ff6104eb9413a0', class: "history-item-content" }, h("div", { key: '651d82ba7c7ed75b8d3cd6077c65cb0e0bfab006', class: "history-item-status-message" }, h("dso-icon", { key: '6f5ef066d9e4bf89ac262efbe8025dc1734ba34d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'c1f4ece7a1595c06a5f8f74254d5e74c4a0e4b43', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '27d0d4773e69c803f729b65f4f477a5028d5c964', class: "history-item-title" }, h("a", { key: '40396bbda7f322d0aef8e7269c20abc952b48a5e', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: 'c894e2ec83f673e0bfa5a6c20e29c9b06c39dda8', class: "history-item-title-content" }, h("slot", { key: '95d995d100db11d6c557c75ead872360d1db06c0', name: "title" })), "\u2060", h("dso-icon", { key: 'edd01a4d570c81bc9982c2f5dc29136d0dd5b121', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '292647d2665d1cc8b81cd32e61d9bee6eef26087', class: "history-item-explanation" }, h("slot", { key: '262ae4842b243aeb8cd86a0c034d6e7b4d7062e5', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '884a462c276e462488aec156ff56c27bb694e1c8', class: "history-item-warning" }, h("dso-icon", { key: '2e061864eae872e8b53f8ed4eae414354c080f56', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '7a53f699357bb4effbda29cba09817e40346c770', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -258,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '52a679f5b8b8c38ffa8f961b2a750c71f65fcee7', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '1df02b97b48721e7527fc3ae617ff32e00db961b', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

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

@@ -17,10 +17,6 @@ export class IconButton {
          * To disable the Icon Button
          */
         this.disabled = false;
-        /**
-         * Whether the button is toggled.
-         */
-        this.toggled = false;
         this.handleShowTooltip = () => {
             if (this.disabled) {
                 return;
@@ -81,7 +77,7 @@ export class IconButton {
         this.cleanUpTooltip();
     }
     render() {
-        return (h("button", { key: '546ff22e7f3196cb718cf28591d699e1c4cf6d2f', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-pressed": this.toggled ? "true" : "false", "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'fbaa877286dcd6f3484e91d5328ff025d2f1cb60', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '87e6fe5386d92d48c6edfd4ce2fe91e6f4a43ccd', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '4c930bb2fd38dfce8db767072ff7ad994dfbd869', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '1137f9ab4dcdb979544781d03b657e24359cc801', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '5ec39345d360e556d7b23a11d67eec64aaab48ab', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -216,16 +212,35 @@ export class IconButton {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
+            "expanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the controlled element is expanded."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded"
+            },
             "toggled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Whether the button is toggled."
@@ -233,8 +248,7 @@ export class IconButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "toggled",
-                "defaultValue": "false"
+                "attribute": "toggled"
             }
         };
     }

package/dist/collection/components/info/info.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '3b3a3390da24484d21869661692c293f766bb06b' }, h("slot", { key: '83976a207e4c1505329876192c83e6eccc1f6a52' }), !this.fixed && (h("dso-icon-button", { key: 'd1d5a28081e3ac03920b1ca3b6613d2564f3c1ee', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("dso-icon-button", { key: '62d95155d61bfd7c671c5964c7837e587cf6998c', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -114,7 +114,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'fd3542f889b774cc07b357a9d8b63e1615af2158', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'b50c38ee53f6c094aa03f5684f3fb23a46b4a92c', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: 'da0bb36ffa6f45cebb4a4d9791364f48f636d995', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '3afc6d36167613570f4d94b3371ba979d2965999', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '071ed39f8f84e9fe585fea0847294e51897ec787', name: "toggletip" }))))));
+        return (h(Host, { key: 'bebf2c54d9740a143661f2a4a8f289764e742c1c', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'a89e0ea637d63255a786ed190ac19fdd48b330ca', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (h(Tooltip, { key: 'd3840f4ba7c517e4715bfa8b487b97ba7fc5a8c0', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '2752725c430ae05daeef3087fe19ec028a1fe5f4', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, h("slot", { key: 'f95b0b1205464a42d3970095a36b7e475d78aaa6', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '89af1e58915297fc3bbb8f47d5b02e0e1a3e1215', id: "description", hidden: true }, this.description)), h("span", { key: 'd06bec792a3d433a3e81f8238f7e278148d2b870', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '4c61d74eb5d701d0d523fc9c6f519e38f2ae1d3f', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '5c9b842e1f9f77163b62d7d52c9496d053e55180', id: "description", hidden: true }, this.description)), h("span", { key: 'fe2b8532daf462fbe9b225a08f97c7d15a32a8cd', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'ed0ad0b7c36553bd5c746b6cd21d1cc916d71e2d', type: "range", min: min, max: max, step: step, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '554866e752da5b888a67dcde3ad1ca14d249bdfb', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '21ff5269993d5b3aeabf667c01e671b1d41a9aca', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/label/label.js

@@ -118,11 +118,11 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '1df6fe712a0bf086f0b2573e948683720ba215a2' }, h("span", { key: 'fb256c30a0c5f9071997e053ec27e288a1a583f0', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'c8aaaf84c416b79bb9c503ad2533ac1213f35c92' }, h("span", { key: '37ad4980bb5781c64814f1efd13d156b31f08bfd', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '84ff08b93ecf1749a81efec382c3e80e21d588f5', name: "symbol" }), h("span", { key: '7803661c693cffa79935e95f2028882c2366dd4e', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: '7fa038e58dad22c68c892ea3c5a3247f684b260b' })), this.removable && (h("dso-icon-button", { key: 'c6fe6c7ccd0c6d75b1ffd487ca214020b82f409a', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h(Tooltip, { key: '6a8b479fe15eb68458bfef2db7d61142006c6239', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '44d7e51a7b3d8560b71764b972d61588baf21ea4', id: "toggle-anchor" }, this.labelText)))));
+            }) }, h("slot", { key: '693997722133ee6d6e151e73d39f4a05ac2404be', name: "symbol" }), h("span", { key: '8831bad458c6fa2082aa2be762725f230d03ec99', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip }, h("slot", { key: 'cb098c6c42929b477c4a77257d035675bcc68cdc' })), this.removable && (h("dso-icon-button", { key: '47a66249b07c099a017d61ae62c7e975dc9539d7', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h(Tooltip, { key: '9efda637811c456b0d9e7290c60508c1b3c62a9b', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("span", { key: '9c90dc4d8d07619b2ae39883200782f3bb2f95b2', id: "toggle-anchor" }, this.labelText)))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class LegendGroup {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: 'a683dbf918547b7faafccdcab849136d4bb8f15a' }, h("div", { key: '223c7ceb2261bbafc6af310a72cc0979bfa0eeac', class: "legend-group-header" }, h("slot", { key: 'a6f3d84be2c74e155009f6a288551f25651b6756', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'f3359494fc1236f9a6027ba6e9d8c26f380bc5ec', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '97ff130ba7569d89245d6c39fe224de19e163428', name: "options" }), h("slot", { key: 'be39f41686b4f34755317344cec217580df96cc3' })));
+        return (h(Host, { key: '972513a3527ff446324c759714755b664c058d46' }, h("div", { key: 'e57660d4098c734dd093cd4f78914b80950a223b', class: "legend-group-header" }, h("slot", { key: '165c84da0b66aad1256ef510779ac6d79495b42a', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'a1401577f95f4192c0faea3907f77fec40df7cf2', expanded: this.mode === "edit", label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: 'f8c427b63ab20594f04d2099ec5b0f15b9bf9b20', name: "options" }), h("slot", { key: '97fd5268954f1a83d097c5241983de5dc7adc30e' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

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, expanded: this.showOptions, 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: '96c288bc2a05a29ccdcedccc98f6acecfbd026e0', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '6db23c1408c64bc4a9d23b3b471144f1994d8ad9', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'ec9771b028987abd64699d3b83e60b0bfddd376b' }, h("slot", { key: '3ee11e76025eb944b55964c0a8dfc893e38d3e02', name: "symbol" }))), h("div", { key: '788c1f3648e2d219dc0b83c63f3fa1f8e236311e' }, h("slot", { key: '08bade4380497521a1c26bb899bd2c9110b95b60', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '58553661c55719f42efdb8a56993409616caf2a9', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '9120418ffd42d721a9746c96e44ed816bc460ac3', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '09a3b392fd78db4debf28614386ab75ecf7940fd', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: 'd76e964708ccbb0388c7642c2d89080b73cb626c', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: 'a5b5a219f1888c0e9f9775948a05951eb65afa6e', 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/legend/legend.js

@@ -63,7 +63,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '8447a6461e1125963afc29bfb49102d8df303cba' }, h("div", { key: 'fcc9506e7c0d033e7c4e62d690d56db9c4416187', class: "topbar" }, h("div", { key: '76f9c23ee13593faae4582703d8127aaefef501a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '72d00c8ea5b1268fdce677935fd8de673c643daf', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '4c968b740282428b393fe03a1e18ec6f7caf8d08', class: "content" }, h("div", { key: 'e195f6ea4cae039469e4730adf4b253f3e34b000', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '575eccc3604b4c2aa7d8e71294953fab94984a35' })))));
+        return (h(Host, { key: 'e3c401a8383f8a7d49e3c24a2fb867708d273160' }, h("div", { key: '4b5d88165bd72e787a9f460783b6425e508be284', class: "topbar" }, h("div", { key: '5be1da490bfec24e343c8f9b8fae04ffde3030bc', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: '99fc969adf5e175d028dea9bd9ca8a5f53d9683f', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '36aef539953b9c77d06ef4d56be9edd28712680a', class: "content" }, h("div", { key: '86c411c4317d58a0d7619b4843481ba62bbc9a29', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '103898f6b19175467aa1b5ae581e473ede40e475' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -73,7 +73,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        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") })))));
+        return (h("div", { key: '153f81aaebcc43d329b0754cd1dfb419047f1f01', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'b82cc312ea619bfa5c9b34cb685dc1ee1ffca883', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '2bcf18e6df5ef06ce90a27b0052c30411ca418a3', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: 'ea085ef94d417392ce2d3211a0c672e6b0062e82' }, this.label, this.sublabel && h("span", { key: 'a3ca738b8cbca4780c8948f178949430a73a72a9', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '6cb97ebad7e7bfc255d2d07b65b3fc0c808952cd', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'e10862fea3a1f2ddf34d806efb53c21cd9b4875d', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: '8d58404dec7106a74724e82907bba9d266cbf827', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'be58d054304afe3f4ff25a01be6dc62b5dc02625', class: "subcontent" }, h("slot", { key: 'f687bb398c00eeeb1a9a3dae9b0889ad3191bd90', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'db5fa3acdc29926126a551209c845cc88792fa20', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'bc7e479638e8bb6f914bf30214b92d6e0cada0c0' }, h("dso-icon-button", { key: 'cde2f55d393c6d08de9173db3612e5339b7cafa1', 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: 'ca73568daca7e1d3641b9d711edb6bf37de28a64', class: "dso-input-step-counter", "aria-hidden": "true" }, this.count))), h("span", { key: '1096574e37502033f05572fcfc74c0120cd8b251', class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.count), h("dso-icon-button", { key: 'ee584967f4284defe68a7d9fb6d6c10cb75f0f99', 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"; }

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: 'd9b8e664223d4763b318ca259cd3090ccc3b0a96', 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: '2c4662854741d591e3a13ecdbc3506320e16d92d', 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: '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))))));
+        return (h("fieldset", { key: 'fc725366824a2bfbecc6b3b54a9d66189897788d', class: "form-group dso-radios" }, h("legend", { key: 'a5e7265492ee924e04bc784c57f26e474f0c4c21', class: "sr-only" }, "Achtergrond"), h("div", { key: '344f1765eefba53c5d4a8c25d0f1853359e5029b', class: "dso-label-container" }, h("span", { key: 'f2de7cae48c08e0487ad8f1cd45a1f72def76858', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'c5dfd3492af5de39d9e718c2df24393e5069dc16', 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"; }