@vmz/ui 0.0.4 → 0.1.1

package/README.md

@@ -21,18 +21,31 @@ Headline surface for this cut:
 
 - Commercial / Console / Document-Product composition dogfood (homepage)
 - Form depth, Structure, Overlay stacking, DataTable (ordinary HTML table — not `@vmz/ui-data-grid`)
+- DatePicker owned calendar overlay (not native `input[type=date]` popup)
+- Upload multipart binary (parent-owned FormData → `#server` File/Blob; progress/cancel)
 - Density / RTL / preset materialize
 - Motion continuity + interrupt/cancel
 - Motion compiler IR thin gate (`pnpm verify -- motion-ir`)
 - UI7 conformance pack (`@vmz/ui/conformance` + `pnpm verify -- ui7`)
+- `@vmz/ui-data-grid` thin gate (virtualization + pinned column — not tree/group/pivot/edit)
 
 Verify:
 
 ```bash
 pnpm verify -- ui-automation
 pnpm verify -- ui7
+pnpm verify -- ui-data-grid
 pnpm verify -- official-dogfood
 ```
 
-Still open relative to Browser Production Profile v1: `browser-production` aggregate core gaps, `@vmz/ui-data-grid`, UI7
-browser-timing depth, sibling `vmz-panel` product app.
+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

@@ -116,17 +116,56 @@
                 "status.danger.foreground",
                 "focus.ring",
                 "density.control.padding-y",
-                "density.control.padding-x"
+                "density.control.padding-x",
+                "surface.paper"
             ],
             "surfaces": ["WebSurface"],
-            "contracts": ["label", "description", "error", "native-date", "parent-owned-value"]
+            "contracts": [
+                "label",
+                "description",
+                "error",
+                "calendar-overlay",
+                "no-native-date-popup",
+                "parent-owned-value",
+                "overlay-escape-outside"
+            ]
         },
         "Upload": {
             "source": "src/components/Upload.vmz",
             "stableHint": "ui.Upload",
-            "tokens": ["status.danger.foreground", "text.ink", "text.steel", "font.mono", "focus.ring", "density.control.padding-y"],
+            "tokens": [
+                "status.danger.foreground",
+                "status.success.foreground",
+                "action.primary.background",
+                "surface.paper",
+                "line.default",
+                "text.ink",
+                "text.steel",
+                "font.mono",
+                "focus.ring",
+                "density.control.padding-y",
+                "density.compact.padding-y",
+                "density.compact.padding-x",
+                "motion.control.duration",
+                "motion.control.easing"
+            ],
             "surfaces": ["WebSurface"],
-            "contracts": ["label", "description", "error", "native-file", "parent-owned-filename", "no-upload-runtime"]
+            "contracts": [
+                "label",
+                "description",
+                "error",
+                "drop-zone",
+                "selection-constraints",
+                "queue",
+                "progress",
+                "cancel",
+                "destination-client",
+                "destination-server",
+                "destination-object",
+                "all-in-one-transport",
+                "parent-owned-result-value",
+                "no-useUpload"
+            ]
         },
         "Field": {
             "source": "src/components/Field.vmz",
@@ -202,8 +241,6 @@
             "stableHint": "ui.Dialog",
             "tokens": [
                 "action.primary.background",
-                "action.primary.foreground",
-                "action.primary.active",
                 "focus.ring",
                 "motion.overlay.duration",
                 "motion.overlay.easing"
@@ -247,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"]
         },
@@ -263,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.0.4",
+  "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>