@momentum-design/components 0.139.8 → 0.140.0

package/dist/index.d.ts

@@ -47,6 +47,7 @@ import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
 import MenuSection from './components/menusection';
 import NavMenuItem from './components/navmenuitem';
+import NumberInput from './components/numberinput';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Password from './components/password';
@@ -123,6 +124,6 @@ import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/t
 import type { DatePickerChangeEvent, DatePickerInputEvent } from './components/datepicker/datepicker.types';
 import type { CalendarDateSelectedEvent, CalendarMonthChangedEvent } from './components/calendar/calendar.types';
 import type { ListBoxChangeEvent } from './components/listbox/listbox.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, StatusMessageSeverity, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -49,6 +49,7 @@ import MenuItemRadio from './components/menuitemradio';
 import MenuPopover from './components/menupopover';
 import MenuSection from './components/menusection';
 import NavMenuItem from './components/navmenuitem';
+import NumberInput from './components/numberinput';
 import OptGroup from './components/optgroup';
 import Option from './components/option';
 import Password from './components/password';
@@ -100,6 +101,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/index.d.ts

@@ -54,6 +54,7 @@ export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavMenuItem } from './navmenuitem';
+export { default as NumberInput } from './numberinput';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';

package/dist/react/index.js

@@ -54,6 +54,7 @@ export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
 export { default as NavMenuItem } from './navmenuitem';
+export { default as NumberInput } from './numberinput';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';

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

@@ -3,21 +3,37 @@ import Component from '../../components/input';
 import type { Events } from '../../components/input/input.types';
 import type { Events as EventsInherited } from '../../utils/mixins/CharacterLimitMixin.ts';
 /**
- * The input is a single-line text field with a label, optional helper or validation text, and an optional trailing clear button. It supports a leading icon, a static prefix text, character counting, and full HTML form integration (the host is form-associated and submits its `value` under `name`).
+ * The input is a single-line text field with a label, optional helper or
+ * validation text, and an optional trailing clear button. It supports a leading
+ * icon, a static prefix text, character counting, and full HTML form integration
+ * (the host is form-associated and submits its `value` under `name`).
  * 
- * The label, required indicator, and helper text rendering follow the standard form-field layout; an optional info-icon toggletip can be attached next to the label for additional context.
+ * The label, required indicator, and helper text rendering follow the standard
+ * form-field layout; an optional info-icon toggletip can be attached next to the
+ * label for additional context.
  * 
  * **When to use**
  * 
- * - Use `mdc-input` for any short, free-form text entry: names, search terms, single-line addresses, codes, or any value that fits on one line.
- * - Use `mdc-input` when the field needs a label, helper/validation text, and form integration without wiring it by hand.
+ * - Use `mdc-input` for any short, free-form text entry: names, search terms,
+ *   single-line addresses, codes, or any value that fits on one line.
+ * - Use `mdc-input` when the field needs a label, helper/validation text, and form
+ *   integration without wiring it by hand.
  * 
  * **When not to use**
  * 
- * - Do not use `mdc-input` for multi-line entry such as messages or comments. Use `mdc-textarea` instead.
- * - Do not use `mdc-input` for masked credentials that need a show/hide toggle. Use `mdc-password` instead.
- * - Do not use `mdc-input` for search that filters page content. Use `mdc-searchfield` instead.
- * - Do not use `mdc-input` when the value must be chosen from a fixed set. Use `mdc-select` or `mdc-combobox` instead.
+ * - Do not use `mdc-input` for bounded numeric entry that benefits from stepwise
+ *   adjustment, such as quantities, counts, or prices. Use `mdc-numberinput`
+ *   instead. `mdc-input` remains the right choice for numeric-looking values that
+ *   are really strings — phone numbers, PINs, or account codes — where formatting
+ *   must be preserved and arithmetic stepping is meaningless.
+ * - Do not use `mdc-input` for multi-line entry such as messages or comments. Use
+ *   `mdc-textarea` instead.
+ * - Do not use `mdc-input` for masked credentials that need a show/hide toggle.
+ *   Use `mdc-password` instead.
+ * - Do not use `mdc-input` for search that filters page content. Use
+ *   `mdc-searchfield` instead.
+ * - Do not use `mdc-input` when the value must be chosen from a fixed set. Use
+ *   `mdc-select` or `mdc-combobox` instead.
  * 
  * @tagname mdc-input
  * 

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

@@ -0,0 +1,90 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/numberinput';
+import type { Events as EventsInherited0 } from '../../components/input/input.types';
+import type { Events as EventsInherited1 } from '../../utils/mixins/CharacterLimitMixin.ts';
+/**
+ * The `mdc-numberinput` lets users enter and adjust a single numeric value,
+ * pairing a numeric text field with increment and decrement spinner buttons and
+ * native range and step validation. It exists for bounded or precise numeric entry
+ * — quantities, prices, durations — where users benefit from both direct typing
+ * and small stepwise adjustments.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-numberinput` to collect a single numeric value that users may want to
+ *   fine-tune in small increments, such as a quantity, count, or price.
+ * - Use `mdc-numberinput` with `min` and `max` to constrain input to a valid
+ *   range, and `step` to set the amount each spinner button click or arrow-key
+ *   press changes the value.
+ * - Use `mdc-numberinput` `step="any"` to accept decimal values without
+ *   step-mismatch validation. For values that must follow a fixed increment, such
+ *   as currency, set a numeric step like `step="0.01"` instead.
+ * - Use `mdc-numberinput` `hide-spinner-buttons` when the field should behave as a
+ *   plain numeric input without visible spinner controls.
+ * 
+ * **When not to use**
+ * 
+ * - Do not use `mdc-numberinput` for identifiers or formatted values such as phone
+ *   numbers, PINs, or account codes. Use `mdc-input` — these values are strings
+ *   rather than quantities, and number-field operations can alter their
+ *   formatting.
+ * - Do not use `mdc-numberinput` to choose from a small fixed set of numeric
+ *   options. Use `mdc-select` or a group of `mdc-radio` controls.
+ * - Do not use `mdc-numberinput` for coarse selection across a large range where
+ *   an exact value is not important. Use `mdc-slider`.
+ * - Do not use `mdc-numberinput` for time entry. Use `mdc-timepicker`.
+ * 
+ * @tagname mdc-numberinput
+ * 
+ * @event input - (React: onInput) This event is dispatched when the value of the number field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the number field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the number field receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the number field loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the number field is cleared.
+ * 
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ * 
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing content. If not provided, the increment/decrement spinner buttons are rendered by default; set `hideSpinnerButtons` to true to render the clear button instead (when `trailingButton` is set to true).
+ * 
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing content.
+ * @csspart input-section - The container that wraps the input field and prefix text.
+ * @csspart input-text - The input field element.
+ * @csspart spinner-buttons - The container that wraps the increment and decrement spinner buttons.
+ * @csspart spinner-button - Each of the increment/decrement spinner button elements.
+ * @csspart label - The label element.
+ * @csspart helper-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ * 
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onInput: EventName<EventsInherited0["onInputEvent"]>;
+    onChange: EventName<EventsInherited0["onChangeEvent"]>;
+    onFocus: EventName<EventsInherited0["onFocusEvent"]>;
+    onBlur: EventName<EventsInherited0["onBlurEvent"]>;
+    onClear: EventName<EventsInherited0["onClearEvent"]>;
+    onLimitExceeded: EventName<EventsInherited1["onLimitExceededEvent"]>;
+}>;
+export default reactWrapper;

package/dist/react/numberinput/index.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/numberinput';
+import { TAG_NAME } from '../../components/numberinput/numberinput.constants';
+/**
+ * @tagname mdc-numberinput
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the number field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the number field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the number field receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the number field loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the number field is cleared.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing content. If not provided, the increment/decrement spinner buttons are rendered by default; set `hideSpinnerButtons` to true to render the clear button instead (when `trailingButton` is set to true).
+ *
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing content.
+ * @csspart input-section - The container that wraps the input field and prefix text.
+ * @csspart input-text - The input field element.
+ * @csspart spinner-buttons - The container that wraps the increment and decrement spinner buttons.
+ * @csspart spinner-button - Each of the increment/decrement spinner button elements.
+ * @csspart label - The label element.
+ * @csspart helper-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onInput: 'input',
+        onChange: 'change',
+        onFocus: 'focus',
+        onBlur: 'blur',
+        onClear: 'clear',
+        onLimitExceeded: 'limitexceeded',
+    },
+    displayName: 'NumberInput',
+});
+export default reactWrapper;

package/dist/utils/dom.js

@@ -183,6 +183,7 @@ export const findFocusable = (root, options = {}) => {
     const stopAtNonTabbable = (_d = options === null || options === void 0 ? void 0 : options.stopAtNonTabbable) !== null && _d !== void 0 ? _d : false;
     const matches = new Set([]);
     const internalFocusableCheck = (element) => {
+        var _a;
         // Excluded
         if (excludesSet.has(root) || isMatchAny(element, excludeSelectors))
             return 'stop';
@@ -198,6 +199,8 @@ export const findFocusable = (root, options = {}) => {
                 return 'stop';
             }
         }
+        if ((_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.delegatesFocus)
+            return 'continue';
         return isMatchAny(element, includeSelectors) || (isTabbable(element) && isInteractiveElement(element))
             ? 'focusable'
             : 'continue';

package/dist/utils/number.d.ts

@@ -0,0 +1 @@
+export declare function clamp(num: number, min: number | undefined, max: number | undefined): number;

package/dist/utils/number.js

@@ -0,0 +1,10 @@
+export function clamp(num, min, max) {
+    let result = num;
+    if (min !== undefined) {
+        result = Math.max(result, min);
+    }
+    if (max !== undefined) {
+        result = Math.min(result, max);
+    }
+    return result;
+}

package/package.json

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