@ds-mo/ui 9.0.0 → 9.1.0

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

@@ -0,0 +1,371 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "text",
+  "title": "Text",
+  "description": "Semantic plain UI text with atomic tokenized typography recipes, measurable line boxes, and composition-owned wrapping and truncation.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/text",
+    "source": "src/wc/components/Text/Text.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Semantic plain UI text with atomic tokenized typography recipes, measurable line boxes, and composition-owned wrapping and truncation.",
+      "useWhen": [
+        "Plain UI text needs a complete design-system typography recipe.",
+        "Headings, paragraphs, labels, or inline phrasing need native HTML semantics independent from their visual scale.",
+        "A component needs a stable measurable text box aligned to shared typography metrics.",
+        "Changing numeric values need tabular glyph widths."
+      ],
+      "avoidWhen": [
+        "Content is markdown, rich prose, or an arbitrary nested document structure.",
+        "The element is interactive; use the correct native or design-system control and compose Text only for its label.",
+        "Individual font metrics must be overridden instead of selecting an existing complete variant.",
+        "Typography alone would be used to repair an incorrect heading hierarchy."
+      ],
+      "alternatives": [
+        {
+          "when": "Predictable text geometry is pending while content loads.",
+          "component": "component:ds-skeleton",
+          "reason": "Skeleton owns aria-hidden loading geometry aligned to Text line metrics."
+        },
+        {
+          "when": "Compact static metadata or semantic status needs a contained treatment.",
+          "component": "component:ds-tag",
+          "reason": "Tag owns compact labelled metadata and intent surfaces."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-icon",
+        "component:ds-card",
+        "component:ds-field",
+        "component:ds-button-filled"
+      ],
+      "accessibility": [
+        "Choose the native element from document meaning and hierarchy; choose the visual variant independently.",
+        "Composition authors preserve logical h1–h6 order regardless of visual size.",
+        "Visible content and the selected native element provide accessible meaning; avoid redundant roles and labels.",
+        "Use label semantics and its for association only for a real form control.",
+        "When truncating essential content, the owner provides an accessible way to obtain the omitted text.",
+        "Tertiary and quaternary foregrounds are restricted to text inside genuinely inactive or disabled UI, or to purely decorative content whose removal would not change meaning; quaternary is the fainter tier, and aria-hidden alone does not exempt meaningful visible text from contrast requirements.",
+        "Underline link text by default. Brand-blue links may omit the resting underline when color already supplies the affordance.",
+        "Use dotted underline for hidden or supplemental interaction such as a tooltip; the owning trigger must provide focus, keyboard interaction, and accessible tooltip semantics."
+      ],
+      "states": [
+        "A variant is atomic: font size, line height, weight, and letter spacing stay together and are not overridden by consumers.",
+        "Emphasis selects the supported stronger recipe for local hierarchy; it does not independently mean selected or active.",
+        "Omitted color inherits currentColor. Explicit semantic aliases or CSS-variable references are used only when Text has an independent color role.",
+        "Prefer the owning control's isInactive or native disabled state over manually selecting tertiary or quaternary so visual treatment and inactive semantics remain synchronized.",
+        "Line truncation and wrapping require an owner-supplied width constraint and content-aware composition decision.",
+        "Solid underline is the default link affordance; brand-blue links may omit it at rest. Dotted underline communicates hidden or supplemental interaction such as a tooltip. Decoration does not make Text interactive by itself.",
+        "Tabular numbers are for changing numeric values or aligned numeric columns where stable glyph width matters.",
+        "Shimmer is reserved for visible generating/loading status text whose owner provides status semantics; reduced motion keeps static readable text."
+      ],
+      "responsiveBehavior": [
+        "The composition owns width, wrapping, truncation, alignment, and any responsive variant change.",
+        "Text preserves complete token recipes and does not scale fluidly or infer breakpoints."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Set as explicitly for inline text, headings, and labels; omitted as renders a paragraph."
+        ],
+        "react": [
+          "Keep semantic as choices aligned with the rendered document hierarchy rather than component styling."
+        ],
+        "angular": [
+          "Use the for prop only when Text renders a label associated with a real control ID."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Text/Text.stories.ts"
+        },
+        {
+          "label": "Typography contract",
+          "path": "AGENTS.md"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "align": {
+          "type": "TextAlign | undefined",
+          "resolvedType": "\"center\" | \"left\" | \"right\" | undefined",
+          "attribute": "align",
+          "required": false,
+          "mutable": false
+        },
+        "as": {
+          "type": "TextElement",
+          "resolvedType": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\" | \"p\" | \"span\"",
+          "attribute": "as",
+          "default": "'p'",
+          "required": false,
+          "mutable": false
+        },
+        "color": {
+          "type": "TextColor",
+          "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+          "attribute": "color",
+          "default": "'inherit'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic foreground color token or CSS variable. `tertiary` and the\nstill-fainter `quaternary` are restricted to genuinely inactive/disabled\nUI content or purely decorative content; prefer the owning control's\ninactive state whenever one exists."
+        },
+        "decoration": {
+          "type": "TextDecoration | undefined",
+          "resolvedType": "\"dotted-underline\" | \"none\" | \"underline\" | undefined",
+          "attribute": "decoration",
+          "required": false,
+          "mutable": false,
+          "description": "Link underline or dotted hidden-interaction affordance; does not add semantics."
+        },
+        "emphasis": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "emphasis",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Heavier weight + tighter letter-spacing for the variant.\n`false` (default): one step below emphasis (display semibold, title/body\nmedium, caption medium).\n`true`: display bold, title/caption semibold, body medium."
+        },
+        "fontFeature": {
+          "type": "TextFontFeature",
+          "resolvedType": "\"normal\" | \"tabular-nums\"",
+          "attribute": "font-feature",
+          "default": "'normal'",
+          "required": false,
+          "mutable": false
+        },
+        "for": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "for",
+          "required": false,
+          "mutable": false,
+          "description": "Maps to `for` attribute on <label> elements."
+        },
+        "italic": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "italic",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        },
+        "lineTruncation": {
+          "type": "LineTruncation",
+          "resolvedType": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"none\" | 1 | 2 | 3 | 4 | 5",
+          "attribute": "line-truncation",
+          "default": "'none'",
+          "required": false,
+          "mutable": false
+        },
+        "shimmer": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "shimmer",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Animate the visible glyphs with the shared loading shimmer treatment."
+        },
+        "textId": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "text-id",
+          "required": false,
+          "mutable": false,
+          "description": "Forwarded to the inner element (e.g. aria-labelledby targets)."
+        },
+        "variant": {
+          "type": "TextVariant",
+          "resolvedType": "\"text-body-large\" | \"text-body-medium\" | \"text-body-small\" | \"text-caption\" | \"text-display-medium\" | \"text-display-small\" | \"text-title-large\" | \"text-title-medium\" | \"text-title-small\"",
+          "attribute": "variant",
+          "default": "'text-body-medium'",
+          "required": false,
+          "mutable": false
+        },
+        "wrap": {
+          "type": "TextWrap | undefined",
+          "resolvedType": "\"balance\" | \"nowrap\" | \"pretty\" | \"wrap\" | undefined",
+          "attribute": "wrap",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "align": {
+        "type": "TextAlign | undefined",
+        "resolvedType": "\"center\" | \"left\" | \"right\" | undefined",
+        "attribute": "align",
+        "required": false,
+        "mutable": false
+      },
+      "as": {
+        "type": "TextElement",
+        "resolvedType": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\" | \"p\" | \"span\"",
+        "attribute": "as",
+        "default": "'p'",
+        "required": false,
+        "mutable": false
+      },
+      "color": {
+        "type": "TextColor",
+        "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"inherit\" | \"negative\" | \"on-bold\" | \"on-strong\" | \"positive\" | \"primary\" | \"quaternary\" | \"secondary\" | \"tertiary\" | \"warning\" | `var(--${string})`",
+        "attribute": "color",
+        "default": "'inherit'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic foreground color token or CSS variable. `tertiary` and the\nstill-fainter `quaternary` are restricted to genuinely inactive/disabled\nUI content or purely decorative content; prefer the owning control's\ninactive state whenever one exists."
+      },
+      "decoration": {
+        "type": "TextDecoration | undefined",
+        "resolvedType": "\"dotted-underline\" | \"none\" | \"underline\" | undefined",
+        "attribute": "decoration",
+        "required": false,
+        "mutable": false,
+        "description": "Link underline or dotted hidden-interaction affordance; does not add semantics."
+      },
+      "emphasis": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "emphasis",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Heavier weight + tighter letter-spacing for the variant.\n`false` (default): one step below emphasis (display semibold, title/body\nmedium, caption medium).\n`true`: display bold, title/caption semibold, body medium."
+      },
+      "fontFeature": {
+        "type": "TextFontFeature",
+        "resolvedType": "\"normal\" | \"tabular-nums\"",
+        "attribute": "font-feature",
+        "default": "'normal'",
+        "required": false,
+        "mutable": false
+      },
+      "for": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "for",
+        "required": false,
+        "mutable": false,
+        "description": "Maps to `for` attribute on <label> elements."
+      },
+      "italic": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "italic",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      },
+      "lineTruncation": {
+        "type": "LineTruncation",
+        "resolvedType": "\"1\" | \"2\" | \"3\" | \"4\" | \"5\" | \"none\" | 1 | 2 | 3 | 4 | 5",
+        "attribute": "line-truncation",
+        "default": "'none'",
+        "required": false,
+        "mutable": false
+      },
+      "shimmer": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "shimmer",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Animate the visible glyphs with the shared loading shimmer treatment."
+      },
+      "textId": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "text-id",
+        "required": false,
+        "mutable": false,
+        "description": "Forwarded to the inner element (e.g. aria-labelledby targets)."
+      },
+      "variant": {
+        "type": "TextVariant",
+        "resolvedType": "\"text-body-large\" | \"text-body-medium\" | \"text-body-small\" | \"text-caption\" | \"text-display-medium\" | \"text-display-small\" | \"text-title-large\" | \"text-title-medium\" | \"text-title-small\"",
+        "attribute": "variant",
+        "default": "'text-body-medium'",
+        "required": false,
+        "mutable": false
+      },
+      "wrap": {
+        "type": "TextWrap | undefined",
+        "resolvedType": "\"balance\" | \"nowrap\" | \"pretty\" | \"wrap\" | undefined",
+        "attribute": "wrap",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-text",
+      "react": "DsText",
+      "angular": "DsText"
+    },
+    "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-text.js';",
+        "example": "<ds-text></ds-text>"
+      },
+      "react": {
+        "import": "import { DsText } from '@ds-mo/ui/react';",
+        "example": "<DsText />"
+      },
+      "angular": {
+        "import": "import { DsText } from '@ds-mo/ui/angular/ds-text';",
+        "example": "<ds-text></ds-text>"
+      },
+      "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/Text/Text.css",
+      "content": "@import '../../utils/typography.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  box-sizing: border-box;\n  max-width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n  display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n  display: block;\n  width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  text-transform: inherit;\n  text-align: inherit;\n  text-decoration: inherit;\n  font-style: inherit;\n  font-variant-numeric: inherit;\n  font-feature-settings: inherit;\n  white-space: inherit;\n  text-wrap: inherit;\n  overflow-wrap: inherit;\n  word-break: inherit;\n  /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n     text node — overflow/text-overflow are not inherited by default. */\n  overflow: inherit;\n  text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n  overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary)   { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary)  { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-quaternary) { color: var(--color-foreground-quaternary); }\n:host(.ds-text--color-brand)     { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative)  { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive)  { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning)   { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution)   { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai)        { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold)   { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit)   { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n:host(.ds-text--decoration-dotted-underline) {\n  text-decoration: underline dotted;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left)   { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right)  { text-align: right; }\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Text/Text.tsx",
+      "content": "import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n  TextAlign,\n  TextColor,\n  TextDecoration,\n  TextElement,\n  TextFontFeature,\n  TextVariant,\n  LineTruncation,\n  TextWrap,\n} from './text-types';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  /**\n   * Heavier weight + tighter letter-spacing for the variant.\n   * `false` (default): one step below emphasis (display semibold, title/body\n   * medium, caption medium).\n   * `true`: display bold, title/caption semibold, body medium.\n   */\n  @Prop() emphasis: boolean = false;\n  /**\n   * Semantic foreground color token or CSS variable. `tertiary` and the\n   * still-fainter `quaternary` are restricted to genuinely inactive/disabled\n   * UI content or purely decorative content; prefer the owning control's\n   * inactive state whenever one exists.\n   */\n  @Prop() color: TextColor = 'inherit';\n  /** Link underline or dotted hidden-interaction affordance; does not add semantics. */\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  /** Animate the visible glyphs with the shared loading shimmer treatment. */\n  @Prop() shimmer: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() fontFeature: TextFontFeature = 'normal';\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n  /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n  @Prop() textId: string | undefined;\n\n  render() {\n    // Polymorphic element: TSX treats a variable tag as a component, so a\n    // dynamic intrinsic element name must be cast to `any` to render.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n    const truncationLines = Number(this.lineTruncation);\n\n    const cls: Record<string, boolean> = {\n      'ds-text': true,\n      [textDisplayClass(this.as)]: true,\n      [textVariantClass(this.variant)]: true,\n      'ds-text--emphasis': this.emphasis,\n      'ds-text--regular': !this.emphasis,\n      'ds-text--nowrap': this.wrap === 'nowrap',\n      'ds-text--balance': this.wrap === 'balance',\n      'ds-text--pretty': this.wrap === 'pretty',\n      'ds-text--truncate-1': truncationLines === 1 && this.wrap !== 'nowrap',\n      'ds-text--truncate-2': truncationLines === 2 && this.wrap !== 'nowrap',\n      'ds-text--truncate-3': truncationLines === 3 && this.wrap !== 'nowrap',\n      'ds-text--truncate-4': truncationLines === 4 && this.wrap !== 'nowrap',\n      'ds-text--truncate-5': truncationLines === 5 && this.wrap !== 'nowrap',\n      'ds-text--color-primary':   this.color === 'primary',\n      'ds-text--color-secondary': this.color === 'secondary',\n      'ds-text--color-tertiary':  this.color === 'tertiary',\n      'ds-text--color-quaternary': this.color === 'quaternary',\n      'ds-text--color-brand':     this.color === 'brand',\n      'ds-text--color-negative':  this.color === 'negative',\n      'ds-text--color-positive':  this.color === 'positive',\n      'ds-text--color-warning':   this.color === 'warning',\n      'ds-text--color-caution':   this.color === 'caution',\n      'ds-text--color-ai':        this.color === 'ai',\n      'ds-text--color-on-strong': this.color === 'on-strong',\n      'ds-text--color-on-bold':   this.color === 'on-bold',\n      'ds-text--color-inherit':   this.color === 'inherit',\n      'ds-text--decoration-underline':        this.decoration === 'underline',\n      'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'ds-text--italic': this.italic,\n      'ds-text--align-left':   this.align === 'left',\n      'ds-text--align-center': this.align === 'center',\n      'ds-text--align-right':  this.align === 'right',\n      'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\n    };\n\n    const style = this.color && isCustomColor(this.color)\n      ? { color: this.color as string }\n      : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n    if (this.textId) extraProps['id'] = this.textId;\n\n    return (\n      <Host class={cls} style={style}>\n        <Tag\n          class={{\n            'ds-text__element': true,\n            'ds-shimmer-text': this.shimmer,\n          }}\n          {...extraProps}\n        >\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Text/text-types.ts",
+      "content": "export type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-medium'\n  | 'text-body-small'\n  | 'text-caption';\n\nexport type TextColorToken =\n  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n  | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\nexport type TextFontFeature = 'normal' | 'tabular-nums';\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Text/text-utils.ts",
+      "content": "import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n  return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n  return element === 'span' || element === 'label'\n    ? 'ds-text--inline-box'\n    : 'ds-text--block-box';\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/tooltip-data-viz.json

@@ -0,0 +1,158 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tooltip-data-viz",
+  "title": "TooltipDataViz",
+  "description": "Positioned value/label callout for chart hover interactions (bar, line point, …).\nDonut charts skip this — legend sync already surfaces the hovered slice.\nUnlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\ncharts hover-highlight data that lives inside an SVG, so the chart itself computes\nthe anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n\nRenders `position: absolute` — place inside a `position: relative` chart wrapper,\nwith `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\nof the anchor (matching cursor-following tooltips), flipping to whichever side/edge\nkeeps it on-screen.\n\nMount (or remount) when a hover session starts so `delay` applies once per hover;\nkeep the instance mounted while the cursor moves so tracking stays instant.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/tooltip-data-viz",
+    "source": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "delay": {
+          "type": "number | string",
+          "resolvedType": "number | string",
+          "attribute": "delay",
+          "default": "TOKEN_DEFAULTS.animationDelayInstant",
+          "required": false,
+          "mutable": false,
+          "description": "Show delay after mount before the callout appears.\nDefault: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\nor a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\nimmediate feedback while scrubbing; prefer the default. Mount once per\nhover session so any non-zero delay runs once, then track `x`/`y` instantly."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "value": {
+          "type": "string | number",
+          "resolvedType": "number | string",
+          "attribute": "value",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "x": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "x",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor."
+        },
+        "y": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "y",
+          "default": "0",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "delay": {
+        "type": "number | string",
+        "resolvedType": "number | string",
+        "attribute": "delay",
+        "default": "TOKEN_DEFAULTS.animationDelayInstant",
+        "required": false,
+        "mutable": false,
+        "description": "Show delay after mount before the callout appears.\nDefault: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\nor a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\nimmediate feedback while scrubbing; prefer the default. Mount once per\nhover session so any non-zero delay runs once, then track `x`/`y` instantly."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "value": {
+        "type": "string | number",
+        "resolvedType": "number | string",
+        "attribute": "value",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "x": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "x",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor."
+      },
+      "y": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "y",
+        "default": "0",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-tooltip-data-viz",
+      "react": "DsTooltipDataViz",
+      "angular": "DsTooltipDataViz"
+    },
+    "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-tooltip-data-viz.js';",
+        "example": "<ds-tooltip-data-viz></ds-tooltip-data-viz>"
+      },
+      "react": {
+        "import": "import { DsTooltipDataViz } from '@ds-mo/ui/react';",
+        "example": "<DsTooltipDataViz />"
+      },
+      "angular": {
+        "import": "import { DsTooltipDataViz } from '@ds-mo/ui/angular/ds-tooltip-data-viz';",
+        "example": "<ds-tooltip-data-viz></ds-tooltip-data-viz>"
+      },
+      "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/TooltipDataViz/TooltipDataViz.css",
+      "content": "@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-translucent-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host(.tooltip-data-viz--visible) {\n    animation: none;\n    opacity: 1;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/TooltipDataViz/TooltipDataViz.tsx",
+      "content": "import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (bar, line point, …).\n * Donut charts skip this — legend sync already surfaces the hovered slice.\n * Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <ds-text\n            class=\"tooltip-data-viz__label\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"var(--color-translucent-foreground-secondary)\"\n          >\n            {this.label}\n          </ds-text>\n          <ds-text\n            class=\"tooltip-data-viz__value\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"var(--color-translucent-foreground-primary)\"\n          >\n            {this.value}\n          </ds-text>\n        </div>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}