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

package/documentation.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-12-04T15:30:05",
+  "timestamp": "2025-02-06T07:52:44",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.22.2",
+    "version": "4.25.1",
     "typescriptVersion": "5.5.4"
   },
   "components": [
@@ -20,6 +20,32 @@
       ],
       "usage": {},
       "props": [
+        {
+          "name": "disabled",
+          "type": "boolean | undefined",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean | undefined",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Sets if the component is disabled",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "max",
           "type": "number",
@@ -40,7 +66,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "min",
@@ -62,7 +90,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "step",
@@ -84,7 +114,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         },
         {
           "name": "value",
@@ -105,7 +137,9 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
@@ -292,6 +326,11 @@
       "docstring": "",
       "path": "src/type/button.ts"
     },
+    "src/type/text.ts::TypographyTruncateType": {
+      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
+      "docstring": "",
+      "path": "src/type/text.ts"
+    },
     "src/type/variant.ts::ChipVariantType": {
       "declaration": "export type ChipVariantType =\n  | 'primary'\n  | 'secondary'\n  | 'dark'\n  | 'error'\n  | 'info'\n  | 'success'\n  | 'warning'",
       "docstring": "",
@@ -323,7 +362,7 @@
       "path": "src/components/mds-dropdown/meta/event-detail.ts"
     },
     "src/type/file-types.ts::ExtensionSuffixType": {
-      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'zip'",
+      "declaration": "export type ExtensionSuffixType =\n  | '7z'\n  | 'ace'\n  | 'ai'\n  | 'db'\n  | 'default'\n  | 'dmg'\n  | 'doc'\n  | 'docm'\n  | 'docx'\n  | 'eml'\n  | 'eps'\n  | 'exe'\n  | 'flac'\n  | 'gif'\n  | 'heic'\n  | 'htm'\n  | 'html'\n  | 'jpe'\n  | 'jpeg'\n  | 'jpg'\n  | 'js'\n  | 'json'\n  | 'jsx'\n  | 'm2v'\n  | 'mp2'\n  | 'mp3'\n  | 'mp4'\n  | 'mp4v'\n  | 'mpeg'\n  | 'mpg'\n  | 'mpg4'\n  | 'mpga'\n  | 'odf'\n  | 'odp'\n  | 'ods'\n  | 'odt'\n  | 'odt'\n  | 'ole'\n  | 'p7m'\n  | 'pdf'\n  | 'php'\n  | 'png'\n  | 'ppt'\n  | 'rar'\n  | 'rtf'\n  | 'sass'\n  | 'shtml'\n  | 'svg'\n  | 'tar'\n  | 'tiff'\n  | 'ts'\n  | 'tsd'\n  | 'txt'\n  | 'wav'\n  | 'webp'\n  | 'xar'\n  | 'xls'\n  | 'xlsx'\n  | 'xml'\n  | 'zip'",
       "docstring": "",
       "path": "src/type/file-types.ts"
     },
@@ -332,11 +371,6 @@
       "docstring": "",
       "path": "src/components/mds-file/meta/event-detail.ts"
     },
-    "src/type/text.ts::TypographyTruncateType": {
-      "declaration": "export type TypographyTruncateType =\n  | 'all'\n  | 'none'\n  | 'word'",
-      "docstring": "",
-      "path": "src/type/text.ts"
-    },
     "src/components/mds-file-preview/meta/event-detail.ts::MdsFilePreviewEventDetail": {
       "declaration": "export interface MdsFilePreviewEventDetail {\n  extension: string\n  filename: string\n  target: HTMLMdsFilePreviewElement\n}",
       "docstring": "",
@@ -562,11 +596,6 @@
       "docstring": "",
       "path": "src/components/mds-progress/meta/types.ts"
     },
-    "src/type/date.ts::ISO8601Date": {
-      "declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
-      "docstring": "",
-      "path": "src/type/date.ts"
-    },
     "src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
       "declaration": "string",
       "docstring": "",
@@ -597,6 +626,11 @@
       "docstring": "",
       "path": "src/components/mds-stepper-bar-item/meta/event-detail.ts"
     },
+    "src/type/animation.ts::HorizontalActionsAnimationType": {
+      "declaration": "export type HorizontalActionsAnimationType =\n  | 'fade'\n  | 'slide'",
+      "docstring": "",
+      "path": "src/type/animation.ts"
+    },
     "src/components/mds-tab/meta/event-detail.ts::MdsTabEventDetail": {
       "declaration": "export interface MdsTabEventDetail {\n  id: number\n  value?: string\n}",
       "docstring": "",
@@ -617,6 +651,16 @@
       "docstring": "",
       "path": "src/components/mds-tab-item/meta/event-detail.ts"
     },
+    "src/components/mds-table/meta/event-detail.ts::MdsTableSelectionEventDetail": {
+      "declaration": "export interface MdsTableSelectionEventDetail {\n  rows: MdsTableRowSelection[]\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/event-detail.ts"
+    },
+    "src/components/mds-table/meta/type.ts::MdsTableRowSelection": {
+      "declaration": "{\n  index: number\n  value?: string | number\n}",
+      "docstring": "",
+      "path": "src/components/mds-table/meta/type.ts"
+    },
     "src/components/mds-table-header-cell/meta/types.ts::SortDirectionType": {
       "declaration": "export type SortDirectionType =\n  | 'ascending'\n  | 'descending'\n  | 'none'",
       "docstring": "",
@@ -647,6 +691,26 @@
       "docstring": "",
       "path": "src/type/typography.ts"
     },
+    "src/type/tree.ts::TreeAppearance": {
+      "declaration": "export type TreeAppearance =\n  | 'none'\n  | 'depth'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeIcon": {
+      "declaration": "export type TreeIcon =\n  | 'folder'\n  | 'chevron'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/type/tree.ts::TreeActions": {
+      "declaration": "export type TreeActions =\n  | 'auto'\n  | 'visible'",
+      "docstring": "",
+      "path": "src/type/tree.ts"
+    },
+    "src/components/mds-tree-item/meta/event-detail.ts::MdsTreeItemEventDetail": {
+      "declaration": "export interface MdsTreeItemEventDetail {\n  element: HTMLMdsTreeItemElement\n}",
+      "docstring": "",
+      "path": "src/components/mds-tree-item/meta/event-detail.ts"
+    },
     "src/components/mds-usage/meta/types.ts::UsageType": {
       "declaration": "export type UsageType =\n  | 'do'\n  | 'dont'\n  | 'info'\n  | 'warn'",
       "docstring": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-range",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "mds-input-range is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "15.5.0",
-    "@maggioli-design-system/mds-text": "4.5.2",
-    "@stencil/core": "4.22.2"
+    "@maggioli-design-system/styles": "15.7.0",
+    "@maggioli-design-system/mds-text": "4.5.3",
+    "@stencil/core": "4.25.1"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -9,12 +9,13 @@ This is a web-component from Maggioli Design System [Magma](https://magma.maggio
 
 ## Properties
 
-| Property | Attribute | Description                                                                                                                                      | Type     | Default     |
-| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
-| `max`    | `max`     | The greatest value in the range of permitted values                                                                                              | `number` | `100`       |
-| `min`    | `min`     | The lowest value in the range of permitted values                                                                                                | `number` | `0`         |
-| `step`   | `step`    | 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. | `number` | `1`         |
-| `value`  | `value`   | The value attribute contains a number which contains a representation of the selected number.                                                    | `number` | `undefined` |
+| Property   | Attribute  | Description                                                                                                                                      | Type                   | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `disabled` | `disabled` | Sets if the component is disabled                                                                                                                | `boolean \| undefined` | `undefined` |
+| `max`      | `max`      | The greatest value in the range of permitted values                                                                                              | `number`               | `100`       |
+| `min`      | `min`      | The lowest value in the range of permitted values                                                                                                | `number`               | `0`         |
+| `step`     | `step`     | 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. | `number`               | `1`         |
+| `value`    | `value`    | The value attribute contains a number which contains a representation of the selected number.                                                    | `number`               | `undefined` |
 
 
 ## Events

package/src/common/floating-controller.ts

@@ -0,0 +1,263 @@
+import {
+  arrow,
+  autoPlacement,
+  autoUpdate,
+  computePosition,
+  flip,
+  Middleware,
+  MiddlewareData,
+  offset,
+  shift,
+} from '@floating-ui/dom'
+import { FloatingUIPlacement, FloatingUIStrategy } from '@type/floating-ui'
+import { cssDurationToMilliseconds } from './unit'
+import { setAttributeIfEmpty } from './aria'
+import { HTMLStencilElement } from '@stencil/core/internal'
+
+export interface FloatingElement extends PositionOptions {
+  host: HTMLFloatingElement,
+}
+
+export interface HTMLFloatingElement extends HTMLStencilElement, PositionOptions {
+  visible: boolean,
+}
+
+export interface PositionOptions {
+  arrow: boolean;
+  arrowPadding: number;
+  autoPlacement: boolean;
+  flip: boolean;
+  offset: number;
+  placement: FloatingUIPlacement;
+  shift: boolean;
+  shiftPadding: number;
+  strategy: FloatingUIStrategy;
+}
+
+export class FloatingController {
+  private _caller: HTMLElement
+  private readonly _host: HTMLFloatingElement
+  arrowEl: HTMLElement | undefined
+
+  private cleanupAutoUpdate: () => void
+
+  constructor (host: HTMLFloatingElement, arrowEl?: HTMLElement) {
+    this._host = host
+    this.arrowEl = arrowEl
+  }
+
+  updateCaller (target: string): HTMLElement {
+    // search caller in document or rootNode of host (if target is in shadowDOM)
+    const caller = (this._host.parentElement?.shadowRoot?.querySelector(target) as HTMLElement) ??
+      ((this._host.getRootNode() as HTMLElement).querySelector(target) as HTMLElement)
+
+    if (!caller) {
+      throw Error(`Target not found: ${target}`)
+    }
+
+    this._caller = caller
+
+    setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true')
+    setAttributeIfEmpty(this._caller, 'aria-controls', target)
+    setAttributeIfEmpty(this._host, 'role', 'menu')
+    setAttributeIfEmpty(this._host, 'aria-labelledby', target)
+    return caller
+  }
+
+  private readonly arrowInset = (
+    middleware: MiddlewareData,
+    arrowPosition: string,
+  ): { bottom?: string; left?: string; right?: string; top?: string } => {
+    const { arrow } = middleware
+    const inset = { bottom: '', left: '', right: '', top: '' }
+
+    if (arrow === undefined) {
+      return {}
+    }
+
+    switch (arrowPosition) {
+    case 'bottom':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = '100%'
+      break
+    case 'left':
+      inset.right = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'right':
+      inset.left = '100%'
+      inset.top = arrow.y !== null ? `${arrow.y}px` : ''
+      break
+    case 'top':
+      inset.left = arrow.x !== null ? `${arrow.x}px` : ''
+      inset.top = ''
+      break
+    default:
+      break
+    }
+    return inset
+  }
+
+  private readonly arrowTransform = (
+    arrowPosition: string,
+  ): { transform: string } => {
+    let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)'
+    switch (arrowPosition) {
+    case 'bottom':
+      transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`
+      break
+    case 'left':
+      transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`
+      break
+    case 'right':
+      transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`
+      break
+    case 'top':
+      transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`
+      break
+    default:
+      break
+    }
+    return { transform: transformProps }
+  }
+
+  private readonly arrowTransformOrigin = (
+    arrowPosition: string,
+  ): { transformOrigin: string } => {
+    switch (arrowPosition) {
+    case 'bottom':
+      return { transformOrigin: 'center top' }
+    case 'left':
+      return { transformOrigin: 'right center' }
+    case 'right':
+      return { transformOrigin: 'left center' }
+    case 'top':
+      return { transformOrigin: 'center bottom' }
+    default:
+      return { transformOrigin: 'center top' }
+    }
+  }
+
+  private readonly calculatePosition = (): void => {
+    if (!this._caller) return
+
+    const middleware: Middleware[] = new Array<Middleware>()
+    const config: { padding?: number } = {}
+
+    if (this._host.shiftPadding) {
+      config.padding = this._host.shiftPadding
+    }
+
+    if (this._host.autoPlacement) {
+      middleware.push(autoPlacement())
+    }
+
+    if (this._host.offset) {
+      middleware.push(offset(this._host.offset))
+    }
+
+    if (!this._host.autoPlacement && this._host.flip) {
+      middleware.push(flip(config))
+    }
+
+    if (this._host.shift) {
+      middleware.push(shift(config))
+    }
+
+    if (this.arrowEl && this._host.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this._host.arrowPadding,
+        }),
+      )
+    }
+
+    computePosition(this._caller, this._host, {
+      middleware,
+      placement: this._host.placement,
+      strategy: this._host.strategy,
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(this._host.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      const arrowStyle = {}
+      const arrowPosition = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right',
+      }[placement.split('-')[0]]
+
+      if (arrowPosition && this.arrowEl) {
+        Object.assign(arrowStyle, this.arrowTransform(arrowPosition))
+        Object.assign(
+          arrowStyle,
+          this.arrowInset(middlewareData, arrowPosition),
+        )
+        Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition))
+        Object.assign(this.arrowEl.style, arrowStyle)
+      }
+    })
+  }
+
+  updatePosition (): void {
+    if (this.cleanupAutoUpdate) this.cleanupAutoUpdate()
+    this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition)
+  }
+
+  dismiss (): void {
+    this.cleanupAutoUpdate()
+  }
+}
+
+export class Backdrop {
+  private readonly defaultBackdropId = 'mds-backdrop'
+  private readonly backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))'
+  private readonly backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)'
+
+  private readonly backdropId
+  private readonly cssBackdropZIndex
+  private readonly cssBackdropDuration
+
+  private backdropEl: HTMLElement
+  private backdropTimer: NodeJS.Timeout
+
+  constructor (backdropId?: string) {
+    this.backdropId = backdropId ?? this.defaultBackdropId
+    this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`
+    this.cssBackdropDuration = `var(--${this.backdropId}-duration)`
+  }
+
+  attachBackdrop (): void {
+    if (!this.backdropEl) {
+      this.backdropEl = document.createElement('div')
+      this.backdropEl.className = this.backdropId
+      this.backdropEl.style.inset = '0'
+      this.backdropEl.style.pointerEvents = 'none'
+      this.backdropEl.style.position = 'fixed'
+      this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`
+      this.backdropEl.style.zIndex = this.cssBackdropZIndex
+    }
+    this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden
+    document.body.appendChild(this.backdropEl)
+
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible
+    }, 1)
+  }
+
+  detachBackdrop (): void {
+    if (!this.backdropEl) {
+      return
+    }
+    this.backdropEl.style.backgroundColor = 'transparent'
+    clearTimeout(this.backdropTimer)
+    this.backdropTimer = setTimeout(() => {
+      this.backdropEl.remove()
+    }, cssDurationToMilliseconds(this.cssBackdropDuration))
+  }
+}

package/src/common/slot.ts

@@ -0,0 +1,24 @@
+const hasSlottedElements = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedElements({ flatten: true }).length > 0
+  }
+  return false
+}
+
+const hasSlottedNodes = (el: HTMLElement, name?: string): boolean => {
+  const query = name ? `slot[name="${name}"]` : 'slot:not([name])'
+
+  const slot: HTMLSlotElement = el.shadowRoot?.querySelector(query) as HTMLSlotElement
+  if (slot) {
+    return slot.assignedNodes().length > 0
+  }
+  return false
+}
+
+export {
+  hasSlottedElements,
+  hasSlottedNodes,
+}

package/src/components/mds-input-range/css/mds-input-range-disabled.css

@@ -0,0 +1,9 @@
+: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;
+}

package/src/components/mds-input-range/mds-input-range.css

@@ -17,12 +17,16 @@
   --mds-input-range-thumb-size: theme('spacing.400');
   --mds-input-range-thumb-background: theme('colors.variant-primary-04');
   --mds-input-range-thumb-shadow: 0 0 0 2px theme('colors.tone-neutral');
-  --mds-input-range-track-background: theme('colors.tone-neutral-09');
+  --mds-input-range-track-background: theme('colors.tone-neutral-08');
   --mds-input-range-track-size: theme('spacing.200');
   --mds-input-range-track-progress-background: theme('colors.variant-primary-03');
+  --mds-input-range-thumb-background-disabled: theme('colors.tone-neutral-06');
+  --mds-input-range-track-background-disabled: theme('colors.tone-neutral-08');
+  --mds-input-range-track-progress-background-disabled: theme('colors.tone-neutral-06');
 
   @apply
-    duration-200
+    duration-300
+    ease-in-out
     gap-100;
 
   display: grid;
@@ -80,6 +84,10 @@
 }
 
 .field::-webkit-slider-thumb {
+  @apply
+    ease-in-out
+    duration-300;
+
   appearance: none;
   background-color: var(--mds-input-range-thumb-background);
   border: 0;
@@ -89,6 +97,7 @@
   height: var(--mds-input-range-thumb-size);
   line-height: 0;
   transform: translate(0, -50%);
+  transition-property: background-color, box-shadow;
   width: var(--mds-input-range-thumb-size);
 }
 
@@ -131,6 +140,7 @@
   border-radius: var(--mds-input-range-track-size);
 }
 
+@import './css/mds-input-range-disabled.css';
 @import './css/mds-input-range-pref-animation.css';
 @import './css/mds-input-range-pref-theme.css';
 @import './css/mds-input-range-pref-contrast.css';

package/src/components/mds-input-range/mds-input-range.tsx

@@ -34,6 +34,11 @@ export class MdsInputRange {
    */
   @Prop() readonly step: number = 1
 
+  /**
+   * Sets if the component is disabled
+   */
+  @Prop({ mutable: true, reflect: true }) disabled?: boolean
+
   /**
    * The value attribute contains a number which contains a representation of the selected number.
    */
@@ -62,6 +67,19 @@ export class MdsInputRange {
     // trigger valueChanged that update progress and emit event
     this.value = parseInt(this.inputElement.value)
   }
+
+  @Watch('disabled')
+  protected disabledChanged (newValue: boolean):void {
+    /**
+     * 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)
+    }
+  }
+
   @Watch('value')
   valueChanged (): void {
     this.inputElement.value = this.value.toString()
@@ -85,6 +103,10 @@ export class MdsInputRange {
     this.calculateProgress()
   }
 
+  formResetCallback (): void {
+    this.internals.setFormValue('')
+  }
+
   componentDidLoad (): void {
     this.label = this.element.textContent ?? ''
     this.inputElement = this.element.shadowRoot?.querySelector('.field') as HTMLInputElement
@@ -109,6 +131,7 @@ export class MdsInputRange {
           <input
             class="field"
             aria-label={this.label}
+            disabled={this.disabled}
             max={this.max}
             min={this.min}
             onInput={this.onInput}

package/src/components/mds-input-range/readme.md

@@ -7,12 +7,13 @@
 
 ## Properties
 
-| Property | Attribute | Description                                                                                                                                      | Type     | Default     |
-| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
-| `max`    | `max`     | The greatest value in the range of permitted values                                                                                              | `number` | `100`       |
-| `min`    | `min`     | The lowest value in the range of permitted values                                                                                                | `number` | `0`         |
-| `step`   | `step`    | 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. | `number` | `1`         |
-| `value`  | `value`   | The value attribute contains a number which contains a representation of the selected number.                                                    | `number` | `undefined` |
+| Property   | Attribute  | Description                                                                                                                                      | Type                   | Default     |
+| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | ----------- |
+| `disabled` | `disabled` | Sets if the component is disabled                                                                                                                | `boolean \| undefined` | `undefined` |
+| `max`      | `max`      | The greatest value in the range of permitted values                                                                                              | `number`               | `100`       |
+| `min`      | `min`      | The lowest value in the range of permitted values                                                                                                | `number`               | `0`         |
+| `step`     | `step`     | 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. | `number`               | `1`         |
+| `value`    | `value`    | The value attribute contains a number which contains a representation of the selected number.                                                    | `number`               | `undefined` |
 
 
 ## Events

package/src/components/mds-input-range/test/mds-input-range.stories.tsx

@@ -3,6 +3,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',
@@ -44,6 +48,11 @@ const HideHeaderTemplate = args =>
 
 export const Default = Template.bind({})
 
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+}
+
 export const Min = Template.bind({})
 Min.args = {
   min: -100,