@dso-toolkit/core 89.0.0 → 90.0.0

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

@@ -1,32 +1,36 @@
 import { h } from "@stencil/core";
-import air from "dso-toolkit/src/icons/air.svg";
-import angleDown from "dso-toolkit/src/icons/angle-down.svg";
-import angleLeft from "dso-toolkit/src/icons/angle-left.svg";
-import angleRight from "dso-toolkit/src/icons/angle-right.svg";
-import angleUp from "dso-toolkit/src/icons/angle-up.svg";
+// Start: import svg
 import asterisk from "dso-toolkit/src/icons/asterisk.svg";
-import balloon from "dso-toolkit/src/icons/balloon.svg";
+import balloonOutline from "dso-toolkit/src/icons/balloon-outline.svg";
+import balloonSolid from "dso-toolkit/src/icons/balloon-solid.svg";
 import bars from "dso-toolkit/src/icons/bars.svg";
 import bell from "dso-toolkit/src/icons/bell.svg";
 import buildings from "dso-toolkit/src/icons/buildings.svg";
 import calendar from "dso-toolkit/src/icons/calendar.svg";
 import call from "dso-toolkit/src/icons/call.svg";
 import caretDown from "dso-toolkit/src/icons/caret-down.svg";
+import caretUp from "dso-toolkit/src/icons/caret-up.svg";
 import checkCircle from "dso-toolkit/src/icons/check-circle.svg";
 import check from "dso-toolkit/src/icons/check.svg";
+import chevronDownDown from "dso-toolkit/src/icons/chevron-down-down.svg";
+import chevronDownUp from "dso-toolkit/src/icons/chevron-down-up.svg";
 import chevronDown from "dso-toolkit/src/icons/chevron-down.svg";
 import chevronLeft from "dso-toolkit/src/icons/chevron-left.svg";
 import chevronRight from "dso-toolkit/src/icons/chevron-right.svg";
+import chevronUpDown from "dso-toolkit/src/icons/chevron-up-down.svg";
+import chevronUpUp from "dso-toolkit/src/icons/chevron-up-up.svg";
 import chevronUp from "dso-toolkit/src/icons/chevron-up.svg";
 import circleNotch from "dso-toolkit/src/icons/circle-notch.svg";
-import clock from "dso-toolkit/src/icons/clock.svg";
-import copy from "dso-toolkit/src/icons/copy.svg";
+import clockOutline from "dso-toolkit/src/icons/clock-outline.svg";
+import clockSolid from "dso-toolkit/src/icons/clock-solid.svg";
+import copyOutline from "dso-toolkit/src/icons/copy-outline.svg";
+import copySolid from "dso-toolkit/src/icons/copy-solid.svg";
+import cross from "dso-toolkit/src/icons/cross.svg";
 import crown from "dso-toolkit/src/icons/crown.svg";
 import cultural from "dso-toolkit/src/icons/cultural.svg";
 import documentPencil from "dso-toolkit/src/icons/document-pencil.svg";
 import document from "dso-toolkit/src/icons/document.svg";
 import download from "dso-toolkit/src/icons/download.svg";
-import email from "dso-toolkit/src/icons/email.svg";
 import energy from "dso-toolkit/src/icons/energy.svg";
 import environment from "dso-toolkit/src/icons/environment.svg";
 import exclamation from "dso-toolkit/src/icons/exclamation.svg";
@@ -37,49 +41,62 @@ import filter from "dso-toolkit/src/icons/filter.svg";
 import forbidden from "dso-toolkit/src/icons/forbidden.svg";
 import hammer from "dso-toolkit/src/icons/hammer.svg";
 import health from "dso-toolkit/src/icons/health.svg";
-import helpActive from "dso-toolkit/src/icons/help-active.svg";
-import help from "dso-toolkit/src/icons/help.svg";
-import house from "dso-toolkit/src/icons/house.svg";
-import infoActive from "dso-toolkit/src/icons/info-active.svg";
+import helpOutline from "dso-toolkit/src/icons/help-outline.svg";
+import helpSolid from "dso-toolkit/src/icons/help-solid.svg";
+import home from "dso-toolkit/src/icons/home.svg";
 import infoI from "dso-toolkit/src/icons/info-i.svg";
-import info from "dso-toolkit/src/icons/info.svg";
+import infoOutline from "dso-toolkit/src/icons/info-outline.svg";
+import infoSolid from "dso-toolkit/src/icons/info-solid.svg";
 import infrastructure from "dso-toolkit/src/icons/infrastructure.svg";
+import internet from "dso-toolkit/src/icons/internet.svg";
 import label from "dso-toolkit/src/icons/label.svg";
 import land from "dso-toolkit/src/icons/land.svg";
 import landscape from "dso-toolkit/src/icons/landscape.svg";
 import layers from "dso-toolkit/src/icons/layers.svg";
 import lightBulb from "dso-toolkit/src/icons/light-bulb.svg";
-import locationOutline from "dso-toolkit/src/icons/location-outline.svg";
+import locationOrange from "dso-toolkit/src/icons/location-orange.svg";
 import locationSearch from "dso-toolkit/src/icons/location-search.svg";
 import location from "dso-toolkit/src/icons/location.svg";
 import lock from "dso-toolkit/src/icons/lock.svg";
 import magnet from "dso-toolkit/src/icons/magnet.svg";
-import mail from "dso-toolkit/src/icons/mail.svg";
+import mailOutline from "dso-toolkit/src/icons/mail-outline.svg";
+import mailSolid from "dso-toolkit/src/icons/mail-solid.svg";
 import mapLayers from "dso-toolkit/src/icons/map-layers.svg";
 import mapLocation from "dso-toolkit/src/icons/map-location.svg";
+import map from "dso-toolkit/src/icons/map.svg";
 import marker from "dso-toolkit/src/icons/marker.svg";
 import measurement from "dso-toolkit/src/icons/measurement.svg";
-import minusCircle from "dso-toolkit/src/icons/minus-circle.svg";
-import minusSquare from "dso-toolkit/src/icons/minus-square.svg";
+import minusCircleOutline from "dso-toolkit/src/icons/minus-circle-outline.svg";
+import minusCircleSolid from "dso-toolkit/src/icons/minus-circle-solid.svg";
+import minusSquareOutline from "dso-toolkit/src/icons/minus-square-outline.svg";
+import minusSquareSolid from "dso-toolkit/src/icons/minus-square-solid.svg";
 import minus from "dso-toolkit/src/icons/minus.svg";
-import more from "dso-toolkit/src/icons/more.svg";
+import moreHorizontal from "dso-toolkit/src/icons/more-horizontal.svg";
+import moreVertical from "dso-toolkit/src/icons/more-vertical.svg";
 import municipality from "dso-toolkit/src/icons/municipality.svg";
 import nature from "dso-toolkit/src/icons/nature.svg";
 import newWindow from "dso-toolkit/src/icons/new-window.svg";
 import paperclip from "dso-toolkit/src/icons/paperclip.svg";
 import parking from "dso-toolkit/src/icons/parking.svg";
+import pause from "dso-toolkit/src/icons/pause.svg";
 import pencil from "dso-toolkit/src/icons/pencil.svg";
 import pinOutline from "dso-toolkit/src/icons/pin-outline.svg";
 import pin from "dso-toolkit/src/icons/pin.svg";
-import plusCircle from "dso-toolkit/src/icons/plus-circle.svg";
-import plusSquare from "dso-toolkit/src/icons/plus-square.svg";
+import play from "dso-toolkit/src/icons/play.svg";
+import plusCircleOutline from "dso-toolkit/src/icons/plus-circle-outline.svg";
+import plusCircleSolid from "dso-toolkit/src/icons/plus-circle-solid.svg";
+import plusSquareOutline from "dso-toolkit/src/icons/plus-square-outline.svg";
+import plusSquareSolid from "dso-toolkit/src/icons/plus-square-solid.svg";
 import plus from "dso-toolkit/src/icons/plus.svg";
+import postcard from "dso-toolkit/src/icons/postcard.svg";
 import print from "dso-toolkit/src/icons/print.svg";
-import procedures from "dso-toolkit/src/icons/procedures.svg";
+import question from "dso-toolkit/src/icons/question.svg";
 import redo from "dso-toolkit/src/icons/redo.svg";
-import safety from "dso-toolkit/src/icons/safety.svg";
 import scale from "dso-toolkit/src/icons/scale.svg";
 import search from "dso-toolkit/src/icons/search.svg";
+import security from "dso-toolkit/src/icons/security.svg";
+import settings from "dso-toolkit/src/icons/settings.svg";
+import share from "dso-toolkit/src/icons/share.svg";
 import sitemap from "dso-toolkit/src/icons/sitemap.svg";
 import soil from "dso-toolkit/src/icons/soil.svg";
 import sortAscending from "dso-toolkit/src/icons/sort-ascending.svg";
@@ -87,52 +104,59 @@ import sortDescending from "dso-toolkit/src/icons/sort-descending.svg";
 import sort from "dso-toolkit/src/icons/sort.svg";
 import sound from "dso-toolkit/src/icons/sound.svg";
 import spinner from "dso-toolkit/src/icons/spinner.svg";
-import statusDanger from "dso-toolkit/src/icons/status-danger.svg";
 import statusError from "dso-toolkit/src/icons/status-error.svg";
-import statusInfo from "dso-toolkit/src/icons/status-info.svg";
+import statusForbidden from "dso-toolkit/src/icons/status-forbidden.svg";
+import statusInfoOutline from "dso-toolkit/src/icons/status-info-outline.svg";
+import statusInfoSolid from "dso-toolkit/src/icons/status-info-solid.svg";
 import statusSuccess from "dso-toolkit/src/icons/status-success.svg";
-import statusWarningInlineNegative from "dso-toolkit/src/icons/status-warning-inline-negative.svg";
-import statusWarningInline from "dso-toolkit/src/icons/status-warning-inline.svg";
+import statusWarningRedOutline from "dso-toolkit/src/icons/status-warning-red-outline.svg";
+import statusWarningRedSolid from "dso-toolkit/src/icons/status-warning-red-solid.svg";
 import statusWarning from "dso-toolkit/src/icons/status-warning.svg";
-import table from "dso-toolkit/src/icons/table.svg";
-import times from "dso-toolkit/src/icons/times.svg";
+import stop from "dso-toolkit/src/icons/stop.svg";
+import tableOutline from "dso-toolkit/src/icons/table-outline.svg";
+import tableSolid from "dso-toolkit/src/icons/table-solid.svg";
 import toDoList from "dso-toolkit/src/icons/to-do-list.svg";
 import trash from "dso-toolkit/src/icons/trash.svg";
 import undo from "dso-toolkit/src/icons/undo.svg";
-import userLine from "dso-toolkit/src/icons/user-line.svg";
-import user from "dso-toolkit/src/icons/user.svg";
+import userOutline from "dso-toolkit/src/icons/user-outline.svg";
+import userSolid from "dso-toolkit/src/icons/user-solid.svg";
 import users from "dso-toolkit/src/icons/users.svg";
 import water from "dso-toolkit/src/icons/water.svg";
-import wipWip from "dso-toolkit/src/icons/wip-wip.svg";
+import weather from "dso-toolkit/src/icons/weather.svg";
+import wip from "dso-toolkit/src/icons/wip.svg";
 const icons = [
-    { alias: "air", svg: air },
-    { alias: "angle-down", svg: angleDown },
-    { alias: "angle-left", svg: angleLeft },
-    { alias: "angle-right", svg: angleRight },
-    { alias: "angle-up", svg: angleUp },
+    // Start: alias object
     { alias: "asterisk", svg: asterisk },
-    { alias: "balloon", svg: balloon },
+    { alias: "balloon-outline", svg: balloonOutline },
+    { alias: "balloon-solid", svg: balloonSolid },
     { alias: "bars", svg: bars },
     { alias: "bell", svg: bell },
     { alias: "buildings", svg: buildings },
     { alias: "calendar", svg: calendar },
     { alias: "call", svg: call },
     { alias: "caret-down", svg: caretDown },
-    { alias: "check", svg: check },
+    { alias: "caret-up", svg: caretUp },
     { alias: "check-circle", svg: checkCircle },
+    { alias: "check", svg: check },
+    { alias: "chevron-down-down", svg: chevronDownDown },
+    { alias: "chevron-down-up", svg: chevronDownUp },
     { alias: "chevron-down", svg: chevronDown },
     { alias: "chevron-left", svg: chevronLeft },
     { alias: "chevron-right", svg: chevronRight },
+    { alias: "chevron-up-down", svg: chevronUpDown },
+    { alias: "chevron-up-up", svg: chevronUpUp },
     { alias: "chevron-up", svg: chevronUp },
     { alias: "circle-notch", svg: circleNotch },
-    { alias: "clock", svg: clock },
-    { alias: "copy", svg: copy },
+    { alias: "clock-outline", svg: clockOutline },
+    { alias: "clock-solid", svg: clockSolid },
+    { alias: "copy-outline", svg: copyOutline },
+    { alias: "copy-solid", svg: copySolid },
+    { alias: "cross", svg: cross },
     { alias: "crown", svg: crown },
     { alias: "cultural", svg: cultural },
-    { alias: "document", svg: document },
     { alias: "document-pencil", svg: documentPencil },
+    { alias: "document", svg: document },
     { alias: "download", svg: download },
-    { alias: "email", svg: email },
     { alias: "energy", svg: energy },
     { alias: "environment", svg: environment },
     { alias: "exclamation", svg: exclamation },
@@ -143,73 +167,89 @@ const icons = [
     { alias: "forbidden", svg: forbidden },
     { alias: "hammer", svg: hammer },
     { alias: "health", svg: health },
-    { alias: "help-active", svg: helpActive },
-    { alias: "help", svg: help },
-    { alias: "house", svg: house },
-    { alias: "info-active", svg: infoActive },
+    { alias: "help-outline", svg: helpOutline },
+    { alias: "help-solid", svg: helpSolid },
+    { alias: "home", svg: home },
     { alias: "info-i", svg: infoI },
-    { alias: "info", svg: info },
+    { alias: "info-outline", svg: infoOutline },
+    { alias: "info-solid", svg: infoSolid },
     { alias: "infrastructure", svg: infrastructure },
+    { alias: "internet", svg: internet },
     { alias: "label", svg: label },
     { alias: "land", svg: land },
     { alias: "landscape", svg: landscape },
     { alias: "layers", svg: layers },
     { alias: "light-bulb", svg: lightBulb },
-    { alias: "location", svg: location },
-    { alias: "location-outline", svg: locationOutline },
+    { alias: "location-orange", svg: locationOrange },
     { alias: "location-search", svg: locationSearch },
+    { alias: "location", svg: location },
     { alias: "lock", svg: lock },
     { alias: "magnet", svg: magnet },
-    { alias: "mail", svg: mail },
+    { alias: "mail-outline", svg: mailOutline },
+    { alias: "mail-solid", svg: mailSolid },
     { alias: "map-layers", svg: mapLayers },
     { alias: "map-location", svg: mapLocation },
+    { alias: "map", svg: map },
     { alias: "marker", svg: marker },
     { alias: "measurement", svg: measurement },
-    { alias: "minus-circle", svg: minusCircle },
-    { alias: "minus-square", svg: minusSquare },
+    { alias: "minus-circle-outline", svg: minusCircleOutline },
+    { alias: "minus-circle-solid", svg: minusCircleSolid },
+    { alias: "minus-square-outline", svg: minusSquareOutline },
+    { alias: "minus-square-solid", svg: minusSquareSolid },
     { alias: "minus", svg: minus },
-    { alias: "more", svg: more },
+    { alias: "more-horizontal", svg: moreHorizontal },
+    { alias: "more-vertical", svg: moreVertical },
     { alias: "municipality", svg: municipality },
     { alias: "nature", svg: nature },
     { alias: "new-window", svg: newWindow },
     { alias: "paperclip", svg: paperclip },
     { alias: "parking", svg: parking },
+    { alias: "pause", svg: pause },
     { alias: "pencil", svg: pencil },
-    { alias: "pin", svg: pin },
     { alias: "pin-outline", svg: pinOutline },
-    { alias: "plus-circle", svg: plusCircle },
-    { alias: "plus-square", svg: plusSquare },
+    { alias: "pin", svg: pin },
+    { alias: "play", svg: play },
+    { alias: "plus-circle-outline", svg: plusCircleOutline },
+    { alias: "plus-circle-solid", svg: plusCircleSolid },
+    { alias: "plus-square-outline", svg: plusSquareOutline },
+    { alias: "plus-square-solid", svg: plusSquareSolid },
     { alias: "plus", svg: plus },
+    { alias: "postcard", svg: postcard },
     { alias: "print", svg: print },
-    { alias: "procedures", svg: procedures },
-    { alias: "spinner", svg: spinner },
+    { alias: "question", svg: question },
     { alias: "redo", svg: redo },
-    { alias: "safety", svg: safety },
     { alias: "scale", svg: scale },
     { alias: "search", svg: search },
+    { alias: "security", svg: security },
+    { alias: "settings", svg: settings },
+    { alias: "share", svg: share },
     { alias: "sitemap", svg: sitemap },
     { alias: "soil", svg: soil },
     { alias: "sort-ascending", svg: sortAscending },
     { alias: "sort-descending", svg: sortDescending },
     { alias: "sort", svg: sort },
     { alias: "sound", svg: sound },
-    { alias: "status-danger", svg: statusDanger },
+    { alias: "spinner", svg: spinner },
     { alias: "status-error", svg: statusError },
-    { alias: "status-info", svg: statusInfo },
+    { alias: "status-forbidden", svg: statusForbidden },
+    { alias: "status-info-outline", svg: statusInfoOutline },
+    { alias: "status-info-solid", svg: statusInfoSolid },
     { alias: "status-success", svg: statusSuccess },
+    { alias: "status-warning-red-outline", svg: statusWarningRedOutline },
+    { alias: "status-warning-red-solid", svg: statusWarningRedSolid },
     { alias: "status-warning", svg: statusWarning },
-    { alias: "status-warning-inline", svg: statusWarningInline },
-    { alias: "status-warning-inline-negative", svg: statusWarningInlineNegative },
-    { alias: "table", svg: table },
-    { alias: "times", svg: times },
+    { alias: "stop", svg: stop },
+    { alias: "table-outline", svg: tableOutline },
+    { alias: "table-solid", svg: tableSolid },
     { alias: "to-do-list", svg: toDoList },
     { alias: "trash", svg: trash },
     { alias: "undo", svg: undo },
-    { alias: "user-line", svg: userLine },
-    { alias: "user", svg: user },
+    { alias: "user-outline", svg: userOutline },
+    { alias: "user-solid", svg: userSolid },
     { alias: "users", svg: users },
     { alias: "water", svg: water },
-    { alias: "wip-wip", svg: wipWip },
+    { alias: "weather", svg: weather },
+    { alias: "wip", svg: wip },
 ];
 export class Icon {
     render() {
@@ -218,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'cfe2b6ff0bb2d810eee4064bf32beebe10d0c118', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '70c4a2d5805b8faab4060289c5f4ee68fb2485ab', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }
@@ -239,9 +279,16 @@ export class Icon {
                 "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.interfaces",
+                            "id": "src/components/icon/icon.interfaces.ts::IconAlias",
+                            "referenceLocation": "IconAlias"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -17,7 +17,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-tooltip 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-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
@@ -88,7 +88,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-tooltip .tooltip-inner 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-wit"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-wit"));
 }
 .dso-tooltip .tooltip-inner {
   --_dso-icon-button-tertiary-color: #fff;
@@ -174,7 +174,6 @@
 .dso-secondary.extern::after, .dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 .dso-secondary {
   background-color: var(--_dso-button-secondary-background-color, #fff);
@@ -252,7 +251,7 @@
   color: #39870c;
 }
 .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;
@@ -262,7 +261,7 @@
   margin-inline-end: 8px;
 }
 .dso-secondary.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 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;
@@ -276,7 +275,7 @@
   inline-size: 16px;
 }
 .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;
@@ -286,7 +285,7 @@
   margin-inline-start: 8px;
 }
 .dso-secondary.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 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;
@@ -331,7 +330,6 @@
 .dso-tertiary.extern::after, .dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-inline-start: 8px;
 }
 .dso-tertiary {
   padding-inline: 0;
@@ -444,7 +442,7 @@
   color: #39870c;
 }
 .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;
@@ -454,7 +452,7 @@
   margin-inline-end: 8px;
 }
 .dso-map.dso-spinner-left:not([disabled]):hover::before {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 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;
@@ -468,7 +466,7 @@
   inline-size: 16px;
 }
 .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;
@@ -478,7 +476,7 @@
   margin-inline-start: 8px;
 }
 .dso-map.dso-spinner-right:not([disabled]):hover::after {
-  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 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;

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

@@ -54,7 +54,9 @@ export class IconButton {
         this.handleHideTooltip = () => {
             this.clearToolTipTimeout();
             this.showTooltip = false;
-            this.tooltipElRef?.hidePopover();
+            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
+                this.tooltipElRef.hidePopover();
+            }
             if (!this.showTooltip && this.cleanUp) {
                 this.cleanUp();
                 this.cleanUp = undefined;
@@ -78,7 +80,7 @@ export class IconButton {
         this.cleanUp = undefined;
     }
     render() {
-        return (h("button", { key: '8b22306b71a11a9a5bb331e3138d398a1ea28c25', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '5e0331ca7a343c70ef6f0fc0667d567d7c2814ad', icon: this.icon }), h(Tooltip, { key: 'ddf5f41269e6102ef81b05096119386e15478236', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: 'a9587a35fd93d1157279dcc419db9855fb0da205', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'bb0594b3027c9776a0a1b1b2752eb24658502d53', icon: this.icon }), h(Tooltip, { key: '8e02960832546df849cf83a4e89315e42638176d', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }
@@ -98,9 +100,16 @@ export class IconButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "IconAlias | undefined",
+                    "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": true,
                 "optional": false,

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

@@ -80,7 +80,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;
@@ -117,7 +117,7 @@ ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):i
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins.editaction-add .wrapper 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 .wrapper {
   --_dso-icon-button-tertiary-color: #191919;
@@ -165,7 +165,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;
@@ -208,7 +208,7 @@ del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del.editaction-remove .wrapper 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 .wrapper {
   --_dso-icon-button-tertiary-color: #191919;

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

@@ -5,7 +5,7 @@ const wijzigactieLabels = {
     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], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "times", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
+    src && (h("dialog", { class: "wrapper", ref: ref, onClose: close, onClick: close }, h("div", { onClick: close }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "cross", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
 export class ImageOverlay {
     constructor() {
         this.active = false;

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

@@ -21,7 +21,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 :host 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"));
 }
 :host {
   --_dso-icon-button-tertiary-color: #191919;

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '332b53fe2d36d9018e14ff8a888b48d74b487b31' }, h("slot", { key: 'a9fcdee710f9e75434f240f3c0375e90f86dc587' }), !this.fixed && (h("dso-icon-button", { key: 'e75455d9d8bf16684cea7e02fb114cdf34d40d6a', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -94,9 +94,9 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: 'a80bae5b9e9e1126bbc4a0b0f72c59f0b90f33a8', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '73189990daa593b27f1a3d89e6dff380eedac29e', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '7b944161e7a9c0db7824628619623b97f82498fd', name: "toggletip" }))))));
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-solid" : "info-outline" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: '14e4a2b7ee946bdc7ad3d58e0b0dea60e2fd3082', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '863a4084ea35ff69626dccbd6ed452011f52df59', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'f7a5e95329542b9cbbce015f495f4c9ac3204eff', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }