@vmz/ui 0.3.4 → 0.3.6

package/src/components/FormItem.vmz

@@ -1,79 +1,79 @@
-<template>
-    <div data-vmz-ui="form-item" :data-required="requiredAttr" :data-invalid="invalidAttr" class="vmz-ui-form-item">
-        <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
-            <span>
-                {{ label }}
-            </span>
-            <span v-if="required" aria-hidden="true" class="vmz-ui-form-item__required">
-                *
-            </span>
-        </label>
-        <div class="vmz-ui-form-item__control">
-            <slot />
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-form-item__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-form-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-form-item__label {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.25rem;
-    font: inherit;
-    font-weight: 600;
-}
-
-.vmz-ui-form-item__required {
-    color: var(--vmz-status-danger-accent);
-    font-weight: 700;
-}
-
-.vmz-ui-form-item__control {
-    min-width: 0;
-}
-
-.vmz-ui-form-item__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-form-item__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-
-.vmz-ui-form-item[data-invalid="true"] .vmz-ui-form-item__control :where(input, select, textarea) {
-    border-color: var(--vmz-status-danger-accent);
-}
-</style>
-<script client>
-/**
- * VMZ UI — FormItem.
- * Label / description / error shell for slotted controls; parent owns validation strings.
- */
-export default class FormItem {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    public required: boolean = false;
-    public requiredAttr: string = "false";
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-form-item";
-    public descriptionId: string = "vmz-form-item-desc";
-    public errorId: string = "vmz-form-item-err";
-}
-</script>
+<template>
+    <div data-vmz-ui="form-item" :data-required="requiredAttr" :data-invalid="invalidAttr" class="vmz-ui-form-item">
+        <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
+            <span>
+                {{ label }}
+            </span>
+            <span v-if="required" aria-hidden="true" class="vmz-ui-form-item__required">
+                *
+            </span>
+        </label>
+        <div class="vmz-ui-form-item__control">
+            <slot />
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-form-item__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-width: 28rem;
+}
+
+.vmz-ui-form-item__label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    font: inherit;
+    font-weight: 600;
+}
+
+.vmz-ui-form-item__required {
+    color: var(--vmz-status-danger-accent);
+    font-weight: 700;
+}
+
+.vmz-ui-form-item__control {
+    min-width: 0;
+}
+
+.vmz-ui-form-item__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+}
+
+.vmz-ui-form-item__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+}
+
+.vmz-ui-form-item[data-invalid="true"] .vmz-ui-form-item__control :where(input, select, textarea) {
+    border-color: var(--vmz-status-danger-accent);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — FormItem.
+ * Label / description / error shell for slotted controls; parent owns validation strings.
+ */
+export default class FormItem {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public required: boolean = false;
+    public requiredAttr: string = "false";
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-form-item";
+    public descriptionId: string = "vmz-form-item-desc";
+    public errorId: string = "vmz-form-item-err";
+}
+</script>

package/src/components/Link.vmz

@@ -1,5 +1,5 @@
 <template>
-    <a data-vmz-ui="link" :href="href" :target="target" :rel="rel" class="vmz-ui-link">
+    <a data-vmz-ui="link" :data-variant="variant" :href="href" :target="target" :rel="rel" class="vmz-ui-link">
         <slot />
     </a>
 </template>
@@ -9,13 +9,19 @@
     font-weight: 600;
     color: var(--vmz-action-primary-background);
     text-decoration: underline;
-    text-underline-offset: 0.15em;
+    text-underline-offset: 0.2em;
     text-decoration-thickness: 1px;
+    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
     outline: none;
+    border-radius: var(--vmz-radius-sm, 4px);
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        text-decoration-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-link:hover {
     color: var(--vmz-action-primary-hover);
+    text-decoration-color: currentColor;
 }
 
 .vmz-ui-link:active {
@@ -23,8 +29,30 @@
 }
 
 .vmz-ui-link:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-    border-radius: var(--vmz-radius-md, 6px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+/* Quiet inline link: neutral ink, underline appears only on intent. */
+.vmz-ui-link[data-variant="muted"] {
+    color: var(--vmz-text-steel);
+    text-decoration-color: transparent;
+}
+
+.vmz-ui-link[data-variant="muted"]:hover {
+    color: var(--vmz-action-primary-background);
+    text-decoration-color: currentColor;
+}
+
+/* Navigation link: chrome, not prose — underline is the hover affordance. */
+.vmz-ui-link[data-variant="nav"] {
+    font-weight: 500;
+    text-decoration: none;
+    text-decoration-color: transparent;
+}
+
+.vmz-ui-link[data-variant="nav"]:hover {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
 }
 </style>
 <script client>
@@ -37,5 +65,7 @@ export default class Link {
     public href: string = "#";
     public target: string = "";
     public rel: string = "";
+    /** `default` inline prose link · `muted` quiet inline link · `nav` chrome link. */
+    public variant: string = "default";
 }
 </script>

package/src/components/List.vmz

@@ -1,102 +1,102 @@
-<template>
-    <div data-vmz-ui="list" class="vmz-ui-list">
-        <p v-if="label" :id="labelId" class="vmz-ui-list__label">
-            {{ label }}
-        </p>
-        <ul role="listbox" :aria-labelledby="labelId" :aria-label="label" @click="onListClick" :onKeyDown="onListKeyDown" class="vmz-ui-list__items">
-            <li v-for="item in items" :key="item.id" role="option" :id="item.id" :data-vmz-list-item="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-list__item">
-                {{ item.title }}
-            </li>
-        </ul>
-    </div>
-</template>
-<style>
-.vmz-ui-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-list__label {
-    margin: 0;
-    font-weight: 600;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-list__items {
-    margin: 0;
-    padding: 0.25rem;
-    list-style: none;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-list__item {
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border-radius: var(--vmz-radius-md, 6px);
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-list__item[aria-selected="true"] {
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-}
-
-.vmz-ui-list__item:hover {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
-}
-
-.vmz-ui-list__item[aria-selected="true"]:hover {
-    background: var(--vmz-action-primary-hover);
-}
-
-.vmz-ui-list__item:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-</style>
-<script client>
-/**
- * VMZ UI — List (ordinary selectable list).
- * Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
- */
-export default class List {
-    public label: string = "List";
-    public labelId: string = "vmz-list-label";
-    public selected: string = "";
-    /** @type {{ id: string, title: string }[]} */
-    public items: {
-        id: string;
-        title: string;
-    }[] = [];
-    public onSelect: ((id: string) => void) | null = null;
-    select(id) {
-        if (typeof this.onSelect === "function") this.onSelect(id);
-    }
-    onListClick(ev) {
-        const t = ev && ev.target;
-        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-list-item]") : null;
-        const id =
-            el && typeof el.getAttribute === "function"
-                ? el.getAttribute("data-vmz-list-item")
-                : null;
-        if (id) this.select(id);
-    }
-    onListKeyDown(ev) {
-        if (!ev || !this.items?.length) return;
-        const ids = this.items.map((it) => it.id);
-        const idx = Math.max(0, ids.indexOf(this.selected));
-        let next = idx;
-        if (ev.key === "ArrowDown") next = (idx + 1) % ids.length;
-        else if (ev.key === "ArrowUp") next = (idx - 1 + ids.length) % ids.length;
-        else if (ev.key === "Home") next = 0;
-        else if (ev.key === "End") next = ids.length - 1;
-        else return;
-        ev.preventDefault();
-        this.select(ids[next]);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="list" class="vmz-ui-list">
+        <p v-if="label" :id="labelId" class="vmz-ui-list__label">
+            {{ label }}
+        </p>
+        <ul role="listbox" :aria-labelledby="labelId" :aria-label="label" @click="onListClick" :onKeyDown="onListKeyDown" class="vmz-ui-list__items">
+            <li v-for="item in items" :key="item.id" role="option" :id="item.id" :data-vmz-list-item="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-list__item">
+                {{ item.title }}
+            </li>
+        </ul>
+    </div>
+</template>
+<style>
+.vmz-ui-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-width: 28rem;
+}
+
+.vmz-ui-list__label {
+    margin: 0;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-list__items {
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-list__item {
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border-radius: var(--vmz-radius-md, 6px);
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-list__item[aria-selected="true"] {
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-list__item:hover {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
+}
+
+.vmz-ui-list__item[aria-selected="true"]:hover {
+    background: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-list__item:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — List (ordinary selectable list).
+ * Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
+ */
+export default class List {
+    public label: string = "List";
+    public labelId: string = "vmz-list-label";
+    public selected: string = "";
+    /** @type {{ id: string, title: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+    }[] = [];
+    public onSelect: ((id: string) => void) | null = null;
+    select(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+    onListClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-list-item]") : null;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-list-item")
+                : null;
+        if (id) this.select(id);
+    }
+    onListKeyDown(ev) {
+        if (!ev || !this.items?.length) return;
+        const ids = this.items.map((it) => it.id);
+        const idx = Math.max(0, ids.indexOf(this.selected));
+        let next = idx;
+        if (ev.key === "ArrowDown") next = (idx + 1) % ids.length;
+        else if (ev.key === "ArrowUp") next = (idx - 1 + ids.length) % ids.length;
+        else if (ev.key === "Home") next = 0;
+        else if (ev.key === "End") next = ids.length - 1;
+        else return;
+        ev.preventDefault();
+        this.select(ids[next]);
+    }
+}
+</script>