@maggioli-design-system/mds-input-range 2.0.0 → 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,18 +70,23 @@ const MdsInputRange = class {
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
-        var _a;
-        this.inputElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.field');
+        var _a, _b;
+        this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
+        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
         this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (index.h(index.Host, { key: '1bf968bd8ada3e6859369e0748d4c91441d54d32' }, index.h("header", { key: '1871c6d5eb4b437563e045fbbed982061e31a145', class: "header", part: "header" }, index.h("mds-text", { key: '9db4e20a523bb0182b4df3413161485c7d8649b7', class: "label", typography: "label" }, index.h("slot", { key: 'b5c8da4e94dc2a6adce7dd411b36f0f8dc78f461' })), index.h("mds-text", { key: '018703c3f4470b2f9f9971d404e2ac1de9f23b96', class: "value", typography: "label" }, this.value)), index.h("div", { key: '46fc7c92462b5b5ad72c95cbceabaa2a63f68b29', class: "range" }, index.h("div", { key: '7c4c6590c8f4b497370a1e992593080dea24037f', class: "track" }, index.h("div", { key: '8d8c34357408bd1ddd44cda3a3bdd7883aaaa70c', class: "contrast-area" }), index.h("div", { key: '25f597c9b4a1889568468ec8a4e6130dd68e0afa', class: "track-total" }, index.h("div", { key: 'f64b454fac7145354eae16804315bb424507dc70', class: "track-progress", style: { width: `${this.progress}%` } }))), index.h("input", { key: '17ffd9fe1584698de222e619d17e3b849b5b82ae', class: "field", 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/aria.js

@@ -18,6 +18,22 @@ const setAttributeIfEmpty = (element, attribute, value) => {
     element.setAttribute(attribute, value);
     return value;
 };
+const removeAttributesIf = (element, attribute, valueCheck = 'true', cleanAttributes) => {
+    if (ifAttribute(element, attribute, valueCheck)) {
+        const attributesList = Array.isArray(cleanAttributes) ? cleanAttributes : [cleanAttributes];
+        attributesList.forEach(attributeToRemove => {
+            element.removeAttribute(attributeToRemove);
+        });
+        return true;
+    }
+    return false;
+};
+const ifAttribute = (element, attribute, valueCheck = 'true') => {
+    if (element.hasAttribute(attribute) && element.getAttribute(attribute) === valueCheck) {
+        return true;
+    }
+    return false;
+};
 const hashValue = (value) => `${value}-${hash(value)}`;
 const hashRandomValue = (value) => {
     const randomValue = randomInt(1000000);
@@ -26,4 +42,4 @@ const hashRandomValue = (value) => {
     }
     return hash(randomValue.toString());
 };
-export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
+export { hashRandomValue, hashValue, removeAttributesIf, setAttributeIfEmpty, ifAttribute, unslugName, };

package/dist/collection/common/device.js

@@ -0,0 +1,6 @@
+const isMobileDevice = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
+};
+export { isMobileDevice, };

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

@@ -31,13 +31,13 @@ export class KeyboardManager {
         };
         this.attachEscapeBehavior = (callback) => {
             this.escapeCallback = callback;
-            if (window !== undefined) {
+            if (typeof window !== 'undefined') {
                 window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
             }
         };
         this.detachEscapeBehavior = () => {
             this.escapeCallback = () => { return; };
-            if (window !== undefined) {
+            if (typeof window !== 'undefined') {
                 window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
             }
         };

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,14 +56,18 @@ export class MdsInputRange {
             throw Error('step cant be negative or zero');
         this.calculateProgress();
     }
+    formResetCallback() {
+        this.internals.setFormValue('');
+    }
     componentDidLoad() {
-        var _a;
-        this.inputElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.field');
+        var _a, _b;
+        this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
+        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
         this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '1bf968bd8ada3e6859369e0748d4c91441d54d32' }, h("header", { key: '1871c6d5eb4b437563e045fbbed982061e31a145', class: "header", part: "header" }, h("mds-text", { key: '9db4e20a523bb0182b4df3413161485c7d8649b7', class: "label", typography: "label" }, h("slot", { key: 'b5c8da4e94dc2a6adce7dd411b36f0f8dc78f461' })), h("mds-text", { key: '018703c3f4470b2f9f9971d404e2ac1de9f23b96', class: "value", typography: "label" }, this.value)), h("div", { key: '46fc7c92462b5b5ad72c95cbceabaa2a63f68b29', class: "range" }, h("div", { key: '7c4c6590c8f4b497370a1e992593080dea24037f', class: "track" }, h("div", { key: '8d8c34357408bd1ddd44cda3a3bdd7883aaaa70c', class: "contrast-area" }), h("div", { key: '25f597c9b4a1889568468ec8a4e6130dd68e0afa', class: "track-total" }, h("div", { key: 'f64b454fac7145354eae16804315bb424507dc70', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: '17ffd9fe1584698de222e619d17e3b849b5b82ae', class: "field", 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"; }
@@ -123,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,
@@ -168,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,20 +2,24 @@ 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', required: true },
+            type: { name: 'number' },
             description: 'The lowest value in the range of permitted values',
         },
         max: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The greatest value in the range of permitted values',
         },
         step: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below',
         },
         value: {
-            type: { name: 'number', required: true },
+            type: { name: 'number' },
             description: 'The value attribute contains a number which contains a representation of the selected number',
         },
     },
@@ -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

@@ -1,60 +1,65 @@
 const fileExtensionsDictionary = {
-    '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' },
+    '7z': { format: 'archive', description: 'compressedArchive' },
+    ace: { format: 'archive', description: 'compressedArchive' },
+    ai: { format: 'vector', description: 'fileAI' },
+    dart: { format: 'code', description: 'dart' },
+    db: { format: 'data', description: 'fileDB' },
+    default: { format: 'attachment', description: 'unknown' },
+    dmg: { format: 'executable', description: 'appleDiskImage' },
+    doc: { format: 'text', description: 'documentMS' },
+    docm: { format: 'text', description: 'documentMS' },
+    docx: { format: 'text', description: 'compressedDocumentMS' },
+    eml: { format: 'email', description: 'email' },
+    eps: { format: 'vector', description: 'fileEPS' },
+    exe: { format: 'executable', description: 'fileEXE' },
+    flac: { format: 'audio', description: 'uncompressedAudio' },
+    gif: { format: 'image', description: 'compressedImage', preview: true },
+    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 },
+    jpg: { format: 'image', description: 'compressedImage', preview: true },
+    js: { format: 'code', description: 'fileJS' },
+    json: { format: 'data', description: 'fileJSON' },
+    jsx: { format: 'code', description: 'fileJS' },
+    m2v: { format: 'video', description: 'videoSD' },
+    mp2: { format: 'audio', description: 'compressedAudio' },
+    mp3: { format: 'audio', description: 'compressedAudio' },
+    mp4: { format: 'video', description: 'videoHD' },
+    mp4v: { format: 'video', description: 'videoHD' },
+    mpeg: { format: 'video', description: 'videoSD' },
+    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 },
+    ppt: { format: 'slide', description: 'slidePowerPoint' },
+    rar: { format: 'archive', description: 'compressedArchive' },
+    rtf: { format: 'text', description: 'documentRTF' },
+    sass: { format: 'code', description: 'fileSASS' },
+    shtml: { format: 'markup', description: 'documentWeb' },
+    svg: { format: 'vector', description: 'imageSVG', preview: true },
+    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' },
+    webp: { format: 'image', description: 'imageWEBP', preview: true },
+    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 genericMimeToExt = new Map([
     ['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],

package/dist/collection/dictionary/text.js

@@ -1,6 +1,65 @@
+const typographyTagDictionary = [
+    'abbr',
+    'address',
+    'article',
+    'b',
+    'bdo',
+    'blockquote',
+    'cite',
+    'code',
+    'dd',
+    'del',
+    'details',
+    'dfn',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'figcaption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'i',
+    'ins',
+    'kbd',
+    'label',
+    'legend',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'pre',
+    'q',
+    'rb',
+    'rt',
+    'ruby',
+    's',
+    'samp',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'time',
+    'u',
+    'ul',
+    'var',
+];
+const typographyHeadingTagDictionary = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+];
 const truncateDictionary = [
     'all',
     'none',
     'word',
 ];
-export { truncateDictionary, };
+export { truncateDictionary, typographyHeadingTagDictionary, typographyTagDictionary, };