@octane-xplat/ui 0.9.0 → 0.10.0

package/src/ChatToolCalls.web.tsrx

@@ -0,0 +1,180 @@
+import { useId, useState } from 'octane';
+import type { ChatToolCallItem, ChatToolCallStatus, ChatToolCallsProps } from './props';
+import { Icon } from './Icon.web.tsrx';
+import { Badge } from './Badge.web.tsrx';
+import { ActivityIndicator } from './ActivityIndicator.web.tsrx';
+
+const STATUS_ICON: Record<ChatToolCallStatus, string | null> = {
+	pending: 'xplat-clock',
+	running: null,
+	complete: 'xplat-check',
+	error: 'xplat-error',
+};
+
+function statusAnnouncement(status: ChatToolCallStatus, errorMessage?: string): string {
+	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';
+	}
+}
+
+/** Single tool-call row — status icon, name, optional node chip, target,
+ *  diff stats, duration, and an expandable detail region. */
+function CallRow(props: { call: ChatToolCallItem; hasClippedFocusRing?: boolean }) @{
+	const call = props.call;
+	const status = call.status ?? 'complete';
+	const hasDetail = call.resultDetail != null;
+	const [isDetailOpen, setIsDetailOpen] = useState(false);
+	const detailId = useId();
+	const toggleDetail = hasDetail ? () => setIsDetailOpen((v) => !v) : undefined;
+
+	const row = (
+		<div
+			className={['vx-chattools-row', hasDetail ? 'vx-chattools-row--toggle' : undefined]}
+			role={hasDetail ? 'button' : undefined}
+			tabIndex={hasDetail ? 0 : undefined}
+			aria-expanded={hasDetail ? isDetailOpen : undefined}
+			aria-controls={hasDetail && isDetailOpen ? detailId : undefined}
+			onClick={toggleDetail}
+			onKeyDown={hasDetail ? (e: any) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					toggleDetail?.();
+				}
+			} : undefined}
+		>
+			<span
+				className={['vx-chattools-status', `vx-chattools-status--${status}`]}
+				title={status === 'error' ? call.errorMessage : undefined}
+				aria-label={statusAnnouncement(status, call.errorMessage)}
+			>
+				{status === 'running' || status === 'pending' ? (
+					<ActivityIndicator />
+				) : (
+					<Icon name={STATUS_ICON[status] ?? 'xplat-check'} size={12} />
+				)}
+			</span>
+			<span className="vx-chattools-name">{call.name}</span>
+			{call.node != null ? <Badge className="vx-chattools-node">{call.node}</Badge> : null}
+			{call.target != null ? <span className="vx-chattools-target">{call.target}</span> : null}
+			{call.additions != null || call.deletions != null || call.stats != null ? (
+				<span className="vx-chattools-stats">
+					{call.additions != null ? <span className="vx-chattools-add">+{call.additions}</span> : null}
+					{call.deletions != null ? <span className="vx-chattools-del">-{call.deletions}</span> : null}
+					{call.stats}
+				</span>
+			) : null}
+			{call.duration != null && status === 'complete' ? (
+				<span className="vx-chattools-duration">{call.duration}</span>
+			) : null}
+			{hasDetail ? (
+				<span className={['vx-chattools-chev', isDetailOpen ? 'vx-chattools-chev--open' : undefined]}>
+					<Icon name="xplat-chevron-down" size={12} />
+				</span>
+			) : null}
+		</div>
+	);
+
+	if (!hasDetail) {
+		return row;
+	}
+
+	return (
+		<div>
+			{row}
+			{isDetailOpen ? (
+				<div id={detailId} className="vx-chattools-detail">{call.resultDetail}</div>
+			) : null}
+		</div>
+	);
+}
+
+/** Tool/function call list from an LLM response. A single call renders
+ *  inline with no group chrome; multiple collapse behind a header showing
+ *  the latest call and a count. */
+export function ChatToolCalls(props: ChatToolCallsProps) @{
+	const isControlled = props.isExpanded !== undefined;
+	const [internalExpanded, setInternalExpanded] = useState(props.defaultIsExpanded ?? false);
+	const isExpanded = isControlled ? props.isExpanded : internalExpanded;
+	const contentId = useId();
+
+	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 (
+			<div id={props.id} className={['vx-chattools', props.className]} style={props.style}>
+				<CallRow call={props.calls[0]} />
+			</div>
+		);
+	}
+
+	const latest = props.calls[props.calls.length - 1];
+	const latestStatus = latest.status ?? 'complete';
+
+	<div id={props.id} className={['vx-chattools', props.className]} style={props.style}>
+		<div
+			className="vx-chattools-header"
+			role="button"
+			tabIndex={0}
+			aria-expanded={isExpanded}
+			aria-controls={contentId}
+			onClick={toggle}
+			onKeyDown={(e: any) => {
+				if (e.key === 'Enter' || e.key === ' ') {
+					e.preventDefault();
+					toggle();
+				}
+			}}
+		>
+			{isExpanded ? (
+				<>
+					<span className="vx-chattools-status"><Icon name="xplat-wrench" size={14} /></span>
+					<span className="vx-chattools-grouplabel">{props.label ?? `${props.calls.length} tool calls`}</span>
+				</>
+			) : (
+				<>
+					<span
+						className={['vx-chattools-status', `vx-chattools-status--${latestStatus}`]}
+						aria-label={statusAnnouncement(latestStatus, latest.errorMessage)}
+					>
+						{latestStatus === 'running' || latestStatus === 'pending' ? (
+							<ActivityIndicator />
+						) : (
+							<Icon name={STATUS_ICON[latestStatus] ?? 'xplat-check'} size={12} />
+						)}
+					</span>
+					<span className="vx-chattools-name">{latest.name}</span>
+					{latest.target != null ? <span className="vx-chattools-target">{latest.target}</span> : null}
+				</>
+			)}
+			<span className="vx-chattools-count">
+				{!isExpanded ? (<><Icon name="xplat-wrench" size={12} />{props.calls.length}</>) : null}
+			</span>
+			<span className={['vx-chattools-chev', isExpanded ? 'vx-chattools-chev--open' : undefined]}>
+				<Icon name="xplat-chevron-down" size={12} />
+			</span>
+		</div>
+		<div
+			id={contentId}
+			className={['vx-chattools-body', isExpanded ? 'vx-chattools-body--open' : undefined]}
+			{...(isExpanded ? {} : { inert: true })}
+		>
+			<div className="vx-chattools-list">
+				{props.calls.map((call) => (
+					<CallRow key={call.key ?? call.name} call={call} hasClippedFocusRing />
+				))}
+			</div>
+		</div>
+	</div>
+}

package/src/CheckIndicator.macos.tsrx

@@ -0,0 +1,37 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props'
+import { cx } from './cx'
+import { applyEscapeProps } from './escape-props'
+
+/** CheckIndicator — standalone selection mark; nothing when unchecked and
+ *  childless, check glyph when checked, `children` in a stable slot. */
+export function CheckIndicator(props: IndicatorProps<'singleSelection'>) @{
+	const size = props.size ?? 'md'
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	@if (props.children != null) {
+		<flexboxlayout
+			id={props.id}
+			ref={forwardedRef}
+			className={cx('vx-ind-check-slot', `vx-ind-check-slot--${size}`, props.className)}
+			style={props.style}
+			alignItems="center"
+			justifyContent="center"
+		>
+			{props.children}
+		</flexboxlayout>
+	} @else if (props.state === 'checked') {
+		<label
+			id={props.id}
+			ref={forwardedRef}
+			className={cx('vx-ind-check', `vx-ind-check--${size}`, props.isDisabled && 'vx-ind-check--disabled', props.className)}
+			style={props.style}
+			text="✓"
+		/>
+	} @else {
+		null
+	}
+}

package/src/CheckIndicator.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+
+/** CheckIndicator — the standalone selection mark (listbox options, menu
+ *  items). Renders nothing when `state="unchecked"` and no `children` are
+ *  given; a check glyph when checked; `children` replace the glyph (e.g. a
+ *  spinner) inside a slot that keeps the layout stable. */
+export function CheckIndicator(props: IndicatorProps<'singleSelection'>) @{
+	const size = props.size ?? 'md';
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	@if (props.children != null) {
+		<flexboxlayout
+			id={props.id}
+			ref={forwardedRef}
+			className={cx('vx-ind-check-slot', `vx-ind-check-slot--${size}`, props.className)}
+			style={props.style}
+			alignItems="center"
+			justifyContent="center"
+		>
+			{props.children}
+		</flexboxlayout>
+	} @else if (props.state === 'checked') {
+		<label
+			id={props.id}
+			ref={forwardedRef}
+			className={cx('vx-ind-check', `vx-ind-check--${size}`, props.isDisabled && 'vx-ind-check--disabled', props.className)}
+			style={props.style}
+			text="✓"
+		/>
+	} @else {
+		null
+	}
+}

package/src/CheckIndicator.web.tsrx

@@ -0,0 +1,38 @@
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+
+/** CheckIndicator — standalone selection mark. Nothing when unchecked and
+ *  childless; a check glyph when checked; `children` replace the glyph
+ *  inside a stable slot. `aria-hidden`. */
+export function CheckIndicator(props: IndicatorProps<'singleSelection'>) @{
+	const size = props.size ?? 'md';
+
+	const forwardedRef = useMemo(() => refList((e: any) => { if (e) { applyEscapeProps(e, props); applyWebProps(e, props.web); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	@if (props.children != null) {
+		<span
+			id={props.id}
+			ref={forwardedRef}
+			className={['vx-ind-check-slot', `vx-ind-check-slot--${size}`, props.className]}
+			style={props.style}
+			aria-hidden="true"
+		>
+			{props.children}
+		</span>
+	} @else if (props.state === 'checked') {
+		<span
+			id={props.id}
+			ref={forwardedRef}
+			className={['vx-ind-check', `vx-ind-check--${size}`, props.isDisabled ? 'vx-ind-check--disabled' : undefined, props.className]}
+			style={props.style}
+			aria-hidden="true"
+		>
+			{'✓'}
+		</span>
+	} @else {
+		null
+	}
+}

package/src/Checkbox.tsrx

@@ -1,23 +1,31 @@
 /** @jsxImportSource @nativescript-community/octane */
 import type { CheckboxProps } from "./props";
 import { cx } from "./cx";
-import { applyEscapeProps, nativeAccessibilityRole } from "./escape-props";
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props";
+import { useFieldControlProps } from './field-context';
+import { useIndicator, CheckboxIndicator, indicatorScope } from './indicators';
 
 /** Self-drawn checkbox — box + ✓ glyph, identical layout across targets.
  *  Toggles on tap. */
-export function Checkbox(props: CheckboxProps) @{
+export function Checkbox(inputProps: CheckboxProps) @{
+	const props = useFieldControlProps(inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
+	const Ind = useIndicator('checkbox') ?? CheckboxIndicator;
+	const indState = props.indeterminate ? 'indeterminate' : props.checked ? 'checked' : 'unchecked';
+
 	<flexboxlayout
 		ref={(v: any) => applyEscapeProps(v, props)}
 		id={props.id}
-		className={cx('vx-checkbox-row', props.checked && 'vx-checkbox--on', props.disabled && 'vx-checkbox--disabled', props.className)}
+		className={cx('vx-checkbox-row', indicatorScope, props.checked && 'vx-checkbox--on', props.isDisabled && 'vx-checkbox--disabled', props.isReadOnly && 'vx-checkbox--readonly', props.isLoading && 'vx-checkbox--loading', props.status && `vx-checkbox--status-${props.status.type}`, props.size && `vx-checkbox--size-${props.size}`, props.className)}
 		style={props.style}
 		accessibilityRole={nativeAccessibilityRole('checkbox') as any}
-		accessibilityLabel={props.accessibilityLabel}
-		onTap={props.disabled ? undefined : () => props.onCheckedChange?.(!(props.checked ?? false))}
+	accessibilityLabel={props.accessibilityLabel ?? props.ariaLabel ?? props.fieldLabel ?? props.label}
+	accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.indeterminate ? 'Partially selected' : undefined}
+		accessibilityState={nativeAccessibilityState({ disabled: props.isDisabled, checked: props.indeterminate ? undefined : props.checked ?? false }) as any}
+		onTap={isBlocked ? undefined : () => props.onCheckedChange?.(props.indeterminate ? true : !(props.checked ?? false))}
 	>
-		<flexboxlayout className="vx-checkbox">
-			{props.checked ? <label className="vx-checkbox-check" text="✓" /> : null}
-		</flexboxlayout>
+		<Ind state={indState} size={props.size === 'sm' ? 'sm' : 'md'} isDisabled={props.isDisabled} />
 		{props.label != null ? <label className="vx-checkbox-label" text={props.label} /> : null}
 	</flexboxlayout>
 }

package/src/Checkbox.web.tsrx

@@ -1,34 +1,47 @@
 import type { CheckboxProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
+import { useFieldControlProps } from './field-context';
+import { useIndicator, CheckboxIndicator, indicatorScope } from './indicators';
 
 /** Self-drawn checkbox — box + ✓ glyph, identical layout across targets.
  *  Toggles on click, Space, and Enter. The platform look (if wanted) is an
  *  app's own choice — there is no OS checkbox widget in the subpaths. */
-export function Checkbox(props: CheckboxProps) @{
-	const toggle = () => props.onCheckedChange?.(!(props.checked ?? false));
+export function Checkbox(inputProps: CheckboxProps) @{
+	const props = useFieldControlProps(inputProps);
+	const isBlocked = props.isDisabled || props.isReadOnly;
+	const Ind = useIndicator('checkbox') ?? CheckboxIndicator;
+	const indState = props.indeterminate ? 'indeterminate' : props.checked ? 'checked' : 'unchecked';
+	const toggle = () => {
+		if (!isBlocked) props.onCheckedChange?.(props.indeterminate ? true : !(props.checked ?? false));
+	};
 
 	<div
 		ref={(e: any) => applyEscapeProps(e, props)}
 		id={props.id}
 		role="checkbox"
-		aria-checked={props.checked ?? false}
-		aria-disabled={props.disabled ?? undefined}
-		aria-label={props.accessibilityLabel}
-		tabIndex={props.disabled ? undefined : 0}
-		className={['vx-checkbox-row', props.checked ? 'vx-checkbox--on' : undefined, props.disabled ? 'vx-checkbox--disabled' : undefined, props.className]}
+		aria-checked={props.indeterminate ? 'mixed' : props.checked ?? false}
+		aria-disabled={props.isDisabled || undefined}
+		aria-readonly={props.isReadOnly || undefined}
+		aria-busy={props.isLoading || undefined}
+		aria-required={props.isRequired && !props.isOptional || undefined}
+		aria-invalid={props.status?.type === 'error' || undefined}
+		aria-label={props.ariaLabel}
+		aria-labelledby={props.ariaLabelledBy}
+		aria-describedby={props.ariaDescribedBy}
+		aria-description={props.accessibilityHint}
+		tabIndex={props.isDisabled ? undefined : 0}
+		className={['vx-checkbox-row', indicatorScope, props.checked ? 'vx-checkbox--on' : undefined, props.isDisabled ? 'vx-checkbox--disabled' : undefined, props.isReadOnly ? 'vx-checkbox--readonly' : undefined, props.isLoading ? 'vx-checkbox--loading' : undefined, props.status ? `vx-checkbox--status-${props.status.type}` : undefined, props.size ? `vx-checkbox--size-${props.size}` : undefined, props.className]}
 		style={props.style}
-		onClick={props.disabled ? undefined : toggle}
+		onClick={isBlocked ? undefined : toggle}
 		onKeyDown={(e: any) => {
-			if (props.disabled) return;
+			if (isBlocked) return;
 			if (e.key === ' ' || e.key === 'Enter') {
 				e.preventDefault();
 				toggle();
 			}
 		}}
 	>
-		<div className="vx-checkbox" aria-hidden="true">
-			{props.checked ? <span className="vx-checkbox-check">✓</span> : null}
-		</div>
+		<Ind state={indState} size={props.size === 'sm' ? 'sm' : 'md'} isDisabled={props.isDisabled} />
 		{props.label != null ? <span className="vx-checkbox-label">{props.label}</span> : null}
 	</div>
 }

package/src/CheckboxGroup.macos.tsrx

@@ -1,12 +1,14 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import { useState } from 'octane';
 import type { CheckboxGroupProps } from "./props";
 import { cx } from "./cx";
 import { applyEscapeProps } from "./escape-props";
 import { Checkbox } from './controls.macos.tsrx';
+import { useFieldControlProps } from './field-context';
 
 /** CheckboxGroup — multi-select list of self-drawn checkboxes. */
-export function CheckboxGroup(props: CheckboxGroupProps) @{
+export function CheckboxGroup(inputProps: CheckboxGroupProps) @{
+	const props = useFieldControlProps(inputProps);
 	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
 	const controlled = props.value !== undefined;
 	const selected = controlled ? props.value! : internal;
@@ -23,14 +25,18 @@ export function CheckboxGroup(props: CheckboxGroupProps) @{
 		ref={(v: any) => applyEscapeProps(v, props)}
 		id={props.id}
 		flexDirection={props.horizontal ? 'row' : 'column'}
-		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.className)}
+		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.isDisabled && 'vx-checkbox-group--disabled', props.isReadOnly && 'vx-checkbox-group--readonly', props.isLoading && 'vx-checkbox-group--loading', props.status && `vx-checkbox-group--status-${props.status.type}`, props.size && `vx-checkbox-group--size-${props.size}`, props.className)}
 		style={props.style}
-		accessibilityLabel={props.accessibilityLabel}
+		accessibilityLabel={props.accessibilityLabel ?? props.ariaLabel ?? props.fieldLabel ?? props.label}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={{ disabled: props.isDisabled, readonly: props.isReadOnly, busy: props.isLoading, required: props.isRequired && !props.isOptional, invalid: props.status?.type === 'error' }}
 	>
 		@for (const opt of props.options; key opt.value) {
 			<Checkbox
 				checked={selected.includes(opt.value)}
-				disabled={props.disabled || opt.disabled}
+				isDisabled={props.isDisabled || opt.isDisabled}
+				isReadOnly={props.isReadOnly}
+				isLoading={props.isLoading}
 				label={opt.label}
 				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
 			/>

package/src/CheckboxGroup.tsrx

@@ -2,11 +2,13 @@
 import { useState } from 'octane';
 import type { CheckboxGroupProps } from "./props";
 import { cx } from "./cx";
-import { applyEscapeProps } from "./escape-props";
+import { applyEscapeProps, nativeAccessibilityState } from "./escape-props";
 import { Checkbox } from './Checkbox.tsrx';
+import { useFieldControlProps } from './field-context';
 
 /** CheckboxGroup — multi-select list of self-drawn checkboxes. */
-export function CheckboxGroup(props: CheckboxGroupProps) @{
+export function CheckboxGroup(inputProps: CheckboxGroupProps) @{
+	const props = useFieldControlProps(inputProps);
 	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
 	const controlled = props.value !== undefined;
 	const selected = controlled ? props.value! : internal;
@@ -19,18 +21,23 @@ export function CheckboxGroup(props: CheckboxGroupProps) @{
 	const toggle = (v: string, on: boolean) =>
 		setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
 
+	const isReadOnly = props.isReadOnly;
+
 	<flexboxlayout
 		ref={(v: any) => applyEscapeProps(v, props)}
 		id={props.id}
 		flexDirection={props.horizontal ? 'row' : 'column'}
-		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.className)}
+		className={cx('vx-checkbox-group', props.horizontal && 'vx-checkbox-group--row', props.isDisabled && 'vx-checkbox-group--disabled', isReadOnly && 'vx-checkbox-group--readonly', props.isLoading && 'vx-checkbox-group--loading', props.status && `vx-checkbox-group--status-${props.status.type}`, props.size && `vx-checkbox-group--size-${props.size}`, props.className)}
 		style={props.style}
-		accessibilityLabel={props.accessibilityLabel}
+	accessibilityLabel={props.accessibilityLabel ?? props.ariaLabel ?? props.fieldLabel ?? props.label}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityState={nativeAccessibilityState({ disabled: props.isDisabled }) as any}
 	>
 		@for (const opt of props.options; key opt.value) {
 			<Checkbox
 				checked={selected.includes(opt.value)}
-				disabled={props.disabled || opt.disabled}
+				isDisabled={props.isDisabled || opt.isDisabled}
+				isReadOnly={isReadOnly}
 				label={opt.label}
 				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
 			/>

package/src/CheckboxGroup.web.tsrx

@@ -2,9 +2,11 @@ import { useState } from 'octane';
 import type { CheckboxGroupProps } from "./props";
 import { applyEscapeProps } from "./escape-props";
 import { Checkbox } from './Checkbox.web.tsrx';
+import { useFieldControlProps } from './field-context';
 
 /** CheckboxGroup — multi-select list of self-drawn checkboxes. */
-export function CheckboxGroup(props: CheckboxGroupProps) @{
+export function CheckboxGroup(inputProps: CheckboxGroupProps) @{
+	const props = useFieldControlProps(inputProps);
 	const [internal, setInternal] = useState<string[]>(props.defaultValue ?? []);
 	const controlled = props.value !== undefined;
 	const selected = controlled ? props.value! : internal;
@@ -17,19 +19,27 @@ export function CheckboxGroup(props: CheckboxGroupProps) @{
 	const toggle = (v: string, on: boolean) =>
 		setSelected(on ? [...selected, v] : selected.filter((x) => x !== v));
 
+	const isReadOnly = props.isReadOnly;
+
 	<div
 		ref={(e: any) => applyEscapeProps(e, props)}
 		id={props.id}
 		role="group"
-		aria-label={props.accessibilityLabel}
-		className={['vx-checkbox-group', props.horizontal ? 'vx-checkbox-group--row' : undefined, props.className]}
+		aria-label={props.ariaLabel}
+		aria-labelledby={props.ariaLabelledBy}
+		aria-describedby={props.ariaDescribedBy}
+		aria-disabled={props.isDisabled || undefined}
+		aria-readonly={isReadOnly || undefined}
+		aria-busy={props.isLoading || undefined}
+		className={['vx-checkbox-group', props.horizontal ? 'vx-checkbox-group--row' : undefined, props.isDisabled ? 'vx-checkbox-group--disabled' : undefined, isReadOnly ? 'vx-checkbox-group--readonly' : undefined, props.isLoading ? 'vx-checkbox-group--loading' : undefined, props.status ? `vx-checkbox-group--status-${props.status.type}` : undefined, props.size ? `vx-checkbox-group--size-${props.size}` : undefined, props.className]}
 		style={props.style}
 	>
 		{props.options.map((opt: any) => (
 			<Checkbox
 				key={opt.value}
 				checked={selected.includes(opt.value)}
-				disabled={props.disabled || opt.disabled}
+				isDisabled={props.isDisabled || opt.isDisabled}
+				isReadOnly={isReadOnly}
 				label={opt.label}
 				onCheckedChange={(on: boolean) => toggle(opt.value, on)}
 			/>

package/src/CheckboxIndicator.macos.tsrx

@@ -0,0 +1,32 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props'
+import { cx } from './cx'
+import { applyEscapeProps } from './escape-props'
+
+/** CheckboxIndicator — decorative box: check glyph when checked, inset bar
+ *  when indeterminate. Mirrors the shared leaf. */
+export function CheckboxIndicator(props: IndicatorProps<'multiSelection'>) @{
+	const size = props.size ?? 'md'
+	const mark = props.state === 'indeterminate'
+		? <flexboxlayout className={cx('vx-ind-dash', `vx-ind-dash--${size}`)} />
+		: props.state === 'checked'
+			? <label className={cx('vx-checkbox-check', `vx-ind-check--${size}`)} text="✓" />
+			: null
+
+	const content = props.children != null ? props.children : mark
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		className={cx('vx-checkbox', 'vx-ind-checkbox', `vx-ind-checkbox--${size}`, props.state !== 'unchecked' && `vx-ind-checkbox--${props.state}`, props.isDisabled && 'vx-ind-checkbox--disabled', props.className)}
+		style={props.style}
+		alignItems="center"
+		justifyContent="center"
+	>
+		{content}
+	</flexboxlayout>
+}

package/src/CheckboxIndicator.tsrx

@@ -0,0 +1,39 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps } from './escape-props';
+
+/** CheckboxIndicator — decorative box for a checkbox: 20dip (sm) / 24dip
+ *  (md) square, check glyph when checked, an inset bar when indeterminate.
+ *  Renderable `children` replace the state mark (busy spinners). The owning
+ *  control keeps role/focus/state — this draws the picture only. */
+export function CheckboxIndicator(props: IndicatorProps<'multiSelection'>) @{
+	const size = props.size ?? 'md';
+	const mark = props.state === 'indeterminate'
+		? <flexboxlayout className={cx('vx-ind-dash', `vx-ind-dash--${size}`)} />
+		: props.state === 'checked'
+			? <label className={cx('vx-checkbox-check', `vx-ind-check--${size}`)} text="✓" />
+			: null;
+
+	const content = props.children != null ? props.children : mark;
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<flexboxlayout
+		id={props.id}
+		ref={forwardedRef}
+		className={cx(
+			'vx-checkbox', 'vx-ind-checkbox', `vx-ind-checkbox--${size}`,
+			props.state !== 'unchecked' && `vx-ind-checkbox--${props.state}`,
+			props.isDisabled && 'vx-ind-checkbox--disabled',
+			props.className,
+		)}
+		style={props.style}
+		alignItems="center"
+		justifyContent="center"
+	>
+		{content}
+	</flexboxlayout>
+}

package/src/CheckboxIndicator.web.tsrx

@@ -0,0 +1,36 @@
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { IndicatorProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { applyWebProps } from './platformProps.web';
+
+/** CheckboxIndicator — decorative box: check glyph when checked, inset bar
+ *  when indeterminate, 20px (sm) / 24px (md). `aria-hidden` — the owning
+ *  checkbox keeps the semantics. `children` replaces the state mark. */
+export function CheckboxIndicator(props: IndicatorProps<'multiSelection'>) @{
+	const size = props.size ?? 'md';
+	const mark = props.state === 'indeterminate'
+		? <span className={['vx-ind-dash', `vx-ind-dash--${size}`]} />
+		: props.state === 'checked'
+			? <span className={['vx-checkbox-check', `vx-ind-check--${size}`]}>{'✓'}</span>
+			: null;
+
+	const content = props.children != null ? props.children : mark;
+
+	const forwardedRef = useMemo(() => refList((e: any) => { if (e) { applyEscapeProps(e, props); applyWebProps(e, props.web); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<span
+		id={props.id}
+		ref={forwardedRef}
+		className={[
+			'vx-checkbox', 'vx-ind-checkbox', `vx-ind-checkbox--${size}`,
+			props.state !== 'unchecked' ? `vx-ind-checkbox--${props.state}` : undefined,
+			props.isDisabled ? 'vx-ind-checkbox--disabled' : undefined,
+			props.className,
+		]}
+		style={props.style}
+		aria-hidden="true"
+	>
+		{content}
+	</span>
+}

package/src/Chip.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { ChipProps } from "./props";
 import { cx } from "./cx";
 import { Pressable } from './Pressable.macos.tsrx';

package/src/Chip.tsrx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @nativescript-community/octane */
 import type { ChipProps } from "./props";
 import { cx } from "./cx";
-import { Pressable } from './Pressable.tsrx';
+import { Pressable } from './Pressable';
 
 /** Chip — small action/filter element with a selected state and an
  *  optional ✕ remove affordance. */