@vmz/ui 0.1.0 → 0.1.1

package/README.md

@@ -41,3 +41,11 @@ pnpm verify -- official-dogfood
 Still open relative to Browser Production Profile v1: `browser-production` aggregate core gaps,
 `@vmz/ui-data-grid` deep capabilities, Upload cross-page session / multi-file parallel chunks,
 `@vmz/test` Browser Host U0–U1, sibling `vmz-panel` product app.
+
+## Commercial default surface
+
+Default web surface targets modern commercial console density: flat 32px-class controls,
+quiet borders, restrained radii, layered page/paper surfaces without Bootstrap-era inset
+fields, accent bars, or card lift. Applications replace every semantic value through `/designs`.
+Additional general-purpose components include layout primitives, typography, segmented controls,
+tags, avatars, dropdowns, collapse panels and progress indicators.

package/contracts/token-requirements.v0.json

@@ -241,8 +241,6 @@
             "stableHint": "ui.Dialog",
             "tokens": [
                 "action.primary.background",
-                "action.primary.foreground",
-                "action.primary.active",
                 "focus.ring",
                 "motion.overlay.duration",
                 "motion.overlay.easing"
@@ -286,14 +284,14 @@
         "Tabs": {
             "source": "src/components/Tabs.vmz",
             "stableHint": "ui.Tabs",
-            "tokens": ["action.primary.background", "action.primary.foreground", "focus.ring"],
+            "tokens": ["action.primary.background", "focus.ring"],
             "surfaces": ["WebSurface"],
             "contracts": ["tablist", "keyboard-roving", "live-selected-prop"]
         },
         "Menu": {
             "source": "src/components/Menu.vmz",
             "stableHint": "ui.Menu",
-            "tokens": ["action.primary.background", "action.primary.foreground", "action.primary.active", "focus.ring"],
+            "tokens": ["action.primary.background", "focus.ring"],
             "surfaces": ["WebSurface"],
             "contracts": ["overlay-ownership", "escape-dismiss", "focus-restore", "outside-dismiss", "live-open-prop"]
         },
@@ -302,8 +300,6 @@
             "stableHint": "ui.Drawer",
             "tokens": [
                 "action.primary.background",
-                "action.primary.foreground",
-                "action.primary.active",
                 "focus.ring",
                 "motion.overlay.duration",
                 "motion.overlay.easing"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",
@@ -52,7 +52,23 @@
     "./Accordion": "./src/components/Accordion.vmz",
     "./Steps": "./src/components/Steps.vmz",
     "./List": "./src/components/List.vmz",
-    "./Tree": "./src/components/Tree.vmz"
+    "./Tree": "./src/components/Tree.vmz",
+    "./Typography": "./src/components/Typography.vmz",
+    "./Space": "./src/components/Space.vmz",
+    "./Flex": "./src/components/Flex.vmz",
+    "./Grid": "./src/components/Grid.vmz",
+    "./Divider": "./src/components/Divider.vmz",
+    "./Tag": "./src/components/Tag.vmz",
+    "./Avatar": "./src/components/Avatar.vmz",
+    "./Dropdown": "./src/components/Dropdown.vmz",
+    "./Collapse": "./src/components/Collapse.vmz",
+    "./Progress": "./src/components/Progress.vmz",
+    "./Segmented": "./src/components/Segmented.vmz",
+    "./Layout": "./src/components/Layout.vmz",
+    "./Header": "./src/components/Header.vmz",
+    "./Sider": "./src/components/Sider.vmz",
+    "./Content": "./src/components/Content.vmz",
+    "./Footer": "./src/components/Footer.vmz"
   },
   "files": [
     "src",

package/presets/web-surface.v0.json

@@ -3,21 +3,34 @@
     "id": "web-surface",
     "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" },
+        "controlHeight": { "sm": "1.5rem", "middle": "2rem", "lg": "2.5rem" },
+        "layoutMaxWidth": "75rem",
+        "surfacePage": "#F5F5F5",
+        "surfaceFill": "#FAFAFA",
+        "textTertiary": "#8C8C8C",
+        "lineDefault": "#D9D9D9",
+        "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)"
+    },
     "density": {
         "control": {
-            "padding-y": "0.55rem",
-            "padding-x": "0.95rem",
-            "gap": "0.75rem"
+            "padding-y": "0.25rem",
+            "padding-x": "0.75rem",
+            "gap": "0.5rem"
         },
         "compact": {
-            "padding-y": "0.35rem",
-            "padding-x": "0.65rem",
-            "gap": "0.45rem"
+            "padding-y": "0.125rem",
+            "padding-x": "0.5rem",
+            "gap": "0.35rem"
         },
         "dense": {
-            "padding-y": "0.2rem",
-            "padding-x": "0.45rem",
-            "gap": "0.3rem"
+            "padding-y": "0",
+            "padding-x": "0.35rem",
+            "gap": "0.25rem"
         }
     },
     "activation": {
@@ -30,5 +43,6 @@
         "default": "application tokens base",
         "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."
 }

package/src/components/Accordion.vmz

@@ -1,112 +1,111 @@
 <template>
   <div class="vmz-ui-accordion" data-vmz-ui="accordion" aria-label={label}>
-    <div each={items} as="item" key={item.id} class="vmz-ui-accordion__item" data-vmz-accordion={item.id}>
-      <h3 class="vmz-ui-accordion__heading">
-        <button
-          type="button"
-          class="vmz-ui-accordion__trigger"
-          id={item.triggerId}
-          data-vmz-accordion-trigger={item.id}
-          aria-expanded={openId === item.id ? 'true' : 'false'}
-          aria-controls={item.panelId}
-          onClick={() => this.toggle(item.id)}
+      <div each={items} as="item" key={item.id} class="vmz-ui-accordion__item" data-vmz-accordion={item.id}>
+        <h3 class="vmz-ui-accordion__heading">
+          <button
+            type="button"
+            class="vmz-ui-accordion__trigger"
+            id={item.triggerId}
+            data-vmz-accordion-trigger={item.id}
+            aria-expanded={openId === item.id ? 'true' : 'false'}
+            aria-controls={item.panelId}
+            onClick={() => this.toggle(item.id)}
+          >
+            {item.title}
+          </button>
+        </h3>
+        <div
+          if={openId === item.id}
+          id={item.panelId}
+          class="vmz-ui-accordion__panel"
+          role="region"
+          data-vmz-accordion-panel={item.id}
+          aria-labelledby={item.triggerId}
         >
-          {item.title}
-        </button>
-      </h3>
-      <div
-        if={openId === item.id}
-        id={item.panelId}
-        class="vmz-ui-accordion__panel"
-        role="region"
-        data-vmz-accordion-panel={item.id}
-        aria-labelledby={item.triggerId}
-      >
-        {item.body}
+          {item.body}
+        </div>
       </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-accordion {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  max-width: 36rem;
-  border: 1px solid var(--vmz-line-default);
-  border-radius: 2px;
-  background: var(--vmz-surface-paper);
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-width: 36rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-accordion__item {
-  border-bottom: 1px solid var(--vmz-line-default);
-}
+  .vmz-ui-accordion__item {
+    border-bottom: 1px solid var(--vmz-line-default);
+  }
 
-.vmz-ui-accordion__item:last-child {
-  border-bottom: none;
-}
+  .vmz-ui-accordion__item:last-child {
+    border-bottom: none;
+  }
 
-.vmz-ui-accordion__heading {
-  margin: 0;
-  font: inherit;
-}
+  .vmz-ui-accordion__heading {
+    margin: 0;
+    font: inherit;
+  }
 
-.vmz-ui-accordion__trigger {
-  display: block;
-  width: 100%;
-  text-align: start;
-  font: inherit;
-  font-weight: 600;
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-accordion__trigger {
+    display: block;
+    width: 100%;
+    text-align: start;
+    font: inherit;
+    font-weight: 600;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-accordion__trigger:hover {
-  background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
-}
+  .vmz-ui-accordion__trigger:hover {
+    background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
+  }
 
-.vmz-ui-accordion__trigger:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-accordion__trigger:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
+  }
 
-.vmz-ui-accordion__trigger[aria-expanded='true'] {
-  color: var(--vmz-action-primary-active);
-}
+  .vmz-ui-accordion__trigger[aria-expanded='true'] {
+    color: var(--vmz-action-primary-active);
+  }
 
-.vmz-ui-accordion__panel {
-  padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
-  color: var(--vmz-text-steel);
-  line-height: 1.5;
-}
+  .vmz-ui-accordion__panel {
+    padding: 0 var(--vmz-density-control-padding-x) var(--vmz-density-control-padding-y);
+    color: var(--vmz-text-steel);
+    line-height: 1.5;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Accordion.
- * Exclusive open: parent owns `openId`. Toggle same id closes.
- * Panel body lives on items (no per-panel slot runtime).
- */
+* VMZ UI — Accordion.
+* Exclusive open: parent owns `openId`. Toggle same id closes.
+* Panel body lives on items (no per-panel slot runtime).
+*/
 export default class Accordion {
-  public label: string = 'Accordion';
-  public openId: string = '';
-  /** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
-  public items: {
-    id: string;
-    title: string;
-    body: string;
-    triggerId: string;
-    panelId: string;
-  }[] = [];
-  public onToggle: ((id: string) => void) | null = null;
-
-  toggle(id) {
-    if (typeof this.onToggle === 'function') this.onToggle(id);
-  }
+	public label: string = "Accordion";
+	public openId: string = "";
+	/** @type {{ id: string, title: string, body: string, triggerId: string, panelId: string }[]} */
+	public items: {
+		id: string;
+		title: string;
+		body: string;
+		triggerId: string;
+		panelId: string;
+	}[] = [];
+	public onToggle: ((id: string) => void) | null = null;
+	toggle(id) {
+		if (typeof this.onToggle === "function") this.onToggle(id);
+	}
 }
 </script>

package/src/components/Alert.vmz

@@ -1,84 +1,85 @@
 <template>
   <div
-    class="vmz-ui-alert"
-    data-vmz-ui="alert"
-    data-tone={tone}
-    role={roleName}
-  >
-    <p if={title} class="vmz-ui-alert__title">{title}</p>
-    <p if={description} class="vmz-ui-alert__description">{description}</p>
-    <div class="vmz-ui-alert__actions">
-      <slot />
+      class="vmz-ui-alert"
+      data-vmz-ui="alert"
+      data-tone={tone}
+      role={roleName}
+    >
+      <p if={title} class="vmz-ui-alert__title">{title}</p>
+      <p if={description} class="vmz-ui-alert__description">{description}</p>
+      <div class="vmz-ui-alert__actions">
+        <slot />
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-alert {
-  display: flex;
-  flex-direction: column;
-  gap: var(--vmz-density-control-gap);
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 1px solid var(--vmz-status-info-accent);
-  border-left-width: 4px;
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
-  color: var(--vmz-status-info-foreground);
-}
+  .vmz-ui-alert {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-density-control-gap);
+    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;
+    border-radius: var(--vmz-radius-md, 6px);
+    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+    color: var(--vmz-status-info-foreground);
+  }
 
-.vmz-ui-alert[data-tone='info'] {
-  border-color: var(--vmz-status-info-accent);
-  background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
-  color: var(--vmz-status-info-foreground);
-}
+  .vmz-ui-alert[data-tone='info'] {
+    border-color: var(--vmz-status-info-accent);
+    background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, transparent);
+    color: var(--vmz-status-info-foreground);
+  }
 
-.vmz-ui-alert[data-tone='success'] {
-  border-color: var(--vmz-status-success-accent);
-  background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, transparent);
-  color: var(--vmz-status-success-foreground);
-}
+  .vmz-ui-alert[data-tone='success'] {
+    border-color: var(--vmz-status-success-accent);
+    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, transparent);
+    color: var(--vmz-status-success-foreground);
+  }
 
-.vmz-ui-alert[data-tone='warning'] {
-  border-color: var(--vmz-status-warning-accent);
-  background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, transparent);
-  color: var(--vmz-status-warning-foreground);
-}
+  .vmz-ui-alert[data-tone='warning'] {
+    border-color: var(--vmz-status-warning-accent);
+    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, transparent);
+    color: var(--vmz-status-warning-foreground);
+  }
 
-.vmz-ui-alert[data-tone='danger'] {
-  border-color: var(--vmz-status-danger-accent);
-  background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
-  color: var(--vmz-status-danger-foreground);
-}
+  .vmz-ui-alert[data-tone='danger'] {
+    border-color: var(--vmz-status-danger-accent);
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+    color: var(--vmz-status-danger-foreground);
+  }
 
-:where([data-density='compact']) .vmz-ui-alert {
-  gap: var(--vmz-density-compact-gap);
-  padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-}
+  :where([data-density='compact']) .vmz-ui-alert {
+    gap: var(--vmz-density-compact-gap);
+    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+  }
 
-.vmz-ui-alert__title {
-  margin: 0;
-  font-weight: 700;
-}
+  .vmz-ui-alert__title {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
 
-.vmz-ui-alert__description {
-  margin: 0;
-  opacity: 0.9;
-}
+  .vmz-ui-alert__description {
+    margin: 0;
+    opacity: 0.9;
+  }
 
-.vmz-ui-alert__actions:empty {
-  display: none;
-}
+  .vmz-ui-alert__actions:empty {
+    display: none;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Alert (UI4 status tone matrix).
- * tone → status.{info|success|warning|danger}.* tokens from Style Theme.
- */
+* VMZ UI — Alert (UI4 status tone matrix).
+* tone → status.{info|success|warning|danger}.* tokens from Style Theme.
+*/
 export default class Alert {
-  public title: string = '';
-  public description: string = '';
-  public tone: string = 'info';
-  public roleName: string = 'status';
+	public title: string = "";
+	public description: string = "";
+	public tone: string = "info";
+	public roleName: string = "status";
 }
 </script>

package/src/components/AppShell.vmz

@@ -1,47 +1,52 @@
 <template>
   <div class="vmz-ui-app-shell" data-vmz-ui="app-shell">
-    <header class="vmz-ui-app-shell__header" data-vmz-shell="header">
-      <a class="vmz-ui-app-shell__brand" href={homeHref}>{brand}</a>
-      <nav class="vmz-ui-app-shell__nav" aria-label={navLabel}>
-        <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
-          {item.title}
-        </a>
-      </nav>
-    </header>
-    <main class="vmz-ui-app-shell__main" data-vmz-shell="main">
-      <slot />
-    </main>
-  </div>
+      <header class="vmz-ui-app-shell__header" data-vmz-shell="header"><div class="vmz-ui-app-shell__header-inner">
+        <a class="vmz-ui-app-shell__brand" href={homeHref}>{brand}</a>
+        <nav class="vmz-ui-app-shell__nav" aria-label={navLabel}>
+          <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
+            {item.title}
+          </a>
+        </nav>
+      </div></header>
+      <main class="vmz-ui-app-shell__main" data-vmz-shell="main">
+        <slot />
+      </main>
+    </div>
 </template>
 
 <style>
-.vmz-ui-app-shell {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  color: var(--vmz-text-ink);
-  background: transparent;
-}
+  .vmz-ui-app-shell {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    color: var(--vmz-text-ink);
+    background: transparent;
+  }
 
 .vmz-ui-app-shell__header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+  background: var(--vmz-surface-paper);
+}
+.vmz-ui-app-shell__header-inner {
+  width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+  min-height: 3rem;
+  margin: 0 auto;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 0.75rem 1.25rem;
-  padding: 0.9rem clamp(1rem, 3vw, 1.75rem);
-  border-bottom: 1px solid var(--vmz-line-default);
-  box-shadow: inset 0 -2px 0 var(--vmz-action-primary-background);
-  background: color-mix(in srgb, var(--vmz-surface-paper) 92%, transparent);
+  gap: 1.5rem;
 }
 
 .vmz-ui-app-shell__brand {
-  font-family: var(--vmz-font-display);
-  font-weight: 700;
-  font-size: 1.2rem;
-  letter-spacing: 0.03em;
+  font-family: var(--vmz-font-sans);
+  font-weight: 600;
+  font-size: 1.125rem;
+  letter-spacing: 0;
   text-decoration: none;
-  color: var(--vmz-action-primary-background);
+  color: var(--vmz-text-ink);
 }
 
 .vmz-ui-app-shell__brand:focus-visible {
@@ -52,18 +57,22 @@
 .vmz-ui-app-shell__nav {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.55rem 1rem;
+  gap: 0.25rem 0.15rem;
 }
 
 .vmz-ui-app-shell__nav a {
   font: inherit;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 400;
   text-decoration: none;
-  color: var(--vmz-text-steel);
+  color: var(--vmz-text-ink);
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--vmz-radius-md, 6px);
 }
 
 .vmz-ui-app-shell__nav a:hover {
-  color: var(--vmz-action-primary-active);
+  color: var(--vmz-action-primary-background);
+  background: var(--vmz-surface-mist, #fafafa);
 }
 
 .vmz-ui-app-shell__nav a:focus-visible {
@@ -73,25 +82,35 @@
 
 .vmz-ui-app-shell__main {
   flex: 1;
-  width: min(68rem, calc(100% - 2rem));
+  width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
   margin: 0 auto;
-  padding: 1.5rem 1rem 2.5rem;
+  padding: 1.5rem 0 2.5rem;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1rem;
 }
+  @media (max-width: 720px) {
+    .vmz-ui-app-shell__header-inner { min-height: 3.5rem; align-items: flex-start; flex-direction: column; gap: .35rem; padding: .7rem 0; }
+    .vmz-ui-app-shell__nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
+    .vmz-ui-app-shell__nav a { white-space: nowrap; }
+    .vmz-ui-app-shell__main { padding-top: 1.25rem; }
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — AppShell (Commercial composition).
- * Landmark header/nav + main slot. Parent supplies nav items; no private theme.
- */
+* VMZ UI — AppShell (Commercial composition).
+* Landmark header/nav + main slot. Parent supplies nav items; no private theme.
+*/
 export default class AppShell {
-  public brand: string = 'VMZ';
-  public homeHref: string = '/';
-  public navLabel: string = 'Primary';
-  /** @type {{ id: string, title: string, href: string }[]} */
-  public nav: { id: string; title: string; href: string }[] = [];
+	public brand: string = "VMZ";
+	public homeHref: string = "/";
+	public navLabel: string = "Primary";
+	/** @type {{ id: string, title: string, href: string }[]} */
+	public nav: {
+		id: string;
+		title: string;
+		href: string;
+	}[] = [];
 }
 </script>