@vmz/ui 0.3.4 → 0.3.6

package/src/components/Steps.vmz

@@ -1,103 +1,103 @@
-<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.15rem;
-}
-
-.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">
+                {{ 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>

package/src/components/Switch.vmz

@@ -1,98 +1,98 @@
-<template>
-    <label data-vmz-ui="switch" :for="controlId" class="vmz-ui-switch">
-        <button :id="controlId" type="button" role="switch" :aria-checked="checked" :aria-describedby="describedBy" :disabled="disabled" @click="toggle" :onKeyDown="onKeyDown" class="vmz-ui-switch__control">
-            <span aria-hidden="true" class="vmz-ui-switch__thumb" />
-        </button>
-        <span class="vmz-ui-switch__label">
-            {{ label }}
-        </span>
-    </label>
-</template>
-<style>
-.vmz-ui-switch {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.55rem;
-    font: inherit;
-    cursor: pointer;
-}
-
-.vmz-ui-switch__control {
-    position: relative;
-    width: 2.4rem;
-    height: 1.35rem;
-    padding: 0;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: 999px;
-    background: transparent;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-switch__control[aria-checked="true"],
-.vmz-ui-switch__control[aria-checked=""] {
-    background: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-switch__control:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-switch__control:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-switch__thumb {
-    position: absolute;
-    top: 0.12rem;
-    left: 0.12rem;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 999px;
-    background: var(--vmz-action-primary-foreground);
-    transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
-}
-
-.vmz-ui-switch__control[aria-checked="true"] .vmz-ui-switch__thumb,
-.vmz-ui-switch__control[aria-checked=""] .vmz-ui-switch__thumb {
-    transform: translateX(1.05rem);
-}
-
-.vmz-ui-switch__label {
-    font-weight: 600;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .vmz-ui-switch__thumb {
-        transition: none;
-    }
-}
-</style>
-<script client>
-/**
- * VMZ UI — Switch (UI2).
- * role=switch + aria-checked; parent owns checked (no parallel form store).
- */
-export default class Switch {
-    public label: string = "";
-    public checked: boolean = false;
-    public disabled: boolean = false;
-    public controlId: string = "vmz-switch";
-    public describedBy: string = "";
-    public onChange: ((checked: boolean) => void) | null = null;
-    toggle() {
-        if (this.disabled) return;
-        const next = !this.checked;
-        this.emit("change", next);
-        if (typeof this.onChange === "function") this.onChange(next);
-    }
-    onKeyDown(ev) {
-        if (!ev) return;
-        if (ev.key === " " || ev.key === "Enter") {
-            ev.preventDefault();
-            this.toggle();
-        }
-    }
-}
-</script>
+<template>
+    <label data-vmz-ui="switch" :for="controlId" class="vmz-ui-switch">
+        <button :id="controlId" type="button" role="switch" :aria-checked="checked" :aria-describedby="describedBy" :disabled="disabled" @click="toggle" :onKeyDown="onKeyDown" class="vmz-ui-switch__control">
+            <span aria-hidden="true" class="vmz-ui-switch__thumb" />
+        </button>
+        <span class="vmz-ui-switch__label">
+            {{ label }}
+        </span>
+    </label>
+</template>
+<style>
+.vmz-ui-switch {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: inherit;
+    cursor: pointer;
+}
+
+.vmz-ui-switch__control {
+    position: relative;
+    width: 2.4rem;
+    height: 1.35rem;
+    padding: 0;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: 999px;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-switch__control[aria-checked="true"],
+.vmz-ui-switch__control[aria-checked=""] {
+    background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-switch__control:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-switch__control:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-switch__thumb {
+    position: absolute;
+    top: 0.12rem;
+    left: 0.12rem;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 999px;
+    background: var(--vmz-action-primary-foreground);
+    transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-switch__control[aria-checked="true"] .vmz-ui-switch__thumb,
+.vmz-ui-switch__control[aria-checked=""] .vmz-ui-switch__thumb {
+    transform: translateX(1.05rem);
+}
+
+.vmz-ui-switch__label {
+    font-weight: 600;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-switch__thumb {
+        transition: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Switch (UI2).
+ * role=switch + aria-checked; parent owns checked (no parallel form store).
+ */
+export default class Switch {
+    public label: string = "";
+    public checked: boolean = false;
+    public disabled: boolean = false;
+    public controlId: string = "vmz-switch";
+    public describedBy: string = "";
+    public onChange: ((checked: boolean) => void) | null = null;
+    toggle() {
+        if (this.disabled) return;
+        const next = !this.checked;
+        this.emit("change", next);
+        if (typeof this.onChange === "function") this.onChange(next);
+    }
+    onKeyDown(ev) {
+        if (!ev) return;
+        if (ev.key === " " || ev.key === "Enter") {
+            ev.preventDefault();
+            this.toggle();
+        }
+    }
+}
+</script>