@bridge-ui/vue 0.7.0 → 0.9.0

package/dist/Components/Autocomplete/composables/useAutocomplete.d.ts

@@ -436,7 +436,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -461,6 +461,8 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -720,7 +722,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>>>;
     handleApply: () => void;
     selectOption: (option: SelectOption) => void;
     handleCancel: () => void;
@@ -747,7 +749,7 @@ export declare function useAutocomplete(props: AutocompleteOwnProps, model: Ref<
         options: import('@bridge-ui/core/Domain').ListboxOption[];
         overlay: import('@bridge-ui/core/Domain').FieldOverlayMode;
         placement?: import('@floating-ui/utils').Placement;
-        rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "none" | "3xl" | "4xl" | "full";
+        rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "3xl" | "4xl" | "full" | "none";
         showCheckmark?: boolean;
         showFooter: boolean;
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";

package/dist/Components/Autocomplete/composables/useAutocomplete.js

@@ -94,7 +94,7 @@ function m(m, h, g, _, Me) {
 			value: t,
 			label: String(t)
 		});
-	}), V = a(() => R.value.length > 0), Ke = a(() => k.value.clearable !== !1), H = a(() => !!k.value.asyncData), U = a(() => {
+	}), V = a(() => R.value.length > 0), Ke = a(() => k.value.clearable === !0), H = a(() => !!k.value.asyncData), U = a(() => {
 		if (H.value || (k.value.searchable ?? !0)) return !0;
 		let e = k.value.minItemsForSearch ?? 11;
 		return ze.value.length >= e;

package/dist/Components/Badge/composables/useBadge.d.ts

@@ -4,6 +4,6 @@ type BadgeLibDefaults = LibDefaultsShape<BadgeOwnProps, "size" | "color" | "dens
 type BadgeMerged = MergeLibDefaults<BadgeOwnProps, BadgeLibDefaults>;
 export declare function useBadge(props: BadgeOwnProps, libDefaults: BadgeLibDefaults): {
     merged: import('vue').ComputedRef<BadgeMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, Omit<BadgeProps, "color" | "size" | "classes" | "full" | "rounded" | "variant" | "density">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, Omit<BadgeProps, "color" | "size" | "classes" | "full" | "density" | "rounded" | "variant">>>;
 };
 export {};

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

@@ -19,30 +19,30 @@ var C = [
 				...D
 			}
 		})), 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, {
+		return (t, o) => (_(), 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
 		}), [
 			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: S(() => [v(o.$slots, "label")]),
+				fn: S(() => [v(t.$slots, "label")]),
 				key: "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")]),
+				fn: S(() => [v(t.$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)
+				b(e)(b(D), "start") ? (_(), c("div", g(h({ key: 0 }, O.value.startSlotBind.value)), [v(t.$slots, "start")], 16)) : s("", !0),
+				v(t.$slots, "default"),
+				b(e)(b(D), "end") ? (_(), c("div", g(h({ key: 1 }, O.value.endSlotBind.value)), [v(t.$slots, "end")], 16)) : s("", !0)
 			], 16),
-			!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, {
+			O.value.showDescriptionContent.value ? (_(), c("p", h({ key: 1 }, O.value.descriptionBind.value, { id: `${O.value.controlId.value}-description` }), [b(e)(b(D), "description") ? v(t.$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.showErrorMessageRow.value ? (_(), 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))
+			}), [O.value.showErrorMessageContent.value ? (_(), c(a, { key: 0 }, [b(e)(b(D), "errorMessage") ? v(t.$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)) : s("", !0)
 		], 16, C));
 	}
 });

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

@@ -115,7 +115,8 @@ export interface BaseFieldOwnProps {
      */
     customProps?: BaseFieldCustomProps;
     /**
-     * Helper text below the control group (hidden when the field is invalid).
+     * Helper text below the control group. Hidden when `error` is true and an
+     * error message is shown, unless `showDescriptionOnError` is true.
      *
      * @default undefined
      */
@@ -127,7 +128,9 @@ export interface BaseFieldOwnProps {
      */
     disabled?: boolean;
     /**
-     * When `true`, applies invalid styling on the label and control group.
+     * When `true`, applies invalid styling on the label and control group. Hides
+     * description when an error message is shown, unless `showDescriptionOnError`
+     * is true.
      *
      * @default false
      */
@@ -148,7 +151,8 @@ export interface BaseFieldOwnProps {
      */
     field?: UseBaseFieldReturn;
     /**
-     * When `true`, does not reserve space below the group for error messages.
+     * When `true`, does not reserve the error row. That row is also omitted
+     * while a description is shown.
      *
      * @default false
      */
@@ -171,6 +175,12 @@ export interface BaseFieldOwnProps {
      * @default false
      */
     required?: boolean;
+    /**
+     * When `true`, keeps the description visible while the field is invalid.
+     *
+     * @default false
+     */
+    showDescriptionOnError?: boolean;
     /**
      * Label typography and control group gap scale.
      *
@@ -195,7 +205,8 @@ export interface BaseFieldSlots {
      */
     default?: Slot<undefined>;
     /**
-     * Helper text below the control group.
+     * Helper text below the control group. Hidden when the field is invalid and
+     * an error message is shown, unless `showDescriptionOnError` is true.
      */
     description?: Slot;
     /**

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

@@ -5,14 +5,16 @@ import { LabelProps } from '../../Label/label.types';
 export type BaseFieldOptions = {
     /**
      * Public registry key that owns BaseField chrome defaults/tokens.
+     * Defaults to `BaseField`; Slider / OtpField pass their own key so chrome
+     * cascades (`BaseField` → parent).
      */
-    componentName?: "Slider" | "OtpField";
+    componentName?: "Slider" | "OtpField" | "BaseField";
     /**
      * Resolve `Label` `for` from `controlId`. Defaults to the control id itself.
      */
     labelHtmlFor?: (controlId: string) => string;
 };
-export declare const baseFieldBridgeKeys: readonly ["size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage"];
+export declare const baseFieldBridgeKeys: readonly ["size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage", "showDescriptionOnError"];
 type BaseFieldLibDefaults = LibDefaultsShape<Omit<BaseFieldOwnProps, "field">, "size" | "error" | "hideErrorMessage">;
 type BaseFieldMerged = MergeLibDefaults<Omit<BaseFieldOwnProps, "field">, BaseFieldLibDefaults>;
 /**
@@ -49,6 +51,8 @@ export declare function useBaseField(props: MaybeRefOrGetter<Omit<BaseFieldOwnPr
     fieldLabelProps: import('vue').ComputedRef<LabelProps>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     fieldCornerProps: import('vue').ComputedRef<LabelProps>;
+    showErrorMessageRow: import('vue').ComputedRef<boolean>;
+    showDescriptionContent: import('vue').ComputedRef<boolean>;
     showErrorMessageContent: import('vue').ComputedRef<boolean>;
 };
 export type UseBaseFieldReturn = ReturnType<typeof useBaseField>;

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

@@ -18,7 +18,8 @@ var g = [
 	"customProps",
 	"description",
 	"errorMessage",
-	"hideErrorMessage"
+	"hideErrorMessage",
+	"showDescriptionOnError"
 ];
 function _(_, v = {
 	size: "md",
@@ -31,102 +32,101 @@ function _(_, v = {
 			...b,
 			...o(_)
 		}
-	})), { merged: w, entry: T } = r({
+	})), w = y.componentName ?? "BaseField", { merged: T, entry: E, chromeEntry: D } = r({
 		libDefaults: v,
-		componentName: y.componentName,
+		componentName: w,
 		props: () => C.value.componentProps
-	}), E = i({
-		entry: T,
+	}), O = i({
+		entry: E,
+		chromeEntry: D,
 		props: () => C.value.componentProps
-	}), D = a(() => w.value.customProps), O = a(() => w.value.error === !0), k = a(() => !!w.value.disabled), A = a(() => !!w.value.readonly), j = a(() => w.value.controlId ?? C.value.inheritedAttrs.id ?? S), M = a(() => {
-		let e = m(f, u(T.value, [
-			"tokens",
-			"baseField",
-			"size"
-		]));
-		return u(e, w.value.size ?? "md");
-	}), N = a(() => !w.value.hideErrorMessage), P = a(() => O.value && e(x, "errorMessage", w.value.errorMessage)), F = a(() => {
-		let t = [];
-		return !O.value && e(x, "description", w.value.description) && t.push(`${j.value}-description`), O.value && !w.value.hideErrorMessage && e(x, "errorMessage", w.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), I = a(() => n(D.value?.root, {
+	}), k = a(() => T.value.customProps), A = a(() => T.value.error === !0), j = a(() => !!T.value.disabled), M = a(() => !!T.value.readonly), N = a(() => T.value.controlId ?? C.value.inheritedAttrs.id ?? S), P = a(() => {
+		let e = w !== "BaseField", t = m(f, u(D.value, ["tokens", "size"]), e ? void 0 : u(E.value, ["tokens", "size"]));
+		return u(t, T.value.size ?? "md");
+	}), F = a(() => !T.value.hideErrorMessage && !e(x, "description", T.value.description)), I = a(() => A.value && !T.value.hideErrorMessage && e(x, "errorMessage", T.value.errorMessage)), L = a(() => e(x, "description", T.value.description) ? !I.value || T.value.showDescriptionOnError === !0 : !1), R = a(() => I.value || F.value), z = a(() => {
+		let e = [];
+		return L.value && e.push(`${N.value}-description`), I.value && e.push(`${N.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), B = a(() => n(k.value?.root, {
 		class: p(C.value.inheritedAttrs.class),
 		...d(C.value.inheritedAttrs, ["class", "id"])
 	}, p({
 		"group w-full relative": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[E.value.root ?? ""]: !0
-	}))), L = a(() => n(D.value?.header, {}, p({
+		[O.value.root ?? ""]: !0
+	}))), V = a(() => n(k.value?.header, {}, p({
 		"flex w-full gap-x-2 mb-1.5": !0,
-		"justify-between items-end": e(x, "label", w.value.label),
-		"justify-end": !e(x, "label", w.value.label),
-		[E.value.header ?? ""]: !0
-	}))), R = a(() => {
+		"justify-between items-end": e(x, "label", T.value.label),
+		"justify-end": !e(x, "label", T.value.label),
+		[O.value.header ?? ""]: !0
+	}))), H = 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 }) }
+		return t(k.value?.corner, {
+			size: T.value.size,
+			for: e(N.value),
+			classes: { root: p({ [O.value.corner ?? ""]: !0 }) }
 		});
-	}), z = a(() => n(D.value?.group, {
+	}), U = a(() => n(k.value?.group, {
 		role: "group",
-		id: j.value,
-		"aria-describedby": F.value,
-		"aria-disabled": k.value || void 0,
-		"aria-invalid": O.value || void 0
+		id: N.value,
+		"aria-describedby": z.value,
+		"aria-disabled": j.value || void 0,
+		"aria-invalid": A.value || void 0
 	}, p({
 		"flex flex-wrap items-center": !0,
-		[M.value?.group ?? ""]: !0,
-		[E.value.group ?? ""]: !0
-	}))), B = a(() => n(D.value?.start, {}, p({
+		[P.value?.group ?? ""]: !0,
+		[O.value.group ?? ""]: !0
+	}))), W = a(() => n(k.value?.start, {}, p({
 		"group/start wrapper-start-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
-		[E.value.start ?? ""]: !0
-	}))), V = a(() => n(D.value?.end, {}, p({
+		[O.value.start ?? ""]: !0
+	}))), G = a(() => n(k.value?.end, {}, p({
 		"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({
+		[O.value.end ?? ""]: !0
+	}))), K = a(() => n(k.value?.description, {}, p({
 		"mt-1 px-1 text-dark-500 dark:text-dark-400": !0,
-		[M.value?.text ?? ""]: !0,
-		[E.value.description ?? ""]: !0
+		[P.value?.text ?? ""]: !0,
+		[O.value.description ?? ""]: !0
 	})));
 	return {
 		slots: x,
-		merged: w,
-		rootBind: I,
-		errorBind: a(() => n(D.value?.errorMessage, {}, p({
+		merged: T,
+		rootBind: B,
+		errorBind: a(() => n(k.value?.errorMessage, {}, p({
 			"mt-1 px-1": !0,
-			"min-h-[1lh]": N.value,
+			"min-h-[1lh]": F.value,
 			"text-error-600 dark:text-error-400": !0,
-			[M.value?.text ?? ""]: !0,
-			[E.value.errorMessage ?? ""]: !0
+			[P.value?.text ?? ""]: !0,
+			[O.value.errorMessage ?? ""]: !0
 		}))),
-		groupBind: z,
-		controlId: j,
-		headerBind: L,
-		isDisabled: k,
-		isReadonly: A,
-		sizeClasses: M,
-		endSlotBind: V,
-		invalidated: O,
-		startSlotBind: B,
-		mergedClasses: E,
-		ariaDescribedBy: F,
+		groupBind: U,
+		controlId: N,
+		headerBind: V,
+		isDisabled: j,
+		isReadonly: M,
+		sizeClasses: P,
+		endSlotBind: G,
+		invalidated: A,
+		startSlotBind: W,
+		mergedClasses: O,
+		ariaDescribedBy: z,
 		fieldLabelProps: a(() => {
 			let e = y.labelHtmlFor ?? ((e) => e);
-			return t(D.value?.label, {
-				size: w.value.size,
-				error: O.value,
-				required: w.value.required,
-				for: e(j.value),
+			return t(k.value?.label, {
+				size: T.value.size,
+				error: A.value,
+				required: T.value.required,
+				for: e(N.value),
 				classes: {
-					required: E.value.required,
-					root: p({ [E.value.label ?? ""]: !0 })
+					required: O.value.required,
+					root: p({ [O.value.label ?? ""]: !0 })
 				}
 			});
 		}),
-		descriptionBind: H,
-		fieldCornerProps: R,
-		showErrorMessageContent: P
+		descriptionBind: K,
+		fieldCornerProps: H,
+		showErrorMessageRow: R,
+		showDescriptionContent: L,
+		showErrorMessageContent: I
 	};
 }
 //#endregion

package/dist/Components/BreadcrumbItem/composables/useBreadcrumbItem.d.ts

@@ -5,16 +5,16 @@ export declare function useBreadcrumbItem(props: BreadcrumbItemOwnProps): {
         [name: string]: import('vue').Slot<any> | undefined;
     }>;
     merged: import('vue').ComputedRef<BreadcrumbItemOwnProps>;
-    crumbAs: import('vue').ComputedRef<"a" | "button" | "span">;
+    crumbAs: import('vue').ComputedRef<"a" | "span" | "button">;
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "disabled" | "endIcon" | "startIcon" | "as" | "current">, "aria-label" | "aria-labelledby">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "as" | "disabled" | "endIcon" | "startIcon" | "current">, "aria-label" | "aria-labelledby">>>;
     linkBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "aria-disabled": true | undefined;
         "aria-current": "page" | undefined;
         href: string | undefined;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Pick<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "disabled" | "endIcon" | "startIcon" | "as" | "current">, "aria-label" | "aria-labelledby">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Pick<Omit<BreadcrumbItemProps, "href" | "classes" | "customProps" | "as" | "disabled" | "endIcon" | "startIcon" | "current">, "aria-label" | "aria-labelledby">>>;
     iconSize: import('vue').ComputedRef<keyof IconSize>;
     endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         size: keyof IconSize;

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

@@ -1,9 +1,9 @@
 import { hasNamedSlot as e, isPropPresent as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import { useButton as r } from "./composables/useButton.js";
-import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeProps as u, normalizeProps as d, openBlock as f, renderSlot as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, useSlots as _, withCtx as v } from "vue";
+import { Fragment as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
 //#region src/Components/Button/Button.vue?vue&type=script&setup=true&lang.ts
-var y = /*@__PURE__*/ l({
+var S = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Button",
 	props: {
@@ -25,8 +25,8 @@ var y = /*@__PURE__*/ l({
 		text: {},
 		variant: {}
 	},
-	setup(l) {
-		let y = l, b = _(), { tag: x, merged: S, isMini: C, iconBind: w, rootBind: T, rootHref: E, rootType: D, endIconBind: O, endSlotBind: k, rootAriaBusy: A, rootDisabled: j, startIconBind: M, startSlotBind: N, loadingIconBind: P, rootAriaDisabled: F } = r(y, {
+	setup(d) {
+		let S = d, C = b(), { tag: w, merged: T, isMini: E, iconBind: D, rootBind: O, rootHref: k, rootType: A, endIconBind: j, contentBind: M, endSlotBind: N, rootAriaBusy: P, rootDisabled: F, startIconBind: I, startSlotBind: L, loadingIconBind: R, loadingWrapBind: z, rootAriaDisabled: B } = r(S, {
 			size: "md",
 			as: "button",
 			rounded: "md",
@@ -34,30 +34,29 @@ var y = /*@__PURE__*/ l({
 			variant: "solid",
 			density: "default"
 		});
-		return (r, l) => (f(), a(m(g(x)), u({ href: g(E) }, g(T), {
-			type: g(D),
-			disabled: g(j),
-			"aria-busy": g(A),
-			"aria-disabled": g(F)
+		return (r, d) => (h(), a(_(y(w)), p({ href: y(k) }, y(O), {
+			type: y(A),
+			disabled: y(F),
+			"aria-busy": y(P),
+			"aria-disabled": y(B)
 		}), {
-			default: v(() => [g(S).loading ? (f(), a(g(n), u({
-				key: 0,
+			default: x(() => [y(T).loading ? (h(), s("span", m(p({ key: 0 }, y(z))), [u(y(n), p({
 				icon: "loader",
-				size: g(S).size
-			}, g(P)), null, 16, ["size"])) : g(C) ? (f(), s(i, { key: 1 }, [g(e)(g(b), "default") ? p(r.$slots, "default", {}, void 0, void 0, 0) : g(S).icon ? (f(), a(g(n), u({ key: 1 }, g(w), {
-				icon: g(S).icon,
-				size: g(S).size
-			}), null, 16, ["icon", "size"])) : o("", !0)], 64)) : (f(), s(i, { key: 2 }, [
-				g(S).startIcon ? (f(), a(g(n), u({
+				size: y(T).size
+			}, y(R)), null, 16, ["size"])], 16)) : o("", !0), c("span", m(f(y(M))), [y(E) ? (h(), s(i, { key: 0 }, [y(e)(y(C), "default") ? g(r.$slots, "default", {}, void 0, void 0, 0) : y(T).icon ? (h(), a(y(n), p({ key: 1 }, y(D), {
+				icon: y(T).icon,
+				size: y(T).size
+			}), null, 16, ["icon", "size"])) : o("", !0)], 64)) : (h(), s(i, { key: 1 }, [
+				y(T).startIcon ? (h(), a(y(n), p({
 					key: 0,
-					size: g(S).size
-				}, g(M), { icon: g(S).startIcon }), null, 16, ["size", "icon"])) : g(e)(g(b), "start") ? (f(), s("div", d(u({ key: 1 }, g(N))), [p(r.$slots, "start")], 16)) : o("", !0),
-				g(t)(g(S).text) ? (f(), s(i, { key: 2 }, [c(h(g(S).text), 1)], 64)) : g(e)(g(b), "default") ? p(r.$slots, "default", {}, void 0, void 0, 3) : o("", !0),
-				g(S).endIcon ? (f(), a(g(n), u({
+					size: y(T).size
+				}, y(I), { icon: y(T).startIcon }), null, 16, ["size", "icon"])) : y(e)(y(C), "start") ? (h(), s("div", m(p({ key: 1 }, y(L))), [g(r.$slots, "start")], 16)) : o("", !0),
+				y(t)(y(T).text) ? (h(), s(i, { key: 2 }, [l(v(y(T).text), 1)], 64)) : y(e)(y(C), "default") ? g(r.$slots, "default", {}, void 0, void 0, 3) : o("", !0),
+				y(T).endIcon ? (h(), a(y(n), p({
 					key: 4,
-					size: g(S).size
-				}, g(O), { icon: g(S).endIcon }), null, 16, ["size", "icon"])) : g(e)(g(b), "end") ? (f(), s("div", d(u({ key: 5 }, g(k))), [p(r.$slots, "end")], 16)) : o("", !0)
-			], 64))]),
+					size: y(T).size
+				}, y(j), { icon: y(T).endIcon }), null, 16, ["size", "icon"])) : y(e)(y(C), "end") ? (h(), s("div", m(p({ key: 5 }, y(N))), [g(r.$slots, "end")], 16)) : o("", !0)
+			], 64))], 16)]),
 			_: 3
 		}, 16, [
 			"href",
@@ -69,4 +68,4 @@ var y = /*@__PURE__*/ l({
 	}
 });
 //#endregion
-export { y as default };
+export { S as default };

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

@@ -3,23 +3,25 @@ import { ButtonOwnProps, ButtonProps } from '../button.types';
 type ButtonLibDefaults = LibDefaultsShape<ButtonOwnProps, "as" | "size" | "color" | "density" | "rounded" | "variant">;
 type ButtonMerged = MergeLibDefaults<ButtonOwnProps, ButtonLibDefaults>;
 export declare function useButton(props: ButtonOwnProps, libDefaults: ButtonLibDefaults): {
-    tag: import('vue').ComputedRef<NonNullable<"a" | "button" | "span" | undefined>>;
+    tag: import('vue').ComputedRef<NonNullable<"a" | "span" | "button" | undefined>>;
     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<{
         "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">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonProps, "color" | "href" | "icon" | "size" | "classes" | "customProps" | "full" | "as" | "density" | "disabled" | "endIcon" | "loading" | "rounded" | "selected" | "startIcon" | "text" | "variant">>>;
     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, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
     endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     rootAriaBusy: import('vue').ComputedRef<true | undefined>;
     rootDisabled: import('vue').ComputedRef<boolean | undefined>;
     startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
     startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     loadingIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    loadingWrapBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
     rootAriaDisabled: import('vue').ComputedRef<true | undefined>;
 };
 export {};

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

@@ -67,59 +67,65 @@ function _(_, v) {
 	}), B = i(() => {
 		let e = m(d, w.value?.tokens?.rounded);
 		return s(e, C.value.rounded);
-	});
+	}), V = i(() => e(T.value?.icon, {}, p({
+		"shrink-0": !0,
+		[E.value.icon ?? ""]: !0
+	}))), H = 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: !0,
+			"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
+		})
+	})), U = i(() => e(T.value?.endIcon, {}, p({
+		"shrink-0": !0,
+		[E.value.endIcon ?? ""]: !0
+	}))), W = i(() => e(T.value?.end, {}, "inline-flex shrink-0 items-center")), G = i(() => e(T.value?.startIcon, {}, p({
+		"shrink-0": !0,
+		[E.value.startIcon ?? ""]: !0
+	}))), K = i(() => e(T.value?.start, {}, "inline-flex shrink-0 items-center")), q = i(() => e({}, {}, "pointer-events-none absolute inset-0 flex items-center justify-center"));
 	return {
 		tag: D,
 		merged: C,
 		isMini: A,
-		iconBind: i(() => e(T.value?.icon, {}, p({
-			"shrink-0": !0,
-			[E.value.icon ?? ""]: !0
-		}))),
-		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
-			})
-		})),
+		iconBind: V,
+		rootBind: H,
 		rootHref: F,
 		rootType: I,
-		endIconBind: i(() => e(T.value?.endIcon, {}, p({
-			"shrink-0": !0,
-			[E.value.endIcon ?? ""]: !0
+		endIconBind: U,
+		contentBind: i(() => e({}, {}, p({
+			contents: !0,
+			invisible: C.value.loading
 		}))),
-		endSlotBind: i(() => e(T.value?.end, {}, "inline-flex shrink-0 items-center")),
+		endSlotBind: W,
 		rootAriaBusy: N,
 		rootDisabled: M,
-		startIconBind: i(() => e(T.value?.startIcon, {}, p({
-			"shrink-0": !0,
-			[E.value.startIcon ?? ""]: !0
-		}))),
-		startSlotBind: i(() => e(T.value?.start, {}, "inline-flex shrink-0 items-center")),
+		startIconBind: G,
+		startSlotBind: K,
 		loadingIconBind: i(() => e(T.value?.loading, {}, p({
 			"shrink-0 animate-spin": !0,
 			[E.value.loading ?? ""]: !0
 		}))),
+		loadingWrapBind: q,
 		rootAriaDisabled: P
 	};
 }

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

@@ -11,6 +11,6 @@ export declare function useButtonGroup(props: ButtonGroupOwnProps, libDefaults:
         role: string;
         "data-slot": string;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonGroupProps, "color" | "orientation" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "density" | "separator">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ButtonGroupProps, "color" | "orientation" | "size" | "classes" | "customProps" | "full" | "density" | "rounded" | "variant" | "separator">>>;
 };
 export {};