@vmz/ui 0.1.16 → 0.1.17

package/contracts/token-requirements.v0.json

@@ -639,6 +639,45 @@
             ],
             "surfaces": ["WebSurface"],
             "contracts": ["hierarchy-rows", "parent-owned-expand", "parent-owned-selection", "keyboard-nav"]
+        },
+        "Segmented": {
+            "source": "src/components/Segmented.vmz",
+            "stableHint": "ui.Segmented",
+            "tokens": ["surface.mist", "surface.paper", "text.steel", "text.ink", "focus.ring"],
+            "surfaces": ["WebSurface"],
+            "contracts": ["parent-owned-value", "segment-press"]
+        },
+        "Dropdown": {
+            "source": "src/components/Dropdown.vmz",
+            "stableHint": "ui.Dropdown",
+            "tokens": ["line.default", "surface.paper", "surface.mist", "text.ink", "shadow.popup"],
+            "surfaces": ["WebSurface"],
+            "contracts": ["native-details-disclosure", "menu-links"]
+        },
+        "Collapse": {
+            "source": "src/components/Collapse.vmz",
+            "stableHint": "ui.Collapse",
+            "tokens": ["line.default", "surface.paper", "surface.mist", "text.steel"],
+            "surfaces": ["WebSurface"],
+            "contracts": ["native-details-panels", "independent-open"]
+        },
+        "Tag": {
+            "source": "src/components/Tag.vmz",
+            "stableHint": "ui.Tag",
+            "tokens": [
+                "line.default",
+                "surface.mist",
+                "surface.paper",
+                "text.steel",
+                "status.success.accent",
+                "status.success.foreground",
+                "status.warning.accent",
+                "status.warning.foreground",
+                "status.danger.accent",
+                "status.danger.foreground"
+            ],
+            "surfaces": ["WebSurface"],
+            "contracts": ["status-chip", "display-only"]
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",

package/src/components/Collapse.vmz

@@ -1,8 +1,12 @@
 <template>
   <div class="vmz-ui-collapse" data-vmz-ui="collapse">
-    <details v-for="item in items" :key="item.id">
-      <summary>{{ item.title }}</summary>
-      <div class="vmz-ui-collapse__body">{{ item.body }}</div>
+    <details
+      v-for="item in items"
+      :key="item.id"
+      :data-vmz-collapse-item="item.id"
+    >
+      <summary :data-vmz-collapse-trigger="item.id">{{ item.title }}</summary>
+      <div class="vmz-ui-collapse__body" :data-vmz-collapse-body="item.id">{{ item.body }}</div>
     </details>
   </div>
 </template>

package/src/components/Dropdown.vmz

@@ -1,8 +1,13 @@
 <template>
   <details class="vmz-ui-dropdown" data-vmz-ui="dropdown">
-    <summary>{{ label }}</summary>
-    <div class="vmz-ui-dropdown__menu">
-      <a v-for="item in items" :key="item.id" :href="item.href">{{ item.title }}</a>
+    <summary data-vmz-dropdown-trigger="1">{{ label }}</summary>
+    <div class="vmz-ui-dropdown__menu" data-vmz-dropdown-menu="1">
+      <a
+        v-for="item in items"
+        :key="item.id"
+        :href="item.href"
+        :data-vmz-dropdown-item="item.id"
+      >{{ item.title }}</a>
     </div>
   </details>
 </template>

package/src/components/Segmented.vmz

@@ -4,8 +4,9 @@
       v-for="opt in options"
       :key="opt.value"
       type="button"
+      :data-vmz-segment="opt.value"
       :aria-pressed="opt.value === value ? 'true' : 'false'"
-      @click="() => onPick(opt.value)"
+      @click="() => this.onPick(opt.value)"
     >{{ opt.label }}</button>
   </div>
 </template>

package/src/components/Tag.vmz

@@ -1,4 +1,11 @@
-<template><span class="vmz-ui-tag" data-vmz-ui="tag" :data-status="status||undefined"><slot /></span></template>
+<template>
+  <span
+    class="vmz-ui-tag"
+    data-vmz-ui="tag"
+    :data-status="status || undefined"
+    :data-vmz-tag-status="status || undefined"
+  ><slot /></span>
+</template>
 <style>
 .vmz-ui-tag{display:inline-flex;align-items:center;min-height:1.5rem;padding:0 .45rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-sm,2px);background:var(--vmz-surface-mist);color:var(--vmz-text-steel);font-size:.75rem;line-height:1}
 .vmz-ui-tag[data-status='success']{color:var(--vmz-status-success-foreground);background:color-mix(in srgb,var(--vmz-status-success-accent) 12%,var(--vmz-surface-paper));border-color:color-mix(in srgb,var(--vmz-status-success-accent) 45%,var(--vmz-line-default))}