@maggioli-design-system/mds-input-range 2.0.1 → 2.1.0

package/dist/cjs/{index-f984e289.js → index-52e46581.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'mds-input-range';
-const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: false, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
+const BUILD = /* mds-input-range */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: false, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: false, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
 
 /*
  Stencil Client Platform v4.22.2 | MIT Licensed | https://stenciljs.com
@@ -301,6 +301,9 @@ var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 var parsePropertyValue = (propValue, propType) => {
   if (propValue != null && !isComplexType(propValue)) {
+    if (propType & 4 /* Boolean */) {
+      return propValue === "false" ? false : propValue === "" || !!propValue;
+    }
     if (propType & 2 /* Number */) {
       return parseFloat(propValue);
     }

package/dist/cjs/loader.cjs.js

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

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f984e289.js');
+const index = require('./index-52e46581.js');
 
-const mdsInputRangeCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-09));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));\n  gap: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-appearance: none;\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
+const mdsInputRangeCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-08));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));\n  --mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-06));\n  --mds-input-range-track-background-disabled: rgb(var(--tone-neutral-08));\n  --mds-input-range-track-progress-background-disabled: rgb(var(--tone-neutral-06));\n  gap: 0.25rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-appearance: none;\n\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  -webkit-transition-property: background-color, box-shadow;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  --mds-input-range-thumb-background: var(--mds-input-range-thumb-background-disabled);\n  --mds-input-range-track-background: var(--mds-input-range-track-background-disabled);\n  --mds-input-range-track-progress-background: var(--mds-input-range-track-progress-background-disabled);\n}\n\n:host([disabled]:not([disabled=\"false\"])) .field::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
 const MdsInputRangeStyle0 = mdsInputRangeCss;
 
 const MdsInputRange = class {
@@ -26,6 +26,7 @@ const MdsInputRange = class {
         this.max = 100;
         this.min = 0;
         this.step = 1;
+        this.disabled = undefined;
         this.value = undefined;
     }
     calculateProgress() {
@@ -43,6 +44,16 @@ const MdsInputRange = class {
         const current = this.value - this.min;
         this.progress = current * 100 / total;
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
     valueChanged() {
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
@@ -59,6 +70,9 @@ const MdsInputRange = class {
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         var _a, _b;
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
@@ -67,11 +81,12 @@ const MdsInputRange = class {
         this.calculateProgress();
     }
     render() {
-        return (index.h(index.Host, { key: '4f58f56b2bf1af905741bbcab323e583dd907a35' }, index.h("header", { key: '69a2e6c483558f0ce70eca8e1ec45f4ce7f63b10', class: "header", part: "header" }, index.h("mds-text", { key: '1d5f89b89f5bdf1ca6746567eb23d2b96444c2d9', class: "label", typography: "label" }, index.h("slot", { key: '534eb663ff412980069c4308a2a15a784e2bf1cf' })), index.h("mds-text", { key: 'e187c33fb9124f1d20032c822b535d0ddc839fe3', class: "value", typography: "label" }, this.value)), index.h("div", { key: 'fb3245af7eefbab656b68810577d77a328e312c5', class: "range" }, index.h("div", { key: 'f146b8b59fbd5bbb3db2350d94686fad986b4dfc', class: "track" }, index.h("div", { key: '04aaec03384f51e3ad2ad8cc695274c36062d6bf', class: "contrast-area" }), index.h("div", { key: '2de981fb668e8056a24ca82163dca106fcc5878e', class: "track-total" }, index.h("div", { key: '2044a5ce25454e56d950c2c7f68ce11369babd87', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '423eb3d5b176748d0376374888c7ef3298dc54d9', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (index.h(index.Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, index.h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, index.h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, index.h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), index.h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), index.h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, index.h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, index.h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), index.h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, index.h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "disabled": ["disabledChanged"],
         "value": ["valueChanged"],
         "min": ["minChanged"],
         "max": ["maxChanged"],

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

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

package/dist/collection/common/slot.js

@@ -0,0 +1,13 @@
+const hasSlottedElements = (el, name) => {
+    var _a;
+    let query = 'slot';
+    if (name) {
+        query = `slot[name=${name}]`;
+    }
+    const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
+    if (slot) {
+        return slot.assignedNodes().length > 0;
+    }
+    return false;
+};
+export { hasSlottedElements, };

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

@@ -24,11 +24,15 @@
   --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-09));
+  --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;
-  transition-duration: 200ms;
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
   display: grid;
   transition-property: color;
@@ -111,7 +115,11 @@
   }
 
 .field::-webkit-slider-thumb {
+  transition-duration: 300ms;
+  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;
@@ -121,6 +129,8 @@
   height: var(--mds-input-range-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);
 }
 
@@ -162,6 +172,16 @@
   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;
+}
+
 @tailwind utilities;
 
 @container style(--magma-pref-animation: reduce) {

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

@@ -12,6 +12,7 @@ export class MdsInputRange {
         this.max = 100;
         this.min = 0;
         this.step = 1;
+        this.disabled = undefined;
         this.value = undefined;
     }
     calculateProgress() {
@@ -29,6 +30,16 @@ export class MdsInputRange {
         const current = this.value - this.min;
         this.progress = current * 100 / total;
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
     valueChanged() {
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
@@ -45,6 +56,9 @@ export class MdsInputRange {
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         var _a, _b;
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
@@ -53,7 +67,7 @@ export class MdsInputRange {
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '4f58f56b2bf1af905741bbcab323e583dd907a35' }, h("header", { key: '69a2e6c483558f0ce70eca8e1ec45f4ce7f63b10', class: "header", part: "header" }, h("mds-text", { key: '1d5f89b89f5bdf1ca6746567eb23d2b96444c2d9', class: "label", typography: "label" }, h("slot", { key: '534eb663ff412980069c4308a2a15a784e2bf1cf' })), h("mds-text", { key: 'e187c33fb9124f1d20032c822b535d0ddc839fe3', class: "value", typography: "label" }, this.value)), h("div", { key: 'fb3245af7eefbab656b68810577d77a328e312c5', class: "range" }, h("div", { key: 'f146b8b59fbd5bbb3db2350d94686fad986b4dfc', class: "track" }, h("div", { key: '04aaec03384f51e3ad2ad8cc695274c36062d6bf', class: "contrast-area" }), h("div", { key: '2de981fb668e8056a24ca82163dca106fcc5878e', class: "track-total" }, h("div", { key: '2044a5ce25454e56d950c2c7f68ce11369babd87', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '423eb3d5b176748d0376374888c7ef3298dc54d9', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get is() { return "mds-input-range"; }
     static get encapsulation() { return "shadow"; }
@@ -124,6 +138,23 @@ export class MdsInputRange {
                 "reflect": false,
                 "defaultValue": "1"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets if the component is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": true
+            },
             "value": {
                 "type": "number",
                 "mutable": true,
@@ -169,6 +200,9 @@ export class MdsInputRange {
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }, {

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

@@ -2,6 +2,10 @@ import { h } from "@stencil/core";
 export default {
     title: 'Form / Range',
     argTypes: {
+        disabled: {
+            type: { name: 'boolean' },
+            description: 'Sets if the component is disabled',
+        },
         min: {
             type: { name: 'number' },
             description: 'The lowest value in the range of permitted values',
@@ -28,6 +32,10 @@ const hideHeaderCss = `
 `;
 const HideHeaderTemplate = args => h("div", null, h("style", null, hideHeaderCss), h("mds-input-range", Object.assign({}, args), "This shouldn't be visible"));
 export const Default = Template.bind({});
+export const Disabled = Template.bind({});
+Disabled.args = {
+    disabled: true,
+};
 export const Min = Template.bind({});
 Min.args = {
     min: -100,

package/dist/collection/dictionary/animation.js

@@ -0,0 +1,5 @@
+const horizontalActionsAnimationDictionary = [
+    'fade',
+    'slide',
+];
+export { horizontalActionsAnimationDictionary, };

package/dist/collection/dictionary/file-extensions.js

@@ -14,8 +14,8 @@ const fileExtensionsDictionary = {
     exe: { format: 'executable', description: 'fileEXE' },
     flac: { format: 'audio', description: 'uncompressedAudio' },
     gif: { format: 'image', description: 'compressedImage', preview: true },
-    htm: { format: 'markup', description: 'documentWeb' },
     heic: { format: 'image', description: 'imageHEFF' },
+    htm: { format: 'markup', description: 'documentWeb' },
     html: { format: 'markup', description: 'documentWeb' },
     jpe: { format: 'image', description: 'compressedImage', preview: true },
     jpeg: { format: 'image', description: 'compressedImage', preview: true },
@@ -32,9 +32,12 @@ const fileExtensionsDictionary = {
     mpg4: { format: 'video', description: 'videoSD' },
     mpg: { format: 'video', description: 'videoSD' },
     mpga: { format: 'audio', description: 'compressedAudio' },
+    odf: { format: 'document', description: 'openDocumentFormat' },
     odp: { format: 'slide', description: 'slideLO' },
     ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
     odt: { format: 'text', description: 'documentLO' },
+    ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
+    p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
     pdf: { format: 'document', description: 'documentAdobe' },
     php: { format: 'code', description: 'filePHP' },
     png: { format: 'image', description: 'imagePNG', preview: true },
@@ -47,6 +50,7 @@ const fileExtensionsDictionary = {
     tar: { format: 'archive', description: 'uncompressedArchive' },
     tiff: { format: 'image', description: 'imageTIFF' },
     ts: { format: 'code', description: 'fileTS' },
+    tsd: { format: 'certificate', description: 'certificateTSD' },
     tsx: { format: 'code', description: 'fileTSX' },
     txt: { format: 'text', description: 'documentTXT' },
     wav: { format: 'audio', description: 'uncompressedAudio' },
@@ -54,66 +58,9 @@ const fileExtensionsDictionary = {
     xar: { format: 'archive', description: 'compressedArchive' },
     xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
     xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
+    xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
     zip: { format: 'archive', description: 'compressedArchive' },
 };
-// const fileExtensionsDictionary: FileExtenstion = {
-//   '7z': { format: 'archive', description: 'Archivio compresso' },
-//   ace: { format: 'archive', description: 'Archivio compresso' },
-//   ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
-//   dart: { format: 'code', description: 'Dart' },
-//   db: { format: 'data', description: 'File di database' },
-//   default: { format: 'attachment', description: 'Formato sconosciuto' },
-//   dmg: { format: 'executable', description: 'Apple Disk Image' },
-//   doc: { format: 'text', description: 'Documento Microsoft Word' },
-//   docm: { format: 'text', description: 'Documento Microsoft Word' },
-//   docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
-//   eml: { format: 'email', description: 'E-mail di posta elettronica' },
-//   eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
-//   exe: { format: 'executable', description: 'File eseguibile Windows' },
-//   flac: { format: 'audio', description: 'Audio non compresso' },
-//   gif: { format: 'image', description: 'Immagine compressa', preview: true },
-//   htm: { format: 'markup', description: 'Pagina web' },
-//   heic: { format: 'image', description: 'High Efficiency Image File Format' },
-//   html: { format: 'markup', description: 'Pagina web' },
-//   jpe: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   jpg: { format: 'image', description: 'Immagine compressa', preview: true },
-//   js: { format: 'code', description: 'JavaScript' },
-//   json: { format: 'data', description: 'JavaScript Object Notation' },
-//   jsx: { format: 'code', description: 'JavaScript' },
-//   m2v: { format: 'video', description: 'Filmato SD' },
-//   mp2: { format: 'audio', description: 'Audio compresso' },
-//   mp3: { format: 'audio', description: 'Audio compresso' },
-//   mp4: { format: 'video', description: 'Filmato HD' },
-//   mp4v: { format: 'video', description: 'Filmato HD' },
-//   mpeg: { format: 'video', description: 'Filmato SD' },
-//   mpg4: { format: 'video', description: 'Filmato SD' },
-//   mpg: { format: 'video', description: 'Filmato SD' },
-//   mpga: { format: 'audio', description: 'Audio compresso' },
-//   odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
-//   ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
-//   odt: { format: 'text', description: 'File di testo LibreOffice' },
-//   pdf: { format: 'document', description: 'Documento Adobe' },
-//   php: { format: 'code', description: 'Hypertext Preprocessor' },
-//   png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
-//   ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
-//   rar: { format: 'archive', description: 'Archivio compresso' },
-//   rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
-//   sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
-//   shtml: { format: 'markup', description: 'Pagina web' },
-//   svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
-//   tar: { format: 'archive', description: 'Archivio non compresso' },
-//   tiff: { format: 'image', description: 'Tag Image File Format' },
-//   ts: { format: 'code', description: 'TypeScript' },
-//   tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
-//   txt: { format: 'text', description: 'Documento di testo non formattato' },
-//   wav: { format: 'audio', description: 'Audio non compresso' },
-//   webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
-//   xar: { format: 'archive', description: 'Archivio compresso' },
-//   xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
-//   zip: { format: 'archive', description: 'Archivio compresso' },
-// }
 const genericMimeToExt = new Map([
     ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
     ['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],

package/dist/collection/fixtures/filenames.js

@@ -54,4 +54,65 @@ const filesList = [
     'wisconsin_bypassing_small.xar',
     'wooden.jsx',
 ];
-export { filesList, };
+const namedFilesList = {
+    '7z': 'frozen_haptic.7z',
+    'No extension file': 'this_is_an_extensionless_file',
+    'png with URL': 'https://i2.wp.com/clipart.info/images/ccovers/1495750818Apple-PNG-Clip-Art.png',
+    ace: 'sky_marketing.ace',
+    ai: 'foreground_overriding.ai',
+    db: 'matrix_black_hat.db',
+    default: 'copying.default',
+    dmg: 'protocol_designer.dmg',
+    doc: 'forges.doc',
+    docm: 'officer_somalia.docm',
+    docx: 'upgradable_gold.docx',
+    eml: 'brunei_logistical.eml',
+    eps: 'alarm_circuit_plastic.eps',
+    exe: 'rss_systematic_avon.exe',
+    flac: 'liaison_panel_central.flac',
+    gif: 'initiatives_group.gif',
+    htm: 'books_monetize_arizona.htm',
+    html: 'flexibility_auto_money.html',
+    jpe: 'intelligent_radical.jpe',
+    jpeg: 'iowa_installation.jpeg',
+    jpg: 'buckinghamshire_macao.jpg',
+    js: 'monitor.js',
+    json: 'calculating.json',
+    jsx: 'wooden.jsx',
+    m2v: 'interface_bedfordshire_solid.m2v',
+    mp2: 'explicit.mp2',
+    mp3: 'optimization_radical.mp3',
+    mp4: 'nebraska.mp4',
+    mp4v: 'reduced_regional_greenland.mp4v',
+    mpeg: 'impactful_alarm_handmade.mpeg',
+    mpg4: 'revolutionize.mpg4',
+    mpg: 'complexity_deposit.mpg',
+    mpga: 'ports_copy_granite.mpga',
+    odf: 'This is a file_to_read.odf',
+    odp: 'needs_based_solid.odp',
+    ods: 'compressing_black_colorado.ods',
+    odt: 'salad_compressing.odt',
+    ole: 'Document-RPF_Open-new.ole',
+    p7m: 'file with certificate from government.pdf.p7m',
+    pdf: 'connect_local_visualize.pdf',
+    php: 'fish.php',
+    png: 'awesome_orchestration.png',
+    ppt: 'gorgeous_manager_savings.ppt',
+    rar: 'unbranded.rar',
+    rtf: 'pound.rtf',
+    sass: 'open_source_gorgeous.sass',
+    shtml: 'brand.shtml',
+    svg: 'b2c_tan_sports.svg',
+    tar: 'graphic_frozen_bedfordshire.tar',
+    ts: 'forge_face.ts',
+    tsd: 'Marked file-7483274hy6Fg6R8.tsd',
+    txt: 'bedfordshire_iceland_identity.txt',
+    wav: 'synergistic.wav',
+    webp: 'open_source.webp',
+    xar: 'wisconsin_bypassing_small.xar',
+    xls: 'metrics_lempira_account.xls',
+    xlsx: 'hdd_navigate_panama.xlsx',
+    xml: 'Markup language.xml',
+    zip: 'tuna_table_fall.zip',
+};
+export { filesList, namedFilesList, };

package/dist/collection/type/animation.js

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

package/dist/collection/type/variant-file-format.js

@@ -3,6 +3,7 @@ import baselineAttachFile from "@icon/mi/baseline/attach-file.svg";
 import baselineAudiotrack from "@icon/mi/baseline/audiotrack.svg";
 import baselineTerminal from "@icon/mi/baseline/terminal.svg";
 import baselineInsertDriveFile from "@icon/mi/baseline/insert-drive-file.svg";
+import mdiLicense from "@icon/mdi/license.svg";
 import mdiHardDisk from "@icon/mdi/harddisk.svg";
 import baselineEmail from "@icon/mi/baseline/email.svg";
 import baselineWysiwyg from "@icon/mi/baseline/wysiwyg.svg";
@@ -26,6 +27,10 @@ const fileFormatsVariant = {
         icon: baselineAudiotrack,
         variant: 'violet',
     },
+    certificate: {
+        icon: mdiLicense,
+        variant: 'orange',
+    },
     code: {
         icon: baselineTerminal,
         variant: 'yellow',

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 {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-09));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));\n  gap: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-appearance: none;\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
+const mdsInputRangeCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-08));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));\n  --mds-input-range-thumb-background-disabled: rgb(var(--tone-neutral-06));\n  --mds-input-range-track-background-disabled: rgb(var(--tone-neutral-08));\n  --mds-input-range-track-progress-background-disabled: rgb(var(--tone-neutral-06));\n  gap: 0.25rem;\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -webkit-appearance: none;\n\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  -webkit-transition-property: background-color, box-shadow;\n  -webkit-transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, -webkit-box-shadow;\n  transition-property: background-color, box-shadow;\n  transition-property: background-color, box-shadow, -webkit-box-shadow;\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  --mds-input-range-thumb-background: var(--mds-input-range-thumb-background-disabled);\n  --mds-input-range-track-background: var(--mds-input-range-track-background-disabled);\n  --mds-input-range-track-progress-background: var(--mds-input-range-track-progress-background-disabled);\n}\n\n:host([disabled]:not([disabled=\"false\"])) .field::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
 const MdsInputRangeStyle0 = mdsInputRangeCss;
 
 const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange extends HTMLElement {
@@ -18,6 +18,7 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         this.max = 100;
         this.min = 0;
         this.step = 1;
+        this.disabled = undefined;
         this.value = undefined;
     }
     calculateProgress() {
@@ -35,6 +36,16 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         const current = this.value - this.min;
         this.progress = current * 100 / total;
     }
+    disabledChanged(newValue) {
+        /**
+         * This is related to ALL disabled attributes set on Magma input components
+         * if solved, please check mds-button, mds-input, mds-input-*
+         * https://github.com/ionic-team/stencil/issues/5461
+         */
+        if (newValue) {
+            this.internals.setFormValue(null);
+        }
+    }
     valueChanged() {
         this.inputElement.value = this.value.toString();
         this.calculateProgress();
@@ -51,6 +62,9 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
         var _a, _b;
         this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
@@ -59,11 +73,12 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '4f58f56b2bf1af905741bbcab323e583dd907a35' }, h("header", { key: '69a2e6c483558f0ce70eca8e1ec45f4ce7f63b10', class: "header", part: "header" }, h("mds-text", { key: '1d5f89b89f5bdf1ca6746567eb23d2b96444c2d9', class: "label", typography: "label" }, h("slot", { key: '534eb663ff412980069c4308a2a15a784e2bf1cf' })), h("mds-text", { key: 'e187c33fb9124f1d20032c822b535d0ddc839fe3', class: "value", typography: "label" }, this.value)), h("div", { key: 'fb3245af7eefbab656b68810577d77a328e312c5', class: "range" }, h("div", { key: 'f146b8b59fbd5bbb3db2350d94686fad986b4dfc', class: "track" }, h("div", { key: '04aaec03384f51e3ad2ad8cc695274c36062d6bf', class: "contrast-area" }), h("div", { key: '2de981fb668e8056a24ca82163dca106fcc5878e', class: "track-total" }, h("div", { key: '2044a5ce25454e56d950c2c7f68ce11369babd87', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '423eb3d5b176748d0376374888c7ef3298dc54d9', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'e1cf60063d451ad99e6e4943412119634a261dc6' }, h("header", { key: '786ee56712c0d48fce3b0107bf44e1a4e39a5cb2', class: "header", part: "header" }, h("mds-text", { key: 'b51d53ca91e1a39431b851dcefdbda983ae59a60', class: "label", typography: "label" }, h("slot", { key: '1e8a604c35454992794958088051f5074504a3cf' })), h("mds-text", { key: '64cdd428f13f52a6964ab55527707a74ef98d560', class: "value", typography: "label" }, this.value)), h("div", { key: '00f8ad9cd7bdaff91a766d7c8e50a5ad65b4983a', class: "range" }, h("div", { key: '64e70fc8df3951015535b0e0bee0177089c9c399', class: "track" }, h("div", { key: '255824ff26075a8da7e176f03e8a2e99d8e754e5', class: "contrast-area" }), h("div", { key: 'a5d3f15b29af3c95dcdaffe05ba3d9481bfafce2', class: "track-total" }, h("div", { key: 'f50dff46578030bc9ecd83d56dec99b4a099f0b5', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '34ba926affc23fb845c421c7813ec05f7ce03f5f', class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return this; }
     static get watchers() { return {
+        "disabled": ["disabledChanged"],
         "value": ["valueChanged"],
         "min": ["minChanged"],
         "max": ["maxChanged"],
@@ -74,9 +89,11 @@ const MdsInputRange$1 = /*@__PURE__*/ proxyCustomElement(class MdsInputRange ext
         "max": [2],
         "min": [2],
         "step": [2],
+        "disabled": [1540],
         "value": [1538],
         "progress": [32]
     }, undefined, {
+        "disabled": ["disabledChanged"],
         "value": ["valueChanged"],
         "min": ["minChanged"],
         "max": ["maxChanged"],