@dso-toolkit/core 103.0.0 → 104.0.0

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

@@ -189,7 +189,7 @@
   padding-block: 11px;
   padding-inline: 15px;
 }
-.dso-secondary:hover {
+.dso-secondary:hover, .dso-secondary:focus-visible {
   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);
@@ -201,7 +201,7 @@
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-.dso-secondary[disabled], .dso-secondary[disabled]:hover {
+.dso-secondary[disabled], .dso-secondary[disabled]:hover, .dso-secondary[disabled]:focus-visible {
   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);
@@ -265,7 +265,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+.dso-secondary.dso-spinner-left:not([disabled]):hover::before, .dso-secondary.dso-spinner-left:not([disabled]):focus-visible::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: "";
@@ -275,7 +275,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -289,7 +289,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+.dso-secondary.dso-spinner-right:not([disabled]):hover::after, .dso-secondary.dso-spinner-right:not([disabled]):focus-visible::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: "";
@@ -299,7 +299,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -323,7 +323,7 @@
   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 {
+.dso-secondary:not([disabled]).toggled:hover, .dso-secondary:not([disabled]).toggled:focus-visible {
   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
 }
@@ -362,20 +362,20 @@
   background-color: transparent;
   border: 0;
 }
-.dso-tertiary:not([disabled]):hover {
+.dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):focus-visible {
   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));
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521));
 }
 .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 {
+.dso-tertiary:not([disabled]).toggled:hover, .dso-tertiary:not([disabled]).toggled:focus-visible {
   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));
+  color: var(--_dso-icon-button-tertiary-active-color, var(--_dso-icon-button-tertiary-color, #173521));
 }
 .dso-tertiary[disabled] {
   color: var(--_dso-icon-button-tertiary-disabled-color, var(--_dso-icon-button-tertiary-color, #afcf9d));
@@ -399,6 +399,10 @@
 .dso-map:active {
   outline: 0;
 }
+.dso-map.extern::after, .dso-map.download::after {
+  content: "";
+  display: inline-block;
+}
 .dso-map {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
@@ -413,7 +417,7 @@
   padding-block: 11px;
   padding-inline: 15px;
 }
-.dso-map:hover {
+.dso-map:hover, .dso-map:focus-visible {
   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);
@@ -425,7 +429,7 @@
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-.dso-map[disabled], .dso-map[disabled]:hover {
+.dso-map[disabled], .dso-map[disabled]:hover, .dso-map[disabled]:focus-visible {
   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);
@@ -489,7 +493,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-map.dso-spinner-left:not([disabled]):hover::before {
+.dso-map.dso-spinner-left:not([disabled]):hover::before, .dso-map.dso-spinner-left:not([disabled]):focus-visible::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: "";
@@ -499,7 +503,7 @@
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
+.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before, .dso-map.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -513,7 +517,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-map.dso-spinner-right:not([disabled]):hover::after {
+.dso-map.dso-spinner-right:not([disabled]):hover::after, .dso-map.dso-spinner-right:not([disabled]):focus-visible::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: "";
@@ -523,7 +527,7 @@
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {
+.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after, .dso-map.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -536,9 +540,6 @@
   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;
@@ -566,7 +567,7 @@
   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 {
+.dso-map:not([disabled]).toggled:hover, .dso-map:not([disabled]).toggled:focus-visible {
   background-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
   border-color: var(--_dso-icon-button-secondary-toggled-hover-background-color, #1b3e27);
 }

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

@@ -43,6 +43,17 @@ export class IconButton {
     async setFocus() {
         this.buttonElRef?.focus();
     }
+    tooltipWatcher() {
+        this.warnIfTooltipNotInLabel();
+    }
+    warnIfTooltipNotInLabel() {
+        if (this.tooltip && !` ${this.label ?? ""} `.includes(` ${this.tooltip} `)) {
+            console.warn(`Icon Button: tooltip "${this.tooltip}" does not appear in label "${this.label ?? ""}"`);
+        }
+    }
+    componentWillLoad() {
+        this.warnIfTooltipNotInLabel();
+    }
     disconnectedCallback() {
         this.tooltipController.dispose();
     }
@@ -56,7 +67,7 @@ export class IconButton {
         }
     }
     render() {
-        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)));
+        return (h("button", { key: '51f3663454ff5552d123a55d566d618a097880d4', 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: 'b270947dd0ac8537699d4ab050fa359d62dfd9f9', icon: this.icon, "aria-hidden": "true" }), h(Tooltip, { key: '54b98cd18f0f4054426f5e1f402f750c1c45b51d', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.tooltip || this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -110,13 +121,32 @@ export class IconButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label of the Icon Button which is shown on hover in a tooltip."
+                    "text": "The accessible name of the Icon Button. Also shown as tooltip when `tooltip` is not set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "label"
             },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional shorter text for the tooltip. Must occur as whole words in `label`, preferably at the start."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tooltip"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -321,4 +351,13 @@ export class IconButton {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "tooltipWatcher"
+            }, {
+                "propName": "tooltip",
+                "methodName": "tooltipWatcher"
+            }];
+    }
 }

package/dist/collection/components/image-overlay/image-overlay.css

@@ -103,7 +103,7 @@ ins.editaction-add {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -140,7 +140,7 @@ ins.editaction-add .wrapper {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -185,7 +185,7 @@ del.editaction-remove {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -228,7 +228,7 @@ del.editaction-remove .wrapper {
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

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

@@ -4,8 +4,8 @@ const wijzigactieLabels = {
     verwijder: "Verwijderd",
     voegtoe: "Toegevoegd",
 };
-const Dimmer = ({ active, src, alt, ref, close, click }, children) => active &&
-    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], h("div", { class: "figure" }, children[0], h("div", { class: "content" }, h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])))));
+const Dimmer = ({ active, src, alt, ref, close, click, titel, bijschrift, editactionLabel }) => active &&
+    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, editactionLabel, h("div", { class: "figure" }, titel, h("div", { class: "content" }, h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), bijschrift)))));
 /**
  * @slot - A slot to place the target `<img>` element in to make it zoomable.
  * @slot bijschrift - An optional slot to place a caption in, displayed inside the modal overlay.
@@ -108,14 +108,16 @@ export class ImageOverlay {
     render() {
         const { src, alt } = this.host.querySelector("img") ?? {};
         const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
+        const titel = this.titelSlot ? (h("div", { class: "title" }, h("slot", { name: "titel" }))) : undefined;
+        const bijschrift = (h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })));
         const button = this.zoomable && (h("dso-icon-button", { icon: "external-link", class: "open", variant: "map", label: "Afbeelding vergroot weergeven", ref: (element) => (this.iconButtonElement = element), onDsoClick: () => (this.active = true) }));
         if (this.wijzigactie === "verwijder") {
-            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage(), titel: titel, bijschrift: bijschrift, editactionLabel: h("div", { class: "editaction-label" }, editActionLabel, ":") }), h("slot", null), button)));
         }
         if (this.wijzigactie === "voegtoe") {
-            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
+            return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage(), titel: titel, bijschrift: bijschrift, editactionLabel: h("div", { class: "editaction-label" }, editActionLabel, ":") }), h("slot", null), button)));
         }
-        return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage() }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
+        return (h(Host, { onClick: () => this.iconButtonElement?.setFocus() }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), close: this.dialogCloseEventListener, click: () => this.closeZoomedImage(), titel: titel, bijschrift: bijschrift }), h("slot", null), button));
     }
     static get is() { return "dso-image-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info/info.css

@@ -28,7 +28,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

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

@@ -0,0 +1 @@
+export {};

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

@@ -3,8 +3,17 @@ import { Fragment, h } from "@stencil/core";
  * @slot - The content to be displayed inside the info box.
  */
 export class Info {
+    activeChanged(active) {
+        this.previousActiveElement = active ? getDeepActiveElement() : undefined;
+    }
+    componentWillLoad() {
+        this.activeChanged(this.active);
+    }
     render() {
-        return (h(Fragment, { key: '943df64625f93307bd76327b6659a36d591b6301' }, h("slot", { key: '032e327a6ad730378710bb8cd5ebe4ae0506665e' }), !this.fixed && (h("dso-icon-button", { key: '64af9e7a36634d09c2d9a6089d1226c7dcebf0f9', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '0bbfdfd01d151bc0470268f28b5d1aafc06412ae' }, h("slot", { key: '3784cc98da4db09929429405731f09cfd8448a69' }), !this.fixed && (h("dso-icon-button", { key: 'a27bb2288904385423df3b75be23c7761885fbea', label: this.closeLabel ?? "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({
+                originalEvent: e.detail.originalEvent,
+                previousActiveElement: this.previousActiveElement,
+            }) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }
@@ -57,6 +66,25 @@ export class Info {
                 "setter": false,
                 "reflect": true,
                 "attribute": "active"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible label of the close button. Make this specific, for example `Sluit toelichting [label]`.\r\nDefaults to \"Sluiten\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label"
             }
         };
     }
@@ -69,18 +97,33 @@ export class Info {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the user activates the close button."
+                    "text": "Emitted when the user activates the close button.\r\n\r\n`previousActiveElement` contains the element that had focus when the Info was activated. Use it to return focus\r\nafter closing the Info."
                 },
                 "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
+                    "original": "InfoCloseEvent",
+                    "resolved": "InfoCloseEvent",
                     "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
+                        "InfoCloseEvent": {
+                            "location": "import",
+                            "path": "./info.interfaces",
+                            "id": "src/components/info/info.interfaces.ts::InfoCloseEvent",
+                            "referenceLocation": "InfoCloseEvent"
                         }
                     }
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "activeChanged"
+            }];
+    }
+}
+function getDeepActiveElement() {
+    let activeElement = document.activeElement;
+    while (activeElement?.shadowRoot?.activeElement) {
+        activeElement = activeElement.shadowRoot.activeElement;
+    }
+    return activeElement instanceof HTMLElement && activeElement !== document.body ? activeElement : undefined;
 }

package/dist/collection/components/label/label.css

@@ -46,7 +46,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -91,7 +91,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -238,7 +238,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -395,7 +395,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -429,7 +429,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
@@ -464,7 +464,7 @@
   --_dso-icon-button-secondary-toggled-hover-background-color: #1b3e27;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #1f472c;
+  --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;

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

@@ -69,7 +69,7 @@
   padding-block: 11px;
   padding-inline: 15px;
 }
-.dso-tertiary:hover {
+.dso-tertiary:hover, .dso-tertiary:focus-visible {
   background-color: var(--_dso-button-tertiary-hover-background-color, );
   border-color: var(--_dso-button-tertiary-hover-border-color, );
   color: var(--_dso-button-tertiary-hover-color, #275937);
@@ -81,7 +81,7 @@
   color: var(--_dso-button-tertiary-active-color, #173521);
   float: var(--_dso-button-float-tertiary, none);
 }
-.dso-tertiary[disabled], .dso-tertiary[disabled]:hover {
+.dso-tertiary[disabled], .dso-tertiary[disabled]:hover, .dso-tertiary[disabled]:focus-visible {
   background-color: var(--_dso-button-tertiary-disabled-background-color, );
   border-color: var(--_dso-button-tertiary-disabled-border-color, );
   color: var(--_dso-button-tertiary-disabled-color, #afcf9d);
@@ -130,7 +130,7 @@
 .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
-.dso-tertiary:not([disabled]):hover {
+.dso-tertiary:not([disabled]):hover, .dso-tertiary:not([disabled]):active {
   text-decoration: underline;
   text-underline-position: under;
 }