@momentum-design/components 0.134.4 → 0.134.6

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

@@ -3,7 +3,8 @@ import { CSSResult } from 'lit';
 import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
 import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
 import type { PopoverStrategy } from '../popover/popover.types';
-import type { Placement, TimeFormat } from './timepicker.types';
+import type { IconNames } from '../icon/icon.types';
+import type { OptionLabelFormatter, Placement, TimeFormat } from './timepicker.types';
 declare const TimePicker_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
 /**
  * mdc-timepicker is a component that allows users to select a specific time
@@ -61,6 +62,7 @@ declare const TimePicker_base: import("../../utils/mixins/index.types").Construc
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */
@@ -152,6 +154,16 @@ declare class TimePicker extends TimePicker_base implements AssociatedFormContro
      * Consumers must provide a translated string.
      */
     localePmLabel: string;
+    /**
+     * The icon name to display as a prefix icon in the timepicker input.
+     */
+    prefixIcon?: IconNames;
+    /**
+     * A callback function to format the label of each dropdown option.
+     * Receives the default label string and the 24h value string, and should return a formatted label.
+     * When not set, the default time formatting is used.
+     */
+    optionLabelFormatter?: OptionLabelFormatter;
     /**
      * Accessible label for the dropdown toggle button.
      * Consumers must provide a translated string.

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

@@ -73,6 +73,7 @@ import styles from './timepicker.styles';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */
@@ -770,7 +771,7 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         const currentValue = this.internalToValue();
         return options.map(option => html `
         <mdc-option
-          label="${option.label}"
+          label="${this.optionLabelFormatter ? this.optionLabelFormatter(option.label, option.value) : option.label}"
           ?selected="${option.value === currentValue}"
           aria-selected="${option.value === currentValue ? 'true' : 'false'}"
           @click="${() => this.handleOptionClick(option.value)}"
@@ -791,6 +792,9 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           @click="${this.handleBaseContainerClick}"
           @keydown="${this.handleBaseKeydown}"
         >
+          ${this.prefixIcon
+            ? html `<mdc-icon part="leading-icon" name="${this.prefixIcon}" size="1"></mdc-icon>`
+            : nothing}
           <div part="spinbutton-group">
             <input
               id="hours-spinbutton"
@@ -984,6 +988,14 @@ __decorate([
     property({ type: String, attribute: 'locale-pm-label' }),
     __metadata("design:type", Object)
 ], TimePicker.prototype, "localePmLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], TimePicker.prototype, "prefixIcon", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], TimePicker.prototype, "optionLabelFormatter", void 0);
 __decorate([
     property({ type: String, attribute: 'locale-show-time-picker-label' }),
     __metadata("design:type", Object)

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

@@ -18,4 +18,11 @@ interface Events {
     onHiddenEvent: PopoverHiddenEvent;
 }
 type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
-export type { Events, Placement, TimeFormat, TimePickerChangeEvent, TimePickerInputEvent };
+/**
+ * A callback function to format the label of each dropdown option.
+ * @param label - The default formatted label string (e.g., "1:30 PM" or "13:30").
+ * @param value - The 24-hour time value string (e.g., "13:30").
+ * @returns The formatted label string to display.
+ */
+type OptionLabelFormatter = (label: string, value: string) => string;
+export type { Events, OptionLabelFormatter, Placement, TimeFormat, TimePickerChangeEvent, TimePickerInputEvent };

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

@@ -44,6 +44,11 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @cssproperty --mdc-toast-padding - Padding inside the toast.
  */
 declare class Toast extends Toast_base {
+    /**
+     * Reference to the header text element
+     * @internal
+     */
+    private headerTextElement;
     /**
      * Type of toast
      * - Can be `custom`, `success`, `warning` or `error`.
@@ -79,6 +84,12 @@ declare class Toast extends Toast_base {
     showLessText?: string;
     private isDetailVisible;
     private hasDetailedSlot;
+    /**
+     * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+     * This is determined on first update and will not update dynamically if the header text changes after initial render.
+     * @internal
+     */
+    private hasOverflowingHeaderText;
     private detailedElements;
     private hasFooterButtons;
     /**
@@ -90,7 +101,7 @@ declare class Toast extends Toast_base {
     private toggleDetailVisibility;
     private updateDetailedSlotPresence;
     private updateFooterButtonsPresence;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
     protected renderIcon(iconName: string): import("lit-html").TemplateResult<1> | typeof nothing;
     private shouldRenderToggleButton;
     private renderToggleDetailButton;

package/dist/components/toast/toast.component.js

@@ -8,11 +8,12 @@ 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 { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
 import { FooterMixin } from '../../utils/mixins/FooterMixin';
 import { TYPE } from '../text/text.constants';
+import { hasOverflowMixin } from '../../utils/dom';
 import { DEFAULTS } from './toast.constants';
 import { getIconNameForVariant } from './toast.utils';
 import styles from './toast.styles';
@@ -77,6 +78,12 @@ class Toast extends FooterMixin(Component) {
         this.ariaLabel = null;
         this.isDetailVisible = false;
         this.hasDetailedSlot = false;
+        /**
+         * Indicates whether the header text is overflowing and requires the show more/less toggle button to be shown when detailed content is present.
+         * This is determined on first update and will not update dynamically if the header text changes after initial render.
+         * @internal
+         */
+        this.hasOverflowingHeaderText = false;
         this.hasFooterButtons = '';
     }
     /**
@@ -94,6 +101,12 @@ class Toast extends FooterMixin(Component) {
     }
     toggleDetailVisibility() {
         this.isDetailVisible = !this.isDetailVisible;
+        if (this.isDetailVisible) {
+            this.setAttribute('data-expanded', 'true');
+        }
+        else {
+            this.removeAttribute('data-expanded');
+        }
     }
     updateDetailedSlotPresence() {
         var _a, _b;
@@ -108,9 +121,13 @@ class Toast extends FooterMixin(Component) {
                 ? 'has-footer-buttons'
                 : '';
     }
-    firstUpdated(changedProperties) {
+    async firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.updateDetailedSlotPresence();
+        await this.updateComplete;
+        if (hasOverflowMixin(this.headerTextElement)) {
+            this.hasOverflowingHeaderText = this.headerTextElement.isHeightOverflowing();
+        }
     }
     renderIcon(iconName) {
         if (!iconName)
@@ -120,7 +137,7 @@ class Toast extends FooterMixin(Component) {
     `;
     }
     shouldRenderToggleButton() {
-        return this.hasDetailedSlot && this.showMoreText && this.showLessText;
+        return (this.hasDetailedSlot || this.hasOverflowingHeaderText) && this.showMoreText && this.showLessText;
     }
     renderToggleDetailButton() {
         if (!this.shouldRenderToggleButton())
@@ -193,6 +210,10 @@ class Toast extends FooterMixin(Component) {
     }
 }
 Toast.styles = [...Component.styles, ...styles];
+__decorate([
+    query("[part='toast-header']"),
+    __metadata("design:type", HTMLElement)
+], Toast.prototype, "headerTextElement", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
@@ -229,6 +250,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], Toast.prototype, "hasDetailedSlot", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], Toast.prototype, "hasOverflowingHeaderText", void 0);
 __decorate([
     queryAssignedElements({ slot: 'toast-body-detailed', flatten: true }),
     __metadata("design:type", Array)

package/dist/components/toast/toast.styles.js

@@ -65,6 +65,16 @@ const styles = css `
     line-height: var(--mds-font-lineheight-body-large);
   }
 
+  [part='toast-header']::part(text) {
+    display: unset;
+    -webkit-box-orient: inherit;
+    -webkit-line-clamp: inherit;
+  }
+
+  :host([data-expanded='true'])::part(toast-header) {
+    -webkit-line-clamp: unset;
+  }
+
   :host::part(footer) {
     display: flex;
     justify-content: flex-end;

package/dist/custom-elements.json

@@ -5160,6 +5160,20 @@
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -47421,6 +47435,20 @@
             }
           ],
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "OverflowMixin",
+                "module": "utils/mixins/OverflowMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -49083,6 +49111,10 @@
               "description": "The dropdown arrow button container.",
               "name": "icon-container"
             },
+            {
+              "description": "The prefix icon element displayed before spinbuttons.",
+              "name": "leading-icon"
+            },
             {
               "description": "The hidden native input for form participation.",
               "name": "native-input"
@@ -49414,6 +49446,14 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "optionLabelFormatter",
+              "type": {
+                "text": "OptionLabelFormatter | undefined"
+              },
+              "description": "A callback function to format the label of each dropdown option.\nReceives the default label string and the 24h value string, and should return a formatted label.\nWhen not set, the default time formatting is used."
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -49425,6 +49465,16 @@
               "attribute": "placement",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The icon name to display as a prefix icon in the timepicker input.",
+              "attribute": "prefix-icon",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "readonly",
@@ -49862,6 +49912,14 @@
               "description": "Label for the PM period.\nConsumers must provide a translated string.",
               "fieldName": "localePmLabel"
             },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The icon name to display as a prefix icon in the timepicker input.",
+              "fieldName": "prefixIcon"
+            },
             {
               "name": "locale-show-time-picker-label",
               "type": {
@@ -50095,7 +50153,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-height - The height of the timepicker trigger control.\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 */",
+          "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-height - The height of the timepicker trigger control.\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 leading-icon - The prefix icon element displayed before spinbuttons.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
           "customElement": true
         }
       ],
@@ -57835,6 +57893,16 @@
           "description": "",
           "name": "OverflowMixin",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",
@@ -57861,6 +57929,16 @@
           "description": "",
           "name": "OverflowMixinInterface",
           "members": [
+            {
+              "kind": "method",
+              "name": "isHeightOverflowing",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "isWidthOverflowing",

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

@@ -57,6 +57,7 @@ import type { Events } from '../../components/timepicker/timepicker.types';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */

package/dist/react/timepicker/index.js

@@ -58,6 +58,7 @@ import { TAG_NAME } from '../../components/timepicker/timepicker.constants';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */

package/dist/utils/mixins/OverflowMixin.d.ts

@@ -3,5 +3,6 @@ import type { Constructor } from './index.types';
 export declare abstract class OverflowMixinInterface {
     protected get overflowElement(): HTMLElement;
     isWidthOverflowing(): boolean;
+    isHeightOverflowing(): boolean;
 }
 export declare const OverflowMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<OverflowMixinInterface> & T;

package/dist/utils/mixins/OverflowMixin.js

@@ -17,6 +17,10 @@ export const OverflowMixin = (superClass) => {
             const el = this.overflowElement;
             return el.scrollWidth > el.clientWidth;
         }
+        isHeightOverflowing() {
+            const el = this.overflowElement;
+            return el.scrollHeight > el.clientHeight;
+        }
     }
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;

package/package.json

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