@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/chart/ChartTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,21 @@
+import { useChartPart } from "./ChartRoot.vue_vue_type_script_setup_true_lang.js";
+import { defineComponent, useAttrs, useSlots } from "vue";
+//#region src/components/chart/ChartTooltip.vue?vue&type=script&setup=true&lang.ts
+var ChartTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "ChartTooltip",
+	inheritAttrs: false,
+	__name: "ChartTooltip",
+	setup(__props) {
+		const slots = useSlots();
+		const attrs = useAttrs();
+		useChartPart("tooltip", () => ({
+			attrs,
+			slot: slots.default
+		}));
+		return (_ctx, _cache) => {
+			return null;
+		};
+	}
+});
+//#endregion
+export { ChartTooltip_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/chart/chart-curve.d.ts

@@ -0,0 +1,9 @@
+type Point = readonly [x: number, y: number];
+/** An SVG path bending smoothly through `points`, in `x` order, without overshooting any of them. */
+export declare function monotonePath(points: readonly Point[]): string;
+/**
+ * The closed SVG path between two such curves: along `top`, then back along
+ * `bottom`. Both run through the same `x` positions, in order.
+ */
+export declare function monotoneAreaPath(top: readonly Point[], bottom: readonly Point[]): string;
+export {};

package/dist/components/chart/chart-curve.js

@@ -0,0 +1,57 @@
+//#region src/components/chart/chart-curve.ts
+var round = (value) => Math.round(value * 1e3) / 1e3;
+/**
+* Each tangent of a monotone cubic through `points` (Steffen's limiter): the
+* curve bends through every point but never past one, so a peak is drawn at
+* its value. The ends take the tangent that leaves the curve straight there.
+*/
+function monotoneTangents(points) {
+	const last = points.length - 1;
+	const widths = [];
+	const slopes = [];
+	for (let index = 0; index < last; index++) {
+		const width = points[index + 1][0] - points[index][0];
+		widths.push(width);
+		const rise = points[index + 1][1] - points[index][1];
+		slopes.push(width ? rise / width : rise ? Math.sign(rise) * Infinity : 0);
+	}
+	const tangents = new Array(points.length).fill(0);
+	for (let index = 1; index < last; index++) {
+		const [before, after] = [slopes[index - 1], slopes[index]];
+		const span = widths[index - 1] + widths[index];
+		const weighted = span ? (before * widths[index] + after * widths[index - 1]) / span : 0;
+		tangents[index] = (Math.sign(before) + Math.sign(after)) * Math.min(Math.abs(before), Math.abs(after), .5 * Math.abs(weighted));
+	}
+	tangents[0] = widths[0] ? (3 * slopes[0] - tangents[1]) / 2 : tangents[1];
+	tangents[last] = widths[last - 1] ? (3 * slopes[last - 1] - tangents[last - 1]) / 2 : tangents[last - 1];
+	return tangents.map((tangent) => Number.isFinite(tangent) ? tangent : 0);
+}
+/** The path commands after the first point: cubic segments, or a straight one between two points. */
+function monotoneSegments(points) {
+	if (points.length < 3) return points.slice(1).map(([x, y]) => `L${round(x)},${round(y)}`);
+	const tangents = monotoneTangents(points);
+	return points.slice(1).map(([x, y], offset) => {
+		const [startX, startY] = points[offset];
+		const third = (x - startX) / 3;
+		return `C${round(startX + third)},${round(startY + tangents[offset] * third)},${round(x - third)},${round(y - tangents[offset + 1] * third)},${round(x)},${round(y)}`;
+	});
+}
+/** An SVG path bending smoothly through `points`, in `x` order, without overshooting any of them. */
+function monotonePath(points) {
+	if (points.length === 0) return "";
+	const start = `M${round(points[0][0])},${round(points[0][1])}`;
+	return points.length === 1 ? `${start}Z` : start + monotoneSegments(points).join("");
+}
+/**
+* The closed SVG path between two such curves: along `top`, then back along
+* `bottom`. Both run through the same `x` positions, in order.
+*/
+function monotoneAreaPath(top, bottom) {
+	if (top.length === 0 || bottom.length === 0) return "";
+	const back = [...bottom].reverse();
+	const along = monotoneSegments(top).join("");
+	const returning = monotoneSegments(back).join("");
+	return `M${round(top[0][0])},${round(top[0][1])}${along}L${round(back[0][0])},${round(back[0][1])}${returning}Z`;
+}
+//#endregion
+export { monotoneAreaPath, monotonePath };

package/dist/components/chart/chart-scales.d.ts

@@ -0,0 +1,34 @@
+import type { ChartCurve } from '@tanstack/charts';
+/**
+ * An evenly spaced few of a row axis' positions, for `numTicks`. The axis
+ * labels every row otherwise, leaving out the ones that would collide.
+ */
+export declare function rowTicks(length: number, count: number | undefined): number[] | undefined;
+/** TanStack's own tick label size, in px, until `--chart-tick-font-size` sets one. */
+export declare const TICK_FONT_SIZE = 11;
+/** An axis' tick labels at `size` px; TanStack lays the axis out for it. */
+export declare const tickLabels: (size: number | undefined) => {
+    tickLabels?: undefined;
+} | {
+    tickLabels: {
+        fontSize: number;
+    };
+};
+/** A row's `xKey` value as its axis label. */
+export declare function rowLabel(row: Record<string, any> | undefined, xKey: string, format?: (value: any) => string): string;
+/** A value axis label: the caller's formatter, or a grouped number. */
+export declare const valueLabel: (raw: number, format?: (value: any) => string) => string;
+/** A plotted value, or a gap where the row has none. */
+export declare const plotted: (raw: unknown) => number | undefined;
+/**
+ * Every series at the row under the pointer. The default only focuses a point
+ * within 48 pixels, which leaves dead zones between sparse rows.
+ */
+export declare const rowFocus: (horizontal?: boolean) => {
+    focus: "group-y" | "group-x";
+    maxFocusDistance: number;
+};
+/** A chart's accessible name: what it plots, in the reader's words. */
+export declare const chartName: (categories: string[], labelFormat: ((category: string) => string) | undefined, fallback: string) => string;
+/** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */
+export declare const curveOf: (curve: "smooth" | "linear") => ChartCurve | undefined;

package/dist/components/chart/chart-scales.js

@@ -0,0 +1,41 @@
+import { monotoneAreaPath, monotonePath } from "./chart-curve.js";
+import { formatNumber } from "@vunset/utils";
+//#region src/components/chart/chart-scales.ts
+/**
+* An evenly spaced few of a row axis' positions, for `numTicks`. The axis
+* labels every row otherwise, leaving out the ones that would collide.
+*/
+function rowTicks(length, count) {
+	if (count === void 0) return void 0;
+	const step = Math.max(1, Math.ceil(length / Math.max(1, count)));
+	return Array.from({ length }, (_, index) => index).filter((index) => index % step === 0);
+}
+/** An axis' tick labels at `size` px; TanStack lays the axis out for it. */
+var tickLabels = (size) => size === void 0 ? {} : { tickLabels: { fontSize: size } };
+/** A row's `xKey` value as its axis label. */
+function rowLabel(row, xKey, format) {
+	const raw = row?.[xKey];
+	return raw === void 0 ? "" : format ? format(raw) : String(raw);
+}
+/** A value axis label: the caller's formatter, or a grouped number. */
+var valueLabel = (raw, format) => format ? format(raw) : formatNumber(raw);
+/** A plotted value, or a gap where the row has none. */
+var plotted = (raw) => typeof raw === "number" && Number.isFinite(raw) ? raw : void 0;
+/**
+* Every series at the row under the pointer. The default only focuses a point
+* within 48 pixels, which leaves dead zones between sparse rows.
+*/
+var rowFocus = (horizontal = false) => ({
+	focus: horizontal ? "group-y" : "group-x",
+	maxFocusDistance: Number.POSITIVE_INFINITY
+});
+/** A chart's accessible name: what it plots, in the reader's words. */
+var chartName = (categories, labelFormat, fallback) => categories.map((category) => labelFormat ? labelFormat(category) : category).join(", ") || fallback;
+var SMOOTH = {
+	line: monotonePath,
+	area: monotoneAreaPath
+};
+/** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */
+var curveOf = (curve) => curve === "smooth" ? SMOOTH : void 0;
+//#endregion
+export { chartName, curveOf, plotted, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel };

package/dist/components/chart/use-chart-series.d.ts

@@ -0,0 +1,49 @@
+import { type ComputedRef } from 'vue';
+/** One plotted key, with the color and position it keeps whatever is hidden. */
+export interface ChartSeries {
+    category: string;
+    /** Position in the full list, which is what the color is keyed on. */
+    index: number;
+    color: string;
+}
+export interface ChartContext {
+    categories: ComputedRef<string[]>;
+    colors: ComputedRef<string[]>;
+    /** What each category is called, where the chart names them. */
+    labels?: ComputedRef<string[]>;
+    /** The categories currently not drawn. */
+    hidden: ComputedRef<string[]>;
+    toggle: (category: string) => void;
+}
+/**
+ * Lets a `ChartLegend` nested in a chart drive it without being handed the
+ * categories twice. Optional at the reader: a legend placed beside a chart
+ * rather than inside one takes its own props instead.
+ */
+export declare const provideChartContext: (value: ChartContext) => ChartContext, useChartContext: () => ChartContext, useOptionalChartContext: () => ChartContext | null;
+export interface UseChartSeriesOptions {
+    categories: () => string[];
+    colors: () => string[] | undefined;
+    labels?: () => string[];
+    /** Supplying this makes the hidden list controlled. */
+    hidden: () => string[] | undefined;
+    /** The prop `hidden` comes from, controlled while bound even if `undefined`. */
+    prop?: string;
+    onHiddenChange: (hidden: string[]) => void;
+}
+export interface UseChartSeriesReturn {
+    colors: ComputedRef<string[]>;
+    hidden: ComputedRef<string[]>;
+    /** What to draw, in order, each keeping its original color. */
+    visible: ComputedRef<ChartSeries[]>;
+    toggle: (category: string) => void;
+}
+/**
+ * The categories a chart draws, and which of them are switched off.
+ *
+ * Hiding removes a series rather than zeroing it, so a hidden band leaves no
+ * flat line along the axis and the remaining ones keep the colors they had —
+ * the color is keyed on a category's position in the full list, not in what
+ * happens to be showing.
+ */
+export declare function useChartSeries(options: UseChartSeriesOptions): UseChartSeriesReturn;

package/dist/components/chart/use-chart-series.js

@@ -0,0 +1,53 @@
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { computed } from "vue";
+import { chartColors } from "@vunset/utils";
+//#region src/components/chart/use-chart-series.ts
+/**
+* Lets a `ChartLegend` nested in a chart drive it without being handed the
+* categories twice. Optional at the reader: a legend placed beside a chart
+* rather than inside one takes its own props instead.
+*/
+var { provideContext: provideChartContext, useContext: useChartContext, useOptionalContext: useOptionalChartContext } = createContext("Chart");
+/**
+* The categories a chart draws, and which of them are switched off.
+*
+* Hiding removes a series rather than zeroing it, so a hidden band leaves no
+* flat line along the axis and the remaining ones keep the colors they had —
+* the color is keyed on a category's position in the full list, not in what
+* happens to be showing.
+*/
+function useChartSeries(options) {
+	const colors = computed(() => options.colors() ?? chartColors(options.categories().length));
+	const hidden = useControlled({
+		value: options.hidden,
+		defaultValue: () => [],
+		prop: options.prop,
+		onChange: options.onHiddenChange,
+		name: "Chart",
+		label: "hidden"
+	});
+	const visible = computed(() => options.categories().map((category, index) => ({
+		category,
+		index,
+		color: colors.value[index] ?? ""
+	})).filter((series) => !hidden.value.includes(series.category)));
+	function toggle(category) {
+		hidden.value = hidden.value.includes(category) ? hidden.value.filter((entry) => entry !== category) : [...hidden.value, category];
+	}
+	provideChartContext({
+		categories: computed(() => options.categories()),
+		colors,
+		labels: options.labels && computed(options.labels),
+		hidden: computed(() => hidden.value),
+		toggle
+	});
+	return {
+		colors,
+		hidden: computed(() => hidden.value),
+		visible,
+		toggle
+	};
+}
+//#endregion
+export { provideChartContext, useChartSeries, useOptionalChartContext };

package/dist/components/checkbox/CheckboxGroup.js

@@ -0,0 +1,5 @@
+import CheckboxGroup_vue_vue_type_script_setup_true_lang_default, { provideCheckboxGroupContext, useOptionalCheckboxGroupContext } from "./CheckboxGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/checkbox/CheckboxGroup.vue
+var CheckboxGroup_default = CheckboxGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CheckboxGroup_default as default, provideCheckboxGroupContext, useOptionalCheckboxGroupContext };

package/dist/components/checkbox/CheckboxGroup.vue.d.ts

@@ -0,0 +1,128 @@
+import { type ModelModifiers } from '../../shared/model-modifiers';
+import type { ComputedRef } from 'vue';
+import type { UseFieldReturn } from '../../shared/use-field';
+export type CheckboxGroupValue = string | number;
+export interface CheckboxGroupState {
+    /**
+     * The checked boxes' values.
+     * @attribute none
+     */
+    value: CheckboxGroupValue[];
+    /** Whether every box ignores interaction. */
+    disabled: boolean;
+    /** Whether the boxes can be focused but not changed. */
+    readOnly: boolean;
+    /** Whether at least one box must be checked before the form submits. */
+    required: boolean;
+    /** Whether the value is invalid. */
+    invalid: boolean;
+}
+interface CheckboxRegistration {
+    value: () => CheckboxGroupValue | undefined;
+    /** Whether this box, on its own or through the group, can't be toggled. */
+    locked: () => boolean;
+}
+export interface CheckboxGroupContext {
+    value: ComputedRef<CheckboxGroupValue[]>;
+    /** Adds or removes one value. */
+    toggle: (value: CheckboxGroupValue, on: boolean, event: Event) => void;
+    /** Checks or clears every box that isn't locked, for the parent box. */
+    toggleAll: (on: boolean, event: Event) => void;
+    /** Of the boxes that aren't locked: how many there are and how many are checked. */
+    counts: ComputedRef<{
+        total: number;
+        checked: number;
+    }>;
+    register: (entry: CheckboxRegistration) => () => void;
+    disabled: () => boolean;
+    readOnly: () => boolean;
+    invalid: () => boolean;
+    name: () => string | undefined;
+    form: () => string | undefined;
+    /** The field the group is the control of, which its boxes leave to it. */
+    field: UseFieldReturn | null;
+}
+export declare const provideCheckboxGroupContext: (value: CheckboxGroupContext) => CheckboxGroupContext, useOptionalCheckboxGroupContext: () => CheckboxGroupContext | null;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** The checked boxes' values, bound with `v-model`. */
+    modelValue?: CheckboxGroupValue[];
+    /** `v-model.optional` writes `undefined` once the value is emptied. */
+    modelModifiers?: ModelModifiers;
+    /** The values checked at first, when no `v-model` owns them. */
+    defaultValue?: CheckboxGroupValue[];
+    /** Disables every box, and the form leaves them out. */
+    disabled?: boolean;
+    /** Keeps the boxes focusable but unchangeable. */
+    readOnly?: boolean;
+    /** At least one box must be checked. Announced and styled, not enforced. */
+    required?: boolean;
+    /** Marks the value invalid, for styling through `data-invalid`. */
+    invalid?: boolean;
+    /** The form field name every box submits its value under. Inside a `FieldRoot`, the field's name. */
+    name?: string;
+    /** The id of a `<form>` to submit with, when the group sits outside it. */
+    form?: string;
+    /** Every enabled box's value, so a parent box can count them before they render, as on a server. */
+    allValues?: CheckboxGroupValue[];
+    /** Element or component to render. */
+    as?: string | object;
+}, {
+    value: ComputedRef<CheckboxGroupValue[]>;
+    state: ComputedRef<CheckboxGroupState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: CheckboxGroupValue[], event: Event) => any;
+    "update:modelValue": (value: CheckboxGroupValue[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The checked boxes' values, bound with `v-model`. */
+    modelValue?: CheckboxGroupValue[];
+    /** `v-model.optional` writes `undefined` once the value is emptied. */
+    modelModifiers?: ModelModifiers;
+    /** The values checked at first, when no `v-model` owns them. */
+    defaultValue?: CheckboxGroupValue[];
+    /** Disables every box, and the form leaves them out. */
+    disabled?: boolean;
+    /** Keeps the boxes focusable but unchangeable. */
+    readOnly?: boolean;
+    /** At least one box must be checked. Announced and styled, not enforced. */
+    required?: boolean;
+    /** Marks the value invalid, for styling through `data-invalid`. */
+    invalid?: boolean;
+    /** The form field name every box submits its value under. Inside a `FieldRoot`, the field's name. */
+    name?: string;
+    /** The id of a `<form>` to submit with, when the group sits outside it. */
+    form?: string;
+    /** Every enabled box's value, so a parent box can count them before they render, as on a server. */
+    allValues?: CheckboxGroupValue[];
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{
+    onChange?: ((value: CheckboxGroupValue[], event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: CheckboxGroupValue[] | undefined) => any) | undefined;
+}>, {
+    defaultValue: CheckboxGroupValue[];
+    as: string | object;
+    modelValue: CheckboxGroupValue[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        /**
+         * The checked boxes' values.
+         * @attribute none
+         */
+        value: CheckboxGroupValue[];
+        /** Whether every box ignores interaction. */
+        disabled: boolean;
+        /** Whether the boxes can be focused but not changed. */
+        readOnly: boolean;
+        /** Whether at least one box must be checked before the form submits. */
+        required: boolean;
+        /** Whether the value is invalid. */
+        invalid: boolean;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/CheckboxGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,141 @@
+import { Part } from "../../shared/part.js";
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { applyModelModifiers } from "../../shared/model-modifiers.js";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, ref, renderSlot, shallowRef, unref, watch, withCtx } from "vue";
+//#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
+var { provideContext: provideCheckboxGroupContext, useOptionalContext: useOptionalCheckboxGroupContext } = createContext("CheckboxGroup");
+var CheckboxGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CheckboxGroup",
+	inheritAttrs: false,
+	__name: "CheckboxGroup",
+	props: {
+		modelValue: { default: void 0 },
+		modelModifiers: {},
+		defaultValue: { default: void 0 },
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		required: { type: Boolean },
+		invalid: { type: Boolean },
+		name: {},
+		form: {},
+		allValues: {},
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const field = useOptionalFieldContext();
+		const container = ref(null);
+		const registrations = shallowRef([]);
+		const disabled = () => (props.disabled ?? false) || (field?.state.value.disabled ?? false);
+		const readOnly = () => (props.readOnly ?? false) || (field?.state.value.readOnly ?? false);
+		const required = () => (props.required ?? false) || (field?.required() ?? false);
+		const invalid = () => (props.invalid ?? false) || (field?.state.value.invalid ?? false);
+		const controlled = useControlled({
+			value: () => props.modelValue,
+			defaultValue: () => props.defaultValue ?? [],
+			prop: "modelValue",
+			empty: () => [],
+			name: "CheckboxGroup",
+			label: "value"
+		});
+		const value = computed(() => controlled.value ?? []);
+		const state = computed(() => ({
+			value: value.value,
+			disabled: disabled(),
+			readOnly: readOnly(),
+			required: required(),
+			invalid: invalid()
+		}));
+		useFieldValue(field, () => value.value);
+		watch(() => value.value.length > 0, (filled) => field?.setFilled(filled), { immediate: true });
+		function ordered(checked) {
+			const known = registrations.value.map((entry) => entry.value()).filter((item) => item !== void 0);
+			const knownSet = new Set(known);
+			return [...[...checked].filter((item) => !knownSet.has(item)), ...known.filter((item) => checked.has(item))];
+		}
+		function commit(next, event) {
+			controlled.value = next;
+			emit("update:modelValue", applyModelModifiers(next, props.modelModifiers));
+			emit("change", next, event);
+		}
+		provideCheckboxGroupContext({
+			value,
+			toggle(item, on, event) {
+				if (disabled() || readOnly()) return;
+				const checked = new Set(value.value);
+				if (on) checked.add(item);
+				else checked.delete(item);
+				commit(ordered(checked), event);
+			},
+			toggleAll(on, event) {
+				if (disabled() || readOnly()) return;
+				const checked = new Set(value.value);
+				for (const entry of registrations.value) {
+					const item = entry.value();
+					if (item === void 0 || entry.locked()) continue;
+					if (on) checked.add(item);
+					else checked.delete(item);
+				}
+				commit(ordered(checked), event);
+			},
+			counts: computed(() => {
+				const open = registrations.value.length ? registrations.value.filter((entry) => entry.value() !== void 0 && !entry.locked()).map((entry) => entry.value()) : props.allValues ?? [];
+				return {
+					total: open.length,
+					checked: open.filter((item) => value.value.includes(item)).length
+				};
+			}),
+			register(entry) {
+				registrations.value = [...registrations.value, entry];
+				return () => {
+					registrations.value = registrations.value.filter((item) => item !== entry);
+				};
+			},
+			disabled,
+			readOnly,
+			invalid,
+			name: () => props.name ?? field?.name(),
+			form: () => props.form,
+			field
+		});
+		__expose({
+			value,
+			state
+		});
+		const merged = usePartProps(() => ({
+			...dataAttrs(state.value, { value: () => null }),
+			"data-part": "checkbox-group",
+			role: "group",
+			"aria-labelledby": field?.labelledBy.value,
+			"aria-describedby": field?.describedBy.value,
+			"aria-required": required() || void 0,
+			"aria-disabled": disabled() || void 0,
+			"aria-readonly": readOnly() || void 0,
+			"aria-invalid": invalid() || void 0,
+			ref: (el) => {
+				container.value = el ?? null;
+			},
+			onFocusin: () => field?.setFocused(true),
+			onFocusout(event) {
+				const next = event.relatedTarget;
+				if (next instanceof Node && container.value?.contains(next)) return;
+				field?.setFocused(false);
+				field?.setTouched(true);
+			}
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(state.value)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { CheckboxGroup_vue_vue_type_script_setup_true_lang_default as default, provideCheckboxGroupContext, useOptionalCheckboxGroupContext };

package/dist/components/checkbox/CheckboxIndicator.js

@@ -0,0 +1,5 @@
+import CheckboxIndicator_vue_vue_type_script_setup_true_lang_default from "./CheckboxIndicator.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/checkbox/CheckboxIndicator.vue
+var CheckboxIndicator_default = CheckboxIndicator_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CheckboxIndicator_default as default };

package/dist/components/checkbox/CheckboxIndicator.vue.d.ts

@@ -0,0 +1,29 @@
+type __VLS_Props = {
+    /** Stays in the DOM while unchecked, for styling both states yourself. */
+    keepMounted?: boolean;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    invalid: boolean;
+    transitionStatus: import("../../index.ts").TransitionStatus;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/checkbox/CheckboxIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useToggleIndicator } from "../../shared/use-toggle-indicator.js";
+import { createBlock, createCommentVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/checkbox/CheckboxIndicator.vue?vue&type=script&setup=true&lang.ts
+var CheckboxIndicator_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CheckboxIndicator",
+	inheritAttrs: false,
+	__name: "CheckboxIndicator",
+	props: {
+		keepMounted: { type: Boolean },
+		as: { default: "span" }
+	},
+	setup(__props) {
+		const props = __props;
+		const { mounted, state, indicatorProps } = useToggleIndicator();
+		const merged = usePartProps(indicatorProps);
+		return (_ctx, _cache) => {
+			return unref(mounted) || props.keepMounted ? (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 0,
+				as: props.as
+			}, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { CheckboxIndicator_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/checkbox/CheckboxRoot.js

@@ -0,0 +1,5 @@
+import CheckboxRoot_vue_vue_type_script_setup_true_lang_default from "./CheckboxRoot.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/checkbox/CheckboxRoot.vue
+var CheckboxRoot_default = CheckboxRoot_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CheckboxRoot_default as default };