@bridge-ui/vue 0.3.0 → 0.5.0

package/dist/Components/NumberField/composables/useNumberField.js

@@ -1,23 +1,32 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { useFormField as r } from "../../FormField/composables/useFormField.js";
 import { computed as i, useAttrs as a } from "vue";
-import { isNil as o } from "es-toolkit/compat";
-import { cn as s } from "@bridge-ui/core/Utils";
+import { get as o, isNil as s } from "es-toolkit/compat";
+import { getNumberFieldStepper as c, resolveNumberFieldStepperIconSize as l } from "@bridge-ui/core/Domain";
+import { numberFieldControlVariantProps as u } from "@bridge-ui/core/Tokens";
+import { cn as d, mergeBridgeUILayeredClasses as f } from "@bridge-ui/core/Utils";
 //#region src/Components/NumberField/composables/useNumberField.ts
-function c(c, l, u = {}) {
-	let d = a(), f = i(() => c.step ?? 1), { entry: p } = t({
+function p(p, m, h = {}) {
+	let g = a(), _ = i(() => p.step ?? 1), v = i(() => ({
+		classes: p.classes,
+		controlVariant: p.controlVariant
+	})), { entry: y, merged: b } = t({
 		componentName: "NumberField",
-		props: () => ({ classes: c.classes })
-	}), m = n({
-		entry: p,
-		props: () => ({ classes: c.classes })
-	}), h = r(() => {
-		let { min: e, max: t, step: n, classes: r, defaultValue: i, ...a } = c;
+		props: () => v.value,
+		libDefaults: { controlVariant: "stacked" }
+	}), x = n({
+		entry: y,
+		props: () => v.value
+	}), S = i(() => b.value.controlVariant ?? "stacked"), C = i(() => c(S.value)), w = i(() => {
+		let e = f(u, y.value?.tokens?.controlVariant);
+		return o(e, S.value) ?? u.stacked;
+	}), T = r(() => {
+		let { min: e, max: t, step: n, classes: r, defaultValue: i, controlVariant: a, ...o } = p;
 		return {
-			...d,
-			...a,
+			...g,
+			...o,
 			showErrorIcon: !1,
-			classes: m.value
+			classes: x.value
 		};
 	}, {
 		size: "md",
@@ -27,41 +36,45 @@ function c(c, l, u = {}) {
 		showErrorIcon: !1
 	}, {
 		componentName: "NumberField",
-		reservedSlots: () => ["end"]
-	}), g = i(() => e(h.inputBind.value, {
-		min: c.min,
-		max: c.max,
+		reservedSlots: () => C.value.isSplit ? ["start", "end"] : ["end"]
+	}), E = i(() => l(T.merged.value.size, S.value)), D = i(() => e(T.inputBind.value, {
+		min: p.min,
+		max: p.max,
 		type: "number",
-		step: f.value
-	}, s({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), _ = i(() => l.value ?? void 0), v = i({
-		get: () => {
-			if (!o(_.value)) return String(_.value);
-		},
+		step: _.value
+	}, d({ "appearance:textfield [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none": !0 }))), O = i(() => m.value ?? void 0), k = i({
+		get: () => s(O.value) ? "" : String(O.value),
 		set: (e) => {
-			if (e === "" || o(e)) {
-				l.value = void 0;
+			if (e === "" || s(e)) {
+				m.value = void 0;
 				return;
 			}
 			let t = Number(e);
-			Number.isNaN(t) || (l.value = t, u.onChange?.(t));
+			Number.isNaN(t) || (m.value = t, h.onChange?.(t));
 		}
-	}), y = (e) => {
-		l.value = e, u.onChange?.(e);
+	}), A = (e) => {
+		m.value = e, h.onChange?.(e);
 	};
 	return {
 		decrement: () => {
-			let e = (_.value ?? c.min ?? 0) - f.value;
-			return !o(c.min) && e < c.min ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) - _.value;
+			return !s(p.min) && e < p.min ? !1 : (A(e), !0);
 		},
-		formField: h,
+		formField: T,
 		increment: () => {
-			let e = (_.value ?? c.min ?? 0) + f.value;
-			return !o(c.max) && e > c.max ? !1 : (y(e), !0);
+			let e = (O.value ?? p.min ?? 0) + _.value;
+			return !s(p.max) && e > p.max ? !1 : (A(e), !0);
 		},
-		inputBind: g,
-		stringModel: v,
-		mergedClasses: m
+		inputBind: D,
+		stringModel: k,
+		mergedClasses: x,
+		stepperIconSize: E,
+		controlVariantItem: w,
+		isSplit: i(() => C.value.isSplit),
+		decrementIcon: i(() => C.value.decrementIcon),
+		incrementIcon: i(() => C.value.incrementIcon),
+		incrementFirst: i(() => C.value.incrementFirst)
 	};
 }
 //#endregion
-export { c as useNumberField };
+export { p as useNumberField };

package/dist/Components/NumberField/index.d.ts

@@ -1,4 +1,4 @@
 export { useNumberField } from './composables/useNumberField';
 export type { UseNumberFieldOptions } from './composables/useNumberField';
-export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
+export type { NumberFieldClasses, NumberFieldControlVariantOverrides, NumberFieldCustomProps, NumberFieldEmits, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './numberField.types';
 export { default as NumberField } from './NumberField.vue';

package/dist/Components/NumberField/numberField.types.d.ts

@@ -1,7 +1,9 @@
 import { ButtonHTMLAttributes, InputHTMLAttributes } from 'vue';
-import { MergeHtmlProps } from '@bridge-ui/core/Utils';
+import { NumberFieldControlVariant } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
+export interface NumberFieldControlVariantOverrides {}
 export interface NumberFieldClasses extends FormFieldClasses {
     /**
      * The classes to apply to the decrement button.
@@ -54,6 +56,16 @@ export interface NumberFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "
      * The classes to apply to the number field.
      */
     classes?: NumberFieldClasses;
+    /**
+     * Layout of the increment and decrement controls.
+     *
+     * `stacked` places them in a column at the end. `inline` places them in a
+     * row at the end. `split` places decrement at the start and increment at the
+     * end, and reserves the start slot (`start` / `startIcon`) for decrement.
+     *
+     * @default "stacked"
+     */
+    controlVariant?: MergeProps<NumberFieldControlVariant, NumberFieldControlVariantOverrides>;
     /**
      * Extra props for FormField parts and the stepper buttons.
      *

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

@@ -1,18 +1,18 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
-import { mergePartBind as n, resolveFieldAdornmentIconSize as r } from "../../Utils/index.js";
-import i from "../Icon/Icon.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as a } from "../FormField/formField.types.js";
-import o from "../FormField/FormField.js";
-import { usePasswordField as s } from "./composables/usePasswordField.js";
-import { computed as c, createBlock as l, createElementVNode as u, createSlots as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeProps as _, openBlock as v, ref as y, renderList as b, renderSlot as x, unref as S, useModel as C, vModelDynamic as w, withCtx as T, withDirectives as E } from "vue";
-import { isUndefined as D } from "es-toolkit/compat";
-import { cn as O } from "@bridge-ui/core/Utils";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import { mergePartBind as r, resolveFieldAdornmentIconSize as i } from "../../Utils/index.js";
+import a from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
+import s from "../FormField/FormField.js";
+import { usePasswordField as c } from "./composables/usePasswordField.js";
+import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, isRef as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, ref as x, renderList as S, renderSlot as C, unref as w, useModel as T, vModelDynamic as E, withCtx as D, withDirectives as O } from "vue";
+import { cn as k } from "@bridge-ui/core/Utils";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
-var k = /*@__PURE__*/ p({
+var A = /*@__PURE__*/ m({
 	inheritAttrs: !1,
 	__name: "PasswordField",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ _({
 		classes: {},
 		customProps: {},
 		defaultValue: {},
@@ -45,34 +45,29 @@ var k = /*@__PURE__*/ p({
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h(["visibility-change"], ["update:modelValue"]),
-	setup(p, { emit: h }) {
-		let k = h, A = C(p, "modelValue"), j = p, M = y(j.defaultValue), N = c({
-			set: (e) => {
-				A.value = e, M.value = e;
-			},
-			get: () => D(A.value) ? M.value : A.value
-		}), P = e(), { formField: F, inputBind: I, isVisible: L, mergedClasses: R, toggleVisibility: z } = s(j, { onVisibilityChange: (e) => k("visibility-change", e) }), B = c(() => n(j.customProps?.toggle, {
+	emits: /*@__PURE__*/ _(["visibility-change"], ["update:modelValue"]),
+	setup(m, { emit: _ }) {
+		let A = e(), j = _, M = T(m, "modelValue"), N = m, P = x(N.defaultValue), F = n(M, P), { formField: I, inputBind: L, isVisible: R, mergedClasses: z, toggleVisibility: B } = c(N, { onVisibilityChange: (e) => j("visibility-change", e) }), V = l(() => r(N.customProps?.toggle, {
 			type: "button",
-			disabled: j.disabled,
-			onClick: z,
-			"aria-label": L.value ? P("Hide password") : P("Show password")
-		}, O({
-			"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
-			[R.value.toggle ?? ""]: !0
+			disabled: N.disabled,
+			onClick: B,
+			"aria-label": R.value ? A("Hide password") : A("Show password")
+		}, k({
+			"bridge-end-adornment bridge-field-adornment-button inline-flex h-auto! min-h-0 self-stretch overflow-hidden items-center justify-center px-2.5": !0,
+			[z.value.toggle ?? ""]: !0
 		})));
-		return (e, n) => (v(), l(S(o), { field: S(F) }, d({
-			end: T(() => [u("button", _(m(B.value)), [f(S(i), g({
-				icon: S(L) ? "eyeOff" : "eye",
-				size: S(r)(j.size)
-			}, j.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
-			default: T(() => [E(u("input", g({ "onUpdate:modelValue": n[0] ||= (e) => N.value = e }, S(I)), null, 16), [[w, N.value]])]),
+		return (e, n) => (b(), u(w(s), { field: w(I) }, f({
+			end: D(() => [d("button", y(h(V.value)), [p(w(a), v({
+				icon: w(R) ? "eyeOff" : "eye",
+				size: w(i)(N.size)
+			}, N.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
+			default: D(() => [O(d("input", v({ "onUpdate:modelValue": n[0] ||= (e) => g(F) ? F.value = e : null }, w(L)), null, 16), [[E, w(F)]])]),
 			_: 2
-		}, [b(S(t)(S(a).filter((e) => e !== "end"), e.$slots), (t) => ({
+		}, [S(w(t)(w(o).filter((e) => e !== "end"), e.$slots), (t) => ({
 			name: t,
-			fn: T((n) => [x(e.$slots, t, _(m(n || {})))])
+			fn: D((n) => [C(e.$slots, t, y(h(n || {})))])
 		}))]), 1032, ["field"]));
 	}
 });
 //#endregion
-export { k as default };
+export { A as default };

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

@@ -446,6 +446,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

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

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t, presentSlotNames as n } from "../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as ee } from "../../Utils/index.js";
-import r from "../Icon/Icon.js";
-import i from "../Chip/Chip.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as te } from "../FormField/formField.types.js";
-import a from "../FormField/FormField.js";
+import { useOptionalModel as r } from "../../Utils/useOptionalModel.js";
+import { mergeNestedComponentProps as i } from "../../Utils/index.js";
+import ee from "../Icon/Icon.js";
+import a from "../Chip/Chip.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
+import te from "../FormField/FormField.js";
 import ne 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, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, 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, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as oe, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { isUndefined as j } from "es-toolkit/compat";
+import { useSelect as s } from "./composables/useSelect.js";
+import { SELECT_OPTION_KEY as c } from "./selectInjectionKey.js";
+import { Fragment as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createTextVNode as re, 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, toDisplayString as ie, unref as D, useModel as ae, useTemplateRef as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 import { cn as M } from "@bridge-ui/core/Utils";
 //#region src/Components/Select/Select.vue?vue&type=script&setup=true&lang.ts
 var N = {
@@ -98,13 +98,8 @@ var N = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(g, { emit: y }) {
-		let L = ae(g, "modelValue"), R = g, z = y, B = e(), V = w(R.defaultValue), H = l({
-			set: (e) => {
-				L.value = e, V.value = e;
-			},
-			get: () => j(L.value) ? V.value : L.value
-		}), U = oe("trigger"), W = w([]);
-		C(s, {
+		let L = y, R = e(), z = ae(g, "modelValue"), B = g, V = w(B.defaultValue), H = r(z, V), U = O("trigger"), W = w([]);
+		C(c, {
 			unregister(e) {
 				W.value = W.value.filter((t) => String(t.value) !== String(e));
 			},
@@ -112,24 +107,24 @@ var N = {
 				W.value.some((t) => String(t.value) === String(e.value)) || (W.value = [...W.value, e]);
 			}
 		});
-		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: se, triggerBind: Z, handleApply: ce, selectOption: le, handleCancel: ue, containerRef: Q, listboxProps: de, clearIconSize: fe, mergedClasses: pe, showClearIcon: me, selectedOptions: he, hasComposedList: $, handleRegisteredOptionsChange: ge } = o(R, H, U, z, W);
-		return (e, o) => (S(), f(c, null, [
-			h(D(a), { field: D(J) }, m({
-				default: O(() => [D(q) ? (S(), f("div", N, [(S(!0), f(c, null, T(D(he), (t) => (S(), u(D(i), b({
+		let { open: G, slots: K, multiple: q, formField: J, clearBind: Y, clearValue: X, removeChip: oe, triggerBind: Z, handleApply: se, selectOption: ce, handleCancel: le, containerRef: ue, listboxProps: Q, clearIconSize: de, mergedClasses: fe, showClearIcon: pe, selectedOptions: me, hasComposedList: $, handleRegisteredOptionsChange: he } = s(B, H, U, L, W);
+		return (e, r) => (S(), f(l, null, [
+			h(D(te), { field: D(J) }, m({
+				default: k(() => [D(q) ? (S(), f("div", N, [(S(!0), f(l, null, T(D(me), (t) => (S(), u(D(a), b({
 					dismissible: "",
 					key: String(t.value),
 					size: D(J).merged.value.size,
 					disabled: D(J).isDisabled.value,
 					"clear-label": `Remove ${t.label}`,
-					onDismiss: (e) => D(se)(t, e)
-				}, { ref_for: !0 }, D(ee)(R.customProps?.chip, {
+					onDismiss: (e) => D(oe)(t, e)
+				}, { ref_for: !0 }, D(i)(B.customProps?.chip, {
 					customProps: { clear: D(Y) },
 					classes: { root: D(M)({
 						"bg-white ring-1 ring-inset ring-dark-200 dark:bg-dark-700 dark:ring-dark-600": !0,
-						[D(pe).chip ?? ""]: !0
+						[D(fe).chip ?? ""]: !0
 					}) }
 				})), {
-					default: O(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
+					default: k(() => [E(e.$slots, "chip", { option: t }, () => [re(ie(t.label), 1)])]),
 					_: 2
 				}, 1040, [
 					"size",
@@ -139,62 +134,62 @@ var N = {
 				]))), 128)), p("textarea", b({ ref: "trigger" }, D(Z)), null, 16)])) : (S(), f("div", P, [p("input", b({
 					ref: "trigger",
 					class: "min-w-0 flex-1"
-				}, D(Z)), null, 16), D(me) ? (S(), f("span", b({ key: 0 }, D(Y), {
-					onClick: o[0] ||= (...e) => D(X) && D(X)(...e),
-					onKeydown: [o[1] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
-					"aria-label": D(B)("Clear selection")
-				}), [h(D(r), b({
+				}, D(Z)), null, 16), D(pe) ? (S(), f("span", b({ key: 0 }, D(Y), {
+					onClick: r[0] ||= (...e) => D(X) && D(X)(...e),
+					onKeydown: [r[1] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["enter"]), r[2] ||= A(j((...e) => D(X) && D(X)(...e), ["prevent"]), ["space"])],
+					"aria-label": D(R)("Clear selection")
+				}), [h(D(ee), b({
 					icon: "clear",
-					size: D(fe)
-				}, R.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
+					size: D(de)
+				}, B.customProps?.clearIcon), null, 16, ["size"])], 16, F)) : d("", !0)]))]),
 				_: 2
-			}, [T(D(n)(D(te), e.$slots), (t) => ({
+			}, [T(D(n)(D(o), e.$slots), (t) => ({
 				name: t,
-				fn: O((n) => [E(e.$slots, t, x(_(n || {})))])
+				fn: k((n) => [E(e.$slots, t, x(_(n || {})))])
 			}))]), 1032, ["field"]),
 			h(D(ne), b({
 				modelValue: D(G),
-				"onUpdate:modelValue": o[3] ||= (e) => v(G) ? G.value = e : null
-			}, D(de), {
-				onApply: D(ce),
-				"anchor-el": D(Q),
-				onCancel: D(ue),
-				onSelect: D(le),
-				onRegisteredOptionsChange: D(ge)
+				"onUpdate:modelValue": r[3] ||= (e) => v(G) ? G.value = e : null
+			}, D(Q), {
+				onApply: D(se),
+				"anchor-el": D(ue),
+				onCancel: D(le),
+				onSelect: D(ce),
+				onRegisteredOptionsChange: D(he)
 			}), m({ _: 2 }, [
 				D($) ? {
 					name: "default",
-					fn: O(() => [E(e.$slots, "default")]),
+					fn: k(() => [E(e.$slots, "default")]),
 					key: "0"
 				} : void 0,
 				D(t)(D(K), "beforeOptions") ? {
 					name: "beforeOptions",
-					fn: O(() => [E(e.$slots, "beforeOptions")]),
+					fn: k(() => [E(e.$slots, "beforeOptions")]),
 					key: "1"
 				} : void 0,
 				D(t)(D(K), "loading") ? {
 					name: "loading",
-					fn: O(() => [E(e.$slots, "loading")]),
+					fn: k(() => [E(e.$slots, "loading")]),
 					key: "2"
 				} : void 0,
 				D(t)(D(K), "option") ? {
 					name: "option",
-					fn: O((t) => [E(e.$slots, "option", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "option", x(_(t)))]),
 					key: "3"
 				} : void 0,
 				D(t)(D(K), "empty") ? {
 					name: "empty",
-					fn: O(() => [E(e.$slots, "empty")]),
+					fn: k(() => [E(e.$slots, "empty")]),
 					key: "4"
 				} : void 0,
 				D(t)(D(K), "footer") ? {
 					name: "footer",
-					fn: O((t) => [E(e.$slots, "footer", x(_(t)))]),
+					fn: k((t) => [E(e.$slots, "footer", x(_(t)))]),
 					key: "5"
 				} : void 0,
 				D(t)(D(K), "afterOptions") ? {
 					name: "afterOptions",
-					fn: O(() => [E(e.$slots, "afterOptions")]),
+					fn: k(() => [E(e.$slots, "afterOptions")]),
 					key: "6"
 				} : void 0
 			]), 1040, [

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

@@ -450,6 +450,7 @@ export declare function useSelect(props: SelectOwnProps, model: Ref<null | undef
         endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
         containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;

package/dist/Components/Sidebar/Sidebar.js

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

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

@@ -0,0 +1,16 @@
+import { SidebarOwnProps, SidebarSlots } from './sidebar.types';
+type __VLS_Slots = SidebarSlots;
+declare const __VLS_base: import('vue').DefineComponent<SidebarOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SidebarOwnProps> & Readonly<{}>, {
+    variant: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').SidebarVariant, import('./sidebar.types').SidebarVariantOverrides>;
+    ariaLabel: string;
+    collapsible: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').SidebarCollapsible, import('./sidebar.types').SidebarCollapsibleOverrides>;
+    side: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').SidebarSide, import('./sidebar.types').SidebarSideOverrides>;
+}, {}, {}, {}, 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/Sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { hasNamedSlot as e } from "../../Utils/slotOrProp.js";
+import t from "../Drawer/Drawer.js";
+import { useSidebarShell as n } from "./composables/useSidebarShell.js";
+import { Fragment as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeProps as d, openBlock as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+//#region src/Components/Sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var g = /*@__PURE__*/ c({
+	name: "Sidebar",
+	inheritAttrs: !1,
+	__name: "Sidebar",
+	props: {
+		ariaLabel: { default: "Sidebar" },
+		classes: {},
+		collapsible: { default: "offcanvas" },
+		customProps: {},
+		side: { default: "left" },
+		variant: { default: "sidebar" }
+	},
+	setup(c) {
+		let { slots: g, merged: _, panelId: v, gapBind: y, rootBind: b, isMobile: x, asideBind: S, panelBind: C, headerBind: w, footerBind: T, openMobile: E, contentBind: D, showAsDrawer: O, setOpenMobile: k, drawerPanelStyle: A } = n(c, {
+			side: "left",
+			variant: "sidebar",
+			ariaLabel: "Sidebar",
+			collapsible: "offcanvas"
+		});
+		return (n, c) => (f(), o(r, null, [s("div", d(l(m(b))), [s("div", d(l(m(y))), null, 16), s("aside", d(l(m(S))), [s("div", d(l(m(C))), [m(O) ? a("", !0) : (f(), o(r, { key: 0 }, [
+			m(e)(m(g), "header") ? (f(), o("div", d(u({ key: 0 }, m(w))), [p(n.$slots, "header")], 16)) : a("", !0),
+			s("div", d(l(m(D))), [p(n.$slots, "default")], 16),
+			m(e)(m(g), "footer") ? (f(), o("div", d(u({ key: 1 }, m(T))), [p(n.$slots, "footer")], 16)) : a("", !0)
+		], 64))], 16)], 16)], 16), m(x) ? (f(), i(m(t), {
+			key: 0,
+			placement: m(_).side,
+			"model-value": m(E),
+			onShowChange: m(k),
+			"aria-label": m(_).ariaLabel,
+			"onUpdate:modelValue": m(k),
+			"custom-props": { panel: {
+				class: "p-0",
+				style: m(A),
+				id: m(O) ? m(v) : void 0
+			} }
+		}, {
+			default: h(() => [m(O) ? (f(), o("div", d(u({ key: 0 }, m(C))), [
+				m(e)(m(g), "header") ? (f(), o("div", d(u({ key: 0 }, m(w))), [p(n.$slots, "header")], 16)) : a("", !0),
+				s("div", d(l(m(D))), [p(n.$slots, "default")], 16),
+				m(e)(m(g), "footer") ? (f(), o("div", d(u({ key: 1 }, m(T))), [p(n.$slots, "footer")], 16)) : a("", !0)
+			], 16)) : a("", !0)]),
+			_: 3
+		}, 8, [
+			"placement",
+			"model-value",
+			"onShowChange",
+			"aria-label",
+			"onUpdate:modelValue",
+			"custom-props"
+		])) : a("", !0)], 64));
+	}
+});
+//#endregion
+export { g as default };

package/dist/Components/Sidebar/SidebarInset.js

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

package/dist/Components/Sidebar/SidebarInset.vue.d.ts

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

@@ -0,0 +1,18 @@
+import { useSidebarInset as e } from "./composables/useSidebarInset.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, renderSlot as o, unref as s } from "vue";
+//#region src/Components/Sidebar/SidebarInset.vue?vue&type=script&setup=true&lang.ts
+var c = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	name: "SidebarInset",
+	__name: "SidebarInset",
+	props: {
+		classes: {},
+		customProps: {}
+	},
+	setup(n) {
+		let { rootBind: c } = e(n);
+		return (e, n) => (a(), t("main", i(r(s(c))), [o(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { c as default };

package/dist/Components/Sidebar/SidebarList.js

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

package/dist/Components/Sidebar/SidebarList.vue.d.ts

@@ -0,0 +1,16 @@
+import { ListOwnProps } from '../List/list.types';
+import { SidebarListOwnProps } from './sidebar.types';
+type __VLS_Props = ListOwnProps & SidebarListOwnProps;
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Sidebar/SidebarList.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import e from "../List/List.js";
+import { LIST_SECTION_INJECTION_KEY as t } from "../ListSection/listSectionInjectionKey.js";
+import { useSidebarList as n } from "./composables/useSidebarList.js";
+import { computed as r, createBlock as i, defineComponent as a, guardReactiveProps as o, normalizeProps as s, openBlock as c, provide as l, renderSlot as u, useAttrs as d, withCtx as f } from "vue";
+import { cn as p } from "@bridge-ui/core/Utils";
+//#region src/Components/Sidebar/SidebarList.vue?vue&type=script&setup=true&lang.ts
+var m = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "SidebarList",
+	props: {
+		as: {},
+		classes: {},
+		customProps: {},
+		dense: { type: Boolean },
+		nested: { type: Boolean },
+		iconOnly: { type: Boolean }
+	},
+	setup(a) {
+		let m = a, h = d(), { rootClassName: g, iconOnly: _ } = n(m);
+		l(t, r(() => ({ hidden: _.value })));
+		let v = r(() => {
+			let { classes: e, iconOnly: t, ...n } = m;
+			return {
+				...h,
+				...n,
+				...m.nested === !0 && _.value ? { hidden: !0 } : {},
+				classes: {
+					...e,
+					root: p(g.value, e?.root)
+				}
+			};
+		});
+		return (t, n) => (c(), i(e, s(o(v.value)), {
+			default: f(() => [u(t.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { m as default };

package/dist/Components/Sidebar/SidebarListItem.js

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

package/dist/Components/Sidebar/SidebarListItem.vue.d.ts

@@ -0,0 +1,13 @@
+import { ListItemOwnProps, ListItemSlots } from '../ListItem/listItem.types';
+import { SidebarListItemOwnProps } from './sidebar.types';
+type __VLS_Slots = ListItemSlots;
+type __VLS_Props = ListItemOwnProps & SidebarListItemOwnProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};