@ds-mo/ui 14.14.0 → 14.15.0

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@ds-mo/ui.svg)](https://www.npmjs.com/package/@ds-mo/ui)
 
 Framework-neutral Stencil web components styled with TokoMo tokens. CompoMo
-ships custom elements plus generated Angular and React adapters.
+ships custom elements plus generated Angular, React, and Vue adapters.
 
 ## Install
 
@@ -43,6 +43,14 @@ React applications use the generated wrappers:
 import { DsButtonFilled } from '@ds-mo/ui/react';
 ```
 
+Vue applications use the generated wrappers:
+
+```vue
+<script setup lang="ts">
+import { DsButtonFilled } from '@ds-mo/ui/vue';
+</script>
+```
+
 Install `@ds-mo/icons` in the consuming application. `ds-icon` resolves exact
 canonical IcoMo export names at application bundle time.
 
@@ -59,7 +67,7 @@ There is no global component CSS bundle; styles ship with each custom element.
 ## Agent recipes
 
 The package includes the local `compomo-mcp` executable with generated
-component metadata and executable Custom Elements, Angular, and React
+component metadata and executable Custom Elements, Angular, React, and Vue
 composition recipes.
 
 ```toml

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.14.0","components":73,"digest":"daf2a97bd6ad6aa588edf4d0a8cdcac6a08fa2a837acaf48484a8dd522a9b693","completedAt":"2026-08-23T20:33:08.588Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.15.0","components":73,"digest":"91715032d14b2768e3d5ac09820d7fe37f7300c06f6d7e175003a6b192d93fd2","completedAt":"2026-08-24T15:37:42.819Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.14.0",
+  "packageVersion": "14.15.0",
   "kind": "patterns",
   "entries": [
     {
@@ -120,6 +120,12 @@
             "docs/framework-integration.md"
           ]
         },
+        "vue": {
+          "status": "planned",
+          "references": [
+            "docs/framework-integration.md"
+          ]
+        },
         "angular": {
           "status": "planned",
           "references": [
@@ -274,6 +280,12 @@
             "docs/framework-integration.md"
           ]
         },
+        "vue": {
+          "status": "planned",
+          "references": [
+            "docs/framework-integration.md"
+          ]
+        },
         "angular": {
           "status": "verified",
           "recipes": [
@@ -401,6 +413,12 @@
             "docs/framework-integration.md"
           ]
         },
+        "vue": {
+          "status": "planned",
+          "references": [
+            "docs/framework-integration.md"
+          ]
+        },
         "angular": {
           "status": "planned",
           "references": [
@@ -528,6 +546,31 @@
             "src/wc/components/Menu/Menu.stories.ts"
           ]
         },
+        "vue": {
+          "status": "verified",
+          "recipes": [
+            {
+              "id": "selected-view-menu",
+              "title": "Selected view menu",
+              "summary": "A controlled Vue composition using generated ButtonUnfilled and Menu wrappers.",
+              "files": [
+                {
+                  "path": "ViewMenu.vue",
+                  "language": "vue",
+                  "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLDsButtonUnfilledElement, MenuItemData } from '@ds-mo/ui'\nimport { DsButtonUnfilled, DsMenu } from '@ds-mo/ui/vue'\n\nconst choices: MenuItemData[] = [\n  { label: 'Overview', value: 'overview' },\n  { label: 'Map', value: 'map' },\n  { label: 'Timeline', value: 'timeline' },\n]\n\nconst selectedValue = ref('overview')\nconst open = ref(false)\nconst initialFocusVisible = ref(false)\nconst selected = computed(() => choices.find(item => item.value === selectedValue.value) ?? choices[0])\nconst items = computed(() => choices.map(item => ({ ...item, isSelected: item.value === selectedValue.value })))\n\nfunction focusTrigger() {\n  requestAnimationFrame(() => {\n    const trigger = document.querySelector<HTMLDsButtonUnfilledElement>('#view-menu-trigger')\n    trigger?.setFocus()\n  })\n}\n\nfunction toggleMenu(event: CustomEvent<MouseEvent>) {\n  initialFocusVisible.value = event.detail.detail === 0\n  open.value = !open.value\n}\n\nfunction selectView(event: CustomEvent<MenuItemData>) {\n  selectedValue.value = event.detail.value ?? selectedValue.value\n  open.value = false\n  focusTrigger()\n}\n</script>\n\n<template>\n  <DsButtonUnfilled\n    id=\"view-menu-trigger\"\n    :label=\"`View · ${selected.label}`\"\n    has-menu\n    controls=\"view-menu\"\n    :expanded=\"open\"\n    @ds-click=\"toggleMenu\"\n  />\n  <DsMenu\n    id=\"view-menu\"\n    anchor-id=\"view-menu-trigger\"\n    menu-label=\"Choose view\"\n    :items=\"items\"\n    :open=\"open\"\n    :initial-focus-visible=\"initialFocusVisible\"\n    @ds-close=\"open = false\"\n    @ds-select=\"selectView\"\n  />\n</template>"
+                }
+              ],
+              "notes": [
+                "Use one Vue ref for both the trigger expanded prop and Menu open prop.",
+                "Keep the stable trigger and menu ids unique when rendering more than one composition."
+              ]
+            }
+          ],
+          "references": [
+            "docs/framework-integration.md",
+            "src/wc/components/Menu/Menu.stories.ts"
+          ]
+        },
         "angular": {
           "status": "verified",
           "recipes": [
@@ -674,6 +717,12 @@
             "docs/framework-integration.md"
           ]
         },
+        "vue": {
+          "status": "planned",
+          "references": [
+            "docs/framework-integration.md"
+          ]
+        },
         "angular": {
           "status": "verified",
           "recipes": [