@vmz/ui 0.3.6 → 0.3.8

package/src/components/Callout.vmz

@@ -1,77 +1,178 @@
-<template>
-    <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 {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-status-info-accent);
-    border-left-width: 1px;
-    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"] {
-    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>
+<template>
+    <aside data-vmz-ui="callout" :data-tone="tone" :role="roleName" class="vmz-ui-callout">
+        <span aria-hidden="true" class="vmz-ui-callout__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-callout__content">
+            <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>
+        </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-callout__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
+    </aside>
+</template>
+<style>
+.vmz-ui-callout {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem);
+    border: 1px solid var(--vmz-status-info-border, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-status-info-background, var(--vmz-surface-paper));
+    color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-callout[data-tone="info"] {
+    border-color: var(--vmz-status-info-border, var(--vmz-line-default));
+    background: var(--vmz-status-info-background, var(--vmz-surface-paper));
+    color: var(--vmz-status-info-foreground);
+}
+
+.vmz-ui-callout[data-tone="success"] {
+    border-color: var(--vmz-status-success-border, var(--vmz-line-default));
+    background: var(--vmz-status-success-background, var(--vmz-surface-paper));
+    color: var(--vmz-status-success-foreground);
+}
+
+.vmz-ui-callout[data-tone="warning"] {
+    border-color: var(--vmz-status-warning-border, var(--vmz-line-default));
+    background: var(--vmz-status-warning-background, var(--vmz-surface-paper));
+    color: var(--vmz-status-warning-foreground);
+}
+
+.vmz-ui-callout[data-tone="danger"] {
+    border-color: var(--vmz-status-danger-border, var(--vmz-line-default));
+    background: var(--vmz-status-danger-background, var(--vmz-surface-paper));
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-callout[data-tone="info"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-callout[data-tone="success"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-callout[data-tone="warning"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-callout[data-tone="danger"] .vmz-ui-callout__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-callout__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-callout__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
+}
+
+.vmz-ui-callout__title {
+    margin: 0;
+    font-family: var(--vmz-font-display, inherit);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: inherit;
+}
+
+.vmz-ui-callout__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-callout__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2, 0.5rem);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-callout__body:empty {
+    display: none;
+}
+
+.vmz-ui-callout__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-callout__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-callout__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+:where([data-density="compact"]) .vmz-ui-callout {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-callout {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Callout (Document/Product composition).
+ * Inline guidance block for prose; shares status.{accent|foreground|background|border} tones with Alert.
+ */
+export default class Callout {
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "info";
+    public roleName: string = "note";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public onClose: (() => void) | null = null;
+
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+}
+</script>

package/src/components/Card.vmz

@@ -1,120 +1,141 @@
-<template>
-    <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: 1.25rem 1.5rem;
-    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-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
-        box-shadow var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1)),
-        transform var(--vmz-motion-emphasis-duration, 240ms) var(--vmz-motion-emphasis-easing, cubic-bezier(0.16, 1, 0.3, 1));
-}
-.vmz-ui-card[data-hoverable="true"]:hover {
-    border-color: var(--vmz-line-default);
-    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)
-    );
-    transform: translateY(-1px);
-}
-.vmz-ui-card[data-hoverable="true"]:focus-within {
-    border-color: var(--vmz-action-primary-background);
-}
-@media (prefers-reduced-motion: reduce) {
-    .vmz-ui-card[data-hoverable="true"] {
-        transition: none;
-    }
-    .vmz-ui-card[data-hoverable="true"]:hover {
-        transform: none;
-    }
-}
-.vmz-ui-card[data-size="small"] {
-    gap: 0.5rem;
-    padding: 0.875rem 1rem;
-}
-
-: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.375rem;
-}
-
-.vmz-ui-card__title {
-    margin: 0;
-    font-family: var(--vmz-font-sans, inherit);
-    font-size: 1rem;
-    font-weight: 600;
-    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);
-}
-
-/* Direct host default is display:contents (runtime); Badge-only CSS special-case removed. */
-
-: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 = "";
-    public size: string = "middle";
-    public bordered: boolean = true;
-    public hoverable: boolean = false;
-}
-</script>
+<template>
+    <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 || description" class="vmz-ui-card__header">
+            <h2 v-if="title" 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>
+        <footer v-if="footer" class="vmz-ui-card__footer">
+            {{ footer }}
+        </footer>
+    </section>
+</template>
+<style>
+.vmz-ui-card {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    font-family: var(--vmz-font-sans, inherit);
+    box-shadow: none;
+}
+
+.vmz-ui-card[data-bordered="false"] {
+    border-color: transparent;
+}
+
+.vmz-ui-card[data-hoverable="true"] {
+    transition: border-color var(--vmz-motion-control-duration, 120ms)
+        var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-card[data-hoverable="true"]:hover {
+    border-color: var(--vmz-line-strong);
+}
+
+.vmz-ui-card[data-hoverable="true"]:focus-within {
+    border-color: var(--vmz-action-primary-background);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-card[data-hoverable="true"] {
+        transition: none;
+    }
+}
+
+.vmz-ui-card__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-5, 1.5rem);
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+}
+
+.vmz-ui-card__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    gap: var(--vmz-space-3, 0.75rem);
+    padding: var(--vmz-space-5, 1.5rem);
+}
+
+.vmz-ui-card__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem) var(--vmz-space-5, 1.5rem);
+    border-top: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-card[data-size="small"] .vmz-ui-card__header,
+.vmz-ui-card[data-size="small"] .vmz-ui-card__body {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+}
+
+.vmz-ui-card[data-size="small"] .vmz-ui-card__footer {
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
+}
+
+.vmz-ui-card__title {
+    margin: 0;
+    font-family: var(--vmz-font-display, var(--vmz-font-sans, inherit));
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-card__description {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-tertiary);
+}
+
+:where([data-density="compact"]) .vmz-ui-card__header,
+:where([data-density="compact"]) .vmz-ui-card__body {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem) var(--vmz-space-4, 1rem);
+}
+
+:where([data-density="compact"]) .vmz-ui-card__footer {
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-4, 1rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-card__header,
+:where([data-density="dense"]) .vmz-ui-card__body {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-2, 0.5rem) var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-card__footer {
+    padding: var(--vmz-space-1, 0.25rem) var(--vmz-space-3, 0.75rem);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Card (Commercial Surface).
+ * Surface container: paper + 1px line + radius.lg; spacing from space/density tokens.
+ */
+export default class Card {
+    public title: string = "";
+    public description: string = "";
+    public footer: string = "";
+    public size: string = "middle";
+    public bordered: boolean = true;
+    public hoverable: boolean = false;
+}
+</script>