@momentum-design/components 0.133.0 → 0.133.2

package/dist/components/combobox/combobox.component.js

@@ -343,9 +343,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         this.lastCommittedValue = value;
         this.internals.setFormValue(this.value);
         this.updateHiddenOptions();
-        if (option) {
-            this.updateSelectedOption(option);
-        }
+        this.updateSelectedOption(option);
+        this.resetFocusedOption();
         this.setInputValidity();
         this.resetHelpText();
         if (emitEvents && !updateFromValue && option) {
@@ -388,21 +387,25 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         // keep value-attribute based default selection working for both
         // controlled and uncontrolled modes, while avoiding change/input events
         // by delegating to setSelectedValue with updateFromValue=true.
-        if (name === 'value' && newValue !== '' && this.navItems.length) {
-            const firstSelectedOption = this.getFirstSelectedOption();
-            const valueBasedOption = this.navItems.find(option => option.value === newValue);
+        // Skip the initial paint (oldValue === null with empty newValue) but allow
+        // programmatic clears (oldValue is a string when the attribute was already set).
+        if (name === 'value' && this.navItems.length && !(oldValue === null && newValue === '')) {
             let optionToSelect = null;
-            if (valueBasedOption) {
-                optionToSelect = valueBasedOption;
-            }
-            else if (this.placeholder) {
-                optionToSelect = null;
-            }
-            else if (firstSelectedOption) {
-                optionToSelect = firstSelectedOption;
-            }
-            else {
-                return;
+            if (newValue !== '') {
+                const firstSelectedOption = this.getFirstSelectedOption();
+                const valueBasedOption = this.navItems.find(option => option.value === newValue);
+                if (valueBasedOption) {
+                    optionToSelect = valueBasedOption;
+                }
+                else if (firstSelectedOption) {
+                    optionToSelect = firstSelectedOption;
+                }
+                else if (this.placeholder) {
+                    optionToSelect = null;
+                }
+                else {
+                    return;
+                }
             }
             this.updateComplete
                 .then(() => {
@@ -827,12 +830,9 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         if (this.disabled || this.readonly) {
             return false;
         }
-        if (optionsLength) {
+        if (optionsLength || this.noResultText) {
             return this.isOpen;
         }
-        if (this.noResultText) {
-            return true;
-        }
         return false;
     }
     /**

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

@@ -51,10 +51,9 @@ declare const Tab_base: import("../../utils/mixins/index.types").Constructor<imp
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */
@@ -94,20 +93,7 @@ declare class Tab extends Tab_base {
      * @default undefined
      */
     tabId?: string;
-    /**
-     * @internal
-     */
-    private prevIconName?;
     connectedCallback(): void;
-    /**
-     * Modifies the icon name based on the active state.
-     * If the tab is active, the icon name is suffixed with '-filled'.
-     * If the tab is inactive, the icon name is restored to its original value.
-     * If '-filled' icon is not available, the icon name remains unchanged.
-     *
-     * @param active - The active state.
-     */
-    private modifyIconName;
     /**
      * Sets the variant attribute for the tab component.
      * If the provided variant is not included in the TAB_VARIANTS,
@@ -122,15 +108,7 @@ declare class Tab extends Tab_base {
      * @param active - The active state of the tab.
      */
     private handleTabActiveChange;
-    /**
-     * Sets the aria-selected attribute based on the active state of the Tab.
-     * If the tab is active, the filled version of the icon is displayed,
-     * else the icon is restored to its original value.
-     *
-     * @param element - The tab element.
-     * @param active - The active state of the tab.
-     */
-    protected setActive(element: HTMLElement, active: boolean): void;
+    private getFilledIconName;
     protected executeAction(): void;
     update(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/tab/tab.component.js

@@ -9,6 +9,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import Buttonsimple from '../buttonsimple/buttonsimple.component';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
@@ -66,10 +67,9 @@ import styles from './tab.styles';
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */
@@ -121,25 +121,6 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
             this.onerror('tab id is required');
         }
     }
-    /**
-     * Modifies the icon name based on the active state.
-     * If the tab is active, the icon name is suffixed with '-filled'.
-     * If the tab is inactive, the icon name is restored to its original value.
-     * If '-filled' icon is not available, the icon name remains unchanged.
-     *
-     * @param active - The active state.
-     */
-    modifyIconName(active) {
-        if (this.iconName) {
-            if (active) {
-                this.prevIconName = this.iconName;
-                this.iconName = `${getIconNameWithoutStyle(this.iconName)}-filled`;
-            }
-            else if (this.prevIconName) {
-                this.iconName = this.prevIconName;
-            }
-        }
-    }
     /**
      * Sets the variant attribute for the tab component.
      * If the provided variant is not included in the TAB_VARIANTS,
@@ -150,17 +131,16 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
     setVariant(variant) {
         this.setAttribute('variant', Object.values(TAB_VARIANTS).includes(variant) ? variant : DEFAULTS.VARIANT);
     }
-    /**
-     * Sets the aria-selected attribute based on the active state of the Tab.
-     * If the tab is active, the filled version of the icon is displayed,
-     * else the icon is restored to its original value.
-     *
-     * @param element - The tab element.
-     * @param active - The active state of the tab.
-     */
-    setActive(element, active) {
-        super.setActive(element, active);
-        this.modifyIconName(active);
+    getFilledIconName() {
+        if (!this.iconName) {
+            return undefined;
+        }
+        const isFilled = this.iconName.endsWith('-filled');
+        if (isFilled) {
+            return undefined;
+        }
+        const baseIcon = getIconNameWithoutStyle(this.iconName);
+        return `${baseIcon}-filled`;
     }
     executeAction() {
         // Toggle the active state of the tab.
@@ -178,7 +158,22 @@ class Tab extends IconNameMixin(LifeCycleMixin(Buttonsimple)) {
         <div part="leading">
           <slot name="prefix">
             ${this.iconName
-            ? html ` <mdc-icon name="${this.iconName}" size="1" length-unit="rem" part="icon"></mdc-icon>`
+            ? html `
+                  <div part="icon-container">
+                    <mdc-icon
+                      name="${this.iconName}"
+                      size="1"
+                      length-unit="rem"
+                      part="regular-icon"
+                    ></mdc-icon>
+                    <mdc-icon
+                      name="${ifDefined(this.getFilledIconName())}"
+                      size="1"
+                      length-unit="rem"
+                      part="filled-icon"
+                    ></mdc-icon>
+                  </div>
+                `
             : nothing}
           </slot>
           ${this.text

package/dist/components/tab/tab.styles.js

@@ -44,6 +44,26 @@ const styles = [
       justify-content: var(--mdc-tab-content-justification);
     }
 
+    :host::part(icon-container) {
+      position: relative;
+    }
+
+    :host([active])::part(regular-icon) {
+      display: none;
+    }
+
+    :host([active])::part(filled-icon) {
+      display: block;
+    }
+
+    :host::part(regular-icon) {
+      display: block;
+    }
+
+    :host::part(filled-icon) {
+      display: none;
+    }
+
     :host::part(leading),
     :host::part(trailing) {
       display: flex;

package/dist/custom-elements.json

@@ -45488,8 +45488,12 @@
               "name": "container"
             },
             {
-              "description": "The icon of the tab.",
-              "name": "icon"
+              "description": "The icon of the tab, if inactive.",
+              "name": "regular-icon"
+            },
+            {
+              "description": "The icon of the tab, if active.",
+              "name": "filled-icon"
             },
             {
               "description": "The indicator of the tab.",
@@ -45570,6 +45574,16 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "getFilledIconName",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "IconNames | undefined"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "handleBlur",
@@ -45645,26 +45659,6 @@
                 "module": "utils/mixins/IconNameMixin.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "modifyIconName",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
-            },
             {
               "kind": "field",
               "name": "name",
@@ -45704,17 +45698,18 @@
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The tab element."
+                  "description": "The button element"
                 },
                 {
                   "name": "active",
+                  "optional": true,
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The active state of the tab."
+                  "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
                 "name": "Buttonsimple",
                 "module": "components/buttonsimple/buttonsimple.component.js"
@@ -46149,7 +46144,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-tab",
-          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n *\n *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
+          "jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-height - The height of the tab.\n * @cssproperty --mdc-tab-padding-left - The left padding of the tab.\n * @cssproperty --mdc-tab-padding-right - The right padding of the tab.\n * @cssproperty --mdc-tab-content-gap - The gap between the icon and text in the tab.\n * @cssproperty --mdc-tab-background-color - The background color of the tab.\n * @cssproperty --mdc-tab-color - The text color of the tab.\n * @cssproperty --mdc-tab-border-radius - The border radius of the tab.\n * @cssproperty --mdc-tab-content-justification - The justification of the content in the tab.\n *\n * @cssproperty --mdc-tab-line-active-indicator-height - The height of the active indicator line.\n * @cssproperty --mdc-tab-line-active-indicator-width - The width of the active indicator line.\n *\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - The border bottom left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - The border bottom right radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.\n * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.\n *\n * @csspart container - The container of the tab.\n * @csspart regular-icon - The icon of the tab, if inactive.\n * @csspart filled-icon - The icon of the tab, if active.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
           "customElement": true,
           "slots": [
             {

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

@@ -51,10 +51,9 @@ import type { Events as EventsInherited } from '../../components/buttonsimple/bu
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */

package/dist/react/tab/index.js

@@ -51,10 +51,9 @@ import { TAG_NAME } from '../../components/tab/tab.constants';
  * @cssproperty --mdc-tab-line-border-top-left-radius - The border top left radius of the active indicator line.
  * @cssproperty --mdc-tab-line-border-top-right-radius - The border top right radius of the active indicator line.
  *
- *
- *
  * @csspart container - The container of the tab.
- * @csspart icon - The icon of the tab.
+ * @csspart regular-icon - The icon of the tab, if inactive.
+ * @csspart filled-icon - The icon of the tab, if active.
  * @csspart indicator - The indicator of the tab.
  * @csspart text - The text of the tab.
  */

package/package.json

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