@maggioli-design-system/mds-input-range 2.3.1 → 2.5.0

package/dist/cjs/{index-9509a00b.js → index-37d5e60f.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-input-range';
-const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -473,7 +473,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -631,6 +635,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -759,6 +764,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9509a00b.js');
+const index = require('./index-37d5e60f.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"formatValue":[16],"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9509a00b.js');
+const index = require('./index-37d5e60f.js');
 
 const mdsInputRangeCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; :host{--mds-input-range-thumb-size:1rem;--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-thumb-shadow:0 0 0 2px rgb(var(--tone-neutral));--mds-input-range-track-background:rgb(var(--tone-neutral-08));--mds-input-range-track-size:0.5rem;--mds-input-range-track-progress-background:rgb(var(--variant-primary-03));--mds-input-range-thumb-background-disabled:rgb(var(--tone-neutral-06));--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06));gap:0.25rem;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);display:grid;-webkit-transition-property:color;transition-property:color}.header{gap:0.5rem;display:-ms-flexbox;display:flex}.label{min-width:0rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value{margin-left:auto}.range{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;height:var(--mds-input-range-thumb-size);position:relative}.track{width:100%;--margin:calc(var(--mds-input-range-track-size) / 2);-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 var(--margin);position:absolute}.field{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field{z-index:20;height:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-radius:1000px;-ms-flex-positive:1;flex-grow:1;margin:0}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.field::-webkit-slider-thumb{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-appearance:none;appearance:none;background-color:var(--mds-input-range-thumb-background);border:0;border-radius:var(--mds-input-range-thumb-size);-webkit-box-shadow:var(--mds-input-range-thumb-shadow);box-shadow:var(--mds-input-range-thumb-shadow);cursor:-webkit-grab;cursor:grab;height:var(--mds-input-range-thumb-size);line-height:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:background-color, box-shadow;-webkit-transition-property:background-color, -webkit-box-shadow;transition-property:background-color, -webkit-box-shadow;transition-property:background-color, box-shadow;transition-property:background-color, box-shadow, -webkit-box-shadow;width:var(--mds-input-range-thumb-size)}.field::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;border:0;height:0;width:100%}.track-progress{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-progress-background);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);-webkit-transition-property:background-color;transition-property:background-color}.track-total{-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-range-track-background);border-radius:var(--mds-input-range-track-size);display:-ms-flexbox;display:flex;height:var(--mds-input-range-track-size);overflow:hidden;-webkit-transition-property:background-color;transition-property:background-color;width:100%}.contrast-area{margin-left:0.25rem;margin-right:0.25rem;border-radius:var(--mds-input-range-track-size)}:host([disabled]:not([disabled=\"false\"])){--mds-input-range-thumb-background:var(--mds-input-range-thumb-background-disabled);--mds-input-range-track-background:var(--mds-input-range-track-background-disabled);--mds-input-range-track-progress-background:var(--mds-input-range-track-progress-background-disabled)}:host([disabled]:not([disabled=\"false\"])) .field::-webkit-slider-thumb{cursor:not-allowed}:host-context(.pref-animation-reduce),:host-context(.pref-animation-reduce) .field::-webkit-slider-thumb,:host-context(.pref-animation-reduce) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-reduce) .track-progress,:host-context(.pref-animation-reduce) .track-total{-webkit-transition-duration:0s;transition-duration:0s}@media (prefers-reduced-motion){:host-context(.pref-animation-system),:host-context(.pref-animation-system) .field::-webkit-slider-thumb,:host-context(.pref-animation-system) .field::-webkit-slider-runnable-track,:host-context(.pref-animation-system) .track-progress,:host-context(.pref-animation-system) .track-total{-webkit-transition-duration:0s;transition-duration:0s}}:host-context(.pref-theme-dark){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}@media (prefers-color-scheme: dark){:host-context(.pref-theme-system){--mds-input-range-thumb-background:rgb(var(--variant-primary-04));--mds-input-range-track-background:rgb(var(--tone-neutral-07));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05))}}:host-context(.pref-contrast-more){color:rgb(var(--tone-neutral-01))}@media (prefers-contrast: more){:host-context(.pref-contrast-system){color:rgb(var(--tone-neutral-01))}}:host(:not(:is([hydrated],.hydrated))){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}mds-accordion:not(:is([hydrated],.hydrated)),mds-accordion-item:not(:is([hydrated],.hydrated)),mds-accordion-timer:not(:is([hydrated],.hydrated)),mds-accordion-timer-item:not(:is([hydrated],.hydrated)),mds-author:not(:is([hydrated],.hydrated)),mds-avatar:not(:is([hydrated],.hydrated)),mds-badge:not(:is([hydrated],.hydrated)),mds-banner:not(:is([hydrated],.hydrated)),mds-benchmark-bar:not(:is([hydrated],.hydrated)),mds-bibliography:not(:is([hydrated],.hydrated)),mds-breadcrumb:not(:is([hydrated],.hydrated)),mds-breadcrumb-item:not(:is([hydrated],.hydrated)),mds-button:not(:is([hydrated],.hydrated)),mds-card:not(:is([hydrated],.hydrated)),mds-card-content:not(:is([hydrated],.hydrated)),mds-card-footer:not(:is([hydrated],.hydrated)),mds-card-header:not(:is([hydrated],.hydrated)),mds-card-media:not(:is([hydrated],.hydrated)),mds-chip:not(:is([hydrated],.hydrated)),mds-details:not(:is([hydrated],.hydrated)),mds-dropdown:not(:is([hydrated],.hydrated)),mds-entity:not(:is([hydrated],.hydrated)),mds-file:not(:is([hydrated],.hydrated)),mds-file-preview:not(:is([hydrated],.hydrated)),mds-filter:not(:is([hydrated],.hydrated)),mds-filter-item:not(:is([hydrated],.hydrated)),mds-header:not(:is([hydrated],.hydrated)),mds-header-bar:not(:is([hydrated],.hydrated)),mds-help:not(:is([hydrated],.hydrated)),mds-horizontal-scroll:not(:is([hydrated],.hydrated)),mds-hr:not(:is([hydrated],.hydrated)),mds-icon:not(:is([hydrated],.hydrated)),mds-img:not(:is([hydrated],.hydrated)),mds-input:not(:is([hydrated],.hydrated)),mds-input-field:not(:is([hydrated],.hydrated)),mds-input-range:not(:is([hydrated],.hydrated)),mds-input-select:not(:is([hydrated],.hydrated)),mds-input-switch:not(:is([hydrated],.hydrated)),mds-input-tip:not(:is([hydrated],.hydrated)),mds-input-tip-item:not(:is([hydrated],.hydrated)),mds-input-upload:not(:is([hydrated],.hydrated)),mds-keyboard:not(:is([hydrated],.hydrated)),mds-keyboard-key:not(:is([hydrated],.hydrated)),mds-kpi:not(:is([hydrated],.hydrated)),mds-kpi-item:not(:is([hydrated],.hydrated)),mds-label:not(:is([hydrated],.hydrated)),mds-list:not(:is([hydrated],.hydrated)),mds-list-item:not(:is([hydrated],.hydrated)),mds-modal:not(:is([hydrated],.hydrated)),mds-note:not(:is([hydrated],.hydrated)),mds-notification:not(:is([hydrated],.hydrated)),mds-paginator:not(:is([hydrated],.hydrated)),mds-paginator-item:not(:is([hydrated],.hydrated)),mds-pref:not(:is([hydrated],.hydrated)),mds-pref-animation:not(:is([hydrated],.hydrated)),mds-pref-consumption:not(:is([hydrated],.hydrated)),mds-pref-contrast:not(:is([hydrated],.hydrated)),mds-pref-language:not(:is([hydrated],.hydrated)),mds-pref-language-item:not(:is([hydrated],.hydrated)),mds-pref-theme:not(:is([hydrated],.hydrated)),mds-price-table:not(:is([hydrated],.hydrated)),mds-price-table-features:not(:is([hydrated],.hydrated)),mds-price-table-features-cell:not(:is([hydrated],.hydrated)),mds-price-table-features-row:not(:is([hydrated],.hydrated)),mds-price-table-header:not(:is([hydrated],.hydrated)),mds-price-table-list:not(:is([hydrated],.hydrated)),mds-price-table-list-item:not(:is([hydrated],.hydrated)),mds-progress:not(:is([hydrated],.hydrated)),mds-push-notification:not(:is([hydrated],.hydrated)),mds-push-notifications:not(:is([hydrated],.hydrated)),mds-quote:not(:is([hydrated],.hydrated)),mds-separator:not(:is([hydrated],.hydrated)),mds-spinner:not(:is([hydrated],.hydrated)),mds-stepper-bar:not(:is([hydrated],.hydrated)),mds-stepper-bar-item:not(:is([hydrated],.hydrated)),mds-tab:not(:is([hydrated],.hydrated)),mds-tab-bar:not(:is([hydrated],.hydrated)),mds-tab-bar-item:not(:is([hydrated],.hydrated)),mds-tab-item:not(:is([hydrated],.hydrated)),mds-table:not(:is([hydrated],.hydrated)),mds-table-body:not(:is([hydrated],.hydrated)),mds-table-cell:not(:is([hydrated],.hydrated)),mds-table-footer:not(:is([hydrated],.hydrated)),mds-table-header:not(:is([hydrated],.hydrated)),mds-table-header-cell:not(:is([hydrated],.hydrated)),mds-table-row:not(:is([hydrated],.hydrated)),mds-text:not(:is([hydrated],.hydrated)),mds-toast:not(:is([hydrated],.hydrated)),mds-tooltip:not(:is([hydrated],.hydrated)),mds-tree:not(:is([hydrated],.hydrated)),mds-tree-item:not(:is([hydrated],.hydrated)),mds-url-view:not(:is([hydrated],.hydrated)),mds-usage:not(:is([hydrated],.hydrated)),mds-video-wall:not(:is([hydrated],.hydrated)),mds-zero:not(:is([hydrated],.hydrated)){-webkit-animation-duration:0s;animation-duration:0s;border-color:transparent;-webkit-box-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;opacity:0;outline-color:transparent;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s;visibility:hidden}";
 const MdsInputRangeStyle0 = mdsInputRangeCss;
@@ -32,24 +32,34 @@ const MdsInputRange = class {
          */
         this.step = 1;
         this.onInput = () => {
+            if (Number.isNaN(this.inputElement.value))
+                throw Error(`Entered value ${this.inputElement.value} is not a Number`);
             // trigger valueChanged that update progress and emit event
-            this.value = parseInt(this.inputElement.value);
+            this.value = Number(this.inputElement.value);
         };
     }
     calculateProgress() {
         // validate value
-        let v = parseInt(this.inputElement.value);
+        let v = Number(this.inputElement.value);
+        // multiplier is needed to manage decimal value and step, so we can work with integer value and avoid decimal division
+        const multiplier = Math.pow(10, this.decimalPlaces);
         if (v > this.max)
             v = this.max;
         else if (v < this.min)
             v = this.min;
-        if ((v - this.min) % (this.step) !== 0)
-            v = Math.round(v / this.step) * this.step - this.min;
+        if ((v - this.min) * multiplier % (this.step * multiplier) !== 0) {
+            v = (Math.round((v * multiplier - this.min * multiplier) / (this.step * multiplier)) * (this.step * multiplier) + this.min * multiplier) / multiplier;
+        }
         this.value = v;
         this.internals.setFormValue(this.value.toString());
         const total = this.max - this.min;
         const current = this.value - this.min;
-        this.progress = current * 100 / total;
+        this.progress = current / total * 100;
+    }
+    countDecimals(num) {
+        if (Math.floor(num) === num)
+            return 0;
+        return num.toString().split('.')[1].length || 0;
     }
     disabledChanged(newValue) {
         /**
@@ -61,7 +71,9 @@ const MdsInputRange = class {
             this.internals.setFormValue(null);
         }
     }
-    valueChanged() {
+    valueChanged(newValue, oldValue) {
+        if (newValue === oldValue)
+            return;
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
         this.changeEvent.emit(this.value);
@@ -73,22 +85,23 @@ const MdsInputRange = class {
         this.calculateProgress();
     }
     stepChanged() {
-        if (this.step < 1)
+        if (this.step <= 0)
             throw Error('step cant be negative or zero');
+        this.decimalPlaces = this.countDecimals(this.step);
         this.calculateProgress();
     }
     formResetCallback() {
         this.internals.setFormValue('');
     }
     componentDidLoad() {
-        var _a, _b;
+        var _a;
+        this.decimalPlaces = this.countDecimals(this.step);
+        this.onInput(); // define value
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
-        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
-        this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (index.h(index.Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, index.h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, index.h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, index.h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), index.h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), index.h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, index.h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, index.h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), index.h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, index.h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (index.h(index.Host, { key: 'c7f40ef34fa414e4f99881e815fa805dfc089667' }, index.h("header", { key: '285c789e06277c9f0f2068b4a49036faf29dd70b', class: "header", part: "header" }, index.h("mds-text", { key: '485ff525a7fbca6e7a7e121bde7f44ad193bd880', class: "label", typography: "label" }, index.h("slot", { key: '3147cbc8b650bfa3fd87f69f6356687ccdc38024' })), index.h("mds-text", { key: 'c1bafcdfb7d5beda33473240b95a9f733ed7c8b9', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '26043966f0e431585aea5b453231591ebfec5dff', class: "range" }, index.h("div", { key: '291fa31c69d3a2a34d4eb14aeab1a9cb51f7bcb3', class: "track" }, index.h("div", { key: '8ee7c29eef91b226bbfe96abe62e95fad2094e7a', class: "contrast-area" }), index.h("div", { key: 'd3e4433931276f474ebe24893826da680f17d541', class: "track-total" }, index.h("div", { key: '87fa236d8538776e5a3372239307032de90e8e91', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '0eb811c18c9e9fe81d5df4e5ce019e800aad75e2', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-range.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9509a00b.js');
+const index = require('./index-37d5e60f.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
 
 /*
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
+  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"formatValue":[16],"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/common/floating-controller.js

@@ -65,6 +65,23 @@ export class FloatingController {
                     return { transformOrigin: 'center top' };
             }
         };
+        this.convertToTransformOrigin = (position) => {
+            const positions = {
+                top: 'center bottom',
+                right: 'left center',
+                bottom: 'center top',
+                left: 'right center',
+                'bottom-end': 'top right',
+                'bottom-start': 'top left',
+                'left-end': 'right bottom',
+                'left-start': 'right top',
+                'right-end': 'left bottom',
+                'right-start': 'left top',
+                'top-end': 'bottom right',
+                'top-start': 'bottom left',
+            };
+            return positions[position];
+        };
         this.calculatePosition = () => {
             if (!this._caller)
                 return;
@@ -99,6 +116,8 @@ export class FloatingController {
                 Object.assign(this._host.style, {
                     left: `${x}px`,
                     top: `${y}px`,
+                    transformOrigin: this.convertToTransformOrigin(placement),
+                    position: this._host.strategy,
                 });
                 const arrowStyle = {};
                 const arrowPosition = {
@@ -133,12 +152,14 @@ export class FloatingController {
         return caller;
     }
     updatePosition() {
-        if (this.cleanupAutoUpdate)
-            this.cleanupAutoUpdate();
-        this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+        if (this._host.visible) {
+            this.dismiss(); // to clean the old update function before update function
+            this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
+        }
     }
     dismiss() {
-        this.cleanupAutoUpdate();
+        if (this.cleanupAutoUpdate)
+            this.cleanupAutoUpdate();
     }
 }
 export class Backdrop {

package/dist/collection/common/keyboard-manager.js

@@ -22,8 +22,9 @@ export class KeyboardManager {
             this.elements.delete(name);
         };
         this.attachClickBehavior = (name = 'element') => {
-            var _a;
-            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            var _a, _b;
+            (_a = this.elements.get(name)) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
+            (_b = this.elements.get(name)) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
         };
         this.detachClickBehavior = (name = 'element') => {
             var _a;

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

@@ -18,24 +18,34 @@ export class MdsInputRange {
          */
         this.step = 1;
         this.onInput = () => {
+            if (Number.isNaN(this.inputElement.value))
+                throw Error(`Entered value ${this.inputElement.value} is not a Number`);
             // trigger valueChanged that update progress and emit event
-            this.value = parseInt(this.inputElement.value);
+            this.value = Number(this.inputElement.value);
         };
     }
     calculateProgress() {
         // validate value
-        let v = parseInt(this.inputElement.value);
+        let v = Number(this.inputElement.value);
+        // multiplier is needed to manage decimal value and step, so we can work with integer value and avoid decimal division
+        const multiplier = Math.pow(10, this.decimalPlaces);
         if (v > this.max)
             v = this.max;
         else if (v < this.min)
             v = this.min;
-        if ((v - this.min) % (this.step) !== 0)
-            v = Math.round(v / this.step) * this.step - this.min;
+        if ((v - this.min) * multiplier % (this.step * multiplier) !== 0) {
+            v = (Math.round((v * multiplier - this.min * multiplier) / (this.step * multiplier)) * (this.step * multiplier) + this.min * multiplier) / multiplier;
+        }
         this.value = v;
         this.internals.setFormValue(this.value.toString());
         const total = this.max - this.min;
         const current = this.value - this.min;
-        this.progress = current * 100 / total;
+        this.progress = current / total * 100;
+    }
+    countDecimals(num) {
+        if (Math.floor(num) === num)
+            return 0;
+        return num.toString().split('.')[1].length || 0;
     }
     disabledChanged(newValue) {
         /**
@@ -47,7 +57,9 @@ export class MdsInputRange {
             this.internals.setFormValue(null);
         }
     }
-    valueChanged() {
+    valueChanged(newValue, oldValue) {
+        if (newValue === oldValue)
+            return;
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
         this.changeEvent.emit(this.value);
@@ -59,22 +71,23 @@ export class MdsInputRange {
         this.calculateProgress();
     }
     stepChanged() {
-        if (this.step < 1)
+        if (this.step <= 0)
             throw Error('step cant be negative or zero');
+        this.decimalPlaces = this.countDecimals(this.step);
         this.calculateProgress();
     }
     formResetCallback() {
         this.internals.setFormValue('');
     }
     componentDidLoad() {
-        var _a, _b;
+        var _a;
+        this.decimalPlaces = this.countDecimals(this.step);
+        this.onInput(); // define value
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
-        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
-        this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'c7f40ef34fa414e4f99881e815fa805dfc089667' }, h("header", { key: '285c789e06277c9f0f2068b4a49036faf29dd70b', class: "header", part: "header" }, h("mds-text", { key: '485ff525a7fbca6e7a7e121bde7f44ad193bd880', class: "label", typography: "label" }, h("slot", { key: '3147cbc8b650bfa3fd87f69f6356687ccdc38024' })), h("mds-text", { key: 'c1bafcdfb7d5beda33473240b95a9f733ed7c8b9', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '26043966f0e431585aea5b453231591ebfec5dff', class: "range" }, h("div", { key: '291fa31c69d3a2a34d4eb14aeab1a9cb51f7bcb3', class: "track" }, h("div", { key: '8ee7c29eef91b226bbfe96abe62e95fad2094e7a', class: "contrast-area" }), h("div", { key: 'd3e4433931276f474ebe24893826da680f17d541', class: "track-total" }, h("div", { key: '87fa236d8538776e5a3372239307032de90e8e91', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '0eb811c18c9e9fe81d5df4e5ce019e800aad75e2', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +104,23 @@ export class MdsInputRange {
     }
     static get properties() {
         return {
+            "formatValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(value: number) => string",
+                    "resolved": "((value: number) => string) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A function to custom how value is represented"
+                },
+                "getter": false,
+                "setter": false
+            },
             "max": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/mds-input-range/test/mds-input-range.stories.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { useEffect } from "react";
 export default {
     title: 'Form / Range',
     argTypes: {
@@ -25,6 +26,15 @@ export default {
     },
 };
 const Template = args => h("mds-input-range", Object.assign({}, args), "Range label");
+const TemplateFormatLabel = args => {
+    useEffect(() => {
+        document.querySelector('#custom-labeled').formatValue = formatValue;
+    }, []);
+    function formatValue(v) {
+        return `Hai selezionato il valore ${v}`;
+    }
+    return h("div", null, h("mds-input-range", Object.assign({ id: "custom-labeled" }, args), "Range label"));
+};
 const hideHeaderCss = `
   mds-input-range::part(header) {
     display: none;
@@ -52,4 +62,5 @@ export const Value = Template.bind({});
 Value.args = {
     value: 90,
 };
+export const FormatLabel = TemplateFormatLabel.bind({});
 export const HideHeader = HideHeaderTemplate.bind({});

package/dist/collection/dictionary/button.js

@@ -7,6 +7,8 @@ const buttonVariantDictionary = [
     'secondary',
     'success',
     'warning',
+    'google',
+    'apple',
 ];
 const buttonToneVariantDictionary = [
     'strong',

package/dist/collection/type/input-tip.js

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

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

@@ -24,24 +24,34 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
          */
         this.step = 1;
         this.onInput = () => {
+            if (Number.isNaN(this.inputElement.value))
+                throw Error(`Entered value ${this.inputElement.value} is not a Number`);
             // trigger valueChanged that update progress and emit event
-            this.value = parseInt(this.inputElement.value);
+            this.value = Number(this.inputElement.value);
         };
     }
     calculateProgress() {
         // validate value
-        let v = parseInt(this.inputElement.value);
+        let v = Number(this.inputElement.value);
+        // multiplier is needed to manage decimal value and step, so we can work with integer value and avoid decimal division
+        const multiplier = Math.pow(10, this.decimalPlaces);
         if (v > this.max)
             v = this.max;
         else if (v < this.min)
             v = this.min;
-        if ((v - this.min) % (this.step) !== 0)
-            v = Math.round(v / this.step) * this.step - this.min;
+        if ((v - this.min) * multiplier % (this.step * multiplier) !== 0) {
+            v = (Math.round((v * multiplier - this.min * multiplier) / (this.step * multiplier)) * (this.step * multiplier) + this.min * multiplier) / multiplier;
+        }
         this.value = v;
         this.internals.setFormValue(this.value.toString());
         const total = this.max - this.min;
         const current = this.value - this.min;
-        this.progress = current * 100 / total;
+        this.progress = current / total * 100;
+    }
+    countDecimals(num) {
+        if (Math.floor(num) === num)
+            return 0;
+        return num.toString().split('.')[1].length || 0;
     }
     disabledChanged(newValue) {
         /**
@@ -53,7 +63,9 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
             this.internals.setFormValue(null);
         }
     }
-    valueChanged() {
+    valueChanged(newValue, oldValue) {
+        if (newValue === oldValue)
+            return;
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
         this.changeEvent.emit(this.value);
@@ -65,22 +77,23 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         this.calculateProgress();
     }
     stepChanged() {
-        if (this.step < 1)
+        if (this.step <= 0)
             throw Error('step cant be negative or zero');
+        this.decimalPlaces = this.countDecimals(this.step);
         this.calculateProgress();
     }
     formResetCallback() {
         this.internals.setFormValue('');
     }
     componentDidLoad() {
-        var _a, _b;
+        var _a;
+        this.decimalPlaces = this.countDecimals(this.step);
+        this.onInput(); // define value
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
-        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
-        this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'c7f40ef34fa414e4f99881e815fa805dfc089667' }, h("header", { key: '285c789e06277c9f0f2068b4a49036faf29dd70b', class: "header", part: "header" }, h("mds-text", { key: '485ff525a7fbca6e7a7e121bde7f44ad193bd880', class: "label", typography: "label" }, h("slot", { key: '3147cbc8b650bfa3fd87f69f6356687ccdc38024' })), h("mds-text", { key: 'c1bafcdfb7d5beda33473240b95a9f733ed7c8b9', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '26043966f0e431585aea5b453231591ebfec5dff', class: "range" }, h("div", { key: '291fa31c69d3a2a34d4eb14aeab1a9cb51f7bcb3', class: "track" }, h("div", { key: '8ee7c29eef91b226bbfe96abe62e95fad2094e7a', class: "contrast-area" }), h("div", { key: 'd3e4433931276f474ebe24893826da680f17d541', class: "track-total" }, h("div", { key: '87fa236d8538776e5a3372239307032de90e8e91', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '0eb811c18c9e9fe81d5df4e5ce019e800aad75e2', ref: el => this.inputElement = el, class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return this; }
@@ -93,6 +106,7 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
     }; }
     static get style() { return MdsInputRangeStyle0; }
 }, [65, "mds-input-range", {
+        "formatValue": [16],
         "max": [2],
         "min": [2],
         "step": [2],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-03-10T12:32:28",
+  "timestamp": "2025-04-02T09:16:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -45,6 +45,31 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "formatValue",
+          "type": "((value: number) => string) | undefined",
+          "complexType": {
+            "original": "(value: number) => string",
+            "resolved": "((value: number) => string) | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "A function to custom how value is represented",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "((value: number) => string)"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "max",
           "type": "number",

package/dist/esm/{index-476f378c.js → index-e9d1fa7e.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'mds-input-range';
-const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -451,7 +451,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         }
       }
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      newValue(elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -609,6 +613,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         elm.remove();
       }
@@ -737,6 +742,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     elm.data = text;
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
 var insertBefore = (parent, newNode, reference) => {
   {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-476f378c.js';
-export { s as setNonce } from './index-476f378c.js';
+import { b as bootstrapLazy } from './index-e9d1fa7e.js';
+export { s as setNonce } from './index-e9d1fa7e.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["mds-input-range",[[65,"mds-input-range",{"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
+  return bootstrapLazy([["mds-input-range",[[65,"mds-input-range",{"formatValue":[16],"max":[2],"min":[2],"step":[2],"disabled":[1540],"value":[1538],"progress":[32]},null,{"disabled":["disabledChanged"],"value":["valueChanged"],"min":["minChanged"],"max":["maxChanged"],"step":["stepChanged"]}]]]], options);
 };
 
 export { defineCustomElements };