@momentum-design/components 0.95.3 → 0.95.5

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

@@ -187,6 +187,13 @@ declare class Select extends Select_base implements AssociatedFormControl {
      * @internal
      */
     private handleNativeInputFocus;
+    /**
+     * Updates the state of the select component.
+     * This public method should be fired when the selected on the option components is updated from the outside.
+     * It ensures that the selected attribute is set correctly on the options
+     * and that the aria-selected attribute is updated accordingly.
+     */
+    updateState(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/select/select.component.js

@@ -419,6 +419,22 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
     handleNativeInputFocus() {
         this.visualCombobox.focus();
     }
+    /**
+     * Updates the state of the select component.
+     * This public method should be fired when the selected on the option components is updated from the outside.
+     * It ensures that the selected attribute is set correctly on the options
+     * and that the aria-selected attribute is updated accordingly.
+     */
+    updateState() {
+        var _a;
+        const newSelectedOption = this.getFirstSelectedOption();
+        if (!newSelectedOption) {
+            this.setSelectedOption(this.placeholder ? null : this.getFirstValidOption());
+        }
+        else if (((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== newSelectedOption.value) {
+            this.setSelectedOption(newSelectedOption);
+        }
+    }
     render() {
         var _a, _b, _c, _d, _e, _f;
         return html `