@vmz/ui 0.1.0 → 0.1.2

package/src/components/Dropdown.vmz

@@ -0,0 +1,22 @@
+<template>
+  <details class="vmz-ui-dropdown" data-vmz-ui="dropdown">
+    <summary>{label}</summary>
+    <div class="vmz-ui-dropdown__menu">
+      <a each={items} as="item" key={item.id} href={item.href}>{item.title}</a>
+    </div>
+  </details>
+</template>
+<style>
+.vmz-ui-dropdown{position:relative;display:inline-block}
+.vmz-ui-dropdown summary{list-style:none;min-height:2.5rem;display:inline-flex;align-items:center;padding:0 .85rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-md,6px);background:var(--vmz-surface-paper);cursor:pointer;font-weight:550}
+.vmz-ui-dropdown summary::-webkit-details-marker{display:none}
+.vmz-ui-dropdown__menu{position:absolute;top:calc(100% + .35rem);right:0;z-index:50;min-width:11rem;padding:.3rem;border:1px solid var(--vmz-line-default);border-radius:var(--vmz-radius-lg,8px);background:var(--vmz-surface-paper);box-shadow:var(--vmz-shadow-popup)}
+.vmz-ui-dropdown__menu a{display:block;padding:.55rem .7rem;border-radius:var(--vmz-radius-sm,2px);color:var(--vmz-text-ink);text-decoration:none}
+.vmz-ui-dropdown__menu a:hover{background:var(--vmz-surface-mist)}
+</style>
+<script client>
+export default class Dropdown {
+  public label: string = 'Menu';
+  public items: Array<{ id: string; title: string; href: string }> = [];
+}
+</script>

package/src/components/Empty.vmz

@@ -1,52 +1,52 @@
 <template>
   <div class="vmz-ui-empty" data-vmz-ui="empty">
-    <h2 class="vmz-ui-empty__title">{title}</h2>
-    <p if={description} class="vmz-ui-empty__description">{description}</p>
-    <div class="vmz-ui-empty__actions">
-      <slot />
+      <h2 class="vmz-ui-empty__title">{title}</h2>
+      <p if={description} class="vmz-ui-empty__description">{description}</p>
+      <div class="vmz-ui-empty__actions">
+        <slot />
+      </div>
     </div>
-  </div>
 </template>
 
 <style>
-.vmz-ui-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.65rem;
-  padding: 1.5rem 1.15rem;
-  border: 1px dashed var(--vmz-line-default);
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--vmz-surface-mist) 70%, var(--vmz-surface-paper));
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.65rem;
+    padding: 1.5rem 1.15rem;
+    border: 1px dashed var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: color-mix(in srgb, var(--vmz-surface-mist) 70%, var(--vmz-surface-paper));
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-empty__title {
-  margin: 0;
-  font-family: var(--vmz-font-display);
-  font-size: 1.1rem;
-  font-weight: 700;
-}
+  .vmz-ui-empty__title {
+    margin: 0;
+    font-family: var(--vmz-font-display);
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
 
-.vmz-ui-empty__description {
-  margin: 0;
-  color: var(--vmz-text-steel);
-  max-width: 36rem;
-  line-height: 1.45;
-}
+  .vmz-ui-empty__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    max-width: 36rem;
+    line-height: 1.45;
+  }
 
-.vmz-ui-empty__actions:empty {
-  display: none;
-}
+  .vmz-ui-empty__actions:empty {
+    display: none;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Empty (Commercial composition).
- * Empty / zero-state surface with optional action slot.
- */
+* VMZ UI — Empty (Commercial composition).
+* Empty / zero-state surface with optional action slot.
+*/
 export default class Empty {
-  public title: string = 'Nothing here yet';
-  public description: string = '';
+	public title: string = "Nothing here yet";
+	public description: string = "";
 }
 </script>

package/src/components/Field.vmz

@@ -1,19 +1,22 @@
 <template>
   <div class="vmz-ui-field" data-vmz-ui="field" data-invalid={invalidAttr}>
-    <label if={label} class="vmz-ui-field__label" for={controlId}>{label}</label>
-    <input
-      id={controlId}
-      class="vmz-ui-field__control"
-      type={type}
-      value={value}
-      disabled={disabled}
-      aria-invalid={error ? 'true' : 'false'}
-      aria-describedby={describedBy}
-      onInput={onInput}
-    />
-    <p if={description} id={descriptionId} class="vmz-ui-field__description">{description}</p>
-    <p if={error} id={errorId} class="vmz-ui-field__error" role="alert">{error}</p>
-  </div>
+      <label if={label} class="vmz-ui-field__label" for={controlId}>{label}</label>
+      <input
+        id={controlId}
+        class="vmz-ui-field__control"
+        type={type}
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-invalid={error ? 'true' : 'false'}
+        aria-describedby={describedBy}
+        onInput={onInput}
+      />
+      <p if={description} id={descriptionId} class="vmz-ui-field__description">{description}</p>
+      <p if={error} id={errorId} class="vmz-ui-field__error" role="alert">{error}</p>
+    </div>
 </template>
 
 <style>
@@ -26,63 +29,89 @@
 
 .vmz-ui-field__label {
   font: inherit;
-  font-weight: 600;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--vmz-text-ink, inherit);
 }
 
 .vmz-ui-field__control {
-  font: inherit;
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-  background: transparent;
-  color: inherit;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--vmz-control-height, 2rem);
+  font-family: var(--vmz-font-sans, inherit);
+  font-size: 0.875rem;
+  line-height: 1.5715;
+  padding: var(--vmz-density-control-padding-y, 0.25rem)
+    var(--vmz-density-control-padding-x, 0.75rem);
+  border: 1px solid var(--vmz-line-default, #d9d9d9);
+  border-radius: var(--vmz-radius-md, 6px);
+  background: var(--vmz-surface-paper, #fff);
+  color: var(--vmz-text-ink, inherit);
   outline: none;
+  transition:
+    border-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear),
+    box-shadow var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, linear);
+}
+
+.vmz-ui-field__control::placeholder {
+  color: var(--vmz-text-steel, #8c8c8c);
+  opacity: 1;
 }
 
 .vmz-ui-field[data-invalid='true'] .vmz-ui-field__control {
   border-color: var(--vmz-status-danger-accent);
 }
 
+.vmz-ui-field__control:hover:not(:disabled):not(:focus-visible) {
+  border-color: var(--vmz-action-primary-background);
+}
+
 .vmz-ui-field__control:focus-visible {
+  border-color: var(--vmz-action-primary-background);
   box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-field__control:disabled {
   opacity: 0.55;
   cursor: not-allowed;
+  background: var(--vmz-surface-mist, #fafafa);
 }
 
 .vmz-ui-field__description {
   margin: 0;
-  opacity: 0.75;
-  font-size: 0.9em;
+  color: var(--vmz-text-steel, #8c8c8c);
+  font-size: 0.875rem;
+  line-height: 1.4;
 }
 
 .vmz-ui-field__error {
   margin: 0;
   color: var(--vmz-status-danger-foreground);
-  font-size: 0.9em;
+  font-size: 0.875rem;
 }
 </style>
 
 <script client>
 /**
- * VMZ UI — Field (UI1).
- * Label / description / error association via for + aria-describedby.
- * Colors only from Style Theme semantic tokens.
- */
+* VMZ UI — Field (UI1).
+* Label / description / error association via for + aria-describedby.
+* Colors only from Style Theme semantic tokens.
+*/
 export default class Field {
-  public label: string = '';
-  public description: string = '';
-  public error: string = '';
-  public value: string = '';
-  public type: string = 'text';
-  public disabled: boolean = false;
-  public invalidAttr: string = 'false';
-  public controlId: string = 'vmz-field';
-  public descriptionId: string = 'vmz-field-desc';
-  public errorId: string = 'vmz-field-err';
-  public describedBy: string = '';
-  public onInput: ((e: Event) => void) | null = null;
+	public label: string = "";
+	public description: string = "";
+	public error: string = "";
+	public value: string = "";
+	public type: string = "text";
+	public min: string = "";
+	public max: string = "";
+	public step: string = "";
+	public disabled: boolean = false;
+	public invalidAttr: string = "false";
+	public controlId: string = "vmz-field";
+	public descriptionId: string = "vmz-field-desc";
+	public errorId: string = "vmz-field-err";
+	public describedBy: string = "";
+	public onInput: ((e: Event) => void) | null = null;
 }
 </script>

package/src/components/FilterBar.vmz

@@ -1,27 +1,27 @@
 <template>
   <section class="vmz-ui-filter-bar" data-vmz-ui="filter-bar" aria-label={label}>
-    <slot />
-  </section>
+      <slot />
+    </section>
 </template>
 
 <style>
-.vmz-ui-filter-bar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 0.75rem 1rem;
-  padding: 0.75rem 0.85rem;
-  border: 1px solid var(--vmz-action-primary-background);
-  border-radius: 2px;
-}
+  .vmz-ui-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 0.75rem 1rem;
+    padding: 0.75rem 0.85rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — FilterBar (Console composition).
- * Dense filter/query landmark; parent projects Field + action controls.
- */
+* VMZ UI — FilterBar (Console composition).
+* Dense filter/query landmark; parent projects Field + action controls.
+*/
 export default class FilterBar {
-  public label: string = 'Filters';
+	public label: string = "Filters";
 }
 </script>

package/src/components/Flex.vmz

@@ -0,0 +1,12 @@
+<template><div class="vmz-ui-flex" data-vmz-ui="flex" data-vertical={vertical?'true':'false'} data-wrap={wrap?'true':'false'}><slot /></div></template>
+<style>
+.vmz-ui-flex{display:flex;align-items:center;justify-content:flex-start;gap:.75rem;min-width:0}
+.vmz-ui-flex[data-vertical='true']{flex-direction:column;align-items:stretch}
+.vmz-ui-flex[data-wrap='true']{flex-wrap:wrap}
+</style>
+<script client>
+export default class Flex {
+  public vertical: boolean = false;
+  public wrap: boolean = false;
+}
+</script>

package/src/components/Footer.vmz

@@ -0,0 +1,11 @@
+<template>
+  <footer class="vmz-ui-footer" data-vmz-ui="footer"><slot /></footer>
+</template>
+
+<style>
+  .vmz-ui-footer{padding:1.5rem;color:var(--vmz-text-steel,#646a73);font-size:.875rem;text-align:center}
+</style>
+
+<script client>
+export default class Footer {}
+</script>

package/src/components/Form.vmz

@@ -1,72 +1,70 @@
 <template>
   <form
-    class="vmz-ui-form"
-    data-vmz-ui="form"
-    data-disabled={disabledAttr}
-    data-novalidate="true"
-    aria-label={label}
-    aria-describedby={describedBy}
-    onSubmit={onSubmitGuard}
-    onReset={onResetGuard}
-  >
-    <div if={errorSummary} id={summaryId} class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
-      {errorSummary}
-    </div>
-    <slot />
-  </form>
+      class="vmz-ui-form"
+      data-vmz-ui="form"
+      data-disabled={disabledAttr}
+      data-novalidate="true"
+      aria-label={label}
+      aria-describedby={describedBy}
+      onSubmit={onSubmitGuard}
+      onReset={onResetGuard}
+    >
+      <div if={errorSummary} id={summaryId} class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
+        {errorSummary}
+      </div>
+      <slot />
+    </form>
 </template>
 
 <style>
-.vmz-ui-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--vmz-density-control-gap);
-  max-width: 36rem;
-}
+  .vmz-ui-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-density-control-gap);
+    max-width: 36rem;
+  }
 
-.vmz-ui-form[data-disabled='true'] {
-  opacity: 0.72;
-  pointer-events: none;
-}
+  .vmz-ui-form[data-disabled='true'] {
+    opacity: 0.72;
+    pointer-events: none;
+  }
 
-.vmz-ui-form__summary {
-  margin: 0;
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 1px solid var(--vmz-status-danger-accent);
-  border-left-width: 4px;
-  border-radius: 2px;
-  background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
-  color: var(--vmz-status-danger-foreground);
-  font-weight: 600;
-}
+  .vmz-ui-form__summary {
+    margin: 0;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-status-danger-accent);
+    border-left-width: 1px;
+    border-radius: var(--vmz-radius-md, 6px);
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+    color: var(--vmz-status-danger-foreground);
+    font-weight: 600;
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — Form (hand-written commercial form shell).
- * Parent owns field values + validation presentation; no parallel form store.
- * Native submit/reset guarded; browser HTML5 validation left off (data-novalidate + preventDefault).
- */
+* VMZ UI — Form (hand-written commercial form shell).
+* Parent owns field values + validation presentation; no parallel form store.
+* Native submit/reset guarded; browser HTML5 validation left off (data-novalidate + preventDefault).
+*/
 export default class Form {
-  public label: string = 'Form';
-  public errorSummary: string = '';
-  public summaryId: string = 'vmz-form-summary';
-  public describedBy: string = '';
-  public disabled: boolean = false;
-  public disabledAttr: string = 'false';
-  public onSubmit: (() => void) | null = null;
-  public onReset: (() => void) | null = null;
-
-  onSubmitGuard(ev) {
-    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
-    if (this.disabled) return;
-    if (typeof this.onSubmit === 'function') this.onSubmit();
-  }
-
-  onResetGuard(ev) {
-    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
-    if (this.disabled) return;
-    if (typeof this.onReset === 'function') this.onReset();
-  }
+	public label: string = "Form";
+	public errorSummary: string = "";
+	public summaryId: string = "vmz-form-summary";
+	public describedBy: string = "";
+	public disabled: boolean = false;
+	public disabledAttr: string = "false";
+	public onSubmit: (() => void) | null = null;
+	public onReset: (() => void) | null = null;
+	onSubmitGuard(ev) {
+		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+		if (this.disabled) return;
+		if (typeof this.onSubmit === "function") this.onSubmit();
+	}
+	onResetGuard(ev) {
+		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+		if (this.disabled) return;
+		if (typeof this.onReset === "function") this.onReset();
+	}
 }
 </script>

package/src/components/FormItem.vmz

@@ -1,78 +1,78 @@
 <template>
   <div
-    class="vmz-ui-form-item"
-    data-vmz-ui="form-item"
-    data-required={requiredAttr}
-    data-invalid={invalidAttr}
-  >
-    <label if={label} class="vmz-ui-form-item__label" for={controlId}>
-      <span>{label}</span>
-      <span if={required} class="vmz-ui-form-item__required" aria-hidden="true">*</span>
-    </label>
-    <div class="vmz-ui-form-item__control">
-      <slot />
+      class="vmz-ui-form-item"
+      data-vmz-ui="form-item"
+      data-required={requiredAttr}
+      data-invalid={invalidAttr}
+    >
+      <label if={label} class="vmz-ui-form-item__label" for={controlId}>
+        <span>{label}</span>
+        <span if={required} class="vmz-ui-form-item__required" aria-hidden="true">*</span>
+      </label>
+      <div class="vmz-ui-form-item__control">
+        <slot />
+      </div>
+      <p if={description} id={descriptionId} class="vmz-ui-form-item__description">{description}</p>
+      <p if={error} id={errorId} class="vmz-ui-form-item__error" role="alert">{error}</p>
     </div>
-    <p if={description} id={descriptionId} class="vmz-ui-form-item__description">{description}</p>
-    <p if={error} id={errorId} class="vmz-ui-form-item__error" role="alert">{error}</p>
-  </div>
 </template>
 
 <style>
-.vmz-ui-form-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  max-width: 28rem;
-}
+  .vmz-ui-form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-width: 28rem;
+  }
 
-.vmz-ui-form-item__label {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.25rem;
-  font: inherit;
-  font-weight: 600;
-}
+  .vmz-ui-form-item__label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    font: inherit;
+    font-weight: 600;
+  }
 
-.vmz-ui-form-item__required {
-  color: var(--vmz-status-danger-accent);
-  font-weight: 700;
-}
+  .vmz-ui-form-item__required {
+    color: var(--vmz-status-danger-accent);
+    font-weight: 700;
+  }
 
-.vmz-ui-form-item__control {
-  min-width: 0;
-}
+  .vmz-ui-form-item__control {
+    min-width: 0;
+  }
 
-.vmz-ui-form-item__description {
-  margin: 0;
-  opacity: 0.75;
-  font-size: 0.9em;
-}
+  .vmz-ui-form-item__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+  }
 
-.vmz-ui-form-item__error {
-  margin: 0;
-  color: var(--vmz-status-danger-foreground);
-  font-size: 0.9em;
-}
+  .vmz-ui-form-item__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+  }
 
-.vmz-ui-form-item[data-invalid='true'] .vmz-ui-form-item__control :where(input, select, textarea) {
-  border-color: var(--vmz-status-danger-accent);
-}
+  .vmz-ui-form-item[data-invalid='true'] .vmz-ui-form-item__control :where(input, select, textarea) {
+    border-color: var(--vmz-status-danger-accent);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — FormItem.
- * Label / description / error shell for slotted controls; parent owns validation strings.
- */
+* VMZ UI — FormItem.
+* Label / description / error shell for slotted controls; parent owns validation strings.
+*/
 export default class FormItem {
-  public label: string = '';
-  public description: string = '';
-  public error: string = '';
-  public required: boolean = false;
-  public requiredAttr: string = 'false';
-  public invalidAttr: string = 'false';
-  public controlId: string = 'vmz-form-item';
-  public descriptionId: string = 'vmz-form-item-desc';
-  public errorId: string = 'vmz-form-item-err';
+	public label: string = "";
+	public description: string = "";
+	public error: string = "";
+	public required: boolean = false;
+	public requiredAttr: string = "false";
+	public invalidAttr: string = "false";
+	public controlId: string = "vmz-form-item";
+	public descriptionId: string = "vmz-form-item-desc";
+	public errorId: string = "vmz-form-item-err";
 }
 </script>

package/src/components/Grid.vmz

@@ -0,0 +1,12 @@
+<template><div class="vmz-ui-grid" data-vmz-ui="grid" style={'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap}><slot /></div></template>
+<style>
+.vmz-ui-grid{display:grid;grid-template-columns:repeat(var(--ui-grid-columns,3),minmax(0,1fr));gap:var(--ui-grid-gap,1rem)}
+@media(max-width:900px){.vmz-ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media(max-width:600px){.vmz-ui-grid{grid-template-columns:1fr}}
+</style>
+<script client>
+export default class Grid {
+  public columns: number = 3;
+  public gap: string = '1rem';
+}
+</script>

package/src/components/Header.vmz

@@ -0,0 +1,11 @@
+<template>
+  <header class="vmz-ui-header" data-vmz-ui="header"><slot /></header>
+</template>
+
+<style>
+  .vmz-ui-header{min-height:4rem;display:flex;align-items:center;padding:0 1.5rem;border-bottom:1px solid var(--vmz-line-default,#d9d9d9);background:var(--vmz-surface-paper,#fff)}
+</style>
+
+<script client>
+export default class Header {}
+</script>