@momentum-design/components 0.131.1 → 0.131.3

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;
   }
 

package/dist/custom-elements.json

@@ -45324,6 +45324,10 @@
               "description": "Width of the timepicker component.",
               "name": "--mdc-timepicker-width"
             },
+            {
+              "description": "The max-height of the dropdown listbox. Default shows ~6 items.",
+              "name": "--mdc-timepicker-listbox-height"
+            },
             {
               "description": "Font size for the label text.",
               "name": "--mdc-label-font-size",
@@ -46502,7 +46506,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-timepicker",
-          "jsDoc": "/**\n * mdc-timepicker is a component that allows users to select a specific time\n * or enter a time manually. It supports both 12-hour and 24-hour formats.\n *\n * The component consists of:\n * - label - describes the time picker field\n * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n * - dropdown arrow button - opens a flyout menu with predefined time intervals\n * - helper text - displayed below the input field\n *\n * Users can input values by:\n * - Manually entering numbers/characters in spinbuttons\n * - Navigating using arrow keys to increment/decrement values\n * - Selecting a predefined time from the dropdown menu\n *\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
+          "jsDoc": "/**\n * mdc-timepicker is a component that allows users to select a specific time\n * or enter a time manually. It supports both 12-hour and 24-hour formats.\n *\n * The component consists of:\n * - label - describes the time picker field\n * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n * - dropdown arrow button - opens a flyout menu with predefined time intervals\n * - helper text - displayed below the input field\n *\n * Users can input values by:\n * - Manually entering numbers/characters in spinbuttons\n * - Navigating using arrow keys to increment/decrement values\n * - Selecting a predefined time from the dropdown menu\n *\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
           "customElement": true
         }
       ],

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

@@ -39,6 +39,7 @@ import type { Events } from '../../components/timepicker/timepicker.types';
  * @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/react/timepicker/index.js

@@ -40,6 +40,7 @@ import { TAG_NAME } from '../../components/timepicker/timepicker.constants';
  * @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/utils/controllers/DepthManager.d.ts

@@ -153,7 +153,7 @@ export declare class DepthManager implements ReactiveController {
      * Removes one or more elements from the stack without popping others.
      *
      * It notifies the elements on the stack which were removed and those which changed position.
-     * Items removed in bach, notify moved items only once.
+     * Items removed in batch, notify moved items only once.
      *
      * @param elements - Popover instance
      * @returns undefined when the element was not found, the removed element otherwise
@@ -183,7 +183,9 @@ export declare class DepthManager implements ReactiveController {
      * Gets the z-index of the element in the stack
      * @param element - The element to get the z-index of
      *
-     * @returns The z-index of the element if found, otherwise returns -1
+     * @returns The z-index of the element if found, otherwise returns BASE_Z_INDEX as a safe fallback.
+     * This prevents a visual flash where the overlay renders behind the page content
+     * on the first render cycle, before `pushHost()` runs in `updated()`.
      */
     getItemZIndex(element: StackedOverlayComponent): number;
     /**

package/dist/utils/controllers/DepthManager.js

@@ -126,16 +126,20 @@ export class DepthManager {
      * @returns The item if it was in the stack, undefined otherwise
      */
     popItem(item) {
-        if (this.has(item)) {
-            const untilItemIdx = elementStack.indexOf(item) - 1;
-            this.popUntil((it, idx) => {
-                // This can handle the case when multiple overlays share the same trigger (id), e.g.: tooltip, etc.
-                if (it !== item && it.triggerID === item.triggerID)
-                    return 'skip';
-                return idx !== untilItemIdx;
-            });
+        if (!this.has(item)) {
+            return undefined;
         }
-        return undefined;
+        const itemIdx = elementStack.indexOf(item);
+        const toRemove = [];
+        for (let i = elementStack.length - 1; i >= itemIdx; i -= 1) {
+            const it = elementStack[i];
+            // Skip siblings that share the same trigger (e.g.: tooltip + popover on same trigger)
+            if (it === item || it.triggerID !== item.triggerID) {
+                toRemove.push(it);
+            }
+        }
+        this.remove(toRemove);
+        return item;
     }
     /**
      * Removes the last element from the stack
@@ -181,7 +185,7 @@ export class DepthManager {
      * Removes one or more elements from the stack without popping others.
      *
      * It notifies the elements on the stack which were removed and those which changed position.
-     * Items removed in bach, notify moved items only once.
+     * Items removed in batch, notify moved items only once.
      *
      * @param elements - Popover instance
      * @returns undefined when the element was not found, the removed element otherwise
@@ -190,10 +194,13 @@ export class DepthManager {
         var _a, _b;
         const removedElements = elements.filter(el => elementStack.includes(el));
         const updateStackFrom = removedElements.reduce((idx, el) => Math.min(idx, elementStack.indexOf(el)), Infinity);
-        // Remove elements from the stack
+        // Remove all elements from the stack first, before any notifications,
+        // to prevent re-entrant mutations from corrupting indices.
         removedElements.forEach(el => {
-            var _a;
             elementStack.splice(elementStack.indexOf(el), 1);
+        });
+        removedElements.forEach(el => {
+            var _a;
             (_a = el === null || el === void 0 ? void 0 : el.onComponentStackChanged) === null || _a === void 0 ? void 0 : _a.call(el, 'removed');
         });
         // Notify elements about the move
@@ -234,11 +241,13 @@ export class DepthManager {
      * Gets the z-index of the element in the stack
      * @param element - The element to get the z-index of
      *
-     * @returns The z-index of the element if found, otherwise returns -1
+     * @returns The z-index of the element if found, otherwise returns BASE_Z_INDEX as a safe fallback.
+     * This prevents a visual flash where the overlay renders behind the page content
+     * on the first render cycle, before `pushHost()` runs in `updated()`.
      */
     getItemZIndex(element) {
         const depth = this.getElementDepth(element);
-        return depth >= 0 ? BASE_Z_INDEX + depth * NUMBER_OF_Z_INDEX_LEVELS_PER_ELEMENT : -1;
+        return depth >= 0 ? BASE_Z_INDEX + depth * NUMBER_OF_Z_INDEX_LEVELS_PER_ELEMENT : BASE_Z_INDEX;
     }
     /**
      * Checks if host is at the top of the stack

package/package.json

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