@vunset/vue 1.0.0-rc.4 → 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

@@ -14,7 +14,13 @@ type __VLS_Props = {
     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,10 +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 },
-		label: {}
+		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

@@ -1,5 +1,5 @@
 import { useChartSeries } from "./use-chart-series.js";
-import { SVG_ANIMATION, chartName } from "./chart-scales.js";
+import { chartName } from "./chart-scales.js";
 import ChartFrame_default from "./ChartFrame.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, renderSlot, toDisplayString, withCtx } from "vue";
 import { formatNumber } from "@vunset/utils";
@@ -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,17 +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: SVG_ANIMATION,
+				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,
@@ -117,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,8 +47,8 @@ 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;

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"];
@@ -56,6 +57,14 @@ var ChartFrame_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			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, {
@@ -69,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;
 }
@@ -23,6 +25,8 @@ export interface ChartAxisPart {
     numTicks?: number;
     trimLabels?: boolean;
     label?: string;
+    line?: boolean;
+    tickMarks?: boolean;
 }
 export interface ChartGridPart {
     type: 'x' | 'y';
@@ -106,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

@@ -61,7 +61,8 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		orientation: { default: "vertical" },
 		stacked: { type: Boolean },
 		hidden: { default: void 0 },
-		label: {}
+		label: {},
+		paletteSize: {}
 	},
 	emits: ["update:hidden"],
 	setup(__props, { emit: __emit }) {
@@ -92,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),
@@ -222,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,
@@ -242,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,
@@ -295,28 +301,31 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const x = xAxis.value;
 			const firstBar = series.value.find((entry) => entry.kind === "bar");
 			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: false,
+					line: x.line === true,
 					...tickLabels(tickSize.value),
 					...titled(x),
 					ticks: {
 						...x.format && { format: x.format },
-						...x.numTicks !== void 0 && { count: x.numTicks }
+						...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: shown.value.length ? rowTicks(props.data.length, x.numTicks) : void 0
+						values: shown.value.length ? rowTicks(props.data.length, x.numTicks) : void 0,
+						...stubs(x)
 					}
 				} : false
 			};
@@ -331,12 +340,13 @@ 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
 				}];

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

@@ -12,8 +12,8 @@ type __VLS_Slots = {
     default?(props: ChartTooltipSlotProps): unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    sticky: boolean;
     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;

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

@@ -6,7 +6,7 @@ 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 redraw for new data or a toggled series; off under reduced motion, never on resize. */
+/** 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";

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

@@ -10,7 +10,7 @@ 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 redraw for new data or a toggled series; off under reduced motion, never on resize. */
+/** 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"

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.4",
+  "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.4"
+    "@vunset/utils": "1.0.0-rc.5"
   },
   "peerDependencies": {
     "@tanstack/charts": "^1.1.0",