@inmotionnow/momentum-components 102.26.0 → 102.26.2

package/dist/src/3_components/application/application.css

@@ -26,14 +26,15 @@
 
 @media (max-width: $reflow-zoom-level--150) {
   .mds-c-application {
-    .mds-has-subnav:not(.mds-is-subnav-minimized) .opus-nav-parent-container {
-      min-width: $navigation-width--sm !important;
-      width: $navigation-width--sm;
-    }
+    .mds-c-layout {
+      min-height: 100%;
+      overflow-x: hidden;
+      overflow-y: auto;
 
-    .mds-has-subnav .mds-c-layout,
-    .mds-is-subnav-minimized .mds-c-layout {
-      padding-left: var(--mds-d-spacing--xl);
+      > .mds-c-main-content {
+        min-width: 0;
+        overflow: visible;
+      }
     }
   }
 }
@@ -46,8 +47,6 @@
 */
 @media (max-width: $reflow-zoom-level--250) {
   .mds-c-application {
-    overflow: visible; /* Prevent clipping */
-
     .mds-c-portal {
       & > div:has(.emoji-mart) {
         max-width: 95%;

package/dist/src/3_components/badge/badge.css

@@ -236,3 +236,20 @@
     margin-right: var(--mds-d-spacing--xs);
   }
 }
+
+.mds-c-badge--wrap {
+  height: auto;
+  min-height: var(--mds-v-badge__height);
+  padding: var(--mds-d-spacing--xxs) var(--mds-v-badge__padding--horizontal);
+
+  .mds-c-badge__text {
+    flex: initial;
+    line-height: 1.3;
+    overflow: visible;
+    overflow-wrap: break-word;
+    text-align: left;
+    text-overflow: initial;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}

package/dist/src/3_components/button/button.css

@@ -450,13 +450,15 @@
 @media (max-width: $reflow-zoom-level--250) {
   .mds-c-button {
     max-width: 100%;
-    min-width: 25%;
-    padding: 0.1rem;
+    min-width: fit-content;
+
+    --mds-v-button__padding--horizontal: $mds-v-button__horizontal-padding--sm;
+    --mds-v-button__padding--vertical: $mds-v-button__vertical-padding--sm;
 
     &-menu {
       /* Override inline style */
-      margin-bottom: 0.5rem !important;
-      padding: 0.3rem 0 !important;
+      margin-bottom: var(--mds-d-spacing--sm) !important;
+      padding: var(--mds-d-spacing--xs) 0 !important;
     }
 
     &__content {
@@ -468,7 +470,7 @@
     }
 
     &[data-tracking$='-emoji-reaction'] {
-      margin-top: 0.5rem;
+      margin-top: var(--mds-d-spacing--sm);
     }
   }
 }

package/dist/src/3_components/layout/layout.css

@@ -163,17 +163,7 @@
     .mds-c-main-content .mds-c-section {
       overflow: visible;
     }
-  }
-}
 
-/* 
-  Add WCAG Reflow Compliance 
-  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom, applied reflow styles starting at 250% zoom,
-  since some elements are cut off or difficult to use even at that level.
-  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
-*/
-@media (max-width: $reflow-zoom-level--250) {
-  .mds-c-layout {
     /* Enable title truncation and expand on edit only when the editable control is present */
     .mds-c-header {
       .mds-c-level__title:has(.mds-c-editable__control) {

package/dist/src/3_components/navigation/navigation.css

@@ -4,7 +4,7 @@
 
 .mds-is-nav-expanded {
   .mds-c-subnav {
-    z-index: 0;
+    z-index: 2;
   }
 }
 
@@ -113,18 +113,48 @@
   }
 }
 
-/* 
-  Add WCAG Reflow Compliance 
-  At 400% zoom on a 1280px screen, the effective CSS width is about 320px.
-*/
-@media (max-width: $reflow-zoom-level--400) {
+@media (max-width: $reflow-zoom-level--150) {
   .mds-c-navigation {
     &__header {
-      max-height: 3rem;
+      max-height: 3.75rem;
     }
 
-    &__footer {
-      padding: 0.8rem;
+    .mds-is-nav-expanded & {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .mds-has-subnav,
+  .mds-is-subnav-minimized {
+    .mds-c-layout {
+      padding-left: var(--mds-d-spacing--xl);
+    }
+  }
+
+  .mds-is-nav-expanded {
+    .opus-nav-parent-container {
+      min-width: 0 !important;
+      position: relative;
+    }
+
+    .mds-c-layout {
+      padding-left: calc($navigation-width--sm + var(--mds-d-spacing--xl));
+    }
+  }
+
+  .mds-has-subnav:not(.mds-is-subnav-minimized) {
+    .opus-nav-parent-container {
+      min-width: $navigation-width--sm !important;
+      width: $navigation-width--sm;
+    }
+  }
+
+  .mds-is-nav-collapsed {
+    .mds-c-navigation--transition {
+      transition: none;
     }
   }
 }
@@ -162,7 +192,19 @@
 
   .mds-is-nav-expanded {
     .mds-c-navigation {
-      width: calc($navigation-width--sm + 8rem);
+      width: calc($navigation-width--sm + 10rem);
+    }
+  }
+}
+
+/* 
+  Add WCAG Reflow Compliance 
+  At 400% zoom on a 1280px screen, the effective CSS width is about 320px.
+*/
+@media (max-width: $reflow-zoom-level--400) {
+  .mds-c-navigation {
+    &__footer {
+      padding: 0.8rem;
     }
   }
 }

package/dist/src/3_components/scaffold-card/scaffold-cards.css

@@ -10,8 +10,6 @@
   }
 
   &__cards {
-    overflow-x: auto;
-
     &.mds-is-droppable {
       background-color: var(--mds-t-background-color--accent-muted);
       box-shadow:

package/dist/src/3_components/section/section.css

@@ -132,7 +132,8 @@
   - xxxl → xxl
   - xxl → xl
   - xl → lg
-  - lg → med (keeping original)
+  - lg → med
+  - med → sm
 */
 @media (max-width: $reflow-zoom-level--150) {
   .mds-c-section {
@@ -148,6 +149,14 @@
       padding: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-lg {
+      padding: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-med {
+      padding: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-vertical-xxxl {
       padding-bottom: var(--mds-d-spacing--xxl);
       padding-top: var(--mds-d-spacing--xxl);
@@ -163,6 +172,16 @@
       padding-top: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-vertical-lg {
+      padding-bottom: var(--mds-d-spacing--med);
+      padding-top: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-vertical-med {
+      padding-bottom: var(--mds-d-spacing--sm);
+      padding-top: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-horizontal-xxxl {
       padding-left: var(--mds-d-spacing--xxl);
       padding-right: var(--mds-d-spacing--xxl);
@@ -178,6 +197,16 @@
       padding-right: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-horizontal-lg {
+      padding-left: var(--mds-d-spacing--med);
+      padding-right: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-horizontal-med {
+      padding-left: var(--mds-d-spacing--sm);
+      padding-right: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-bottom-xxxl {
       padding-bottom: var(--mds-d-spacing--xxl);
     }
@@ -190,6 +219,14 @@
       padding-bottom: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-bottom-lg {
+      padding-bottom: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-bottom-med {
+      padding-bottom: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-left-xxxl {
       padding-left: var(--mds-d-spacing--xxl);
     }
@@ -202,6 +239,14 @@
       padding-left: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-left-lg {
+      padding-left: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-left-med {
+      padding-left: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-top-xxxl {
       padding-top: var(--mds-d-spacing--xxl);
     }
@@ -214,6 +259,14 @@
       padding-top: var(--mds-d-spacing--lg);
     }
 
+    &&--padding-top-lg {
+      padding-top: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-top-med {
+      padding-top: var(--mds-d-spacing--sm);
+    }
+
     &&--padding-right-xxxl {
       padding-right: var(--mds-d-spacing--xxl);
     }
@@ -225,6 +278,14 @@
     &&--padding-right-xl {
       padding-right: var(--mds-d-spacing--lg);
     }
+
+    &&--padding-right-lg {
+      padding-right: var(--mds-d-spacing--med);
+    }
+
+    &&--padding-right-med {
+      padding-right: var(--mds-d-spacing--sm);
+    }
   }
 }
 
@@ -237,7 +298,7 @@
   - xxl → lg
   - xl → med
   - lg → sm
-  - med → xs (keeping original)
+
 */
 @media (max-width: $reflow-zoom-level--250) {
   .mds-c-section {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inmotionnow/momentum-components",
-  "version": "102.26.0",
+  "version": "102.26.2",
   "description": "CSS Components for inMotionNow",
   "license": "UNLICENSED",
   "files": [
@@ -26,5 +26,5 @@
     "flatpickr": "3.0.7",
     "focus-visible": "4.1.5"
   },
-  "gitHead": "6593c7c60621e80df6de3829a7f502ac3629db5e"
+  "gitHead": "9ac0bb2b937a047573c2938c3574117915ee51d6"
 }