@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/carousel.js

@@ -1,12 +1,13 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { n as t } from "./button-BXzhydVB.js";
-import { t as n } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
-import { ArrowLeft as w, ArrowRight as T, ChevronDown as E, ChevronLeft as D, ChevronRight as O, ChevronUp as k } from "@lucide/vue";
-import { createInjectionState as A } from "@vueuse/core";
-import j from "embla-carousel-vue";
-var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
-	let [i, a] = j({
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { n as t } from "./useReducedMotion-vCXA_vyM.js";
+import { t as n } from "./button-Bu9F4uU6.js";
+import { t as r } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useModel as S, watch as C, withCtx as w } from "vue";
+import { ChevronDown as T, ChevronLeft as E, ChevronRight as D, ChevronUp as O } from "@lucide/vue";
+import { createInjectionState as k } from "@vueuse/core";
+import A from "embla-carousel-vue";
+var [j, M] = k(({ opts: e, orientation: t, plugins: n }, r) => {
+	let [i, a] = A({
 		duration: 30,
 		...e,
 		axis: t === "horizontal" ? "x" : "y"
@@ -17,11 +18,11 @@ var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
 	function s() {
 		a.value?.scrollNext();
 	}
-	let c = g(!1), l = g(!1);
+	let c = _(!1), l = _(!1);
 	function u(e) {
 		c.value = e?.canScrollNext() || !1, l.value = e?.canScrollPrev() || !1;
 	}
-	return m(() => {
+	return h(() => {
 		a.value && (a.value?.on("init", u), a.value?.on("reInit", u), a.value?.on("select", u), r("init-api", a.value));
 	}), {
 		carouselRef: i,
@@ -33,16 +34,21 @@ var [M, N] = A(({ opts: e, orientation: t, plugins: n }, r) => {
 		orientation: t
 	};
 });
-function P() {
-	let e = N();
+function N() {
+	let e = M();
 	if (!e) throw Error("useCarousel must be used within a <Carousel />");
 	return e;
 }
 //#endregion
-//#region src/components/carousel/Carousel.vue
-var F = /* @__PURE__ */ l({
+//#region src/components/carousel/Carousel.vue?vue&type=script&setup=true&lang.ts
+var P = [
+	"role",
+	"aria-roledescription",
+	"aria-label"
+], F = /* @__PURE__ */ u({
 	__name: "Carousel",
-	props: /* @__PURE__ */ u({
+	props: /*@__PURE__*/ d({
+		ariaLabel: {},
 		opts: {},
 		plugins: {},
 		orientation: { default: "horizontal" },
@@ -57,53 +63,54 @@ var F = /* @__PURE__ */ l({
 		active: { default: 0 },
 		activeModifiers: {}
 	}),
-	emits: /* @__PURE__ */ u(["init-api"], ["update:active"]),
+	emits: /*@__PURE__*/ d(["init-api"], ["update:active"]),
 	setup(t, { expose: n, emit: r }) {
-		let i = t, a = r, s = x(t, "active"), { canScrollNext: c, canScrollPrev: l, carouselApi: u, carouselRef: d, orientation: p, scrollNext: m, scrollPrev: g } = M(i, a);
-		function v(e) {
+		let a = t, o = i(() => a.ariaLabel?.trim() || void 0), c = r, l = S(t, "active"), { canScrollNext: u, canScrollPrev: d, carouselApi: f, carouselRef: m, orientation: h, scrollNext: _, scrollPrev: y } = j(a, c);
+		function b(e) {
 			let t = e.selectedScrollSnap();
-			e.previousScrollSnap() !== t && t !== s.value && (s.value = t);
+			e.previousScrollSnap() !== t && t !== l.value && (l.value = t);
 		}
-		S(u, (e) => {
-			e && (e.selectedScrollSnap() !== s.value && (s.value = e.selectedScrollSnap()), e.on("select", v), e.on("reInit", v));
-		}, { immediate: !0 }), S(s, (e) => {
-			let t = u.value;
+		C(f, (e) => {
+			e && (e.selectedScrollSnap() !== l.value && (l.value = e.selectedScrollSnap()), e.on("select", b), e.on("reInit", b));
+		}, { immediate: !0 }), C(l, (e) => {
+			let t = f.value;
 			!t || !Number.isInteger(e) || t.selectedScrollSnap() !== e && t.scrollTo(e);
 		}), n({
-			canScrollNext: c,
-			canScrollPrev: l,
-			carouselApi: u,
-			carouselRef: d,
-			orientation: p,
-			scrollNext: m,
-			scrollPrev: g
+			canScrollNext: u,
+			canScrollPrev: d,
+			carouselApi: f,
+			carouselRef: m,
+			orientation: h,
+			scrollNext: _,
+			scrollPrev: y
 		});
-		function y(e) {
-			let t = i.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", n = i.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+		function w(e) {
+			let t = a.orientation === "vertical" ? "ArrowUp" : "ArrowLeft", n = a.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
 			if (e.key === t) {
-				e.preventDefault(), g();
+				e.preventDefault(), y();
 				return;
 			}
-			e.key === n && (e.preventDefault(), m());
+			e.key === n && (e.preventDefault(), _());
 		}
-		return (t, n) => (h(), o("div", {
+		return (t, n) => (g(), s("div", {
 			"data-slot": "carousel",
-			class: f(b(e)("relative", i.class)),
-			role: "region",
-			"aria-roledescription": "carousel",
+			class: p(x(e)("relative", a.class)),
+			role: o.value ? "region" : void 0,
+			"aria-roledescription": o.value ? "carousel" : void 0,
+			"aria-label": o.value,
 			tabindex: "0",
-			onKeydown: y
-		}, [_(t.$slots, "default", {
-			canScrollNext: b(c),
-			canScrollPrev: b(l),
-			carouselApi: b(u),
-			carouselRef: b(d),
-			orientation: b(p),
-			scrollNext: b(m),
-			scrollPrev: b(g)
-		})], 34));
+			onKeydown: w
+		}, [v(t.$slots, "default", {
+			canScrollNext: x(u),
+			canScrollPrev: x(d),
+			carouselApi: x(f),
+			carouselRef: x(m),
+			orientation: x(h),
+			scrollNext: x(_),
+			scrollPrev: x(y)
+		})], 42, P));
 	}
-}), I = .035, L = .3, R = /* @__PURE__ */ n(/* @__PURE__ */ l({
+}), I = .035, L = .3, R = /*#__PURE__*/ r(/* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "CarouselContent",
 	props: {
@@ -119,41 +126,43 @@ var F = /* @__PURE__ */ l({
 			Array
 		] }
 	},
-	setup(t) {
-		let n = t, { carouselRef: r, carouselApi: i, orientation: a } = P(), c = g(null), l = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-		function u() {
-			let e = i.value;
+	setup(n) {
+		let r = n, { carouselRef: i, carouselApi: a, orientation: o } = N(), l = _(null), u = t();
+		function d() {
+			let e = a.value;
 			if (!e) return;
 			let t = e.slideNodes();
-			if (!n.arrival || l) {
+			if (!r.arrival || u.value) {
 				for (let e of t) e.style.transform = "", e.style.opacity = "";
 				return;
 			}
-			let r = e.scrollProgress(), a = e.scrollSnapList();
+			let n = e.scrollProgress(), i = e.scrollSnapList();
 			t.forEach((e, t) => {
-				let n = a[t] ?? r, i = Math.min(Math.abs(n - r) * (a.length - 1 || 1), 1);
-				e.style.transform = `scale(${(1 - I * i).toFixed(4)})`, e.style.opacity = (1 - L * i).toFixed(4);
+				let r = i[t] ?? n, a = Math.min(Math.abs(r - n) * (i.length - 1 || 1), 1);
+				e.style.transform = `scale(${(1 - I * a).toFixed(4)})`, e.style.opacity = (1 - L * a).toFixed(4);
 			});
 		}
-		let f = null;
-		function m(e) {
-			!e || f === e || (f = e, e.on("scroll", u), e.on("reInit", u), e.on("init", u), u());
+		let p = null;
+		function h() {
+			p &&= (p.off("scroll", d), p.off("reInit", d), p.off("init", d), null);
+		}
+		function y(e) {
+			p !== e && (h(), e && (p = e, e.on("scroll", d), e.on("reInit", d), e.on("init", d), d()));
 		}
-		return S(i, (e) => m(e), { immediate: !0 }), S(() => n.arrival, () => u()), p(() => {
-			let e = f;
-			e && (e.off("scroll", u), e.off("reInit", u), e.off("init", u), f = null);
-		}), (t, i) => (h(), o("div", {
+		return C(a, (e) => y(e), { immediate: !0 }), C([() => r.arrival, u], () => d()), m(() => {
+			h();
+		}), (t, n) => (g(), s("div", {
 			ref_key: "carouselRef",
-			ref: r,
+			ref: i,
 			"data-slot": "carousel-content",
 			class: "carousel-viewport overflow-hidden"
-		}, [s("div", d({
+		}, [c("div", f({
 			ref_key: "trackEl",
-			ref: c,
-			class: b(e)("carousel-track flex", b(a) === "horizontal" ? "-ml-4" : "-mt-4 flex-col", n.class)
-		}, t.$attrs), [_(t.$slots, "default", {}, void 0, !0)], 16)], 512));
+			ref: l,
+			class: x(e)("carousel-track flex", x(o) === "horizontal" ? "-ml-4" : "-mt-4 flex-col", r.class)
+		}, t.$attrs), [v(t.$slots, "default", {}, void 0, !0)], 16)], 512));
 	}
-}), [["__scopeId", "data-v-f78259db"]]), z = /* @__PURE__ */ l({
+}), [["__scopeId", "data-v-59f298d0"]]), z = /* @__PURE__ */ u({
 	__name: "CarouselItem",
 	props: { class: { type: [
 		Boolean,
@@ -163,53 +172,19 @@ var F = /* @__PURE__ */ l({
 		Array
 	] } },
 	setup(t) {
-		let n = t, { orientation: r } = P();
-		return (t, i) => (h(), o("div", {
+		let n = t, { orientation: r } = N();
+		return (t, i) => (g(), s("div", {
 			"data-slot": "carousel-item",
 			role: "group",
 			"aria-roledescription": "slide",
-			class: f(b(e)("min-w-0 shrink-0 grow-0 basis-full", b(r) === "horizontal" ? "pl-4" : "pt-4", n.class))
-		}, [_(t.$slots, "default")], 2));
+			class: p(x(e)("min-w-0 shrink-0 grow-0 basis-full", x(r) === "horizontal" ? "pl-4" : "pt-4", n.class))
+		}, [v(t.$slots, "default")], 2));
 	}
-}), B = /* @__PURE__ */ l({
-	__name: "CarouselNext",
-	props: {
-		variant: { default: "outline" },
-		size: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(n) {
-		let r = n, { orientation: a, canScrollNext: o, scrollNext: l } = P();
-		return (u, d) => (h(), i(b(t), {
-			"data-slot": "carousel-next",
-			disabled: !b(o),
-			class: f(b(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", b(a) === "horizontal" ? "top-1/2 -translate-y-1/2 right-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 bottom-[calc(-1*var(--carousel-nav-offset))]", r.class)),
-			variant: n.variant,
-			size: n.size,
-			"icon-only": "",
-			onClick: b(l)
-		}, {
-			default: C(() => [_(u.$slots, "default", {}, () => [c(b(T)), d[0] ||= s("span", { class: "sr-only" }, "Next Slide", -1)])]),
-			_: 3
-		}, 8, [
-			"disabled",
-			"class",
-			"variant",
-			"size",
-			"onClick"
-		]));
-	}
-}), V = {
+}), B = {
 	key: 0,
 	"data-slot": "carousel-pager-counter",
 	class: "glass-pager-ring text-mono-caption tabular-nums"
-}, H = /* @__PURE__ */ l({
+}, V = /* @__PURE__ */ u({
 	__name: "CarouselPager",
 	props: {
 		showCounter: {
@@ -224,45 +199,45 @@ var F = /* @__PURE__ */ l({
 			Array
 		] }
 	},
-	setup(n) {
-		let s = n, { carouselApi: l, canScrollNext: u, canScrollPrev: d, orientation: p, scrollNext: _, scrollPrev: x } = P(), w = g(0), T = g(0);
+	setup(t) {
+		let r = t, { carouselApi: c, canScrollNext: u, canScrollPrev: d, orientation: f, scrollNext: m, scrollPrev: v } = N(), S = _(0), k = _(0);
 		function A() {
-			let e = l.value;
-			e && (w.value = e.selectedScrollSnap(), T.value = e.scrollSnapList().length);
+			let e = c.value;
+			e && (S.value = e.selectedScrollSnap(), k.value = e.scrollSnapList().length);
 		}
-		S(l, (e) => {
+		C(c, (e) => {
 			e && (A(), e.on("select", A), e.on("reInit", A));
-		}, { immediate: !0 }), m(A);
-		let j = r(() => p === "vertical" ? k : D), M = r(() => p === "vertical" ? E : O);
-		return (r, l) => (h(), o("div", {
+		}, { immediate: !0 }), h(A);
+		let j = i(() => f === "vertical" ? O : E), M = i(() => f === "vertical" ? T : D);
+		return (i, c) => (g(), s("div", {
 			"data-slot": "carousel-pager",
-			class: f(b(e)("inline-flex items-center gap-2", b(p) === "vertical" && "flex-col", s.class))
+			class: p(x(e)("inline-flex items-center gap-2", x(f) === "vertical" && "flex-col", r.class))
 		}, [
-			c(b(t), {
-				variant: "ghost",
+			l(x(n), {
+				emphasis: "quiet",
 				iconOnly: "",
-				disabled: !b(d),
-				"aria-label": b(p) === "vertical" ? "Previous slide (up)" : "Previous slide",
+				disabled: !x(d),
+				"aria-label": x(f) === "vertical" ? "Previous slide (up)" : "Previous slide",
 				"data-slot": "carousel-pager-prev",
-				onClick: b(x)
+				onClick: x(v)
 			}, {
-				default: C(() => [(h(), i(v(j.value), { class: "size-4" }))]),
+				default: w(() => [(g(), a(y(j.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
 				"aria-label",
 				"onClick"
 			]),
-			n.showCounter && T.value > 0 ? (h(), o("span", V, y(w.value + 1) + " / " + y(T.value), 1)) : a("", !0),
-			c(b(t), {
-				variant: "ghost",
+			t.showCounter && k.value > 0 ? (g(), s("span", B, b(S.value + 1) + " / " + b(k.value), 1)) : o("", !0),
+			l(x(n), {
+				emphasis: "quiet",
 				iconOnly: "",
-				disabled: !b(u),
-				"aria-label": b(p) === "vertical" ? "Next slide (down)" : "Next slide",
+				disabled: !x(u),
+				"aria-label": x(f) === "vertical" ? "Next slide (down)" : "Next slide",
 				"data-slot": "carousel-pager-next",
-				onClick: b(_)
+				onClick: x(m)
 			}, {
-				default: C(() => [(h(), i(v(M.value), { class: "size-4" }))]),
+				default: w(() => [(g(), a(y(M.value), { class: "size-4" }))]),
 				_: 1
 			}, 8, [
 				"disabled",
@@ -271,110 +246,6 @@ var F = /* @__PURE__ */ l({
 			])
 		], 2));
 	}
-}), U = /* @__PURE__ */ l({
-	__name: "CarouselPrevious",
-	props: {
-		variant: { default: "outline" },
-		size: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(n) {
-		let r = n, { orientation: a, canScrollPrev: o, scrollPrev: l } = P();
-		return (u, d) => (h(), i(b(t), {
-			"data-slot": "carousel-previous",
-			disabled: !b(o),
-			class: f(b(e)("absolute h-(--carousel-nav-size) w-(--carousel-nav-size) rounded-pill", b(a) === "horizontal" ? "top-1/2 -translate-y-1/2 left-[calc(-1*var(--carousel-nav-offset))]" : "left-1/2 -translate-x-1/2 rotate-90 top-[calc(-1*var(--carousel-nav-offset))]", r.class)),
-			variant: n.variant,
-			size: n.size,
-			"icon-only": "",
-			onClick: b(l)
-		}, {
-			default: C(() => [_(u.$slots, "default", {}, () => [c(b(w)), d[0] ||= s("span", { class: "sr-only" }, "Previous Slide", -1)])]),
-			_: 3
-		}, 8, [
-			"disabled",
-			"class",
-			"variant",
-			"size",
-			"onClick"
-		]));
-	}
-}), W = {
-	key: 0,
-	"data-slot": "glass-carousel-pager-counter",
-	class: "rounded-pill border border-border bg-card px-3 py-1 text-mono-caption tabular-nums shadow-cartoon-sm"
-}, G = /* @__PURE__ */ l({
-	__name: "GlassCarouselPager",
-	props: {
-		index: {},
-		total: {},
-		orientation: { default: "horizontal" },
-		showCounter: {
-			type: Boolean,
-			default: !0
-		},
-		loop: {
-			type: Boolean,
-			default: !1
-		},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	emits: [
-		"prev",
-		"next",
-		"select"
-	],
-	setup(n, { emit: s }) {
-		let l = n, u = s, d = r(() => l.loop ? l.total > 1 : l.index > 0), p = r(() => l.loop ? l.total > 1 : l.index < l.total - 1);
-		function m() {
-			d.value && (l.loop ? u("select", (l.index - 1 + l.total) % l.total) : (u("prev"), u("select", Math.max(0, l.index - 1))));
-		}
-		function g() {
-			p.value && (l.loop ? u("select", (l.index + 1) % l.total) : (u("next"), u("select", Math.min(l.total - 1, l.index + 1))));
-		}
-		let x = r(() => l.orientation === "vertical" ? k : D), S = r(() => l.orientation === "vertical" ? E : O);
-		return (r, s) => (h(), o("div", {
-			"data-slot": "glass-carousel-pager",
-			class: f(b(e)("inline-flex items-center gap-2", n.orientation === "vertical" && "flex-col", "max-md:flex-wrap max-md:justify-center max-md:gap-2", l.class))
-		}, [
-			c(b(t), {
-				variant: "outline",
-				iconOnly: "",
-				disabled: !d.value,
-				"aria-label": n.orientation === "vertical" ? "Previous slide (up)" : "Previous slide",
-				"data-slot": "glass-carousel-pager-prev",
-				onClick: m
-			}, {
-				default: C(() => [(h(), i(v(x.value), { class: "size-4" }))]),
-				_: 1
-			}, 8, ["disabled", "aria-label"]),
-			n.showCounter && n.total > 0 ? (h(), o("span", W, y(n.index + 1) + " / " + y(n.total), 1)) : a("", !0),
-			c(b(t), {
-				variant: "outline",
-				iconOnly: "",
-				disabled: !p.value,
-				"aria-label": n.orientation === "vertical" ? "Next slide (down)" : "Next slide",
-				"data-slot": "glass-carousel-pager-next",
-				onClick: g
-			}, {
-				default: C(() => [(h(), i(v(S.value), { class: "size-4" }))]),
-				_: 1
-			}, 8, ["disabled", "aria-label"]),
-			_(r.$slots, "trailing")
-		], 2));
-	}
 });
 //#endregion
-export { F as Carousel, R as CarouselContent, z as CarouselItem, B as CarouselNext, H as CarouselPager, U as CarouselPrevious, G as GlassCarouselPager, P as useCarousel };
+export { F as Carousel, R as CarouselContent, z as CarouselItem, V as CarouselPager, N as useCarousel };

package/dist/chip-DFZQr6rV.js

@@ -0,0 +1,129 @@
+import { n as e, t } from "./class-names-Cpy5eaBk.js";
+import { t as n } from "./useAccentTone-DyInfHXE.js";
+import { computed as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, unref as d, useAttrs as f, watchEffect as p, withCtx as m } from "vue";
+import { Toggle as h } from "reka-ui";
+//#region src/components/chip/chipVariants.ts
+var g = "glass-chip glass-capsule accent-tone inline-flex items-center justify-center font-sans text-muted-foreground select-none", _ = "glass-chip--interactive glass-capsule-hover focus-ring cursor-pointer outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-disabled", v = {
+	sm: "gap-1 px-2.5 py-1 text-caption",
+	md: "gap-1.5 px-3.5 py-1.5 text-small",
+	lg: "gap-2 px-5 py-2 text-base"
+}, y = {
+	pill: "",
+	cell: "glass-chip--cell flex-col gap-1.5 px-2 py-2.5 text-micro",
+	icon: "glass-chip--icon aspect-square p-0"
+}, b = {
+	sm: "size-8",
+	md: "size-10",
+	lg: "size-12"
+};
+function x(t = {}) {
+	let n = t.size ?? "md", r = t.shape ?? "pill";
+	return e(g, t.interactive && _, v[n], y[r], r === "icon" && b[n], t.class, t.className);
+}
+//#endregion
+//#region src/components/chip/Chip.vue?vue&type=script&setup=true&lang.ts
+var S = [
+	"disabled",
+	"data-mode",
+	"data-shape",
+	"data-surface"
+], C = [
+	"data-mode",
+	"data-shape",
+	"data-surface",
+	"data-disabled"
+], w = { class: "glass-chip__content" }, T = ["aria-label", "disabled"], E = [
+	"data-mode",
+	"data-shape",
+	"data-surface"
+], D = /* @__PURE__ */ s({
+	name: "Chip",
+	inheritAttrs: !1,
+	__name: "Chip",
+	props: {
+		mode: {},
+		modelValue: { type: [Boolean, null] },
+		defaultValue: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		required: {},
+		removeLabel: {},
+		shape: {},
+		size: {},
+		tone: {},
+		surface: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue", "remove"],
+	setup(e, { emit: s }) {
+		let g = e, _ = s, v = f(), y = r(() => g.mode ?? "static"), b = r(() => g.shape ?? "pill"), D = r(() => g.size ?? "md"), O = r(() => Object.fromEntries(Object.entries(v).filter(([e]) => e !== "style" && !/^(role|aria-pressed|data-state|name|required)$/i.test(e)))), k = r(() => Object.fromEntries(Object.entries(v).filter(([e]) => e !== "style" && !/^on/i.test(e) && !/^(role|tabindex|aria-pressed|data-state|name|required)$/i.test(e)))), { toneStyle: A } = n(() => g.tone ?? "var(--primary)"), j = r(() => t(x({
+			interactive: y.value === "selectable" || y.value === "action",
+			shape: b.value,
+			size: D.value
+		}), g.class)), M = r(() => g.tone === void 0 ? void 0 : {
+			...A.value,
+			"--glass-fill-tint": g.tone,
+			"--glass-fill-strength": "var(--chip-glass-strength, 12%)"
+		}), N = r(() => [M.value, v.style]);
+		return p(() => {
+			if (g.mode === "removable" && !g.removeLabel?.trim()) throw TypeError("[Chip] mode=\"removable\" requires a non-empty removeLabel.");
+		}), (t, n) => y.value === "selectable" ? (l(), i(d(h), c({ key: 0 }, O.value, {
+			"model-value": e.modelValue,
+			"default-value": e.defaultValue,
+			disabled: e.disabled,
+			class: j.value,
+			style: N.value,
+			"data-mode": y.value,
+			"data-shape": b.value,
+			"data-surface": e.surface,
+			"onUpdate:modelValue": n[0] ||= (e) => _("update:modelValue", e)
+		}), {
+			default: m(() => [u(t.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"model-value",
+			"default-value",
+			"disabled",
+			"class",
+			"style",
+			"data-mode",
+			"data-shape",
+			"data-surface"
+		])) : y.value === "action" ? (l(), a("button", c({ key: 1 }, O.value, {
+			type: "button",
+			disabled: e.disabled,
+			class: j.value,
+			style: N.value,
+			"data-mode": y.value,
+			"data-shape": b.value,
+			"data-surface": e.surface
+		}), [u(t.$slots, "default")], 16, S)) : y.value === "removable" ? (l(), a("span", c({ key: 2 }, k.value, {
+			class: j.value,
+			style: N.value,
+			"data-mode": y.value,
+			"data-shape": b.value,
+			"data-surface": e.surface,
+			"data-disabled": e.disabled || void 0
+		}), [o("span", w, [u(t.$slots, "default")]), o("button", {
+			type: "button",
+			class: "glass-chip__remove focus-ring",
+			"aria-label": e.removeLabel,
+			disabled: e.disabled,
+			onClick: n[1] ||= (e) => _("remove", e)
+		}, [...n[2] ||= [o("span", { "aria-hidden": "true" }, "×", -1)]], 8, T)], 16, C)) : (l(), a("span", c({ key: 3 }, k.value, {
+			class: j.value,
+			style: N.value,
+			"data-mode": y.value,
+			"data-shape": b.value,
+			"data-surface": e.surface
+		}), [u(t.$slots, "default")], 16, E));
+	}
+});
+//#endregion
+export { x as n, D as t };

package/dist/chip.d.ts

@@ -1,10 +1 @@
-// @mkbabb/glass-ui/chip — the ONE folded chip (BI.W-CHIP-FOLD).
-//
-// The value.js-QUARANTINED leaf of the chip family: <Chip>'s tonal ink solve rides a
-// dynamic `import('./accent-tone-solve')` boundary INSIDE `useAccentTone` (the sync
-// value.js-free shell), so a plain-boolean toggle (a `var()` / unset tone) stays
-// value.js-free — but a concrete `#hex`/`oklch(…)` tone loads value.js. So <Chip>
-// ships as its OWN subpath leaf and is NOT on the value.js-FREE root barrel (the
-// SCC-trap discipline; the /border-progress + /easing precedent — a value.js-bearing
-// component carves OFF the value.js-free root). A consumer imports here.
 export * from "./components/chip";