@ds-mo/ui 15.1.1 → 15.2.0

package/dist/mcp-data/registry/bar-title.json

@@ -77,7 +77,7 @@
         "Dividers in sections or actions create separate Menu groups without becoming selectable rows.",
         "The overflow trigger uses its bordered treatment whenever any visible action sits beside it; overflow-only presentations keep the trigger borderless.",
         "Ordered actions preserve authored order, but only the first eligible filled button, unfilled button, icon button, labeled menu button, or split button renders beside the title. Remaining commands use the shared overflow, whose rows are text-only. Menu choices and overflowed split commands become separate rows and share the same flat action event.",
-        "expanded renders the larger heading, optional description, inset divider, and a full-width caption breadcrumb row above the title. The breadcrumb begins after 32px top padding; the following title and right-side actions share one top alignment. Compact renders 48px chrome with the existing icon Back action; constrained uses compact chrome and moves an auto-collapse primary action into overflow.",
+        "expanded renders the larger heading, optional description, inset divider, and a full-width caption breadcrumb row above the title. The breadcrumb begins after 16px top padding; the following title and right-side actions share one top alignment. Compact renders 48px chrome with the existing icon Back action; constrained uses compact chrome and moves an auto-collapse primary action into overflow.",
         "The one visible ordered action collapses by default in constrained presentation. Use never for an exceptional action whose hierarchy must remain visible; explicit overflow actions never leave the shared menu.",
         "showDivider=false removes the bottom divider when the surrounding page composition supplies the boundary; showCompactDivider can independently restore or remove that boundary in compact and constrained variants.",
         "placement=shell-bar remains compact slotted chrome for advanced ShellApp composition. Managed panel-mode ShellApp uses BarPageTitle instead. It omits description and breadcrumb presentation and preserves applicable Back, section, primary, and overflow controls.",
@@ -588,7 +588,7 @@
   "files": [
     {
       "path": "src/wc/components/BarTitle/BarTitle.css",
-      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n:host([placement='shell-bar']) {\n  --_shell-page-header-background: var(--color-background-secondary);\n}\n\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'],\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'] .bar-title,\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'],\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'] .bar-title {\n  background: transparent;\n}\n\n:host([data-shell-page-syncing]) {\n  visibility: hidden;\n}\n\n.bar-title {\n  position: relative;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n.bar-title::after {\n  content: '';\n  position: absolute;\n  inset: auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.bar-title--divider-hidden::after {\n  display: none;\n}\n\n.bar-title__inner {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n.bar-title__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n  gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.bar-title__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n  flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n  display: block;\n  width: 100%;\n  min-width: 0;\n}\n\n.bar-title__heading {\n  display: block;\n  width: auto;\n  min-width: 0;\n  user-select: none;\n}\n\n.bar-title__divider {\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-250);\n  margin-inline-start: var(--dimension-space-100);\n  flex: 0 0 var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n  display: flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n  --ds-control-radius: var(--dimension-radius-half);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--ds-control-padding-inline);\n  border: none;\n  border-radius: var(--ds-control-radius);\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  font-family: inherit;\n  user-select: none;\n}\n\n.bar-title__section-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.bar-title__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n}\n\n.bar-title__description {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n  height: var(--dimension-size-600);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n  inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n  flex: 1 1 auto;\n  height: 100%;\n  min-width: 0;\n  padding: 0;\n  gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n  height: 100%;\n  align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n  height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n  margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n}\n",
+      "content": "@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n:host([placement='shell-bar']) {\n  --_shell-page-header-background: var(--color-background-secondary);\n}\n\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'],\n:host-context(ds-shell-app:not([gradient-preset='none']))[placement='shell-bar'] .bar-title,\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'],\n:host-context(ds-shell-app.shell-app--paper-texture)[placement='shell-bar'] .bar-title {\n  background: transparent;\n}\n\n:host([data-shell-page-syncing]) {\n  visibility: hidden;\n}\n\n.bar-title {\n  position: relative;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--_shell-page-header-background, var(--color-background-primary));\n}\n\n.bar-title::after {\n  content: '';\n  position: absolute;\n  inset: auto var(--ds-bar-title-divider-inset, var(--dimension-space-200)) 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.bar-title--divider-hidden::after {\n  display: none;\n}\n\n.bar-title__inner {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n.bar-title__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n  gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.bar-title__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n  flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n  display: block;\n  width: 100%;\n  min-width: 0;\n}\n\n.bar-title__heading {\n  display: block;\n  width: auto;\n  min-width: 0;\n  user-select: none;\n}\n\n.bar-title__divider {\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-250);\n  margin-inline-start: var(--dimension-space-100);\n  flex: 0 0 var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n  display: flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n  --ds-control-radius: var(--dimension-radius-half);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--ds-control-padding-inline);\n  border: none;\n  border-radius: var(--ds-control-radius);\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: default;\n  font-family: inherit;\n  user-select: none;\n}\n\n.bar-title__section-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n}\n\n.bar-title__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n}\n\n.bar-title__description {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n  height: var(--dimension-size-600);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n  inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n  flex: 1 1 auto;\n  height: 100%;\n  min-width: 0;\n  padding: 0;\n  gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n  height: 100%;\n  align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n  height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n  margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/map-cluster-marker.json

@@ -0,0 +1,263 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "map-cluster-marker",
+  "title": "MapClusterMarker",
+  "description": "Engine-independent map cluster button with compact count formatting and a hover or focus caption.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/map-cluster-marker",
+    "source": "src/wc/components/MapClusterMarker/MapClusterMarker.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Engine-independent map cluster button with compact count formatting and a hover or focus caption.",
+      "useWhen": [
+        "An application map needs one interactive marker to represent several nearby entities.",
+        "The map engine can mount a custom element and retain ownership of clustering, coordinates, anchoring, and camera behavior."
+      ],
+      "avoidWhen": [
+        "The marker represents one vehicle, asset, person, or travel group; use MapEntityMarker.",
+        "The count is a notification attached to another control; use Badge.",
+        "The component would be asked to calculate clusters or own geographic and selected-entity business state."
+      ],
+      "alternatives": [
+        {
+          "when": "One map entity needs operating state, heading, and stale treatment.",
+          "component": "component:ds-map-entity-marker",
+          "reason": "MapEntityMarker owns single-entity marker semantics and geometry."
+        },
+        {
+          "when": "A count supplements another non-map control.",
+          "component": "component:ds-badge",
+          "reason": "Badge owns compact notification and counter indicators."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-map-entity-marker",
+        "component:ds-text"
+      ],
+      "accessibility": [
+        "The component renders a native button and label is its accessible action name. Prefer a label that includes the full count and outcome, such as ‘Zoom to 24 vehicles’.",
+        "Caption is a supplemental visual identifier and is hidden from assistive technology to avoid duplicating label.",
+        "Keyboard focus reveals the same caption as hover and uses the shared visible focus ring.",
+        "The compact displayed count does not replace the full count in label."
+      ],
+      "states": [
+        "count is rounded to a non-negative whole number and compacts with a k suffix at one thousand and above.",
+        "dimmed is visual de-emphasis only. The map owner decides when selection context should dim cluster peers and keeps every cluster operable. A dimmed cluster returns to full opacity while hovered or keyboard-focused so its revealed caption remains legible.",
+        "Activation emits dsClick without calculating a cluster expansion or changing camera state internally."
+      ],
+      "responsiveBehavior": [
+        "Marker height and minimum width stay fixed across breakpoints so map-engine anchors remain stable; width grows only for the compact count.",
+        "The map owner controls collision handling, overlays, and viewport-aware caption placement."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "A map engine that accepts an Element for a custom marker or div icon can mount ds-map-cluster-marker directly.",
+          "Listen for dsClick and keep cluster membership, expansion zoom, z-index, coordinates, and camera movement in application state."
+        ],
+        "react": [
+          "Pass count as a number and handle dsClick through the generated event binding."
+        ],
+        "angular": [
+          "Bind count as a number and keep map-engine marker lifecycle in the owning map adapter."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MapClusterMarker/MapClusterMarker.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns stable map anchoring geometry and semantic cluster recipes; the map engine owns host placement and stacking.",
+        "protected": [
+          {
+            "properties": [
+              "height",
+              "min-width",
+              "padding",
+              "border-radius",
+              "background",
+              "color",
+              "opacity"
+            ],
+            "reason": "Cluster geometry, count legibility, interaction treatment, and de-emphasis are one accessible visual recipe.",
+            "props": [
+              "count",
+              "dimmed"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "caption": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "caption",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Short visible cluster identifier revealed on hover or keyboard focus."
+        },
+        "count": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "count",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Number of represented entities, compacted at one thousand and above."
+        },
+        "dimmed": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "dimmed",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "De-emphasizes this cluster when an owner-managed selection is active elsewhere."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false,
+          "description": "Accessible action label. Describe the cluster and what activation does."
+        }
+      },
+      "events": [
+        {
+          "name": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Fired when the cluster's native button is activated."
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>",
+          "description": "Moves keyboard focus to the cluster button."
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "caption": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "caption",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Short visible cluster identifier revealed on hover or keyboard focus."
+      },
+      "count": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "count",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Number of represented entities, compacted at one thousand and above."
+      },
+      "dimmed": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "dimmed",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "De-emphasizes this cluster when an owner-managed selection is active elsewhere."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false,
+        "description": "Accessible action label. Describe the cluster and what activation does."
+      }
+    },
+    "events": [
+      {
+        "name": "dsClick",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Fired when the cluster's native button is activated."
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>",
+        "description": "Moves keyboard focus to the cluster button."
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-map-cluster-marker",
+      "react": "DsMapClusterMarker",
+      "vue": "DsMapClusterMarker",
+      "angular": "DsMapClusterMarker"
+    },
+    "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-map-cluster-marker.js';",
+        "example": "<ds-map-cluster-marker></ds-map-cluster-marker>"
+      },
+      "react": {
+        "import": "import { DsMapClusterMarker } from '@ds-mo/ui/react';",
+        "example": "<DsMapClusterMarker />"
+      },
+      "vue": {
+        "import": "import { DsMapClusterMarker } from '@ds-mo/ui/vue';",
+        "example": "<DsMapClusterMarker />"
+      },
+      "angular": {
+        "import": "import { DsMapClusterMarker } from '@ds-mo/ui/angular/ds-map-cluster-marker';",
+        "example": "<ds-map-cluster-marker></ds-map-cluster-marker>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^8.1.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MapClusterMarker/MapClusterMarker.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/map-marker.css';\n\n:host {\n  --_map-marker-background: var(--color-entity-cluster-marker-background);\n  --_map-marker-foreground: var(--color-entity-cluster-marker-foreground);\n  --_map-marker-interaction-hover: var(--color-entity-cluster-marker-interaction-hover);\n  --_map-marker-interaction-pressed: var(--color-entity-cluster-marker-interaction-pressed);\n}\n\n.map-marker__button {\n  width: max-content;\n  padding-inline: 0;\n  border-radius: var(--dimension-radius-half);\n}\n\n.map-marker__button,\n.map-marker__caption {\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n  backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.map-cluster-marker__button--padded {\n  padding-inline: var(--dimension-space-100);\n}\n\n.map-cluster-marker__count {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  white-space: nowrap;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MapClusterMarker/MapClusterMarker.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nconst formatCount = (count: number): string => {\n  const normalizedCount = Math.max(0, Math.round(Number.isFinite(count) ? count : 0));\n  if (normalizedCount < 1000) return String(normalizedCount);\n  const compactCount = Math.round(normalizedCount / 100) / 10;\n  return `${Number.isInteger(compactCount) ? compactCount.toFixed(0) : compactCount.toFixed(1)}k`;\n};\n\n@Component({\n  tag: 'ds-map-cluster-marker',\n  styleUrl: 'MapClusterMarker.css',\n  scoped: true,\n})\nexport class MapClusterMarker {\n  /** Accessible action label. Describe the cluster and what activation does. */\n  @Prop() label!: string;\n\n  /** Short visible cluster identifier revealed on hover or keyboard focus. */\n  @Prop() caption: string = '';\n\n  /** Number of represented entities, compacted at one thousand and above. */\n  @Prop() count: number = 0;\n\n  /** De-emphasizes this cluster when an owner-managed selection is active elsewhere. */\n  @Prop({ reflect: true }) dimmed: boolean = false;\n\n  /** Fired when the cluster's native button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl?: HTMLButtonElement;\n\n  /** Moves keyboard focus to the cluster button. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const caption = this.caption.trim();\n    const countLabel = formatCount(this.count);\n\n    return (\n      <Host class={{ 'map-cluster-marker': true, 'map-marker--dimmed': this.dimmed }}>\n        <button\n          ref={element => (this.buttonEl = element)}\n          type=\"button\"\n          class={{\n            'map-marker__button': true,\n            'map-cluster-marker__button--padded': countLabel.length > 1,\n            'ds-focus-ring': true,\n          }}\n          aria-label={this.label}\n          onClick={this.handleClick}\n        >\n          <ds-text\n            class=\"map-cluster-marker__count\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            emphasis\n          >\n            {countLabel}\n          </ds-text>\n        </button>\n        {caption && (\n          <ds-text\n            class=\"map-marker__caption\"\n            as=\"span\"\n            variant=\"text-caption\"\n            color=\"inherit\"\n            aria-hidden=\"true\"\n          >\n            {caption}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/mcp-data/registry/map-entity-marker.json

@@ -0,0 +1,321 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "map-entity-marker",
+  "title": "MapEntityMarker",
+  "description": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, heading, stale treatment, and a hover or focus caption.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@ds-mo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/compomo/?path=/story/map-entity-marker",
+    "source": "src/wc/components/MapEntityMarker/MapEntityMarker.tsx",
+    "intentStatus": "complete",
+    "intent": {
+      "audience": "general",
+      "status": "experimental",
+      "summary": "Engine-independent map marker button for a vehicle, asset, person, or travel group with operating-state color, heading, stale treatment, and a hover or focus caption.",
+      "useWhen": [
+        "An application map needs a consistent interactive marker for one entity.",
+        "The map engine can mount a custom element and retain ownership of coordinates, anchoring, and camera behavior."
+      ],
+      "avoidWhen": [
+        "Several nearby entities must be represented as one count; use MapClusterMarker.",
+        "The content is a legend item or non-interactive status swatch.",
+        "The component would be asked to own geographic coordinates, clustering, map-engine adapters, or selected-entity business state."
+      ],
+      "alternatives": [
+        {
+          "when": "Several nearby entities are represented by a compact count.",
+          "component": "component:ds-map-cluster-marker",
+          "reason": "MapClusterMarker owns cluster count formatting and cluster interaction geometry."
+        }
+      ],
+      "commonlyComposedWith": [
+        "component:ds-map-cluster-marker",
+        "component:ds-icon"
+      ],
+      "accessibility": [
+        "The component renders a native button and label is its accessible action name. Prefer an action-oriented label such as ‘Open vehicle 412’.",
+        "Caption is a supplemental visual identifier and is hidden from assistive technology to avoid duplicating label.",
+        "Keyboard focus reveals the same caption as hover and uses the shared visible focus ring.",
+        "State and stale meaning must be present in nearby map legend or application detail content; do not rely on marker color alone.",
+        "The stale outline remains differentiated by a dashed border in forced-colors mode."
+      ],
+      "states": [
+        "state selects the semantic operating-state color. Use stale as a standalone state only when no last-known operating state is available.",
+        "stale adds a dashed outline while preserving state, matching last-known map data.",
+        "immobilized always renders the upright MapKey glyph instead of the entity icon so the state is identifiable without interpreting heading.",
+        "heading rotates only MapEntityTravelGroup and MapEntityVehicle glyphs and is normalized to a clockwise value from 0 through 359 degrees. Immobilized, asset, person, and other glyphs remain upright.",
+        "dimmed is visual de-emphasis only. The map owner decides when selection context should dim peer markers and keeps every marker operable. A dimmed marker returns to full opacity while hovered or keyboard-focused so its revealed caption remains legible.",
+        "Activation emits dsClick without changing application selection internally."
+      ],
+      "responsiveBehavior": [
+        "Marker geometry stays fixed across breakpoints so map-engine anchors remain stable.",
+        "The map owner controls collision handling, overlays, and viewport-aware caption placement."
+      ],
+      "frameworkCaveats": {
+        "customElements": [
+          "A map engine that accepts an Element for a custom marker or div icon can mount ds-map-entity-marker directly.",
+          "Listen for dsClick and keep selected entity, z-index, coordinates, and camera movement in application state."
+        ],
+        "react": [
+          "Pass numeric heading as a property and handle dsClick through the generated event binding."
+        ],
+        "angular": [
+          "Bind heading as a number and keep map-engine marker lifecycle in the owning map adapter."
+        ]
+      },
+      "references": [
+        {
+          "label": "Storybook examples",
+          "path": "src/wc/components/MapEntityMarker/MapEntityMarker.stories.ts"
+        }
+      ],
+      "styling": {
+        "rationale": "The component owns stable map anchoring geometry and semantic marker recipes; the map engine owns host placement and stacking.",
+        "protected": [
+          {
+            "properties": [
+              "width",
+              "height",
+              "min-width",
+              "padding",
+              "border",
+              "border-radius",
+              "background",
+              "color",
+              "opacity"
+            ],
+            "reason": "Marker geometry, operating-state colors, stale distinction, and de-emphasis are one accessible visual recipe.",
+            "props": [
+              "state",
+              "stale",
+              "dimmed"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "caption": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "caption",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Short visible identifier revealed on hover or keyboard focus."
+        },
+        "dimmed": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "dimmed",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "De-emphasizes this marker when an owner-managed selection is active elsewhere."
+        },
+        "heading": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "heading",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Clockwise map heading for travel-group and vehicle icons. Values are normalized to 0–359."
+        },
+        "icon": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "icon",
+          "default": "'MapEntityTravelGroup'",
+          "required": false,
+          "mutable": false,
+          "description": "Canonical IcoMo icon name for the represented map entity. Immobilized state uses MapKey."
+        },
+        "label": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "label",
+          "required": true,
+          "mutable": false,
+          "description": "Accessible action label. Describe what activating the marker opens."
+        },
+        "stale": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "stale",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Adds the stale-data outline while preserving the last known operating state."
+        },
+        "state": {
+          "type": "MapEntityMarkerState",
+          "resolvedType": "\"idling\" | \"immobilized\" | \"in-motion\" | \"stale\" | \"stationary\"",
+          "attribute": "state",
+          "default": "'in-motion'",
+          "required": false,
+          "mutable": false,
+          "description": "Semantic operating state that selects the marker background."
+        }
+      },
+      "events": [
+        {
+          "name": "dsClick",
+          "detail": "MouseEvent",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "description": "Fired when the marker's native button is activated."
+        }
+      ],
+      "methods": [
+        {
+          "name": "setFocus",
+          "signature": "setFocus() => Promise<void>",
+          "description": "Moves keyboard focus to the marker button."
+        }
+      ],
+      "slots": []
+    },
+    "props": {
+      "caption": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "caption",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Short visible identifier revealed on hover or keyboard focus."
+      },
+      "dimmed": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "dimmed",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "De-emphasizes this marker when an owner-managed selection is active elsewhere."
+      },
+      "heading": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "heading",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Clockwise map heading for travel-group and vehicle icons. Values are normalized to 0–359."
+      },
+      "icon": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "icon",
+        "default": "'MapEntityTravelGroup'",
+        "required": false,
+        "mutable": false,
+        "description": "Canonical IcoMo icon name for the represented map entity. Immobilized state uses MapKey."
+      },
+      "label": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "label",
+        "required": true,
+        "mutable": false,
+        "description": "Accessible action label. Describe what activating the marker opens."
+      },
+      "stale": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "stale",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Adds the stale-data outline while preserving the last known operating state."
+      },
+      "state": {
+        "type": "MapEntityMarkerState",
+        "resolvedType": "\"idling\" | \"immobilized\" | \"in-motion\" | \"stale\" | \"stationary\"",
+        "attribute": "state",
+        "default": "'in-motion'",
+        "required": false,
+        "mutable": false,
+        "description": "Semantic operating state that selects the marker background."
+      }
+    },
+    "events": [
+      {
+        "name": "dsClick",
+        "detail": "MouseEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "description": "Fired when the marker's native button is activated."
+      }
+    ],
+    "methods": [
+      {
+        "name": "setFocus",
+        "signature": "setFocus() => Promise<void>",
+        "description": "Moves keyboard focus to the marker button."
+      }
+    ],
+    "slots": [],
+    "exports": {
+      "customElement": "ds-map-entity-marker",
+      "react": "DsMapEntityMarker",
+      "vue": "DsMapEntityMarker",
+      "angular": "DsMapEntityMarker"
+    },
+    "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-map-entity-marker.js';",
+        "example": "<ds-map-entity-marker></ds-map-entity-marker>"
+      },
+      "react": {
+        "import": "import { DsMapEntityMarker } from '@ds-mo/ui/react';",
+        "example": "<DsMapEntityMarker />"
+      },
+      "vue": {
+        "import": "import { DsMapEntityMarker } from '@ds-mo/ui/vue';",
+        "example": "<DsMapEntityMarker />"
+      },
+      "angular": {
+        "import": "import { DsMapEntityMarker } from '@ds-mo/ui/angular/ds-map-entity-marker';",
+        "example": "<ds-map-entity-marker></ds-map-entity-marker>"
+      },
+      "peerDependencies": {
+        "required": [
+          "@ds-mo/tokens ^6.5.1",
+          "@ds-mo/icons ^8.1.0"
+        ],
+        "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
+      }
+    }
+  },
+  "dependencies": [
+    "@ds-mo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "icon",
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/wc/components/MapEntityMarker/MapEntityMarker.css",
+      "content": "@import '../../utils/focus-ring.css';\n@import '../../utils/map-marker.css';\n\n:host([state='in-motion']) {\n  --_map-marker-background: var(--color-entity-marker-background-in-motion);\n}\n\n:host([state='idling']) {\n  --_map-marker-background: var(--color-entity-marker-background-idling);\n}\n\n:host([state='stationary']) {\n  --_map-marker-background: var(--color-entity-marker-background-stationary);\n}\n\n:host([state='immobilized']) {\n  --_map-marker-background: var(--color-entity-marker-background-immobilized);\n}\n\n:host([state='stale']) {\n  --_map-marker-background: var(--color-entity-marker-background-stale);\n}\n\n.map-marker__button {\n  width: var(--dimension-size-300);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.map-entity-marker--stale) .map-marker__button::after {\n  display: none;\n}\n\n.map-entity-marker__stale-outline {\n  position: absolute;\n  z-index: 3;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n  pointer-events: none;\n  transform: rotate(-90deg);\n  fill: none;\n  stroke: currentcolor;\n  stroke-width: 1;\n  stroke-linecap: butt;\n}\n\n.map-entity-marker__glyph {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  transform: rotate(var(--ds-map-entity-marker-heading));\n}\n\n@media (forced-colors: active) {\n  :host(.map-entity-marker--stale) .map-marker__button::after {\n    display: block;\n    outline-style: dashed;\n  }\n\n  .map-entity-marker__stale-outline {\n    display: none;\n  }\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/wc/components/MapEntityMarker/MapEntityMarker.tsx",
+      "content": "import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type MapEntityMarkerState = 'in-motion' | 'idling' | 'stationary' | 'immobilized' | 'stale';\n\nconst normalizeHeading = (heading: number): number => {\n  if (!Number.isFinite(heading)) return 0;\n  return ((heading % 360) + 360) % 360;\n};\n\nconst HEADING_ICONS = new Set(['MapEntityTravelGroup', 'MapEntityVehicle']);\n\nconst STALE_OUTLINE_CENTER = 8;\nconst STALE_OUTLINE_RADIUS = 6.5;\nconst STALE_OUTLINE_SEGMENT_ANGLE = 45;\nconst STALE_OUTLINE_HALF_GAP_ANGLE = 6;\n\nconst staleOutlinePoint = (angle: number): [number, number] => {\n  const radians = (angle * Math.PI) / 180;\n  return [\n    STALE_OUTLINE_CENTER + STALE_OUTLINE_RADIUS * Math.cos(radians),\n    STALE_OUTLINE_CENTER + STALE_OUTLINE_RADIUS * Math.sin(radians),\n  ];\n};\n\nconst STALE_OUTLINE_PATH = Array.from({ length: 8 }, (_, index) => {\n  const segmentStart = index * STALE_OUTLINE_SEGMENT_ANGLE + STALE_OUTLINE_HALF_GAP_ANGLE;\n  const segmentEnd = (index + 1) * STALE_OUTLINE_SEGMENT_ANGLE - STALE_OUTLINE_HALF_GAP_ANGLE;\n  const [startX, startY] = staleOutlinePoint(segmentStart);\n  const [endX, endY] = staleOutlinePoint(segmentEnd);\n  return `M ${startX.toFixed(3)} ${startY.toFixed(3)} A ${STALE_OUTLINE_RADIUS} ${STALE_OUTLINE_RADIUS} 0 0 1 ${endX.toFixed(3)} ${endY.toFixed(3)}`;\n}).join(' ');\n\n@Component({\n  tag: 'ds-map-entity-marker',\n  styleUrl: 'MapEntityMarker.css',\n  scoped: true,\n})\nexport class MapEntityMarker {\n  /** Accessible action label. Describe what activating the marker opens. */\n  @Prop() label!: string;\n\n  /** Short visible identifier revealed on hover or keyboard focus. */\n  @Prop() caption: string = '';\n\n  /** Canonical IcoMo icon name for the represented map entity. Immobilized state uses MapKey. */\n  @Prop() icon: string = 'MapEntityTravelGroup';\n\n  /** Semantic operating state that selects the marker background. */\n  @Prop({ reflect: true }) state: MapEntityMarkerState = 'in-motion';\n\n  /** Adds the stale-data outline while preserving the last known operating state. */\n  @Prop({ reflect: true }) stale: boolean = false;\n\n  /** Clockwise map heading for travel-group and vehicle icons. Values are normalized to 0–359. */\n  @Prop() heading: number = 0;\n\n  /** De-emphasizes this marker when an owner-managed selection is active elsewhere. */\n  @Prop({ reflect: true }) dimmed: boolean = false;\n\n  /** Fired when the marker's native button is activated. */\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl?: HTMLButtonElement;\n\n  /** Moves keyboard focus to the marker button. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    this.dsClick.emit(event);\n  };\n\n  render() {\n    const caption = this.caption.trim();\n    const markerIsStale = this.stale || this.state === 'stale';\n    const markerIcon = this.state === 'immobilized' ? 'MapKey' : this.icon;\n    const heading = HEADING_ICONS.has(markerIcon) ? normalizeHeading(this.heading) : 0;\n\n    return (\n      <Host\n        class={{\n          'map-entity-marker': true,\n          'map-marker--dimmed': this.dimmed,\n          'map-entity-marker--stale': markerIsStale,\n        }}\n      >\n        <button\n          ref={element => (this.buttonEl = element)}\n          type=\"button\"\n          class=\"map-marker__button ds-focus-ring\"\n          aria-label={this.label}\n          onClick={this.handleClick}\n        >\n          <span\n            class=\"map-entity-marker__glyph\"\n            style={{ '--ds-map-entity-marker-heading': `${heading}deg` }}\n            aria-hidden=\"true\"\n          >\n            <ds-icon name={markerIcon} size=\"sm\" color=\"inherit\"></ds-icon>\n          </span>\n          {markerIsStale && (\n            // eslint-disable-next-line compomo/prefer-ds-icon -- The stale ring is a component-owned geometric primitive with eight exact equal arcs.\n            <svg class=\"map-entity-marker__stale-outline\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n              <path d={STALE_OUTLINE_PATH}></path>\n            </svg>\n          )}\n        </button>\n        {caption && (\n          <ds-text\n            class=\"map-marker__caption\"\n            as=\"span\"\n            variant=\"text-caption\"\n            color=\"inherit\"\n            aria-hidden=\"true\"\n          >\n            {caption}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}