@dso-toolkit/core 89.0.0 → 90.0.0

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -64,7 +64,7 @@ export class ozonContentToggletip {
         this.cleanUp = undefined;
     }
     render() {
-        return (h(Fragment, { key: '6ca8389ae3506b5a4d942563a398167902005fd6' }, h("span", { key: '9e7a0e672e5a1614179daa4e841bfcaa730af333', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h("span", { key: '2dbaf153e49562af58eed2e947aee7eb35a0b95f', class: "icon-container" }, h("slot", { key: 'ffb0a66fbad97a4a5450e230af2ef304a270f35b', name: "label" }), h("dso-icon", { key: 'e68145dcaf3e6824bc34351c7f725ffcf7b5a25d', icon: this.icon }))), !this.icon && h("slot", { key: 'a7aa62d3d95cf798023d6636f2291d5fef37d63e', name: "label" })), h(Tooltip, { key: 'bfdffd0c449995984d298187fbf1eea29a2b18f7', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: '1fb2dc80e42b086e2199b41432666aad7c388cc6' }))));
+        return (h(Fragment, { key: 'b8e0b94f83a249219af92154d9576bd76cce7a7c' }, h("span", { key: '70a0ca74fd1d449d749b1b6a5253ae8ef02eac52', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h("span", { key: '27c991638a3e95c5f6e4b149d446ad7ea662cdcb', class: "icon-container" }, h("slot", { key: 'dc34d598532cd8cace73f6fa1dc617cc8136cd35', name: "label" }), h("dso-icon", { key: '058a21dcaee45c433fed9b324d8bc26c847fef7e', icon: this.icon }))), !this.icon && h("slot", { key: 'c0025928c581c5773f39b1f07247649fee48da17', name: "label" })), h(Tooltip, { key: 'cc7ad77b3761ad3897a95ed97436dae0c19e1a8e', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'b513e1ad6480cac3dfe8c79e280ea4e40360c638' }))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -84,9 +84,16 @@ export class ozonContentToggletip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "IconAlias",
+                    "resolved": "\"asterisk\" | \"balloon-outline\" | \"balloon-solid\" | \"bars\" | \"bell\" | \"buildings\" | \"calendar\" | \"call\" | \"caret-down\" | \"caret-up\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-down-down\" | \"chevron-down-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevron-up-down\" | \"chevron-up-up\" | \"circle-notch\" | \"clock-outline\" | \"clock-solid\" | \"copy-outline\" | \"copy-solid\" | \"cross\" | \"crown\" | \"cultural\" | \"document\" | \"document-pencil\" | \"download\" | \"energy\" | \"environment\" | \"exclamation\" | \"external-link\" | \"eye\" | \"eye-slash\" | \"filter\" | \"forbidden\" | \"hammer\" | \"health\" | \"help-outline\" | \"help-solid\" | \"home\" | \"info-i\" | \"info-outline\" | \"info-solid\" | \"infrastructure\" | \"internet\" | \"label\" | \"land\" | \"landscape\" | \"layers\" | \"light-bulb\" | \"location\" | \"location-orange\" | \"location-search\" | \"lock\" | \"magnet\" | \"mail-outline\" | \"mail-solid\" | \"map\" | \"map-layers\" | \"map-location\" | \"marker\" | \"measurement\" | \"minus\" | \"minus-circle-outline\" | \"minus-circle-solid\" | \"minus-square-outline\" | \"minus-square-solid\" | \"more-horizontal\" | \"more-vertical\" | \"municipality\" | \"nature\" | \"new-window\" | \"paperclip\" | \"parking\" | \"pause\" | \"pencil\" | \"pin\" | \"pin-outline\" | \"play\" | \"plus\" | \"plus-circle-outline\" | \"plus-circle-solid\" | \"plus-square-outline\" | \"plus-square-solid\" | \"postcard\" | \"print\" | \"question\" | \"redo\" | \"scale\" | \"search\" | \"security\" | \"settings\" | \"share\" | \"sitemap\" | \"soil\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"spinner\" | \"status-error\" | \"status-forbidden\" | \"status-info-outline\" | \"status-info-solid\" | \"status-success\" | \"status-warning\" | \"status-warning-red-outline\" | \"status-warning-red-solid\" | \"stop\" | \"table-outline\" | \"table-solid\" | \"to-do-list\" | \"trash\" | \"undo\" | \"user-outline\" | \"user-solid\" | \"users\" | \"water\" | \"weather\" | \"wip\" | undefined",
+                    "references": {
+                        "IconAlias": {
+                            "location": "import",
+                            "path": "../../../icon/icon.interfaces",
+                            "id": "src/components/icon/icon.interfaces.ts::IconAlias",
+                            "referenceLocation": "IconAlias"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/ozon-content/ozon-content.css

@@ -51,7 +51,6 @@ label.dso-primary.extern::after,
 label.dso-primary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-primary,
 button.dso-primary,
@@ -181,7 +180,7 @@ label.dso-primary.dso-spinner-right[disabled] {
 a.dso-primary.dso-spinner-left::before,
 button.dso-primary.dso-spinner-left::before,
 label.dso-primary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -193,7 +192,7 @@ label.dso-primary.dso-spinner-left::before {
 a.dso-primary.dso-spinner-right::after,
 button.dso-primary.dso-spinner-right::after,
 label.dso-primary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -253,7 +252,6 @@ label.dso-secondary.extern::after,
 label.dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -383,7 +381,7 @@ label.dso-secondary.dso-spinner-right[disabled] {
 a.dso-secondary.dso-spinner-left::before,
 button.dso-secondary.dso-spinner-left::before,
 label.dso-secondary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -395,7 +393,7 @@ label.dso-secondary.dso-spinner-left::before {
 a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -413,7 +411,7 @@ label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
 a.dso-secondary.dso-spinner-right::after,
 button.dso-secondary.dso-spinner-right::after,
 label.dso-secondary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -425,7 +423,7 @@ label.dso-secondary.dso-spinner-right::after {
 a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -452,7 +450,7 @@ label.dso-secondary.download::after {
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
 label.dso-secondary.download:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));
 }
 a.dso-secondary.download[disabled]::after,
 button.dso-secondary.download[disabled]::after,
@@ -471,7 +469,7 @@ label.dso-secondary.extern::after {
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
 label.dso-secondary.extern:hover::after {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));
 }
 a.dso-secondary.extern[disabled]::after,
 button.dso-secondary.extern[disabled]::after,
@@ -511,7 +509,6 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -546,7 +543,6 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 a.dso-tertiary,
 button.dso-tertiary,
@@ -558,7 +554,7 @@ label.dso-tertiary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-inline-size: 56px;
+  min-inline-size: auto;
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -704,7 +700,7 @@ label.dso-tertiary.dso-truncate {
 a.dso-tertiary.dso-spinner-left::before,
 button.dso-tertiary.dso-spinner-left::before,
 label.dso-tertiary.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -716,7 +712,7 @@ label.dso-tertiary.dso-spinner-left::before {
 a.dso-tertiary.dso-spinner-right::after,
 button.dso-tertiary.dso-spinner-right::after,
 label.dso-tertiary.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -959,7 +955,7 @@ label.dso-map.dso-spinner-right[disabled] {
 a.dso-map.dso-spinner-left::before,
 button.dso-map.dso-spinner-left::before,
 label.dso-map.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -971,7 +967,7 @@ label.dso-map.dso-spinner-left::before {
 a.dso-map.dso-spinner-left:not([disabled]):hover::before,
 button.dso-map.dso-spinner-left:not([disabled]):hover::before,
 label.dso-map.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -989,7 +985,7 @@ label.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {
 a.dso-map.dso-spinner-right::after,
 button.dso-map.dso-spinner-right::after,
 label.dso-map.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -1001,7 +997,7 @@ label.dso-map.dso-spinner-right::after {
 a.dso-map.dso-spinner-right:not([disabled]):hover::after,
 button.dso-map.dso-spinner-right:not([disabled]):hover::after,
 label.dso-map.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -1617,7 +1613,7 @@ button.toggle-note {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-inline-size: 56px;
+  min-inline-size: auto;
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -1705,7 +1701,7 @@ button.toggle-note.dso-truncate {
   white-space: nowrap;
 }
 button.toggle-note.dso-spinner-left::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -1715,7 +1711,7 @@ button.toggle-note.dso-spinner-left::before {
   margin-inline-end: 8px;
 }
 button.toggle-note.dso-spinner-right::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' 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: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  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;
@@ -1771,10 +1767,6 @@ a:hover, a:focus-visible {
 a:active {
   text-decoration: none;
 }
-a dso-icon + span,
-a span + dso-icon {
-  margin-inline-start: 8px;
-}
 a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
@@ -1917,7 +1909,7 @@ span[role=paragraph].editaction-add a:not(.dso-primary, .dso-secondary, .dso-ter
 .dso-ozon-lijst.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 p.editaction-add,
 span[role=paragraph].editaction-add,
@@ -1976,7 +1968,7 @@ span[role=paragraph].editaction-remove a:not(.dso-primary, .dso-secondary, .dso-
 .dso-ozon-lijst.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 .dso-ozon-lijst > ul > li.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible),
 table.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 p.editaction-remove,
 span[role=paragraph].editaction-remove,
@@ -2029,7 +2021,7 @@ ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.new-text {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2067,7 +2059,7 @@ ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins.editaction-add {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2106,7 +2098,7 @@ del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="t
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.removed-text {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2150,7 +2142,7 @@ del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([hre
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del.editaction-remove {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2254,7 +2246,7 @@ del.editaction-remove p:last-child {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .subtitel:has(del:not(.removed-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .subtitel:has(del:not(.removed-text)) {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2296,7 +2288,7 @@ del.editaction-remove p:last-child {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .subtitel:has(ins:not(.new-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .subtitel:has(ins:not(.new-text)) {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2336,7 +2328,7 @@ td.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 td.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 td.editaction-remove {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2377,7 +2369,7 @@ td.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 td.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 td.editaction-add {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2413,7 +2405,7 @@ td.editaction-add {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .begrippenlijst .editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .begrippenlijst .editaction-add {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2448,7 +2440,7 @@ td.editaction-add {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .begrippenlijst .editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .begrippenlijst .editaction-remove {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2505,7 +2497,7 @@ td.editaction-add {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .kop ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .kop ins {
   --_dso-icon-button-tertiary-color: #191919;
@@ -2540,7 +2532,7 @@ td.editaction-add {
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .kop del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .kop del {
   --_dso-icon-button-tertiary-color: #191919;

package/dist/collection/components/panel/panel.css

@@ -41,7 +41,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .panel-heading a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 .panel-heading {
   --_dso-icon-button-tertiary-color: #191919;

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '99d102b8bb08fc7f673eea6b7c7cc6c7b0c4d88e', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b0cfb4b2f60f5af467e2b74b58c59919dced4d46', class: "panel-heading" }, h("slot", { key: 'e5a0b9d077b9c254996d8cf6f289704370b07f6a', name: "heading" }), h("dso-icon-button", { key: '5939e4d1120f30ec2310357f7bbb3af17e108ddc', icon: "times", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'e845349815336c7e84c3445dfe82512c156bbcf6', class: "panel-body" }, h("slot", { key: 'e7575c10f26f6e65fcc0b94b47e3864fcd6e9525' }))));
+        return (h("div", { key: '99d102b8bb08fc7f673eea6b7c7cc6c7b0c4d88e', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b0cfb4b2f60f5af467e2b74b58c59919dced4d46', class: "panel-heading" }, h("slot", { key: 'e5a0b9d077b9c254996d8cf6f289704370b07f6a', name: "heading" }), h("dso-icon-button", { key: '5939e4d1120f30ec2310357f7bbb3af17e108ddc', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'e845349815336c7e84c3445dfe82512c156bbcf6', class: "panel-body" }, h("slot", { key: 'e7575c10f26f6e65fcc0b94b47e3864fcd6e9525' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins {
   --_dso-icon-button-tertiary-color: #191919;
@@ -54,7 +54,7 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del {
   --_dso-icon-button-tertiary-color: #191919;

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

@@ -18,7 +18,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins {
   --_dso-icon-button-tertiary-color: #191919;
@@ -54,7 +54,7 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del {
   --_dso-icon-button-tertiary-color: #191919;

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

@@ -0,0 +1,59 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-block;
+}
+
+.segmented-button {
+  display: inline-flex;
+  gap: 4px;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  flex-wrap: nowrap;
+}
+.segmented-button label {
+  position: relative;
+  user-select: none;
+  flex-shrink: 0;
+}
+.segmented-button label:has(input:not(:disabled)):hover {
+  cursor: pointer;
+}
+.segmented-button label:has(input:not(:disabled)):hover input:not(:checked) + .segment-label {
+  color: #275937;
+}
+.segmented-button label:has(input:disabled) .segment-label {
+  color: #afcf9d;
+}
+.segmented-button input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: 0;
+}
+.segmented-button input[type=radio]:focus-visible + .segment-label {
+  outline: 2px solid #275937;
+  outline-offset: 2px;
+}
+.segmented-button input[type=radio]:checked + .segment-label {
+  background-color: #275937;
+  color: #fff;
+}
+.segmented-button .segment-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  background: #fff;
+  color: #39870c;
+  border-radius: 12px;
+  padding-inline: 12px;
+}

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

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