@vmz/ui 0.3.5 → 0.3.7

package/package.json

@@ -82,7 +82,7 @@
   "license": "MIT",
   "name": "@vmz/ui",
   "peerDependencies": {
-    "@vmz/ui-icons": "0.3.5"
+    "@vmz/ui-icons": "0.3.7"
   },
   "peerDependenciesMeta": {
     "@vmz/ui-icons": {
@@ -98,5 +98,5 @@
     "url": "git+https://github.com/doki-land/vmz-framework.git"
   },
   "type": "module",
-  "version": "0.3.5"
+  "version": "0.3.7"
 }

package/presets/web-surface.v0.json

@@ -4,7 +4,13 @@
     "package": "@vmz/ui",
     "materialize": "Copy or resolve into application /designs Style Theme (tokens/*.json + themes/*.json). Preset is not a second runtime theme.",
     "foundation": {
-        "radius": { "sm": "2px", "md": "6px", "lg": "8px" },
+        "radius": {
+            "xs": "2px",
+            "sm": "4px",
+            "md": "6px",
+            "lg": "8px",
+            "pill": "999px"
+        },
         "controlHeight": { "sm": "1.5rem", "middle": "2rem", "lg": "2.5rem" },
         "layoutMaxWidth": "75rem",
         "surfacePage": "#F5F5F5",
@@ -14,22 +20,28 @@
         "lineSubtle": "#F0F0F0",
         "shadowCard": "none",
         "shadowCardHover": "0 1px 2px -2px rgba(0,0,0,.08), 0 3px 6px 0 rgba(0,0,0,.06), 0 5px 12px 4px rgba(0,0,0,.04)",
-        "shadowPopup": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)"
+        "shadowPopup": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)",
+        "elevation": {
+            "note": "Floating layers only. Cards stay flat per visualIntent; interactive surfaces lift on hover, never at rest.",
+            "float-sm": "0 1px 2px 0 rgba(0,0,0,.03), 0 1px 6px -1px rgba(0,0,0,.02), 0 2px 4px 0 rgba(0,0,0,.02)",
+            "float-md": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05)",
+            "float-lg": "0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05), 0 12px 48px 16px rgba(0,0,0,.03)"
+        }
     },
     "density": {
         "control": {
             "padding-y": "0.25rem",
-            "padding-x": "0.75rem",
+            "padding-x": "0.9375rem",
             "gap": "0.5rem"
         },
         "compact": {
             "padding-y": "0.125rem",
-            "padding-x": "0.5rem",
-            "gap": "0.35rem"
+            "padding-x": "0.625rem",
+            "gap": "0.375rem"
         },
         "dense": {
             "padding-y": "0",
-            "padding-x": "0.35rem",
+            "padding-x": "0.4375rem",
             "gap": "0.25rem"
         }
     },
@@ -44,5 +56,5 @@
         "dark": "themes/dark.json overlay",
         "high-contrast": "themes/high-contrast.json overlay — stronger ink/line/focus"
     },
-    "visualIntent": "Modern commercial product chrome: neutral structure borders (never brand outline on every box), flat cards, soft focus rings, quiet page fill. Brand color is for actions/selection — not scaffolding."
+    "visualIntent": "Modern commercial product chrome: neutral structure borders (never brand outline on every box), flat cards, soft focus rings, quiet page fill. Brand color is for actions/selection — not scaffolding. Elevation is reserved for floating layers and hover lift; nothing casts a resting shadow. Motion eases, never jumps: control transitions use a decelerate curve, overlays use a fast-in curve, and reduced-motion is honored."
 }

package/src/components/Accordion.vmz

@@ -16,7 +16,7 @@
 .vmz-ui-accordion {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 36rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
@@ -56,7 +56,7 @@
 }
 
 .vmz-ui-accordion__trigger:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: inset 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-accordion__trigger[aria-expanded="true"] {

package/src/components/AppShell.vmz

@@ -6,10 +6,13 @@
                     {{ brand }}
                 </a>
                 <nav :aria-label="navLabel" class="vmz-ui-app-shell__nav">
-                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id">
+                    <a v-for="item in nav" :key="item.id" :href="item.href" :data-vmz-nav="item.id" :data-active="item.id === activeId ? 'true' : 'false'" :aria-current="item.id === activeId ? 'page' : null" class="vmz-ui-app-shell__nav-item">
                         {{ item.title }}
                     </a>
                 </nav>
+                <div class="vmz-ui-app-shell__actions">
+                    <slot name="actions" />
+                </div>
             </div>
         </header>
         <main data-vmz-shell="main" class="vmz-ui-app-shell__main">
@@ -31,83 +34,124 @@
     top: 0;
     z-index: 30;
     border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    background: var(--vmz-surface-paper);
+    background: color-mix(in srgb, var(--vmz-surface-paper) 88%, transparent);
+    backdrop-filter: saturate(180%) blur(0.5rem);
+    -webkit-backdrop-filter: saturate(180%) blur(0.5rem);
 }
+
 .vmz-ui-app-shell__header-inner {
     width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
-    min-height: 3rem;
+    min-height: 3.5rem;
     margin: 0 auto;
     display: flex;
     align-items: center;
-    justify-content: space-between;
     gap: 1.5rem;
 }
 
 .vmz-ui-app-shell__brand {
+    flex: none;
+    color: var(--vmz-text-ink);
     font-family: var(--vmz-font-sans);
-    font-weight: 600;
-    font-size: 1.125rem;
-    letter-spacing: 0;
+    font-size: 1.0625rem;
+    font-weight: 650;
+    letter-spacing: -0.01em;
     text-decoration: none;
-    color: var(--vmz-text-ink);
+    border-radius: var(--vmz-radius-sm, 4px);
+    outline: none;
+    transition: color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-app-shell__brand:hover {
+    color: var(--vmz-action-primary-background);
 }
 
 .vmz-ui-app-shell__brand:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-app-shell__nav {
     display: flex;
+    flex: 1 1 auto;
     flex-wrap: wrap;
-    gap: 0.25rem 0.15rem;
+    gap: 0.125rem;
+    min-width: 0;
 }
 
-.vmz-ui-app-shell__nav a {
+.vmz-ui-app-shell__nav-item {
+    position: relative;
+    padding: 0.375rem 0.75rem;
+    border-radius: var(--vmz-radius-sm, 4px);
+    color: var(--vmz-text-steel);
     font: inherit;
     font-size: 0.875rem;
-    font-weight: 400;
+    font-weight: 500;
+    line-height: 1.4286;
     text-decoration: none;
-    color: var(--vmz-text-ink);
-    padding: 0.25rem 0.75rem;
-    border-radius: var(--vmz-radius-md, 6px);
+    white-space: nowrap;
+    outline: none;
+    transition:
+        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));
 }
 
-.vmz-ui-app-shell__nav a:hover {
-    color: var(--vmz-action-primary-background);
+.vmz-ui-app-shell__nav-item:hover {
+    color: var(--vmz-text-ink);
     background: var(--vmz-surface-mist, #fafafa);
 }
 
-.vmz-ui-app-shell__nav a:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+.vmz-ui-app-shell__nav-item:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+/* Current section: ink emphasis plus a hairline marker, no brand fill. */
+.vmz-ui-app-shell__nav-item[data-active="true"] {
+    color: var(--vmz-text-ink);
+    font-weight: 600;
+}
+
+.vmz-ui-app-shell__nav-item[data-active="true"]::after {
+    content: "";
+    position: absolute;
+    inset: auto 0.75rem 0;
+    height: 2px;
+    border-radius: var(--vmz-radius-pill, 999px);
+    background: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-app-shell__actions {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
 }
 
 .vmz-ui-app-shell__main {
     flex: 1;
     width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
     margin: 0 auto;
-    padding: 1.5rem 0 2.5rem;
+    padding: 1.75rem 0 3rem;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
+
 @media (max-width: 720px) {
     .vmz-ui-app-shell__header-inner {
-        min-height: 3.5rem;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 0.35rem;
-        padding: 0.7rem 0;
+        flex-wrap: wrap;
+        gap: 0.5rem 0.75rem;
+        padding: 0.625rem 0;
     }
     .vmz-ui-app-shell__nav {
-        width: 100%;
+        order: 3;
+        flex-basis: 100%;
         overflow-x: auto;
         flex-wrap: nowrap;
-        padding-bottom: 0.2rem;
+        padding-bottom: 0.125rem;
+        scrollbar-width: none;
     }
-    .vmz-ui-app-shell__nav a {
-        white-space: nowrap;
+    .vmz-ui-app-shell__nav::-webkit-scrollbar {
+        display: none;
     }
     .vmz-ui-app-shell__main {
         padding-top: 1.25rem;
@@ -117,12 +161,15 @@
 <script client>
 /**
  * VMZ UI — AppShell (Commercial composition).
- * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
+ * Landmark header/nav + main slot. `nav` stays flat link-only; non-nav controls
+ * go into the named `actions` slot. Parent supplies copy; no private theme.
  */
 export default class AppShell {
     public brand: string = "VMZ";
     public homeHref: string = "/";
     public navLabel: string = "Primary";
+    /** Id of the nav item representing the current page, for `aria-current` + marker. */
+    public activeId: string = "";
     /** @type {{ id: string, title: string, href: string }[]} */
     public nav: {
         id: string;

package/src/components/Autocomplete.vmz

@@ -25,7 +25,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
     max-width: 28rem;
 }
 
@@ -49,7 +49,7 @@
 }
 
 .vmz-ui-autocomplete__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-autocomplete__control:disabled {
@@ -70,7 +70,7 @@
 
 .vmz-ui-autocomplete__option {
     margin: 0;
-    padding: 0.45rem 0.75rem;
+    padding: 0.5rem 0.75rem;
     cursor: pointer;
     font-weight: 600;
     color: var(--vmz-text-ink);

package/src/components/Badge.vmz

@@ -8,7 +8,7 @@
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
-    padding: 0.15rem 0.45rem;
+    padding: 0.125rem 0.5rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     font-size: 0.75rem;

package/src/components/Breadcrumb.vmz

@@ -20,7 +20,7 @@
 .vmz-ui-breadcrumb__list {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.35rem 0.55rem;
+    gap: 0.375rem 0.5rem;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -30,7 +30,7 @@
 .vmz-ui-breadcrumb__item {
     display: inline-flex;
     align-items: center;
-    gap: 0.55rem;
+    gap: 0.5rem;
     font-weight: 600;
 }
 
@@ -48,7 +48,7 @@
 
 .vmz-ui-breadcrumb__link:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-breadcrumb__current {

package/src/components/BulkActions.vmz

@@ -14,8 +14,8 @@
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: 0.65rem 1rem;
-    padding: 0.65rem 0.85rem;
+    gap: 0.625rem 1rem;
+    padding: 0.625rem 0.85rem;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;

package/src/components/Button.vmz

@@ -13,34 +13,38 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: 0.35rem;
+    gap: 0.375rem;
+    /* Inline control: never stretch when the parent is a flex column (shells, card bodies). */
+    width: fit-content;
     min-height: var(--vmz-control-height, 2rem);
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border: 1px solid transparent;
     border-radius: var(--vmz-radius-md, 6px);
     font: inherit;
     font-size: 0.875rem;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 1.5715;
+    white-space: nowrap;
     cursor: pointer;
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
     outline: none;
-    box-shadow: none;
+    box-shadow: 0 2px 0 color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
     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),
-        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        color var(--vmz-motion-control-duration, 120ms) 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, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
 .vmz-ui-btn[data-size="small"] {
     min-height: var(--vmz-control-height-sm, 1.5rem);
-    padding: 0 0.5rem;
-    font-size: 0.875rem;
+    padding: 0 0.625rem;
+    font-size: 0.8125rem;
 }
 .vmz-ui-btn[data-size="large"] {
     min-height: var(--vmz-control-height-lg, 2.5rem);
-    padding: 0.4rem 1rem;
+    padding: 0.4375rem 1.125rem;
     font-size: 1rem;
 }
 .vmz-ui-btn[data-block="true"] {
@@ -52,9 +56,10 @@
 .vmz-ui-btn__spinner {
     width: 1em;
     height: 1em;
-    border: 2px solid currentColor;
+    border: 1.5px solid currentColor;
     border-right-color: transparent;
     border-radius: 50%;
+    opacity: 0.8;
     animation: vmz-btn-spin 0.7s linear infinite;
 }
 @keyframes vmz-btn-spin {
@@ -69,35 +74,37 @@
 
 .vmz-ui-btn:active:not(:disabled) {
     background: var(--vmz-action-primary-active);
+    transform: translateY(0.5px);
 }
 
 .vmz-ui-btn[data-variant="secondary"] {
     background: var(--vmz-action-secondary-background);
     color: var(--vmz-action-secondary-foreground);
     border-color: var(--vmz-action-secondary-border);
+    box-shadow: none;
 }
 .vmz-ui-btn[data-variant="default"] {
-    background: #fff;
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
     border-color: var(--vmz-line-default);
     box-shadow: none;
 }
 .vmz-ui-btn[data-variant="default"]:hover:not(:disabled) {
-    color: var(--vmz-action-primary-background);
-    border-color: var(--vmz-action-primary-background);
-    background: #fff;
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-surface-paper);
 }
 .vmz-ui-btn[data-variant="text"],
 .vmz-ui-btn[data-variant="link"] {
     min-height: auto;
-    padding: 0.25rem 0.35rem;
+    padding: 0.25rem 0.5rem;
     border-color: transparent;
     background: transparent;
     color: var(--vmz-action-primary-background);
     box-shadow: none;
 }
 .vmz-ui-btn[data-variant="dashed"] {
-    background: #fff;
+    background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
     border: 1px dashed var(--vmz-line-default);
     box-shadow: none;
@@ -141,12 +148,23 @@
 }
 
 .vmz-ui-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-btn[data-variant="default"]:focus-visible,
+.vmz-ui-btn[data-variant="dashed"]:focus-visible,
+.vmz-ui-btn[data-variant="secondary"]:focus-visible,
+.vmz-ui-btn[data-variant="ghost"]:focus-visible,
+.vmz-ui-btn[data-variant="text"]:focus-visible,
+.vmz-ui-btn[data-variant="link"]:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
 .vmz-ui-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
+    box-shadow: none;
+    transform: none;
 }
 
 :where([data-density="compact"]) .vmz-ui-btn {
@@ -161,6 +179,9 @@
     .vmz-ui-btn {
         transition: none;
     }
+    .vmz-ui-btn:active:not(:disabled) {
+        transform: none;
+    }
 }
 </style>
 <script client>

package/src/components/Callout.vmz

@@ -15,7 +15,7 @@
 .vmz-ui-callout {
     display: flex;
     flex-direction: column;
-    gap: 0.45rem;
+    gap: 0.5rem;
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border: 1px solid var(--vmz-status-info-accent);
     border-left-width: 1px;

package/src/components/Card.vmz

@@ -18,7 +18,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    padding: 1rem 1.25rem;
+    padding: 1.25rem 1.5rem;
     border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
     border-radius: var(--vmz-radius-lg, 8px);
     background: var(--vmz-surface-paper);
@@ -30,19 +30,33 @@
 }
 .vmz-ui-card[data-hoverable="true"] {
     transition:
-        border-color var(--vmz-motion-control-duration, 0.16s),
-        box-shadow var(--vmz-motion-control-duration, 0.16s);
+        border-color var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
+        box-shadow var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
+        transform var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1));
 }
 .vmz-ui-card[data-hoverable="true"]:hover {
+    border-color: var(--vmz-line-default);
     box-shadow: var(
         --vmz-shadow-card-hover,
         0 1px 2px -2px rgba(0, 0, 0, 0.08),
         0 3px 6px 0 rgba(0, 0, 0, 0.06)
     );
+    transform: translateY(-1px);
+}
+.vmz-ui-card[data-hoverable="true"]:focus-within {
+    border-color: var(--vmz-action-primary-background);
+}
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-card[data-hoverable="true"] {
+        transition: none;
+    }
+    .vmz-ui-card[data-hoverable="true"]:hover {
+        transform: none;
+    }
 }
 .vmz-ui-card[data-size="small"] {
     gap: 0.5rem;
-    padding: 0.75rem 1rem;
+    padding: 0.875rem 1rem;
 }
 
 :where([data-density="compact"]) .vmz-ui-card {
@@ -58,7 +72,7 @@
 .vmz-ui-card__header {
     display: flex;
     flex-direction: column;
-    gap: 0.35rem;
+    gap: 0.375rem;
 }
 
 .vmz-ui-card__title {

package/src/components/Checkbox.vmz

@@ -10,7 +10,7 @@
 .vmz-ui-checkbox {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
+    gap: 0.5rem;
     font: inherit;
     cursor: pointer;
 }
@@ -23,7 +23,7 @@
 }
 
 .vmz-ui-checkbox__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-checkbox__input:disabled {