@bridge-ui/vue 0.0.2 → 0.0.3

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,17 @@
-import { resolveFieldAdornmentIconSize as e } from "../../Utils/index.js";
-import t from "../Icon/Icon.js";
-import n from "../FormField/FormField.js";
-import { usePasswordField as r } from "./composables/usePasswordField.js";
-import { computed as i, createBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, mergeProps as u, normalizeClass as d, openBlock as f, unref as p, useModel as m, vModelDynamic as h, withCtx as g, withDirectives as _ } from "vue";
-import { cn as v } from "@bridge-ui/core";
-import { Eye as y, EyeOff as b } from "@lucide/vue";
+import { mergePartBind as e, resolveFieldAdornmentIconSize as t } from "../../Utils/index.js";
+import n from "../Icon/Icon.js";
+import r from "../FormField/FormField.js";
+import { usePasswordField as i } from "./composables/usePasswordField.js";
+import { computed as a, createBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, guardReactiveProps as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, unref as h, useModel as g, vModelDynamic as _, withCtx as v, withDirectives as y } from "vue";
+import { cn as b } from "@bridge-ui/core";
+import { Eye as x, EyeOff as S } from "@lucide/vue";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
-var x = ["disabled", "aria-label"], S = /* @__PURE__ */ c({
+var C = /* @__PURE__ */ l({
 	inheritAttrs: !1,
 	__name: "PasswordField",
-	props: /* @__PURE__ */ l({
+	props: /* @__PURE__ */ d({
 		classes: {},
+		customProps: {},
 		visible: {
 			type: [null, Boolean],
 			default: null
@@ -18,7 +19,6 @@ var x = ["disabled", "aria-label"], S = /* @__PURE__ */ c({
 		color: {},
 		controlId: {},
 		corner: {},
-		customProps: {},
 		description: {},
 		disabled: { type: Boolean },
 		end: {},
@@ -41,27 +41,26 @@ var x = ["disabled", "aria-label"], S = /* @__PURE__ */ c({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ l(["visibility-change"], ["update:modelValue"]),
-	setup(c, { emit: l }) {
-		let S = l, C = m(c, "modelValue"), w = c, { formField: T, inputBind: E, isVisible: D, mergedClasses: O, toggleVisibility: k } = r(w, { onVisibilityChange: (e) => S("visibility-change", e) }), A = i(() => e(w.size));
-		return (e, r) => (f(), a(p(n), { field: p(T) }, {
-			end: g(() => [o("button", {
-				type: "button",
-				disabled: w.disabled,
-				onClick: r[1] ||= (...e) => p(k) && p(k)(...e),
-				"aria-label": p(D) ? "Hide password" : "Show password",
-				class: d(p(v)({
-					"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
-					[p(O).toggle ?? ""]: !0
-				}))
-			}, [s(p(t), {
-				size: A.value,
-				icon: p(D) ? p(b) : p(y)
-			}, null, 8, ["size", "icon"])], 10, x)]),
-			default: g(() => [_(o("input", u({ "onUpdate:modelValue": r[0] ||= (e) => C.value = e }, p(E)), null, 16), [[h, C.value]])]),
+	emits: /* @__PURE__ */ d(["visibility-change"], ["update:modelValue"]),
+	setup(l, { emit: d }) {
+		let C = d, w = g(l, "modelValue"), T = l, { formField: E, inputBind: D, isVisible: O, mergedClasses: k, toggleVisibility: A } = i(T, { onVisibilityChange: (e) => C("visibility-change", e) }), j = a(() => e(T.customProps?.toggle, {
+			type: "button",
+			disabled: T.disabled,
+			onClick: A,
+			"aria-label": O.value ? "Hide password" : "Show password"
+		}, b({
+			"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
+			[k.value.toggle ?? ""]: !0
+		})));
+		return (e, i) => (m(), o(h(r), { field: h(E) }, {
+			end: v(() => [s("button", p(u(j.value)), [c(h(n), f({
+				icon: h(O) ? h(S) : h(x),
+				size: h(t)(T.size)
+			}, T.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
+			default: v(() => [y(s("input", f({ "onUpdate:modelValue": i[0] ||= (e) => w.value = e }, h(D)), null, 16), [[_, w.value]])]),
 			_: 1
 		}, 8, ["field"]));
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };

package/dist/Components/PasswordField/composables/usePasswordField.d.ts

@@ -433,10 +433,9 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        labelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -446,12 +445,12 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         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, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        requiredBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | 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, {}>>;
+        fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
@@ -682,7 +681,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
         type: string;
     }>>;
     isVisible: import('vue').ComputedRef<boolean>;

package/dist/Components/PasswordField/passwordField.types.d.ts

@@ -1,13 +1,27 @@
-import { InputHTMLAttributes } from 'vue';
+import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue';
 import { MergeHtmlProps } from '@bridge-ui/core';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
 export interface PasswordFieldClasses extends FormFieldClasses {
     /**
      * The classes to apply to the visibility toggle button.
      */
     toggle?: string;
 }
-export interface PasswordFieldCustomProps extends FormFieldCustomProps {}
+export interface PasswordFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the visibility toggle button.
+     *
+     * @default undefined
+     */
+    toggle?: ButtonHTMLAttributes;
+    /**
+     * Props forwarded to the visibility toggle `Icon` (`icon` is set by the field).
+     *
+     * @default undefined
+     */
+    toggleIcon?: Partial<Omit<IconProps, "icon">>;
+}
 export interface PasswordFieldEmits {
     /**
      * Emitted when password visibility changes.
@@ -20,6 +34,12 @@ export interface PasswordFieldOwnProps extends Omit<FormFieldOwnProps, "type" |
      * The classes to apply to the password field.
      */
     classes?: PasswordFieldClasses;
+    /**
+     * Extra props for FormField parts and the visibility toggle.
+     *
+     * @default undefined
+     */
+    customProps?: PasswordFieldCustomProps;
     /**
      * Whether the password is visible. Omit for uncontrolled mode.
      */

package/dist/Components/Progress/composables/useProgress.js

@@ -2,7 +2,7 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { computed as r, useAttrs as i } from "vue";
 import { get as a, isNil as o } from "es-toolkit/compat";
 import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
-import { colorProps as u, roundedProps as d, sizeProps as f, variantProps as p } from "@bridge-ui/core/Components/Progress";
+import { colorProps as u, roundedProps as d, sizeProps as f, variantProps as p } from "@bridge-ui/core/Tokens/Progress";
 //#region src/Components/Progress/composables/useProgress.ts
 var m = [
 	"size",
@@ -31,7 +31,7 @@ function g(o, g) {
 	}), x = n({
 		entry: b,
 		props: () => v.value.componentProps
-	}), S = r(() => y.value.customProps), C = r(() => a(c(u, b.value?.customProps?.color), y.value.color)), w = r(() => a(c(f, b.value?.customProps?.size), y.value.size)), T = r(() => a(c(d, b.value?.customProps?.rounded), y.value.rounded)), E = r(() => a(c(p, b.value?.customProps?.variant), y.value.variant)), D = r(() => y.value.variant === "buffer"), O = r(() => y.value.variant === "determinate" || y.value.variant === "buffer"), k = r(() => y.value.variant === "indeterminate" || y.value.variant === "query"), A = r(() => h(y.value.value)), j = r(() => h(y.value.valueBuffer)), M = r(() => e(S.value?.root, v.value.inheritedAttrs, {
+	}), S = r(() => y.value.customProps), C = r(() => a(c(u, b.value?.tokens?.color), y.value.color)), w = r(() => a(c(f, b.value?.tokens?.size), y.value.size)), T = r(() => a(c(d, b.value?.tokens?.rounded), y.value.rounded)), E = r(() => a(c(p, b.value?.tokens?.variant), y.value.variant)), D = r(() => y.value.variant === "buffer"), O = r(() => y.value.variant === "determinate" || y.value.variant === "buffer"), k = r(() => y.value.variant === "indeterminate" || y.value.variant === "query"), A = r(() => h(y.value.value)), j = r(() => h(y.value.valueBuffer)), M = r(() => e(S.value?.root, v.value.inheritedAttrs, {
 		role: "progressbar",
 		...O.value ? {
 			"aria-valuemin": 0,

package/dist/Components/Radio/Radio.vue_vue_type_script_setup_true_lang.js

@@ -22,7 +22,6 @@ var g = ["for"], _ = ["checked"], v = /* @__PURE__ */ a({
 		endLabel: {},
 		error: { type: Boolean },
 		errorMessage: {},
-		mainLabel: {},
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		startLabel: {},

package/dist/Components/Radio/composables/useRadio.d.ts

@@ -240,7 +240,7 @@ export declare function useRadio(props: MaybeRefOrGetter<RadioOwnProps>, libDefa
             withoutErrorMessage: NonNullable<boolean | undefined>;
         }>;
         rowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<Omit<import('../../FormControl').FormControlOwnProps, "field">, "size" | "classes" | "customProps" | "error" | "disabled" | "controlId" | "description" | "endLabel" | "errorMessage" | "mainLabel" | "readonly" | "required" | "startLabel" | "withoutErrorMessage">>>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<Omit<import('../../FormControl').FormControlOwnProps, "field">, "size" | "classes" | "customProps" | "error" | "disabled" | "required" | "controlId" | "description" | "endLabel" | "errorMessage" | "readonly" | "startLabel" | "withoutErrorMessage">>>>;
         controlId: import('vue').ComputedRef<string>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -253,15 +253,10 @@ export declare function useRadio(props: MaybeRefOrGetter<RadioOwnProps>, libDefa
             "aria-invalid": true | undefined;
         }>;
         invalidated: import('vue').ComputedRef<boolean>;
-        endLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            for: string;
-        }>>;
-        mainLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            for: string;
-        }>>;
-        startLabelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            for: string;
-        }>>;
+        fieldLabelProps: import('vue').ComputedRef<{
+            endLabel: import('../../Label').LabelProps;
+            startLabel: import('../../Label').LabelProps;
+        }>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             id: string;
         }>>;

package/dist/Components/Radio/composables/useRadio.js

@@ -3,7 +3,7 @@ import { useFormControl as r } from "../../FormControl/composables/useFormContro
 import { computed as i, toValue as a, useAttrs as o } from "vue";
 import { get as s, omit as c } from "es-toolkit/compat";
 import { cn as l, mergeBridgeUILayeredClasses as u, splitComponentProps as d } from "@bridge-ui/core";
-import { colorProps as f, invalidatedProps as p, roundedProps as m, sizeProps as h } from "@bridge-ui/core/Components/Radio";
+import { colorProps as f, invalidatedProps as p, roundedProps as m, sizeProps as h } from "@bridge-ui/core/Tokens/Radio";
 //#region src/Components/Radio/composables/useRadio.ts
 var g = [
 	"name",
@@ -35,7 +35,7 @@ function _(_, v, y) {
 	}), T = i(() => C.value.customProps), E = n({
 		entry: w,
 		props: () => S.value.componentProps
-	}), D = i(() => a(y) === C.value.value), O = i(() => s(u(f, w.value?.customProps?.color), C.value.color ?? "primary")), k = i(() => u(p, w.value?.customProps?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => s(u(h, w.value?.customProps?.size), C.value.size ?? "sm")), M = i(() => s(u(m, w.value?.customProps?.rounded), C.value.rounded ?? "full")), N = i(() => e({
+	}), D = i(() => a(y) === C.value.value), O = i(() => s(u(f, w.value?.tokens?.color), C.value.color ?? "primary")), k = i(() => u(p, w.value?.tokens?.invalidated)), A = i(() => x.invalidated.value ? k.value : O.value), j = i(() => s(u(h, w.value?.tokens?.size), C.value.size ?? "sm")), M = i(() => s(u(m, w.value?.tokens?.rounded), C.value.rounded ?? "full")), N = i(() => e({
 		...T.value?.input,
 		...x.controlBind.value,
 		type: "radio",

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -1,11 +1,12 @@
 import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
+import { mergeNestedComponentProps as n } from "../../Utils/index.js";
 import ee from "../Icon/Icon.js";
-import n from "../Chip/Chip.js";
-import r from "../FormField/FormField.js";
-import i from "../Listbox/Listbox.js";
-import { useSelect as a } from "./composables/useSelect.js";
-import { SELECT_OPTION_KEY as o } from "./selectInjectionKey.js";
-import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useModel as k, useTemplateRef as A, withCtx as j, withKeys as M, withModifiers as N } from "vue";
+import r from "../Chip/Chip.js";
+import i from "../FormField/FormField.js";
+import a from "../Listbox/Listbox.js";
+import { useSelect as o } from "./composables/useSelect.js";
+import { SELECT_OPTION_KEY as s } from "./selectInjectionKey.js";
+import { Fragment as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as te, useTemplateRef as A, withCtx as j, withKeys as M, withModifiers as N } from "vue";
 import { X as P } from "@lucide/vue";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
 var F = {
@@ -18,10 +19,10 @@ var F = {
 	key: 0,
 	hidden: "",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ h({
+}, R = /* @__PURE__ */ g({
 	inheritAttrs: !1,
 	__name: "Select",
-	props: /* @__PURE__ */ v({
+	props: /* @__PURE__ */ y({
 		asyncData: {},
 		clearable: {
 			type: Boolean,
@@ -76,7 +77,7 @@ var F = {
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /* @__PURE__ */ y([
 		"change",
 		"clear",
 		"close",
@@ -86,9 +87,9 @@ var F = {
 		"select",
 		"update:modelValue"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let R = k(h, "modelValue"), z = h, B = v, V = A("trigger"), H = C([]);
-		S(o, {
+	setup(g, { emit: y }) {
+		let R = te(g, "modelValue"), z = g, B = y, V = A("trigger"), H = w([]);
+		C(s, {
 			unregister(e) {
 				H.value = H.value.filter((t) => String(t.value) !== String(e));
 			},
@@ -96,76 +97,76 @@ var F = {
 				H.value.some((t) => String(t.value) === String(e.value)) || (H.value = [...H.value, e]);
 			}
 		});
-		let { open: U, slots: W, hasValue: G, multiple: K, formField: q, clearable: J, clearBind: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: te, containerRef: ne, listboxProps: re, clearIconSize: ie, mergedClasses: ae, selectedOptions: oe, hasComposedList: $, handleRegisteredOptionsChange: se } = a(z, R, V, B, H);
-		return (a, o) => (x(), u(s, null, [
-			m(O(r), { field: O(q) }, {
-				default: j(() => [O(K) ? (x(), u("div", F, [(x(!0), u(s, null, w(O(oe), (e) => (x(), c(O(n), {
+		let { open: U, slots: W, hasValue: G, multiple: K, formField: q, clearable: J, clearBind: Y, clearValue: X, removeChip: Z, triggerBind: Q, selectOption: ne, containerRef: re, listboxProps: ie, clearIconSize: ae, mergedClasses: oe, selectedOptions: se, hasComposedList: $, handleRegisteredOptionsChange: ce } = o(z, R, V, B, H);
+		return (o, s) => (S(), d(c, null, [
+			h(k(i), { field: k(q) }, {
+				default: j(() => [k(K) ? (S(), d("div", F, [(S(!0), d(c, null, T(k(se), (e) => (S(), l(k(r), b({
 					dismissible: "",
 					key: String(e.value),
-					size: O(q).merged.value.size,
-					"custom-props": { clear: O(Y) },
-					disabled: O(q).isDisabled.value,
+					size: k(q).merged.value.size,
+					disabled: k(q).isDisabled.value,
 					"clear-label": `Remove ${e.label}`,
-					classes: { root: O(ae).chip },
-					onDismiss: (t) => O(Z)(e, t)
-				}, {
-					default: j(() => [T(a.$slots, "chip", { option: e }, () => [p(D(e.label), 1)])]),
+					onDismiss: (t) => k(Z)(e, t)
+				}, { ref_for: !0 }, k(n)(z.customProps?.chip, {
+					classes: { root: k(oe).chip },
+					customProps: { clear: k(Y) }
+				})), {
+					default: j(() => [E(o.$slots, "chip", { option: e }, () => [m(O(e.label), 1)])]),
 					_: 2
-				}, 1032, [
+				}, 1040, [
 					"size",
-					"custom-props",
 					"disabled",
 					"clear-label",
-					"classes",
 					"onDismiss"
-				]))), 128)), d("textarea", y({ ref: "trigger" }, O(Q)), null, 16)])) : (x(), u("div", I, [d("input", y({
+				]))), 128)), f("textarea", b({ ref: "trigger" }, k(Q)), null, 16)])) : (S(), d("div", I, [f("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, O(Q)), null, 16), O(J) && O(G) && !O(q).isDisabled.value ? (x(), u("span", y({ key: 0 }, O(Y), {
-					onClick: o[0] ||= (...e) => O(X) && O(X)(...e),
+				}, k(Q)), null, 16), k(J) && k(G) && !k(q).isDisabled.value ? (S(), d("span", b({ key: 0 }, k(Y), {
+					onClick: s[0] ||= (...e) => k(X) && k(X)(...e),
 					"aria-label": "Clear selection",
-					onKeydown: [o[1] ||= M(N((...e) => O(X) && O(X)(...e), ["prevent"]), ["enter"]), o[2] ||= M(N((...e) => O(X) && O(X)(...e), ["prevent"]), ["space"])]
-				}), [m(O(ee), {
-					icon: O(P),
-					size: O(ie)
-				}, null, 8, ["icon", "size"])], 16)) : l("", !0)]))]),
+					onKeydown: [s[1] ||= M(N((...e) => k(X) && k(X)(...e), ["prevent"]), ["enter"]), s[2] ||= M(N((...e) => k(X) && k(X)(...e), ["prevent"]), ["space"])]
+				}), [h(k(ee), b({
+					icon: k(P),
+					size: k(ae)
+				}, z.customProps?.clearIcon), null, 16, ["icon", "size"])], 16)) : u("", !0)]))]),
 				_: 3
 			}, 8, ["field"]),
-			m(O(i), y(O(re), {
-				modelValue: O(U),
-				"onUpdate:modelValue": o[3] ||= (e) => _(U) ? U.value = e : null,
-				"anchor-el": O(ne),
-				onSelect: O(te),
-				onRegisteredOptionsChange: O(se)
-			}), f({ _: 2 }, [
-				O($) ? {
+			h(k(a), b({
+				modelValue: k(U),
+				"onUpdate:modelValue": s[3] ||= (e) => v(U) ? U.value = e : null
+			}, k(ie), {
+				"anchor-el": k(re),
+				onSelect: k(ne),
+				onRegisteredOptionsChange: k(ce)
+			}), p({ _: 2 }, [
+				k($) ? {
 					name: "default",
-					fn: j(() => [T(a.$slots, "default")]),
+					fn: j(() => [E(o.$slots, "default")]),
 					key: "0"
 				} : void 0,
-				O(e)(O(W), "beforeOptions") ? {
+				k(e)(k(W), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: j(() => [(x(), c(E(O(t)(O(W), "beforeOptions"))))]),
+					fn: j(() => [(S(), l(D(k(t)(k(W), "beforeOptions"))))]),
 					key: "1"
 				} : void 0,
-				O(e)(O(W), "loading") ? {
+				k(e)(k(W), "loading") ? {
 					name: "loading",
-					fn: j(() => [(x(), c(E(O(t)(O(W), "loading"))))]),
+					fn: j(() => [(S(), l(D(k(t)(k(W), "loading"))))]),
 					key: "2"
 				} : void 0,
-				O(e)(O(W), "option") ? {
+				k(e)(k(W), "option") ? {
 					name: "option",
-					fn: j((e) => [T(a.$slots, "option", b(g(e)))]),
+					fn: j((e) => [E(o.$slots, "option", x(_(e)))]),
 					key: "3"
 				} : void 0,
-				O(e)(O(W), "empty") ? {
+				k(e)(k(W), "empty") ? {
 					name: "empty",
-					fn: j(() => [(x(), c(E(O(t)(O(W), "empty"))))]),
+					fn: j(() => [(S(), l(D(k(t)(k(W), "empty"))))]),
 					key: "4"
 				} : void 0,
-				O(e)(O(W), "afterOptions") ? {
+				k(e)(k(W), "afterOptions") ? {
 					name: "afterOptions",
-					fn: j(() => [(x(), c(E(O(t)(O(W), "afterOptions"))))]),
+					fn: j(() => [(S(), l(D(k(t)(k(W), "afterOptions"))))]),
 					key: "5"
 				} : void 0
 			]), 1040, [
@@ -174,7 +175,7 @@ var F = {
 				"onSelect",
 				"onRegisteredOptionsChange"
 			]),
-			O($) ? l("", !0) : (x(), u("div", L, [T(a.$slots, "default")]))
+			k($) ? u("", !0) : (S(), d("div", L, [E(o.$slots, "default")]))
 		], 64));
 	}
 });

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

@@ -437,10 +437,9 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        labelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -450,12 +449,12 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         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, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        requiredBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | 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, {}>>;
+        fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
@@ -721,32 +720,33 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "description" | "errorMessage" | "readonly" | "required" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "color" | "end" | "size" | "classes" | "customProps" | "error" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>>;
     selectOption: (option: SelectOption) => void;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     listboxProps: import('vue').ComputedRef<{
-        listboxId: string;
-        isSelected: (value: SelectValue) => boolean;
-        loading: boolean;
-        multiple: boolean;
-        entries: ListboxEntry[];
-        options: import('@bridge-ui/core').ListboxOption[];
-        labelledBy: string;
-        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";
+        anchorEl?: null | HTMLElement;
         classes?: import('../../Listbox').ListboxClasses;
+        color: "dark" | "error" | "info" | "primary" | "secondary" | "success" | "warning";
         customProps?: import('../../Listbox').ListboxCustomProps;
         disableAutoFocus: boolean;
         disableMaxHeight: boolean;
         emptyMessage: string;
+        entries: ListboxEntry[];
         hideEmptyMessage: boolean;
+        highlightedIndex: number;
+        invalidated: boolean;
+        isSelected: (value: import('@bridge-ui/core').ListboxValue) => boolean;
+        labelledBy: string;
+        listboxId: string;
+        loading: boolean;
         loadingMessage: string;
         maxHeight: string;
+        multiple: boolean;
+        options: import('@bridge-ui/core').ListboxOption[];
         placement?: import('@floating-ui/utils').Placement;
+        rounded: "2xl" | "lg" | "md" | "sm" | "xl" | "xs" | "none" | "3xl" | "4xl" | "full";
         showCheckmark?: boolean;
+        size: "2xl" | "2xs" | "lg" | "md" | "sm" | "xl" | "xs";
     }>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
     mergedClasses: import('vue').ComputedRef<Partial<SelectClasses>>;

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

@@ -6,7 +6,7 @@ import { Comment as re, Text as ie, computed as a, nextTick as ae, onBeforeUnmou
 import { get as c, isNil as de, omit as fe } from "es-toolkit/compat";
 import { adjustAutosizeTextareaHeight as pe, cn as l, createSelectAsyncSearch as me, filterListboxEntries as he, flattenListboxOptions as u, mergeBridgeUILayeredClasses as d, normalizeListboxEntries as f, normalizeSelectOptions as ge, resolveSelectAsyncDebounce as _e, resolveSelectAsyncOptions as ve, selectValuesEqual as p, splitComponentProps as ye } from "@bridge-ui/core";
 import { ChevronsUpDown as be } from "@lucide/vue";
-import { colorProps as xe, invalidatedProps as Se } from "@bridge-ui/core/Components/Listbox";
+import { colorProps as xe, invalidatedProps as Se } from "@bridge-ui/core/Tokens/Listbox";
 //#region src/Components/Select/composables/useSelect.ts
 var Ce = [
 	"classes",
@@ -240,12 +240,12 @@ function m(m, h, g, _, we) {
 	let Ye = a(() => {
 		let e = c(d(xe, c(j.value, [
 			"Listbox",
-			"customProps",
+			"tokens",
 			"color"
 		])), K.merged.value.color ?? "primary");
 		return K.invalidated.value ? d(Se, c(j.value, [
 			"Listbox",
-			"customProps",
+			"tokens",
 			"invalidated"
 		])) : e;
 	}), Xe = a(() => Ye.value?.value), Ze = a(() => {
@@ -303,25 +303,25 @@ function m(m, h, g, _, we) {
 			[M.value.clear ?? ""]: !0
 		})
 	})), et = a(() => ({
-		disableAutoFocus: !0,
-		maxHeight: m.maxHeight,
-		size: K.merged.value.size,
-		color: K.merged.value.color,
-		disableMaxHeight: m.disableMaxHeight === !0,
-		emptyMessage: k.value.emptyMessage ?? "No options",
-		hideEmptyMessage: k.value.hideEmptyMessage === !0,
-		loadingMessage: k.value.loadingMessage ?? "Loading...",
-		...Ve.value,
 		listboxId: y,
 		isSelected: J,
+		disableAutoFocus: !0,
 		loading: Ne.value,
 		multiple: N.value,
+		maxHeight: m.maxHeight,
 		entries: Pe.value,
 		options: W.value,
+		size: K.merged.value.size,
+		color: K.merged.value.color,
 		labelledBy: K.controlId.value,
 		rounded: K.merged.value.rounded,
 		invalidated: K.invalidated.value,
-		highlightedIndex: S.value
+		highlightedIndex: S.value,
+		disableMaxHeight: m.disableMaxHeight === !0,
+		emptyMessage: k.value.emptyMessage ?? "No options",
+		hideEmptyMessage: k.value.hideEmptyMessage === !0,
+		loadingMessage: k.value.loadingMessage ?? "Loading...",
+		...Ve.value
 	}));
 	function tt(e) {
 		let t = I.value;

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

@@ -1,6 +1,8 @@
 import { InputHTMLAttributes, Slot, TextareaHTMLAttributes } from 'vue';
 import { ListboxOptionsInput, MergeHtmlProps, SelectAsyncData, SelectModel, SelectOption, SelectValue } from '@bridge-ui/core';
+import { ChipOwnProps } from '../Chip/chip.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
 import { ListboxOwnProps } from '../Listbox/listbox.types';
 export type { ListboxOptionGroup, ListboxOptionsInput, SelectAsyncData, SelectModel, SelectOption, SelectOptionInput, SelectOptionLike, SelectValue, } from '@bridge-ui/core';
 export interface SelectClasses extends FormFieldClasses {
@@ -26,13 +28,26 @@ export interface SelectClasses extends FormFieldClasses {
     value?: string;
 }
 export interface SelectCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to each selected-value `Chip` (multiple mode).
+     * Dismiss behavior, size, and label stay owned by `Select`.
+     *
+     * @default undefined
+     */
+    chip?: Partial<Omit<ChipOwnProps, "size" | "label" | "disabled" | "clearLabel" | "dismissible">>;
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `Select`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
     /**
      * Props forwarded to the internal `Listbox`.
-     * Open state, options, and selection handlers stay owned by `Select`.
+     * Merged last so they override Select defaults.
      *
      * @default undefined
      */
-    listbox?: Partial<Omit<ListboxOwnProps, "options" | "anchorEl" | "listboxId" | "isSelected" | "highlightedIndex">>;
+    listbox?: Partial<ListboxOwnProps>;
 }
 export interface SelectEmits {
     /**
@@ -98,7 +113,8 @@ export interface SelectOwnProps extends Omit<FormFieldOwnProps, "field"> {
      */
     clearable?: boolean;
     /**
-     * Extra props for FormField parts and the internal `Listbox`.
+     * Extra props for FormField parts, selected chips, clear icon, and the
+     * internal `Listbox`.
      *
      * @default undefined
      */