@momentum-design/components 0.130.8 → 0.131.0

package/dist/custom-elements.json

@@ -45334,6 +45334,1224 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/timepicker/timepicker.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-timepicker is a component that allows users to select a specific time\nor enter a time manually. It supports both 12-hour and 24-hour formats.\n\nThe 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\nUsers 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",
+          "name": "TimePicker",
+          "cssProperties": [
+            {
+              "description": "Background color of the timepicker input.",
+              "name": "--mdc-timepicker-background-color"
+            },
+            {
+              "description": "Border color of the timepicker input.",
+              "name": "--mdc-timepicker-border-color"
+            },
+            {
+              "description": "Text color of the timepicker input.",
+              "name": "--mdc-timepicker-text-color"
+            },
+            {
+              "description": "Width of the timepicker component.",
+              "name": "--mdc-timepicker-width"
+            },
+            {
+              "description": "Font size for the label text.",
+              "name": "--mdc-label-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the label text.",
+              "name": "--mdc-label-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the label text.",
+              "name": "--mdc-label-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the label text.",
+              "name": "--mdc-label-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font size for the help text.",
+              "name": "--mdc-help-text-font-size",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Font weight for the help text.",
+              "name": "--mdc-help-text-font-weight",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Line height for the help text.",
+              "name": "--mdc-help-text-line-height",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the help text.",
+              "name": "--mdc-help-text-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Color for the required indicator text.",
+              "name": "--mdc-required-indicator-color",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for the label and required indicator elements.",
+              "name": "label-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The required indicator element.",
+              "name": "required-indicator",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The info icon button element.",
+              "name": "info-icon-btn",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The toggletip element.",
+              "name": "label-toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation text element.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The helper/validation icon element.",
+              "name": "helper-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The container for helper/validation elements.",
+              "name": "help-text-container",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "The outer container for the input and popover.",
+              "name": "container"
+            },
+            {
+              "description": "The input container with border and background.",
+              "name": "base-container"
+            },
+            {
+              "description": "The container for spinbutton elements.",
+              "name": "spinbutton-group"
+            },
+            {
+              "description": "A spinbutton input element.",
+              "name": "spinbutton"
+            },
+            {
+              "description": "The colon separator between spinbuttons.",
+              "name": "separator"
+            },
+            {
+              "description": "The AM/PM period spinbutton.",
+              "name": "period"
+            },
+            {
+              "description": "The dropdown arrow button container.",
+              "name": "icon-container"
+            },
+            {
+              "description": "The hidden native input for form participation.",
+              "name": "native-input"
+            },
+            {
+              "description": "The dropdown list container.",
+              "name": "listbox"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the label element.",
+              "name": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the toggletip info icon button.",
+              "name": "toggletip",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the helper/validation icon.",
+              "name": "help-icon",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "description": "Slot for the helper/validation text.",
+              "name": "help-text",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "appendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID that the popover will be appended to.\nThis is useful when the timepicker is inside a scrollable container\nand the popover needs to be portalled to avoid clipping.",
+              "attribute": "append-to",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "backdropAppendTo",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be appended to (if backdrop is enabled).\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the timepicker.",
+              "attribute": "backdrop-append-to",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableFlip",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the dropdown should flip its position when it hits the boundary.",
+              "default": "false",
+              "attribute": "disable-flip",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "default": "'default'",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "interval",
+              "type": {
+                "text": "number"
+              },
+              "description": "The interval in minutes between time options in the dropdown menu.",
+              "default": "30",
+              "attribute": "interval",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "localeAmLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the AM period.\nConsumers must provide a translated string.",
+              "attribute": "locale-am-label"
+            },
+            {
+              "kind": "field",
+              "name": "localeHoursLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the hours spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-hours-label"
+            },
+            {
+              "kind": "field",
+              "name": "localeHoursPlaceholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the hours spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-hours-placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "localeMinutesLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the minutes spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-minutes-label"
+            },
+            {
+              "kind": "field",
+              "name": "localeMinutesPlaceholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the minutes spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-minutes-placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "localePeriodLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the period (AM/PM) spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-period-label"
+            },
+            {
+              "kind": "field",
+              "name": "localePeriodPlaceholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the period spinbutton.\nConsumers must provide a translated string.",
+              "attribute": "locale-period-placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "localePmLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the PM period.\nConsumers must provide a translated string.",
+              "attribute": "locale-pm-label"
+            },
+            {
+              "kind": "field",
+              "name": "localeShowTimePickerLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the dropdown toggle button.\nConsumers must provide a translated string.",
+              "attribute": "locale-show-time-picker-label"
+            },
+            {
+              "kind": "field",
+              "name": "localeSpinbuttonDescription",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible description for spinbutton inputs (instruction text).\nConsumers must provide a translated string.",
+              "attribute": "locale-spinbutton-description"
+            },
+            {
+              "kind": "field",
+              "name": "localeTimeOptionsLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the time options listbox.\nConsumers must provide a translated string.",
+              "attribute": "locale-time-options-label"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The maximum allowed time value in 24-hour format (HH:MM).",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The minimum allowed time value in 24-hour format (HH:MM).",
+              "attribute": "min",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placement of the popover dropdown.",
+              "default": "'bottom-start'",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the form field is read-only.",
+              "attribute": "readonly",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the label container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the form field is soft-disabled.",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "strategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The strategy for positioning the popover.",
+              "default": "'absolute'",
+              "attribute": "strategy",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "timeFormat",
+              "type": {
+                "text": "TimeFormat"
+              },
+              "description": "The time format to use for display.\n- `'12h'`: 12-hour format with AM/PM period\n- `'24h'`: 24-hour format without period",
+              "default": "'12h'",
+              "attribute": "time-format",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipStrategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
+              "default": "'absolute'",
+              "attribute": "toggletip-strategy",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onInput) This event is dispatched when the time value changes.",
+              "reactName": "onInput"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onChange) This event is dispatched when the time value is committed.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the timepicker receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onBlur) This event is dispatched when the timepicker loses focus.",
+              "name": "blur",
+              "reactName": "onBlur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "time-format",
+              "type": {
+                "text": "TimeFormat"
+              },
+              "description": "The time format to use for display.\n- `'12h'`: 12-hour format with AM/PM period\n- `'24h'`: 24-hour format without period",
+              "default": "'12h'",
+              "fieldName": "timeFormat"
+            },
+            {
+              "name": "interval",
+              "type": {
+                "text": "number"
+              },
+              "description": "The interval in minutes between time options in the dropdown menu.",
+              "default": "30",
+              "fieldName": "interval"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "description": "The placement of the popover dropdown.",
+              "default": "'bottom-start'",
+              "fieldName": "placement"
+            },
+            {
+              "name": "strategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The strategy for positioning the popover.",
+              "default": "'absolute'",
+              "fieldName": "strategy"
+            },
+            {
+              "name": "disable-flip",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether the dropdown should flip its position when it hits the boundary.",
+              "default": "false",
+              "fieldName": "disableFlip"
+            },
+            {
+              "name": "append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID that the popover will be appended to.\nThis is useful when the timepicker is inside a scrollable container\nand the popover needs to be portalled to avoid clipping.",
+              "fieldName": "appendTo"
+            },
+            {
+              "name": "backdrop-append-to",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Element ID the backdrop will be appended to (if backdrop is enabled).\nThis is useful to ensure that the backdrop is appended to the correct element in the DOM.\nIf not set, the backdrop will be appended to the parent element of the timepicker.",
+              "fieldName": "backdropAppendTo"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The minimum allowed time value in 24-hour format (HH:MM).",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The maximum allowed time value in 24-hour format (HH:MM).",
+              "fieldName": "max"
+            },
+            {
+              "name": "locale-hours-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the hours spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localeHoursLabel"
+            },
+            {
+              "name": "locale-minutes-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the minutes spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localeMinutesLabel"
+            },
+            {
+              "name": "locale-period-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the period (AM/PM) spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localePeriodLabel"
+            },
+            {
+              "name": "locale-hours-placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the hours spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localeHoursPlaceholder"
+            },
+            {
+              "name": "locale-minutes-placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the minutes spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localeMinutesPlaceholder"
+            },
+            {
+              "name": "locale-period-placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text for the period spinbutton.\nConsumers must provide a translated string.",
+              "fieldName": "localePeriodPlaceholder"
+            },
+            {
+              "name": "locale-am-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the AM period.\nConsumers must provide a translated string.",
+              "fieldName": "localeAmLabel"
+            },
+            {
+              "name": "locale-pm-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label for the PM period.\nConsumers must provide a translated string.",
+              "fieldName": "localePmLabel"
+            },
+            {
+              "name": "locale-show-time-picker-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the dropdown toggle button.\nConsumers must provide a translated string.",
+              "fieldName": "localeShowTimePickerLabel"
+            },
+            {
+              "name": "locale-time-options-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the time options listbox.\nConsumers must provide a translated string.",
+              "fieldName": "localeTimeOptionsLabel"
+            },
+            {
+              "name": "locale-spinbutton-description",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible description for spinbutton inputs (instruction text).\nConsumers must provide a translated string.",
+              "fieldName": "localeSpinbuttonDescription"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "default": "'default'",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "toggletip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the info icon is clicked or pressed.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "toggletip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is clicked or pressed.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "toggletip-strategy",
+              "type": {
+                "text": "PopoverStrategy"
+              },
+              "description": "The positioning strategy for the toggletip.\n- **absolute**: Positioned relative to the nearest positioned ancestor.\n- **fixed**: Positioned relative to the viewport.",
+              "default": "'absolute'",
+              "fieldName": "toggletipStrategy",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "info-icon-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the form field is read-only.",
+              "fieldName": "readonly",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the form field is soft-disabled.",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "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 */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TimePicker",
+            "module": "components/timepicker/timepicker.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toast/toast.component.js",