@vmz/ui 0.2.2 → 0.2.4

package/src/components/Sider.vmz

@@ -1,6 +1,23 @@
-<template><aside class="vmz-ui-sider" data-vmz-ui="sider"><slot /></aside></template>
+<template>
+    <aside data-vmz-ui="sider" class="vmz-ui-sider">
+        <slot />
+    </aside>
+</template>
 <style>
-.vmz-ui-sider{width:16rem;padding:1rem;border-right:1px solid var(--vmz-line-default);background:var(--vmz-surface-paper)}
-@media(max-width:720px){.vmz-ui-sider{width:100%;border-right:0;border-bottom:1px solid var(--vmz-line-default)}}
+.vmz-ui-sider {
+    width: 16rem;
+    padding: 1rem;
+    border-right: 1px solid var(--vmz-line-default);
+    background: var(--vmz-surface-paper);
+}
+@media (max-width: 720px) {
+    .vmz-ui-sider {
+        width: 100%;
+        border-right: 0;
+        border-bottom: 1px solid var(--vmz-line-default);
+    }
+}
 </style>
-<script client>export default class Sider {}</script>
+<script client>
+export default class Sider {}
+</script>

package/src/components/Skeleton.vmz

@@ -1,80 +1,72 @@
 <template>
-  <div
-      class="vmz-ui-skeleton"
-      data-vmz-ui="skeleton"
-      :data-loading="loadingAttr"
-      role="status"
-      aria-live="polite"
-      :aria-busy="loadingAttr"
-    >
-      <div v-if="loading" class="vmz-ui-skeleton__block" data-vmz-skeleton="block"></div>
-      <div v-if="loading" class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
-      <div v-if="loading" class="vmz-ui-skeleton__line" data-vmz-skeleton="line"></div>
-      <div v-if="!loading" class="vmz-ui-skeleton__content">
-        <slot />
-      </div>
+    <div data-vmz-ui="skeleton" :data-loading="loadingAttr" role="status" aria-live="polite" :aria-busy="loadingAttr" class="vmz-ui-skeleton">
+        <div v-if="loading" data-vmz-skeleton="block" class="vmz-ui-skeleton__block" />
+        <div v-if="loading" data-vmz-skeleton="line" class="vmz-ui-skeleton__line" />
+        <div v-if="loading" data-vmz-skeleton="line" class="vmz-ui-skeleton__line" />
+        <div v-if="!loading" class="vmz-ui-skeleton__content">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-skeleton {
+.vmz-ui-skeleton {
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-compact-gap);
     min-height: 4.5rem;
-  }
+}
 
-  .vmz-ui-skeleton__block,
-  .vmz-ui-skeleton__line {
+.vmz-ui-skeleton__block,
+.vmz-ui-skeleton__line {
     border-radius: var(--vmz-radius-md, 6px);
     background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-    animation: vmz-ui-skeleton-pulse var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing) infinite alternate;
-  }
+    animation: vmz-ui-skeleton-pulse var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing) infinite alternate;
+}
 
-  .vmz-ui-skeleton__block {
+.vmz-ui-skeleton__block {
     width: 100%;
     height: 2.5rem;
-  }
+}
 
-  .vmz-ui-skeleton__line {
+.vmz-ui-skeleton__line {
     width: 72%;
     height: 0.75rem;
-  }
+}
 
-  .vmz-ui-skeleton__line + .vmz-ui-skeleton__line {
+.vmz-ui-skeleton__line + .vmz-ui-skeleton__line {
     width: 48%;
-  }
+}
 
-  .vmz-ui-skeleton__content {
+.vmz-ui-skeleton__content {
     display: flex;
     flex-direction: column;
     gap: inherit;
-  }
+}
 
-  @keyframes vmz-ui-skeleton-pulse {
+@keyframes vmz-ui-skeleton-pulse {
     from {
-      opacity: 0.55;
+        opacity: 0.55;
     }
     to {
-      opacity: 1;
+        opacity: 1;
     }
-  }
+}
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .vmz-ui-skeleton__block,
     .vmz-ui-skeleton__line {
-      animation: none;
+        animation: none;
     }
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Skeleton (UI5 Console Surface).
-* Loading placeholder with stable min-height (CLS guard); parent owns loading.
-*/
+ * VMZ UI — Skeleton (UI5 Console Surface).
+ * Loading placeholder with stable min-height (CLS guard); parent owns loading.
+ */
 export default class Skeleton {
-	public loading: boolean = true;
-	public loadingAttr: string = "true";
+    public loading: boolean = true;
+    public loadingAttr: string = "true";
 }
 </script>

package/src/components/Space.vmz

@@ -1,15 +1,30 @@
-<template><div class="vmz-ui-space" data-vmz-ui="space" :data-direction="direction" :data-size="size" :data-wrap="wrap?'true':'false'"><slot /></div></template>
+<template>
+    <div data-vmz-ui="space" :data-direction="direction" :data-size="size" :data-wrap='wrap ? "true" : "false"' class="vmz-ui-space">
+        <slot />
+    </div>
+</template>
 <style>
-.vmz-ui-space{display:flex;gap:var(--vmz-density-control-gap,.75rem)}
-.vmz-ui-space[data-direction='vertical']{flex-direction:column}
-.vmz-ui-space[data-wrap='true']{flex-wrap:wrap}
-.vmz-ui-space[data-size='small']{gap:.5rem}
-.vmz-ui-space[data-size='large']{gap:1.5rem}
+.vmz-ui-space {
+    display: flex;
+    gap: var(--vmz-density-control-gap, 0.75rem);
+}
+.vmz-ui-space[data-direction="vertical"] {
+    flex-direction: column;
+}
+.vmz-ui-space[data-wrap="true"] {
+    flex-wrap: wrap;
+}
+.vmz-ui-space[data-size="small"] {
+    gap: 0.5rem;
+}
+.vmz-ui-space[data-size="large"] {
+    gap: 1.5rem;
+}
 </style>
 <script client>
 export default class Space {
-  public direction: string = 'horizontal';
-  public size: string = 'middle';
-  public wrap: boolean = false;
+    public direction: string = "horizontal";
+    public size: string = "middle";
+    public wrap: boolean = false;
 }
 </script>

package/src/components/Spinner.vmz

@@ -1,14 +1,8 @@
 <template>
-  <span
-      class="vmz-ui-spinner"
-      data-vmz-ui="spinner"
-      role="status"
-      :aria-label="label"
-    ></span>
+    <span data-vmz-ui="spinner" role="status" :aria-label="label" class="vmz-ui-spinner" />
 </template>
-
 <style>
-  .vmz-ui-spinner {
+.vmz-ui-spinner {
     display: inline-block;
     width: 1rem;
     height: 1rem;
@@ -16,30 +10,30 @@
     border-top-color: var(--vmz-action-primary-background);
     border-radius: 50%;
     vertical-align: -0.15em;
-    animation: vmz-ui-spin var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing) infinite;
-  }
+    animation: vmz-ui-spin var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing)
+        infinite;
+}
 
-  @keyframes vmz-ui-spin {
+@keyframes vmz-ui-spin {
     to {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
-  }
+}
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .vmz-ui-spinner {
-      animation: none;
-      border-color: var(--vmz-action-primary-background);
-      opacity: 0.55;
+        animation: none;
+        border-color: var(--vmz-action-primary-background);
+        opacity: 0.55;
     }
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Spinner (Foundation).
-* Loading indicator; reduced-motion keeps static feedback.
-*/
+ * VMZ UI — Spinner (Foundation).
+ * Loading indicator; reduced-motion keeps static feedback.
+ */
 export default class Spinner {
-	public label: string = "Loading";
+    public label: string = "Loading";
 }
 </script>

package/src/components/Steps.vmz

@@ -1,24 +1,22 @@
 <template>
-  <ol class="vmz-ui-steps" data-vmz-ui="steps" :aria-label="label">
-      <li
-        v-for="item in items"
-        :key="item.id"
-        class="vmz-ui-steps__item"
-        :data-vmz-step="item.id"
-        :data-status="item.status"
-        :aria-current="current === item.id ? 'step' : 'false'"
-      >
-        <span class="vmz-ui-steps__index" :data-vmz-step-index="item.id">{{ item.index }}</span>
-        <span class="vmz-ui-steps__body">
-          <span class="vmz-ui-steps__title">{{ item.title }}</span>
-          <span v-if="item.description" class="vmz-ui-steps__description">{{ item.description }}</span>
-        </span>
-      </li>
+    <ol data-vmz-ui="steps" :aria-label="label" class="vmz-ui-steps">
+        <li v-for="item in items" :key="item.id" :data-vmz-step="item.id" :data-status="item.status" :aria-current='current === item.id ? "step" : "false"' class="vmz-ui-steps__item">
+            <span :data-vmz-step-index="item.id" class="vmz-ui-steps__index">
+                {{ item.index }}
+            </span>
+            <span class="vmz-ui-steps__body">
+                <span class="vmz-ui-steps__title">
+                    {{ item.title }}
+                </span>
+                <span v-if="item.description" class="vmz-ui-steps__description">
+                    {{ item.description }}
+                </span>
+            </span>
+        </li>
     </ol>
 </template>
-
 <style>
-  .vmz-ui-steps {
+.vmz-ui-steps {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -26,24 +24,24 @@
     flex-direction: column;
     gap: var(--vmz-density-control-gap);
     max-width: 36rem;
-  }
+}
 
-  .vmz-ui-steps__item {
+.vmz-ui-steps__item {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     color: var(--vmz-text-steel);
-  }
+}
 
-  .vmz-ui-steps__item[data-status='done'] {
+.vmz-ui-steps__item[data-status="done"] {
     color: var(--vmz-status-success-foreground);
-  }
+}
 
-  .vmz-ui-steps__item[data-status='current'] {
+.vmz-ui-steps__item[data-status="current"] {
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-steps__index {
+.vmz-ui-steps__index {
     flex: 0 0 auto;
     min-width: 1.75rem;
     height: 1.75rem;
@@ -55,52 +53,51 @@
     font-weight: 700;
     font-size: 0.85rem;
     color: inherit;
-  }
+}
 
-  .vmz-ui-steps__item[data-status='current'] .vmz-ui-steps__index {
+.vmz-ui-steps__item[data-status="current"] .vmz-ui-steps__index {
     border-color: var(--vmz-action-primary-background);
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
-  }
+}
 
-  .vmz-ui-steps__item[data-status='done'] .vmz-ui-steps__index {
+.vmz-ui-steps__item[data-status="done"] .vmz-ui-steps__index {
     border-color: var(--vmz-status-success-accent);
     background: color-mix(in srgb, var(--vmz-status-success-accent) 18%, transparent);
-  }
+}
 
-  .vmz-ui-steps__body {
+.vmz-ui-steps__body {
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
     padding-top: 0.15rem;
-  }
+}
 
-  .vmz-ui-steps__title {
+.vmz-ui-steps__title {
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-steps__description {
+.vmz-ui-steps__description {
     font-size: 0.9em;
     opacity: 0.9;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Steps.
-* Parent owns `current` id and item `status` (upcoming|current|done).
-* Navigation actions stay on the page (no private wizard store).
-*/
+ * VMZ UI — Steps.
+ * Parent owns `current` id and item `status` (upcoming|current|done).
+ * Navigation actions stay on the page (no private wizard store).
+ */
 export default class Steps {
-	public label: string = "Steps";
-	public current: string = "";
-	/** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
-	public items: {
-		id: string;
-		index: string;
-		title: string;
-		description?: string;
-		status: string;
-	}[] = [];
+    public label: string = "Steps";
+    public current: string = "";
+    /** @type {{ id: string, index: string, title: string, description?: string, status: string }[]} */
+    public items: {
+        id: string;
+        index: string;
+        title: string;
+        description?: string;
+        status: string;
+    }[] = [];
 }
 </script>

package/src/components/Switch.vmz

@@ -1,32 +1,23 @@
 <template>
-  <label class="vmz-ui-switch" data-vmz-ui="switch" :for="controlId">
-      <button
-        :id="controlId"
-        type="button"
-        class="vmz-ui-switch__control"
-        role="switch"
-        :aria-checked="checked"
-        :aria-describedby="describedBy"
-        :disabled="disabled"
-        @click="toggle"
-        :onKeyDown="onKeyDown"
-      >
-        <span class="vmz-ui-switch__thumb" aria-hidden="true"></span>
-      </button>
-      <span class="vmz-ui-switch__label">{{ label }}</span>
+    <label data-vmz-ui="switch" :for="controlId" class="vmz-ui-switch">
+        <button :id="controlId" type="button" role="switch" :aria-checked="checked" :aria-describedby="describedBy" :disabled="disabled" @click="toggle" :onKeyDown="onKeyDown" class="vmz-ui-switch__control">
+            <span aria-hidden="true" class="vmz-ui-switch__thumb" />
+        </button>
+        <span class="vmz-ui-switch__label">
+            {{ label }}
+        </span>
     </label>
 </template>
-
 <style>
-  .vmz-ui-switch {
+.vmz-ui-switch {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
     font: inherit;
     cursor: pointer;
-  }
+}
 
-  .vmz-ui-switch__control {
+.vmz-ui-switch__control {
     position: relative;
     width: 2.4rem;
     height: 1.35rem;
@@ -36,23 +27,23 @@
     background: transparent;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-switch__control[aria-checked='true'],
-  .vmz-ui-switch__control[aria-checked=''] {
+.vmz-ui-switch__control[aria-checked="true"],
+.vmz-ui-switch__control[aria-checked=""] {
     background: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-switch__control:focus-visible {
+.vmz-ui-switch__control:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-switch__control:disabled {
+.vmz-ui-switch__control:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-switch__thumb {
+.vmz-ui-switch__thumb {
     position: absolute;
     top: 0.12rem;
     left: 0.12rem;
@@ -61,48 +52,47 @@
     border-radius: 999px;
     background: var(--vmz-action-primary-foreground);
     transition: transform var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
-  }
+}
 
-  .vmz-ui-switch__control[aria-checked='true'] .vmz-ui-switch__thumb,
-  .vmz-ui-switch__control[aria-checked=''] .vmz-ui-switch__thumb {
+.vmz-ui-switch__control[aria-checked="true"] .vmz-ui-switch__thumb,
+.vmz-ui-switch__control[aria-checked=""] .vmz-ui-switch__thumb {
     transform: translateX(1.05rem);
-  }
+}
 
-  .vmz-ui-switch__label {
+.vmz-ui-switch__label {
     font-weight: 600;
-  }
+}
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .vmz-ui-switch__thumb {
-      transition: none;
+        transition: none;
     }
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Switch (UI2).
-* role=switch + aria-checked; parent owns checked (no parallel form store).
-*/
+ * VMZ UI — Switch (UI2).
+ * role=switch + aria-checked; parent owns checked (no parallel form store).
+ */
 export default class Switch {
-	public label: string = "";
-	public checked: boolean = false;
-	public disabled: boolean = false;
-	public controlId: string = "vmz-switch";
-	public describedBy: string = "";
-	public onChange: ((checked: boolean) => void) | null = null;
-	toggle() {
-		if (this.disabled) return;
-		const next = !this.checked;
-		this.emit("change", next);
-		if (typeof this.onChange === "function") this.onChange(next);
-	}
-	onKeyDown(ev) {
-		if (!ev) return;
-		if (ev.key === " " || ev.key === "Enter") {
-			ev.preventDefault();
-			this.toggle();
-		}
-	}
+    public label: string = "";
+    public checked: boolean = false;
+    public disabled: boolean = false;
+    public controlId: string = "vmz-switch";
+    public describedBy: string = "";
+    public onChange: ((checked: boolean) => void) | null = null;
+    toggle() {
+        if (this.disabled) return;
+        const next = !this.checked;
+        this.emit("change", next);
+        if (typeof this.onChange === "function") this.onChange(next);
+    }
+    onKeyDown(ev) {
+        if (!ev) return;
+        if (ev.key === " " || ev.key === "Enter") {
+            ev.preventDefault();
+            this.toggle();
+        }
+    }
 }
 </script>