@ds-mo/ui 8.3.1 → 9.1.0

package/dist/mcp-data/registry/empty-state.json

@@ -0,0 +1,197 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty-state",
+  "title": "EmptyState",
+  "description": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/empty-state",
+    "source": "src/wc/components/EmptyState/EmptyState.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Centered empty-content message composed as icon plus title plus body, title plus body, or compact body-only content.",
+      "useWhen": [
+        "A bounded content area is in a first-use, no-content, filtered no-results, or no-access state and needs a calm explanatory message tailored to that cause.",
+        "A prominent empty region benefits from a decorative icon, visual title, and supporting body copy.",
+        "A compact owner such as a Select popup needs only centered body copy."
+      ],
+      "avoidWhen": [
+        "Content is still loading; use Skeleton for predictable structure or Loader for an indeterminate operation.",
+        "The state is an error, warning, or confirmation that needs semantic intent and announcement from the owning workflow.",
+        "The state needs a recovery action, link, or other interactive content; the current EmptyState pattern is intentionally message-only.",
+        "A decorative illustration, arbitrary rich content, or custom layout is required."
+      ],
+      "alternatives": [
+        {
+          "when": "A content region is waiting for structured data.",
+          "component": "component:ds-skeleton",
+          "reason": "Skeleton preserves expected geometry while content is pending."
+        },
+        {
+          "when": "An operation is progressing without predictable content structure.",
+          "component": "component:ds-loader",
+          "reason": "Loader owns indeterminate progress rather than an empty outcome."
+        },
+        {
+          "when": "Only ordinary prose is needed without empty-state layout.",
+          "component": "component:ds-text",
+          "reason": "Text owns typography without adding centered empty-state composition."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-select",
+        "component:ds-text",
+        "component:ds-icon"
+      ],
+      "accessibility": [
+        "The optional icon is decorative; the title and body provide all meaning in text.",
+        "EmptyState does not create a live region or alert automatically. The owner decides whether a dynamic transition requires announcement.",
+        "The visual title does not impose a document heading level because the correct hierarchy belongs to the consuming page or region.",
+        "Keep localized body copy concise and sufficient when using the body-only variant."
+      ],
+      "states": [
+        "Supported compositions are icon plus title plus body, title plus body, and body only; body copy is present in every supported composition.",
+        "The decorative icon renders at xl in the primary foreground with an 8px gap before the text group and only when a title is also provided.",
+        "The visual title uses title-small primary text; body uses body-medium secondary text with a 4px title-to-body gap.",
+        "All content is centered. The owner supplies container size and surrounding padding; do not compose actions into or immediately alongside the current EmptyState pattern.",
+        "First-use, no-content, no-results, and no-access states reuse this primitive with cause-specific localized messages rather than visual variants."
+      ],
+      "responsiveBehavior": [
+        "The owner controls available width and height; text wraps naturally while remaining centered.",
+        "EmptyState does not infer breakpoints or change composition automatically."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Pass canonical IcoMo icon names and localized heading/body strings through properties or attributes."
+        ],
+        "react": [
+          "Choose one supported composition by passing body with optional heading and icon props."
+        ],
+        "angular": [
+          "Choose one supported composition by binding body with optional heading and icon inputs."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/EmptyState/EmptyState.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "body": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "body",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Explanatory empty-state copy. Every supported variant includes body text."
+        },
+        "heading": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "heading",
+          "required": false,
+          "mutable": false,
+          "description": "Optional visual title. Use with body; required when icon is provided."
+        },
+        "icon": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "icon",
+          "required": false,
+          "mutable": false,
+          "description": "Optional decorative prefix glyph for the complete icon + title + body variant."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "body": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "body",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Explanatory empty-state copy. Every supported variant includes body text."
+      },
+      "heading": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "heading",
+        "required": false,
+        "mutable": false,
+        "description": "Optional visual title. Use with body; required when icon is provided."
+      },
+      "icon": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "icon",
+        "required": false,
+        "mutable": false,
+        "description": "Optional decorative prefix glyph for the complete icon + title + body variant."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-empty-state",
+      "react": "DsEmptyState",
+      "angular": "DsEmptyState"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-empty-state.js';",
+        "example": "<ds-empty-state></ds-empty-state>"
+      },
+      "react": {
+        "import": "import { DsEmptyState } from '@ds-mo/ui/react';",
+        "example": "<DsEmptyState />"
+      },
+      "angular": {
+        "import": "import { DsEmptyState } from '@ds-mo/ui/angular/ds-empty-state';",
+        "example": "<ds-empty-state></ds-empty-state>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/EmptyState/EmptyState.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host,\n.empty-state,\n.empty-state__text {\n  box-sizing: border-box;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  width: 100%;\n  text-align: center;\n}\n\n.empty-state__icon {\n  flex: 0 0 auto;\n}\n\n.empty-state__text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/EmptyState/EmptyState.tsx",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  /** Optional decorative prefix glyph for the complete icon + title + body variant. */\n  @Prop() icon: string | undefined;\n  /** Optional visual title. Use with body; required when icon is provided. */\n  @Prop() heading: string | undefined;\n  /** Explanatory empty-state copy. Every supported variant includes body text. */\n  @Prop() body: string = '';\n\n  render() {\n    const showHeading = Boolean(this.heading?.trim());\n    const showIcon = showHeading && Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          {showIcon && (\n            <ds-icon\n              class=\"empty-state__icon\"\n              name={this.icon}\n              size=\"xl\"\n              color=\"primary\"\n            />\n          )}\n          <div class=\"empty-state__text\">\n            {showHeading && (\n              <ds-text\n                class=\"empty-state__title\"\n                as=\"div\"\n                variant=\"text-title-small\"\n                color=\"primary\"\n                align=\"center\"\n              >\n                {this.heading}\n              </ds-text>\n            )}\n            {this.body && (\n              <ds-text\n                class=\"empty-state__body\"\n                as=\"p\"\n                variant=\"text-body-medium\"\n                color=\"secondary\"\n                align=\"center\"\n              >\n                {this.body}\n              </ds-text>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,222 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field",
+  "title": "Field",
+  "description": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/field",
+    "source": "src/wc/components/Field/Field.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Accessible form-field composition that gives one Input or Select a persistent label, optional guidance, shared error presentation, stable IDs, and observable interaction state.",
+      "useWhen": [
+        "An Input, Select, or SelectMulti needs a persistent visible label in a form.",
+        "Help text or an error message must be programmatically associated with one control.",
+        "A form layout needs one consistent label-control-message rhythm."
+      ],
+      "avoidWhen": [
+        "The component already owns its visible label and complete selection semantics, such as Checkbox, Radio, or Switch.",
+        "Several controls belong to one question; use a semantic fieldset and legend instead.",
+        "Text describes a region or group rather than one form control."
+      ],
+      "alternatives": [
+        {
+          "when": "Several related controls answer one question.",
+          "component": "component:ds-text",
+          "reason": "Use native fieldset and legend semantics, then compose Text only for supporting content."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input",
+        "component:ds-select",
+        "component:ds-select-multi",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "Slot exactly one form control. Field assigns its stable control ID and connects the visible label automatically.",
+        "The visible description or error ID is merged with any authored aria-describedby references; a rendered error replaces the description.",
+        "The error prop forwards aria-invalid and supported design-system control error styling; put visible error text on Field, not again on the child control.",
+        "Clicking the label focuses the slotted design-system control without opening a Select popup.",
+        "Do not use placeholder text as the only label. Keep label text concise and put format or consequence guidance in description."
+      ],
+      "states": [
+        "Field exposes data-focused, data-filled, data-dirty, data-touched, data-invalid, data-disabled, and data-required hooks while the slotted control remains the source of value and interaction behavior.",
+        "A rendered error replaces the description; preserve essential guidance in the error message so users retain what they need to correct the field.",
+        "Field owns validation presentation but not validation timing; the form decides when to set error and errorMessage.",
+        "The label uses primary body-small emphasis, description uses secondary body-small text, and error uses negative body-small text."
+      ],
+      "responsiveBehavior": [
+        "Field fills the width supplied by its parent and makes the slotted control fill that field width.",
+        "The form layout owns column count, wrapping, and responsive placement; Field keeps the vertical label-control-message composition intact."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set fieldId only when another element must reference a predictable control ID; otherwise use the generated association.",
+          "Assign child component values and option arrays through their normal JavaScript properties."
+        ],
+        "react": [
+          "Compose one DsInput, DsSelect, or DsSelectMulti child and control validation timing in the form owner."
+        ],
+        "angular": [
+          "Compose the generated Field adapter around the control adapter and its matching Angular value accessor."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Field/Field.stories.ts"
+        },
+        {
+          "label": "Cross-browser form and accessibility coverage",
+          "path": "tests/e2e/forms.spec.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "description": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "description",
+          "required": false,
+          "mutable": false,
+          "description": "Optional guidance associated with the slotted control while no visible error is shown."
+        },
+        "error": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "error",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Invalid visual and accessible state forwarded to supported ds controls."
+        },
+        "errorMessage": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "error-message",
+          "required": false,
+          "mutable": false,
+          "description": "Visible error associated with the slotted control while error is true."
+        },
+        "fieldId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "field-id",
+          "required": false,
+          "mutable": false,
+          "description": "Explicit ID for the slotted control; generated when omitted."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false,
+          "description": "Persistent visible label for the single slotted control."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "description": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "description",
+        "required": false,
+        "mutable": false,
+        "description": "Optional guidance associated with the slotted control while no visible error is shown."
+      },
+      "error": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "error",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Invalid visual and accessible state forwarded to supported ds controls."
+      },
+      "errorMessage": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "error-message",
+        "required": false,
+        "mutable": false,
+        "description": "Visible error associated with the slotted control while error is true."
+      },
+      "fieldId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "field-id",
+        "required": false,
+        "mutable": false,
+        "description": "Explicit ID for the slotted control; generated when omitted."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false,
+        "description": "Persistent visible label for the single slotted control."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-field",
+      "react": "DsField",
+      "angular": "DsField"
+    },
+    "consumption": {
+      "install": "npm install @ds-mo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "import '@ds-mo/tokens';\nimport '@ds-mo/tokens/reset';\nimport '@ds-mo/tokens/globals';",
+      "customElements": {
+        "import": "import '@ds-mo/ui/dist/components/ds-field.js';",
+        "example": "<ds-field></ds-field>"
+      },
+      "react": {
+        "import": "import { DsField } from '@ds-mo/ui/react';",
+        "example": "<DsField />"
+      },
+      "angular": {
+        "import": "import { DsField } from '@ds-mo/ui/angular/ds-field';",
+        "example": "<ds-field></ds-field>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^3.1.1",
+          "@ds-mo/icons ^6.2.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Field/Field.css",
+      "content": ":host {\n  display: block;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n.field__control {\n  display: flex;\n  min-width: 0;\n}\n\n.field__control > * {\n  width: 100%;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Field/Field.tsx",
+      "content": "import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n  value?: string | string[];\n  inputId?: string;\n  error?: boolean;\n  disabled?: boolean;\n  isInactive?: boolean;\n  required?: boolean;\n  setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n  labelledby: string[];\n  describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n  value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Persistent visible label for the single slotted control. */\n  @Prop() label!: string;\n  /** Explicit ID for the slotted control; generated when omitted. */\n  @Prop() fieldId: string | undefined;\n  /** Optional guidance associated with the slotted control while no visible error is shown. */\n  @Prop() description: string | undefined;\n  /** Invalid visual and accessible state forwarded to supported ds controls. */\n  @Prop() error: boolean = false;\n  /** Visible error associated with the slotted control while error is true. */\n  @Prop() errorMessage: string | undefined;\n\n  @State() private focused = false;\n  @State() private filled = false;\n  @State() private dirty = false;\n  @State() private touched = false;\n  @State() private controlDisabled = false;\n  @State() private controlRequired = false;\n\n  private readonly generatedId = `ds-field-${++fieldCounter}`;\n  private controlContainer?: HTMLDivElement;\n  private control?: FieldControl;\n  private initialValue = '';\n  private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n\n  componentDidLoad() {\n    this.syncControl();\n    requestAnimationFrame(() => this.syncControl());\n  }\n\n  componentDidRender() {\n    this.syncControl();\n  }\n\n  @Watch('fieldId')\n  @Watch('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\n  }\n\n  private get controlId(): string {\n    return this.fieldId || this.generatedId;\n  }\n\n  private get labelId(): string {\n    return `${this.controlId}-label`;\n  }\n\n  private get descriptionId(): string {\n    return `${this.controlId}-description`;\n  }\n\n  private get errorId(): string {\n    return `${this.controlId}-error`;\n  }\n\n  private get renderedDescription(): boolean {\n    return Boolean(this.description) && !this.renderedError;\n  }\n\n  private get renderedError(): boolean {\n    return this.error && Boolean(this.errorMessage);\n  }\n\n  private readValue(control: FieldControl): string {\n    const value = control.value;\n    return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n  }\n\n  private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n    if (value === undefined) {\n      if (control.hasAttribute(name)) control.removeAttribute(name);\n      return;\n    }\n    if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n  }\n\n  private findControl(): FieldControl | undefined {\n    return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n  }\n\n  private syncControl = () => {\n    const control = this.findControl();\n    if (!control) return;\n\n    if (control !== this.control) {\n      this.control = control;\n      this.initialValue = this.readValue(control);\n      this.authoredAria.set(control, {\n        labelledby: tokens(control.getAttribute('aria-labelledby')),\n        describedby: tokens(control.getAttribute('aria-describedby')),\n      });\n    }\n\n    const isDsControl = control.tagName.startsWith('DS-');\n    if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n    else this.updateControlAttribute(control, 'id', this.controlId);\n\n    const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n    const labelledby = uniqueTokens(authored.labelledby, [this.labelId]).join(' ');\n    const describedby = uniqueTokens(\n      authored.describedby,\n      this.renderedDescription ? [this.descriptionId] : [],\n      this.renderedError ? [this.errorId] : [],\n    ).join(' ');\n\n    this.updateControlAttribute(control, 'aria-labelledby', labelledby);\n    this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n    this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n    if (isDsControl && 'error' in control && control.error !== this.error) control.error = this.error;\n\n    const value = this.readValue(control);\n    this.filled = value.length > 0;\n    this.dirty = value !== this.initialValue;\n    this.controlDisabled = Boolean(control.disabled || control.isInactive || control.hasAttribute('disabled'));\n    this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n  };\n\n  private handleLabelClick = (event: MouseEvent) => {\n    if (!this.control?.tagName.startsWith('DS-')) return;\n    event.preventDefault();\n    this.control.setFocus?.();\n  };\n\n  private handleFocusIn = () => {\n    this.focused = true;\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleValueChange = () => {\n    this.syncControl();\n  };\n\n  render() {\n    return (\n      <Host\n        data-focused={this.focused ? '' : undefined}\n        data-filled={this.filled ? '' : undefined}\n        data-dirty={this.dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-disabled={this.controlDisabled ? '' : undefined}\n        data-required={this.controlRequired ? '' : undefined}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onInput={this.handleValueChange}\n        onChange={this.handleValueChange}\n        onDsChange={this.handleValueChange}\n      >\n        <div class=\"field\">\n          <ds-text\n            class=\"field__label\"\n            as=\"label\"\n            variant=\"text-body-small\"\n            color=\"primary\"\n            emphasis\n            for={this.controlId}\n            textId={this.labelId}\n            onClick={this.handleLabelClick}\n          >\n            {this.label}\n          </ds-text>\n          <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n            <slot onSlotchange={this.syncControl} />\n          </div>\n          {this.renderedDescription && (\n            <ds-text\n              class=\"field__description\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              textId={this.descriptionId}\n            >\n              {this.description}\n            </ds-text>\n          )}\n          {this.renderedError && (\n            <ds-text\n              class=\"field__error\"\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        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}