@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/web/ChatToolCalls.web.tsrx.js

@@ -0,0 +1,263 @@
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { Badge } from "./Badge.web.tsrx.js";
+import { Fragment, __s, bagOf, child, clone, componentSlot, createScopedElement, createScopedValue, delegateEvents, hookSlots, mapSlot, markDangerouslySetInnerHTMLChildren, positionalChildren, setAriaAttribute, setEventHandler, setStyle, sibling, snapshotSpread, template, useId, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, bindSignalHostPropSources, createElementFromConfig, enableSignalBindings, setPlainAttribute } from "octane/internal/client";
+//#region src/ChatToolCalls.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["click", "keydown"]);
+var _t$0 = /* @__PURE__ */ template("<div><div class=\"vx-chattools-header\" role=\"button\" tabindex=\"0\"><!><span class=\"vx-chattools-count\"></span><span></span></div><div><div class=\"vx-chattools-list\"><!></div></div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _key$0 = (call) => call.key ?? call.name;
+function __item$1(call, __s, __extra) {
+	const __block = __s.block;
+	componentSlot(__s, 0, __block.parentNode, CallRow, {
+		"call": call,
+		"hasClippedFocusRing": true
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:da8f17a3");
+}
+var _rm$7 = [
+	"s",
+	"n",
+	"m"
+];
+var _frag$0 = /* @__PURE__ */ __s(function _frag$0(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m5, _m8, _m9, _m10, _m11, _m12, _m13, _m14, _m15, _m16, _m19;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m5 = _el0;
+		setEventHandler(_el0, "$$click", props.h5);
+		setEventHandler(_el0, "$$keydown", props.h6);
+		_m8 = sibling(child(_el0), 2);
+		const _el2 = sibling(_el0, 1);
+		_m9 = props.h11;
+		_m10 = props.h12;
+		_m11 = snapshotSpread(props.h13);
+		_m12 = _el2;
+		_m13 = bindSignalHostPropSources(__s, void 0, _el2, [
+			[
+				false,
+				"id",
+				_m9
+			],
+			[
+				false,
+				"className",
+				_m10
+			],
+			[true, _m11]
+		], "b:5248b66e", true);
+		markDangerouslySetInnerHTMLChildren(_el2);
+		const _el3 = child(_el2);
+		_m14 = _el3;
+		_m15 = child(_el3);
+		const _el5 = child(_el0);
+		_m16 = _el5;
+		_m19 = sibling(_el5, 1);
+		_b = bagOf(__s, _root, {
+			a: void 0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: void 0,
+			f: _m5,
+			g: void 0,
+			h: void 0,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: _m15,
+			q: _m16,
+			r: null,
+			s: void 0,
+			t: _m19,
+			u: null,
+			v: void 0,
+			w: null,
+			x: void 0
+		});
+		__s.refFields = _rm$7;
+	} else {
+		setEventHandler(_b.f, "$$click", props.h5);
+		setEventHandler(_b.f, "$$keydown", props.h6);
+		{
+			const _v = props.h11;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.h12;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		_b.l = snapshotSpread(props.h13);
+		_b.n = bindSignalHostPropSources(__s, _b.n, _b.m, [
+			[
+				false,
+				"id",
+				_b.j
+			],
+			[
+				false,
+				"className",
+				_b.k
+			],
+			[true, _b.l]
+		], "b:5248b66e", true);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.h0, "b:2edafe80", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.h1, "b:0c2d2031", "class");
+	{
+		const _v = props.h2;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.e = bindSignalAttribute(__s, _b.e, _b.f, "aria-expanded", props.h3, "b:e1605136", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.f, "aria-controls", props.h4, "b:c53fcc8d", setAriaAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.i, "class", props.h9, "b:4a815a29", "class");
+	mapSlot(__s, 1, _b.o, props.h14, props.h15, props.h16, _key$0, __item$1, 8, void 0, _b.p, 1);
+	_b.y = bindSignalChild(__s, _b.y, 2, _b.f, props.h7, "b:0ae878d7", _b.q, true, void 0, void 0, void 0);
+	_b.z = bindSignalChild(__s, _b.z, 3, _b.t, props.h8, "b:d4866115", null, void 0, void 0, void 0, true);
+	_b.A = bindSignalChild(__s, _b.A, 4, _b.i, props.h10, "b:7d6c3153", null, void 0, void 0, void 0, true);
+});
+var STATUS_ICON = {
+	pending: "xplat-clock",
+	running: null,
+	complete: "xplat-check",
+	error: "xplat-error"
+};
+function statusAnnouncement(status, errorMessage) {
+	if (status === "error" && errorMessage != null) return `Error: ${errorMessage}`;
+	switch (status) {
+		case "pending": return "Pending";
+		case "running": return "Running";
+		case "complete": return "Complete";
+		case "error": return "Error";
+	}
+}
+var CallRow = function CallRow(props, __s, __extra) {
+	const call = props.call;
+	const status = call.status ?? "complete";
+	const hasDetail = call.resultDetail != null;
+	const [isDetailOpen, setIsDetailOpen] = useState(false, _hs$ + 0);
+	const detailId = useId(_hs$ + 1);
+	const toggleDetail = hasDetail ? () => setIsDetailOpen((v) => !v) : void 0;
+	const row = createScopedValue(() => createScopedElement("div", {
+		className: ["vx-chattools-row", hasDetail ? "vx-chattools-row--toggle" : void 0],
+		role: hasDetail ? "button" : void 0,
+		tabIndex: hasDetail ? 0 : void 0,
+		"aria-expanded": hasDetail ? isDetailOpen : void 0,
+		"aria-controls": hasDetail && isDetailOpen ? detailId : void 0,
+		onClick: toggleDetail,
+		onKeyDown: hasDetail ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				toggleDetail?.();
+			}
+		} : void 0
+	}, () => positionalChildren([
+		createScopedValue(() => createScopedElement("span", {
+			className: ["vx-chattools-status", `vx-chattools-status--${status}`],
+			title: status === "error" ? call.errorMessage : void 0,
+			"aria-label": statusAnnouncement(status, call.errorMessage)
+		}, () => status === "running" || status === "pending" ? createElementFromConfig("c:5173dceb", ActivityIndicator, {}) : createScopedValue(() => createElementFromConfig("c:678d19fe", Icon, {
+			name: STATUS_ICON[status] ?? "xplat-check",
+			size: 12
+		})))),
+		createScopedElement("span", { className: "vx-chattools-name" }, () => call.name),
+		call.node != null ? createScopedElement(Badge, { className: "vx-chattools-node" }, () => call.node, "c:49cc03cd") : null,
+		call.target != null ? createScopedElement("span", { className: "vx-chattools-target" }, () => call.target) : null,
+		call.additions != null || call.deletions != null || call.stats != null ? createScopedElement("span", { className: "vx-chattools-stats" }, () => positionalChildren([
+			call.additions != null ? createScopedElement("span", { className: "vx-chattools-add" }, () => positionalChildren(["+", call.additions])) : null,
+			call.deletions != null ? createScopedElement("span", { className: "vx-chattools-del" }, () => positionalChildren(["-", call.deletions])) : null,
+			call.stats
+		])) : null,
+		call.duration != null && status === "complete" ? createScopedElement("span", { className: "vx-chattools-duration" }, () => call.duration) : null,
+		hasDetail ? createScopedValue(() => createScopedElement("span", { className: ["vx-chattools-chev", isDetailOpen ? "vx-chattools-chev--open" : void 0] }, () => createElementFromConfig("c:32b77589", Icon, {
+			name: "xplat-chevron-down",
+			size: 12
+		}))) : null
+	])));
+	if (!hasDetail) return row ?? null;
+	return createScopedElement("div", {}, () => positionalChildren([row, isDetailOpen ? createScopedValue(() => createScopedElement("div", {
+		id: detailId,
+		className: "vx-chattools-detail"
+	}, () => call.resultDetail)) : null]));
+};
+var ChatToolCalls = function ChatToolCalls(props, __s, __extra) {
+	let __mapItems;
+	let __mapMethod;
+	const isControlled = props.isExpanded !== void 0;
+	const [internalExpanded, setInternalExpanded] = useState(props.defaultIsExpanded ?? false, _hs$ + 2);
+	const isExpanded = isControlled ? props.isExpanded : internalExpanded;
+	const contentId = useId(_hs$ + 3);
+	if (!props.calls || props.calls.length === 0) return null;
+	const toggle = () => {
+		const next = !isExpanded;
+		if (!isControlled) setInternalExpanded(next);
+		props.onExpandedChange?.(next);
+	};
+	if (props.calls.length === 1) return createScopedValue(() => createScopedElement("div", {
+		id: props.id,
+		className: ["vx-chattools", props.className],
+		style: props.style
+	}, () => createScopedValue(() => createElementFromConfig("c:805bb429", CallRow, { call: props.calls[0] }))));
+	const latest = props.calls[props.calls.length - 1];
+	const latestStatus = latest.status ?? "complete";
+	return createElementFromConfig("c:04314d88", _frag$0, {
+		h0: props.id,
+		h1: ["vx-chattools", props.className],
+		h2: props.style,
+		h3: isExpanded,
+		h4: contentId,
+		h5: toggle,
+		h6: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				toggle();
+			}
+		},
+		h7: isExpanded ? positionalChildren([createScopedElement("span", { className: "vx-chattools-status" }, () => createElementFromConfig("c:f9db4e1e", Icon, {
+			name: "xplat-wrench",
+			size: 14
+		})), createScopedElement("span", { className: "vx-chattools-grouplabel" }, () => props.label ?? `${props.calls.length} tool calls`)]) : createScopedElement(Fragment, {}, () => positionalChildren([
+			createScopedValue(() => createScopedElement("span", {
+				className: ["vx-chattools-status", `vx-chattools-status--${latestStatus}`],
+				"aria-label": statusAnnouncement(latestStatus, latest.errorMessage)
+			}, () => latestStatus === "running" || latestStatus === "pending" ? createElementFromConfig("c:e09b10ee", ActivityIndicator, {}) : createScopedValue(() => createElementFromConfig("c:73758979", Icon, {
+				name: STATUS_ICON[latestStatus] ?? "xplat-check",
+				size: 12
+			})))),
+			createScopedElement("span", { className: "vx-chattools-name" }, () => latest.name),
+			latest.target != null ? createScopedElement("span", { className: "vx-chattools-target" }, () => latest.target) : null
+		])),
+		h8: !isExpanded ? createScopedElement(Fragment, {}, () => positionalChildren([createElementFromConfig("c:971269a8", Icon, {
+			name: "xplat-wrench",
+			size: 12
+		}), props.calls.length])) : null,
+		h9: ["vx-chattools-chev", isExpanded ? "vx-chattools-chev--open" : void 0],
+		h10: createElementFromConfig("c:27e16cda", Icon, {
+			name: "xplat-chevron-down",
+			size: 12
+		}),
+		h11: contentId,
+		h12: ["vx-chattools-body", isExpanded ? "vx-chattools-body--open" : void 0],
+		h13: isExpanded ? {} : { inert: true },
+		h14: (__mapItems = props.calls, __mapMethod = __mapItems.map, __mapItems),
+		h15: __mapMethod,
+		h16: (call) => createElementFromConfig("c:07dd8a6b", CallRow, {
+			key: call.key ?? call.name,
+			call,
+			hasClippedFocusRing: true
+		})
+	});
+};
+//#endregion
+export { ChatToolCalls };

package/dist/web/CheckIndicator.web.tsrx.js

@@ -0,0 +1,114 @@
+import { refList } from "./ref-list.js";
+import { applyEscapeProps } from "./escape-props.web.js";
+import { applyWebProps } from "./platformProps.web.js";
+import { bag5, bag7, clone, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
+import { bindSignalAttribute, bindSignalChild, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish4, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/CheckIndicator.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<span aria-hidden=\"true\"></span>");
+var _t$1 = /* @__PURE__ */ template("<span aria-hidden=\"true\">✓</span>");
+var _rm$2 = [
+	"r",
+	"c",
+	"b"
+];
+function __then$0(__props, __s, __extra) {
+	const forwardedRef = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		queueRefAttach(__s, _m2 = forwardedRef, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_b = bag7(__s, _root, void 0, _m1, _m2, void 0, void 0, null, void 0);
+		__s.refFields = _rm$2;
+	} else {
+		const _r = forwardedRef;
+		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:361bb9fc", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-ind-check-slot",
+		`vx-ind-check-slot--${size}`,
+		props.className
+	], _b.d, _b.b);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.h = bindSignalChild(__s, _b.h, 1, _b.b, props.children, "b:5ba0a8b1", null, void 0, void 0, void 0, true);
+}
+var _rm$5 = [
+	"r",
+	"c",
+	"b"
+];
+function __then$4(__props, __s, __extra) {
+	const forwardedRef = __extra[0];
+	const props = __extra[1];
+	const size = __extra[2];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m2;
+		const _root = clone(_t$1);
+		_m1 = _root;
+		queueRefAttach(__s, _m2 = forwardedRef, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.c, _b.b));
+		_b = bag5(__s, _root, void 0, _m1, _m2, void 0, void 0);
+		__s.refFields = _rm$5;
+	} else {
+		const _r = forwardedRef;
+		if (_r !== _b.c) _b.c = replaceRef(__s, _b.c, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:85e3fe9b", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-ind-check",
+		`vx-ind-check--${size}`,
+		props.isDisabled ? "vx-ind-check--disabled" : void 0,
+		props.className
+	], _b.d, _b.b);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.b, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+}
+function __else$6(__props, __s, __extra) {}
+function __else$3(__props, __s, __extra) {
+	const __block = __s.block;
+	__extra[0];
+	const props = __extra[1];
+	__extra[2];
+	ifBlock(__s, 0, __block.parentNode, props.state === "checked", __then$4, __else$6, __block.endMarker, __extra);
+}
+var _hs$ = /* @__PURE__ */ hookSlots(5);
+var CheckIndicator = function CheckIndicator(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(6);
+	let __hkd0, __hkd1, __hkd2, __hkd3;
+	const size = props.size ?? "md";
+	const forwardedRef = (__hkd0 = props.ref, __hkd1 = props.ios, __hkd2 = props.android, __hkd3 = props.web, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) || !hookMemoEqual(__hk[4], __hkd3) ? hookMemoPublish4(__hk, 0, refList((e) => {
+		if (e) {
+			applyEscapeProps(e, props);
+			applyWebProps(e, props.web);
+		}
+	}, props.ref), __hkd0, __hkd1, __hkd2, __hkd3) : __hk[5]);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	ifBlock(__s, 0, __block.parentNode, props.children != null, __then$0, __else$3, __block.endMarker, [
+		forwardedRef,
+		props,
+		size
+	]);
+};
+//#endregion
+export { CheckIndicator };

package/dist/web/Checkbox.web.tsrx.js

@@ -1,88 +1,127 @@
 import { applyEscapeProps } from "./escape-props.web.js";
-import { __s, bag0, bag13, bag3, child, clone, delegateEvents, evt2e, evt2u, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template } from "octane";
+import { useFieldControlProps } from "./field-context.js";
+import { CheckboxIndicator } from "./CheckboxIndicator.web.tsrx.js";
+import { indicatorScope, useIndicator } from "./indicators.js";
+import { __s, bag3, bagOf, child, clone, componentSlot, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template, withSlot } from "octane";
 import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/Checkbox.web.tsrx
 enableSignalBindings(1, true);
 delegateEvents(["click", "keydown"]);
-var _t$0 = /* @__PURE__ */ template("<span class=\"vx-checkbox-check\">✓</span>");
-var _t$1 = /* @__PURE__ */ template("<span class=\"vx-checkbox-label\"></span>");
-var _t$2 = /* @__PURE__ */ template("<div role=\"checkbox\"><div class=\"vx-checkbox\" aria-hidden=\"true\"><!></div><!></div>");
-var __event = (e, props, toggle) => {
-	if (props.disabled) return;
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-checkbox-label\"></span>");
+var _t$1 = /* @__PURE__ */ template("<div role=\"checkbox\"><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __event = (e, isBlocked, toggle) => {
+	if (isBlocked) return;
 	if (e.key === " " || e.key === "Enter") {
 		e.preventDefault();
 		toggle();
 	}
 };
-function __then$0(__props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		const _root = clone(_t$0);
-		_b = bag0(__s, _root);
-	}
-}
-function __then$2(__props, __s, __extra) {
+function __then$1(__props, __s, __extra) {
 	const props = __extra[0];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0;
-		const _root = clone(_t$1);
+		const _root = clone(_t$0);
 		_m0 = _root;
 		_b = bag3(__s, _root, _m0, null, void 0);
 	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.label, "b:c9ae9d41", null, void 0, void 0, void 0, true);
+	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, props.label, "b:f0781e7a", null, void 0, void 0, void 0, true);
 }
-var _rm$5 = [
+var _rm$4 = [
 	"r",
 	"b",
 	"a"
 ];
-var Checkbox = /* @__PURE__ */ __s(function Checkbox(props, __s, __extra) {
-	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+var Checkbox = /* @__PURE__ */ __s(function Checkbox(inputProps, __s, __extra) {
+	const props = withSlot(_h$0, useFieldControlProps, inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
+	const Ind = withSlot(_h$1, useIndicator, "checkbox") ?? CheckboxIndicator;
+	const indState = props.indeterminate ? "indeterminate" : props.checked ? "checked" : "unchecked";
+	const toggle = () => {
+		if (!isBlocked) props.onCheckedChange?.(props.indeterminate ? true : !(props.checked ?? false));
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m9, _m10, _m11, _m12;
-		const _root = clone(_t$2);
+		let _m0, _m1, _m16, _m17, _m18;
+		const _root = clone(_t$1);
 		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		setEventHandler(_root, "$$click", props.disabled ? void 0 : toggle);
-		_m9 = evt2e(_root, "$$keydown", __event, props, toggle);
-		const _el0 = child(_root);
-		_m10 = _el0;
-		_m11 = child(_el0);
-		_m12 = sibling(_el0, 1);
-		_b = bag13(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m9, _m10, _m11, _m12);
-		__s.refFields = _rm$5;
+		setEventHandler(_root, "$$click", isBlocked ? void 0 : toggle);
+		_m16 = evt2e(_root, "$$keydown", __event, isBlocked, toggle);
+		_m17 = sibling(child(_root), 1);
+		_m18 = child(_root);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: void 0,
+			f: void 0,
+			g: void 0,
+			h: void 0,
+			i: void 0,
+			j: void 0,
+			k: void 0,
+			l: void 0,
+			m: void 0,
+			n: void 0,
+			o: void 0,
+			p: void 0,
+			q: _m16,
+			r: _m17,
+			s: _m18
+		});
+		__s.refFields = _rm$4;
 	} else {
 		{
 			const _r = (e) => applyEscapeProps(e, props);
 			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
-		setEventHandler(_b.a, "$$click", props.disabled ? void 0 : toggle);
-		evt2u(_b.j, __event, props, toggle);
+		setEventHandler(_b.a, "$$click", isBlocked ? void 0 : toggle);
+		evt2u(_b.q, __event, isBlocked, toggle);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:e9b2a3c8", setPlainAttribute);
-	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-checked", props.checked ?? false, "b:a0baac3c", setAriaAttribute);
-	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-disabled", props.disabled ?? void 0, "b:80966cea", setAriaAttribute);
-	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.accessibilityLabel, "b:98f88ce1", setAriaAttribute);
-	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "tabindex", props.disabled ? void 0 : 0, "b:7049bb49", setPlainAttribute);
-	_b.h = updateFreshClassName([
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:affd3167", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-checked", props.indeterminate ? "mixed" : props.checked ?? false, "b:89a72f3a", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-disabled", props.isDisabled || void 0, "b:0799b21b", setAriaAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-readonly", props.isReadOnly || void 0, "b:93256ede", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-busy", props.isLoading || void 0, "b:21a13126", setAriaAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "aria-required", props.isRequired && !props.isOptional || void 0, "b:39e2501e", setAriaAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.a, "aria-invalid", props.status?.type === "error" || void 0, "b:8d59ef1e", setAriaAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.a, "aria-label", props.ariaLabel, "b:f5d93025", setAriaAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.a, "aria-labelledby", props.ariaLabelledBy, "b:755b72f4", setAriaAttribute);
+	_b.l = bindSignalAttribute(__s, _b.l, _b.a, "aria-describedby", props.ariaDescribedBy, "b:e2d2c344", setAriaAttribute);
+	_b.m = bindSignalAttribute(__s, _b.m, _b.a, "aria-description", props.accessibilityHint, "b:cd0de2ca", setAriaAttribute);
+	_b.n = bindSignalAttribute(__s, _b.n, _b.a, "tabindex", props.isDisabled ? void 0 : 0, "b:3db145c6", setPlainAttribute);
+	_b.o = updateFreshClassName([
 		"vx-checkbox-row",
+		indicatorScope,
 		props.checked ? "vx-checkbox--on" : void 0,
-		props.disabled ? "vx-checkbox--disabled" : void 0,
+		props.isDisabled ? "vx-checkbox--disabled" : void 0,
+		props.isReadOnly ? "vx-checkbox--readonly" : void 0,
+		props.isLoading ? "vx-checkbox--loading" : void 0,
+		props.status ? `vx-checkbox--status-${props.status.type}` : void 0,
+		props.size ? `vx-checkbox--size-${props.size}` : void 0,
 		props.className
-	], _b.h, _b.a);
+	], _b.o, _b.a);
 	{
 		const _v = props.style;
-		if (_b.i !== _v) {
-			setStyle(_b.a, _v, _b.i);
-			_b.i = _v;
+		if (_b.p !== _v) {
+			setStyle(_b.a, _v, _b.p);
+			_b.p = _v;
 		}
 	}
-	ifBlock(__s, 1, _b.k, props.checked, __then$0, null, _b.l);
+	componentSlot(__s, 1, _b.a, Ind, {
+		"state": indState,
+		"size": props.size === "sm" ? "sm" : "md",
+		"isDisabled": props.isDisabled
+	}, _b.s, void 0, void 0, void 0, void 0, "c:3469272e");
 	{
 		const __ifCondition = props.label != null;
-		ifBlock(__s, 2, _b.a, __ifCondition, __then$2, null, _b.m, __ifCondition ? [props] : void 0);
+		ifBlock(__s, 2, _b.a, __ifCondition, __then$1, null, _b.r, __ifCondition ? [props] : void 0);
 	}
 });
 //#endregion

package/dist/web/CheckboxGroup.web.tsrx.js

@@ -1,33 +1,38 @@
 import { applyEscapeProps } from "./escape-props.web.js";
+import { useFieldControlProps } from "./field-context.js";
 import { Checkbox } from "./Checkbox.web.tsrx.js";
-import { __s, bag7, child, clone, componentSlotVoid, hookSlots, mapSlot, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState } from "octane";
+import { __s, bag12, child, clone, componentSlotVoid, hookSlots, mapSlot, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, template, useState, withSlot } from "octane";
 import { bindSignalAttribute, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/CheckboxGroup.web.tsrx
 enableSignalBindings(1, true);
 var _t$0 = /* @__PURE__ */ template("<div role=\"group\"><!></div>");
 var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _key$0 = (opt) => opt.value;
 function __item$1(opt, __s, __extra) {
 	const __block = __s.block;
-	const selected = __extra[0];
-	const props = __extra[1];
-	const toggle = __extra[2];
+	const props = __extra[0];
+	const isReadOnly = __extra[1];
+	const selected = __extra[2];
+	const toggle = __extra[3];
 	componentSlotVoid(__s, 0, __block.parentNode, Checkbox, {
 		"checked": selected.includes(opt.value),
-		"disabled": props.disabled || opt.disabled,
+		"isDisabled": props.isDisabled || opt.isDisabled,
+		"isReadOnly": isReadOnly,
 		"label": opt.label,
 		"onCheckedChange": (on) => toggle(opt.value, on)
-	}, __block.endMarker, void 0, 2, void 0, void 0, "c:30848cec");
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:b1aad256");
 }
 var _rm$4 = [
 	"r",
 	"b",
 	"a"
 ];
-var CheckboxGroup = /* @__PURE__ */ __s(function CheckboxGroup(props, __s, __extra) {
+var CheckboxGroup = /* @__PURE__ */ __s(function CheckboxGroup(inputProps, __s, __extra) {
 	let __mapItems;
 	let __mapMethod;
-	const [internal, setInternal] = useState(props.defaultValue ?? [], _hs$ + 0);
+	const props = withSlot(_h$0, useFieldControlProps, inputProps);
+	const [internal, setInternal] = useState(props.defaultValue ?? [], _hs$ + 1);
 	const controlled = props.value !== void 0;
 	const selected = controlled ? props.value : internal;
 	const setSelected = (next) => {
@@ -35,45 +40,58 @@ var CheckboxGroup = /* @__PURE__ */ __s(function CheckboxGroup(props, __s, __ext
 		props.onValueChange?.(next);
 	};
 	const toggle = (v, on) => setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
+	const isReadOnly = props.isReadOnly;
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m6;
+		let _m0, _m1, _m11;
 		const _root = clone(_t$0);
 		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m6 = child(_root);
-		_b = bag7(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, _m6);
+		_m11 = child(_root);
+		_b = bag12(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, void 0, _m11);
 		__s.refFields = _rm$4;
 	} else {
 		const _r = (e) => applyEscapeProps(e, props);
 		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:8d588be2", setPlainAttribute);
-	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-label", props.accessibilityLabel, "b:4442735b", setAriaAttribute);
-	_b.e = updateFreshClassName([
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:73b3b6c0", setPlainAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.a, "aria-label", props.ariaLabel, "b:a18adf82", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.a, "aria-labelledby", props.ariaLabelledBy, "b:119e9d2c", setAriaAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-describedby", props.ariaDescribedBy, "b:ba79bed8", setAriaAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.a, "aria-disabled", props.isDisabled || void 0, "b:ece64bd3", setAriaAttribute);
+	_b.h = bindSignalAttribute(__s, _b.h, _b.a, "aria-readonly", isReadOnly || void 0, "b:4a084a40", setAriaAttribute);
+	_b.i = bindSignalAttribute(__s, _b.i, _b.a, "aria-busy", props.isLoading || void 0, "b:c2b88ee3", setAriaAttribute);
+	_b.j = updateFreshClassName([
 		"vx-checkbox-group",
 		props.horizontal ? "vx-checkbox-group--row" : void 0,
+		props.isDisabled ? "vx-checkbox-group--disabled" : void 0,
+		isReadOnly ? "vx-checkbox-group--readonly" : void 0,
+		props.isLoading ? "vx-checkbox-group--loading" : void 0,
+		props.status ? `vx-checkbox-group--status-${props.status.type}` : void 0,
+		props.size ? `vx-checkbox-group--size-${props.size}` : void 0,
 		props.className
-	], _b.e, _b.a);
+	], _b.j, _b.a);
 	{
 		const _v = props.style;
-		if (_b.f !== _v) {
-			setStyle(_b.a, _v, _b.f);
-			_b.f = _v;
+		if (_b.k !== _v) {
+			setStyle(_b.a, _v, _b.k);
+			_b.k = _v;
 		}
 	}
-	mapSlot(__s, 1, _b.a, (__mapItems = props.options, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (opt) => createElementFromConfig("c:a63f71ef", Checkbox, {
+	mapSlot(__s, 1, _b.a, (__mapItems = props.options, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (opt) => createElementFromConfig("c:ece748f5", Checkbox, {
 		key: opt.value,
 		checked: selected.includes(opt.value),
-		disabled: props.disabled || opt.disabled,
+		isDisabled: props.isDisabled || opt.isDisabled,
+		isReadOnly,
 		label: opt.label,
 		onCheckedChange: (on) => toggle(opt.value, on)
 	}), _key$0, __item$1, 8 | (Checkbox.$$singleRoot === true ? 2 : 0), [
-		selected,
 		props,
+		isReadOnly,
+		selected,
 		toggle
-	], _b.g, 1);
+	], _b.l, 1);
 });
 //#endregion
 export { CheckboxGroup };