@daikin-oss/design-system-web-components 1.6.0-next.0 → 2.0.0-next.2

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",
@@ -1846,6 +1846,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/controllers/custom-readonly.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Adds a readonly fallback for controls that do not support native readonly semantics.\n\nThis controller blocks interaction events (pointerdown, keydown, wheel)\nto prevent the user from changing the value.",
+          "name": "CustomReadonlyController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_target",
+              "type": {
+                "text": "E | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_blockedKeys",
+              "type": {
+                "text": "ReadonlySet<string>"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set(_options.blockedKeys ?? [])"
+            },
+            {
+              "kind": "method",
+              "name": "_isReadonlyActive",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_preventInteraction",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_handleKeydown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_detachFromTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "E"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_attachToTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "E"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setTarget",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "E | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CustomReadonlyController",
+          "declaration": {
+            "name": "CustomReadonlyController",
+            "module": "src/controllers/custom-readonly.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/es/controllers/floating-ui-auto-update.js",
@@ -2543,6 +2669,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/utils/extract-half-width-digits.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "extractHalfWidthDigits",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "composedText",
+              "type": {
+                "text": "string"
+              },
+              "description": "The raw string from a `CompositionEvent.data`."
+            }
+          ],
+          "description": "Converts a string of composed IME text to an array of half-width digit characters.\n\nFull-width digits (U+FF10–U+FF19, e.g. \"１２３\") are converted to their half-width\nequivalents (\"123\"), and all non-digit characters are discarded."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "extractHalfWidthDigits",
+          "declaration": {
+            "name": "extractHalfWidthDigits",
+            "module": "src/utils/extract-half-width-digits.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/es/utils/is-similar-to-click.js",
@@ -3137,6 +3298,10 @@
             {
               "description": "A slot for the accordion item summary content.",
               "name": "summary"
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the summary text. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -4221,6 +4386,10 @@
             {
               "description": "A slot for the breadcrumb item content.",
               "name": ""
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the content. Place `daikin-icon` or something similar. This will only be displayed when `variant=\"normal\"` or `variant=\"current\"`.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -5090,6 +5259,17 @@
               "attribute": "default-value",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "locale",
+              "type": {
+                "text": "\"en\" | \"ja\" | null"
+              },
+              "default": "null",
+              "description": "The locale used for calendar formatting.\nIf not provided, the browser's default locale will be used.\nThe component automatically adapts the calendar text to the user's locale. Currently, only English and Japanese are supported.",
+              "attribute": "locale",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "view",
@@ -5120,6 +5300,16 @@
               "default": "null",
               "description": "The date to be focused.\nUsed to set focus on a date that is not in the current view (year and month)."
             },
+            {
+              "kind": "field",
+              "name": "_locale",
+              "type": {
+                "text": "\"en\" | \"ja\""
+              },
+              "privacy": "private",
+              "description": "The locale used for calendar text.\nIf not provided, the component uses the browser locale and falls back to English for unsupported locales.\nCurrently, only English (`en`) and Japanese (`ja`) are supported.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_value",
@@ -5321,6 +5511,30 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_createCalendarHeaderLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "month",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "year",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_createYearAndMonthPickerContainer",
@@ -5551,6 +5765,15 @@
               "default": "null",
               "description": "The month that is initially displayed when the date picker is opened.\nIf there is a `value` attribute, this is ignored.",
               "fieldName": "defaultValue"
+            },
+            {
+              "name": "locale",
+              "type": {
+                "text": "\"en\" | \"ja\" | null"
+              },
+              "default": "null",
+              "description": "The locale used for calendar formatting.\nIf not provided, the browser's default locale will be used.\nThe component automatically adapts the calendar text to the user's locale. Currently, only English and Japanese are supported.",
+              "fieldName": "locale"
             }
           ],
           "superclass": {
@@ -6591,6 +6814,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the checkbox is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabledByParent",
@@ -6601,6 +6835,16 @@
               "description": "Specify the checkbox disabled state controlled by the parent component.\nControlled by `daikin-checkbox-group`.",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "readonlyByParent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify the checkbox readonly state controlled by the parent component.\nControlled by `daikin-checkbox-group`.",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_disabled",
@@ -6613,17 +6857,27 @@
             },
             {
               "kind": "field",
-              "name": "_inputRef",
+              "name": "_readonly",
               "type": {
-                "text": "Ref<HTMLInputElement>"
+                "text": "boolean"
               },
               "privacy": "private",
+              "description": "The effective readonly state of the checkbox.\nReturns `true` if either `readonly` or `readonlyByParent` is `true`.",
               "readonly": true
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "return": {
+              "kind": "field",
+              "name": "_inputRef",
+              "type": {
+                "text": "Ref<HTMLInputElement>"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
                 "type": {
                   "text": "void"
                 }
@@ -7007,6 +7261,15 @@
               "default": "false",
               "description": "Specify the checkbox disabled state.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the checkbox is readonly.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -7099,6 +7362,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the checkbox group is readonly.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_label",
@@ -7246,6 +7520,15 @@
               "default": "false",
               "description": "Whether the checkbox group is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the checkbox group is readonly.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -7298,6 +7581,12 @@
           "kind": "class",
           "description": "A chip is a small UI component that represents a single piece of information, a filter, or a contact. Think of it as a compact tag or a small, clickable token.",
           "name": "DaikinChip",
+          "cssParts": [
+            {
+              "description": "Targets the internal <span> element wrapping the chip. This is typically used to control the chip's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-chip::part(chip) { margin: -4px; padding: 4px; cursor: grab; } daikin-chip::part(chip):active { cursor: grabbing; }",
+              "name": "chip"
+            }
+          ],
           "slots": [
             {
               "description": "A slot for the chip content.",
@@ -7331,6 +7620,39 @@
               "attribute": "variant",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "\"gray\" | \"red\" | \"blue\" | \"yellow\" | \"green\" | \"orange\" | \"purple\""
+              },
+              "description": "Specify the color of the chip when type is \"input\".",
+              "default": "\"gray\"",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "elevated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the chip has a shadow to indicate elevation.",
+              "attribute": "elevated",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hideRemoveButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `true`, hides the remove button and makes the chip non-removable when type is \"input\".",
+              "attribute": "hide-remove-button",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -7574,6 +7896,33 @@
               "default": "\"outline\"",
               "fieldName": "variant"
             },
+            {
+              "name": "color",
+              "type": {
+                "text": "\"gray\" | \"red\" | \"blue\" | \"yellow\" | \"green\" | \"orange\" | \"purple\""
+              },
+              "description": "Specify the color of the chip when type is \"input\".",
+              "default": "\"gray\"",
+              "fieldName": "color"
+            },
+            {
+              "name": "elevated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the chip has a shadow to indicate elevation.",
+              "fieldName": "elevated"
+            },
+            {
+              "name": "hide-remove-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When `true`, hides the remove button and makes the chip non-removable when type is \"input\".",
+              "fieldName": "hideRemoveButton"
+            },
             {
               "name": "checked",
               "type": {
@@ -7684,6 +8033,12 @@
           "kind": "class",
           "description": "A combobox component.\nUnlike a dropdown component, a combobox primarily functions as a text field (using a native `<input>` tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.",
           "name": "DaikinCombobox",
+          "slots": [
+            {
+              "description": "A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7739,6 +8094,17 @@
               "attribute": "open",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the combobox is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "items",
@@ -7790,6 +8156,24 @@
               "default": "null",
               "description": "The label text used as the value of aria-label.\nSet automatically by `reflectInputGroup` method."
             },
+            {
+              "kind": "field",
+              "name": "_hasLeftIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_isPopupOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_autoUpdateController",
@@ -7840,6 +8224,24 @@
               "name": "_closePopup",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_handleLeftIconSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleFocusOut",
@@ -8384,6 +8786,15 @@
               "default": "false",
               "description": "Whether the combobox menu is opened.\nWhen controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.",
               "fieldName": "open"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the combobox is readonly.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -8565,13 +8976,24 @@
             {
               "kind": "field",
               "name": "locale",
+              "type": {
+                "text": "\"en\" | \"ja\" | null"
+              },
+              "default": "null",
+              "description": "The locale used for date picker.\nIf not provided, the browser's default locale will be used.\nCurrently, only English and Japanese are supported.\nThe locale determined by this property controls the language of the text inside the calendar popup.\n\n**Note**: The pre-filled input format (such as YYYY/MM/DD) is independent of this property and is dynamically configured according to the user's current device locale.",
+              "attribute": "locale",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inputLocale",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "The locale used for date formatting.\nIf not provided, the browser's default locale will be used. It is usually not necessary to specify it explicitly.",
               "privacy": "private",
-              "attribute": "locale",
+              "attribute": "input-locale",
               "reflects": true
             },
             {
@@ -8593,6 +9015,51 @@
               "privacy": "private",
               "default": "\"month\""
             },
+            {
+              "kind": "field",
+              "name": "_preCompositionValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "_inputValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "_monthDigitIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_dayDigitIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_yearDigitIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "_autoUpdateController",
@@ -8656,13 +9123,23 @@
             },
             {
               "kind": "field",
-              "name": "_value",
+              "name": "_dateValue",
               "type": {
                 "text": "Date | null"
               },
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_displayValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "Returns the string to bind to the <input> element's .value property.\n\n- When this.value holds a valid date, show the locale-formatted date.\n- When _inputValue contains partial or invalid content (placeholders / impossible\n  dates like 02/31), return it so the user's in-progress entry is preserved\n  across Lit re-renders.\n- Otherwise (e.g. this.value was cleared externally while _inputValue still\n  holds a now-stale complete valid date string) return \"\" so the CSS placeholder\n  text is visible instead.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "_min",
@@ -8779,82 +9256,113 @@
             },
             {
               "kind": "method",
-              "name": "_handleKeyDown",
+              "name": "_handleCompositionStart",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "CompositionEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handleBeforeInput",
+              "name": "_handleCompositionEnd",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "InputEvent"
+                    "text": "CompositionEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handleSelect",
+              "name": "_applyDigitToPart",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ReturnType<typeof handleDigitInput>"
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "parts",
                   "type": {
-                    "text": "Event"
+                    "text": "Readonly<DateParts>"
+                  }
+                },
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "DateItem"
+                  }
+                },
+                {
+                  "name": "digit",
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handlePointerDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_handlePointerUp",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "_handleCalendarKeyDown",
+              "name": "_applyDigits",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "target",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "HTMLInputElement"
+                  }
+                },
+                {
+                  "name": "digits",
+                  "type": {
+                    "text": "string[]"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_handleToggle",
+              "name": "_handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "ToggleEvent"
+                    "text": "KeyboardEvent"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "_updateValue",
+              "name": "_handleBeforeInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleSelect",
               "privacy": "private",
               "parameters": [
                 {
@@ -8865,6 +9373,79 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handlePointerDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handlePointerUp",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_handleCalendarKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleToggle",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "ToggleEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isInputComplete",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Returns true if all date parts (year/month/day) in the input are filled with\ndigits and no placeholder text (YYYY, MM, DD) remains."
+            },
+            {
+              "kind": "method",
+              "name": "_updateValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_updateInputSelection",
@@ -9309,12 +9890,21 @@
             },
             {
               "name": "locale",
+              "type": {
+                "text": "\"en\" | \"ja\" | null"
+              },
+              "default": "null",
+              "description": "The locale used for date picker.\nIf not provided, the browser's default locale will be used.\nCurrently, only English and Japanese are supported.\nThe locale determined by this property controls the language of the text inside the calendar popup.\n\n**Note**: The pre-filled input format (such as YYYY/MM/DD) is independent of this property and is dynamically configured according to the user's current device locale.",
+              "fieldName": "locale"
+            },
+            {
+              "name": "input-locale",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "The locale used for date formatting.\nIf not provided, the browser's default locale will be used. It is usually not necessary to specify it explicitly.",
-              "fieldName": "locale"
+              "fieldName": "inputLocale"
             }
           ],
           "superclass": {
@@ -10096,9 +10686,20 @@
             {
               "description": "Dropdown item list slot. Place `daikin-dropdown-item` elements here.",
               "name": ""
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "_activeOpenByRoot",
+              "privacy": "private",
+              "static": true,
+              "default": "new WeakMap<Node, DaikinDropdown>()"
+            },
             {
               "kind": "field",
               "name": "placeholder",
@@ -10120,6 +10721,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the dropdown is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "required",
@@ -10235,6 +10847,19 @@
               "privacy": "private",
               "default": "new FloatingUIAutoUpdateController(this)"
             },
+            {
+              "kind": "field",
+              "name": "_readonlyController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new CustomReadonlyController< this, HTMLButtonElement >(this, { isReadonly: () => this.readonly, isDisabled: () => this.disabled, blockedKeys: [ \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\", \"PageUp\", \"PageDown\", \"Enter\", \" \", ], })"
+            },
+            {
+              "kind": "field",
+              "name": "_clickOutsideController",
+              "privacy": "private",
+              "default": "new ClickOutsideController( this, this._onClickOutside )"
+            },
             {
               "kind": "field",
               "name": "_willBeFocusedByPress",
@@ -10259,6 +10884,25 @@
               "name": "_dropdownRef",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_isMenuOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_syncSingleOpenState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_searchItem",
@@ -10349,6 +10993,11 @@
               "kind": "method",
               "name": "_handleFocusOut",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
@@ -10358,6 +11007,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_closeDropdownByBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onClickOutside",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "_removeLastSelection",
@@ -10817,6 +11486,15 @@
               "description": "Whether the dropdown is disabled.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the dropdown is readonly.",
+              "fieldName": "readonly"
+            },
             {
               "name": "required",
               "type": {
@@ -11383,288 +12061,83 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/icon-button/daikin-icon-button.js",
+      "path": "dist/es/components/icon/daikin-icon.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "iconList"
+        },
         {
           "kind": "class",
-          "description": "The icon button component is a versatile UI element that triggers actions or submits forms when clicked.\nIt functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.\n\nYou can insert any icon, including the daikin-icon, but please note the following regarding style:\n- About fill color - The icon should be able to accept the CSS `color` property.\n- About size - The recommended width of the icon is 24px * 24px. Please make sure that the size of the icon you insert conforms to this, or please set the `width` and `height` properties of the icon to 100%.",
-          "name": "DaikinIconButton",
-          "slots": [
+          "description": "A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.\nThe component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.\n\nPredefined DDS icons are automatically rendered using optimized CSS classes.\nCustom icons can be dynamically loaded from various sources using the icon registry.\n\nIf an icon cannot be loaded, a blank space is displayed.\nIn development builds, warnings are logged to the console for debugging.\n\n### Using Custom Icons\n\nCustom icons must be registered with the icon registry before use.\nThey can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.\n\n#### Rendering Modes\n\nCustom icons support multiple rendering modes, each with different characteristics:\n\n- **mask** (default): Uses CSS `mask-image` to render the icon.\n  - Secure rendering method (SVG is converted to data URL).\n  - Supports color customization via the `color` property or CSS `color`.\n  - Best choice for most use cases with custom icons.\n- **background**: Uses CSS `background-image` to render the icon.\n  - Secure rendering method (SVG is converted to data URL).\n  - Does NOT support color customization; the icon is rendered with its original colors.\n  - Use this mode when you need to preserve the original colors of multi-color SVG icons.\n- **inline**: Traditional SVG rendering using `innerHTML`.\n  - Renders the raw SVG markup directly in the DOM.\n  - Supports color customization if the SVG uses `currentColor` or inheritable properties.\n  - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.\n  - Use `mask` or `background` modes for better security.\n\n#### Registration Examples\n\n```js\nimport { iconRegistry } from \"@daikin-oss/design-system-web-components/icon-registry.js\";\n\n// Register a single custom icon using mask mode for secure rendering and color customization\niconRegistry.register({\n  name: \"my-custom-icon\",\n  svg: {\n    svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>',\n    mode: \"mask\",\n    defaultColor: \"#0066cc\"\n  },\n});\n\n// Register multiple custom icons dynamically using pattern matching\niconRegistry.register({\n  match: /^dynamic-custom-/,\n  async fetch: (name) => {\n    const response = await fetch(`/path/to/custom/icons/${name}.svg`);\n    if (!response.ok) {\n      throw new Error(`Failed to load custom icon \"${name}\"`);\n    }\n    // You can return just the SVG content as a string (defaults to mask mode)\n    // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control\n    return response.text();\n  },\n});\n```\n\nOnce registered, you can use your custom icons in components:\n\n```html\n<daikin-icon icon=\"my-custom-icon\" color=\"current\" size=\"m\"></daikin-icon>\n<daikin-icon icon=\"dynamic-custom-icon-123\" color=\"current\" size=\"m\"></daikin-icon>\n```\n\n### Changing Icon Color\n\nTo use a custom color, set the `color` property to `\"current\"` and apply the desired color using the CSS `color` property:\n\n```html\n<daikin-icon icon=\"information\" color=\"current\" style=\"color: red;\"></daikin-icon>\n<!-- or you can inherit the color from a parent element -->\n<div style=\"color: blue;\">\n  <daikin-icon icon=\"information\" color=\"current\"></daikin-icon>\n</div>\n```\n\nThis behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).\nIn `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.\nNote that `background` mode does not support custom colors.",
+          "name": "DaikinIcon",
+          "cssProperties": [
             {
-              "description": "A slot for an icon. Place a daikin-icon element or something similar.",
-              "name": ""
+              "description": "The size of the icon. If you set a value other than \"current\" for the `size` property, this will be automatically overwritten.",
+              "name": "--ddc-icon-size"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "registry",
               "type": {
-                "text": "IconButtonVariantProps[\"variant\"]"
+                "text": "IconRegistry"
               },
-              "description": "Variant of the button.",
-              "default": "\"fill\"",
-              "attribute": "variant",
-              "reflects": true
+              "default": "iconRegistry",
+              "description": "The icon registry instance to use.\nDefaults to the global icon registry."
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "icon",
               "type": {
-                "text": "IconButtonVariantProps[\"color\"]"
+                "text": "string"
               },
-              "description": "Color of the button.",
-              "default": "\"default\"",
-              "attribute": "color",
+              "description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
+              "attribute": "icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "IconVariantProps[\"color\"]"
               },
-              "default": "false",
-              "description": "Whether the button is disabled.",
-              "attribute": "disabled",
+              "description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
+              "default": "\"default\"",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "size",
               "type": {
-                "text": "string | null"
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
               },
-              "default": "null",
-              "description": "Link `href`.\nOnly used if the `type` is `\"link\"`.\nIf omitted with `type=\"link\"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.",
-              "attribute": "href",
+              "description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
+              "default": "\"current\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "_iconData",
               "type": {
-                "text": "\"button\" | \"submit\" | \"reset\" | \"link\""
+                "text": "IconData | StaticIconData | null"
               },
-              "description": "Type of the button.\nIf `\"link\"` is specified, the button will be rendered as an `<a>` element.",
-              "default": "\"button\"",
-              "attribute": "type",
-              "reflects": true
+              "privacy": "private",
+              "default": "null"
             },
             {
-              "kind": "field",
-              "name": "buttonAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label of the icon button.",
-              "attribute": "button-aria-label",
-              "reflects": true
+              "kind": "method",
+              "name": "loadIcon",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "buttonRole",
+              "name": "version",
               "type": {
-                "text": "ARIARole | null"
-              },
-              "default": "null",
-              "description": "Optional ARIA role of the button.",
-              "attribute": "button-role",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttonAriaHaspopup",
-              "type": {
-                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\"\n    | null"
-              },
-              "default": "null",
-              "description": "The aria-haspopup of the icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup=\"menu\"`.",
-              "attribute": "button-aria-haspopup",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttonAriaExpanded",
-              "type": {
-                "text": "\"true\" | \"false\" | \"undefined\" | null"
-              },
-              "default": "null",
-              "description": "The aria-expanded of icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.",
-              "attribute": "button-aria-expanded",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttonTabIndex",
-              "type": {
-                "text": "number"
-              },
-              "description": "The `tabindex` of the button.\nIf omitted or set to 0, the button follows the default tab flow.\nSetting it to -1 makes the button unreachable via the Tab key.\nThis is useful when the button is part of a composite widget and accessible via other keys.",
-              "attribute": "button-tabindex",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"s\" | \"m\""
-              },
-              "default": "\"s\"",
-              "description": "Size of the button.\n- `s`: 32px * 32px\n- `m`: 48px * 48px",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_button",
-              "type": {
-                "text": "HTMLButtonElement | null"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getDDSNavigationTarget",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "_Internal use._\nReturns the navigation target information.\nUsed by navigation handling utilities.",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  },
-                  "description": "focus options"
-                }
-              ],
-              "description": "Focuses on the inner button."
-            },
-            {
-              "kind": "field",
-              "name": "formAttr",
-              "type": {
-                "text": "string"
-              },
-              "description": "The form the component belongs to.",
-              "attribute": "form",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "readonly": true,
-              "default": "true",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "internals",
-              "type": {
-                "text": "ElementInternals | null | undefined"
-              },
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "form",
-              "type": {
-                "text": "HTMLFormElement | null"
-              },
-              "description": "Returns the form object associated with the element, or null if none exists.",
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "requestSubmit",
-              "description": "A function that maps to the form control's `reportValidity()` function.\nReference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reset",
-              "description": "A function that maps to the form control's `checkValidity()` function.\nReference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hostConnected",
-              "description": "TODO Enhance these functions to bring our components closer to native form components.",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hostDisconnected",
-              "description": "TODO Enhance these functions to bring our components closer to native form components.",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hostUpdated",
-              "description": "TODO Enhance these functions to bring our components closer to native form components.",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "version",
-              "type": {
-                "text": "string"
+                "text": "string"
               },
               "static": true,
               "readonly": true,
@@ -11741,239 +12214,376 @@
               }
             }
           ],
-          "events": [
-            {
-              "description": "A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,",
-              "name": "click"
-            }
-          ],
           "attributes": [
             {
-              "name": "form",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
-              "description": "The form the component belongs to.",
-              "fieldName": "formAttr",
-              "inheritedFrom": {
-                "name": "DDSFormSubmitElement",
-                "module": "dist/es/base/dds-form-element.js"
-              }
+              "description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
+              "fieldName": "icon"
             },
             {
+              "name": "color",
+              "type": {
+                "text": "IconVariantProps[\"color\"]"
+              },
+              "description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
+              "default": "\"default\"",
+              "fieldName": "color"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
+              },
+              "description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
+              "default": "\"current\"",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "DDSElement",
+            "module": "/src/base"
+          },
+          "tagName": "daikin-icon",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "iconList",
+          "declaration": {
+            "name": "iconList",
+            "module": "src/components/icon/daikin-icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DaikinIcon",
+          "declaration": {
+            "name": "DaikinIcon",
+            "module": "src/components/icon/daikin-icon.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "daikin-icon",
+          "declaration": {
+            "name": "DaikinIcon",
+            "module": "src/components/icon/daikin-icon.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "DaikinIcon",
+            "module": "src/components/icon/daikin-icon.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/components/icon/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/components/icon/daikin-icon"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/es/components/icon-button/daikin-icon-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The icon button component is a versatile UI element that triggers actions or submits forms when clicked.\nIt functions similarly to the HTML `<button>` tag, allowing users to initiate various operations such as submitting data, opening dialogs, or navigating to different sections of an application.\n\nYou can insert any icon, including the daikin-icon, but please note the following regarding style:\n- About fill color - The icon should be able to accept the CSS `color` property.\n- About size - The recommended width of the icon is 24px * 24px. Please make sure that the size of the icon you insert conforms to this, or please set the `width` and `height` properties of the icon to 100%.",
+          "name": "DaikinIconButton",
+          "cssParts": [
+            {
+              "description": "CSS styles applied to the `icon-button` part target the internal `<button>` element.",
+              "name": "icon-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A slot for an icon. Place a daikin-icon element or something similar.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "IconButtonVariantProps[\"variant\"]"
               },
               "description": "Variant of the button.",
               "default": "\"fill\"",
-              "fieldName": "variant"
+              "attribute": "variant",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "color",
               "type": {
                 "text": "IconButtonVariantProps[\"color\"]"
               },
               "description": "Color of the button.",
               "default": "\"default\"",
-              "fieldName": "color"
+              "attribute": "color",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Whether the button is disabled.",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "href",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Link `href`.\nOnly used if the `type` is `\"link\"`.\nIf omitted with `type=\"link\"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.",
-              "fieldName": "href"
+              "attribute": "href",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "\"button\" | \"submit\" | \"reset\" | \"link\""
               },
               "description": "Type of the button.\nIf `\"link\"` is specified, the button will be rendered as an `<a>` element.",
               "default": "\"button\"",
-              "fieldName": "type"
+              "attribute": "type",
+              "reflects": true
             },
             {
-              "name": "button-aria-label",
+              "kind": "field",
+              "name": "buttonAriaLabel",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "The aria-label of the icon button.",
-              "fieldName": "buttonAriaLabel"
+              "attribute": "button-aria-label",
+              "reflects": true
             },
             {
-              "name": "button-role",
+              "kind": "field",
+              "name": "buttonRole",
               "type": {
                 "text": "ARIARole | null"
               },
               "default": "null",
               "description": "Optional ARIA role of the button.",
-              "fieldName": "buttonRole"
+              "attribute": "button-role",
+              "reflects": true
             },
             {
-              "name": "button-aria-haspopup",
+              "kind": "field",
+              "name": "buttonAriaHaspopup",
               "type": {
                 "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\"\n    | null"
               },
               "default": "null",
               "description": "The aria-haspopup of the icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup=\"menu\"`.",
-              "fieldName": "buttonAriaHaspopup"
+              "attribute": "button-aria-haspopup",
+              "reflects": true
             },
             {
-              "name": "button-aria-expanded",
+              "kind": "field",
+              "name": "buttonAriaExpanded",
               "type": {
                 "text": "\"true\" | \"false\" | \"undefined\" | null"
               },
               "default": "null",
               "description": "The aria-expanded of icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.",
-              "fieldName": "buttonAriaExpanded"
+              "attribute": "button-aria-expanded",
+              "reflects": true
             },
             {
-              "name": "button-tabindex",
+              "kind": "field",
+              "name": "buttonTabIndex",
               "type": {
                 "text": "number"
               },
               "description": "The `tabindex` of the button.\nIf omitted or set to 0, the button follows the default tab flow.\nSetting it to -1 makes the button unreachable via the Tab key.\nThis is useful when the button is part of a composite widget and accessible via other keys.",
-              "fieldName": "buttonTabIndex"
+              "attribute": "button-tabindex",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "\"s\" | \"m\""
               },
               "default": "\"s\"",
               "description": "Size of the button.\n- `s`: 32px * 32px\n- `m`: 48px * 48px",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "DDSFormSubmitElement",
-            "module": "/src/base"
-          },
-          "tagName": "daikin-icon-button",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DaikinIconButton",
-          "declaration": {
-            "name": "DaikinIconButton",
-            "module": "src/components/icon-button/daikin-icon-button.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "daikin-icon-button",
-          "declaration": {
-            "name": "DaikinIconButton",
-            "module": "src/components/icon-button/daikin-icon-button.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/components/icon-button/index.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/components/icon-button/daikin-icon-button"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/es/components/icon/daikin-icon.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "iconList"
-        },
-        {
-          "kind": "class",
-          "description": "A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.\nThe component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.\n\nPredefined DDS icons are automatically rendered using optimized CSS classes.\nCustom icons can be dynamically loaded from various sources using the icon registry.\n\nIf an icon cannot be loaded, a blank space is displayed.\nIn development builds, warnings are logged to the console for debugging.\n\n### Using Custom Icons\n\nCustom icons must be registered with the icon registry before use.\nThey can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.\n\n#### Rendering Modes\n\nCustom icons support multiple rendering modes, each with different characteristics:\n\n- **mask** (default): Uses CSS `mask-image` to render the icon.\n  - Secure rendering method (SVG is converted to data URL).\n  - Supports color customization via the `color` property or CSS `color`.\n  - Best choice for most use cases with custom icons.\n- **background**: Uses CSS `background-image` to render the icon.\n  - Secure rendering method (SVG is converted to data URL).\n  - Does NOT support color customization; the icon is rendered with its original colors.\n  - Use this mode when you need to preserve the original colors of multi-color SVG icons.\n- **inline**: Traditional SVG rendering using `innerHTML`.\n  - Renders the raw SVG markup directly in the DOM.\n  - Supports color customization if the SVG uses `currentColor` or inheritable properties.\n  - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.\n  - Use `mask` or `background` modes for better security.\n\n#### Registration Examples\n\n```js\nimport { iconRegistry } from \"@daikin-oss/design-system-web-components/icon-registry.js\";\n\n// Register a single custom icon using mask mode for secure rendering and color customization\niconRegistry.register({\n  name: \"my-custom-icon\",\n  svg: {\n    svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>',\n    mode: \"mask\",\n    defaultColor: \"#0066cc\"\n  },\n});\n\n// Register multiple custom icons dynamically using pattern matching\niconRegistry.register({\n  match: /^dynamic-custom-/,\n  async fetch: (name) => {\n    const response = await fetch(`/path/to/custom/icons/${name}.svg`);\n    if (!response.ok) {\n      throw new Error(`Failed to load custom icon \"${name}\"`);\n    }\n    // You can return just the SVG content as a string (defaults to mask mode)\n    // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control\n    return response.text();\n  },\n});\n```\n\nOnce registered, you can use your custom icons in components:\n\n```html\n<daikin-icon icon=\"my-custom-icon\" color=\"current\" size=\"m\"></daikin-icon>\n<daikin-icon icon=\"dynamic-custom-icon-123\" color=\"current\" size=\"m\"></daikin-icon>\n```\n\n### Changing Icon Color\n\nTo use a custom color, set the `color` property to `\"current\"` and apply the desired color using the CSS `color` property:\n\n```html\n<daikin-icon icon=\"information\" color=\"current\" style=\"color: red;\"></daikin-icon>\n<!-- or you can inherit the color from a parent element -->\n<div style=\"color: blue;\">\n  <daikin-icon icon=\"information\" color=\"current\"></daikin-icon>\n</div>\n```\n\nThis behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).\nIn `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.\nNote that `background` mode does not support custom colors.",
-          "name": "DaikinIcon",
-          "cssProperties": [
+              "attribute": "size",
+              "reflects": true
+            },
             {
-              "description": "The size of the icon. If you set a value other than \"current\" for the `size` property, this will be automatically overwritten.",
-              "name": "--ddc-icon-size"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "_button",
+              "type": {
+                "text": "HTMLButtonElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getDDSNavigationTarget",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "_Internal use._\nReturns the navigation target information.\nUsed by navigation handling utilities.",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "focus options"
+                }
+              ],
+              "description": "Focuses on the inner button."
+            },
             {
               "kind": "field",
-              "name": "registry",
+              "name": "formAttr",
               "type": {
-                "text": "IconRegistry"
+                "text": "string"
               },
-              "default": "iconRegistry",
-              "description": "The icon registry instance to use.\nDefaults to the global icon registry."
+              "description": "The form the component belongs to.",
+              "attribute": "form",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "formAssociated",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
-              "attribute": "icon",
-              "reflects": true
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "internals",
               "type": {
-                "text": "IconVariantProps[\"color\"]"
+                "text": "ElementInternals | null | undefined"
               },
-              "description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
-              "default": "\"default\"",
-              "attribute": "color",
-              "reflects": true
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "form",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
+                "text": "HTMLFormElement | null"
               },
-              "description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
-              "default": "\"current\"",
-              "attribute": "size",
-              "reflects": true
+              "description": "Returns the form object associated with the element, or null if none exists.",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "_iconData",
-              "type": {
-                "text": "IconData | StaticIconData | null"
-              },
+              "kind": "method",
+              "name": "requestSubmit",
+              "description": "A function that maps to the form control's `reportValidity()` function.\nReference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity",
               "privacy": "private",
-              "default": "null"
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
               "kind": "method",
-              "name": "loadIcon",
-              "privacy": "private"
+              "name": "reset",
+              "description": "A function that maps to the form control's `checkValidity()` function.\nReference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "description": "TODO Enhance these functions to bring our components closer to native form components.",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "description": "TODO Enhance these functions to bring our components closer to native form components.",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "description": "TODO Enhance these functions to bring our components closer to native form components.",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
             },
             {
               "kind": "field",
@@ -12056,80 +12666,154 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,",
+              "name": "click"
+            }
+          ],
           "attributes": [
             {
-              "name": "icon",
+              "name": "form",
               "type": {
                 "text": "string"
               },
-              "description": "The name of the icon to display.\nCan be a static DDS icon name or a custom icon name registered in the icon registry.",
-              "fieldName": "icon"
+              "description": "The form the component belongs to.",
+              "fieldName": "formAttr",
+              "inheritedFrom": {
+                "name": "DDSFormSubmitElement",
+                "module": "dist/es/base/dds-form-element.js"
+              }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "IconButtonVariantProps[\"variant\"]"
+              },
+              "description": "Variant of the button.",
+              "default": "\"fill\"",
+              "fieldName": "variant"
             },
             {
               "name": "color",
               "type": {
-                "text": "IconVariantProps[\"color\"]"
+                "text": "IconButtonVariantProps[\"color\"]"
               },
-              "description": "The color of the icon.\nUse `\"current\"` for most cases.\n\n**This property will be removed in a future release.**\nTo prepare for this change, start using `color=\"current\"` and set icon colors via the CSS `color` property instead of using predefined color values.",
+              "description": "Color of the button.",
               "default": "\"default\"",
               "fieldName": "color"
             },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Link `href`.\nOnly used if the `type` is `\"link\"`.\nIf omitted with `type=\"link\"`, the link will be treated as [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered as disabled state.",
+              "fieldName": "href"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "\"button\" | \"submit\" | \"reset\" | \"link\""
+              },
+              "description": "Type of the button.\nIf `\"link\"` is specified, the button will be rendered as an `<a>` element.",
+              "default": "\"button\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "button-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label of the icon button.",
+              "fieldName": "buttonAriaLabel"
+            },
+            {
+              "name": "button-role",
+              "type": {
+                "text": "ARIARole | null"
+              },
+              "default": "null",
+              "description": "Optional ARIA role of the button.",
+              "fieldName": "buttonRole"
+            },
+            {
+              "name": "button-aria-haspopup",
+              "type": {
+                "text": "| \"false\"\n    | \"true\"\n    | \"menu\"\n    | \"listbox\"\n    | \"tree\"\n    | \"grid\"\n    | \"dialog\"\n    | null"
+              },
+              "default": "null",
+              "description": "The aria-haspopup of the icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup=\"menu\"`.",
+              "fieldName": "buttonAriaHaspopup"
+            },
+            {
+              "name": "button-aria-expanded",
+              "type": {
+                "text": "\"true\" | \"false\" | \"undefined\" | null"
+              },
+              "default": "null",
+              "description": "The aria-expanded of icon button when `type=\"button\"`.\nWhen used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.",
+              "fieldName": "buttonAriaExpanded"
+            },
+            {
+              "name": "button-tabindex",
+              "type": {
+                "text": "number"
+              },
+              "description": "The `tabindex` of the button.\nIf omitted or set to 0, the button follows the default tab flow.\nSetting it to -1 makes the button unreachable via the Tab key.\nThis is useful when the button is part of a composite widget and accessible via other keys.",
+              "fieldName": "buttonTabIndex"
+            },
             {
               "name": "size",
               "type": {
-                "text": "\"s\" | \"m\" | \"l\" | \"xl\" | \"current\""
+                "text": "\"s\" | \"m\""
               },
-              "description": "The size of the icon.\nIf set to \"current\", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.",
-              "default": "\"current\"",
+              "default": "\"s\"",
+              "description": "Size of the button.\n- `s`: 32px * 32px\n- `m`: 48px * 48px",
               "fieldName": "size"
             }
           ],
           "superclass": {
-            "name": "DDSElement",
+            "name": "DDSFormSubmitElement",
             "module": "/src/base"
           },
-          "tagName": "daikin-icon",
+          "tagName": "daikin-icon-button",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "iconList",
-          "declaration": {
-            "name": "iconList",
-            "module": "src/components/icon/daikin-icon.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DaikinIcon",
+          "name": "DaikinIconButton",
           "declaration": {
-            "name": "DaikinIcon",
-            "module": "src/components/icon/daikin-icon.ts"
+            "name": "DaikinIconButton",
+            "module": "src/components/icon-button/daikin-icon-button.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "daikin-icon",
-          "declaration": {
-            "name": "DaikinIcon",
-            "module": "src/components/icon/daikin-icon.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "daikin-icon-button",
           "declaration": {
-            "name": "DaikinIcon",
-            "module": "src/components/icon/daikin-icon.ts"
+            "name": "DaikinIconButton",
+            "module": "src/components/icon-button/daikin-icon-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/es/components/icon/index.js",
+      "path": "dist/es/components/icon-button/index.js",
       "declarations": [],
       "exports": [
         {
@@ -12137,7 +12821,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/icon/daikin-icon"
+            "module": "src/components/icon-button/daikin-icon-button"
           }
         }
       ]
@@ -12385,6 +13069,16 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "description": "Orientation of the input group.\nPossible values are `\"vertical\"` and `\"horizontal\"`.",
+              "attribute": "orientation",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "label",
@@ -12440,6 +13134,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly.\nReflected in `readonly` attribute of the input control in the slot.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "textareaMaxCount",
@@ -12617,6 +13322,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "description": "Orientation of the input group.\nPossible values are `\"vertical\"` and `\"horizontal\"`.",
+              "fieldName": "orientation"
+            },
             {
               "name": "label",
               "type": {
@@ -12662,6 +13375,15 @@
               "description": "Whether the field is disabled.\nReflected in `disabled` attribute of the input control in the slot.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly.\nReflected in `readonly` attribute of the input control in the slot.",
+              "fieldName": "readonly"
+            },
             {
               "name": "textarea-max-count",
               "type": {
@@ -13791,7 +14513,7 @@
               "type": {
                 "text": "\"positive\" | \"negative\""
               },
-              "description": "Specify the the logo mode.\nNotice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.",
+              "description": "Specify the logo mode.\nNotice: \"negative\" mode can only be used in dark mode.",
               "default": "\"positive\"",
               "attribute": "mode",
               "reflects": true
@@ -13950,7 +14672,7 @@
               "type": {
                 "text": "\"positive\" | \"negative\""
               },
-              "description": "Specify the the logo mode.\nNotice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.",
+              "description": "Specify the logo mode.\nNotice: \"negative\" mode can only be used in dark mode.",
               "default": "\"positive\"",
               "fieldName": "mode"
             }
@@ -14879,6 +15601,10 @@
               "description": "An optional slot for description.",
               "name": "description"
             },
+            {
+              "description": "An optional slot for an icon to be placed to the left of the title. Place a `daikin-icon` element or something similar.",
+              "name": "left-icon"
+            },
             {
               "description": "A slot for modal title.",
               "name": ""
@@ -15082,6 +15808,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "horizontalPadding",
+              "type": {
+                "text": "\"wide\" | \"narrow\" | \"medium\" | undefined"
+              },
+              "description": "The horizontal padding of all navigation items in the navigation.\n- `wide`: 2rem;\n- `narrow`: 1rem;\n- `medium`: 1.5rem;",
+              "default": "\"wide\"",
+              "attribute": "horizontal-padding",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "navigationAriaLabel",
@@ -15175,6 +15912,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "horizontal-padding",
+              "type": {
+                "text": "\"wide\" | \"narrow\" | \"medium\" | undefined"
+              },
+              "description": "The horizontal padding of all navigation items in the navigation.\n- `wide`: 2rem;\n- `narrow`: 1rem;\n- `medium`: 1.5rem;",
+              "default": "\"wide\"",
+              "fieldName": "horizontalPadding"
+            },
             {
               "name": "navigation-aria-label",
               "type": {
@@ -15594,6 +16340,17 @@
               "attribute": "window",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\""
+              },
+              "default": "\"medium\"",
+              "description": "Size of the pagination.\n\n- `medium`: Default size. Page button min size is `48px`.\n- `small`: Compact size. Page button min size is `36px`.\n\nPage buttons grow horizontally when content gets wider while keeping horizontal padding.\n\nOn mobile viewport (`<= 767px`), pagination is always rendered in the small size.",
+              "attribute": "size",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "_goto",
@@ -15754,6 +16511,15 @@
               "default": "5",
               "description": "Number of elements to display in pagination, including ellipses.\nMust be greater than or equal to 5.\nIf a value less than 5 is specified, it will be treated as 5.",
               "fieldName": "window"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\""
+              },
+              "default": "\"medium\"",
+              "description": "Size of the pagination.\n\n- `medium`: Default size. Page button min size is `48px`.\n- `small`: Compact size. Page button min size is `36px`.\n\nPage buttons grow horizontally when content gets wider while keeping horizontal padding.\n\nOn mobile viewport (`<= 767px`), pagination is always rendered in the small size.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
@@ -15924,6 +16690,10 @@
             {
               "description": "A slot for label text displayed at the top of the progress bar.",
               "name": ""
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -16578,6 +17348,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify the radio button readonly state.\nWhen readonly, the user cannot change the checked state.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabledByParent",
@@ -16588,6 +17369,36 @@
               "description": "Specify the radio disabled state controlled by the parent component.\nControlled by `daikin-radio-group`.",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "readonlyByParent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify the radio readonly state controlled by the parent component.\nControlled by `daikin-radio-group`.",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "The effective disabled state of the radio button.\nReturns `true` if either `disabled` or `disabledByParent` is `true`.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "The effective readonly state of the radio button.\nReturns `true` if either `readonly` or `readonlyByParent` is `true`.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "skipTab",
@@ -16984,6 +17795,15 @@
               "default": "false",
               "description": "Specify the radio button disabled state.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Specify the radio button readonly state.\nWhen readonly, the user cannot change the checked state.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -17105,6 +17925,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio group is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_label",
@@ -17318,6 +18149,15 @@
               "default": "false",
               "description": "Whether the radio group is disabled.\nControlled by `daikin-input-group` when used within `daikin-input-group`.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the radio group is readonly.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -17374,6 +18214,10 @@
             {
               "description": "A slot for an HTML `<select>` element which may contain `<option>` and `<optgroup>`.",
               "name": ""
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the summary text. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -17399,6 +18243,17 @@
               "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the select is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -17419,6 +18274,15 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_hasLeftIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_label",
@@ -17429,6 +18293,24 @@
               "default": "null",
               "description": "The label text used as the value of aria-label.\nSet automatically by `reflectInputGroup` method."
             },
+            {
+              "kind": "method",
+              "name": "_handleLeftIconSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_select",
@@ -17438,6 +18320,14 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_readonlyController",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new CustomReadonlyController< this, HTMLSelectElement >(this, { isReadonly: () => this.readonly, isDisabled: () => this.disabled, blockedKeys: [ \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\", \"PageUp\", \"PageDown\", \"Enter\", \" \", ], })",
+              "description": "Native <select> elements do not support the readonly attribute, so a custom controller is used to achieve a similar readonly behavior."
+            },
             {
               "kind": "method",
               "name": "_updateSelect",
@@ -17597,6 +18487,15 @@
               "description": "Whether the select component is required.",
               "fieldName": "required"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the select is readonly.",
+              "fieldName": "readonly"
+            },
             {
               "name": "disabled",
               "type": {
@@ -17702,6 +18601,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the slider is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "sliderAriaLabel",
@@ -18185,6 +19095,15 @@
               "description": "Specify the slider disabled state.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the slider is readonly.",
+              "fieldName": "readonly"
+            },
             {
               "name": "slider-aria-label",
               "type": {
@@ -18385,6 +19304,12 @@
           "kind": "class",
           "description": "A status message is a concise UI component for displaying status feedback, notifications, or contextual information to users. It typically indicates success, warning, error, or other states, helping users quickly understand the current state or important updates in the interface.",
           "name": "DaikinStatusMessage",
+          "cssParts": [
+            {
+              "description": "CSS styles applied to the `status-message` part target the internal content container.",
+              "name": "status-message"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -19050,6 +19975,44 @@
           "kind": "class",
           "description": "The table component is a component that can display multiple data objects in a tabular format.\n\nIt is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.\n\nBy specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``\n\nBy specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``\n\nThe table provides two functions: checkboxes and sorting, and you can select the functions you need.\n\nHierarchy:\n- `daikin-table` > `daikin-table-cell`\n- `daikin-table` > `daikin-table-header-cell`\n- `daikin-table` > `daikin-empty-state`",
           "name": "DaikinTable",
+          "cssParts": [
+            {
+              "description": "Targets the table header region.",
+              "name": "header"
+            },
+            {
+              "description": "Targets the table body region.",
+              "name": "body"
+            },
+            {
+              "description": "Targets all table rows.",
+              "name": "row"
+            },
+            {
+              "description": "Targets all table cells.",
+              "name": "cell"
+            },
+            {
+              "description": "Targets the specified body row.",
+              "name": "row-${row.id}"
+            },
+            {
+              "description": "Added to selected body rows and their body cells.",
+              "name": "selected"
+            },
+            {
+              "description": "Added to body cells in odd-numbered rows (1st, 3rd, ...).",
+              "name": "odd"
+            },
+            {
+              "description": "Targets body cells in the selectable checkbox column.",
+              "name": "checkbox-cell"
+            },
+            {
+              "description": "Targets both header and body cells for the specified column key. This is typically used to control a specific column's width and text wrapping. For example, you can allow the column to fit content by default, while enforcing min and max width: `daikin-table::part(column-name) { min-width: 12rem; max-width: 20rem; }` and optional truncation: `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`. Background customization is also supported via CSS Parts. You can target an entire row (`row-${row.id} cell`), a specific column (`column-${header.key}`), or a row+column pair (`row-${row.id} column-${header.key}`), then apply design tokens for background colors. Example: `daikin-table::part(row-2 cell) { background-color: var(--dds-color-common-surface-danger-hover); }` `daikin-table::part(row-3 column-price) { background-color: var(--dds-color-common-warning); }` `daikin-table::part(row-2 cell):hover { background-color: var(--dds-color-common-surface-hover); }`",
+              "name": "column-${header.key}"
+            }
+          ],
           "slots": [
             {
               "description": "A slot for the header cell of a table. Use this when you want to display something other than text, such as an icon. Use `daikin-table-header-cell` for the wrapper.",
@@ -19105,6 +20068,28 @@
               "attribute": "sortable",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "border",
+              "type": {
+                "text": "\"none\" | \"underline\""
+              },
+              "default": "\"underline\"",
+              "description": "The border style of the table row separators.\n- \"none\": Hide all table separator lines.\n- \"underline\": Show table separator lines.",
+              "attribute": "border",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "stickyHeader",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to keep the header row fixed while the body scrolls.\n\nWhen `true`, header cells become sticky relative to this component's\nnearest scroll container. This works with page scrolling, and also works\nwith internal scrolling when the host has a constrained height and\n`overflow: auto`.",
+              "attribute": "sticky-header",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "selection",
@@ -19427,6 +20412,24 @@
               "description": "Whether to enable row sorting.\nWhen `true`, a sort button will be displayed to the right of each sortable header cell.",
               "fieldName": "sortable"
             },
+            {
+              "name": "border",
+              "type": {
+                "text": "\"none\" | \"underline\""
+              },
+              "default": "\"underline\"",
+              "description": "The border style of the table row separators.\n- \"none\": Hide all table separator lines.\n- \"underline\": Show table separator lines.",
+              "fieldName": "border"
+            },
+            {
+              "name": "sticky-header",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to keep the header row fixed while the body scrolls.\n\nWhen `true`, header cells become sticky relative to this component's\nnearest scroll container. This works with page scrolling, and also works\nwith internal scrolling when the host has a constrained height and\n`overflow: auto`.",
+              "fieldName": "stickyHeader"
+            },
             {
               "name": "sort",
               "type": {
@@ -20275,6 +21278,12 @@
           "kind": "class",
           "description": "The Tag is a flexible component. It is designed not only to display concise text information but also to support automatic line wrapping for longer content. Furthermore, its slots allow for the customization of multi-element content based on specific requirements.",
           "name": "DaikinTag",
+          "cssParts": [
+            {
+              "description": "Targets the internal <span> element wrapping the tag. This is typically used to control the tag's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-tag::part(tag) { margin: -4px; padding: 4px; cursor: grab; } daikin-tag::part(tag):active { cursor: grabbing; }",
+              "name": "tag"
+            }
+          ],
           "slots": [
             {
               "description": "A slot for the tag content.",
@@ -20284,24 +21293,46 @@
           "members": [
             {
               "kind": "field",
-              "name": "hideRemoveButton",
+              "name": "hideRemoveButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the remove button and makes the tag non-removable. The default value is `false`.",
+              "attribute": "hide-remove-button",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Provides an accessible name of the tag.",
+              "attribute": "tag-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "\"gray\" | \"red\" | \"blue\" | \"yellow\" | \"green\" | \"orange\" | \"purple\""
               },
-              "default": "false",
-              "description": "Hides the remove button and makes the tag non-removable. The default value is `false`.",
-              "attribute": "hide-remove-button",
+              "description": "Specify the color of the tag.",
+              "default": "\"gray\"",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tagAriaLabel",
+              "name": "elevated",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Provides an accessible name of the tag.",
-              "attribute": "tag-aria-label",
+              "default": "false",
+              "description": "Whether the tag has a shadow to indicate elevation.",
+              "attribute": "elevated",
               "reflects": true
             },
             {
@@ -20470,6 +21501,24 @@
               "description": "Provides an accessible name of the tag.",
               "fieldName": "tagAriaLabel"
             },
+            {
+              "name": "color",
+              "type": {
+                "text": "\"gray\" | \"red\" | \"blue\" | \"yellow\" | \"green\" | \"orange\" | \"purple\""
+              },
+              "description": "Specify the color of the tag.",
+              "default": "\"gray\"",
+              "fieldName": "color"
+            },
+            {
+              "name": "elevated",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tag has a shadow to indicate elevation.",
+              "fieldName": "elevated"
+            },
             {
               "name": "remove-button-aria-label",
               "type": {
@@ -21218,6 +22267,17 @@
               "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",
@@ -21837,6 +22897,15 @@
               "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": {
@@ -22703,7 +23772,7 @@
       "declarations": [
         {
           "kind": "function",
-          "name": "to24HourFormat",
+          "name": "uiToTimeValue",
           "return": {
             "type": {
               "text": "string"
@@ -22711,26 +23780,19 @@
           },
           "parameters": [
             {
-              "name": "time",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "meridiem",
+              "name": "object",
               "type": {
-                "text": "\"AM\" | \"PM\""
+                "text": "UiTimeObject"
               }
             }
-          ],
-          "description": "Converts a 12-hour time string and AM/PM to 24-hour format (e.g. \"02:30\", \"PM\" => \"14:30\")."
+          ]
         },
         {
           "kind": "function",
-          "name": "from24HourFormat",
+          "name": "timeValueToUI",
           "return": {
             "type": {
-              "text": "{\n  time: string;\n  meridiem: \"AM\" | \"PM\";\n}"
+              "text": "UiTimeObject"
             }
           },
           "parameters": [
@@ -22739,9 +23801,14 @@
               "type": {
                 "text": "string"
               }
+            },
+            {
+              "name": "hourCycle",
+              "type": {
+                "text": "HourCycle"
+              }
             }
-          ],
-          "description": "Converts a 24-hour time string to 12-hour format and AM/PM (e.g. \"14:30\" => { time: \"02:30\", meridiem: \"PM\" })."
+          ]
         },
         {
           "kind": "function",
@@ -22919,13 +23986,19 @@
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "name": "hourCycle",
+              "type": {
+                "text": "HourCycle"
+              }
             }
           ],
           "description": "Calculate digit key input, returns new time parts and whether input is complete."
         },
         {
           "kind": "class",
-          "description": "The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.\nPlease note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.",
+          "description": "The time picker provides a time input field and supports two hour cycles via `hourCycle`.\n- h12: input in 12-hour format with AM/PM dropdown.\n- h23: input in 24-hour format without AM/PM dropdown.\n\nPlease note that the component's `value` is always stored in 24-hour format.",
           "name": "DaikinTimePicker",
           "members": [
             {
@@ -22945,7 +24018,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.\nPlease note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.",
+              "description": "Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.\nPlease note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.\nThe `min` property must be provided in 24-hour format.",
               "default": "\"00:00\"",
               "attribute": "min",
               "reflects": true
@@ -22956,7 +24029,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.\nPlease note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.",
+              "description": "Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.\nPlease note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.\nThe `max` property must be provided in 24-hour format.",
               "default": "\"23:59\"",
               "attribute": "max",
               "reflects": true
@@ -22972,6 +24045,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly.\nWhen readonly, the user cannot change the value.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "required",
@@ -22994,6 +24078,17 @@
               "attribute": "error",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "hourCycle",
+              "type": {
+                "text": "HourCycle"
+              },
+              "default": "\"h12\"",
+              "description": "Hour cycle for the UI.\n- h12: input uses 12-hour UI + AM/PM dropdown.\n- h23: input uses 24-hour UI and hides AM/PM dropdown.",
+              "attribute": "hour-cycle",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "minutesStep",
@@ -23005,6 +24100,17 @@
               "attribute": "minutes-step",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "meridiemSingleOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether AM/PM dropdown should be single-open across sibling time pickers in the same root.",
+              "attribute": "meridiem-single-open",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_label",
@@ -23045,7 +24151,7 @@
               "kind": "field",
               "name": "_value",
               "privacy": "private",
-              "description": "Returns the value to be displayed in the input field.\n- If the main value is a valid 24-hour time, returns the 12-hour formatted string for UI display.\n- If the current input value is not valid or meridiem is empty, returns the raw input value.\n- Otherwise, returns null.",
+              "description": "Returns the value to be displayed in the input field.\n- If the main value is a valid 24-hour time, returns a display string based on the selected hour cycle.\n- If the current input value is not valid or meridiem is empty, returns the raw input value.\n- Otherwise, returns null.",
               "readonly": true
             },
             {
@@ -23053,6 +24159,11 @@
               "name": "_timeInputElement",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_meridiemDropdown",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_hourDigitIndex",
@@ -23063,6 +24174,25 @@
               "default": "0",
               "description": "Tracks the current digit index for hour input (0: first digit, 1: second digit)."
             },
+            {
+              "kind": "field",
+              "name": "_preCompositionValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "_minuteDigitIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Tracks the current digit index for minute input (0: first digit, 1: second digit).\nWhen 0 (fresh entry), always starts with \"0X\" regardless of the existing value,\npreventing pre-existing values like \"04\" from being mistaken as a first-digit state."
+            },
             {
               "kind": "field",
               "name": "_timeValue",
@@ -23182,6 +24312,62 @@
                   "type": {
                     "text": "number"
                   }
+                },
+                {
+                  "name": "hourCycle",
+                  "type": {
+                    "text": "HourCycle"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleCompositionStart",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CompositionEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleCompositionEnd",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CompositionEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applyDigits",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLInputElement"
+                  }
+                },
+                {
+                  "name": "digits",
+                  "type": {
+                    "text": "string[]"
+                  }
                 }
               ]
             },
@@ -23237,7 +24423,7 @@
                   }
                 }
               ],
-              "description": "Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format."
+              "description": "Updates the value in 24-hour format if the input is valid, while preserving the selected UI hour cycle."
             },
             {
               "kind": "method",
@@ -23278,6 +24464,34 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_closeMeridiemDropdown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_handleMeridiemDropdownToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "focus",
@@ -23623,7 +24837,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.\nPlease note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.",
+              "description": "Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.\nPlease note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.\nThe `min` property must be provided in 24-hour format.",
               "default": "\"00:00\"",
               "fieldName": "min"
             },
@@ -23632,7 +24846,7 @@
               "type": {
                 "text": "string"
               },
-              "description": "Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.\nPlease note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.",
+              "description": "Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.\nPlease note that regardless of the selected UI hour cycle, the component value is stored in 24-hour format.\nThe `max` property must be provided in 24-hour format.",
               "default": "\"23:59\"",
               "fieldName": "max"
             },
@@ -23645,6 +24859,15 @@
               "description": "Whether the field is disabled. Controlled by daikin-input-group.",
               "fieldName": "disabled"
             },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly.\nWhen readonly, the user cannot change the value.",
+              "fieldName": "readonly"
+            },
             {
               "name": "required",
               "type": {
@@ -23663,6 +24886,15 @@
               "description": "Whether to show error state. Controlled by daikin-input-group. Ignored if disabled.",
               "fieldName": "error"
             },
+            {
+              "name": "hour-cycle",
+              "type": {
+                "text": "HourCycle"
+              },
+              "default": "\"h12\"",
+              "description": "Hour cycle for the UI.\n- h12: input uses 12-hour UI + AM/PM dropdown.\n- h23: input uses 24-hour UI and hides AM/PM dropdown.",
+              "fieldName": "hourCycle"
+            },
             {
               "name": "minutes-step",
               "type": {
@@ -23671,6 +24903,15 @@
               "description": "Minutes step. Specify the step size for the minutes when using the up and down arrow keys.",
               "default": "\"1\"",
               "fieldName": "minutesStep"
+            },
+            {
+              "name": "meridiem-single-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether AM/PM dropdown should be single-open across sibling time pickers in the same root.",
+              "fieldName": "meridiemSingleOpen"
             }
           ],
           "superclass": {
@@ -23684,17 +24925,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "to24HourFormat",
+          "name": "uiToTimeValue",
           "declaration": {
-            "name": "to24HourFormat",
+            "name": "uiToTimeValue",
             "module": "src/components/time-picker/daikin-time-picker.ts"
           }
         },
         {
           "kind": "js",
-          "name": "from24HourFormat",
+          "name": "timeValueToUI",
           "declaration": {
-            "name": "from24HourFormat",
+            "name": "timeValueToUI",
             "module": "src/components/time-picker/daikin-time-picker.ts"
           }
         },
@@ -24381,6 +25622,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the toggle switch is readonly.",
+              "attribute": "readonly",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "_inputRef",
@@ -24415,6 +25667,19 @@
               "name": "_updateFormValue",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "_handleClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleChange",
@@ -24730,6 +25995,15 @@
               "default": "false",
               "description": "Specify the toggle switch disabled state.",
               "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the toggle switch is readonly.",
+              "fieldName": "readonly"
             }
           ],
           "superclass": {
@@ -25694,6 +26968,10 @@
             {
               "description": "A slot for the tree item content.",
               "name": ""
+            },
+            {
+              "description": "A slot for an icon to be placed to the left of the content. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -26032,6 +27310,10 @@
             {
               "description": "A slot for section header content. Place a `span` element here.",
               "name": "label"
+            },
+            {
+              "description": "A slot for an icon to be placed to the right of the arrow and to the left of the label. Place `daikin-icon` or something similar.",
+              "name": "left-icon"
             }
           ],
           "members": [
@@ -26699,11 +27981,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The vertical navigation item component is a child element within the `daikin-vertical-navigation` component.\nIt can be rendered as a direct link or a collapsible menu (Use `daikin-vertical-navigation-menu-item` components for sub-items).\n\nHierarchy:\n- `daikin-vertical-navigation` > `daikin-vertical-navigation-item`",
+          "description": "The vertical navigation item component is a child element within the `daikin-vertical-navigation` component.\nIt can be rendered as a direct link, a collapsible menu, or an always-expanded section group\n(Use `daikin-vertical-navigation-menu-item` components for sub-items).\n\nHierarchy:\n- `daikin-vertical-navigation` > `daikin-vertical-navigation-item`",
           "name": "DaikinVerticalNavigationItem",
           "slots": [
             {
-              "description": "A slot for the sub-list content (e.g. `daikin-vertical-navigation-menu-item` elements). Only used when `type=\"menu\"`.",
+              "description": "A slot for the sub-list content (e.g. `daikin-vertical-navigation-menu-item` elements). Used when `type=\"menu\"` or `type=\"section\"`.",
               "name": ""
             },
             {
@@ -26725,9 +28007,9 @@
               "kind": "field",
               "name": "type",
               "type": {
-                "text": "\"link\" | \"menu\""
+                "text": "\"link\" | \"menu\" | \"section\""
               },
-              "description": "Type of the vertical navigation item.\n- `\"link\"` (default): Renders as an `<a>` element for direct navigation.\n- `\"menu\"`: Renders as a collapsible section with a toggle button and a default slot for sub-items.",
+              "description": "Type of the vertical navigation item.\n- `\"link\"` (default): Renders as an `<a>` element for direct navigation.\n- `\"menu\"`: Renders as a collapsible section with a toggle button and a default slot for sub-items.\n- `\"section\"`: Renders as an always-expanded section without a chevron.\n  If `href` is set, the parent is rendered as a link.\n  If `href` is omitted, the parent is rendered as non-interactive title text.",
               "default": "\"link\"",
               "attribute": "type",
               "reflects": true
@@ -26739,7 +28021,7 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The link `href`. Only used when `type=\"link\"`.",
+              "description": "The link `href`.\nUsed when `type=\"link\"`.\nAlso used when `type=\"section\"` to make the parent interactive.",
               "attribute": "href",
               "reflects": true
             },
@@ -26768,10 +28050,10 @@
               "kind": "field",
               "name": "current",
               "type": {
-                "text": "boolean"
+                "text": "boolean | \"descendant\""
               },
               "default": "false",
-              "description": "Whether this item is the currently active/selected item.\nWhen `true`, a blue vertical indicator bar is displayed on the left side.",
+              "description": "Current state of this item.\n- `false`: default state\n- `true`: current state (blue indicator)\n- `\"descendant\"`: indicates a descendant is current (neutral indicator)",
               "attribute": "current",
               "reflects": true
             },
@@ -26842,6 +28124,15 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "_effectiveCurrent",
+              "type": {
+                "text": "boolean | \"descendant\""
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_propagateDisabledToChildren",
@@ -26976,9 +28267,9 @@
             {
               "name": "type",
               "type": {
-                "text": "\"link\" | \"menu\""
+                "text": "\"link\" | \"menu\" | \"section\""
               },
-              "description": "Type of the vertical navigation item.\n- `\"link\"` (default): Renders as an `<a>` element for direct navigation.\n- `\"menu\"`: Renders as a collapsible section with a toggle button and a default slot for sub-items.",
+              "description": "Type of the vertical navigation item.\n- `\"link\"` (default): Renders as an `<a>` element for direct navigation.\n- `\"menu\"`: Renders as a collapsible section with a toggle button and a default slot for sub-items.\n- `\"section\"`: Renders as an always-expanded section without a chevron.\n  If `href` is set, the parent is rendered as a link.\n  If `href` is omitted, the parent is rendered as non-interactive title text.",
               "default": "\"link\"",
               "fieldName": "type"
             },
@@ -26988,7 +28279,7 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The link `href`. Only used when `type=\"link\"`.",
+              "description": "The link `href`.\nUsed when `type=\"link\"`.\nAlso used when `type=\"section\"` to make the parent interactive.",
               "fieldName": "href"
             },
             {
@@ -27011,10 +28302,10 @@
             {
               "name": "current",
               "type": {
-                "text": "boolean"
+                "text": "boolean | \"descendant\""
               },
               "default": "false",
-              "description": "Whether this item is the currently active/selected item.\nWhen `true`, a blue vertical indicator bar is displayed on the left side.",
+              "description": "Current state of this item.\n- `false`: default state\n- `true`: current state (blue indicator)\n- `\"descendant\"`: indicates a descendant is current (neutral indicator)",
               "fieldName": "current"
             },
             {
@@ -27121,7 +28412,7 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The link `href`. When omitted, the item is rendered as a placeholder link in the disabled visual state.",
+              "description": "The link `href`. When omitted, the item is rendered as an interactive item without navigation target.",
               "attribute": "href",
               "reflects": true
             },
@@ -27136,6 +28427,17 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "current",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this sub-menu item is the currently active/selected item.\nWhen `true`, a blue vertical indicator bar is displayed on the left side.",
+              "attribute": "current",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "badge",
@@ -27286,7 +28588,7 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The link `href`. When omitted, the item is rendered as a placeholder link in the disabled visual state.",
+              "description": "The link `href`. When omitted, the item is rendered as an interactive item without navigation target.",
               "fieldName": "href"
             },
             {
@@ -27298,6 +28600,15 @@
               "description": "Whether the menu item is disabled.\nA disabled item cannot be clicked or focused.",
               "fieldName": "disabled"
             },
+            {
+              "name": "current",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this sub-menu item is the currently active/selected item.\nWhen `true`, a blue vertical indicator bar is displayed on the left side.",
+              "fieldName": "current"
+            },
             {
               "name": "badge",
               "type": {