@momentum-design/components 0.95.5 → 0.95.7

package/dist/components/checkbox/checkbox.styles.js

@@ -47,10 +47,16 @@ const styles = [
       background-color: var(--mdc-checkbox-disabled-checked-icon-color);
     }
 
+    :host mdc-staticcheckbox {
+      position: relative;
+    }
+
     .input {
       margin: 0;
       padding: 0;
       position: absolute;
+      top: 0;
+      left: 0;
       opacity: 0.1%;
       overflow: visible;
       z-index: 1;

package/dist/components/option/option.styles.js

@@ -3,6 +3,8 @@ const styles = css `
   :host {
     --mdc-option-icon-width: 1rem;
 
+    flex-shrink: 0;
+
     display: flex;
     flex-direction: row;
     align-items: center;

package/dist/components/popover/popover.component.js

@@ -666,6 +666,11 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
             middleware.push(flip());
         }
         if (this.size) {
+            // expose a CSS variable for the available height
+            // so that it can be used in other components styles
+            const setInternalAvailableHeight = (availableHeight) => {
+                this.style.setProperty('--mdc-popover-internal-available-height', `${availableHeight}px`);
+            };
             const popoverContent = this.renderRoot.querySelector('[part="popover-content"]');
             middleware.push(size({
                 apply({ availableHeight }) {
@@ -675,6 +680,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                         maxHeight: `${availableHeight}px`,
                         overflowY: 'auto',
                     });
+                    setInternalAvailableHeight(availableHeight);
                 },
                 padding: 50,
             }));

package/dist/components/select/select.styles.js

@@ -37,6 +37,12 @@ const styles = css `
     width: 100%;
     position: relative;
   }
+  :host ::slotted(mdc-selectlistbox) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-height: var(--mdc-popover-internal-available-height);
+  }
   :host::part(base-container) {
     border-radius: 0.5rem;
     padding: 5.5px 6px 5.5px 12px;

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

@@ -42,10 +42,6 @@ import ThemeProviderContext from './themeprovider.context';
  * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
- * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
- * scrollbar thumb on hover. Applicable only on webkit browsers.
- * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
- * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 declare class ThemeProvider extends Provider<ThemeProviderContext> {
     constructor();

package/dist/components/themeprovider/themeprovider.component.js

@@ -53,10 +53,6 @@ import styles from './themeprovider.styles';
  * default: `"ss02" on`
  * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.
  * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.
- * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the
- * scrollbar thumb on hover. Applicable only on webkit browsers.
- * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the
- * scrollbar thumb on press. Applicable only on webkit browsers.
  */
 class ThemeProvider extends Provider {
     constructor() {

package/dist/components/themeprovider/themeprovider.styles.js

@@ -10,10 +10,8 @@ const styles = css `
     --mdc-themeprovider-font-feature-settings: 'ss02' on;
 
     /* Custom scrollbar variables */
-    --mdc-themeprovider-scrollbar-track-color: var(--mds-color-theme-background-secondary-normal);
+    --mdc-themeprovider-scrollbar-track-color: transparent;
     --mdc-themeprovider-scrollbar-thumb-color: var(--mds-color-theme-scrollbar-button-normal);
-    --mdc-themeprovider-scrollbar-thumb-hover-color: var(--mds-color-theme-scrollbar-button-hover);
-    --mdc-themeprovider-scrollbar-thumb-active-color: var(--mds-color-theme-scrollbar-button-pressed);
 
     color: var(--mdc-themeprovider-color-default);
     font-family: var(--mdc-themeprovider-font-family);