vunor 0.3.1 → 0.4.0

package/README.md

@@ -287,6 +287,8 @@ Each includes hover, active, and focus states. Hover and press do not paint on a
 <button class="scope-error c8-flat">Cancel</button>
 ```
 
+The `btn` layout primitive fades a disabled element to opacity 0.8. That is a default: `disabled-soft` (0.4) or a `disabled:opacity-*` utility replaces it, whether written on the element or composed with `btn` in your own shortcut (`'my-btn': 'btn disabled-soft'`).
+
 ### Inputable Styles (`i8`)
 
 Input field design variants:
@@ -377,9 +379,14 @@ export default defineConfig({
 ### Vue 3 + Vite
 
 ```bash
-pnpm add vunor
+pnpm add vunor vue unocss reka-ui
 ```
 
+`vue`, `unocss` and `reka-ui` are peer dependencies: your app provides them, so it has a
+single copy of each (two copies of Vue or Reka break reactivity and SSR). npm and pnpm
+install missing peers automatically, but listing them pins the versions you use.
+`vue-router` is optional: `<VuButton :to>` uses the `RouterLink` your app registers.
+
 **vite.config.ts**
 
 ```ts

package/dist/AppLayout.mjs

@@ -1,5 +1,4 @@
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot } from "vue";
-import "\0stub:/Users/mavrik/code/vunor/packages/vunor/src/components/AppLayout/AppLayout.vue?vue&type=style&index=0&lang.css";
 //#region src/components/AppLayout/AppLayout.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = { class: "mx-auto max-w-[var(--app-max-w)] flex items-center justify-between w-full" };
 const _hoisted_2 = { class: "max-w-[var(--app-max-w)] w-full mx-auto flex" };
@@ -16,71 +15,21 @@ const _hoisted_4 = {
 var AppLayout_default = /* @__PURE__ */ defineComponent({
 	__name: "AppLayout",
 	props: {
-		maxW: {
-			type: String,
-			required: false,
-			default: "90rem"
-		},
-		headerH: {
-			type: String,
-			required: false,
-			default: "3rem"
-		},
-		footerH: {
-			type: String,
-			required: false,
-			default: "3rem"
-		},
-		leftW: {
-			type: String,
-			required: false,
-			default: "14rem"
-		},
-		rightW: {
-			type: String,
-			required: false,
-			default: "14rem"
-		},
-		footer: {
-			type: Boolean,
-			required: false
-		},
-		header: {
-			type: Boolean,
-			required: false
-		},
-		left: {
-			type: Boolean,
-			required: false
-		},
-		right: {
-			type: Boolean,
-			required: false
-		},
-		headerClass: {
-			type: [String, Object],
-			required: false
-		},
-		footerClass: {
-			type: [String, Object],
-			required: false
-		},
-		leftClass: {
-			type: [String, Object],
-			required: false
-		},
-		rightClass: {
-			type: [String, Object],
-			required: false
-		},
-		mainClass: {
-			type: [String, Object],
-			required: false
-		},
-		scrollTopOnChangeView: {
-			type: Boolean,
-			required: false
-		}
+		maxW: { default: "90rem" },
+		headerH: { default: "3rem" },
+		footerH: { default: "3rem" },
+		leftW: { default: "14rem" },
+		rightW: { default: "14rem" },
+		footer: { type: Boolean },
+		header: { type: Boolean },
+		left: { type: Boolean },
+		right: { type: Boolean },
+		headerClass: {},
+		footerClass: {},
+		leftClass: {},
+		rightClass: {},
+		mainClass: {},
+		scrollTopOnChangeView: { type: Boolean }
 	},
 	setup(__props) {
 		const props = __props;
@@ -123,7 +72,7 @@ var AppLayout_default = /* @__PURE__ */ defineComponent({
 			}, [__props.header ? (openBlock(), createElementBlock("header", {
 				key: 0,
 				class: normalizeClass(["sticky top-0 flex-shrink-0 h-[var(--app-header-h)] w-full flex", __props.headerClass])
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "header")])], 2)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [
+			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "header")])], 2)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [
 				createElementVNode("aside", _hoisted_3, [createElementVNode("div", { class: normalizeClass(["min-h-full", __props.leftClass]) }, [renderSlot(_ctx.$slots, "left")], 2)]),
 				createElementVNode("main", {
 					class: normalizeClass(["flex-1 overflow-auto lg:pl-[var(--app-left-w)] lg:pr-[var(--app-right-w)]", __props.mainClass]),
@@ -134,7 +83,7 @@ var AppLayout_default = /* @__PURE__ */ defineComponent({
 					class: normalizeClass(["hidden xl:block w-[var(--app-right-w)] top-[var(--app-header-h)] overflow-auto fixed", __props.rightClass]),
 					style: "height: calc(100vh - var(--app-header-h) - var(--app-footer-h)); left: calc(50% - var(--app-right-w) + min(var(--app-max-w), 100vw) / 2);"
 				}, [renderSlot(_ctx.$slots, "right")], 2)
-			])], 512), __props.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "mx-auto max-w-[var(--app-max-w)] flex items-center justify-between w-full" }, " footer ", -1)])])) : createCommentVNode("v-if", true)], 4);
+			])], 512), __props.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [..._cache[0] || (_cache[0] = [createElementVNode("div", { class: "mx-auto max-w-[var(--app-max-w)] flex items-center justify-between w-full" }, " footer ", -1)])])) : createCommentVNode("", true)], 4);
 		};
 	}
 });

package/dist/AppToasts.d.mts

@@ -2,8 +2,11 @@ import type { ToastProviderProps } from 'reka-ui';
 import type { TVueCssClass } from 'vunor/utils';
 type __VLS_Props = ToastProviderProps & {
     class?: TVueCssClass;
+    /** Keys that focus the toast viewport (Reka `ToastViewport`), default F8 */
+    hotkey?: string[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disableSwipe: boolean;
     swipeDirection: "left" | "right" | "up" | "down";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/AppToasts.mjs

@@ -1,4 +1,5 @@
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
+import { n as useForwardToRoot } from "./forward-root-DPGTBptG.js";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
 import { ToastAction, ToastDescription, ToastProvider, ToastRoot, ToastTitle, ToastViewport } from "reka-ui";
 import { useAppToasts } from "vunor";
 import VuButton from "vunor/Button";
@@ -7,41 +8,24 @@ const _hoisted_1 = { class: "text-body-s" };
 //#endregion
 //#region src/components/AppToasts/AppToasts.vue
 var AppToasts_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "AppToasts",
 	props: {
-		label: {
-			type: String,
-			required: false
-		},
-		duration: {
-			type: Number,
-			required: false
-		},
+		label: {},
+		duration: {},
 		disableSwipe: {
 			type: Boolean,
-			required: false
-		},
-		swipeDirection: {
-			type: String,
-			required: false,
-			default: "left"
+			default: void 0
 		},
-		swipeThreshold: {
-			type: Number,
-			required: false
-		},
-		class: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			required: false
-		}
+		swipeDirection: { default: "left" },
+		swipeThreshold: {},
+		class: {},
+		hotkey: {}
 	},
 	setup(__props) {
 		const { toasts, close } = useAppToasts();
 		const props = __props;
+		const providerProps = useForwardToRoot(ToastProvider, props);
 		const defaultActions = (toast) => [{
 			text: "Dismiss",
 			action: () => {
@@ -49,56 +33,55 @@ var AppToasts_default = /* @__PURE__ */ defineComponent({
 			}
 		}];
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(ToastProvider), mergeProps(props, { class: void 0 }), {
-				default: withCtx(() => [
-					createCommentVNode(" prettier-ignore-attribute class "),
-					(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts), (toast) => {
-						return openBlock(), createBlock(unref(ToastRoot), {
-							key: toast.id,
-							duration: toast.duration,
-							open: toast.open,
-							"onUpdate:open": [($event) => toast.open = $event, (open) => {
-								if (!open) unref(close)(toast.id);
-							}],
-							"data-swipe": __props.swipeDirection,
-							class: normalizeClass([toast.class, "toast-root"])
-						}, {
-							default: withCtx(() => [
-								createVNode(unref(ToastTitle), { class: "[grid-area:_title] mb-$s fw-$bold" }, {
-									default: withCtx(() => [createElementVNode("span", null, toDisplayString(toast.title), 1)]),
-									_: 2
-								}, 1024),
-								createVNode(unref(ToastDescription), { "as-child": "" }, {
-									default: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(toast.message), 1)]),
+			return openBlock(), createBlock(unref(ToastProvider), normalizeProps(guardReactiveProps(unref(providerProps))), {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toasts), (toast) => {
+					return openBlock(), createBlock(unref(ToastRoot), {
+						key: toast.id,
+						duration: toast.duration,
+						open: toast.open,
+						"onUpdate:open": [($event) => toast.open = $event, (open) => {
+							if (!open) unref(close)(toast.id);
+						}],
+						"data-swipe": __props.swipeDirection,
+						class: normalizeClass([toast.class, "toast-root"])
+					}, {
+						default: withCtx(() => [
+							createVNode(unref(ToastTitle), { class: "[grid-area:_title] mb-$s fw-$bold" }, {
+								default: withCtx(() => [createElementVNode("span", null, toDisplayString(toast.title), 1)]),
+								_: 2
+							}, 1024),
+							createVNode(unref(ToastDescription), { "as-child": "" }, {
+								default: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(toast.message), 1)]),
+								_: 2
+							}, 1024),
+							(openBlock(true), createElementBlock(Fragment, null, renderList(toast.actions || defaultActions(toast), (action) => {
+								return openBlock(), createBlock(unref(ToastAction), {
+									class: "[grid-area:_action]",
+									"as-child": "",
+									"alt-text": action.text,
+									key: action.text
+								}, {
+									default: withCtx(() => [createVNode(VuButton, {
+										onClick: ($event) => action.action(),
+										class: "c8-flat text-body-s",
+										label: action.text
+									}, null, 8, ["onClick", "label"])]),
 									_: 2
-								}, 1024),
-								(openBlock(true), createElementBlock(Fragment, null, renderList(toast.actions || defaultActions(toast), (action) => {
-									return openBlock(), createBlock(unref(ToastAction), {
-										class: "[grid-area:_action]",
-										"as-child": "",
-										"alt-text": action.text,
-										key: action.text
-									}, {
-										default: withCtx(() => [createVNode(VuButton, {
-											onClick: ($event) => action.action(),
-											class: "c8-flat text-body-s",
-											label: action.text
-										}, null, 8, ["onClick", "label"])]),
-										_: 2
-									}, 1032, ["alt-text"]);
-								}), 128))
-							]),
-							_: 2
-						}, 1032, [
-							"duration",
-							"open",
-							"onUpdate:open",
-							"data-swipe",
-							"class"
-						]);
-					}), 128)),
-					createVNode(unref(ToastViewport), { class: normalizeClass([props.class, "toasts-viewport"]) }, null, 8, ["class"])
-				]),
+								}, 1032, ["alt-text"]);
+							}), 128))
+						]),
+						_: 2
+					}, 1032, [
+						"duration",
+						"open",
+						"onUpdate:open",
+						"data-swipe",
+						"class"
+					]);
+				}), 128)), createVNode(unref(ToastViewport), mergeProps(_ctx.$attrs, {
+					hotkey: props.hotkey,
+					class: [props.class, "toasts-viewport"]
+				}), null, 16, ["hotkey", "class"])]),
 				_: 1
 			}, 16);
 		};

package/dist/Button.d.mts

@@ -1,4 +1,3 @@
-import { type RouteLocationRaw } from 'vue-router';
 type __VLS_Props = {
     label?: string;
     icon?: string;
@@ -8,26 +7,43 @@ type __VLS_Props = {
     active?: boolean;
     pressed?: boolean;
     selected?: boolean;
-    to?: RouteLocationRaw;
+    /**
+     * Router location: renders a router link through the app's RouterLink. Typed
+     * structurally (compatible with vue-router's `RouteLocationRaw`), so vunor needs no
+     * vue-router types. Without a router, a string (or `{ path }`) renders `<a href>`.
+     */
+    to?: string | {
+        path?: string;
+        name?: string | symbol;
+        params?: Record<string, unknown>;
+        query?: Record<string, unknown>;
+        hash?: string;
+        replace?: boolean;
+        force?: boolean;
+        state?: unknown;
+    };
     class?: string | Record<string, boolean>;
     style?: string | Record<string, string>;
     asLink?: boolean;
 };
-declare var __VLS_15: {}, __VLS_17: {}, __VLS_20: {}, __VLS_30: {}, __VLS_32: {}, __VLS_35: {};
+declare var __VLS_17: {}, __VLS_19: {}, __VLS_22: {}, __VLS_32: {}, __VLS_34: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
-    'icon-left'?: (props: typeof __VLS_15) => any;
+    'icon-left'?: (props: typeof __VLS_17) => any;
 } & {
-    default?: (props: typeof __VLS_17) => any;
+    default?: (props: typeof __VLS_19) => any;
 } & {
-    'icon-right'?: (props: typeof __VLS_20) => any;
+    'icon-right'?: (props: typeof __VLS_22) => any;
 } & {
-    'icon-left'?: (props: typeof __VLS_30) => any;
+    'icon-left'?: (props: typeof __VLS_32) => any;
 } & {
-    default?: (props: typeof __VLS_32) => any;
+    default?: (props: typeof __VLS_34) => any;
 } & {
-    'icon-right'?: (props: typeof __VLS_35) => any;
+    'icon-right'?: (props: typeof __VLS_37) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    pressed: boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/Button.mjs

@@ -1,73 +1,107 @@
-import { createBlock, createSlots, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref, withCtx } from "vue";
-import { RouterLink } from "vue-router";
+import { computed, createBlock, createSlots, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, warn, withCtx } from "vue";
 import VuButtonBase from "vunor/ButtonBase";
 //#endregion
 //#region src/components/Button/Button.vue
 var Button_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
 	__name: "Button",
 	props: {
-		label: {
-			type: String,
-			required: false
-		},
-		icon: {
-			type: String,
-			required: false
-		},
-		iconSide: {
-			type: String,
-			required: false
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		active: {
-			type: Boolean,
-			required: false
-		},
+		label: {},
+		icon: {},
+		iconSide: {},
+		loading: { type: Boolean },
+		disabled: { type: Boolean },
+		active: { type: Boolean },
 		pressed: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
 		selected: {
 			type: Boolean,
-			required: false
+			default: void 0
 		},
-		to: {
-			type: null,
-			required: false
-		},
-		class: {
-			type: [String, Object],
-			required: false
-		},
-		style: {
-			type: [String, Object],
-			required: false
-		},
-		asLink: {
-			type: Boolean,
-			required: false
-		}
+		to: {},
+		class: {},
+		style: {},
+		asLink: { type: Boolean }
 	},
 	setup(__props) {
+		const SELECTABLE_ROLES = new Set([
+			"option",
+			"tab",
+			"gridcell",
+			"row",
+			"columnheader",
+			"rowheader",
+			"treeitem"
+		]);
+		/** the defined entries only: an `undefined` binding would still override or render */
+		function defined(values) {
+			const result = {};
+			for (const key in values) if (values[key] !== void 0) result[key] = values[key];
+			return result;
+		}
+		/** `@click` with any modifiers Vue keeps in the key (`.once`, `.capture`, `.passive`) */
+		const CLICK_LISTENER = /^onClick(?:Once|Passive|Capture)*$/;
 		const props = __props;
+		const RouterLink = getCurrentInstance()?.appContext.components.RouterLink;
+		const baseProps = computed(() => defined({
+			label: props.label,
+			icon: props.icon,
+			iconSide: props.iconSide,
+			loading: props.loading,
+			disabled: props.disabled,
+			class: props.class,
+			style: props.style
+		}));
+		const attrs = useAttrs();
+		const ariaSelected = computed(() => props.selected !== void 0 && SELECTABLE_ROLES.has(String(attrs.role)) ? props.selected : void 0);
+		const stateAttrs = computed(() => defined({
+			"data-active": props.active ? "" : void 0,
+			"aria-pressed": props.pressed,
+			"data-selected": props.selected === void 0 ? void 0 : String(props.selected),
+			"aria-selected": ariaSelected.value
+		}));
+		const inactive = computed(() => !!(props.disabled || props.loading));
+		function linkAttrs() {
+			const rest = {};
+			for (const key in attrs) {
+				if (key === "onClick" || inactive.value && CLICK_LISTENER.test(key)) continue;
+				rest[key] = attrs[key];
+			}
+			return rest;
+		}
+		function onLinkClick(event, navigate) {
+			if (inactive.value) {
+				event.preventDefault();
+				return;
+			}
+			const handlers = attrs.onClick;
+			for (const handler of [handlers ?? []].flat()) handler(event);
+			navigate?.(event);
+		}
+		const fallbackHref = computed(() => {
+			const to = props.to;
+			return typeof to === "string" ? to : to?.path;
+		});
+		const isLink = computed(() => props.asLink || fallbackHref.value !== void 0);
+		if (props.to !== void 0 && !RouterLink) warn("VuButton: `to` is set but the app has no router (app.use(router)); rendering a plain link without client-side navigation.");
 		return (_ctx, _cache) => {
-			return !!__props.to ? (openBlock(), createBlock(unref(RouterLink), {
+			return !!__props.to && unref(RouterLink) ? (openBlock(), createBlock(resolveDynamicComponent(unref(RouterLink)), {
 				key: 0,
 				custom: "",
 				to: __props.to
 			}, {
-				default: withCtx(({ isActive, href }) => [createVNode(VuButtonBase, mergeProps({
+				default: withCtx(({ isActive, isExactActive, href, navigate }) => [createVNode(VuButtonBase, mergeProps({
+					...isExactActive ? { "aria-current": "page" } : {},
+					...isActive ? { "data-selected": "true" } : {},
+					...linkAttrs(),
+					...baseProps.value
+				}, {
 					as: "a",
 					href,
-					"aria-selected": isActive
-				}, props), createSlots({
+					onClick: ($event) => onLinkClick($event, navigate)
+				}), createSlots({
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 					_: 2
 				}, [_ctx.$slots["icon-left"] ? {
@@ -78,15 +112,21 @@ var Button_default = /* @__PURE__ */ defineComponent({
 					name: "icon-right",
 					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon-right")]),
 					key: "1"
-				} : void 0]), 1040, ["href", "aria-selected"])]),
+				} : void 0]), 1040, ["href", "onClick"])]),
 				_: 3
 			}, 8, ["to"])) : (openBlock(), createBlock(VuButtonBase, mergeProps({
 				key: 1,
-				as: __props.asLink ? "a" : "button"
-			}, props, {
-				"data-active": __props.active ? "" : void 0,
-				"aria-pressed": typeof __props.pressed === "boolean" ? __props.pressed : void 0,
-				"aria-selected": typeof __props.selected === "boolean" ? __props.selected : void 0
+				as: isLink.value ? "a" : "button",
+				href: fallbackHref.value
+			}, isLink.value ? {
+				...stateAttrs.value,
+				...linkAttrs(),
+				...baseProps.value,
+				onClick: onLinkClick
+			} : {
+				...stateAttrs.value,
+				..._ctx.$attrs,
+				...baseProps.value
 			}), createSlots({
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 2
@@ -98,12 +138,7 @@ var Button_default = /* @__PURE__ */ defineComponent({
 				name: "icon-right",
 				fn: withCtx(() => [renderSlot(_ctx.$slots, "icon-right")]),
 				key: "1"
-			} : void 0]), 1040, [
-				"as",
-				"data-active",
-				"aria-pressed",
-				"aria-selected"
-			]));
+			} : void 0]), 1040, ["as", "href"]));
 		};
 	}
 });

package/dist/ButtonBase.mjs

@@ -1,4 +1,4 @@
-import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
 import { Primitive } from "reka-ui";
 import VuIcon from "vunor/Icon";
 import VuLoadingIndicator from "vunor/LoadingIndicator";
@@ -13,71 +13,57 @@ const _hoisted_2 = { class: "btn-label" };
 var ButtonBase_default = /* @__PURE__ */ defineComponent({
 	__name: "ButtonBase",
 	props: {
-		label: {
-			type: String,
-			required: false
-		},
-		icon: {
-			type: String,
-			required: false
-		},
-		iconSide: {
-			type: String,
-			required: false,
-			default: "left"
-		},
-		loading: {
-			type: Boolean,
-			required: false
-		},
-		disabled: {
-			type: Boolean,
-			required: false
-		},
-		as: {
-			type: String,
-			required: false,
-			default: "button"
-		},
-		href: {
-			type: String,
-			required: false
-		}
+		label: {},
+		icon: {},
+		iconSide: { default: "left" },
+		loading: { type: Boolean },
+		disabled: { type: Boolean },
+		as: { default: "button" },
+		href: {}
 	},
 	setup(__props) {
+		const INACTIVE_LINK_ATTRS = Object.freeze({
+			"role": "link",
+			"aria-disabled": "true",
+			"tabindex": 0
+		});
+		const NO_ATTRS = Object.freeze({});
+		const props = __props;
+		const inactiveLink = computed(() => props.as === "a" && !!(props.loading || props.disabled));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n    `group/btn` is no longer read by any vunor rule: since 0.3.0 the label and\n    icon take their cue from inherited custom properties instead of\n    `group-[.btn-square]/btn:` descendant rules. It stays because it is public\n    surface that consumer-authored `group-*/btn:` rules may still key on.\n  "), createVNode(unref(Primitive), {
+			return openBlock(), createBlock(unref(Primitive), mergeProps({
 				class: "btn group/btn",
 				as: __props.as,
-				href: __props.href,
+				href: inactiveLink.value ? void 0 : __props.href
+			}, inactiveLink.value ? unref(INACTIVE_LINK_ATTRS) : unref(NO_ATTRS), {
 				"data-has-label": !!__props.label || !!_ctx.$slots.default,
 				"data-has-icon": !!__props.icon,
 				"data-loading": __props.loading ? "" : void 0,
-				disabled: __props.loading || __props.disabled || void 0
-			}, {
+				disabled: __props.as === "button" ? __props.loading || __props.disabled || void 0 : void 0
+			}), {
 				default: withCtx(() => [
-					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(VuLoadingIndicator)])) : createCommentVNode("v-if", true),
+					__props.loading ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(VuLoadingIndicator)])) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "icon-left", {}, () => [__props.icon && __props.iconSide === "left" ? (openBlock(), createBlock(VuIcon, {
 						key: 0,
 						name: __props.icon,
 						class: "btn-icon btn-icon-left"
-					}, null, 8, ["name"])) : createCommentVNode("v-if", true)]),
+					}, null, 8, ["name"])) : createCommentVNode("", true)]),
 					renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_2, toDisplayString(__props.label), 1)]),
 					renderSlot(_ctx.$slots, "icon-right", {}, () => [__props.icon && __props.iconSide === "right" ? (openBlock(), createBlock(VuIcon, {
 						key: 0,
 						name: __props.icon,
 						class: "btn-icon btn-icon-right"
-					}, null, 8, ["name"])) : createCommentVNode("v-if", true)])
+					}, null, 8, ["name"])) : createCommentVNode("", true)])
 				]),
 				_: 3
-			}, 8, [
+			}, 16, [
 				"as",
 				"href",
 				"data-has-label",
 				"data-has-icon",
 				"data-loading",
 				"disabled"
-			])], 2112);
+			]);
 		};
 	}
 });