@vmz/ui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vmz/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "description": "VMZ UI — official UI framework (component contracts + semantic token requirements). Not a theme. Not a plugin.",
   "license": "MIT",

package/src/components/Accordion.vmz

@@ -1,35 +1,19 @@
 <template>
-  <div class="vmz-ui-accordion" data-vmz-ui="accordion" :aria-label="label">
-      <div v-for="item in items" :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"
-            @click="() => toggle(item.id)"
-          >
-            {{ item.title }}
-          </button>
-        </h3>
-        <div
-          v-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 }}
+    <div data-vmz-ui="accordion" :aria-label="label" class="vmz-ui-accordion">
+        <div v-for="item in items" :key="item.id" :data-vmz-accordion="item.id" class="vmz-ui-accordion__item">
+            <h3 class="vmz-ui-accordion__heading">
+                <button type="button" :id="item.triggerId" :data-vmz-accordion-trigger="item.id" :aria-expanded='openId === item.id ? "true" : "false"' :aria-controls="item.panelId" @click="(() => toggle(item.id))" class="vmz-ui-accordion__trigger">
+                    {{ item.title }}
+                </button>
+            </h3>
+            <div v-if="openId === item.id" :id="item.panelId" role="region" :data-vmz-accordion-panel="item.id" :aria-labelledby="item.triggerId" class="vmz-ui-accordion__panel">
+                {{ item.body }}
+            </div>
         </div>
-      </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-accordion {
+.vmz-ui-accordion {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
@@ -38,22 +22,22 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-accordion__item {
+.vmz-ui-accordion__item {
     border-bottom: 1px solid var(--vmz-line-default);
-  }
+}
 
-  .vmz-ui-accordion__item:last-child {
+.vmz-ui-accordion__item:last-child {
     border-bottom: none;
-  }
+}
 
-  .vmz-ui-accordion__heading {
+.vmz-ui-accordion__heading {
     margin: 0;
     font: inherit;
-  }
+}
 
-  .vmz-ui-accordion__trigger {
+.vmz-ui-accordion__trigger {
     display: block;
     width: 100%;
     text-align: start;
@@ -65,47 +49,46 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-accordion__trigger:hover {
+.vmz-ui-accordion__trigger:hover {
     background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
-  }
+}
 
-  .vmz-ui-accordion__trigger:focus-visible {
+.vmz-ui-accordion__trigger:focus-visible {
     box-shadow: inset 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-accordion__trigger[aria-expanded='true'] {
+.vmz-ui-accordion__trigger[aria-expanded="true"] {
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-accordion__panel {
+.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,20 +1,18 @@
 <template>
-  <div
-      class="vmz-ui-alert"
-      data-vmz-ui="alert"
-      :data-tone="tone"
-      :role="roleName"
-    >
-      <p v-if="title" class="vmz-ui-alert__title">{{ title }}</p>
-      <p v-if="description" class="vmz-ui-alert__description">{{ description }}</p>
-      <div class="vmz-ui-alert__actions">
-        <slot />
-      </div>
+    <div data-vmz-ui="alert" :data-tone="tone" :role="roleName" class="vmz-ui-alert">
+        <p v-if="title" class="vmz-ui-alert__title">
+            {{ title }}
+        </p>
+        <p v-if="description" class="vmz-ui-alert__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-alert__actions">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-alert {
+.vmz-ui-alert {
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-control-gap);
@@ -24,62 +22,61 @@
     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'] {
+.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'] {
+.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'] {
+.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'] {
+.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 {
+: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 {
+.vmz-ui-alert__title {
     margin: 0;
     font-size: 0.875rem;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-alert__description {
+.vmz-ui-alert__description {
     margin: 0;
     opacity: 0.9;
-  }
+}
 
-  .vmz-ui-alert__actions:empty {
+.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,116 +1,133 @@
 <template>
-  <div class="vmz-ui-app-shell" data-vmz-ui="app-shell">
-      <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 v-for="item in nav" :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 data-vmz-ui="app-shell" class="vmz-ui-app-shell">
+        <header data-vmz-shell="header" class="vmz-ui-app-shell__header">
+            <div class="vmz-ui-app-shell__header-inner">
+                <a :href="homeHref" class="vmz-ui-app-shell__brand">
+                    {{ 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">
+                        {{ item.title }}
+                    </a>
+                </nav>
+            </div>
+        </header>
+        <main data-vmz-shell="main" class="vmz-ui-app-shell__main">
+            <slot />
+        </main>
     </div>
 </template>
-
 <style>
-  .vmz-ui-app-shell {
+.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);
+    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;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.5rem;
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+    min-height: 3rem;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.5rem;
 }
 
 .vmz-ui-app-shell__brand {
-  font-family: var(--vmz-font-sans);
-  font-weight: 600;
-  font-size: 1.125rem;
-  letter-spacing: 0;
-  text-decoration: none;
-  color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-sans);
+    font-weight: 600;
+    font-size: 1.125rem;
+    letter-spacing: 0;
+    text-decoration: none;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-app-shell__brand:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+    outline: none;
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .vmz-ui-app-shell__nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.15rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem 0.15rem;
 }
 
 .vmz-ui-app-shell__nav a {
-  font: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  text-decoration: none;
-  color: var(--vmz-text-ink);
-  padding: 0.25rem 0.75rem;
-  border-radius: var(--vmz-radius-md, 6px);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    text-decoration: none;
+    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-background);
-  background: var(--vmz-surface-mist, #fafafa);
+    color: var(--vmz-action-primary-background);
+    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);
+    outline: none;
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
 
 .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;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+    flex: 1;
+    width: min(var(--vmz-layout-max-width, 75rem), calc(100% - 2rem));
+    margin: 0 auto;
+    padding: 1.5rem 0 2.5rem;
+    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;
+    }
+    .vmz-ui-app-shell__nav {
+        width: 100%;
+        overflow-x: auto;
+        flex-wrap: nowrap;
+        padding-bottom: 0.2rem;
+    }
+    .vmz-ui-app-shell__nav a {
+        white-space: nowrap;
+    }
+    .vmz-ui-app-shell__main {
+        padding-top: 1.25rem;
+    }
 }
-  @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>