@maggioli-design-system/mds-input-range 2.5.3 → 2.6.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 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 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: 'c18e348050b8613f09cd7f8b3de699ba2893d56a' }, index.h("header", { key: '74f89b34d4be455e8a20574db178a477c5a04892', class: "header", part: "header" }, index.h("mds-text", { key: '52afe2fa8c6a632a7af247fa4dab2ce5a0218617', class: "label", typography: "label" }, index.h("slot", { key: '04af45448ed4baea021aa1fe15c56d8fff786e78' })), index.h("mds-text", { key: '767fceb22930f70dbf7f140aa94e2eb3f14790e4', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '02ebb09257839fa9de003fb384c94714d3356845', class: "range" }, index.h("div", { key: '2e0f349c8aa8283806e0b831f516af183039133d', class: "track", part: "track" }, index.h("div", { key: '6be1a2e9982606574b55031cebe1f42b092034c1', class: "contrast-area" }), index.h("div", { key: '8502811a582e9b5f48bc198f92fcda6729601d87', class: "track-total" }, index.h("div", { key: 'ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: '9be4d67701b2007ed1ce4b9bc10532fc8bd6f969', 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/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: 'c18e348050b8613f09cd7f8b3de699ba2893d56a' }, h("header", { key: '74f89b34d4be455e8a20574db178a477c5a04892', class: "header", part: "header" }, h("mds-text", { key: '52afe2fa8c6a632a7af247fa4dab2ce5a0218617', class: "label", typography: "label" }, h("slot", { key: '04af45448ed4baea021aa1fe15c56d8fff786e78' })), h("mds-text", { key: '767fceb22930f70dbf7f140aa94e2eb3f14790e4', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '02ebb09257839fa9de003fb384c94714d3356845', class: "range" }, h("div", { key: '2e0f349c8aa8283806e0b831f516af183039133d', class: "track", part: "track" }, h("div", { key: '6be1a2e9982606574b55031cebe1f42b092034c1', class: "contrast-area" }), h("div", { key: '8502811a582e9b5f48bc198f92fcda6729601d87', class: "track-total" }, h("div", { key: 'ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '9be4d67701b2007ed1ce4b9bc10532fc8bd6f969', 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"; }

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/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: 'c18e348050b8613f09cd7f8b3de699ba2893d56a' }, h("header", { key: '74f89b34d4be455e8a20574db178a477c5a04892', class: "header", part: "header" }, h("mds-text", { key: '52afe2fa8c6a632a7af247fa4dab2ce5a0218617', class: "label", typography: "label" }, h("slot", { key: '04af45448ed4baea021aa1fe15c56d8fff786e78' })), h("mds-text", { key: '767fceb22930f70dbf7f140aa94e2eb3f14790e4', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '02ebb09257839fa9de003fb384c94714d3356845', class: "range" }, h("div", { key: '2e0f349c8aa8283806e0b831f516af183039133d', class: "track", part: "track" }, h("div", { key: '6be1a2e9982606574b55031cebe1f42b092034c1', class: "contrast-area" }), h("div", { key: '8502811a582e9b5f48bc198f92fcda6729601d87', class: "track-total" }, h("div", { key: 'ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '9be4d67701b2007ed1ce4b9bc10532fc8bd6f969', 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; }

package/dist/documentation.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-01-16T15:00:11",
+  "timestamp": "2026-03-18T11:03:18",
   "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": {},
@@ -188,7 +192,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 +212,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 +240,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/mds-input-range.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e9d1fa7e.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 {
@@ -97,7 +97,8 @@ const MdsInputRange = class {
         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: 'c18e348050b8613f09cd7f8b3de699ba2893d56a' }, h("header", { key: '74f89b34d4be455e8a20574db178a477c5a04892', class: "header", part: "header" }, h("mds-text", { key: '52afe2fa8c6a632a7af247fa4dab2ce5a0218617', class: "label", typography: "label" }, h("slot", { key: '04af45448ed4baea021aa1fe15c56d8fff786e78' })), h("mds-text", { key: '767fceb22930f70dbf7f140aa94e2eb3f14790e4', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), h("div", { key: '02ebb09257839fa9de003fb384c94714d3356845', class: "range" }, h("div", { key: '2e0f349c8aa8283806e0b831f516af183039133d', class: "track", part: "track" }, h("div", { key: '6be1a2e9982606574b55031cebe1f42b092034c1', class: "contrast-area" }), h("div", { key: '8502811a582e9b5f48bc198f92fcda6729601d87', class: "track-total" }, h("div", { key: 'ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), h("input", { key: '9be4d67701b2007ed1ce4b9bc10532fc8bd6f969', 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 getElement(this); }

package/dist/esm-es5/mds-input-range.entry.js

@@ -1 +1 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-e9d1fa7e.js";var 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}';var MdsInputRangeStyle0=mdsInputRangeCss;var MdsInputRange=function(){function t(t){var e=this;registerInstance(this,t);this.changeEvent=createEvent(this,"mdsInputRangeChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.max=100;this.min=0;this.step=1;this.onInput=function(){if(Number.isNaN(e.inputElement.value))throw Error("Entered value ".concat(e.inputElement.value," is not a Number"));e.value=Number(e.inputElement.value)}}t.prototype.calculateProgress=function(){var t=Number(this.inputElement.value);var e=Math.pow(10,this.decimalPlaces);if(t>this.max)t=this.max;else if(t<this.min)t=this.min;if((t-this.min)*e%(this.step*e)!==0){t=(Math.round((t*e-this.min*e)/(this.step*e))*(this.step*e)+this.min*e)/e}this.value=t;this.internals.setFormValue(this.value.toString());var a=this.max-this.min;var r=this.value-this.min;this.progress=r/a*100};t.prototype.countDecimals=function(t){if(Math.floor(t)===t)return 0;return t.toString().split(".")[1].length||0};t.prototype.disabledChanged=function(t){if(t){this.internals.setFormValue(null)}};t.prototype.valueChanged=function(t,e){if(t===e)return;this.inputElement.value=this.value.toString();this.calculateProgress();this.changeEvent.emit(this.value)};t.prototype.minChanged=function(){this.calculateProgress()};t.prototype.maxChanged=function(){this.calculateProgress()};t.prototype.stepChanged=function(){if(this.step<=0)throw Error("step cant be negative or zero");this.decimalPlaces=this.countDecimals(this.step);this.calculateProgress()};t.prototype.formResetCallback=function(){this.internals.setFormValue("")};t.prototype.componentDidLoad=function(){var t;this.decimalPlaces=this.countDecimals(this.step);this.onInput();this.label=(t=this.element.textContent)!==null&&t!==void 0?t:"";this.calculateProgress()};t.prototype.render=function(){var t=this;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:"".concat(this.progress,"%")}}))),h("input",{key:"0eb811c18c9e9fe81d5df4e5ce019e800aad75e2",ref:function(e){return t.inputElement=e},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})))};Object.defineProperty(t,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}},enumerable:false,configurable:true});return t}();MdsInputRange.style=MdsInputRangeStyle0;export{MdsInputRange as mds_input_range};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-e9d1fa7e.js";var 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}';var MdsInputRangeStyle0=mdsInputRangeCss;var MdsInputRange=function(){function t(t){var e=this;registerInstance(this,t);this.changeEvent=createEvent(this,"mdsInputRangeChange",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.max=100;this.min=0;this.step=1;this.onInput=function(){if(Number.isNaN(e.inputElement.value))throw Error("Entered value ".concat(e.inputElement.value," is not a Number"));e.value=Number(e.inputElement.value)}}t.prototype.calculateProgress=function(){var t=Number(this.inputElement.value);var e=Math.pow(10,this.decimalPlaces);if(t>this.max)t=this.max;else if(t<this.min)t=this.min;if((t-this.min)*e%(this.step*e)!==0){t=(Math.round((t*e-this.min*e)/(this.step*e))*(this.step*e)+this.min*e)/e}this.value=t;this.internals.setFormValue(this.value.toString());var r=this.max-this.min;var a=this.value-this.min;this.progress=a/r*100};t.prototype.countDecimals=function(t){if(Math.floor(t)===t)return 0;return t.toString().split(".")[1].length||0};t.prototype.disabledChanged=function(t){if(t){this.internals.setFormValue(null)}};t.prototype.valueChanged=function(t,e){if(t===e)return;this.inputElement.value=this.value.toString();this.calculateProgress();this.changeEvent.emit(this.value)};t.prototype.minChanged=function(){this.calculateProgress()};t.prototype.maxChanged=function(){this.calculateProgress()};t.prototype.stepChanged=function(){if(this.step<=0)throw Error("step cant be negative or zero");this.decimalPlaces=this.countDecimals(this.step);this.calculateProgress()};t.prototype.formResetCallback=function(){this.internals.setFormValue("")};t.prototype.componentDidLoad=function(){var t;this.decimalPlaces=this.countDecimals(this.step);this.onInput();this.label=(t=this.element.textContent)!==null&&t!==void 0?t:"";this.calculateProgress()};t.prototype.render=function(){var t=this;var e;return h(Host,{key:"c18e348050b8613f09cd7f8b3de699ba2893d56a"},h("header",{key:"74f89b34d4be455e8a20574db178a477c5a04892",class:"header",part:"header"},h("mds-text",{key:"52afe2fa8c6a632a7af247fa4dab2ce5a0218617",class:"label",typography:"label"},h("slot",{key:"04af45448ed4baea021aa1fe15c56d8fff786e78"})),h("mds-text",{key:"767fceb22930f70dbf7f140aa94e2eb3f14790e4",class:"value",typography:"label"},this.formatValue?this.formatValue(this.value):this.value)),h("div",{key:"02ebb09257839fa9de003fb384c94714d3356845",class:"range"},h("div",{key:"2e0f349c8aa8283806e0b831f516af183039133d",class:"track",part:"track"},h("div",{key:"6be1a2e9982606574b55031cebe1f42b092034c1",class:"contrast-area"}),h("div",{key:"8502811a582e9b5f48bc198f92fcda6729601d87",class:"track-total"},h("div",{key:"ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816",class:"track-progress",style:{"--mds-input-range-progress":"".concat((e=this.progress)!==null&&e!==void 0?e:0)}}))),h("input",{key:"9be4d67701b2007ed1ce4b9bc10532fc8bd6f969",ref:function(e){return t.inputElement=e},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})))};Object.defineProperty(t,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}},enumerable:false,configurable:true});return t}();MdsInputRange.style=MdsInputRangeStyle0;export{MdsInputRange as mds_input_range};

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

@@ -1 +1 @@
-import{p as e,b as a}from"./p-155deafe.js";export{s as setNonce}from"./p-155deafe.js";import{g as n}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await n(),a([["p-55273f42",[[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"]}]]]],e))));
+import{p as a,b as e}from"./p-155deafe.js";export{s as setNonce}from"./p-155deafe.js";import{g as n}from"./p-e1255160.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((async a=>(await n(),e([["p-612adc59",[[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"]}]]]],a))));

package/dist/mds-input-range/p-612adc59.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as a,H as r,g as d}from"./p-155deafe.js";const i=class{constructor(a){t(this,a),this.changeEvent=e(this,"mdsInputRangeChange",7),a.$hostElement$["s-ei"]?this.internals=a.$hostElement$["s-ei"]:(this.internals=a.$hostElement$.attachInternals(),a.$hostElement$["s-ei"]=this.internals),this.max=100,this.min=0,this.step=1,this.onInput=()=>{if(Number.isNaN(this.inputElement.value))throw Error(`Entered value ${this.inputElement.value} is not a Number`);this.value=Number(this.inputElement.value)}}calculateProgress(){let t=Number(this.inputElement.value);const e=Math.pow(10,this.decimalPlaces);t>this.max?t=this.max:t<this.min&&(t=this.min),(t-this.min)*e%(this.step*e)!=0&&(t=(Math.round((t*e-this.min*e)/(this.step*e))*(this.step*e)+this.min*e)/e),this.value=t,this.internals.setFormValue(this.value.toString()),this.progress=(this.value-this.min)/(this.max-this.min)*100}countDecimals(t){return Math.floor(t)===t?0:t.toString().split(".")[1].length||0}disabledChanged(t){t&&this.internals.setFormValue(null)}valueChanged(t,e){t!==e&&(this.inputElement.value=this.value.toString(),this.calculateProgress(),this.changeEvent.emit(this.value))}minChanged(){this.calculateProgress()}maxChanged(){this.calculateProgress()}stepChanged(){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 t;this.decimalPlaces=this.countDecimals(this.step),this.onInput(),this.label=null!==(t=this.element.textContent)&&void 0!==t?t:"",this.calculateProgress()}render(){var t;return a(r,{key:"c18e348050b8613f09cd7f8b3de699ba2893d56a"},a("header",{key:"74f89b34d4be455e8a20574db178a477c5a04892",class:"header",part:"header"},a("mds-text",{key:"52afe2fa8c6a632a7af247fa4dab2ce5a0218617",class:"label",typography:"label"},a("slot",{key:"04af45448ed4baea021aa1fe15c56d8fff786e78"})),a("mds-text",{key:"767fceb22930f70dbf7f140aa94e2eb3f14790e4",class:"value",typography:"label"},this.formatValue?this.formatValue(this.value):this.value)),a("div",{key:"02ebb09257839fa9de003fb384c94714d3356845",class:"range"},a("div",{key:"2e0f349c8aa8283806e0b831f516af183039133d",class:"track",part:"track"},a("div",{key:"6be1a2e9982606574b55031cebe1f42b092034c1",class:"contrast-area"}),a("div",{key:"8502811a582e9b5f48bc198f92fcda6729601d87",class:"track-total"},a("div",{key:"ce6acc53f5ac8bd74b31961f87ddf4dc5e2db816",class:"track-progress",style:{"--mds-input-range-progress":`${null!==(t=this.progress)&&void 0!==t?t:0}`}}))),a("input",{key:"9be4d67701b2007ed1ce4b9bc10532fc8bd6f969",ref:t=>this.inputElement=t,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!0}get element(){return d(this)}static get watchers(){return{disabled:["disabledChanged"],value:["valueChanged"],min:["minChanged"],max:["maxChanged"],step:["stepChanged"]}}};i.style='@-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}';export{i as mds_input_range}