@ds-mo/ui 15.2.0 → 15.4.0

package/dist/mcp-data/registry/input.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input",
   "title": "Input",
-  "description": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+  "description": "Form-associated text and number input with constraints, optional free-text suggestions, token entry, and character counts.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,7 +13,7 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "summary": "Form-associated text and number input with constraints, optional free-text suggestions, token entry, and character counts.",
       "useWhen": [
         "A user must enter or edit one line of text, an email address, telephone number, URL, search query, password, or exact number.",
         "The value must participate in native, Angular, React, or Vue form state.",
@@ -64,7 +64,7 @@
         "Error text is associated with the native input and announced as an alert when the invalid state is rendered.",
         "Read-only fields remain focusable and submittable while preventing edits; inactive or disabled fields leave the tab order and are omitted from form submission.",
         "Password fields keep a named show-or-hide action beside the value. Revealing the value changes only the native input type; the submitted string does not change. The action restores focus to the field after activation.",
-        "Number stepper actions are pointer affordances hidden from the accessibility tree; the native spinbutton remains the single keyboard and assistive-technology control.",
+        "Optional number stepper actions are named buttons available to keyboard and assistive-technology users. The native spinbutton also retains arrow-key stepping; activating either button returns focus to the field.",
         "Prefix and suffix content must not carry information that is otherwise absent from the field's visible label, value, or description.",
         "A nested prefix or suffix Select is a separate control from the editable value and must have its own accessible name."
       ],
@@ -79,10 +79,13 @@
         "Search fields used with owned result sets forward aria-controls and aria-activedescendant to the native field so keyboard focus can remain in the query while assistive technology tracks the active result.",
         "The prefix and suffix slots host compact leading or trailing units such as a currency code, or a nested same-size inset Select. Text adornments use the control's balanced text inset. Nested Selects match the field density, set isInset, hasBorder false, width hug, and indicator up-down, keep a selected value, set allowClear false so the menu has no clear footer, set neutralTrigger so the selected unit stays on the secondary adornment foreground, and do not carry the field's error message. Configurable prefix and suffix controls are separated from the editable value by a vertical divider at the density icon height. The nested inset keeps its 2px remainder toward the line; the editable value keeps the same inline padding from the line as a non-prefixed field keeps from its border. The optional leading icon is decorative and does not replace the field label. Password, search-clear, and date or time actions stay type-owned trailing buttons rather than suffix-slot content.",
         "Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
-        "Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Two borderless inset chevron actions split the available inner height, disable independently at their numeric bound, and restore focus to the spinbutton after pointer activation.",
+        "Number fields preserve native spinbutton semantics, keyboard stepping, and min/max constraint behavior while dsChange continues to report the native string value. Optional borderless inset Plus and Minus buttons share the field density, appear in that order, disable independently at their numeric bound, and restore focus to the spinbutton after activation. Hide them when direct numeric entry is preferable; browser spinner chrome stays hidden.",
         "textAlign positions the editable value while the numeric stepper stays on the opposite inline edge, keeping the actions clear of the number: start-aligned values use an inline-end stepper and end-aligned values use an inline-start stepper.",
         "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
-        "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts."
+        "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts.",
+        "Length constraints validate both typed and programmatic values. By default excess text is retained and shown as an error; restrict mode uses a hard input limit. Counters show the draft length and maximum below the field, beside helper or error text when present.",
+        "Suggestions assist free text rather than constrain selection. Arrow keys highlight suggestions, Enter accepts one, and Escape dismisses the popup without changing the value.",
+        "Tokenized text and search fields use removable double-inset chips and commit trimmed, unique values with Enter or comma, accept delimited paste, and remove the last token with Backspace on an empty draft. Committed tokens submit as repeated entries; value remains the draft and must be committed before submission. Length and pattern constraints apply per token."
       ],
       "responsiveBehavior": [
         "Form fields normally fill their parent; use hug width only in a compact toolbar or filter layout with an explicit width constraint.",
@@ -92,16 +95,20 @@
       "frameworkCaveats": {
         "customElements": [
           "Listen for dsChange for user edits and dsClear for the search clear action.",
-          "Use the form attribute on the host when associating an input rendered outside its owning form."
+          "Use the form attribute on the host when associating an input rendered outside its owning form.",
+          "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
         ],
         "react": [
-          "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear."
+          "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear.",
+          "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
         ],
         "vue": [
-          "Use DsInput with v-model for the value, and listen for dsChange and dsClear."
+          "Use DsInput with v-model for the value, and listen for dsChange and dsClear.",
+          "Bind committed token arrays through tokens and dsTokensChange, separately from the draft value. Assign suggestions as a JavaScript array."
         ],
         "angular": [
-          "Import DsInput with TextValueAccessor when integrating with Angular Forms."
+          "Use TextValueAccessor for text inputs and NumericValueAccessor for a statically declared type=\"number\" input. Numeric forms receive numbers or null while the component event remains a string.",
+          "For tokenized input bind tokens and dsTokensChange explicitly; value and dsChange represent only the draft. Do not attach a scalar form value accessor to token mode."
         ]
       },
       "references": [
@@ -226,6 +233,14 @@
           "required": false,
           "mutable": false
         },
+        "decrementLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "decrement-label",
+          "default": "'Decrease value'",
+          "required": false,
+          "mutable": false
+        },
         "disabled": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -299,6 +314,14 @@
           "mutable": false,
           "description": "Optional leading icon name."
         },
+        "incrementLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "increment-label",
+          "default": "'Increase value'",
+          "required": false,
+          "mutable": false
+        },
         "inputId": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -324,6 +347,15 @@
           "required": false,
           "mutable": false
         },
+        "lengthBehavior": {
+          "type": "'error' | 'restrict'",
+          "resolvedType": "\"error\" | \"restrict\"",
+          "attribute": "length-behavior",
+          "default": "'error'",
+          "required": false,
+          "mutable": false,
+          "description": "Error preserves extra text; restrict uses the browser's hard input limit."
+        },
         "max": {
           "type": "number | undefined",
           "resolvedType": "number | undefined",
@@ -332,6 +364,14 @@
           "mutable": false,
           "description": "Maximum accepted value when type is number."
         },
+        "maxLength": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "max-length",
+          "required": false,
+          "mutable": false,
+          "description": "Maximum text length. A visible counter accompanies this constraint by default."
+        },
         "min": {
           "type": "number | undefined",
           "resolvedType": "number | undefined",
@@ -340,6 +380,14 @@
           "mutable": false,
           "description": "Minimum accepted value when type is number."
         },
+        "minLength": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "min-length",
+          "required": false,
+          "mutable": false,
+          "description": "Minimum non-empty text length, in native UTF-16 code units."
+        },
         "name": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -347,6 +395,21 @@
           "required": false,
           "mutable": false
         },
+        "pattern": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "pattern",
+          "required": false,
+          "mutable": false,
+          "description": "Native whole-value regular expression for text-like input types."
+        },
+        "patternMessage": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "pattern-message",
+          "required": false,
+          "mutable": false
+        },
         "placeholder": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -363,6 +426,14 @@
           "mutable": false,
           "description": "Keeps the value focusable and submittable while preventing edits."
         },
+        "removeTokenLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "remove-token-label",
+          "default": "'Remove {label}'",
+          "required": false,
+          "mutable": false
+        },
         "required": {
           "type": "boolean",
           "resolvedType": "boolean",
@@ -379,6 +450,14 @@
           "required": false,
           "mutable": false
         },
+        "showCharacterCount": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "show-character-count",
+          "default": "true",
+          "required": false,
+          "mutable": false
+        },
         "showPasswordLabel": {
           "type": "string",
           "resolvedType": "string",
@@ -387,6 +466,15 @@
           "required": false,
           "mutable": false
         },
+        "showStepper": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "show-stepper",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show inset increment/decrement actions for number fields. Native numeric editing remains available when hidden."
+        },
         "size": {
           "type": "InputSize",
           "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
@@ -404,6 +492,14 @@
           "mutable": false,
           "description": "Numeric increment used by native stepping and constraint validation."
         },
+        "suggestions": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": false,
+          "description": "Optional local suggestions; free text always remains valid. Used with text/search fields."
+        },
         "textAlign": {
           "type": "InputTextAlign",
           "resolvedType": "\"end\" | \"start\"",
@@ -411,7 +507,24 @@
           "default": "'start'",
           "required": false,
           "mutable": false,
-          "description": "Align the editable value; number steppers follow the same inline edge."
+          "description": "Align the editable value; number steppers sit on the opposite inline edge."
+        },
+        "tokenized": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "tokenized",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Free-text tokens entered with Enter/comma and removable chips. Used with text/search fields."
+        },
+        "tokens": {
+          "type": "string[]",
+          "resolvedType": "string[]",
+          "default": "[]",
+          "required": false,
+          "mutable": true,
+          "description": "Committed values; value remains the editable draft when tokenized."
         },
         "type": {
           "type": "InputType",
@@ -453,6 +566,20 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true
+        },
+        {
+          "name": "dsSuggestionSelect",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        },
+        {
+          "name": "dsTokensChange",
+          "detail": "string[]",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
         }
       ],
       "methods": [
@@ -526,6 +653,14 @@
         "required": false,
         "mutable": false
       },
+      "decrementLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "decrement-label",
+        "default": "'Decrease value'",
+        "required": false,
+        "mutable": false
+      },
       "disabled": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -599,6 +734,14 @@
         "mutable": false,
         "description": "Optional leading icon name."
       },
+      "incrementLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "increment-label",
+        "default": "'Increase value'",
+        "required": false,
+        "mutable": false
+      },
       "inputId": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -624,6 +767,15 @@
         "required": false,
         "mutable": false
       },
+      "lengthBehavior": {
+        "type": "'error' | 'restrict'",
+        "resolvedType": "\"error\" | \"restrict\"",
+        "attribute": "length-behavior",
+        "default": "'error'",
+        "required": false,
+        "mutable": false,
+        "description": "Error preserves extra text; restrict uses the browser's hard input limit."
+      },
       "max": {
         "type": "number | undefined",
         "resolvedType": "number | undefined",
@@ -632,6 +784,14 @@
         "mutable": false,
         "description": "Maximum accepted value when type is number."
       },
+      "maxLength": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "max-length",
+        "required": false,
+        "mutable": false,
+        "description": "Maximum text length. A visible counter accompanies this constraint by default."
+      },
       "min": {
         "type": "number | undefined",
         "resolvedType": "number | undefined",
@@ -640,6 +800,14 @@
         "mutable": false,
         "description": "Minimum accepted value when type is number."
       },
+      "minLength": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "min-length",
+        "required": false,
+        "mutable": false,
+        "description": "Minimum non-empty text length, in native UTF-16 code units."
+      },
       "name": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -647,6 +815,21 @@
         "required": false,
         "mutable": false
       },
+      "pattern": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "pattern",
+        "required": false,
+        "mutable": false,
+        "description": "Native whole-value regular expression for text-like input types."
+      },
+      "patternMessage": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "pattern-message",
+        "required": false,
+        "mutable": false
+      },
       "placeholder": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -663,6 +846,14 @@
         "mutable": false,
         "description": "Keeps the value focusable and submittable while preventing edits."
       },
+      "removeTokenLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "remove-token-label",
+        "default": "'Remove {label}'",
+        "required": false,
+        "mutable": false
+      },
       "required": {
         "type": "boolean",
         "resolvedType": "boolean",
@@ -679,6 +870,14 @@
         "required": false,
         "mutable": false
       },
+      "showCharacterCount": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "show-character-count",
+        "default": "true",
+        "required": false,
+        "mutable": false
+      },
       "showPasswordLabel": {
         "type": "string",
         "resolvedType": "string",
@@ -687,6 +886,15 @@
         "required": false,
         "mutable": false
       },
+      "showStepper": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "show-stepper",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show inset increment/decrement actions for number fields. Native numeric editing remains available when hidden."
+      },
       "size": {
         "type": "InputSize",
         "resolvedType": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
@@ -704,6 +912,14 @@
         "mutable": false,
         "description": "Numeric increment used by native stepping and constraint validation."
       },
+      "suggestions": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": false,
+        "description": "Optional local suggestions; free text always remains valid. Used with text/search fields."
+      },
       "textAlign": {
         "type": "InputTextAlign",
         "resolvedType": "\"end\" | \"start\"",
@@ -711,7 +927,24 @@
         "default": "'start'",
         "required": false,
         "mutable": false,
-        "description": "Align the editable value; number steppers follow the same inline edge."
+        "description": "Align the editable value; number steppers sit on the opposite inline edge."
+      },
+      "tokenized": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "tokenized",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Free-text tokens entered with Enter/comma and removable chips. Used with text/search fields."
+      },
+      "tokens": {
+        "type": "string[]",
+        "resolvedType": "string[]",
+        "default": "[]",
+        "required": false,
+        "mutable": true,
+        "description": "Committed values; value remains the editable draft when tokenized."
       },
       "type": {
         "type": "InputType",
@@ -753,6 +986,20 @@
         "bubbles": true,
         "cancelable": true,
         "composed": true
+      },
+      {
+        "name": "dsSuggestionSelect",
+        "detail": "string",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      },
+      {
+        "name": "dsTokensChange",
+        "detail": "string[]",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
       }
     ],
     "methods": [
@@ -787,10 +1034,11 @@
         "import": "import { DsInput } from '@ds-mo/ui/angular/ds-input';",
         "example": "<ds-input></ds-input>"
       },
+      "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: suggestions, tokens.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.6.1",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
@@ -803,19 +1051,21 @@
   ],
   "registryDependencies": [
     "button-unfilled",
+    "chip",
     "divider",
     "icon",
+    "input",
     "text"
   ],
   "files": [
     {
       "path": "src/wc/components/Input/Input.css",
-      "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n  --ds-input-stepper-fg: var(--color-foreground-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input--align-start {\n  text-align: start;\n}\n\n.native-input--align-end {\n  text-align: end;\n}\n\n/* Replace engine-specific number arrows with one density-aware inset stepper. */\n.native-input[type='number'] {\n  -moz-appearance: textfield;\n}\n\n.native-input[type='number']::-webkit-inner-spin-button,\n.native-input[type='number']::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.input-control--number.input-control--align-start {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control--number.input-control--align-end {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control__number-stepper {\n  position: relative;\n  z-index: 2;\n  display: grid;\n  grid-template-rows: repeat(2, minmax(0, 1fr));\n  flex: 0 0 var(--ds-control-icon);\n  width: var(--ds-control-icon);\n  height: calc(var(--ds-control-height) - var(--dimension-space-050));\n  overflow: hidden;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-stepper-fg);\n}\n\n.input-control__number-step {\n  all: unset;\n  position: relative;\n  z-index: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  color: inherit;\n  cursor: default;\n}\n\n.input-control__number-step--increment {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025)) 0 0;\n}\n\n.input-control__number-step--decrement {\n  border-radius: 0 0 var(--ds-control-radius, var(--dimension-radius-025))\n    var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n.input-control__number-step:disabled {\n  color: var(--color-foreground-quaternary);\n}\n\n.input-control__number-step-icon {\n  flex-shrink: 0;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__prefix-text,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__prefix-text,\n.input-control__suffix {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.input-control__prefix-text--control,\n.input-control__suffix--control {\n  align-self: stretch;\n  min-width: 0;\n  white-space: normal;\n  gap: var(--dimension-space-025);\n}\n\n.input-control__prefix-text--empty,\n.input-control__suffix--empty {\n  display: none;\n}\n\n/* Nested inset controls keep 2px on the outer edge, matching trailing actions. */\n.input-control--prefix-control {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control--suffix-control {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control__adornment-divider {\n  position: relative;\n  z-index: 2;\n  pointer-events: none;\n}\n\n/*\n * Select side stays on the 2px inset remainder. Value side matches a\n * non-prefixed field's inline padding from its border.\n */\n.input-control__prefix-text--control .input-control__adornment-divider {\n  margin-inline-end: calc(var(--ds-control-padding-inline) - var(--ds-control-gap));\n}\n\n.input-control__suffix--control .input-control__adornment-divider {\n  margin-inline-start: calc(var(--ds-control-padding-inline) - var(--ds-control-gap));\n}\n\n/* The input frame owns the nested clear action's cross-axis alignment. */\n.input-control > .input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n/* Same-size inset trailing action as date/time: 2px remaining on the end edges. */\n.input-control > .input-control__trailing-action {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n:host(.ds-control-inactive) .input-control > .input-control__trailing-action {\n  --effect-opacity-medium: 1;\n}\n\n.input-control:has(.input-control__trailing-action) {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control__number-step:disabled {\n    color: var(--ds-forced-color-disabled);\n  }\n\n  .input-control--bordered:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/text-field-support.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  text-overflow: ellipsis;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input--align-start {\n  text-align: start;\n}\n\n.native-input--align-end {\n  text-align: end;\n}\n\n/* Native arrows stay hidden whether optional inset actions are shown or not. */\n.native-input[type='number'] {\n  -moz-appearance: textfield;\n}\n\n.native-input[type='number']::-webkit-inner-spin-button,\n.native-input[type='number']::-webkit-outer-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n\n.input-control--stepper.input-control--align-start {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control--stepper.input-control--align-end {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control__number-stepper {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--dimension-space-025);\n}\n\n:host(.ds-control-inactive) .input-control__number-step {\n  --effect-opacity-medium: 1;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__prefix-text,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__prefix-text,\n.input-control__suffix {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.input-control__prefix-text--control,\n.input-control__suffix--control {\n  align-self: stretch;\n  min-width: 0;\n  white-space: normal;\n  gap: var(--dimension-space-025);\n}\n\n.input-control__prefix-text--empty,\n.input-control__suffix--empty {\n  display: none;\n}\n\n/* Nested inset controls keep 2px on the outer edge, matching trailing actions. */\n.input-control--prefix-control {\n  padding-inline-start: var(--dimension-space-025);\n}\n\n.input-control--suffix-control {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.input-control__adornment-divider {\n  position: relative;\n  z-index: 2;\n  pointer-events: none;\n}\n\n/*\n * Select side stays on the 2px inset remainder. Value side matches a\n * non-prefixed field's inline padding from its border.\n */\n.input-control__prefix-text--control .input-control__adornment-divider {\n  margin-inline-end: calc(var(--ds-control-padding-inline) - var(--ds-control-gap));\n}\n\n.input-control__suffix--control .input-control__adornment-divider {\n  margin-inline-start: calc(var(--ds-control-padding-inline) - var(--ds-control-gap));\n}\n\n/* The input frame owns the nested clear action's cross-axis alignment. */\n.input-control > .input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n/* Same-size inset trailing action as date/time: 2px remaining on the end edges. */\n.input-control > .input-control__trailing-action {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n:host(.ds-control-inactive) .input-control > .input-control__trailing-action {\n  --effect-opacity-medium: 1;\n}\n\n.input-control:has(.input-control__trailing-action) {\n  padding-inline-end: var(--dimension-space-025);\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control--bordered:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n\n.input-control--tokenized .native-input {\n  box-sizing: border-box;\n  padding-block: 0;\n}\n\n.input-control--has-tokens {\n  --ds-input-token-inset: var(--dimension-space-050);\n\n  height: auto;\n  min-height: var(--ds-control-height);\n  flex-wrap: wrap;\n  padding: var(--ds-input-token-inset);\n  row-gap: var(--dimension-space-050);\n}\n\n/* Chip stops at md; xs retains the shared single-inset fallback. */\n.input-control--has-tokens.ds-control--lg {\n  --ds-input-token-inset: var(--dimension-space-100);\n}\n.input-control--has-tokens.ds-control--xs {\n  --ds-input-token-inset: var(--dimension-space-025);\n}\n\n.input-control--has-tokens .native-input {\n  flex: 1 1 var(--dimension-size-800);\n  width: 0;\n  min-width: min(var(--dimension-size-800), 100%);\n  height: calc(var(--ds-control-height) - var(--ds-input-token-inset) * 2);\n}\n.input-token {\n  position: relative;\n  z-index: 2;\n  max-width: 100%;\n}\n.input-suggestions__list {\n  overflow: auto;\n  max-height: calc(var(--dimension-size-base) * 20);\n  padding: var(--dimension-space-050);\n}\n",
       "type": "registry:ui"
     },
     {
       "path": "src/wc/components/Input/Input.tsx",
-      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\nexport type InputTextAlign = 'start' | 'end';\n\nconst CONTROL_ADORNMENT = 'ds-select, ds-button-unfilled, ds-button-filled';\n\nfunction isControlAdornment(element: Element): boolean {\n  return element.matches(CONTROL_ADORNMENT) || Boolean(element.querySelector(CONTROL_ADORNMENT));\n}\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() showPasswordLabel: string = 'Show password';\n  @Prop() hidePasswordLabel: string = 'Hide password';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Minimum accepted value when type is number. */\n  @Prop() min: number | undefined;\n  /** Maximum accepted value when type is number. */\n  @Prop() max: number | undefined;\n  /** Numeric increment used by native stepping and constraint validation. */\n  @Prop() step: number | undefined;\n  /** Align the editable value; number steppers follow the same inline edge. */\n  @Prop() textAlign: InputTextAlign = 'start';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */\n  @Prop() hasInteractionFill: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Identifies the results or popup controlled by the editable field. */\n  @Prop({ attribute: 'aria-controls' }) ariaControls: string | undefined;\n  /** Identifies the active descendant while focus remains in the editable field. */\n  @Prop({ attribute: 'aria-activedescendant' }) ariaActiveDescendant: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  private inputEl?: HTMLInputElement;\n  @State() private formDisabled = false;\n  @State() private hasPrefix = false;\n  @State() private hasPrefixControl = false;\n  @State() private hasSuffix = false;\n  @State() private hasSuffixControl = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private passwordRevealed = false;\n  private restorePasswordFocus = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncAdornmentSlots();\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    this.syncAdornmentSlots();\n    if (!this.restorePasswordFocus) return;\n    this.restorePasswordFocus = false;\n    this.inputEl?.focus({ preventScroll: true });\n  }\n\n  @Watch('type')\n  onTypeChange() {\n    if (this.type !== 'password') this.passwordRevealed = false;\n  }\n\n  private syncAdornmentSlots() {\n    const prefixNodes = [...this.el.querySelectorAll('[slot=\"prefix\"]')];\n    const suffixNodes = [...this.el.querySelectorAll('[slot=\"suffix\"]')];\n    const hasPrefix = prefixNodes.length > 0;\n    const hasPrefixControl = prefixNodes.some(isControlAdornment);\n    const hasSuffix = suffixNodes.length > 0;\n    const hasSuffixControl = suffixNodes.some(isControlAdornment);\n    if (hasPrefix !== this.hasPrefix) this.hasPrefix = hasPrefix;\n    if (hasPrefixControl !== this.hasPrefixControl) this.hasPrefixControl = hasPrefixControl;\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n    if (hasSuffixControl !== this.hasSuffixControl) this.hasSuffixControl = hasSuffixControl;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.passwordRevealed = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.inputEl?.focus();\n  };\n\n  private handleTogglePassword = () => {\n    this.passwordRevealed = !this.passwordRevealed;\n    this.restorePasswordFocus = true;\n  };\n\n  private numericStepDisabled(direction: 1 | -1): boolean {\n    if (this.value.trim() === '') return false;\n    const value = Number(this.value);\n    if (!Number.isFinite(value)) return false;\n    if (direction > 0 && this.max !== undefined) return value >= this.max;\n    if (direction < 0 && this.min !== undefined) return value <= this.min;\n    return false;\n  }\n\n  private handleNumericStep = (direction: 1 | -1) => {\n    const input = this.inputEl;\n    if (!input || input.disabled || input.readOnly || this.numericStepDisabled(direction)) return;\n\n    const previous = input.value;\n    if (direction > 0) input.stepUp();\n    else input.stepDown();\n    input.focus({ preventScroll: true });\n    if (input.value === previous) return;\n\n    this.value = input.value;\n    this.dsChange.emit(this.value);\n  };\n\n  private renderNumericStepper(inactive: boolean) {\n    const incrementDisabled = inactive || this.readOnly || this.numericStepDisabled(1);\n    const decrementDisabled = inactive || this.readOnly || this.numericStepDisabled(-1);\n\n    return (\n      <span class=\"input-control__number-stepper\">\n        <button\n          type=\"button\"\n          class=\"input-control__number-step input-control__number-step--increment ds-focus-ring-inset ds-interaction-fill\"\n          disabled={incrementDisabled}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          onClick={() => this.handleNumericStep(1)}\n        >\n          <ds-icon\n            class=\"input-control__number-step-icon ds-interaction-fill__content\"\n            name=\"ChevronUp\"\n            size=\"xs\"\n            color=\"inherit\"\n          />\n        </button>\n        <button\n          type=\"button\"\n          class=\"input-control__number-step input-control__number-step--decrement ds-focus-ring-inset ds-interaction-fill\"\n          disabled={decrementDisabled}\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          onClick={() => this.handleNumericStep(-1)}\n        >\n          <ds-icon\n            class=\"input-control__number-step-icon ds-interaction-fill__content\"\n            name=\"ChevronDown\"\n            size=\"xs\"\n            color=\"inherit\"\n          />\n        </button>\n      </span>\n    );\n  }\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showPasswordToggle = this.type === 'password';\n    const nativeType = showPasswordToggle && this.passwordRevealed ? 'text' : this.type;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const numeric = this.type === 'number';\n    const resolvedAutoComplete = this.autoComplete ?? (this.type === 'search' ? 'off' : undefined);\n    const suppressBrowserChrome = this.type === 'search' || this.type === 'password';\n\n    const describedBy =\n      [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n      undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\n          'ds-field-stack--supporting-inset': !this.hasBorder,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'input-control--number': numeric,\n            'input-control--align-start': this.textAlign === 'start',\n            'input-control--align-end': this.textAlign === 'end',\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'input-control--prefix-control': this.hasPrefixControl,\n            'input-control--suffix-control': this.hasSuffixControl,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {numeric && this.textAlign === 'end' && this.renderNumericStepper(inactive)}\n          {this.icon && (\n            <span\n              class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <span\n            class={{\n              'input-control__prefix-text': true,\n              'ds-control-label-box': !this.hasPrefixControl,\n              'ds-interaction-fill__content': true,\n              'input-control__prefix-text--control': this.hasPrefixControl,\n              'input-control__prefix-text--empty': !this.hasPrefix,\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={() => this.syncAdornmentSlots()} />\n            {this.hasPrefixControl && (\n              <ds-divider\n                class=\"input-control__adornment-divider\"\n                orientation=\"vertical\"\n                length=\"var(--ds-control-icon)\"\n              />\n            )}\n          </span>\n          <input\n            ref={element => {\n              this.inputEl = element;\n            }}\n            type={nativeType}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            min={numeric ? this.min : undefined}\n            max={numeric ? this.max : undefined}\n            step={numeric ? this.step : undefined}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={resolvedAutoComplete}\n            autoCapitalize={suppressBrowserChrome ? 'none' : undefined}\n            autoCorrect={suppressBrowserChrome ? 'off' : undefined}\n            spellcheck={suppressBrowserChrome ? false : undefined}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input native-input--align-${this.textAlign} ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-controls={this.ariaControls}\n            aria-activedescendant={this.ariaActiveDescendant}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span\n            class={{\n              'input-control__suffix': true,\n              'ds-control-label-box': !this.hasSuffixControl,\n              'input-control__suffix--control': this.hasSuffixControl,\n              'input-control__suffix--empty': !this.hasSuffix,\n            }}\n          >\n            {this.hasSuffixControl && (\n              <ds-divider\n                class=\"input-control__adornment-divider\"\n                orientation=\"vertical\"\n                length=\"var(--ds-control-icon)\"\n              />\n            )}\n            <slot name=\"suffix\" onSlotchange={() => this.syncAdornmentSlots()} />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n          {showPasswordToggle && (\n            <ds-button-unfilled\n              class=\"input-control__trailing-action\"\n              variant=\"icon\"\n              size={this.size}\n              icon={this.passwordRevealed ? 'EyeStrikethrough' : 'Eye'}\n              hasBorder={false}\n              isInset\n              isInactive={inactive}\n              ariaLabel={this.passwordRevealed ? this.hidePasswordLabel : this.showPasswordLabel}\n              onDsClick={this.handleTogglePassword}\n            />\n          )}\n          {numeric && this.textAlign === 'start' && this.renderNumericStepper(inactive)}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  restoreStringArrayFormState,\n  setRepeatedFormControlValue,\n  resolveCssLengthPx,\n  TOKEN_DEFAULTS,\n  setFormControlValue,\n  type ControlWidth,\n} from '../../utils';\n\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport { lengthLimit, textConstraintValidity } from '../../utils/text-constraints';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\nexport type InputTextAlign = 'start' | 'end';\n\nconst CONTROL_ADORNMENT = 'ds-select, ds-button-unfilled, ds-button-filled';\n\nfunction isControlAdornment(element: Element): boolean {\n  return element.matches(CONTROL_ADORNMENT) || Boolean(element.querySelector(CONTROL_ADORNMENT));\n}\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() showPasswordLabel: string = 'Show password';\n  @Prop() hidePasswordLabel: string = 'Hide password';\n  /** Minimum non-empty text length, in native UTF-16 code units. */\n  @Prop() minLength: number | undefined;\n  /** Maximum text length. A visible counter accompanies this constraint by default. */\n  @Prop() maxLength: number | undefined;\n  /** Error preserves extra text; restrict uses the browser's hard input limit. */\n  @Prop() lengthBehavior: 'error' | 'restrict' = 'error';\n  @Prop() showCharacterCount: boolean = true;\n  /** Native whole-value regular expression for text-like input types. */\n  @Prop() pattern: string | undefined;\n  @Prop() patternMessage: string | undefined;\n  /** Optional local suggestions; free text always remains valid. Used with text/search fields. */\n  @Prop() suggestions: string[] = [];\n  /** Free-text tokens entered with Enter/comma and removable chips. Used with text/search fields. */\n  @Prop({ reflect: true }) tokenized: boolean = false;\n  /** Committed values; value remains the editable draft when tokenized. */\n  @Prop({ mutable: true }) tokens: string[] = [];\n  @Prop() removeTokenLabel: string = 'Remove {label}';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Minimum accepted value when type is number. */\n  @Prop() min: number | undefined;\n  /** Maximum accepted value when type is number. */\n  @Prop() max: number | undefined;\n  /** Numeric increment used by native stepping and constraint validation. */\n  @Prop() step: number | undefined;\n  /** Show inset increment/decrement actions for number fields. Native numeric editing remains available when hidden. */\n  @Prop() showStepper: boolean = true;\n  @Prop() incrementLabel: string = 'Increase value';\n  @Prop() decrementLabel: string = 'Decrease value';\n  /** Align the editable value; number steppers sit on the opposite inline edge. */\n  @Prop() textAlign: InputTextAlign = 'start';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Show the standard hover and pressed fill when the field is not embedded in interactive chrome. */\n  @Prop() hasInteractionFill: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Identifies the results or popup controlled by the editable field. */\n  @Prop({ attribute: 'aria-controls' }) ariaControls: string | undefined;\n  /** Identifies the active descendant while focus remains in the editable field. */\n  @Prop({ attribute: 'aria-activedescendant' }) ariaActiveDescendant: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsTokensChange!: EventEmitter<string[]>;\n  @Event() dsSuggestionSelect!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  @State() private constraintMessage = '';\n  @State() private submitted = false;\n  private get managedByField(): boolean {\n    return Boolean(this.el.closest('ds-field'));\n  }\n  private get visibleConstraintMessage(): string {\n    return this.touched ||\n      this.submitted ||\n      (this.maxLength !== undefined && this.value.length > this.maxLength)\n      ? this.constraintMessage\n      : '';\n  }\n  private get hasCounter(): boolean {\n    return (\n      this.showCharacterCount && lengthLimit(this.maxLength) !== undefined && this.type !== 'number'\n    );\n  }\n\n  @State() private suggestionsOpen = false;\n  @State() private activeSuggestion = -1;\n  @State() private suggestionPosition = { x: 0, y: 0 };\n  @State() private suggestionsReady = false;\n  private controlEl?: HTMLElement;\n  private initialTokens: string[] = [];\n  private get supportsTextFeatures(): boolean {\n    return this.type === 'text' || this.type === 'search';\n  }\n  private get isTokenized(): boolean {\n    return this.tokenized && this.supportsTextFeatures;\n  }\n  private get filteredSuggestions(): string[] {\n    if (!this.supportsTextFeatures) return [];\n    const query = this.value.trim().toLocaleLowerCase();\n    return [...new Set(this.suggestions)].filter(\n      value =>\n        value.toLocaleLowerCase().includes(query) &&\n        (!this.isTokenized || !this.tokens.includes(value))\n    );\n  }\n  private readonly suggestionPlacement = new AnchoredPositionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-suggestions'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    measure: (anchor, popup) => {\n      if (!this.suggestionsOpen) return null;\n      const gap = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n      return {\n        anchorRect: anchor.getBoundingClientRect(),\n        popupWidth: popup.offsetWidth,\n        popupHeight: popup.offsetHeight,\n        side: 'bottom',\n        align: 'start',\n        sideOffsetPx: gap,\n        alignOffsetPx: 0,\n        viewportPadPx: gap,\n        viewportWidth: window.innerWidth,\n        viewportHeight: window.innerHeight,\n        collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n      };\n    },\n    apply: ({ x, y }) => {\n      this.suggestionPosition = { x, y };\n    },\n    onReady: () => {\n      this.suggestionsReady = true;\n    },\n    topLayer: true,\n    observeResize: true,\n    liveUpdate: 'frame',\n  });\n  private readonly suggestionInteraction = new AnchoredOverlayInteractionController({\n    getAnchor: () => this.controlEl ?? null,\n    getPopup: () => this.el.querySelector<HTMLElement>('.input-suggestions'),\n    getOwnerDocument: () => this.el.ownerDocument,\n    onOutsideActivation: () => this.closeSuggestions(),\n  });\n\n  private initialValue = '';\n  private inputEl?: HTMLInputElement;\n  @State() private formDisabled = false;\n  @State() private hasPrefix = false;\n  @State() private hasPrefixControl = false;\n  @State() private hasSuffix = false;\n  @State() private hasSuffixControl = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private passwordRevealed = false;\n  private restorePasswordFocus = false;\n\n  componentWillLoad() {\n    this.value = String(this.value ?? '');\n    this.tokens = Array.isArray(this.tokens) ? this.tokens : [];\n    this.initialValue = this.value;\n    this.initialTokens = [...this.tokens];\n    this.syncAdornmentSlots();\n    this.syncFormValue();\n  }\n\n  disconnectedCallback() {\n    this.closeSuggestions();\n  }\n\n  componentDidRender() {\n    this.syncAdornmentSlots();\n    if (this.suggestionsOpen) this.suggestionPlacement.schedule();\n    if (!this.restorePasswordFocus) return;\n    this.restorePasswordFocus = false;\n    this.inputEl?.focus({ preventScroll: true });\n  }\n\n  @Watch('type')\n  onTypeChange() {\n    if (this.type !== 'password') this.passwordRevealed = false;\n  }\n\n  private syncAdornmentSlots() {\n    const prefixNodes = [...this.el.querySelectorAll('[slot=\"prefix\"]')];\n    const suffixNodes = [...this.el.querySelectorAll('[slot=\"suffix\"]')];\n    const hasPrefix = prefixNodes.length > 0;\n    const hasPrefixControl = prefixNodes.some(isControlAdornment);\n    const hasSuffix = suffixNodes.length > 0;\n    const hasSuffixControl = suffixNodes.some(isControlAdornment);\n    if (hasPrefix !== this.hasPrefix) this.hasPrefix = hasPrefix;\n    if (hasPrefixControl !== this.hasPrefixControl) this.hasPrefixControl = hasPrefixControl;\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n    if (hasSuffixControl !== this.hasSuffixControl) this.hasSuffixControl = hasSuffixControl;\n  }\n\n  @Watch('tokens')\n  @Watch('tokenized')\n  @Watch('name')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('readOnly')\n  @Watch('minLength')\n  @Watch('maxLength')\n  @Watch('requiredMessage')\n  @Watch('pattern')\n  @Watch('patternMessage')\n  @Watch('type')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  syncFormValue() {\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value ?? '');\n    }\n    if (!Array.isArray(this.tokens)) this.tokens = [];\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    if (this.isTokenized)\n      setRepeatedFormControlValue(this.internals, this.name, this.tokens, { inactive });\n    else setFormControlValue(this.internals, this.value, { inactive });\n    let validity =\n      inactive || this.readOnly\n        ? { flags: {}, message: '' }\n        : textConstraintValidity({\n            ...this.textConstraints(),\n            required: this.required && !this.isTokenized,\n          });\n    if (this.isTokenized && !inactive && !this.readOnly) {\n      const invalidToken = this.tokens\n        .map(value => textConstraintValidity({ ...this.textConstraints(), value, required: false }))\n        .find(result => result.message);\n      if (invalidToken) validity = invalidToken;\n      else if (this.required && this.tokens.length === 0)\n        validity = { flags: { valueMissing: true }, message: this.requiredMessage };\n      else if (this.value.trim() && !validity.message)\n        validity = { flags: { customError: true }, message: 'Press Enter to add this value.' };\n    }\n    if (inactive || this.readOnly) this.closeSuggestions();\n    this.constraintMessage = validity.message;\n    this.internals.setValidity(validity.flags, validity.message);\n  }\n\n  private textConstraints() {\n    return {\n      value: this.value,\n      type: this.type,\n      required: this.required,\n      requiredMessage: this.requiredMessage,\n      minLength: this.minLength,\n      maxLength: this.maxLength,\n      pattern: this.pattern,\n      patternMessage: this.patternMessage,\n      min: this.min,\n      max: this.max,\n      step: this.step,\n    };\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.tokens = [...this.initialTokens];\n    this.closeSuggestions();\n    this.touched = false;\n    this.submitted = false;\n    this.passwordRevealed = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (this.isTokenized) this.tokens = restoreStringArrayFormState(state);\n    else this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n    this.activeSuggestion = -1;\n    this.openSuggestions();\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n    this.closeSuggestions();\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    if (this.isTokenized) {\n      this.tokens = [];\n      this.dsTokensChange.emit([]);\n    }\n    this.closeSuggestions();\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.inputEl?.focus();\n  };\n\n  private handleTogglePassword = () => {\n    this.passwordRevealed = !this.passwordRevealed;\n    this.restorePasswordFocus = true;\n  };\n\n  @Watch('suggestions')\n  onSuggestionsChanged() {\n    this.activeSuggestion = -1;\n    if (this.focused && this.value) this.openSuggestions();\n  }\n\n  private openSuggestions() {\n    if (\n      this.disabled ||\n      this.formDisabled ||\n      this.isInactive ||\n      this.readOnly ||\n      !this.filteredSuggestions.length\n    ) {\n      this.closeSuggestions();\n      return;\n    }\n    if (this.suggestionsOpen) return;\n    this.suggestionsReady = false;\n    this.suggestionsOpen = true;\n    this.suggestionInteraction.connect();\n    this.suggestionPlacement.observe();\n    this.suggestionPlacement.schedule();\n  }\n  private closeSuggestions() {\n    this.suggestionPlacement.unobserve();\n    this.suggestionInteraction.disconnect();\n    const popup = this.el.querySelector<HTMLElement>('.input-suggestions');\n    if (popup?.matches(':popover-open')) popup.hidePopover();\n    this.suggestionsOpen = false;\n    this.activeSuggestion = -1;\n  }\n  private addTokens(text: string) {\n    if (this.readOnly || this.disabled || this.isInactive || this.formDisabled) return;\n    const values = text\n      .split(/[,\\n\\r]+/)\n      .map(value => {\n        const trimmed = value.trim();\n        const max = lengthLimit(this.maxLength);\n        return this.lengthBehavior === 'restrict' && max !== undefined\n          ? trimmed.slice(0, max)\n          : trimmed;\n      })\n      .filter(Boolean);\n    if (!values.length) return;\n    this.tokens = [...new Set([...this.tokens, ...values])];\n    this.value = '';\n    this.dsTokensChange.emit([...this.tokens]);\n    this.dsChange.emit('');\n    this.closeSuggestions();\n  }\n  private removeToken(index: number) {\n    if (this.readOnly || this.disabled || this.isInactive || this.formDisabled) return;\n    this.tokens = this.tokens.filter((_, tokenIndex) => index !== tokenIndex);\n    this.dsTokensChange.emit([...this.tokens]);\n    this.inputEl?.focus();\n  }\n  private selectSuggestion(value: string) {\n    if (this.isTokenized) this.addTokens(value);\n    else {\n      const max = lengthLimit(this.maxLength);\n      this.value =\n        this.lengthBehavior === 'restrict' && max !== undefined ? value.slice(0, max) : value;\n      this.dsChange.emit(this.value);\n    }\n    this.dsSuggestionSelect.emit(value);\n    this.closeSuggestions();\n    this.inputEl?.focus();\n  }\n  private handleTextKeyDown = (event: KeyboardEvent) => {\n    if (event.isComposing || this.readOnly || this.disabled || this.isInactive || this.formDisabled)\n      return;\n    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.filteredSuggestions.length) {\n      event.preventDefault();\n      this.openSuggestions();\n      const length = this.filteredSuggestions.length;\n      this.activeSuggestion =\n        this.activeSuggestion < 0\n          ? event.key === 'ArrowDown'\n            ? 0\n            : length - 1\n          : Math.max(\n              0,\n              Math.min(length - 1, this.activeSuggestion + (event.key === 'ArrowDown' ? 1 : -1))\n            );\n      requestAnimationFrame(() =>\n        this.el\n          .querySelector(`#${this.generatedId}-suggestion-${this.activeSuggestion}`)\n          ?.scrollIntoView({ block: 'nearest' })\n      );\n    } else if (event.key === 'Escape' && this.suggestionsOpen) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.closeSuggestions();\n    } else if (event.key === 'Enter' && this.suggestionsOpen && this.activeSuggestion >= 0) {\n      event.preventDefault();\n      this.selectSuggestion(this.filteredSuggestions[this.activeSuggestion]);\n    } else if (\n      this.isTokenized &&\n      (event.key === 'Enter' || event.key === ',') &&\n      this.value.trim()\n    ) {\n      event.preventDefault();\n      this.addTokens(this.value);\n    } else if (this.isTokenized && event.key === 'Backspace' && !this.value && this.tokens.length) {\n      event.preventDefault();\n      this.removeToken(this.tokens.length - 1);\n    } else if (event.key === 'Tab') this.closeSuggestions();\n  };\n  private handlePaste = (event: ClipboardEvent) => {\n    if (!this.isTokenized || this.readOnly || this.disabled || this.isInactive || this.formDisabled)\n      return;\n    const pasted = event.clipboardData?.getData('text') ?? '';\n    if (!/[,\\r\\n]/.test(pasted)) return;\n    event.preventDefault();\n    const start = this.inputEl?.selectionStart ?? this.value.length;\n    const end = this.inputEl?.selectionEnd ?? start;\n    this.addTokens(this.value.slice(0, start) + pasted + this.value.slice(end));\n  };\n\n  private numericStepDisabled(direction: 1 | -1): boolean {\n    if (this.value.trim() === '') return false;\n    const value = Number(this.value);\n    if (!Number.isFinite(value)) return false;\n    if (direction > 0 && this.max !== undefined) return value >= this.max;\n    if (direction < 0 && this.min !== undefined) return value <= this.min;\n    return false;\n  }\n\n  private handleNumericStep = (direction: 1 | -1) => {\n    const input = this.inputEl;\n    if (!input || input.disabled || input.readOnly || this.numericStepDisabled(direction)) return;\n\n    const previous = input.value;\n    if (direction > 0) input.stepUp();\n    else input.stepDown();\n    input.focus({ preventScroll: true });\n    if (input.value === previous) return;\n\n    this.value = input.value;\n    this.dsChange.emit(this.value);\n  };\n\n  private renderNumericStepper(inactive: boolean) {\n    const incrementDisabled = inactive || this.readOnly || this.numericStepDisabled(1);\n    const decrementDisabled = inactive || this.readOnly || this.numericStepDisabled(-1);\n\n    return (\n      <span class=\"input-control__number-stepper\">\n        <ds-button-unfilled\n          class=\"input-control__number-step input-control__number-step--increment\"\n          variant=\"icon\"\n          size={this.size}\n          icon=\"Plus\"\n          hasBorder={false}\n          isInset\n          isInactive={incrementDisabled}\n          ariaLabel={this.incrementLabel}\n          onDsClick={() => this.handleNumericStep(1)}\n        />\n        <ds-divider orientation=\"vertical\" length=\"var(--ds-control-icon)\" />\n        <ds-button-unfilled\n          class=\"input-control__number-step input-control__number-step--decrement\"\n          variant=\"icon\"\n          size={this.size}\n          icon=\"Minus\"\n          hasBorder={false}\n          isInset\n          isInactive={decrementDisabled}\n          ariaLabel={this.decrementLabel}\n          onDsClick={() => this.handleNumericStep(-1)}\n        />\n      </span>\n    );\n  }\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0 || (this.isTokenized && this.tokens.length > 0);\n    const dirty =\n      this.value !== this.initialValue ||\n      (this.isTokenized && JSON.stringify(this.tokens) !== JSON.stringify(this.initialTokens));\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showPasswordToggle = this.type === 'password';\n    const nativeType = showPasswordToggle && this.passwordRevealed ? 'text' : this.type;\n    const message =\n      this.error && this.errorMessage ? this.errorMessage : this.visibleConstraintMessage;\n    const invalid = this.error || Boolean(this.visibleConstraintMessage);\n    const showError = Boolean(message) && !this.managedByField;\n    const showCounter = this.hasCounter && !this.managedByField;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const numeric = this.type === 'number';\n    const showNumericStepper = numeric && this.showStepper;\n    const resolvedAutoComplete = this.autoComplete ?? (this.type === 'search' ? 'off' : undefined);\n    const suppressBrowserChrome = this.type === 'search' || this.type === 'password';\n\n    const describedBy =\n      [\n        this.ariaDescribedby,\n        showError ? this.errorId : undefined,\n        showCounter ? `${this.generatedId}-count` : undefined,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\n          'ds-field-stack--supporting-inset': !this.hasBorder,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={invalid ? '' : undefined}\n        data-constraint-message={this.visibleConstraintMessage || undefined}\n        data-character-count={this.hasCounter ? String(this.value.length) : undefined}\n        data-character-limit={this.hasCounter ? String(lengthLimit(this.maxLength)) : undefined}\n        onInvalid={() => {\n          this.submitted = true;\n        }}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          ref={element => {\n            this.controlEl = element;\n          }}\n          class={{\n            'input-control--tokenized': this.isTokenized,\n            'input-control--has-tokens': this.isTokenized && this.tokens.length > 0,\n            'input-control': true,\n            'input-control--number': numeric,\n            'input-control--stepper': showNumericStepper,\n            'input-control--align-start': this.textAlign === 'start',\n            'input-control--align-end': this.textAlign === 'end',\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && invalid,\n            'input-control--prefix-control': this.hasPrefixControl,\n            'input-control--suffix-control': this.hasSuffixControl,\n            'ds-interaction-fill': this.hasInteractionFill,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {showNumericStepper && this.textAlign === 'end' && this.renderNumericStepper(inactive)}\n          {this.icon && (\n            <span\n              class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\"\n              aria-hidden=\"true\"\n            >\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <span\n            class={{\n              'input-control__prefix-text': true,\n              'ds-control-label-box': !this.hasPrefixControl,\n              'ds-interaction-fill__content': true,\n              'input-control__prefix-text--control': this.hasPrefixControl,\n              'input-control__prefix-text--empty': !this.hasPrefix,\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={() => this.syncAdornmentSlots()} />\n            {this.hasPrefixControl && (\n              <ds-divider\n                class=\"input-control__adornment-divider\"\n                orientation=\"vertical\"\n                length=\"var(--ds-control-icon)\"\n              />\n            )}\n          </span>\n          {this.isTokenized &&\n            this.tokens.map((token, index) => (\n              <ds-chip\n                key={`${index}-${token}`}\n                class=\"input-token\"\n                label={token}\n                size={this.size === 'lg' ? 'md' : this.size}\n                isInset\n                insetDepth=\"double\"\n                isInactive={inactive || this.readOnly}\n                removeLabel={this.removeTokenLabel}\n                state={\n                  textConstraintValidity({\n                    ...this.textConstraints(),\n                    value: token,\n                    required: false,\n                  }).message\n                    ? 'error'\n                    : 'default'\n                }\n                onDsRemove={event => {\n                  event.stopPropagation();\n                  this.removeToken(index);\n                }}\n              />\n            ))}\n          <input\n            ref={element => {\n              this.inputEl = element;\n            }}\n            type={nativeType}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            min={numeric ? this.min : undefined}\n            max={numeric ? this.max : undefined}\n            step={numeric ? this.step : undefined}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required && !this.isTokenized}\n            minLength={lengthLimit(this.minLength)}\n            maxLength={this.lengthBehavior === 'restrict' ? lengthLimit(this.maxLength) : undefined}\n            pattern={this.pattern}\n            autoFocus={this.autoFocus}\n            autoComplete={resolvedAutoComplete}\n            autoCapitalize={suppressBrowserChrome ? 'none' : undefined}\n            autoCorrect={suppressBrowserChrome ? 'off' : undefined}\n            spellcheck={suppressBrowserChrome ? false : undefined}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input native-input--align-${this.textAlign} ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            role={this.suggestions.length && this.supportsTextFeatures ? 'combobox' : undefined}\n            aria-autocomplete={\n              this.suggestions.length && this.supportsTextFeatures ? 'list' : undefined\n            }\n            aria-expanded={\n              this.suggestions.length && this.supportsTextFeatures\n                ? String(this.suggestionsOpen)\n                : undefined\n            }\n            aria-controls={\n              this.suggestionsOpen ? `${this.generatedId}-suggestions` : this.ariaControls\n            }\n            aria-activedescendant={\n              this.suggestionsOpen && this.activeSuggestion >= 0\n                ? `${this.generatedId}-suggestion-${this.activeSuggestion}`\n                : this.ariaActiveDescendant\n            }\n            aria-invalid={invalid ? 'true' : undefined}\n            onInput={this.handleInput}\n            onKeyDown={this.handleTextKeyDown}\n            onPaste={this.handlePaste}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span\n            class={{\n              'input-control__suffix': true,\n              'ds-control-label-box': !this.hasSuffixControl,\n              'input-control__suffix--control': this.hasSuffixControl,\n              'input-control__suffix--empty': !this.hasSuffix,\n            }}\n          >\n            {this.hasSuffixControl && (\n              <ds-divider\n                class=\"input-control__adornment-divider\"\n                orientation=\"vertical\"\n                length=\"var(--ds-control-icon)\"\n              />\n            )}\n            <slot name=\"suffix\" onSlotchange={() => this.syncAdornmentSlots()} />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n          {showPasswordToggle && (\n            <ds-button-unfilled\n              class=\"input-control__trailing-action\"\n              variant=\"icon\"\n              size={this.size}\n              icon={this.passwordRevealed ? 'EyeStrikethrough' : 'Eye'}\n              hasBorder={false}\n              isInset\n              isInactive={inactive}\n              ariaLabel={this.passwordRevealed ? this.hidePasswordLabel : this.showPasswordLabel}\n              onDsClick={this.handleTogglePassword}\n            />\n          )}\n          {showNumericStepper && this.textAlign === 'start' && this.renderNumericStepper(inactive)}\n        </div>\n        {this.suggestionsOpen && (\n          <div\n            popover=\"manual\"\n            class=\"input-suggestions ds-choice-popup\"\n            style={{\n              position: 'fixed',\n              left: `${this.suggestionPosition.x}px`,\n              top: `${this.suggestionPosition.y}px`,\n              width: `${this.controlEl?.getBoundingClientRect().width ?? 0}px`,\n              visibility: this.suggestionsReady ? 'visible' : 'hidden',\n            }}\n            onMouseDown={event => event.preventDefault()}\n          >\n            <div\n              class=\"input-suggestions__list ds-choice-list\"\n              id={`${this.generatedId}-suggestions`}\n              role=\"listbox\"\n              aria-label=\"Suggestions\"\n            >\n              {this.filteredSuggestions.map((value, index) => (\n                <ChoiceOptionRow\n                  size={this.size}\n                  id={`${this.generatedId}-suggestion-${index}`}\n                  option={{ label: value, value }}\n                  selected={false}\n                  active={index === this.activeSuggestion}\n                  focusRingVisible={false}\n                  usesSubtext={false}\n                  tabIndex={-1}\n                  onHover={() => {\n                    this.activeSuggestion = index;\n                  }}\n                  onSelect={() => this.selectSuggestion(value)}\n                />\n              ))}\n            </div>\n          </div>\n        )}\n        {(showError || showCounter) && (\n          <div class=\"text-field-support\">\n            {showError && (\n              <ds-text\n                class=\"error-text\"\n                as=\"div\"\n                variant=\"text-body-small\"\n                color=\"negative\"\n                textId={this.errorId}\n                role=\"alert\"\n              >\n                {message}\n              </ds-text>\n            )}\n            {showCounter && (\n              <ds-text\n                as=\"span\"\n                class=\"text-field-count\"\n                variant=\"text-body-small\"\n                color={invalid ? 'negative' : 'secondary'}\n                textId={`${this.generatedId}-count`}\n              >\n                {this.value.length}/{lengthLimit(this.maxLength)}\n              </ds-text>\n            )}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]