{
  "$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-table",
        "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; repeated panel and master-detail owners should share one empty-region geometry instead of wrapping each EmptyState differently. 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"
        },
        {
          "label": "Shared layout recipe foundation",
          "path": "docs/layout-recipe-foundation.md"
        }
      ]
    },
    "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",
      "vue": "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 />"
      },
      "vue": {
        "import": "import { DsEmptyState } from '@ds-mo/ui/vue';",
        "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 ^6.5.0",
          "@ds-mo/icons ^7.0.0"
        ],
        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 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"
    }
  ]
}