@vmz/ui 0.3.4 → 0.3.6

package/src/components/RadioGroup.vmz

@@ -1,124 +1,124 @@
-<template>
-    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :aria-describedby="describedBy" :disabled="disabled" class="vmz-ui-radio-group">
-        <legend class="vmz-ui-radio-group__legend">
-            {{ label }}
-        </legend>
-        <div role="radiogroup" :aria-label="label" @click="onListClick" class="vmz-ui-radio-group__list">
-            <label v-for="item in items" :key="item.value" :for="item.id" class="vmz-ui-radio-group__option">
-                <input :id="item.id" type="radio" :name="name" :value="item.value" :checked="value === item.value" :disabled="disabled" :data-vmz-radio="item.value" class="vmz-ui-radio-group__input" />
-                <span class="vmz-ui-radio-group__text">
-                    {{ item.label }}
-                </span>
-            </label>
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-radio-group__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-radio-group__error">
-            {{ error }}
-        </p>
-    </fieldset>
-</template>
-<style>
-.vmz-ui-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.45rem;
-    max-width: 28rem;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    min-width: 0;
-}
-
-.vmz-ui-radio-group__legend {
-    padding: 0;
-    font: inherit;
-    font-weight: 600;
-}
-
-.vmz-ui-radio-group__list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.35rem;
-}
-
-.vmz-ui-radio-group__option {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.45rem;
-    font: inherit;
-    cursor: pointer;
-}
-
-.vmz-ui-radio-group__input {
-    width: 1rem;
-    height: 1rem;
-    accent-color: var(--vmz-action-primary-background);
-    outline: none;
-}
-
-.vmz-ui-radio-group__input:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-radio-group__input:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-radio-group__text {
-    font-weight: 600;
-}
-
-.vmz-ui-radio-group__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-radio-group__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-
-.vmz-ui-radio-group[data-invalid="true"] .vmz-ui-radio-group__legend {
-    color: var(--vmz-status-danger-foreground);
-}
-</style>
-<script client>
-/**
- * VMZ UI — RadioGroup.
- * Parent owns selected value; click path updates via onChange (live prop remains authoritative).
- */
-export default class RadioGroup {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    public name: string = "vmz-radio";
-    public value: string = "";
-    public items: Array<{
-        id: string;
-        value: string;
-        label: string;
-    }> = [];
-    public disabled: boolean = false;
-    public invalidAttr: string = "false";
-    public descriptionId: string = "vmz-radio-desc";
-    public errorId: string = "vmz-radio-err";
-    public describedBy: string = "";
-    public onChange: ((value: string) => void) | null = null;
-    onListClick(ev) {
-        if (this.disabled) return;
-        const t = ev && ev.target;
-        if (!t || typeof t.closest !== "function") return;
-        const input = t.closest("input[data-vmz-radio]");
-        if (!input) return;
-        const next = input.getAttribute("data-vmz-radio") || input.value || "";
-        if (!next || next === this.value) return;
-        this.emit("change", next);
-        if (typeof this.onChange === "function") this.onChange(next);
-    }
-}
-</script>
+<template>
+    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :aria-describedby="describedBy" :disabled="disabled" class="vmz-ui-radio-group">
+        <legend class="vmz-ui-radio-group__legend">
+            {{ label }}
+        </legend>
+        <div role="radiogroup" :aria-label="label" @click="onListClick" class="vmz-ui-radio-group__list">
+            <label v-for="item in items" :key="item.value" :for="item.id" class="vmz-ui-radio-group__option">
+                <input :id="item.id" type="radio" :name="name" :value="item.value" :checked="value === item.value" :disabled="disabled" :data-vmz-radio="item.value" class="vmz-ui-radio-group__input" />
+                <span class="vmz-ui-radio-group__text">
+                    {{ item.label }}
+                </span>
+            </label>
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-radio-group__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-radio-group__error">
+            {{ error }}
+        </p>
+    </fieldset>
+</template>
+<style>
+.vmz-ui-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: 28rem;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+}
+
+.vmz-ui-radio-group__legend {
+    padding: 0;
+    font: inherit;
+    font-weight: 600;
+}
+
+.vmz-ui-radio-group__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.vmz-ui-radio-group__option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font: inherit;
+    cursor: pointer;
+}
+
+.vmz-ui-radio-group__input {
+    width: 1rem;
+    height: 1rem;
+    accent-color: var(--vmz-action-primary-background);
+    outline: none;
+}
+
+.vmz-ui-radio-group__input:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-radio-group__input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-radio-group__text {
+    font-weight: 600;
+}
+
+.vmz-ui-radio-group__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+}
+
+.vmz-ui-radio-group__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+}
+
+.vmz-ui-radio-group[data-invalid="true"] .vmz-ui-radio-group__legend {
+    color: var(--vmz-status-danger-foreground);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — RadioGroup.
+ * Parent owns selected value; click path updates via onChange (live prop remains authoritative).
+ */
+export default class RadioGroup {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public name: string = "vmz-radio";
+    public value: string = "";
+    public items: Array<{
+        id: string;
+        value: string;
+        label: string;
+    }> = [];
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public descriptionId: string = "vmz-radio-desc";
+    public errorId: string = "vmz-radio-err";
+    public describedBy: string = "";
+    public onChange: ((value: string) => void) | null = null;
+    onListClick(ev) {
+        if (this.disabled) return;
+        const t = ev && ev.target;
+        if (!t || typeof t.closest !== "function") return;
+        const input = t.closest("input[data-vmz-radio]");
+        if (!input) return;
+        const next = input.getAttribute("data-vmz-radio") || input.value || "";
+        if (!next || next === this.value) return;
+        this.emit("change", next);
+        if (typeof this.onChange === "function") this.onChange(next);
+    }
+}
+</script>

package/src/components/Segmented.vmz

@@ -1,51 +1,51 @@
-<template>
-    <div data-vmz-ui="segmented" role="group" :aria-label="label" class="vmz-ui-segmented">
-        <button v-for="opt in options" :key="opt.value" type="button" :data-vmz-segment="opt.value" :aria-pressed="opt.value === value ? 'true' : 'false'" @click="(() => onPick(opt.value))">
-            {{ opt.label }}
-        </button>
-    </div>
-</template>
-<style>
-.vmz-ui-segmented {
-    display: inline-flex;
-    max-width: 100%;
-    padding: 0.2rem;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-mist);
-    overflow-x: auto;
-}
-.vmz-ui-segmented button {
-    min-height: 2rem;
-    padding: 0.3rem 0.75rem;
-    border: 0;
-    border-radius: calc(var(--vmz-radius-md, 6px) - 2px);
-    background: transparent;
-    color: var(--vmz-text-steel);
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 550;
-    white-space: nowrap;
-    cursor: pointer;
-}
-.vmz-ui-segmented button[aria-pressed="true"] {
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-.vmz-ui-segmented button:focus-visible {
-    outline: 2px solid var(--vmz-focus-ring);
-    outline-offset: -2px;
-}
-</style>
-<script client>
-export default class Segmented {
-    public label: string = "Segments";
-    public value: string = "";
-    public options: Array<{ value: string; label: string }> = [];
-    public onChange: ((value: string) => void) | null = null;
-    onPick(next: string) {
-        this.emit("change", next);
-        if (typeof this.onChange === "function") this.onChange(next);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="segmented" role="group" :aria-label="label" class="vmz-ui-segmented">
+        <button v-for="opt in options" :key="opt.value" type="button" :data-vmz-segment="opt.value" :aria-pressed="opt.value === value ? 'true' : 'false'" @click="(() => onPick(opt.value))">
+            {{ opt.label }}
+        </button>
+    </div>
+</template>
+<style>
+.vmz-ui-segmented {
+    display: inline-flex;
+    max-width: 100%;
+    padding: 0.2rem;
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-mist);
+    overflow-x: auto;
+}
+.vmz-ui-segmented button {
+    min-height: 2rem;
+    padding: 0.25rem 0.75rem;
+    border: 0;
+    border-radius: calc(var(--vmz-radius-md, 6px) - 2px);
+    background: transparent;
+    color: var(--vmz-text-steel);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 550;
+    white-space: nowrap;
+    cursor: pointer;
+}
+.vmz-ui-segmented button[aria-pressed="true"] {
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+.vmz-ui-segmented button:focus-visible {
+    outline: 2px solid var(--vmz-focus-ring);
+    outline-offset: -2px;
+}
+</style>
+<script client>
+export default class Segmented {
+    public label: string = "Segments";
+    public value: string = "";
+    public options: Array<{ value: string; label: string }> = [];
+    public onChange: ((value: string) => void) | null = null;
+    onPick(next: string) {
+        this.emit("change", next);
+        if (typeof this.onChange === "function") this.onChange(next);
+    }
+}
+</script>