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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @daikin-oss/design-system-web-components
 
+## 2.1.0-next.3
+
+### Patch Changes
+
+- [#535](https://github.com/dsv-rp/DDS/pull/535) [`4d21235`](https://github.com/dsv-rp/DDS/commit/4d2123538bdc74be6594bdfbe8cd9eb13e2a2ee8) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Chore: Fixed an issue where the time picker could not be opened in the next version.
+
 ## 2.1.0-next.2
 
 ### Minor Changes

package/custom-elements.json

@@ -22339,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",
@@ -22384,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
             },
@@ -22395,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
             },
@@ -22406,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
             },
@@ -22445,58 +22434,23 @@
             },
             {
               "kind": "field",
-              "name": "step",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Interval between values. This is valid when `type=\"number\"`.",
-              "attribute": "step",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "stepMode",
-              "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, ...`.",
-              "attribute": "step-mode",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "min",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The minimum value. This is valid when `type=\"number\"`.",
-              "attribute": "min",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "max",
+              "name": "pattern",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The maximum value. This is valid when `type=\"number\"`.",
-              "attribute": "max",
+              "description": "The pattern of value.",
+              "attribute": "pattern",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "pattern",
+              "name": "mask",
               "type": {
-                "text": "string | null"
+                "text": "string | FactoryOpts | null"
               },
               "default": "null",
-              "description": "The pattern of value.",
-              "attribute": "pattern",
-              "reflects": true
+              "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",
@@ -22510,14 +22464,12 @@
             },
             {
               "kind": "field",
-              "name": "showPassword",
+              "name": "_unmaskedValue",
               "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",
@@ -22550,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",
@@ -22622,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"
@@ -22659,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",
@@ -22676,16 +22615,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "_handleShowPasswordClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -22952,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": [
@@ -23004,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": {
@@ -23027,7 +22937,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text field is readonly.",
+              "description": "Whether the text masked field is readonly.",
               "fieldName": "readonly"
             },
             {
@@ -23036,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"
             },
             {
@@ -23045,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"
             },
             {
@@ -23075,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": {
@@ -23127,127 +23001,96 @@
               },
               "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": "custom-element-definition",
-          "name": "daikin-text-field",
+          "kind": "js",
+          "name": "InputMask",
           "declaration": {
-            "name": "DaikinTextField",
-            "module": "src/components/text-field/daikin-text-field.ts"
+            "name": "InputMask",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/components/text-field/index.js",
-      "declarations": [],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "*",
+          "name": "DaikinTextMaskedField",
           "declaration": {
-            "name": "*",
-            "module": "src/components/text-field/daikin-text-field"
+            "name": "DaikinTextMaskedField",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "daikin-text-masked-field",
+          "declaration": {
+            "name": "DaikinTextMaskedField",
+            "module": "src/components/text-masked-field/daikin-text-masked-field.ts"
           }
         }
       ]
     },
     {
       "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"
-        }
-      ],
+      "path": "dist/es/components/text-masked-field/index.js",
+      "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "updateNumberValue",
+          "name": "*",
           "declaration": {
-            "name": "updateNumberValue",
-            "module": "src/components/text-field/number-utils.ts"
+            "name": "*",
+            "module": "src/components/text-masked-field/daikin-text-masked-field"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/text-masked-field/daikin-text-masked-field.js",
+      "path": "dist/es/components/text-field/daikin-text-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",
+          "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": [
             {
-              "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",
@@ -23265,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
             },
@@ -23276,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
             },
@@ -23287,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
             },
@@ -23326,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",
@@ -23356,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",
@@ -23394,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",
@@ -23479,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"
@@ -23487,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",
@@ -23507,6 +23400,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_handleShowPasswordClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "reflectInputGroup",
@@ -23773,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": [
@@ -23815,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": {
@@ -23829,7 +23751,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the text masked field is readonly.",
+              "description": "Whether the text field is readonly.",
               "fieldName": "readonly"
             },
             {
@@ -23838,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"
             },
             {
@@ -23847,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"
             },
             {
@@ -23877,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": {
@@ -23893,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": [
         {
@@ -23948,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"
           }
         }
       ]

package/dist/cjs/base/dds-element.cjs

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends lit.LitElement {
 	static {
-		this.version = "2.1.0-next.2";
+		this.version = "2.1.0-next.3";
 	}
 	/**
 	* Override of LitElement's getPropertyDescriptor to add support for fallback values

package/dist/cjs/controllers/click-outside.cjs

@@ -9,7 +9,7 @@ let lit = require("lit");
 */
 var clickOutsideDirective = require_controller_directive.createControllerDirective((element, callback) => {
 	const listener = (event) => {
-		if (!event.target || element.contains(event.target)) return;
+		if (event.composedPath().includes(element)) return;
 		callback.call(element, event);
 	};
 	window.addEventListener("pointerdown", listener, true);

package/dist/cjs-dev/base/dds-element.cjs

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends lit.LitElement {
 	static {
-		this.version = "2.1.0-next.2";
+		this.version = "2.1.0-next.3";
 	}
 	/**
 	* Override of LitElement's getPropertyDescriptor to add support for fallback values

package/dist/cjs-dev/controllers/click-outside.cjs

@@ -9,7 +9,7 @@ let lit = require("lit");
 */
 var clickOutsideDirective = require_controller_directive.createControllerDirective((element, callback) => {
 	const listener = (event) => {
-		if (!event.target || element.contains(event.target)) return;
+		if (event.composedPath().includes(element)) return;
 		callback.call(element, event);
 	};
 	window.addEventListener("pointerdown", listener, true);

package/dist/es/base/dds-element.js

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends LitElement {
 	static {
-		this.version = "2.1.0-next.2";
+		this.version = "2.1.0-next.3";
 	}
 	/**
 	* Override of LitElement's getPropertyDescriptor to add support for fallback values

package/dist/es/controllers/click-outside.js

@@ -9,7 +9,7 @@ import { nothing } from "lit";
 */
 var clickOutsideDirective = createControllerDirective((element, callback) => {
 	const listener = (event) => {
-		if (!event.target || element.contains(event.target)) return;
+		if (event.composedPath().includes(element)) return;
 		callback.call(element, event);
 	};
 	window.addEventListener("pointerdown", listener, true);

package/dist/es-dev/base/dds-element.js

@@ -42,7 +42,7 @@ function ensureGlobalKeyIndex(name) {
 */
 var DDSElement = class extends LitElement {
 	static {
-		this.version = "2.1.0-next.2";
+		this.version = "2.1.0-next.3";
 	}
 	/**
 	* Override of LitElement's getPropertyDescriptor to add support for fallback values

package/dist/es-dev/controllers/click-outside.js

@@ -9,7 +9,7 @@ import { nothing } from "lit";
 */
 var clickOutsideDirective = createControllerDirective((element, callback) => {
 	const listener = (event) => {
-		if (!event.target || element.contains(event.target)) return;
+		if (event.composedPath().includes(element)) return;
 		callback.call(element, event);
 	};
 	window.addEventListener("pointerdown", listener, true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@daikin-oss/design-system-web-components",
-  "version": "2.1.0-next.2",
+  "version": "2.1.0-next.3",
   "description": "Design system using web components",
   "type": "module",
   "files": [