@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/Slider/composables/useSlider.js

@@ -3,11 +3,11 @@ import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistr
 import { baseFieldBridgeKeys as i, useBaseField as a } from "../../BaseField/composables/useBaseField.js";
 import { computed as o, ref as s, toValue as ee, useAttrs as te, watch as ne } from "vue";
 import { get as c, omit as l, pick as u } from "es-toolkit/compat";
-import { getSliderBarGeometry as re, getSliderPointerClientX as d, isSliderStopCovered as ie, normalizeSliderStops as ae, percentFromSliderPointer as f, percentToValue as p, pickClosestSliderThumb as oe, resolveSliderBounds as se, snapSliderValue as m, sortSliderRangeValue as ce, stepSliderValue as h, valueToPercent as g, writeSliderRangeThumb as _ } from "@bridge-ui/core/Domain";
-import { sliderColorProps as le, sliderInvalidatedProps as ue, sliderRoundedProps as de, sliderSizeProps as fe } from "@bridge-ui/core/Tokens";
-import { cn as v, mergeBridgeUILayeredClasses as y, splitComponentProps as pe } from "@bridge-ui/core/Utils";
+import { getSliderBarGeometry as re, getSliderPointerClientX as d, isSliderStopCovered as ie, normalizeSliderStops as ae, percentFromSliderPointer as f, percentToValue as p, pickClosestSliderThumb as oe, resolveSliderBounds as m, snapSliderValue as h, sortSliderRangeValue as se, stepSliderValue as g, valueToPercent as _, writeSliderRangeThumb as v } from "@bridge-ui/core/Domain";
+import { sliderColorProps as ce, sliderRoundedProps as le, sliderSizeProps as ue } from "@bridge-ui/core/Tokens";
+import { cn as y, getColorToken as de, mergeBridgeUILayeredClasses as b, splitComponentProps as fe } from "@bridge-ui/core/Utils";
 //#region src/Components/Slider/composables/useSlider.ts
-var b = [
+var x = [
 	"max",
 	"min",
 	"step",
@@ -18,113 +18,117 @@ var b = [
 	"showStops",
 	"showTooltip",
 	"defaultValue"
-], x = [...i, ...b];
-function S(e, t, n) {
+], S = [...i, ...x];
+function C(e, t, n) {
 	return n && Array.isArray(e) ? e[t] : Array.isArray(e) ? e[0] : e;
 }
-function C(e, t, n, r) {
+function w(e, t, n, r) {
 	return !r || !Array.isArray(e) ? {
 		thumbIndex: t,
 		value: n
-	} : _(e, t, n);
+	} : v(e, t, n);
 }
-function w(_, w, T, me = {}) {
-	let he = te(), ge = e(), E = s(null), D = s(null), O = s(null), k = s(null), A = o(() => pe({
-		bridgeKeys: x,
+function T(v, T, E, pe = {}) {
+	let me = te(), he = e(), D = s(null), O = s(null), k = s(null), A = s(null), j = o(() => fe({
+		bridgeKeys: S,
 		props: {
-			...he,
-			...ee(_)
+			...me,
+			...ee(v)
 		}
-	})), _e = o(() => u(A.value.componentProps, i)), j = a(_e, {
+	})), ge = o(() => u(j.value.componentProps, i)), M = a(ge, {
 		error: !1,
 		hideErrorMessage: !1,
-		size: w.size ?? "md"
+		size: T.size ?? "md"
 	}, {
 		componentName: "Slider",
 		labelHtmlFor: (e) => `${e}-thumb-0`
-	}), { merged: M, entry: N } = n({
-		libDefaults: w,
+	}), { merged: N, entry: P } = n({
+		libDefaults: T,
 		componentName: "Slider",
 		props: () => ({
-			...u(A.value.componentProps, b),
-			size: j.merged.value.size,
-			classes: A.value.componentProps.classes,
-			customProps: A.value.componentProps.customProps
+			...u(j.value.componentProps, x),
+			size: M.merged.value.size,
+			classes: j.value.componentProps.classes,
+			customProps: j.value.componentProps.customProps
 		})
-	}), P = o(() => M.value.customProps), F = r({
-		entry: N,
-		props: () => A.value.componentProps
-	}), I = o(() => se({
-		min: M.value.min,
-		max: M.value.max,
-		step: M.value.step
-	})), L = o(() => !!M.value.range), R = o(() => M.value.showTooltip !== !1), z = o(() => ge?.global.value.direction === "rtl"), { controlId: B, isDisabled: V, isReadonly: H, invalidated: U, ariaDescribedBy: ve } = j, W = o(() => {
-		let e = T.value, t = I.value;
-		if (L.value) {
-			if (Array.isArray(e)) return ce(m(e[0], t.min, t.max, t.step), m(e[1], t.min, t.max, t.step));
-			let n = m(typeof e == "number" ? e : t.min, t.min, t.max, t.step);
+	}), F = o(() => N.value.customProps), I = r({
+		entry: P,
+		props: () => j.value.componentProps
+	}), L = o(() => m({
+		min: N.value.min,
+		max: N.value.max,
+		step: N.value.step
+	})), R = o(() => !!N.value.range), z = o(() => N.value.showTooltip !== !1), B = o(() => he?.global.value.direction === "rtl"), { controlId: V, isDisabled: H, isReadonly: U, invalidated: W, ariaDescribedBy: _e } = M, G = o(() => {
+		let e = E.value, t = L.value;
+		if (R.value) {
+			if (Array.isArray(e)) return se(h(e[0], t.min, t.max, t.step), h(e[1], t.min, t.max, t.step));
+			let n = h(typeof e == "number" ? e : t.min, t.min, t.max, t.step);
 			return [n, n];
 		}
-		return m(Array.isArray(e) ? e[0] : typeof e == "number" ? e : t.min, t.min, t.max, t.step);
-	}), G = o(() => ae({
-		min: I.value.min,
-		max: I.value.max,
-		step: I.value.step,
-		stops: M.value.stops,
-		showStops: M.value.showStops
-	})), K = o(() => re({
-		range: L.value,
-		min: I.value.min,
-		max: I.value.max,
-		value: W.value
-	})), ye = o(() => {
-		let e = y(le, N.value?.tokens?.color);
-		return c(e, M.value.color ?? "primary");
-	}), q = o(() => y(ue, N.value?.tokens?.invalidated, M.value.customProps?.invalidated)), J = o(() => U.value ? q.value : ye.value), Y = o(() => {
-		let e = y(fe, N.value?.tokens?.size);
-		return c(e, M.value.size ?? "md");
+		return h(Array.isArray(e) ? e[0] : typeof e == "number" ? e : t.min, t.min, t.max, t.step);
+	}), K = o(() => ae({
+		min: L.value.min,
+		max: L.value.max,
+		step: L.value.step,
+		stops: N.value.stops,
+		showStops: N.value.showStops
+	})), q = o(() => re({
+		range: R.value,
+		min: L.value.min,
+		max: L.value.max,
+		value: G.value
+	})), J = o(() => {
+		let e = b(ce, P.value?.tokens?.color);
+		return de({
+			tokens: e,
+			color: N.value.color,
+			invalid: W.value
+		});
+	}), Y = o(() => {
+		let e = b(ue, P.value?.tokens?.size);
+		return c(e, N.value.size ?? "md");
 	}), X = o(() => {
-		let e = y(de, N.value?.tokens?.rounded);
-		return c(e, M.value.rounded ?? "full");
-	}), be = o(() => G.value.some((e) => !!e.label)), Z = (e) => {
-		T.value = e, me.onChange?.(e);
-	}, xe = (e) => {
-		E.value &&= { thumbIndex: e }, D.value !== null && (D.value = e);
-	}, Se = (e, t) => {
-		if (V.value || H.value) return;
-		let n = I.value, r = p(t, n.min, n.max, n.step), i = C(W.value, e, r, L.value);
-		i.thumbIndex !== e && xe(i.thumbIndex), Z(i.value);
+		let e = b(le, P.value?.tokens?.rounded);
+		return c(e, N.value.rounded ?? "full");
+	}), ve = o(() => K.value.some((e) => !!e.label)), Z = (e) => {
+		E.value = e, pe.onChange?.(e);
+	}, ye = (e) => {
+		D.value &&= { thumbIndex: e }, O.value !== null && (O.value = e);
+	}, be = (e, t) => {
+		if (H.value || U.value) return;
+		let n = L.value, r = p(t, n.min, n.max, n.step), i = w(G.value, e, r, R.value);
+		i.thumbIndex !== e && ye(i.thumbIndex), Z(i.value);
 	}, Q = (e, t) => {
-		V.value || H.value || (e.preventDefault(), E.value = { thumbIndex: t }, D.value = t);
-	}, Ce = (e) => {
-		if (V.value || H.value || e.target.closest("[data-bridge-slider-thumb]")) return;
-		let t = k.value?.getBoundingClientRect();
+		H.value || U.value || (e.preventDefault(), D.value = { thumbIndex: t }, O.value = t);
+	}, xe = (e) => {
+		if (H.value || U.value || e.target.closest("[data-bridge-slider-thumb]")) return;
+		let t = A.value?.getBoundingClientRect();
 		if (!t) return;
 		let n = f({
 			rect: t,
-			isRtl: z.value,
+			isRtl: B.value,
 			clientX: d(e)
-		}), r = I.value, i = p(n, r.min, r.max, r.step), a = 0, o = W.value;
-		L.value && Array.isArray(o) && (a = oe(i, o[0], o[1]));
-		let s = C(o, a, i, L.value);
+		}), r = L.value, i = p(n, r.min, r.max, r.step), a = 0, o = G.value;
+		R.value && Array.isArray(o) && (a = oe(i, o[0], o[1]));
+		let s = w(o, a, i, R.value);
 		Z(s.value), Q(e, s.thumbIndex);
-	}, we = (e) => (t) => {
+	}, Se = (e) => (t) => {
 		Q(t, e);
-	}, Te = (e) => (t) => {
-		if (V.value || H.value) return;
-		let n = I.value, r = S(W.value, e, L.value), i = null, a = z.value;
+	}, Ce = (e) => (t) => {
+		if (H.value || U.value) return;
+		let n = L.value, r = C(G.value, e, R.value), i = null, a = B.value;
 		switch (t.key) {
 			case "ArrowRight":
-				i = h(r, a ? -1 : 1, n.min, n.max, n.step);
+				i = g(r, a ? -1 : 1, n.min, n.max, n.step);
 				break;
 			case "ArrowLeft":
-				i = h(r, a ? 1 : -1, n.min, n.max, n.step);
+				i = g(r, a ? 1 : -1, n.min, n.max, n.step);
 				break;
 			case "ArrowUp":
-				i = h(r, 1, n.min, n.max, n.step);
+				i = g(r, 1, n.min, n.max, n.step);
 				break;
 			case "ArrowDown":
-				i = h(r, -1, n.min, n.max, n.step);
+				i = g(r, -1, n.min, n.max, n.step);
 				break;
 			case "Home":
 				i = n.min;
@@ -133,161 +137,161 @@ function w(_, w, T, me = {}) {
 				i = n.max;
 				break;
 			case "PageUp":
-				i = h(r, 1, n.min, n.max, n.step * 10);
+				i = g(r, 1, n.min, n.max, n.step * 10);
 				break;
-			case "PageDown": i = h(r, -1, n.min, n.max, n.step * 10);
+			case "PageDown": i = g(r, -1, n.min, n.max, n.step * 10);
 		}
 		if (i === null) return;
 		t.preventDefault();
-		let o = C(W.value, e, i, L.value);
-		Z(o.value), o.thumbIndex !== e && document.getElementById(`${B.value}-thumb-${o.thumbIndex}`)?.focus();
+		let o = w(G.value, e, i, R.value);
+		Z(o.value), o.thumbIndex !== e && document.getElementById(`${V.value}-thumb-${o.thumbIndex}`)?.focus();
 	};
-	ne(D, (e, t, n) => {
+	ne(O, (e, t, n) => {
 		if (e === null) return;
 		let r = (e) => {
-			let t = k.value?.getBoundingClientRect();
-			if (!t || E.value === null) return;
+			let t = A.value?.getBoundingClientRect();
+			if (!t || D.value === null) return;
 			let n = f({
 				rect: t,
-				isRtl: z.value,
+				isRtl: B.value,
 				clientX: d(e)
 			});
-			Se(E.value.thumbIndex, n);
+			be(D.value.thumbIndex, n);
 		}, i = () => {
-			E.value = null, D.value = null;
+			D.value = null, O.value = null;
 		};
 		window.addEventListener("pointermove", r), window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i), n(() => {
 			window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
 		});
 	});
-	let Ee = o(() => t({}, {}, v("relative w-full min-w-0 flex-1"))), $ = o(() => t({
-		...l(P.value?.track ?? {}, ["style"]),
-		onPointerdown: Ce
-	}, {}, v({
+	let we = o(() => t({}, {}, y("relative w-full min-w-0 flex-1"))), Te = o(() => t({
+		...l(F.value?.track ?? {}, ["style"]),
+		onPointerdown: xe
+	}, {}, y({
 		"relative w-full select-none touch-none": !0,
-		"cursor-pointer": !V.value && !H.value,
-		"cursor-not-allowed": V.value,
+		"cursor-pointer": !H.value && !U.value,
+		"cursor-not-allowed": H.value,
 		[Y.value?.track ?? ""]: !0,
 		[X.value ?? ""]: !0,
 		[J.value?.track ?? ""]: !0,
-		[F.value.track ?? ""]: !0
-	}))), De = o(() => t(l(P.value?.bar ?? {}, ["style"]), {
+		[I.value.track ?? ""]: !0
+	}))), Ee = o(() => t(l(F.value?.bar ?? {}, ["style"]), {
 		"aria-hidden": !0,
 		style: {
-			width: K.value.width,
-			insetInlineStart: K.value.start
+			width: q.value.width,
+			insetInlineStart: q.value.start
 		}
-	}, v({
+	}, y({
 		"absolute top-0 h-full": !0,
 		[X.value ?? ""]: !0,
 		[J.value?.bar ?? ""]: !0,
-		[F.value.bar ?? ""]: !0
-	}))), Oe = (e) => {
-		let n = S(W.value, e, L.value), r = g(n, I.value.min, I.value.max), i = D.value === e;
+		[I.value.bar ?? ""]: !0
+	}))), $ = (e) => {
+		let n = C(G.value, e, R.value), r = _(n, L.value.min, L.value.max), i = O.value === e;
 		return t({
-			...l(P.value?.thumb ?? {}, ["style"]),
+			...l(F.value?.thumb ?? {}, ["style"]),
 			role: "slider",
 			type: "button",
 			"aria-valuenow": n,
-			"aria-valuemin": I.value.min,
-			"aria-valuemax": I.value.max,
-			tabIndex: V.value ? -1 : 0,
+			"aria-valuemin": L.value.min,
+			"aria-valuemax": L.value.max,
+			tabIndex: H.value ? -1 : 0,
 			"data-bridge-slider-thumb": e,
-			disabled: V.value || void 0,
+			disabled: H.value || void 0,
 			"aria-orientation": "horizontal",
-			"aria-describedby": ve.value,
-			onKeydown: Te(e),
-			id: `${B.value}-thumb-${e}`,
-			"aria-disabled": V.value || void 0,
-			"aria-readonly": H.value || void 0,
-			"aria-invalid": U.value || void 0,
-			onPointerdown: we(e),
+			"aria-describedby": _e.value,
+			onKeydown: Ce(e),
+			id: `${V.value}-thumb-${e}`,
+			"aria-disabled": H.value || void 0,
+			"aria-readonly": U.value || void 0,
+			"aria-invalid": W.value || void 0,
+			onPointerdown: Se(e),
 			style: { insetInlineStart: `${r}%` },
 			onFocus: () => {
-				O.value = e;
+				k.value = e;
 			},
 			onPointerenter: () => {
-				O.value = e;
+				k.value = e;
 			},
 			onBlur: () => {
-				D.value !== e && (O.value = O.value === e ? null : O.value);
+				O.value !== e && (k.value = k.value === e ? null : k.value);
 			},
 			onPointerleave: () => {
-				D.value !== e && (O.value = O.value === e ? null : O.value);
+				O.value !== e && (k.value = k.value === e ? null : k.value);
 			},
-			"aria-label": P.value?.thumb?.["aria-label"] ?? (L.value ? e === 0 ? "Minimum" : "Maximum" : j.merged.value.label || "Slider")
-		}, {}, v({
+			"aria-label": F.value?.thumb?.["aria-label"] ?? (R.value ? e === 0 ? "Minimum" : "Maximum" : M.merged.value.label || "Slider")
+		}, {}, y({
 			"group/thumb absolute z-10 flex -translate-x-1/2 items-center justify-center bg-transparent leading-none outline-none": !0,
-			"cursor-grab": !V.value && !H.value,
+			"cursor-grab": !H.value && !U.value,
 			"cursor-grabbing": i,
-			"cursor-not-allowed": V.value,
+			"cursor-not-allowed": H.value,
 			[Y.value?.thumb ?? ""]: !0,
-			[F.value.thumb ?? ""]: !0
+			[I.value.thumb ?? ""]: !0
 		}));
-	}, ke = (e) => {
-		let n = D.value === e;
-		return t(P.value?.thumbKnob, { "aria-hidden": !0 }, v({
+	}, De = (e) => {
+		let n = O.value === e;
+		return t(F.value?.thumbKnob, { "aria-hidden": !0 }, y({
 			"block rounded-full border-2 shadow-sm transition-transform duration-100": !0,
 			"group-focus-visible/thumb:ring-2 group-focus-visible/thumb:ring-offset-2": !0,
 			"scale-120": n,
 			[J.value?.focus ?? ""]: !0,
 			[Y.value?.thumbKnob ?? ""]: !0,
 			[J.value?.thumb ?? ""]: !0,
-			[F.value.thumbKnob ?? ""]: !0
+			[I.value.thumbKnob ?? ""]: !0
 		}));
-	}, Ae = (e) => {
-		let n = g(e.value, I.value.min, I.value.max), r = ie({
-			range: L.value,
-			min: I.value.min,
-			max: I.value.max,
+	}, Oe = (e) => {
+		let n = _(e.value, L.value.min, L.value.max), r = ie({
+			range: R.value,
+			min: L.value.min,
+			max: L.value.max,
 			stopValue: e.value,
-			value: W.value
+			value: G.value
 		});
-		return t(l(P.value?.stop ?? {}, ["style"]), {
+		return t(l(F.value?.stop ?? {}, ["style"]), {
 			"aria-hidden": !0,
 			style: {
 				insetInlineStart: `${n}%`,
 				display: r ? "none" : void 0
 			}
-		}, v({
+		}, y({
 			"absolute top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white dark:bg-dark-400": !0,
-			[F.value.stop ?? ""]: !0
+			[I.value.stop ?? ""]: !0
 		}));
-	}, je = o(() => t(P.value?.stopLabels, { "aria-hidden": !0 }, v({
+	}, ke = o(() => t(F.value?.stopLabels, { "aria-hidden": !0 }, y({
 		"relative h-[1lh] w-full text-xs": !0,
-		[F.value.stopLabels ?? ""]: !0
+		[I.value.stopLabels ?? ""]: !0
 	})));
 	return {
-		bounds: I,
-		merged: M,
-		barBind: De,
-		isRange: L,
-		trackRef: k,
-		baseField: j,
-		trackBind: $,
-		controlBind: Ee,
-		showTooltip: R,
-		getStopBind: Ae,
-		thumbIndexes: o(() => L.value ? [0, 1] : [0]),
-		getThumbBind: Oe,
-		resolvedStops: G,
-		resolvedValue: W,
-		isTooltipOpen: (e) => R.value && (D.value === e || O.value === e),
-		hasStopLabels: be,
-		stopLabelsBind: je,
+		bounds: L,
+		merged: N,
+		barBind: Ee,
+		isRange: R,
+		trackRef: A,
+		baseField: M,
+		trackBind: Te,
+		controlBind: we,
+		showTooltip: z,
+		getStopBind: Oe,
+		thumbIndexes: o(() => R.value ? [0, 1] : [0]),
+		getThumbBind: $,
+		resolvedStops: K,
+		resolvedValue: G,
+		isTooltipOpen: (e) => z.value && (O.value === e || k.value === e),
+		hasStopLabels: ve,
+		stopLabelsBind: ke,
 		getStopLabelBind: (e) => {
-			let n = g(e.value, I.value.min, I.value.max);
-			return t(l(P.value?.stopLabel ?? {}, ["style"]), { style: { insetInlineStart: `${n}%` } }, v({
+			let n = _(e.value, L.value.min, L.value.max);
+			return t(l(F.value?.stopLabel ?? {}, ["style"]), { style: { insetInlineStart: `${n}%` } }, y({
 				"absolute top-0 -translate-x-1/2 whitespace-nowrap": !0,
-				"text-dark-700 dark:text-dark-400": !U.value,
-				[q.value.stopLabel ?? ""]: U.value,
-				[F.value.stopLabel ?? ""]: !0
+				"text-dark-700 dark:text-dark-400": !W.value,
+				"text-error-600 dark:text-error-400": W.value,
+				[I.value.stopLabel ?? ""]: !0
 			}));
 		},
-		getThumbKnobBind: ke,
-		tooltipProps: o(() => P.value?.tooltip),
-		readThumbValue: (e) => S(W.value, e, L.value)
+		getThumbKnobBind: De,
+		tooltipProps: o(() => F.value?.tooltip),
+		readThumbValue: (e) => C(G.value, e, R.value)
 	};
 }
 //#endregion
-export { x as sliderBridgeKeys, w as useSlider };
+export { S as sliderBridgeKeys, T as useSlider };

package/dist/Components/Slider/slider.types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
 import { SliderRangeValue, SliderStopInput } from '@bridge-ui/core/Domain';
-import { BaseFieldInvalidated, SliderColor, SliderInvalidated, SliderRounded } from '@bridge-ui/core/Tokens';
+import { SliderColor, SliderRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
 import { TooltipOwnProps } from '../Tooltip/tooltip.types';
@@ -38,18 +38,11 @@ export interface SliderClasses extends BaseFieldClasses {
      */
     track?: string;
 }
-export interface SliderCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
+export interface SliderCustomProps extends BaseFieldCustomProps {
     /**
      * Props forwarded to the filled bar.
      */
     bar?: HTMLAttributes;
-    /**
-     * Control error chrome (`bar`, `thumb`, `track`, …). Error message color comes
-     * from {@link BaseField}; pass `errorMessage` here to override.
-     *
-     * @default undefined
-     */
-    invalidated?: Partial<SliderInvalidated & BaseFieldInvalidated>;
     /**
      * Props forwarded to stop markers.
      */

package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js

@@ -66,7 +66,8 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 			onLeaveComplete: () => M("leave-complete"),
 			onShowChange: (e) => M("show-change", e)
 		}), Y = i(() => !!(j.icon || K.value || I.value.img)), X = i(() => !!(j.title || I.value.title)), Z = i(() => !!(j.description || I.value.description)), Q = i(() => !!j.right), $ = i(() => I.value.teleportTo === !1), ee = i(() => I.value.teleportTo === !1 ? "body" : I.value.teleportTo);
-		return (e, n) => (_(), a(r, {
+		return (e, n) => b(L) ? (_(), a(r, {
+			key: 0,
 			to: ee.value,
 			disabled: $.value
 		}, [b(L) && b(V) ? (_(), s("div", g(m({ key: 0 }, b(H))), [c("div", w, [c("div", m(b(z), { class: b(C)(b(z).class, { flex: Q.value }) }), [
@@ -155,7 +156,7 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 			], 2)], 16),
 			v(e.$slots, "right"),
 			b(W) ? (_(), s("div", g(m({ key: 0 }, b(G))), null, 16)) : o("", !0)
-		], 16)) : o("", !0)], 8, ["to", "disabled"]));
+		], 16)) : o("", !0)], 8, ["to", "disabled"])) : o("", !0);
 	}
 });
 //#endregion

package/dist/Components/Step/Step.js

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

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

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

@@ -0,0 +1,32 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
+import r from "../Icon/Icon.js";
+import { useStep as i } from "./composables/useStep.js";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v } from "vue";
+//#region src/Components/Step/Step.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "Step",
+	props: {
+		classes: {},
+		completed: { type: Boolean },
+		customProps: {},
+		description: {},
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		icon: {},
+		label: {}
+	},
+	setup(d) {
+		let { slots: y, merged: b, rootBind: x, textBind: S, iconBind: C, labelBind: w, stepNumber: T, showContent: E, contentBind: D, triggerBind: O, resolvedIcon: k, indicatorBind: A, connectorBind: j, descriptionBind: M } = i(d);
+		return (i, d) => (h(), c("li", m(f(v(x))), [
+			l("div", m(f(v(j))), null, 16),
+			l("button", m(f(v(O))), [l("span", m(f(v(A))), [v(e)(v(y), "icon") ? g(i.$slots, "icon", {}, void 0, void 0, 0) : v(k) ? (h(), o(v(r), p({
+				key: 1,
+				icon: v(k)
+			}, v(C)), null, 16, ["icon"])) : (h(), c(a, { key: 2 }, [u(_(v(T)), 1)], 64))], 16), v(t)(v(y), "label", v(b).label) || v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 0 }, v(S))), [v(t)(v(y), "label", v(b).label) ? (h(), c("span", m(p({ key: 0 }, v(w))), [v(e)(v(y), "label") ? g(i.$slots, "label", {}, void 0, void 0, 0) : v(n)(v(b).label) ? (h(), c(a, { key: 1 }, [u(_(v(b).label), 1)], 64)) : s("", !0)], 16)) : s("", !0), v(t)(v(y), "description", v(b).description) ? (h(), c("span", m(p({ key: 1 }, v(M))), [v(e)(v(y), "description") ? g(i.$slots, "description", {}, void 0, void 0, 0) : v(n)(v(b).description) ? (h(), c(a, { key: 1 }, [u(_(v(b).description), 1)], 64)) : s("", !0)], 16)) : s("", !0)], 16)) : s("", !0)], 16),
+			v(E) ? (h(), c("div", m(p({ key: 0 }, v(D))), [g(i.$slots, "default")], 16)) : s("", !0)
+		], 16));
+	}
+});
+//#endregion
+export { y as default };

package/dist/Components/Step/composables/useStep.d.ts

@@ -0,0 +1,56 @@
+import { IconSize } from '@bridge-ui/core/Tokens';
+import { StepOwnProps, StepProps } from '../step.types';
+export declare function useStep(props: StepOwnProps): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    index: import('vue').ComputedRef<number>;
+    status: import('vue').ComputedRef<import('@bridge-ui/core/Domain').StepperStepStatus>;
+    merged: import('vue').ComputedRef<StepOwnProps>;
+    isError: import('vue').ComputedRef<boolean>;
+    iconSize: import('vue').ComputedRef<keyof IconSize>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<StepProps, "error" | "icon" | "classes" | "customProps" | "label" | "disabled" | "description" | "completed">>>;
+    textBind: import('vue').ComputedRef<{
+        class: string;
+    }>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        size: keyof IconSize;
+        class: string;
+    }, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    clickable: import('vue').ComputedRef<boolean>;
+    labelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    stepNumber: import('vue').ComputedRef<string>;
+    isVertical: import('vue').ComputedRef<boolean>;
+    showContent: import('vue').ComputedRef<boolean>;
+    isCompleted: import('vue').ComputedRef<boolean>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        role: string;
+        id: string;
+        "aria-labelledby": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        id: string;
+        type: "button";
+        disabled: true | undefined;
+        tabindex: number | undefined;
+        "aria-invalid": boolean | undefined;
+        onClick: ((event: MouseEvent) => void) | undefined;
+        onKeydown: ((event: KeyboardEvent) => void) | undefined;
+        "aria-current": "step" | undefined;
+        "aria-controls": string | undefined;
+        class: string;
+    }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    resolvedIcon: import('vue').ComputedRef<import('../../..').IconSource | undefined>;
+    indicatorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    connectorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        "aria-hidden": boolean;
+        "data-part": string;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};