@momentum-design/components 0.110.0 → 0.110.2

package/dist/components/slider/slider.constants.d.ts

@@ -1,2 +1,15 @@
 declare const TAG_NAME: "mdc-slider";
-export { TAG_NAME };
+declare const THUMBSTATE: {
+    readonly START: "start";
+    readonly END: "end";
+    readonly UNDEFINED: undefined;
+};
+declare const DEFAULTS: {
+    readonly MIN: 0;
+    readonly MAX: 100;
+    readonly STEP: 1;
+    readonly STATE: undefined;
+    readonly ICON_SIZE: 1.25;
+    readonly ICON_LENGTH_UNIT: "rem";
+};
+export { TAG_NAME, DEFAULTS, THUMBSTATE };

package/dist/components/slider/slider.constants.js

@@ -1,3 +1,16 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('slider');
-export { TAG_NAME };
+const THUMBSTATE = {
+    START: 'start',
+    END: 'end',
+    UNDEFINED: undefined,
+};
+const DEFAULTS = {
+    MIN: 0,
+    MAX: 100,
+    STEP: 1,
+    STATE: THUMBSTATE.UNDEFINED,
+    ICON_SIZE: 1.25,
+    ICON_LENGTH_UNIT: 'rem',
+};
+export { TAG_NAME, DEFAULTS, THUMBSTATE };

package/dist/components/slider/slider.styles.js

@@ -1,7 +1,201 @@
 import { css } from 'lit';
+import { baseHostStyleVariables, focusRingBoxShadow } from '../../utils/styles';
 const styles = css `
   :host {
+    width: 100%;
+    --mdc-slider-tooltip-left: 0;
+    --mdc-slider-tick-left: 0;
+    --mdc-slider-input-size: 0.5rem;
+    --mdc-slider-thumb-size: 1.5rem;
+    --mdc-slider-tick-size: 0.25rem;
+    --mdc-slider-track-height: 2rem;
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-normal);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-slider-tick-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-slider-progress-color: var(--mds-color-theme-control-active-normal);
+    --mdc-slider-track-color: var(--mds-color-theme-control-indicator-inactive-normal);
+  }
+
+  :host([disabled]),
+  :host([soft-disabled]) {
+    --mdc-slider-progress-color: var(--mds-color-theme-control-active-disabled);
+    --mdc-slider-track-color: var(--mds-color-theme-control-inactive-disabled);
+  }
+
+  :host::part(slider-label),
+  :host::part(slider-label-start),
+  :host::part(slider-label-end) {
+    color: var(--mds-color-theme-text-primary-normal);
+    font-size: var(--mds-font-apps-body-midsize-medium-font-size);
+    font-weight: var(--mds-font-apps-body-midsize-medium-font-weight);
+    line-height: var(--mds-font-apps-body-midsize-medium-line-height);
+  }
+
+  :host::part(slider-label) {
+    margin-bottom: 0.5rem;
     display: block;
   }
+
+  :host::part(slider-track) {
+    width: 100%;
+    height: var(--mdc-slider-track-height);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  :host::part(slider-wrapper) {
+    position: relative;
+    width: 100%;
+    height: var(--mdc-slider-track-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :host::part(slider-labels) {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  :host::part(leading-icon),
+  :host::part(trailing-icon) {
+    flex-shrink: 0;
+  }
+
+  #start-slider {
+    height: 0;
+    z-index: 1;
+  }
+
+  input[type='range'] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: var(--mdc-slider-input-size);
+    border-radius: 0.25rem;
+    outline: none;
+    margin: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    pointer-events: all;
+    cursor: pointer;
+    width: var(--mdc-slider-thumb-size);
+    height: var(--mdc-slider-thumb-size);
+    background: var(--mdc-slider-thumb-color);
+    border-radius: 50%;
+    border: 1px solid var(--mdc-slider-thumb-border-color);
+  }
+
+  input[type='range']::-moz-range-thumb {
+    pointer-events: all;
+    cursor: pointer;
+    width: var(--mdc-slider-thumb-size);
+    height: var(--mdc-slider-thumb-size);
+    background: var(--mdc-slider-thumb-color);
+    border-radius: 50%;
+    border: 1px solid var(--mdc-slider-thumb-border-color);
+  }
+
+  input[type='range']::-ms-thumb {
+    pointer-events: all;
+    cursor: pointer;
+    width: var(--mdc-slider-thumb-size);
+    height: var(--mdc-slider-thumb-size);
+    background: var(--mdc-slider-thumb-color);
+    border-radius: 50%;
+    border: 1px solid var(--mdc-slider-thumb-border-color);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):hover::-webkit-slider-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-hover);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):active::-webkit-slider-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-pressed);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):hover::-moz-range-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-hover);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):active::-moz-range-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-pressed);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):hover::-ms-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-hover);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  :host(:not([soft-disabled])) input[type='range']:not(:disabled):active::-ms-thumb {
+    --mdc-slider-thumb-color: var(--mds-color-theme-overlay-button-secondary-pressed);
+    --mdc-slider-thumb-border-color: var(--mds-color-theme-outline-input-active);
+  }
+
+  input[type='range']:focus::-webkit-slider-thumb {
+    box-shadow: ${focusRingBoxShadow};
+  }
+
+  input[type='range']:focus::-moz-range-thumb {
+    box-shadow: ${focusRingBoxShadow};
+  }
+
+  input[type='range']:focus::-ms-thumb {
+    box-shadow: ${focusRingBoxShadow};
+  }
+
+  :host::part(slider-tooltip) {
+    position: absolute;
+    bottom: 120%;
+    border-radius: 0.5rem;
+    border: 1px solid var(--mds-color-theme-outline-secondary-normal);
+    background-color: var(--mds-color-theme-background-solid-primary-normal);
+    filter: var(--mds-elevation-3);
+    padding: 0.5rem;
+    transform: translateX(-50%);
+    left: calc(
+      var(--mdc-slider-tooltip-left) * (100% - var(--mdc-slider-thumb-size)) + (var(--mdc-slider-thumb-size) / 2)
+    );
+  }
+
+  :host::part(slider-ticks) {
+    position: absolute;
+    bottom: 7%;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  :host::part(slider-tick) {
+    position: absolute;
+    top: 50%;
+    width: var(--mdc-slider-tick-size);
+    height: var(--mdc-slider-tick-size);
+    background: var(--mdc-slider-tick-color);
+    border-radius: 50%;
+    transform: translateX(-50%);
+    left: calc(
+      var(--mdc-slider-tick-left) * (100% - var(--mdc-slider-thumb-size)) + (var(--mdc-slider-thumb-size) / 2)
+    );
+  }
+
+  @media (forced-colors: active) {
+    :host::part(end-slider),
+    :host::part(single-slider),
+    :host::part(slider-tick) {
+      border: 1px solid;
+    }
+  }
 `;
-export default [styles];
+export default [baseHostStyleVariables, styles];

package/dist/components/slider/slider.types.d.ts

@@ -1,3 +1,10 @@
+import type { OverrideEventTarget, TypedCustomEvent, ValueOf } from '../../utils/types';
+import type Slider from './slider.component';
+import { THUMBSTATE } from './slider.constants';
+type SliderChangeEvent = TypedCustomEvent<Slider>;
+type ThumbStateType = ValueOf<typeof THUMBSTATE>;
 interface Events {
+    onInputEvent: OverrideEventTarget<InputEvent, Slider>;
+    onChangeEvent: SliderChangeEvent;
 }
-export type { Events };
+export type { Events, ThumbStateType };

package/dist/components/slider/slider.types.js

@@ -1,2 +1 @@
-// import type { ValueOf } from '../../utils/types';
 export {};