@ds-mo/ui 9.0.0 → 9.2.0

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

@@ -0,0 +1,136 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "avatar",
+  "title": "Avatar",
+  "description": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/avatar",
+    "source": "src/wc/components/Avatar/Avatar.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Compact icon avatar for visually identifying a person, group, channel, or conversation type.",
+      "useWhen": [
+        "A list or message composition needs a consistent 32px circular identity marker represented by an icon."
+      ],
+      "avoidWhen": [
+        "The identity has a supplied photograph, initials, presence state, or editable profile behavior; those variants are not part of this primitive."
+      ],
+      "commonlyComposedWith": [
+        "component:ds-conversation-list-item",
+        "component:ds-message"
+      ],
+      "accessibility": [
+        "Provide label only when the icon communicates meaning that surrounding text does not already convey.",
+        "Omit label when the owning row or message already provides an equivalent accessible name."
+      ],
+      "responsiveBehavior": [
+        "The avatar keeps its fixed 32px circle and 20px icon at every viewport size."
+      ],
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Avatar/Avatar.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "icon": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "icon",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Canonical IcoMo icon name displayed inside the avatar."
+        },
+        "label": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "icon": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "icon",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Canonical IcoMo icon name displayed inside the avatar."
+      },
+      "label": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Optional accessible label. Omit when the surrounding content already conveys the meaning."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-avatar",
+      "react": "DsAvatar",
+      "angular": "DsAvatar"
+    },
+    "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-avatar.js';",
+        "example": "<ds-avatar></ds-avatar>"
+      },
+      "react": {
+        "import": "import { DsAvatar } from '@ds-mo/ui/react';",
+        "example": "<DsAvatar />"
+      },
+      "angular": {
+        "import": "import { DsAvatar } from '@ds-mo/ui/angular/ds-avatar';",
+        "example": "<ds-avatar></ds-avatar>"
+      },
+      "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"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/Avatar/Avatar.css",
+      "content": ":host {\n  display: inline-flex;\n  flex-shrink: 0;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n}\n\n.avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Avatar/Avatar.tsx",
+      "content": "import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ds-avatar',\n  styleUrl: 'Avatar.css',\n  scoped: true,\n})\nexport class Avatar {\n  /** Canonical IcoMo icon name displayed inside the avatar. */\n  @Prop() icon: string = '';\n\n  /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */\n  @Prop() label: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <span\n          class=\"avatar\"\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n          aria-hidden={!this.label ? 'true' : undefined}\n        >\n          <ds-icon name={this.icon} size=\"md\" color=\"secondary\" />\n        </span>\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,289 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "title": "Badge",
+  "description": "Non-interactive brand counter or dot that supplements an owning control or label with unread notification information.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/badge",
+    "source": "src/wc/components/Badge/Badge.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "stable",
+      "summary": "Non-interactive brand counter or dot that supplements an owning control or label with unread notification information.",
+      "useWhen": [
+        "An existing control, navigation item, or label needs a compact unread notification count.",
+        "An owning element needs a small visual dot indicating that supplemental notification information exists.",
+        "When the badge overlaps an icon or content, the immediate backing surface can be identified so its separation ring matches."
+      ],
+      "avoidWhen": [
+        "The status must stand alone without an owning label or control.",
+        "The mark needs semantic positive, caution, negative, or neutral color; Badge intentionally uses one brand treatment.",
+        "The compact content is metadata or taxonomy; use Tag or Chip according to whether it is removable.",
+        "The badge itself would receive pointer or keyboard interaction; put interaction on the owning control."
+      ],
+      "alternatives": [
+        {
+          "when": "A compact static label communicates taxonomy or a semantic status.",
+          "component": "component:ds-tag",
+          "reason": "Tag owns static metadata labels and semantic intent coloring."
+        },
+        {
+          "when": "A metadata value must be individually removable.",
+          "component": "component:ds-chip",
+          "reason": "Chip owns dismissible metadata values."
+        },
+        {
+          "when": "The count is primary content rather than supplemental notification chrome.",
+          "component": "component:ds-text",
+          "reason": "Text preserves the quantity as normal readable content."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-button-unfilled",
+        "component:ds-bar-nav",
+        "component:ds-panel-nav",
+        "component:ds-menu"
+      ],
+      "accessibility": [
+        "The owning control or content provides the primary accessible name; Badge contributes only supplemental unread or notification meaning.",
+        "When a dot is announced, provide contextual text that explains its meaning. Otherwise mark it aria-hidden from the owning composition.",
+        "When a counter is announced, provide contextual text such as “5 unread notifications”; a bare number is insufficient.",
+        "Avoid duplicating information already included in the owning control's accessible name.",
+        "Badge never receives focus and never owns an interaction."
+      ],
+      "states": [
+        "Counter represents an unread or notification count, while dot communicates presence without quantity.",
+        "Non-positive counter values hide the badge.",
+        "Counts above the configured compact limit display the limit with a plus suffix while accessible text retains meaningful context.",
+        "Badge keeps one brand treatment; semantic severity belongs to another component or adjacent content.",
+        "Use the ring only when Badge overlaps an icon or other content. Disable it in a reserved safe-area slot.",
+        "When enabled, the ring matches the immediate backing surface for both variants. Use a direct ring override only for a component-local fill that no surface preset represents.",
+        "Enabled shell gradient rings align automatically inside active AppShell gradient chrome and may be explicitly enabled or disabled when composition requires it."
+      ],
+      "responsiveBehavior": [
+        "The owning control or layout positions Badge and decides whether notification indicators remain visible, condense, or move at responsive breakpoints.",
+        "Badge does not anchor itself or automatically switch between counter and dot variants."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "Position Badge from the owning element's layout and synchronize its contextual accessibility text with the owner."
+        ],
+        "react": [
+          "Keep count, visibility, and contextual accessibility text derived from the same unread-notification state as the owning control."
+        ],
+        "angular": [
+          "Keep count, visibility, and contextual accessibility text derived from the same unread-notification state as the owning control."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/Badge/Badge.stories.ts"
+        }
+      ]
+    },
+    "api": {
+      "props": {
+        "background": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "background",
+          "required": false,
+          "mutable": false,
+          "description": "Direct ring background override for component-local surfaces."
+        },
+        "count": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "count",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Count shown for counter badges. Count 0 hides the badge."
+        },
+        "gradientBackground": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "gradient-background",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
+        },
+        "hasRing": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "has-ring",
+          "default": "true",
+          "required": false,
+          "mutable": false,
+          "description": "Show the separation ring when the badge overlaps an icon or other content."
+        },
+        "label": {
+          "type": "string | undefined",
+          "resolvedType": "string | undefined",
+          "attribute": "label",
+          "required": false,
+          "mutable": false,
+          "description": "Contextual supplemental text. Omit when the owner hides the badge from assistive technology."
+        },
+        "max": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "max",
+          "default": "9",
+          "required": false,
+          "mutable": false,
+          "description": "Highest count shown before compacting to \"{max}+\"."
+        },
+        "surface": {
+          "type": "BadgeSurface",
+          "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\" | \"translucent\"",
+          "attribute": "surface",
+          "default": "'primary'",
+          "required": false,
+          "mutable": false,
+          "description": "Immediate backing surface matched by the ring around either variant."
+        },
+        "variant": {
+          "type": "BadgeVariant",
+          "resolvedType": "\"counter\" | \"dot\"",
+          "attribute": "variant",
+          "default": "'counter'",
+          "required": false,
+          "mutable": false,
+          "description": "Render as a compact counter or notification dot."
+        }
+      },
+      "events": [],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "background": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "background",
+        "required": false,
+        "mutable": false,
+        "description": "Direct ring background override for component-local surfaces."
+      },
+      "count": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "count",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Count shown for counter badges. Count 0 hides the badge."
+      },
+      "gradientBackground": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "gradient-background",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Ring samples the shell gradient stack (base fill + wash) instead of a flat\n`box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\nset `gradient-background` to opt in/out explicitly.\n\nThe attribute must NOT start with `on` — Stencil's setAccessor routes any\nunknown `on*` member down the event-listener path during attribute\nreflection, calling addEventListener with a non-listener and throwing."
+      },
+      "hasRing": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "has-ring",
+        "default": "true",
+        "required": false,
+        "mutable": false,
+        "description": "Show the separation ring when the badge overlaps an icon or other content."
+      },
+      "label": {
+        "type": "string | undefined",
+        "resolvedType": "string | undefined",
+        "attribute": "label",
+        "required": false,
+        "mutable": false,
+        "description": "Contextual supplemental text. Omit when the owner hides the badge from assistive technology."
+      },
+      "max": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "max",
+        "default": "9",
+        "required": false,
+        "mutable": false,
+        "description": "Highest count shown before compacting to \"{max}+\"."
+      },
+      "surface": {
+        "type": "BadgeSurface",
+        "resolvedType": "\"always-dark\" | \"bold\" | \"faint\" | \"inverted\" | \"media\" | \"medium\" | \"navigation\" | \"primary\" | \"secondary\" | \"strong\" | \"translucent\"",
+        "attribute": "surface",
+        "default": "'primary'",
+        "required": false,
+        "mutable": false,
+        "description": "Immediate backing surface matched by the ring around either variant."
+      },
+      "variant": {
+        "type": "BadgeVariant",
+        "resolvedType": "\"counter\" | \"dot\"",
+        "attribute": "variant",
+        "default": "'counter'",
+        "required": false,
+        "mutable": false,
+        "description": "Render as a compact counter or notification dot."
+      }
+    },
+    "events": [],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-badge",
+      "react": "DsBadge",
+      "angular": "DsBadge"
+    },
+    "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-badge.js';",
+        "example": "<ds-badge></ds-badge>"
+      },
+      "react": {
+        "import": "import { DsBadge } from '@ds-mo/ui/react';",
+        "example": "<DsBadge />"
+      },
+      "angular": {
+        "import": "import { DsBadge } from '@ds-mo/ui/angular/ds-badge';",
+        "example": "<ds-badge></ds-badge>"
+      },
+      "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/Badge/Badge.css",
+      "content": ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n.badge__a11y {\n  position: absolute;\n  /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Badge/Badge.tsx",
+      "content": "import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  faint: 'var(--color-background-faint-neutral)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  translucent: 'var(--color-translucent-translucent)',\n  inverted: 'var(--color-inverted-background)',\n  media: 'var(--color-media-background)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"{max}+\". */\n  @Prop() max: number = 9;\n\n  /** Immediate backing surface matched by the ring around either variant. */\n  @Prop() surface: BadgeSurface = 'primary';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /** Show the separation ring when the badge overlaps an icon or other content. */\n  @Prop() hasRing: boolean = true;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  @Watch('hasRing')\n  gradientBackgroundChanged() {\n    if (!this.hasRing) {\n      this.unbindGradientRingSync();\n      return;\n    }\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.hasRing) return;\n\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? `${this.max}+` : String(this.count);\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--no-ring': !this.hasRing,\n          'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n        }}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n        {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

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

@@ -0,0 +1,206 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "banner",
+  "title": "Banner",
+  "description": "Intent-colored message bar. Supports floating toast mode with auto-dismiss and fade-out animation.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/banner",
+    "source": "src/wc/components/Banner/Banner.tsx",
+    "intentStatus": "migration-pending",
+    "intent": null,
+    "api": {
+      "props": {
+        "contrast": {
+          "type": "BannerContrast",
+          "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
+          "attribute": "contrast",
+          "default": "'medium'",
+          "required": false,
+          "mutable": false
+        },
+        "dismissLabel": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "dismiss-label",
+          "default": "'Dismiss'",
+          "required": false,
+          "mutable": false
+        },
+        "floating": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "floating",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Renders at a fixed position (centered top) and auto-dismisses after 4 s."
+        },
+        "header": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "header",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Renders the diagonal-stripe accent bar above the body."
+        },
+        "intent": {
+          "type": "BannerIntent",
+          "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
+          "attribute": "intent",
+          "default": "'neutral'",
+          "required": false,
+          "mutable": false
+        },
+        "message": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "message",
+          "default": "''",
+          "required": false,
+          "mutable": false
+        },
+        "showDismiss": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "show-dismiss",
+          "default": "false",
+          "required": false,
+          "mutable": false
+        }
+      },
+      "events": [
+        {
+          "name": "dsDismiss",
+          "detail": "void",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true
+        }
+      ],
+      "methods": [],
+      "slots": []
+    },
+    "props": {
+      "contrast": {
+        "type": "BannerContrast",
+        "resolvedType": "\"bold\" | \"faint\" | \"medium\" | \"strong\"",
+        "attribute": "contrast",
+        "default": "'medium'",
+        "required": false,
+        "mutable": false
+      },
+      "dismissLabel": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "dismiss-label",
+        "default": "'Dismiss'",
+        "required": false,
+        "mutable": false
+      },
+      "floating": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "floating",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Renders at a fixed position (centered top) and auto-dismisses after 4 s."
+      },
+      "header": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "header",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Renders the diagonal-stripe accent bar above the body."
+      },
+      "intent": {
+        "type": "BannerIntent",
+        "resolvedType": "\"ai\" | \"brand\" | \"caution\" | \"guide\" | \"negative\" | \"neutral\" | \"positive\" | \"walkthrough\" | \"warning\"",
+        "attribute": "intent",
+        "default": "'neutral'",
+        "required": false,
+        "mutable": false
+      },
+      "message": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "message",
+        "default": "''",
+        "required": false,
+        "mutable": false
+      },
+      "showDismiss": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "show-dismiss",
+        "default": "false",
+        "required": false,
+        "mutable": false
+      }
+    },
+    "events": [
+      {
+        "name": "dsDismiss",
+        "detail": "void",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true
+      }
+    ],
+    "methods": [],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-banner",
+      "react": "DsBanner",
+      "angular": "DsBanner"
+    },
+    "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-banner.js';",
+        "example": "<ds-banner></ds-banner>"
+      },
+      "react": {
+        "import": "import { DsBanner } from '@ds-mo/ui/react';",
+        "example": "<DsBanner />"
+      },
+      "angular": {
+        "import": "import { DsBanner } from '@ds-mo/ui/angular/ds-banner';",
+        "example": "<ds-banner></ds-banner>"
+      },
+      "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/Banner/Banner.css",
+      "content": ".banner-surface {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n  width: 100%;\n  height: var(--dimension-space-100);\n  flex-shrink: 0;\n  overflow: hidden;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(\n    -45deg,\n    var(--banner-content),\n    var(--banner-content) var(--dimension-size-100),\n    transparent var(--dimension-size-100),\n    transparent var(--dimension-size-200)\n  );\n}\n\n.banner-body {\n  padding: var(--dimension-space-075);\n  min-height: var(--dimension-size-400);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dimension-space-075);\n}\n\n.banner-message {\n  color: var(--banner-content);\n  flex: 1;\n  min-width: 0;\n}\n\n.banner-dismiss {\n  background: none;\n  border: none;\n  margin: 0;\n  padding: var(--dimension-space-025);\n  color: var(--banner-content);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.banner-dismiss::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n  pointer-events: none;\n}\n\n.banner-dismiss:hover::before  { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n  position: fixed;\n  top: var(--dimension-space-200);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n.floating-toast {\n  pointer-events: auto;\n  animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n  animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(-4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .floating-toast {\n    animation: none;\n    opacity: 1;\n    transform: none;\n  }\n\n  .floating-toast--closing {\n    opacity: 0;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/Banner/Banner.tsx",
+      "content": "import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Prop() intent: BannerIntent = 'neutral';\n  @Prop() contrast: BannerContrast = 'medium';\n  @Prop() message: string = '';\n  /** Renders the diagonal-stripe accent bar above the body. */\n  @Prop() header: boolean = false;\n  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n  @Prop() floating: boolean = false;\n  @Prop() showDismiss: boolean = false;\n  @Prop() dismissLabel: string = 'Dismiss';\n\n  @State() private closing: boolean = false;\n\n  @Event() dsDismiss!: EventEmitter<void>;\n\n  private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private get fadeOutMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get autoDismissMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.animationDelayLong2, TOKEN_DEFAULTS.animationDelayLong2);\n  }\n\n  componentDidLoad() {\n    if (this.floating && this.message) this.scheduleDismiss();\n  }\n\n  @Watch('message')\n  onMessageChange(newVal: string) {\n    if (this.floating && newVal) {\n      this.closing = false;\n      this.scheduleDismiss();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearTimers();\n  }\n\n  private clearTimers() {\n    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }\n  }\n\n  private scheduleDismiss() {\n    this.clearTimers();\n    this.dismissTimer = setTimeout(() => {\n      this.dismissTimer = null;\n      this.beginClose();\n    }, this.autoDismissMs);\n  }\n\n  private beginClose() {\n    this.clearTimers();\n    if (this.floating) {\n      const fadeOutMs = this.fadeOutMs;\n      if (fadeOutMs <= 0) {\n        this.closing = false;\n        this.dsDismiss.emit();\n        return;\n      }\n      this.closing = true;\n      this.closeTimer = setTimeout(() => {\n        this.closing = false;\n        this.closeTimer = null;\n        this.dsDismiss.emit();\n      }, fadeOutMs);\n    } else {\n      this.dsDismiss.emit();\n    }\n  }\n\n  private getContentColor(): string {\n    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n    return `var(--color-foreground-${c}-${this.intent})`;\n  }\n\n  private getBg(): string {\n    return `var(--color-background-${this.contrast}-${this.intent})`;\n  }\n\n  private getElevation(): string {\n    return this.floating\n      ? 'var(--effect-elevation-elevated-floating)'\n      : 'var(--effect-elevation-elevated-sm)';\n  }\n\n  render() {\n    const contentColor = this.getContentColor();\n    const isAssertive = this.intent === 'negative';\n\n    const bannerEl = (\n      <div\n        class={{ 'banner-wrapper': true }}\n        style={{ '--banner-content': contentColor } as { [key: string]: string }}\n        role={isAssertive ? 'alert' : 'status'}\n        aria-live={isAssertive ? undefined : 'polite'}\n      >\n        <div\n          class=\"banner-surface\"\n          style={{\n            backgroundColor: this.getBg(),\n            boxShadow: this.getElevation(),\n          }}\n        >\n          {this.header && (\n            <div class=\"banner-header-surface\">\n              <div class=\"banner-header\" />\n            </div>\n          )}\n          <div class=\"banner-body\">\n            <ds-text class=\"banner-message\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n              {this.message}\n            </ds-text>\n            {this.showDismiss && (\n              <button\n                type=\"button\"\n                class=\"banner-dismiss\"\n                onClick={() => this.beginClose()}\n                aria-label={this.dismissLabel}\n              >\n                &times;\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n\n    if (this.floating) {\n      return (\n        <Host style={{ display: 'contents' }}>\n          <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n              {bannerEl}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}