@momentum-design/components 0.25.3 → 0.25.4

package/dist/components/divider/divider.component.d.ts

@@ -40,6 +40,13 @@ import type { Directions, DividerOrientation, DividerVariant } from './divider.t
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 declare class Divider extends Component {

package/dist/components/divider/divider.component.js

@@ -50,6 +50,13 @@ import styles from './divider.styles';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 class Divider extends Component {

package/dist/components/divider/divider.styles.js

@@ -17,6 +17,10 @@ const styles = [
       --mdc-divider-text-line-height: var(--mds-font-lineheight-body-midsize);
       --mdc-divider-text-margin: 1.5rem;
       --mdc-divider-grabber-button-border-radius: 0.5rem;
+      --mdc-divider-grabber-button-border-color: var(--mds-color-theme-outline-secondary-normal);
+      --mdc-divider-grabber-button-background-color-normal: var(--mds-color-theme-overlay-button-secondary-normal);
+      --mdc-divider-grabber-button-background-color-hover: var(--mds-color-theme-overlay-button-secondary-hover);
+      --mdc-divider-grabber-button-background-color-pressed: var(--mds-color-theme-overlay-button-secondary-pressed);
 
       display: flex;
       justify-content: center;
@@ -28,6 +32,37 @@ const styles = [
       background-color: var(--mdc-divider-background-color);
     }
 
+    @media (forced-colors: active) {
+      /* Primary and grabber divider styles */
+      :host([data-type='mdc-primary-divider'][button-position='positive']),
+      :host([data-type='mdc-grabber-divider'][button-position='positive']) {
+        border: 0;
+        border-top: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][button-position='negative']),
+      :host([data-type='mdc-grabber-divider'][button-position='negative']) {
+        border: 0;
+        border-bottom: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='positive']),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='positive']),
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='negative']:dir(rtl)),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='negative']:dir(rtl)) {
+        border: 0;
+        border-right: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='negative']),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='negative']),
+      :host([data-type='mdc-primary-divider'][orientation='vertical'][button-position='positive']:dir(rtl)),
+      :host([data-type='mdc-grabber-divider'][orientation='vertical'][button-position='positive']:dir(rtl)) {
+        border: 0;
+        border-left: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+    }
+
     /* Orientation-specific styles */
     :host([orientation='horizontal']) {
       flex-direction: row;
@@ -58,21 +93,35 @@ const styles = [
     }
 
     /** Button divider styles */
+
+    ::slotted(mdc-button) {
+      background-color: var(--mdc-divider-grabber-button-background-color-normal);
+      border-color: var(--mdc-divider-grabber-button-border-color);
+    }
+
+    ::slotted(mdc-button:hover) {
+      background-color: var(--mdc-divider-grabber-button-background-color-hover);
+    }
+
+    ::slotted(mdc-button:active) {
+      background-color: var(--mdc-divider-grabber-button-background-color-pressed);
+    }
+
     :host([orientation='vertical']) ::slotted(mdc-button) {
       width: 1.25rem;
       height: 2.5rem;
-      border-radius: 0 
-          var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
           0;
     }
 
     :host([orientation='horizontal']) ::slotted(mdc-button) {
       height: 1.25rem;
       width: 2.5rem;
-      border-radius: 0 
-          0 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          0
+          var(--mdc-divider-grabber-button-border-radius)
           var(--mdc-divider-grabber-button-border-radius);
     }
 
@@ -87,41 +136,53 @@ const styles = [
     }
 
     :host([orientation='horizontal'][button-position='positive']) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
-          0 
+      border-radius: var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
+          0
           0;
-      border-bottom-color: transparent;
+      margin: 0;
+      margin-bottom: var(--mdc-divider-width);
+      border-bottom: 0;
     }
 
     :host([orientation='horizontal'][button-position='negative']) ::slotted(mdc-button) {
-      border-top-color: transparent;
+      margin: 0;
+      margin-top: var(--mdc-divider-width);
+      border-top: 0;
     }
 
     :host([orientation='vertical'][button-position='negative']:dir(ltr)) ::slotted(mdc-button),
     :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: var(--mdc-divider-grabber-button-border-radius) 
-          0 
-          0 
+      border-radius: var(--mdc-divider-grabber-button-border-radius)
+          0
+          0
           var(--mdc-divider-grabber-button-border-radius);
-      border-right-color: transparent;
+      margin: 0;
+      margin-right: var(--mdc-divider-width);
+      border-right: 0;
     }
 
     :host([orientation='vertical'][button-position='positive']:dir(ltr)) ::slotted(mdc-button),
     :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
-      border-left-color: transparent;
+      margin: 0;
+      margin-left: var(--mdc-divider-width);
+      border-left: 0;
     }
 
     :host([orientation='vertical'][button-position='positive']:dir(rtl)) ::slotted(mdc-button) {
-      border-radius: 0 
-          var(--mdc-divider-grabber-button-border-radius) 
-          var(--mdc-divider-grabber-button-border-radius) 
+      border-radius: 0
+          var(--mdc-divider-grabber-button-border-radius)
+          var(--mdc-divider-grabber-button-border-radius)
           0;
       transform: rotate(180deg);
+      margin: 0;
+      margin-right: var(--mdc-divider-width);
     }
 
     :host([orientation='vertical'][button-position='negative']:dir(rtl)) ::slotted(mdc-button) {
       transform: rotate(180deg);
+      margin: 0;
+      margin-left: var(--mdc-divider-width);
     }
 
     /** Text divider styles */
@@ -136,6 +197,12 @@ const styles = [
       background-color: var(--mdc-divider-background-color);
     }
 
+    @media (forced-colors: active) {
+      :host([data-type='mdc-text-divider']) > div {
+        border-bottom: var(--mdc-divider-width) solid var(--mdc-divider-background-color);
+      }
+    }
+
     :host([orientation='horizontal'][variant='gradient'][data-type='mdc-text-divider']) > div:first-of-type {
       background: linear-gradient(to right, transparent, 30%, var(--mdc-divider-background-color));
     }

package/dist/custom-elements.json

@@ -2580,6 +2580,22 @@
               "description": "line height of label in the text divider",
               "name": "--mdc-divider-text-line-height"
             },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
+            },
             {
               "description": "border radius of the grabber button",
               "name": "--mdc-divider-grabber-button-border-radius"
@@ -2754,7 +2770,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
           "customElement": true
         }
       ],

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

@@ -37,6 +37,13 @@ import Component from '../../components/divider';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;

package/dist/react/divider/index.js

@@ -40,6 +40,13 @@ import { TAG_NAME } from '../../components/divider/divider.constants';
  * @cssproperty --mdc-divider-text-color - font color of label in the text divider
  * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
  * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
+ *  in rest state
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
+ *  in hover state
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
+ *  in pressed state
+ * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
  * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
  */
 const reactWrapper = createComponent({

package/package.json

@@ -37,5 +37,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.25.3"
+  "version": "0.25.4"
 }