@dso-toolkit/core 102.0.0 → 104.0.0

package/dist/collection/components/plekinfo-card/plekinfo-card-item/plekinfo-card-item.js

@@ -26,10 +26,10 @@ export class PlekinfoCardItem {
         };
     }
     render() {
-        return (h(Host, { key: '5aa38289ec2b4e483fad1faaca62a14a9b127d32' }, h(WrapWijzigactie, { key: '3e9ded5d100c68c373d2b845bef828d144ca7c2b', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '3cd3fa2ec2575899fa12b7bf29ad7b2721f51e5a' }, h("slot", { key: 'fc244b8191ced178ea8990e8d1a4a96eeab06bb6', name: "symbol" })), h("div", { key: 'e2b536cb94edd18ae00d6d7d6923c10c82eae8bd', class: {
+        return (h(Host, { key: '9332992d22684568faa248a958c0dfa3c77ec7d7' }, h(WrapWijzigactie, { key: 'f707e754e7ab441c8df8ce503dcbfecdb74aec67', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-item-container" }, h("div", { key: '42d702623a7b74564ec480720bf1e7307f1e9711' }, h("slot", { key: 'ebae9e4e89df193d4814428200fd5ba6b047a78c', name: "symbol" })), h("div", { key: '8deaf915631b10a6c7ed767ddcd93e816008b24a', class: {
                 content: true,
                 "no-sublabel": !this.hasSublabel,
-            } }, h("dso-truncate", { key: '086c2c23ec9974feeaf3a12ce031e185a77ad4d0', class: "text" }, h("slot", { key: 'aa8cb6bbb01c5590c585367eef856cc785540cbd', name: "label" }), this.hasSublabel && " ", h("slot", { key: '0a6bb8c2aac3515c0ece9f83788cb4bb00fd1ab2', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: 'cefe179bf666442d7adb633cc791df1297248076', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '5f762ebcc0ac76fac9a8c043f63c341eeea53030', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
+            } }, h("dso-truncate", { key: 'aa4e45467d47d7d9cbf0b07cf8fd335906ef1282', class: "text" }, h("slot", { key: 'fdad88b5ddb5c32f8e811e51de7084e1357e9e3a', name: "label" }), this.hasSublabel && " ", h("slot", { key: 'e690e14aee6e1ddaa8016e495e9210e46253f90c', name: "sublabel", ref: this.setSublabelSlot, onSlotchange: this.updateSublabel })), h("div", { key: '5cc6f78d41ddc903f11ffe6126b758b0b5050044', class: "meta", hidden: !this.hasMeta }, h("slot", { key: '5e1da9d1294f96a03c7c97c56afe813b64911759', name: "meta", ref: this.setMetaSlot, onSlotchange: this.updateMeta }))))));
     }
     static get is() { return "dso-plekinfo-card-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ ins {
   --_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;
@@ -55,7 +55,7 @@ del {
   --_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;
@@ -88,6 +88,7 @@ del {
 }
 
 .dso-plekinfo-card-container {
+  display: block;
   inline-size: 100%;
   padding-block: 16px;
   padding-inline: 16px;

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

@@ -45,7 +45,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '3c495c61198582dd5b020872cc82c91b50aa8704', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '685a67c8fec8038b24b11da2f8bb7371982216b9', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '0d6607c97c222cdc08e69cd96729040175b50e98', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '0306c747a4976d87127ff6e00877dd5a7e813e8d', name: "symbol" })), h("div", { key: 'dca19ba569c640198f3a0653a1286806c72e037d', class: "dso-plekinfo-card-heading" }, h("div", { key: 'dd3fe2a788c4453ce3a21e1542ebde2becdbf936', class: "dso-plekinfo-card-title" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (event) => this.clickEventHandler(event) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("span", { class: "heading-content" }, h("slot", { name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: '3405347810343f5cc0ea3a5e057e50e02bcf3ec9', name: "meta" })), this.interaction !== null && h("slot", { key: '93b5a6c949b4bdcc38ccd7b047bf52d3db271168', name: "interaction" })), this.contentSlottedElement !== null && (h("div", { key: 'c8b905fa4be92c6aa1e9ee7b0405e426e80c9eca', class: "dso-plekinfo-card-content" }, h("slot", { key: '974ee9c6652b81ee52f51f8b0238b5a772822df5', name: "content" }))))));
+        return (h(Host, { key: '37e2d42e329e416aa2a002e27b88985c1bc8dfc1', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '5b672d02afbe549d7383e9e5c9321b1cf21699a1', wijzigactie: this.wijzigactie, class: "dso-plekinfo-card-container" }, h("div", { key: '5d0aeffed9e14b5499501c2b81648ede01d406b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'd16f5cde2c4d73fa073f3f859e4a9b2db1dde3aa', name: "symbol" })), h("div", { key: 'f0b610e3c9267f1fbdd64184da762e5c5298790b', class: "dso-plekinfo-card-heading" }, h("div", { key: '9660a68461bb35dbf52ada693a65e802de34013b', class: "dso-plekinfo-card-title" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (event) => this.clickEventHandler(event) }, h("span", { class: "heading-content" }, h("slot", { name: "heading" })), "\u2060", this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("span", { class: "heading-content" }, h("slot", { name: "heading" }))), this.metaSlottedElement !== null && h("slot", { key: 'a7bae25a1b9ffde591dcc77856e2973bc45f33d1', name: "meta" })), this.interaction !== null && h("slot", { key: '0a29e234b26eb5084c6382c590c53dafa476a05e', name: "interaction" })), this.contentSlottedElement !== null && (h("div", { key: '7aa5d9f54d7afb58190e2415e4e6f9c50c03d720', class: "dso-plekinfo-card-content" }, h("slot", { key: '61373b993d2631b311e2233cd3481dc9c2f77609', name: "content" }))))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '1171d9632c5644b4dccbc7199c229f9872350f3d' }, h("span", { key: 'a372aa112fb8633cec4b3f7fb259982b3b9fcbb5', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'df2ea4078ecd40bb5a146fcc5737de5c312426f8', icon: "spinner" })), h("span", { key: '36dab5ea1a55d9056d1f0a7d01122727c530118f', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '39e6b99eac033cea28e43b111ded8dd5c6a3f694' }, h("span", { key: '6c4b3613c6842306a2f03242f51c484a17e0582d', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '4de2f21aed27a69f95f0a1fce009c449ad2f8458', icon: "spinner" })), h("span", { key: '7fbbdda38e6539b60bc06860bfe7a20aca34bb70', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ import { Fragment, h } from "@stencil/core";
  */
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: 'c47a723e3afc302fffa33ec3f45ee82a1257a30b' }, h("div", { key: '49ed912f7d573aab12d2c1904f7074fd28f23f42', class: "project-item-header" }, h("div", { key: '78d45ea53aab6c810162db59787230084d191e6d', class: "project-item-title" }, h("slot", { key: '1db47555e46f2688fdd8cb2c0ff77ca36284ee74', name: "title" }), this.label && (h("dso-label", { key: '9ad3a71ca2a41bffb7903567629e6087fbba53aa', status: "error", compact: true }, this.label))), h("div", { key: 'f6281dd03cf4881928b7a54597d25c5fe6534671', class: "project-item-actions" }, h("slot", { key: '11b9cdd502941d1f338f75ebcff370e54e6b010a', name: "actions" }))), h("div", { key: '5c9e6d7d32b5bd00d335d692a7bc15c3b47050ac', class: "project-item-info" }, h("div", { key: '0ca11e0dc92201b61122e2892f30b02220f2f9f3', class: "project-item-progress" }, h("slot", { key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a', name: "progress" })), h("div", { key: '13e3e2ab2692d1d42c37fb1ad4668efa88dd8b3b', class: "project-item-status" }, h("slot", { key: '44571008b3810987c7f2968eda898de59f1ac43a', name: "status" })))));
+        return (h(Fragment, { key: '2890a574c813b1465610b640d62a5bdd4b923cd3' }, h("div", { key: '1cf80309fe4323d249255be65707a35767b32c55', class: "project-item-header" }, h("div", { key: '2d3c060aa78fa5fc3adefedc73acb42e65df2054', class: "project-item-title" }, h("slot", { key: '0b3ea39475b6944fabd87ca155cb22430f98b24f', name: "title" }), this.label && (h("dso-label", { key: '7ebca7e844e64a5f82a629b425e508d208f2f2b9', status: "error", compact: true }, this.label))), h("div", { key: '8c7f0758399419cf039819a40abc984341681580', class: "project-item-actions" }, h("slot", { key: 'ef1a9b05d735d1a1ec48b21281bbc28521b471e0', name: "actions" }))), h("div", { key: '357ebff39471025b4eca3359c63c934e50ad18d8', class: "project-item-info" }, h("div", { key: '0bbc22f7f1bb29d42d2318f72d8a6e0ac81e4316', class: "project-item-progress" }, h("slot", { key: '3d5b84f6ae10311cc8e0659570d7e3b553eacc5e', name: "progress" })), h("div", { key: '60eef00840fa3ce595c183aa207a715d43601a94', class: "project-item-status" }, h("slot", { key: '45600a4a690a1a7871e7f5d78db65e1f7d9bc158', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/renvooi/renvooi.css

@@ -19,7 +19,7 @@ ins {
   --_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;
@@ -55,7 +55,7 @@ del {
   --_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/responsive-element/responsive-element.js

@@ -56,7 +56,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '669d0f60991577c7db1e5bb466438c9c6cd72c29', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '5104e71062d514fcc6011275aba9774d978f514e' })));
+        return (h(Host, { key: 'ac7c506826d55640708597a143708d8d0d39cc36', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '6e1d6c72513ff7b6581166597f279e6af8b55db5' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -109,9 +109,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'd0d493e2814ea4fac6546c35f78297804b04ea16', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'f3e97b74617286db7315e5db4e4957bccad0f16e', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'bca0ba03817663c76b3f991bf98bd39dd7e2e333', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '2bf4a83468c1450f072f5c3f62f00146e3c407ab', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: '7267fb4aa57d05940d1f0cea619c0717cf37acad' }))));
+            }), onScroll: () => this._setScrollState(), tabIndex: this._preventFocus ? -1 : undefined }, h("slot", { key: 'a4bc377b601554d555f0ab0acae647580b0ee21c' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class SegmentedButton {
         });
     }
     render() {
-        return (h("div", { key: 'a1449ee5548e27bc74a18da1494615bc395b2531', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+        return (h("div", { key: '75adf67e986a06e3a5f06c389801df5008787a48', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
             return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
         })));
     }

package/dist/collection/components/selectable/selectable.css

@@ -2,6 +2,7 @@
   padding-inline-start: var(--_dso-selectable-padding-inline-start, 32px);
   position: relative;
   display: var(--dso-selectable-display, block);
+  isolation: isolate;
 }
 :host label {
   font-weight: 400;

package/dist/collection/components/selectable/selectable.js

@@ -9,6 +9,11 @@ export class Selectable {
     constructor() {
         this.infoActive = false;
         this.fallbackIdentifier = createIdentifier("DsoSelectable");
+        this.infoIdentifier = createIdentifier("DsoSelectableInfo");
+        this.handleInfoClose = () => {
+            this.infoActive = false;
+            this.infoButton?.setFocus();
+        };
         this.handleOnChange = (e) => {
             const inputTarget = e.target instanceof HTMLInputElement ? e.target : undefined;
             this.dsoChange.emit({
@@ -51,7 +56,7 @@ export class Selectable {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (h(Fragment, { key: '8dd68e53dfd210af37dff9d5f690dc2518fb8d92' }, h("div", { key: '2f7471e7982eac3bd3f71f78a49c425cfb80374f', class: "dso-selectable-container" }, h("div", { key: '3e57c892c72a561880e0daede5ed021314d7b19a', class: "dso-selectable-input-wrapper" }, h("input", { key: '77f1802260eae5c61c49da3c33d6051da47eeef3', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'a545fc8f475fe67e87c7c7bd2b6833befc1774db', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '2e249a7ae4d92d5a8fe571b21fadd8d2ca019a10', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'fc58ac778599db02efa796aefb3372ba9d3f3fb7' }, h("slot", { key: 'd751a2429da3e43a1d9136a651cfd5a2c709037b', name: "info" })))), h("slot", { key: 'aaa73e33614ba4790696174afed3946486514619', name: "options" })));
+        return (h(Fragment, { key: '91eca451abf09ddf583b95bac8b6a315e365e944' }, h("div", { key: 'b570a38fa31574a246dd39ff3eb942ee4fe66f84', class: "dso-selectable-container" }, h("div", { key: '8bc9e3d279831c631896b5c3ab9ba08d92749e4c', class: "dso-selectable-input-wrapper" }, h("input", { key: '08814980de77a0f784b594f81b50625afbbca449', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: '285c72efc334975e0a02dfefe883e9e553a69612', active: this.infoActive, controls: this.infoIdentifier, onDsoToggle: (e) => (this.infoActive = e.detail.active), ref: (el) => (this.infoButton = el) }))), hasInfo && (h("dso-info", { key: 'ec7b2f845ce9a5085cf21036a0edf5fd4e68e684', id: this.infoFixed ? this.describedById : this.infoIdentifier, fixed: this.infoFixed, active: this.infoActive, closeLabel: this.infoCloseLabel, onDsoClose: this.handleInfoClose }, h("div", { key: '2a5c7775e6df892766d8113175cfdd2286ba7fdb' }, h("slot", { key: 'e32bf2ca2daf892cf1f2e4a9cd4600540f03495b', name: "info" })))), h("slot", { key: 'cf3988524f376553c947760fe20c5e35205c0227', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
@@ -321,6 +326,25 @@ export class Selectable {
                 "setter": false,
                 "reflect": false,
                 "attribute": "info-fixed"
+            },
+            "infoCloseLabel": {
+                "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 of the Info. Make this specific, for example `Sluit toelichting [label]`.\r\nDefaults to \"Sluiten\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info-close-label"
             }
         };
     }

package/dist/collection/components/shopping-cart/shopping-cart-item/shopping-cart-item.css

@@ -97,7 +97,7 @@ button.dso-tertiary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-button.dso-tertiary:hover {
+button.dso-tertiary:hover, button.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);
@@ -109,7 +109,7 @@ button.dso-tertiary:active {
   color: var(--_dso-button-tertiary-active-color, #173521);
   float: var(--_dso-button-float-tertiary, none);
 }
-button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover {
+button.dso-tertiary[disabled], button.dso-tertiary[disabled]:hover, button.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);
@@ -158,7 +158,7 @@ button.dso-tertiary {
 button.dso-tertiary[disabled].dso-spinner-left, button.dso-tertiary[disabled].dso-spinner-right {
   color: #39870c;
 }
-button.dso-tertiary:not([disabled]):hover {
+button.dso-tertiary:not([disabled]):hover, button.dso-tertiary:not([disabled]):active {
   text-decoration: underline;
   text-underline-position: under;
 }

package/dist/collection/components/shopping-cart/shopping-cart.css

@@ -37,7 +37,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/shopping-cart/shopping-cart.js

@@ -16,7 +16,7 @@ export class ShoppingCart {
         this.mode = "side";
     }
     render() {
-        return (h("div", { key: '0975f0846a7a9c84e6c6e2f5c7d19d6f0ae62ccb', class: "shopping-cart" }, h("div", { key: '20915602b7ce0b656ca1a7a0449a33a696b70ec6', class: "content" }, h("div", { key: '38ce29b8f8405252e113616351ab141e6d7a93ed', class: "header" }, h("slot", { key: 'b307540c8268b1d93f9397d92c4a956f0f501da6', name: "heading" }), h("slot", { key: 'c3b43702c41be007e4236f8fde1ad38c9326a924', name: "button" })), h("ul", { key: '82369b3f4bcbb85b30bc06a4992e7a14bebe1a14', class: "items", role: "list" }, h("slot", { key: 'f9fe406ee105b280c4b50b28f9c1047e49245573' }))), h("slot", { key: '10c42345d6a2b702671fe20207aaa5bfb24dddc3', name: "warning" })));
+        return (h("div", { key: '6487f02b89e9dd12a733410bde3c18effa77e006', class: "shopping-cart" }, h("div", { key: '342c1aaf5f8cea9ec54618a0220d9f950519816d', class: "content" }, h("div", { key: '0cb026359c10116ff9b72063110c64d5168be696', class: "header" }, h("slot", { key: 'fa1d098a90c2aeeb82f2bb9133faee8ada538391', name: "heading" }), h("slot", { key: '5ed5ad2f1ca6d40f64839519502c6c05ef90cadd', name: "button" })), h("ul", { key: '2e7cbc6f8fc5c42620a51c2fda11cd9c92120140', class: "items", role: "list" }, h("slot", { key: 'ccd0090868bc256333bf2c73f4d926e02c44cb3b' }))), h("slot", { key: '35c2329c7352af67412d40aa1ad8818f32d8466c', name: "warning" })));
     }
     static get is() { return "dso-shopping-cart"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/skiplink/skiplink.js

@@ -8,7 +8,7 @@ export class Skiplink {
         return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
     }
     render() {
-        return (h("a", { key: 'b132ce509967a0a3bd4241a76104bc3f33822022', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '9aa1c16b8e24f40be4849761287b0dd3a6448f33', icon: "chevron-right" })));
+        return (h("a", { key: 'ffce938d034d708c40338ad07196e683989e09ef', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: '3d8ce97937d72b81b105e159ae3ec7358045bbbe', icon: "chevron-right" })));
     }
     static get is() { return "dso-skiplink"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -28,7 +28,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, { key: '23e0811e02855a33137317e2351ccf19b51a3fd3' }, h("button", { key: '2b1291c6876dce526060e71db2c63a68b2a6ff8b', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: 'd9e4a98959b210205d93a44a075beb4f292e2977', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '3b1599d3640133fecedbd572cfe2387c691c2142', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '134d2c2a9f1bdfbd5fa3cf552406925472ce314e', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '971520ada40f7169cd5490348df4acf23d94a9af', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '8b8625782d75afa77f34a9918dd64fa194b76fd7', htmlFor: this.identifier }, h("slot", { key: 'd32ed096a2b76e6febdd8edfed192ae12a9b25ea' })))));
+        return (h(Fragment, { key: '4f7be27534a44b1014b9257935ba5c0d96426cba' }, h("button", { key: '8054c4a637123d292671c1333d9fa1d7ecc941f6', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e), ...(this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), ...(this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {}) }, h("svg", { key: '14131b92a8e6a66a5def4758370f65b69f1997f8', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'cfdd00f42e05ab025934513e6706b9e60dcf96ff', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '1e3d6acf12c1c0cc5cb03af45e7cd2f824eea3cc', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '0f8ba867f9144991d0d3511490161cdb2d0135a6', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'a938acd19089c63e9c682c4a036b989214689d9e', htmlFor: this.identifier }, h("slot", { key: '5db6f65e0051bdb0c3f6bed378ac4bcc6872478f' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/survey-rating/survey-rating.css

@@ -237,7 +237,7 @@ label.survey-rating-3::before, label.survey-rating-3:has(input:checked) {
   --_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;
@@ -271,7 +271,7 @@ label.survey-rating-4::before, label.survey-rating-4:has(input:checked) {
   --_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;
@@ -305,7 +305,7 @@ label.survey-rating-5::before, label.survey-rating-5:has(input:checked) {
   --_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;
@@ -492,7 +492,7 @@ button.dso-secondary {
   padding-block: 11px;
   padding-inline: 15px;
 }
-button.dso-secondary:hover {
+button.dso-secondary:hover, button.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);
@@ -504,7 +504,7 @@ button.dso-secondary:active {
   color: var(--_dso-button-secondary-active-color, #fff);
   float: var(--_dso-button-float-secondary, none);
 }
-button.dso-secondary[disabled], button.dso-secondary[disabled]:hover {
+button.dso-secondary[disabled], button.dso-secondary[disabled]:hover, button.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);
@@ -568,7 +568,7 @@ button.dso-secondary.dso-spinner-left::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]):hover::before, button.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: "";
@@ -578,7 +578,7 @@ button.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   inline-size: 24px;
   margin-inline-end: 8px;
 }
-button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
+button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before, button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:focus-visible::before {
   block-size: 16px;
   inline-size: 16px;
 }
@@ -592,7 +592,7 @@ button.dso-secondary.dso-spinner-right::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]):hover::after, button.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: "";
@@ -602,7 +602,7 @@ button.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   inline-size: 24px;
   margin-inline-start: 8px;
 }
-button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
+button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after, button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:focus-visible::after {
   block-size: 16px;
   inline-size: 16px;
 }

package/dist/collection/components/survey-rating/survey-rating.js

@@ -18,10 +18,10 @@ export class SurveyRating {
             "Makkelijk",
             "Heel makkelijk",
         ];
-        return (h("dso-panel", { key: '0eea370b3b4f481967ad5a8b837f1e37fef30e82', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: 'aafae4fecfc6fe60948d2e234b3cc06dfc32d634', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: '8ff6bbfe4ccc2104ff912f63cf6fda0dbe189154' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '675dbd15cc595fd1d691ce588beecb1bd4941405', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '61f8794c44cf9c37f4f742f2fb98cc36d682353e', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '9e951802ea136262010dda9d72e0d22788f8d6f2' }, "Heel moeilijk"), h("span", { key: 'c6aa53b254a363d6d54acef80e6fb05727d0dfba' }, "Heel makkelijk")), h("div", { key: '051e9720e9101770630dd90167cc9c72f0c01935', role: "radiogroup" }, ratings.map((rating, index) => {
+        return (h("dso-panel", { key: '46eda8236dacfd8efdeb19f73c199cf792d4de1c', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }), role: "dialog", "aria-labelledby": "panel-heading" }, h("h2", { key: '0f13609b9dfe138d9bc1bd297215123b5dec1100', id: "panel-heading", slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'e9d9ad67aac187c0cb05003431dfe88ce7cc27b7' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren?"), h("form", { key: '67eacd9bfe4d9aa7f9de718c7d66eefc208d1cda', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '4118bd73372ebe13c7a604f0e7b717154c93a7ab', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: '590fd6d4db6f497da801c29a24821f553ef98297' }, "Heel moeilijk"), h("span", { key: 'd3eb988572fba331828467298a5e72612af1442c' }, "Heel makkelijk")), h("div", { key: '7aeb6102e3ce13a1dd67038475454b483e9006ca', role: "radiogroup" }, ratings.map((rating, index) => {
             const ratingNumber = index + 1;
             return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
-        })), h("button", { key: 'a3d6f061bdbb6cc744a40877ed8658aeb8149c04', type: "submit", class: "dso-secondary" }, h("span", { key: 'd5dbb51141c9460792ecc4ab9c098dbf40f79686' }, "Antwoord verzenden")))));
+        })), h("button", { key: '9c0569f5875ac60b4f9d33a80ea264f4c40529c0', type: "submit", class: "dso-secondary" }, h("span", { key: '32352ef5dd59e78ed1ee64c3c6e90d7822b34467' }, "Antwoord verzenden")))));
     }
     static get is() { return "dso-survey-rating"; }
     static get encapsulation() { return "shadow"; }