@vizejs/ui 0.387.0 → 0.388.0

package/dist/progress--vbV2wTx.mjs

@@ -0,0 +1,145 @@
+import { a as useDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createElementBlock, defineComponent, openBlock, renderSlot, unref, useTemplateRef } from "vue";
+//#region src/families/feedback/progress/progress-state.ts
+/** Native-friendly default maximum for determinate Progress. */
+const PROGRESS_DEFAULT_MAX = 100;
+function normalizeMax(max) {
+	if (typeof max !== "number" || !Number.isFinite(max) || max <= 0) return 100;
+	return max;
+}
+function normalizeValue(value, max) {
+	if (typeof value !== "number" || !Number.isFinite(value)) return null;
+	return Math.min(Math.max(value, 0), max);
+}
+/** Normalize raw Progress props into the public state contract. */
+function getProgressState(options = {}) {
+	const max = normalizeMax(options.max);
+	const value = normalizeValue(options.value, max);
+	const indeterminate = value === null;
+	const percent = indeterminate ? null : value / max * 100;
+	const complete = value !== null && value >= max;
+	return Object.freeze({
+		value,
+		max,
+		percent,
+		indeterminate,
+		complete,
+		state: indeterminate ? "indeterminate" : complete ? "complete" : "loading"
+	});
+}
+//#endregion
+//#region src/families/feedback/progress/progress.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"value",
+	"max",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-valuetext",
+	"data-state",
+	"data-indeterminate",
+	"data-complete",
+	"data-value",
+	"data-max",
+	"data-percent"
+];
+//#endregion
+//#region src/families/feedback/progress/progress.vue
+var progress_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "progress",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: [Number, null],
+			required: false,
+			default: null
+		},
+		max: {
+			type: [Number, null],
+			required: false,
+			default: () => 100
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaValueText: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "progress"
+		});
+		const progress = computed(() => getProgressState({
+			value: __props.value,
+			max: __props.max
+		}));
+		const currentValue = computed(() => progress.value.value);
+		const currentMax = computed(() => progress.value.max);
+		const percent = computed(() => progress.value.percent);
+		const indeterminate = computed(() => progress.value.indeterminate);
+		const complete = computed(() => progress.value.complete);
+		const state = computed(() => progress.value.state);
+		__expose({
+			element,
+			value: currentValue,
+			max: currentMax,
+			percent,
+			indeterminate,
+			complete,
+			state
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("progress", {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				value: currentValue.value ?? void 0,
+				max: currentMax.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-valuetext": __props.ariaValueText,
+				"data-vize-ui": "progress",
+				part: "root",
+				"data-state": state.value,
+				"data-indeterminate": indeterminate.value ? "true" : "false",
+				"data-complete": complete.value ? "true" : "false",
+				"data-value": currentValue.value ?? void 0,
+				"data-max": currentMax.value,
+				"data-percent": percent.value ?? void 0
+			}, [renderSlot(_ctx.$slots, "default", {
+				value: currentValue.value,
+				max: currentMax.value,
+				percent: percent.value,
+				indeterminate: indeterminate.value,
+				complete: complete.value,
+				state: state.value
+			}, void 0, true)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-ba8b2eb6"]]);
+//#endregion
+export { PROGRESS_DEFAULT_MAX as n, getProgressState as r, progress_default as t };

package/dist/progress-C4PlKwWq.d.mts

@@ -0,0 +1,128 @@
+import { ComputedRef } from "vue";
+
+//#region src/families/feedback/progress/progress-types.d.ts
+/** Visual and accessibility state exposed by the Progress primitive. */
+type ProgressState = "complete" | "indeterminate" | "loading";
+/** Public props accepted by the legacy native Progress primitive. */
+interface ProgressProps {
+  /**
+   * Consumer-owned progressbar id. `null` and `undefined` select a deterministic fallback.
+   *
+   * @default undefined
+   */
+  readonly id?: string | null;
+  /**
+   * Current determinate value. `null`, `undefined`, and non-finite numbers render indeterminate.
+   *
+   * @default null
+   */
+  readonly value?: number | null;
+  /**
+   * Positive maximum value. Non-positive and non-finite numbers fall back to 100.
+   *
+   * @default 100
+   */
+  readonly max?: number | null;
+  /**
+   * Accessible name when no visible label or `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+  /**
+   * Space-separated ids that label the progressbar.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+  /**
+   * Space-separated ids that describe the progressbar.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+  /**
+   * Human-readable value text for assistive technology.
+   *
+   * @default undefined
+   */
+  readonly ariaValueText?: string;
+}
+/** State exposed to the default Progress slot and component instance. */
+interface ProgressSlotState {
+  /** Current normalized value, or `null` when the progressbar is indeterminate. */
+  readonly value: number | null;
+  /** Positive normalized maximum value used by the native progressbar. */
+  readonly max: number;
+  /** Current completion percentage from 0 to 100, or `null` when indeterminate. */
+  readonly percent: number | null;
+  /** Whether no determinate value is available. */
+  readonly indeterminate: boolean;
+  /** Whether the normalized value has reached the normalized maximum. */
+  readonly complete: boolean;
+  /** Stable state token for styling and tests. */
+  readonly state: ProgressState;
+}
+/** Slots accepted by the legacy native Progress primitive. */
+interface ProgressSlots {
+  /** Optional fallback contents. Receives normalized Progress state for composition. */
+  readonly default?: (props: ProgressSlotState) => unknown;
+}
+/** Public component instance exposed by the Progress primitive. */
+interface ProgressExpose extends ProgressSlotState {
+  /** Rendered native progress element. */
+  readonly element: HTMLProgressElement | null;
+}
+//#endregion
+//#region src/families/feedback/progress/progress-state.d.ts
+/** Native-friendly default maximum for determinate Progress. */
+declare const PROGRESS_DEFAULT_MAX = 100;
+/** Raw values accepted by the Progress normalizer. */
+interface ProgressStateOptions {
+  /**
+   * Raw determinate value. `null`, `undefined`, and non-finite numbers are indeterminate.
+   *
+   * @default null
+   */
+  readonly value?: number | null;
+  /**
+   * Raw maximum. Non-positive and non-finite numbers fall back to `PROGRESS_DEFAULT_MAX`.
+   *
+   * @default PROGRESS_DEFAULT_MAX
+   */
+  readonly max?: number | null;
+}
+/** Normalize raw Progress props into the public state contract. */
+declare function getProgressState(options?: ProgressStateOptions): ProgressSlotState;
+//#endregion
+//#region src/families/feedback/progress/progress.vue.d.ts
+type __VLS_Props = {
+  /** Consumer-owned progressbar id. @default undefined */readonly id?: string | null; /** Current determinate value. `null`, `undefined`, and non-finite numbers render indeterminate. @default null */
+  readonly value?: number | null; /** Positive maximum value. Non-positive and non-finite numbers fall back to 100. @default 100 */
+  readonly max?: number | null; /** Accessible name when no visible label or `aria-labelledby` supplies one. @default undefined */
+  readonly ariaLabel?: string; /** Space-separated ids that label the progressbar. @default undefined */
+  readonly ariaLabelledby?: string; /** Space-separated ids that describe the progressbar. @default undefined */
+  readonly ariaDescribedby?: string; /** Human-readable value text for assistive technology. @default undefined */
+  readonly ariaValueText?: string;
+};
+type __VLS_Slots = {
+  /** Optional fallback contents. Receives normalized Progress state for composition. */default?(props: ProgressSlotState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  element: Readonly<import("vue").ShallowRef<HTMLProgressElement | null>>;
+  value: ComputedRef<number | null>;
+  max: ComputedRef<number>;
+  percent: ComputedRef<number | null>;
+  indeterminate: ComputedRef<boolean>;
+  complete: ComputedRef<boolean>;
+  state: ComputedRef<ProgressState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { ProgressProps as a, ProgressState as c, ProgressExpose as i, PROGRESS_DEFAULT_MAX as n, ProgressSlotState as o, getProgressState as r, ProgressSlots as s, _default as t };

package/dist/progress-bar-BqS94auR.mjs

@@ -0,0 +1,301 @@
+import './style.css';
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-yMq4HfmS.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, useTemplateRef, withCtx } from "vue";
+//#region src/families/feedback/progress-bar/progress-bar-state.ts
+/** Native-friendly default minimum for determinate ProgressBar. */
+const PROGRESS_BAR_DEFAULT_MIN = 0;
+/** Native-friendly default maximum for determinate ProgressBar. */
+const PROGRESS_BAR_DEFAULT_MAX = 100;
+function finite(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function normalizeNumber(value) {
+	return Number.isInteger(value) ? String(value) : String(Number(value.toPrecision(12)));
+}
+function normalizeDirection(dir) {
+	return dir === "rtl" ? "rtl" : "ltr";
+}
+/** Normalize raw ProgressBar props into the public ARIA and CSS state contract. */
+function getProgressBarState(options = {}) {
+	const min = finite(options.min) ? options.min : 0;
+	let invalid = options.min != null && !finite(options.min);
+	let max = 100;
+	if (finite(options.max) && options.max > min) max = options.max;
+	else {
+		invalid = invalid || options.max != null;
+		max = min + 100;
+	}
+	const value = finite(options.value) ? clamp(options.value, min, max) : null;
+	invalid = invalid || options.value != null && (!finite(options.value) || options.value !== value);
+	const indeterminate = value === null;
+	const ratio = indeterminate ? null : (value - min) / (max - min);
+	const percent = ratio === null ? null : ratio * 100;
+	const complete = value !== null && value >= max;
+	return Object.freeze({
+		value,
+		min,
+		max,
+		percent,
+		ratio,
+		dir: normalizeDirection(options.dir),
+		indeterminate,
+		complete,
+		invalid,
+		state: indeterminate ? "indeterminate" : complete ? "complete" : "loading"
+	});
+}
+/** Convert normalized state into stable ProgressBar CSS custom properties. */
+function getProgressBarStyle(state) {
+	const ratio = state.ratio ?? 0;
+	const percent = state.percent ?? 0;
+	return Object.freeze({
+		"--vize-ui-progress-bar-max": normalizeNumber(state.max),
+		"--vize-ui-progress-bar-min": normalizeNumber(state.min),
+		"--vize-ui-progress-bar-percent": `${normalizeNumber(percent)}%`,
+		"--vize-ui-progress-bar-ratio": normalizeNumber(ratio),
+		"--vize-ui-progress-bar-value": normalizeNumber(state.value ?? state.min)
+	});
+}
+//#endregion
+//#region src/families/feedback/progress-bar/progress-bar.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id"];
+//#endregion
+//#region src/families/feedback/progress-bar/progress-bar.vue
+var progress_bar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "progress-bar",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: [Number, null],
+			required: false,
+			default: null
+		},
+		min: {
+			type: [Number, null],
+			required: false,
+			default: () => 0
+		},
+		max: {
+			type: [Number, null],
+			required: false,
+			default: () => 100
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		label: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		valueLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaDescribedby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaValueText: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const slots = useSlots();
+		const root = useTemplateRef("root");
+		const track = useTemplateRef("track");
+		const indicator = useTemplateRef("indicator");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "progress"
+		});
+		const labelId = computed(() => deriveDeterministicId(controlId.value, "label"));
+		const valueId = computed(() => deriveDeterministicId(controlId.value, "value"));
+		const progress = computed(() => getProgressBarState({
+			value: __props.value,
+			min: __props.min,
+			max: __props.max,
+			dir: __props.dir
+		}));
+		const currentValue = computed(() => progress.value.value);
+		const currentMin = computed(() => progress.value.min);
+		const currentMax = computed(() => progress.value.max);
+		const percent = computed(() => progress.value.percent);
+		const ratio = computed(() => progress.value.ratio);
+		const direction = computed(() => progress.value.dir);
+		const indeterminate = computed(() => progress.value.indeterminate);
+		const complete = computed(() => progress.value.complete);
+		const invalid = computed(() => progress.value.invalid);
+		const state = computed(() => progress.value.state);
+		const progressStyle = computed(() => getProgressBarStyle(progress.value));
+		const rootIntrinsicProps = computed(() => ({ style: progressStyle.value }));
+		const hasLabel = computed(() => hasText(__props.label) || slots.label !== void 0);
+		const hasValue = computed(() => hasText(__props.valueLabel) || slots.value !== void 0);
+		const labelledby = computed(() => {
+			if (hasText(__props.ariaLabelledby)) return __props.ariaLabelledby;
+			return hasLabel.value ? labelId.value : void 0;
+		});
+		const accessibleLabel = computed(() => labelledby.value === void 0 ? __props.ariaLabel : void 0);
+		const labelled = computed(() => hasText(accessibleLabel.value) || labelledby.value !== void 0);
+		const valueText = computed(() => normalizeText(__props.ariaValueText) ?? normalizeText(__props.valueLabel));
+		const slotState = computed(() => ({
+			complete: complete.value,
+			dir: direction.value,
+			id: controlId.value,
+			indeterminate: indeterminate.value,
+			invalid: invalid.value,
+			labelId: labelId.value,
+			max: currentMax.value,
+			min: currentMin.value,
+			percent: percent.value,
+			ratio: ratio.value,
+			state: state.value,
+			style: progressStyle.value,
+			value: currentValue.value,
+			valueId: valueId.value
+		}));
+		function hasText(text) {
+			return normalizeText(text) !== void 0;
+		}
+		function normalizeText(text) {
+			if (text === void 0) return void 0;
+			const normalized = text.replaceAll(/\s+/g, " ").trim();
+			return normalized.length === 0 ? void 0 : normalized;
+		}
+		function focus(options) {
+			focusTarget(root.value, options);
+		}
+		function focusTarget(target, options) {
+			if (typeof target === "object" && target !== null && "focus" in target && typeof target.focus === "function") target.focus(options);
+		}
+		__expose({
+			root,
+			track,
+			indicator,
+			value: currentValue,
+			min: currentMin,
+			max: currentMax,
+			percent,
+			ratio,
+			dir: direction,
+			indeterminate,
+			complete,
+			invalid,
+			state,
+			id: controlId,
+			labelId,
+			valueId,
+			style: progressStyle,
+			focus
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				id: unref(controlId),
+				ref_key: "root",
+				ref: root
+			}, rootIntrinsicProps.value, {
+				role: "progressbar",
+				dir: direction.value,
+				"aria-label": accessibleLabel.value,
+				"aria-labelledby": labelledby.value,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-valuemin": currentMin.value,
+				"aria-valuemax": currentMax.value,
+				"aria-valuenow": currentValue.value ?? void 0,
+				"aria-valuetext": valueText.value,
+				"data-vize-ui": "progress-bar",
+				part: "root",
+				"data-dir": direction.value,
+				"data-state": state.value,
+				"data-labelled": labelled.value ? "true" : "false",
+				"data-indeterminate": indeterminate.value ? "true" : "false",
+				"data-complete": complete.value ? "true" : "false",
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-value": currentValue.value ?? void 0,
+				"data-min": currentMin.value,
+				"data-max": currentMax.value,
+				"data-percent": percent.value ?? void 0
+			}), {
+				default: withCtx(() => [
+					hasLabel.value ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						id: labelId.value,
+						"data-vize-ui": "progress-bar-label",
+						part: "label"
+					}, [renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(slotState.value)), () => [createTextVNode(toDisplayString(__props.label), 1)], true)], 8, _hoisted_1)) : createCommentVNode("v-if", true),
+					createElementVNode("span", {
+						ref_key: "track",
+						ref: track,
+						"data-vize-ui": "progress-bar-track",
+						part: "track"
+					}, [createElementVNode("span", {
+						ref_key: "indicator",
+						ref: indicator,
+						"data-vize-ui": "progress-bar-indicator",
+						part: "indicator"
+					}, [renderSlot(_ctx.$slots, "indicator", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 512)], 512),
+					hasValue.value ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						id: valueId.value,
+						"data-vize-ui": "progress-bar-value",
+						part: "value"
+					}, [renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps(slotState.value)), () => [createTextVNode(toDisplayString(__props.valueLabel), 1)], true)], 8, _hoisted_2)) : createCommentVNode("v-if", true),
+					renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)
+				]),
+				_: 3
+			}, 16, [
+				"id",
+				"dir",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-valuemin",
+				"aria-valuemax",
+				"aria-valuenow",
+				"aria-valuetext",
+				"data-dir",
+				"data-state",
+				"data-labelled",
+				"data-indeterminate",
+				"data-complete",
+				"data-invalid",
+				"data-value",
+				"data-min",
+				"data-max",
+				"data-percent"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-5d4c22f1"]]);
+//#endregion
+export { getProgressBarStyle as a, getProgressBarState as i, PROGRESS_BAR_DEFAULT_MAX as n, PROGRESS_BAR_DEFAULT_MIN as r, progress_bar_default as t };

package/dist/progress-bar.d.mts

@@ -0,0 +1,2 @@
+import { A as ProgressBarDirection, D as PROGRESS_BAR_DEFAULT_MIN, E as PROGRESS_BAR_DEFAULT_MAX, F as ProgressBarState, I as ProgressBarStyle, M as ProgressBarProps, N as ProgressBarSlotState, O as getProgressBarState, P as ProgressBarSlots, T as _default, j as ProgressBarExpose, k as getProgressBarStyle } from "./announcer-DGr2Iz0i.mjs";
+export { PROGRESS_BAR_DEFAULT_MAX, PROGRESS_BAR_DEFAULT_MIN, _default as ProgressBar, type ProgressBarDirection, type ProgressBarExpose, type ProgressBarProps, type ProgressBarSlotState, type ProgressBarSlots, type ProgressBarState, type ProgressBarStyle, getProgressBarState, getProgressBarStyle };

package/dist/progress-bar.mjs

@@ -0,0 +1,2 @@
+import { a as getProgressBarStyle, i as getProgressBarState, n as PROGRESS_BAR_DEFAULT_MAX, r as PROGRESS_BAR_DEFAULT_MIN, t as progress_bar_default } from "./progress-bar-BqS94auR.mjs";
+export { PROGRESS_BAR_DEFAULT_MAX, PROGRESS_BAR_DEFAULT_MIN, progress_bar_default as ProgressBar, getProgressBarState, getProgressBarStyle };

package/dist/progress.d.mts

@@ -0,0 +1,2 @@
+import { a as ProgressProps, c as ProgressState, i as ProgressExpose, n as PROGRESS_DEFAULT_MAX, o as ProgressSlotState, r as getProgressState, s as ProgressSlots, t as _default } from "./progress-C4PlKwWq.mjs";
+export { PROGRESS_DEFAULT_MAX, _default as Progress, type ProgressExpose, type ProgressProps, type ProgressSlotState, type ProgressSlots, type ProgressState, getProgressState };

package/dist/progress.mjs

@@ -0,0 +1,2 @@
+import { n as PROGRESS_DEFAULT_MAX, r as getProgressState, t as progress_default } from "./progress--vbV2wTx.mjs";
+export { PROGRESS_DEFAULT_MAX, progress_default as Progress, getProgressState };