@vmz/ui 0.0.3 → 0.0.4

package/src/components/BulkActions.vmz

@@ -0,0 +1,52 @@
+<template>
+  <div
+    if={selectedCount}
+    class="vmz-ui-bulk-actions"
+    data-vmz-ui="bulk-actions"
+    role="region"
+    aria-label={label}
+  >
+    <p class="vmz-ui-bulk-actions__count" data-dogfood="bulk-count">{countLabel}</p>
+    <div class="vmz-ui-bulk-actions__actions">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-bulk-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem 1rem;
+  padding: 0.65rem 0.85rem;
+  border: 1px solid var(--vmz-action-primary-background);
+  border-radius: 2px;
+  background: transparent;
+}
+
+.vmz-ui-bulk-actions__count {
+  margin: 0;
+  font-weight: 700;
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-bulk-actions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — BulkActions (Console composition).
+ * Renders when selectedCount is truthy; parent owns selection count + label.
+ */
+export default class BulkActions {
+  public label: string = 'Bulk actions';
+  public selectedCount: number = 0;
+  public countLabel: string = '';
+}
+</script>

package/src/components/Button.vmz

@@ -2,6 +2,10 @@
   <button
     type={type}
     class="vmz-ui-btn"
+    data-vmz-ui="button"
+    data-vmz-motion="control"
+    data-vmz-motion-token="motion.control"
+    data-variant={variant}
     disabled={disabled}
     onClick={onClick}
   >
@@ -15,7 +19,7 @@
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
-  padding: 0.55rem 0.95rem;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
   border: 1px solid transparent;
   border-radius: 2px;
   font: inherit;
@@ -25,6 +29,11 @@
   background: var(--vmz-action-primary-background);
   color: var(--vmz-action-primary-foreground);
   outline: 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),
+    box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
 }
 
 .vmz-ui-btn:hover:not(:disabled) {
@@ -35,6 +44,49 @@
   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']:hover:not(:disabled) {
+  background: var(--vmz-action-secondary-hover);
+}
+
+.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'] {
+  background: transparent;
+  color: var(--vmz-text-ink);
+  border-color: transparent;
+}
+
+.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) {
+  background: var(--vmz-surface-mist);
+}
+
+.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) {
+  background: color-mix(in srgb, var(--vmz-status-danger-accent) 82%, var(--vmz-text-ink));
+}
+
+.vmz-ui-btn[data-variant='danger']:active:not(:disabled) {
+  background: var(--vmz-status-danger-foreground);
+}
+
 .vmz-ui-btn:focus-visible {
   box-shadow: 0 0 0 2px var(--vmz-focus-ring);
 }
@@ -43,16 +95,31 @@
   opacity: 0.55;
   cursor: not-allowed;
 }
+
+: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 {
+  padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vmz-ui-btn {
+    transition: none;
+  }
+}
 </style>
 
 <script client>
 /**
- * VMZ UI — Button probe (UI0).
- * Colors come only from Style Theme semantic tokens — never brand hex.
- * Requirements: contracts/token-requirements.v0.json
+ * 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 {
   public type: string = 'button';
+  public variant: string = 'primary';
   public disabled: boolean = false;
   public onClick: ((e: Event) => void) | null = null;
 }

package/src/components/Callout.vmz

@@ -0,0 +1,80 @@
+<template>
+  <aside
+    class="vmz-ui-callout"
+    data-vmz-ui="callout"
+    data-tone={tone}
+    role={roleName}
+  >
+    <p if={title} class="vmz-ui-callout__title">{title}</p>
+    <p if={description} class="vmz-ui-callout__description">{description}</p>
+    <div class="vmz-ui-callout__body">
+      <slot />
+    </div>
+  </aside>
+</template>
+
+<style>
+.vmz-ui-callout {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+  border: 1px solid var(--vmz-status-info-accent);
+  border-left-width: 4px;
+  border-radius: 2px;
+  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'] {
+  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'] {
+  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'] {
+  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'] {
+  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 {
+  margin: 0;
+  font-family: var(--vmz-font-display);
+  font-weight: 700;
+}
+
+.vmz-ui-callout__description {
+  margin: 0;
+  line-height: 1.5;
+}
+
+.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.
+ */
+export default class Callout {
+  public title: string = '';
+  public description: string = '';
+  public tone: string = 'info';
+  public roleName: string = 'note';
+}
+</script>

package/src/components/Card.vmz

@@ -0,0 +1,81 @@
+<template>
+  <section class="vmz-ui-card" data-vmz-ui="card">
+    <header if={title} class="vmz-ui-card__header">
+      <h2 class="vmz-ui-card__title">{title}</h2>
+      <p 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: var(--vmz-density-control-gap);
+  padding: calc(var(--vmz-density-control-padding-y) + 0.35rem)
+    calc(var(--vmz-density-control-padding-x) + 0.25rem);
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-paper);
+  color: var(--vmz-text-ink);
+  box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 65%, transparent);
+}
+
+: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 {
+  gap: var(--vmz-density-dense-gap);
+  padding: var(--vmz-density-dense-padding-y) var(--vmz-density-dense-padding-x);
+}
+
+.vmz-ui-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.vmz-ui-card__title {
+  margin: 0;
+  font-family: var(--vmz-font-display);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--vmz-text-ink);
+}
+
+.vmz-ui-card__description {
+  margin: 0;
+  color: var(--vmz-text-steel);
+  line-height: 1.45;
+}
+
+.vmz-ui-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vmz-density-control-gap);
+}
+
+:where([data-density='compact']) .vmz-ui-card__body {
+  gap: var(--vmz-density-compact-gap);
+}
+
+: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.
+ */
+export default class Card {
+  public title: string = '';
+  public description: string = '';
+}
+</script>

package/src/components/Checkbox.vmz

@@ -0,0 +1,69 @@
+<template>
+  <label class="vmz-ui-checkbox" data-vmz-ui="checkbox" for={controlId}>
+    <input
+      id={controlId}
+      class="vmz-ui-checkbox__input"
+      type="checkbox"
+      checked={checked}
+      disabled={disabled}
+      aria-describedby={describedBy}
+      onClick={onToggle}
+    />
+    <span class="vmz-ui-checkbox__label">{label}</span>
+  </label>
+</template>
+
+<style>
+.vmz-ui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font: inherit;
+  cursor: pointer;
+}
+
+.vmz-ui-checkbox__input {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--vmz-action-primary-background);
+  outline: none;
+}
+
+.vmz-ui-checkbox__input:focus-visible {
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-checkbox__input:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.vmz-ui-checkbox__label {
+  font-weight: 600;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — Checkbox (UI2).
+ * Label association via wrapping label + for/id; parent owns checked (no parallel form store).
+ * Toggle goes through onChange so live `checked` prop stays authoritative.
+ */
+export default class Checkbox {
+  public label: string = '';
+  public checked: boolean = false;
+  public disabled: boolean = false;
+  public controlId: string = 'vmz-checkbox';
+  public describedBy: string = '';
+  public onChange: ((e: { target: { checked: boolean } }) => void) | null = null;
+
+  onToggle(ev) {
+    if (this.disabled) return;
+    if (ev && typeof ev.preventDefault === 'function') ev.preventDefault();
+    const next = !this.checked;
+    if (typeof this.onChange === 'function') {
+      this.onChange({ target: { checked: next } });
+    }
+  }
+}
+</script>

package/src/components/CodeBlock.vmz

@@ -0,0 +1,67 @@
+<template>
+  <figure class="vmz-ui-code-block" data-vmz-ui="code-block">
+    <div class="vmz-ui-code-block__bar">
+      <figcaption if={caption} class="vmz-ui-code-block__caption">{caption}</figcaption>
+      <Button type="button" variant="ghost" onClick={onCopy}>{copyLabel}</Button>
+    </div>
+    <pre class="vmz-ui-code-block__pre"><code class="vmz-ui-code-block__code">{code}</code></pre>
+  </figure>
+</template>
+
+<style>
+.vmz-ui-code-block {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  border: 1px solid var(--vmz-line-default);
+  border-radius: 2px;
+  background: var(--vmz-surface-mist);
+  overflow: hidden;
+}
+
+.vmz-ui-code-block__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  padding: 0.35rem 0.55rem;
+  border-bottom: 1px solid var(--vmz-line-default);
+  background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-code-block__caption {
+  margin: 0;
+  font-family: var(--vmz-font-mono);
+  font-size: 0.8rem;
+  color: var(--vmz-text-steel);
+}
+
+.vmz-ui-code-block__pre {
+  margin: 0;
+  padding: 0.85rem 1rem;
+  overflow-x: auto;
+}
+
+.vmz-ui-code-block__code {
+  font-family: var(--vmz-font-mono);
+  font-size: 0.88rem;
+  line-height: 1.5;
+  color: var(--vmz-text-ink);
+  white-space: pre;
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — CodeBlock (Document/Product composition).
+ * Source is readable in SSR HTML; copy is progressive enhancement via onCopy.
+ */
+export default class CodeBlock {
+  public code: string = '';
+  public caption: string = '';
+  public copyLabel: string = 'Copy';
+  public onCopy: ((e: Event) => void) | null = null;
+}
+</script>

package/src/components/ConsoleShell.vmz

@@ -0,0 +1,127 @@
+<template>
+  <div class="vmz-ui-console-shell" data-vmz-ui="console-shell">
+    <aside class="vmz-ui-console-shell__sidebar" data-vmz-shell="sidebar" aria-label={navLabel}>
+      <a class="vmz-ui-console-shell__brand" href={homeHref}>{brand}</a>
+      <nav class="vmz-ui-console-shell__nav">
+        <a each={nav} as="item" key={item.id} href={item.href} data-vmz-nav={item.id}>
+          {item.title}
+        </a>
+      </nav>
+    </aside>
+    <div class="vmz-ui-console-shell__body">
+      <header class="vmz-ui-console-shell__header" data-vmz-shell="header">
+        <h1 class="vmz-ui-console-shell__title">{title}</h1>
+      </header>
+      <main class="vmz-ui-console-shell__main" data-vmz-shell="main">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style>
+.vmz-ui-console-shell {
+  display: grid;
+  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
+  min-height: 100%;
+  color: inherit;
+}
+
+.vmz-ui-console-shell__sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 0.9rem;
+  border-right: 1px solid var(--vmz-action-primary-background);
+}
+
+.vmz-ui-console-shell__brand {
+  font: inherit;
+  font-weight: 700;
+  font-size: 1.05rem;
+  letter-spacing: 0.04em;
+  text-decoration: none;
+  color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-console-shell__brand:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+}
+
+.vmz-ui-console-shell__nav a {
+  font: inherit;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--vmz-action-primary-active);
+  padding: 0.35rem 0.4rem;
+}
+
+.vmz-ui-console-shell__nav a:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+}
+
+.vmz-ui-console-shell__body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.vmz-ui-console-shell__header {
+  padding: 0.85rem 1.1rem;
+  border-bottom: 1px solid var(--vmz-action-primary-background);
+}
+
+.vmz-ui-console-shell__title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+  color: var(--vmz-action-primary-active);
+}
+
+.vmz-ui-console-shell__main {
+  flex: 1;
+  padding: 1rem 1.1rem 1.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+@media (max-width: 40rem) {
+  .vmz-ui-console-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .vmz-ui-console-shell__sidebar {
+    border-right: 0;
+    border-bottom: 1px solid var(--vmz-action-primary-background);
+  }
+
+  .vmz-ui-console-shell__nav {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+</style>
+
+<script client>
+/**
+ * VMZ UI — ConsoleShell (Console composition).
+ * Sidebar + header landmarks + main slot. Parent supplies nav; no private theme.
+ */
+export default class ConsoleShell {
+  public brand: string = 'VMZ';
+  public homeHref: string = '/';
+  public title: string = 'Console';
+  public navLabel: string = 'Console';
+  /** @type {{ id: string, title: string, href: string }[]} */
+  public nav: { id: string; title: string; href: string }[] = [];
+}
+</script>