@vmz/ui 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",
@@ -83,6 +83,14 @@
     "ui",
     "components"
   ],
+  "peerDependencies": {
+    "@vmz/ui-icons": "0.2.6"
+  },
+  "peerDependenciesMeta": {
+    "@vmz/ui-icons": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/components/Icon.vmz

@@ -1,7 +1,16 @@
 <template>
     <span data-vmz-ui="icon" :data-name="name" :data-size="size" :role='decorative ? "presentation" : "img"' :aria-hidden='decorative ? "true" : "false"' :aria-label='decorative ? "" : label' class="vmz-ui-icon">
-        <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true" class="vmz-ui-icon__svg">
-            <path fill="currentColor" :d="iconPath()" />
+        <span v-if="isTextBadge()" class="vmz-ui-icon__badge">
+            {{ badgeLabel() }}
+        </span>
+        <svg v-else viewBox="0 0 24 24" focusable="false" aria-hidden="true" class="vmz-ui-icon__svg">
+            <path v-if="hasExplicitPath()" fill="currentColor" :d="explicitPath()" />
+            <g v-else-if="isStroke()" fill="none" stroke="currentColor" :stroke-width="strokeWidth()" stroke-linecap="round" stroke-linejoin="round">
+                <path v-for="d in strokePaths()" :key="d" :d="d" />
+                <circle v-for="c in strokeCircles()" :key="circleKey(c)" :cx="c.cx" :cy="c.cy" :r="c.r" />
+                <circle v-for="dot in strokeDots()" :key="dotKey(dot)" :cx="dot.cx" :cy="dot.cy" :r="dot.r" fill="currentColor" stroke="none" />
+            </g>
+            <path v-else-if="isFill()" fill="currentColor" :fill-rule="fillRule()" :d="fillD()" />
         </svg>
     </span>
 </template>
@@ -30,36 +39,31 @@
     height: 1em;
     display: block;
 }
+.vmz-ui-icon__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 1.65em;
+    padding: 0.12em 0.22em;
+    border: 1.5px solid currentColor;
+    border-radius: 0.2em;
+    font-family: var(--vmz-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: 0.52em;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    text-align: center;
+    text-transform: uppercase;
+}
 </style>
 <script client>
+import { DEFAULT_STROKE_WIDTH, resolveIconDef } from "@vmz/ui-icons/registry";
+
 /**
- * VMZ UI Icon — shell for UI chrome and author-supplied glyphs.
- * Pass `pathD` for custom SVG paths, or `name` for the built-in chrome set.
- * Full semantic registries live in optional `@vmz/ui-icons`.
+ * VMZ UI Icon — chrome shell backed by `@vmz/ui-icons` registry.
+ * Pass `pathD` for author SVG path overrides; otherwise resolves `name` from registry.
  */
-const FALLBACK_PATH = "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z";
-
-const CHROME_PATHS = {
-    check: "M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z",
-    close: "M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z",
-    search: "M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z",
-    "chevron-down": "M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z",
-    "chevron-right": "M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z",
-    info: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z",
-    warning:
-        "M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z",
-    success: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z",
-    danger: "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z",
-    menu: "M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z",
-    plus: "M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z",
-};
-
-function resolveChromePath(name) {
-    const key = String(name || "").trim();
-    if (!key) return FALLBACK_PATH;
-    return CHROME_PATHS[key] || FALLBACK_PATH;
-}
-
 export default class Icon {
     static __vmzHostBox = "contents";
     public name: string = "info";
@@ -69,9 +73,82 @@ export default class Icon {
     /** Optional author SVG path override. When set, `name` is ignored for rendering. */
     public pathD: string = "";
 
-    iconPath() {
-        const explicit = String(this.pathD || "").trim();
-        return explicit || resolveChromePath(this.name);
+    hasExplicitPath() {
+        return Boolean(String(this.pathD || "").trim());
+    }
+
+    explicitPath() {
+        return String(this.pathD || "").trim();
+    }
+
+    iconDef() {
+        if (this.hasExplicitPath()) return null;
+        return resolveIconDef(this.name);
+    }
+
+    isStroke() {
+        const def = this.iconDef();
+        return def?.kind === "stroke";
+    }
+
+    isFill() {
+        const def = this.iconDef();
+        return def?.kind === "fill";
+    }
+
+    isTextBadge() {
+        const def = this.iconDef();
+        return def?.kind === "text-badge";
+    }
+
+    badgeLabel() {
+        const def = this.iconDef();
+        if (def?.kind !== "text-badge") return "";
+        return def.label;
+    }
+
+    strokeWidth() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return DEFAULT_STROKE_WIDTH;
+        return def.strokeWidth ?? DEFAULT_STROKE_WIDTH;
+    }
+
+    strokePaths() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.paths ?? [];
+    }
+
+    strokeCircles() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.circles ?? [];
+    }
+
+    strokeDots() {
+        const def = this.iconDef();
+        if (def?.kind !== "stroke") return [];
+        return def.dots ?? [];
+    }
+
+    circleKey(c) {
+        return `c-${c.cx}-${c.cy}-${c.r}`;
+    }
+
+    dotKey(dot) {
+        return `d-${dot.cx}-${dot.cy}-${dot.r}`;
+    }
+
+    fillD() {
+        const def = this.iconDef();
+        if (def?.kind !== "fill") return "";
+        return def.d;
+    }
+
+    fillRule() {
+        const def = this.iconDef();
+        if (def?.kind !== "fill" || !def.fillRule) return "";
+        return def.fillRule;
     }
 }
 </script>