@momentum-design/components 0.110.1 → 0.111.0

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as Accordion } from './accordion';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/react/index.js

@@ -1,6 +1,6 @@
-export { default as Accordion } from './accordion';
-export { default as AccordionGroup } from './accordiongroup';
 export { default as AccordionButton } from './accordionbutton';
+export { default as AccordionGroup } from './accordiongroup';
+export { default as Accordion } from './accordion';
 export { default as AlertChip } from './alertchip';
 export { default as Animation } from './animation';
 export { default as Appheader } from './appheader';

package/dist/react/slider/index.d.ts

@@ -1,12 +1,42 @@
+import { type EventName } from '@lit/react';
 import Component from '../../components/slider';
 /**
- * slider component, which ...
+ * Slider component is used to select a value or range of values from within a defined range.
+ * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
+ * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
+ * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
  *
  * @tagname mdc-slider
  *
- * @slot default - This is a default/unnamed slot
+ * @dependency mdc-icon
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart slider-tooltip - The tooltip of the slider
+ * @csspart slider-track - The track of the slider
+ * @csspart slider-wrapper - The wrapper around the slider input(s)
+ * @csspart slider-ticks - The container for the tick marks
+ * @csspart slider-tick - The individual tick marks
+ * @csspart slider-input - The input element of the slider
+ * @csspart slider-label - The label of the slider
+ *
+ * @event input - Fired when the slider value changes
+ * @event change - Fired when the slider value is committed
+ *
+ * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb
+ * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border
+ * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb
+ * @cssproperty --mdc-slider-input-size - The height of the slider input
+ * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks
+ * @cssproperty --mdc-slider-track-height - The height of the slider track
+ * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks
+ * @cssproperty --mdc-slider-progress-color - The color of the slider progress
+ * @cssproperty --mdc-slider-track-color - The color of the slider track
+ * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
+ * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<CustomEvent<unknown> & {
+        target: Component;
+    }>;
+    onInput: EventName<import("../../utils/types").OverrideEventTarget<InputEvent, Component>>;
+}>;
 export default reactWrapper;

package/dist/react/slider/index.js

@@ -3,19 +3,46 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/slider';
 import { TAG_NAME } from '../../components/slider/slider.constants';
 /**
- * slider component, which ...
+ * Slider component is used to select a value or range of values from within a defined range.
+ * It provides a visual representation of the current value(s) and allows users to adjust the value(s) by dragging the thumb(s) along the track.
+ * It can be used as a single slider or a range slider. This is set by the boolean attribute `range`
+ * If the step value is more than 1, tick marks are shown to represent the steps between the min and max values. The slider thumb will snap to the nearest tick mark.
  *
  * @tagname mdc-slider
  *
- * @slot default - This is a default/unnamed slot
+ * @dependency mdc-icon
  *
- * @cssproperty --custom-property-name - Description of the CSS custom property
+ * @csspart slider-tooltip - The tooltip of the slider
+ * @csspart slider-track - The track of the slider
+ * @csspart slider-wrapper - The wrapper around the slider input(s)
+ * @csspart slider-ticks - The container for the tick marks
+ * @csspart slider-tick - The individual tick marks
+ * @csspart slider-input - The input element of the slider
+ * @csspart slider-label - The label of the slider
+ *
+ * @event input - Fired when the slider value changes
+ * @event change - Fired when the slider value is committed
+ *
+ * @cssproperty --mdc-slider-thumb-color - The color of the slider thumb
+ * @cssproperty --mdc-slider-thumb-border-color - The color of the slider thumb border
+ * @cssproperty --mdc-slider-thumb-size - The size of the slider thumb
+ * @cssproperty --mdc-slider-input-size - The height of the slider input
+ * @cssproperty --mdc-slider-tick-size - The size of the slider tick marks
+ * @cssproperty --mdc-slider-track-height - The height of the slider track
+ * @cssproperty --mdc-slider-tick-color - The color of the slider tick marks
+ * @cssproperty --mdc-slider-progress-color - The color of the slider progress
+ * @cssproperty --mdc-slider-track-color - The color of the slider track
+ * @cssproperty --mdc-slider-tooltip-left - The left position of the slider tooltip
+ * @cssproperty --mdc-slider-tick-left - The left position of the slider tick marks
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onChange: 'change',
+        onInput: 'input',
+    },
     displayName: 'Slider',
 });
 export default reactWrapper;

package/dist/utils/styles/index.d.ts

@@ -1,4 +1,5 @@
 declare const hostFitContentStyles: import("lit").CSSResult;
 declare const baseHostStyleVariables: import("lit").CSSResult;
+declare const focusRingBoxShadow: import("lit").CSSResult;
 declare const hostFocusRingStyles: (applyFocusRingOnClass?: boolean) => import("lit").CSSResult[];
-export { hostFitContentStyles, hostFocusRingStyles, baseHostStyleVariables };
+export { hostFitContentStyles, hostFocusRingStyles, baseHostStyleVariables, focusRingBoxShadow };

package/dist/utils/styles/index.js

@@ -22,11 +22,11 @@ const baseHostStyleVariables = css `
     --mdc-focus-ring-outer-offset: calc(var(--mdc-focus-ring-inner-width) + var(--mdc-focus-ring-middle-width));
   }
 `;
-const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
-    const boxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
+const focusRingBoxShadow = css `0 0 0 var(--mdc-focus-ring-inner-width) var(--mdc-focus-ring-inner-color),
     0 0 0 var(--mdc-focus-ring-middle-width) var(--mdc-focus-ring-middle-color),
     0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color)
   `;
+const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     if (applyFocusRingOnClass) {
         return [
             baseHostStyleVariables,
@@ -40,7 +40,7 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
         /* Add focus ring to parent when child is focused. The parent element must have class name mdc-focus-ring */
         .mdc-focus-ring:focus-within {
           position: relative;
-          box-shadow: ${boxShadow};
+          box-shadow: ${focusRingBoxShadow};
         }
         /* Remove focus ring from parent when children has its own focus ring.
             The child element must have class name own-focus-ring */
@@ -66,7 +66,7 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
       :host(:focus-visible) {
         outline: none;
         position: relative;
-        box-shadow: ${boxShadow};
+        box-shadow: ${focusRingBoxShadow};
       }
       /* High Contrast Mode */
       @media (forced-colors: active) {
@@ -77,4 +77,4 @@ const hostFocusRingStyles = (applyFocusRingOnClass = false) => {
     `,
     ];
 };
-export { hostFitContentStyles, hostFocusRingStyles, baseHostStyleVariables };
+export { hostFitContentStyles, hostFocusRingStyles, baseHostStyleVariables, focusRingBoxShadow };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.110.1",
+  "version": "0.111.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"