@dso-toolkit/core 97.1.1 → 99.0.0

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

@@ -66,23 +66,14 @@ ins.editaction-add {
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  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#mail-outline-zwart"));
-}
-ins.editaction-add {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -94,6 +85,8 @@ ins.editaction-add {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -101,7 +94,7 @@ ins.editaction-add {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper {
   outline: none;
@@ -110,23 +103,14 @@ ins.editaction-add .wrapper {
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-ins.editaction-add .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  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#mail-outline-zwart"));
-}
-ins.editaction-add .wrapper {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -138,6 +122,8 @@ ins.editaction-add .wrapper {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -145,7 +131,7 @@ ins.editaction-add .wrapper {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 ins.editaction-add .wrapper .editaction-label {
   line-height: 1.5;
@@ -165,23 +151,14 @@ del.editaction-remove {
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  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#mail-outline-zwart"));
-}
-del.editaction-remove {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -193,15 +170,17 @@ del.editaction-remove {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.editaction-remove {
@@ -215,23 +194,14 @@ del.editaction-remove .wrapper {
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-del.editaction-remove .wrapper a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  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#mail-outline-zwart"));
-}
-del.editaction-remove .wrapper {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -243,15 +213,17 @@ del.editaction-remove .wrapper {
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dt-ozon-content-toggletip-color: #000;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
-  --_dt-ozon-content-toggletip-text-decoration: underline line-through;
+  --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }
 @media screen and (min--moz-device-pixel-ratio: 0) {
   del.editaction-remove .wrapper {

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

@@ -20,7 +20,7 @@ export class ImageOverlay {
     }
     loadListener(event) {
         if (event.target instanceof HTMLImageElement) {
-            this.setZoomable(event.target);
+            this.scheduleZoomableUpdate(event.target);
         }
     }
     connectedCallback() {
@@ -58,6 +58,10 @@ export class ImageOverlay {
     disconnectedCallback() {
         this.mutationObserver?.disconnect();
         this.resizeObserver?.disconnect();
+        if (this.zoomableFrameId !== undefined) {
+            cancelAnimationFrame(this.zoomableFrameId);
+            this.zoomableFrameId = undefined;
+        }
     }
     initZoomableImage() {
         const imgElement = this.host.querySelector("img");
@@ -66,13 +70,28 @@ export class ImageOverlay {
         }
         // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
         if (imgElement.complete) {
-            this.setZoomable(imgElement);
+            this.scheduleZoomableUpdate(imgElement);
         }
         this.resizeObserver?.observe(imgElement);
     }
-    setZoomable(imageElement) {
+    scheduleZoomableUpdate(imageElement) {
         const { width, naturalWidth, height, naturalHeight } = imageElement;
-        this.zoomable = width < naturalWidth || height < naturalHeight;
+        this.pendingZoomable = width < naturalWidth || height < naturalHeight;
+        if (this.zoomableFrameId !== undefined) {
+            return;
+        }
+        this.zoomableFrameId = requestAnimationFrame(() => {
+            this.zoomableFrameId = undefined;
+            if (!this.host.isConnected ||
+                typeof this.pendingZoomable === "undefined" ||
+                this.zoomable === this.pendingZoomable) {
+                return;
+            }
+            this.zoomable = this.pendingZoomable;
+        });
+    }
+    setZoomable(imageElement) {
+        this.scheduleZoomableUpdate(imageElement);
     }
     isWijzigactie(wijzigactie) {
         return wijzigactie === "voegtoe" || wijzigactie === "verwijder";

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

@@ -7,23 +7,14 @@
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  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#mail-outline-zwart"));
-}
-:host {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -35,6 +26,8 @@
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;

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: 'd81ab4dea211496332b74f79201433be6b63090c' }, h("slot", { key: '51d4fbc532a26ef9aef802597deef2998b7865cf' }), !this.fixed && (h("dso-icon-button", { key: 'b7ce0e7b9cd19a8a958be91d87165a15e0003ac0', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (h(Fragment, { key: '3155979f2b9164ed98c842e27b23ee3960aaadd4' }, h("slot", { key: '056134ca144d2b3ab4268d0d12cfaa94b5a46536' }), !this.fixed && (h("dso-icon-button", { key: '99252360520991c65f3900df6290b6fb299e2857', 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.css

@@ -1,8 +1,8 @@
 :host {
-  --_dt-scrollable-border-radius: 4px;
-  --_dt-scrollable-container-padding-inline: 16px;
-  --_dt-scrollable-container-padding-block: 8px;
-  --_dt-icon-button-position: static;
+  --_dso-scrollable-border-radius: 4px;
+  --_dso-scrollable-container-padding-inline: 16px;
+  --_dso-scrollable-container-padding-block: 8px;
+  --_dso-icon-button-position: static;
   display: inline-block;
 }
 
@@ -30,7 +30,7 @@
   max-inline-size: 640px;
 }
 .dso-tooltip .tooltip-inner {
-  --_dt-span-role-paragraph-margin-block: 8px;
+  --_dso-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: initial;
   --_dso-alert-error-border-color: initial;
   --_dso-alert-info-border-color: initial;
@@ -68,5 +68,5 @@
 
 dso-icon-button {
   vertical-align: top;
-  margin-inline-start: var(--_dt-info-button-margin-inline-start, 8px);
+  margin-inline-start: var(--_dso-info-button-margin-inline-start, 8px);
 }

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

@@ -114,7 +114,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '41ad3d6976d58821505f0a5640807c0a55d6ebfa', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'c1a6157d01a1e3da93ec829232e3c10689ba5b9e', 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), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: 'f7d3496067690d138339a2dbb41496df3c85d7e9', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'ac265421464d919247dbc4ceea7f4c1daefb250f', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'af1197efa5166f2618424b1424d5c438ab7089e6', name: "toggletip" }))))));
+        return (h(Host, { key: '31ce4940a10c5ab113b9f25c12cf40ac8d16fb59', onKeyDown: this.keyDownHandler }, h("dso-icon-button", { key: 'b27118b176790485247ee5a4c6c684058b652af9', 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), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": this.hasToggletip ? "toggletip-content" : undefined }), this.hasToggletip && (h(Tooltip, { key: '35ccc8f40c131e6f21061b2b06d64b593ad7dd4b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'c13c0433ec17fd17f2fae88d1acd1699eb10df17', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'a2991c55a469c0996ae411d1828bb294c4713ae6', 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: '817a31fe6d65fcdcf80ba2ab8c6782a6caaa5e6a', id: "description", hidden: true }, this.description)), h("span", { key: '26e3a9848dc7d5b017f0347f46ed6a401b52a85d', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '901fd461f8022de4f07e76f9d26c939e69f91d49', type: "range", min: min, max: max, step: step, 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: '425605bca4af66d7d97f731cbe340c6d35e148d6', id: "description", hidden: true }, this.description)), h("span", { key: 'ecb976bd2d9c8a6b9410696e5de60ac7cf0b7d39', class: "counter", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8026bcb5e4260198042a44a3c2faa80d61aa0ece', type: "range", min: min, max: max, step: step, 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: 'aaf24f2564c9a896e2d192efaacda91132056729', class: "counter", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '4ea49bbf4226ad3f96dff5361b5b6272526018e6', class: "counter", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }