@vmz/ui 0.2.3 → 0.2.4

package/src/components/RadioGroup.vmz

@@ -1,39 +1,26 @@
 <template>
-  <fieldset
-      class="vmz-ui-radio-group"
-      data-vmz-ui="radio-group"
-      :data-invalid="invalidAttr"
-      :aria-describedby="describedBy"
-      :disabled="disabled"
-    >
-      <legend class="vmz-ui-radio-group__legend">{{ label }}</legend>
-      <div class="vmz-ui-radio-group__list" role="radiogroup" :aria-label="label" @click="onListClick">
-        <label
-          v-for="item in items"
-          :key="item.value"
-          class="vmz-ui-radio-group__option"
-          :for="item.id"
-        >
-          <input
-            :id="item.id"
-            class="vmz-ui-radio-group__input"
-            type="radio"
-            :name="name"
-            :value="item.value"
-            :checked="value === item.value"
-            :disabled="disabled"
-            :data-vmz-radio="item.value"
-          />
-          <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" class="vmz-ui-radio-group__error" role="alert">{{ error }}</p>
+    <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 {
+.vmz-ui-radio-group {
     display: flex;
     flex-direction: column;
     gap: 0.45rem;
@@ -42,97 +29,96 @@
     padding: 0;
     border: 0;
     min-width: 0;
-  }
+}
 
-  .vmz-ui-radio-group__legend {
+.vmz-ui-radio-group__legend {
     padding: 0;
     font: inherit;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-radio-group__list {
+.vmz-ui-radio-group__list {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
-  }
+}
 
-  .vmz-ui-radio-group__option {
+.vmz-ui-radio-group__option {
     display: inline-flex;
     align-items: center;
     gap: 0.45rem;
     font: inherit;
     cursor: pointer;
-  }
+}
 
-  .vmz-ui-radio-group__input {
+.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 {
+.vmz-ui-radio-group__input:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-radio-group__input:disabled {
+.vmz-ui-radio-group__input:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-radio-group__text {
+.vmz-ui-radio-group__text {
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-radio-group__description {
+.vmz-ui-radio-group__description {
     margin: 0;
     opacity: 0.75;
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-radio-group__error {
+.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 {
+.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).
-*/
+ * 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);
-	}
+    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/Result.vmz

@@ -1,19 +1,18 @@
 <template>
-  <section
-      class="vmz-ui-result"
-      data-vmz-ui="result"
-      :data-status="status"
-    >
-      <p class="vmz-ui-result__title">{{ title }}</p>
-      <p v-if="description" class="vmz-ui-result__description">{{ description }}</p>
-      <div class="vmz-ui-result__actions">
-        <slot />
-      </div>
+    <section data-vmz-ui="result" :data-status="status" class="vmz-ui-result">
+        <p class="vmz-ui-result__title">
+            {{ title }}
+        </p>
+        <p v-if="description" class="vmz-ui-result__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-result__actions">
+            <slot />
+        </div>
     </section>
 </template>
-
 <style>
-  .vmz-ui-result {
+.vmz-ui-result {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -22,63 +21,62 @@
     border: 1px solid var(--vmz-status-info-accent);
     border-radius: var(--vmz-radius-md, 6px);
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-result[data-status='info'] {
+.vmz-ui-result[data-status="info"] {
     border-color: var(--vmz-status-info-accent);
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-result[data-status='success'] {
+.vmz-ui-result[data-status="success"] {
     border-color: var(--vmz-status-success-accent);
     color: var(--vmz-status-success-foreground);
-  }
+}
 
-  .vmz-ui-result[data-status='warning'] {
+.vmz-ui-result[data-status="warning"] {
     border-color: var(--vmz-status-warning-accent);
     color: var(--vmz-status-warning-foreground);
-  }
+}
 
-  .vmz-ui-result[data-status='danger'] {
+.vmz-ui-result[data-status="danger"] {
     border-color: var(--vmz-status-danger-accent);
     color: var(--vmz-status-danger-foreground);
-  }
+}
 
-  :where([data-density='compact']) .vmz-ui-result {
+:where([data-density="compact"]) .vmz-ui-result {
     gap: var(--vmz-density-compact-gap);
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  }
+}
 
-  .vmz-ui-result__title {
+.vmz-ui-result__title {
     margin: 0;
     font-size: 1.15rem;
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-result__description {
+.vmz-ui-result__description {
     margin: 0;
     opacity: 0.9;
-  }
+}
 
-  .vmz-ui-result__actions {
+.vmz-ui-result__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-  }
+}
 
-  .vmz-ui-result__actions:empty {
+.vmz-ui-result__actions:empty {
     display: none;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Result (UI4 Commercial Surface).
-* Outcome block for success/error flows; status → status.* tokens.
-*/
+ * VMZ UI — Result (UI4 Commercial Surface).
+ * Outcome block for success/error flows; status → status.* tokens.
+ */
 export default class Result {
-	public title: string = "";
-	public description: string = "";
-	public status: string = "info";
+    public title: string = "";
+    public description: string = "";
+    public status: string = "info";
 }
 </script>

package/src/components/Segmented.vmz

@@ -1,30 +1,51 @@
 <template>
-  <div class="vmz-ui-segmented" data-vmz-ui="segmented" role="group" :aria-label="label">
-    <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>
+    <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:.2rem;border-radius:var(--vmz-radius-md,6px);background:var(--vmz-surface-mist);overflow-x:auto}
-.vmz-ui-segmented button{min-height:2rem;padding:.3rem .75rem;border:0;border-radius:calc(var(--vmz-radius-md,6px) - 2px);background:transparent;color:var(--vmz-text-steel);font:inherit;font-size:.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,.1)}
-.vmz-ui-segmented button:focus-visible{outline:2px solid var(--vmz-focus-ring);outline-offset:-2px}
+.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);
-  }
+    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>