@indielayer/ui 2.0.0 → 2.1.0

package/lib/components/button/Button.vue_vue_type_script_setup_true_lang.js

@@ -1,127 +1,249 @@
 import { injectButtonGroupKey as e, injectInputGroupKey as t } from "../../composables/keys.js";
 import { useResolvedComponentProps as n } from "../../composables/resolveComponentDefaults.js";
 import { useColors as r } from "../../composables/useColors.js";
-import { useTheme as i } from "../../composables/useTheme.js";
-import { variantBooleanProps as a } from "../../common/props.js";
-import { useCommon as o } from "../../composables/useCommon.js";
-import s from "../icon/Icon.js";
-import { useInteractive as c } from "../../composables/useInteractive.js";
-import l from "../loader/Loader.js";
-import { computed as u, createBlock as d, createCommentVNode as f, createElementVNode as p, defineComponent as m, inject as h, normalizeClass as g, normalizeStyle as _, onMounted as v, onUnmounted as y, openBlock as b, ref as x, renderSlot as S, resolveDynamicComponent as C, unref as w, useAttrs as T, withCtx as E } from "vue";
+import { useTheme as ee } from "../../composables/useTheme.js";
+import { variantBooleanProps as i } from "../../common/props.js";
+import { useCommon as a } from "../../composables/useCommon.js";
+import o from "../icon/Icon.js";
+import { useInteractive as s } from "../../composables/useInteractive.js";
+import c from "../loader/Loader.js";
+import te from "../tooltip/Tooltip.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementVNode as f, createTextVNode as p, defineComponent as m, inject as h, normalizeClass as g, normalizeStyle as _, onMounted as v, onUnmounted as y, openBlock as b, ref as ne, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useAttrs as T, useSlots as E, withCtx as D } from "vue";
 //#region src/components/button/Button.vue?vue&type=script&setup=true&lang.ts
-var D = {
-	...o.props(),
+var O = {
+	...a.props(),
 	...r.props(),
-	...c.props(),
-	...a(),
+	...s.props(),
+	...i(),
 	tag: {
 		type: String,
-		default: "button"
+		default: "button",
+		description: "Root element tag. Becomes a router-link when `to` is set."
 	},
 	type: {
 		type: String,
-		default: "button"
+		default: "button",
+		description: "Native button type when `tag` is `button` (button, submit, reset)."
 	},
-	icon: String,
-	iconLeft: String,
-	iconRight: String,
-	to: [String, Object]
-}, O = /* @__PURE__ */ m({
+	icon: {
+		type: String,
+		description: "Shortcut for `iconLeft`."
+	},
+	iconLeft: {
+		type: String,
+		description: "Icon name shown before the label."
+	},
+	iconRight: {
+		type: String,
+		description: "Icon name shown after the label."
+	},
+	to: {
+		type: [String, Object],
+		description: "Vue Router location; renders as a link when set."
+	},
+	tooltip: {
+		type: String,
+		description: "Tooltip text shown on hover. Prefer the tooltip slot for custom content."
+	},
+	tooltipPosition: {
+		type: String,
+		default: "top",
+		description: "Tooltip placement relative to the button."
+	}
+}, k = /* @__PURE__ */ m({
 	name: "XButton",
-	validators: { ...o.validators() },
-	props: D,
-	setup(r, { expose: a }) {
-		let o = r, m = n("Button", o), D = x(null), O = h(e, {
+	validators: { ...a.validators() },
+	docs: {
+		slots: {
+			default: "Button label and content.",
+			tooltip: "Custom tooltip content; overrides the `tooltip` prop."
+		},
+		methods: {
+			focus: "Focus the underlying control.",
+			blur: "Remove focus from the underlying control."
+		}
+	},
+	props: O,
+	setup(r, { expose: i }) {
+		let a = r, m = n("Button", a), O = E(), k = ne(null), A = h(e, {
 			isButtonGroup: !1,
-			groupProps: {}
-		}), k = h(t, {
+			groupProps: {},
+			registerChild: () => {},
+			unregisterChild: () => {},
+			getPosition: () => "only",
+			childOrder: l(() => [])
+		}), j = h(t, {
 			registerChild: () => {},
 			unregisterChild: () => {},
 			registerInput: () => {},
 			unregisterInput: () => {},
 			getPosition: () => "only",
-			childOrder: u(() => []),
+			childOrder: l(() => []),
 			isInsideInputGroup: !1,
 			groupProps: {}
-		}), A = `btn-${Math.random().toString(36).slice(2)}`;
+		}), M = `btn-${Math.random().toString(36).slice(2)}`;
 		v(() => {
-			k.isInsideInputGroup && k.registerChild(A);
+			A.isButtonGroup && A.registerChild(M), j.isInsideInputGroup && j.registerChild(M);
 		}), y(() => {
-			k.isInsideInputGroup && k.unregisterChild(A);
+			A.isButtonGroup && A.unregisterChild(M), j.isInsideInputGroup && j.unregisterChild(M);
 		});
-		let { isButtonGroup: j } = O, M = u(() => k.isInsideInputGroup), N = u(() => {
-			if (k.isInsideInputGroup) return k.childOrder.value, k.getPosition(A);
-		}), P = () => O.groupProps, F = u(() => k.isInsideInputGroup && k.groupProps?.size ? k.groupProps.size : P().size ?? m.value.size), I = u(() => P().flat ?? m.value.flat), L = u(() => m.value.color ?? P().color), R = u(() => P().ghost ?? m.value.ghost), z = u(() => P().light ?? m.value.light), B = u(() => P().outlined ?? m.value.outlined), V = u(() => o.disabled || P().disabled || !!k.groupProps?.disabled), H = u(() => o.icon || o.iconLeft), U = T(), W = u(() => U.href ? "a" : o.to ? "router-link" : o.tag), { className: G, classes: K, styles: q } = i("Button", {}, u(() => ({
-			size: w(F),
-			flat: w(I),
-			color: w(L),
-			ghost: w(R),
-			light: w(z),
-			outlined: w(B),
-			disabled: w(V),
-			loading: o.loading,
+		let { isButtonGroup: N } = A, P = l(() => {
+			if (A.isButtonGroup) return A.childOrder.value, A.getPosition(M);
+		}), F = l(() => !!A.groupProps?.rounded), I = l(() => j.isInsideInputGroup), L = l(() => {
+			if (j.isInsideInputGroup) return j.childOrder.value, j.getPosition(M);
+		}), R = () => A.groupProps, z = l(() => j.isInsideInputGroup && j.groupProps?.size ? j.groupProps.size : R().size ?? m.value.size), B = l(() => R().flat ?? m.value.flat), V = l(() => m.value.color ?? R().color), H = l(() => R().ghost ?? m.value.ghost), U = l(() => R().light ?? m.value.light), W = l(() => R().outlined ?? m.value.outlined), G = l(() => a.disabled || R().disabled || !!j.groupProps?.disabled), K = l(() => a.icon || a.iconLeft), q = T(), J = l(() => q.href ? "a" : a.to ? "router-link" : a.tag), Y = l(() => !!(a.tooltip || O.tooltip)), X = l(() => !O.default), re = l(() => {
+			let e = q["aria-label"];
+			if (e != null) return e;
+			if (X.value && a.tooltip) return a.tooltip;
+		}), ie = l(() => {
+			if (m.value.block) return "block w-full";
+			if (N) return "inline-flex self-stretch";
+		}), { className: Z, classes: Q, styles: $ } = ee("Button", {}, l(() => ({
+			size: w(z),
+			flat: w(B),
+			color: w(V),
+			ghost: w(H),
+			light: w(U),
+			outlined: w(W),
+			disabled: w(G),
+			loading: a.loading,
 			block: m.value.block,
 			glow: m.value.glow,
-			iconLeft: w(H),
-			iconRight: o.iconRight,
+			iconLeft: w(K),
+			iconRight: a.iconRight,
 			rounded: m.value.rounded
 		})), {
-			isButtonGroup: j,
-			isInsideInputGroup: M,
-			inputGroupPosition: N
-		}), { focus: J, blur: Y } = c(D);
-		return a({
-			focus: J,
-			blur: Y
-		}), (e, t) => (b(), d(C(W.value), {
+			isButtonGroup: N,
+			buttonGroupPosition: P,
+			buttonGroupRounded: F,
+			isInsideInputGroup: I,
+			inputGroupPosition: L
+		}), { focus: ae, blur: oe } = s(k);
+		return i({
+			focus: ae,
+			blur: oe
+		}), (e, t) => Y.value ? (b(), u(te, {
+			key: 0,
+			position: e.tooltipPosition,
+			class: g(ie.value)
+		}, {
+			tooltip: D(() => [x(e.$slots, "tooltip", {}, () => [p(C(e.tooltip), 1)], !0)]),
+			default: D(() => [(b(), u(S(J.value), {
+				ref_key: "elRef",
+				ref: k,
+				to: e.to,
+				class: g([
+					w(Z),
+					e.$style.button,
+					w(m).glow && !G.value && !e.loading ? e.$style["button--glow"] : "",
+					w(Q).wrapper,
+					{
+						"w-full": w(m).block,
+						"h-full": w(N)
+					}
+				]),
+				style: _(w($)),
+				"aria-label": re.value,
+				"aria-busy": e.loading ? "true" : null,
+				"aria-disabled": e.tag !== "button" && G.value ? "true" : null,
+				disabled: G.value || e.loading,
+				type: e.tag === "button" ? e.type : null
+			}, {
+				default: D(() => [
+					e.loading ? (b(), u(c, {
+						key: 0,
+						class: "absolute",
+						size: z.value,
+						label: e.loadingLabel,
+						status: e.loadingStatus
+					}, null, 8, [
+						"size",
+						"label",
+						"status"
+					])) : d("", !0),
+					f("div", { class: g(["inline-flex items-center justify-center", { invisible: e.loading }]) }, [K.value ? (b(), u(o, {
+						key: 0,
+						size: z.value,
+						icon: K.value,
+						class: g([w(Q).iconLeft])
+					}, null, 8, [
+						"size",
+						"icon",
+						"class"
+					])) : d("", !0), f("span", null, [x(e.$slots, "default", {}, void 0, !0)])], 2),
+					e.iconRight ? (b(), u(o, {
+						key: 1,
+						size: z.value,
+						icon: e.iconRight,
+						class: g([w(Q).iconRight, { invisible: e.loading }])
+					}, null, 8, [
+						"size",
+						"icon",
+						"class"
+					])) : d("", !0)
+				]),
+				_: 3
+			}, 8, [
+				"to",
+				"class",
+				"style",
+				"aria-label",
+				"aria-busy",
+				"aria-disabled",
+				"disabled",
+				"type"
+			]))]),
+			_: 3
+		}, 8, ["position", "class"])) : (b(), u(S(J.value), {
+			key: 1,
 			ref_key: "elRef",
-			ref: D,
+			ref: k,
 			to: e.to,
 			class: g([
-				w(G),
+				w(Z),
 				e.$style.button,
-				w(m).glow && !V.value && !e.loading ? e.$style["button--glow"] : "",
-				w(K).wrapper,
+				w(m).glow && !G.value && !e.loading ? e.$style["button--glow"] : "",
+				w(Q).wrapper,
 				{ "w-full": w(m).block }
 			]),
-			style: _(w(q)),
+			style: _(w($)),
 			"aria-busy": e.loading ? "true" : null,
-			"aria-disabled": e.tag !== "button" && V.value ? "true" : null,
-			disabled: V.value || e.loading,
+			"aria-disabled": e.tag !== "button" && G.value ? "true" : null,
+			disabled: G.value || e.loading,
 			type: e.tag === "button" ? e.type : null
 		}, {
-			default: E(() => [
-				e.loading ? (b(), d(l, {
+			default: D(() => [
+				e.loading ? (b(), u(c, {
 					key: 0,
 					class: "absolute",
-					size: F.value,
+					size: z.value,
 					label: e.loadingLabel,
 					status: e.loadingStatus
 				}, null, 8, [
 					"size",
 					"label",
 					"status"
-				])) : f("", !0),
-				p("div", { class: g(["inline-flex items-center justify-center", { invisible: e.loading }]) }, [H.value ? (b(), d(s, {
+				])) : d("", !0),
+				f("div", { class: g(["inline-flex items-center justify-center", { invisible: e.loading }]) }, [K.value ? (b(), u(o, {
 					key: 0,
-					size: F.value,
-					icon: H.value,
-					class: g([w(K).iconLeft])
+					size: z.value,
+					icon: K.value,
+					class: g([w(Q).iconLeft])
 				}, null, 8, [
 					"size",
 					"icon",
 					"class"
-				])) : f("", !0), p("span", null, [S(e.$slots, "default", {}, void 0, !0)])], 2),
-				e.iconRight ? (b(), d(s, {
+				])) : d("", !0), f("span", null, [x(e.$slots, "default", {}, void 0, !0)])], 2),
+				e.iconRight ? (b(), u(o, {
 					key: 1,
-					size: F.value,
+					size: z.value,
 					icon: e.iconRight,
-					class: g([w(K).iconRight, { invisible: e.loading }])
+					class: g([w(Q).iconRight, { invisible: e.loading }])
 				}, null, 8, [
 					"size",
 					"icon",
 					"class"
-				])) : f("", !0)
+				])) : d("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -136,4 +258,4 @@ var D = {
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };

package/lib/components/button/ButtonGroup.js

@@ -1,6 +1,5 @@
-import e from "../../_virtual/_plugin-vue_export-helper.js";
-import t from "./ButtonGroup.vue_vue_type_script_setup_true_lang.js";
-import n from "./ButtonGroup.vue_vue_type_style_index_0_lang.module.js";
-var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+import e from "./ButtonGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/button/ButtonGroup.vue
+var t = e;
 //#endregion
-export { r as default };
+export { t as default };

package/lib/components/button/ButtonGroup.vue.d.ts

@@ -1,9 +1,11 @@
-import { type ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes, type ComputedRef } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
+import type { ButtonGroupPosition } from '../../common/buttonGroupRadius';
 declare const buttonGroupProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     outlined: import("vue").Prop<boolean | undefined>;
     rounded: import("vue").Prop<boolean | undefined>;
@@ -12,27 +14,43 @@ declare const buttonGroupProps: {
     light: import("vue").Prop<boolean | undefined>;
     flat: import("vue").Prop<boolean | undefined>;
     block: import("vue").Prop<boolean | undefined>;
-    disabled: BooleanConstructor;
-    loading: BooleanConstructor;
-    loadingLabel: StringConstructor;
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
     loadingStatus: {
         readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
         readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 };
 export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>;
 export type ButtonGroupInjection = {
     groupProps: ButtonGroupProps;
     isButtonGroup: boolean;
+    registerChild: (id: string) => void;
+    unregisterChild: (id: string) => void;
+    getPosition: (id: string) => ButtonGroupPosition;
+    childOrder: ComputedRef<string[]>;
 };
 type InternalClasses = 'wrapper';
 type InternalExtraData = {
@@ -44,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     outlined: import("vue").Prop<boolean | undefined>;
     rounded: import("vue").Prop<boolean | undefined>;
@@ -52,26 +71,39 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     light: import("vue").Prop<boolean | undefined>;
     flat: import("vue").Prop<boolean | undefined>;
     block: import("vue").Prop<boolean | undefined>;
-    disabled: BooleanConstructor;
-    loading: BooleanConstructor;
-    loadingLabel: StringConstructor;
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
     loadingStatus: {
         readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
         readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     outlined: import("vue").Prop<boolean | undefined>;
     rounded: import("vue").Prop<boolean | undefined>;
@@ -80,21 +112,33 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     light: import("vue").Prop<boolean | undefined>;
     flat: import("vue").Prop<boolean | undefined>;
     block: import("vue").Prop<boolean | undefined>;
-    disabled: BooleanConstructor;
-    loading: BooleanConstructor;
-    loadingLabel: StringConstructor;
+    disabled: {
+        readonly type: BooleanConstructor;
+        readonly description: "Disables interaction and applies disabled styling.";
+    };
+    loading: {
+        readonly type: BooleanConstructor;
+        readonly description: "Shows a loading indicator and blocks interaction.";
+    };
+    loadingLabel: {
+        readonly type: StringConstructor;
+        readonly description: "Accessible label announced while loading.";
+    };
     loadingStatus: {
         readonly type: import("vue").PropType<import("../loader/Loader.vue").LoaderStatus>;
         readonly default: "active";
+        readonly description: "Loader visual status (for example active or indeterminate).";
     };
     color: {
         readonly type: StringConstructor;
         readonly default: string | undefined;
+        readonly description: "Theme or CSS color used for the control accents.";
     };
     size: {
         readonly type: import("vue").PropType<import("../../composables/useCommon").Size>;
         readonly default: "md";
         readonly validator: (value: string) => boolean;
+        readonly description: "Control size. One of xs, sm, md, lg, xl.";
     };
 }>> & Readonly<{}>, {
     disabled: boolean;

package/lib/components/button/ButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -5,41 +5,52 @@ import { useTheme as r } from "../../composables/useTheme.js";
 import { variantBooleanProps as i } from "../../common/props.js";
 import { useCommon as a } from "../../composables/useCommon.js";
 import { useInteractive as o } from "../../composables/useInteractive.js";
-import { createBlock as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, provide as f, renderSlot as p, resolveDynamicComponent as m, unref as h, withCtx as g } from "vue";
+import { computed as s, createBlock as c, defineComponent as l, normalizeClass as u, normalizeStyle as d, openBlock as f, provide as p, ref as m, renderSlot as h, resolveDynamicComponent as g, unref as _, withCtx as v } from "vue";
 //#region src/components/button/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
-var _ = {
+var y = {
 	...a.props(),
 	...n.props(),
 	...o.props(),
 	...i(),
 	tag: {
 		type: String,
-		default: "div"
+		default: "div",
+		description: "Root element tag for the group wrapper."
 	}
-}, v = /* @__PURE__ */ c({
+}, b = /* @__PURE__ */ l({
 	name: "XButtonGroup",
 	validators: { ...a.validators() },
-	props: _,
+	docs: { slots: { default: "Grouped buttons (typically x-button children)." } },
+	props: y,
 	setup(n) {
-		let i = n, a = t("ButtonGroup", i);
-		f(e, {
+		let i = n, a = t("ButtonGroup", i), o = m([]), l = s(() => o.value);
+		function y(e) {
+			let t = l.value, n = t.indexOf(e);
+			return n === -1 || t.length === 0 || t.length === 1 ? "only" : n === 0 ? "first" : n === t.length - 1 ? "last" : "middle";
+		}
+		function b(e) {
+			o.value.includes(e) || (o.value = [...o.value, e]);
+		}
+		function x(e) {
+			o.value = o.value.filter((t) => t !== e);
+		}
+		p(e, {
 			groupProps: i,
-			isButtonGroup: !0
+			isButtonGroup: !0,
+			registerChild: b,
+			unregisterChild: x,
+			getPosition: y,
+			childOrder: l
 		});
-		let { className: o, classes: c, styles: _ } = r("ButtonGroup", {}, a);
-		return (e, t) => (d(), s(m(e.tag), {
-			style: u(h(_)),
-			class: l([
-				h(o),
-				e.$style["button-group"],
-				h(a).rounded ? e.$style["button-group--rounded"] : "",
-				h(c).wrapper
-			])
+		let { className: S, classes: C, styles: w } = r("ButtonGroup", {}, a);
+		return (e, t) => (f(), c(g(e.tag), {
+			style: d(_(w)),
+			class: u([_(S), _(C).wrapper])
 		}, {
-			default: g(() => [p(e.$slots, "default")]),
+			default: v(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, ["style", "class"]));
 	}
 });
 //#endregion
-export { v as default };
+export { b as default };

package/lib/components/button/theme/Button.base.theme.js

@@ -1,10 +1,11 @@
 import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+import { buttonGroupRadiusClasses as t } from "../../../common/buttonGroupRadius.js";
 //#region src/components/button/theme/Button.base.theme.ts
-var t = {
+var n = {
 	classes: {
-		wrapper({ props: t, slots: n, data: r }) {
-			let i = ["relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
-			return r.isInsideInputGroup ? i.push(...e(r.inputGroupPosition)) : r.isButtonGroup || i.push(t.rounded ? "rounded-full" : "rounded-md"), !t.flat && !t.light && !t.ghost && !t.disabled && !t.loading && i.push("shadow-xs"), t.size === "xs" ? i.push(n.default ? `py-1 text-xs ${t.icon, "px-2"}` : "leading-none p-1") : t.size === "sm" ? i.push(n.default ? `py-1.5 text-sm ${t.icon, "px-3"}` : "leading-none p-1.5") : t.size === "lg" ? i.push(n.default ? `py-3 text-lg ${t.icon ? "px-4" : "px-5"}` : "leading-none p-3") : t.size === "xl" ? i.push(n.default ? "py-4 text-xl px-6" : "leading-none p-3.5") : i.push(n.default ? "py-2 px-4" : "leading-none p-[0.532rem]"), t.disabled ? i.push("cursor-not-allowed") : t.loading ? i.push("cursor-default") : i.push("cursor-pointer"), i;
+		wrapper({ props: n, slots: r, data: i }) {
+			let a = ["relative transition duration-150 focus-visible:outline-secondary-300 outline-transparent outline outline-1 outline-offset-2 inline-flex items-center justify-center font-medium whitespace-nowrap overflow-hidden align-middle active:!shadow-none border appearance-none shrink-0"];
+			return i.isInsideInputGroup ? a.push(...e(i.inputGroupPosition)) : i.isButtonGroup ? a.push(...t(i.buttonGroupPosition, i.buttonGroupRounded)) : a.push(n.rounded ? "rounded-full" : "rounded-md"), !n.flat && !n.light && !n.ghost && !n.disabled && !n.loading && a.push("shadow-xs"), n.size === "xs" ? a.push(r.default ? `py-1 text-xs ${n.icon, "px-2"}` : "leading-none p-1") : n.size === "sm" ? a.push(r.default ? `py-1.5 text-sm ${n.icon, "px-3"}` : "leading-none p-1.5") : n.size === "lg" ? a.push(r.default ? `py-3 text-lg ${n.icon ? "px-4" : "px-5"}` : "leading-none p-3") : n.size === "xl" ? a.push(r.default ? "py-4 text-xl px-6" : "leading-none p-3.5") : a.push(r.default ? "py-2 px-4" : "leading-none p-[0.532rem]"), n.disabled ? a.push("cursor-not-allowed") : n.loading ? a.push("cursor-default") : a.push("cursor-pointer"), a;
 		},
 		iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
 		iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
@@ -137,4 +138,4 @@ var t = {
 	}
 };
 //#endregion
-export { t as default };
+export { n as default };

package/lib/components/button/theme/Button.carbon.theme.js

@@ -1,10 +1,11 @@
 import { inputGroupRadiusClasses as e } from "../../../common/inputGroupRadius.js";
+import { buttonGroupRadiusClasses as t } from "../../../common/buttonGroupRadius.js";
 //#region src/components/button/theme/Button.carbon.theme.ts
-var t = {
+var n = {
 	classes: {
-		wrapper({ props: t, slots: n, data: r }) {
-			let i = ["relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light"];
-			return r.isInsideInputGroup ? i.push(...e(r.inputGroupPosition)) : r.isButtonGroup ? i.push("!rounded-none") : i.push(t.rounded ? "rounded-full" : ""), n.default ? (i.push("min-w-[8rem] px-4 py-3.5 items-start justify-between"), t.size === "xs" ? i.push("min-h-[2rem]") : t.size === "sm" ? i.push("min-h-[2.5rem]") : t.size === "lg" ? i.push("min-h-[4rem]") : t.size === "xl" ? i.push("min-h-[5rem]") : i.push("min-h-[3rem]")) : (i.push("items-center justify-center"), t.size === "xs" ? i.push("h-6 w-6") : t.size === "sm" ? i.push("h-8 w-8") : t.size === "lg" ? i.push("h-12 w-12") : t.size === "xl" ? i.push("h-16 w-16") : i.push("h-10 w-10")), t.disabled ? i.push("cursor-not-allowed") : t.loading ? i.push("cursor-default") : i.push("cursor-pointer"), i;
+		wrapper({ props: n, slots: r, data: i }) {
+			let a = ["relative transition duration-150 inline-flex whitespace-nowrap overflow-hidden align-top appearance-none text-sm active:shadow-none border !leading-[1.28572] tracking-wide font-light"];
+			return i.isInsideInputGroup ? a.push(...e(i.inputGroupPosition)) : i.isButtonGroup ? a.push(...t(i.buttonGroupPosition, i.buttonGroupRounded).map((e) => `!${e}`)) : n.rounded && a.push("rounded-full"), r.default ? (a.push("min-w-[8rem] px-4 py-3.5 items-start justify-between"), n.size === "xs" ? a.push("min-h-[2rem]") : n.size === "sm" ? a.push("min-h-[2.5rem]") : n.size === "lg" ? a.push("min-h-[4rem]") : n.size === "xl" ? a.push("min-h-[5rem]") : a.push("min-h-[3rem]")) : (a.push("items-center justify-center"), n.size === "xs" ? a.push("h-6 w-6") : n.size === "sm" ? a.push("h-8 w-8") : n.size === "lg" ? a.push("h-12 w-12") : n.size === "xl" ? a.push("h-16 w-16") : a.push("h-10 w-10")), n.disabled ? a.push("cursor-not-allowed") : n.loading ? a.push("cursor-default") : a.push("cursor-pointer"), a;
 		},
 		iconLeft: ({ slots: e }) => e.default ? "mr-2" : "m-0.5",
 		iconRight: ({ slots: e }) => e.default ? "ml-2" : "m-0.5"
@@ -134,4 +135,4 @@ var t = {
 	}
 };
 //#endregion
-export { t as default };
+export { n as default };

package/lib/components/card/Card.vue.d.ts

@@ -4,6 +4,7 @@ declare const cardProps: {
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     flat: import("vue").Prop<boolean | undefined>;
 };
@@ -15,12 +16,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     flat: import("vue").Prop<boolean | undefined>;
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tag: {
         type: StringConstructor;
         default: string;
+        description: string;
     };
     flat: import("vue").Prop<boolean | undefined>;
 }>> & Readonly<{}>, {

package/lib/components/card/Card.vue_vue_type_script_setup_true_lang.js

@@ -4,12 +4,14 @@ import { createBlock as n, defineComponent as r, normalizeClass as i, openBlock
 //#region src/components/card/Card.vue?vue&type=script&setup=true&lang.ts
 var u = /* @__PURE__ */ r({
 	name: "XCard",
+	docs: { slots: { default: "Card content." } },
 	props: {
 		tag: {
 			type: String,
-			default: "div"
+			default: "div",
+			description: "Root element tag."
 		},
-		flat: t()
+		flat: t("Removes elevation and border emphasis.")
 	},
 	setup(t) {
 		let { styles: r, classes: u, className: d } = e("Card", {}, t);