@vunset/vue 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/chart.d.ts

@@ -6,6 +6,6 @@ export { default as ChartAxis } from './components/chart/ChartAxis.vue';
 export { default as ChartGrid } from './components/chart/ChartGrid.vue';
 export { default as ChartCrosshair } from './components/chart/ChartCrosshair.vue';
 export { default as ChartTooltip } from './components/chart/ChartTooltip.vue';
-export { default as ChartLegend } from './components/chart/ChartLegend.vue';
+export { default as ChartLegend, type ChartLegendItem } from './components/chart/ChartLegend.vue';
 export { default as ChartDonut } from './components/chart/ChartDonut.vue';
 export { type ChartSeries } from './components/chart/use-chart-series';

package/dist/chart.js

@@ -1,3 +1,4 @@
+import ChartLegend_default from "./components/chart/ChartLegend.js";
 import ChartRoot_default from "./components/chart/ChartRoot.js";
 import ChartArea_default from "./components/chart/ChartArea.js";
 import ChartLine_default from "./components/chart/ChartLine.js";
@@ -6,6 +7,5 @@ import ChartAxis_default from "./components/chart/ChartAxis.js";
 import ChartGrid_default from "./components/chart/ChartGrid.js";
 import ChartCrosshair_default from "./components/chart/ChartCrosshair.js";
 import ChartTooltip_default from "./components/chart/ChartTooltip.js";
-import ChartLegend_default from "./components/chart/ChartLegend.js";
 import ChartDonut_default from "./components/chart/ChartDonut.js";
 export { ChartArea_default as ChartArea, ChartAxis_default as ChartAxis, ChartBar_default as ChartBar, ChartCrosshair_default as ChartCrosshair, ChartDonut_default as ChartDonut, ChartGrid_default as ChartGrid, ChartLegend_default as ChartLegend, ChartLine_default as ChartLine, ChartRoot_default as ChartRoot, ChartTooltip_default as ChartTooltip };

package/dist/components/accordion/AccordionRoot.vue.d.ts

@@ -31,9 +31,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./u
     "onUpdate:modelValue"?: ((value: AccordionValue[]) => any) | undefined;
 }>, {
     defaultValue: AccordionValue[];
-    orientation: Orientation;
     as: string | object;
     modelValue: AccordionValue[];
+    orientation: Orientation;
     disabled: boolean;
     loop: boolean;
     multiple: boolean;

package/dist/components/button/Button.vue.d.ts

@@ -15,8 +15,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-button").UseButtonReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    type: "button" | "submit" | "reset";
     as: string | object;
+    type: "button" | "submit" | "reset";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/calendar/CalendarRoot.vue.d.ts

@@ -73,10 +73,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./u
     onChange?: ((value: CalendarValue) => any) | undefined;
     "onUpdate:modelValue"?: ((value: CalendarModelValue | undefined) => any) | undefined;
 }>, {
-    required: boolean;
-    invalid: boolean;
     mode: CalendarSelectionMode;
+    invalid: boolean;
     as: string | object;
+    required: boolean;
     disabled: boolean;
     readOnly: boolean;
     maxToday: boolean;

package/dist/components/chart/ChartArea.vue.d.ts

@@ -14,10 +14,16 @@ type __VLS_Props = {
     curve?: ChartCurve;
     /** Mark each row with a dot. */
     points?: boolean;
+    /** Draw the line along the band's top. Without it, the band alone takes the focus. @default true */
+    line?: boolean;
+    /** Fade the band towards the axis, or fill it evenly. @default true */
+    gradient?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    line: boolean;
     curve: ChartCurve;
     scale: string;
+    gradient: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,7 +11,15 @@ var ChartArea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		scale: { default: "y" },
 		format: {},
 		curve: { default: "smooth" },
-		points: { type: Boolean }
+		points: { type: Boolean },
+		line: {
+			type: Boolean,
+			default: true
+		},
+		gradient: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup(__props) {
 		const props = __props;

package/dist/components/chart/ChartAxis.vue.d.ts

@@ -12,7 +12,15 @@ type __VLS_Props = {
     numTicks?: number;
     /** Cut long row labels rather than dropping the ones that would collide. */
     trimLabels?: boolean;
+    /** A title along the axis, such as its unit. */
+    label?: string;
+    /** Draw the axis' own line along the plot's edge. */
+    line?: boolean;
+    /** The short mark at each label. @default true */
+    tickMarks?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tickMarks: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -8,9 +8,15 @@ var ChartAxis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		type: {},
 		scale: {},
 		side: {},
-		format: { type: Function },
+		format: {},
 		numTicks: {},
-		trimLabels: { type: Boolean }
+		trimLabels: { type: Boolean },
+		label: {},
+		line: { type: Boolean },
+		tickMarks: {
+			type: Boolean,
+			default: true
+		}
 	},
 	setup(__props) {
 		const props = __props;

package/dist/components/chart/ChartDonut.vue.d.ts

@@ -13,20 +13,27 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         labelFormat?: (category: string) => string;
         /** One per slice. Defaults to `var(--chart-color-N)`. */
         colors?: string[];
+        /** How many `--chart-color-N` the theme defines: series past it start over at the first. @default 8 */
+        paletteSize?: number;
         /** Slices not drawn. `v-model:hidden` pairs it with a `ChartLegend`. */
         hidden?: string[];
         /** A number means pixels. @default '20rem' */
         height?: number | string;
-        /** Gap between slices, in radians. @default 0.04 */
+        /** Gap between slices, in radians: a wedge, widening towards the edge. @default 0.04 */
         padAngle?: number;
+        /**
+         * Gap between slices, in pixels, the same width from the center to the edge; `0` for none. Replaces
+         * `pad-angle`. It's drawn as a line in `--chart-gap-color`, the page's background by default.
+         */
+        gap?: number;
         /** The radius of each slice's corners, in pixels. @default 6 */
         cornerRadius?: number;
         /** How thick the ring is. `0` fills it in, making a pie. @default 12 */
         arcWidth?: number;
-        /** Defaults to the total of what is showing. Empty string for nothing. */
-        centralLabel?: string;
-        /** The line under the central label. @default 'Total' */
-        centralSubLabel?: string;
+        /** Defaults to the total of what is showing; a pie, with no middle, shows none. `false` for nothing. */
+        centralLabel?: string | false;
+        /** The line under the central label. Defaults to 'Total', or none on a pie. `false` for nothing. */
+        centralSubLabel?: string | false;
         /** Shows the slice under the pointer. @default true */
         tooltip?: boolean;
         /** A class for the tooltip's box. */

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

@@ -31,13 +31,21 @@ var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		valueFormat: {},
 		labelFormat: {},
 		colors: {},
+		paletteSize: {},
 		hidden: {},
 		height: { default: "20rem" },
 		padAngle: { default: .04 },
+		gap: {},
 		cornerRadius: { default: 6 },
 		arcWidth: { default: 12 },
-		centralLabel: { default: void 0 },
-		centralSubLabel: { default: void 0 },
+		centralLabel: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		centralSubLabel: {
+			type: [String, Boolean],
+			default: void 0
+		},
 		tooltip: {
 			type: Boolean,
 			default: void 0
@@ -62,6 +70,7 @@ var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const { visible } = useChartSeries({
 			categories: () => slices.value.map((slice) => slice.category),
 			colors: () => props.colors,
+			paletteSize: () => props.paletteSize,
 			hidden: () => props.hidden,
 			onHiddenChange: (next) => emit("update:hidden", next)
 		});
@@ -82,16 +91,22 @@ var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const definition = computed(() => {
 			const width = props.arcWidth;
 			const cornerRadius = props.cornerRadius;
+			const gap = props.gap;
 			return defineChart({
+				svgAnimation: false,
 				marks: [polar({
 					marks: [radialArc(pie(shown.value, {
 						value: "size",
-						gapAngle: props.padAngle
+						gapAngle: gap === void 0 ? props.padAngle : 0
 					}), {
 						color: "category",
 						key: "category",
 						innerRadius: ({ radius }) => width > 0 ? Math.max(radius - width, 0) : 0,
-						cornerRadius
+						cornerRadius,
+						...gap !== void 0 && gap > 0 && {
+							stroke: "var(--chart-gap-color, Canvas)",
+							strokeWidth: gap
+						}
 					})],
 					scales: {
 						angle: null,
@@ -116,8 +131,9 @@ var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				}
 			});
 		});
-		const centralLabel = computed(() => props.centralLabel ?? format(total.value));
-		const centralSubLabel = computed(() => props.centralSubLabel ?? "Total");
+		const filled = computed(() => props.arcWidth <= 0);
+		const centralLabel = computed(() => props.centralLabel ?? (filled.value ? false : format(total.value)));
+		const centralSubLabel = computed(() => props.centralSubLabel ?? (filled.value ? false : "Total"));
 		const ariaLabel = computed(() => props.label ?? chartName(shown.value.map((slice) => slice.category), props.labelFormat, "Donut chart"));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ChartFrame_default, mergeProps({

package/dist/components/chart/ChartFrame.vue.d.ts

@@ -30,8 +30,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** `--chart-tick-font-size` in px, for the chart's definition. */
     tickSize?: number;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:tickSize": (value: number | undefined) => any;
     render: (context: ChartRender) => any;
+    "update:tickSize": (value: number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
     /** Which chart this is, for `data-chart`. */
     kind?: string;
@@ -47,14 +47,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** `--chart-tick-font-size` in px, for the chart's definition. */
     tickSize?: number;
 }> & Readonly<{
-    "onUpdate:tickSize"?: ((value: number | undefined) => any) | undefined;
     onRender?: ((context: ChartRender) => any) | undefined;
+    "onUpdate:tickSize"?: ((value: number | undefined) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** Content before the drawing, such as a `ChartLegend`. */
     default(): unknown;
-    /** The tooltip's content, for the point in focus. */
+    /** The tooltip's content, for the point in focus; `pinned` once a click holds it. */
     tooltip(props: {
         point: ChartPoint<any>;
+        pinned: boolean;
     }): unknown;
     /** Content laid over the plot, centered on it. */
     center?(): unknown;

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

@@ -1,4 +1,5 @@
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeModels, mergeProps, normalizeStyle, onMounted, openBlock, renderSlot, shallowRef, unref, useModel, useSlots, useTemplateRef } from "vue";
+import ChartLegend_default from "./ChartLegend.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, mergeModels, mergeProps, normalizeStyle, onMounted, openBlock, renderSlot, shallowRef, unref, useModel, useSlots, useTemplateRef } from "vue";
 import { Chart } from "@tanstack/charts/vue";
 //#region src/components/chart/ChartFrame.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-chart"];
@@ -49,7 +50,21 @@ var ChartFrame_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			emit("render", context);
 		}
 		const height = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
-		const tooltipBody = ({ primaryPoint }) => primaryPoint ? h("div", mergeProps({ "data-part": "chart-tooltip" }, props.tooltipAttrs?.() ?? {}), [h("div", { "data-part": "tooltip" }, slots.tooltip({ point: primaryPoint }))]) : null;
+		const tooltipBody = ({ primaryPoint, pinned }) => primaryPoint ? h("div", mergeProps({
+			"data-part": "chart-tooltip",
+			"data-pinned": pinned ? "" : void 0
+		}, props.tooltipAttrs?.() ?? {}), [h("div", { "data-part": "tooltip" }, slots.tooltip({
+			point: primaryPoint,
+			pinned
+		}))]) : null;
+		const below = (node) => node.type === ChartLegend_default && node.props?.placement === "bottom";
+		function flat(nodes) {
+			return nodes.flatMap((node) => node.type === Fragment && Array.isArray(node.children) ? flat(node.children) : [node]);
+		}
+		const Content = (own) => {
+			return flat(slots.default?.() ?? []).filter((node) => below(node) === (own.bottom ?? false));
+		};
+		Content.props = { bottom: Boolean };
 		const Drawing = defineComponent({
 			name: "ChartDrawing",
 			setup: () => () => h(Chart, {
@@ -63,32 +78,36 @@ var ChartFrame_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			return openBlock(), createElementBlock("div", {
 				"data-part": "chart",
 				"data-chart": props.kind
-			}, [renderSlot(_ctx.$slots, "default"), createElementVNode("div", _hoisted_2, [
-				createElementVNode("span", {
-					ref_key: "probe",
-					ref: probe,
-					"aria-hidden": "true",
-					style: {
-						position: "absolute",
-						visibility: "hidden",
-						fontSize: "var(--chart-tick-font-size, 0px)"
-					}
-				}, null, 512),
-				createVNode(unref(Drawing)),
-				slots.center && plot.value ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					"data-part": "chart-center",
-					style: normalizeStyle({
-						position: "absolute",
-						...plot.value,
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						justifyContent: "center",
-						pointerEvents: "none"
-					})
-				}, [renderSlot(_ctx.$slots, "center")], 4)) : createCommentVNode("", true)
-			])], 8, _hoisted_1);
+			}, [
+				createVNode(Content),
+				createElementVNode("div", _hoisted_2, [
+					createElementVNode("span", {
+						ref_key: "probe",
+						ref: probe,
+						"aria-hidden": "true",
+						style: {
+							position: "absolute",
+							visibility: "hidden",
+							fontSize: "var(--chart-tick-font-size, 0px)"
+						}
+					}, null, 512),
+					createVNode(unref(Drawing)),
+					slots.center && plot.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						"data-part": "chart-center",
+						style: normalizeStyle({
+							position: "absolute",
+							...plot.value,
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							justifyContent: "center",
+							pointerEvents: "none"
+						})
+					}, [renderSlot(_ctx.$slots, "center")], 4)) : createCommentVNode("", true)
+				]),
+				createVNode(Content, { bottom: "" })
+			], 8, _hoisted_1);
 		};
 	}
 });

package/dist/components/chart/ChartLegend.vue.d.ts

@@ -1,44 +1,74 @@
-type __VLS_Props = {
+import { type HTMLAttributes } from 'vue';
+/** One entry in a legend. */
+export interface ChartLegendItem {
+    category: string;
+    label: string;
+    color: string;
+    /** Its series isn't drawn. */
+    hidden: boolean;
+    /** Hides it, or shows it again. */
+    toggle: () => void;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** The hidden categories, bound with `v-model`, for a legend beside a chart rather than inside it. */
     modelValue?: string[];
     /** Taken from the chart this sits inside, when it sits inside one. */
     categories?: string[];
     /** One per category; taken from the chart this sits inside, or `var(--chart-color-N)`. */
     colors?: string[];
+    /** How many `--chart-color-N` the theme defines: series past it start over at the first. @default 8 */
+    paletteSize?: number;
     /** Renames a category for the reader. Inside a chart, each series' `label` already does. */
     labelFormat?: (category: string) => string;
+    /** Inside a chart: above the drawing, or below it. @default 'top' */
+    placement?: "top" | "bottom";
+    /** A class for each button, beside its `data-part="legend-item"`. */
+    itemClass?: HTMLAttributes["class"];
     /** Element or component to render. */
     as?: string | object;
-};
-type __VLS_Slots = {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (hidden: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /** The hidden categories, bound with `v-model`, for a legend beside a chart rather than inside it. */
+    modelValue?: string[];
+    /** Taken from the chart this sits inside, when it sits inside one. */
+    categories?: string[];
+    /** One per category; taken from the chart this sits inside, or `var(--chart-color-N)`. */
+    colors?: string[];
+    /** How many `--chart-color-N` the theme defines: series past it start over at the first. @default 8 */
+    paletteSize?: number;
+    /** Renames a category for the reader. Inside a chart, each series' `label` already does. */
+    labelFormat?: (category: string) => string;
+    /** Inside a chart: above the drawing, or below it. @default 'top' */
+    placement?: "top" | "bottom";
+    /** A class for each button, beside its `data-part="legend-item"`. */
+    itemClass?: HTMLAttributes["class"];
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((hidden: string[]) => any) | undefined;
+}>, {
+    as: string | object;
+    modelValue: string[];
+    placement: "top" | "bottom";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /**
      * Replaces the buttons.
      * @slotOnly The element carries only `data-part="legend"`.
      */
     default(props: {
         /** One per category, with its `category`, `label`, `color`, whether it is `hidden`, and a `toggle()`. */
-        items: {
-            category: string;
-            label: string;
-            color: string;
-            hidden: boolean;
-            toggle: () => void;
-        }[];
+        items: ChartLegendItem[];
         /** The hidden categories. */
         hidden: string[];
     }): unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (hidden: string[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((hidden: string[]) => any) | undefined;
-}>, {
-    as: string | object;
-    modelValue: string[];
-}, {}, {}, {}, 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;
+    /** Replaces what each button shows, a swatch and the label; the button and its toggling stay. */
+    item?(props: ChartLegendItem & {
+        index: number;
+    }): unknown;
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -2,7 +2,7 @@ import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
 import { Part } from "../../shared/part.js";
 import { useControlled } from "../../shared/use-controlled.js";
 import { useOptionalChartContext } from "./use-chart-series.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useAttrs, withCtx } from "vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString, unref, useAttrs, withCtx } from "vue";
 import { chartColors } from "@vunset/utils";
 //#region src/components/chart/ChartLegend.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -19,7 +19,16 @@ var ChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		modelValue: { default: void 0 },
 		categories: {},
 		colors: {},
+		paletteSize: {},
 		labelFormat: {},
+		placement: { default: "top" },
+		itemClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
 		as: { default: "div" }
 	},
 	emits: ["update:modelValue"],
@@ -36,7 +45,7 @@ var ChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			label: "modelValue"
 		});
 		const categories = computed(() => props.categories ?? chart?.categories.value ?? []);
-		const colors = computed(() => props.colors ?? chart?.colors.value ?? chartColors(categories.value.length));
+		const colors = computed(() => props.colors ?? chart?.colors.value ?? chartColors(categories.value.length, void 0, void 0, props.paletteSize));
 		const hidden = computed(() => driven ? chart.hidden.value : own.value);
 		function toggle(category) {
 			if (driven) {
@@ -53,24 +62,31 @@ var ChartLegend_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			toggle: () => toggle(category)
 		})));
 		const attrs = useAttrs();
-		const merged = computed(() => mergeProps$1({ "data-part": "legend" }, attrs));
+		const merged = computed(() => mergeProps$1({
+			"data-part": "legend",
+			"data-placement": props.placement
+		}, attrs));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, merged.value), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
 					items: items.value,
 					hidden: hidden.value
-				})), () => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item) => {
+				})), () => [(openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
 					return openBlock(), createElementBlock("button", {
 						key: item.category,
 						type: "button",
 						"data-part": "legend-item",
+						class: normalizeClass(props.itemClass),
 						"data-hidden": item.hidden ? "" : void 0,
 						"aria-pressed": !item.hidden,
 						onClick: ($event) => item.toggle()
-					}, [createElementVNode("span", {
+					}, [renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, {
+						...item,
+						index
+					}), () => [createElementVNode("span", {
 						"data-part": "legend-swatch",
 						style: normalizeStyle({ background: item.color })
-					}, null, 4), createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)], 8, _hoisted_1);
+					}, null, 4), createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)])], 10, _hoisted_1);
 				}), 128))])]),
 				_: 3
 			}, 16, ["as"]);

package/dist/components/chart/ChartRoot.vue.d.ts

@@ -12,6 +12,8 @@ export interface ChartSeriesPart {
     curve?: ChartCurve;
     points?: boolean;
     gradient?: boolean;
+    /** Areas only: the line along the band's top. */
+    line?: boolean;
     roundedCorners?: number;
     padding?: number;
 }
@@ -22,6 +24,9 @@ export interface ChartAxisPart {
     format?: (value: any) => string;
     numTicks?: number;
     trimLabels?: boolean;
+    label?: string;
+    line?: boolean;
+    tickMarks?: boolean;
 }
 export interface ChartGridPart {
     type: 'x' | 'y';
@@ -42,12 +47,17 @@ export interface ChartTooltipSlotProps<T = Record<string, any>> {
     row: T;
     /** Its `x-key` value, through the x axis' formatter. */
     heading: string;
-    /** The series showing, in order. */
+    /** The series showing, in order; in `point` mode, only the point's. */
     series: ChartTooltipSeries[];
+    /** Pinned in place by a click, Enter or Space. */
+    pinned: boolean;
 }
 export interface ChartTooltipPart {
     attrs: Record<string, unknown>;
     slot?: (props: ChartTooltipSlotProps) => unknown;
+    mode: 'row' | 'point';
+    sticky: boolean;
+    headingFormat?: (value: any) => string;
 }
 interface Parts {
     series: ChartSeriesPart;
@@ -83,6 +93,13 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         data: T[];
         /** The key naming each row, along the x axis. */
         xKey: keyof T & string;
+        /**
+         * Where the rows sit along the x axis. `category` spaces them evenly, in
+         * order; `linear` places them by their `x-key` number; or pass a scale
+         * factory, such as d3-scale's `scaleUtc` for dates. Bars need `category`.
+         * @default 'category'
+         */
+        xScale?: "category" | "linear" | (() => unknown);
         /** A number means pixels. @default '20rem' */
         height?: number | string;
         /** Which way the bars grow, and so which way the rows run. @default 'vertical' */
@@ -93,6 +110,8 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         hidden?: string[];
         /** The chart's accessible name. Defaults to its series. */
         label?: string;
+        /** How many `--chart-color-N` the theme defines: series past it start over at the first. @default 8 */
+        paletteSize?: number;
     } & {
         "onUpdate:hidden"?: ((hidden: string[]) => any) | undefined;
     }> & (typeof globalThis extends {

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

@@ -1,6 +1,6 @@
 import { createContext } from "../../shared/context.js";
 import { useChartSeries } from "./use-chart-series.js";
-import { curveOf, plotted, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel } from "./chart-scales.js";
+import { SVG_ANIMATION, curveOf, plotted, pointFocus, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel } from "./chart-scales.js";
 import ChartFrame_default from "./ChartFrame.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, withCtx } from "vue";
 import { chartColors, formatNumber } from "@vunset/utils";
@@ -53,11 +53,16 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	props: {
 		data: {},
 		xKey: {},
+		xScale: {
+			type: [String, Function],
+			default: "category"
+		},
 		height: { default: "20rem" },
 		orientation: { default: "vertical" },
 		stacked: { type: Boolean },
 		hidden: { default: void 0 },
-		label: {}
+		label: {},
+		paletteSize: {}
 	},
 	emits: ["update:hidden"],
 	setup(__props, { emit: __emit }) {
@@ -88,7 +93,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const { colors, visible } = useChartSeries({
 			categories: () => keys.value,
 			colors: () => {
-				const palette = chartColors(keys.value.length);
+				const palette = chartColors(keys.value.length, void 0, void 0, props.paletteSize);
 				return keys.value.map((key, index) => series.value.find((entry) => entry.yKey === key && entry.color)?.color ?? palette[index]);
 			},
 			labels: () => keys.value.map(labelOf),
@@ -97,6 +102,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			onHiddenChange: (next) => emit("update:hidden", next)
 		});
 		const horizontal = computed(() => props.orientation === "horizontal");
+		const continuous = computed(() => props.xScale !== "category");
 		const shownKeys = computed(() => visible.value.map((entry) => entry.category));
 		const shownColors = computed(() => visible.value.map((entry) => entry.color));
 		const shown = computed(() => series.value.filter((entry) => shownKeys.value.includes(entry.yKey)));
@@ -120,9 +126,12 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		const formatOf = (entry) => entry?.format ?? axisOf(entry?.scale ?? "y")?.format;
 		const xText = (row) => rowLabel(row, props.xKey, xAxis.value?.format);
-		/** The row's series for the tooltip, one per key showing. */
-		function tooltipSeries(row) {
-			return shownKeys.value.map((key, index) => {
+		const headingText = (row) => rowLabel(row, props.xKey, tooltips.value[0]?.headingFormat ?? xAxis.value?.format);
+		const tooltip$1 = computed(() => tooltips.value[0]);
+		const pointMode = computed(() => tooltip$1.value?.mode === "point");
+		/** The row's series for the tooltip, one per key showing; in `point` mode, only `key`'s. */
+		function tooltipSeries(row, only) {
+			const list = shownKeys.value.map((key, index) => {
 				const value = row[key];
 				const format = formatOf(series.value.find((entry) => entry.yKey === key));
 				return {
@@ -133,21 +142,25 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					text: format ? format(value) : formatNumber(Number(value) || 0)
 				};
 			});
+			return pointMode.value && only !== void 0 ? list.filter((entry) => entry.key === only) : list;
 		}
-		const tooltipProps = (row) => ({
-			row,
-			heading: xText(row),
-			series: tooltipSeries(row)
+		const tooltipProps = (point, pinned) => ({
+			row: point.datum.row,
+			heading: headingText(point.datum.row),
+			series: tooltipSeries(point.datum.row, point.datum.category),
+			pinned
 		});
 		const band = shallowRef();
 		const tickSize = shallowRef();
-		const fits = computed(() => xAxis.value?.trimLabels && !horizontal.value && band.value !== void 0 ? Math.max(1, Math.floor(band.value / ((tickSize.value ?? 11) * .6))) : void 0);
+		const fits = computed(() => xAxis.value?.trimLabels && !horizontal.value && !continuous.value && band.value !== void 0 ? Math.max(1, Math.floor(band.value / ((tickSize.value ?? 11) * .6))) : void 0);
 		const trim = (label, fits) => fits !== void 0 && label.length > fits ? `${label.slice(0, Math.max(1, fits - 1))}…` : label;
 		const areaGradient = (key) => `area-${colorIndex(key)}`;
 		const barGradient = (key) => `bar-${colorIndex(key)}`;
+		const at = (row, index) => continuous.value ? row[props.xKey] : index;
 		const pointsOf = (key, fill) => props.data.map((row, index) => ({
 			row,
 			index,
+			at: at(row, index),
 			category: key,
 			value: plotted(row[key]),
 			fill
@@ -159,6 +172,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const data = props.data.flatMap((row, index) => bars.map((entry) => ({
 				row,
 				index,
+				at: index,
 				category: entry.yKey,
 				value: plotted(row[entry.yKey]),
 				fill: entry.gradient ? `url(#${barGradient(entry.yKey)})` : void 0
@@ -176,11 +190,11 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return horizontal.value ? barX(data, {
 				...options,
 				x: "value",
-				y: "index",
+				y: "at",
 				xScale: valueId(first.scale)
 			}) : barY(data, {
 				...options,
-				x: "index",
+				x: "at",
 				y: "value",
 				yScale: valueId(first.scale)
 			});
@@ -190,10 +204,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const channels = {
 				...horizontal.value ? {
 					x: "value",
-					y: "index",
+					y: "at",
 					xScale: valueId(entry.scale)
 				} : {
-					x: "index",
+					x: "at",
 					y: "value",
 					yScale: valueId(entry.scale)
 				},
@@ -209,10 +223,15 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			if (entry.kind === "line") return [line];
 			const area = (horizontal.value ? areaX : areaY)(points, {
 				...channels,
-				fill: `url(#${areaGradient(entry.yKey)})`,
-				fillOpacity: 1
+				...entry.gradient === false ? {
+					fill: colors.value[colorIndex(entry.yKey)],
+					fillOpacity: .25
+				} : {
+					fill: `url(#${areaGradient(entry.yKey)})`,
+					fillOpacity: 1
+				}
 			});
-			return [decorative(area), line];
+			return entry.line === false ? [area] : [decorative(area), line];
 		}
 		const fade = computed(() => horizontal.value ? {
 			x1: 1,
@@ -229,7 +248,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const found = /* @__PURE__ */ new Map();
 			for (const entry of shown.value) {
 				const color = colors.value[colorIndex(entry.yKey)];
-				if (entry.kind === "area") found.set(areaGradient(entry.yKey), {
+				if (entry.kind === "area" && entry.gradient !== false) found.set(areaGradient(entry.yKey), {
 					id: areaGradient(entry.yKey),
 					x1: 0,
 					y1: 0,
@@ -264,7 +283,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const marks = [];
 			let bars = false;
 			for (const entry of shown.value) if (entry.kind !== "bar") marks.push(...seriesMarks(entry));
-			else if (!bars) {
+			else if (continuous.value) {
+				if (process.env.NODE_ENV !== "production" && !bars) console.warn("[vunset] ChartBar needs `x-scale=\"category\"`: bars are left out on a continuous x axis.");
+				bars = true;
+			} else if (!bars) {
 				marks.push(barMark());
 				bars = true;
 			}
@@ -278,15 +300,32 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const budget = fits.value;
 			const x = xAxis.value;
 			const firstBar = series.value.find((entry) => entry.kind === "bar");
-			const rowScale = {
+			const titled = (axis) => axis?.label ? { label: axis.label } : {};
+			const stubs = (axis) => axis.tickMarks === false ? { line: false } : {};
+			const rowScale = continuous.value ? {
+				scale: props.xScale === "linear" ? scaleLinear : props.xScale,
+				grid: grids.value.some((entry) => entry.type === "x"),
+				axis: x ? {
+					line: x.line === true,
+					...tickLabels(tickSize.value),
+					...titled(x),
+					ticks: {
+						...x.format && { format: x.format },
+						...x.numTicks !== void 0 && { count: x.numTicks },
+						...stubs(x)
+					}
+				} : false
+			} : {
 				scale: firstBar ? () => scaleBand().padding(firstBar.padding ?? .1) : () => scalePoint().padding(0),
 				grid: grids.value.some((entry) => entry.type === "x"),
 				axis: x ? {
-					line: false,
+					line: x.line === true,
 					...tickLabels(tickSize.value),
+					...titled(x),
 					ticks: {
 						format: (index) => trim(xText(props.data[index]), budget),
-						values: rowTicks(props.data.length, x.numTicks)
+						values: shown.value.length ? rowTicks(props.data.length, x.numTicks) : void 0,
+						...stubs(x)
 					}
 				} : false
 			};
@@ -301,16 +340,19 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					nice: true,
 					grid: valueGrid.value === scale,
 					axis: axis && axisShown(scale) ? {
-						line: false,
+						line: axis.line === true,
 						...tickLabels(tickSize.value),
+						...titled(axis),
 						ticks: {
 							format: (raw) => valueLabel(raw, axis.format),
-							...axis.numTicks !== void 0 && { count: axis.numTicks }
+							...axis.numTicks !== void 0 && { count: axis.numTicks },
+							...stubs(axis)
 						}
 					} : false
 				}];
 			}));
 			return defineChart({
+				svgAnimation: SVG_ANIMATION,
 				marks,
 				scales: {
 					[rowId.value]: rowScale,
@@ -318,15 +360,16 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				},
 				color: { scale: scaleOrdinal().domain(shownKeys.value).range(shownColors.value) },
 				gradients: gradients(),
-				...rowFocus(horizontal.value),
-				tooltip: tooltips.value.length > 0 && {
+				...pointMode.value ? pointFocus : rowFocus(horizontal.value),
+				tooltip: tooltip$1.value && {
 					use: tooltip,
+					sticky: tooltip$1.value.sticky,
 					content: (points) => {
 						const row = points[0]?.datum.row;
 						if (!row) return { rows: [] };
 						return {
-							title: row[props.xKey] !== void 0 ? xText(row) : void 0,
-							rows: tooltipSeries(row).map((entry) => ({
+							title: row[props.xKey] !== void 0 ? headingText(row) : void 0,
+							rows: tooltipSeries(row, points[0].datum.category).map((entry) => ({
 								label: entry.label,
 								value: entry.text,
 								color: entry.color
@@ -348,7 +391,6 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				for (const label of svg.querySelectorAll(`text[data-ts-key^="${valueId(scale)}-tick-label"]`)) label.setAttribute("fill", color);
 			}
 		}
-		const tooltip$1 = computed(() => tooltips.value[0]);
 		const Render = (own) => own.render();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ChartFrame_default, mergeProps({
@@ -361,10 +403,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				"tick-size": tickSize.value,
 				"onUpdate:tickSize": _cache[0] || (_cache[0] = ($event) => tickSize.value = $event)
 			}, _ctx.$attrs, { onRender }), {
-				tooltip: withCtx(({ point }) => [tooltip$1.value?.slot ? (openBlock(), createBlock(Render, {
+				tooltip: withCtx(({ point, pinned }) => [tooltip$1.value?.slot ? (openBlock(), createBlock(Render, {
 					key: 0,
-					render: () => tooltip$1.value.slot(tooltipProps(point.datum.row))
-				}, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [point.datum.row[props.xKey] !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(xText(point.datum.row)), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(tooltipSeries(point.datum.row), (entry) => {
+					render: () => tooltip$1.value.slot(tooltipProps(point, pinned))
+				}, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [point.datum.row[props.xKey] !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(headingText(point.datum.row)), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(tooltipSeries(point.datum.row, point.datum.category), (entry) => {
 					return openBlock(), createElementBlock("div", {
 						key: entry.key,
 						"data-part": "tooltip-row"

package/dist/components/chart/ChartTooltip.vue.d.ts

@@ -1,9 +1,20 @@
 import { type ChartTooltipSlotProps } from './ChartRoot.vue';
+type __VLS_Props = {
+    /** `row`: every series at the row under the pointer. `point`: the one point nearest it. @default 'row' */
+    mode?: 'row' | 'point';
+    /** A click, Enter or Space pins it in place; another, or Escape, lets it go. @default true */
+    sticky?: boolean;
+    /** Formats the heading from the row's `x-key` value, apart from the x axis' ticks. Defaults to the x axis' `format`. */
+    headingFormat?: (value: any) => string;
+};
 type __VLS_Slots = {
     /** Replaces the content: a heading, then a row per series. */
     default?(props: ChartTooltipSlotProps): unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: "row" | "point";
+    sticky: boolean;
+}, {}, {}, {}, 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;

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

@@ -5,12 +5,24 @@ var ChartTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	name: "ChartTooltip",
 	inheritAttrs: false,
 	__name: "ChartTooltip",
+	props: {
+		mode: { default: "row" },
+		sticky: {
+			type: Boolean,
+			default: true
+		},
+		headingFormat: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const slots = useSlots();
 		const attrs = useAttrs();
 		useChartPart("tooltip", () => ({
 			attrs,
-			slot: slots.default
+			slot: slots.default,
+			mode: props.mode,
+			sticky: props.sticky,
+			headingFormat: props.headingFormat
 		}));
 		return (_ctx, _cache) => {
 			return null;

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

@@ -6,6 +6,11 @@ import type { ChartCurve } from '@tanstack/charts';
 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;
+/** Tweens a cartesian chart's redraw for new data or a toggled series; off under reduced motion, never on resize. */
+export declare const SVG_ANIMATION: {
+    readonly duration: 240;
+    readonly easing: "ease-out";
+};
 /** An axis' tick labels at `size` px; TanStack lays the axis out for it. */
 export declare const tickLabels: (size: number | undefined) => {
     tickLabels?: undefined;
@@ -28,6 +33,11 @@ export declare const rowFocus: (horizontal?: boolean) => {
     focus: "group-y" | "group-x";
     maxFocusDistance: number;
 };
+/** The one point nearest the pointer, however far. */
+export declare const pointFocus: {
+    focus: "nearest";
+    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. */

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

@@ -10,12 +10,19 @@ function rowTicks(length, count) {
 	const step = Math.max(1, Math.ceil(length / Math.max(1, count)));
 	return Array.from({ length }, (_, index) => index).filter((index) => index % step === 0);
 }
+/** Tweens a cartesian chart's redraw for new data or a toggled series; off under reduced motion, never on resize. */
+var SVG_ANIMATION = {
+	duration: 240,
+	easing: "ease-out"
+};
 /** 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);
+	if (raw === void 0) return "";
+	if (format) return format(raw);
+	return raw instanceof Date ? raw.toLocaleString() : String(raw);
 }
 /** A value axis label: the caller's formatter, or a grouped number. */
 var valueLabel = (raw, format) => format ? format(raw) : formatNumber(raw);
@@ -29,6 +36,11 @@ var rowFocus = (horizontal = false) => ({
 	focus: horizontal ? "group-y" : "group-x",
 	maxFocusDistance: Number.POSITIVE_INFINITY
 });
+/** The one point nearest the pointer, however far. */
+var pointFocus = {
+	focus: "nearest",
+	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 = {
@@ -38,4 +50,4 @@ var SMOOTH = {
 /** 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 };
+export { SVG_ANIMATION, chartName, curveOf, plotted, pointFocus, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel };

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

@@ -24,6 +24,8 @@ export declare const provideChartContext: (value: ChartContext) => ChartContext,
 export interface UseChartSeriesOptions {
     categories: () => string[];
     colors: () => string[] | undefined;
+    /** How many palette colors the default cycles through. */
+    paletteSize?: () => number | undefined;
     labels?: () => string[];
     /** Supplying this makes the hidden list controlled. */
     hidden: () => string[] | undefined;

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

@@ -18,7 +18,7 @@ var { provideContext: provideChartContext, useContext: useChartContext, useOptio
 * happens to be showing.
 */
 function useChartSeries(options) {
-	const colors = computed(() => options.colors() ?? chartColors(options.categories().length));
+	const colors = computed(() => options.colors() ?? chartColors(options.categories().length, void 0, void 0, options.paletteSize?.()));
 	const hidden = useControlled({
 		value: options.hidden,
 		defaultValue: () => [],

package/dist/components/combobox/ComboboxRoot.vue.d.ts

@@ -82,18 +82,18 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    create: (value: string) => any;
     "update:modelValue": (value: ListboxOptionValue | ListboxOptionValue[] | null | undefined) => any;
+    create: (value: string) => any;
     "update:open": (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCreate?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: ListboxOptionValue | ListboxOptionValue[] | null | undefined) => any) | undefined;
+    onCreate?: ((value: string) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    required: boolean;
     invalid: boolean;
     as: string | object;
     modelValue: ListboxOptionValue | ListboxOptionValue[] | null;
+    required: boolean;
     options: ListboxItem[];
     disabled: boolean;
     open: boolean;

package/dist/components/datepicker/DatepickerRoot.vue.d.ts

@@ -147,11 +147,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((value: CalendarModelValue | undefined) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    required: boolean;
-    invalid: boolean;
     mode: CalendarSelectionMode;
-    side: Side;
+    invalid: boolean;
     as: string | object;
+    required: boolean;
+    side: Side;
     disabled: boolean;
     open: boolean;
     align: Align;

package/dist/components/field/FieldRoot.vue.d.ts

@@ -29,9 +29,9 @@ type __VLS_Slots = {
     custom(props: UseFieldReturn): unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, UseFieldReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    required: boolean;
     invalid: boolean;
     as: string | object;
+    required: boolean;
     disabled: boolean;
     readOnly: boolean;
     touched: boolean;

package/dist/components/group/Group.vue.d.ts

@@ -42,8 +42,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** Element or component to render. */
     as?: string | object;
 }> & Readonly<{}>, {
-    orientation: Orientation;
     as: string | object;
+    orientation: Orientation;
     variant: GroupVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {

package/dist/components/range/RangeRoot.vue.d.ts

@@ -63,9 +63,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./u
 }>, {
     defaultValue: number | number[];
     invalid: boolean;
-    orientation: RangeOrientation;
     as: string | object;
     modelValue: number | number[];
+    orientation: RangeOrientation;
     disabled: boolean;
     min: number;
     max: number;

package/dist/components/scroll-area/ScrollArea.vue.d.ts

@@ -80,8 +80,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     /** Element or component to render. */
     as?: string | object;
 }> & Readonly<{}>, {
-    axis: ScrollAreaAxis;
     as: string | object;
+    axis: ScrollAreaAxis;
     fade: ScrollAreaFade;
     overflowThreshold: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

package/dist/components/select/SelectRoot.vue.d.ts

@@ -90,10 +90,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: ListboxOptionValue | ListboxOptionValue[] | null | undefined) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    required: boolean;
     invalid: boolean;
     as: string | object;
     modelValue: ListboxOptionValue | ListboxOptionValue[] | null;
+    required: boolean;
     options: ListboxItem[];
     disabled: boolean;
     open: boolean;

package/dist/components/tabs/TabsRoot.vue.d.ts

@@ -28,9 +28,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./u
     "onUpdate:modelValue"?: ((value: TabValue) => any) | undefined;
 }>, {
     defaultValue: TabValue;
-    orientation: TabsOrientation;
     as: string | object;
     modelValue: TabValue;
+    orientation: TabsOrientation;
     loop: boolean;
     activateOnFocus: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/timepicker/TimepickerRoot.vue.d.ts

@@ -58,10 +58,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     "onUpdate:open"?: ((open: boolean) => any) | undefined;
 }>, {
-    required: boolean;
     invalid: boolean;
-    side: Side;
     as: string | object;
+    required: boolean;
+    side: Side;
     disabled: boolean;
     open: boolean;
     align: Align;

package/dist/components/toggle/ToggleGroup.vue.d.ts

@@ -45,11 +45,11 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./u
     "onUpdate:modelValue"?: ((value: ToggleGroupValue | undefined) => any) | undefined;
 }>, {
     defaultValue: ToggleGroupValue;
-    required: boolean;
     invalid: boolean;
-    orientation: Orientation;
     as: string | object;
     modelValue: ToggleGroupValue;
+    required: boolean;
+    orientation: Orientation;
     disabled: boolean;
     loop: boolean;
     multiple: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunset/vue",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "description": "Headless, unstyled Vue 3 components: keyboard, focus and ARIA handled, the look left to you.",
   "keywords": [
     "vue",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
-    "@vunset/utils": "1.0.0-rc.3"
+    "@vunset/utils": "1.0.0-rc.5"
   },
   "peerDependencies": {
     "@tanstack/charts": "^1.1.0",