@vmz/ui 0.3.4 → 0.3.6

package/src/components/BulkActions.vmz

@@ -1,51 +1,51 @@
-<template>
-    <div data-vmz-ui="bulk-actions" role="region" :aria-label="label" :data-open="selectedCount ? 'true' : 'false'" class="vmz-ui-bulk-actions">
-        <p data-vmz-fixture="bulk-count" class="vmz-ui-bulk-actions__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-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-}
-
-/* Keep host+slot mounted so default slot projects at create time (not inside v-if). */
-.vmz-ui-bulk-actions[data-open="false"] {
-    display: none;
-}
-
-.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).
- * Hides when selectedCount is falsy but keeps the tree mounted so parent slot children project.
- */
-export default class BulkActions {
-    public label: string = "Bulk actions";
-    public selectedCount: number = 0;
-    public countLabel: string = "";
-}
-</script>
+<template>
+    <div data-vmz-ui="bulk-actions" role="region" :aria-label="label" :data-open="selectedCount ? 'true' : 'false'" class="vmz-ui-bulk-actions">
+        <p data-vmz-fixture="bulk-count" class="vmz-ui-bulk-actions__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.625rem 1rem;
+    padding: 0.625rem 0.85rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+}
+
+/* Keep host+slot mounted so default slot projects at create time (not inside v-if). */
+.vmz-ui-bulk-actions[data-open="false"] {
+    display: none;
+}
+
+.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).
+ * Hides when selectedCount is falsy but keeps the tree mounted so parent slot children project.
+ */
+export default class BulkActions {
+    public label: string = "Bulk actions";
+    public selectedCount: number = 0;
+    public countLabel: string = "";
+}
+</script>

package/src/components/Button.vmz

@@ -1,192 +1,211 @@
-<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.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);
-}
-
-.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: #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="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);
-}
-
-.vmz-ui-btn:disabled {
-    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 (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" @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>