@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,276 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "chip",
+  "title": "Chip",
+  "description": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/chip",
+    "source": "src/wc/components/Chip/Chip.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Always-removable metadata value for primary surfaces, with semantic value status and parent-owned removal.",
+      "useWhen": [
+        "A user-applied value such as a filter, recipient, or tokenized input entry must remain visible and individually removable.",
+        "A compact metadata value needs a semantic neutral, active, error, or caution status before removal.",
+        "A collection owner can remove the represented value and restore focus after the dismiss action."
+      ],
+      "avoidWhen": [
+        "The label is static or not individually removable; use Tag instead.",
+        "The control selects, toggles, or navigates; use the matching button or navigation component.",
+        "The information is a persistent status, count, or unread indicator; use Badge or an appropriate status composition instead.",
+        "The chip would be placed on any surface other than a primary surface."
+      ],
+      "alternatives": [
+        {
+          "when": "The metadata label is static and has no dismiss action.",
+          "component": "component:ds-tag",
+          "reason": "Tag owns non-interactive taxonomy and metadata labels."
+        },
+        {
+          "when": "The compact mark communicates a count, status, or unread indicator.",
+          "component": "component:ds-badge",
+          "reason": "Badge owns supplemental counters and status marks without a dismiss action."
+        },
+        {
+          "when": "The value is a selectable or persistent toggle.",
+          "component": "component:ds-button-unfilled",
+          "reason": "ButtonUnfilled owns command and toggle semantics."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-input",
+        "component:ds-select"
+      ],
+      "accessibility": [
+        "Keep the visible label meaningful without relying on semantic color alone.",
+        "Give the dismiss action a name that identifies the represented value.",
+        "After removal, the parent moves focus to the next chip, then the previous chip, or the owning collection or input trigger when no chips remain.",
+        "Inactive chips remain visible while their dismiss action is disabled and removed from keyboard interaction."
+      ],
+      "states": [
+        "Semantic state describes the represented value; active does not mean selected or pressed.",
+        "The dismiss action is the chip's only interaction, and the parent owns data mutation after dsRemove.",
+        "Long labels remain on one line and truncate only when the consuming layout supplies a maximum width; otherwise the chip sizes to its content.",
+        "Rounded shape is a visual choice and does not change semantics or interaction.",
+        "Chip is designed only for primary surfaces and has no surface-context API."
+      ],
+      "responsiveBehavior": [
+        "The parent chooses chip size and owns wrapping, overflow, and collection condensation.",
+        "Chip does not automatically resize, hide, or collapse its label at responsive breakpoints."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "dsRemove has no payload; associate each rendered chip with its owning value and remove that value from the event handler."
+        ],
+        "react": [
+          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
+        ],
+        "angular": [
+          "Use the rendered chip's bound item context in the dsRemove handler, then restore focus after the collection rerenders."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Chip/Chip.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "isInactive": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "is-inactive",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false
+        },
+        "maxWidth": {
+          "type": "string | number | undefined",
+          "resolvedType": "number | string | undefined",
+          "attribute": "max-width",
+          "required": false,
+          "mutable": false
+        },
+        "removeLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "remove-label",
+          "default": "'Remove {label}'",
+          "required": false,
+          "mutable": false,
+          "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
+        },
+        "rounded": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "rounded",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "size": {
+          "type": "ChipSize",
+          "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+          "attribute": "size",
+          "default": "'md'",
+          "required": false,
+          "mutable": false
+        },
+        "state": {
+          "type": "ChipState",
+          "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
+          "attribute": "state",
+          "default": "'default'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic color state."
+        }
+      },
+      "events": [
+        {
+          "name": "dsRemove",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Fired when the remove button is clicked."
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "isInactive": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "is-inactive",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false
+      },
+      "maxWidth": {
+        "type": "string | number | undefined",
+        "resolvedType": "number | string | undefined",
+        "attribute": "max-width",
+        "required": false,
+        "mutable": false
+      },
+      "removeLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "remove-label",
+        "default": "'Remove {label}'",
+        "required": false,
+        "mutable": false,
+        "description": "Accessible remove action. Use `{label}` as the chip-label placeholder."
+      },
+      "rounded": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "rounded",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "size": {
+        "type": "ChipSize",
+        "resolvedType": "\"md\" | \"sm\" | \"xs\"",
+        "attribute": "size",
+        "default": "'md'",
+        "required": false,
+        "mutable": false
+      },
+      "state": {
+        "type": "ChipState",
+        "resolvedType": "\"active\" | \"caution\" | \"default\" | \"error\"",
+        "attribute": "state",
+        "default": "'default'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic color state."
+      }
+    },
+    "events": [
+      {
+        "name": "dsRemove",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Fired when the remove button is clicked."
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-chip",
+      "react": "DsChip",
+      "angular": "DsChip"
+    },
+    "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-chip.js';",
+        "example": "<ds-chip></ds-chip>"
+      },
+      "react": {
+        "import": "import { DsChip } from '@ds-mo/ui/react';",
+        "example": "<DsChip />"
+      },
+      "angular": {
+        "import": "import { DsChip } from '@ds-mo/ui/angular/ds-chip';",
+        "example": "<ds-chip></ds-chip>"
+      },
+      "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/Chip/Chip.css",
+      "content": "@import '../../utils/tag-chip.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n\n/*\n * Label↔dismiss uses host gap, mirroring Tag icon↔label spacing:\n * [inset][text][inset][gap][icon].\n */\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  z-index: 2;\n  border-radius: var(--dimension-radius-half);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-n025);\n  border-radius: var(--dimension-radius-half);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before {\n  background-color: var(--color-interaction-hover);\n}\n\n.tag__remove:active::before {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.tag--size-sm) .tag__remove::before {\n  inset: var(--dimension-space-n012);\n}\n\n:host(.tag--size-xs) .tag__remove::before {\n  inset: 0;\n}\n\n.tag__remove-x {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Chip/Chip.tsx",
+      "content": "import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Accessible remove action. Use `{label}` as the chip-label placeholder. */\n  @Prop() removeLabel: string = 'Remove {label}';\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': true,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive,\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive ? 'true' : undefined}\n      >\n        <ds-text class=\"tag__label\" as=\"span\" variant={textVariant} color=\"inherit\">\n          {this.label}\n        </ds-text>\n        <button\n          type=\"button\"\n          class=\"tag__remove ds-focus-ring-inset\"\n          onClick={this.handleRemove}\n          aria-label={this.removeLabel.replace('{label}', this.label)}\n          disabled={this.isInactive || undefined}\n        >\n          <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/code-block.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "code-block",
+  "title": "CodeBlock",
+  "description": "Scrollable monospace code surface with optional language or filename context and copy action.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/code-block",
+    "source": "src/wc/components/CodeBlock/CodeBlock.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Scrollable monospace code surface with optional language or filename context and copy action.",
+      "useWhen": [
+        "A message or document displays fenced code that readers may copy."
+      ],
+      "avoidWhen": [
+        "A live editor, terminal, diff viewer, or syntax-highlighting environment is required."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-markdown",
+        "component:ds-button-unfilled"
+      ],
+      "accessibility": [
+        "The copy action has explicit status wording and the code remains selectable text.",
+        "Language and filename labels supplement rather than replace the code content."
+      ],
+      "responsiveBehavior": [
+        "Long lines scroll horizontally and do not widen the owning transcript."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MessageScroller/MessageScroller.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "code": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "code",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "filename": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "filename",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "language": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "language",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "code": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "code",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "filename": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "filename",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "language": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "language",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-code-block",
+      "react": "DsCodeBlock",
+      "angular": "DsCodeBlock"
+    },
+    "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-code-block.js';",
+        "example": "<ds-code-block></ds-code-block>"
+      },
+      "react": {
+        "import": "import { DsCodeBlock } from '@ds-mo/ui/react';",
+        "example": "<DsCodeBlock />"
+      },
+      "angular": {
+        "import": "import { DsCodeBlock } from '@ds-mo/ui/angular/ds-code-block';",
+        "example": "<ds-code-block></ds-code-block>"
+      },
+      "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": [
+    "button-unfilled",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/CodeBlock/CodeBlock.css",
+      "content": ":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(--typography-fontfamily-mono);\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  tab-size: 2;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/CodeBlock/CodeBlock.tsx",
+      "content": "import { Component, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private copiedTimer?: ReturnType<typeof setTimeout>;\n\n  disconnectedCallback() {\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n  }\n\n  private copy = async () => {\n    if (!navigator.clipboard || !this.code) return;\n    await navigator.clipboard.writeText(this.code);\n    this.copied = true;\n    if (this.copiedTimer) clearTimeout(this.copiedTimer);\n    this.copiedTimer = setTimeout(() => {\n      this.copied = false;\n    }, 2000);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={this.copied ? 'Check' : 'Copy'}\n              size=\"xs\"\n              aria-label={this.copied ? 'Copied' : 'Copy code'}\n              hasBorder={false}\n              onDsClick={this.copy}\n            />\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}