@vmz/ui 0.3.6 → 0.3.8

package/src/components/Tree.vmz

@@ -1,191 +1,214 @@
-<template>
-    <div data-vmz-ui="tree" class="vmz-ui-tree">
-        <p v-if="label" :id="labelId" class="vmz-ui-tree__label">
-            {{ label }}
-        </p>
-        <ul role="tree" :aria-labelledby="labelId" :aria-label="label" @click="onTreeClick" :onKeyDown="onTreeKeyDown" class="vmz-ui-tree__items">
-            <li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="item.padStyle">
-                <button v-if="item.expandable" type="button" :data-vmz-tree-twist="item.id" :aria-label="item.twistLabel" tabindex="-1" class="vmz-ui-tree__twist">
-                    {{ item.expanded ? '−' : '+' }}
-                </button>
-                <span v-if="!item.expandable" aria-hidden="true" class="vmz-ui-tree__twist-spacer" />
-                <span :data-vmz-tree-title="item.id" class="vmz-ui-tree__title">
-                    {{ item.title }}
-                </span>
-            </li>
-        </ul>
-    </div>
-</template>
-<style>
-.vmz-ui-tree {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-tree__label {
-    margin: 0;
-    font-weight: 600;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-tree__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-tree__item {
-    display: flex;
-    align-items: center;
-    gap: 0.375rem;
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-    border-radius: var(--vmz-radius-md, 6px);
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-tree__item[aria-selected="true"] {
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-}
-
-.vmz-ui-tree__item:hover {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
-}
-
-.vmz-ui-tree__item[aria-selected="true"]:hover {
-    background: var(--vmz-action-primary-hover);
-}
-
-.vmz-ui-tree__item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-tree__twist {
-    flex: 0 0 auto;
-    width: 1.35rem;
-    height: 1.35rem;
-    padding: 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-mist);
-    color: inherit;
-    font: inherit;
-    font-weight: 700;
-    line-height: 1;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-tree__twist:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-tree__twist-spacer {
-    flex: 0 0 auto;
-    width: 1.35rem;
-}
-
-.vmz-ui-tree__title {
-    flex: 1 1 auto;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Tree (ordinary hierarchy).
- * Parent owns visible flat rows + selected + expand state.
- * Not virtualized / not DataGrid tree mode.
- */
-export default class Tree {
-    public label: string = "Tree";
-    public labelId: string = "vmz-tree-label";
-    public selected: string = "";
-    /**
-     * @type {{
-     *   id: string,
-     *   title: string,
-     *   depth: string,
-     *   expandable: boolean,
-     *   expanded: boolean,
-     *   expandedAttr: string,
-     *   twistLabel: string,
-     *   padStyle: string
-     * }[]}
-     */
-    public items: {
-        id: string;
-        title: string;
-        depth: string;
-        expandable: boolean;
-        expanded: boolean;
-        expandedAttr: string;
-        twistLabel: string;
-        padStyle: string;
-    }[] = [];
-    public onSelect: ((id: string) => void) | null = null;
-    public onToggle: ((id: string) => void) | null = null;
-    select(id) {
-        if (typeof this.onSelect === "function") this.onSelect(id);
-    }
-    toggle(id) {
-        if (typeof this.onToggle === "function") this.onToggle(id);
-    }
-    onTreeClick(ev) {
-        const t = ev && ev.target;
-        const twist =
-            t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-twist]") : null;
-        if (twist) {
-            const id =
-                typeof twist.getAttribute === "function"
-                    ? twist.getAttribute("data-vmz-tree-twist")
-                    : null;
-            if (id) {
-                ev.preventDefault();
-                ev.stopPropagation();
-                this.toggle(id);
-            }
-            return;
-        }
-        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-item]") : null;
-        const id =
-            el && typeof el.getAttribute === "function"
-                ? el.getAttribute("data-vmz-tree-item")
-                : null;
-        if (id) this.select(id);
-    }
-    onTreeKeyDown(ev) {
-        if (!ev || !this.items?.length) return;
-        const ids = this.items.map((it) => it.id);
-        const idx = Math.max(0, ids.indexOf(this.selected));
-        const cur = this.items[idx];
-        if (ev.key === "ArrowRight" && cur?.expandable && !cur.expanded) {
-            ev.preventDefault();
-            this.toggle(cur.id);
-            return;
-        }
-        if (ev.key === "ArrowLeft" && cur?.expandable && cur.expanded) {
-            ev.preventDefault();
-            this.toggle(cur.id);
-            return;
-        }
-        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 if (ev.key === "Enter" || ev.key === " ") {
-            ev.preventDefault();
-            if (cur) this.select(cur.id);
-            return;
-        } else return;
-        ev.preventDefault();
-        this.select(ids[next]);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="tree" class="vmz-ui-tree">
+        <p v-if="label" :id="labelId" class="vmz-ui-tree__label">
+            {{ label }}
+        </p>
+        <ul role="tree" :aria-labelledby="labelId" :aria-label="label" @click="onTreeClick" :onKeyDown="onTreeKeyDown" class="vmz-ui-tree__items">
+            <li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="rowStyle(item)">
+                <button v-if="item.expandable" type="button" :data-vmz-tree-twist="item.id" :aria-label="item.twistLabel" tabindex="-1" class="vmz-ui-tree__twist">
+                    <Icon :name="item.expanded ? 'action.chevron-down' : 'action.chevron-right'" size="sm" decorative />
+                </button>
+                <span v-if="!item.expandable" aria-hidden="true" class="vmz-ui-tree__twist-spacer" />
+                <span :data-vmz-tree-title="item.id" class="vmz-ui-tree__title">
+                    {{ item.title }}
+                </span>
+            </li>
+        </ul>
+    </div>
+</template>
+<style>
+.vmz-ui-tree {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2, 0.5rem);
+    max-width: 28rem;
+}
+
+.vmz-ui-tree__label {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-tree__items {
+    margin: 0;
+    padding: var(--vmz-space-1, 0.25rem);
+    list-style: none;
+    overflow: hidden;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-tree__item {
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-height: var(--vmz-control-height, 2rem);
+    padding-inline-end: var(--vmz-space-3, 0.75rem);
+    border-radius: var(--vmz-radius-md, 6px);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    cursor: pointer;
+    outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-tree__item:hover {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-tree__item[aria-selected="true"] {
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
+    color: var(--vmz-action-primary-active);
+    font-weight: 500;
+}
+
+.vmz-ui-tree__item[aria-selected="true"]:hover {
+    background: var(--vmz-action-primary-soft, var(--vmz-surface-mist));
+}
+
+.vmz-ui-tree__item:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-tree__twist {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-tree__twist:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-tree__twist:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-tree__twist-spacer {
+    flex: 0 0 auto;
+    width: 1.25rem;
+}
+
+.vmz-ui-tree__title {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Tree (ordinary hierarchy).
+ * Parent owns visible flat rows + selected + expand state.
+ * Not virtualized / not DataGrid tree mode.
+ */
+export default class Tree {
+    public label: string = "";
+    public labelId: string = "vmz-tree-label";
+    public selected: string = "";
+    /**
+     * @type {{
+     *   id: string,
+     *   title: string,
+     *   depth: string,
+     *   expandable: boolean,
+     *   expanded: boolean,
+     *   expandedAttr: string,
+     *   twistLabel: string,
+     *   padStyle: string
+     * }[]}
+     */
+    public items: {
+        id: string;
+        title: string;
+        depth: string;
+        expandable: boolean;
+        expanded: boolean;
+        expandedAttr: string;
+        twistLabel: string;
+        padStyle: string;
+    }[] = [];
+    public onSelect: ((id: string) => void) | null = null;
+    public onToggle: ((id: string) => void) | null = null;
+    select(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+    toggle(id) {
+        if (typeof this.onToggle === "function") this.onToggle(id);
+    }
+    rowStyle(item) {
+        const provided = String(item?.padStyle || "").trim();
+        if (provided) return provided;
+        const depth = Math.max(0, Number(item?.depth) || 0);
+        return `padding-inline-start: ${0.75 + depth}rem`;
+    }
+    onTreeClick(ev) {
+        const t = ev && ev.target;
+        const twist =
+            t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-twist]") : null;
+        if (twist) {
+            const id =
+                typeof twist.getAttribute === "function"
+                    ? twist.getAttribute("data-vmz-tree-twist")
+                    : null;
+            if (id) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.toggle(id);
+            }
+            return;
+        }
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-item]") : null;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-tree-item")
+                : null;
+        if (id) this.select(id);
+    }
+    onTreeKeyDown(ev) {
+        if (!ev || !this.items?.length) return;
+        const ids = this.items.map((it) => it.id);
+        const idx = Math.max(0, ids.indexOf(this.selected));
+        const cur = this.items[idx];
+        if (ev.key === "ArrowRight" && cur?.expandable && !cur.expanded) {
+            ev.preventDefault();
+            this.toggle(cur.id);
+            return;
+        }
+        if (ev.key === "ArrowLeft" && cur?.expandable && cur.expanded) {
+            ev.preventDefault();
+            this.toggle(cur.id);
+            return;
+        }
+        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 if (ev.key === "Enter" || ev.key === " ") {
+            ev.preventDefault();
+            if (cur) this.select(cur.id);
+            return;
+        } else return;
+        ev.preventDefault();
+        this.select(ids[next]);
+    }
+}
+</script>

package/src/components/Typography.vmz

@@ -7,25 +7,40 @@
 .vmz-ui-typography {
     margin: 0;
     color: var(--vmz-text-ink);
-    font: inherit;
-    line-height: 1.6;
+    font-family: inherit;
+    font-size: var(--vmz-type-body);
+    font-weight: var(--vmz-type-weight-regular);
+    line-height: var(--vmz-type-line-height-body);
 }
+
 .vmz-ui-typography[data-variant="title"] {
-    font-family: var(--vmz-font-display, var(--vmz-font-sans));
-    font-size: 1.5rem;
-    font-weight: 650;
-    line-height: 1.3;
+    font-size: var(--vmz-type-title);
+    font-weight: var(--vmz-type-weight-semibold);
+    line-height: var(--vmz-type-line-height-title);
 }
+
+.vmz-ui-typography[data-variant="subtitle"] {
+    font-size: var(--vmz-type-subtitle);
+    font-weight: var(--vmz-type-weight-medium);
+    line-height: var(--vmz-type-line-height-title);
+}
+
 .vmz-ui-typography[data-variant="secondary"] {
+    font-size: var(--vmz-type-body);
     color: var(--vmz-text-steel);
+    line-height: var(--vmz-type-line-height-body);
 }
+
 .vmz-ui-typography[data-variant="caption"] {
     color: var(--vmz-text-steel);
-    font-size: 0.875rem;
+    font-size: var(--vmz-type-caption);
+    line-height: var(--vmz-type-line-height-caption);
 }
+
 .vmz-ui-typography[data-variant="code"] {
     font-family: var(--vmz-font-mono, monospace);
-    font-size: 0.92em;
+    font-size: var(--vmz-type-code);
+    line-height: var(--vmz-type-line-height-code);
 }
 </style>
 <script client>