@momentum-design/components 0.131.2 → 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/package.json

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