@vmz/ui 0.3.6 → 0.3.8

package/src/components/Button.vmz

@@ -1,211 +1,237 @@
-<template>
-    <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" 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.375rem;
-    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: 500;
-    line-height: 1.5715;
-    white-space: nowrap;
-    cursor: pointer;
-    background: var(--vmz-action-primary-background);
-    color: var(--vmz-action-primary-foreground);
-    outline: none;
-    box-shadow: 0 2px 0 color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
-    transition:
-        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        border-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        box-shadow var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-.vmz-ui-btn[data-size="small"] {
-    min-height: var(--vmz-control-height-sm, 1.5rem);
-    padding: 0 0.625rem;
-    font-size: 0.8125rem;
-}
-.vmz-ui-btn[data-size="large"] {
-    min-height: var(--vmz-control-height-lg, 2.5rem);
-    padding: 0.4375rem 1.125rem;
-    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: 1.5px solid currentColor;
-    border-right-color: transparent;
-    border-radius: 50%;
-    opacity: 0.8;
-    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);
-}
-
-.vmz-ui-btn:active:not(:disabled) {
-    background: var(--vmz-action-primary-active);
-    transform: translateY(0.5px);
-}
-
-.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);
-    box-shadow: none;
-}
-.vmz-ui-btn[data-variant="default"] {
-    background: var(--vmz-surface-paper);
-    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-hover);
-    border-color: var(--vmz-action-primary-hover);
-    background: var(--vmz-surface-paper);
-}
-.vmz-ui-btn[data-variant="text"],
-.vmz-ui-btn[data-variant="link"] {
-    min-height: auto;
-    padding: 0.25rem 0.5rem;
-    border-color: transparent;
-    background: transparent;
-    color: var(--vmz-action-primary-background);
-    box-shadow: none;
-}
-.vmz-ui-btn[data-variant="dashed"] {
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-    border: 1px dashed var(--vmz-line-default);
-    box-shadow: none;
-}
-
-.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 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-btn[data-variant="default"]:focus-visible,
-.vmz-ui-btn[data-variant="dashed"]:focus-visible,
-.vmz-ui-btn[data-variant="secondary"]:focus-visible,
-.vmz-ui-btn[data-variant="ghost"]:focus-visible,
-.vmz-ui-btn[data-variant="text"]:focus-visible,
-.vmz-ui-btn[data-variant="link"]:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-btn:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-    box-shadow: none;
-    transform: none;
-}
-
-: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;
-    }
-    .vmz-ui-btn:active:not(:disabled) {
-        transform: 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
- */
-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 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>
+<template>
+    <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" :aria-busy="loading ? 'true' : 'false'" @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" 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" :aria-expanded="ariaExpanded ? ariaExpanded : null" @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: var(--vmz-space-2);
+    /* Inline control: never stretch when the parent is a flex column (shells, card bodies). */
+    width: fit-content;
+    box-sizing: border-box;
+    min-height: var(--vmz-control-height);
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-md);
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.5715;
+    white-space: nowrap;
+    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),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-btn[data-size="small"] {
+    min-height: var(--vmz-control-height-sm);
+    padding: 0 var(--vmz-space-3);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-btn[data-size="large"] {
+    min-height: var(--vmz-control-height-lg);
+    padding: var(--vmz-density-control-padding-y) var(--vmz-space-4);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-btn[data-block="true"] {
+    width: 100%;
+}
+
+.vmz-ui-btn[data-loading="true"] {
+    cursor: wait;
+}
+
+.vmz-ui-btn__spinner {
+    flex: 0 0 auto;
+    width: 1em;
+    height: 1em;
+    border: 1.5px solid currentColor;
+    border-right-color: transparent;
+    border-radius: var(--vmz-radius-pill);
+    color: currentColor;
+    opacity: 0.9;
+    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);
+}
+
+.vmz-ui-btn:active:not(:disabled) {
+    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="default"] {
+    background: var(--vmz-action-secondary-background);
+    color: var(--vmz-text-ink);
+    border-color: var(--vmz-line-default);
+}
+
+.vmz-ui-btn[data-variant="default"]:hover:not(:disabled) {
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
+    background: var(--vmz-action-secondary-background);
+}
+
+.vmz-ui-btn[data-variant="default"]:active:not(:disabled) {
+    color: var(--vmz-action-primary-active);
+    border-color: var(--vmz-action-primary-active);
+    background: var(--vmz-action-secondary-active);
+}
+
+.vmz-ui-btn[data-variant="text"],
+.vmz-ui-btn[data-variant="link"] {
+    min-height: auto;
+    padding: var(--vmz-space-1) var(--vmz-space-2);
+    border-color: transparent;
+    background: transparent;
+    color: var(--vmz-action-link-foreground);
+}
+
+.vmz-ui-btn[data-variant="text"]:hover:not(:disabled),
+.vmz-ui-btn[data-variant="link"]:hover:not(:disabled) {
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-action-link-hover);
+}
+
+.vmz-ui-btn[data-variant="text"]:active:not(:disabled),
+.vmz-ui-btn[data-variant="link"]:active:not(:disabled) {
+    background: var(--vmz-surface-fill);
+}
+
+.vmz-ui-btn[data-variant="dashed"] {
+    background: var(--vmz-action-secondary-background);
+    color: var(--vmz-text-ink);
+    border: 1px dashed var(--vmz-line-default);
+}
+
+.vmz-ui-btn[data-variant="dashed"]:hover:not(:disabled) {
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-btn[data-variant="secondary"]:hover:not(:disabled) {
+    background: var(--vmz-action-secondary-hover);
+    border-color: var(--vmz-action-primary-hover);
+    color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-btn[data-variant="secondary"]:active:not(:disabled) {
+    background: var(--vmz-action-secondary-active);
+    border-color: var(--vmz-action-primary-active);
+    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: var(--vmz-surface-mist);
+}
+
+.vmz-ui-btn[data-variant="ghost"]:active:not(:disabled) {
+    background: var(--vmz-surface-fill);
+}
+
+.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: var(--vmz-status-danger-foreground);
+}
+
+.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 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-btn:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    box-shadow: none;
+    transform: none;
+}
+
+: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;
+    }
+    .vmz-ui-btn__spinner {
+        animation-duration: 1.4s;
+    }
+}
+</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 | default | dashed | ghost | text | link | 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 ariaHaspopup: string = "";
+    public ariaControls: string = "";
+    public ariaExpanded: string = "";
+    public onClick: ((e: Event) => void) | null = null;
+    onDomClick(e: Event) {
+        this.emit("click", e);
+        if (typeof this.onClick === "function") this.onClick(e);
+    }
+}
+</script>