@dso-toolkit/core 100.3.1 → 101.0.0

package/dist/cjs/dso-icon_2.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+var index = require('./index-BBx5yytN.js');
+var tooltip_controller = require('./tooltip.controller-Cvac0qe3.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-DOBjuEpE.js');
+require('./position-tooltip.function-DCOaqlbY.js');
 require('./floating-ui.dom-BKTTOpb1.js');
 
 var asterisk = `<svg id="asterisk" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -815,8 +816,13 @@ const IconButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoClick = index.createEvent(this, "dsoClick", 3);
-        this.lastClickTime = 0;
-        this.tooltipShowDelay = 500;
+        this.tooltipController = new tooltip_controller.TooltipController({
+            getReferenceElement: () => this.buttonElRef,
+            getTipElement: () => this.tooltipElRef,
+            getTipArrowElement: () => this.tooltipArrowElRef,
+            getPlacement: () => this.tooltipPlacement,
+            showDelay: 500,
+        });
         /**
          * The variant of the Icon Button.
          */
@@ -833,43 +839,13 @@ const IconButton = class {
             if (this.disabled) {
                 return;
             }
-            // Don't show the tooltip if the button is clicked within 500ms of the last click
-            if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {
-                return;
-            }
-            this.clearToolTipTimeout();
-            this.tooltipTimeout = window.setTimeout(() => {
-                if (!this.tooltipElRef?.isConnected) {
-                    return;
-                }
-                this.tooltipElRef?.showPopover();
-                if (!this.cleanUpFunction && this.buttonElRef && this.tooltipElRef && this.tooltipArrowElRef) {
-                    this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                        referenceElement: this.buttonElRef,
-                        tipRef: this.tooltipElRef,
-                        tipArrowRef: this.tooltipArrowElRef,
-                        placementTip: this.tooltipPlacement,
-                        topPositionSmallViewPort: false,
-                        halfMainAxisOffset: false,
-                        forceVisible: true,
-                    });
-                }
-            }, this.tooltipShowDelay);
-        };
-        this.clearToolTipTimeout = () => {
-            if (this.tooltipTimeout) {
-                clearTimeout(this.tooltipTimeout);
-            }
+            this.tooltipController.show();
         };
         this.handleHideTooltip = () => {
-            this.clearToolTipTimeout();
-            if (this.tooltipElRef?.isConnected && this.tooltipElRef.matches(":popover-open")) {
-                this.tooltipElRef.hidePopover();
-            }
-            this.cleanUpTooltip();
+            this.tooltipController.hide();
         };
         this.handleClick = (event) => {
-            this.lastClickTime = Date.now();
+            this.tooltipController.notifyClick();
             this.handleHideTooltip();
             this.dsoClick.emit({ originalEvent: event, toggled: !this.toggled });
         };
@@ -880,16 +856,11 @@ const IconButton = class {
     async setFocus() {
         this.buttonElRef?.focus();
     }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
-    }
     disconnectedCallback() {
-        this.clearToolTipTimeout();
-        this.cleanUpTooltip();
+        this.tooltipController.dispose();
     }
     render() {
-        return (index.h("button", { key: 'dff33a98f0a06ee8c7875ea2361cf9dbb2033946', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'd4770a99eac2fb86e572b6a67595e948bbb8076e', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: '0a8b3a5194d8fd3b1c7110f9a760b13e16b570d7', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
+        return (index.h("button", { key: '7d3bf4a79f897ec497bd7309b4f841bfa894a577', ref: (element) => (this.buttonElRef = element), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant} ${this.toggled ? "toggled" : ""}`, "aria-pressed": this.toggled?.toString(), "aria-expanded": this.expanded?.toString(), onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, index.h("dso-icon", { key: 'a3c3df83e533e83df10f5b8d7926f70a49422e30', icon: this.icon, "aria-hidden": "true" }), index.h(tooltip_functionalComponent.Tooltip, { key: '8e2334a4b4ecaecf91394a4743f5757bf3e3044e', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

package/dist/cjs/dso-info_3.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
-var positionTooltip_function = require('./position-tooltip.function-DCOaqlbY.js');
-var tooltip_functionalComponent = require('./tooltip.functional-component-BEcuvKwS.js');
+var index = require('./index-BBx5yytN.js');
+var toggletip_controller = require('./toggletip.controller-BB-Voe-Z.js');
+var tooltip_functionalComponent = require('./tooltip.functional-component-DOBjuEpE.js');
+require('./position-tooltip.function-DCOaqlbY.js');
 require('./floating-ui.dom-BKTTOpb1.js');
 
 const infoCss = () => `*,*::after,*::before{box-sizing:border-box}:host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative;--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--_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;--_dso-icon-button-secondary-toggled-background-color:#275937;--_dso-icon-button-secondary-toggled-hover-background-color:#1b3e27;--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#1f472c;--_dso-icon-button-tertiary-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:#f2f2f2;color:#191919;--_dso-image-display:block;--_dso-image-margin-block:8px;--_dso-image-margin-inline:auto;--_dso-rich-content-margin-block-start:0}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}`;
@@ -13,7 +14,7 @@ const Info = class {
         this.dsoClose = index.createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (index.h(index.Fragment, { key: 'a9db2b8522cbfa55e8629b58a9757d58931ecbca' }, index.h("slot", { key: '2059c0fb8926f48a4b1f36a2210d5c8e48861b1a' }), !this.fixed && (index.h("dso-icon-button", { key: 'b5350abb35893dabf2dfcb0278aee5efd7bb8951', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
+        return (index.h(index.Fragment, { key: '501034aaf66e9109b35acead40058a4a42081904' }, index.h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }), !this.fixed && (index.h("dso-icon-button", { key: '568cdfc82e1fb885849226689812843a9045184d', label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit(e.detail.originalEvent) }))));
     }
 };
 Info.style = infoCss();
@@ -24,6 +25,13 @@ const InfoButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.dsoToggle = index.createEvent(this, "dsoToggle", 7);
+        this.toggletipController = new toggletip_controller.ToggletipController({
+            getReferenceElement: () => this.button,
+            getTipElement: () => this.toggletipElRef,
+            getTipArrowElement: () => this.toggletipArrowElRef,
+            getRestrictContentElement: () => this.restrictContentElement,
+            getPlacement: () => this.toggletipPlacement,
+        });
         /**
          * Whether the InfoButton is active.
          */
@@ -42,7 +50,7 @@ const InfoButton = class {
             if (!this.toggletipActive) {
                 return;
             }
-            if (!event.composedPath().includes(this.host)) {
+            if (toggletip_controller.isEventOutside(this.host, event)) {
                 this.closeToggletip();
             }
         };
@@ -83,42 +91,10 @@ const InfoButton = class {
     }
     closeToggletip() {
         this.toggletipActive = false;
-        if (this.toggletipElRef?.isConnected && this.toggletipElRef.matches(":popover-open")) {
-            this.toggletipElRef.hidePopover();
-        }
-        this.cleanUpTooltip();
-    }
-    cleanUpTooltip() {
-        this.cleanUpFunction?.();
-        this.cleanUpFunction = undefined;
+        this.toggletipController.update(false);
     }
     componentDidRender() {
-        if (!this.hasToggletip) {
-            this.toggletipElRef?.hidePopover();
-            this.cleanUpTooltip();
-            return;
-        }
-        if (!this.cleanUpFunction &&
-            this.toggletipActive &&
-            this.button &&
-            this.toggletipElRef &&
-            this.toggletipArrowElRef) {
-            this.cleanUpFunction = positionTooltip_function.positionTooltip({
-                referenceElement: this.button,
-                tipRef: this.toggletipElRef,
-                tipArrowRef: this.toggletipArrowElRef,
-                placementTip: this.toggletipPlacement,
-                restrictContentElement: this.restrictContentElement,
-            });
-        }
-        if (this.cleanUpFunction) {
-            if (this.toggletipActive) {
-                this.toggletipElRef?.showPopover();
-            }
-            else {
-                this.closeToggletip();
-            }
-        }
+        this.toggletipController.update(this.hasToggletip && this.toggletipActive);
     }
     connectedCallback() {
         this.mutationObserver = new MutationObserver(() => {
@@ -130,12 +106,12 @@ const InfoButton = class {
         });
     }
     disconnectedCallback() {
-        this.closeToggletip();
+        this.toggletipController.dispose();
         this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     render() {
-        return (index.h(index.Host, { key: 'f89df0ddad22608cc30c910b1fd4a0352516cee6', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: '8f46b9c1930d3e546ab604620b19241e3628a3d1', 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), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (index.h(tooltip_functionalComponent.Tooltip, { key: '2f6cbae1716c36b47e9ddb608682abdec648564b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'fc29889f2ea054cc48ee22ecde9ebeb4ba414d32', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '44b45316c3785a231fb8c214710c0689f8db7e08', name: "toggletip" }))))));
+        return (index.h(index.Host, { key: 'b38212731ef3325d9d9b87919248494ce7eb27ab', onKeyDown: this.keyDownHandler }, index.h("dso-icon-button", { key: '3f5e645d8e69e01b1342914c330f7951bd3d38cc', 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), expanded: this.hasToggletip ? this.toggletipActive : undefined }), this.hasToggletip && (index.h(tooltip_functionalComponent.Tooltip, { key: '01af1c555dadef251f3076c9137fd5d3cff3d34a', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, index.h("dso-scrollable", { key: 'd5b69968072ca345f825685643a9d371b62a6562', ref: (element) => (this.restrictContentElement = element), "aria-live": "polite" }, index.h("slot", { key: '01f5101e35bfb869909b1b9788c88dcdc9d91351', name: "toggletip" }))))));
     }
     get host() { return index.getElement(this); }
 };
@@ -155,7 +131,7 @@ function createIdentifier(prefix) {
     return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
 }
 
-const selectableCss = () => `.sc-dso-selectable-h{padding-inline-start:var(--_dso-selectable-padding-inline-start, 32px);position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:100%;inset-inline-start:0;margin:0;appearance:none;position:absolute;inset-block-start:0;inline-size:100%;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--_dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--_dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px;position:relative;margin-inline-start:var(--_dso-selectable-input-wrapper-margin-inline-start, -32px);padding-inline-start:var(--_dso-selectable-input-wrapper-padding-inline-start, 32px)}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-s>[slot=info]{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-s>[slot=options]{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-s>[slot=options] li+li{margin-block-start:8px}`;
+const selectableCss = () => `.sc-dso-selectable-h{padding-inline-start:var(--_dso-selectable-padding-inline-start, 32px);position:relative;display:var(--dso-selectable-display, block)}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:disabled+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:disabled:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:disabled:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:disabled+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:disabled:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:disabled:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:100%;inset-inline-start:0;margin:0;appearance:none;position:absolute;inset-block-start:0;inline-size:100%;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not(:disabled),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not(:disabled){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--_dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--_dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--_dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px;position:relative;margin-inline-start:var(--_dso-selectable-input-wrapper-margin-inline-start, -32px);padding-inline-start:var(--_dso-selectable-input-wrapper-padding-inline-start, 32px)}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--_dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-s>[slot=info]{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-s>[slot=options]{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-s>[slot=options] li+li{margin-block-start:8px}`;
 
 const Selectable = class {
     constructor(hostRef) {
@@ -205,7 +181,7 @@ const Selectable = class {
         const describedBy = [hasInfo && this.infoFixed ? this.describedById : undefined, this.errormessage]
             .filter((value) => value !== undefined)
             .join(" ") || undefined;
-        return (index.h(index.Fragment, { key: '4fcfaccfc2f046747059a236b95e94fd0ff63eda' }, index.h("div", { key: 'b157a7b0666bff6a70c6f73c8f01e0f404be59a6', class: "dso-selectable-container" }, index.h("div", { key: '0ae8a012600400a2ad5613a40b5edc7ed2e3697b', class: "dso-selectable-input-wrapper" }, index.h("input", { key: '3766067fdbd363f009d8e468efa744cff7806125', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '372012b7f352dbbec302bd8b8eb8ba06f61afb3b', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '9df3328a5f9e511ce3c3e47198f8962ad9fd8e5f', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '669eeac1998e756335e46e571f09ed128b510b88' }, index.h("slot", { key: '7988c3530d3b595a0bd8e276c5880bf23c32f480', name: "info" })))), index.h("slot", { key: '03944fb01644124409295f56dc44e7753d9d34e8', name: "options" })));
+        return (index.h(index.Fragment, { key: '68845031d900fd4e836859c6628a6049a3f27ade' }, index.h("div", { key: 'f177f07dce575305a6fb165ca81c02ae09d7afa7', class: "dso-selectable-container" }, index.h("div", { key: '0769aa30e6aaa1f6961d83ebaa7a0c083d42a009', class: "dso-selectable-input-wrapper" }, index.h("input", { key: 'c93ec1b0ada9abf961064c3bdfbe529fcf3933c2', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": this.invalid?.toString(), "aria-describedby": describedBy, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, ref: (el) => (this.input = el) }), !this.labelledById ? (index.h("label", { htmlFor: this.getIdentifier() }, index.h("slot", null))) : (index.h("label", null, index.h("slot", null)))), hasInfo && !this.infoFixed && (index.h("dso-info-button", { key: '56e99d443552b32995befbea8dc16b656f38ac92', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (index.h("dso-info", { key: '59872ab73d6977023d5fd3fdecb3c30161877a6c', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, index.h("div", { key: '19f24fdacb00641989b95442a9c1b2c66a0bbdfd' }, index.h("slot", { key: '45b881d9baef21e4cefa662ec0e8d8620779bfe7', name: "info" })))), index.h("slot", { key: 'bdc7f35cd2d93d9d5710b250bfaa565b26d51e7f', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/cjs/dso-input-range.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CfwUrDXc.js');
+var index = require('./index-BBx5yytN.js');
 
 const inputRangeCss = () => `:host{display:flex;align-items:center;gap:0.625rem;padding-block:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:20px}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-radius:50%;border-color:transparent}.input::-moz-range-thumb:hover{background-color:#275937}`;