@vmz/ui 0.2.2 → 0.2.4

package/src/components/Dropdown.vmz

@@ -1,27 +1,61 @@
 <template>
-  <details class="vmz-ui-dropdown" data-vmz-ui="dropdown">
-    <summary data-vmz-dropdown-trigger="1">{{ label }}</summary>
-    <div class="vmz-ui-dropdown__menu" data-vmz-dropdown-menu="1">
-      <a
-        v-for="item in items"
-        :key="item.id"
-        :href="item.href"
-        :data-vmz-dropdown-item="item.id"
-      >{{ item.title }}</a>
-    </div>
-  </details>
+    <details data-vmz-ui="dropdown" class="vmz-ui-dropdown">
+        <summary data-vmz-dropdown-trigger="1">
+            {{ 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>
+    </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)}
+.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 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% + 0.35rem);
+    right: 0;
+    z-index: 50;
+    min-width: 11rem;
+    padding: 0.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: 0.55rem 0.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 }> = [];
+    public label: string = "Menu";
+    public items: Array<{ id: string; title: string; href: string }> = [];
 }
 </script>

package/src/components/Empty.vmz

@@ -1,15 +1,18 @@
 <template>
-  <div class="vmz-ui-empty" data-vmz-ui="empty">
-      <h2 class="vmz-ui-empty__title">{{ title }}</h2>
-      <p v-if="description" class="vmz-ui-empty__description">{{ description }}</p>
-      <div class="vmz-ui-empty__actions">
-        <slot />
-      </div>
+    <div data-vmz-ui="empty" class="vmz-ui-empty">
+        <h2 class="vmz-ui-empty__title">
+            {{ title }}
+        </h2>
+        <p v-if="description" class="vmz-ui-empty__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-empty__actions">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-empty {
+.vmz-ui-empty {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -19,34 +22,33 @@
     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 {
+.vmz-ui-empty__title {
     margin: 0;
     font-family: var(--vmz-font-display);
     font-size: 1.1rem;
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-empty__description {
+.vmz-ui-empty__description {
     margin: 0;
     color: var(--vmz-text-steel);
     max-width: 36rem;
     line-height: 1.45;
-  }
+}
 
-  .vmz-ui-empty__actions:empty {
+.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,121 +1,115 @@
 <template>
-  <div class="vmz-ui-field" data-vmz-ui="field" :data-invalid="invalidAttr">
-      <label v-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"
-        @input="onDomInput"
-      />
-      <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-field__error" role="alert">{{ error }}</p>
+    <div data-vmz-ui="field" :data-invalid="invalidAttr" class="vmz-ui-field">
+        <label v-if="label" :for="controlId" class="vmz-ui-field__label">
+            {{ label }}
+        </label>
+        <input :id="controlId" :type="type" :value="value" :min="min" :max="max" :step="step" :disabled="disabled" :aria-invalid='error ? "true" : "false"' :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-field__control" />
+        <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-field__error">
+            {{ error }}
+        </p>
     </div>
 </template>
-
 <style>
 .vmz-ui-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  max-width: 28rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-width: 28rem;
 }
 
 .vmz-ui-field__label {
-  font: inherit;
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--vmz-text-ink, inherit);
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.875rem;
+    color: var(--vmz-text-ink, inherit);
 }
 
 .vmz-ui-field__control {
-  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);
+    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;
+    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[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);
+    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);
+    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);
+    opacity: 0.55;
+    cursor: not-allowed;
+    background: var(--vmz-surface-mist, #fafafa);
 }
 
 .vmz-ui-field__description {
-  margin: 0;
-  color: var(--vmz-text-steel, #8c8c8c);
-  font-size: 0.875rem;
-  line-height: 1.4;
+    margin: 0;
+    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.875rem;
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    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 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;
-	onDomInput(e: Event) {
-		this.emit("input", e);
-		if (typeof this.onInput === "function") this.onInput(e);
-	}
+    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;
+    onDomInput(e: Event) {
+        this.emit("input", e);
+        if (typeof this.onInput === "function") this.onInput(e);
+    }
 }
 </script>

package/src/components/FilterBar.vmz

@@ -1,11 +1,10 @@
 <template>
-  <section class="vmz-ui-filter-bar" data-vmz-ui="filter-bar" :aria-label="label">
-      <slot />
+    <section data-vmz-ui="filter-bar" :aria-label="label" class="vmz-ui-filter-bar">
+        <slot />
     </section>
 </template>
-
 <style>
-  .vmz-ui-filter-bar {
+.vmz-ui-filter-bar {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
@@ -13,15 +12,14 @@
     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

@@ -1,12 +1,27 @@
-<template><div class="vmz-ui-flex" data-vmz-ui="flex" :data-vertical="vertical?'true':'false'" :data-wrap="wrap?'true':'false'"><slot /></div></template>
+<template>
+    <div data-vmz-ui="flex" :data-vertical='vertical ? "true" : "false"' :data-wrap='wrap ? "true" : "false"' class="vmz-ui-flex">
+        <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}
+.vmz-ui-flex {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.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;
+    public vertical: boolean = false;
+    public wrap: boolean = false;
 }
 </script>

package/src/components/Footer.vmz

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

package/src/components/Form.vmz

@@ -1,35 +1,25 @@
 <template>
-  <form
-      class="vmz-ui-form"
-      data-vmz-ui="form"
-      :data-disabled="disabledAttr"
-      data-novalidate="true"
-      :aria-label="label"
-      :aria-describedby="describedBy"
-      @submit="onSubmitGuard"
-      @reset="onResetGuard"
-    >
-      <div v-if="errorSummary" :id="summaryId" class="vmz-ui-form__summary" role="alert" data-vmz-form="summary">
-        {{ errorSummary }}
-      </div>
-      <slot />
+    <form data-vmz-ui="form" :data-disabled="disabledAttr" data-novalidate="true" :aria-label="label" :aria-describedby="describedBy" @submit="onSubmitGuard" @reset="onResetGuard" class="vmz-ui-form">
+        <div v-if="errorSummary" :id="summaryId" role="alert" data-vmz-form="summary" class="vmz-ui-form__summary">
+            {{ errorSummary }}
+        </div>
+        <slot />
     </form>
 </template>
-
 <style>
-  .vmz-ui-form {
+.vmz-ui-form {
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-control-gap);
     max-width: 36rem;
-  }
+}
 
-  .vmz-ui-form[data-disabled='true'] {
+.vmz-ui-form[data-disabled="true"] {
     opacity: 0.72;
     pointer-events: none;
-  }
+}
 
-  .vmz-ui-form__summary {
+.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);
@@ -38,35 +28,34 @@
     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;
-		this.emit("submit");
-		if (typeof this.onSubmit === "function") this.onSubmit();
-	}
-	onResetGuard(ev) {
-		if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
-		if (this.disabled) return;
-		this.emit("reset");
-		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;
+        this.emit("submit");
+        if (typeof this.onSubmit === "function") this.onSubmit();
+    }
+    onResetGuard(ev) {
+        if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
+        if (this.disabled) return;
+        this.emit("reset");
+        if (typeof this.onReset === "function") this.onReset();
+    }
 }
 </script>