@inmotionnow/momentum-components 100.21.1 → 100.21.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [100.21.2](https://github.com/inMotionNow/px-amicis/compare/@inmotionnow/momentum-components@100.21.1...@inmotionnow/momentum-components@100.21.2) (2022-02-23)
+
+**Note:** Version bump only for package @inmotionnow/momentum-components
+
+
+
+
+
 ## [100.21.1](https://github.com/inMotionNow/px-amicis/compare/@inmotionnow/momentum-components@100.21.0...@inmotionnow/momentum-components@100.21.1) (2022-02-23)
 
 

package/dist/src/1_settings/_mixins/_scrollbar.css

@@ -11,7 +11,8 @@
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--mds-d-color-ui--3);
-    border: var(--mds-d-spacing--xxs) solid var(--mds-t-background-color--primary);
+    border: var(--mds-d-spacing--xxs) solid
+      var(--mds-t-background-color--primary);
     border-radius: var(--mds-d-spacing--med);
   }
 }
@@ -25,7 +26,8 @@
 
   &::-webkit-scrollbar-thumb {
     background-color: var(--mds-d-color-ui--3);
-    border: var(--mds-d-spacing--xxs) solid var(--mds-t-background-color--secondary);
+    border: var(--mds-d-spacing--xxs) solid
+      var(--mds-t-background-color--secondary);
     border-radius: var(--mds-d-spacing--med);
   }
 }

package/dist/src/1_settings/_variables.css

@@ -29,14 +29,19 @@ $color-ui--5: #8f8f8f;
 $status-color-danger--default: $color-red--500;
 
 /* Background */
-$box-shadow-focus--spaced: 0 0 0 2px var(--mds-t-background-color--primary), 0 0 0 4px var(--mds-d-color-brand--primary),
+$box-shadow-focus--spaced: 0 0 0 2px var(--mds-t-background-color--primary),
+  0 0 0 4px var(--mds-d-color-brand--primary),
   0 4px 2px color($brand-color--primary a(50%));
 
 :root {
-  --mds-t-elevation--1: var(--mds-t-elevation-size--1) var(--mds-t-elevation-opacity--1);
-  --mds-t-elevation--2: var(--mds-t-elevation-size--2) var(--mds-t-elevation-opacity--2);
-  --mds-t-elevation--3: var(--mds-t-elevation-size--3) var(--mds-t-elevation-opacity--3);
-  --mds-t-elevation--4: var(--mds-t-elevation-size--4) var(--mds-t-elevation-opacity--4);
+  --mds-t-elevation--1: var(--mds-t-elevation-size--1)
+    var(--mds-t-elevation-opacity--1);
+  --mds-t-elevation--2: var(--mds-t-elevation-size--2)
+    var(--mds-t-elevation-opacity--2);
+  --mds-t-elevation--3: var(--mds-t-elevation-size--3)
+    var(--mds-t-elevation-opacity--3);
+  --mds-t-elevation--4: var(--mds-t-elevation-size--4)
+    var(--mds-t-elevation-opacity--4);
   --mds-t-elevation-opacity--1: rgba(0, 0, 0, 0.05);
   --mds-t-elevation-opacity--2: rgba(0, 0, 0, 0.075);
   --mds-t-elevation-opacity--3: rgba(0, 0, 0, 0.1);

package/dist/src/2_base/_themes/_adobe-dark.css

@@ -10,7 +10,9 @@
   --mds-t-background-color--inverse: #fff;
   --mds-t-background-color--inverse-secondary: #8c8c8c;
   --mds-t-background-color--accent: var(--mds-d-background-color--accent);
-  --mds-t-background-color--accent-muted: var(--mds-d-background-color--accent-light);
+  --mds-t-background-color--accent-muted: var(
+    --mds-d-background-color--accent-light
+  );
   --mds-t-background-color--overlay: #353535;
 
   /* Border */

package/dist/src/2_base/_themes/_inmo-dark.css

@@ -4,15 +4,31 @@
 
 @define-mixin mds-t-inmo--dark {
   /* Background */
-  --mds-t-background-color--primary: var(--mds-d-background-color--inverse-primary);
-  --mds-t-background-color--secondary: var(--mds-d-background-color--inverse-secondary);
-  --mds-t-background-color--tertiary: var(--mds-d-background-color--inverse-tertiary);
-  --mds-t-background-color--inverse-primary: var(--mds-d-background-color--primary);
-  --mds-t-background-color--inverse-secondary: var(--mds-d-background-color--primary);
-  --mds-t-background-color--inverse-tertiary: var(--mds-d-background-color--primary);
+  --mds-t-background-color--primary: var(
+    --mds-d-background-color--inverse-primary
+  );
+  --mds-t-background-color--secondary: var(
+    --mds-d-background-color--inverse-secondary
+  );
+  --mds-t-background-color--tertiary: var(
+    --mds-d-background-color--inverse-tertiary
+  );
+  --mds-t-background-color--inverse-primary: var(
+    --mds-d-background-color--primary
+  );
+  --mds-t-background-color--inverse-secondary: var(
+    --mds-d-background-color--primary
+  );
+  --mds-t-background-color--inverse-tertiary: var(
+    --mds-d-background-color--primary
+  );
   --mds-t-background-color--danger-muted: var(--mds-t-color--red-intense);
-  --mds-t-background-color--overlay: var(--mds-d-background-color--inverse-overlay);
-  --mds-t-background-color--inverse-overlay: var(--mds-d-background-color--overlay);
+  --mds-t-background-color--overlay: var(
+    --mds-d-background-color--inverse-overlay
+  );
+  --mds-t-background-color--inverse-overlay: var(
+    --mds-d-background-color--overlay
+  );
 
   /* Border */
   --mds-t-border-color--primary: var(--mds-d-border-color--inverse-primary);

package/dist/src/2_base/_themes/_inmo-light.css

@@ -8,21 +8,35 @@
   --mds-t-background-color--secondary: var(--mds-d-background-color--secondary);
   --mds-t-background-color--tertiary: var(--mds-d-background-color--tertiary);
   --mds-t-background-color--neutral: var(--mds-d-background-color--neutral);
-  --mds-t-background-color--inverse-primary: var(--mds-d-background-color--inverse-primary);
-  --mds-t-background-color--inverse-secondary: var(--mds-d-background-color--inverse-secondary);
-  --mds-t-background-color--inverse-tertiary: var(--mds-d-background-color--inverse-tertiary);
+  --mds-t-background-color--inverse-primary: var(
+    --mds-d-background-color--inverse-primary
+  );
+  --mds-t-background-color--inverse-secondary: var(
+    --mds-d-background-color--inverse-secondary
+  );
+  --mds-t-background-color--inverse-tertiary: var(
+    --mds-d-background-color--inverse-tertiary
+  );
   --mds-t-background-color--accent: var(--mds-d-background-color--accent);
-  --mds-t-background-color--accent-muted: var(--mds-d-background-color--accent-muted);
+  --mds-t-background-color--accent-muted: var(
+    --mds-d-background-color--accent-muted
+  );
   --mds-t-background-color--danger: var(--mds-t-color--red);
   --mds-t-background-color--danger-muted: var(--mds-t-color--red-muted);
   --mds-t-background-color--overlay: var(--mds-d-background-color--overlay);
-  --mds-t-background-color--inverse-overlay: var(--mds-d-background-color--inverse-overlay);
+  --mds-t-background-color--inverse-overlay: var(
+    --mds-d-background-color--inverse-overlay
+  );
 
   /* Border */
   --mds-t-border-color--primary: var(--mds-d-border-color--primary);
   --mds-t-border-color--secondary: var(--mds-d-border-color--secondary);
-  --mds-t-border-color--inverse-primary: var(--mds-d-border-color--inverse-primary);
-  --mds-t-border-color--inverse-secondary: var(--mds-d-border-color--inverse-secondary);
+  --mds-t-border-color--inverse-primary: var(
+    --mds-d-border-color--inverse-primary
+  );
+  --mds-t-border-color--inverse-secondary: var(
+    --mds-d-border-color--inverse-secondary
+  );
   --mds-t-border-color--accent: var(--mds-d-border-color--accent);
   --mds-t-border-color--danger: var(--mds-t-color--red);
 
@@ -67,10 +81,14 @@
   --mds-t-color--yellow-muted: var(--mds-d-color-yellow--50);
 
   /* Elevation */
-  --mds-t-elevation--1: var(--mds-t-elevation-size--1) var(--mds-t-elevation-opacity--1);
-  --mds-t-elevation--2: var(--mds-t-elevation-size--2) var(--mds-t-elevation-opacity--2);
-  --mds-t-elevation--3: var(--mds-t-elevation-size--3) var(--mds-t-elevation-opacity--3);
-  --mds-t-elevation--4: var(--mds-t-elevation-size--4) var(--mds-t-elevation-opacity--4);
+  --mds-t-elevation--1: var(--mds-t-elevation-size--1)
+    var(--mds-t-elevation-opacity--1);
+  --mds-t-elevation--2: var(--mds-t-elevation-size--2)
+    var(--mds-t-elevation-opacity--2);
+  --mds-t-elevation--3: var(--mds-t-elevation-size--3)
+    var(--mds-t-elevation-opacity--3);
+  --mds-t-elevation--4: var(--mds-t-elevation-size--4)
+    var(--mds-t-elevation-opacity--4);
 
   /* Elevation Opacity */
   --mds-t-elevation-opacity--1: rgba(0, 0, 0, 0.05);
@@ -89,8 +107,12 @@
   --mds-t-text-color--secondary: var(--mds-d-font-color--secondary);
   --mds-t-text-color--tertiary: var(--mds-d-font-color--tertiary);
   --mds-t-text-color--inverse-primary: var(--mds-d-font-color--inverse-primary);
-  --mds-t-text-color--inverse-secondary: var(--mds-d-font-color--inverse-secondary);
-  --mds-t-text-color--inverse-tertiary: var(--mds-d-font-color--inverse-tertiary);
+  --mds-t-text-color--inverse-secondary: var(
+    --mds-d-font-color--inverse-secondary
+  );
+  --mds-t-text-color--inverse-tertiary: var(
+    --mds-d-font-color--inverse-tertiary
+  );
   --mds-t-text-color--accent: var(--mds-d-font-color--accent);
   --mds-t-text-color--danger: var(--mds-d-font-color--danger);
 

package/dist/src/2_base/_themes/index.css

@@ -12,11 +12,19 @@
   @mixin mds-t-inmo--light;
 
   .mds-c-navigation {
-    --mds-t-background-color--primary: var(--mds-d-background-color--inverse-primary);
-    --mds-t-background-color--secondary: var(--mds-d-background-color--inverse-secondary);
-    --mds-t-background-color--tertiary: var(--mds-d-background-color--inverse-tertiary);
+    --mds-t-background-color--primary: var(
+      --mds-d-background-color--inverse-primary
+    );
+    --mds-t-background-color--secondary: var(
+      --mds-d-background-color--inverse-secondary
+    );
+    --mds-t-background-color--tertiary: var(
+      --mds-d-background-color--inverse-tertiary
+    );
     --mds-t-border-color--primary: var(--mds-d-border-color--inverse-primary);
-    --mds-t-border-color--secondary: var(--mds-d-border-color--inverse-secondary);
+    --mds-t-border-color--secondary: var(
+      --mds-d-border-color--inverse-secondary
+    );
     --mds-t-border-color--tertiary: var(--mds-d-border-color--inverse-tertiary);
     --mds-t-text-color--primary: var(--mds-d-font-color--inverse-primary);
     --mds-t-text-color--secondary: var(--mds-d-font-color--inverse-secondary);

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

@@ -35,7 +35,9 @@
   }
 
   &--theme-dark {
-    --mds-v-alert__background-color: var(--mds-t-background-color--inverse-primary);
+    --mds-v-alert__background-color: var(
+      --mds-t-background-color--inverse-primary
+    );
     --mds-v-alert__color: var(--mds-t-text-color--inverse-primary);
   }
 

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

@@ -26,12 +26,16 @@
   background-position: center;
   background-size: cover;
   border-radius: 50%;
-  box-shadow: 0 0 0 var(--mds-v-avatar__outline-width) var(--mds-v-avatar__outline-color);
+  box-shadow: 0 0 0 var(--mds-v-avatar__outline-width)
+    var(--mds-v-avatar__outline-color);
   box-sizing: content-box;
   color: #fff;
   display: inline-block;
   font-size: var(--mds-v-avatar__font-size, var(--mds-d-font-size--sm));
-  font-weight: var(--mds-v-avatar__font-weight, var(--mds-d-font-weight--semibold));
+  font-weight: var(
+    --mds-v-avatar__font-weight,
+    var(--mds-d-font-weight--semibold)
+  );
   height: var(--mds-v-avatar__size);
   line-height: var(--mds-v-avatar__size);
   position: relative;
@@ -99,7 +103,8 @@
   &--add {
     --mds-v-avatar__color: var(--mds-t-background-color--primary);
 
-    border: var(--mds-v-avatar__outline-width) dashed var(--mds-t-border-color--secondary);
+    border: var(--mds-v-avatar__outline-width) dashed
+      var(--mds-t-border-color--secondary);
     box-sizing: border-box;
     color: var(--mds-t-text-color--tertiary);
     overflow: hidden;
@@ -127,7 +132,8 @@
   &[style^='background-image'] {
     background-color: var(--mds-t-background-color--primary);
     box-shadow: 0 0 0 1px var(--mds-t-border-color--secondary) inset,
-      0 0 0 var(--mds-v-avatar__outline-width) var(--mds-v-avatar__outline-color);
+      0 0 0 var(--mds-v-avatar__outline-width)
+        var(--mds-v-avatar__outline-color);
     color: transparent;
 
     &::before {

package/dist/src/3_components/avatar/modifiers/avatar--status.css

@@ -20,12 +20,18 @@
 
 .mds-c-avatar--status-disabled {
   --mds-v-avatar__status-color: var(--mds-t-color--red);
-  --mds-v-avatar__status-icon: svg-load('../../momentum-icons/dist/svg/minus.svg', fill: #fff);
+  --mds-v-avatar__status-icon: svg-load(
+    '../../momentum-icons/dist/svg/minus.svg',
+    fill: #fff
+  );
 }
 
 .mds-c-avatar--status-owner {
   --mds-v-avatar__status-color: var(--mds-t-background-color--inverse-primary);
-  --mds-v-avatar__status-icon: svg-load('../../momentum-icons/dist/svg/star.svg', fill: $color-yellow--500);
+  --mds-v-avatar__status-icon: svg-load(
+    '../../momentum-icons/dist/svg/star.svg',
+    fill: $color-yellow--500
+  );
 }
 
 .mds-c-avatar--status-info,
@@ -40,7 +46,8 @@
     background-color: var(--mds-v-avatar__status-color);
     background-image: var(--mds-v-avatar__status-icon);
     background-size: cover;
-    border: var(--mds-v-avatar__outline-width) solid var(--mds-v-avatar__outline-color);
+    border: var(--mds-v-avatar__outline-width) solid
+      var(--mds-v-avatar__outline-color);
     border-radius: 50%;
     bottom: 0;
     content: '';
@@ -48,7 +55,10 @@
     height: 0.7em;
     position: absolute;
     right: 0;
-    transform: translate(var(--mds-v-avatar__outline-width), var(--mds-v-avatar__outline-width));
+    transform: translate(
+      var(--mds-v-avatar__outline-width),
+      var(--mds-v-avatar__outline-width)
+    );
     width: 0.7em;
     z-index: 1;
   }

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

@@ -20,7 +20,8 @@
   letter-spacing: var(--mds-d-letter-spacing--narrow);
   max-width: 100%;
   min-width: var(--mds-v-badge__height);
-  padding: var(--mds-v-badge__padding--vertical) var(--mds-v-badge__padding--horizontal);
+  padding: var(--mds-v-badge__padding--vertical)
+    var(--mds-v-badge__padding--horizontal);
   position: relative;
 
   &--theme-primary {

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

@@ -3,8 +3,8 @@
  * ========================================================================== */
 
 .mds-c-button {
-  --mds-v-button__box-shadow: 0 0 0 var(--mds-v-button__border-size) var(--mds-v-button__border-color, transparent)
-    inset;
+  --mds-v-button__box-shadow: 0 0 0 var(--mds-v-button__border-size)
+    var(--mds-v-button__border-color, transparent) inset;
   --mds-v-button__border-color: var(--mds-t-border-color--primary);
   --mds-v-button__border-color--hover: var(--mds-t-border-color--primary);
   --mds-v-button__border-color--active: var(--mds-t-border-color--primary);
@@ -23,7 +23,8 @@
   flex-shrink: 0;
   font-family: var(--mds-d-font-family--primary);
   max-width: 100%;
-  padding: var(--mds-v-button__padding--vertical) var(--mds-v-button__padding--horizontal);
+  padding: var(--mds-v-button__padding--vertical)
+    var(--mds-v-button__padding--horizontal);
   position: relative;
   text-decoration: none;
   user-select: none;
@@ -141,8 +142,12 @@
 
   /* Flat Theme */
   &--theme-flat {
-    --mds-v-button__background-color--hover: var(--mds-t-background-color--secondary);
-    --mds-v-button__background-color--active: var(--mds-t-background-color--tertiary);
+    --mds-v-button__background-color--hover: var(
+      --mds-t-background-color--secondary
+    );
+    --mds-v-button__background-color--active: var(
+      --mds-t-background-color--tertiary
+    );
     --mds-v-button__border-size: 0;
 
     &:hover,
@@ -166,11 +171,16 @@
 
   /* Border Theme */
   &--theme-border {
-    --mds-v-button__background-color--hover: var(--mds-t-background-color--secondary);
-    --mds-v-button__background-color--active: var(--mds-t-background-color--tertiary);
+    --mds-v-button__background-color--hover: var(
+      --mds-t-background-color--secondary
+    );
+    --mds-v-button__background-color--active: var(
+      --mds-t-background-color--tertiary
+    );
 
     border: 1px solid var(--mds-t-border-color--primary);
-    padding: calc(var(--mds-v-button__padding--vertical) - 2px) calc(var(--mds-v-button__padding--horizontal) - 2px);
+    padding: calc(var(--mds-v-button__padding--vertical) - 2px)
+      calc(var(--mds-v-button__padding--horizontal) - 2px);
 
     &.mds-c-button--split-right {
       border-left: none;
@@ -179,7 +189,8 @@
 
   /* specific to med border buttons so the height aligns with other form elements */
   &--theme-border--med {
-    padding: calc(var(--mds-v-button__padding--vertical) - 1px) var(--mds-v-button__padding--horizontal);
+    padding: calc(var(--mds-v-button__padding--vertical) - 1px)
+      var(--mds-v-button__padding--horizontal);
   }
 
   &:focus-visible {
@@ -204,18 +215,31 @@
   &:active {
     --mds-v-button__border-color: var(--mds-v-button__border-color--active);
 
-    background-color: var(--mds-v-button__background-color--active, transparent);
+    background-color: var(
+      --mds-v-button__background-color--active,
+      transparent
+    );
     color: var(--mds-v-button__color--active, var(--mds-t-text-color--primary));
   }
 
   &.mds-is-active {
-    --mds-v-button__background-color: var(--mds-t-background-color--inverse-primary) !important;
-    --mds-v-button__background-color--hover: var(--mds-t-background-color--inverse-primary) !important;
-    --mds-v-button__background-color--active: var(--mds-t-background-color--inverse-primary) !important;
+    --mds-v-button__background-color: var(
+      --mds-t-background-color--inverse-primary
+    ) !important;
+    --mds-v-button__background-color--hover: var(
+      --mds-t-background-color--inverse-primary
+    ) !important;
+    --mds-v-button__background-color--active: var(
+      --mds-t-background-color--inverse-primary
+    ) !important;
     --mds-v-button__border-size: 0 !important;
     --mds-v-button__color: var(--mds-t-text-color--inverse-primary) !important;
-    --mds-v-button__color--hover: var(--mds-t-text-color--inverse-primary) !important;
-    --mds-v-button__color--active: var(--mds-t-text-color--inverse-primary) !important;
+    --mds-v-button__color--hover: var(
+      --mds-t-text-color--inverse-primary
+    ) !important;
+    --mds-v-button__color--active: var(
+      --mds-t-text-color--inverse-primary
+    ) !important;
 
     text-decoration: none !important;
     &.mds-c-button--theme-border {
@@ -270,11 +294,13 @@
   }
 
   &&--split-right {
-    border-radius: 0 var(--mds-d-border-radius--default) var(--mds-d-border-radius--default) 0;
+    border-radius: 0 var(--mds-d-border-radius--default)
+      var(--mds-d-border-radius--default) 0;
   }
 
   &&--split-left {
-    border-radius: var(--mds-d-border-radius--default) 0 0 var(--mds-d-border-radius--default);
+    border-radius: var(--mds-d-border-radius--default) 0 0
+      var(--mds-d-border-radius--default);
   }
 }
 

package/dist/src/3_components/collapsible-content/collapsible-content.css

@@ -9,7 +9,8 @@
     background-color: var(--mds-t-background-color--accent-muted);
     box-shadow: calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
         var(--mds-t-background-color--accent-muted),
-      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs) var(--mds-t-background-color--accent-muted);
+      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
+        var(--mds-t-background-color--accent-muted);
     cursor: grabbing;
   }
 
@@ -25,10 +26,16 @@
 }
 
 .mds-c-collapsible-content {
-  --mds-v-collapsible-content__border-color: var(--mds-t-border-color--secondary);
-  --mds-v-collapsible-content__color--secondary: var(--mds-t-text-color--secondary);
+  --mds-v-collapsible-content__border-color: var(
+    --mds-t-border-color--secondary
+  );
+  --mds-v-collapsible-content__color--secondary: var(
+    --mds-t-text-color--secondary
+  );
   --mds-v-collapsible-content__color--accent: var(--mds-t-text-color--accent);
-  --mds-v-collapsible-content__tab-outline-color: var(--mds-t-text-color--accent);
+  --mds-v-collapsible-content__tab-outline-color: var(
+    --mds-t-text-color--accent
+  );
   --mds-v-collapsible-content__tab-spacing: var(--mds-d-spacing--xs);
 
   position: relative;
@@ -55,7 +62,10 @@
       width: var(--mds-d-spacing--xl);
 
       .mds-c-collapsible-content-list:hover & {
-        background-image: svg-load('../../momentum-icons/dist/svg/dots-drag.svg', fill: $color-ui--5);
+        background-image: svg-load(
+          '../../momentum-icons/dist/svg/dots-drag.svg',
+          fill: $color-ui--5
+        );
         background-position: center;
         background-size: var(--mds-d-font-size--lg);
         display: block;
@@ -74,7 +84,8 @@
   padding: var(--mds-d-spacing--lg) var(--mds-d-spacing--sm);
 
   .mds-c-collapsible-content.mds-is-dragging & {
-    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent), var(--mds-d-elevation--4);
+    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent),
+      var(--mds-d-elevation--4);
   }
 }
 
@@ -132,7 +143,8 @@
 
 .mds-c-collapsible-content__panel {
   line-height: 1;
-  transition: height 300ms cubic-bezier(0.65, 0.05, 0.36, 1), opacity 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53),
+  transition: height 300ms cubic-bezier(0.65, 0.05, 0.36, 1),
+    opacity 300ms cubic-bezier(0.55, 0.09, 0.68, 0.53),
     padding-top 100ms ease-in-out;
 
   &[aria-hidden='true'][aria-expanded='false'] {

package/dist/src/3_components/completion-box/completion-box.css

@@ -10,7 +10,9 @@
 
   &--theme-primary {
     --mds-v-completion-box__status-color: var(--mds-t-color--neutral-intense);
-    --mds-v-completion-box__icon-color: var(--mds-t-text-color--inverse-primary);
+    --mds-v-completion-box__icon-color: var(
+      --mds-t-text-color--inverse-primary
+    );
   }
 
   &--theme-secondary {

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

@@ -63,7 +63,8 @@
   }
 
   blockquote {
-    border-left: var(--mds-d-spacing--xs) solid var(--mds-t-border-color--secondary);
+    border-left: var(--mds-d-spacing--xs) solid
+      var(--mds-t-border-color--secondary);
     margin: 0;
     padding-left: var(--mds-d-spacing--lg);
   }

package/dist/src/3_components/control/mixins.css

@@ -13,11 +13,14 @@
   --mds-v-control__icon-size: 1.25em;
   --mds-v-control__margin: calc(var(--mds-v-control__padding--vertical) * -1)
     calc(var(--mds-v-control__padding--horizontal) * -1);
-  --mds-v-control__max-width: calc(100% + (var(--mds-v-control__padding--horizontal) * 2));
+  --mds-v-control__max-width: calc(
+    100% + (var(--mds-v-control__padding--horizontal) * 2)
+  );
   --mds-v-control__padding--horizontal: var(--mds-d-spacing--xs);
   --mds-v-control__padding--vertical: var(--mds-d-spacing--xs);
   --mds-v-control__placeholder-color: var(--mds-t-text-color--tertiary);
-  --mds-v-control__shadow: 0 2px 8px var(--mds-v-control__box-shadow-color, transparent);
+  --mds-v-control__shadow: 0 2px 8px
+    var(--mds-v-control__box-shadow-color, transparent);
 
   background-color: var(--mds-t-background-color);
   border-radius: var(--mds-d-border-radius--default);
@@ -28,7 +31,8 @@
   max-width: var(--mds-v-control__max-width);
   outline: none;
   overflow: hidden;
-  padding: var(--mds-v-control__padding--vertical) var(--mds-v-control__padding--horizontal);
+  padding: var(--mds-v-control__padding--vertical)
+    var(--mds-v-control__padding--horizontal);
   resize: none;
   text-align: left;
   transition-duration: 0.15s;
@@ -119,7 +123,8 @@
   --mds-v-control__padding--horizontal: var(--mds-d-spacing--med);
   --mds-v-control__padding--vertical: var(--mds-d-spacing--sm);
 
-  border: var(--mds-v-control__border-width) solid var(--mds-v-control__border-color);
+  border: var(--mds-v-control__border-width) solid
+    var(--mds-v-control__border-color);
   box-shadow: var(--mds-v-control__border), var(--mds-v-control__shadow);
   margin: 0;
 

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

@@ -12,17 +12,23 @@
 }
 
 .mds-c-editable {
-  --mds-v-editable__box-shadow--border: 0 0 0 1px var(--mds-v-editable__border-color, transparent) inset;
+  --mds-v-editable__box-shadow--border: 0 0 0 1px
+    var(--mds-v-editable__border-color, transparent) inset;
   --mds-v-editable__box-shadow--shadow: var(--mds-d-elevation--3);
   --mds-v-editable__border-color: transparent;
   --mds-v-editable__icon-gap: 0.25em;
   --mds-v-editable__icon-size: 1.25em;
-  --mds-v-editable__max-width: calc(100% + (var(--mds-v-editable__padding-horizontal) * 2));
+  --mds-v-editable__max-width: calc(
+    100% + (var(--mds-v-editable__padding-horizontal) * 2)
+  );
   --mds-v-editable__padding-horizontal: var(--mds-d-spacing--xs);
   --mds-v-editable__padding-vertical: var(--mds-d-spacing--xs);
 
   background-color: var(--mds-v-editable__background-color);
-  border-radius: var(--mds-v-editable__border-radius, var(--mds-d-border-radius--default));
+  border-radius: var(
+    --mds-v-editable__border-radius,
+    var(--mds-d-border-radius--default)
+  );
   color: inherit;
   cursor: var(--mds-v-editable__cursor, text);
   display: inherit;
@@ -31,7 +37,8 @@
   font-style: inherit;
   font-weight: inherit;
   line-height: inherit;
-  margin: calc(var(--mds-v-editable__padding-vertical) * -1) calc(var(--mds-v-editable__padding-horizontal) * -1);
+  margin: calc(var(--mds-v-editable__padding-vertical) * -1)
+    calc(var(--mds-v-editable__padding-horizontal) * -1);
   max-width: none;
   outline: none;
   overflow: hidden;
@@ -65,10 +72,13 @@
     box-shadow: var(--mds-v-editable__box-shadow--border);
 
     &:focus-within {
-      --mds-v-editable__background-color: var(--mds-t-background-color--primary);
+      --mds-v-editable__background-color: var(
+        --mds-t-background-color--primary
+      );
       --mds-v-editable__border-color: var(--mds-t-border-color--accent);
 
-      box-shadow: var(--mds-v-editable__box-shadow--border), var(--mds-v-editable__box-shadow--shadow);
+      box-shadow: var(--mds-v-editable__box-shadow--border),
+        var(--mds-v-editable__box-shadow--shadow);
     }
   }
 
@@ -89,7 +99,8 @@
   font-style: inherit;
   font-weight: inherit;
   line-height: inherit;
-  padding: var(--mds-v-editable__padding-vertical) var(--mds-v-editable__padding-horizontal);
+  padding: var(--mds-v-editable__padding-vertical)
+    var(--mds-v-editable__padding-horizontal);
   resize: none;
   width: 100%;
 

package/dist/src/3_components/expansion-panel/expansion-panel.css

@@ -69,7 +69,8 @@
   }
 
   &.mds-is-dragging {
-    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent), var(--mds-d-elevation--4);
+    box-shadow: 0 0 0 1px var(--mds-t-border-color--accent),
+      var(--mds-d-elevation--4);
   }
 
   &.mds-is-draggable,
@@ -85,7 +86,10 @@
       width: var(--mds-d-spacing--xl);
 
       .mds-c-expansion-panel-list:hover & {
-        background-image: svg-load('../../momentum-icons/dist/svg/dots-drag.svg', fill: $color-ui--5);
+        background-image: svg-load(
+          '../../momentum-icons/dist/svg/dots-drag.svg',
+          fill: $color-ui--5
+        );
         background-position: center;
         background-size: var(--mds-d-font-size--lg);
         display: block;
@@ -125,7 +129,8 @@
     background-color: var(--mds-t-background-color--accent-muted);
     box-shadow: calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
         var(--mds-t-background-color--accent-muted),
-      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs) var(--mds-t-background-color--accent-muted);
+      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
+        var(--mds-t-background-color--accent-muted);
     cursor: grabbing;
   }
 }