@momentum-design/components 0.131.2 → 0.131.4

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

@@ -21,6 +21,10 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * When the combobox `control-type` attribute is "controlled", then the value should be set by the parent only, and the combobox will emit `change` and `input` events
+ * with the selected option details when the user makes a selection or types in the input, but it won't update the selected value internally.
+ * The parent component is expected to listen to these events and update the `value` property of the combobox accordingly to reflect the changes in the UI.
+ *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
  *
  * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
@@ -81,6 +85,8 @@ declare const Combobox_base: import("../../utils/mixins/index.types").Constructo
 declare class Combobox extends Combobox_base implements AssociatedFormControl {
     /** @internal */
     private itemsStore;
+    /** @internal */
+    private lastCommittedValue;
     /**
      * The placeholder text which will be shown on the text if provided.
      * @default undefined
@@ -154,8 +160,6 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
     /** @internal */
     private filteredValue;
     /** @internal */
-    private forceValueUpdate;
-    /** @internal */
     private initialSelectedOption;
     /** @internal */
     get navItems(): Option[];
@@ -168,8 +172,6 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
     /** @internal */
     private closePopover;
     /** @internal */
-    private toggleDropdown;
-    /** @internal */
     private compareOptionWithValue;
     /** @internal */
     private getFirstSelectedOption;
@@ -179,6 +181,10 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
     private handleUpdateError;
     /** @internal */
     private onStoreUpdate;
+    /** @internal */
+    private focusComboboxBase;
+    /** @internal */
+    private handleTriggerClick;
     /**
      * Update the selected value when an option is modified.
      *
@@ -189,8 +195,8 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
      * Sets the selected option of the combobox.
      *
      * @param option - the new option to be set
-     * @param updateFromValue - indicates if the update is triggered from the value attribute change
      * @param emitEvents - indicates if the change and input events should be emitted
+     * @param updateFromValue - indicates if the update is triggered from the value attribute change
      *
      * @internal
      */
@@ -266,6 +272,7 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
     /**
      * Updates the visual focus state of a specific option in the dropdown list based on 'data-focused' attribute.
      * It also updates the 'aria-selected' attribute for a11y purposes.
+     * If an option has a tooltip attached to it, this will open the tooltip when the option is focused and close it when the option is unfocused.
      *
      * @param option - The option element to update focus state for.
      * @param value - The new focus state to set (true for focused, false for unfocused).
@@ -273,6 +280,20 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
      * @internal
      */
     private updateOptionAttributes;
+    /**
+     * Opens the tooltip associated with the given option, if it exists.
+     * @param option - option
+     *
+     * @internal
+     */
+    private openTooltipIfExists;
+    /**
+     * Closes the tooltip associated with the given option, if it exists.
+     * @param option - option
+     *
+     * @internal
+     */
+    private closeTooltipIfExists;
     /**
      * Handles the blur event of the combobox.
      * This method is called when the combobox loses focus.
@@ -298,10 +319,6 @@ declare class Combobox extends Combobox_base implements AssociatedFormControl {
      */
     private updateHiddenOptions;
     /** @internal */
-    private hideOptionGroupAndDivider;
-    /** @internal */
-    private showOptionGroupAndDivider;
-    /** @internal */
     private handleInputChange;
     /** @internal */
     private handleOptionsClick;

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

@@ -49,6 +49,10 @@ import styles from './combobox.styles';
  *
  * To set a default option, use the `selected` attribute on the `mdc-option` element.
  *
+ * When the combobox `control-type` attribute is "controlled", then the value should be set by the parent only, and the combobox will emit `change` and `input` events
+ * with the selected option details when the user makes a selection or types in the input, but it won't update the selected value internally.
+ * The parent component is expected to listen to these events and update the `value` property of the combobox accordingly to reflect the changes in the UI.
+ *
  * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-combobox` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.
  *
  * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-selectlistbox` element. Read more about it in Options documentation.
@@ -113,6 +117,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     }
     constructor() {
         super();
+        /** @internal */
+        this.lastCommittedValue = '';
         /**
          * The placement of the popover within Combobox.
          * This defines the position of the popover relative to the combobox input field.
@@ -159,8 +165,6 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         /** @internal */
         this.filteredValue = '';
         /** @internal */
-        this.forceValueUpdate = false;
-        /** @internal */
         this.initialSelectedOption = null;
         /** @internal */
         this.handleUpdateError = (error) => {
@@ -205,7 +209,11 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
          */
         this.handleModifiedEvent = (event) => {
             // When the combobox is controlled, we don't update/modify the selected value internally.
+            // Instead, we rely on the consumer to update the selected value based on the change event emitted.
             if (this.controlType === 'controlled') {
+                // We still need to update the hidden options when an option is modified, because even in controlled mode,
+                // the modification of an option (e.g. changing the label) should be reflected in the UI by updating the hidden options based on the new label.
+                this.updateHiddenOptions();
                 return;
             }
             const firstSelectedOption = this.getFirstSelectedOption();
@@ -265,10 +273,6 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         this.isOpen = false;
     }
     /** @internal */
-    toggleDropdown() {
-        this.isOpen = !this.isOpen;
-    }
-    /** @internal */
     compareOptionWithValue(option, value) {
         const optionValue = option.getAttribute('label') || '';
         return optionValue.toLowerCase().startsWith(value === null || value === void 0 ? void 0 : value.toLowerCase());
@@ -281,31 +285,69 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     getVisibleOptions(internalValue) {
         return this.navItems.filter(option => this.compareOptionWithValue(option, internalValue));
     }
+    /** @internal */
+    focusComboboxBase() {
+        if (this.disabled) {
+            return;
+        }
+        this.updateComplete
+            .then(() => {
+            var _a;
+            // `visualCombobox` points to the slotted input with role="combobox".
+            // Clicking the surrounding `mdc-input` or the dropdown button can toggle the popover
+            // without moving DOM focus, so we explicitly focus the base input.
+            (_a = this.visualCombobox) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+        })
+            .catch(this.handleUpdateError);
+    }
+    /** @internal */
+    handleTriggerClick() {
+        if (this.disabled) {
+            return;
+        }
+        // Toggle dropdown when clicking the trigger button
+        this.isOpen = !this.isOpen;
+        // Focus on the combobox after click
+        this.focusComboboxBase();
+    }
     /**
      * Sets the selected option of the combobox.
      *
      * @param option - the new option to be set
-     * @param updateFromValue - indicates if the update is triggered from the value attribute change
      * @param emitEvents - indicates if the change and input events should be emitted
+     * @param updateFromValue - indicates if the update is triggered from the value attribute change
      *
      * @internal
      */
-    setSelectedValue(option, emitEvents = true) {
-        if (this.controlType === 'controlled' && !this.forceValueUpdate) {
-            ComboboxEventManager.onChangeCombobox(this, option);
+    setSelectedValue(option, emitEvents = true, updateFromValue = false) {
+        const label = (option === null || option === void 0 ? void 0 : option.getAttribute('label')) || '';
+        const value = (option === null || option === void 0 ? void 0 : option.getAttribute('value')) || '';
+        // If the value and the label are the same as the current selected option,
+        // then do nothing to prevent unnecessary updates and event emissions.
+        if (this.value === value && this.filteredValue === label) {
             return;
         }
-        this.forceValueUpdate = false;
-        // this.filteredValue is the visible label of the component
-        this.filteredValue = (option === null || option === void 0 ? void 0 : option.getAttribute('label')) || '';
-        // this.value is the actual value of the component
-        this.value = (option === null || option === void 0 ? void 0 : option.getAttribute('value')) || '';
+        // For controlled components, user interactions (not coming from a value prop change)
+        // should only emit events and let the parent drive the value.
+        if (this.controlType === 'controlled' && !updateFromValue) {
+            if (emitEvents) {
+                ComboboxEventManager.onInputCombobox(this, option);
+                ComboboxEventManager.onChangeCombobox(this, option);
+            }
+            return;
+        }
+        this.filteredValue = label;
+        this.value = value;
+        // Update last committed values when a real selection is made
+        this.lastCommittedValue = value;
         this.internals.setFormValue(this.value);
         this.updateHiddenOptions();
-        this.updateSelectedOption(option);
+        if (option) {
+            this.updateSelectedOption(option);
+        }
         this.setInputValidity();
         this.resetHelpText();
-        if (emitEvents) {
+        if (emitEvents && !updateFromValue && option) {
             ComboboxEventManager.onInputCombobox(this, option);
             ComboboxEventManager.onChangeCombobox(this, option);
         }
@@ -342,11 +384,10 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
      */
     attributeChangedCallback(name, oldValue, newValue) {
         super.attributeChangedCallback(name, oldValue, newValue);
-        if (name === 'value' &&
-            newValue !== '' &&
-            newValue !== oldValue &&
-            this.navItems.length &&
-            this.controlType !== 'controlled') {
+        // 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);
             let optionToSelect = null;
@@ -364,7 +405,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
             }
             this.updateComplete
                 .then(() => {
-                this.setSelectedValue(optionToSelect);
+                this.setSelectedValue(optionToSelect, false, true);
             })
                 .catch(this.handleUpdateError);
         }
@@ -397,6 +438,8 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         else if (this.placeholder) {
             this.setInputValidity();
         }
+        // Initialize last committed values
+        this.lastCommittedValue = this.value;
         this.navItems.forEach(option => {
             option.setAttribute('tabindex', '-1');
         });
@@ -407,10 +450,10 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
      * @internal
      */
     updateValueBasedSelection() {
-        this.forceValueUpdate = true;
         const validOption = this.navItems.find(option => option.value === this.value);
         if (validOption) {
-            this.setSelectedValue(validOption);
+            // Sync UI from value prop without firing change/input events
+            this.setSelectedValue(validOption, false, true);
         }
     }
     updated(changedProperties) {
@@ -470,7 +513,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         var _a;
         const optionToResetTo = this.initialSelectedOption || null;
         // Restore the selected option
-        this.setSelectedValue(optionToResetTo);
+        this.setSelectedValue(optionToResetTo, false, true);
         // Reset the filtered text (typed value shown in input)
         if (this.controlType !== 'controlled') {
             this.filteredValue = (_a = optionToResetTo === null || optionToResetTo === void 0 ? void 0 : optionToResetTo.label) !== null && _a !== void 0 ? _a : '';
@@ -481,7 +524,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     /** @internal */
     formStateRestoreCallback(state) {
         const optionToRestoreTo = this.navItems.find(option => option.value === state || option.label === state);
-        this.setSelectedValue(optionToRestoreTo || null);
+        this.setSelectedValue(optionToRestoreTo || null, false, true);
     }
     /**
      * When the native input is focused, visually highlight the dropdown options (the "visual combobox"),
@@ -518,6 +561,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
     /**
      * Updates the visual focus state of a specific option in the dropdown list based on 'data-focused' attribute.
      * It also updates the 'aria-selected' attribute for a11y purposes.
+     * If an option has a tooltip attached to it, this will open the tooltip when the option is focused and close it when the option is unfocused.
      *
      * @param option - The option element to update focus state for.
      * @param value - The new focus state to set (true for focused, false for unfocused).
@@ -529,12 +573,42 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
             return;
         if (value) {
             option.setAttribute('data-focused', '');
+            this.openTooltipIfExists(option);
         }
         else {
             option.removeAttribute('data-focused');
+            this.closeTooltipIfExists(option);
         }
         option.setAttribute('aria-selected', value.toString());
     }
+    /**
+     * Opens the tooltip associated with the given option, if it exists.
+     * @param option - option
+     *
+     * @internal
+     */
+    openTooltipIfExists(option) {
+        const id = option.getAttribute('id');
+        if (!id)
+            return;
+        const tooltip = this.querySelector(`mdc-tooltip[triggerid="${id}"]`);
+        tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('visible', '');
+    }
+    /**
+     * Closes the tooltip associated with the given option, if it exists.
+     * @param option - option
+     *
+     * @internal
+     */
+    closeTooltipIfExists(option) {
+        const id = option.getAttribute('id');
+        if (!id)
+            return;
+        const tooltip = this.querySelector(`mdc-tooltip[triggerid="${id}"][visible]`);
+        if (tooltip) {
+            tooltip.removeAttribute('visible');
+        }
+    }
     /**
      * Handles the blur event of the combobox.
      * This method is called when the combobox loses focus.
@@ -553,15 +627,35 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
             this.closePopover();
             return;
         }
-        if (activeIndex === -1 &&
-            this.filteredValue !== '' &&
-            this.invalidCustomValueText &&
-            !this.getFirstSelectedOption()) {
-            this.helpText = this.invalidCustomValueText;
-            this.helpTextType = VALIDATION.ERROR;
+        // Check if the typed text exactly matches an option
+        const exactMatch = this.navItems.find(option => {
+            const optionLabel = option.getAttribute('label') || '';
+            return optionLabel.toLowerCase() === this.filteredValue.toLowerCase();
+        });
+        if (exactMatch) {
+            this.setSelectedValue(exactMatch);
+            this.closePopover();
+            return;
         }
-        // In common cases (when no selection made and focus moved away), close the popover.
-        this.setInputValidity();
+        // If user typed something but didn't select anything, check what to do
+        if (this.filteredValue !== '') {
+            // If the input doesn't match any option and we have a previously committed value, revert to it
+            if (this.lastCommittedValue) {
+                const newOption = this.navItems.find(option => option.value === this.lastCommittedValue);
+                this.setSelectedValue(newOption);
+            }
+            else if (this.invalidCustomValueText && !this.getFirstSelectedOption()) {
+                // Show invalid custom value message if configured
+                this.helpText = this.invalidCustomValueText;
+                this.helpTextType = VALIDATION.ERROR;
+                this.setInputValidity();
+            }
+        }
+        else {
+            // When the input is cleared, reset the selected value to null (placeholder will be shown if present)
+            this.setSelectedValue(null);
+        }
+        this.closePopover();
     }
     /** @internal */
     updateFocusAndScrollIntoView(options, oldIndex, newIndex) {
@@ -655,50 +749,54 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
      * @internal
      */
     updateHiddenOptions() {
+        const groupVisibleCounts = new Map();
+        const groups = new Set();
+        // First pass: update options and collect visibility info per optgroup
         this.navItems.forEach(option => {
-            if (!this.compareOptionWithValue(option, this.filteredValue)) {
-                option.setAttribute('data-hidden', '');
-                this.hideOptionGroupAndDivider(option);
+            var _a;
+            const matchesFilter = this.compareOptionWithValue(option, this.filteredValue);
+            if (matchesFilter) {
+                option.removeAttribute('data-hidden');
             }
             else {
-                option.removeAttribute('data-hidden');
-                this.showOptionGroupAndDivider(option);
+                option.setAttribute('data-hidden', '');
+            }
+            const parent = option.parentElement;
+            if (parent && parent.matches(OPTIONGROUP_TAG_NAME)) {
+                const group = parent;
+                groups.add(group);
+                if (matchesFilter) {
+                    groupVisibleCounts.set(group, ((_a = groupVisibleCounts.get(group)) !== null && _a !== void 0 ? _a : 0) + 1);
+                }
             }
         });
-    }
-    /** @internal */
-    hideOptionGroupAndDivider(option) {
-        var _a, _b, _c;
-        if ((_a = option.parentElement) === null || _a === void 0 ? void 0 : _a.matches(OPTIONGROUP_TAG_NAME)) {
-            const optionGroupChildren = (_b = Array.from(option.parentElement.children)) === null || _b === void 0 ? void 0 : _b.filter(option => !option.hasAttribute('data-hidden'));
-            if (optionGroupChildren.length === 0) {
-                option.parentElement.setAttribute('data-hidden', '');
-                if ((_c = option.parentElement.nextElementSibling) === null || _c === void 0 ? void 0 : _c.matches(DIVIDER_TAG_NAME)) {
-                    option.parentElement.nextElementSibling.setAttribute('data-hidden', '');
+        // Second pass: toggle optgroup + following divider based on aggregated counts
+        groups.forEach(group => {
+            var _a;
+            const hasVisibleChildren = ((_a = groupVisibleCounts.get(group)) !== null && _a !== void 0 ? _a : 0) > 0;
+            const divider = group.nextElementSibling;
+            if (hasVisibleChildren) {
+                group.removeAttribute('data-hidden');
+                if (divider && divider.matches(DIVIDER_TAG_NAME)) {
+                    divider.removeAttribute('data-hidden');
                 }
             }
-        }
-    }
-    /** @internal */
-    showOptionGroupAndDivider(option) {
-        var _a, _b, _c;
-        if ((_a = option.parentElement) === null || _a === void 0 ? void 0 : _a.matches(OPTIONGROUP_TAG_NAME)) {
-            const optionGroupChildren = (_b = Array.from(option.parentElement.children)) === null || _b === void 0 ? void 0 : _b.filter(option => !option.hasAttribute('data-hidden'));
-            if (optionGroupChildren.length > 0) {
-                option.parentElement.removeAttribute('data-hidden');
-                if ((_c = option.parentElement.nextElementSibling) === null || _c === void 0 ? void 0 : _c.matches(DIVIDER_TAG_NAME)) {
-                    option.parentElement.nextElementSibling.removeAttribute('data-hidden');
+            else {
+                group.setAttribute('data-hidden', '');
+                if (divider && divider.matches(DIVIDER_TAG_NAME)) {
+                    divider.setAttribute('data-hidden', '');
                 }
             }
-        }
+        });
     }
     /** @internal */
     handleInputChange(event) {
         var _a;
-        if (this.controlType !== 'controlled') {
-            this.filteredValue = event.target.value;
-        }
-        this.resetSelectedValue();
+        event.preventDefault();
+        event.stopPropagation();
+        this.filteredValue = event.target.value;
+        // Don't reset the selected value immediately - preserve it until user makes a selection
+        // or loses focus and we determine what to do
         this.resetFocusedOption();
         this.updateHiddenOptions();
         // remove the selected attribute on input change
@@ -706,17 +804,21 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         if (this.isOpen === false) {
             this.openPopover();
         }
+        // Dispatch custom event to notify about the input change with the current filtered value.
+        ComboboxEventManager.onInputCombobox(this, { value: this.filteredValue });
     }
     /** @internal */
     handleOptionsClick(event) {
         var _a;
+        event.preventDefault();
+        event.stopPropagation();
         // ensure we get the actual option element even if the click target is a child node
         const option = (_a = event.target.closest(OPTION_TAG_NAME)) !== null && _a !== void 0 ? _a : null;
         if (option && !option.hasAttribute('disabled')) {
             this.setSelectedValue(option);
             this.closePopover();
             // Focus on the combobox after click
-            this.updateComplete.then(() => this.handleNativeInputFocus()).catch(this.handleUpdateError);
+            this.focusComboboxBase();
         }
     }
     /** @internal */
@@ -772,6 +874,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         id="${this.id}"
         slot="input"
         ?disabled="${this.disabled}"
+        tabindex="${this.disabled ? -1 : 0}"
         .value="${live(this.filteredValue)}"
         autocomplete="${AUTO_COMPLETE.OFF}"
         part="input-text"
@@ -809,7 +912,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
       <div part="combobox-base" id="${TRIGGER_ID}">
         ${this.renderNativeInput()}
         <mdc-input
-          @click="${() => this.toggleDropdown()}"
+          @click="${this.handleTriggerClick}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readonly}"
           help-text-type="${this.helpTextType}"
@@ -817,7 +920,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
           ${this.renderBaseInput()}
         </mdc-input>
         <mdc-buttonsimple
-          @click="${() => this.toggleDropdown()}"
+          @click="${this.handleTriggerClick}"
           part="combobox-button"
           ?disabled="${this.disabled}"
           tabindex="-1"
@@ -838,7 +941,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
         }}"
           @closebyoutsideclick="${() => {
             this.closePopover();
-            this.handleNativeInputFocus();
+            this.focusComboboxBase();
         }}"
           backdrop
           backdrop-append-to="${ifDefined(this.backdropAppendTo)}"
@@ -857,7 +960,7 @@ class Combobox extends KeyDownHandledMixin(KeyToActionMixin(CaptureDestroyEventF
           z-index="${ifDefined(this.popoverZIndex)}"
         >
           ${this.renderNoResultsText(options.length)}
-          <slot @click="${this.handleOptionsClick}"></slot>
+          <slot @mousedown="${this.handleOptionsClick}"></slot>
         </mdc-popover>
       </div>
       ${this.renderHelperText()}
@@ -917,8 +1020,4 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], Combobox.prototype, "filteredValue", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], Combobox.prototype, "forceValueUpdate", void 0);
 export default Combobox;

package/dist/components/combobox/combobox.events.d.ts

@@ -16,12 +16,12 @@ export declare class ComboboxEventManager {
      * @param instance - The combobox instance.
      * @param option - The value and label of the selected option.
      */
-    static onInputCombobox(instance: Combobox, option: Option): void;
+    static onInputCombobox(instance: Combobox, option: Option | null): void;
     /**
      * Dispatches a custom event for the Combobox when the selected option changes.
      *
      * @param instance - The combobox instance.
      * @param option - The value and label of the selected option.
      */
-    static onChangeCombobox(instance: Combobox, option: Option): void;
+    static onChangeCombobox(instance: Combobox, option: Option | null): void;
 }

package/dist/components/timepicker/index.d.ts

@@ -2,6 +2,7 @@ import '../button';
 import '../icon';
 import '../option';
 import '../popover';
+import '../selectlistbox';
 import '../text';
 import '../toggletip';
 import TimePicker from './timepicker.component';

package/dist/components/timepicker/index.js

@@ -2,6 +2,7 @@ import '../button';
 import '../icon';
 import '../option';
 import '../popover';
+import '../selectlistbox';
 import '../text';
 import '../toggletip';
 import TimePicker from './timepicker.component';

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

@@ -43,6 +43,7 @@ declare const TimePicker_base: import("../../utils/mixins/index.types").Construc
  * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
  * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
  * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
+ * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.

package/dist/components/timepicker/timepicker.component.js

@@ -55,6 +55,7 @@ import styles from './timepicker.styles';
  * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
  * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
  * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
+ * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.
  *
  * @csspart label - The label element.
  * @csspart label-text - The container for the label and required indicator elements.
@@ -881,15 +882,14 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         }}"
           exportparts="popover-content"
         >
-          <div
+          <mdc-selectlistbox
             id="${LISTBOX_ID}"
             part="listbox"
-            role="listbox"
             aria-label="${this.localeTimeOptionsLabel}"
             @keydown="${this.handleListboxKeydown}"
           >
             ${this.renderTimeOptions()}
-          </div>
+          </mdc-selectlistbox>
         </mdc-popover>
       </div>
       ${this.helpText ? this.renderHelperText() : nothing}

package/dist/components/timepicker/timepicker.styles.js

@@ -7,6 +7,7 @@ const styles = css `
     --mdc-timepicker-border-color: var(--mds-color-theme-outline-input-normal);
     --mdc-timepicker-width: fit-content;
     --mdc-timepicker-listbox-width: 100%;
+    --mdc-timepicker-listbox-height: 15rem;
 
     display: flex;
     flex-direction: column;
@@ -130,9 +131,14 @@ const styles = css `
   }
 
   /* Popover height, width & padding overrides */
+  :host mdc-popover {
+    --mdc-popover-max-width: var(--mdc-timepicker-listbox-width);
+    --mdc-popover-max-height: var(--mdc-timepicker-listbox-height);
+    min-width: max-content;
+  }
   :host mdc-popover::part(popover-content) {
     max-height: var(--mdc-popover-max-height);
-    min-width: var(--mdc-timepicker-listbox-width);
+    min-width: auto;
     padding: 0.75rem 0.5rem;
   }