@ds-mo/ui 14.13.0 → 14.15.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 field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+  "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.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,10 +13,10 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Form-associated single-line text field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "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.",
       "useWhen": [
-        "A user must enter or edit one line of text, an email address, telephone number, URL, search query, or password.",
-        "The value must participate in native, Angular, or React form state.",
+        "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.",
         "A compact filter or toolbar needs a single-line search field that follows the shared control-density recipe."
       ],
       "avoidWhen": [
@@ -61,6 +61,7 @@
         "Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
         "The suffix slot is for compact units or decorations. The optional leading icon is decorative and does not replace the field label.",
         "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, stepping, and min/max constraint behavior while dsChange continues to report the native string value.",
         "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."
       ],
@@ -77,6 +78,9 @@
         "react": [
           "Use DsInput, bind value for controlled application state, and handle onDsChange and onDsClear."
         ],
+        "vue": [
+          "Use DsInput with v-model for the value, and listen for dsChange and dsClear."
+        ],
         "angular": [
           "Import DsInput with TextValueAccessor when integrating with Angular Forms."
         ]
@@ -221,6 +225,22 @@
           "required": false,
           "mutable": false
         },
+        "max": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "max",
+          "required": false,
+          "mutable": false,
+          "description": "Maximum accepted value when type is number."
+        },
+        "min": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "min",
+          "required": false,
+          "mutable": false,
+          "description": "Minimum accepted value when type is number."
+        },
         "name": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -269,9 +289,17 @@
           "mutable": false,
           "description": "Control density."
         },
+        "step": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "step",
+          "required": false,
+          "mutable": false,
+          "description": "Numeric increment used by native stepping and constraint validation."
+        },
         "type": {
           "type": "InputType",
-          "resolvedType": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolvedType": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "attribute": "type",
           "default": "'text'",
           "required": false,
@@ -447,6 +475,22 @@
         "required": false,
         "mutable": false
       },
+      "max": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "max",
+        "required": false,
+        "mutable": false,
+        "description": "Maximum accepted value when type is number."
+      },
+      "min": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "min",
+        "required": false,
+        "mutable": false,
+        "description": "Minimum accepted value when type is number."
+      },
       "name": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -495,9 +539,17 @@
         "mutable": false,
         "description": "Control density."
       },
+      "step": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "step",
+        "required": false,
+        "mutable": false,
+        "description": "Numeric increment used by native stepping and constraint validation."
+      },
       "type": {
         "type": "InputType",
-        "resolvedType": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "resolvedType": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
         "attribute": "type",
         "default": "'text'",
         "required": false,
@@ -547,6 +599,7 @@
     "exports": {
       "customElement": "ds-input",
       "react": "DsInput",
+      "vue": "DsInput",
       "angular": "DsInput"
     },
     "consumption": {
@@ -560,6 +613,10 @@
         "import": "import { DsInput } from '@ds-mo/ui/react';",
         "example": "<DsInput />"
       },
+      "vue": {
+        "import": "import { DsInput } from '@ds-mo/ui/vue';",
+        "example": "<DsInput />"
+      },
       "angular": {
         "import": "import { DsInput } from '@ds-mo/ui/angular/ds-input';",
         "example": "<ds-input></ds-input>"
@@ -569,7 +626,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },
@@ -591,7 +648,7 @@
     },
     {
       "path": "src/wc/components/Input/Input.tsx",
-      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } 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';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\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() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\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  /** 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\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\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  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.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.el.querySelector('input')?.focus();\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 showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\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            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input 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-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\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        </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 { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } 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;\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() 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  /** 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  /** 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\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\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  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.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.el.querySelector('input')?.focus();\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 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\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\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            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\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={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input 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-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\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        </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",
       "type": "registry:ui"
     }
   ]

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

@@ -146,6 +146,7 @@
     "exports": {
       "customElement": "ds-loader",
       "react": "DsLoader",
+      "vue": "DsLoader",
       "angular": "DsLoader"
     },
     "consumption": {
@@ -159,6 +160,10 @@
         "import": "import { DsLoader } from '@ds-mo/ui/react';",
         "example": "<DsLoader />"
       },
+      "vue": {
+        "import": "import { DsLoader } from '@ds-mo/ui/vue';",
+        "example": "<DsLoader />"
+      },
       "angular": {
         "import": "import { DsLoader } from '@ds-mo/ui/angular/ds-loader';",
         "example": "<ds-loader></ds-loader>"
@@ -168,7 +173,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

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

@@ -98,6 +98,7 @@
     "exports": {
       "customElement": "ds-markdown",
       "react": "DsMarkdown",
+      "vue": "DsMarkdown",
       "angular": "DsMarkdown"
     },
     "consumption": {
@@ -111,6 +112,10 @@
         "import": "import { DsMarkdown } from '@ds-mo/ui/react';",
         "example": "<DsMarkdown />"
       },
+      "vue": {
+        "import": "import { DsMarkdown } from '@ds-mo/ui/vue';",
+        "example": "<DsMarkdown />"
+      },
       "angular": {
         "import": "import { DsMarkdown } from '@ds-mo/ui/angular/ds-markdown';",
         "example": "<ds-markdown></ds-markdown>"
@@ -120,7 +125,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

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

@@ -456,6 +456,7 @@
     "exports": {
       "customElement": "ds-menu",
       "react": "DsMenu",
+      "vue": "DsMenu",
       "angular": "DsMenu"
     },
     "consumption": {
@@ -469,6 +470,10 @@
         "import": "import { DsMenu } from '@ds-mo/ui/react';",
         "example": "<DsMenu />"
       },
+      "vue": {
+        "import": "import { DsMenu } from '@ds-mo/ui/vue';",
+        "example": "<DsMenu />"
+      },
       "angular": {
         "import": "import { DsMenu } from '@ds-mo/ui/angular/ds-menu';",
         "example": "<ds-menu></ds-menu>"
@@ -479,7 +484,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/message-actions.json

@@ -138,6 +138,7 @@
     "exports": {
       "customElement": "ds-message-actions",
       "react": "DsMessageActions",
+      "vue": "DsMessageActions",
       "angular": "DsMessageActions"
     },
     "consumption": {
@@ -151,6 +152,10 @@
         "import": "import { DsMessageActions } from '@ds-mo/ui/react';",
         "example": "<DsMessageActions />"
       },
+      "vue": {
+        "import": "import { DsMessageActions } from '@ds-mo/ui/vue';",
+        "example": "<DsMessageActions />"
+      },
       "angular": {
         "import": "import { DsMessageActions } from '@ds-mo/ui/angular/ds-message-actions';",
         "example": "<ds-message-actions></ds-message-actions>"
@@ -160,7 +165,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/message-bubble.json

@@ -78,6 +78,7 @@
     "exports": {
       "customElement": "ds-message-bubble",
       "react": "DsMessageBubble",
+      "vue": "DsMessageBubble",
       "angular": "DsMessageBubble"
     },
     "consumption": {
@@ -91,6 +92,10 @@
         "import": "import { DsMessageBubble } from '@ds-mo/ui/react';",
         "example": "<DsMessageBubble />"
       },
+      "vue": {
+        "import": "import { DsMessageBubble } from '@ds-mo/ui/vue';",
+        "example": "<DsMessageBubble />"
+      },
       "angular": {
         "import": "import { DsMessageBubble } from '@ds-mo/ui/angular/ds-message-bubble';",
         "example": "<ds-message-bubble></ds-message-bubble>"
@@ -100,7 +105,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/message-composer.json

@@ -238,6 +238,7 @@
     "exports": {
       "customElement": "ds-message-composer",
       "react": "DsMessageComposer",
+      "vue": "DsMessageComposer",
       "angular": "DsMessageComposer"
     },
     "consumption": {
@@ -251,6 +252,10 @@
         "import": "import { DsMessageComposer } from '@ds-mo/ui/react';",
         "example": "<DsMessageComposer />"
       },
+      "vue": {
+        "import": "import { DsMessageComposer } from '@ds-mo/ui/vue';",
+        "example": "<DsMessageComposer />"
+      },
       "angular": {
         "import": "import { DsMessageComposer } from '@ds-mo/ui/angular/ds-message-composer';",
         "example": "<ds-message-composer></ds-message-composer>"
@@ -260,7 +265,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/message-scroller.json

@@ -175,6 +175,7 @@
     "exports": {
       "customElement": "ds-message-scroller",
       "react": "DsMessageScroller",
+      "vue": "DsMessageScroller",
       "angular": "DsMessageScroller"
     },
     "consumption": {
@@ -188,6 +189,10 @@
         "import": "import { DsMessageScroller } from '@ds-mo/ui/react';",
         "example": "<DsMessageScroller />"
       },
+      "vue": {
+        "import": "import { DsMessageScroller } from '@ds-mo/ui/vue';",
+        "example": "<DsMessageScroller />"
+      },
       "angular": {
         "import": "import { DsMessageScroller } from '@ds-mo/ui/angular/ds-message-scroller';",
         "example": "<ds-message-scroller></ds-message-scroller>"
@@ -197,7 +202,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

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

@@ -230,6 +230,7 @@
     "exports": {
       "customElement": "ds-message",
       "react": "DsMessage",
+      "vue": "DsMessage",
       "angular": "DsMessage"
     },
     "consumption": {
@@ -243,6 +244,10 @@
         "import": "import { DsMessage } from '@ds-mo/ui/react';",
         "example": "<DsMessage />"
       },
+      "vue": {
+        "import": "import { DsMessage } from '@ds-mo/ui/vue';",
+        "example": "<DsMessage />"
+      },
       "angular": {
         "import": "import { DsMessage } from '@ds-mo/ui/angular/ds-message';",
         "example": "<ds-message></ds-message>"
@@ -252,7 +257,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/mobile-bar-nav.json

@@ -311,6 +311,7 @@
     "exports": {
       "customElement": "ds-mobile-bar-nav",
       "react": "DsMobileBarNav",
+      "vue": "DsMobileBarNav",
       "angular": "DsMobileBarNav"
     },
     "consumption": {
@@ -324,6 +325,10 @@
         "import": "import { DsMobileBarNav } from '@ds-mo/ui/react';",
         "example": "<DsMobileBarNav />"
       },
+      "vue": {
+        "import": "import { DsMobileBarNav } from '@ds-mo/ui/vue';",
+        "example": "<DsMobileBarNav />"
+      },
       "angular": {
         "import": "import { DsMobileBarNav } from '@ds-mo/ui/angular/ds-mobile-bar-nav';",
         "example": "<ds-mobile-bar-nav></ds-mobile-bar-nav>"
@@ -334,7 +339,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/mobile-header.json

@@ -298,6 +298,7 @@
     "exports": {
       "customElement": "ds-mobile-header",
       "react": "DsMobileHeader",
+      "vue": "DsMobileHeader",
       "angular": "DsMobileHeader"
     },
     "consumption": {
@@ -311,6 +312,10 @@
         "import": "import { DsMobileHeader } from '@ds-mo/ui/react';",
         "example": "<DsMobileHeader />"
       },
+      "vue": {
+        "import": "import { DsMobileHeader } from '@ds-mo/ui/vue';",
+        "example": "<DsMobileHeader />"
+      },
       "angular": {
         "import": "import { DsMobileHeader } from '@ds-mo/ui/angular/ds-mobile-header';",
         "example": "<ds-mobile-header></ds-mobile-header>"
@@ -321,7 +326,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/mobile-section-switcher.json

@@ -133,6 +133,7 @@
     "exports": {
       "customElement": "ds-mobile-section-switcher",
       "react": "DsMobileSectionSwitcher",
+      "vue": "DsMobileSectionSwitcher",
       "angular": "DsMobileSectionSwitcher"
     },
     "consumption": {
@@ -146,6 +147,10 @@
         "import": "import { DsMobileSectionSwitcher } from '@ds-mo/ui/react';",
         "example": "<DsMobileSectionSwitcher />"
       },
+      "vue": {
+        "import": "import { DsMobileSectionSwitcher } from '@ds-mo/ui/vue';",
+        "example": "<DsMobileSectionSwitcher />"
+      },
       "angular": {
         "import": "import { DsMobileSectionSwitcher } from '@ds-mo/ui/angular/ds-mobile-section-switcher';",
         "example": "<ds-mobile-section-switcher></ds-mobile-section-switcher>"
@@ -156,7 +161,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/mobile-sheet-nav.json

@@ -303,6 +303,7 @@
     "exports": {
       "customElement": "ds-mobile-sheet-nav",
       "react": "DsMobileSheetNav",
+      "vue": "DsMobileSheetNav",
       "angular": "DsMobileSheetNav"
     },
     "consumption": {
@@ -316,6 +317,10 @@
         "import": "import { DsMobileSheetNav } from '@ds-mo/ui/react';",
         "example": "<DsMobileSheetNav />"
       },
+      "vue": {
+        "import": "import { DsMobileSheetNav } from '@ds-mo/ui/vue';",
+        "example": "<DsMobileSheetNav />"
+      },
       "angular": {
         "import": "import { DsMobileSheetNav } from '@ds-mo/ui/angular/ds-mobile-sheet-nav';",
         "example": "<ds-mobile-sheet-nav></ds-mobile-sheet-nav>"
@@ -326,7 +331,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

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

@@ -251,6 +251,7 @@
     "exports": {
       "customElement": "ds-modal",
       "react": "DsModal",
+      "vue": "DsModal",
       "angular": "DsModal"
     },
     "consumption": {
@@ -264,6 +265,10 @@
         "import": "import { DsModal } from '@ds-mo/ui/react';",
         "example": "<DsModal />"
       },
+      "vue": {
+        "import": "import { DsModal } from '@ds-mo/ui/vue';",
+        "example": "<DsModal />"
+      },
       "angular": {
         "import": "import { DsModal } from '@ds-mo/ui/angular/ds-modal';",
         "example": "<ds-modal></ds-modal>"
@@ -273,7 +278,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

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

@@ -358,6 +358,7 @@
     "exports": {
       "customElement": "ds-pagination",
       "react": "DsPagination",
+      "vue": "DsPagination",
       "angular": "DsPagination"
     },
     "consumption": {
@@ -371,6 +372,10 @@
         "import": "import { DsPagination } from '@ds-mo/ui/react';",
         "example": "<DsPagination />"
       },
+      "vue": {
+        "import": "import { DsPagination } from '@ds-mo/ui/vue';",
+        "example": "<DsPagination />"
+      },
       "angular": {
         "import": "import { DsPagination } from '@ds-mo/ui/angular/ds-pagination';",
         "example": "<ds-pagination></ds-pagination>"
@@ -381,7 +386,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },

package/dist/mcp-data/registry/panel-nav.json

@@ -579,6 +579,7 @@
     "exports": {
       "customElement": "ds-panel-nav",
       "react": "DsPanelNav",
+      "vue": "DsPanelNav",
       "angular": "DsPanelNav"
     },
     "consumption": {
@@ -592,6 +593,10 @@
         "import": "import { DsPanelNav } from '@ds-mo/ui/react';",
         "example": "<DsPanelNav />"
       },
+      "vue": {
+        "import": "import { DsPanelNav } from '@ds-mo/ui/vue';",
+        "example": "<DsPanelNav />"
+      },
       "angular": {
         "import": "import { DsPanelNav } from '@ds-mo/ui/angular/ds-panel-nav';",
         "example": "<ds-panel-nav></ds-panel-nav>"
@@ -601,7 +606,7 @@
           "@ds-mo/tokens ^6.5.0",
           "@ds-mo/icons ^7.0.0"
         ],
-        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }
     }
   },