@dso-toolkit/core 89.0.0 → 90.1.0

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: '99720e8ec567a1c40602d54ad847e5b6e553eab3', 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: '455b415ddb4fea43cdc08317b5dcb5adc31445aa', icon: this.icon }), h(Tooltip, { key: '29e590a1ccd1b2b7983d7bfc1740d757767a28a7', 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: 'df16920205f3862687f4ee4a95006695f94dc7e0' }, h("slot", { key: 'ce87bdde462f55e156e808b689db097fd65ac1e1' }), !this.fixed && (h("dso-icon-button", { key: '81dd0c2bd3a38f791a964fb7989373ee3e64276d', 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: '974b7ede4b68b46789bbcb0e1a5fdb1f78ee56c9', 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: '1294317dd96432d716ea1da7d7698d273ee7ef9c', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'e21f0ef4e649241b891c86dd55905577f01e329b', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: 'f77780bc0e2378964803fdc1135fba47341e023d', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '1048b041a13dbf244b2d6fe76dccf8f97a2d7b4b', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '438056be852e2b4136de65cec13faa6a6c43418b', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '4f1f6a49dbbc04eca033b1b7d9c6ed8ec662c9dc', id: "description", hidden: true }, this.description)), h("span", { key: '53523e69582c4081b4101b5f8e50af0b8ee0df4c', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'de39c97f362a92a9e11b1e911f26e2ccd1756f26', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '8b3f86e7c42f0dffdc2b550f365c4bdc91627ffc', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: 'b4b0b2abc8ad5da26286a962517040df73d7a6a1', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,37 +1,40 @@
-:host {
-  display: inline-block;
-  max-inline-size: 100%;
-  font-weight: normal;
-}
-
 *,
 *::after,
 *::before {
   box-sizing: border-box;
 }
 
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  border: 0;
-  overflow: hidden;
-  clip-path: rect(0 0 0 0);
+:host {
+  display: inline-block;
+  max-inline-size: 100%;
 }
 
-.dso-label {
-  border-radius: 4px;
+:host([removable]) .dso-truncate.dso-label-content {
+  max-inline-size: calc(100% - 28px);
+}
+
+:host([truncate]) .dso-label-content {
   display: inline-block;
-  line-height: 1.5;
   max-inline-size: 100%;
-  padding-block: 4px;
-  padding-inline: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
 }
-.dso-label:focus-within, .dso-label.dso-hover {
-  text-decoration: line-through;
+
+::slotted([slot=symbol]) {
+  background-color: #fff;
+  background-color: #fff;
+  display: block;
+  float: inline-start;
+  block-size: 20px;
+  margin-block-start: 0;
+  margin-inline-end: 8px;
+  inline-size: 24px;
+  overflow: hidden;
+  position: relative;
 }
+
 .dso-label {
   --_dso-alert-success-border-color: #39870c;
   --_dso-alert-error-border-color: #ce3f51;
@@ -51,7 +54,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label 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"));
 }
 .dso-label {
   --_dso-icon-button-tertiary-color: #191919;
@@ -64,6 +67,17 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f2f2f2;
   color: #191919;
+  display: inline-flex;
+  align-items: center;
+  padding-block: 4px;
+  padding-inline: 8px;
+  max-inline-size: 100%;
+  font-weight: normal;
+  border-radius: 4px;
+  line-height: 1.5;
+}
+.dso-label:focus-within, .dso-label.dso-hover {
+  text-decoration: line-through;
 }
 .dso-label.dso-label-info {
   --_dso-alert-success-border-color: #39870c;
@@ -84,7 +98,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label.dso-label-info 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"));
 }
 .dso-label.dso-label-info {
   --_dso-icon-button-tertiary-color: #191919;
@@ -117,7 +131,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-label.dso-label-primary 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-label.dso-label-primary {
   --_dso-icon-button-tertiary-color: #fff;
@@ -173,7 +187,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-label.dso-label-success 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-label.dso-label-success {
   --_dso-icon-button-tertiary-color: #fff;
@@ -229,7 +243,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label.dso-label-warning 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"));
 }
 .dso-label.dso-label-warning {
   --_dso-icon-button-tertiary-color: #191919;
@@ -262,7 +276,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-label.dso-label-error 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-label.dso-label-error {
   --_dso-icon-button-tertiary-color: #fff;
@@ -328,7 +342,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
 }
 .dso-label.dso-label-attention 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-label.dso-label-attention {
   --_dso-icon-button-tertiary-color: #fff;
@@ -384,7 +398,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label.dso-label-filter 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"));
 }
 .dso-label.dso-label-filter {
   --_dso-icon-button-tertiary-color: #191919;
@@ -418,7 +432,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label.dso-label-toegevoegd 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"));
 }
 .dso-label.dso-label-toegevoegd {
   --_dso-icon-button-tertiary-color: #191919;
@@ -453,7 +467,7 @@
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 .dso-label.dso-label-verwijderd 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"));
 }
 .dso-label.dso-label-verwijderd {
   --_dso-icon-button-tertiary-color: #191919;
@@ -479,22 +493,6 @@
   padding-block: 0;
   padding-inline: 8px;
 }
-.dso-label.dso-hover .dso-label-content {
-  text-decoration: line-through;
-}
-
-.dso-truncate.dso-label-content {
-  display: inline-block;
-  max-inline-size: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  vertical-align: bottom;
-  white-space: nowrap;
-}
-
-:host([removable]) .dso-truncate.dso-label-content {
-  max-inline-size: calc(100% - 28px);
-}
 
 dso-icon-button {
   float: inline-end;

package/dist/collection/components/label/label.js

@@ -92,13 +92,11 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: 'f868c06841bb1f9a6f39db8598141634cbe59f5f' }, h("span", { key: '935d20891b9df19b37cf38242892428c81c12631', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
+        return (h(Fragment, { key: 'a9ee244e9d683b930b99d988f52e887b00e330ac' }, h("span", { key: 'a24aa868dad32e4928b7ae660830de2610269607', "aria-describedby": this.isTruncated ? "toggle-anchor" : null, class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'e3d5f4d753cf5ca6ef1bef6fae698b3b4c03e5da', name: "symbol" }), h("span", { key: '242c774421051469948ff841d7b55bf06e9481fd', class: clsx("dso-label-content", {
-                "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '93ae4502166a8c246371249f6b25423ab066e5b7' })), this.removable && (h("dso-icon-button", { key: '35c535b0943aef1ffc59871b43e2222c7490c6d2', variant: "tertiary", icon: "times", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '0c0a556cc61f34f782e9da771138e8b0e37e6647', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }) }, h("slot", { key: 'afd136f78152475ecbc7102e740a0b04f3c924c3', name: "symbol" }), h("span", { key: '4a01284220aa804ee78a5b24f95b766870e1de2b', class: "dso-label-content", ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'da3d933d80222d4a330b0875bfbb2ad1554933bb' })), this.removable && (h("dso-icon-button", { key: '8bea69827d8a0eead3fcc2e8fe2fd56b7831f496', variant: "tertiary", icon: "cross", label: `Verwijder: ${this.labelText}`, onDsoClick: (e) => this.dsoRemoveClick.emit(e.detail.originalEvent), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }))), this.isTruncated && (h("dso-tooltip", { key: '6c61e4c6e8f7caa1a93098621e98b512c8471f88', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend-group/legend-group.js

@@ -41,7 +41,7 @@ export class LegendGroup {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '4e185d93b6e6d8815aa9321eeffeb046e5da7ae3' }, h("div", { key: '6b5f3de33196e950ee895fc5cd27df23b2d0f2f5', class: "legend-group-header" }, h("slot", { key: 'ddb053565dccf300cbd30d775fbca196e5ee8e84', name: "heading" }), this.mode && (h("dso-icon-button", { key: 'e5b7bf50f3e140b9d5a24a75b14500a3d60c2a8a', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: '335dc6acb956623ecc5832a93c055168a16440bd', name: "options" }), h("slot", { key: '7b13d87cda2afd1ac289edbf5a72ae6d580b98a3' })));
+        return (h(Host, { key: '152f7438013d1a5edf1bfb3e723a6393fddec6a2' }, h("div", { key: '3cb5ba976f84fb7f2b7882d95d352dd80ca1ea0f', class: "legend-group-header" }, h("slot", { key: 'd896d9d10e45115669e8cb9b1e59939ec569c907', name: "heading" }), this.mode && (h("dso-icon-button", { key: '9169046250d59d072776b0e0782a85f7161eb026', label: this.mode === "view" ? this.text("edit") : this.text("view"), icon: this.mode === "view" ? "pencil" : "check", variant: "tertiary", onDsoClick: this.toggleMode }))), this.mode === "edit" && h("slot", { key: 'b078732eb83d885b35532967d6c289c9b759d280', name: "options" }), h("slot", { key: '2445dfe4e98b3eb4bea9c731e90c8326c5ca288b' })));
     }
     static get is() { return "dso-legend-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class LegendItem {
     }
     renderViewMode(hasOptions, accessibleLabel) {
         return [
-            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
+            this.active && hasOptions && !this.disabled && (h("dso-icon-button", { label: this.text("options"), icon: "more-horizontal", variant: "tertiary", class: { active: this.showOptions }, id: "options-button", onDsoClick: () => (this.showOptions = !this.showOptions) })),
             this.activatable && (h("dso-slide-toggle", { accessibleLabel: accessibleLabel, checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })),
         ];
     }
@@ -57,7 +57,7 @@ export class LegendItem {
         const accessibleLabel = label?.textContent
             ? this.text("makeActive", { label: label.textContent.toLowerCase() })
             : this.text("makeActiveDefault");
-        return (h(Host, { key: '7ca7d41c2c1601008539b52093573b2dd19be6c3', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '418e68e1cf17bcf8f374469afddb1fc162ce8069', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '41c18c23f391d8ca7d137ef2c55d6033e75b6658' }, h("slot", { key: '11f38e14e4b361dbe4d2a402d2cd1144cd8cdf3a', name: "symbol" }))), h("div", { key: '85e28e84a32c560638f285e545743aa59164c64e' }, h("slot", { key: 'aaf2051d2cac480657ad5ff800b6375ddbedbcb2', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '20af3b0b3f47bae68e22d8b70c701abcea3f6a3b', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '17c28ba74126a277fd0b5693c697780430f17ca2', slot: "toggletip" }, this.disabledMessage))), h("div", { key: '3ed114ff007fde56e76d53433ca3af61f6da5ad7', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '22a8ef980d2b2d013169f7483ac831bbde3fbffe', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '8f97bbcf9d7a944b2206f4895470eddce7c53b45', name: "options" })))));
+        return (h(Host, { key: '8a5387afd69d6ee08443ee638c46aecc7d3e7834', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '643bf48058400430d1a34bb5e5e54c30eb4445df', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'fd14a2e247cc51af2c1e178a22caf881b0065f1e' }, h("slot", { key: '670a8fcd646c4725c553a5ff64ea4cd0dc0b9219', name: "symbol" }))), h("div", { key: '6041263be867af93bf30c52725d6bb43a3de4284' }, h("slot", { key: '44eb5a378b72ff474c783166463c9300ef2ddff9', name: "label" })), this.disabled && this.disabledMessage && (h("dso-info-button", { key: '185ab271e6b7ba63ca7e1f5797dfc50d28bbc665', label: this.text("disabledInfo"), toggletipPlacement: "bottom" }, h("div", { key: '9113ec62cb11b2bc10cbf63b28ad9131e32b6bc8', slot: "toggletip" }, this.disabledMessage))), h("div", { key: 'e97e395df8af3b26169c2acd724477528a5d17b0', class: "legend-item-right-content" }, this.renderRightContent(hasOptions, accessibleLabel))), hasOptions && (h("div", { key: '8ca1b2533c3cc2b2300905b921870cd9d2138871', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '1dfc745889f8bcc1175a8f6668ba83c8de553771', name: "options" })))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legend/legend.js

@@ -63,7 +63,7 @@ export class Legend {
         this.moveFocusToTab(next);
     }
     render() {
-        return (h(Host, { key: '18b65b8e93f592afbd4748e8f740b3e37c8f70ae' }, h("div", { key: '20c1927e8ccc27badc91122fcb39b243c1d9de71', class: "topbar" }, h("div", { key: 'dcd9a8c4cf7bcecdd10ba918e0df47ff6929a8fb', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'fa3eb71f4bc538a1df4beda9d62260f9930c9651', icon: "times", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '3ebbfbba7d44ef9470bcc088fca6c799f1c81689', class: "content" }, h("div", { key: '071e22193cd0dd97ca1ba6d73427a5f29ee19d0f', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '33342dceb976c0557e33baa77471621f3e565dea' })))));
+        return (h(Host, { key: '861f432e2d8ce27a7bbe63c82cd60055eb7413ad' }, h("div", { key: 'd037fd2f22ee6cc741198cd7b72175332f7fae9c', class: "topbar" }, h("div", { key: '914313db54eb054490df98e578230a779516d346', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, this.tabItems.map((tabItem) => (h("button", { class: clsx("tab", { active: tabItem.active }), role: "tab", "aria-selected": tabItem.active ? "true" : "false", ...(!tabItem.active ? { tabIndex: -1 } : {}), onClick: this.clickHandler }, tabItem.label)))), h("dso-icon-button", { key: 'fa0f103700d0219914821447bcf8c7652bbb448e', icon: "cross", variant: "tertiary", label: this.text("closeLegend"), class: "close-button", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e.detail.originalEvent }) })), h("dso-scrollable", { key: '14b5ca6c83e21a27e871cb83aa5fbdf427e774cb', class: "content" }, h("div", { key: '84abd921c424f152c1d64930b6014f3c772db7e5', role: "tabpanel", tabIndex: 0 }, h("slot", { key: '54b44cb357111bd2172492ca353ccca4ffc5299d' })))));
     }
     static get is() { return "dso-legend"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,7 +63,7 @@
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-inline-size: 56px;
+  min-inline-size: auto;
   padding-block: 11px;
   padding-inline: 15px;
 }
@@ -151,7 +151,7 @@
   white-space: nowrap;
 }
 .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;
@@ -161,7 +161,7 @@
   margin-inline-end: 8px;
 }
 .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;

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

@@ -65,7 +65,7 @@ export class ListButton {
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'f690e4749d2c9ae0d26260e9b7954064ce819f66', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '84a3c91317ca7638ab7a825cbf48f82a215eaf84', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '9584f2d33413500d06cf9697618d86bf79c2bf41', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '24f581bced17e7ef4dc869c93f7a77d294f83913' }, this.label, this.sublabel && h("span", { key: '7862beff9b1a9fda69e0f56c8696e63974328c8f', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '42959be18105f323519c45cfde6a19521ebd9b0f', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: 'ac71b57bbb9364081d27d8a490816b0d0bbdfd1e', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'b6ff6812d7ca086e692c73cfaaa0a659afee8ad2', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '2e22c7b5c5791c935e28424207e179f0d380a100', class: "subcontent" }, h("slot", { key: '4a5348d41c36b72ea3f23ca3a882629374dc6fff', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: '1dc4939e3e40d5e0c5128b474ed10f61ec405638', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'c1b679d8e35c45b03f6b06998eca12604cf3867c' }, h("dso-icon-button", { key: '8f8f5c070b65c9076ccc57cdda4a9e7f6218182c', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'a5f363dcaeb8f5d5504c45d658a7ab4abd754874', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: 'e155c065e78f1732ea04ac5b388f2ed85671fae8', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: '037b6771bc6fdb52ea8b50c44625c0d93be26b0c', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '722e280a3a84eb7229ca4d000b157150cbede7e3', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '58f46f575352fb1bd8948209d25b415795b7e359', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, h("span", { key: '4ac068449aa709799459616496813e9383500d08' }, this.label, this.sublabel && h("span", { key: '17ffff2a4ca02560514ee8403ec3e9c3da9d9633', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'a468507b8afdbd8dde5b954e43c630f8f65219dc', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '6ba84c53d176f54b33124a7a239b145262f083d8', innerHTML: this.subcontentSlot.innerHTML }))))), this.sublabel && h("span", { key: 'b1a68f5d7a4770fa2cddecbdcd2b4fd943e17126', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '0538720befcd5c579ae8a8606077f535dfe073fb', class: "subcontent" }, h("slot", { key: 'd5e28e7d520dae451c66199a6523d9c451be353f', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'cf79e7cf15018d63534b367876c793460828f42d', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '7982ed3e0dc5b69174cc146f39ed127c59020eb3' }, h("dso-icon-button", { key: '00cf706edffdcd9eeed004d2d192ebab678f8878', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle-outline", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '6381685d68dfd09eda9c955ab1cb238ff2039b0d', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '06ac0e78367a50afe626ef18eced7aea92f42f96', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle-outline", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.js

@@ -23,7 +23,7 @@ export class Logo {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, { name: this.name }))) : (h(DsoLogo, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '609cde8cd31ab2b9591fae3ecebb31e44a8069a9', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '77bba61ecf328ff111c1c96c38eaf0fa9a0241a4', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }