@daikin-oss/design-system-web-components 2.0.1-next.1 → 2.1.0-next.3

package/custom-elements.json

@@ -1171,30 +1171,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/constants/events.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "EVENT_CLOSE",
-          "type": {
-            "text": "string"
-          },
-          "default": "\"close\""
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EVENT_CLOSE",
-          "declaration": {
-            "name": "EVENT_CLOSE",
-            "module": "src/constants/events.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/es/components/index.js",
@@ -1762,6 +1738,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/constants/events.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "EVENT_CLOSE",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"close\""
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EVENT_CLOSE",
+          "declaration": {
+            "name": "EVENT_CLOSE",
+            "module": "src/constants/events.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/es/controllers/block-scroll.js",
@@ -6276,13 +6276,33 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A carousel is a component that displays multiple pieces of information by sliding left and right within a fixed height area.\n\nThe carousel component can be operated in several ways (Control, Indicator, and Swipe), but it is not possible to hide all of these, as this would prevent the user from being able to operate the carousel component.\n\nHierarchy:\n- `daikin-carousel` > `daikin-carousel-item`",
+          "description": "A carousel is a component that displays multiple pieces of information by sliding left and right within a fixed height area.\n\nPowered by embla-carousel for smooth, native-feeling interactions and infinite loops.\n\nHierarchy:\n- `daikin-carousel` > `daikin-carousel-item`",
           "name": "DaikinCarousel",
           "cssProperties": [
             {
-              "description": "Specify the interval for the slide animation.",
+              "description": "Legacy transition duration in milliseconds. **Warning:** Mapped to Embla's duration option using 600ms = 25. This property may be removed in a future release; gradually migrate to the `duration` property instead.",
               "name": "--ddc-transition-duration",
               "default": "600ms"
+            },
+            {
+              "description": "The aspect ratio of every carousel item's media container.",
+              "name": "--ddc-item-aspect-ratio",
+              "default": "16/9"
+            },
+            {
+              "description": "How image/video content fits inside every carousel item's media container.",
+              "name": "--ddc-item-object-fit",
+              "default": "contain"
+            },
+            {
+              "description": "The default background color for the carousel items.",
+              "name": "--ddc-item-background-color",
+              "default": "var(--dds-color-common-surface-secondary)"
+            },
+            {
+              "description": "The gap between carousel items.",
+              "name": "--ddc-item-gap",
+              "default": "var(--dds-space-100)"
             }
           ],
           "slots": [
@@ -6299,10 +6319,42 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "The index number of the content currently being displayed.\nWhen controlling this property externally, listen to the `select` event and read the updated `currentIndex` from the component to keep your state in sync.",
+              "description": "The index number of the content currently being displayed.",
               "attribute": "current-index",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the carousel should loop back to the first item when the last item is reached.",
+              "attribute": "loop"
+            },
+            {
+              "kind": "field",
+              "name": "arrows",
+              "type": {
+                "text": "\"outside\" | \"inside\""
+              },
+              "description": "The position of the navigation arrows. Can be either \"outside\" or \"inside\".\n- \"outside\": Arrows are placed outside the carousel viewport.\n- \"inside\": Arrows are placed inside the carousel viewport.\nThe inside option is useful for carousels with a smaller width, where the arrows can be placed over the content without taking up additional space.\nWhen the width of viewport is smaller than mobile breakpoint (768px), the arrows will always be placed inside regardless of this property.",
+              "default": "\"outside\"",
+              "attribute": "arrows",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "description": "The higher this value, the slower the image scrolling animation. However, this value does not affect the sliding speed when the user is dragging the image, as that depends on the user's dragging speed.",
+              "default": "25",
+              "attribute": "duration",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_items",
@@ -6319,16 +6371,23 @@
                 "text": "number"
               },
               "privacy": "private",
-              "default": "0"
+              "default": "0",
+              "description": "Keeps track of the total number of slotted carousel items."
             },
             {
               "kind": "field",
-              "name": "_prevButton",
+              "name": "_emblaApi",
+              "type": {
+                "text": "EmblaCarouselType | undefined | undefined"
+              },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "_nextButton",
+              "name": "_mediaResizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
               "privacy": "private"
             },
             {
@@ -6336,6 +6395,43 @@
               "name": "_indicatorButtonsContainer",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_viewport",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_track",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_pendingOperation",
+              "type": {
+                "text": "\"prev\" | \"next\" | \"indicator\" | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_isDragging",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_getEmblaDuration",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_emitSelect",
@@ -6344,7 +6440,7 @@
                 {
                   "name": "operation",
                   "type": {
-                    "text": "\"prev\" | \"next\" | \"indicator\""
+                    "text": "\"prev\" | \"next\" | \"indicator\" | \"swipe\""
                   }
                 },
                 {
@@ -6355,6 +6451,28 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_initEmbla",
+              "privacy": "private",
+              "description": "Initializes or re-initializes the Embla instance when properties or slots change."
+            },
+            {
+              "kind": "field",
+              "name": "_onEmblaPointerDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onEmblaSettle",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onEmblaSelect",
+              "privacy": "private",
+              "description": "Embla event listener that synchronizes internal state when the user swipes or slides."
+            },
             {
               "kind": "method",
               "name": "_handleClickIndicator",
@@ -6386,24 +6504,24 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "_handleSlotchange",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "_moveBy",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "moveOffset",
+                  "name": "offset",
                   "type": {
                     "text": "1 | -1"
                   }
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handleSlotchange",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "_updateItemActive",
@@ -6496,7 +6614,7 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "If an item in the carousel is selected in some way, the method used to select it, the index number of the item displayed before it, and the index number of the item currently displayed are passed."
+              "description": "Fired when the carousel index changes. `event.detail` contains the triggering `operation` (`\"prev\"`, `\"next\"`, `\"indicator\"`, or `\"swipe\"`) and `beforeCurrentIndex`; read `currentIndex` for the selected index."
             }
           ],
           "attributes": [
@@ -6506,8 +6624,35 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "The index number of the content currently being displayed.\nWhen controlling this property externally, listen to the `select` event and read the updated `currentIndex` from the component to keep your state in sync.",
+              "description": "The index number of the content currently being displayed.",
               "fieldName": "currentIndex"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the carousel should loop back to the first item when the last item is reached.",
+              "fieldName": "loop"
+            },
+            {
+              "name": "arrows",
+              "type": {
+                "text": "\"outside\" | \"inside\""
+              },
+              "description": "The position of the navigation arrows. Can be either \"outside\" or \"inside\".\n- \"outside\": Arrows are placed outside the carousel viewport.\n- \"inside\": Arrows are placed inside the carousel viewport.\nThe inside option is useful for carousels with a smaller width, where the arrows can be placed over the content without taking up additional space.\nWhen the width of viewport is smaller than mobile breakpoint (768px), the arrows will always be placed inside regardless of this property.",
+              "default": "\"outside\"",
+              "fieldName": "arrows"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "description": "The higher this value, the slower the image scrolling animation. However, this value does not affect the sliding speed when the user is dragging the image, as that depends on the user's dragging speed.",
+              "default": "25",
+              "fieldName": "duration"
             }
           ],
           "superclass": {
@@ -6582,8 +6727,7 @@
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "_Internal use._\nItem's aria label.\nControlled by `daikin-carousel`.",
-              "privacy": "private"
+              "description": "The Aria label for the carousel item."
             },
             {
               "kind": "field",
@@ -7705,6 +7849,33 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_hasLeftIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "_handleLeftIconSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleRemoveClick",
@@ -8224,6 +8395,16 @@
               "name": "_closePopup",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_shouldRestoreFocusOnClose",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether focus should be restored to the input the next time the popup closes.\nThis is only `true` right before selecting an option, where hiding the popover blurs the\nclicked option button to `document.body`. It must stay `false` for closes caused by the\nfocus/click moving to something else (outside click, focusout), otherwise we would steal\nfocus back from whatever the user actually clicked."
+            },
             {
               "kind": "method",
               "name": "_handleLeftIconSlotChange",
@@ -8268,7 +8449,13 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "shouldFocusInput",
+                  "default": "false"
+                }
+              ]
             },
             {
               "kind": "method",
@@ -22152,34 +22339,23 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/text-field/daikin-text-field.js",
+      "path": "dist/es/components/text-masked-field/daikin-text-masked-field.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The text field component is a UI element that allows users to input single-line text data.\nIt functions similarly to the HTML `<input type=\"text\">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.\nCan be used within `daikin-input-group` component.\n\nHierarchies:\n- `daikin-text-field` (can be used solely)\n- `daikin-input-group` > `daikin-text-field`",
-          "name": "DaikinTextField",
+          "description": "The text masked field component is a UI element that allows users to input single-line text data with input masking support.\nIt functions similarly to the HTML `<input type=\"text\">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts with masking functionality using IMask.js.\nCan be used within `daikin-input-group` component.\n\nHierarchies:\n- `daikin-text-masked-field` (can be used solely)\n- `daikin-input-group` > `daikin-text-masked-field`",
+          "name": "DaikinTextMaskedField",
           "slots": [
             {
-              "description": "Specify the icon you want to use on the left. You can also use something other than `daikin-icon`. Available only if the type is one of: - `\"text\"` - `\"number\"` - `\"password\"` - `\"email\"` - `\"tel\"`",
+              "description": "Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.",
               "name": "left-icon"
             },
             {
-              "description": "Specify the icon you want to use on the right. You can also use something other than `daikin-icon`. Available only if the type is one of: - `\"text\"` - `\"email\"` - `\"tel\"`",
+              "description": "Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.",
               "name": "right-icon"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"number\" | \"password\" | \"email\" | \"tel\" | \"search\""
-              },
-              "description": "Type of field.\n\n- `\"text\"`: Basic text input with optional left and right icon slots.\n- `\"number\"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.\n- `\"password\"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.\n- `\"email\"`: Email input with optional left and right icon slots.\n- `\"tel\"`: Telephone input with optional left and right icon slots.\n- `\"search\"`: Search input with built-in search icon and clear button when value is present.",
-              "default": "\"text\"",
-              "attribute": "type",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -22197,7 +22373,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is readonly.",
+              "description": "Whether the text masked field is readonly.",
               "attribute": "readonly",
               "reflects": true
             },
@@ -22208,7 +22384,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text masked field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -22219,7 +22395,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text masked field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "attribute": "required",
               "reflects": true
             },
@@ -22258,79 +22434,42 @@
             },
             {
               "kind": "field",
-              "name": "step",
+              "name": "pattern",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Interval between values. This is valid when `type=\"number\"`.",
-              "attribute": "step",
+              "description": "The pattern of value.",
+              "attribute": "pattern",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "stepMode",
+              "name": "mask",
               "type": {
-                "text": "\"free\" | \"snap\""
+                "text": "string | FactoryOpts | null"
               },
-              "default": "\"free\"",
-              "description": "When `type=\"number\"`, whether to allow free input or snap to step boundaries.\n- `\"free\"`: Do not snap to step boundaries; increment/decrement relative to the current value.\n- `\"snap\"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).\nNote that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step=\"3\"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min=\"-4\"` is also set, the boundaries become `-4, -1, 2, 5, ...`.",
-              "attribute": "step-mode",
-              "reflects": true
+              "default": "null",
+              "description": "Input mask configuration. When provided as a string, it will be used as `{ mask: string, lazy: false }`.\nWhen provided as an object, it will be passed directly to IMask.\n\nPattern symbols:\n- `0` - any digit\n- `a` - any letter\n- `*` - any char\n- `[]` - make input optional\n- `{}` - include fixed part in unmasked value\n- `` ` `` - prevent symbols shift back\n- Other chars are treated as fixed\n- Use `\\\\` to escape definition characters (e.g., `\\\\0`)\n\nExamples:\n- `\"00/00/0000\"` - date format (MM/DD/YYYY)\n- `\"{#}000[aaa]/NIC-\\`*[**]\"` - complex pattern with optional parts\n\nFor more details, see: https://imask.js.org/guide.html#masked-pattern"
             },
             {
               "kind": "field",
-              "name": "min",
+              "name": "autocomplete",
               "type": {
-                "text": "string | null"
+                "text": "HTMLInputElement[\"autocomplete\"]"
               },
-              "default": "null",
-              "description": "The minimum value. This is valid when `type=\"number\"`.",
-              "attribute": "min",
+              "description": "Value of `autocomplete` attribute of the internal `<input>`.",
+              "attribute": "autocomplete",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "_unmaskedValue",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The maximum value. This is valid when `type=\"number\"`.",
-              "attribute": "max",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "pattern",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The pattern of value.",
-              "attribute": "pattern",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autocomplete",
-              "type": {
-                "text": "HTMLInputElement[\"autocomplete\"]"
-              },
-              "description": "Value of `autocomplete` attribute of the internal `<input>`.",
-              "attribute": "autocomplete",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "showPassword",
-              "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "When `type=\"password\"`, whether to display the password with a black dot or as text.",
-              "attribute": "show-password",
-              "reflects": true
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "field",
@@ -22363,31 +22502,44 @@
             {
               "kind": "field",
               "name": "_inputRef",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_maskInstance",
               "type": {
-                "text": "Ref<HTMLInputElement>"
+                "text": "InputMask<object> | null"
               },
               "privacy": "private",
-              "readonly": true
+              "default": "null"
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "_initializeMask",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "focus options"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_destroyMask",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "description": "Focuses on the inner input."
+              }
+            },
+            {
+              "kind": "field",
+              "name": "unmaskedValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "The unmasked value of the input."
             },
             {
               "kind": "method",
@@ -22435,36 +22587,7 @@
             },
             {
               "kind": "method",
-              "name": "_handleClearClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "_handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "_updateNumberValue",
-              "privacy": "private",
+              "name": "focus",
               "return": {
                 "type": {
                   "text": "void"
@@ -22472,12 +22595,15 @@
               },
               "parameters": [
                 {
-                  "name": "sign",
+                  "name": "options",
+                  "optional": true,
                   "type": {
-                    "text": "1 | -1"
-                  }
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
                 }
-              ]
+              ],
+              "description": "Focuses on the inner input."
             },
             {
               "kind": "method",
@@ -22489,16 +22615,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "_handleShowPasswordClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -22765,18 +22881,8 @@
               "description": "A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element."
             },
             {
-              "name": "input",
-              "type": {
-                "text": "Event"
-              },
-              "description": "A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event)."
-            },
-            {
-              "name": "toggle",
-              "type": {
-                "text": "Event"
-              },
-              "description": "Emitted when the user toggles the password mask."
+              "description": "A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).",
+              "name": "input"
             }
           ],
           "attributes": [
@@ -22817,15 +22923,6 @@
                 "module": "dist/es/base/dds-form-element.js"
               }
             },
-            {
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"number\" | \"password\" | \"email\" | \"tel\" | \"search\""
-              },
-              "description": "Type of field.\n\n- `\"text\"`: Basic text input with optional left and right icon slots.\n- `\"number\"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.\n- `\"password\"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.\n- `\"email\"`: Email input with optional left and right icon slots.\n- `\"tel\"`: Telephone input with optional left and right icon slots.\n- `\"search\"`: Search input with built-in search icon and clear button when value is present.",
-              "default": "\"text\"",
-              "fieldName": "type"
-            },
             {
               "name": "placeholder",
               "type": {
@@ -22840,7 +22937,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is readonly.",
+              "description": "Whether the text masked field is readonly.",
               "fieldName": "readonly"
             },
             {
@@ -22849,7 +22946,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text masked field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "disabled"
             },
             {
@@ -22858,7 +22955,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text masked field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "required"
             },
             {
@@ -22888,42 +22985,6 @@
               "description": "Maximum length of value.",
               "fieldName": "maxlength"
             },
-            {
-              "name": "step",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Interval between values. This is valid when `type=\"number\"`.",
-              "fieldName": "step"
-            },
-            {
-              "name": "step-mode",
-              "type": {
-                "text": "\"free\" | \"snap\""
-              },
-              "default": "\"free\"",
-              "description": "When `type=\"number\"`, whether to allow free input or snap to step boundaries.\n- `\"free\"`: Do not snap to step boundaries; increment/decrement relative to the current value.\n- `\"snap\"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).\nNote that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step=\"3\"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min=\"-4\"` is also set, the boundaries become `-4, -1, 2, 5, ...`.",
-              "fieldName": "stepMode"
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The minimum value. This is valid when `type=\"number\"`.",
-              "fieldName": "min"
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The maximum value. This is valid when `type=\"number\"`.",
-              "fieldName": "max"
-            },
             {
               "name": "pattern",
               "type": {
@@ -22940,47 +23001,54 @@
               },
               "description": "Value of `autocomplete` attribute of the internal `<input>`.",
               "fieldName": "autocomplete"
-            },
-            {
-              "name": "show-password",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When `type=\"password\"`, whether to display the password with a black dot or as text.",
-              "fieldName": "showPassword"
             }
           ],
           "superclass": {
             "name": "DDSFormElement",
             "module": "/src/base"
           },
-          "tagName": "daikin-text-field",
+          "tagName": "daikin-text-masked-field",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DaikinTextField",
+          "name": "FactoryOpts",
           "declaration": {
-            "name": "DaikinTextField",
-            "module": "src/components/text-field/daikin-text-field.ts"
+            "name": "FactoryOpts",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "InputMask",
+          "declaration": {
+            "name": "InputMask",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DaikinTextMaskedField",
+          "declaration": {
+            "name": "DaikinTextMaskedField",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "daikin-text-field",
+          "name": "daikin-text-masked-field",
           "declaration": {
-            "name": "DaikinTextField",
-            "module": "src/components/text-field/daikin-text-field.ts"
+            "name": "DaikinTextMaskedField",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/text-field/index.js",
+      "path": "dist/es/components/text-masked-field/index.js",
       "declarations": [],
       "exports": [
         {
@@ -22988,79 +23056,41 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/text-field/daikin-text-field"
+            "module": "src/components/text-masked-field/daikin-text-masked-field"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/text-field/number-utils.js",
+      "path": "dist/es/components/text-field/daikin-text-field.js",
       "declarations": [
         {
-          "kind": "function",
-          "name": "updateNumberValue",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "The text field component is a UI element that allows users to input single-line text data.\nIt functions similarly to the HTML `<input type=\"text\">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts, such as names, email addresses, or search queries.\nCan be used within `daikin-input-group` component.\n\nHierarchies:\n- `daikin-text-field` (can be used solely)\n- `daikin-input-group` > `daikin-text-field`",
+          "name": "DaikinTextField",
+          "slots": [
             {
-              "name": "currentValue",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current value as string"
-            },
-            {
-              "name": "direction",
-              "type": {
-                "text": "1 | -1"
-              },
-              "description": "Direction: 1 for increment, -1 for decrement"
-            },
-            {
-              "name": "options",
-              "type": {
-                "text": "NumberUpdateOptions"
-              },
-              "description": "The update options"
-            }
-          ],
-          "description": "Updates a number value according to step constraints and min/max bounds.\n\nLogic (compliant with Google Chrome behavior):\n0. Valid output range: min <= value <= max, and (value - min) is a multiple of step, or value equals min/max\n1. If max < min, direction up goes to min (max value), direction down goes to max (min value)\n2. If value is out of range or not on step boundary, round to nearest step in the direction and finish\n3. Otherwise, increment/decrement by step"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "updateNumberValue",
-          "declaration": {
-            "name": "updateNumberValue",
-            "module": "src/components/text-field/number-utils.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/components/text-masked-field/daikin-text-masked-field.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The text masked field component is a UI element that allows users to input single-line text data with input masking support.\nIt functions similarly to the HTML `<input type=\"text\">` tag, providing a simple and efficient way for users to enter and edit short pieces of texts with masking functionality using IMask.js.\nCan be used within `daikin-input-group` component.\n\nHierarchies:\n- `daikin-text-masked-field` (can be used solely)\n- `daikin-input-group` > `daikin-text-masked-field`",
-          "name": "DaikinTextMaskedField",
-          "slots": [
-            {
-              "description": "Specify the icon you want to use on the left. You can also use something other than `daikin-icon`.",
+              "description": "Specify the icon you want to use on the left. You can also use something other than `daikin-icon`. Available only if the type is one of: - `\"text\"` - `\"number\"` - `\"password\"` - `\"email\"` - `\"tel\"`",
               "name": "left-icon"
             },
             {
-              "description": "Specify the icon you want to use on the right. You can also use something other than `daikin-icon`.",
+              "description": "Specify the icon you want to use on the right. You can also use something other than `daikin-icon`. Available only if the type is one of: - `\"text\"` - `\"email\"` - `\"tel\"`",
               "name": "right-icon"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"number\" | \"password\" | \"email\" | \"tel\" | \"search\""
+              },
+              "description": "Type of field.\n\n- `\"text\"`: Basic text input with optional left and right icon slots.\n- `\"number\"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.\n- `\"password\"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.\n- `\"email\"`: Email input with optional left and right icon slots.\n- `\"tel\"`: Telephone input with optional left and right icon slots.\n- `\"search\"`: Search input with built-in search icon and clear button when value is present.",
+              "default": "\"text\"",
+              "attribute": "type",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -23078,7 +23108,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is readonly.",
+              "description": "Whether the text field is readonly.",
               "attribute": "readonly",
               "reflects": true
             },
@@ -23089,7 +23119,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -23100,7 +23130,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "attribute": "required",
               "reflects": true
             },
@@ -23139,23 +23169,58 @@
             },
             {
               "kind": "field",
-              "name": "pattern",
+              "name": "step",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The pattern of value.",
-              "attribute": "pattern",
+              "description": "Interval between values. This is valid when `type=\"number\"`.",
+              "attribute": "step",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "mask",
+              "name": "stepMode",
               "type": {
-                "text": "string | FactoryOpts | null"
+                "text": "\"free\" | \"snap\""
+              },
+              "default": "\"free\"",
+              "description": "When `type=\"number\"`, whether to allow free input or snap to step boundaries.\n- `\"free\"`: Do not snap to step boundaries; increment/decrement relative to the current value.\n- `\"snap\"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).\nNote that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step=\"3\"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min=\"-4\"` is also set, the boundaries become `-4, -1, 2, 5, ...`.",
+              "attribute": "step-mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "string | null"
               },
               "default": "null",
-              "description": "Input mask configuration. When provided as a string, it will be used as `{ mask: string, lazy: false }`.\nWhen provided as an object, it will be passed directly to IMask.\n\nPattern symbols:\n- `0` - any digit\n- `a` - any letter\n- `*` - any char\n- `[]` - make input optional\n- `{}` - include fixed part in unmasked value\n- `` ` `` - prevent symbols shift back\n- Other chars are treated as fixed\n- Use `\\\\` to escape definition characters (e.g., `\\\\0`)\n\nExamples:\n- `\"00/00/0000\"` - date format (MM/DD/YYYY)\n- `\"{#}000[aaa]/NIC-\\`*[**]\"` - complex pattern with optional parts\n\nFor more details, see: https://imask.js.org/guide.html#masked-pattern"
+              "description": "The minimum value. This is valid when `type=\"number\"`.",
+              "attribute": "min",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The maximum value. This is valid when `type=\"number\"`.",
+              "attribute": "max",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The pattern of value.",
+              "attribute": "pattern",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -23169,12 +23234,14 @@
             },
             {
               "kind": "field",
-              "name": "_unmaskedValue",
+              "name": "showPassword",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "private",
-              "default": "\"\""
+              "default": "false",
+              "description": "When `type=\"password\"`, whether to display the password with a black dot or as text.",
+              "attribute": "show-password",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -23207,44 +23274,31 @@
             {
               "kind": "field",
               "name": "_inputRef",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "_maskInstance",
               "type": {
-                "text": "InputMask<object> | null"
+                "text": "Ref<HTMLInputElement>"
               },
               "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "method",
-              "name": "_initializeMask",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "_destroyMask",
-              "privacy": "private",
+              "name": "focus",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "unmaskedValue",
-              "type": {
-                "text": "string"
               },
-              "description": "The unmasked value of the input."
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner input."
             },
             {
               "kind": "method",
@@ -23292,7 +23346,18 @@
             },
             {
               "kind": "method",
-              "name": "focus",
+              "name": "_handleClearClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleKeyDown",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -23300,15 +23365,30 @@
               },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "focus options"
+                    "text": "KeyboardEvent"
+                  }
                 }
-              ],
-              "description": "Focuses on the inner input."
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_updateNumberValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "sign",
+                  "type": {
+                    "text": "1 | -1"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -23320,6 +23400,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_handleShowPasswordClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -23586,8 +23676,18 @@
               "description": "A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element."
             },
             {
-              "description": "A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).",
-              "name": "input"
+              "name": "input",
+              "type": {
+                "text": "Event"
+              },
+              "description": "A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event)."
+            },
+            {
+              "name": "toggle",
+              "type": {
+                "text": "Event"
+              },
+              "description": "Emitted when the user toggles the password mask."
             }
           ],
           "attributes": [
@@ -23628,6 +23728,15 @@
                 "module": "dist/es/base/dds-form-element.js"
               }
             },
+            {
+              "name": "type",
+              "type": {
+                "text": "\"text\" | \"number\" | \"password\" | \"email\" | \"tel\" | \"search\""
+              },
+              "description": "Type of field.\n\n- `\"text\"`: Basic text input with optional left and right icon slots.\n- `\"number\"`: Numeric input with increment/decrement buttons, arrow key support, and optional left icon slot.\n- `\"password\"`: Password input with show/hide toggle button to control mask of password and optional left icon slot.\n- `\"email\"`: Email input with optional left and right icon slots.\n- `\"tel\"`: Telephone input with optional left and right icon slots.\n- `\"search\"`: Search input with built-in search icon and clear button when value is present.",
+              "default": "\"text\"",
+              "fieldName": "type"
+            },
             {
               "name": "placeholder",
               "type": {
@@ -23642,7 +23751,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is readonly.",
+              "description": "Whether the text field is readonly.",
               "fieldName": "readonly"
             },
             {
@@ -23651,7 +23760,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text field is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "disabled"
             },
             {
@@ -23660,7 +23769,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "description": "Whether the text field is required.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "required"
             },
             {
@@ -23690,6 +23799,42 @@
               "description": "Maximum length of value.",
               "fieldName": "maxlength"
             },
+            {
+              "name": "step",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Interval between values. This is valid when `type=\"number\"`.",
+              "fieldName": "step"
+            },
+            {
+              "name": "step-mode",
+              "type": {
+                "text": "\"free\" | \"snap\""
+              },
+              "default": "\"free\"",
+              "description": "When `type=\"number\"`, whether to allow free input or snap to step boundaries.\n- `\"free\"`: Do not snap to step boundaries; increment/decrement relative to the current value.\n- `\"snap\"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).\nNote that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step=\"3\"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min=\"-4\"` is also set, the boundaries become `-4, -1, 2, 5, ...`.",
+              "fieldName": "stepMode"
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The minimum value. This is valid when `type=\"number\"`.",
+              "fieldName": "min"
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The maximum value. This is valid when `type=\"number\"`.",
+              "fieldName": "max"
+            },
             {
               "name": "pattern",
               "type": {
@@ -23706,54 +23851,47 @@
               },
               "description": "Value of `autocomplete` attribute of the internal `<input>`.",
               "fieldName": "autocomplete"
+            },
+            {
+              "name": "show-password",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `type=\"password\"`, whether to display the password with a black dot or as text.",
+              "fieldName": "showPassword"
             }
           ],
           "superclass": {
             "name": "DDSFormElement",
             "module": "/src/base"
           },
-          "tagName": "daikin-text-masked-field",
+          "tagName": "daikin-text-field",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FactoryOpts",
-          "declaration": {
-            "name": "FactoryOpts",
-            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "InputMask",
-          "declaration": {
-            "name": "InputMask",
-            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DaikinTextMaskedField",
+          "name": "DaikinTextField",
           "declaration": {
-            "name": "DaikinTextMaskedField",
-            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
+            "name": "DaikinTextField",
+            "module": "src/components/text-field/daikin-text-field.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "daikin-text-masked-field",
+          "name": "daikin-text-field",
           "declaration": {
-            "name": "DaikinTextMaskedField",
-            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
+            "name": "DaikinTextField",
+            "module": "src/components/text-field/daikin-text-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/text-masked-field/index.js",
+      "path": "dist/es/components/text-field/index.js",
       "declarations": [],
       "exports": [
         {
@@ -23761,7 +23899,56 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/text-masked-field/daikin-text-masked-field"
+            "module": "src/components/text-field/daikin-text-field"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/components/text-field/number-utils.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "updateNumberValue",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "currentValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current value as string"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "1 | -1"
+              },
+              "description": "Direction: 1 for increment, -1 for decrement"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "NumberUpdateOptions"
+              },
+              "description": "The update options"
+            }
+          ],
+          "description": "Updates a number value according to step constraints and min/max bounds.\n\nLogic (compliant with Google Chrome behavior):\n0. Valid output range: min <= value <= max, and (value - min) is a multiple of step, or value equals min/max\n1. If max < min, direction up goes to min (max value), direction down goes to max (min value)\n2. If value is out of range or not on step boundary, round to nearest step in the direction and finish\n3. Otherwise, increment/decrement by step"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "updateNumberValue",
+          "declaration": {
+            "name": "updateNumberValue",
+            "module": "src/components/text-field/number-utils.ts"
           }
         }
       ]