@bridge-ui/vue 0.5.1 → 0.7.0

package/dist/Components/BaseField/BaseField.vue_vue_type_script_setup_true_lang.js

@@ -1,45 +1,50 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
-import r from "./BaseFieldLabel.js";
-import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
+import r from "./BaseFieldCorner.js";
+import i from "./BaseFieldLabel.js";
+import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
 //#region src/Components/BaseField/BaseField.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
+], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "BaseField",
 	props: { field: {} },
-	setup(f) {
-		let T = f, E = b(), D = a(() => ({
-			...T.field,
+	setup(p) {
+		let E = p, D = x(), O = o(() => ({
+			...E.field,
 			slots: {
-				...T.field.slots,
-				...E
+				...E.field.slots,
+				...D
 			}
-		})), O = a(() => t(E, "label", D.value.merged.value.label) || t(E, "corner", D.value.merged.value.corner));
-		return (a, f) => (g(), s("div", m(D.value.rootBind.value, {
-			"data-invalid": D.value.invalidated.value || void 0,
-			"aria-disabled": D.value.isDisabled.value || void 0,
-			"aria-readonly": D.value.isReadonly.value || void 0
+		})), k = o(() => t(D, "label", O.value.merged.value.label) || t(D, "corner", O.value.merged.value.corner));
+		return (o, p) => (_(), c("div", h(O.value.rootBind.value, {
+			"data-invalid": O.value.invalidated.value || void 0,
+			"aria-disabled": O.value.isDisabled.value || void 0,
+			"aria-readonly": O.value.isReadonly.value || void 0
 		}), [
-			O.value ? (g(), s("div", h(m({ key: 0 }, D.value.headerBind.value)), [d(r, { api: D.value }, l({ _: 2 }, [y(e)(y(E), "label") ? {
+			k.value ? (_(), c("div", g(h({ key: 0 }, O.value.headerBind.value)), [f(i, { api: O.value }, u({ _: 2 }, [b(e)(b(D), "label") ? {
 				name: "label",
-				fn: x(() => [_(a.$slots, "label")]),
+				fn: S(() => [v(o.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(E), "corner", D.value.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, D.value.cornerBind.value)), [y(e)(y(E), "corner") ? _(a.$slots, "corner", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.corner) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			c("div", h(p(D.value.groupBind.value)), [
-				y(e)(y(E), "start") ? (g(), s("div", h(m({ key: 0 }, D.value.startSlotBind.value)), [_(a.$slots, "start")], 16)) : o("", !0),
-				_(a.$slots, "default"),
-				y(e)(y(E), "end") ? (g(), s("div", h(m({ key: 1 }, D.value.endSlotBind.value)), [_(a.$slots, "end")], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(r, { api: O.value }, u({ _: 2 }, [b(e)(b(D), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(o.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !0),
+			l("div", g(m(O.value.groupBind.value)), [
+				b(e)(b(D), "start") ? (_(), c("div", g(h({ key: 0 }, O.value.startSlotBind.value)), [v(o.$slots, "start")], 16)) : s("", !0),
+				v(o.$slots, "default"),
+				b(e)(b(D), "end") ? (_(), c("div", g(h({ key: 1 }, O.value.endSlotBind.value)), [v(o.$slots, "end")], 16)) : s("", !0)
 			], 16),
-			!D.value.invalidated.value && y(t)(y(E), "description", D.value.merged.value.description) ? (g(), s("p", m({ key: 1 }, D.value.descriptionBind.value, { id: `${D.value.controlId.value}-description` }), [y(e)(y(E), "description") ? _(a.$slots, "description", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.description) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
-			D.value.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, D.value.errorBind.value, {
-				id: `${D.value.controlId.value}-error`,
-				"aria-hidden": !D.value.showErrorMessageContent.value || void 0
-			}), [D.value.showErrorMessageContent.value ? (g(), s(i, { key: 0 }, [y(e)(y(E), "errorMessage") ? _(a.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(D.value.merged.value.errorMessage) ? (g(), s(i, { key: 1 }, [u(v(D.value.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w))
-		], 16, S));
+			!O.value.invalidated.value && b(t)(b(D), "description", O.value.merged.value.description) ? (_(), c("p", h({ key: 1 }, O.value.descriptionBind.value, { id: `${O.value.controlId.value}-description` }), [b(e)(b(D), "description") ? v(o.$slots, "description", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.description) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			O.value.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, O.value.errorBind.value, {
+				id: `${O.value.controlId.value}-error`,
+				"aria-hidden": !O.value.showErrorMessageContent.value || void 0
+			}), [O.value.showErrorMessageContent.value ? (_(), c(a, { key: 0 }, [b(e)(b(D), "errorMessage") ? v(o.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(O.value.merged.value.errorMessage) ? (_(), c(a, { key: 1 }, [d(y(O.value.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/Components/BaseField/BaseFieldCorner.js

@@ -0,0 +1,5 @@
+import e from "./BaseFieldCorner.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/BaseField/BaseFieldCorner.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/BaseField/BaseFieldCorner.vue.d.ts

@@ -0,0 +1,17 @@
+import { UseBaseFieldReturn } from './composables/useBaseField';
+type __VLS_Props = {
+    api: UseBaseFieldReturn;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    corner?: (props: typeof __VLS_8) => 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_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/BaseField/BaseFieldCorner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,17 @@
+import { hasNamedSlot as e, hasSlotOrProp as t } from "../../Utils/slotOrProp.js";
+import n from "../Label/Label.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createTextVNode as s, defineComponent as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, useSlots as h, withCtx as g } from "vue";
+//#region src/Components/BaseField/BaseFieldCorner.vue?vue&type=script&setup=true&lang.ts
+var _ = /*@__PURE__*/ c({
+	__name: "BaseFieldCorner",
+	props: { api: {} },
+	setup(c) {
+		let _ = h();
+		return (h, v) => m(t)(m(_), "corner", c.api.merged.value.corner) ? (d(), i(m(n), u(l({ key: 0 }, c.api.fieldCornerProps.value)), {
+			default: g(() => [m(e)(m(_), "corner") ? f(h.$slots, "corner", {}, void 0, void 0, 0) : (d(), o(r, { key: 1 }, [s(p(c.api.merged.value.corner), 1)], 64))]),
+			_: 3
+		}, 16)) : a("", !0);
+	}
+});
+//#endregion
+export { _ as default };

package/dist/Components/BaseField/baseField.types.d.ts

@@ -48,9 +48,11 @@ export interface BaseFieldClasses {
 }
 export interface BaseFieldCustomProps {
     /**
-     * Props forwarded to the corner label element.
+     * Props forwarded to the corner `Label` (content stays owned by `BaseField`).
+     *
+     * @default undefined
      */
-    corner?: HTMLAttributes;
+    corner?: Partial<Omit<LabelProps, "children">>;
     /**
      * Props forwarded to the helper text below the control group.
      */

package/dist/Components/BaseField/composables/useBaseField.d.ts

@@ -38,7 +38,6 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     }>>;
     controlId: import('vue').ComputedRef<string>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
@@ -49,6 +48,7 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
     fieldLabelProps: import('vue').ComputedRef<LabelProps>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
+    fieldCornerProps: import('vue').ComputedRef<LabelProps>;
     showErrorMessageContent: import('vue').ComputedRef<boolean>;
 };
 export type UseBaseFieldReturn = ReturnType<typeof useBaseField>;

package/dist/Components/BaseField/composables/useBaseField.js

@@ -61,11 +61,14 @@ function _(_, v = {
 		"justify-between items-end": e(x, "label", w.value.label),
 		"justify-end": !e(x, "label", w.value.label),
 		[E.value.header ?? ""]: !0
-	}))), R = a(() => n(D.value?.corner, {}, p({
-		"text-dark-500 dark:text-dark-400": !0,
-		[M.value?.text ?? ""]: !0,
-		[E.value.corner ?? ""]: !0
-	}))), z = a(() => n(D.value?.group, {
+	}))), R = a(() => {
+		let e = y.labelHtmlFor ?? ((e) => e);
+		return t(D.value?.corner, {
+			size: w.value.size,
+			for: e(j.value),
+			classes: { root: p({ [E.value.corner ?? ""]: !0 }) }
+		});
+	}), z = a(() => n(D.value?.group, {
 		role: "group",
 		id: j.value,
 		"aria-describedby": F.value,
@@ -82,7 +85,7 @@ function _(_, v = {
 		"group/end wrapper-end-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
 		[E.value.end ?? ""]: !0
 	}))), H = a(() => n(D.value?.description, {}, p({
-		"mt-2 text-dark-500 dark:text-dark-400": !0,
+		"mt-1 px-1 text-dark-500 dark:text-dark-400": !0,
 		[M.value?.text ?? ""]: !0,
 		[E.value.description ?? ""]: !0
 	})));
@@ -91,7 +94,7 @@ function _(_, v = {
 		merged: w,
 		rootBind: I,
 		errorBind: a(() => n(D.value?.errorMessage, {}, p({
-			"mt-2": !0,
+			"mt-1 px-1": !0,
 			"min-h-[1lh]": N.value,
 			"text-error-600 dark:text-error-400": !0,
 			[M.value?.text ?? ""]: !0,
@@ -100,7 +103,6 @@ function _(_, v = {
 		groupBind: z,
 		controlId: j,
 		headerBind: L,
-		cornerBind: R,
 		isDisabled: k,
 		isReadonly: A,
 		sizeClasses: M,
@@ -123,6 +125,7 @@ function _(_, v = {
 			});
 		}),
 		descriptionBind: H,
+		fieldCornerProps: R,
 		showErrorMessageContent: P
 	};
 }

package/dist/Components/Button/Button.vue_vue_type_script_setup_true_lang.js

@@ -19,6 +19,7 @@ var y = /*@__PURE__*/ l({
 		icon: {},
 		loading: { type: Boolean },
 		rounded: {},
+		selected: { type: Boolean },
 		size: {},
 		startIcon: {},
 		text: {},

package/dist/Components/Button/button.types.d.ts

@@ -134,6 +134,12 @@ export interface ButtonOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<ButtonRounded, ButtonRoundedOverrides>;
+    /**
+     * Whether the button is in a selected / pressed state.
+     *
+     * @default false
+     */
+    selected?: boolean;
     /**
      * The size of the button.
      *

package/dist/Components/Button/composables/useButton.d.ts

@@ -7,7 +7,10 @@ export declare function useButton(props: ButtonOwnProps, libDefaults: ButtonLibD
     merged: import('vue').ComputedRef<ButtonMerged>;
     isMini: import('vue').ComputedRef<boolean>;
     iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonProps, "color" | "href" | "icon" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "text" | "disabled" | "endIcon" | "startIcon" | "as" | "density" | "loading">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-pressed": boolean | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonProps, "color" | "href" | "icon" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "text" | "disabled" | "endIcon" | "startIcon" | "as" | "density" | "loading" | "selected">>>;
     rootHref: import('vue').ComputedRef<string | undefined>;
     rootType: import('vue').ComputedRef<"button" | undefined>;
     endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/Button/composables/useButton.js

@@ -1,10 +1,11 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, useAttrs as i } from "vue";
-import { get as a, includes as o, isNil as s } from "es-toolkit/compat";
-import { buttonDensityProps as c, buttonRoundedProps as l, buttonVariantProps as u } from "@bridge-ui/core/Tokens";
-import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core/Utils";
+import { BUTTON_GROUP_INJECTION_KEY as r } from "../../ButtonGroup/buttonGroupInjectionKey.js";
+import { computed as i, inject as a, useAttrs as o } from "vue";
+import { get as s, includes as c, isNil as l } from "es-toolkit/compat";
+import { buttonDensityProps as u, buttonRoundedProps as d, buttonVariantProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/Button/composables/useButton.ts
-var m = [
+var g = [
 	"as",
 	"full",
 	"href",
@@ -19,90 +20,108 @@ var m = [
 	"rounded",
 	"variant",
 	"disabled",
+	"selected",
 	"startIcon",
 	"customProps"
 ];
-function h(h, g) {
-	let _ = i(), v = r(() => p({
-		bridgeKeys: m,
+function _(_, v) {
+	let y = o(), b = a(r, null), x = i(() => h({
+		bridgeKeys: g,
 		props: {
-			..._,
-			...h
+			...y,
+			..._
 		}
-	})), { merged: y, entry: b } = t({
-		libDefaults: g,
+	})), S = i(() => {
+		let e = x.value.componentProps, t = b?.value;
+		return {
+			...e,
+			size: e.size ?? t?.size,
+			color: e.color ?? t?.color,
+			density: e.density ?? t?.density,
+			rounded: e.rounded ?? t?.rounded,
+			variant: e.variant ?? t?.variant
+		};
+	}), { merged: C, entry: w } = t({
+		libDefaults: v,
 		componentName: "Button",
-		props: () => v.value.componentProps
-	}), x = r(() => y.value.customProps), S = n({
-		entry: b,
-		props: () => v.value.componentProps
-	}), C = r(() => y.value.as ?? "button"), w = r(() => C.value === "a"), T = r(() => C.value === "button"), E = r(() => y.value.density === "mini"), D = r(() => y.value.disabled || y.value.loading), O = r(() => T.value ? D.value : void 0), k = r(() => y.value.loading ? !0 : void 0), A = r(() => D.value && !T.value ? !0 : void 0), j = r(() => {
-		if (!(!w.value || D.value || !y.value.href)) return y.value.href;
-	}), M = r(() => {
-		if (!T.value) return;
-		let e = a(v.value.inheritedAttrs, "type");
-		return o([
+		props: () => S.value
+	}), T = i(() => C.value.customProps), E = n({
+		entry: w,
+		props: () => x.value.componentProps
+	}), D = i(() => C.value.as ?? "button"), O = i(() => D.value === "a"), k = i(() => D.value === "button"), A = i(() => C.value.density === "mini"), j = i(() => C.value.disabled || C.value.loading), M = i(() => k.value ? j.value : void 0), N = i(() => C.value.loading ? !0 : void 0), P = i(() => j.value && !k.value ? !0 : void 0), F = i(() => {
+		if (!(!O.value || j.value || !C.value.href)) return C.value.href;
+	}), I = i(() => {
+		if (!k.value) return;
+		let e = s(x.value.inheritedAttrs, "type");
+		return c([
 			"submit",
 			"reset",
 			"button"
 		], e) ? e : "button";
-	}), N = r(() => {
-		let e = f(c, b.value?.tokens?.density);
-		return a(e, [y.value.density, y.value.size]);
-	}), P = r(() => s(v.value.componentProps.variant) ? E.value ? "flat" : y.value.variant : v.value.componentProps.variant), F = r(() => {
-		let e = f(u, b.value?.tokens?.variant);
-		return a(e, [P.value, y.value.color]);
-	}), I = r(() => {
-		let e = f(l, b.value?.tokens?.rounded);
-		return a(e, y.value.rounded);
+	}), L = i(() => {
+		let e = m(u, w.value?.tokens?.density);
+		return s(e, [C.value.density, C.value.size]);
+	}), R = i(() => l(S.value.variant) ? l(b) && A.value ? "flat" : C.value.variant : S.value.variant), z = i(() => {
+		let e = m(f, w.value?.tokens?.variant);
+		return s(e, [R.value, C.value.color]);
+	}), B = i(() => {
+		let e = m(d, w.value?.tokens?.rounded);
+		return s(e, C.value.rounded);
 	});
 	return {
-		tag: C,
-		merged: y,
-		isMini: E,
-		iconBind: r(() => e(x.value?.icon, {}, d({
+		tag: D,
+		merged: C,
+		isMini: A,
+		iconBind: i(() => e(T.value?.icon, {}, p({
 			"shrink-0": !0,
-			[S.value.icon ?? ""]: !0
+			[E.value.icon ?? ""]: !0
 		}))),
-		rootBind: r(() => e(x.value?.root, v.value.inheritedAttrs, d({
-			"inline-flex items-center justify-center": !0,
-			"cursor-pointer outline-none outline-hidden": !0,
-			"shrink-0": E.value,
-			[N.value ?? ""]: !0,
-			[I.value ?? ""]: !0,
-			"w-full": !E.value && y.value.full,
-			"w-fit": !E.value && !y.value.full,
-			"group hover:shadow-xs": !E.value,
-			[a(F.value, "base") ?? ""]: !0,
-			[a(F.value, "hover") ?? ""]: !0,
-			[a(F.value, "focus") ?? ""]: !0,
-			"transition-all ease-in-out duration-200": !0,
-			"focus:ring-2": !0,
-			"focus:ring-offset-background-white dark:focus:ring-offset-background-dark": !0,
-			"disabled:opacity-80 disabled:cursor-not-allowed": !0,
-			"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
-			[S.value.root ?? ""]: !0
-		}))),
-		rootHref: j,
-		rootType: M,
-		endIconBind: r(() => e(x.value?.endIcon, {}, d({
+		rootBind: i(() => e(T.value?.root, x.value.inheritedAttrs, {
+			"aria-pressed": l(C.value.selected) ? void 0 : C.value.selected,
+			class: p({
+				"inline-flex items-center justify-center": !0,
+				"cursor-pointer outline-none outline-hidden": !0,
+				"shrink-0": A.value,
+				[L.value ?? ""]: !0,
+				[B.value ?? ""]: !0,
+				"h-auto": A.value && !l(b) && b.value?.density !== "mini",
+				"border border-transparent": !l(b) && R.value !== "outline",
+				"w-full": !A.value && C.value.full,
+				"w-fit": !A.value && !C.value.full,
+				"group hover:shadow-xs": !A.value,
+				[s(z.value, "base") ?? ""]: !0,
+				[s(z.value, "hover") ?? ""]: !0,
+				[s(z.value, "focus") ?? ""]: !0,
+				[s(z.value, "selected") ?? ""]: C.value.selected === !0,
+				"relative z-10": C.value.selected === !0,
+				"transition-all ease-in-out duration-200": !0,
+				"focus:ring-2": !0,
+				"focus:ring-offset-background-white dark:focus:ring-offset-background-dark": !0,
+				"disabled:opacity-80 disabled:cursor-not-allowed": !0,
+				"aria-disabled:opacity-80 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none": !0,
+				[E.value.root ?? ""]: !0
+			})
+		})),
+		rootHref: F,
+		rootType: I,
+		endIconBind: i(() => e(T.value?.endIcon, {}, p({
 			"shrink-0": !0,
-			[S.value.endIcon ?? ""]: !0
+			[E.value.endIcon ?? ""]: !0
 		}))),
-		endSlotBind: r(() => e(x.value?.end, {}, "inline-flex shrink-0 items-center")),
-		rootAriaBusy: k,
-		rootDisabled: O,
-		startIconBind: r(() => e(x.value?.startIcon, {}, d({
+		endSlotBind: i(() => e(T.value?.end, {}, "inline-flex shrink-0 items-center")),
+		rootAriaBusy: N,
+		rootDisabled: M,
+		startIconBind: i(() => e(T.value?.startIcon, {}, p({
 			"shrink-0": !0,
-			[S.value.startIcon ?? ""]: !0
+			[E.value.startIcon ?? ""]: !0
 		}))),
-		startSlotBind: r(() => e(x.value?.start, {}, "inline-flex shrink-0 items-center")),
-		loadingIconBind: r(() => e(x.value?.loading, {}, d({
+		startSlotBind: i(() => e(T.value?.start, {}, "inline-flex shrink-0 items-center")),
+		loadingIconBind: i(() => e(T.value?.loading, {}, p({
 			"shrink-0 animate-spin": !0,
-			[S.value.loading ?? ""]: !0
+			[E.value.loading ?? ""]: !0
 		}))),
-		rootAriaDisabled: A
+		rootAriaDisabled: P
 	};
 }
 //#endregion
-export { h as useButton };
+export { _ as useButton };

package/dist/Components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,5 @@
+import e from "./ButtonGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/ButtonGroup/ButtonGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/ButtonGroup/ButtonGroup.vue.d.ts

@@ -0,0 +1,14 @@
+import { ButtonGroupOwnProps, ButtonGroupSlots } from './buttonGroup.types';
+type __VLS_Slots = ButtonGroupSlots;
+declare const __VLS_base: import('vue').DefineComponent<ButtonGroupOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ButtonGroupOwnProps> & Readonly<{}>, {
+    full: boolean;
+    separator: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/ButtonGroup/ButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,37 @@
+import { useButtonGroup as e } from "./composables/useButtonGroup.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+//#region src/Components/ButtonGroup/ButtonGroup.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "ButtonGroup",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		density: {},
+		full: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: {},
+		rounded: {},
+		separator: {
+			type: Boolean,
+			default: !0
+		},
+		size: {},
+		variant: {}
+	},
+	setup(n) {
+		let { rootBind: c } = e(n, {
+			full: !1,
+			separator: !0,
+			color: "primary",
+			variant: "solid",
+			orientation: "horizontal"
+		});
+		return (e, n) => (a(), t("div", i(r(s(c))), [o(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { c as default };

package/dist/Components/ButtonGroup/buttonGroup.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { ButtonColor, ButtonDensity, ButtonGroupOrientation, ButtonRounded, ButtonSize, ButtonVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
+import { ButtonColorOverrides, ButtonDensityOverrides, ButtonRoundedOverrides, ButtonSizeOverrides, ButtonVariantOverrides } from '../Button/button.types';
+export interface ButtonGroupOrientationOverrides {}
+export interface ButtonGroupClasses {
+    /**
+     * Classes merged onto the root.
+     */
+    root?: string;
+}
+export interface ButtonGroupCustomProps {
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+/**
+ * Groups related action buttons in a joined strip.
+ * Compose with `Button`. Size, color, density, rounded, and variant
+ * cascade to nested buttons unless they override them.
+ */
+export interface ButtonGroupOwnProps {
+    /**
+     * Classes for button group parts.
+     *
+     * @default undefined
+     */
+    classes?: ButtonGroupClasses;
+    /**
+     * Color applied to nested `Button` children when set. The divider follows the button text color.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<ButtonColor, ButtonColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: ButtonGroupCustomProps;
+    /**
+     * Density applied to nested `Button` children unless they set `density`.
+     *
+     * @default undefined
+     */
+    density?: MergeProps<ButtonDensity, ButtonDensityOverrides>;
+    /**
+     * Stretch the group to the container width.
+     *
+     * @default false
+     */
+    full?: boolean;
+    /**
+     * Layout orientation of the group.
+     *
+     * @default "horizontal"
+     */
+    orientation?: MergeProps<ButtonGroupOrientation, ButtonGroupOrientationOverrides>;
+    /**
+     * Roundness applied to nested `Button` children unless they set `rounded`.
+     *
+     * @default undefined
+     */
+    rounded?: MergeProps<ButtonRounded, ButtonRoundedOverrides>;
+    /**
+     * Draw a full-height divider between adjacent children. The fill matches the button text color.
+     *
+     * @default true
+     */
+    separator?: boolean;
+    /**
+     * Size applied to nested `Button` children unless they set `size`.
+     *
+     * @default undefined
+     */
+    size?: MergeProps<ButtonSize, ButtonSizeOverrides>;
+    /**
+     * Variant applied to nested `Button` children unless they set `variant`.
+     *
+     * @default undefined
+     */
+    variant?: MergeProps<ButtonVariant, ButtonVariantOverrides>;
+}
+export interface ButtonGroupSlots {
+    /**
+     * Grouped controls (`Button`, nested `ButtonGroup`).
+     */
+    default?: Slot<undefined>;
+}
+export type ButtonGroupProps = MergeHtmlProps<ButtonGroupOwnProps, HTMLAttributes>;

package/dist/Components/ButtonGroup/buttonGroupInjectionKey.d.ts

@@ -0,0 +1,7 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { ButtonGroupOwnProps } from './buttonGroup.types';
+/**
+ * Button appearance cascaded to nested `Button` children.
+ */
+export type ButtonGroupContextValue = Pick<ButtonGroupOwnProps, "size" | "color" | "density" | "rounded" | "variant">;
+export declare const BUTTON_GROUP_INJECTION_KEY: InjectionKey<ComputedRef<ButtonGroupContextValue>>;

package/dist/Components/ButtonGroup/buttonGroupInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/ButtonGroup/buttonGroupInjectionKey.ts
+var e = Symbol("bridge-button-group");
+//#endregion
+export { e as BUTTON_GROUP_INJECTION_KEY };

package/dist/Components/ButtonGroup/composables/useButtonGroup.d.ts

@@ -0,0 +1,16 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { ButtonGroupOwnProps, ButtonGroupProps } from '../buttonGroup.types';
+type ButtonGroupLibDefaults = LibDefaultsShape<ButtonGroupOwnProps, "full" | "color" | "variant" | "separator" | "orientation">;
+type ButtonGroupMerged = MergeLibDefaults<ButtonGroupOwnProps, ButtonGroupLibDefaults>;
+/**
+ * Builds bind props for a grouped set of action buttons.
+ */
+export declare function useButtonGroup(props: ButtonGroupOwnProps, libDefaults: ButtonGroupLibDefaults): {
+    merged: import('vue').ComputedRef<ButtonGroupMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        role: string;
+        "data-slot": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonGroupProps, "color" | "orientation" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "density" | "separator">>>;
+};
+export {};