@threadlabs/looma 0.26.16 → 0.26.17

package/vue/chunks/UiMeter.js

@@ -1,8 +1,10 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { a as vPropValidity, n as checkedProp } from "./props.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, openBlock, renderList, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiMeter.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"role",
+	"aria-valuemin",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
@@ -10,11 +12,13 @@ var _hoisted_1 = [
 	"data-ui-meter-segments",
 	"data-label",
 	"data-max",
+	"data-parts",
 	"data-segments",
 	"data-size",
 	"data-tone",
 	"data-value",
 	"data-value-text",
+	"data-variant",
 	"data-ui-meter-state"
 ];
 function createFormatValue() {
@@ -252,6 +256,10 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: null,
 			default: 1
 		},
+		parts: {
+			type: null,
+			default: () => []
+		},
 		segments: {
 			type: null,
 			default: 0
@@ -271,6 +279,10 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		valueText: {
 			type: null,
 			default: ""
+		},
+		variant: {
+			type: null,
+			default: "progress"
 		}
 	},
 	setup(__props) {
@@ -292,10 +304,38 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					name: "number"
 				},
 				required: false,
-				target: { attribute: "aria-valuemax" },
+				target: { attribute: "max" },
 				description: "The value of a full bar, as on a native meter: 1 for a fraction, or the whole amount (a total, a count of items) with value as the part of it. Must be\n      above 0; otherwise the bar is empty.",
 				default: 1
 			},
+			parts: {
+				type: {
+					kind: "list",
+					item: {
+						kind: "object",
+						fields: [{
+							name: "value",
+							type: {
+								kind: "terminal",
+								name: "number"
+							},
+							optional: false
+						}, {
+							name: "color",
+							type: {
+								kind: "terminal",
+								name: "string"
+							},
+							optional: false
+						}],
+						open: false
+					}
+				},
+				required: false,
+				target: { attribute: "parts" },
+				description: "Categories in display order for distribution. Positive finite values determine each share without rounding; zero\n      and negative values draw nothing. Supply label and valueText to describe every category, and a visible text legend so colour is never the only\n      explanation.",
+				default: []
+			},
 			segments: {
 				type: {
 					kind: "terminal",
@@ -354,17 +394,30 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				target: { attribute: "valuetext" },
 				description: "The value as assistive technology reads it (\"$750 of $1,240 collected\", \"3 of 5 done, overdue\"). Empty reads the whole percentage in the current\n      locale.",
 				default: ""
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "progress measures one value against max. distribution shows mutually exclusive parts of a whole as a full-width proportional bar; it uses parts rather than\n      value/max and is an image, not a progress reading.",
+				values: ["progress", "distribution"],
+				default: "progress"
 			}
 		} };
 		const props = __props;
 		const acceptedProps = {
 			label: "",
 			max: 1,
+			parts: () => [],
 			segments: 0,
 			size: "md",
 			tone: "neutral",
 			value: 0,
-			valueText: ""
+			valueText: "",
+			variant: "progress"
 		};
 		const checkedProps = computed(() => ({
 			label: checkedProp(props["label"], {
@@ -375,6 +428,28 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				kind: "terminal",
 				name: "number"
 			}, false, "max", acceptedProps),
+			parts: checkedProp(props["parts"], {
+				kind: "list",
+				item: {
+					kind: "object",
+					fields: [{
+						name: "value",
+						type: {
+							kind: "terminal",
+							name: "number"
+						},
+						optional: false
+					}, {
+						name: "color",
+						type: {
+							kind: "terminal",
+							name: "string"
+						},
+						optional: false
+					}],
+					open: false
+				}
+			}, false, "parts", acceptedProps),
 			segments: checkedProp(props["segments"], {
 				kind: "terminal",
 				name: "number"
@@ -394,7 +469,11 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			valueText: checkedProp(props["valueText"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "valueText", acceptedProps)
+			}, false, "valueText", acceptedProps),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -461,66 +540,188 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		});
 		let guardedPrevious = null;
 		const guarded = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "img",
+				false: "meter"
+			}, concat(checkedProps.value.variant === "distribution")) === Symbol.for("html-next.invalid-result")) return guardedPrevious;
+			return guardedPrevious = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: "img",
+				false: "meter"
+			}, concat(checkedProps.value.variant === "distribution")));
+		});
+		let guardedBindingPrevious = null;
+		const guardedBinding = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: 0
+			}, concat(checkedProps.value.variant === "distribution")) === Symbol.for("html-next.invalid-result")) return guardedBindingPrevious;
+			return guardedBindingPrevious = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: 0
+			}, concat(checkedProps.value.variant === "distribution")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: 0
+			}, concat(checkedProps.value.variant === "distribution"))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: 0
+			}, concat(checkedProps.value.variant === "distribution")));
+		});
+		let guardedBinding2Previous = null;
+		const guardedBinding2 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.max
+			}, concat(checkedProps.value.variant === "distribution")) === Symbol.for("html-next.invalid-result")) return guardedBinding2Previous;
+			return guardedBinding2Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.max
+			}, concat(checkedProps.value.variant === "distribution")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.max
+			}, concat(checkedProps.value.variant === "distribution"))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: checkedProps.value.max
+			}, concat(checkedProps.value.variant === "distribution")));
+		});
+		let guardedBinding3Previous = null;
+		const guardedBinding3 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: amount.value
+			}, concat(checkedProps.value.variant === "distribution")) === Symbol.for("html-next.invalid-result")) return guardedBinding3Previous;
+			return guardedBinding3Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: amount.value
+			}, concat(checkedProps.value.variant === "distribution")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: amount.value
+			}, concat(checkedProps.value.variant === "distribution"))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+				true: null,
+				false: amount.value
+			}, concat(checkedProps.value.variant === "distribution")));
+		});
+		let guardedBinding4Previous = null;
+		const guardedBinding4 = computed(() => {
 			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
 				const value = {
-					true: checkedProps.value.valueText,
-					false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+					true: null,
+					false: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: checkedProps.value.valueText,
+							false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.valueText !== ""))
 				};
 				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
-			})(), concat(checkedProps.value.valueText !== "")) === Symbol.for("html-next.invalid-result")) return guardedPrevious;
-			return guardedPrevious = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+			})(), concat(checkedProps.value.variant === "distribution")) === Symbol.for("html-next.invalid-result")) return guardedBinding4Previous;
+			return guardedBinding4Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
 				const value = {
-					true: checkedProps.value.valueText,
-					false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+					true: null,
+					false: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: checkedProps.value.valueText,
+							false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.valueText !== ""))
 				};
 				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
-			})(), concat(checkedProps.value.valueText !== "")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+			})(), concat(checkedProps.value.variant === "distribution")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
 				const value = {
-					true: checkedProps.value.valueText,
-					false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+					true: null,
+					false: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: checkedProps.value.valueText,
+							false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.valueText !== ""))
 				};
 				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
-			})(), concat(checkedProps.value.valueText !== ""))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+			})(), concat(checkedProps.value.variant === "distribution"))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
 				const value = {
-					true: checkedProps.value.valueText,
-					false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+					true: null,
+					false: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: checkedProps.value.valueText,
+							false: formatValue(number(percent.value) === void 0 || number(100) === void 0 ? void 0 : number(percent.value) / number(100), "number", "format", "percent", { maximumFractionDigits: 0 })
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.valueText !== ""))
 				};
 				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
-			})(), concat(checkedProps.value.valueText !== "")));
+			})(), concat(checkedProps.value.variant === "distribution")));
 		});
-		let guardedBindingPrevious = null;
-		const guardedBinding = computed(() => {
-			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
-				true: checkedProps.value.label,
-				false: null
-			}, concat(checkedProps.value.label !== "")) === Symbol.for("html-next.invalid-result")) return guardedBindingPrevious;
-			return guardedBindingPrevious = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
-				true: checkedProps.value.label,
-				false: null
-			}, concat(checkedProps.value.label !== "")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
-				true: checkedProps.value.label,
-				false: null
-			}, concat(checkedProps.value.label !== ""))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
-				true: checkedProps.value.label,
-				false: null
-			}, concat(checkedProps.value.label !== "")));
+		let guardedBinding5Previous = null;
+		const guardedBinding5 = computed(() => {
+			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+				const value = {
+					true: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: concat(checkedProps.value.label, ": ", checkedProps.value.valueText),
+							false: checkedProps.value.label
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.variant === "distribution" && checkedProps.value.valueText !== "")),
+					false: null
+				};
+				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+			})(), concat(checkedProps.value.label !== "")) === Symbol.for("html-next.invalid-result")) return guardedBinding5Previous;
+			return guardedBinding5Previous = typeof ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+				const value = {
+					true: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: concat(checkedProps.value.label, ": ", checkedProps.value.valueText),
+							false: checkedProps.value.label
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.variant === "distribution" && checkedProps.value.valueText !== "")),
+					false: null
+				};
+				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+			})(), concat(checkedProps.value.label !== "")) === "boolean" ? String(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+				const value = {
+					true: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: concat(checkedProps.value.label, ": ", checkedProps.value.valueText),
+							false: checkedProps.value.label
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.variant === "distribution" && checkedProps.value.valueText !== "")),
+					false: null
+				};
+				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+			})(), concat(checkedProps.value.label !== ""))) : attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+				const value = {
+					true: ((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])((() => {
+						const value = {
+							true: concat(checkedProps.value.label, ": ", checkedProps.value.valueText),
+							false: checkedProps.value.label
+						};
+						return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+					})(), concat(checkedProps.value.variant === "distribution" && checkedProps.value.valueText !== "")),
+					false: null
+				};
+				return Object.values(value).some((entry) => entry === Symbol.for("html-next.invalid-result")) ? Symbol.for("html-next.invalid-result") : value;
+			})(), concat(checkedProps.value.label !== "")));
 		});
-		let guardedBinding2Previous = null;
-		const guardedBinding2 = computed(() => {
+		let guardedBinding6Previous = null;
+		const guardedBinding6 = computed(() => {
 			if (((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
 				true: checkedProps.value.segments,
 				false: null
-			}, concat(number(checkedProps.value.segments) === void 0 || number(1) === void 0 ? void 0 : number(checkedProps.value.segments) > number(1))) === Symbol.for("html-next.invalid-result")) return guardedBinding2Previous;
-			return guardedBinding2Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
+			}, concat(checkedProps.value.variant === "progress" && (number(checkedProps.value.segments) === void 0 || number(1) === void 0 ? void 0 : number(checkedProps.value.segments) > number(1)))) === Symbol.for("html-next.invalid-result")) return guardedBinding6Previous;
+			return guardedBinding6Previous = attribute(((objectValue, indexValue) => objectValue === Symbol.for("html-next.invalid-result") || indexValue === Symbol.for("html-next.invalid-result") ? Symbol.for("html-next.invalid-result") : objectValue[indexValue])({
 				true: checkedProps.value.segments,
 				false: null
-			}, concat(number(checkedProps.value.segments) === void 0 || number(1) === void 0 ? void 0 : number(checkedProps.value.segments) > number(1))));
+			}, concat(checkedProps.value.variant === "progress" && (number(checkedProps.value.segments) === void 0 || number(1) === void 0 ? void 0 : number(checkedProps.value.segments) > number(1)))));
 		});
-		let guardedBinding3Previous = null;
-		const guardedBinding3 = computed(() => {
+		let guardedBinding7Previous = null;
+		const guardedBinding7 = computed(() => {
 			const candidate = concat(percent.value, "%");
-			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding3Previous;
-			return guardedBinding3Previous = candidate;
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding7Previous;
+			return guardedBinding7Previous = candidate;
 		});
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-meter> has an incompatible root."), {
@@ -535,7 +736,9 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			checkedProps.value.size && "size",
 			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
 			checkedProps.value.tone && "tone",
-			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`
 		].filter(Boolean).join(" "));
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
@@ -608,33 +811,44 @@ var UiMeter_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return !Number.isFinite(result) ? Symbol.for("html-next.invalid-result") : unit === void 0 ? result : String(result) + unit;
 		}
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
-				"data-component": "ui-meter",
-				role: "meter",
-				"aria-valuemin": "0"
-			}, nativeAttrs(_ctx.$attrs), {
-				"aria-valuemax": checkedProps.value.max ?? void 0,
-				"aria-valuenow": unref(amount),
-				"aria-valuetext": guarded.value,
-				"aria-label": guardedBinding.value,
-				"data-ui-meter-segments": guardedBinding2.value,
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-meter" }, nativeAttrs(_ctx.$attrs), {
+				role: guarded.value,
+				"aria-valuemin": guardedBinding.value,
+				"aria-valuemax": guardedBinding2.value,
+				"aria-valuenow": guardedBinding3.value,
+				"aria-valuetext": guardedBinding4.value,
+				"aria-label": guardedBinding5.value,
+				"data-ui-meter-segments": guardedBinding6.value,
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-max": reflectedProp("max", "max", checkedProps.value.max, void 0, false),
+				"data-parts": reflectedProp("parts", "parts", checkedProps.value.parts, void 0, false),
 				"data-segments": reflectedProp("segments", "segments", checkedProps.value.segments, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
 				"data-value-text": reflectedProp("valueText", "value-text", checkedProps.value.valueText, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-meter-state": hostState.value || void 0
-			}), [createElementVNode("span", {
+			}), [checkedProps.value.variant === "progress" ? (openBlock(), createElementBlock("span", {
+				key: 0,
 				class: "fill",
-				style: normalizeStyle({ "inline-size": guardedBinding3.value })
-			}, null, 4)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				style: normalizeStyle({ "inline-size": guardedBinding7.value })
+			}, null, 4)) : createCommentVNode("v-if", true), checkedProps.value.variant === "distribution" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(checkedProps.value.parts, (part, index) => {
+				return openBlock(), createElementBlock(Fragment, { key: index }, [part.value > 0 && part.value - part.value === 0 ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "part",
+					"aria-hidden": "true",
+					style: normalizeStyle({
+						"flex-grow": part.value,
+						"background-color": part.color
+					})
+				}, null, 4)) : createCommentVNode("v-if", true)], 64);
+			}), 128)) : createCommentVNode("v-if", true)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-76fefbc5"]]);
+}), [["__scopeId", "data-v-c308c037"]]);
 //#endregion
 export { UiMeter_default as t };

package/vue/components.css

@@ -6532,7 +6532,7 @@ svg[data-v-219fa683-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-meter"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-v-c308c037] {
   --_meter-fill: var(--ui-text-muted);
 
   display: inline-block;
@@ -6548,30 +6548,30 @@ svg[data-v-219fa683-s] {
   /* Unseen until forced colours draw it, where the track's own colour is gone. */
   outline: var(--ui-border-width) solid transparent;
 }
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-v-c308c037] {
   inline-size: var(--ui-meter-inline-size, 5rem);
   block-size: var(--ui-space-1);
 }
-.fill[data-v-76fefbc5] {
+.fill[data-v-c308c037] {
   display: block;
   block-size: 100%;
   background-color: var(--_meter-fill);
   background-image: linear-gradient(to bottom, rgb(255 255 255 / 0.26), transparent 70%);
   box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=accent"][data-v-c308c037] {
   --_meter-fill: var(--ui-accent-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=info"][data-v-c308c037] {
   --_meter-fill: var(--ui-info-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=success"][data-v-c308c037] {
   --_meter-fill: var(--ui-success-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=warning"][data-v-c308c037] {
   --_meter-fill: var(--ui-warning-solid);
 }
-[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="tone=danger"][data-v-c308c037] {
   --_meter-fill: var(--ui-danger-solid);
 }
 
@@ -6583,40 +6583,40 @@ svg[data-v-219fa683-s] {
    The count arrives as an attribute, not an inline custom property (which would add a style
    attribute to every meter), so a continuous meter renders exactly as before, and the rules below
    turn it into a number. That caps it at 12, until attr() with a type reads any count in every engine. */
-[data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="2"][data-v-c308c037] {
   --_segments: 2;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="3"][data-v-c308c037] {
   --_segments: 3;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="4"][data-v-c308c037] {
   --_segments: 4;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="5"][data-v-c308c037] {
   --_segments: 5;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="6"][data-v-c308c037] {
   --_segments: 6;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="7"][data-v-c308c037] {
   --_segments: 7;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="8"][data-v-c308c037] {
   --_segments: 8;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="9"][data-v-c308c037] {
   --_segments: 9;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="10"][data-v-c308c037] {
   --_segments: 10;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="11"][data-v-c308c037] {
   --_segments: 11;
 }
-[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments="12"][data-v-c308c037] {
   --_segments: 12;
 }
-[data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
   --_meter-gap: var(--ui-space-1);
   --_meter-period: calc((100% + var(--_meter-gap)) / var(--_segments));
   --_meter-segment: calc(var(--_meter-period) - var(--_meter-gap));
@@ -6627,20 +6627,45 @@ svg[data-v-219fa683-s] {
     transparent 0 var(--_meter-period)
   );
 }
-[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-state~="size=sm"][data-ui-meter-segments][data-v-c308c037] {
   --_meter-gap: var(--ui-space-0-5);
 }
 
+/* A categorical distribution uses flex ratios, avoiding rounded percentages and retaining
+   identical geometry before hydration. It has no progress mask or growing-value animation. */
+[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][data-v-c308c037] {
+  display: flex;
+  inline-size: 100%;
+  block-size: var(--ui-space-4);
+  gap: var(--ui-space-0-5);
+}
+[data-component~="ui-meter"][data-ui-meter-state~="variant=distribution"][size="sm"][data-v-c308c037] {
+  block-size: var(--ui-space-2);
+}
+.part[data-v-c308c037] {
+  flex-basis: 0;
+  min-inline-size: 0;
+  block-size: 100%;
+}
+@media (forced-colors: active) {
+.part[data-v-c308c037] {
+    forced-color-adjust: none;
+    background: CanvasText !important;
+    outline: var(--ui-border-width) solid Canvas;
+    outline-offset: calc(-1 * var(--ui-border-width));
+}
+}
+
 /* Forced colours drop backgrounds: draw the fill in the text colour inside the outlined track. */
 @media (forced-colors: active) {
-.fill[data-v-76fefbc5] {
+.fill[data-v-c308c037] {
     forced-color-adjust: none;
     background: CanvasText;
 }
 
   /* The mask clips the track's outline, so each segment draws its own: the inset shadow draws the
      top and bottom edges and the gradient the ends. */
-[data-component~="ui-meter"][data-ui-meter-segments][data-v-76fefbc5] {
+[data-component~="ui-meter"][data-ui-meter-segments][data-v-c308c037] {
     forced-color-adjust: none;
     background: repeating-linear-gradient(
       to right,
@@ -6654,7 +6679,7 @@ svg[data-v-219fa683-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-meter"][hidden][data-v-76fefbc5] {
+[data-component~="ui-meter"][hidden][data-v-c308c037] {
   display: none;
 }