@ds-mo/ui 15.1.1 → 15.3.0

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

@@ -191,8 +191,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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, bearing, and an optional dashed outline.",
+          "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.2",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "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, bearing, an optional dashed outline, 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, bearing, an optional dashed outline, 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.",
+        "Operating-state and outline meaning must be present in nearby map legend or application detail content; do not rely on marker color alone.",
+        "The optional dashed outline remains differentiated by a dashed border in forced-colors mode."
+      ],
+      "states": [
+        "Unknown represents unavailable current motion and uses the existing stale-background token. The application resolves stale telemetry to Unknown regardless of previous motion; a known Immobilized state takes precedence.",
+        "The dashed outline is an independent visual option. Unknown is solid unless the owner explicitly requests dashes.",
+        "immobilized always renders the upright MapKey glyph instead of the entity icon so the state is identifiable without interpreting bearing.",
+        "bearing 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 bearing as a property and handle dsClick through the generated event binding."
+        ],
+        "angular": [
+          "Bind bearing 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, outline distinction, and de-emphasis are one accessible visual recipe.",
+            "props": [
+              "state",
+              "dashed",
+              "dimmed"
+            ]
+          }
+        ],
+        "customProperties": []
+      }
+    },
+    "api": {
+      "props": {
+        "bearing": {
+          "type": "number",
+          "resolvedType": "number",
+          "attribute": "bearing",
+          "default": "0",
+          "required": false,
+          "mutable": false,
+          "description": "Clockwise map bearing for travel-group and vehicle icons. Values are normalized to 0–359."
+        },
+        "caption": {
+          "type": "string",
+          "resolvedType": "string",
+          "attribute": "caption",
+          "default": "''",
+          "required": false,
+          "mutable": false,
+          "description": "Short visible identifier revealed on hover or keyboard focus."
+        },
+        "dashed": {
+          "type": "boolean",
+          "resolvedType": "boolean",
+          "attribute": "dashed",
+          "default": "false",
+          "required": false,
+          "mutable": false,
+          "description": "Adds an optional dashed outline without changing the operating state."
+        },
+        "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."
+        },
+        "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."
+        },
+        "state": {
+          "type": "MapEntityMarkerState",
+          "resolvedType": "\"idling\" | \"immobilized\" | \"moving\" | \"stationary\" | \"unknown\"",
+          "attribute": "state",
+          "default": "'moving'",
+          "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": {
+      "bearing": {
+        "type": "number",
+        "resolvedType": "number",
+        "attribute": "bearing",
+        "default": "0",
+        "required": false,
+        "mutable": false,
+        "description": "Clockwise map bearing for travel-group and vehicle icons. Values are normalized to 0–359."
+      },
+      "caption": {
+        "type": "string",
+        "resolvedType": "string",
+        "attribute": "caption",
+        "default": "''",
+        "required": false,
+        "mutable": false,
+        "description": "Short visible identifier revealed on hover or keyboard focus."
+      },
+      "dashed": {
+        "type": "boolean",
+        "resolvedType": "boolean",
+        "attribute": "dashed",
+        "default": "false",
+        "required": false,
+        "mutable": false,
+        "description": "Adds an optional dashed outline without changing the operating state."
+      },
+      "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."
+      },
+      "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."
+      },
+      "state": {
+        "type": "MapEntityMarkerState",
+        "resolvedType": "\"idling\" | \"immobilized\" | \"moving\" | \"stationary\" | \"unknown\"",
+        "attribute": "state",
+        "default": "'moving'",
+        "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.2",
+          "@ds-mo/icons ^8.1.1"
+        ],
+        "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='moving']) {\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='unknown']) {\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--dashed) .map-marker__button::after {\n  display: none;\n}\n\n.map-entity-marker__dashed-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-bearing));\n}\n\n@media (forced-colors: active) {\n  :host(.map-entity-marker--dashed) .map-marker__button::after {\n    display: block;\n    outline-style: dashed;\n  }\n\n  .map-entity-marker__dashed-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 = 'moving' | 'idling' | 'stationary' | 'immobilized' | 'unknown';\n\nconst normalizeBearing = (bearing: number): number => {\n  if (!Number.isFinite(bearing)) return 0;\n  return ((bearing % 360) + 360) % 360;\n};\n\nconst BEARING_ICONS = new Set(['MapEntityTravelGroup', 'MapEntityVehicle']);\n\nconst DASHED_OUTLINE_CENTER = 8;\nconst DASHED_OUTLINE_RADIUS = 6.5;\nconst DASHED_OUTLINE_SEGMENT_ANGLE = 45;\nconst DASHED_OUTLINE_HALF_GAP_ANGLE = 6;\n\nconst dashedOutlinePoint = (angle: number): [number, number] => {\n  const radians = (angle * Math.PI) / 180;\n  return [\n    DASHED_OUTLINE_CENTER + DASHED_OUTLINE_RADIUS * Math.cos(radians),\n    DASHED_OUTLINE_CENTER + DASHED_OUTLINE_RADIUS * Math.sin(radians),\n  ];\n};\n\nconst DASHED_OUTLINE_PATH = Array.from({ length: 8 }, (_, index) => {\n  const segmentStart = index * DASHED_OUTLINE_SEGMENT_ANGLE + DASHED_OUTLINE_HALF_GAP_ANGLE;\n  const segmentEnd = (index + 1) * DASHED_OUTLINE_SEGMENT_ANGLE - DASHED_OUTLINE_HALF_GAP_ANGLE;\n  const [startX, startY] = dashedOutlinePoint(segmentStart);\n  const [endX, endY] = dashedOutlinePoint(segmentEnd);\n  return `M ${startX.toFixed(3)} ${startY.toFixed(3)} A ${DASHED_OUTLINE_RADIUS} ${DASHED_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 = 'moving';\n\n  /** Adds an optional dashed outline without changing the operating state. */\n  @Prop({ reflect: true }) dashed: boolean = false;\n\n  /** Clockwise map bearing for travel-group and vehicle icons. Values are normalized to 0–359. */\n  @Prop() bearing: 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 markerIcon = this.state === 'immobilized' ? 'MapKey' : this.icon;\n    const bearing = BEARING_ICONS.has(markerIcon) ? normalizeBearing(this.bearing) : 0;\n\n    return (\n      <Host\n        class={{\n          'map-entity-marker': true,\n          'map-marker--dimmed': this.dimmed,\n          'map-entity-marker--dashed': this.dashed,\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-bearing': `${bearing}deg` }}\n            aria-hidden=\"true\"\n          >\n            <ds-icon name={markerIcon} size=\"sm\" color=\"inherit\"></ds-icon>\n          </span>\n          {this.dashed && (\n            // eslint-disable-next-line compomo/prefer-ds-icon -- The dashed ring is a component-owned geometric primitive with eight exact equal arcs.\n            <svg class=\"map-entity-marker__dashed-outline\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n              <path d={DASHED_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"
+    }
+  ]
+}

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

@@ -138,8 +138,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

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

@@ -563,8 +563,8 @@
       "complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, items, sections.",
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/message-actions.json

@@ -167,8 +167,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }

package/dist/mcp-data/registry/message-bubble.json

@@ -127,8 +127,8 @@
       },
       "peerDependencies": {
         "required": [
-          "@ds-mo/tokens ^6.5.1",
-          "@ds-mo/icons ^8.1.0"
+          "@ds-mo/tokens ^6.5.2",
+          "@ds-mo/icons ^8.1.1"
         ],
         "frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
       }