@dso-toolkit/core 100.1.0 → 100.3.0

package/dist/cjs/dso-banner.cjs.entry.js

@@ -26,9 +26,9 @@ const Banner = class {
         };
     }
     render() {
-        return (index.h("section", { key: '8fadd7b1cb84bef4b0a9a5c4e456267986dec74e', class: clsx.clsx("dso-banner", `alert-${this.status}`, {
+        return (index.h("section", { key: '106ac9196066d1ff5def3b53f0c5e044da597eae', class: clsx.clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, index.h("div", { key: '6e4dd57d2e822e485460ebd1ec024b178bde1e8a', class: clsx.clsx("banner-inner", { icon: this.icon }) }, (this.icon || !this.compact) && index.h("dso-icon", { key: 'd0dae7ceffa21d33d12048b770ca2d4f21a45e79', icon: this.statusIcons[this.status] }), index.h("slot", { key: '4ba8d8d9e15b9fec8fd08b036dcfe1c7c885fd31' }))));
+            }), role: "alert" }, index.h("div", { key: '46dddb7338aafddb2ef131a151f44ebd48171188', class: clsx.clsx("banner-inner", { icon: this.icon }) }, (this.icon || !this.compact) && index.h("dso-icon", { key: 'b9d7a93ef95ed532be66b859ec75ee5321233ace', icon: this.statusIcons[this.status] }), index.h("slot", { key: '09d91905bcc8bdfb1e29bfad8722a15667a72667' }))));
     }
 };
 Banner.style = bannerCss();

package/dist/cjs/dso-button-group.cjs.entry.js

@@ -33,7 +33,7 @@ const ButtonGroup = class {
         return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (index.h("div", { key: '4c1665e30ec5481f665606d80e7c74bf374aa5aa', class: clsx.clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, index.h("slot", { key: '9f65cbb7e46e5c9487350d2980842750fc0d6e09' })));
+        return (index.h("div", { key: 'c14ecdbcac58f6e145a9de21d300d365790fa986', class: clsx.clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, index.h("slot", { key: 'e8fa15a41bfe8cd3c2e13aab3e0aab0b629a0c08' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-card-container.cjs.entry.js

@@ -13,7 +13,7 @@ const CardContainer = class {
         this.mode = "list";
     }
     render() {
-        return (index.h(index.Fragment, null, this.mode === "list" && (index.h("ul", { key: '261c4521679c10fe8d25211206c8533b9772e621', class: "dso-card-list" }, index.h("slot", { key: 'b6ff9fe3ada243434d8c94c8fd009062ba411de1' }))), this.mode === "grid" && (index.h("div", { key: '696d674ff3bb7228b261e4cbf22d83a6b1dd660b', class: "dso-card-grid" }, index.h("slot", { key: 'b3ee8d37789427a1a90b70c281764398315482d7' })))));
+        return (index.h(index.Fragment, null, this.mode === "list" && (index.h("ul", { key: 'f8989755883a9c9c965a88756a6469684ca18cbc', class: "dso-card-list" }, index.h("slot", { key: '0c51362a275089916ae2ba11da1d850296869ff2' }))), this.mode === "grid" && (index.h("div", { key: '7f17c3ba5ef29157b52355b3a6f59418bbafc29f', class: "dso-card-grid" }, index.h("slot", { key: '3a94cef7389c8dfdf2761a858c1405ed2df10258' })))));
     }
 };
 CardContainer.style = cardContainerCss();

package/dist/cjs/dso-card.cjs.entry.js

@@ -32,8 +32,8 @@ const Card = class {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (index.h(index.Host, { key: 'af11f19afbdf5c690974495992cf86ccf62ae734', "is-selectable": isSelectable }, index.h("div", { key: '2f125ec9d9b5a69fd7cdc4fb01ea4e00cec96ad2', class: "dso-card-container" }, index.h("div", { key: 'eab8702f667cb0843dadfa38f2d6cb71dfb7bba7', class: "dso-card-selectable", hidden: !isSelectable }, index.h("slot", { key: '417eefbcbe18d47863e7d1b19be0adf9b0571e8b', name: "selectable" })), index.h("div", { key: 'd64d73ebb8167eb572ce3f5e3da23826b93fcd67', class: "dso-card-heading" }, (this.mode === "extern" && (index.h("a", { key: '0ae5c4a841f6dba0fb8c3fc60a831862b9945356', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: 'ef75fd392f3d16a2fb0b6873c5b2578096ac3a27', name: "heading" }), index.h("dso-icon", { key: 'f953d9c38873aebb19f16084134c214562a46ae0', icon: "external-link" }), index.h("span", { key: '1cd61878dcf755959690f2acf1a45ac3924abbf3', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (index.h("a", { key: 'd812c16e45b5268f84d55ad6b03552ec851422e1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: '3d7e2e421bf95b955977d73361dad5e5d9632f93', name: "heading" }), index.h("dso-icon", { key: '915c00ebb300e2e23211b46dfa298ed2bdda15bc', icon: "download" })))) || (index.h("a", { key: '2261b31aece339c492f1c0eb6121a2fa2b25db8d', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: '62d7f13fe2e9049dfea479b9d50409f80c9fbb2c', name: "heading" }), index.h("dso-icon", { key: 'c229b6343a9aea2627bec89d1d028a792de86c37', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && index.h("slot", { key: '41e52361073ea58b80283d791c2457b774c468f5', name: "interactions" })), index.h("div", { key: 'ec8aa4d8ffc9f28b27f2e049485700d66999a21b', class: "dso-card-content" }, index.h("slot", { key: '182b5bf19a63c16a4519eac84f9b941e0a81e472', name: "content" })))));
+        return (index.h(index.Host, { key: '239305b16722e3ef5d1df2f5a34dc1c8bd6fa941', "is-selectable": isSelectable }, index.h("div", { key: 'dda09722c769d5a20efb3de4c7d03ef4e676c051', class: "dso-card-container" }, index.h("div", { key: 'ae42d84176d062922bdaebce517d984f36d3410c', class: "dso-card-selectable", hidden: !isSelectable }, index.h("slot", { key: '4734836c7971885e8ae84fb919a5aceaa9713f1c', name: "selectable" })), index.h("div", { key: '67035bf8eeb78bdf5ec00d5d5e63aaeb36600971', class: "dso-card-heading" }, (this.mode === "extern" && (index.h("a", { key: '52ec88ae6644d176b676b38f3b5a3b8a4f18d8fb', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: 'b0a930073a356cc0a85e99a738f8d37aafbe490e', name: "heading" }), index.h("dso-icon", { key: '03f039eddd70c41ddb8d95cf133c0917a9073503', icon: "external-link" }), index.h("span", { key: '63f6fb7bc9ecf562015ae04825f43a8f5885c946', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (index.h("a", { key: 'ca38710b591fad28865552b9603dd1e90254535d', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: '2e85110d0435a74373bcc8c46d2b88e21757e9d4', name: "heading" }), index.h("dso-icon", { key: '05101c81b6645297f6fe3b37312bc95f6d05c8bf', icon: "download" })))) || (index.h("a", { key: '6a02cb73fd4cff8d17bdad494fe047a13c93ba85', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("slot", { key: 'e5631df37f950eefad86d94040b7f0fc0ae720b8', name: "heading" }), index.h("dso-icon", { key: '05ba6344294489c0c9299490d126906920d173f9', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && index.h("slot", { key: '7e92b0ace856f9bcc586040cdd2b1c3eea8ca388', name: "interactions" })), index.h("div", { key: 'c994ab7a513a7cee91b1f4b236328224c465831f', class: "dso-card-content" }, index.h("slot", { key: 'ba532ccd9ccaa53dccacb6b5cd392bb042d20fcb', name: "content" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-contact-information.cjs.entry.js

@@ -9,7 +9,7 @@ const ContactInformation = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: '375dbed73d8f02ad62b5b84aecc05e26ff46d8cc', class: "dso-contact-information" }, index.h("slot", { key: '847f95d644ef15186aaab9daf486cc71eda87c41', name: "heading" }), index.h("slot", { key: 'c7a73ccd61825a610478115cfec9b50ef192bcba', name: "anchor-items" }), index.h("slot", { key: 'ab039fea18a91acdb778ed9e6cdfc4cbf545d623', name: "info-items" })));
+        return (index.h("div", { key: '0745ce0fe81c6087b6d42904bf45865d12e42a88', class: "dso-contact-information" }, index.h("slot", { key: 'a97cd70246f1ee43c6b2f8f2e73b90719765fdc3', name: "heading" }), index.h("slot", { key: 'bebe2ba23a7a36685196e90028c1bf9dd97970a3', name: "anchor-items" }), index.h("slot", { key: '20f3eca7864ca85d136588ab7b237611e068acb3', name: "info-items" })));
     }
 };
 ContactInformation.style = contactInformationCss();

package/dist/cjs/dso-cursor-tooltip.cjs.entry.js

@@ -9,7 +9,7 @@ const CursorTooltip = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '2ed4e32448fad331ea79904f4a067f6c06d973e1', class: "dso-cursor-tooltip" }, index.h("slot", { key: '8216cea26f3e02e5dbe15272558faf3110f02b17' })));
+        return (index.h(index.Host, { key: '347627ca492963e1ab8a2e8cb74d75d757d524aa', class: "dso-cursor-tooltip" }, index.h("slot", { key: '6e7fd839fcf3f7ac9dd608598de54f4f4cb3ae06' })));
     }
 };
 CursorTooltip.style = cursorTooltipCss();

package/dist/cjs/dso-date-picker.cjs.entry.js

@@ -148,7 +148,7 @@ const DsoDatePicker = class {
         return undefined;
     }
     render() {
-        return (index.h("input", { key: 'f41dd14bff4e5634076e2c032df824f0ca9f7f83', 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 (index.h("input", { key: '181c385766ca51b1e53cc0d086bb9283c45446a6', 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 }));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/dso-document-card.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-CfwUrDXc.js');
 var isModifiedEvent = require('./is-modified-event-Dh9YsHw8.js');
 
-const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .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)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dso-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}`;
+const documentCardCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block}.dso-document-card-container{padding-block:16px;padding-inline:16px;inline-size:100%}.dso-document-card-container .dso-document-card-heading{align-items:center;display:flex}@media screen and (max-width: 480px){.dso-document-card-container .dso-document-card-heading{flex-wrap:wrap}}.dso-document-card-container:has(.dso-document-card-heading a:is(:hover,:focus-visible)){background-color:#f2f2f2}:host([active]:not([active=false])) .dso-document-card-container{background-color:#e5e5e5}::slotted([slot=heading]){display:inline !important;color:#275937 !important;font-size:1.125em !important;font-weight:700 !important;line-height:1.25 !important;margin-block-end:0 !important;margin-block-start:0 !important}.heading-anchor{color:#275937;text-decoration:none}.heading-anchor:hover{color:#275937;text-decoration:underline}.heading-anchor:visited{color:#275937}.heading-anchor .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)}.heading-anchor .icon-container{position:relative;padding-inline-end:24px}.heading-anchor .icon-container dso-icon{position:absolute;inset-inline-end:0;inset-block-end:-3px;block-size:24px;inline-size:24px}::slotted([slot=type]){--_dso-info-button-margin-inline-start:0;display:flex !important;gap:8px !important}.dso-document-card-heading+.dso-document-card-type,.dso-document-card-heading+.dso-document-card-status,.dso-document-card-type+.dso-document-card-status,.dso-document-card-status+.dso-document-card-labels{margin-block-start:8px}::slotted([slot=meta]){margin-inline-end:8px}::slotted([slot=status]){margin-inline-end:8px}::slotted([slot=labels]){margin-block-end:0 !important}`;
 
 const DocumentCard = class {
     constructor(hostRef) {
@@ -30,8 +30,11 @@ const DocumentCard = class {
     get interactionsSlottedElement() {
         return this.host.querySelector("[slot='interactions']");
     }
+    get labelsSlottedElement() {
+        return this.host.querySelector("[slot='labels']");
+    }
     render() {
-        return (index.h("div", { key: '4046f10a2e45993afefe33ab3f92c14d6b6963d6', class: "dso-document-card-container" }, index.h("div", { key: '0d72ed7262faf99184904eed86301cfacd77d09b', class: "dso-document-card-heading" }, index.h("a", { key: '1edb52c2ad08a63bdf2d786ed36a33f6477c434c', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { key: '2b7ea520003646ef4d0f93f022f6a9ccc355a67d', class: "icon-container" }, index.h("dso-icon", { key: '3bea6d5d33dbcfd143d58a8e3b1777cc10876944', icon: "chevron-right" }), index.h("slot", { key: 'cee11afecd7ade47d47bde74d37587decebabc49', name: "heading" })))), index.h("div", { key: '4d82525ec2c83fe9a72b785b6ce458a37d4fe915', class: "dso-document-card-type" }, index.h("slot", { key: '69ebf7af4c44cf5afe03074fcf8639a903fb3f36', name: "type" })), index.h("div", { key: '7eea440b8780cf2a541c74f5f644358a8c8b7961', class: "dso-document-card-status" }, this.metaSlottedElement !== null && index.h("slot", { key: '0370eeeb1dc83e5120e77e996f524d60b28afc40', name: "meta" }), index.h("slot", { key: '0750731813a2890b40cbbb02d474452e14d80eb2', name: "status" }), this.interactionsSlottedElement !== null && index.h("slot", { key: '8e8256e3895a7c90f807430f3b84c603355d0950', name: "interactions" }))));
+        return (index.h("div", { key: 'e6674c35c42f2a3cc8f676629a286b86cb1f3a74', class: "dso-document-card-container" }, index.h("div", { key: '9b7ad2d6f3322730273d58da4a6b9ae0def142e5', class: "dso-document-card-heading" }, index.h("a", { key: '9feab84beb061e0319bcbb1de7189941453936e0', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, index.h("span", { key: 'cce85a9f8123be2cd56201fe7075c8a97e1c79ff', class: "icon-container" }, index.h("dso-icon", { key: 'b40a8c6b18f89faf65af0a0b948790d508dbb880', icon: "chevron-right" }), index.h("slot", { key: '85c2d009d0186509269d48aa09d2ca91d9bb7565', name: "heading" })))), index.h("div", { key: 'de7658904c9a7edccbd36929d6dde671e9e3ceb0', class: "dso-document-card-type" }, index.h("slot", { key: '3db3fde661962548bdb17e61261abd2ee2f396e0', name: "type" })), index.h("div", { key: 'ef8420e2f8a1aad65a91928b8e32acbbbe10b1f4', class: "dso-document-card-status" }, this.metaSlottedElement !== null && index.h("slot", { key: 'e76b3d46409a8802b55ba62e55c56a12e6de528a', name: "meta" }), index.h("slot", { key: '27557527b596bca2227289345975e0ab2c54a496', name: "status" }), this.interactionsSlottedElement !== null && index.h("slot", { key: 'a89235cb3ef76a3aa49f3d575d9016cdcc02e74a', name: "interactions" })), this.labelsSlottedElement !== null && (index.h("div", { key: '2b49e7e3ef6bd4c2e1adab954c470e9e958a6d66', class: "dso-document-card-labels" }, index.h("slot", { key: '3ea9405369563511d852abc07d41a673f2ae3a70', name: "labels" })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu-group.cjs.entry.js

@@ -22,7 +22,7 @@ const DropdownMenuGroup = class {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const labelId = this.label ? v4.v4() : undefined;
-        return (index.h(index.Host, { key: 'f639886cfa9c18db2e9c3736a2e73f57ca25ec6d' }, index.h("div", { key: 'b1e4bfaa31fb2dc7d8de3ca5000bcfbd6a92a953', "aria-labelledby": labelId, role: "group" }, this.label && (index.h("div", { key: 'd6478020f5809b0de212b31a8dca44a08ee54844', id: labelId, class: clsx.clsx("group-label", { checkable }), role: "none" }, this.label)), index.h("slot", { key: '4d41b59001ef3446dcb5cce821be8301a147ea62' }))));
+        return (index.h(index.Host, { key: 'a47b9cc30b25077ebf8d87e42593b6471e459cd2' }, index.h("div", { key: '4731d76aabb0cacbe3a645b6f3b11a961d0a710f', "aria-labelledby": labelId, role: "group" }, this.label && (index.h("div", { key: '64f94ef64b5217e3b23aad96df535584ff7977d5', id: labelId, class: clsx.clsx("group-label", { checkable }), role: "none" }, this.label)), index.h("slot", { key: '94f81e77530b754a83ef748cb5ae6897fa764fb4' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu-item.cjs.entry.js

@@ -32,7 +32,7 @@ const DropdownMenuItem = class {
     render() {
         const checkable = this.dropdownMenuState?.checkable;
         const checked = checkable ? Boolean(this.checked) : undefined;
-        return (index.h(index.Host, { key: 'a04191fcbe7dffcee56715f8951b2b277d3877f2' }, index.h("div", { key: '43716fef5348565bd4c1561d78daf0ae6cc70aba', role: "none", class: clsx.clsx([{ checkable, checked }]) }, this.type === "button" && (index.h("button", { key: 'b0b85b023be5f29172ab0467e2289f1a83aff5fd', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && index.h("dso-icon", { key: '7cdd63f6e510af0a74aded1e682c41fafd7afde1', icon: "check" }), index.h("slot", { key: '241b0076fc3ef8e42f8a3a728a120ec71209dbd9' }))), this.type === "link" && this.href && (index.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 && index.h("dso-icon", { key: '8e54196b57b148312c2c03e6d254b8bd47790abe', icon: "check" }), index.h("slot", { key: '5c72fedaaee7841043e4a0249acfe3edcf3eabbb' }))))));
+        return (index.h(index.Host, { key: '5a958be40201eb5abc39592736e65938b5c45de1' }, index.h("div", { key: 'aa535ff81401a9c12e123e913dd19374cd4713cc', role: "none", class: clsx.clsx([{ checkable, checked }]) }, this.type === "button" && (index.h("button", { key: '6ae9656516c19afd1e2c5c22c8678f93d2c41eff', type: "button", role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && index.h("dso-icon", { key: '8ab417ad11caeb700a8b9650b1c24772e59cc8a3', icon: "check" }), index.h("slot", { key: '4e7ebcda5cd7ba3469976999bf1e50fd78bf6a9b' }))), this.type === "link" && this.href && (index.h("a", { key: '3ac7e35aa1db310ec3816e2814c3ab3e7b078701', href: this.href, role: checkable ? "menuitemradio" : "menuitem", "aria-checked": checked?.toString(), onClick: this.handleClick, ref: (element) => (this.anchorOrButtonRef = element) }, checkable && checked && index.h("dso-icon", { key: 'be9f20d4269a8dad7df6f8a843b91fb6da46e70d', icon: "check" }), index.h("slot", { key: 'a2396cb075a7f91a8d3a766e3509a34eac7f7367' }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-dropdown-menu.cjs.entry.js

@@ -206,7 +206,7 @@ const DropdownMenu = class {
     }
     render() {
         const buttonId = v4.v4();
-        return (index.h(index.Host, { key: '86c4a174ec1a4f8083f6e13728bef4d0fbf73d2b', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (index.h("button", { key: '6b93303a8ee2717870bc52147667485e9f56c0cb', 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, index.h("dso-icon", { key: '02d4af678a2de9e68c6c7983279e8a8af1b221d5', icon: this.open ? "chevron-up" : "chevron-down" }))), index.h("div", { key: '0653885c62d4e5f9e6567cd1a06ef1f60c31bd50', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, index.h("dso-scrollable", { key: '008a6527bce7398d5bf016431c90343011b62596' }, index.h("slot", { key: 'cbfdd95cd211485fc8672e9dff1f3bb3ed233d99' })))));
+        return (index.h(index.Host, { key: 'd6eecca58b117e847ed5e2d6c4749ccf1cf45ade', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (index.h("button", { key: '7bd4e3718dd56a7ed820fd7a0bff73299387bca0', 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, index.h("dso-icon", { key: 'f3db2d02fb532d0dce562de99447be5d2ba93111', icon: this.open ? "chevron-up" : "chevron-down" }))), index.h("div", { key: 'b599fc40124282b4afd1f78e346dd736717ece81', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, index.h("dso-scrollable", { key: 'ab2517807d8a940ce8d4fae40f9d657b416724dc' }, index.h("slot", { key: '746e632a7bf1e9e7d585dcf71660ef2944799db8' })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/dso-grid-column.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var index = require('./index-CfwUrDXc.js');
+
+const gridColumnCss = () => `:host{display:block;position:relative;min-block-size:1px;padding-inline-end:16px;padding-inline-start:16px;float:inline-start;inline-size:100%}:host([columns~=xs-1]){inline-size:8.3333333333%}:host([columns~=xs-2]){inline-size:16.6666666667%}:host([columns~=xs-3]){inline-size:25%}:host([columns~=xs-4]){inline-size:33.3333333333%}:host([columns~=xs-5]){inline-size:41.6666666667%}:host([columns~=xs-6]){inline-size:50%}:host([columns~=xs-7]){inline-size:58.3333333333%}:host([columns~=xs-8]){inline-size:66.6666666667%}:host([columns~=xs-9]){inline-size:75%}:host([columns~=xs-10]){inline-size:83.3333333333%}:host([columns~=xs-11]){inline-size:91.6666666667%}:host([columns~=xs-12]){inline-size:100%}@media (min-width: 768px){:host([columns~=sm-1]){inline-size:8.3333333333%}}@media (min-width: 768px){:host([columns~=sm-2]){inline-size:16.6666666667%}}@media (min-width: 768px){:host([columns~=sm-3]){inline-size:25%}}@media (min-width: 768px){:host([columns~=sm-4]){inline-size:33.3333333333%}}@media (min-width: 768px){:host([columns~=sm-5]){inline-size:41.6666666667%}}@media (min-width: 768px){:host([columns~=sm-6]){inline-size:50%}}@media (min-width: 768px){:host([columns~=sm-7]){inline-size:58.3333333333%}}@media (min-width: 768px){:host([columns~=sm-8]){inline-size:66.6666666667%}}@media (min-width: 768px){:host([columns~=sm-9]){inline-size:75%}}@media (min-width: 768px){:host([columns~=sm-10]){inline-size:83.3333333333%}}@media (min-width: 768px){:host([columns~=sm-11]){inline-size:91.6666666667%}}@media (min-width: 768px){:host([columns~=sm-12]){inline-size:100%}}@media (min-width: 992px){:host([columns~=md-1]){inline-size:8.3333333333%}}@media (min-width: 992px){:host([columns~=md-2]){inline-size:16.6666666667%}}@media (min-width: 992px){:host([columns~=md-3]){inline-size:25%}}@media (min-width: 992px){:host([columns~=md-4]){inline-size:33.3333333333%}}@media (min-width: 992px){:host([columns~=md-5]){inline-size:41.6666666667%}}@media (min-width: 992px){:host([columns~=md-6]){inline-size:50%}}@media (min-width: 992px){:host([columns~=md-7]){inline-size:58.3333333333%}}@media (min-width: 992px){:host([columns~=md-8]){inline-size:66.6666666667%}}@media (min-width: 992px){:host([columns~=md-9]){inline-size:75%}}@media (min-width: 992px){:host([columns~=md-10]){inline-size:83.3333333333%}}@media (min-width: 992px){:host([columns~=md-11]){inline-size:91.6666666667%}}@media (min-width: 992px){:host([columns~=md-12]){inline-size:100%}}@media (min-width: 1200px){:host([columns~=lg-1]){inline-size:8.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-2]){inline-size:16.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-3]){inline-size:25%}}@media (min-width: 1200px){:host([columns~=lg-4]){inline-size:33.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-5]){inline-size:41.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-6]){inline-size:50%}}@media (min-width: 1200px){:host([columns~=lg-7]){inline-size:58.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-8]){inline-size:66.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-9]){inline-size:75%}}@media (min-width: 1200px){:host([columns~=lg-10]){inline-size:83.3333333333%}}@media (min-width: 1200px){:host([columns~=lg-11]){inline-size:91.6666666667%}}@media (min-width: 1200px){:host([columns~=lg-12]){inline-size:100%}}dialog.grid-column-content{position:absolute;inset-block-start:var(--_dso-grid-column-overlay-inset-block-start);inset-inline-start:var(--_dso-grid-column-overlay-inset-inline-start);inline-size:var(--_dso-grid-column-overlay-inline-size);max-inline-size:none;max-block-size:none;margin:0;border:0;padding:0;background-color:#fff}dialog.grid-column-content::backdrop{background-color:rgba(255, 255, 255, 0.6)}`;
+
+const overlayMediaQuery = "(min-width: 768px)";
+const GridColumn = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoClose = index.createEvent(this, "dsoClose", 3);
+        /**
+         * When set, the column content expands to the full width of the row and renders as a modal overlay with a backdrop.
+         * The column keeps its own place in the row; the overlay panel is anchored to the row and scrolls with the page.
+         * Below the sm breakpoint the overlay does not apply and the content stays in the flow of the page.
+         */
+        this.overlay = false;
+        this.overlayActive = false;
+        this.syncOverlayActive = () => {
+            this.overlayActive = this.overlay && (this.mediaQueryList?.matches ?? false);
+        };
+        this.handleDialogClick = (event) => {
+            if (!this.dialogElement || event.target !== this.dialogElement) {
+                return;
+            }
+            const { left, right, top, bottom } = this.dialogElement.getBoundingClientRect();
+            if (event.clientX < left || event.clientX > right || event.clientY < top || event.clientY > bottom) {
+                this.dsoClose.emit({ originalEvent: event });
+            }
+        };
+        this.handleDialogCancel = (event) => {
+            event.preventDefault();
+            this.dsoClose.emit({ originalEvent: event });
+        };
+        this.handleDialogClose = (event) => {
+            this.dsoClose.emit({ originalEvent: event });
+            if (this.overlayActive && this.dialogElement && !this.dialogElement.open) {
+                this.dialogElement.showModal();
+            }
+        };
+    }
+    overlayWatcher() {
+        this.syncOverlayActive();
+    }
+    connectedCallback() {
+        this.mediaQueryList = window.matchMedia(overlayMediaQuery);
+        this.mediaQueryList.addEventListener("change", this.syncOverlayActive);
+        this.syncOverlayActive();
+    }
+    disconnectedCallback() {
+        this.mediaQueryList?.removeEventListener("change", this.syncOverlayActive);
+        this.mediaQueryList = undefined;
+        this.stopObserving();
+    }
+    componentDidRender() {
+        if (!this.overlayActive) {
+            this.stopObserving();
+            return;
+        }
+        if (this.dialogElement && !this.dialogElement.open) {
+            this.dialogElement.showModal();
+        }
+        this.positionOverlay();
+        this.startObserving();
+    }
+    positionOverlay() {
+        const row = this.host.parentElement;
+        if (!row?.classList.contains("row")) {
+            console.warn('Grid Column: overlay requires the column to be a direct child of a "row" element');
+            return;
+        }
+        const rowRect = row.getBoundingClientRect();
+        const hostRect = this.host.getBoundingClientRect();
+        const gutter = parseFloat(getComputedStyle(this.host).paddingInlineStart) || 0;
+        this.host.style.setProperty("--_dso-grid-column-overlay-inset-block-start", `${hostRect.top + window.scrollY}px`);
+        this.host.style.setProperty("--_dso-grid-column-overlay-inset-inline-start", `${rowRect.left + window.scrollX + gutter}px`);
+        this.host.style.setProperty("--_dso-grid-column-overlay-inline-size", `${rowRect.width - gutter * 2}px`);
+    }
+    startObserving() {
+        if (this.resizeObserver) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver(() => this.positionOverlay());
+        this.resizeObserver.observe(document.body);
+        this.resizeObserver.observe(this.host);
+        if (this.host.parentElement) {
+            this.resizeObserver.observe(this.host.parentElement);
+        }
+    }
+    stopObserving() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e02e6fcc5aa1c2e279c36cfab5bf661df6099c49' }, this.overlayActive ? (index.h("dialog", { class: "grid-column-content", ref: (element) => (this.dialogElement = element), onClick: this.handleDialogClick, onCancel: this.handleDialogCancel, onClose: this.handleDialogClose }, index.h("slot", null))) : (index.h("div", { class: "grid-column-content" }, index.h("slot", null)))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "overlay": [{
+                "overlayWatcher": 0
+            }]
+    }; }
+};
+GridColumn.style = gridColumnCss();
+
+exports.dso_grid_column = GridColumn;

package/dist/cjs/dso-header.cjs.entry.js

@@ -302,7 +302,7 @@ const Header = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0ea04cc1432dd27da79f2fecaf342beb4486f99a', "is-compact": this.isCompact }, index.h("div", { key: '471e73275bf1d645fbcb83e35dc6bb5612a800ba', class: "dso-header" }, index.h("div", { key: '795356c3f82e93df6ff699db5b36540aaee7e832', class: "logo-container" }, index.h("slot", { key: '9dcdcdf2f5e6292fe31b25915d263e3505047312', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (index.h(index.Host, { key: '70ed6e8dc9a02875dd773c205af3549b324dfb8e', "is-compact": this.isCompact }, index.h("div", { key: 'ab3f94264421bca5caec2ae59f5b40f6934a440e', class: "dso-header" }, index.h("div", { key: 'f092ce977dcd3acd0d9620af8506cb138ee1f0a7', class: "logo-container" }, index.h("slot", { key: '898f5c094fd6dd18ec4e843a240c31081e2a9253', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? index_esm.tabbable(this.dropdownElement) : [];

package/dist/cjs/dso-hero-image.cjs.entry.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var index = require('./index-CfwUrDXc.js');
+
+const heroImageCss = () => `:host{--dso-hero-image-background-color:#ebf3e6;margin-inline-start:calc(50% - 50vw);margin-inline-end:calc(50% - 50vw);padding-inline-start:calc(50vw - 50% - 16px);padding-inline-end:calc(50vw - 50% - 16px);display:block;position:relative;overflow:hidden;background-color:var(--dso-hero-image-background-color)}@media only screen and (min-width: 768px){:host{min-block-size:352px}}::slotted([slot=image]){display:block;inline-size:100%;min-block-size:calc(16.6666666667vw + 1dvi);background-color:var(--dso-hero-image-background-color);background-repeat:no-repeat;background-size:cover;background-position:center}@media only screen and (min-width: 768px){::slotted([slot=image]){position:absolute;inset:0;min-block-size:unset}}.hero-image-container{position:relative;z-index:1;box-sizing:border-box;inline-size:100%;padding-inline:16px;padding-block-end:16px;margin-block-start:16px}@media (min-width: 768px){.hero-image-container{margin-block-start:40px}}@media (min-width: 992px){.hero-image-container{max-inline-size:992px;margin-block-start:40px}}@media (min-width: 992px){.hero-image-container ::slotted(*){display:block;inline-size:clamp(0px, 38vw, 545px)}}`;
+
+const HeroImage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '58986f7f8ff51ad08e4a6cecfc8b69b7f534ce59' }, index.h("slot", { key: '3de9aa7aeb53413ddc4bf442a8e20227a8f94710', name: "image" }), index.h("div", { key: '16a40d270ae8eebd3213222a20672c6213302d97', class: "hero-image-container" }, index.h("slot", { key: '8a6817e250897a98ad525a1ca5f5775e04814ef3' }))));
+    }
+};
+HeroImage.style = heroImageCss();
+
+exports.dso_hero_image = HeroImage;

package/dist/cjs/dso-highlight-box.cjs.entry.js

@@ -10,7 +10,7 @@ const HighlightBox = class {
     }
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (index.h(index.Host, { key: '3293b12fe82396580186ef78dee0165063fa1a04', "has-counter": hasCounter }, hasCounter && (index.h("div", { key: 'b8c864d67fcd3ea0d84a2037648ca72ce47103c4', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? index.h("slot", { key: 'df482099bbb3e4b303238c36d2afcde6dfa6bba4', name: "icon" }))), index.h("slot", { key: 'a68efd769d984c6d936d4b0db53d7532ed648b35' })));
+        return (index.h(index.Host, { key: 'a31042efc0e6676e06f08765d05320c2debe0b87', "has-counter": hasCounter }, hasCounter && (index.h("div", { key: 'ae5f42277bd801d07ac66467c652e211c8e8fe14', class: "dso-step-counter", "aria-hidden": "true" }, this.step ?? index.h("slot", { key: '7d8424c37b64775e83f34eb3f2165e8965c428bd', name: "icon" }))), index.h("slot", { key: '22edb75de8bb54565157a80a7be1ab82b7b12773' })));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/dso-history-item.cjs.entry.js

@@ -42,7 +42,7 @@ const HistoryItem = class {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (index.h("div", { key: '6ee1da1085393e583f0e85e50697bfc853c2af9e', class: "history-item" }, index.h("div", { key: '361d172b8b8bbbd167ea8c58576bd1ab4bf08bbe', class: "history-item-date" }, index.h("slot", { key: '8f0f5d47cf94de8023b3687c1784a97c00876007', name: "date" })), index.h("div", { key: 'b680c670f027bd5754980ea7c6ff6104eb9413a0', class: "history-item-content" }, index.h("div", { key: '651d82ba7c7ed75b8d3cd6077c65cb0e0bfab006', class: "history-item-status-message" }, index.h("dso-icon", { key: '6f5ef066d9e4bf89ac262efbe8025dc1734ba34d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), index.h("slot", { key: 'c1f4ece7a1595c06a5f8f74254d5e74c4a0e4b43', name: "status" })), this.titleSlottedElement !== null && this.href && (index.h("div", { key: '27d0d4773e69c803f729b65f4f477a5028d5c964', class: "history-item-title" }, index.h("a", { key: '40396bbda7f322d0aef8e7269c20abc952b48a5e', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, index.h("span", { key: 'c894e2ec83f673e0bfa5a6c20e29c9b06c39dda8', class: "history-item-title-content" }, index.h("slot", { key: '95d995d100db11d6c557c75ead872360d1db06c0', name: "title" })), "\u2060", index.h("dso-icon", { key: 'edd01a4d570c81bc9982c2f5dc29136d0dd5b121', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (index.h("div", { key: '292647d2665d1cc8b81cd32e61d9bee6eef26087', class: "history-item-explanation" }, index.h("slot", { key: '262ae4842b243aeb8cd86a0c034d6e7b4d7062e5', name: "explanation" }))), this.warningSlottedElement !== null && (index.h("div", { key: '884a462c276e462488aec156ff56c27bb694e1c8', class: "history-item-warning" }, index.h("dso-icon", { key: '2e061864eae872e8b53f8ed4eae414354c080f56', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), index.h("slot", { key: '7a53f699357bb4effbda29cba09817e40346c770', name: "warning" }))))));
+        return (index.h("div", { key: '0ddccba216f32216a5ce222cc11b003bacdb28af', class: "history-item" }, index.h("div", { key: 'b8e3e1c7acc1dfdded03f8829d75362d82bf4920', class: "history-item-date" }, index.h("slot", { key: 'a02d02b411a8827bead6be05cbd4fd6ab22feeb4', name: "date" })), index.h("div", { key: 'e83882c2988f87d822126947f6b954682496d6bc', class: "history-item-content" }, index.h("div", { key: '4409043a85b9ef30d21a64c2119fd6dab0e320a7', class: "history-item-status-message" }, index.h("dso-icon", { key: 'e5096c926aec70dee1471f1cfa01d6a8bb050200', icon: this.typeIcons[this.type], "aria-hidden": "true" }), index.h("slot", { key: 'a7c923bd536c1b02676df779216186f4a49856d7', name: "status" })), this.titleSlottedElement !== null && this.href && (index.h("div", { key: '2db028e5addc28fbd82210129719f86363395c4b', class: "history-item-title" }, index.h("a", { key: '871157e769f9dc0a2af5809e60ca3292ad847f65', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e), "aria-current": this.current ? "true" : undefined }, index.h("span", { key: '90bac7607cbe8a838c8f9086c825591e34d7fd35', class: "history-item-title-content" }, index.h("slot", { key: '0c4e9921ace20c57e55d2fbc14019b173624209e', name: "title" })), "\u2060", index.h("dso-icon", { key: 'd3b03e7226a6b0e8dce037a0a390367028490a77', icon: "chevron-right", "aria-hidden": "true" })))), this.explanationSlottedElement !== null && (index.h("div", { key: 'ce9f3ced38791d38fb8778cd548fa8d969c0f959', class: "history-item-explanation" }, index.h("slot", { key: '80156b40b6367688076c34684ac726e3904edae3', name: "explanation" }))), this.warningSlottedElement !== null && (index.h("div", { key: '13f461a66e60fed780b3611289b70efe9bc21bc5', class: "history-item-warning" }, index.h("dso-icon", { key: '750ed3861b34c53fd0bdcf407da4bd8e566d9d92', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), index.h("slot", { key: '50377ddabb3c9f22f70c182e44a520cac18397c6', name: "warning" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/{dso-icon.cjs.entry.js → dso-icon_2.cjs.entry.js}

@@ -1,6 +1,9 @@
 'use strict';
 
 var index = require('./index-CfwUrDXc.js');
+var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+require('./floating-ui.dom-BKTTOpb1.js');
 
 var asterisk = `<svg id="asterisk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
     <path fill="currentColor" d="M9.0105 18.6425C8.6385 19.1473 8.2575 19.4 7.8705 19.4C7.48125 19.4 7.09275 19.232 6.70425 18.8953C6.31575 18.5578 6.1215 18.23 6.1215 17.9098C6.1215 17.5903 6.27375 17.2618 6.5775 16.925L9.4155 12.935L5.6145 11.723C4.872 11.4875 4.5 11.1005 4.5 10.5613C4.5 10.2583 4.551 9.98902 4.65225 9.75352C4.85475 9.04627 5.277 8.69302 5.919 8.69302C6.054 8.69302 6.29025 8.72677 6.6285 8.79427L10.5308 10.0565V5.91502C10.5308 4.90477 11.037 4.40002 12.051 4.40002C13.0635 4.40002 13.5712 4.90477 13.5712 5.91502V10.0565L17.3715 8.79427C17.709 8.72677 17.9963 8.69302 18.2333 8.69302C18.4695 8.69302 18.7395 8.86102 19.0433 9.19777C19.3478 9.53527 19.5 9.98077 19.5 10.5365C19.5 11.0915 19.1287 11.4875 18.3855 11.723L14.5335 12.935L17.4225 16.925C17.6925 17.228 17.8275 17.5475 17.8275 17.885C17.8275 18.2218 17.6333 18.5585 17.2448 18.8953C16.8562 19.232 16.476 19.4 16.1047 19.4C15.7327 19.4 15.3615 19.1473 14.9895 18.6425L12 14.45L9.0105 18.6425Z"/>
@@ -799,10 +802,96 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return index.h("span", { key: '1df02b97b48721e7527fc3ae617ff32e00db961b', class: "icon-container", innerHTML: icon.svg });
+            return index.h("span", { key: '2c82d776e3e12e9cccd879604b24525447e6f0f4', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
 Icon.style = iconCss();
 
+const iconButtonCss = () => `.dso-tooltip {   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   border-radius: 4px;   overflow: unset;   margin: 0;   border: 0;   padding: 0;   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));   opacity: 0;   visibility: hidden;   max-inline-size: 320px; } .dso-tooltip .tooltip-inner {   --_dso-span-role-paragraph-margin-block: 8px;   --_dso-alert-success-border-color: #39870c;   --_dso-alert-error-border-color: #ce3f51;   --_dso-alert-info-border-color: #6ca4d9;   --_dso-alert-warning-border-color: #dcd400;   --_dso-link-color: currentColor;   --_dso-link-hover-color: currentColor;   --_dso-link-visited-color: currentColor;   --_dso-link-download-icon: var(--_dso-di-download-wit);   --_dso-link-extern-icon: var(--_dso-di-external-link-wit);   --_dso-link-phone-icon: var(--_dso-di-call-wit);   --_dso-link-mail-icon: var(--_dso-di-mail-outline-wit);   --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-wit);   --_dso-icon-button-secondary-active-color: #fff;   --_dso-icon-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-secondary-toggled-color: #fff;   --_dso-icon-button-secondary-toggled-background-color: rgba(255, 255, 255, 0.2);   --_dso-icon-button-secondary-toggled-hover-background-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-color: #f2f2f2;   --_dso-icon-button-tertiary-hover-color: #fff;   --_dso-icon-button-tertiary-active-color: rgba(255, 255, 255, 0.4);   --_dso-icon-button-tertiary-toggled-color: #fff;   --_dso-icon-button-tertiary-toggled-hover-color: rgba(255, 255, 255, 0.3);   --_dso-icon-button-tertiary-disabled-color: #b2b2b2;   --_dso-button-tertiary-download-icon: var(--_dso-di-download-wit);   --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-wit);   --_dso-button-primary-background-color: #fff;   --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-background-color: #f2f2f2;   --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-border-color: #fff;   --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);   --_dso-button-primary-active-border-color: #f2f2f2;   --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);   --_dso-button-primary-color: #191919;   --_dso-button-primary-hover-color: #191919;   --_dso-button-primary-active-color: #191919;   --_dso-button-primary-disabled-color: #666;   --_dso-button-secondary-background-color: none;   --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);   --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-background-color: none;   --_dso-button-secondary-border-color: #fff;   --_dso-button-secondary-hover-border-color: #fff;   --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);   --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);   --_dso-button-secondary-color: #fff;   --_dso-button-secondary-hover-color: #fff;   --_dso-button-secondary-active-color: #fff;   --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);   --_dso-button-tertiary-color: #fff;   --_dso-button-tertiary-hover-color: #fff;   --_dso-button-tertiary-active-color: #fff;   --_dso-button-tertiary-disabled-color: #b2b2b2;   background-color: #666;   color: #fff;   font-family: Asap, sans-serif;   font-size: 1rem;   font-weight: normal;   padding-block: 0;   padding-inline: 8px;   border-radius: 4px;   line-height: 1.5; } .dso-tooltip .tooltip-arrow {   position: absolute;   background-color: #666;   border-start-start-radius: 4px;   block-size: 8px;   inline-size: 8px;   pointer-events: none;   z-index: -1; }  :host {   display: inline-block;   line-height: 1;   position: var(--_dso-icon-button-position, static);   inset-block-start: var(--_dso-icon-button-inset-block-start, 0);   inset-inline-end: var(--_dso-icon-button-inset-inline-end, 0); }  *, *::after, *::before {   box-sizing: border-box; }  .dso-secondary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-secondary:focus, .dso-secondary:focus-visible {   outline-offset: 2px; } .dso-secondary:active {   outline: 0; } .dso-secondary.extern::after, .dso-secondary.download::after {   content: "";   display: inline-block; } .dso-secondary {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-secondary:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } .dso-secondary:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } .dso-secondary[disabled], .dso-secondary[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } .dso-secondary.dso-small {   line-height: 1rem; } .dso-secondary.dso-small dso-icon, .dso-secondary.dso-small.extern::after, .dso-secondary.dso-small.download::after, .dso-secondary.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   line-height: 1rem; } .dso-secondary.dso-extra-small dso-icon, .dso-secondary.dso-extra-small.extern::after, .dso-secondary.dso-extra-small.download::after, .dso-secondary.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-secondary.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-extra-small {   padding-block: 9px; } .dso-secondary dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-secondary span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-secondary dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-secondary.dso-spinner-left[disabled], .dso-secondary.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-secondary.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-secondary.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-secondary {   padding-inline: calc(8px - 1px);   padding-block: calc(8px - 1px);   border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px);   border-block-end-width: var(--_dso-icon-button-border-block-end-width, 1px);   border-inline-end-width: var(--_dso-icon-button-border-inline-end-width, 1px); } .dso-secondary:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-secondary:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-secondary:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-secondary:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); }  .dso-tertiary {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-tertiary:focus, .dso-tertiary:focus-visible {   outline-offset: 2px; } .dso-tertiary:active {   outline: 0; } .dso-tertiary.extern::after, .dso-tertiary.download::after {   content: "";   display: inline-block; } .dso-tertiary {   padding-inline: 0;   padding-block: 0;   color: var(--_dso-icon-button-tertiary-color, #39870c);   background-color: transparent;   border: 0; } .dso-tertiary:not([disabled]):hover {   color: var(--_dso-icon-button-tertiary-hover-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]):active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary:not([disabled]).toggled {   color: var(--_dso-icon-button-tertiary-toggled-color, var(--_dso-icon-button-tertiary-color, #275937)); } .dso-tertiary:not([disabled]).toggled:hover {   color: var(--_dso-icon-button-tertiary-toggled-hover-color, var(--_dso-icon-button-tertiary-color, #1b3e27)); } .dso-tertiary:not([disabled]).toggled:active {   color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #1f472c)); } .dso-tertiary[disabled] {   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d)); }  .dso-map {   display: inline-block;   font-size: 1em;   font-weight: 500;   margin-block-end: 0;   text-decoration: none;   touch-action: manipulation;   text-align: var(--_dso-button-text-align, start);   user-select: none;   vertical-align: middle;   background-clip: padding-box; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: 2px; } .dso-map:active {   outline: 0; } .dso-map {   background-color: var(--_dso-button-secondary-background-color, #fff);   border-color: var(--_dso-button-secondary-border-color, #39870c);   color: var(--_dso-button-secondary-color, #39870c);   float: var(--_dso-button-float-secondary, none);   border-width: 1px;   border-style: solid;   border-radius: 4px;   line-height: 1.5;   min-inline-size: 56px;   inline-size: var(--_dso-button-inline-size, auto);   padding-block: 11px;   padding-inline: 15px; } .dso-map:hover {   background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);   border-color: var(--_dso-button-secondary-hover-border-color, #275937);   color: var(--_dso-button-secondary-hover-color, #275937);   float: var(--_dso-button-float-secondary, none); } .dso-map:active {   background-color: var(--_dso-button-secondary-active-background-color, #275937);   border-color: var(--_dso-button-secondary-active-border-color, #275937);   color: var(--_dso-button-secondary-active-color, #fff);   float: var(--_dso-button-float-secondary, none); } .dso-map[disabled], .dso-map[disabled]:hover {   background-color: var(--_dso-button-secondary-disabled-background-color, #fff);   border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);   color: var(--_dso-button-secondary-disabled-color, #afcf9d);   float: var(--_dso-button-float-secondary, none); } .dso-map.dso-small {   line-height: 1rem; } .dso-map.dso-small dso-icon, .dso-map.dso-small.extern::after, .dso-map.dso-small.download::after, .dso-map.dso-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   line-height: 1rem; } .dso-map.dso-extra-small dso-icon, .dso-map.dso-extra-small.extern::after, .dso-map.dso-extra-small.download::after, .dso-map.dso-extra-small.dso-spinner::before {   margin-block-end: -4px;   margin-block-start: -4px; } .dso-map.dso-extra-small.dso-spinner-left::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small.dso-spinner-right::after {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-extra-small {   padding-block: 9px; } .dso-map dso-icon:has(+ span:not(.sr-only)) {   margin-inline-start: -8px; } .dso-map span:not(.sr-only) + dso-icon {   margin-inline-start: 8px;   margin-inline-end: -8px; } .dso-map dso-icon + span:not(.sr-only) {   margin-inline-start: 8px; } .dso-map.dso-spinner-left[disabled], .dso-map.dso-spinner-right[disabled] {   background-color: #fff;   border-color: #39870c;   color: #39870c; } .dso-map.dso-spinner-left::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]):hover::before {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-end: 8px; } .dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {   block-size: 16px;   inline-size: 16px; } .dso-map.dso-spinner-right::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]):hover::after {   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 42.4; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 42.4; %7D 50%25 %7B stroke-dashoffset: 10.4; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 42.4; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='1.6' stroke-linecap='butt' cx='12' cy='12' r='7.2'%3E%3C/circle%3E%3C/svg%3E");   background-repeat: no-repeat;   content: "";   display: inline-block;   block-size: 24px;   vertical-align: top;   inline-size: 24px;   margin-inline-start: 8px; } .dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {   block-size: 16px;   inline-size: 16px; } .dso-map {   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);   border: 0;   font-weight: 600;   margin-inline-end: 16px;   padding-block: 8px;   padding-inline: 16px;   white-space: nowrap; } .dso-map:focus, .dso-map:focus-visible {   outline-offset: -1px; } .dso-map:has(span.sr-only):has(dso-icon) {   padding: 8px;   min-inline-size: auto;   block-size: 40px;   inline-size: 40px; } .dso-map {   padding-inline: 8px;   padding-block: 8px;   border: 0;   margin-inline-end: 0;   box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));   border-start-start-radius: var(--_dso-icon-button-border-start-start-radius, 4px);   border-start-end-radius: var(--_dso-icon-button-border-start-end-radius, 4px);   border-end-end-radius: var(--_dso-icon-button-border-end-end-radius, 4px);   border-end-start-radius: var(--_dso-icon-button-border-end-start-radius, 4px); } .dso-map:not([disabled]):active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   color: var(--_dso-icon-button-secondary-active-color, #fff); } .dso-map:not([disabled]).toggled {   background-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   border-color: var(--_dso-icon-button-secondary-toggled-background-color, #275937);   color: var(--_dso-icon-button-secondary-toggled-color, #fff); } .dso-map:not([disabled]).toggled:hover {   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27); } .dso-map:not([disabled]).toggled:active {   background-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c);   border-color: var(--_dso-icon-button-secondary-active-background-color, #1f472c); }  .icon-button {   min-inline-size: auto;   cursor: pointer; } .icon-button[disabled] {   cursor: default; }`;
+
+const IconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dsoClick = index.createEvent(this, "dsoClick", 3);
+        this.lastClickTime = 0;
+        this.tooltipShowDelay = 500;
+        /**
+         * The variant of the Icon Button.
+         */
+        this.variant = "secondary";
+        /**
+         * The placement of the tooltip on hover and focus of the Icon Button.
+         */
+        this.tooltipPlacement = "top";
+        /**
+         * To disable the Icon Button
+         */
+        this.disabled = false;
+        this.handleShowTooltip = () => {
+            if (this.disabled) {
+                return;
+            }
+            // Don't show the tooltip if the button is clicked within 500ms of the last click
+            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
+                return;
+            }
+            this.clearToolTipTimeout();
+            this.tooltipTimeout = window.setTimeout(() => {
+                if (!this.tooltipElRef?.isConnected) {
+                    return;
+                }
+                this.tooltipElRef?.showPopover();
+                if (!this.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
+                    this.cleanUpFunction = positionTooltip_function.positionTooltip({
+                        referenceElement: this.buttonElRef,
+                        tipRef: this.tooltipElRef,
+                        tipArrowRef: this.tooltipArrowElRef,
+                        placementTip: this.tooltipPlacement,
+                        topPositionSmallViewPort: false,
+                        halfMainAxisOffset: false,
+                        forceVisible: true,
+                    });
+                }
+            }, this.tooltipShowDelay);
+        };
+        this.clearToolTipTimeout = () => {
+            if (this.tooltipTimeout) {
+                clearTimeout(this.tooltipTimeout);
+            }
+        };
+        this.handleHideTooltip = () => {
+            this.clearToolTipTimeout();
+            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
+                this.tooltipElRef.hidePopover();
+            }
+            this.cleanUpTooltip();
+        };
+        this.handleClick = (event) => {
+            this.lastClickTime = Date.now();
+            this.handleHideTooltip();
+            this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
+        };
+    }
+    /**
+     * Focuses the button.
+     */
+    async setFocus() {
+        this.buttonElRef?.focus();
+    }
+    cleanUpTooltip() {
+        this.cleanUpFunction?.();
+        this.cleanUpFunction = undefined;
+    }
+    disconnectedCallback() {
+        this.clearToolTipTimeout();
+        this.cleanUpTooltip();
+    }
+    render() {
+        return (index.h("button", { key: '76fd497f4386d1b8d06b0ce1f48b2d6080f5fa4b', 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 }, index.h("dso-icon", { key: '56d9f778930988f9ee014a8962d19a619857d728', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: 'd462ddf1f70d0bd560e9f09c173ed81b336fb07f', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+    }
+};
+IconButton.style = iconButtonCss();
+
 exports.dso_icon = Icon;
+exports.dso_icon_button = IconButton;

package/dist/cjs/dso-info_3.cjs.entry.js

@@ -13,7 +13,7 @@ const Info = class {
         this.dsoClose = index.createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (index.h(index.Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, index.h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (index.h("dso-icon-button", { key: '62d95155d61bfd7c671c5964c7837e587cf6998c', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (index.h(index.Fragment, { key: 'dbb5daa5f70d8a8a0e316d3729d3ab3bccdbdbcc' }, index.h("slot", { key: '49645a72744a9569f934784cce9e6078ef765140' }), !this.fixed && (index.h("dso-icon-button", { key: '83d64535203b6e56171ba2394e9358f2d48c3f6e', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -135,7 +135,7 @@ const InfoButton = class {
         delete this.mutationObserver;
     }
     render() {
-        return (index.h(index.Host, { key: 'bebf2c54d9740a143661f2a4a8f289764e742c1c', onKeyDown: this.keyDownHandler }, index.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 && (index.h(tooltip_functionalComponent.Tooltip, { key: 'd3840f4ba7c517e4715bfa8b487b97ba7fc5a8c0', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: '2752725c430ae05daeef3087fe19ec028a1fe5f4', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: 'f95b0b1205464a42d3970095a36b7e475d78aaa6', name: "toggletip" }))))));
+        return (index.h(index.Host, { key: '3d7fe85a8460daef297217c63ecdfcbeee494384', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: 'c4f23d40f61c2ecdf983f1be869f704aa89a1c7f', 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 && (index.h(tooltip_functionalComponent.Tooltip, { key: '3d3db4d605333fce051e25ace41275809ee7c3e6', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'f9536e03cf69b8bea88da5919a06d9ffef5f2d1f', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '0c7a455af59be731a1a2012810883b8b585df09f', name: "toggletip" }))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -205,7 +205,7 @@ const Selectable = class {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (index.h(index.Fragment, { key: 'e6e672ee66f8a47952dd5a74834c3757ee47aa7d' }, index.h("div", { key: 'd8c39c71eb6e4e1427494226d77f714671e35b8d', class: "dso-selectable-container" }, index.h("div", { key: '174f6e75a3c6440d48f75076f0edaf31a9190c44', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '1b87c90cf5291788c5e33749ef562c90f5df5ad2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '859a37b1dd61f8cc2e01e6fa0430452a6b0ba29d', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '8bc3861cf7b3a95eb97922ad71bc62964e7d5f5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '0ec96182bd8e10616a74beb6a67f70248b59b8b2' }, index.h("slot", { key: 'e9baed2501c400f2a40cf6f5c98f40aefeb3740d', name: "info" })))), index.h("slot", { key: 'a90703246e7e0bd0aa5f8472cb262eb031ef6c98', name: "options" })));
+        return (index.h(index.Fragment, { key: '254653ec27f9a20033a72604642a90ea729c6c0c' }, index.h("div", { key: '2dc879bcbf2248e6bc066875557aea42de9061fc', class: "dso-selectable-container" }, index.h("div", { key: '28cb0e8f7d3796e1e05eed52507c4e61843d9de4', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '993aa2d0fc4a0900fd087ba501ac14b786f46aa7', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '94e7c65b13b69d60953843d5d419f9e648f358a7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: 'ac9dac488d38956e91560ef24dc7c84333162acb', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '9df52add67145506fbd4458cba070b02d7c3219c' }, index.h("slot", { key: '209dc3e4e986ac8544f0cf60378bb476aa015fee', name: "info" })))), index.h("slot", { key: 'c6c979b1939b4bcb819b99605a486a363b8b319f', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-input-range.cjs.entry.js

@@ -17,13 +17,13 @@ const InputRange = class {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: '5c9b842e1f9f77163b62d7d52c9496d053e55180', id: "description", hidden: true }, this.description)), index.h("span", { key: 'fe2b8532daf462fbe9b225a08f97c7d15a32a8cd', class: "counter", "aria-hidden": "true" }, min, this.unit), index.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({
+        return (index.h(index.Fragment, null, this.description && (index.h("span", { key: '940230f9930b61c85be6b9ee4f6abbdff206b5ee', id: "description", hidden: true }, this.description)), index.h("span", { key: '6cb444384ee68542030b731f8434be34bbcc9d63', class: "counter", "aria-hidden": "true" }, min, this.unit), index.h("input", { key: 'a465a697454b737b8235340b9f88105bf55174a0', 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,
-            }) }), index.h("span", { key: '21ff5269993d5b3aeabf667c01e671b1d41a9aca', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), index.h("span", { key: 'ab860fe8d7fc759ad51a3a1789dcb14658d282fa', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return index.getElement(this); }
 };