@momentum-design/components 0.28.3 → 0.28.4

package/dist/components/avatar/avatar.component.js

@@ -74,7 +74,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
         }
         if (this.presence) {
             return html `
-        <mdc-presence class="presence" type="${this.presence}" size="${getPresenceSize(this.size)}"></mdc-presence>
+        <mdc-presence part="presence" type="${this.presence}" size="${getPresenceSize(this.size)}"></mdc-presence>
       `;
         }
         return nothing;
@@ -112,7 +112,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     photoTemplate() {
         return html `
       <img
-        class="photo"
+        part="photo"
         src="${ifDefined(this.src)}"
         aria-hidden="true"
         ?hidden="${!this.isPhotoLoaded}"
@@ -262,7 +262,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
         if (!this.isTyping) {
             return nothing;
         }
-        return html `<div class="loading__wrapper"><div class="loader"></div></div>`;
+        return html `<div part="loading-wrapper"><div part="loader"></div></div>`;
     }
     /**
      * @internal
@@ -297,7 +297,7 @@ class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     render() {
         const type = this.getTypeBasedOnInputs();
         return html `
-      <div class="content" aria-hidden="true">
+      <div part="content" aria-hidden="true">
         ${this.getPhotoPlaceHolderContent(type)}
         ${this.getTemplateBasedOnType(type)}
         ${this.getLoadingContent()}

package/dist/components/avatar/avatar.styles.js

@@ -8,54 +8,54 @@ const styles = [hostFitContentStyles, css `
     --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
     --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
   }
-  :host([size="124"]) .content {
+  :host([size="124"])::part(content) {
     width: 7.75rem;
     height: 7.75rem;
   }
-  :host([size="88"]) .content {
+  :host([size="88"])::part(content) {
     width: 5.5rem;
     height: 5.5rem;
   }
-  :host([size="72"]) .content {
+  :host([size="72"])::part(content) {
     width: 4.5rem;
     height: 4.5rem;
   }
-  :host([size="64"]) .content {
+  :host([size="64"])::part(content) {
     width: 4rem;
     height: 4rem;
   }
-  :host([size="48"]) .content {
+  :host([size="48"])::part(content) {
     width: 3rem;
     height: 3rem;
   }
-  :host([size="32"]) .content {
+  :host([size="32"])::part(content) {
     width: 2rem;
     height: 2rem;
   }
-  :host([size="24"]) .content {
+  :host([size="24"])::part(content) {
     width: 1.5rem;
     height: 1.5rem;
   }
-  :host([size="124"]) .content > .loading__wrapper > .loader {
+  :host([size="124"])::part(loader) {
     transform: scale(1.5);
   }
-  :host([size="88"]) .content > .loading__wrapper > .loader {
+  :host([size="88"])::part(loader) {
     transform: scale(1.2);
   }
-  :host([size="72"]) .content > .loading__wrapper > .loader,
-  :host([size="64"]) .content > .loading__wrapper > .loader {
+  :host([size="72"])::part(loader),
+  :host([size="64"])::part(loader) {
     transform: scale(0.8);
   }
-  :host([size="48"]) .content > .loading__wrapper > .loader {
+  :host([size="48"])::part(loader) {
     transform: scale(0.6);
   }
-  :host([size="32"]) .content > .loading__wrapper > .loader {
+  :host([size="32"])::part(loader) {
     transform: scale(0.4);
   }
-  :host([size="24"]) .content > .loading__wrapper > .loader {
+  :host([size="24"])::part(loader) {
     transform: scale(0.3);
   }
-  .content {
+  :host::part(content) {
     width: 2rem;
     height: 2rem;
     background-color: var(--mdc-avatar-default-background-color);
@@ -65,19 +65,19 @@ const styles = [hostFitContentStyles, css `
     display: grid;
     place-items: center;
   }
-  .photo {
+  :host::part(photo) {
     border-radius: 100vh;
     height: 100%;
     width: 100%;
     object-fit: cover;
     overflow: hidden;
   }
-  .presence {
+  :host::part(presence) {
     position: absolute;
     bottom: 0;
     right: 0;
   }
-  .loading__wrapper {
+  :host::part(loading-wrapper) {
     position: absolute;
     border-radius: 100vh;
     width: 100%;
@@ -86,7 +86,7 @@ const styles = [hostFitContentStyles, css `
     display: grid;
     place-items: center;
   }
-  .loader {
+  :host::part(loader) {
     position: absolute;
     width: 1rem;
     transform: scale(0.4);
@@ -119,7 +119,7 @@ const styles = [hostFitContentStyles, css `
 
   /* High Contrast Mode */
   @media (forced-colors: active) {
-    .content:not(.photo) {
+    :host::part(content) {
       outline: 0.125rem solid;
     }
   }

package/dist/components/virtualizedlist/virtualizedlist.component.js

@@ -104,7 +104,7 @@ class VirtualizedList extends Component {
             this.setlistdata({ virtualItems, measureElement, listStyle });
         }
         return html `<div
-          class="mdc-virtualizedlist-container"
+          part="container"
           style="height: ${getTotalSize()}px;"
         >
           <slot></slot>
@@ -113,7 +113,7 @@ class VirtualizedList extends Component {
     render() {
         return html `<div
       ${ref(this.scrollElementRef)}
-      class="mdc-virtualizedlist-scroll"
+      part="scroll"
       @scroll=${this.onscroll && this.onscroll}
     >
       ${this.virtualizerController ? this.getVirtualizedListWrapper(this.virtualizerController) : html ``}

package/dist/components/virtualizedlist/virtualizedlist.styles.js

@@ -1,17 +1,15 @@
 import { css } from 'lit';
 const styles = [
     css `
-    :host {
-      .mdc-virtualizedlist-scroll {  
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-      }
-      .mdc-virtualizedlist-container {
-        position: relative;
-        width: 100%;
-      }
-    }
+  :host::part(scroll) {
+      height: 100%;
+      width: 100%;
+      overflow-y: auto;
+  }
+  :host::part(container) {
+      position: relative;
+      width: 100%;
+  }
   `,
 ];
 export default styles;

package/dist/custom-elements.json

@@ -9518,124 +9518,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/themeprovider/themeprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
-          "name": "ThemeProvider",
-          "cssProperties": [
-            {
-              "description": "Option to override the default color, default: color-theme-text-primary-normal",
-              "name": "--mdc-themeprovider-color-default"
-            },
-            {
-              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
-              "name": "--mdc-themeprovider-font-family"
-            },
-            {
-              "description": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
-            },
-            {
-              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
-              "name": "--mdc-themeprovider-letter-spacing-adjustment"
-            },
-            {
-              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
-            },
-            {
-              "description": "Option to override the color of the scrollbar track.",
-              "name": "--mdc-themeprovider-scrollbar-track-color"
-            },
-            {
-              "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": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the ThemeProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "attribute": "themeclass"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "method",
-              "name": "setThemeInClassList",
-              "privacy": "private",
-              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "fieldName": "themeclass"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "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 * 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 */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/toggle/toggle.component.js",
@@ -10319,6 +10201,124 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/themeprovider/themeprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
+          "name": "ThemeProvider",
+          "cssProperties": [
+            {
+              "description": "Option to override the default color, default: color-theme-text-primary-normal",
+              "name": "--mdc-themeprovider-color-default"
+            },
+            {
+              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
+              "name": "--mdc-themeprovider-font-family"
+            },
+            {
+              "description": "Option to override the font weight, default: `400`",
+              "name": "--mdc-themeprovider-font-weight"
+            },
+            {
+              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
+              "name": "--mdc-themeprovider-letter-spacing-adjustment"
+            },
+            {
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
+              "name": "--mdc-themeprovider-font-feature-settings"
+            },
+            {
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
+            },
+            {
+              "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": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the ThemeProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "attribute": "themeclass"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "method",
+              "name": "setThemeInClassList",
+              "privacy": "private",
+              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "fieldName": "themeclass"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "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 * 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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/virtualizedlist/virtualizedlist.component.js",

package/dist/react/index.d.ts

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ThemeProvider } from './themeprovider';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -21,6 +21,6 @@ export { default as RadioGroup } from './radiogroup';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';
 export { default as Text } from './text';
-export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ThemeProvider } from './themeprovider';
 export { default as VirtualizedList } from './virtualizedlist';

package/package.json

@@ -38,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.28.3"
+  "version": "0.28.4"
 }