@vmz/ui-icons 0.3.10 → 0.3.12

package/README.md

@@ -12,7 +12,7 @@ semantic name  →  registry mark  →  <Icon name="tool.base64" />
 - Closed thin: semantic `name`, built-in registry, decorative vs labelled a11y, size density.
 - Still open: multi-surface path sets, locale-aware marks, icon-only Button integration depth.
 
-Registry kinds: `stroke` (outlined UI chrome and tools), `text-badge` (proprietary converter names such as `tool.base64` → `B64`). `feature.ssr` is intentionally absent — use title copy instead of an icon.
+Registry kinds: `stroke` (outlined UI chrome and tools), `text-badge` (proprietary converter names such as `tool.base64` → `B64`). `text-badge` is the documented exception to the own-SVG rule: the mark is a real text label rendered as content in a bounded chip, not a font glyph or emoji standing in for an unknown silhouette. `feature.ssr` is intentionally absent — use title copy instead of an icon.
 
 Verify:
 

package/dist/registry.d.ts

@@ -3,8 +3,4 @@ import type { IconDef } from './icon-types.ts';
 export type { IconDef, IconFillDef, IconMixedDef, IconMixedNode, IconStrokeDef, IconTextBadgeDef } from './icon-types.ts';
 export { DEFAULT_STROKE_WIDTH } from './icon-types.ts';
 export declare const REGISTRY: Record<string, IconDef>;
-export declare const LEGACY_ICON_ALIASES: Record<string, string>;
-export declare function resolveIconName(name: string): string;
 export declare function resolveIconDef(name: string): IconDef | null;
-/** @deprecated Prefer `resolveIconDef`. Returns primary path data for fill icons or first stroke path. */
-export declare function resolveIconPath(name: string): string;

package/dist/registry.js

@@ -5,71 +5,13 @@ export const REGISTRY = {
     ...STROKE_ICONS,
     ...TEXT_BADGE_ICONS,
 };
-export const LEGACY_ICON_ALIASES = {
-    check: 'action.check',
-    close: 'action.close',
-    search: 'action.search',
-    'chevron-down': 'action.chevron-down',
-    'chevron-right': 'action.chevron-right',
-    'chevron-up': 'action.chevron-up',
-    'chevron-left': 'action.chevron-left',
-    minus: 'action.minus',
-    more: 'action.more',
-    filter: 'action.filter',
-    calendar: 'action.calendar',
-    upload: 'action.upload',
-    download: 'action.download',
-    sort: 'action.sort',
-    external: 'action.external',
-    'arrow-right': 'action.arrow-right',
-    'arrow-left': 'action.arrow-left',
-    trash: 'action.trash',
-    edit: 'action.edit',
-    refresh: 'action.refresh',
-    history: 'action.history',
-    moon: 'action.moon',
-    sun: 'action.sun',
-    monitor: 'action.monitor',
-    info: 'status.info',
-    warning: 'status.warning',
-    success: 'status.success',
-    danger: 'status.danger',
-    menu: 'action.menu',
-    plus: 'action.plus',
-    home: 'nav.home',
-    language: 'nav.language',
-    copy: 'action.copy',
-    discount: 'tool.percentage',
-};
-export function resolveIconName(name) {
-    const key = String(name || '').trim();
-    if (!key)
-        return '';
-    if (LEGACY_ICON_ALIASES[key])
-        return LEGACY_ICON_ALIASES[key];
-    return key;
-}
 export function resolveIconDef(name) {
-    const key = resolveIconName(name);
+    const key = String(name || '').trim();
     if (!key)
         return null;
     const def = REGISTRY[key];
     if (!def) {
-        throw new Error(`@vmz/ui-icons: unknown icon name "${name}" (resolved: "${key}")`);
+        throw new Error(`@vmz/ui-icons: unknown icon name "${key}" — expected a dotted semantic name from the registry (action.*, nav.*, status.*, tool.*, feature.*)`);
     }
     return def;
 }
-/** @deprecated Prefer `resolveIconDef`. Returns primary path data for fill icons or first stroke path. */
-export function resolveIconPath(name) {
-    const def = resolveIconDef(name);
-    if (!def)
-        return '';
-    if (def.kind === 'fill')
-        return def.d;
-    if (def.kind === 'text-badge')
-        return '';
-    if (def.kind === 'stroke')
-        return def.paths[0] ?? '';
-    const pathNode = def.nodes.find((node) => node.tag === 'path');
-    return pathNode?.attrs.d ?? '';
-}

package/package.json

@@ -25,7 +25,7 @@
   "license": "MIT",
   "name": "@vmz/ui-icons",
   "peerDependencies": {
-    "@vmz/ui": "0.3.10"
+    "@vmz/ui": "0.3.12"
   },
   "publishConfig": {
     "access": "public"
@@ -39,5 +39,5 @@
     "build": "tsc -p tsconfig.json"
   },
   "type": "module",
-  "version": "0.3.10"
+  "version": "0.3.12"
 }

package/src/Icon.vmz

@@ -1,5 +1,5 @@
 <template>
-    <span data-vmz-ui="icon" :data-icon="name" :data-size="size" :role="roleAttr" :aria-hidden="hiddenAttr" :aria-label="labelAttr" class="vmz-ui-icon">
+    <span data-vmz-ui="icon" :data-icon="name" :data-size="size" :role="roleAttr()" :aria-hidden="hiddenAttr()" :aria-label="labelAttr()" class="vmz-ui-icon">
         <span v-if="isTextBadge()" class="vmz-ui-icon__badge">
             {{ badgeLabel() }}
         </span>
@@ -56,21 +56,15 @@
 }
 
 .vmz-ui-icon[data-size="sm"] {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 0.95rem;
+    font-size: 16px;
 }
 
 .vmz-ui-icon[data-size="md"] {
-    width: 2.35rem;
-    height: 2.35rem;
-    font-size: 1.15rem;
+    font-size: 20px;
 }
 
 .vmz-ui-icon[data-size="lg"] {
-    width: 2.85rem;
-    height: 2.85rem;
-    font-size: 1.35rem;
+    font-size: 24px;
 }
 </style>
 <script client>
@@ -84,17 +78,28 @@ export default class Icon {
     static __vmzHostBox = "contents";
     /** Semantic icon id, e.g. tool.base64 / action.search */
     public name: string = "";
-    /** sm | md | lg */
+    /** sm | md | lg → 16 / 20 / 24 px glyph */
     public size: string = "md";
     /** Accessible name; empty ⇒ decorative */
     public label: string = "";
+    /** Optional role override when labelled; defaults to `img`. */
+    public role: string = "";
 
-    roleAttr = "";
-    hiddenAttr = "true";
-    labelAttr = "";
+    labelText() {
+        return String(this.label || "").trim();
+    }
+
+    roleAttr() {
+        if (!this.labelText()) return "";
+        return String(this.role || "").trim() || "img";
+    }
 
-    onMount() {
-        this.syncA11y();
+    hiddenAttr() {
+        return this.labelText() ? "" : "true";
+    }
+
+    labelAttr() {
+        return this.labelText();
     }
 
     iconDef() {
@@ -219,18 +224,5 @@ export default class Icon {
                 strokeWidth: node.attrs["stroke-width"] ?? DEFAULT_STROKE_WIDTH,
             }));
     }
-
-    syncA11y() {
-        const labelled = String(this.label || "").trim();
-        if (labelled) {
-            this.roleAttr = "img";
-            this.hiddenAttr = "";
-            this.labelAttr = labelled;
-        } else {
-            this.roleAttr = "";
-            this.hiddenAttr = "true";
-            this.labelAttr = "";
-        }
-    }
 }
 </script>

package/src/registry.ts

@@ -1,5 +1,5 @@
 /** Shared icon registry for `@vmz/ui-icons` and optional app-level Icon shims. */
-import type { IconDef, IconFillDef } from './icon-types.ts';
+import type { IconDef } from './icon-types.ts';
 import { DEFAULT_STROKE_WIDTH } from './icon-types.ts';
 import { STROKE_ICONS } from './icons-stroke.ts';
 import { TEXT_BADGE_ICONS } from './icons-text-badge.ts';
@@ -12,67 +12,14 @@ export const REGISTRY: Record<string, IconDef> = {
     ...TEXT_BADGE_ICONS,
 };
 
-export const LEGACY_ICON_ALIASES: Record<string, string> = {
-    check: 'action.check',
-    close: 'action.close',
-    search: 'action.search',
-    'chevron-down': 'action.chevron-down',
-    'chevron-right': 'action.chevron-right',
-    'chevron-up': 'action.chevron-up',
-    'chevron-left': 'action.chevron-left',
-    minus: 'action.minus',
-    more: 'action.more',
-    filter: 'action.filter',
-    calendar: 'action.calendar',
-    upload: 'action.upload',
-    download: 'action.download',
-    sort: 'action.sort',
-    external: 'action.external',
-    'arrow-right': 'action.arrow-right',
-    'arrow-left': 'action.arrow-left',
-    trash: 'action.trash',
-    edit: 'action.edit',
-    refresh: 'action.refresh',
-    history: 'action.history',
-    moon: 'action.moon',
-    sun: 'action.sun',
-    monitor: 'action.monitor',
-    info: 'status.info',
-    warning: 'status.warning',
-    success: 'status.success',
-    danger: 'status.danger',
-    menu: 'action.menu',
-    plus: 'action.plus',
-    home: 'nav.home',
-    language: 'nav.language',
-    copy: 'action.copy',
-    discount: 'tool.percentage',
-};
-
-export function resolveIconName(name: string): string {
-    const key = String(name || '').trim();
-    if (!key) return '';
-    if (LEGACY_ICON_ALIASES[key]) return LEGACY_ICON_ALIASES[key];
-    return key;
-}
-
 export function resolveIconDef(name: string): IconDef | null {
-    const key = resolveIconName(name);
+    const key = String(name || '').trim();
     if (!key) return null;
     const def = REGISTRY[key];
     if (!def) {
-        throw new Error(`@vmz/ui-icons: unknown icon name "${name}" (resolved: "${key}")`);
+        throw new Error(
+            `@vmz/ui-icons: unknown icon name "${key}" — expected a dotted semantic name from the registry (action.*, nav.*, status.*, tool.*, feature.*)`,
+        );
     }
     return def;
 }
-
-/** @deprecated Prefer `resolveIconDef`. Returns primary path data for fill icons or first stroke path. */
-export function resolveIconPath(name: string): string {
-    const def = resolveIconDef(name);
-    if (!def) return '';
-    if (def.kind === 'fill') return def.d;
-    if (def.kind === 'text-badge') return '';
-    if (def.kind === 'stroke') return def.paths[0] ?? '';
-    const pathNode = def.nodes.find((node) => node.tag === 'path');
-    return pathNode?.attrs.d ?? '';
-}