@vmz/ui 0.3.6 → 0.3.7

package/README.md

@@ -1,51 +1,51 @@
-# @vmz/ui — VMZ UI
-
-Official **VMZ UI** framework package.
-
-```text
-VMZ Design  ≠  VMZ UI
-/designs    ≠  this package
-@vmz/ui     ≠  theme truth source
-```
-
-- Declares **semantic token requirements** (see `contracts/`).
-- Ships ordinary `.vmz` under **`src/components/`** (same hard convention as apps) — **not** `@vmz/plugin-*`, no
-  `componentsRoot` config.
-- **Never** hardcodes brand hex (`#176BFF`, etc.). Applications provide values via `/designs`.
-
-## Preview `0.0.4`
-
-This is a **preview** release. It is **not** `production-ready` and **not** a mature / production UI.
-
-Headline surface for this cut:
-
-- Commercial / Console / Document-Product composition on official homepage
-- Form depth, Structure, Overlay stacking, DataTable (ordinary HTML table — not `@vmz/ui-data-grid`)
-- DatePicker owned calendar overlay (not native `input[type=date]` popup)
-- Upload multipart binary (parent-owned FormData → `#server` File/Blob; progress/cancel)
-- Density / RTL / preset materialize
-- Motion continuity + interrupt/cancel
-- Motion compiler IR thin gate (`pnpm verify -- motion-ir`)
-- UI7 conformance pack (`@vmz/ui/conformance` + `pnpm verify -- ui7`)
-- `@vmz/ui-data-grid` thin gate (virtualization + pinned column — not tree/group/pivot/edit)
-
-Verify:
-
-```bash
-pnpm verify -- ui-automation
-pnpm verify -- ui7
-pnpm verify -- ui-data-grid
-pnpm verify -- official-homepage
-```
-
-Still open relative to Browser Production Profile v1: `browser-production` aggregate core gaps,
-`@vmz/ui-data-grid` deep capabilities, Upload cross-page session / multi-file parallel chunks,
-`@vmz/test` Browser Host U0–U1, sibling `vmz-panel` product app.
-
-## Commercial default surface
-
-Default web surface targets modern commercial console density: flat 32px-class controls,
-quiet borders, restrained radii, layered page/paper surfaces without Bootstrap-era inset
-fields, accent bars, or card lift. Applications replace every semantic value through `/designs`.
-Additional general-purpose components include layout primitives, typography, segmented controls,
-tags, avatars, dropdowns, collapse panels and progress indicators.
+# @vmz/ui — VMZ UI
+
+Official **VMZ UI** framework package.
+
+```text
+VMZ Design  ≠  VMZ UI
+/designs    ≠  this package
+@vmz/ui     ≠  theme truth source
+```
+
+- Declares **semantic token requirements** (see `contracts/`).
+- Ships ordinary `.vmz` under **`src/components/`** (same hard convention as apps) — **not** `@vmz/plugin-*`, no
+  `componentsRoot` config.
+- **Never** hardcodes brand hex (`#176BFF`, etc.). Applications provide values via `/designs`.
+
+## Preview `0.0.4`
+
+This is a **preview** release. It is **not** `production-ready` and **not** a mature / production UI.
+
+Headline surface for this cut:
+
+- Commercial / Console / Document-Product composition on official homepage
+- Form depth, Structure, Overlay stacking, DataTable (ordinary HTML table — not `@vmz/ui-data-grid`)
+- DatePicker owned calendar overlay (not native `input[type=date]` popup)
+- Upload multipart binary (parent-owned FormData → `#server` File/Blob; progress/cancel)
+- Density / RTL / preset materialize
+- Motion continuity + interrupt/cancel
+- Motion compiler IR thin gate (`pnpm verify -- motion-ir`)
+- UI7 conformance pack (`@vmz/ui/conformance` + `pnpm verify -- ui7`)
+- `@vmz/ui-data-grid` thin gate (virtualization + pinned column — not tree/group/pivot/edit)
+
+Verify:
+
+```bash
+pnpm verify -- ui-automation
+pnpm verify -- ui7
+pnpm verify -- ui-data-grid
+pnpm verify -- official-homepage
+```
+
+Still open relative to Browser Production Profile v1: `browser-production` aggregate core gaps,
+`@vmz/ui-data-grid` deep capabilities, Upload cross-page session / multi-file parallel chunks,
+`@vmz/test` Browser Host U0–U1, sibling `vmz-panel` product app.
+
+## Commercial default surface
+
+Default web surface targets modern commercial console density: flat 32px-class controls,
+quiet borders, restrained radii, layered page/paper surfaces without Bootstrap-era inset
+fields, accent bars, or card lift. Applications replace every semantic value through `/designs`.
+Additional general-purpose components include layout primitives, typography, segmented controls,
+tags, avatars, dropdowns, collapse panels and progress indicators.

package/package.json

@@ -82,7 +82,7 @@
   "license": "MIT",
   "name": "@vmz/ui",
   "peerDependencies": {
-    "@vmz/ui-icons": "0.3.6"
+    "@vmz/ui-icons": "0.3.7"
   },
   "peerDependenciesMeta": {
     "@vmz/ui-icons": {
@@ -98,5 +98,5 @@
     "url": "git+https://github.com/doki-land/vmz-framework.git"
   },
   "type": "module",
-  "version": "0.3.6"
+  "version": "0.3.7"
 }

package/src/components/Accordion.vmz

@@ -1,94 +1,94 @@
-<template>
-    <div data-vmz-ui="accordion" :aria-label="label" class="vmz-ui-accordion">
-        <div v-for="item in items" :key="item.id" :data-vmz-accordion="item.id" class="vmz-ui-accordion__item">
-            <h3 class="vmz-ui-accordion__heading">
-                <button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded="openId === item.id ? 'true' : 'false'" :aria-controls="item.panelId" @click="(() => toggle(item.id))" class="vmz-ui-accordion__trigger">
-                    {{ item.title }}
-                </button>
-            </h3>
-            <div v-if="openId === item.id" :id="item.panelId" role="region" :data-vmz-accordion-panel="item.id" :aria-labelledby="item.triggerId" class="vmz-ui-accordion__panel">
-                {{ item.body }}
-            </div>
-        </div>
-    </div>
-</template>
-<style>
-.vmz-ui-accordion {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 36rem;
-    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-accordion__item {
-    border-bottom: 1px solid var(--vmz-line-default);
-}
-
-.vmz-ui-accordion__item:last-child {
-    border-bottom: none;
-}
-
-.vmz-ui-accordion__heading {
-    margin: 0;
-    font: inherit;
-}
-
-.vmz-ui-accordion__trigger {
-    display: block;
-    width: 100%;
-    text-align: start;
-    font: inherit;
-    font-weight: 600;
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-accordion__trigger:hover {
-    background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
-}
-
-.vmz-ui-accordion__trigger:focus-visible {
-    box-shadow: inset 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-accordion__trigger[aria-expanded="true"] {
-    color: var(--vmz-action-primary-active);
-}
-
-.vmz-ui-accordion__panel {
-    padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
-    color: var(--vmz-text-steel);
-    line-height: 1.5;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Accordion.
- * Exclusive open: parent owns `openId`. Toggle same id closes.
- * Panel body lives on items (no per-panel slot runtime).
- */
-export default class Accordion {
-    public label: string = "Accordion";
-    public openId: string = "";
-    /** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
-    public items: {
-        id: string;
-        title: string;
-        body: string;
-        triggerId: string;
-        panelId: string;
-    }[] = [];
-    public onToggle: ((id: string) => void) | null = null;
-    toggle(id) {
-        if (typeof this.onToggle === "function") this.onToggle(id);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="accordion" :aria-label="label" class="vmz-ui-accordion">
+        <div v-for="item in items" :key="item.id" :data-vmz-accordion="item.id" class="vmz-ui-accordion__item">
+            <h3 class="vmz-ui-accordion__heading">
+                <button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded="openId === item.id ? 'true' : 'false'" :aria-controls="item.panelId" @click="(() => toggle(item.id))" class="vmz-ui-accordion__trigger">
+                    {{ item.title }}
+                </button>
+            </h3>
+            <div v-if="openId === item.id" :id="item.panelId" role="region" :data-vmz-accordion-panel="item.id" :aria-labelledby="item.triggerId" class="vmz-ui-accordion__panel">
+                {{ item.body }}
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-width: 36rem;
+    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-accordion__item {
+    border-bottom: 1px solid var(--vmz-line-default);
+}
+
+.vmz-ui-accordion__item:last-child {
+    border-bottom: none;
+}
+
+.vmz-ui-accordion__heading {
+    margin: 0;
+    font: inherit;
+}
+
+.vmz-ui-accordion__trigger {
+    display: block;
+    width: 100%;
+    text-align: start;
+    font: inherit;
+    font-weight: 600;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-accordion__trigger:hover {
+    background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
+}
+
+.vmz-ui-accordion__trigger:focus-visible {
+    box-shadow: inset 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-accordion__trigger[aria-expanded="true"] {
+    color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-accordion__panel {
+    padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
+    color: var(--vmz-text-steel);
+    line-height: 1.5;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Accordion.
+ * Exclusive open: parent owns `openId`. Toggle same id closes.
+ * Panel body lives on items (no per-panel slot runtime).
+ */
+export default class Accordion {
+    public label: string = "Accordion";
+    public openId: string = "";
+    /** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+        body: string;
+        triggerId: string;
+        panelId: string;
+    }[] = [];
+    public onToggle: ((id: string) => void) | null = null;
+    toggle(id) {
+        if (typeof this.onToggle === "function") this.onToggle(id);
+    }
+}
+</script>

package/src/components/AppShell.vmz

@@ -6,7 +6,9 @@
                     {{ brand }}
                 </a>
                 <nav :aria-label="navLabel" class="vmz-ui-app-shell__nav">
-                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" class="vmz-ui-app-shell__nav-item">{{ item.title }}</a>
+                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" class="vmz-ui-app-shell__nav-item">
+                        {{ item.title }}
+                    </a>
                 </nav>
                 <div class="vmz-ui-app-shell__actions">
                     <slot name="actions" />
@@ -159,7 +161,8 @@
 <script client>
 /**
  * VMZ UI — AppShell (Commercial composition).
- * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
+ * Landmark header/nav + main slot. `nav` stays flat link-only; non-nav controls
+ * go into the named `actions` slot. Parent supplies copy; no private theme.
  */
 export default class AppShell {
     public brand: string = "VMZ";

package/src/components/Autocomplete.vmz

@@ -1,154 +1,154 @@
-<template>
-    <div data-vmz-ui="autocomplete" :data-invalid="invalidAttr" :data-open="openAttr" class="vmz-ui-autocomplete">
-        <label v-if="label" :for="controlId" class="vmz-ui-autocomplete__label">
-            {{ label }}
-        </label>
-        <input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :value="value" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
-        <ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
-            <li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" tabindex="-1" class="vmz-ui-autocomplete__option">
-                {{ opt.label }}
-            </li>
-        </ul>
-        <p v-if="showEmpty" data-vmz-autocomplete="empty" class="vmz-ui-autocomplete__empty">
-            {{ emptyText }}
-        </p>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-autocomplete__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-autocomplete {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-autocomplete__label {
-    font: inherit;
-    font-weight: 600;
-}
-
-.vmz-ui-autocomplete__control {
-    font: inherit;
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: inherit;
-    outline: none;
-}
-
-.vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control {
-    border-color: var(--vmz-status-danger-accent);
-}
-
-.vmz-ui-autocomplete__control:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-autocomplete__control:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-autocomplete__list {
-    list-style: none;
-    margin: 0;
-    padding: 0.25rem 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    max-height: 12rem;
-    overflow: auto;
-}
-
-.vmz-ui-autocomplete__option {
-    margin: 0;
-    padding: 0.5rem 0.75rem;
-    cursor: pointer;
-    font-weight: 600;
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-autocomplete__option:hover,
-.vmz-ui-autocomplete__option:focus {
-    background: var(--vmz-surface-mist);
-    outline: none;
-}
-
-.vmz-ui-autocomplete__empty {
-    margin: 0;
-    color: var(--vmz-text-steel);
-    font-size: 0.9em;
-}
-
-.vmz-ui-autocomplete__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-autocomplete__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Autocomplete.
- * Parent owns value, listOpen, and filtered options — no parallel query/store.
- * Selection notifies via onSelect(value); Escape closes via onClose.
- */
-export default class Autocomplete {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    public value: string = "";
-    public options: Array<{
-        value: string;
-        label: string;
-    }> = [];
-    public listOpen: boolean = false;
-    public openAttr: string = "false";
-    public showEmpty: boolean = false;
-    public emptyText: string = "No matches";
-    public disabled: boolean = false;
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-autocomplete";
-    public listId: string = "vmz-autocomplete-list";
-    public descriptionId: string = "vmz-autocomplete-desc";
-    public errorId: string = "vmz-autocomplete-err";
-    public describedBy: string = "";
-    public onInput: ((e: Event) => void) | null = null;
-    public onSelect: ((value: string) => void) | null = null;
-    public onClose: (() => void) | null = null;
-    onDomInput(e: Event) {
-        this.emit("input", e);
-        if (typeof this.onInput === "function") this.onInput(e);
-    }
-    onListClick(ev) {
-        if (this.disabled) return;
-        const t = ev && ev.target;
-        if (!t || typeof t.closest !== "function") return;
-        const opt = t.closest("[data-vmz-option]");
-        if (!opt) return;
-        const next = opt.getAttribute("data-vmz-option") || "";
-        if (!next) return;
-        this.emit("select", next);
-        if (typeof this.onSelect === "function") this.onSelect(next);
-    }
-    onKeyDown(ev) {
-        if (!ev || ev.key !== "Escape") return;
-        ev.preventDefault();
-        this.emit("close");
-        if (typeof this.onClose === "function") this.onClose();
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="autocomplete" :data-invalid="invalidAttr" :data-open="openAttr" class="vmz-ui-autocomplete">
+        <label v-if="label" :for="controlId" class="vmz-ui-autocomplete__label">
+            {{ label }}
+        </label>
+        <input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" :value="value" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
+        <ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
+            <li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" tabindex="-1" class="vmz-ui-autocomplete__option">
+                {{ opt.label }}
+            </li>
+        </ul>
+        <p v-if="showEmpty" data-vmz-autocomplete="empty" class="vmz-ui-autocomplete__empty">
+            {{ emptyText }}
+        </p>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-autocomplete__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-autocomplete {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    max-width: 28rem;
+}
+
+.vmz-ui-autocomplete__label {
+    font: inherit;
+    font-weight: 600;
+}
+
+.vmz-ui-autocomplete__control {
+    font: inherit;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+    color: inherit;
+    outline: none;
+}
+
+.vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control {
+    border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-autocomplete__control:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-autocomplete__control:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-autocomplete__list {
+    list-style: none;
+    margin: 0;
+    padding: 0.25rem 0;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    max-height: 12rem;
+    overflow: auto;
+}
+
+.vmz-ui-autocomplete__option {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-autocomplete__option:hover,
+.vmz-ui-autocomplete__option:focus {
+    background: var(--vmz-surface-mist);
+    outline: none;
+}
+
+.vmz-ui-autocomplete__empty {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    font-size: 0.9em;
+}
+
+.vmz-ui-autocomplete__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+}
+
+.vmz-ui-autocomplete__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Autocomplete.
+ * Parent owns value, listOpen, and filtered options — no parallel query/store.
+ * Selection notifies via onSelect(value); Escape closes via onClose.
+ */
+export default class Autocomplete {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public value: string = "";
+    public options: Array<{
+        value: string;
+        label: string;
+    }> = [];
+    public listOpen: boolean = false;
+    public openAttr: string = "false";
+    public showEmpty: boolean = false;
+    public emptyText: string = "No matches";
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-autocomplete";
+    public listId: string = "vmz-autocomplete-list";
+    public descriptionId: string = "vmz-autocomplete-desc";
+    public errorId: string = "vmz-autocomplete-err";
+    public describedBy: string = "";
+    public onInput: ((e: Event) => void) | null = null;
+    public onSelect: ((value: string) => void) | null = null;
+    public onClose: (() => void) | null = null;
+    onDomInput(e: Event) {
+        this.emit("input", e);
+        if (typeof this.onInput === "function") this.onInput(e);
+    }
+    onListClick(ev) {
+        if (this.disabled) return;
+        const t = ev && ev.target;
+        if (!t || typeof t.closest !== "function") return;
+        const opt = t.closest("[data-vmz-option]");
+        if (!opt) return;
+        const next = opt.getAttribute("data-vmz-option") || "";
+        if (!next) return;
+        this.emit("select", next);
+        if (typeof this.onSelect === "function") this.onSelect(next);
+    }
+    onKeyDown(ev) {
+        if (!ev || ev.key !== "Escape") return;
+        ev.preventDefault();
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+}
+</script>