@vmz/ui 0.2.3 → 0.2.4

package/src/components/Button.vmz

@@ -1,174 +1,192 @@
 <template>
-  <a
-      v-if="href"
-      class="vmz-ui-btn"
-      data-vmz-ui="button"
-      data-vmz-motion="control"
-      data-vmz-motion-token="motion.control"
-      :data-variant="variant"
-      :data-size="size"
-      :data-block="block ? 'true' : 'false'"
-      :href="href"
-      :target="target"
-      :rel="rel"
-      @click="onDomClick"
-    >
-      <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
-      <slot />
+    <a v-if="href" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block='block ? "true" : "false"' :href="href" :target="target" :rel="rel" @click="onDomClick" class="vmz-ui-btn">
+        <span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
+        <slot />
     </a>
-  <button
-      v-else
-      :type="type"
-      class="vmz-ui-btn"
-      data-vmz-ui="button"
-      data-vmz-motion="control"
-      data-vmz-motion-token="motion.control"
-      :data-variant="variant"
-      :data-size="size"
-      :data-block="block ? 'true' : 'false'"
-      :data-loading="loading ? 'true' : 'false'"
-      :disabled="disabled"
-      :aria-busy="loading ? 'true' : 'false'"
-      @click="onDomClick"
-    >
-      <span v-if="loading" class="vmz-ui-btn__spinner" aria-hidden="true"></span>
-      <slot />
+    <button v-else :type="type" data-vmz-ui="button" data-vmz-motion="control" data-vmz-motion-token="motion.control" :data-variant="variant" :data-size="size" :data-block='block ? "true" : "false"' :data-loading='loading ? "true" : "false"' :disabled="disabled" :aria-busy='loading ? "true" : "false"' :aria-haspopup="ariaHaspopup" :aria-controls="ariaControls" @click="onDomClick" class="vmz-ui-btn">
+        <span v-if="loading" aria-hidden="true" class="vmz-ui-btn__spinner" />
+        <slot />
     </button>
 </template>
-
 <style>
 .vmz-ui-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  min-height: var(--vmz-control-height, 2rem);
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border: 1px solid transparent;
-  border-radius: var(--vmz-radius-md, 6px);
-  font: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  line-height: 1.5715;
-  cursor: pointer;
-  background: var(--vmz-action-primary-background);
-  color: var(--vmz-action-primary-foreground);
-  outline: none;
-  box-shadow: none;
-  transition:
-    background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
-    border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
-    color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
-}
-
-.vmz-ui-btn[data-size='small'] { min-height: var(--vmz-control-height-sm, 1.5rem); padding: 0 0.5rem; font-size: 0.875rem; }
-.vmz-ui-btn[data-size='large'] { min-height: var(--vmz-control-height-lg, 2.5rem); padding: 0.4rem 1rem; font-size: 1rem; }
-.vmz-ui-btn[data-block='true'] { width: 100%; }
-.vmz-ui-btn[data-loading='true'] { cursor: wait; }
-.vmz-ui-btn__spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vmz-btn-spin .7s linear infinite; }
-@keyframes vmz-btn-spin { to { transform: rotate(360deg); } }
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    min-height: var(--vmz-control-height, 2rem);
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-md, 6px);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5715;
+    cursor: pointer;
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+    outline: none;
+    box-shadow: none;
+    transition:
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-btn[data-size="small"] {
+    min-height: var(--vmz-control-height-sm, 1.5rem);
+    padding: 0 0.5rem;
+    font-size: 0.875rem;
+}
+.vmz-ui-btn[data-size="large"] {
+    min-height: var(--vmz-control-height-lg, 2.5rem);
+    padding: 0.4rem 1rem;
+    font-size: 1rem;
+}
+.vmz-ui-btn[data-block="true"] {
+    width: 100%;
+}
+.vmz-ui-btn[data-loading="true"] {
+    cursor: wait;
+}
+.vmz-ui-btn__spinner {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: vmz-btn-spin 0.7s linear infinite;
+}
+@keyframes vmz-btn-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
 
 .vmz-ui-btn:hover:not(:disabled) {
-  background: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-primary-hover);
 }
 
 .vmz-ui-btn:active:not(:disabled) {
-  background: var(--vmz-action-primary-active);
+    background: var(--vmz-action-primary-active);
 }
 
-.vmz-ui-btn[data-variant='secondary'] {
-  background: var(--vmz-action-secondary-background);
-  color: var(--vmz-action-secondary-foreground);
-  border-color: var(--vmz-action-secondary-border);
+.vmz-ui-btn[data-variant="secondary"] {
+    background: var(--vmz-action-secondary-background);
+    color: var(--vmz-action-secondary-foreground);
+    border-color: var(--vmz-action-secondary-border);
+}
+.vmz-ui-btn[data-variant="default"] {
+    background: #fff;
+    color: var(--vmz-text-ink);
+    border-color: var(--vmz-line-default);
+    box-shadow: none;
+}
+.vmz-ui-btn[data-variant="default"]:hover:not(:disabled) {
+    color: var(--vmz-action-primary-background);
+    border-color: var(--vmz-action-primary-background);
+    background: #fff;
+}
+.vmz-ui-btn[data-variant="text"],
+.vmz-ui-btn[data-variant="link"] {
+    min-height: auto;
+    padding: 0.25rem 0.35rem;
+    border-color: transparent;
+    background: transparent;
+    color: var(--vmz-action-primary-background);
+    box-shadow: none;
+}
+.vmz-ui-btn[data-variant="dashed"] {
+    background: #fff;
+    color: var(--vmz-text-ink);
+    border: 1px dashed var(--vmz-line-default);
+    box-shadow: none;
 }
-.vmz-ui-btn[data-variant='default'] { background:#fff; color:var(--vmz-text-ink); border-color:var(--vmz-line-default); box-shadow:none; }
-.vmz-ui-btn[data-variant='default']:hover:not(:disabled) { color:var(--vmz-action-primary-background); border-color:var(--vmz-action-primary-background); background:#fff; }
-.vmz-ui-btn[data-variant='text'], .vmz-ui-btn[data-variant='link'] { min-height:auto; padding:.25rem .35rem; border-color:transparent; background:transparent; color:var(--vmz-action-primary-background); box-shadow:none; }
-.vmz-ui-btn[data-variant='dashed'] { background:#fff; color:var(--vmz-text-ink); border:1px dashed var(--vmz-line-default); box-shadow:none; }
 
-  .vmz-ui-btn[data-variant='secondary']:hover:not(:disabled) {
+.vmz-ui-btn[data-variant="secondary"]:hover:not(:disabled) {
     background: var(--vmz-action-secondary-hover);
-  }
+}
 
-  .vmz-ui-btn[data-variant='secondary']:active:not(:disabled) {
+.vmz-ui-btn[data-variant="secondary"]:active:not(:disabled) {
     background: var(--vmz-action-secondary-hover);
     border-color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-btn[data-variant='ghost'] {
+.vmz-ui-btn[data-variant="ghost"] {
     background: transparent;
     color: var(--vmz-text-ink);
     border-color: transparent;
-  }
+}
 
-  .vmz-ui-btn[data-variant='ghost']:hover:not(:disabled) {
+.vmz-ui-btn[data-variant="ghost"]:hover:not(:disabled) {
     background: color-mix(in srgb, var(--vmz-surface-mist) 85%, transparent);
-  }
+}
 
-  .vmz-ui-btn[data-variant='ghost']:active:not(:disabled) {
+.vmz-ui-btn[data-variant="ghost"]:active:not(:disabled) {
     background: var(--vmz-surface-mist);
-  }
+}
 
-  .vmz-ui-btn[data-variant='danger'] {
+.vmz-ui-btn[data-variant="danger"] {
     background: var(--vmz-status-danger-accent);
     color: var(--vmz-action-primary-foreground);
     border-color: transparent;
-  }
+}
 
-  .vmz-ui-btn[data-variant='danger']:hover:not(:disabled) {
+.vmz-ui-btn[data-variant="danger"]:hover:not(:disabled) {
     background: color-mix(in srgb, var(--vmz-status-danger-accent) 82%, var(--vmz-text-ink));
-  }
+}
 
-  .vmz-ui-btn[data-variant='danger']:active:not(:disabled) {
+.vmz-ui-btn[data-variant="danger"]:active:not(:disabled) {
     background: var(--vmz-status-danger-foreground);
-  }
+}
 
-  .vmz-ui-btn:focus-visible {
+.vmz-ui-btn:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-btn:disabled {
+.vmz-ui-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  :where([data-density='compact']) .vmz-ui-btn {
+:where([data-density="compact"]) .vmz-ui-btn {
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  }
+}
 
-  :where([data-density='dense']) .vmz-ui-btn {
+:where([data-density="dense"]) .vmz-ui-btn {
     padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
-  }
+}
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .vmz-ui-btn {
-      transition: none;
+        transition: none;
     }
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Button (variants + motion control feedback).
-* Colors / motion come only from Style Theme semantic tokens — never brand hex.
-* Variants: primary | secondary | ghost | danger
-*/
+ * VMZ UI — Button (variants + motion control feedback).
+ * Colors / motion come only from Style Theme semantic tokens — never brand hex.
+ * Variants: primary | secondary | ghost | danger
+ */
 export default class Button {
-	/** @type {'contents'} Direct host: no layout box (`ui-direct-host-box`). */
-	static __vmzHostBox = 'contents';
-	public type: string = "button";
-	public variant: string = "primary";
-	public disabled: boolean = false;
-	public loading: boolean = false;
-	public block: boolean = false;
-	public size: string = "middle";
-	public href: string = "";
-	public target: string = "";
-	public rel: string = "";
-	public onClick: ((e: Event) => void) | null = null;
-	onDomClick(e: Event) {
-		this.emit("click", e);
-		if (typeof this.onClick === "function") this.onClick(e);
-	}
+    /** @type {'contents'} Direct host: no layout box (`ui-direct-host-box`). */
+    static __vmzHostBox = "contents";
+    public type: string = "button";
+    public variant: string = "primary";
+    public disabled: boolean = false;
+    public loading: boolean = false;
+    public block: boolean = false;
+    public size: string = "middle";
+    public href: string = "";
+    public target: string = "";
+    public rel: string = "";
+    public ariaHaspopup: string = "";
+    public ariaControls: string = "";
+    public onClick: ((e: Event) => void) | null = null;
+    onDomClick(e: Event) {
+        this.emit("click", e);
+        if (typeof this.onClick === "function") this.onClick(e);
+    }
 }
 </script>

package/src/components/Callout.vmz

@@ -1,20 +1,18 @@
 <template>
-  <aside
-      class="vmz-ui-callout"
-      data-vmz-ui="callout"
-      :data-tone="tone"
-      :role="roleName"
-    >
-      <p v-if="title" class="vmz-ui-callout__title">{{ title }}</p>
-      <p v-if="description" class="vmz-ui-callout__description">{{ description }}</p>
-      <div class="vmz-ui-callout__body">
-        <slot />
-      </div>
+    <aside data-vmz-ui="callout" :data-tone="tone" :role="roleName" class="vmz-ui-callout">
+        <p v-if="title" class="vmz-ui-callout__title">
+            {{ title }}
+        </p>
+        <p v-if="description" class="vmz-ui-callout__description">
+            {{ description }}
+        </p>
+        <div class="vmz-ui-callout__body">
+            <slot />
+        </div>
     </aside>
 </template>
-
 <style>
-  .vmz-ui-callout {
+.vmz-ui-callout {
     display: flex;
     flex-direction: column;
     gap: 0.45rem;
@@ -24,57 +22,56 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-callout[data-tone='info'] {
+.vmz-ui-callout[data-tone="info"] {
     border-color: var(--vmz-status-info-accent);
     background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, var(--vmz-surface-paper));
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-callout[data-tone='success'] {
+.vmz-ui-callout[data-tone="success"] {
     border-color: var(--vmz-status-success-accent);
     background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, var(--vmz-surface-paper));
     color: var(--vmz-status-success-foreground);
-  }
+}
 
-  .vmz-ui-callout[data-tone='warning'] {
+.vmz-ui-callout[data-tone="warning"] {
     border-color: var(--vmz-status-warning-accent);
     background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, var(--vmz-surface-paper));
     color: var(--vmz-status-warning-foreground);
-  }
+}
 
-  .vmz-ui-callout[data-tone='danger'] {
+.vmz-ui-callout[data-tone="danger"] {
     border-color: var(--vmz-status-danger-accent);
     background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, var(--vmz-surface-paper));
     color: var(--vmz-status-danger-foreground);
-  }
+}
 
-  .vmz-ui-callout__title {
+.vmz-ui-callout__title {
     margin: 0;
     font-family: var(--vmz-font-display);
     font-weight: 700;
-  }
+}
 
-  .vmz-ui-callout__description {
+.vmz-ui-callout__description {
     margin: 0;
     line-height: 1.5;
-  }
+}
 
-  .vmz-ui-callout__body:empty {
+.vmz-ui-callout__body:empty {
     display: none;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Callout (Document/Product composition).
-* Inline guidance block for prose; shares status.* tones with Alert.
-*/
+ * VMZ UI — Callout (Document/Product composition).
+ * Inline guidance block for prose; shares status.* tones with Alert.
+ */
 export default class Callout {
-	public title: string = "";
-	public description: string = "";
-	public tone: string = "info";
-	public roleName: string = "note";
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "info";
+    public roleName: string = "note";
 }
 </script>

package/src/components/Card.vmz

@@ -1,89 +1,106 @@
 <template>
-  <section class="vmz-ui-card" data-vmz-ui="card" :data-size="size" :data-bordered="bordered ? 'true' : 'false'" :data-hoverable="hoverable ? 'true' : 'false'">
-      <header v-if="title" class="vmz-ui-card__header">
-        <h2 class="vmz-ui-card__title">{{ title }}</h2>
-        <p v-if="description" class="vmz-ui-card__description">{{ description }}</p>
-      </header>
-      <div class="vmz-ui-card__body">
-        <slot />
-      </div>
+    <section data-vmz-ui="card" :data-size="size" :data-bordered='bordered ? "true" : "false"' :data-hoverable='hoverable ? "true" : "false"' class="vmz-ui-card">
+        <header v-if="title" class="vmz-ui-card__header">
+            <h2 class="vmz-ui-card__title">
+                {{ title }}
+            </h2>
+            <p v-if="description" class="vmz-ui-card__description">
+                {{ description }}
+            </p>
+        </header>
+        <div class="vmz-ui-card__body">
+            <slot />
+        </div>
     </section>
 </template>
-
 <style>
 .vmz-ui-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-  border-radius: var(--vmz-radius-lg, 8px);
-  background: var(--vmz-surface-paper);
-  color: var(--vmz-text-ink);
-  box-shadow: var(--vmz-shadow-card, none);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-card, none);
+}
+.vmz-ui-card[data-bordered="false"] {
+    border-color: transparent;
+}
+.vmz-ui-card[data-hoverable="true"] {
+    transition:
+        border-color var(--vmz-motion-control-duration, 0.16s),
+        box-shadow var(--vmz-motion-control-duration, 0.16s);
+}
+.vmz-ui-card[data-hoverable="true"]:hover {
+    box-shadow: var(
+        --vmz-shadow-card-hover,
+        0 1px 2px -2px rgba(0, 0, 0, 0.08),
+        0 3px 6px 0 rgba(0, 0, 0, 0.06)
+    );
+}
+.vmz-ui-card[data-size="small"] {
+    gap: 0.5rem;
+    padding: 0.75rem 1rem;
 }
-.vmz-ui-card[data-bordered='false'] { border-color: transparent; }
-.vmz-ui-card[data-hoverable='true'] { transition: border-color var(--vmz-motion-control-duration, .16s), box-shadow var(--vmz-motion-control-duration, .16s); }
-.vmz-ui-card[data-hoverable='true']:hover { box-shadow: var(--vmz-shadow-card-hover, 0 1px 2px -2px rgba(0,0,0,.08), 0 3px 6px 0 rgba(0,0,0,.06)); }
-.vmz-ui-card[data-size='small'] { gap: .5rem; padding: .75rem 1rem; }
 
-  :where([data-density='compact']) .vmz-ui-card {
+:where([data-density="compact"]) .vmz-ui-card {
     gap: var(--vmz-density-compact-gap);
     padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-  }
+}
 
-  :where([data-density='dense']) .vmz-ui-card {
+:where([data-density="dense"]) .vmz-ui-card {
     gap: var(--vmz-density-dense-gap);
     padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
-  }
+}
 
-  .vmz-ui-card__header {
+.vmz-ui-card__header {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
-  }
+}
 
 .vmz-ui-card__title {
-  margin: 0;
-  font-family: var(--vmz-font-sans, inherit);
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--vmz-text-ink);
+    margin: 0;
+    font-family: var(--vmz-font-sans, inherit);
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
 }
 
-  .vmz-ui-card__description {
+.vmz-ui-card__description {
     margin: 0;
     color: var(--vmz-text-steel);
     line-height: 1.45;
-  }
+}
 
-  .vmz-ui-card__body {
+.vmz-ui-card__body {
     display: flex;
     flex-direction: column;
     gap: var(--vmz-density-control-gap);
-  }
+}
 
-  /* Direct host default is display:contents (runtime); Badge-only CSS special-case removed. */
+/* Direct host default is display:contents (runtime); Badge-only CSS special-case removed. */
 
-  :where([data-density='compact']) .vmz-ui-card__body {
+:where([data-density="compact"]) .vmz-ui-card__body {
     gap: var(--vmz-density-compact-gap);
-  }
+}
 
-  :where([data-density='dense']) .vmz-ui-card__body {
+:where([data-density="dense"]) .vmz-ui-card__body {
     gap: var(--vmz-density-dense-gap);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Card (Commercial Surface).
-* Surface container; spacing from density.*; chrome from surface/line/text.
-*/
+ * VMZ UI — Card (Commercial Surface).
+ * Surface container; spacing from density.*; chrome from surface/line/text.
+ */
 export default class Card {
-	public title: string = "";
-	public description: string = "";
-	public size: string = "middle";
-	public bordered: boolean = true;
-	public hoverable: boolean = false;
+    public title: string = "";
+    public description: string = "";
+    public size: string = "middle";
+    public bordered: boolean = true;
+    public hoverable: boolean = false;
 }
 </script>