@momentum-design/components 0.0.28 → 0.0.30

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

@@ -15,7 +15,7 @@ declare class Avatar extends Component {
     /**
      * Scale of the avatar
      */
-    scale?: number;
+    size?: number;
     /**
      * Updates the size by setting the width and height
      */

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

@@ -22,21 +22,21 @@ class Avatar extends models_1.Component {
         /**
          * Scale of the avatar
          */
-        this.scale = avatar_constants_1.DEFAULTS.SCALE;
+        this.size = avatar_constants_1.DEFAULTS.SIZE;
     }
     /**
      * Updates the size by setting the width and height
      */
     updateSize() {
-        if (this.scale) {
-            const value = `${this.scale}${avatar_constants_1.LENGTH_UNIT}`;
+        if (this.size) {
+            const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
             this.style.width = value;
             this.style.height = value;
         }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('scale')) {
+        if (changedProperties.has('size')) {
             this.updateSize();
         }
     }
@@ -75,5 +75,5 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Avatar.prototype, "scale", void 0);
+], Avatar.prototype, "size", void 0);
 exports.default = Avatar;

package/dist/components/avatar/avatar.constants.d.ts

@@ -2,6 +2,6 @@ declare const TAG_NAME: "mdc-avatar";
 declare const LENGTH_UNIT = "rem";
 declare const DEFAULTS: {
     TYPE: "photo";
-    SCALE: number;
+    SIZE: number;
 };
 export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

package/dist/components/avatar/avatar.constants.js

@@ -9,6 +9,6 @@ const LENGTH_UNIT = 'rem';
 exports.LENGTH_UNIT = LENGTH_UNIT;
 const DEFAULTS = {
     TYPE: 'photo',
-    SCALE: 1.5,
+    SIZE: 1.5,
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -21,7 +21,7 @@ declare class Badge extends Component {
      *
      * Default: `1`
      */
-    scale?: number;
+    size?: number;
     /**
      * Length unit attribute for scale
      *

package/dist/components/badge/badge.component.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const lit_1 = require("lit");
 const decorators_js_1 = require("lit/decorators.js");
+const if_defined_js_1 = require("lit/directives/if-defined.js");
 const style_map_js_1 = require("lit/directives/style-map.js");
 const models_1 = require("../../models");
 const badge_constants_1 = require("./badge.constants");
@@ -30,7 +31,7 @@ class Badge extends models_1.Component {
          *
          * Default: `1`
          */
-        this.scale = badge_constants_1.DEFAULTS.SCALE;
+        this.size = badge_constants_1.DEFAULTS.SIZE;
         /**
          * Length unit attribute for scale
          *
@@ -49,13 +50,13 @@ class Badge extends models_1.Component {
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
         }
     }
     iconTemplate() {
         return (0, lit_1.html) `<div class="mdc-badge-icon-container">
-      <mdc-icon name="${this.iconName}" scale="100" length-unit="%"></mdc-icon>
+      <mdc-icon name=${(0, if_defined_js_1.ifDefined)(this.iconName)} size="100" length-unit="%"></mdc-icon>
     </div>`;
     }
     textTemplate() {
@@ -66,7 +67,7 @@ class Badge extends models_1.Component {
     }
     render() {
         let content;
-        const size = `${this.scale}${this.lengthUnit}`;
+        const size = `${this.size}${this.lengthUnit}`;
         let sizeStyles = { width: size, height: size };
         switch (this.type) {
             case 'regular':
@@ -98,7 +99,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Badge.prototype, "scale", void 0);
+], Badge.prototype, "size", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
     tslib_1.__metadata("design:type", String)

package/dist/components/badge/badge.constants.d.ts

@@ -2,7 +2,7 @@ declare const TAG_NAME: "mdc-badge";
 declare const WARNING_ICON_NAME = "warning-badge-filled";
 declare const DEFAULTS: {
     TYPE: "regular";
-    SCALE: number;
+    SIZE: number;
     LENGTH_UNIT: string;
 };
-export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME };
+export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME, };

package/dist/components/badge/badge.constants.js

@@ -9,7 +9,7 @@ const WARNING_ICON_NAME = 'warning-badge-filled';
 exports.WARNING_ICON_NAME = WARNING_ICON_NAME;
 const DEFAULTS = {
     TYPE: 'regular',
-    SCALE: 1,
+    SIZE: 1,
     LENGTH_UNIT: 'rem',
 };
 exports.DEFAULTS = DEFAULTS;

package/dist/components/badge/badge.styles.js

@@ -7,6 +7,7 @@ const styles = [
     (0, lit_1.css) `
     :host {
       --mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
+      --mdc-badge-icon-color: var(--mds-color-theme-common-text-primary-normal);
     }
 
     .mdc-badge-container {
@@ -15,6 +16,7 @@ const styles = [
       align-items: center;
       border-radius: 9999px;
       background-color: var(--mdc-badge-icon-background-color);
+      color: var(--mdc-badge-icon-color);
     }
 
     .mdc-badge-icon-container {

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

@@ -10,10 +10,10 @@ import { Component } from '../../models';
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.
@@ -24,16 +24,17 @@ import { Component } from '../../models';
 declare class Icon extends Component {
     private iconData?;
     private lengthUnitFromContext?;
+    private sizeFromContext?;
     /**
      * Name of the icon (= filename)
      */
     name?: string;
     /**
-     * Scale of the icon (works in combination with length unit)
+     * Size of the icon (works in combination with length unit)
      */
-    scale?: number;
+    size?: number;
     /**
-     * Length unit attribute for overridding length-unit from `IconProvider`
+     * Length unit attribute for overriding length-unit from `IconProvider`
      */
     lengthUnit?: string;
     /**
@@ -44,7 +45,7 @@ declare class Icon extends Component {
      * Aria-label attribute to be set for accessibility
      */
     ariaLabel: string | null;
-    private iconProviderContext;
+    private readonly iconProviderContext;
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
@@ -56,6 +57,7 @@ declare class Icon extends Component {
     private updateSize;
     private setRoleOnIcon;
     private setAriaLabelOnIcon;
+    private get computedIconSize();
     updated(changedProperties: Map<string, any>): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist/components/icon/icon.component.js

@@ -20,10 +20,10 @@ const icon_constants_1 = require("./icon.constants");
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.
@@ -38,10 +38,6 @@ class Icon extends models_1.Component {
          * Name of the icon (= filename)
          */
         this.name = icon_constants_1.DEFAULTS.NAME;
-        /**
-         * Scale of the icon (works in combination with length unit)
-         */
-        this.scale = icon_constants_1.DEFAULTS.SCALE;
         /**
          * Role attribute to be set for accessibility
          */
@@ -73,8 +69,9 @@ class Icon extends models_1.Component {
      * Updates the size by setting the width and height
      */
     updateSize() {
-        if (this.scale && (this.lengthUnit || this.lengthUnitFromContext)) {
-            const value = `${this.scale}${this.lengthUnit || this.lengthUnitFromContext}`;
+        var _a;
+        if (this.computedIconSize && (this.lengthUnit || this.lengthUnitFromContext)) {
+            const value = `${this.computedIconSize}${(_a = this.lengthUnit) !== null && _a !== void 0 ? _a : this.lengthUnitFromContext}`;
             this.style.width = value;
             this.style.height = value;
         }
@@ -99,8 +96,12 @@ class Icon extends models_1.Component {
             (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
         }
     }
-    updated(changedProperties) {
+    get computedIconSize() {
         var _a, _b;
+        return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : icon_constants_1.DEFAULTS.SIZE;
+    }
+    updated(changedProperties) {
+        var _a, _b, _c, _d;
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
@@ -114,13 +115,17 @@ class Icon extends models_1.Component {
         if (changedProperties.has('ariaLabel')) {
             this.setAriaLabelOnIcon();
         }
-        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
         }
         if (this.lengthUnitFromContext !== ((_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.lengthUnit)) {
             this.lengthUnitFromContext = (_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.lengthUnit;
             this.updateSize();
         }
+        if (this.sizeFromContext !== ((_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.size)) {
+            this.sizeFromContext = (_d = this.iconProviderContext.value) === null || _d === void 0 ? void 0 : _d.size;
+            this.updateSize();
+        }
     }
     render() {
         return (0, lit_1.html) ` ${this.iconData} `;
@@ -135,6 +140,10 @@ tslib_1.__decorate([
     (0, decorators_js_1.state)(),
     tslib_1.__metadata("design:type", String)
 ], Icon.prototype, "lengthUnitFromContext", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Number)
+], Icon.prototype, "sizeFromContext", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, reflect: true }),
     tslib_1.__metadata("design:type", String)
@@ -142,7 +151,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Icon.prototype, "scale", void 0);
+], Icon.prototype, "size", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
     tslib_1.__metadata("design:type", String)

package/dist/components/icon/icon.constants.d.ts

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-icon";
 declare const DEFAULTS: {
     NAME: undefined;
-    SCALE: number;
+    SIZE: number;
 };
 export { TAG_NAME, DEFAULTS };

package/dist/components/icon/icon.constants.js

@@ -7,6 +7,6 @@ const TAG_NAME = tag_name_1.default.constructTagName('icon');
 exports.TAG_NAME = TAG_NAME;
 const DEFAULTS = {
     NAME: undefined,
-    SCALE: 1,
+    SIZE: 1,
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -27,7 +27,12 @@ declare class IconProvider extends Provider<IconProviderContext> {
     /**
      * Length unit used for sizing of icons, default: 'em'
      */
-    lengthUnit?: string;
+    lengthUnit: string;
+    /**
+     * The default size of the icon.
+     * If not set, it falls back to the size defined by the length unit.
+     */
+    size?: number;
     private updateValuesInContext;
     protected updateContext(): void;
 }

package/dist/components/iconprovider/iconprovider.component.js

@@ -31,6 +31,11 @@ class IconProvider extends models_1.Provider {
          * Length unit used for sizing of icons, default: 'em'
          */
         this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
+        /**
+         * The default size of the icon.
+         * If not set, it falls back to the size defined by the length unit.
+         */
+        this.size = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT_SIZE[iconprovider_constants_1.DEFAULTS.LENGTH_UNIT];
     }
     static get Context() {
         return iconprovider_context_1.default.context;
@@ -41,13 +46,17 @@ class IconProvider extends models_1.Provider {
             this.context.value.fileExtension = this.fileExtension;
         }
         this.context.value.url = this.url;
-        this.context.value.lengthUnit = this.lengthUnit;
+        if (this.lengthUnit && iconprovider_constants_1.ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
+            this.context.value.lengthUnit = this.lengthUnit;
+        }
+        this.context.value.size = this.size;
     }
     updateContext() {
         let shouldUpdateConsumers = false;
         if (this.context.value.fileExtension !== this.fileExtension
             || this.context.value.url !== this.url
-            || this.context.value.lengthUnit !== this.lengthUnit) {
+            || this.context.value.lengthUnit !== this.lengthUnit
+            || this.context.value.size !== this.size) {
             this.updateValuesInContext();
             shouldUpdateConsumers = true;
         }
@@ -68,4 +77,8 @@ tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
     tslib_1.__metadata("design:type", String)
 ], IconProvider.prototype, "lengthUnit", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Number, reflect: true }),
+    tslib_1.__metadata("design:type", Number)
+], IconProvider.prototype, "size", void 0);
 exports.default = IconProvider;

package/dist/components/iconprovider/iconprovider.constants.d.ts

@@ -1,7 +1,9 @@
 declare const TAG_NAME: "mdc-iconprovider";
 declare const ALLOWED_FILE_EXTENSIONS: string[];
+declare const ALLOWED_LENGTH_UNITS: string[];
 declare const DEFAULTS: {
     FILE_EXTENSION: string;
     LENGTH_UNIT: string;
+    LENGTH_UNIT_SIZE: Record<string, number>;
 };
-export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };

package/dist/components/iconprovider/iconprovider.constants.js

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
+exports.ALLOWED_LENGTH_UNITS = exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
 const tslib_1 = require("tslib");
 const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
 const TAG_NAME = tag_name_1.default.constructTagName('iconprovider');
 exports.TAG_NAME = TAG_NAME;
 const ALLOWED_FILE_EXTENSIONS = ['svg'];
 exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
+const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
+exports.ALLOWED_LENGTH_UNITS = ALLOWED_LENGTH_UNITS;
 const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     LENGTH_UNIT: 'em',
+    LENGTH_UNIT_SIZE: {
+        px: 16,
+        em: 1,
+        rem: 1,
+    },
 };
 exports.DEFAULTS = DEFAULTS;

package/dist/components/iconprovider/iconprovider.context.d.ts

@@ -2,7 +2,8 @@ declare class IconProviderContext {
     fileExtension?: string;
     url?: string;
     lengthUnit?: string;
-    static context: {
+    size?: number;
+    static readonly context: {
         __context__: IconProviderContext;
     };
 }

package/dist/components/text/text.utils.d.ts

@@ -13,7 +13,7 @@ declare const isHeading: (type: FontType) => boolean;
 declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
 /**
  * Get corresponding aria-level to type
- * @param type type to find corresponding level for
+ * @param type - type to find corresponding level for
  * @returns aria-level (has to be a number)
  */
 declare const getAriaLevel: (type?: FontType) => string | null;

package/dist/components/text/text.utils.js

@@ -35,7 +35,7 @@ const getRole = (type) => {
 exports.getRole = getRole;
 /**
  * Get corresponding aria-level to type
- * @param type type to find corresponding level for
+ * @param type - type to find corresponding level for
  * @returns aria-level (has to be a number)
  */
 const getAriaLevel = (type) => {

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

@@ -1,48 +1,60 @@
 import { Provider } from '../../models';
 import ThemeProviderContext from './themeprovider.context';
-import type { Theme } from './themeprovider.types';
 /**
- * ThemeProvider component, which sets the theme css variables
- * for the child dom nodes and allows to be consumed from sub components
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 declare class ThemeProvider extends Provider<ThemeProviderContext> {
     constructor();
+    /**
+     * Context object of the ThemeProvider, to be consumed by child components
+     */
     static get Context(): {
         __context__: ThemeProviderContext;
     };
     /**
-     * Available themes to switch to
-     *
-     * Has to be a space separated string, like className
-     * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
+     * To keep track of the current theme class
+     * @internal
      */
-    themes: string;
+    private currentThemeClass?;
     /**
-     * Current theme attribute
+     * Current theme class
      *
      * Has to be fully qualified, such that
-     * the theme name matches the className of the respective
+     * the theme class matches the class of the respective
      * theme stylesheet
+     *
+     * Default: 'mds-theme-stable-darkWebex'
      */
-    theme: Theme;
+    themeclass: string;
     protected updated(changedProperties: Map<string, any>): void;
     /**
      * Update all observing components of this
-     * provider to update the theme
+     * provider to update the themeclass
+     *
+     * Is called on every re-render, see Provider class
      */
     protected updateContext(): void;
     /**
-     * Function to update the active theme classname to update the theme tokens
+     * Function to update the active theme classnames to update the theme tokens
      * as CSS variables on the web component.
      */
-    private updateActiveThemeClass;
+    private setThemeInClassList;
     static styles: import("lit").CSSResult;
 }
 export default ThemeProvider;

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

@@ -7,80 +7,88 @@ const models_1 = require("../../models");
 const themeprovider_context_1 = tslib_1.__importDefault(require("./themeprovider.context"));
 const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.styles"));
 /**
- * ThemeProvider component, which sets the theme css variables
- * for the child dom nodes and allows to be consumed from sub components
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 class ThemeProvider extends models_1.Provider {
     constructor() {
-        // initialise the context by running the Provider constructor:
         super({
             context: themeprovider_context_1.default.context,
-            initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEME),
+            initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEMECLASS),
         });
         /**
-         * Available themes to switch to
-         *
-         * Has to be a space separated string, like className
-         * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
-         */
-        this.themes = themeprovider_constants_1.THEMES.join(' ');
-        /**
-         * Current theme attribute
+         * Current theme class
          *
          * Has to be fully qualified, such that
-         * the theme name matches the className of the respective
+         * the theme class matches the class of the respective
          * theme stylesheet
+         *
+         * Default: 'mds-theme-stable-darkWebex'
          */
-        this.theme = themeprovider_constants_1.DEFAULTS.THEME;
+        this.themeclass = themeprovider_constants_1.DEFAULTS.THEMECLASS;
     }
+    /**
+     * Context object of the ThemeProvider, to be consumed by child components
+     */
     static get Context() {
         return themeprovider_context_1.default.context;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('theme')) {
-            this.updateActiveThemeClass();
+        if (changedProperties.has('themeclass')) {
+            this.setThemeInClassList();
+            this.currentThemeClass = this.themeclass;
         }
     }
     /**
      * Update all observing components of this
-     * provider to update the theme
+     * provider to update the themeclass
+     *
+     * Is called on every re-render, see Provider class
      */
     updateContext() {
-        let shouldUpdateConsumers = false;
-        if (this.context.value.theme !== this.theme) {
-            this.context.value.theme = this.theme;
-            shouldUpdateConsumers = true;
-        }
-        if (shouldUpdateConsumers) {
+        if (this.context.value.themeclass !== this.themeclass) {
+            this.context.value.themeclass = this.themeclass;
             this.context.updateObservers();
         }
     }
     /**
-     * Function to update the active theme classname to update the theme tokens
+     * Function to update the active theme classnames to update the theme tokens
      * as CSS variables on the web component.
      */
-    updateActiveThemeClass() {
+    setThemeInClassList() {
         // remove all existing theme classes from the classList:
-        this.classList.remove(...this.themes.split(' '));
+        if (this.currentThemeClass) {
+            this.classList.remove(...this.currentThemeClass.split(' '));
+        }
         // add current theme class to classList:
-        this.classList.add(this.theme);
+        if (this.themeclass) {
+            this.classList.add(...this.themeclass.split(' '));
+        }
     }
 }
 ThemeProvider.styles = themeprovider_styles_1.default;
 tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
+    (0, decorators_js_1.state)(),
     tslib_1.__metadata("design:type", String)
-], ThemeProvider.prototype, "themes", void 0);
+], ThemeProvider.prototype, "currentThemeClass", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String }),
     tslib_1.__metadata("design:type", String)
-], ThemeProvider.prototype, "theme", void 0);
+], ThemeProvider.prototype, "themeclass", void 0);
 exports.default = ThemeProvider;

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

@@ -1,10 +1,5 @@
 declare const TAG_NAME: "mdc-themeprovider";
-declare const THEME_NAMES: {
-    DARK_WEBEX: "darkWebex";
-    LIGHT_WEBEX: "lightWebex";
-};
-declare const THEMES: ("mds-theme-stable-darkWebex" | "mds-theme-stable-lightWebex")[];
 declare const DEFAULTS: {
-    THEME: "mds-theme-stable-darkWebex";
+    THEMECLASS: "mds-theme-stable-darkWebex";
 };
-export { DEFAULTS, THEME_NAMES, THEMES, TAG_NAME };
+export { DEFAULTS, TAG_NAME };