@vuecs/button 1.0.3 → 1.1.0

package/README.md

@@ -1,16 +1,45 @@
 # @vuecs/button
 
-[![npm version](https://badge.fury.io/js/@vuecs%2Fbutton.svg)](https://badge.fury.io/js/@vuecs%2Fbutton)
-[![main](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml/badge.svg)](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml)
+[![npm version](https://img.shields.io/npm/v/@vuecs/button)](https://www.npmjs.com/package/@vuecs/button)
+[![CI](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml/badge.svg)](https://github.com/Tada5hi/vuecs/actions/workflows/main.yml)
+[![license](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](./LICENSE)
 
-General-purpose button component for Vue 3 with semantic color/variant/size variants, loading state, and leading/trailing icon slots.
+**`<VCButton>` — the general-purpose button of [vuecs](https://github.com/tada5hi/vuecs).** A full `variant` × `color` × `size` matrix, loading state, and icon slots — visually defined entirely by whichever theme you install (Tailwind, Bootstrap, Bulma, or your own).
 
-Full documentation: **[vuecs.dev/components/button](https://vuecs.dev/components/button)**
+## ✨ What's inside
+
+- 🎛️ **Variant matrix** — `variant` (`solid` / `outline` / `soft` / `ghost` / `link`) × `color` (`primary` / `neutral` / `success` / `warning` / `error` / `info`) × `size` (`sm` / `md` / `lg`), resolved through the vuecs variant system.
+- ⏳ **Loading state** — `:loading` disables interaction and exposes `{ loading, disabled }` to the default slot for spinners or custom feedback.
+- 🖼️ **Icon support** — `icon-left` / `icon-right` Iconify-name props (rendered via `<VCIcon>`) plus leading/trailing slots for full control.
+- 🔗 **Polymorphic** — render as `button`, `a`, any tag, or a component (`RouterLink` / `NuxtLink`) via `:as`; native `type` forwarding for forms, `aria-disabled` for non-button targets.
+- 📝 **`useSubmitButton()` companion** — `@vuecs/forms` ships an experimental composable that drives create/update submit buttons (text, icon, color) from global behavioral defaults.
+
+## 📦 Installation
 
 ```bash
 npm install @vuecs/button
 ```
 
+## ⚡ Usage
+
+```vue
+<VCButton color="primary" icon-left="lucide:plus" :loading="busy" @click="create">
+    Create
+</VCButton>
+
+<VCButton variant="outline" color="error" size="sm">Delete</VCButton>
+<VCButton variant="ghost" as="a" href="/docs">Docs</VCButton>
+
+<!-- button-styled router link -->
+<VCButton :as="RouterLink" :to="`/clients/${id}`" color="primary" variant="outline" size="sm">
+    Edit
+</VCButton>
+```
+
+## 📚 Documentation
+
+Full reference, live demos, and per-theme variant tables: **[vuecs.dev/components/button](https://vuecs.dev/components/button)**
+
 ## License
 
 Made with 💚

package/dist/component.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentThemeDefinition, ThemeClassesOverride, ThemeElementDefinition, VariantValues } from '@vuecs/core';
-import type { ExtractPublicPropTypes, PropType, SlotsType } from 'vue';
+import type { Component, ExtractPublicPropTypes, PropType, SlotsType } from 'vue';
 import type { ButtonColor, ButtonSize, ButtonSlotProps, ButtonThemeClasses, ButtonVariant } from './type';
 declare module '@vuecs/core' {
     interface ThemeElements {
@@ -24,10 +24,26 @@ declare const buttonProps: {
         type: StringConstructor;
         default: string;
     };
-    tag: {
-        type: StringConstructor;
+    /**
+     * Element or component to render as. Pass a string tag (`'a'`, `'div'`)
+     * or a component (`RouterLink` / `NuxtLink`) to render a button-styled
+     * link / arbitrary element. Native `type` / `disabled` semantics apply
+     * only when this resolves to `'button'`; every other target receives
+     * `aria-disabled` instead. Extra attrs (`to`, `href`, `target`, …)
+     * forward to the rendered element.
+     */
+    as: {
+        type: PropType<string | Component>;
         default: string;
     };
+    /**
+     * @deprecated Use `as` instead. Retained as a non-breaking alias — when
+     * set it takes precedence over `as`.
+     */
+    tag: {
+        type: PropType<string | Component>;
+        default: any;
+    };
     label: {
         type: StringConstructor;
         default: any;
@@ -75,10 +91,26 @@ export declare const VCButton: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
-    tag: {
-        type: StringConstructor;
+    /**
+     * Element or component to render as. Pass a string tag (`'a'`, `'div'`)
+     * or a component (`RouterLink` / `NuxtLink`) to render a button-styled
+     * link / arbitrary element. Native `type` / `disabled` semantics apply
+     * only when this resolves to `'button'`; every other target receives
+     * `aria-disabled` instead. Extra attrs (`to`, `href`, `target`, …)
+     * forward to the rendered element.
+     */
+    as: {
+        type: PropType<string | Component>;
         default: string;
     };
+    /**
+     * @deprecated Use `as` instead. Retained as a non-breaking alias — when
+     * set it takes precedence over `as`.
+     */
+    tag: {
+        type: PropType<string | Component>;
+        default: any;
+    };
     label: {
         type: StringConstructor;
         default: any;
@@ -126,10 +158,26 @@ export declare const VCButton: import("vue").DefineComponent<import("vue").Extra
         type: StringConstructor;
         default: string;
     };
-    tag: {
-        type: StringConstructor;
+    /**
+     * Element or component to render as. Pass a string tag (`'a'`, `'div'`)
+     * or a component (`RouterLink` / `NuxtLink`) to render a button-styled
+     * link / arbitrary element. Native `type` / `disabled` semantics apply
+     * only when this resolves to `'button'`; every other target receives
+     * `aria-disabled` instead. Extra attrs (`to`, `href`, `target`, …)
+     * forward to the rendered element.
+     */
+    as: {
+        type: PropType<string | Component>;
         default: string;
     };
+    /**
+     * @deprecated Use `as` instead. Retained as a non-breaking alias — when
+     * set it takes precedence over `as`.
+     */
+    tag: {
+        type: PropType<string | Component>;
+        default: any;
+    };
     label: {
         type: StringConstructor;
         default: any;
@@ -160,11 +208,12 @@ export declare const VCButton: import("vue").DefineComponent<import("vue").Extra
     };
 }>> & Readonly<{}>, {
     label: string;
+    size: ButtonSize;
     color: ButtonColor;
     variant: ButtonVariant;
-    size: ButtonSize;
     type: string;
-    tag: string;
+    as: string;
+    tag: any;
     iconLeft: string;
     iconRight: string;
     loading: boolean;

package/dist/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACR,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,EAEtB,aAAa,EAChB,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EACR,sBAAsB,EACtB,QAAQ,EACR,SAAS,EAEZ,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,aAAa,EAChB,MAAM,QAAQ,CAAC;AAEhB,OAAO,QAAQ,aAAa,CAAC;IACzB,UAAU,aAAa;QACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC,kBAAkB,CAAC,CAAC;KACvD;CACJ;AAED,eAAO,MAAM,mBAAmB,EAAE,wBAAwB,CAAC,kBAAkB,CAO5E,CAAC;AAEF,QAAA,MAAM,WAAW;;cACY,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAQd,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;CAC1D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,sBAAsB,CAAC,OAAO,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,QAAQ;;cAhBQ,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAQd,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;;;;;cAX9B,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAQd,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;aAS1C,eAAe;aACf,eAAe;cACd,eAAe;yEAuH/B,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACR,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,EAEtB,aAAa,EAChB,MAAM,aAAa,CAAC;AAErB,OAAO,KAAK,EACR,SAAS,EACT,sBAAsB,EACtB,QAAQ,EACR,SAAS,EAEZ,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,aAAa,EAChB,MAAM,QAAQ,CAAC;AAEhB,OAAO,QAAQ,aAAa,CAAC;IACzB,UAAU,aAAa;QACnB,MAAM,CAAC,EAAE,sBAAsB,CAAC,kBAAkB,CAAC,CAAC;KACvD;CACJ;AAED,eAAO,MAAM,mBAAmB,EAAE,wBAAwB,CAAC,kBAAkB,CAO5E,CAAC;AAEF,QAAA,MAAM,WAAW;;cACY,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;IAE5C;;;;;;;OAOG;;cACuC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;IACtE;;;OAGG;;cACwC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;cAMzC,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;CAC1D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,sBAAsB,CAAC,OAAO,WAAW,CAAC,CAAC;AAErE,eAAO,MAAM,QAAQ;;cA7BQ,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;IAE5C;;;;;;;OAOG;;cACuC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;IACtE;;;OAGG;;cACwC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;cAMzC,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;;;;;cAxB9B,QAAQ,CAAC,WAAW,CAAC;;;;cACnB,QAAQ,CAAC,aAAa,CAAC;;;;cAC1B,QAAQ,CAAC,UAAU,CAAC;;;;;;;IAE5C;;;;;;;OAOG;;cACuC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;IACtE;;;OAGG;;cACwC,QAAQ,CAAC,MAAM,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;cAMzC,QAAQ,CAAC,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;;;;cAChD,QAAQ,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;aAS1C,eAAe;aACf,eAAe;cACd,eAAe;yEA2H/B,CAAC"}

package/dist/index.mjs

@@ -27,10 +27,34 @@ const VCButton = defineComponent({
 			type: String,
 			default: "button"
 		},
-		tag: {
-			type: String,
+		/**
+		* Element or component to render as. Pass a string tag (`'a'`, `'div'`)
+		* or a component (`RouterLink` / `NuxtLink`) to render a button-styled
+		* link / arbitrary element. Native `type` / `disabled` semantics apply
+		* only when this resolves to `'button'`; every other target receives
+		* `aria-disabled` instead. Extra attrs (`to`, `href`, `target`, …)
+		* forward to the rendered element.
+		*/
+		as: {
+			type: [
+				String,
+				Object,
+				Function
+			],
 			default: "button"
 		},
+		/**
+		* @deprecated Use `as` instead. Retained as a non-breaking alias — when
+		* set it takes precedence over `as`.
+		*/
+		tag: {
+			type: [
+				String,
+				Object,
+				Function
+			],
+			default: void 0
+		},
 		label: {
 			type: String,
 			default: void 0
@@ -100,8 +124,9 @@ const VCButton = defineComponent({
 				const trailingOut = slots.trailing(slotProps);
 				if (isNonEmptySlot(trailingOut)) children.push(h("span", { class: resolved.trailing || void 0 }, trailingOut));
 			} else if (props.iconRight) children.push(h("span", { class: resolved.trailing || void 0 }, [h(VCIcon, { name: props.iconRight })]));
-			const isNativeButton = props.tag === "button";
-			return h(props.tag, mergeProps({
+			const renderAs = props.tag ?? props.as;
+			const isNativeButton = renderAs === "button";
+			return h(renderAs, mergeProps({
 				class: [resolved.root || void 0, props.loading ? "vc-button--busy" : void 0],
 				...isNativeButton ? { type: props.type } : {},
 				...isNativeButton ? { disabled: isDisabled || void 0 } : {},

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../src/component.ts","../src/index.ts"],"sourcesContent":["import { useComponentTheme } from '@vuecs/core';\nimport type {\n    ComponentThemeDefinition,\n    ThemeClassesOverride,\n    ThemeElementDefinition,\n    UseComponentThemeProps,\n    VariantValues,\n} from '@vuecs/core';\nimport { VCIcon } from '@vuecs/icon';\nimport type {\n    ExtractPublicPropTypes,\n    PropType,\n    SlotsType,\n    VNodeArrayChildren,\n} from 'vue';\nimport {\n    defineComponent,\n    h,\n    mergeProps,\n} from 'vue';\nimport type {\n    ButtonColor,\n    ButtonSize,\n    ButtonSlotProps,\n    ButtonThemeClasses,\n    ButtonVariant,\n} from './type';\n\ndeclare module '@vuecs/core' {\n    interface ThemeElements {\n        button?: ThemeElementDefinition<ButtonThemeClasses>;\n    }\n}\n\nexport const buttonThemeDefaults: ComponentThemeDefinition<ButtonThemeClasses> = {\n    classes: {\n        root: 'vc-button',\n        leading: 'vc-button-leading',\n        trailing: 'vc-button-trailing',\n        label: 'vc-button-label',\n    },\n};\n\nconst buttonProps = {\n    color: { type: String as PropType<ButtonColor>, default: undefined },\n    variant: { type: String as PropType<ButtonVariant>, default: undefined },\n    size: { type: String as PropType<ButtonSize>, default: undefined },\n    type: { type: String, default: 'button' },\n    tag: { type: String, default: 'button' },\n    label: { type: String, default: undefined },\n    iconLeft: { type: String, default: undefined },\n    iconRight: { type: String, default: undefined },\n    loading: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    themeClass: { type: Object as PropType<ThemeClassesOverride<ButtonThemeClasses>>, default: undefined },\n    themeVariant: { type: Object as PropType<VariantValues>, default: undefined },\n};\n\nexport type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>;\n\nexport const VCButton = defineComponent({\n    name: 'VCButton',\n    props: buttonProps,\n    slots: Object as SlotsType<{\n        default: ButtonSlotProps;\n        leading: ButtonSlotProps;\n        trailing: ButtonSlotProps;\n    }>,\n    setup(props, { attrs, slots }) {\n        // The convenience props (color/variant/size/loading) are merged into\n        // themeVariant before resolution so themes can drive slot classes off\n        // them via the standard variant system. Getter properties keep this\n        // reactive — Vue's computed() inside useComponentTheme tracks the\n        // underlying prop reads.\n        const themeProps: UseComponentThemeProps<ButtonThemeClasses> = {\n            get themeClass() {\n                return props.themeClass;\n            },\n            get themeVariant() {\n                return {\n                    ...(props.themeVariant ?? {}),\n                    ...(props.color !== undefined ? { color: props.color } : {}),\n                    ...(props.variant !== undefined ? { variant: props.variant } : {}),\n                    ...(props.size !== undefined ? { size: props.size } : {}),\n                    ...(props.loading ? { loading: true } : {}),\n                };\n            },\n        };\n\n        const theme = useComponentTheme('button', themeProps, buttonThemeDefaults);\n\n        return () => {\n            const resolved = theme.value;\n            const isDisabled = props.disabled || props.loading;\n            const slotProps: ButtonSlotProps = {\n                loading: props.loading,\n                disabled: isDisabled,\n            };\n\n            const children: VNodeArrayChildren = [];\n\n            // Empty slot results (`<template #leading />` returning []) used to\n            // emit a wrapper <span> with no children — functionally inert but\n            // dead markup. Coerce slot output to non-empty before pushing.\n            const isNonEmptySlot = (out: unknown): out is VNodeArrayChildren => Array.isArray(out) && out.length > 0;\n\n            // When loading, the leading slot becomes a spinner — universally\n            // legible loading affordance, replaces any consumer-provided icon\n            // for the duration of the in-flight work. Without this the only\n            // signal was a faint opacity/cursor change that read identical to\n            // the disabled state on most themes.\n            //\n            // Accessibility: the spinner glyph is `aria-hidden` (it's\n            // decorative — the visual is the spinning ring) but we wrap it\n            // alongside a visually-hidden \"Loading\" label so screen readers\n            // announce the busy state. Combined with `aria-busy=\"true\"` on\n            // the root (set below), AT users get a clear \"in progress\"\n            // signal instead of the indistinct \"disabled\" the native\n            // `disabled` attribute would otherwise convey on its own.\n            if (props.loading) {\n                children.push(h('span', { class: resolved.leading || undefined }, [\n                    h('span', { class: 'vc-button-spinner', 'aria-hidden': 'true' }),\n                    h('span', { class: 'vc-sr-only' }, 'Loading'),\n                ]));\n            } else if (slots.leading) {\n                const leadingOut = slots.leading(slotProps);\n                if (isNonEmptySlot(leadingOut)) {\n                    children.push(h('span', { class: resolved.leading || undefined }, leadingOut));\n                }\n            } else if (props.iconLeft) {\n                // The string is treated as an Iconify name (e.g. 'lucide:plus')\n                // and resolved through <VCIcon>. Consumers wanting raw class\n                // strings should slot their own element via #leading instead.\n                children.push(h('span', { class: resolved.leading || undefined }, [\n                    h(VCIcon, { name: props.iconLeft }),\n                ]));\n            }\n\n            const slotLabel = slots.default ? slots.default(slotProps) : undefined;\n            if (isNonEmptySlot(slotLabel)) {\n                children.push(h('span', { class: resolved.label || undefined }, slotLabel));\n            } else if (typeof props.label === 'string' && props.label !== '') {\n                children.push(h('span', { class: resolved.label || undefined }, props.label));\n            }\n\n            if (slots.trailing) {\n                const trailingOut = slots.trailing(slotProps);\n                if (isNonEmptySlot(trailingOut)) {\n                    children.push(h('span', { class: resolved.trailing || undefined }, trailingOut));\n                }\n            } else if (props.iconRight) {\n                children.push(h('span', { class: resolved.trailing || undefined }, [\n                    h(VCIcon, { name: props.iconRight }),\n                ]));\n            }\n\n            const isNativeButton = props.tag === 'button';\n\n            return h(\n                props.tag,\n                mergeProps({\n                    class: [\n                        resolved.root || undefined,\n                        // Structural busy class — themes layer their own look,\n                        // but every theme gets a consistent loading affordance\n                        // (wait cursor + opacity pulse) without redeclaring it.\n                        // `disabled` blocks pointer events on native buttons,\n                        // which would defeat `cursor: wait`; the CSS handles\n                        // that by scoping `cursor: wait` only when the busy\n                        // class is set and avoids `pointer-events: none`.\n                        props.loading ? 'vc-button--busy' : undefined,\n                    ],\n                    ...(isNativeButton ? { type: props.type } : {}),\n                    ...(isNativeButton ? { disabled: isDisabled || undefined } : {}),\n                    ...(!isNativeButton && isDisabled ? { 'aria-disabled': 'true' } : {}),\n                    // Distinguish loading from plain `disabled` for AT —\n                    // both still set `disabled` (loading must block clicks\n                    // to prevent double-submit), but `aria-busy` lets screen\n                    // readers announce \"busy\" rather than just \"disabled\".\n                    ...(props.loading ? { 'aria-busy': 'true' } : {}),\n                }, attrs),\n                children,\n            );\n        };\n    },\n});\n","import { installDefaultsManager, installThemeManager } from '@vuecs/core';\nimport type { App, Plugin } from 'vue';\n\nimport '../assets/index.css';\nimport './vue';\n\nimport { VCButton } from './component';\nimport type { Options } from './type';\n\nexport * from './component';\nexport * from './type';\n\nexport function install(instance: App, options: Options = {}): void {\n    installThemeManager(instance, options);\n    installDefaultsManager(instance, options);\n    instance.component('VCButton', VCButton);\n}\n\nexport default { install } satisfies Plugin<[Options?]>;\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/component.ts","../src/index.ts"],"sourcesContent":["import { useComponentTheme } from '@vuecs/core';\nimport type {\n    ComponentThemeDefinition,\n    ThemeClassesOverride,\n    ThemeElementDefinition,\n    UseComponentThemeProps,\n    VariantValues,\n} from '@vuecs/core';\nimport { VCIcon } from '@vuecs/icon';\nimport type {\n    Component,\n    ExtractPublicPropTypes,\n    PropType,\n    SlotsType,\n    VNodeArrayChildren,\n} from 'vue';\nimport {\n    defineComponent,\n    h,\n    mergeProps,\n} from 'vue';\nimport type {\n    ButtonColor,\n    ButtonSize,\n    ButtonSlotProps,\n    ButtonThemeClasses,\n    ButtonVariant,\n} from './type';\n\ndeclare module '@vuecs/core' {\n    interface ThemeElements {\n        button?: ThemeElementDefinition<ButtonThemeClasses>;\n    }\n}\n\nexport const buttonThemeDefaults: ComponentThemeDefinition<ButtonThemeClasses> = {\n    classes: {\n        root: 'vc-button',\n        leading: 'vc-button-leading',\n        trailing: 'vc-button-trailing',\n        label: 'vc-button-label',\n    },\n};\n\nconst buttonProps = {\n    color: { type: String as PropType<ButtonColor>, default: undefined },\n    variant: { type: String as PropType<ButtonVariant>, default: undefined },\n    size: { type: String as PropType<ButtonSize>, default: undefined },\n    type: { type: String, default: 'button' },\n    /**\n     * Element or component to render as. Pass a string tag (`'a'`, `'div'`)\n     * or a component (`RouterLink` / `NuxtLink`) to render a button-styled\n     * link / arbitrary element. Native `type` / `disabled` semantics apply\n     * only when this resolves to `'button'`; every other target receives\n     * `aria-disabled` instead. Extra attrs (`to`, `href`, `target`, …)\n     * forward to the rendered element.\n     */\n    as: { type: [String, Object, Function] as PropType<string | Component>, default: 'button' },\n    /**\n     * @deprecated Use `as` instead. Retained as a non-breaking alias — when\n     * set it takes precedence over `as`.\n     */\n    tag: { type: [String, Object, Function] as PropType<string | Component>, default: undefined },\n    label: { type: String, default: undefined },\n    iconLeft: { type: String, default: undefined },\n    iconRight: { type: String, default: undefined },\n    loading: { type: Boolean, default: false },\n    disabled: { type: Boolean, default: false },\n    themeClass: { type: Object as PropType<ThemeClassesOverride<ButtonThemeClasses>>, default: undefined },\n    themeVariant: { type: Object as PropType<VariantValues>, default: undefined },\n};\n\nexport type ButtonProps = ExtractPublicPropTypes<typeof buttonProps>;\n\nexport const VCButton = defineComponent({\n    name: 'VCButton',\n    props: buttonProps,\n    slots: Object as SlotsType<{\n        default: ButtonSlotProps;\n        leading: ButtonSlotProps;\n        trailing: ButtonSlotProps;\n    }>,\n    setup(props, { attrs, slots }) {\n        // The convenience props (color/variant/size/loading) are merged into\n        // themeVariant before resolution so themes can drive slot classes off\n        // them via the standard variant system. Getter properties keep this\n        // reactive — Vue's computed() inside useComponentTheme tracks the\n        // underlying prop reads.\n        const themeProps: UseComponentThemeProps<ButtonThemeClasses> = {\n            get themeClass() {\n                return props.themeClass;\n            },\n            get themeVariant() {\n                return {\n                    ...(props.themeVariant ?? {}),\n                    ...(props.color !== undefined ? { color: props.color } : {}),\n                    ...(props.variant !== undefined ? { variant: props.variant } : {}),\n                    ...(props.size !== undefined ? { size: props.size } : {}),\n                    ...(props.loading ? { loading: true } : {}),\n                };\n            },\n        };\n\n        const theme = useComponentTheme('button', themeProps, buttonThemeDefaults);\n\n        return () => {\n            const resolved = theme.value;\n            const isDisabled = props.disabled || props.loading;\n            const slotProps: ButtonSlotProps = {\n                loading: props.loading,\n                disabled: isDisabled,\n            };\n\n            const children: VNodeArrayChildren = [];\n\n            // Empty slot results (`<template #leading />` returning []) used to\n            // emit a wrapper <span> with no children — functionally inert but\n            // dead markup. Coerce slot output to non-empty before pushing.\n            const isNonEmptySlot = (out: unknown): out is VNodeArrayChildren => Array.isArray(out) && out.length > 0;\n\n            // When loading, the leading slot becomes a spinner — universally\n            // legible loading affordance, replaces any consumer-provided icon\n            // for the duration of the in-flight work. Without this the only\n            // signal was a faint opacity/cursor change that read identical to\n            // the disabled state on most themes.\n            //\n            // Accessibility: the spinner glyph is `aria-hidden` (it's\n            // decorative — the visual is the spinning ring) but we wrap it\n            // alongside a visually-hidden \"Loading\" label so screen readers\n            // announce the busy state. Combined with `aria-busy=\"true\"` on\n            // the root (set below), AT users get a clear \"in progress\"\n            // signal instead of the indistinct \"disabled\" the native\n            // `disabled` attribute would otherwise convey on its own.\n            if (props.loading) {\n                children.push(h('span', { class: resolved.leading || undefined }, [\n                    h('span', { class: 'vc-button-spinner', 'aria-hidden': 'true' }),\n                    h('span', { class: 'vc-sr-only' }, 'Loading'),\n                ]));\n            } else if (slots.leading) {\n                const leadingOut = slots.leading(slotProps);\n                if (isNonEmptySlot(leadingOut)) {\n                    children.push(h('span', { class: resolved.leading || undefined }, leadingOut));\n                }\n            } else if (props.iconLeft) {\n                // The string is treated as an Iconify name (e.g. 'lucide:plus')\n                // and resolved through <VCIcon>. Consumers wanting raw class\n                // strings should slot their own element via #leading instead.\n                children.push(h('span', { class: resolved.leading || undefined }, [\n                    h(VCIcon, { name: props.iconLeft }),\n                ]));\n            }\n\n            const slotLabel = slots.default ? slots.default(slotProps) : undefined;\n            if (isNonEmptySlot(slotLabel)) {\n                children.push(h('span', { class: resolved.label || undefined }, slotLabel));\n            } else if (typeof props.label === 'string' && props.label !== '') {\n                children.push(h('span', { class: resolved.label || undefined }, props.label));\n            }\n\n            if (slots.trailing) {\n                const trailingOut = slots.trailing(slotProps);\n                if (isNonEmptySlot(trailingOut)) {\n                    children.push(h('span', { class: resolved.trailing || undefined }, trailingOut));\n                }\n            } else if (props.iconRight) {\n                children.push(h('span', { class: resolved.trailing || undefined }, [\n                    h(VCIcon, { name: props.iconRight }),\n                ]));\n            }\n\n            // `tag` is the deprecated alias — when explicitly set it wins\n            // over `as`; otherwise `as` (default `'button'`) drives the\n            // render target. A string tag or a component both resolve here.\n            const renderAs = props.tag ?? props.as;\n            const isNativeButton = renderAs === 'button';\n\n            return h(\n                renderAs,\n                mergeProps({\n                    class: [\n                        resolved.root || undefined,\n                        // Structural busy class — themes layer their own look,\n                        // but every theme gets a consistent loading affordance\n                        // (wait cursor + opacity pulse) without redeclaring it.\n                        // `disabled` blocks pointer events on native buttons,\n                        // which would defeat `cursor: wait`; the CSS handles\n                        // that by scoping `cursor: wait` only when the busy\n                        // class is set and avoids `pointer-events: none`.\n                        props.loading ? 'vc-button--busy' : undefined,\n                    ],\n                    ...(isNativeButton ? { type: props.type } : {}),\n                    ...(isNativeButton ? { disabled: isDisabled || undefined } : {}),\n                    ...(!isNativeButton && isDisabled ? { 'aria-disabled': 'true' } : {}),\n                    // Distinguish loading from plain `disabled` for AT —\n                    // both still set `disabled` (loading must block clicks\n                    // to prevent double-submit), but `aria-busy` lets screen\n                    // readers announce \"busy\" rather than just \"disabled\".\n                    ...(props.loading ? { 'aria-busy': 'true' } : {}),\n                }, attrs),\n                children,\n            );\n        };\n    },\n});\n","import { installDefaultsManager, installThemeManager } from '@vuecs/core';\nimport type { App, Plugin } from 'vue';\n\nimport '../assets/index.css';\nimport './vue';\n\nimport { VCButton } from './component';\nimport type { Options } from './type';\n\nexport * from './component';\nexport * from './type';\n\nexport function install(instance: App, options: Options = {}): void {\n    installThemeManager(instance, options);\n    installDefaultsManager(instance, options);\n    instance.component('VCButton', VCButton);\n}\n\nexport default { install } satisfies Plugin<[Options?]>;\n"],"mappings":"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"}

package/dist/vue.d.ts

@@ -1,5 +1,5 @@
 import type { VCButton } from './component';
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface GlobalComponents {
         VCButton: typeof VCButton;
     }

package/dist/vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,QAAQ,mBAAmB,CAAC;IAC/B,UAAiB,gBAAgB;QAC7B,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC7B;CACJ"}
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,QAAQ,KAAK,CAAC;IACjB,UAAiB,gBAAgB;QAC7B,QAAQ,EAAE,OAAO,QAAQ,CAAC;KAC7B;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vuecs/button",
-    "version": "1.0.3",
+    "version": "1.1.0",
     "type": "module",
     "description": "A general-purpose button component for Vue 3.",
     "exports": {
@@ -40,13 +40,13 @@
         "build": "rimraf dist && npm run build:js && npm run build:types"
     },
     "devDependencies": {
-        "@vuecs/core": "^3.1.2",
-        "@vuecs/icon": "^1.0.1",
-        "vue": "^3.5.35"
+        "@vuecs/core": "^3.2.1",
+        "@vuecs/icon": "^1.0.2",
+        "vue": "^3.5.38"
     },
     "peerDependencies": {
-        "@vuecs/core": "^3.1.2",
-        "@vuecs/icon": "^1.0.1",
+        "@vuecs/core": "^3.2.1",
+        "@vuecs/icon": "^1.0.2",
         "vue": "^3.x"
     },
     "engines": {