@momentum-design/components 0.95.4 → 0.95.6

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/listitem/listitem.component.d.ts

@@ -1,5 +1,4 @@
-import type { CSSResult, PropertyValues, TemplateResult } from 'lit';
-import { nothing } from 'lit';
+import { CSSResult, PropertyValues, TemplateResult } from 'lit';
 import { Component } from '../../models';
 import type { PopoverPlacement } from '../popover/popover.types';
 import type { TextType } from '../text/text.types';
@@ -146,7 +145,7 @@ declare class ListItem extends ListItem_base {
      * @param content - The text content to be displayed within the slot.
      * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
      */
-    protected getText(slotName: string, type: TextType, content?: string): TemplateResult | typeof nothing;
+    protected getText(slotName: string, type: TextType, content?: string): TemplateResult;
     /**
      * Disable or enable all slotted elements in the leading and trailing slots.
      * This is useful when the list item is disabled, to prevent the user from interacting with the controls.

package/dist/components/listitem/listitem.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
 import { KEYS } from '../../utils/keys';
@@ -176,12 +176,11 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * @returns A TemplateResult containing a slot with an `mdc-text` element of type BODY_SMALL_REGULAR.
      */
     getText(slotName, type, content) {
-        if (!content) {
-            return nothing;
-        }
         return html `
       <slot name="${slotName}">
-        <mdc-text part="${slotName}" type="${type}" tagname="${VALID_TEXT_TAGS.SPAN}">${content}</mdc-text>
+        ${content
+            ? html `<mdc-text part="${slotName}" type="${type}" tagname="${VALID_TEXT_TAGS.SPAN}">${content}</mdc-text>`
+            : nothing}
       </slot>
     `;
     }

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);

package/dist/custom-elements.json

@@ -33284,14 +33284,6 @@
             {
               "description": "Option to override the color of the scrollbar thumb.",
               "name": "--mdc-themeprovider-scrollbar-thumb-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on hover. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-hover-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb on press. Applicable only on webkit browsers.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-active-color"
             }
           ],
           "slots": [
@@ -33351,7 +33343,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
           "customElement": true
         }
       ],

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

@@ -40,10 +40,6 @@ import Component from '../../components/themeprovider';
  * 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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/themeprovider/index.js

@@ -43,10 +43,6 @@ import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants
  * 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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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