@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,225 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "divider",
+  "title": "Divider",
+  "description": "Horizontal or vertical separator between sibling content groups, decorative by default with optional structural semantics.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/divider",
+    "source": "src/wc/components/Divider/Divider.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Horizontal or vertical separator between sibling content groups, decorative by default with optional structural semantics.",
+      "useWhen": [
+        "Related sibling content groups on one surface need stronger visual separation than spacing alone provides.",
+        "A list or panel needs an inset separator that does not define the outer edge of its container.",
+        "Meaningful document or group structure requires an explicit horizontal or vertical separator."
+      ],
+      "avoidWhen": [
+        "Spacing alone communicates the grouping clearly.",
+        "The line defines a container edge, control outline, or selected state; use the owning component's border treatment.",
+        "The divider would compensate for weak headings or unclear information hierarchy.",
+        "A decorative flourish does not clarify grouping."
+      ],
+      "alternatives": [
+        {
+          "when": "Content needs an enclosing surface and outer boundary.",
+          "component": "component:ds-card",
+          "reason": "Card owns container chrome, structure, and edge treatment."
+        },
+        {
+          "when": "A static compact label is being used to name a group.",
+          "component": "component:ds-text",
+          "reason": "Text communicates hierarchy directly instead of relying on a line."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-card",
+        "component:ds-menu",
+        "component:ds-panel-sub-nav"
+      ],
+      "accessibility": [
+        "Keep purely visual dividers hidden from assistive technology.",
+        "Expose separator semantics only when the line represents meaningful document or group structure.",
+        "Semantic orientation must match the divider's visual orientation.",
+        "Do not use a semantic divider as a substitute for headings, landmarks, or explicit group labels."
+      ],
+      "states": [
+        "Horizontal and vertical variants separate sibling groups along the parent's layout axis.",
+        "The omitted background context is for primary and secondary surfaces. Explicit faint documents a faint surface while using the same standard divider token.",
+        "Other background contexts select their matching divider token, including navigation where Divider is composed inside app chrome.",
+        "Inset is symmetric along the line axis. Explicit length is reserved for layout-specific separators; otherwise the line fills the available axis."
+      ],
+      "responsiveBehavior": [
+        "The parent layout decides whether to change orientation, visibility, inset, or length at responsive breakpoints.",
+        "Divider does not infer layout direction or hide itself responsively."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set semantic mode only from known document structure; presentation alone should remain hidden from assistive technology."
+        ],
+        "react": [
+          "Derive orientation and visibility from the parent layout rather than viewport logic inside Divider."
+        ],
+        "angular": [
+          "Derive orientation and visibility from the parent layout rather than viewport logic inside Divider."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Divider/Divider.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "background": {
+          "type": "DividerBackground | undefined",
+          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+          "attribute": "background",
+          "required": false,
+          "mutable": false,
+          "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+        },
+        "inset": {
+          "type": "DividerInset",
+          "resolvedType": "\"none\" | \"space-000\" | \"space-012\" | \"space-025\" | \"space-050\" | \"space-075\" | \"space-100\" | \"space-125\" | \"space-150\" | \"space-175\" | \"space-200\" | \"space-250\" | \"space-300\" | \"space-400\" | \"space-600\" | \"space-800\" | string & {}",
+          "attribute": "inset",
+          "default": "'none'",
+          "required": false,
+          "mutable": false,
+          "description": "Insets the divider from its start/end edges. Accepts spacing token names or any CSS length."
+        },
+        "length": {
+          "type": "DividerLength",
+          "resolvedType": "\"auto\" | \"full\" | string & {}",
+          "attribute": "length",
+          "default": "'auto'",
+          "required": false,
+          "mutable": false,
+          "description": "Visual line length. Defaults to filling the available axis. Accepts any CSS length."
+        },
+        "orientation": {
+          "type": "DividerOrientation",
+          "resolvedType": "\"horizontal\" | \"vertical\"",
+          "attribute": "orientation",
+          "default": "'horizontal'",
+          "required": false,
+          "mutable": false,
+          "description": "Direction of the divider line. Defaults to 'horizontal'."
+        },
+        "semantic": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "semantic",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "background": {
+        "type": "DividerBackground | undefined",
+        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"strong\" | \"translucent\" | undefined",
+        "attribute": "background",
+        "required": false,
+        "mutable": false,
+        "description": "Actual parent surface context. Omit on primary and secondary surfaces."
+      },
+      "inset": {
+        "type": "DividerInset",
+        "resolvedType": "\"none\" | \"space-000\" | \"space-012\" | \"space-025\" | \"space-050\" | \"space-075\" | \"space-100\" | \"space-125\" | \"space-150\" | \"space-175\" | \"space-200\" | \"space-250\" | \"space-300\" | \"space-400\" | \"space-600\" | \"space-800\" | string & {}",
+        "attribute": "inset",
+        "default": "'none'",
+        "required": false,
+        "mutable": false,
+        "description": "Insets the divider from its start/end edges. Accepts spacing token names or any CSS length."
+      },
+      "length": {
+        "type": "DividerLength",
+        "resolvedType": "\"auto\" | \"full\" | string & {}",
+        "attribute": "length",
+        "default": "'auto'",
+        "required": false,
+        "mutable": false,
+        "description": "Visual line length. Defaults to filling the available axis. Accepts any CSS length."
+      },
+      "orientation": {
+        "type": "DividerOrientation",
+        "resolvedType": "\"horizontal\" | \"vertical\"",
+        "attribute": "orientation",
+        "default": "'horizontal'",
+        "required": false,
+        "mutable": false,
+        "description": "Direction of the divider line. Defaults to 'horizontal'."
+      },
+      "semantic": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "semantic",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-divider",
+      "react": "DsDivider",
+      "angular": "DsDivider"
+    },
+    "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-divider.js';",
+        "example": "<ds-divider></ds-divider>"
+      },
+      "react": {
+        "import": "import { DsDivider } from '@ds-mo/ui/react';",
+        "example": "<DsDivider />"
+      },
+      "angular": {
+        "import": "import { DsDivider } from '@ds-mo/ui/angular/ds-divider';",
+        "example": "<ds-divider></ds-divider>"
+      },
+      "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": [],
+  "files": [
+    {
+      "path": "src/wc/components/Divider/Divider.css",
+      "content": ":host {\n  --_divider-color: var(--color-divider-divider);\n  --_divider-inset: 0;\n  --_divider-length: 100%;\n\n  display: block;\n  flex-shrink: 0;\n  width: var(--_divider-length);\n  height: var(--dimension-stroke-width-012);\n  margin: 0 var(--_divider-inset);\n  border: none;\n  background-color: var(--_divider-color);\n}\n\n:host(.divider--vertical) {\n  width: var(--dimension-stroke-width-012);\n  height: var(--_divider-length);\n  min-height: var(--dimension-stroke-width-012);\n  margin: var(--_divider-inset) 0;\n  align-self: stretch;\n}\n\n:host(.divider--vertical.divider--custom-length) {\n  align-self: center;\n}\n\n:host([background='bold']),\n:host(.divider--background-bold) {\n  --_divider-color: var(--color-divider-divider-on-bold-background);\n}\n\n:host([background='strong']),\n:host(.divider--background-strong) {\n  --_divider-color: var(--color-divider-divider-on-strong-background);\n}\n\n:host([background='medium']),\n:host(.divider--background-medium) {\n  --_divider-color: var(--color-divider-divider-on-medium-background);\n}\n\n:host([background='translucent']),\n:host(.divider--background-translucent) {\n  --_divider-color: var(--color-translucent-divider);\n}\n\n:host([background='navigation']),\n:host(.divider--background-navigation) {\n  --_divider-color: var(--color-navigation-divider);\n}\n\n:host([background='media']),\n:host(.divider--background-media) {\n  --_divider-color: var(--color-media-divider);\n}\n\n:host([background='always-dark']),\n:host(.divider--background-always-dark) {\n  --_divider-color: var(--color-always-dark-divider);\n}\n\n:host([background='inverted']),\n:host(.divider--background-inverted) {\n  --_divider-color: var(--color-inverted-divider);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Divider/Divider.tsx",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\nexport type DividerInsetToken =\n  | 'space-000'\n  | 'space-012'\n  | 'space-025'\n  | 'space-050'\n  | 'space-075'\n  | 'space-100'\n  | 'space-125'\n  | 'space-150'\n  | 'space-175'\n  | 'space-200'\n  | 'space-250'\n  | 'space-300'\n  | 'space-400'\n  | 'space-600'\n  | 'space-800';\nexport type DividerInset = 'none' | DividerInsetToken | (string & {});\nexport type DividerLength = 'auto' | 'full' | (string & {});\n\nconst INSET_VALUE: Record<'none' | DividerInsetToken, string> = {\n  none: '0',\n  'space-000': 'var(--dimension-space-000)',\n  'space-012': 'var(--dimension-space-012)',\n  'space-025': 'var(--dimension-space-025)',\n  'space-050': 'var(--dimension-space-050)',\n  'space-075': 'var(--dimension-space-075)',\n  'space-100': 'var(--dimension-space-100)',\n  'space-125': 'var(--dimension-space-125)',\n  'space-150': 'var(--dimension-space-150)',\n  'space-175': 'var(--dimension-space-175)',\n  'space-200': 'var(--dimension-space-200)',\n  'space-250': 'var(--dimension-space-250)',\n  'space-300': 'var(--dimension-space-300)',\n  'space-400': 'var(--dimension-space-400)',\n  'space-600': 'var(--dimension-space-600)',\n  'space-800': 'var(--dimension-space-800)',\n};\n\n@Component({\n  tag: 'ds-divider',\n  styleUrl: 'Divider.css',\n  scoped: true,\n})\nexport class Divider {\n  /** Direction of the divider line. Defaults to 'horizontal'. */\n  @Prop() orientation: DividerOrientation = 'horizontal';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: DividerBackground | undefined;\n\n  /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */\n  @Prop() inset: DividerInset = 'none';\n\n  /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */\n  @Prop() length: DividerLength = 'auto';\n\n  /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */\n  @Prop() semantic: boolean = false;\n\n  private resolveInset(): string {\n    return Object.prototype.hasOwnProperty.call(INSET_VALUE, this.inset)\n      ? INSET_VALUE[this.inset as keyof typeof INSET_VALUE]\n      : this.inset;\n  }\n\n  private resolveLength(): string {\n    return this.length === 'auto' || this.length === 'full'\n      ? '100%'\n      : this.length;\n  }\n\n  render() {\n    const isVertical = this.orientation === 'vertical';\n    const hasCustomLength = this.length !== 'auto' && this.length !== 'full';\n\n    return (\n      <Host\n        role={this.semantic ? 'separator' : undefined}\n        aria-orientation={this.semantic ? this.orientation : undefined}\n        aria-hidden={this.semantic ? undefined : 'true'}\n        class={{\n          divider: true,\n          'divider--vertical': isVertical,\n          'divider--custom-length': hasCustomLength,\n          [`divider--background-${this.background}`]: !!this.background,\n        }}\n        style={{\n          '--_divider-inset': this.resolveInset(),\n          '--_divider-length': this.resolveLength(),\n        }}\n      />\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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"
+    }
+  ]
+}