@dso-toolkit/core 101.2.0 → 103.0.0

package/dist/collection/components/annotation/annotation.css

@@ -171,8 +171,8 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 .annotation-data {
   margin-block: 0;
 }
-.annotation-title .content:has(+ dso-label),
-.annotation-data .content:has(+ dso-label) {
+.annotation-title .content:has(+ .meta:not([hidden])),
+.annotation-data .content:has(+ .meta:not([hidden])) {
   margin-inline-end: 4px;
 }
 

package/dist/collection/components/card/card.css

@@ -109,10 +109,15 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 .heading-anchor {
-  display: flex;
-  gap: 4px;
+  min-inline-size: 0;
+  font-size: 1.125em;
+  line-height: 1.25;
   color: #275937;
   text-decoration: none;
+  white-space: nowrap;
+}
+.heading-anchor .heading-content {
+  white-space: normal;
 }
 .heading-anchor:hover {
   color: #275937;
@@ -122,7 +127,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   color: #275937;
 }
 .heading-anchor dso-icon {
-  flex-shrink: 0;
+  margin-inline-start: 4px;
 }
 .heading-anchor .sr-only {
   position: absolute;
@@ -143,14 +148,14 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 
 ::slotted([slot=heading]) {
-  display: flex !important;
-  align-items: center !important;
+  display: inline !important;
   margin-block-end: 0 !important;
   margin-block-start: 0 !important;
-  font-size: 1.125em !important;
+  font-size: inherit !important;
   font-weight: 700 !important;
   color: #275937 !important;
-  line-height: 1.25 !important;
+  line-height: inherit !important;
+  overflow-wrap: anywhere !important;
 }
 
 ::slotted([slot=content]) {

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

@@ -29,8 +29,8 @@ export class Card {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '106df756cd8383136b238be0107f318c7f0b1457', "is-selectable": isSelectable }, h("div", { key: '763de98d5426a7047cf2793ad3acd5b305676884', class: "dso-card-container" }, h("div", { key: 'a2c89ba5a220d7e098193627ab9779f1269874c6', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e2426f5ab8f36d946747befeaae0c435ddbecfdf', name: "selectable" })), h("div", { key: 'cc1051b1898c35d48a4337215b785fae6198c0a4', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '48d1e463fe1c4bca63be68f4987106c3a9e8fa71', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'bdf715e2cf039ba2ba298b91b7d2dce2ee8a06c9', name: "heading" }), h("dso-icon", { key: 'cf42631e919b44eef3485c44e3fadfea559596c2', icon: "external-link" }), h("span", { key: 'dd25289f8e82d50106f89023ab8b44d106e8106b', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '43eb6d4e7d7ae31d2b15f7191be77011b1599374', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'ff25a6a15671b0bd35be220791ed66f4bd419a7a', name: "heading" }), h("dso-icon", { key: '018c727bfdcd9b3a8be760328852fd5e631b2183', icon: "download" })))) || (h("a", { key: '02745c8de0b89a53959a53af6438d91a5c62933d', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '39873da8243d03be0dfd5bc8c38e023382d0aef2', name: "heading" }), h("dso-icon", { key: 'f52a560ae21f299d5b1e87c0938282f3cb533f49', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'd4a0e4f23487f6afb53e4062261ff4af028965a2', name: "interactions" })), h("div", { key: '7206aa3d66eed29fe5e821c9446ee8a54a39d99d', class: "dso-card-content" }, h("slot", { key: '7d2d9caf4da500c922a69e89eabce1422229acf9', name: "content" })))));
+        return (h(Host, { key: '106df756cd8383136b238be0107f318c7f0b1457', "is-selectable": isSelectable }, h("div", { key: '763de98d5426a7047cf2793ad3acd5b305676884', class: "dso-card-container" }, h("div", { key: 'a2c89ba5a220d7e098193627ab9779f1269874c6', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'e2426f5ab8f36d946747befeaae0c435ddbecfdf', name: "selectable" })), h("div", { key: 'cc1051b1898c35d48a4337215b785fae6198c0a4', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '48d1e463fe1c4bca63be68f4987106c3a9e8fa71', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'ec7b9cd15dd57291d19d35dbafd13736bf88afd3', class: "heading-content" }, h("slot", { key: '07bafabe8f29943e475a39df65c4944a98a19b3c', name: "heading" })), "\u2060", h("dso-icon", { key: '18f38360fa7054b1c4b2dac8e1cde0fab4815d10', icon: "external-link" }), h("span", { key: 'c39ce6519c0830e1d8cd658f95eff630c2c551f4', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: '9c2a8fb13161d18851e2d92ab4735eea18921f1c', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'b93181ea1337d314a55161fa540cd76428fb8a38', class: "heading-content" }, h("slot", { key: '49bc73d6156341131e884f53fe9bd5ab6066706b', name: "heading" })), "\u2060", h("dso-icon", { key: '615e906944d70772609ef627093e2f233930b1e4', icon: "download" })))) || (h("a", { key: '995f650576a2bdddb4100077dbdd2ec25aaf444c', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '6b3a9414b05dfb8a1c75b49e0541c142741db769', class: "heading-content" }, h("slot", { key: 'd00111b6d8f8fd047b4513d390cbc39c1709c995', name: "heading" })), "\u2060", h("dso-icon", { key: 'b6fc8513bbb66b7236ecb2fd8e51b31f6c133e09', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'a17288bb8e7d74796acc0d3e18392ca93a3451be', name: "interactions" })), h("div", { key: 'b58f830c6c96ecf6633f4ef523357a187d83b984', class: "dso-card-content" }, h("slot", { key: 'f1e948fd97db05fe675ab450d2a69c1e917b0c84', name: "content" })))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: 'd52f21b49b9b943187b6a73e55ca681ec96deb73', class: "dso-card-list" }, h("slot", { key: '219cf186ffb995e18a8275d640abc7ce1aa13baa' }))), this.mode === "grid" && (h("div", { key: 'cfa849d6de6f6675ad6e2d27b38d00cf072e090c', class: "dso-card-grid" }, h("slot", { key: '8d1c379c89bd3ee4e720dc93e26b3dd901b67db4' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '9df468fb75a7fa737a741cb2a6388d1ea5dfad24', class: "dso-card-list" }, h("slot", { key: '1ef3fd188252787af1d8b2eaf0e3fd2740edf7d5' }))), this.mode === "grid" && (h("div", { key: 'd2924d58be8411e4eb157bddca458edfb5769bd7', class: "dso-card-grid" }, h("slot", { key: '5f07aae2c62ef6868a0f4e2ad8e8ed48331b86db' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/contact-information/contact-information.js

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class ContactInformation {
     render() {
-        return (h("div", { key: '0745ce0fe81c6087b6d42904bf45865d12e42a88', class: "dso-contact-information" }, h("slot", { key: 'a97cd70246f1ee43c6b2f8f2e73b90719765fdc3', name: "heading" }), h("slot", { key: 'bebe2ba23a7a36685196e90028c1bf9dd97970a3', name: "anchor-items" }), h("slot", { key: '20f3eca7864ca85d136588ab7b237611e068acb3', name: "info-items" })));
+        return (h("div", { key: '90c16c3487d71cf80cb47046593503d9ff8505b4', class: "dso-contact-information" }, h("slot", { key: '9cb5329cdeaefed73418fec80af29c517e7fa51b', name: "heading" }), h("slot", { key: '01c545280fc3bfd2c809d32cd2bffc83867888fc', name: "anchor-items" }), h("slot", { key: '3d4105ddb5515220dcb5e4cdff969687675267d7', name: "info-items" })));
     }
     static get is() { return "dso-contact-information"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cursor-tooltip/cursor-tooltip.js

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class CursorTooltip {
     render() {
-        return (h(Host, { key: '50c4a5c22b73e08041720bdbe89e59255df98bc2', class: "dso-cursor-tooltip" }, h("slot", { key: '9b97e4490cac3a9cf6893eed6b786adbe88fed11' })));
+        return (h(Host, { key: 'be0adb19fd1c7c5a75f49bb3b7648398501a322f', class: "dso-cursor-tooltip" }, h("slot", { key: 'b9c822c0efaaf758bb756d861f80e2c68f8f04b9' })));
     }
     static get is() { return "dso-cursor-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -105,7 +105,7 @@ export class DsoDatePicker {
         return undefined;
     }
     render() {
-        return (h("input", { key: '9687b85b3241b120259055e5adfdef71a3a46acf', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: 'd590350ed78f57726d0e38186eb67b588bcd5292', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": this.invalid?.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -33,7 +33,7 @@ export class DocumentCard {
         return this.host.querySelector("[slot='labels']");
     }
     render() {
-        return (h("div", { key: 'e6674c35c42f2a3cc8f676629a286b86cb1f3a74', class: "dso-document-card-container" }, h("div", { key: '9b7ad2d6f3322730273d58da4a6b9ae0def142e5', class: "dso-document-card-heading" }, h("a", { key: '9feab84beb061e0319bcbb1de7189941453936e0', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: 'cce85a9f8123be2cd56201fe7075c8a97e1c79ff', class: "icon-container" }, h("dso-icon", { key: 'b40a8c6b18f89faf65af0a0b948790d508dbb880', icon: "chevron-right" }), h("slot", { key: '85c2d009d0186509269d48aa09d2ca91d9bb7565', name: "heading" })))), h("div", { key: 'de7658904c9a7edccbd36929d6dde671e9e3ceb0', class: "dso-document-card-type" }, h("slot", { key: '3db3fde661962548bdb17e61261abd2ee2f396e0', name: "type" })), h("div", { key: 'ef8420e2f8a1aad65a91928b8e32acbbbe10b1f4', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: 'e76b3d46409a8802b55ba62e55c56a12e6de528a', name: "meta" }), h("slot", { key: '27557527b596bca2227289345975e0ab2c54a496', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: 'a89235cb3ef76a3aa49f3d575d9016cdcc02e74a', name: "interactions" })), this.labelsSlottedElement !== null && (h("div", { key: '2b49e7e3ef6bd4c2e1adab954c470e9e958a6d66', class: "dso-document-card-labels" }, h("slot", { key: '3ea9405369563511d852abc07d41a673f2ae3a70', name: "labels" })))));
+        return (h("div", { key: 'c91750d08c5fb803dca80173db9946f7565e4085', class: "dso-document-card-container" }, h("div", { key: 'f1a394372d3c8444a04728bfa328c998df389737', class: "dso-document-card-heading" }, h("a", { key: 'daec31656d822f4959eee473a9b64a684f209716', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '34a8d26e67b85433d8d2c647b8fb65d9ac7f71f1', class: "icon-container" }, h("dso-icon", { key: '397fd29fbeab89f5fffcb4d782ca70b485dc4329', icon: "chevron-right" }), h("slot", { key: '4b7ed1e5c16150d36933789c6b2fac9efba467e7', name: "heading" })))), h("div", { key: '5376fafb254658a5b5d99bff82a9401ebbcabea9', class: "dso-document-card-type" }, h("slot", { key: 'a05c2209b5d050faef86d5c5cb841f4329911303', name: "type" })), h("div", { key: '21e0cc05f86a263d8f27e823a4fa73f8c159d13f', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '4b06467de2f76ab2a73767be918c826ed53c9e21', name: "meta" }), h("slot", { key: '8d54d2c5c16e5ad5fd8ce3b5a8e5e5421e8cb99d', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: 'f27cb0dc0116fb58f859515cdb876354175da676', name: "interactions" })), this.labelsSlottedElement !== null && (h("div", { key: '00778150970d79e9dc5260b5b42423db1e136166', class: "dso-document-card-labels" }, h("slot", { key: '114dcf77888fc14e47329c9af368e44b27bb4b99', name: "labels" })))));
     }
     static get is() { return "dso-document-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -469,6 +469,11 @@ button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
   background-image: var(--_dso-di-download-bosgroen);
 }
+a.dso-secondary.download:active::after,
+button.dso-secondary.download:active::after,
+label.dso-secondary.download:active::after {
+  background-image: var(--_dso-di-download-wit);
+}
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
 label.dso-secondary.download[disabled]::after {
@@ -490,6 +495,11 @@ button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
   background-image: var(--_dso-di-external-link-bosgroen);
 }
+a.dso-secondary.extern:active::after,
+button.dso-secondary.extern:active::after,
+label.dso-secondary.extern:active::after {
+  background-image: var(--_dso-di-external-link-wit);
+}
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
 label.dso-secondary.extern[disabled]::after {
@@ -1050,7 +1060,7 @@ a.dso-primary, a.dso-primary:hover, a.dso-primary:visited, a.dso-primary:focus-v
 a.dso-secondary {
   text-decoration: none;
 }
-a.dso-secondary, a.dso-secondary:visited {
+a.dso-secondary, a.dso-secondary:visited:not(:hover):not(:active), a.dso-secondary:focus-visible:not(:hover):not(:active) {
   color: #39870c;
 }
 a.dso-secondary:hover, a.dso-secondary:focus-visible {

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

@@ -149,6 +149,23 @@ export class DocumentComponent {
     get wijzigactieLabel() {
         return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
     }
+    /**
+     * Returns the rendered element of the STOP element with the given `eId` in the Kop or Inhoud of this Document
+     * Component, or `undefined` when it is not rendered (e.g. when the Document Component is closed). Nested Document
+     * Components are not searched.
+     *
+     * @param eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`.
+     */
+    async getElementByEId(eId) {
+        const ozonContents = Array.from(this.host.shadowRoot?.querySelectorAll("dso-ozon-content") ?? []);
+        for (const ozonContent of ozonContents) {
+            const element = await ozonContent.getElementByEId(eId);
+            if (element) {
+                return element;
+            }
+        }
+        return undefined;
+    }
     showBadge() {
         return !!this.badge && ((!this.open && this.mode === "document") || this.mode === "table-of-contents");
     }
@@ -189,17 +206,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: '4be20ab7aee103b4fa74716e330d8f3bb303a7a2', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ad0bb0c895f034617dcebb0b7a5e169e275933cd', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '019af6b3cd888664dcb3a61c56ef370aac23e6b9', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '3332aa7cd5bc63f595efaf28f8e85c47223b9388', class: "heading" }, h(Heading, { key: '4a9eb6dcafff4f27dc54adb9e25f256d93807a19', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '99d66b2be1f939c7351ce161855476b2603d64c1', 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: 'ae0f71c453c4b355e019f26c887dac9c2bf28e21' }, this.notApplicable && h("span", { key: 'dc88588bf92a9a427aef1b0357e1cc5dd6b81fb6', 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: 'c8c11b3cb466776aa48f83c6fb7465cee27d0998', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '64c3a71fad6bbbe6189201864b824266b5a1576b', 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: 'c9636820ae958525d71476f9de0419c000635535' }, h("dso-badge", { key: '3c700b6a68b9b658804ade20c189ed20f8356a54', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '7a1356ab6bbe892c09a194434d9b87090c275461', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '15039b5537c26a4821f8cfb193fce8c576e05687', class: "addons" }, this.label && (h("dso-label", { key: '1c04e2cb9d47a420a352f1d230440886360f8228', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'e91a3f5347d50a2fc1b5c9e16978dccb92188180', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: '05af9168ffda715965eaba35704b07f9de4561b3', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '78f338239147413df1d6d76a3cd7f7549cfe641d', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'c84e82557b445e56e08b82007181bcb7be27b159', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'be2397261bf865bbc177dda2472ebcdb4503fcac', class: "heading" }, h(Heading, { key: 'd5336abcabe851f2322f4a2ae503494130a1fbd8', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '89e490d03eb96b4e3359d92c04e7ae27c0455eff', 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: '817605bfe7797c514026ed197fd0b5e4432f1631' }, this.notApplicable && h("span", { key: 'dc659ed325646a1e009fe402dd6f77fbcb305a60', 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: '3f59789fbdaec36ecdf573d1511afba85e0cbc48', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'e1c7c30368afab10393303fac8de8cd32f453255', 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: '4c3f1f4db4f0769ca94138e320f65eda3a39bd81' }, h("dso-badge", { key: 'd5134e95ae47027c2ccf1541df8464cdb71e3dac', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '5ccb955eb18e79e7220cce2eb38167728b672d4f', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '685656f6513e240c46ee4ea7ef08e9e905526b27', class: "addons" }, this.label && (h("dso-label", { key: '6c87f0e9484b581b9d9b47b93fd3b2fb359beb3b', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'e82f81c206987a9fe556b0eb937bd7c9ab0f040c', 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: '38471391f4abddc9ac61665449e58e32fb8a349d', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'fe3aa98ca07fe542470d00c97114ae049fc7505a', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '075a41ffb5f2c984ea6f8a523c649219498f53dc', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'be2b41946539c18e6c33646a785875b89a42121b', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'abd850d5dc9968e99eddd82dd83d910a6a5d9c4c', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '1fa41e97bcf08136c9bf04d45ceb17bc4890e011', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '0724d483c74eb4d9a5bf98df1334a43c226dcf55', class: "content", part: "_content" }, h(AantekenAlert, { key: 'a0aa3ed13249655d663eb00e8fe4251c6beaefd4', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '9c66a737d583952bcf446069e946eb80d5874e5e', 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: 'f35afe9004c21d7a273b981473ff2503b2d4c42d', class: "children-container", part: "_children-container" }, h("slot", { key: '701ae6f0277914e8580c0591a73812c46dbd2f33' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '1b4b431d41764df6d983c184dc28fe626301ddff', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '0dfe316455dbddfd224125598a6d774dcb649565', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '7cbb6e8c8ff63926c969570991dc71f295ff4d6a', class: "content", part: "_content" }, h(AantekenAlert, { key: '71eac95537aad98792ab9a0e88eda74bbbb7b933', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '54d4957b8e7633e4ad29b5890ffee5e5f5e935e9', 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: 'bb4a06b75566e4cd3c32a78cbb66ec21c92cec85', class: "children-container", part: "_children-container" }, h("slot", { key: 'f4d6df1a465472b77b411693b2d46b13c1408579' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -926,5 +943,37 @@ export class DocumentComponent {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getElementByEId": {
+                "complexType": {
+                    "signature": "(eId: string) => Promise<HTMLElement | undefined>",
+                    "parameters": [{
+                            "name": "eId",
+                            "type": "string",
+                            "docs": "The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<HTMLElement | undefined>"
+                },
+                "docs": {
+                    "text": "Returns the rendered element of the STOP element with the given `eId` in the Kop or Inhoud of this Document\r\nComponent, or `undefined` when it is not rendered (e.g. when the Document Component is closed). Nested Document\r\nComponents are not searched.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "eId The `eId` attribute value of the STOP element, e.g. `chp_1__art_1.1__list_o_1__item_1`."
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
 }

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

@@ -70,7 +70,7 @@ export class DocumentComponentDemo {
             }
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" }), h("dso-label", { slot: "meta", status: "warning", compact: true }, "gewijzigde locatie")))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { type } = documentComponent;
@@ -207,7 +207,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '325c3f0c6cae4feecaf9e01fe74fc602a653f137', class: "dso-document-components" }, h("div", { key: 'df6ff8a61e2fefc28b9dace9ea88fcc2b6f0009e', class: "dso-navbar" }, h("ul", { key: '6b44f5260a57c2a296068aa9d122c31e3d8d6502', 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: 'fd300e2da9b2e29b46e29c3108e78f609e8b4e40', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'b79655f9c08bd2dd24761bb769cccb441ef11c01', class: "dso-document-components" }, h("div", { key: 'c40ddaad46f22defa626c174109128a346fe7b63', class: "dso-navbar" }, h("ul", { key: '844a9ebcb3693e00c5ce1b5da5cc989050fb90fa', 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: '46ee8e9d0e26b940323f951eb7ab746816054ce8', 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

@@ -17,7 +17,7 @@ export class DropdownMenuGroup {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const labelId = this.label ? uuidv4() : undefined;
-        return (h(Host, { key: '828445e3fce42f05e8821882721607aa830df4f3' }, h("div", { key: '3e6056d9280593d15dbc3bb5b8d429a09b41594a', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: '48d604d2cf034f3c59badd6805da5cd848b64e6e', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: '04b6137e817c71ac38a2c0a12957da78951823c7' }))));
+        return (h(Host, { key: 'cb0027f2d0b0abb79fade328eb567e184900c077' }, h("div", { key: 'c8f67e7347e7fbc08355da9514f3298a84e98800', "aria-labelledby": labelId, role: "group" }, this.label && (h("div", { key: 'ba5bb5e5cfe65ae66e81cd893a90b7d9ff05a201', id: labelId, class: clsx("group-label", { checkable }), role: "none" }, this.label)), h("slot", { key: 'df0be98b7e14b07269f82af471e73a050b56091b' }))));
     }
     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

@@ -56,14 +56,30 @@ button {
   text-decoration: none;
   white-space: nowrap;
 }
-a:hover, a:focus,
-button:hover,
+a:hover,
+button:hover {
+  background-color: #d7e7ce;
+  color: #191919;
+  text-decoration: none;
+}
+a:focus,
 button:focus {
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
+  background-color: #d7e7ce;
+  color: #191919;
   text-decoration: none;
 }
+a:focus-visible, :host(:focus-visible) a,
+button:focus-visible,
+:host(:focus-visible) button {
+  background-color: #d7e7ce;
+  color: #191919;
+  text-decoration: none;
+}
+a:active,
+button:active {
+  background-color: #1f472c;
+  color: #fff;
+}
 a dso-icon,
 button dso-icon {
   margin-inline: -12px 4px;
@@ -74,8 +90,8 @@ button dso-icon {
   padding-inline-start: 40px;
 }
 
-.checked a:not(:focus),
-.checked button:not(:focus) {
-  background-color: #39870c;
+.checked a:not(:focus):not(:hover):not(:active),
+.checked button:not(:focus):not(:hover):not(:active) {
+  background-color: #275937;
   color: #fff;
 }

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

@@ -28,7 +28,7 @@ export class DropdownMenuItem {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const checked = checkable ? Boolean(this.checked) : undefined;
-        return (h(Host, { key: '3e62950ca227a74a180bf1f945f8221a2b9ac0fd' }, h("div", { key: '3a343d69e9fce9a4ef288798a03a6b475d9fe70f', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: 'fa7dc161a2f76eb3c8cc5cc6612270c9fc48ed34', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'a3cd2eefa6c8285fedef6d6a5141130b9000c9a7', icon: "check" }), h("slot", { key: 'd322c46f64ffdeb30b0fe3d789d7d928e635f8dc' }))), this.type === "link" && this.href && (h("a", { key: '067d0ea97bcca792a7e3e21b8958ba7d3a095e58', 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: '1b1a699d1de520faef59c3e2ea0db73a1b3102b6', icon: "check" }), h("slot", { key: '43c6db81a62db3367081ceb256b370ed726159f3' }))))));
+        return (h(Host, { key: '05f80a963e8e072d9edd69b51f76a24f1d5bafad' }, h("div", { key: 'a567953db315a26ff379ca0f7aa34b6a04af8e9d', role: "none", class: clsx([{ checkable, checked }]) }, this.type === "button" && (h("button", { key: '70e8ac067cf456db30db14f74d5a7bcd28144648', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && h("dso-icon", { key: 'fe841bce3e8ff1f42c918b4022acff5d4d40a57d', icon: "check" }), h("slot", { key: 'e139df59e9efaba82a06da70a93bdd15b5fc054e' }))), this.type === "link" && this.href && (h("a", { key: 'e75a99ff0570504f5262c696cee598d0970dbd5c', 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: 'a6f4f66336bd543f7909fd3906bbfb9269d76e94', icon: "check" }), h("slot", { key: 'd47ef38c81928ce986e5f61cbb219ea5c6046aca' }))))));
     }
     static get is() { return "dso-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -206,7 +206,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: '0e2e2c0226bec7638b3d60baab089708191dd6eb', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '4e11b83883f18b991eab4c219b4bebb2eb1317fb', 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: '7d2d0724c47777fc68d815cc5d92c0d5ac996ab6', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: 'ab88d386a9d8974162728f663bda7e279368f04b', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '3e1dda4a8dcd2678cdf96a6125124384444051ab' }, h("slot", { key: '8954e92ac331853d1dd3d7a0089caf4754cdd3e8' })))));
+        return (h(Host, { key: 'a8c132a5eb46f573a3f8b5e5d63d66ab9bc6b19d', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '1b2972e319219197a11d1f0aa8332058e713dd67', 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: '0f750ace35248b6c4dbd769f3eaff7747931f2da', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '2b656152a020fb097d2149ab7fe4dc27896fdf9f', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '8757e3267f3e3eb7866d81c80b126cfd095a4e6d' }, h("slot", { key: 'b8e15464246f43f0d2eba2a5b9a73abf7ee2cdda' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.css

@@ -30,6 +30,10 @@
   display: block;
 }
 
+.slot-container {
+  min-inline-size: 0;
+}
+
 *,
 *::after,
 *::before {

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

@@ -39,10 +39,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: 'a0469ae8e68f3d121fcdab6fc08b8a92018d9ab0', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'de84de7e2f7c6718d7ca60d992e996683d4c3870', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '1fbfd59136f816df3d8b44c6c7dd54c8201435aa', class: "slot-container" }, h("slot", { key: '6e7247668ff0ea70589c3b654a2b52b22379a717' }))));
+            }) }, h("div", { key: '66e7f431f9e5c6f29e935e350aef5aee3f4171fc', class: "slot-container" }, h("slot", { key: '95955a13fafd1d9bc70e8b4d5c6bbad6f0836999' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid-column/grid-column.js

@@ -87,7 +87,7 @@ export class GridColumn {
         this.resizeObserver = undefined;
     }
     render() {
-        return (h(Host, { key: '603befb14663a71590e342c590f3ebde4d08be42' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
+        return (h(Host, { key: '7ac4b4deba65d96e34fb302c57e46dc4ed3e4e2d' }, this.overlayActive ? (h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, h("slot", null))) : (h("div", { class: "grid-column-content" }, h("slot", null)))));
     }
     static get is() { return "dso-grid-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -278,7 +278,7 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: 'cb1ed3299e9c55352cab476696bd2d6ad94cbd54', "is-compact": this.isCompact }, h("div", { key: '218cefd65ca18da0237e39fba0aba06259119254', class: "dso-header" }, h("div", { key: 'c7681803acf271892e46819e3d9568ebc3ed849a', class: "logo-container" }, h("slot", { key: 'cba4cf96314214ee2af03501ede754c879d31fec', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '6fb9bc42f5695371238cb2ddc0c9b2950e043e94', "is-compact": this.isCompact }, h("div", { key: '7d50059f45edbac145ec85a14a2ead09c00793a2', class: "dso-header" }, h("div", { key: 'f68975b5572e0dd783360e6d288af7d101b19fbe', class: "logo-container" }, h("slot", { key: 'a578a1341985819c2b4bec868ffa43d6090290ea', name: "logo" })), this.renderHeaderSession(), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/hero-image/hero-image.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
  */
 export class HeroImage {
     render() {
-        return (h(Host, { key: '58986f7f8ff51ad08e4a6cecfc8b69b7f534ce59' }, h("slot", { key: '3de9aa7aeb53413ddc4bf442a8e20227a8f94710', name: "image" }), h("div", { key: '16a40d270ae8eebd3213222a20672c6213302d97', class: "hero-image-container" }, h("slot", { key: '8a6817e250897a98ad525a1ca5f5775e04814ef3' }))));
+        return (h(Host, { key: 'b8c10e49c8bc6855edb0f400130a48f027ea4415' }, h("slot", { key: '57ae247c1298f94bf090a4446e154cbcca2c0927', name: "image" }), h("div", { key: '79b3b7d18948570f7dc119b39f0551563acdd71c', class: "hero-image-container" }, h("slot", { key: '8ce6bcaf5a15fe60d872f544c40b1c01e1ddc3b5' }))));
     }
     static get is() { return "dso-hero-image"; }
     static get encapsulation() { return "shadow"; }

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

@@ -6,7 +6,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '91d00560a3617308d002684f4c67c940b16dc1c7', "has-counter": hasCounter }, hasCounter && (h("div", { key: 'ed7997c8e77b13b44e5a567ee31116ba937fc6c2', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '4993d27042a6a7839da8fd679625dbe17a1cd3b2', name: "icon" }))), h("slot", { key: 'bfab78815718775c72114b51730d229c1d2b3615' })));
+        return (h(Host, { key: '4b0f57c318c4955ce158b47d8c358153247f8be0', "has-counter": hasCounter }, hasCounter && (h("div", { key: '60bf0e921a5200f528bd93b4a765b8321e70a199', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? h("slot", { key: '1657d802aaa17d882683486c65858033095388a5', name: "icon" }))), h("slot", { key: 'a8a26a6a3977e7d7ad7249f2fa6f3ce35d5a4818' })));
     }
     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: '0ddccba216f32216a5ce222cc11b003bacdb28af', class: "history-item" }, h("div", { key: 'b8e3e1c7acc1dfdded03f8829d75362d82bf4920', class: "history-item-date" }, h("slot", { key: 'a02d02b411a8827bead6be05cbd4fd6ab22feeb4', name: "date" })), h("div", { key: 'e83882c2988f87d822126947f6b954682496d6bc', class: "history-item-content" }, h("div", { key: '4409043a85b9ef30d21a64c2119fd6dab0e320a7', class: "history-item-status-message" }, h("dso-icon", { key: 'e5096c926aec70dee1471f1cfa01d6a8bb050200', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'a7c923bd536c1b02676df779216186f4a49856d7', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '2db028e5addc28fbd82210129719f86363395c4b', class: "history-item-title" }, h("a", { key: '871157e769f9dc0a2af5809e60ca3292ad847f65', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '90bac7607cbe8a838c8f9086c825591e34d7fd35', class: "history-item-title-content" }, h("slot", { key: '0c4e9921ace20c57e55d2fbc14019b173624209e', name: "title" })), "\u2060", h("dso-icon", { key: 'd3b03e7226a6b0e8dce037a0a390367028490a77', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: 'ce9f3ced38791d38fb8778cd548fa8d969c0f959', class: "history-item-explanation" }, h("slot", { key: '80156b40b6367688076c34684ac726e3904edae3', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '13f461a66e60fed780b3611289b70efe9bc21bc5', class: "history-item-warning" }, h("dso-icon", { key: '750ed3861b34c53fd0bdcf407da4bd8e566d9d92', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: '50377ddabb3c9f22f70c182e44a520cac18397c6', name: "warning" }))))));
+        return (h("div", { key: 'd379c0d7c1e7ee6408dacf352b96db6095e364fb', class: "history-item" }, h("div", { key: 'c2f7da0d6fac2de1d48159e83186ad233d2fb5b3', class: "history-item-date" }, h("slot", { key: 'f4a8f70a314f4a79ab9293aeed4fbbecbe7e67d0', name: "date" })), h("div", { key: 'a3eb1f2d8c6cdae25863a93c3bab6e9a4fe8ad8a', class: "history-item-content" }, h("div", { key: 'afa986699dfa3ff2ecb45e88ec5badc319886a9d', class: "history-item-status-message" }, h("dso-icon", { key: '7f9fb3348e815a5373c1220233441b3fd0d28d10', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'e9ad0a6f2a492b7c115907a9d134c9b140bade5a', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '891fd46540c0fc4b742d3aa2bab1c9691be8cca2', class: "history-item-title" }, h("a", { key: '07f79622d1b84b350826353eb58cd2a6145eb0b3', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, h("span", { key: '4a14f723069e8d1f3595cc32c49ee4dc5a916f05', class: "history-item-title-content" }, h("slot", { key: '0ec1727ca51f1f763d29021ff14c1068abacf86a', name: "title" })), "\u2060", h("dso-icon", { key: '8fa39e3809b584b6d9ecc4894f99da9cba3bb4a2', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (h("div", { key: '90b2d977df806078ef094eac5415016b5b40cd39', class: "history-item-explanation" }, h("slot", { key: '3340cd05e872bdbe0f2d01d89e950ace23c24392', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'e470ead9a3835a3c871d044d57a8227a4f1a9a82', class: "history-item-warning" }, h("dso-icon", { key: '016db354848fbe80954fbcbe848ff0abdcfb97c9', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'f2e94fe5f704f4341ebbac394606c762e842c8c9', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,8 +46,17 @@ export class IconButton {
     disconnectedCallback() {
         this.tooltipController.dispose();
     }
+    componentDidRender() {
+        if (this.buttonElRef) {
+            // Stencil's DOM types do not yet include ARIA element reflection properties.
+            Object.assign(this.buttonElRef, {
+                ariaControlsElements: this.controlsElement ? [this.controlsElement] : null,
+                ariaDescribedByElements: this.describedByElement ? [this.describedByElement] : null,
+            });
+        }
+    }
     render() {
-        return (h("button", { key: '7d3bf4a79f897ec497bd7309b4f841bfa894a577', 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: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '9bf48abb6605ca685ce380b65ffaeacd66bb12d2', 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: '0815abe603bc590898366bf6ffafb51a7c4d71a1', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '5aa6aa5397384dde536db5e613f5eae5886d838f', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -201,6 +210,50 @@ export class IconButton {
                 "reflect": true,
                 "attribute": "expanded"
             },
+            "controlsElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The element controlled by the button. Sets `ariaControlsElements` on the native button when supported. Intended\r\nfor a wrapping component passing an element across a shadow boundary."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "describedByElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement | undefined",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The element describing the button. Sets `ariaDescribedByElements` on the native button when supported. Intended\r\nfor a wrapping component passing an element across a shadow boundary."
+                },
+                "getter": false,
+                "setter": false
+            },
             "toggled": {
                 "type": "boolean",
                 "mutable": false,