@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/command-SFqDQ65h.js

@@ -0,0 +1,320 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./selection-DqIULxRG.js";
+import { c as n, n as r } from "./dialog-TNRDkcE4.js";
+import { t as i } from "./primitive-B2t2jdqM.js";
+import { t as a } from "./floating-dB5TD88k.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, inject as m, mergeProps as h, normalizeClass as g, openBlock as _, provide as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, withCtx as C } from "vue";
+import { ComboboxContent as w, ComboboxEmpty as T, ComboboxGroup as E, ComboboxInput as D, ComboboxItem as O, ComboboxLabel as k, ComboboxRoot as A, ComboboxSeparator as j } from "reka-ui";
+import { Search as M } from "@lucide/vue";
+//#endregion
+//#region src/components/command/Command.vue
+var N = /* @__PURE__ */ p({
+	name: "Command",
+	inheritAttrs: !1,
+	__name: "Command",
+	props: {
+		modelValue: {},
+		open: {
+			type: Boolean,
+			default: !0
+		},
+		disabled: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" }
+	},
+	emits: ["update:modelValue", "update:open"],
+	setup(n, { emit: r }) {
+		let i = n, a = r;
+		function o(e) {
+			if (e !== null && !t(e)) throw TypeError("[glass-ui] Command received a non-scalar value.");
+			a("update:modelValue", e);
+		}
+		return (t, n) => (_(), s(x(A), {
+			"data-slot": "command",
+			"model-value": i.modelValue,
+			open: i.open,
+			disabled: i.disabled,
+			"data-surface": i.surface,
+			class: g(x(e)("command glass-floating", i.class)),
+			"onUpdate:modelValue": o,
+			"onUpdate:open": n[0] ||= (e) => a("update:open", e)
+		}, {
+			default: C(() => [y(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"model-value",
+			"open",
+			"disabled",
+			"data-surface",
+			"class"
+		]));
+	}
+}), P = Symbol("glass-command-dialog");
+function F(e) {
+	v(P, { dismiss: e });
+}
+function I() {
+	return m(P, null);
+}
+//#endregion
+//#region src/components/command/CommandDialog.vue
+var L = /* @__PURE__ */ p({
+	name: "CommandDialog",
+	inheritAttrs: !1,
+	__name: "CommandDialog",
+	props: {
+		surface: { default: "glass" },
+		modelValue: {},
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		unmountOnHide: { type: Boolean }
+	},
+	emits: ["update:open", "update:modelValue"],
+	setup(e, { emit: t }) {
+		let i = e, a = t;
+		F(() => a("update:open", !1));
+		let c = o(() => {
+			let { surface: e, modelValue: t, ...n } = i;
+			return n;
+		});
+		return (e, t) => (_(), s(x(n), h(c.value, { "onUpdate:open": t[1] ||= (e) => a("update:open", e) }), {
+			default: C(() => [f(x(r), {
+				surface: i.surface,
+				class: "command-dialog__content"
+			}, {
+				default: C(() => [f(N, {
+					"model-value": i.modelValue,
+					class: "command-dialog__command",
+					"onUpdate:modelValue": t[0] ||= (e) => a("update:modelValue", e)
+				}, {
+					default: C(() => [y(e.$slots, "default")]),
+					_: 3
+				}, 8, ["model-value"])]),
+				_: 3
+			}, 8, ["surface"])]),
+			_: 3
+		}, 16));
+	}
+}), R = /* @__PURE__ */ p({
+	name: "CommandEmpty",
+	inheritAttrs: !1,
+	__name: "CommandEmpty",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, r = S(), a = o(() => i(r));
+		return (t, r) => (_(), s(x(T), h(a.value, {
+			"data-slot": "command-empty",
+			class: x(e)("command__empty", n.class)
+		}), {
+			default: C(() => [y(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), z = /* @__PURE__ */ p({
+	name: "CommandGroup",
+	inheritAttrs: !1,
+	__name: "CommandGroup",
+	props: {
+		heading: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let n = t, r = S(), a = o(() => i(r));
+		return (t, r) => (_(), s(x(E), h(a.value, {
+			"data-slot": "command-group",
+			class: x(e)("command__group", n.class)
+		}), {
+			default: C(() => [n.heading ? (_(), s(x(k), {
+				key: 0,
+				class: "command__group-label"
+			}, {
+				default: C(() => [d(b(n.heading), 1)]),
+				_: 1
+			})) : c("", !0), y(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), B = {
+	class: "command__input-wrapper",
+	"data-slot": "command-input-wrapper"
+}, V = /* @__PURE__ */ p({
+	name: "CommandInput",
+	inheritAttrs: !1,
+	__name: "CommandInput",
+	props: {
+		modelValue: {},
+		autoFocus: { type: Boolean },
+		disabled: { type: Boolean },
+		placeholder: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let r = t, a = n, s = S(), c = o(() => ({
+			...i(s),
+			placeholder: r.placeholder
+		}));
+		return (t, n) => (_(), l("div", B, [f(x(M), {
+			class: "command__input-icon",
+			"aria-hidden": "true"
+		}), f(x(D), h(c.value, {
+			"data-slot": "command-input",
+			"model-value": r.modelValue,
+			"auto-focus": r.autoFocus,
+			disabled: r.disabled,
+			class: x(e)("command__input", r.class),
+			"onUpdate:modelValue": n[0] ||= (e) => a("update:modelValue", e)
+		}), null, 16, [
+			"model-value",
+			"auto-focus",
+			"disabled",
+			"class"
+		])]));
+	}
+}), H = /* @__PURE__ */ p({
+	name: "CommandItem",
+	inheritAttrs: !1,
+	__name: "CommandItem",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		textValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: ["select"],
+	setup(t, { emit: n }) {
+		let r = t, a = n, c = S(), l = o(() => i(c));
+		function u(e) {
+			if (r.disabled) {
+				e.preventDefault();
+				return;
+			}
+			a("select", e);
+		}
+		return (t, n) => (_(), s(x(O), h(l.value, {
+			"data-slot": "command-item",
+			value: r.value,
+			disabled: r.disabled,
+			"text-value": r.textValue,
+			class: x(e)("command__item interactive-item glass-menu-row", r.class),
+			onSelect: u
+		}), {
+			default: C(() => [y(t.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"value",
+			"disabled",
+			"text-value",
+			"class"
+		]));
+	}
+}), U = { role: "presentation" }, W = /* @__PURE__ */ p({
+	name: "CommandList",
+	inheritAttrs: !1,
+	__name: "CommandList",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside"
+	],
+	setup(t, { emit: n }) {
+		let r = t, i = n, c = S(), l = o(() => a(c)), d = I();
+		function f(e) {
+			i("escapeKeyDown", e), e.defaultPrevented || d?.dismiss();
+		}
+		return (t, n) => (_(), s(x(w), h(l.value, {
+			"data-slot": "command-list",
+			"disable-outside-pointer-events": !1,
+			"data-surface": r.surface,
+			class: x(e)("command__list", r.class),
+			onEscapeKeyDown: f,
+			onPointerDownOutside: n[0] ||= (e) => i("pointerDownOutside", e),
+			onFocusOutside: n[1] ||= (e) => i("focusOutside", e),
+			onInteractOutside: n[2] ||= (e) => i("interactOutside", e)
+		}), {
+			default: C(() => [u("div", U, [y(t.$slots, "default")])]),
+			_: 3
+		}, 16, ["data-surface", "class"]));
+	}
+}), G = /* @__PURE__ */ p({
+	name: "CommandSeparator",
+	inheritAttrs: !1,
+	__name: "CommandSeparator",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t, r = S(), a = o(() => i(r));
+		return (t, r) => (_(), s(x(j), h(a.value, {
+			"data-slot": "command-separator",
+			class: x(e)("command__separator", n.class)
+		}), {
+			default: C(() => [y(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), K = /* @__PURE__ */ p({
+	__name: "CommandShortcut",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (_(), l("span", {
+			"data-slot": "command-shortcut",
+			class: g(x(e)("command__shortcut", n.class))
+		}, [y(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { V as a, L as c, H as i, N as l, G as n, z as o, W as r, R as s, K as t };

package/dist/command.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./command-BjPjUU9z.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./command-SFqDQ65h.js";
 export { r as Command, t as CommandDialog, s as CommandEmpty, a as CommandGroup, e as CommandInput, n as CommandItem, o as CommandList, i as CommandSeparator, c as CommandShortcut };

package/dist/completion-seal.js

@@ -1,41 +1,41 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, onMounted as c, onScopeDispose as l, openBlock as u, readonly as d, ref as f, toDisplayString as p, toRef as m, unref as h, watch as g } from "vue";
-import { useMediaQuery as _ } from "@vueuse/core";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { n as t } from "./useReducedMotion-vCXA_vyM.js";
+import { Fragment as n, computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onMounted as l, onScopeDispose as u, openBlock as d, readonly as f, ref as p, toDisplayString as m, toRef as h, unref as g, watch as _ } from "vue";
 //#region src/components/completion-seal/composables/useCompletionSeal.ts
 function v(e) {
 	if (e != null) return typeof e == "function" ? e() : e.value;
 }
 function y(e = {}) {
-	let { play: t, respectReducedMotion: r = !0 } = e, i = f(!1), a = f(!1), o = _("(prefers-reduced-motion: reduce)"), s = n(() => r && o.value), u = null;
-	function p() {
-		u !== null && (cancelAnimationFrame(u), u = null), i.value = !1, a.value = !0;
-	}
+	let { play: n, respectReducedMotion: i = !0 } = e, a = p(!1), o = p(!1), s = t(), c = r(() => i && s.value), d = null;
 	function m() {
-		if (s.value) {
-			p();
+		d !== null && (cancelAnimationFrame(d), d = null), a.value = !1, o.value = !0;
+	}
+	function h() {
+		if (c.value) {
+			m();
 			return;
 		}
-		i.value = !1, typeof requestAnimationFrame == "function" ? (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
-			if (u = null, s.value) {
-				p();
+		a.value = !1, typeof requestAnimationFrame == "function" ? (d !== null && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+			if (d = null, c.value) {
+				m();
 				return;
 			}
-			i.value = !0, a.value = !0;
-		})) : (i.value = !0, a.value = !0);
+			a.value = !0, o.value = !0;
+		})) : (a.value = !0, o.value = !0);
 	}
-	return g(s, (e) => {
-		e && p();
-	}), l(() => {
-		u !== null && cancelAnimationFrame(u);
-	}), t == null ? c(m) : (c(() => {
-		v(t) && m();
-	}), g(() => v(t), (e, t) => {
-		e && !t && m();
+	return _(c, (e) => {
+		e && m();
+	}), u(() => {
+		d !== null && cancelAnimationFrame(d);
+	}), n == null ? l(h) : (l(() => {
+		v(n) && h();
+	}), _(() => v(n), (e, t) => {
+		e && !t && h();
 	})), {
-		playing: d(i),
-		drawn: d(a),
-		reduced: d(s),
-		draw: m
+		playing: f(a),
+		drawn: f(o),
+		reduced: f(c),
+		draw: h
 	};
 }
 var b = "0 0 64 64", x = {
@@ -69,7 +69,7 @@ var b = "0 0 64 64", x = {
 ], A = ["d"], j = {
 	key: 0,
 	class: "sr-only"
-}, M = /* @__PURE__ */ o({
+}, M = /* @__PURE__ */ s({
 	name: "CompletionSeal",
 	__name: "CompletionSeal",
 	props: {
@@ -79,53 +79,53 @@ var b = "0 0 64 64", x = {
 		personalBest: { type: Boolean },
 		class: {}
 	},
-	setup(o) {
-		let c = o, l = n(() => c.shape ?? "check"), d = n(() => l.value === "wordmark" ? x.wordmark : x.check), { playing: f, drawn: g } = y({ play: c.play === void 0 ? void 0 : m(c, "play") });
-		return (n, o) => (u(), i("div", {
-			class: s(["completion-seal", h(e)(c.class)]),
+	setup(t) {
+		let s = t, l = r(() => s.shape ?? "check"), u = r(() => l.value === "wordmark" ? x.wordmark : x.check), { playing: f, drawn: p } = y({ play: s.play === void 0 ? void 0 : h(s, "play") });
+		return (t, r) => (d(), a("div", {
+			class: c(["completion-seal", g(e)(s.class)]),
 			"data-shape": l.value,
-			"data-best": c.personalBest ? "" : void 0,
-			"data-play": h(f) ? "" : void 0,
-			"data-drawn": h(g) ? "" : void 0,
+			"data-best": s.personalBest ? "" : void 0,
+			"data-play": g(f) ? "" : void 0,
+			"data-drawn": g(p) ? "" : void 0,
 			role: "status",
 			"aria-live": "polite"
-		}, [(u(), i("svg", {
+		}, [(d(), a("svg", {
 			class: "completion-seal__svg",
-			viewBox: h(b),
+			viewBox: g(b),
 			"aria-hidden": "true",
 			focusable: "false"
-		}, [l.value === "disc" ? (u(), i(t, { key: 0 }, [
-			a("circle", {
+		}, [l.value === "disc" ? (d(), a(n, { key: 0 }, [
+			o("circle", {
 				class: "completion-seal__disc",
-				cx: h(C).cx,
-				cy: h(C).cy,
-				r: h(C).r
+				cx: g(C).cx,
+				cy: g(C).cy,
+				r: g(C).r
 			}, null, 8, E),
-			a("circle", {
+			o("circle", {
 				class: "completion-seal__mark completion-seal__ring",
-				cx: h(S).cx,
-				cy: h(S).cy,
-				r: h(S).r,
+				cx: g(S).cx,
+				cy: g(S).cy,
+				r: g(S).r,
 				pathLength: "100"
 			}, null, 8, D),
-			a("path", {
+			o("path", {
 				class: "completion-seal__mark completion-seal__check",
-				d: h(x).check,
+				d: g(x).check,
 				pathLength: "100"
 			}, null, 8, O)
-		], 64)) : l.value === "ring" ? (u(), i("circle", {
+		], 64)) : l.value === "ring" ? (d(), a("circle", {
 			key: 1,
 			class: "completion-seal__mark",
-			cx: h(S).cx,
-			cy: h(S).cy,
-			r: h(S).r,
+			cx: g(S).cx,
+			cy: g(S).cy,
+			r: g(S).r,
 			pathLength: "100"
-		}, null, 8, k)) : (u(), i("path", {
+		}, null, 8, k)) : (d(), a("path", {
 			key: 2,
 			class: "completion-seal__mark",
-			d: d.value,
+			d: u.value,
 			pathLength: "100"
-		}, null, 8, A))], 8, T)), c.label ? (u(), i("span", j, p(c.label), 1)) : r("", !0)], 10, w));
+		}, null, 8, A))], 8, T)), s.label ? (d(), a("span", j, m(s.label), 1)) : i("", !0)], 10, w));
 	}
 });
 //#endregion

package/dist/components/_shared/FeedbackMark.vue.d.ts

@@ -0,0 +1,11 @@
+import type { FeedbackMarkState } from "./feedback";
+type __VLS_Props = {
+    state?: FeedbackMarkState;
+    motion?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    state: FeedbackMarkState;
+    motion: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/_shared/axes.d.ts

@@ -1,4 +1,9 @@
-export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+/** The surface-decoration axis. */
+export declare const SURFACES: readonly ["glass", "veil", "opaque"];
+export type Surface = (typeof SURFACES)[number];
+/** The five-rung glass ladder. */
+export declare const SURFACE_TIERS: readonly ["wash", "quiet", "resting", "floating", "overlay"];
+export type SurfaceTier = (typeof SURFACE_TIERS)[number];
 /** The scale axis — one honest ordinal; rung names ≡ the `--control-h-*` token cohort. */
 export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
 export type Size = (typeof SIZES)[number];
@@ -8,8 +13,6 @@ export type Orientation = (typeof ORIENTATIONS)[number];
 /** The motion-weight axis — opt-DOWN, not opt-in (liquid-weight universal). */
 export declare const MOTIONS: readonly ["full", "reduced", "off"];
 export type Motion = (typeof MOTIONS)[number];
-/** The surface-decoration axis — mirrors `useSurfaceAxis`'s `Surface` (gate-asserted ≡). */
-export declare const SURFACES: readonly ["glass", "veil", "opaque"];
 /** The tone axis — the semantic status register (`--<tone>` token cohort); NEVER a `variant` member. */
 export declare const TONES: readonly ["neutral", "success", "warning", "info", "destructive"];
 export type Tone = (typeof TONES)[number];
@@ -19,3 +22,6 @@ export type Placement = (typeof PLACEMENTS)[number];
 /** The overlay-trigger axis — click | hover | context (the sealed Popover Kronecker fold). */
 export declare const TRIGGERS: readonly ["click", "hover", "context"];
 export type Trigger = (typeof TRIGGERS)[number];
+/** The overlay-backdrop axis — the flat scrim vs the graded box-following halo. */
+export declare const BACKDROPS: readonly ["scrim", "graded"];
+export type Backdrop = (typeof BACKDROPS)[number];

package/dist/components/_shared/class-names.d.ts

@@ -1,15 +1,14 @@
-import { type ClassValue } from "clsx";
+export type ClassValue = string | number | false | null | undefined | ClassValue[] | {
+    readonly [className: string]: unknown;
+};
 /**
  * `cn()` — class-name compositor for glass-ui components.
  *
- * Rationale (W3.b.2 / A5 §3 Split 6): `tailwind-merge` ships ~22 KB
- * gzipped of full Tailwind config to resolve every conflict pair across
- * the framework. Glass-ui exercises a small, stable subset of Tailwind
- * utilities; the conflict surface is enumerable. We replace twMerge with
- * a hand-rolled deduplicator that handles the ~30 conflict pairs glass-ui
- * actually relies on, paying ~0.5 KB gzipped instead.
+ * Glass-ui uses a small, stable subset of Tailwind utilities, so a compact
+ * local conflict table is sufficient. This keeps class normalization and
+ * last-write-wins deduplication in one dependency-free owner.
  *
- * Semantics: clsx normalises the variadic argument shape (strings,
+ * Semantics: `joinClassValues` normalises the variadic argument shape (strings,
  * arrays, conditional objects, falsy filtering). The deduplicator then
  * walks the joined string left-to-right, computes each token's
  * conflict-key (the CSS-property bucket the utility writes to), and
@@ -25,3 +24,5 @@ import { type ClassValue } from "clsx";
  * not in the conflict table).
  */
 export declare function cn(...inputs: ClassValue[]): string;
+/** Normalize Vue-compatible class values without shipping a runtime class helper. */
+export declare function joinClassValues(...inputs: ClassValue[]): string;

package/dist/components/_shared/control-size.d.ts

@@ -0,0 +1,2 @@
+export type ControlSize = "sm" | "md" | "lg";
+export declare const controlSizeClass: (size?: ControlSize) => string;

package/dist/components/_shared/disclosure-context.d.ts

@@ -0,0 +1,7 @@
+interface DisclosureIds {
+    content: string;
+    trigger: string;
+}
+export declare function provideDisclosureIds(): DisclosureIds;
+export declare function useDisclosureIds(): DisclosureIds;
+export {};

package/dist/components/_shared/disclosure.css

@@ -0,0 +1 @@
+@keyframes disclosure-open { from { block-size: 0; opacity: 0; } to { block-size: var(--disclosure-content-size); opacity: 1; } } @keyframes disclosure-close { from { block-size: var(--disclosure-content-size); opacity: 1; } to { block-size: 0; opacity: 0; } } @layer components { .disclosure { inline-size: 100%; min-inline-size: 0; } .disclosure-item { border-block-end: 1px solid var(--glass-border-defined); } .disclosure-header { display: flex; margin: 0; } .disclosure-trigger { border-radius: var(--radius-control); touch-action: manipulation; } .disclosure-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); } .disclosure-trigger:is(:disabled, [data-disabled]) { pointer-events: none; opacity: var(--opacity-disabled); } .disclosure-group-trigger { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; min-block-size: 2.75rem; padding: 1rem 0.25rem; border: 0; color: var(--foreground); background: transparent; font: inherit; font-weight: 600; text-align: start; cursor: pointer; transition: background-color var(--duration-control) var(--ease-standard), color var(--duration-control) var(--ease-standard), box-shadow var(--duration-control) var(--ease-standard); } .disclosure-group-trigger:hover:not(:disabled, [data-disabled]) { background: var(--control-surface-bg-hover); } .disclosure-icon { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--muted-foreground-strong); } .disclosure-group-trigger[data-state="open"] > .disclosure-icon { rotate: 180deg; } .disclosure-content { overflow: hidden; color: var(--muted-foreground-strong); font-size: var(--type-small); line-height: var(--leading-small); animation-duration: var(--spring-smooth-duration); animation-timing-function: var(--spring-smooth); } .disclosure-content[data-disclosure="collapsible"] { --disclosure-content-size: var(--reka-collapsible-content-height); } .disclosure-content[data-disclosure="accordion"] { --disclosure-content-size: var(--reka-accordion-content-height); } .disclosure-content[data-state="open"] { animation-name: disclosure-open; } .disclosure-content[data-state="closed"] { animation-name: disclosure-close; } .disclosure-content-body { padding: 0 0.25rem 1rem; } } @media (prefers-reduced-motion: reduce) { .disclosure-content { animation-duration: 0.01ms; } .disclosure-icon { transition-duration: 0.01ms; } } @media (forced-colors: active) { .disclosure-item { border-color: CanvasText; } .disclosure-trigger:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } }

package/dist/components/_shared/feedback.d.ts

@@ -0,0 +1,7 @@
+import type { Size } from "./axes";
+export declare const PULSE_STATES: readonly ["active", "idle", "success", "warning"];
+export type PulseState = (typeof PULSE_STATES)[number];
+export declare const STATUS_DOT_STATES: readonly ["online", "warning", "error", "unknown"];
+export type StatusDotState = (typeof STATUS_DOT_STATES)[number];
+export type FeedbackMarkState = PulseState | StatusDotState;
+export type FeedbackSize = Extract<Size, "sm" | "md">;

package/dist/components/_shared/field-control.css

@@ -0,0 +1 @@
+@layer components { .field-control { --field-control-height: var(--control-h-md); --field-control-font: var(--control-text); --control-surface-bg: var(--input-on-glass); --glass-defined-plate: var(--control-surface-bg); display: block; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; border: 1.5px solid var(--control-surface-border); background: var(--control-surface-bg); -webkit-backdrop-filter: var(--glass-cell-backdrop-filter, var(--control-surface-blur)); backdrop-filter: var(--glass-cell-backdrop-filter, var(--control-surface-blur)); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); padding-inline: calc(1rem * var(--ui-scale)); color: var(--foreground); caret-color: currentColor; font: inherit; font-size: var(--field-control-font); } .field-control[data-size="sm"] { --field-control-height: var(--control-h-sm); --field-control-font: var(--control-text-sm); } .field-control[data-size="lg"] { --field-control-height: var(--control-h-lg); } .field-control[data-kind="input"] { block-size: var(--field-control-height); border-radius: var(--radius-pill); } [data-slot="dialog-content"] .field-control[data-kind="input"] { border-radius: var(--radius-field); } .field-control[data-kind="textarea"] { min-block-size: max(5lh, calc(5rem * var(--ui-scale))); border-radius: var(--radius-field); padding-block: calc(0.75rem * var(--ui-scale)); line-height: var(--type-leading-body); overflow: auto; } .field-control::placeholder { color: var(--muted-foreground); opacity: 0.68; } .field-control:focus-visible { outline: none; border-color: var(--color-accent-opaque, var(--focus-ring-color)); box-shadow: var(--focus-ring-shadow); } .field-control:is(:user-invalid, [data-state="invalid"]) { --control-surface-bg: color-mix( in srgb, var(--destructive) 8%, var(--input-on-glass) ); border-color: var(--destructive); } .field-control:is(:user-invalid, [data-state="invalid"]):focus-visible { box-shadow: var(--invalid-ring); } .field-control[data-state="readonly"] { --control-surface-bg: color-mix( in oklab, var(--input-on-glass), var(--muted) 18% ); cursor: text; } .field-control[data-state="disabled"] { cursor: not-allowed; opacity: var(--opacity-disabled); } .field-control[data-kind="textarea"][data-resize="none"] { resize: none; } .field-control[data-kind="textarea"][data-resize="horizontal"] { resize: horizontal; } .field-control[data-kind="textarea"][data-resize="both"] { resize: both; } .field-control[data-kind="textarea"]:is( [data-resize="vertical"], [data-resize="content"] ) { resize: vertical; } .field-control[data-kind="textarea"][data-resize="content"] { field-sizing: content; max-block-size: var(--textarea-content-max, 12lh); } }

package/dist/components/_shared/field-surfaces.css

@@ -1 +1 @@
-:root { --select-content-max-h: min(24rem, 60dvh); } [data-slot="select-content"] { max-height: min( var(--select-content-max-h), var(--reka-popper-available-height, var(--select-content-max-h)) ); overflow-y: auto; } @layer components { .glass-control-edge { box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); } [data-slot="select-content"], [data-slot="combobox-list"] { --select-plate-alpha: 0.9; background: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-floating-tinted, var(--glass-bg-floating)), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ), transparent calc((1 - var(--select-plate-alpha)) * 100%) ); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating), var(--shadow-cartoon-lg); } .dark [data-slot="select-content"], .dark [data-slot="combobox-list"] { --select-plate-alpha: 0.94; } .glass-field-portal { position: relative; } .glass-field-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient( 70% 60% at 24% 22%, oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.9 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, oklch(0.3 0.1 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } @supports not (color: oklch(0.9 0.08 48)) { .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72% ); } } }
+:root { --select-content-max-h: min(24rem, 60dvh); } [data-slot="select-content"] { max-height: min( var(--select-content-max-h), var(--reka-popper-available-height, var(--select-content-max-h)) ); overflow: hidden; } @layer components { .glass-control-edge { box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); } [data-slot="select-content"], [data-slot="combobox-list"] { --select-plate-alpha: 0.9; background: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-floating-tinted, var(--glass-bg-floating)), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ), transparent calc((1 - var(--select-plate-alpha)) * 100%) ); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating), var(--shadow-cartoon-lg); } .dark [data-slot="select-content"], .dark [data-slot="combobox-list"] { --select-plate-alpha: 0.94; } .glass-field-portal { position: relative; } .glass-field-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient( 70% 60% at 24% 22%, oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.9 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, oklch(0.3 0.1 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } @supports not (color: oklch(0.9 0.08 48)) { .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72% ); } } }

package/dist/components/_shared/fieldControl.d.ts

@@ -0,0 +1,13 @@
+export type FieldControlState = "default" | "invalid" | "readonly" | "disabled";
+export declare function isAriaInvalid(value: unknown): boolean;
+export declare function useFieldControlState(props: {
+    disabled?: boolean;
+    invalid?: boolean;
+    readonly?: boolean;
+}, attrs: Record<string, unknown>): {
+    ariaInvalid: import("vue").ComputedRef<"grammar" | "spelling" | (boolean | "true" | "false") | undefined>;
+    forwardedAttrs: import("vue").ComputedRef<{
+        [x: string]: unknown;
+    }>;
+    state: import("vue").ComputedRef<FieldControlState>;
+};

package/dist/components/_shared/floating.d.ts

@@ -0,0 +1,14 @@
+import type { Placement } from "./axes";
+/** Edge used to place floating content relative to its trigger. */
+export type FloatingSide = Exclude<Placement, "center">;
+/** Cross-axis alignment of floating content against its trigger. */
+export type FloatingAlign = "start" | "center" | "end";
+/** Placement controls intentionally shared by Glass floating surfaces. */
+export interface FloatingPlacementProps {
+    side?: FloatingSide;
+    sideOffset?: number;
+    align?: FloatingAlign;
+    alignOffset?: number;
+}
+/** Keep retired positioning/polymorphism props from surviving through `$attrs`. */
+export declare function floatingContentAttrs(attrs: Readonly<Record<string, unknown>>): Record<string, unknown>;

package/dist/components/_shared/index.d.ts

@@ -1,6 +1,2 @@
-export { menuItemVariants } from "./menuItemVariants";
-export type { MenuItemVariants } from "./menuItemVariants";
-export { surfaceClass, decorationClass } from "./useSurfaceAxis";
-export type { Surface, SurfaceTier } from "./useSurfaceAxis";
-export { controlSizeClass, switchSizeClass } from "./useControlSize";
-export type { ControlSize } from "./useControlSize";
+export { controlSizeClass } from "./control-size";
+export type { ControlSize } from "./control-size";