@vmz/ui 0.3.6 → 0.3.8

package/src/components/Sider.vmz

@@ -1,23 +1,136 @@
 <template>
-    <aside data-vmz-ui="sider" class="vmz-ui-sider">
-        <slot />
+    <aside data-vmz-ui="sider" :onKeyDown="onKeyDown" class="vmz-ui-sider">
+        <div class="vmz-ui-sider__head">
+            <button type="button" :aria-label="label" :aria-expanded="open ? 'true' : 'false'" :aria-controls="bodyId" @click="toggle" class="vmz-ui-sider__toggle">
+                <Icon :name="open ? 'action.close' : 'action.menu'" size="md" decorative />
+            </button>
+        </div>
+        <div :id="bodyId" :data-open="open ? 'true' : null" class="vmz-ui-sider__body">
+            <slot />
+        </div>
     </aside>
 </template>
 <style>
 .vmz-ui-sider {
-    width: 16rem;
-    padding: 1rem;
-    border-right: 1px solid var(--vmz-line-default);
+    flex: none;
+    width: 13rem;
+    padding: var(--vmz-space-3, 0.75rem);
+    border-right: 1px solid var(--vmz-line-subtle);
     background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    overflow-y: auto;
+}
+.vmz-ui-sider__head {
+    display: none;
+}
+.vmz-ui-sider__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
+}
+.vmz-ui-sider__body :where(nav) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+}
+.vmz-ui-sider__body :where(nav a, .vmz-ui-sider__item) {
+    display: flex;
+    align-items: center;
+    min-height: 2.25rem;
+    padding: 0 var(--vmz-space-3, 0.75rem);
+    border-radius: var(--vmz-radius-md, 6px);
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    text-decoration: none;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+.vmz-ui-sider__body :where(nav a, .vmz-ui-sider__item):hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+.vmz-ui-sider__body :where(nav a, .vmz-ui-sider__item)[data-active="true"],
+.vmz-ui-sider__body :where(nav a, .vmz-ui-sider__item)[aria-current="page"] {
+    color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-soft);
+    font-weight: 600;
+    box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
+}
+.vmz-ui-sider__body :where(nav a, .vmz-ui-sider__item):focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+.vmz-ui-sider__group-title {
+    margin: var(--vmz-space-3, 0.75rem) 0 var(--vmz-space-1, 0.25rem);
+    padding: 0 var(--vmz-space-3, 0.75rem);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    letter-spacing: 0.02em;
 }
 @media (max-width: 720px) {
     .vmz-ui-sider {
         width: 100%;
+        padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
         border-right: 0;
-        border-bottom: 1px solid var(--vmz-line-default);
+        border-bottom: 1px solid var(--vmz-line-subtle);
+        overflow-y: visible;
+    }
+    .vmz-ui-sider__head {
+        display: flex;
+        justify-content: flex-end;
+    }
+    .vmz-ui-sider__toggle {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        border: 0;
+        border-radius: var(--vmz-radius-md, 6px);
+        background: transparent;
+        color: var(--vmz-text-ink);
+        cursor: pointer;
+        outline: none;
+    }
+    .vmz-ui-sider__toggle:hover {
+        background: var(--vmz-surface-mist);
+    }
+    .vmz-ui-sider__toggle:focus-visible {
+        box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+    }
+    .vmz-ui-sider__body {
+        display: none;
+        padding-top: var(--vmz-space-2, 0.5rem);
+    }
+    .vmz-ui-sider__body[data-open="true"] {
+        display: flex;
     }
 }
 </style>
 <script client>
-export default class Sider {}
+/**
+ * VMZ UI — Sider (Navigation column).
+ * Parent supplies grouped links; item 36px / radius 6 / selected soft-blue rail.
+ * Below 720px the column collapses behind a 40x40 menu control.
+ */
+export default class Sider {
+    public label: string = "";
+    public bodyId: string = "vmz-ui-sider-body";
+    open = true;
+
+    toggle() {
+        this.open = !this.open;
+    }
+
+    onKeyDown(e) {
+        if (e && e.key === "Escape") this.open = false;
+    }
+}
 </script>

package/src/components/Skeleton.vmz

@@ -13,25 +13,26 @@
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-compact-gap);
-    min-height: 4.5rem;
+    min-height: calc(var(--vmz-space-8) + var(--vmz-space-2));
 }
 
 .vmz-ui-skeleton__block,
 .vmz-ui-skeleton__line {
-    border-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-    animation: vmz-ui-skeleton-pulse var(--vmz-motion-overlay-duration)
-        var(--vmz-motion-overlay-easing) infinite alternate;
+    background: var(--vmz-surface-mist);
+    animation: vmz-ui-skeleton-pulse calc(var(--vmz-motion-control-duration) * 10)
+        var(--vmz-motion-control-easing) infinite alternate;
 }
 
 .vmz-ui-skeleton__block {
     width: 100%;
-    height: 2.5rem;
+    height: var(--vmz-control-height-lg);
+    border-radius: var(--vmz-radius-lg);
 }
 
 .vmz-ui-skeleton__line {
     width: 72%;
-    height: 0.75rem;
+    height: var(--vmz-space-3);
+    border-radius: var(--vmz-radius-sm);
 }
 
 .vmz-ui-skeleton__line + .vmz-ui-skeleton__line {
@@ -57,6 +58,7 @@
     .vmz-ui-skeleton__block,
     .vmz-ui-skeleton__line {
         animation: none;
+        opacity: 0.75;
     }
 }
 </style>

package/src/components/Space.vmz

@@ -6,19 +6,25 @@
 <style>
 .vmz-ui-space {
     display: flex;
-    gap: var(--vmz-density-control-gap, 0.75rem);
+    align-items: center;
+    gap: var(--vmz-space-3);
 }
+
 .vmz-ui-space[data-direction="vertical"] {
     flex-direction: column;
+    align-items: stretch;
 }
+
 .vmz-ui-space[data-wrap="true"] {
     flex-wrap: wrap;
 }
+
 .vmz-ui-space[data-size="small"] {
-    gap: 0.5rem;
+    gap: var(--vmz-space-2);
 }
+
 .vmz-ui-space[data-size="large"] {
-    gap: 1.5rem;
+    gap: var(--vmz-space-5);
 }
 </style>
 <script client>

package/src/components/Spinner.vmz

@@ -4,13 +4,14 @@
 <style>
 .vmz-ui-spinner {
     display: inline-block;
+    box-sizing: border-box;
     width: 1rem;
     height: 1rem;
-    border: 2px solid color-mix(in srgb, var(--vmz-action-primary-background) 25%, transparent);
+    border: 2px solid var(--vmz-action-primary-soft);
     border-top-color: var(--vmz-action-primary-background);
-    border-radius: 50%;
+    border-radius: var(--vmz-radius-pill);
     vertical-align: -0.15em;
-    animation: vmz-ui-spin var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing)
+    animation: vmz-ui-spin var(--vmz-motion-control-duration) var(--vmz-motion-control-easing)
         infinite;
 }
 
@@ -34,6 +35,6 @@
  * Loading indicator; reduced-motion keeps static feedback.
  */
 export default class Spinner {
-    public label: string = "Loading";
+    public label: string = "";
 }
 </script>

package/src/components/Steps.vmz

@@ -1,103 +1,118 @@
-<template>
-    <ol data-vmz-ui="steps" :aria-label="label" class="vmz-ui-steps">
-        <li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current="current === item.id ? 'step' : 'false'" class="vmz-ui-steps__item">
-            <span :data-vmz-step-index="item.id" class="vmz-ui-steps__index">
-                {{ item.index }}
-            </span>
-            <span class="vmz-ui-steps__body">
-                <span class="vmz-ui-steps__title">
-                    {{ item.title }}
-                </span>
-                <span v-if="item.description" class="vmz-ui-steps__description">
-                    {{ item.description }}
-                </span>
-            </span>
-        </li>
-    </ol>
-</template>
-<style>
-.vmz-ui-steps {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    gap: var(--vmz-density-control-gap);
-    max-width: 36rem;
-}
-
-.vmz-ui-steps__item {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.75rem;
-    color: var(--vmz-text-steel);
-}
-
-.vmz-ui-steps__item[data-status="done"] {
-    color: var(--vmz-status-success-foreground);
-}
-
-.vmz-ui-steps__item[data-status="current"] {
-    color: var(--vmz-action-primary-active);
-}
-
-.vmz-ui-steps__index {
-    flex: 0 0 auto;
-    min-width: 1.75rem;
-    height: 1.75rem;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: 999px;
-    font-weight: 700;
-    font-size: 0.85rem;
-    color: inherit;
-}
-
-.vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__index {
-    border-color: var(--vmz-action-primary-background);
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-}
-
-.vmz-ui-steps__item[data-status="done"] .vmz-ui-steps__index {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 18%, transparent);
-}
-
-.vmz-ui-steps__body {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-    padding-top: 0.125rem;
-}
-
-.vmz-ui-steps__title {
-    font-weight: 700;
-}
-
-.vmz-ui-steps__description {
-    font-size: 0.9em;
-    opacity: 0.9;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Steps.
- * Parent owns `current` id and item `status` (upcoming|current|done).
- * Navigation actions stay on the page (no private wizard store).
- */
-export default class Steps {
-    public label: string = "Steps";
-    public current: string = "";
-    /** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
-    public items: {
-        id: string;
-        index: string;
-        title: string;
-        description?: string;
-        status: string;
-    }[] = [];
-}
-</script>
+<template>
+    <ol data-vmz-ui="steps" :aria-label="label" class="vmz-ui-steps">
+        <li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current="current === item.id ? 'step' : 'false'" class="vmz-ui-steps__item">
+            <span :data-vmz-step-index="item.id" class="vmz-ui-steps__index">
+                <Icon v-if="item.status === 'done'" name="action.check" size="md" decorative />
+                <span v-else class="vmz-ui-steps__number">
+                    {{ item.index }}
+                </span>
+            </span>
+            <span class="vmz-ui-steps__body">
+                <span class="vmz-ui-steps__title">
+                    {{ item.title }}
+                </span>
+                <span v-if="item.description" class="vmz-ui-steps__description">
+                    {{ item.description }}
+                </span>
+            </span>
+        </li>
+    </ol>
+</template>
+<style>
+.vmz-ui-steps {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-3, 0.75rem);
+    max-width: 36rem;
+}
+
+.vmz-ui-steps__item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vmz-space-3, 0.75rem);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-steps__index {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-pill, 999px);
+    background: var(--vmz-surface-paper);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__index {
+    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+}
+
+.vmz-ui-steps__item[data-status="done"] .vmz-ui-steps__index {
+    border-color: var(--vmz-status-success-accent);
+    background: var(--vmz-status-success-background);
+    color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-steps__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    padding-top: 0.125rem;
+    min-width: 0;
+}
+
+.vmz-ui-steps__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__title {
+    color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-steps__description {
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    color: var(--vmz-text-tertiary);
+}
+
+:where([data-density="compact"]) .vmz-ui-steps {
+    gap: var(--vmz-density-compact-gap);
+}
+
+:where([data-density="dense"]) .vmz-ui-steps {
+    gap: var(--vmz-density-dense-gap);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Steps.
+ * Parent owns `current` id and item `status` (upcoming|current|done).
+ * Navigation actions stay on the page (no private wizard store).
+ */
+export default class Steps {
+    public label: string = "";
+    public current: string = "";
+    /** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
+    public items: {
+        id: string;
+        index: string;
+        title: string;
+        description?: string;
+        status: string;
+    }[] = [];
+}
+</script>