@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/side-menu/webcomponent/side-menu.js

@@ -0,0 +1,206 @@
+import { h, Host, } from '@stencil/core';
+import { dfs, isFocusable } from '../../../utils/utils';
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+export class SddsSideMenu {
+  constructor() {
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.collapsedEventEmitter.emit({
+      collapsed: this.collapsed,
+    });
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    this.collapsedEventEmitter.emit({
+      collapsed: newVal,
+    });
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = dfs(this.host, isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (h(Host, { role: "navigation" }, h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "sdds-side-menu-wrapper" }, h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+  }
+  static get is() { return "sdds-side-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu is open or not."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "persistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu should always be shown on desktop screens to the side."
+        },
+        "attribute": "persistent",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu is collapsed. Only a persistent desktop menu can be collapsed."
+        },
+        "attribute": "collapsed",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isUpperSlotEmpty": {},
+      "isClosed": {},
+      "isOpen": {},
+      "isClosing": {},
+      "isOpening": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "collapsedEventEmitter",
+        "name": "sddsSideMenuCollapsed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Broadcasts collapsed state to child components."
+        },
+        "complexType": {
+          "original": "CollapsedEvent",
+          "resolved": "CollapsedEvent",
+          "references": {
+            "CollapsedEvent": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "onOpenChange"
+      }, {
+        "propName": "collapsed",
+        "methodName": "onCollapsedChange"
+      }, {
+        "propName": "isOpening",
+        "methodName": "onIsOpenChange"
+      }];
+  }
+}
+//# sourceMappingURL=side-menu.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu.js","sourceRoot":"","sources":["../../../../src/components/side-menu/webcomponent/side-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,MAAM,kBAAkB,GAAG,OAAO,CAAC;AACnC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AACvC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAOvC,MAAM,OAAO,YAAY;;IAiCvB,oCAA+B,GAAqC,CAAC,CAAC,EAAE,EAAE;MACxE,MAAM,SAAS,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC;MAC7B,IAAI,SAAS,EAAE;QACb,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;OACxB;IACH,CAAC,CAAC;gBAzBuC,KAAK;sBAGC,KAAK;qBAGN,KAAK;4BAEd,KAAK;oBAEb,IAAI;kBAEN,KAAK;qBAEF,KAAK;qBAEL,KAAK;;EAWnC,iBAAiB;IACf,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;MAC9B,SAAS,EAAE,IAAI,CAAC,SAAS;KAC1B,CAAC,CAAC;IAEH,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,kBAAkB,GAAG,CAAC,CAAC;IACrF,IAAI,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;EAC9F,CAAC;EAED,gBAAgB;IACd,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,0BAA0B,CAAC,CAAC;IAE3E,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IAC5F,MAAM,iBAAiB,GAAG,SAAS,CAAC,gBAAgB,EAAE,CAAC;IACvD,MAAM,oBAAoB,GAAG,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,IAAG,CAAC,CAAC;IAE3D,IAAI,CAAC,oBAAoB,EAAE;MACzB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;KAC9B;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,qBAAqB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,+BAA+B,CAAC,CAAC;EACjG,CAAC;EAGD,YAAY,CAAC,MAAe,EAAE,MAAgB;IAC5C,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IACD,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;EACH,CAAC;EAGD,iBAAiB,CAAC,MAAe;IAC/B,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;MAC9B,SAAS,EAAE,MAAM;KAClB,CAAC,CAAC;EACL,CAAC;EAGD,cAAc,CAAC,MAAe;IAC5B,IAAI,MAAM,EAAE;MACV,MAAM,qBAAqB,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;MAChE,qBAAqB,CAAC,KAAK,EAAE,CAAC;KAC/B;EACH,CAAC;EAED,KAAK,CAAC,UAAU;IACd,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC5B,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC5B,UAAU,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED,KAAK,CAAC,UAAU;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IAEtB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC5B,UAAU,CAAC,OAAO,EAAE,0BAA0B,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,YAAY;MACrB,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;UAC/C,YAAY,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS;UAC3C,cAAc,EAAE,IAAI,CAAC,QAAQ;SAC9B;QAED,YAAM,IAAI,EAAC,SAAS,GAAQ;QAC5B,aAAO,KAAK,EAAE,MAAM;UAClB,YAAM,IAAI,EAAC,cAAc,GAAQ;UACjC,WAAK,KAAK,EAAC,wBAAwB;YACjC,UAAI,KAAK,EAAE,+CAA+C;cACxD,eAAa,CACV;YACL,UAAI,KAAK,EAAE,6CAA6C;cACtD,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD;UACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CACzB,CACJ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { dfs, isFocusable } from '../../../utils/utils';\n\nexport interface CollapsedEvent {\n  collapsed: boolean;\n}\n\nconst GRID_LG_BREAKPOINT = '992px';\nconst OPENING_ANIMATION_DURATION = 400;\nconst INITIALIZE_ANIMATION_DELAY = 500;\n\n@Component({\n  tag: 'sdds-side-menu',\n  styleUrl: 'side-menu.scss',\n  shadow: true,\n})\nexport class SddsSideMenu {\n  @Element() host: HTMLSddsSideMenuElement;\n\n  /** Broadcasts collapsed state to child components. */\n  @Event({\n    eventName: 'sddsSideMenuCollapsed',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  collapsedEventEmitter: EventEmitter<CollapsedEvent>;\n\n  /** If the side menu is open or not. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /** If the side menu should always be shown on desktop screens to the side. */\n  @Prop({ reflect: true }) persistent: boolean = false;\n\n  /** If the side menu is collapsed. Only a persistent desktop menu can be collapsed. */\n  @Prop({ reflect: true }) collapsed: boolean = false;\n\n  @State() isUpperSlotEmpty: boolean = false;\n\n  @State() isClosed: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  @State() isClosing: boolean = false;\n\n  @State() isOpening: boolean = false;\n\n  private matchesLgBreakpointMq: MediaQueryList;\n\n  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void = (e) => {\n    const isBelowLg = !e.matches;\n    if (isBelowLg) {\n      this.collapsed = false;\n    }\n  };\n\n  connectedCallback() {\n    this.collapsedEventEmitter.emit({\n      collapsed: this.collapsed,\n    });\n\n    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);\n    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  componentDidLoad() {\n    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);\n\n    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const upperSlotElements = upperSlot.assignedElements();\n    const hasUpperSlotElements = upperSlotElements?.length > 0;\n\n    if (!hasUpperSlotElements) {\n      this.isUpperSlotEmpty = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  @Watch('open')\n  onOpenChange(newVal: boolean, oldVal?: boolean) {\n    if (newVal && !oldVal) {\n      this.setOpening();\n    }\n    if (!newVal && oldVal) {\n      this.setClosing();\n    }\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(newVal: boolean) {\n    this.collapsedEventEmitter.emit({\n      collapsed: newVal,\n    });\n  }\n\n  @Watch('isOpening')\n  onIsOpenChange(newVal: boolean) {\n    if (newVal) {\n      const firstFocusableElement = dfs(this.host, isFocusable, true);\n      firstFocusableElement.focus();\n    }\n  }\n\n  async setOpening() {\n    this.isClosed = false;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, 0);\n    });\n    this.isOpening = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isOpening = false;\n    this.isOpen = true;\n  }\n\n  async setClosing() {\n    this.isOpen = false;\n    this.isClosing = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isClosing = false;\n    this.isClosed = true;\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-upper-slot-empty': this.isUpperSlotEmpty,\n            'state-open': this.isOpen || this.isOpening,\n            'state-closed': this.isClosed,\n          }}\n        >\n          <slot name=\"overlay\"></slot>\n          <aside class={`menu`}>\n            <slot name=\"close-button\"></slot>\n            <div class=\"sdds-side-menu-wrapper\">\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-upper`}>\n                <slot></slot>\n              </ul>\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-end`}>\n                <slot name=\"end\"></slot>\n              </ul>\n            </div>\n            <slot name=\"sticky-end\"></slot>\n          </aside>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/slider/slider.css

@@ -1,7 +1,6 @@
 :root,
 .sdds-mode-light {
   --sdds-slider-label-color: var(--sdds-grey-958);
-  --sdds-slider-label-color-disabled: var(--sdds-grey-400);
   --sdds-slider-thumb-color: var(--sdds-blue-800);
   --sdds-slider-divider-color: var(--sdds-grey-400);
   --sdds-slider-track-color: var(--sdds-grey-400);
@@ -12,11 +11,13 @@
   --sdds-slider-inputfield-background: var(--sdds-white);
   --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
   --sdds-slider-divider-values-color: var(--sdds-grey-958);
+  --sdds-slider-disabled: var(--sdds-grey-400);
+  --sdds-slider-value-tooltip-background: var(--sdds-grey-800);
+  --sdds-slider-value-tooltip-color: var(--sdds-white);
 }
 
 .sdds-mode-dark {
   --sdds-slider-label-color: var(--sdds-grey-100);
-  --sdds-slider-label-color-disabled: var(--sdds-grey-700);
   --sdds-slider-thumb-color: var(--sdds-grey-100);
   --sdds-slider-divider-color: var(--sdds-grey-700);
   --sdds-slider-track-color: var(--sdds-grey-700);
@@ -27,6 +28,9 @@
   --sdds-slider-inputfield-background: var(--sdds-grey-900);
   --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
   --sdds-slider-divider-values-color: var(--sdds-grey-100);
+  --sdds-slider-disabled: var(--sdds-grey-700);
+  --sdds-slider-value-tooltip-background: var(--sdds-grey-200);
+  --sdds-slider-value-tooltip-color: var(--sdds-grey-958);
 }
 
 sdds-slider {
@@ -85,11 +89,15 @@ sdds-slider input[type=range].sdds-slider-native-element {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
 }
+.sdds-slider .sdds-slider__input-values .sdds-slider__input-value.min-value {
+  padding-left: 0px;
+}
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
   background-color: var(--sdds-slider-inputfield-background);
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 4px 4px 0 0;
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
   font: var(--sdds-detail-02);
@@ -115,11 +123,11 @@ sdds-slider input[type=range].sdds-slider-native-element {
   user-select: none;
   position: absolute;
   color: var(--sdds-slider-label-color);
-  top: -16px;
+  padding-bottom: 16px;
   transform: translateY(-100%);
 }
 .sdds-slider label.offset {
-  top: -35px;
+  padding-bottom: 34px;
 }
 .sdds-slider .sdds-slider__value {
   font: var(--sdds-detail-01);
@@ -130,10 +138,11 @@ sdds-slider input[type=range].sdds-slider-native-element {
   position: absolute;
   transform: translate(-50%, -100%);
   top: -24px;
-  background-color: var(--sdds-grey-800);
-  color: var(--sdds-white);
+  background-color: var(--sdds-slider-value-tooltip-background);
+  color: var(--sdds-slider-value-tooltip-color);
 }
 .sdds-slider .sdds-slider__value svg {
+  color: var(--sdds-slider-value-tooltip-background);
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
@@ -242,38 +251,38 @@ sdds-slider input[type=range].sdds-slider-native-element {
   pointer-events: none;
 }
 .sdds-slider.disabled label {
-  color: var(--sdds-slider-label-color-disabled);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
   cursor: default;
 }
 .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
-  fill: var(--sdds-slider-controls-color);
+  fill: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
-  color: var(--sdds-slider-controls-color);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  color: var(--sdds-slider-controls-color);
+  color: var(--sdds-slider-disabled);
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__value {
   display: none;
 }
 .sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-slider-track-fill-color);
+  background-color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  color: var(--sdds-slider-track-fill-color);
+  color: var(--sdds-slider-disabled);
 }
 .sdds-slider.disabled .sdds-slider__scrubber {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  background: var(--sdds-slider-track-color);
+  background-color: var(--sdds-slider-disabled);
   cursor: default;
 }
 .sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
@@ -289,9 +298,15 @@ sdds-slider input[type=range].sdds-slider-native-element {
   height: 20px;
 }
 
-.sdds-slider__controls .sdds-slider__control {
+.sdds-slider .sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
+  color: var(--sdds-slider-controls-color);
+}
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
   cursor: default;
 }
-.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
-  fill: var(--sdds-slider-controls-color);
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon {
+  color: var(--sdds-slider-disabled);
 }

package/dist/collection/components/slider/slider.js

@@ -4,14 +4,11 @@ export class Slider {
     this.wrapperElement = null;
     this.scrubberElement = null;
     this.scrubberInnerElement = null;
-    this.dividersElement = null;
     this.trackElement = null;
     this.trackFillElement = null;
     this.minusElement = null;
     this.plusElement = null;
     this.inputElement = null;
-    this.nativeRangeInputElement = null;
-    this.scrubberGrabPos = { x: 0, y: 0 };
     this.scrubberGrabbed = false;
     this.scrubberLeft = 0;
     this.tickValues = [];
@@ -30,15 +27,15 @@ export class Slider {
     this.max = '100';
     this.ticks = '0';
     this.showTickNumbers = false;
-    this.tooltip = null;
-    this.disabled = null;
-    this.readOnly = null;
-    this.controls = null;
-    this.input = null;
+    this.tooltip = false;
+    this.disabled = false;
+    this.readOnly = false;
+    this.controls = false;
+    this.input = false;
     this.step = '1';
     this.name = '';
-    this.size = '';
-    this.snap = null;
+    this.scrubberSize = 'lg';
+    this.snap = false;
     this.sliderId = crypto.randomUUID();
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
@@ -81,33 +78,43 @@ export class Slider {
     if (!this.scrubberGrabbed) {
       return;
     }
-    const numTicks = parseInt(this.ticks);
-    const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.clientX - trackRect.left;
-    this.supposedValueSlot = -1;
-    if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
-    }
-    this.scrubberLeft = this.constrainScrubber(localLeft);
-    this.scrubberElement.style.left = `${this.scrubberLeft}px`;
-    this.updateValue();
-    this.updateTrack();
+    this.scrubberCore(event);
   }
   handleTouchMove(event) {
     event.preventDefault();
     if (!this.scrubberGrabbed) {
       return;
     }
+    this.scrubberCore(event);
+  }
+  scrubberCore(event) {
     const numTicks = parseInt(this.ticks);
     const trackRect = this.trackElement.getBoundingClientRect();
-    let localLeft = event.touches[0].clientX - trackRect.left;
+    let localLeft = 0;
+    if (event.type === 'mousemove') {
+      localLeft = event.clientX - trackRect.left;
+    }
+    else if (event.type === 'touchmove') {
+      localLeft = event.touches[0].clientX - trackRect.left;
+    }
+    else
+      console.warn('Slider component: Unsupported event!');
     this.supposedValueSlot = -1;
     if (this.useSnapping && numTicks > 0) {
-      const v = Math.round(this.getTrackWidth() / (numTicks + 1));
-      localLeft = Math.round(localLeft / v) * v;
-      this.supposedValueSlot = Math.round(localLeft / v);
+      const trackWidth = this.getTrackWidth();
+      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));
+      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;
+      let scrubberPositionPX = 0;
+      if (localLeft >= 0 && localLeft <= trackWidth) {
+        scrubberPositionPX = localLeft;
+      }
+      else if (localLeft > trackWidth) {
+        scrubberPositionPX = trackWidth;
+      }
+      else if (localLeft < 0) {
+        scrubberPositionPX = 0;
+      }
+      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);
     }
     this.scrubberLeft = this.constrainScrubber(localLeft);
     this.scrubberElement.style.left = `${this.scrubberLeft}px`;
@@ -181,13 +188,10 @@ export class Slider {
       this.eventListenersAdded = true;
       this.scrubberElement.addEventListener('mousedown', (event) => {
         event.preventDefault();
-        this.grabScrubber(event.offsetX, event.offsetY);
+        this.grabScrubber();
       });
-      this.scrubberElement.addEventListener('touchstart', (event) => {
-        const rect = this.scrubberElement.getBoundingClientRect();
-        const x = event.targetTouches[0].pageX - rect.left;
-        const y = event.targetTouches[0].pageY - rect.top;
-        this.grabScrubber(x, y);
+      this.scrubberElement.addEventListener('touchstart', () => {
+        this.grabScrubber();
       });
       if (this.useControls) {
         this.minusElement.addEventListener('click', () => {
@@ -220,14 +224,10 @@ export class Slider {
     this.calculateScrubberLeftFromValue(this.value);
     this.updateTrack();
   }
-  grabScrubber(xOffset, yOffset) {
+  grabScrubber() {
     if (this.readonlyState) {
       return;
     }
-    this.scrubberGrabPos = {
-      x: xOffset,
-      y: yOffset,
-    };
     this.scrubberGrabbed = true;
     this.scrubberInnerElement.classList.add('pressed');
   }
@@ -281,13 +281,13 @@ export class Slider {
       }
       this.tickValues.push(this.getMax());
     }
-    if (this.disabled !== null) {
+    if (this.disabled) {
       this.disabledState = true;
     }
     else {
       this.disabledState = false;
     }
-    if (this.readOnly !== null) {
+    if (this.readOnly) {
       this.readonlyState = true;
     }
     else {
@@ -295,18 +295,18 @@ export class Slider {
     }
     this.useInput = false;
     this.useControls = false;
-    if (this.controls !== null) {
+    if (this.controls) {
       this.useControls = true;
     }
-    else if (this.input !== null) {
+    else if (this.input) {
       this.useInput = true;
     }
     this.useSmall = false;
-    if (this.size === 'sm') {
+    if (this.scrubberSize === 'sm') {
       this.useSmall = true;
     }
     this.useSnapping = false;
-    if (this.snap !== null) {
+    if (this.snap) {
       this.useSnapping = true;
     }
     const min = this.getMin();
@@ -317,21 +317,17 @@ export class Slider {
     }
   }
   render() {
-    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { ref: (el) => {
-        this.nativeRangeInputElement = el;
-      }, class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled, id: this.sliderId }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
+    return (h("div", { class: `sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "sdds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: `sdds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'sdds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
-      } }, this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
+      } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "sdds-slider__input-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, h("label", { class: this.tickValues.length > 0 && 'offset' }, this.label), this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { ref: (el) => {
-        this.dividersElement = el;
-      }, class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
+      }, class: "sdds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "sdds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "sdds-slider__control sdds-slider__control-minus" }, h("sdds-icon", { name: "minus", size: "16px" })))), h("div", { class: "sdds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "sdds-slider__value-dividers-wrapper" }, h("div", { class: "sdds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "sdds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "sdds-slider__track", ref: (el) => {
         this.trackElement = el;
       }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "sdds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
       } }), h("div", { class: "sdds-slider__scrubber", ref: (el) => {
         this.scrubberElement = el;
-      } }, this.tooltip !== null && (h("div", { class: "sdds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "#37414F" })))), h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
+      } }, this.tooltip && (h("div", { class: "sdds-slider__value" }, this.value, h("svg", { width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { class: "sdds-slider__scrubber-inner", ref: (el) => {
         this.scrubberInnerElement = el;
       } })))), this.useInput && (h("div", { class: "sdds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
@@ -481,7 +477,7 @@ export class Slider {
         },
         "attribute": "tooltip",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "disabled": {
         "type": "boolean",
@@ -499,7 +495,7 @@ export class Slider {
         },
         "attribute": "disabled",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "readOnly": {
         "type": "boolean",
@@ -517,7 +513,7 @@ export class Slider {
         },
         "attribute": "read-only",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "controls": {
         "type": "boolean",
@@ -535,7 +531,7 @@ export class Slider {
         },
         "attribute": "controls",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "input": {
         "type": "boolean",
@@ -553,7 +549,7 @@ export class Slider {
         },
         "attribute": "input",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "step": {
         "type": "string",
@@ -591,12 +587,12 @@ export class Slider {
         "reflect": false,
         "defaultValue": "''"
       },
-      "size": {
+      "scrubberSize": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'sm' | ''",
-          "resolved": "\"\" | \"sm\"",
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
           "references": {}
         },
         "required": false,
@@ -605,9 +601,9 @@ export class Slider {
           "tags": [],
           "text": "Sets the size of the scrubber"
         },
-        "attribute": "size",
+        "attribute": "scrubber-size",
         "reflect": false,
-        "defaultValue": "''"
+        "defaultValue": "'lg'"
       },
       "snap": {
         "type": "boolean",
@@ -625,7 +621,7 @@ export class Slider {
         },
         "attribute": "snap",
         "reflect": false,
-        "defaultValue": "null"
+        "defaultValue": "false"
       },
       "sliderId": {
         "type": "string",
@@ -639,7 +635,7 @@ export class Slider {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Id for the sliders input element, randomly generated if not specified."
+          "text": "ID for the sliders input element, randomly generated if not specified."
         },
         "attribute": "slider-id",
         "reflect": false,
@@ -652,11 +648,11 @@ export class Slider {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique checkbox identifier and value when the slider has a change in value."
+          "text": "Sends the value of the slider when changed."
         },
         "complexType": {
           "original": "{\n    value: string;\n  }",