@bridge-ui/vue 0.0.1-beta.7 → 0.0.2

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -2,17 +2,18 @@ import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp
 import n from "../List/List.js";
 import { useListbox as r } from "./composables/useListbox.js";
 import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
-import a from "../ListItem/ListItem.js";
-import o from "../ListSection/ListSection.js";
-import s from "../Menu/Menu.js";
-import ee from "../Progress/Progress.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as te, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ne, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
-import { cn as M, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
+import ee from "../ListItem/ListItem.js";
+import te from "../ListSection/ListSection.js";
+import a from "../Menu/Menu.js";
+import ne from "../Progress/Progress.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, provide as x, ref as S, renderList as C, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
+import { isNil as M } from "es-toolkit/compat";
+import { cn as N, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
 import { Check as oe } from "@lucide/vue";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var se = { key: 1 }, N = /* @__PURE__ */ h({
+var se = { key: 1 }, P = /* @__PURE__ */ m({
 	__name: "Listbox",
-	props: /* @__PURE__ */ _({
+	props: /* @__PURE__ */ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -45,6 +46,7 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		},
 		options: {},
 		placement: { default: "bottom-start" },
+		rounded: {},
 		showCheckmark: {
 			type: Boolean,
 			default: !0
@@ -57,107 +59,107 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ _([
+	emits: /* @__PURE__ */ g([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(h, { emit: _ }) {
-		let N = k(), P = _, F = O(h, "modelValue");
-		A(F, (e) => {
-			P("show-change", e);
+	setup(m, { emit: g }) {
+		let P = k(), F = g, I = O(m, "modelValue");
+		A(I, (e) => {
+			F("show-change", e);
 		});
-		let I = h, { merged: L, checkClass: R, scrollBind: z, messageBind: B, sizeClasses: V, mergedClasses: H, optionSelectedClass: U, optionHighlightedClass: W } = r(I, {
+		let L = m, { merged: R, checkClass: z, scrollBind: B, messageBind: V, sizeClasses: H, mergedClasses: U, optionSelectedClass: W, optionHighlightedClass: G } = r(L, {
 			size: "md",
 			color: "primary"
-		}), G = l(() => I.options ?? []), K = l(() => I.entries ? I.entries : re(G.value)), q = l(() => ie(K.value)), J = l(() => e(N, "default")), Y = l(() => !I.loading && !J.value && q.value.length === 0 && I.hideEmptyMessage !== !0), X = l(() => M(R.value, H.value.check)), Z = C([]);
+		}), ce = s(() => L.options ?? []), K = s(() => L.entries ? L.entries : re(ce.value)), q = s(() => ie(K.value)), J = s(() => e(P, "default")), Y = s(() => !L.loading && !J.value && q.value.length === 0 && L.hideEmptyMessage !== !0), X = s(() => N(z.value, U.value.check)), Z = S([]);
 		function Q(e) {
-			return I.isSelected?.(e) ?? !1;
-		}
-		function ce(e) {
-			return I.highlightedIndex === e;
+			return L.isSelected?.(e) ?? !1;
 		}
 		function le(e) {
+			return L.highlightedIndex === e;
+		}
+		function ue(e) {
 			e.preventDefault();
 		}
-		function ue(e, t) {
+		function de(e, t) {
 			let n = {
 				tabindex: -1,
-				onMousedown: le,
-				class: M(V.value?.option)
+				onMousedown: ue,
+				class: N(H.value?.option)
 			};
-			return Q(e.value) ? n.class = M(n.class, U.value, H.value.optionSelected) : ce(t) && (n.class = M(n.class, W.value, H.value.optionHighlighted)), {
+			return Q(e.value) ? n.class = N(n.class, W.value, U.value.optionSelected) : le(t) && (n.class = N(n.class, G.value, U.value.optionHighlighted)), {
 				interactive: n,
-				primary: { class: V.value?.primary },
-				secondary: { class: V.value?.secondary }
+				primary: { class: H.value?.primary },
+				secondary: { class: H.value?.secondary }
 			};
 		}
 		function $(e) {
-			e.disabled || P("select", e);
+			e.disabled || F("select", e);
 		}
-		function de(e) {
+		function fe(e) {
 			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
 				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function fe(e) {
+		function pe(e) {
 			return (J.value ? Z.value : q.value).findIndex((t) => String(t.value) === String(e));
 		}
 		A(Z, (e) => {
-			J.value && P("registered-options-change", e);
-		}, { deep: !0 }), S(i, l(() => ({
-			getOptionIndex: fe,
-			registerOption: de,
+			J.value && F("registered-options-change", e);
+		}, { deep: !0 }), x(i, s(() => ({
+			getOptionIndex: pe,
+			registerOption: fe,
 			onSelect: $,
-			listboxId: I.listboxId,
+			listboxId: L.listboxId,
 			isSelected: Q,
-			sizeClasses: V.value,
-			showCheckmark: I.showCheckmark,
+			sizeClasses: H.value,
+			showCheckmark: L.showCheckmark,
 			checkClass: X.value,
-			highlightedIndex: I.highlightedIndex,
-			optionSelectedClass: U.value,
-			optionHighlightedClass: W.value,
+			highlightedIndex: L.highlightedIndex,
+			optionSelectedClass: W.value,
+			optionHighlightedClass: G.value,
 			mergedClasses: {
-				optionSelected: H.value.optionSelected,
-				optionHighlighted: H.value.optionHighlighted
+				optionSelected: U.value.optionSelected,
+				optionHighlighted: U.value.optionHighlighted
 			}
 		})));
-		let pe = l(() => ae(K.value, Q));
-		return (r, i) => (x(), u(D(s), {
-			modelValue: F.value,
-			"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
-			"anchor-el": h.anchorEl,
-			placement: h.placement,
+		let me = s(() => ae(K.value, Q));
+		return (r, i) => (b(), c(D(a), _({
+			modelValue: I.value,
+			"onUpdate:modelValue": i[0] ||= (e) => I.value = e,
+			"anchor-el": m.anchorEl,
+			placement: m.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": h.disableAutoFocus,
-			"custom-props": { content: D(L).customProps?.content }
-		}, {
+			"disable-auto-focus": m.disableAutoFocus,
+			"custom-props": { content: D(R).customProps?.content }
+		}, D(M)(m.rounded) ? {} : { rounded: m.rounded }), {
 			default: j(() => [
-				D(e)(D(N), "beforeOptions") ? (x(), u(T(D(t)(D(N), "beforeOptions")), { key: 0 })) : d("", !0),
-				h.loading ? (x(), f(c, { key: 1 }, [m(D(ee), {
+				D(e)(D(P), "beforeOptions") ? (b(), c(T(D(t)(D(P), "beforeOptions")), { key: 0 })) : l("", !0),
+				m.loading ? (b(), u(o, { key: 1 }, [p(D(ne), {
 					size: "xs",
 					"aria-hidden": "",
 					class: "shrink-0",
-					color: D(L).color,
-					classes: { bar: D(H).loading },
-					"custom-props": { bar: D(L).customProps?.loading }
+					color: D(R).color,
+					classes: { bar: D(U).loading },
+					"custom-props": { bar: D(R).customProps?.loading }
 				}, null, 8, [
 					"color",
 					"classes",
 					"custom-props"
-				]), p("div", b(g(D(B))), [D(e)(D(N), "loading") ? (x(), u(T(D(t)(D(N), "loading")), { key: 0 })) : (x(), f("span", se, E(h.loadingMessage), 1))], 16)], 64)) : (x(), f("div", b(v({ key: 2 }, D(z))), [m(D(n), {
+				]), d("div", y(h(D(V))), [D(e)(D(P), "loading") ? (b(), c(T(D(t)(D(P), "loading")), { key: 0 })) : (b(), u("span", se, E(m.loadingMessage), 1))], 16)], 64)) : (b(), u("div", y(_({ key: 2 }, D(B))), [p(D(n), {
 					dense: "",
 					class: "p-0",
 					role: "listbox",
-					id: h.listboxId,
-					"aria-labelledby": h.labelledBy,
-					"aria-multiselectable": h.multiple || void 0
+					id: m.listboxId,
+					"aria-labelledby": m.labelledBy,
+					"aria-multiselectable": m.multiple || void 0
 				}, {
-					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, ne(pe.value, (t) => (x(), f(c, { key: t.key }, [t.kind === "section" ? (x(), u(D(o), {
+					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (b(!0), u(o, { key: 1 }, C(me.value, (t) => (b(), u(o, { key: t.key }, [t.kind === "section" ? (b(), c(D(te), {
 						key: 0,
 						title: t.title,
 						sticky: t.sticky
-					}, null, 8, ["title", "sticky"])) : (x(), u(D(a), {
+					}, null, 8, ["title", "sticky"])) : (b(), c(D(ee), {
 						key: 1,
 						interactive: "",
 						role: "option",
@@ -166,19 +168,19 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 						disabled: t.option.disabled,
 						secondary: t.option.description,
 						onClick: (e) => $(t.option),
-						id: `${h.listboxId}-option-${t.index}`,
-						"custom-props": ue(t.option, t.index),
-						primary: D(e)(D(N), "option") ? void 0 : t.option.label
-					}, te({ _: 2 }, [D(e)(D(N), "option") ? {
+						id: `${m.listboxId}-option-${t.index}`,
+						"custom-props": de(t.option, t.index),
+						primary: D(e)(D(P), "option") ? void 0 : t.option.label
+					}, f({ _: 2 }, [D(e)(D(P), "option") ? {
 						name: "default",
 						fn: j(() => [w(r.$slots, "option", {
 							option: t.option,
 							selected: t.selected
 						})]),
 						key: "0"
-					} : void 0, h.showCheckmark && t.selected ? {
+					} : void 0, m.showCheckmark && t.selected ? {
 						name: "end",
-						fn: j(() => [m(D(oe), { class: y(X.value) }, null, 8, ["class"])]),
+						fn: j(() => [p(D(oe), { class: v(X.value) }, null, 8, ["class"])]),
 						key: "1"
 					} : void 0]), 1032, [
 						"aria-selected",
@@ -195,11 +197,11 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 					"aria-labelledby",
 					"aria-multiselectable"
 				])], 16)),
-				Y.value && !D(e)(D(N), "empty") ? (x(), f("div", b(v({ key: 3 }, D(B))), E(h.emptyMessage), 17)) : Y.value && D(e)(D(N), "empty") ? (x(), u(T(D(t)(D(N), "empty")), { key: 4 })) : d("", !0),
-				D(e)(D(N), "afterOptions") ? (x(), u(T(D(t)(D(N), "afterOptions")), { key: 5 })) : d("", !0)
+				Y.value && !D(e)(D(P), "empty") ? (b(), u("div", y(_({ key: 3 }, D(V))), E(m.emptyMessage), 17)) : Y.value && D(e)(D(P), "empty") ? (b(), c(T(D(t)(D(P), "empty")), { key: 4 })) : l("", !0),
+				D(e)(D(P), "afterOptions") ? (b(), c(T(D(t)(D(P), "afterOptions")), { key: 5 })) : l("", !0)
 			]),
 			_: 3
-		}, 8, [
+		}, 16, [
 			"modelValue",
 			"anchor-el",
 			"placement",
@@ -209,4 +211,4 @@ var se = { key: 1 }, N = /* @__PURE__ */ h({
 	}
 });
 //#endregion
-export { N as default };
+export { P as default };

package/dist/Components/Listbox/listbox.types.d.ts

@@ -1,7 +1,8 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
+export interface ListboxRoundedOverrides {}
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
@@ -165,6 +166,14 @@ export interface ListboxOwnProps {
      * @default "bottom-start"
      */
     placement?: PositionPlacement;
+    /**
+     * Roundedness of the floating panel (`Menu`). When omitted, `Menu` defaults
+     * apply (including `Menu.defaultProps.rounded`).
+     *
+     * `Select` always forwards its own `rounded` here so the dropdown matches the
+     * field, independent of `Menu.defaultProps`.
+     */
+    rounded?: MergeProps<MenuRounded, ListboxRoundedOverrides>;
     /**
      * Shows a check icon on selected options.
      *
@@ -182,25 +191,25 @@ export interface ListboxSlots {
     /**
      * Content below the list.
      */
-    afterOptions?: Slot;
+    afterOptions?: Slot<undefined>;
     /**
      * Content above the list.
      */
-    beforeOptions?: Slot;
+    beforeOptions?: Slot<undefined>;
     /**
      * Composed list content (`ListSection` / `ListItem`). When set, replaces the
      * mapped `options` / `entries` render inside the list.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom empty-state content.
      */
-    empty?: Slot;
+    empty?: Slot<undefined>;
     /**
      * Custom loading content. Replaces the default `loadingMessage` when set.
      * The progress bar still renders above this content.
      */
-    loading?: Slot;
+    loading?: Slot<undefined>;
     /**
      * Custom option item content.
      */

package/dist/Components/Menu/menu.types.d.ts

@@ -54,13 +54,13 @@ export interface MenuEmits {
     close: [];
 }
 /**
- * Anchored menu panel (MUI `Menu`-like). Visibility is controlled with `v-model`
- * (not listed here — `defineModel` handles it). Anchor with `anchorEl` (MUI style)
+ * Anchored menu panel. Visibility is controlled with `v-model`
+ * (not listed here — `defineModel` handles it). Anchor with `anchorEl`
  * or put the opener in the `trigger` slot; menu items go in the default slot.
  */
 export interface MenuOwnProps {
     /**
-     * Element that anchors the menu panel (MUI `anchorEl`). When set, it is used
+     * Element that anchors the menu panel. When set, it is used
      * for positioning and click-away instead of the `trigger` slot wrapper.
      * Prefer this when the opener lives outside the `Menu` or is controlled manually.
      * Not merged into Bridge defaults (DOM nodes must not be deep-merged).

package/dist/Components/Modal/composables/useModal.js

@@ -65,7 +65,6 @@ function x(x, ue, S = {}) {
 		})
 	})), be = n(() => e(z.value?.wrapper, { onClick: Q }, l({
 		"flex min-h-full w-full transform p-4": !0,
-		"items-end justify-center": !0,
 		[fe.value ?? ""]: !0,
 		[s(B.value, "wrapper") ?? ""]: !0
 	}))), xe = n(() => e(z.value?.panel, {

package/dist/Components/Modal/modal.types.d.ts

@@ -59,8 +59,9 @@ export interface ModalEmits {
  */
 export interface ModalOwnProps {
     /**
-     * Panel position from the `sm` breakpoint up (`{row}-{column}` grid).
-     * Mobile always uses bottom sheet (`bottom-center`).
+     * Panel position on all breakpoints (`{row}-{column}` grid).
+     * Use `useBreakpoint` if you need a different align per viewport
+     * (e.g. bottom sheet on mobile, centered on desktop).
      *
      * @default "middle-center"
      */

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

@@ -6,19 +6,19 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clear: () => any;
     search: (query: string) => any;
     select: (option: import('@bridge-ui/core').ListboxOption) => any;
     "update:modelValue": (...args: unknown[]) => any;
-    clear: () => any;
     change: (value: import('@bridge-ui/core').SelectModel) => any;
     close: () => any;
     open: () => any;
     deselect: (option: import('@bridge-ui/core').ListboxOption) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClear?: (() => any) | undefined;
     onSearch?: ((query: string) => any) | undefined;
     onSelect?: ((option: import('@bridge-ui/core').ListboxOption) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
-    onClear?: (() => any) | undefined;
     onChange?: ((value: import('@bridge-ui/core').SelectModel) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;

package/dist/Components/Select/composables/useSelect.d.ts

@@ -732,8 +732,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         entries: ListboxEntry[];
         options: import('@bridge-ui/core').ListboxOption[];
         labelledBy: string;
-        highlightedIndex: number;
+        rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
         invalidated: boolean;
+        highlightedIndex: number;
         color: "dark" | "error" | "info" | "primary" | "secondary" | "success" | "warning";
         size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
         classes?: import('../../Listbox').ListboxClasses;

package/dist/Components/Select/composables/useSelect.js

@@ -319,8 +319,9 @@ function m(m, h, g, _, we) {
 		entries: Pe.value,
 		options: W.value,
 		labelledBy: K.controlId.value,
-		highlightedIndex: S.value,
-		invalidated: K.invalidated.value
+		rounded: K.merged.value.rounded,
+		invalidated: K.invalidated.value,
+		highlightedIndex: S.value
 	}));
 	function tt(e) {
 		let t = I.value;

package/dist/Components/Select/select.types.d.ts

@@ -199,11 +199,11 @@ export interface SelectSlots extends FormFieldSlots {
     /**
      * Content below the trigger, above the option list.
      */
-    afterOptions?: Slot;
+    afterOptions?: Slot<undefined>;
     /**
      * Content above the option list.
      */
-    beforeOptions?: Slot;
+    beforeOptions?: Slot<undefined>;
     /**
      * Custom chip content (multiple mode).
      */
@@ -215,15 +215,15 @@ export interface SelectSlots extends FormFieldSlots {
      * When set (and not using declarative `SelectOption` children), replaces
      * mapped `options` inside the listbox.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom empty-state content.
      */
-    empty?: Slot;
+    empty?: Slot<undefined>;
     /**
      * Custom loading content.
      */
-    loading?: Slot;
+    loading?: Slot<undefined>;
     /**
      * Custom option item content when rendering from the `options` prop.
      */

package/dist/Components/Snackbar/composables/useSnackbar.js

@@ -108,7 +108,7 @@ function h(h, _e, g = {}) {
 			return;
 		}
 		S.value = !1, Q(n);
-	}, { immediate: !0 }), o([G, W], ([e]) => {
+	}, { immediate: !0 }), o([W, G], ([e]) => {
 		if (!e) {
 			T.value = !1, b.value = 1;
 			return;

package/dist/Components/Snackbar/snackbar.types.d.ts

@@ -185,30 +185,30 @@ export interface SnackbarSlots {
     /**
      * Inline actions below the description.
      */
-    actions?: Slot;
+    actions?: Slot<undefined>;
     /**
      * Content below the title/description.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom description markup.
      */
-    description?: Slot;
+    description?: Slot<undefined>;
     /**
      * Custom icon markup.
      */
-    icon?: Slot;
+    icon?: Slot<undefined>;
     /**
      * Vertical action column on the right edge (WireUI `rightButtons` layout).
      */
-    right?: Slot;
+    right?: Slot<undefined>;
     /**
      * Custom title markup.
      */
-    title?: Slot;
+    title?: Slot<undefined>;
     /**
      * Content before the close button (e.g. compact accept action with `padding="small"`).
      */
-    trailing?: Slot;
+    trailing?: Slot<undefined>;
 }
 export type SnackbarProps = MergeHtmlProps<SnackbarOwnProps, HTMLAttributes>;

package/dist/Components/Spinner/composables/useSpinner.js

@@ -32,17 +32,17 @@ function v(o, v) {
 	}), C = n({
 		entry: S,
 		props: () => b.value.componentProps
-	}), w = r(() => x.value.customProps), T = r(() => a(d(p, S.value?.customProps?.color), x.value.color)), E = r(() => a(d(m, S.value?.customProps?.size), x.value.size)), D = r(() => a(d(h, S.value?.customProps?.variant), x.value.variant)), O = r(() => x.value.thickness ?? s), k = r(() => x.value.variant === "determinate"), A = r(() => x.value.variant === "indeterminate"), j = r(() => !!x.value.enableTrack), M = r(() => !!x.value.disableShrink), N = r(() => _(x.value.value)), P = r(() => u(O.value)), F = c / 2, I = r(() => e(w.value?.root, b.value.inheritedAttrs, {
+	}), w = r(() => x.value.customProps), T = r(() => a(d(p, S.value?.customProps?.color), x.value.color)), E = r(() => a(d(m, S.value?.customProps?.size), x.value.size)), D = r(() => a(d(h, S.value?.customProps?.variant), x.value.variant)), O = r(() => x.value.thickness ?? s), k = r(() => u(O.value)), A = c / 2, j = r(() => _(x.value.value)), M = r(() => !!x.value.enableTrack), N = r(() => !!x.value.disableShrink), P = r(() => x.value.variant === "determinate"), F = r(() => x.value.variant === "indeterminate"), I = r(() => e(w.value?.root, b.value.inheritedAttrs, {
 		role: "progressbar",
-		...k.value ? {
+		...P.value ? {
 			"aria-valuemin": 0,
 			"aria-valuemax": 100,
-			"aria-valuenow": N.value
+			"aria-valuenow": j.value
 		} : {},
 		class: l({
 			"inline-block": !0,
 			[E.value ?? ""]: !0,
-			[D.value ?? ""]: A.value,
+			[D.value ?? ""]: F.value,
 			[C.value.root ?? ""]: !0
 		})
 	}));
@@ -53,31 +53,31 @@ function v(o, v) {
 			[C.value.svg ?? ""]: !0
 		}))),
 		rootBind: I,
-		trackBind: r(() => j.value ? e(w.value?.track, {
-			cx: F,
-			cy: F,
+		trackBind: r(() => M.value ? e(w.value?.track, {
+			cx: A,
+			cy: A,
 			fill: "none",
-			r: P.value.radius,
+			r: k.value.radius,
 			"stroke-width": O.value
 		}, l({
 			[T.value?.track ?? ""]: !0,
 			[C.value.track ?? ""]: !0
 		})) : null),
 		circleBind: r(() => {
-			let { radius: t, circumference: n } = P.value, r = k.value ? {
+			let { radius: t, circumference: n } = k.value, r = P.value ? {
 				transformOrigin: "50% 50%",
 				transform: "rotate(-90deg)",
 				strokeDasharray: n,
 				transition: "stroke-dashoffset 200ms linear",
-				strokeDashoffset: (100 - N.value) / 100 * n
-			} : {}, i = A.value ? {
+				strokeDashoffset: (100 - j.value) / 100 * n
+			} : {}, i = F.value ? {
 				strokeDashoffset: 0,
-				strokeDasharray: M.value ? `${n * .8}px, ${n}px` : "80px, 200px"
+				strokeDasharray: N.value ? `${n * .8}px, ${n}px` : "80px, 200px"
 			} : {};
 			return e(w.value?.circle, {
 				r: t,
-				cx: F,
-				cy: F,
+				cx: A,
+				cy: A,
 				fill: "none",
 				"stroke-width": O.value,
 				style: {
@@ -86,11 +86,11 @@ function v(o, v) {
 				}
 			}, l({
 				[T.value?.circle ?? ""]: !0,
-				"animate-bridge-spinner-dash": A.value && !M.value,
+				"animate-bridge-spinner-dash": F.value && !N.value,
 				[C.value.circle ?? ""]: !0
 			}));
 		}),
-		enableTrack: j
+		enableTrack: M
 	};
 }
 //#endregion

package/dist/Components/Tab/Tab.js

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

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

@@ -0,0 +1,11 @@
+import { TabOwnProps, TabSlots } from './tab.types';
+type __VLS_Slots = TabSlots;
+declare const __VLS_base: import('vue').DefineComponent<TabOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<TabOwnProps> & 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/Tab/Tab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { useTab as r } from "./composables/useTab.js";
+import { createBlock as i, createCommentVNode as a, createElementBlock as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeProps as u, openBlock as d, resolveDynamicComponent as f, unref as p, useSlots as m } from "vue";
+//#region src/Components/Tab/Tab.vue?vue&type=script&setup=true&lang.ts
+var h = /* @__PURE__ */ s({
+	inheritAttrs: !1,
+	__name: "Tab",
+	props: {
+		classes: {},
+		customProps: {},
+		disabled: { type: Boolean },
+		endIcon: { type: [Function, Object] },
+		startIcon: { type: [Function, Object] },
+		value: {}
+	},
+	setup(s) {
+		let h = m(), { merged: g, iconSize: _, rootBind: v, endIconBind: y, endSlotBind: b, startIconBind: x, startSlotBind: S } = r(s);
+		return (r, s) => (d(), o("button", u(c(p(v))), [
+			p(g).startIcon ? (d(), i(p(n), l({
+				key: 0,
+				size: p(_)
+			}, p(x), { icon: p(g).startIcon }), null, 16, ["size", "icon"])) : p(e)(p(h), "start") ? (d(), o("div", u(l({ key: 1 }, p(S))), [(d(), i(f(p(t)(p(h), "start"))))], 16)) : a("", !0),
+			(d(), i(f(p(t)(p(h), "default")))),
+			p(g).endIcon ? (d(), i(p(n), l({
+				key: 2,
+				size: p(_)
+			}, p(y), { icon: p(g).endIcon }), null, 16, ["size", "icon"])) : p(e)(p(h), "end") ? (d(), o("div", u(l({ key: 3 }, p(b))), [(d(), i(f(p(t)(p(h), "end"))))], 16)) : a("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { h as default };

package/dist/Components/Tab/composables/useTab.d.ts

@@ -0,0 +1,23 @@
+import { IconSize } from '@bridge-ui/core';
+import { TabOwnProps, TabProps } from '../tab.types';
+export declare function useTab(props: TabOwnProps): {
+    merged: import('vue').ComputedRef<TabOwnProps>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        role: string;
+        type: string;
+        onClick: (event: PointerEvent) => void;
+        disabled: boolean;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-selected": boolean;
+        tabindex: number;
+        id: string;
+        "aria-controls": string;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, Omit<TabProps, "value" | "classes" | "customProps" | "disabled" | "endIcon" | "startIcon">>>;
+    selected: import('vue').ComputedRef<boolean>;
+    endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};