@momentum-design/components 0.131.3 → 0.131.5

package/dist/custom-elements.json

@@ -12836,7 +12836,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\nUsers can type text to filter the options and select their desired choice.\n\nWhen the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\nIf the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n\nIf there is no text in the `no-result-text` attribute then nothing will be shown.\n\nCombobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\n**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.\n\nIf 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.\n\nTo understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).",
+          "description": "The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\nUsers can type text to filter the options and select their desired choice.\n\nWhen the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\nIf the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n\nIf there is no text in the `no-result-text` attribute then nothing will be shown.\n\nCombobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\nThe component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n\nEvery mdc-option should have a `value` attribute set to ensure proper form submission.\n\nTo set a default option, use the `selected` attribute on the `mdc-option` element.\n\nWhen 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\nwith the selected option details when the user makes a selection or types in the input, but it won't update the selected value internally.\nThe 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.\n\n**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.\n\nIf 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.\n\nTo understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).",
           "name": "Combobox",
           "cssProperties": [
             {
@@ -13900,7 +13900,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-combobox",
-          "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * **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.\n *\n * 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.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @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.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\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 that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox-base - The base container element of the combobox.\n * @csspart combobox-button - The button element of the combobox.\n * @csspart combobox-button-icon - The icon element of the button of the combobox.\n */",
+          "jsDoc": "/**\n * The Combobox component is a text-based dropdown control that allows users to select an option from a predefined list.\n * Users can type text to filter the options and select their desired choice.\n *\n * When the user starts typing, the filter uses a \"starts with\" search and displays options based on the text entered by the user.\n * If the user entered text that doesn't match with any of the options, then the text in the `no-result-text` attribute will be displayed.\n *\n * If there is no text in the `no-result-text` attribute then nothing will be shown.\n *\n * Combobox is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n * The component ensures accessibility and usability while handling various use cases, including long text truncation with tooltip support.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n *\n * 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\n * 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.\n * 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.\n *\n * **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.\n *\n * 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.\n *\n * To understand more about combobox and its patterns, refer to this [WCAG example](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).\n *\n * @dependency mdc-buttonsimple\n * @dependency mdc-icon\n * @dependency mdc-input\n * @dependency mdc-listitem\n * @dependency mdc-popover\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @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.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n *\n * @event click - (React: onClick) This event is dispatched when the combobox is clicked.\n * @event change - (React: onChange) This event is dispatched when the combobox is changed.\n * @event input - (React: onInput) This event is dispatched when the combobox is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the combobox.\n * @event focus - (React: onFocus) This event is dispatched when the combobox receives focus.\n *\n * @cssproperty --mdc-combobox-border-color - The border color of the combobox\n * @cssproperty --mdc-combobox-icon-color - The icon color of the combobox\n * @cssproperty --mdc-combobox-listbox-height - The height of the listbox inside the combobox\n * @cssproperty --mdc-combobox-listbox-width - The width of the listbox inside the combobox\n * @cssproperty --mdc-combobox-width - The width of the combobox\n * @cssproperty --mdc-combobox-hover-background-color - The background color of the combobox when hovered\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\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 that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart internal-native-input - The internal native input element of the combobox.\n * @csspart input-text - The input element of the combobox.\n * @csspart no-result-text - The no result text element of the combobox.\n * @csspart combobox-base - The base container element of the combobox.\n * @csspart combobox-button - The button element of the combobox.\n * @csspart combobox-button-icon - The icon element of the button of the combobox.\n */",
           "customElement": true
         }
       ],
@@ -18089,6 +18089,15 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true }"
+            },
             {
               "kind": "field",
               "name": "size",
@@ -30551,6 +30560,19 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true }",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "showButtonAriaLabel",
@@ -36629,6 +36651,19 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true }",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "size",
@@ -38195,6 +38230,19 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...FormfieldWrapper.shadowRootOptions, delegatesFocus: true }",
+              "inheritedFrom": {
+                "name": "Input",
+                "module": "components/input/input.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "size",

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

@@ -17,6 +17,10 @@ import type { Events } from '../../components/combobox/combobox.types';
  *
  * 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.

package/dist/react/combobox/index.js

@@ -18,6 +18,10 @@ import { TAG_NAME } from '../../components/combobox/combobox.constants';
  *
  * 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.

package/dist/utils/keys.d.ts

@@ -3,6 +3,7 @@ declare const KEYS: {
     ARROW_LEFT: string;
     ARROW_RIGHT: string;
     ARROW_UP: string;
+    BACKSPACE: string;
     END: string;
     ENTER: string;
     ESCAPE: string;

package/dist/utils/keys.js

@@ -3,6 +3,7 @@ const KEYS = {
     ARROW_LEFT: 'ArrowLeft',
     ARROW_RIGHT: 'ArrowRight',
     ARROW_UP: 'ArrowUp',
+    BACKSPACE: 'Backspace',
     END: 'End',
     ENTER: 'Enter',
     ESCAPE: 'Escape',

package/package.json

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