@vmz/ui 0.3.5 → 0.3.7

package/src/components/Dropdown.vmz

@@ -1,12 +1,18 @@
 <template>
-    <details data-vmz-ui="dropdown" class="vmz-ui-dropdown">
-        <summary data-vmz-dropdown-trigger="1">
+    <details data-vmz-ui="dropdown" data-vmz-motion="overlay" data-vmz-motion-token="motion.overlay" class="vmz-ui-dropdown">
+        <summary data-vmz-dropdown-trigger="1" class="vmz-ui-dropdown__trigger">
             {{ label }}
         </summary>
-        <div data-vmz-dropdown-menu="1" class="vmz-ui-dropdown__menu">
-            <a v-for="item in items" :key="item.id" :href="item.href" :data-vmz-dropdown-item="item.id">
-                {{ item.title }}
-            </a>
+        <div data-vmz-dropdown-menu="1" role="menu" class="vmz-ui-dropdown__menu">
+            <div v-for="item in items" :key="item.id" class="vmz-ui-dropdown__row">
+                <div v-if="item.divider" role="separator" class="vmz-ui-dropdown__divider" />
+                <a v-else-if="hasHref(item)" :href="item.href" role="menuitem" :data-vmz-dropdown-item="item.id" :data-danger="item.danger ? 'true' : 'false'" :data-disabled="item.disabled ? 'true' : 'false'" :aria-disabled="item.disabled ? 'true' : null" :tabindex="item.disabled ? -1 : null" class="vmz-ui-dropdown__item">
+                    {{ item.title }}
+                </a>
+                <button v-else type="button" role="menuitem" :data-vmz-dropdown-item="item.id" :data-danger="item.danger ? 'true' : 'false'" :data-disabled="item.disabled ? 'true' : 'false'" :aria-disabled="item.disabled ? 'true' : null" :tabindex="item.disabled ? -1 : null" @click="onItemClick" class="vmz-ui-dropdown__item">
+                    {{ item.title }}
+                </button>
+            </div>
         </div>
     </details>
 </template>
@@ -15,47 +21,206 @@
     position: relative;
     display: inline-block;
 }
-.vmz-ui-dropdown summary {
+
+.vmz-ui-dropdown__trigger {
     list-style: none;
     min-height: 2.5rem;
     display: inline-flex;
     align-items: center;
-    padding: 0 0.85rem;
+    gap: 0.375rem;
+    padding: 0 0.9375rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
     cursor: pointer;
     font-weight: 550;
+    outline: none;
+    transition:
+        border-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)),
+        box-shadow var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/* Chevron: affordance that the trigger opens a surface, not a page. */
+.vmz-ui-dropdown__trigger::after {
+    content: "";
+    width: 0.4375rem;
+    height: 0.4375rem;
+    margin-top: -0.1875rem;
+    border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor;
+    opacity: 0.55;
+    transform: rotate(45deg);
+    transition: transform var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
+
 .vmz-ui-dropdown summary::-webkit-details-marker {
     display: none;
 }
+
+.vmz-ui-dropdown__trigger:hover {
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-dropdown__trigger:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-dropdown[open] > .vmz-ui-dropdown__trigger {
+    border-color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-dropdown[open] > .vmz-ui-dropdown__trigger::after {
+    margin-top: 0.125rem;
+    transform: rotate(-135deg);
+}
+
 .vmz-ui-dropdown__menu {
     position: absolute;
-    top: calc(100% + 0.35rem);
+    top: calc(100% + 0.375rem);
     right: 0;
     z-index: 50;
     min-width: 11rem;
-    padding: 0.3rem;
-    border: 1px solid var(--vmz-line-default);
+    padding: 0.25rem;
+    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
     border-radius: var(--vmz-radius-lg, 8px);
     background: var(--vmz-surface-paper);
     box-shadow: var(--vmz-shadow-popup);
+    transform-origin: top right;
+    animation: vmz-dropdown-in var(--vmz-motion-overlay-duration, 180ms) var(--vmz-motion-overlay-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+@keyframes vmz-dropdown-in {
+    from {
+        opacity: 0;
+        transform: translateY(-0.25rem) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
-.vmz-ui-dropdown__menu a {
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-dropdown__menu {
+        animation: none;
+    }
+    .vmz-ui-dropdown__trigger,
+    .vmz-ui-dropdown__trigger::after {
+        transition: none;
+    }
+}
+
+.vmz-ui-dropdown__row {
+    display: contents;
+}
+
+.vmz-ui-dropdown__item {
     display: block;
-    padding: 0.55rem 0.7rem;
-    border-radius: var(--vmz-radius-sm, 2px);
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 0;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
     color: var(--vmz-text-ink);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.875rem;
+    line-height: 1.4286;
+    text-align: left;
     text-decoration: none;
+    outline: none;
+    transition:
+        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-dropdown__item:hover {
+    background: var(--vmz-surface-mist);
 }
-.vmz-ui-dropdown__menu a:hover {
+
+.vmz-ui-dropdown__item:focus-visible {
     background: var(--vmz-surface-mist);
+    box-shadow: inset 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-dropdown__item[data-danger="true"] {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-dropdown__item[data-danger="true"]:hover {
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+}
+
+.vmz-ui-dropdown__item[data-disabled="true"] {
+    color: var(--vmz-text-steel);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.vmz-ui-dropdown__divider {
+    height: 1px;
+    margin: 0.25rem 0.5rem;
+    background: var(--vmz-line-subtle, var(--vmz-line-default));
 }
 </style>
 <script client>
+/**
+ * VMZ UI — Dropdown (Menu).
+ * Native `<details>` disclosure: works without JS. An item with a non-empty
+ * `href` is a plain link; an item without `href` is an action button that
+ * notifies via `onSelect(id)`. Selection handlers never navigate.
+ */
+export type DropdownItem = {
+    id: string;
+    title: string;
+    /** Non-empty → link item (native navigation). Empty/absent → action item. */
+    href?: string;
+    /** Destructive action styling. */
+    danger?: boolean;
+    /** Non-interactive state: neither navigates nor selects. */
+    disabled?: boolean;
+    /** Render a separator instead of a row (title/href are ignored). */
+    divider?: boolean;
+};
+
 export default class Dropdown {
     public label: string = "Menu";
-    public items: Array<{ id: string; title: string; href: string }> = [];
+    public items: DropdownItem[] = [];
+    /** Action-item selection callback (`:on-select`). Link items bypass it. */
+    public onSelect: ((id: string) => void) | null = null;
+
+    hasHref(item) {
+        return typeof item?.href === "string" && item.href.length > 0;
+    }
+
+    onItemClick(ev) {
+        const el = ev && ev.currentTarget;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-dropdown-item")
+                : null;
+        if (!id) return;
+        const item = this.items.find((candidate) => candidate.id === id);
+        if (!item || item.disabled || this.hasHref(item)) return;
+        this.close();
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+
+    close() {
+        const root = this.__vmzDomRoot;
+        if (!root) return;
+        const details =
+            root.tagName === "DETAILS"
+                ? root
+                : typeof root.closest === "function"
+                  ? root.closest("details")
+                  : null;
+        if (details && typeof details.removeAttribute === "function") {
+            details.removeAttribute("open");
+        }
+    }
 }
 </script>

package/src/components/Empty.vmz

@@ -16,7 +16,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.65rem;
+    gap: 0.625rem;
     padding: 1.5rem 1.15rem;
     border: 1px dashed var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);

package/src/components/Field.vmz

@@ -16,7 +16,7 @@
 .vmz-ui-field {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 
@@ -43,9 +43,9 @@
     outline: none;
     transition:
         border-color var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, linear),
+            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
         box-shadow var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, linear);
+            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-field__control::placeholder {
@@ -63,7 +63,7 @@
 
 .vmz-ui-field__control:focus-visible {
     border-color: var(--vmz-action-primary-background);
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-field__control:disabled {

package/src/components/FormItem.vmz

@@ -23,7 +23,7 @@
 .vmz-ui-form-item {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 

package/src/components/Link.vmz

@@ -1,5 +1,5 @@
 <template>
-    <a data-vmz-ui="link" :href="href" :target="target" :rel="rel" class="vmz-ui-link">
+    <a data-vmz-ui="link" :data-variant="variant" :href="href" :target="target" :rel="rel" class="vmz-ui-link">
         <slot />
     </a>
 </template>
@@ -9,13 +9,19 @@
     font-weight: 600;
     color: var(--vmz-action-primary-background);
     text-decoration: underline;
-    text-underline-offset: 0.15em;
+    text-underline-offset: 0.2em;
     text-decoration-thickness: 1px;
+    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
     outline: none;
+    border-radius: var(--vmz-radius-sm, 4px);
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        text-decoration-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-link:hover {
     color: var(--vmz-action-primary-hover);
+    text-decoration-color: currentColor;
 }
 
 .vmz-ui-link:active {
@@ -23,8 +29,30 @@
 }
 
 .vmz-ui-link:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-    border-radius: var(--vmz-radius-md, 6px);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+/* Quiet inline link: neutral ink, underline appears only on intent. */
+.vmz-ui-link[data-variant="muted"] {
+    color: var(--vmz-text-steel);
+    text-decoration-color: transparent;
+}
+
+.vmz-ui-link[data-variant="muted"]:hover {
+    color: var(--vmz-action-primary-background);
+    text-decoration-color: currentColor;
+}
+
+/* Navigation link: chrome, not prose — underline is the hover affordance. */
+.vmz-ui-link[data-variant="nav"] {
+    font-weight: 500;
+    text-decoration: none;
+    text-decoration-color: transparent;
+}
+
+.vmz-ui-link[data-variant="nav"]:hover {
+    text-decoration: underline;
+    text-decoration-color: currentColor;
 }
 </style>
 <script client>
@@ -37,5 +65,11 @@ export default class Link {
     public href: string = "#";
     public target: string = "";
     public rel: string = "";
+    /**
+     * `default` inline prose link · `muted` quiet inline link · `nav` chrome link.
+     * Appearance/semantic hint only: navigation, `href`, `target` and `rel` are
+     * unaffected, and unknown values render as `default` without error.
+     */
+    public variant: string = "default";
 }
 </script>

package/src/components/List.vmz

@@ -14,7 +14,7 @@
 .vmz-ui-list {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 
@@ -55,7 +55,7 @@
 }
 
 .vmz-ui-list__item:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 </style>
 <script client>

package/src/components/Menu.vmz

@@ -36,7 +36,7 @@
 }
 
 .vmz-ui-menu__trigger:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-menu__panel {
@@ -55,7 +55,7 @@
 }
 
 .vmz-ui-menu__panel:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-menu__item {
@@ -63,7 +63,7 @@
     width: 100%;
     text-align: left;
     font: inherit;
-    padding: 0.4rem 0.65rem;
+    padding: 0.375rem 0.625rem;
     border: 0;
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
@@ -78,7 +78,7 @@
 }
 
 .vmz-ui-menu__item:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 </style>
 <script client>

package/src/components/Pagination.vmz

@@ -1,13 +1,13 @@
 <template>
     <nav data-vmz-ui="pagination" :aria-label="label" class="vmz-ui-pagination">
         <button type="button" :disabled="prevDisabled" @click="onPrevClick" class="vmz-ui-pagination__btn">
-            Previous
+            {{ prevLabel }}
         </button>
         <p data-vmz-fixture="page-status" class="vmz-ui-pagination__status">
             {{ status }}
         </p>
         <button type="button" :disabled="nextDisabled" @click="onNextClick" class="vmz-ui-pagination__btn">
-            Next
+            {{ nextLabel }}
         </button>
     </nav>
 </template>
@@ -16,13 +16,13 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.65rem 1rem;
+    gap: 0.625rem 1rem;
 }
 
 .vmz-ui-pagination__btn {
     font: inherit;
     font-weight: 600;
-    padding: 0.35rem 0.7rem;
+    padding: 0.375rem 0.7rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
@@ -32,7 +32,7 @@
 }
 
 .vmz-ui-pagination__btn:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-pagination__btn:disabled {
@@ -52,6 +52,8 @@
  */
 export default class Pagination {
     public label: string = "Pagination";
+    public prevLabel: string = "Previous";
+    public nextLabel: string = "Next";
     public status: string = "Page 1 / 1";
     public prevDisabled: boolean = true;
     public nextDisabled: boolean = true;

package/src/components/Popover.vmz

@@ -72,7 +72,7 @@
 }
 
 .vmz-ui-popover__panel:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-popover__title {
@@ -87,7 +87,7 @@
 .vmz-ui-popover__close {
     font: inherit;
     font-weight: 600;
-    padding: 0.4rem 0.7rem;
+    padding: 0.375rem 0.7rem;
     border: 1px solid transparent;
     border-radius: var(--vmz-radius-md, 6px);
     cursor: pointer;
@@ -96,7 +96,7 @@
 }
 
 .vmz-ui-popover__close:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 </style>
 <script client>

package/src/components/Prose.vmz

@@ -54,7 +54,7 @@
 }
 
 .vmz-ui-prose :where(li + li) {
-    margin-top: 0.35rem;
+    margin-top: 0.375rem;
 }
 
 .vmz-ui-prose :where(a) {

package/src/components/RadioGroup.vmz

@@ -23,7 +23,7 @@
 .vmz-ui-radio-group {
     display: flex;
     flex-direction: column;
-    gap: 0.45rem;
+    gap: 0.5rem;
     max-width: 28rem;
     margin: 0;
     padding: 0;
@@ -40,13 +40,13 @@
 .vmz-ui-radio-group__list {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
 }
 
 .vmz-ui-radio-group__option {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
+    gap: 0.5rem;
     font: inherit;
     cursor: pointer;
 }
@@ -59,7 +59,7 @@
 }
 
 .vmz-ui-radio-group__input:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-radio-group__input:disabled {

package/src/components/Segmented.vmz

@@ -16,7 +16,7 @@
 }
 .vmz-ui-segmented button {
     min-height: 2rem;
-    padding: 0.3rem 0.75rem;
+    padding: 0.25rem 0.75rem;
     border: 0;
     border-radius: calc(var(--vmz-radius-md, 6px) - 2px);
     background: transparent;

package/src/components/Select.vmz

@@ -42,7 +42,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 
@@ -56,7 +56,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.55rem;
+    gap: 0.5rem;
     width: 100%;
     min-height: var(--vmz-control-height, 2rem);
     box-sizing: border-box;
@@ -72,9 +72,9 @@
     cursor: pointer;
     transition:
         border-color var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, linear),
+            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
         box-shadow var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, linear);
+            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-select[data-invalid="true"] .vmz-ui-select__control {
@@ -88,7 +88,7 @@
 .vmz-ui-select__control:focus-visible,
 .vmz-ui-select.is-opened .vmz-ui-select__control {
     border-color: var(--vmz-action-primary-background);
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-select__control:disabled {
@@ -139,7 +139,7 @@
 }
 
 .vmz-ui-select__search {
-    padding: 0.4rem 0.45rem 0.15rem;
+    padding: 0.375rem 0.5rem 0.125rem;
 }
 
 .vmz-ui-select__search-input {
@@ -147,7 +147,7 @@
     box-sizing: border-box;
     font: inherit;
     font-size: 0.875rem;
-    padding: 0.25rem 0.55rem;
+    padding: 0.25rem 0.5rem;
     border: 1px solid var(--vmz-line-default, #d9d9d9);
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper, #fff);
@@ -156,7 +156,7 @@
 }
 
 .vmz-ui-select__search-input:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-select__list {
@@ -169,7 +169,7 @@
 }
 
 .vmz-ui-select__empty {
-    padding: 0.55rem 0.65rem;
+    padding: 0.5rem 0.625rem;
     opacity: 0.7;
     font-size: 0.92em;
 }
@@ -180,7 +180,7 @@
     box-sizing: border-box;
     text-align: left;
     font: inherit;
-    padding: 0.4rem 0.65rem;
+    padding: 0.375rem 0.625rem;
     border: 0;
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
@@ -202,14 +202,14 @@
 .vmz-ui-select__footer {
     display: flex;
     justify-content: flex-end;
-    padding: 0.35rem 0.45rem 0.45rem;
+    padding: 0.375rem 0.5rem 0.5rem;
     border-top: 1px solid var(--vmz-line-default, #d9dee3);
 }
 
 .vmz-ui-select__done {
     font: inherit;
     font-weight: 600;
-    padding: 0.3rem 0.7rem;
+    padding: 0.25rem 0.7rem;
     border: 1px solid var(--vmz-line-default, #d9dee3);
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper, #fff);

package/src/components/Steps.vmz

@@ -70,7 +70,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
-    padding-top: 0.15rem;
+    padding-top: 0.125rem;
 }
 
 .vmz-ui-steps__title {

package/src/components/Switch.vmz

@@ -12,7 +12,7 @@
 .vmz-ui-switch {
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
+    gap: 0.5rem;
     font: inherit;
     cursor: pointer;
 }
@@ -35,7 +35,7 @@
 }
 
 .vmz-ui-switch__control:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-switch__control:disabled {