@maggioli-design-system/mds-input-range 2.5.4 → 2.6.1

package/dist/cjs/{index-37d5e60f.js → index-1f95f3de.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: true, 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: true, 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
@@ -317,6 +317,9 @@ var parsePropertyValue = (propValue, propType) => {
     if (propType & 2 /* Number */) {
       return parseFloat(propValue);
     }
+    if (propType & 1 /* String */) {
+      return String(propValue);
+    }
     return propValue;
   }
   return propValue;

package/dist/cjs/loader.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-37d5e60f.js');
+const index = require('./index-1f95f3de.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",{"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);
+  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"formatValue":[16],"name":[513],"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,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-37d5e60f.js');
+const index = require('./index-1f95f3de.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 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-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-thumb-background:rgb(var(--tone-neutral));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:1rem;--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-track-background:rgb(var(--tone-neutral-08));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03));--mds-input-range-track-size:1.5rem;--private-border-width:calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);gap:0.5rem;-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(--private-thumb-size);position:relative}.track{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;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-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:background-color, border;transition-property:background-color, border;width:var(--private-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;width:calc(\n    (100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)\n    + (var(--mds-input-range-track-size) / 2)\n  )}.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;
 
 const MdsInputRange = class {
@@ -101,7 +101,8 @@ const MdsInputRange = class {
         this.calculateProgress();
     }
     render() {
-        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 }))));
+        var _a;
+        return (index.h(index.Host, { key: '9a4edc2c6507810ccc86a48207652b37606fbd59' }, index.h("header", { key: 'f8c23be475e7e91ff4e77ca9152bdc164c4472fe', class: "header", part: "header" }, index.h("mds-text", { key: 'd1d753f05d0d6a74ac5855baec702856824f62dd', class: "label", typography: "label" }, index.h("slot", { key: '89a0b3be4e54e7f4d9abbae3f441c421e428866d' })), index.h("mds-text", { key: '2d8eade92dadba997ab9a6e8a2d5d0a6194a5740', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '76b9f55cf9533a0d77edad81ff6fa1c6558427a6', class: "range" }, index.h("div", { key: '28220c6a14194dc011583b6c93faea0e24e6b948', class: "track", part: "track" }, index.h("div", { key: '652e0da13381878b5b8230a3a91570abfa4e29f1', class: "contrast-area" }), index.h("div", { key: '70006e3b638ee1f8c2401818bd36010ffe6f0073', class: "track-total" }, index.h("div", { key: 'd2f25778c70b63b2b6ab0951ed55c8faae682e4f', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: 'fb9a57174b72c222fc8daec71402d7c5c987b5c9', 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, name: this.name }))));
     }
     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-37d5e60f.js');
+const index = require('./index-1f95f3de.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",{"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);
+  return index.bootstrapLazy([["mds-input-range.cjs",[[65,"mds-input-range",{"formatValue":[16],"name":[513],"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/components/mds-input-range/mds-input-range.css

@@ -11,24 +11,32 @@
 @tailwind components;
 
 /**
+ * @prop --mds-input-range-thumb-background-disabled: Sets the thumb background color when the component is disabled
+ * @prop --mds-input-range-thumb-background: Sets the thumb background color
+ * @prop --mds-input-range-thumb-cursor: Sets the thumb cursor
  * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component
- * @prop --mds-input-range-thumb-background:
- * @prop --mds-input-range-track-background:
- * @prop --mds-input-range-track-size:
- * @prop --mds-input-range-track-progress-background:
+ * @prop --mds-input-range-track-background-disabled: Sets the track background color when the component is disabled
+ * @prop --mds-input-range-track-background: Sets the track background color
+ * @prop --mds-input-range-track-progress-background-disabled: Sets the track progress background color when the component is disabled
+ * @prop --mds-input-range-track-progress-background: Sets the track progress background color
+ * @prop --mds-input-range-track-size: Sets the track width and height
  */
 
 :host {
+  --mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-08));
+  --mds-input-range-thumb-background: rgb(var(--tone-neutral));
+  --mds-input-range-thumb-cursor: col-resize;
   --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-background: rgb(var(--tone-neutral-08));
   --mds-input-range-track-progress-background-disabled: rgb(var(--tone-neutral-06));
-  gap: 0.25rem;
+  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));
+  --mds-input-range-track-size: 1.5rem;
+
+  /* private properties */
+  --private-border-width: calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);
+  --private-thumb-size: calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);
+  gap: 0.5rem;
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -56,17 +64,14 @@
 .range {
   align-items: center;
   display: flex;
-  height: var(--mds-input-range-thumb-size);
+  height: var(--private-thumb-size);
   position: relative;
 }
 
 .track {
   width: 100%;
 
-  --margin: calc(var(--mds-input-range-track-size) / 2);
-
   box-sizing: border-box;
-  padding: 0 var(--margin);
   position: absolute;
 }
 
@@ -118,16 +123,17 @@
 
           appearance: none;
   background-color: var(--mds-input-range-thumb-background);
-  border: 0;
+  border-color: var(--mds-input-range-track-progress-background);
   border-radius: var(--mds-input-range-thumb-size);
-  box-shadow: var(--mds-input-range-thumb-shadow);
-  cursor: grab;
-  height: var(--mds-input-range-thumb-size);
+  border-style: solid;
+  border-width: var(--private-border-width);
+  cursor: var(--mds-input-range-thumb-cursor);
+  height: var(--private-thumb-size);
   line-height: 0;
   transform: translate(0, -50%);
-  -webkit-transition-property: background-color, box-shadow;
-  transition-property: background-color, box-shadow;
-  width: var(--mds-input-range-thumb-size);
+  -webkit-transition-property: background-color, border;
+  transition-property: background-color, border;
+  width: var(--private-thumb-size);
 }
 
 .field::-webkit-slider-runnable-track {
@@ -146,6 +152,16 @@
   display: flex;
   height: var(--mds-input-range-track-size);
   transition-property: background-color;
+
+  /*
+    Align fill end with thumb center.
+    Thumb center travels across (100% - thumbSize); at 0% and 100% it's inset by thumbSize/2.
+    We use track size as the thumb's outer size (matches current thumb calc).
+  */
+  width: calc(
+    (100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)
+    + (var(--mds-input-range-track-size) / 2)
+  );
 }
 
 .track-total {

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 /**
  * @part header - The element containing the labels displayed over the input element
+ * @part track - The element containing the track of the input range
  */
 export class MdsInputRange {
     constructor() {
@@ -87,7 +88,8 @@ export class MdsInputRange {
         this.calculateProgress();
     }
     render() {
-        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 }))));
+        var _a;
+        return (h(Host, { key: '9a4edc2c6507810ccc86a48207652b37606fbd59' }, h("header", { key: 'f8c23be475e7e91ff4e77ca9152bdc164c4472fe', class: "header", part: "header" }, h("mds-text", { key: 'd1d753f05d0d6a74ac5855baec702856824f62dd', class: "label", typography: "label" }, h("slot", { key: '89a0b3be4e54e7f4d9abbae3f441c421e428866d' })), h("mds-text", { key: '2d8eade92dadba997ab9a6e8a2d5d0a6194a5740', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '76b9f55cf9533a0d77edad81ff6fa1c6558427a6', class: "range" }, h("div", { key: '28220c6a14194dc011583b6c93faea0e24e6b948', class: "track", part: "track" }, h("div", { key: '652e0da13381878b5b8230a3a91570abfa4e29f1', class: "contrast-area" }), h("div", { key: '70006e3b638ee1f8c2401818bd36010ffe6f0073', class: "track-total" }, h("div", { key: 'd2f25778c70b63b2b6ab0951ed55c8faae682e4f', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: 'fb9a57174b72c222fc8daec71402d7c5c987b5c9', 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, name: this.name }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -121,6 +123,25 @@ export class MdsInputRange {
                 "getter": false,
                 "setter": false
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Is needed to reference the form data after the form is submitted"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": true
+            },
             "max": {
                 "type": "number",
                 "mutable": false,

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

@@ -25,7 +25,7 @@ export default {
         },
     },
 };
-const Template = args => (h("mds-input-range", Object.assign({}, args), "Range label"));
+const Template = args => (h("div", { class: "grid gap-400" }, h("mds-input-range", Object.assign({}, args), "Range label")));
 const TemplateFormatLabel = args => {
     useEffect(() => {
         document.querySelector('#custom-labeled').formatValue = formatValue;

package/dist/collection/dictionary/typography.js

@@ -64,4 +64,8 @@ const typographyInputDictionary = [
     'snippet',
     'detail',
 ];
-export { typographyDictionary, typographyInfoDictionary, typographyInputDictionary, typographyMonoDictionary, typographyReadDictionary, typographyReadingVariationsDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };
+const typographyTechnicalDictionary = [
+    'option',
+    'label',
+];
+export { typographyDictionary, typographyInfoDictionary, typographyInputDictionary, typographyTechnicalDictionary, typographyMonoDictionary, typographyReadDictionary, typographyReadingVariationsDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-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 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-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-thumb-background:rgb(var(--tone-neutral));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:1rem;--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08));--mds-input-range-track-background:rgb(var(--tone-neutral-08));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03));--mds-input-range-track-size:1.5rem;--private-border-width:calc(calc(var(--mds-input-range-track-size) - var(--mds-input-range-thumb-size)) / 2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width) * 2);gap:0.5rem;-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(--private-thumb-size);position:relative}.track{width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;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-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:background-color, border;transition-property:background-color, border;width:var(--private-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;width:calc(\n    (100% - var(--mds-input-range-track-size)) * (var(--mds-input-range-progress, 0) * 0.01)\n    + (var(--mds-input-range-track-size) / 2)\n  )}.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;
 
 const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange extends HTMLElement {
@@ -93,7 +93,8 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         this.calculateProgress();
     }
     render() {
-        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 }))));
+        var _a;
+        return (h(Host, { key: '9a4edc2c6507810ccc86a48207652b37606fbd59' }, h("header", { key: 'f8c23be475e7e91ff4e77ca9152bdc164c4472fe', class: "header", part: "header" }, h("mds-text", { key: 'd1d753f05d0d6a74ac5855baec702856824f62dd', class: "label", typography: "label" }, h("slot", { key: '89a0b3be4e54e7f4d9abbae3f441c421e428866d' })), h("mds-text", { key: '2d8eade92dadba997ab9a6e8a2d5d0a6194a5740', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '76b9f55cf9533a0d77edad81ff6fa1c6558427a6', class: "range" }, h("div", { key: '28220c6a14194dc011583b6c93faea0e24e6b948', class: "track", part: "track" }, h("div", { key: '652e0da13381878b5b8230a3a91570abfa4e29f1', class: "contrast-area" }), h("div", { key: '70006e3b638ee1f8c2401818bd36010ffe6f0073', class: "track-total" }, h("div", { key: 'd2f25778c70b63b2b6ab0951ed55c8faae682e4f', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: 'fb9a57174b72c222fc8daec71402d7c5c987b5c9', 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, name: this.name }))));
     }
     static get formAssociated() { return true; }
     get element() { return this; }
@@ -107,6 +108,7 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
     static get style() { return MdsInputRangeStyle0; }
 }, [65, "mds-input-range", {
         "formatValue": [16],
+        "name": [513],
         "max": [2],
         "min": [2],
         "step": [2],

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-19T19:22:33",
+  "timestamp": "2026-03-24T16:39:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.27.2",
@@ -15,6 +15,10 @@
         {
           "name": "part",
           "text": "header - The element containing the labels displayed over the input element"
+        },
+        {
+          "name": "part",
+          "text": "track - The element containing the track of the input range"
         }
       ],
       "usage": {},
@@ -118,6 +122,32 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": true,
+          "docs": "Is needed to reference the form data after the form is submitted",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "step",
           "type": "number",
@@ -188,7 +218,17 @@
         {
           "name": "--mds-input-range-thumb-background",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Sets the thumb background color"
+        },
+        {
+          "name": "--mds-input-range-thumb-background-disabled",
+          "annotation": "prop",
+          "docs": "Sets the thumb background color when the component is disabled"
+        },
+        {
+          "name": "--mds-input-range-thumb-cursor",
+          "annotation": "prop",
+          "docs": "Sets the thumb cursor"
         },
         {
           "name": "--mds-input-range-thumb-size",
@@ -198,17 +238,27 @@
         {
           "name": "--mds-input-range-track-background",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Sets the track background color"
+        },
+        {
+          "name": "--mds-input-range-track-background-disabled",
+          "annotation": "prop",
+          "docs": "Sets the track background color when the component is disabled"
         },
         {
           "name": "--mds-input-range-track-progress-background",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Sets the track progress background color"
+        },
+        {
+          "name": "--mds-input-range-track-progress-background-disabled",
+          "annotation": "prop",
+          "docs": "Sets the track progress background color when the component is disabled"
         },
         {
           "name": "--mds-input-range-track-size",
           "annotation": "prop",
-          "docs": ""
+          "docs": "Sets the track width and height"
         }
       ],
       "slots": [],
@@ -216,6 +266,10 @@
         {
           "name": "header",
           "docs": "The element containing the labels displayed over the input element"
+        },
+        {
+          "name": "track",
+          "docs": "The element containing the track of the input range"
         }
       ],
       "dependents": [],

package/dist/esm/{index-e9d1fa7e.js → index-a1c32812.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: true, 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: true, 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
@@ -295,6 +295,9 @@ var parsePropertyValue = (propValue, propType) => {
     if (propType & 2 /* Number */) {
       return parseFloat(propValue);
     }
+    if (propType & 1 /* String */) {
+      return String(propValue);
+    }
     return propValue;
   }
   return propValue;

package/dist/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-e9d1fa7e.js';
-export { s as setNonce } from './index-e9d1fa7e.js';
+import { b as bootstrapLazy } from './index-a1c32812.js';
+export { s as setNonce } from './index-a1c32812.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",{"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);
+  return bootstrapLazy([["mds-input-range",[[65,"mds-input-range",{"formatValue":[16],"name":[513],"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 };