@vmz/ui 0.3.7 → 0.3.8

package/src/components/RadioGroup.vmz

@@ -1,11 +1,14 @@
 <template>
-    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :aria-describedby="describedBy" :disabled="disabled" class="vmz-ui-radio-group">
+    <fieldset data-vmz-ui="radio-group" :data-invalid="invalidAttr" :data-disabled="disabled ? 'true' : 'false'" :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__box">
+                    <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 aria-hidden="true" class="vmz-ui-radio-group__dot" />
+                </span>
                 <span class="vmz-ui-radio-group__text">
                     {{ item.label }}
                 </span>
@@ -23,7 +26,8 @@
 .vmz-ui-radio-group {
     display: flex;
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2);
+    width: 100%;
     max-width: 28rem;
     margin: 0;
     padding: 0;
@@ -34,28 +38,69 @@
 .vmz-ui-radio-group__legend {
     padding: 0;
     font: inherit;
-    font-weight: 600;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-radio-group__list {
     display: flex;
     flex-direction: column;
-    gap: 0.375rem;
+    gap: var(--vmz-space-2);
 }
 
 .vmz-ui-radio-group__option {
     display: inline-flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--vmz-space-2);
     font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
     cursor: pointer;
 }
 
+.vmz-ui-radio-group__box {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+}
+
 .vmz-ui-radio-group__input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    box-sizing: border-box;
     width: 1rem;
     height: 1rem;
-    accent-color: var(--vmz-action-primary-background);
+    margin: 0;
+    appearance: none;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-surface-paper);
     outline: none;
+    cursor: pointer;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-radio-group__input:hover:not(:disabled):not(:checked) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-radio-group__input:checked {
+    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-radio-group__input:checked:hover:not(:disabled) {
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-radio-group__input:focus-visible {
@@ -63,29 +108,64 @@
 }
 
 .vmz-ui-radio-group__input:disabled {
+    cursor: not-allowed;
+}
+
+.vmz-ui-radio-group__dot {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    width: 0.375rem;
+    height: 0.375rem;
+    margin: auto;
+    border-radius: var(--vmz-radius-pill);
+    background: var(--vmz-action-primary-foreground);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-radio-group__input:checked + .vmz-ui-radio-group__dot {
+    opacity: 1;
+}
+
+.vmz-ui-radio-group[data-disabled="true"] {
     opacity: 0.55;
+}
+
+.vmz-ui-radio-group[data-disabled="true"] .vmz-ui-radio-group__option,
+.vmz-ui-radio-group[data-disabled="true"] .vmz-ui-radio-group__input {
     cursor: not-allowed;
 }
 
 .vmz-ui-radio-group__text {
-    font-weight: 600;
+    font-weight: 400;
 }
 
 .vmz-ui-radio-group__description {
     margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    line-height: 1.5715;
 }
 
 .vmz-ui-radio-group__error {
     margin: 0;
     color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
+    font-size: 0.875rem;
+    line-height: 1.5715;
 }
 
 .vmz-ui-radio-group[data-invalid="true"] .vmz-ui-radio-group__legend {
     color: var(--vmz-status-danger-foreground);
 }
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-radio-group__input,
+    .vmz-ui-radio-group__dot {
+        transition: none;
+    }
+}
 </style>
 <script client>
 /**

package/src/components/Result.vmz

@@ -1,6 +1,9 @@
 <template>
     <section data-vmz-ui="result" :data-status="status" class="vmz-ui-result">
-        <p class="vmz-ui-result__title">
+        <span aria-hidden="true" class="vmz-ui-result__icon">
+            <Icon :name="statusIcon()" size="lg" decorative />
+        </span>
+        <p v-if="title" class="vmz-ui-result__title">
             {{ title }}
         </p>
         <p v-if="description" class="vmz-ui-result__description">
@@ -15,68 +18,98 @@
 .vmz-ui-result {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: var(--vmz-density-control-gap);
-    padding: calc(var(--vmz-density-control-padding-y) * 1.5) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-status-info-accent);
-    border-radius: var(--vmz-radius-md, 6px);
-    color: var(--vmz-status-info-foreground);
+    align-items: center;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-6, 2rem) var(--vmz-space-5, 1.5rem);
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    text-align: center;
 }
 
-.vmz-ui-result[data-status="info"] {
-    border-color: var(--vmz-status-info-accent);
-    color: var(--vmz-status-info-foreground);
+.vmz-ui-result__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: var(--vmz-space-1, 0.25rem);
 }
 
-.vmz-ui-result[data-status="success"] {
-    border-color: var(--vmz-status-success-accent);
-    color: var(--vmz-status-success-foreground);
+.vmz-ui-result__icon .vmz-ui-icon[data-size] {
+    font-size: 2.5rem;
 }
 
-.vmz-ui-result[data-status="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    color: var(--vmz-status-warning-foreground);
+.vmz-ui-result[data-status="info"] .vmz-ui-result__icon {
+    color: var(--vmz-status-info-accent);
 }
 
-.vmz-ui-result[data-status="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    color: var(--vmz-status-danger-foreground);
+.vmz-ui-result[data-status="success"] .vmz-ui-result__icon {
+    color: var(--vmz-status-success-accent);
 }
 
-: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[data-status="warning"] .vmz-ui-result__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-result[data-status="danger"] .vmz-ui-result__icon,
+.vmz-ui-result[data-status="error"] .vmz-ui-result__icon {
+    color: var(--vmz-status-danger-accent);
 }
 
 .vmz-ui-result__title {
     margin: 0;
-    font-size: 1.15rem;
-    font-weight: 700;
+    font-family: var(--vmz-font-sans, inherit);
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 1.32;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-result__description {
     margin: 0;
-    opacity: 0.9;
+    max-width: 40rem;
+    font-size: 0.9375rem;
+    line-height: 1.55;
+    color: var(--vmz-text-tertiary);
 }
 
 .vmz-ui-result__actions {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
+    justify-content: center;
+    gap: var(--vmz-space-3, 0.75rem);
+    margin-top: var(--vmz-space-2, 0.5rem);
 }
 
 .vmz-ui-result__actions:empty {
     display: none;
 }
+
+:where([data-density="compact"]) .vmz-ui-result {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-5, 1.5rem) var(--vmz-space-4, 1rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-result {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-4, 1rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Result (UI4 Commercial Surface).
- * Outcome block for success/error flows; status → status.* tokens.
+ * Outcome block for success/error flows; status → status.* accent tokens.
  */
 export default class Result {
     public title: string = "";
     public description: string = "";
     public status: string = "info";
+
+    statusIcon() {
+        const status = String(this.status || "").toLowerCase();
+        if (status === "success" || status === "warning") return `status.${status}`;
+        if (status === "danger" || status === "error") return "status.danger";
+        return "status.info";
+    }
 }
 </script>

package/src/components/Segmented.vmz

@@ -1,5 +1,5 @@
 <template>
-    <div data-vmz-ui="segmented" role="group" :aria-label="label" class="vmz-ui-segmented">
+    <div data-vmz-ui="segmented" role="group" :aria-label="label" :data-size="size" 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>
@@ -9,38 +9,73 @@
 .vmz-ui-segmented {
     display: inline-flex;
     max-width: 100%;
-    padding: 0.2rem;
-    border-radius: var(--vmz-radius-md, 6px);
+    padding: var(--vmz-space-1);
+    border-radius: var(--vmz-radius-lg);
     background: var(--vmz-surface-mist);
     overflow-x: auto;
 }
+
 .vmz-ui-segmented button {
-    min-height: 2rem;
-    padding: 0.25rem 0.75rem;
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
+    padding: 0 var(--vmz-space-3);
     border: 0;
-    border-radius: calc(var(--vmz-radius-md, 6px) - 2px);
+    border-radius: var(--vmz-radius-md);
     background: transparent;
     color: var(--vmz-text-steel);
     font: inherit;
     font-size: 0.875rem;
-    font-weight: 550;
+    font-weight: 500;
+    line-height: 1.5715;
     white-space: nowrap;
     cursor: pointer;
+    outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
+
+.vmz-ui-segmented[data-size="small"] button {
+    min-height: var(--vmz-control-height-sm);
+    padding: 0 var(--vmz-space-2);
+}
+
+.vmz-ui-segmented[data-size="large"] button {
+    min-height: var(--vmz-control-height-lg);
+    padding: 0 var(--vmz-space-4);
+}
+
+.vmz-ui-segmented button:hover:not([aria-pressed="true"]) {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-fill);
+}
+
 .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);
+    box-shadow: 0 0 0 1px var(--vmz-line-default);
 }
+
+.vmz-ui-segmented button[aria-pressed="true"]:hover {
+    color: var(--vmz-text-ink);
+}
+
 .vmz-ui-segmented button:focus-visible {
-    outline: 2px solid var(--vmz-focus-ring);
-    outline-offset: -2px;
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-segmented button {
+        transition: none;
+    }
 }
 </style>
 <script client>
 export default class Segmented {
-    public label: string = "Segments";
+    public label: string = "";
     public value: string = "";
+    public size: string = "middle";
     public options: Array<{ value: string; label: string }> = [];
     public onChange: ((value: string) => void) | null = null;
     onPick(next: string) {