fluid-primitives 0.16.0 → 0.17.2-next.4.ea462ad

package/README.md

@@ -2,12 +2,50 @@
 
 # Fluid Primitives
 
-The headless component library for TYPO3 Fluid
+Unstyled, flexible and accessible UI Primitives that provide a foundation for building your own component library in Fluid.
+
+Fluid Primitives brings modern component patterns to TYPO3. Build accessible, composable UI components with the same developer experience you'd expect from React libraries like Radix or Base UI - but for Fluid templates.
 
 ## Documentation
 
-The documentation can be found at [fluid-primitives.com](https://fluid-primitives.com).
+Full documentation can be found at [fluid-primitives.com](https://fluid-primitives.com).
+
+## What You Get
+
+**Accessible by default.** Every interactive component handles keyboard navigation, focus management, and ARIA attributes automatically via [Zag.js](https://zagjs.com/) state machines.
+
+**Composable API.** No more prop drilling. Build complex UIs by composing small, focused parts that work together.
+
+**Unstyled.** Zero design opinions. Use Tailwind, vanilla CSS, or any styling approach. You control every pixel.
+
+**Server-rendered.** Components render on the server with PHP/Fluid, then hydrate on the client. No layout shift, great for SEO.
+
+## Quick Example
+
+A tooltip with full accessibility support in just a few lines:
+
+```html
+<ui:tooltip.root>
+    <ui:tooltip.trigger>Hover me</ui:tooltip.trigger>
+    <ui:tooltip.content>Tooltip content here</ui:tooltip.content>
+</ui:tooltip.root>
+```
+
+That's it. Keyboard support, focus handling, proper ARIA attributes - all handled.
+
+## Why This Exists
+
+TYPO3 Fluid lacked an elegant solution for building robust, interactive components. The typical approach leads to bloated templates with complex conditional logic, poor accessibility, and custom JavaScript that's hard to maintain.
+
+Fluid Primitives solves this by bringing proven patterns from the modern frontend ecosystem to TYPO3, while respecting its server-first architecture.
+
+## Acknowledgments
+
+- [Zag.js](https://zagjs.com/) - The state machine foundation
+- [Radix UI](https://www.radix-ui.com/primitives) - API design inspiration
+- [Base UI](https://base-ui.com/) - Component behavior patterns
+- [Ark UI](https://ark-ui.com/) - Zag.js integration patterns
 
 ## Development
 
-See [github.com/jramke/fluid-primitives.com](https://github.com/jramke/fluid-primitives.com) for the development setup.
+See [github.com/jramke/fluid-primitives.com](https://github.com/jramke/fluid-primitives.com) monorepo for the development setup.

package/dist/Client-D-GbQqXf.js

@@ -0,0 +1,240 @@
+import { ListCollection } from "@zag-js/collection";
+import { VanillaMachine, VanillaMachine as Machine, mergeProps, normalizeProps, spreadProps } from "@zag-js/vanilla";
+import { uuid } from "@zag-js/utils";
+
+//#region Resources/Private/Client/src/lib/component.ts
+var Component = class {
+	document;
+	machine;
+	api;
+	hydrator = null;
+	userProps;
+	static name;
+	get doc() {
+		return this.document;
+	}
+	constructor(props, userDocument = document) {
+		this.document = userDocument;
+		this.userProps = this.transformProps(props);
+		this.hydrator = this.initHydrator(props);
+		this.machine = this.initMachine(props);
+		this.api = this.initApi();
+	}
+	initHydrator(props) {
+		const id = props.id;
+		if (!id) throw new Error("ComponentHydrator requires an id prop to initialize.");
+		return new ComponentHydrator(this.getName(), id, props.ids, this.doc);
+	}
+	init() {
+		this.render();
+		this.machine.subscribe(() => {
+			this.api = this.initApi();
+			this.render();
+		});
+		this.machine.start();
+	}
+	getName() {
+		return this.constructor.name;
+	}
+	/**
+	* Override in consumer for example when a getter is used for collection
+	* Needs to be used manually inside the initMachine method
+	*/
+	transformProps(props) {
+		return props;
+	}
+	updateProps(newProps) {
+		this.machine.updateProps(newProps);
+	}
+	destroy() {
+		this.machine.stop();
+		this.hydrator?.destroy();
+	}
+	spreadProps(node, attrs) {
+		spreadProps(node, attrs, this.machine.scope.id);
+	}
+	getElement(part, parent) {
+		return this.hydrator?.getElement(part, parent) || null;
+	}
+	getElements(part, parent) {
+		return this.hydrator?.getElements(part, parent) || [];
+	}
+};
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerFieldMachine(field, service) {
+	if (!field) return;
+	registry.set(field, service);
+	field.dispatchEvent(new CustomEvent("fluid-primitives:field:registered", { bubbles: true }));
+}
+function getFieldMachineFor(el) {
+	if (!el) return;
+	return registry.get(el);
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/field-aware-component.ts
+const fieldProps = [
+	"invalid",
+	"disabled",
+	"readOnly",
+	"required"
+];
+const fieldAccessors = {
+	disabled: (s) => s.context.get("disabled"),
+	readOnly: (s) => s.context.get("readOnly"),
+	required: (s) => s.context.get("required"),
+	invalid: (s) => s.context.get("invalid")
+};
+var FieldAwareComponent = class extends Component {
+	subscribedToField = false;
+	fieldMachine;
+	closestField = null;
+	getClosestField() {
+		return this.closestField || this.getElement("root")?.closest("[data-scope=\"field\"][data-part=\"root\"]") || null;
+	}
+	withFieldProps(props) {
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return props;
+		this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) return this.propsWithField(props, this.fieldMachine);
+		else {
+			const handler = () => {
+				this.fieldMachine = getFieldMachineFor(this.closestField);
+				this.updateProps(this.propsWithField(this.userProps, this.fieldMachine));
+				this.closestField?.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+		return props;
+	}
+	subscribeToFieldService() {
+		if (this.subscribedToField) return;
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return;
+		if (!this.fieldMachine) this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) {
+			this.fieldMachine.subscribe((snapshot) => {
+				queueMicrotask(() => {
+					let propsToUpdate = {};
+					for (const prop of fieldProps) {
+						const newValue = !!fieldAccessors[prop](snapshot);
+						if (newValue !== !!this.machine.prop(prop)) propsToUpdate[prop] = newValue;
+					}
+					if (Object.keys(propsToUpdate).length > 0) this.updateProps(propsToUpdate);
+					else this.machine.notify();
+				});
+			});
+			this.subscribedToField = true;
+		} else {
+			const handler = () => {
+				this.subscribeToFieldService();
+				this.closestField.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/hydration.ts
+function getHydrationData(component, id) {
+	const hydrationData = window.FluidPrimitives?.hydrationData;
+	if (!hydrationData || typeof hydrationData !== "object") return null;
+	if (!component) return hydrationData;
+	if (!hydrationData[component]) return null;
+	if (!id) return hydrationData[component];
+	return hydrationData[component][id] || null;
+}
+function mount(componentName, callback) {
+	const hydrationInstances = getHydrationData(componentName);
+	if (!hydrationInstances) return;
+	Object.keys(hydrationInstances).forEach((id) => {
+		if (hydrationInstances[id].controlled) return;
+		const instance = callback({
+			...hydrationInstances[id],
+			createHydrator: () => new ComponentHydrator(componentName, id, hydrationInstances[id].props.ids)
+		});
+		if (!instance) return;
+		if (!window.FluidPrimitives.uncontrolledInstances[componentName]) window.FluidPrimitives.uncontrolledInstances[componentName] = {};
+		window.FluidPrimitives.uncontrolledInstances[componentName][id] = instance;
+	});
+}
+var ComponentHydrator = class {
+	componentName;
+	doc;
+	rootId;
+	ids;
+	elementRefs = /* @__PURE__ */ new Map();
+	constructor(componentName, rootId, ids = {}, doc = document) {
+		this.componentName = componentName;
+		this.doc = doc;
+		if (!rootId) throw new Error(`Root ID is required for component hydration: ${componentName}`);
+		this.rootId = rootId;
+		this.ids = ids;
+	}
+	getElement(part, parent = this.doc) {
+		if (this.elementRefs.has(part)) return this.elementRefs.get(part) || null;
+		let element = null;
+		if (this.ids[part]) element = parent.querySelector(`#${this.ids[part]}`);
+		else element = parent.querySelector(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`);
+		if (element) {
+			if (parent === this.doc) this.elementRefs.set(part, element);
+			element.removeAttribute(`data-hydrate-${this.componentName}`);
+			element.__rootId = this.rootId;
+		}
+		return element;
+	}
+	getElements(part, parent = this.doc) {
+		if (this.elementRefs.has(part)) return this.elementRefs.get(part);
+		let elements = [];
+		if (this.ids[part]) elements = Array.from(parent.querySelectorAll(`#${this.ids[part]}`));
+		else elements = Array.from(parent.querySelectorAll(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`));
+		if (parent === this.doc) this.elementRefs.set(part, elements);
+		elements.forEach((el) => el.removeAttribute(`data-hydrate-${this.componentName}`));
+		return elements;
+	}
+	generateRefAttributesString(part) {
+		const id = this.ids[part] || `${this.rootId}-${part}`;
+		return `data-scope="${this.componentName}" data-part="${part}" data-hydrate-${this.componentName}="${id}"`;
+	}
+	setRefAttributes(element, part) {
+		this.generateRefAttributesString(part).split(" ").map((attr) => attr.trim()).forEach((attr) => {
+			const [key, value] = attr.split("=");
+			element.setAttribute(key, value.replace(/"/g, ""));
+		});
+	}
+	destroy() {
+		this.elementRefs.forEach((el) => {
+			if (el instanceof Element) el.setAttribute(`data-hydrate-${this.componentName}`, this.rootId);
+			else el.forEach((e) => e.setAttribute(`data-hydrate-${this.componentName}`, this.rootId));
+		});
+		this.elementRefs.clear();
+	}
+};
+function getListCollectionFromHydrationData(hydrationCollection) {
+	if (hydrationCollection instanceof ListCollection) return hydrationCollection;
+	return new ListCollection({
+		items: hydrationCollection.items,
+		itemToValue: hydrationCollection.itemToValueKey ? (item) => item?.[hydrationCollection.itemToValueKey] : void 0,
+		itemToString: hydrationCollection.itemToStringKey ? (item) => item?.[hydrationCollection.itemToStringKey] : void 0,
+		isItemDisabled: hydrationCollection.isItemDisabledKey ? (item) => item?.[hydrationCollection.isItemDisabledKey] : void 0,
+		groupBy: hydrationCollection.groupByKey ? (item) => {
+			const key = hydrationCollection.groupByKey;
+			if (!key) return void 0;
+			if (key.includes(".")) return key.split(".").reduce((obj, k) => obj ? obj[k] : void 0, item);
+			return item?.[key];
+		} : void 0
+	});
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/uid.ts
+function uid(prefix = "f") {
+	return "«" + prefix + uuid() + "»";
+}
+
+//#endregion
+export { Machine as a, getListCollectionFromHydrationData as c, registerFieldMachine as d, Component as f, mergeProps as i, mount as l, spreadProps as n, ComponentHydrator as o, normalizeProps as r, getHydrationData as s, uid as t, FieldAwareComponent as u };

package/dist/accordion.d.ts

@@ -1,12 +1,12 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, d as Component } from "./index-DxZhm-zT.js";
 import * as accordion from "@zag-js/accordion";
-import * as _zag_js_types3 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Accordion/Accordion.d.ts
 declare class Accordion extends Component<accordion.Props, accordion.Api> {
   static name: string;
   initMachine(props: accordion.Props): Machine<any>;
-  initApi(): accordion.Api<_zag_js_types3.PropTypes<{
+  initApi(): accordion.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;

package/dist/accordion.js

@@ -1 +1,48 @@
-import{Component as e,Machine as t,normalizeProps as n}from"./Client-CygooKu8.js";import*as r from"@zag-js/accordion";var i=class extends e{static name=`accordion`;initMachine(e){return new t(r.machine,{collapsible:!0,...e})}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElements(`item`);t.forEach(e=>{this.spreadProps(e,this.api.getItemProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let n=this.getElements(`item-trigger`);n.forEach(e=>{this.spreadProps(e,this.api.getItemTriggerProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let r=this.getElements(`item-content`);r.forEach(e=>{this.spreadProps(e,this.api.getItemContentProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let i=this.getElements(`item-indicator`);i.forEach(e=>{this.spreadProps(e,this.api.getItemIndicatorProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))}),this.getElements(`item-header`)}};export{i as Accordion};
+import { a as Machine, f as Component, r as normalizeProps } from "./Client-D-GbQqXf.js";
+import * as accordion from "@zag-js/accordion";
+
+//#region Resources/Private/Primitives/Accordion/Accordion.ts
+var Accordion = class extends Component {
+	static name = "accordion";
+	initMachine(props) {
+		return new Machine(accordion.machine, {
+			collapsible: true,
+			...props
+		});
+	}
+	initApi() {
+		return accordion.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		this.getElements("item").forEach((itemEl) => {
+			this.spreadProps(itemEl, this.api.getItemProps({
+				value: itemEl.getAttribute("data-value"),
+				disabled: itemEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-trigger").forEach((trigger) => {
+			this.spreadProps(trigger, this.api.getItemTriggerProps({
+				value: trigger.getAttribute("data-value"),
+				disabled: trigger.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-content").forEach((contentEl) => {
+			this.spreadProps(contentEl, this.api.getItemContentProps({
+				value: contentEl.getAttribute("data-value"),
+				disabled: contentEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-indicator").forEach((indicatorEl) => {
+			this.spreadProps(indicatorEl, this.api.getItemIndicatorProps({
+				value: indicatorEl.getAttribute("data-value"),
+				disabled: indicatorEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-header");
+	}
+};
+
+//#endregion
+export { Accordion };

package/dist/checkbox-group.d.ts

@@ -0,0 +1,99 @@
+import { a as Machine, l as FieldAwareComponent } from "./index-DxZhm-zT.js";
+import { t as FieldMachine } from "./form.registry-DjhMF6Ny.js";
+import { EventObject } from "@zag-js/core";
+import { PropTypes } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.types.d.ts
+interface CheckboxGroupProps {
+  id: string;
+  ids?: Record<string, string>;
+  /** The initial value of the checkbox group (uncontrolled) */
+  defaultValue?: string[];
+  /** The controlled value of the checkbox group */
+  value?: string[];
+  /** The name of the input fields in the checkbox group (for form submission) */
+  name?: string;
+  /** The form id the checkbox group belongs to */
+  form?: string;
+  /** If true, the checkbox group is disabled */
+  disabled?: boolean;
+  /** If true, the checkbox group is read-only */
+  readOnly?: boolean;
+  /** If true, the checkbox group is required */
+  required?: boolean;
+  /** If true, the checkbox group is invalid */
+  invalid?: boolean;
+  /** The maximum number of selected values */
+  maxSelectedValues?: number;
+  /** Called when the value changes */
+  onValueChange?: (details: {
+    value: string[];
+  }) => void;
+}
+interface CheckboxGroupSchema {
+  props: CheckboxGroupProps;
+  context: {
+    value: string[];
+  };
+  computed: {
+    isAtMax: boolean;
+    isInteractive: boolean;
+  };
+  state: 'ready';
+  event: EventObject;
+  action: string;
+  effect: string;
+}
+interface CheckboxGroupItemProps {
+  value: string;
+}
+/** API returned by getItemProps for checkbox items */
+interface CheckboxGroupItemState {
+  checked: boolean;
+  onCheckedChange: () => void;
+  name: string | undefined;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+}
+/** Public API for CheckboxGroup - used by Checkbox to get item props */
+interface CheckboxGroupApi {
+  /** The current value of the checkbox group */
+  value: string[];
+  /** The name for form submission */
+  name: string | undefined;
+  /** Whether the checkbox group is disabled */
+  disabled: boolean;
+  /** Whether the checkbox group is read-only */
+  readOnly: boolean;
+  /** Whether the checkbox group is invalid */
+  invalid: boolean;
+  /** Check if a value is selected */
+  isChecked(value: string): boolean;
+  /** Set the entire value array */
+  setValue(value: string[]): void;
+  /** Add a value to the selection */
+  addValue(value: string): void;
+  /** Remove a value from the selection */
+  removeValue(value: string): void;
+  /** Toggle a value */
+  toggleValue(value: string): void;
+  /** Get props to merge into a checkbox item */
+  getItemProps(props: CheckboxGroupItemProps): CheckboxGroupItemState;
+  /** Get root element props */
+  getRootProps(): PropTypes['element'];
+  /** Get label element props */
+  getLabelProps(): PropTypes['element'];
+}
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.d.ts
+declare class CheckboxGroup extends FieldAwareComponent<CheckboxGroupProps, CheckboxGroupApi> {
+  static name: string;
+  propsWithField(props: CheckboxGroupProps, fieldMachine: FieldMachine): CheckboxGroupProps;
+  initMachine(props: CheckboxGroupProps): Machine<CheckboxGroupSchema>;
+  initApi(): CheckboxGroupApi;
+  render(): void;
+  destroy(): void;
+}
+//#endregion
+export { CheckboxGroup };

package/dist/checkbox-group.js

@@ -0,0 +1,117 @@
+import { a as Machine, i as mergeProps, r as normalizeProps, u as FieldAwareComponent } from "./Client-D-GbQqXf.js";
+import { i as connect, n as registerCheckboxGroup, r as unregisterCheckboxGroup } from "./checkbox-group.registry-CGwuF7SF.js";
+import { a as getLabelId } from "./field.dom-CJQXpQbZ.js";
+import { createMachine } from "@zag-js/core";
+
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.machine.ts
+const machine = createMachine({
+	initialState() {
+		return "ready";
+	},
+	context({ bindable, prop }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue") ?? [],
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	states: { ready: { on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"VALUE.ADD": { actions: ["addValue"] },
+		"VALUE.REMOVE": { actions: ["removeValue"] },
+		"VALUE.TOGGLE": { actions: ["toggleValue"] }
+	} } },
+	computed: {
+		isAtMax({ prop, context }) {
+			const max = prop("maxSelectedValues");
+			if (max == null) return false;
+			return context.get("value").length >= max;
+		},
+		isInteractive({ prop }) {
+			return !prop("disabled") && !prop("readOnly");
+		}
+	},
+	implementations: { actions: {
+		setValue({ context, event }) {
+			const newValue = event.value;
+			context.set("value", newValue);
+		},
+		addValue({ context, event, computed }) {
+			if (!computed("isInteractive")) return;
+			const val = event.value;
+			const currentValue = context.get("value");
+			if (currentValue.includes(val)) return;
+			if (computed("isAtMax")) return;
+			const newValue = [...currentValue, val];
+			context.set("value", newValue);
+		},
+		removeValue({ context, event, computed }) {
+			if (!computed("isInteractive")) return;
+			const val = event.value;
+			const newValue = context.get("value").filter((v) => v !== val);
+			context.set("value", newValue);
+		},
+		toggleValue({ context, event, computed }) {
+			const val = event.value;
+			const currentValue = context.get("value");
+			if (currentValue.includes(val)) {
+				if (!computed("isInteractive")) return;
+				const newValue = currentValue.filter((v) => v !== val);
+				context.set("value", newValue);
+			} else {
+				if (!computed("isInteractive")) return;
+				if (computed("isAtMax")) return;
+				const newValue = [...currentValue, val];
+				context.set("value", newValue);
+			}
+		}
+	} }
+});
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.ts
+var CheckboxGroup = class extends FieldAwareComponent {
+	static name = "checkbox-group";
+	propsWithField(props, fieldMachine) {
+		return {
+			...props,
+			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
+			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
+			required: props.required ?? fieldMachine.context.get("required"),
+			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
+			name: props.name ?? fieldMachine.prop("name"),
+			ids: {
+				...props.ids,
+				label: getLabelId(fieldMachine.scope)
+			}
+		};
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		const createdMachine = new Machine(machine, props);
+		registerCheckboxGroup(this.getElement("root"), createdMachine);
+		return createdMachine;
+	}
+	initApi() {
+		return connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		const rootEl = this.getElement("root");
+		if (rootEl) {
+			const mergedProps = mergeProps(this.api.getRootProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			this.spreadProps(rootEl, mergedProps);
+		}
+		const labelEl = this.getElement("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+	}
+	destroy() {
+		unregisterCheckboxGroup(this.getElement("root"));
+		super.destroy();
+	}
+};
+
+//#endregion
+export { CheckboxGroup };

package/dist/checkbox-group.registry-CGwuF7SF.js

@@ -0,0 +1,112 @@
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.dom.ts
+const getRootId = (scope) => scope.ids?.root ?? `checkbox-group:${scope.id}:root`;
+const getLabelId = (scope) => scope.ids?.label ?? `checkbox-group:${scope.id}:label`;
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.connect.ts
+function connect(service, normalize) {
+	const { scope, context, computed, send, prop } = service;
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const invalid = !!prop("invalid");
+	const required = !!prop("required");
+	const name = prop("name");
+	return {
+		get value() {
+			return context.get("value");
+		},
+		name,
+		disabled,
+		readOnly,
+		invalid,
+		isChecked(val) {
+			return context.get("value").includes(val);
+		},
+		setValue(val) {
+			send({
+				type: "VALUE.SET",
+				value: val
+			});
+		},
+		addValue(val) {
+			send({
+				type: "VALUE.ADD",
+				value: val
+			});
+		},
+		removeValue(val) {
+			send({
+				type: "VALUE.REMOVE",
+				value: val
+			});
+		},
+		toggleValue(val) {
+			send({
+				type: "VALUE.TOGGLE",
+				value: val
+			});
+		},
+		getItemProps(props) {
+			const checked = context.get("value").includes(props.value);
+			const isAtMax = computed("isAtMax");
+			return {
+				checked,
+				onCheckedChange: () => send({
+					type: "VALUE.TOGGLE",
+					value: props.value
+				}),
+				name,
+				disabled: disabled || isAtMax && !checked,
+				readOnly,
+				invalid
+			};
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				role: "group",
+				"data-scope": "checkbox-group",
+				"data-part": "root",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
+				"data-invalid": invalid ? "" : void 0,
+				"aria-labelledby": getLabelId(scope),
+				"aria-disabled": disabled || void 0,
+				"aria-invalid": invalid || void 0,
+				"aria-required": required || void 0
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				id: getLabelId(scope),
+				"data-scope": "checkbox-group",
+				"data-part": "label",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
+				"data-invalid": invalid ? "" : void 0
+			});
+		}
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerCheckboxGroup(root, machine) {
+	if (!root) return;
+	registry.set(root, machine);
+	root.dispatchEvent(new CustomEvent("fluid-primitives:checkbox-group:registered", { bubbles: true }));
+}
+function unregisterCheckboxGroup(root) {
+	if (!root) return;
+	registry.delete(root);
+}
+function getCheckboxGroupMachineFor(el) {
+	if (!el) return void 0;
+	const root = el.closest("[data-scope=\"checkbox-group\"][data-part=\"root\"]");
+	if (!root) return void 0;
+	return registry.get(root);
+}
+
+//#endregion
+export { connect as i, registerCheckboxGroup as n, unregisterCheckboxGroup as r, getCheckboxGroupMachineFor as t };