@vizejs/ui 0.387.0 → 0.389.0

package/dist/spinner-bizL-oOg.mjs

@@ -0,0 +1,200 @@
+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, createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useTemplateRef, withCtx } from "vue";
+//#region src/families/feedback/spinner/spinner.vue?vue&type=script&setup=true&lang.ts
+const SPINNER_DEFAULT_MIN = 0;
+const SPINNER_DEFAULT_MAX = 100;
+//#endregion
+//#region src/families/feedback/spinner/spinner.vue
+var spinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "spinner",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		visible: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		role: {
+			type: String,
+			required: false,
+			default: "status"
+		},
+		value: {
+			type: [Number, null],
+			required: false,
+			default: null
+		},
+		min: {
+			type: Number,
+			required: false,
+			default: () => SPINNER_DEFAULT_MIN
+		},
+		max: {
+			type: Number,
+			required: false,
+			default: () => SPINNER_DEFAULT_MAX
+		},
+		atomic: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaHidden: {
+			type: Boolean,
+			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 element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "spinner"
+		});
+		const loadingState = computed(() => __props.loading);
+		const visibleState = computed(() => __props.visible);
+		const ariaState = computed(() => __props.ariaHidden === true ? "decorative" : __props.role);
+		const currentMin = computed(() => Number.isFinite(__props.min) ? __props.min : SPINNER_DEFAULT_MIN);
+		const currentMax = computed(() => normalizeMax(__props.max, currentMin.value));
+		const currentValue = computed(() => normalizeValue(__props.value, currentMin.value, currentMax.value));
+		const percent = computed(() => currentValue.value === null ? null : (currentValue.value - currentMin.value) / (currentMax.value - currentMin.value) * 100);
+		const progressState = computed(() => {
+			if (ariaState.value !== "progressbar") return "none";
+			return currentValue.value === null ? "indeterminate" : "determinate";
+		});
+		const complete = computed(() => progressState.value === "determinate" && currentValue.value === currentMax.value);
+		const state = computed(() => {
+			if (!visibleState.value) return "hidden";
+			if (!loadingState.value) return "idle";
+			return complete.value && progressState.value === "determinate" ? "complete" : "loading";
+		});
+		const slotState = computed(() => ({
+			ariaState: ariaState.value,
+			complete: complete.value,
+			loading: loadingState.value,
+			max: currentMax.value,
+			min: currentMin.value,
+			percent: percent.value,
+			progressState: progressState.value,
+			state: state.value,
+			value: currentValue.value,
+			visible: visibleState.value
+		}));
+		__expose({
+			ariaState,
+			complete,
+			element,
+			loading: loadingState,
+			max: currentMax,
+			min: currentMin,
+			percent,
+			progressState,
+			state,
+			value: currentValue,
+			visible: visibleState
+		});
+		function normalizeMax(rawMax, normalizedMin) {
+			const candidate = Number.isFinite(rawMax) ? rawMax : SPINNER_DEFAULT_MAX;
+			return candidate > normalizedMin ? candidate : normalizedMin + SPINNER_DEFAULT_MAX;
+		}
+		function normalizeValue(rawValue, normalizedMin, normalizedMax) {
+			if (rawValue == null || !Number.isFinite(rawValue)) return null;
+			return Math.min(Math.max(rawValue, normalizedMin), normalizedMax);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				hidden: __props.visible ? void 0 : true,
+				role: ariaState.value === "decorative" ? void 0 : __props.role,
+				"aria-hidden": ariaState.value === "decorative" ? "true" : void 0,
+				"aria-label": ariaState.value === "decorative" ? void 0 : __props.ariaLabel,
+				"aria-labelledby": ariaState.value === "decorative" ? void 0 : __props.ariaLabelledby,
+				"aria-describedby": ariaState.value === "decorative" ? void 0 : __props.ariaDescribedby,
+				"aria-live": ariaState.value === "status" ? "polite" : void 0,
+				"aria-atomic": ariaState.value === "status" ? __props.atomic ? "true" : "false" : void 0,
+				"aria-valuemin": ariaState.value === "progressbar" ? currentMin.value : void 0,
+				"aria-valuemax": ariaState.value === "progressbar" ? currentMax.value : void 0,
+				"aria-valuenow": ariaState.value === "progressbar" ? currentValue.value ?? void 0 : void 0,
+				"aria-valuetext": ariaState.value === "progressbar" ? __props.ariaValueText : void 0,
+				"data-vize-ui": "spinner",
+				part: "root",
+				"data-state": state.value,
+				"data-loading": __props.loading ? "true" : "false",
+				"data-visible": __props.visible ? "true" : "false",
+				"data-aria-state": ariaState.value,
+				"data-progress-state": progressState.value,
+				"data-complete": complete.value ? "true" : "false",
+				"data-value": progressState.value === "none" ? void 0 : currentValue.value ?? void 0,
+				"data-min": progressState.value === "none" ? void 0 : currentMin.value,
+				"data-max": progressState.value === "none" ? void 0 : currentMax.value,
+				"data-percent": progressState.value === "determinate" ? percent.value : void 0
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"id",
+				"hidden",
+				"role",
+				"aria-hidden",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-live",
+				"aria-atomic",
+				"aria-valuemin",
+				"aria-valuemax",
+				"aria-valuenow",
+				"aria-valuetext",
+				"data-state",
+				"data-loading",
+				"data-visible",
+				"data-aria-state",
+				"data-progress-state",
+				"data-complete",
+				"data-value",
+				"data-min",
+				"data-max",
+				"data-percent"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-fb16abcb"]]);
+//#endregion
+export { spinner_default as t };

package/dist/spinner.d.mts

@@ -0,0 +1,2 @@
+import { a as SpinnerProgressState, c as SpinnerState, i as SpinnerExpose, n as SpinnerAriaState, o as SpinnerRole, r as SpinnerElement, s as SpinnerSlotState, t as _default } from "./spinner-JnRs8fp-.mjs";
+export { _default as Spinner, type SpinnerAriaState, type SpinnerElement, type SpinnerExpose, type SpinnerProgressState, type SpinnerRole, type SpinnerSlotState, type SpinnerState };

package/dist/spinner.mjs

@@ -0,0 +1,2 @@
+import { t as spinner_default } from "./spinner-bizL-oOg.mjs";
+export { spinner_default as Spinner };

package/dist/stack-C7DOIxo-.mjs

@@ -0,0 +1,137 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+function resolveFlexDirection(axis, reversed) {
+	if (axis === "inline") return reversed ? "row-reverse" : "row";
+	return reversed ? "column-reverse" : "column";
+}
+/** Resolve public Stack props into a native CSS flexbox contract. */
+function resolveStackLayout(options) {
+	const align = options.align ?? "stretch";
+	const axis = options.axis ?? "block";
+	const gap = options.gap ?? "1rem";
+	const justify = options.justify ?? "start";
+	const reversed = options.reversed ?? false;
+	const direction = resolveFlexDirection(axis, reversed);
+	return {
+		align,
+		axis,
+		direction,
+		gap,
+		justify,
+		reversed,
+		state: "stacked",
+		style: {
+			"--vize-ui-stack-align": align,
+			"--vize-ui-stack-gap": gap,
+			"--vize-ui-stack-justify": justify,
+			alignItems: "var(--vize-ui-stack-align)",
+			display: "flex",
+			flexDirection: direction,
+			gap: "var(--vize-ui-stack-gap)",
+			justifyContent: "var(--vize-ui-stack-justify)"
+		}
+	};
+}
+//#endregion
+//#region src/families/layout/stack/stack.vue
+var stack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "stack",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		axis: {
+			type: String,
+			required: false,
+			default: "block"
+		},
+		reversed: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		gap: {
+			type: String,
+			required: false,
+			default: "1rem"
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "stretch"
+		},
+		justify: {
+			type: String,
+			required: false,
+			default: "start"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const layout = computed(() => resolveStackLayout({
+			align: __props.align,
+			axis: __props.axis,
+			gap: __props.gap,
+			justify: __props.justify,
+			reversed: __props.reversed
+		}));
+		const alignState = computed(() => layout.value.align);
+		const axisState = computed(() => layout.value.axis);
+		const directionState = computed(() => layout.value.direction);
+		const gapState = computed(() => layout.value.gap);
+		const justifyState = computed(() => layout.value.justify);
+		const reversedState = computed(() => layout.value.reversed);
+		const stackState = computed(() => layout.value.state);
+		const stackStyle = computed(() => layout.value.style);
+		const slotState = computed(() => ({
+			align: alignState.value,
+			axis: axisState.value,
+			direction: directionState.value,
+			gap: gapState.value,
+			justify: justifyState.value,
+			reversed: reversedState.value,
+			state: stackState.value
+		}));
+		const intrinsicProps = computed(() => ({ style: stackStyle.value }));
+		__expose({
+			align: alignState,
+			axis: axisState,
+			direction: directionState,
+			element,
+			gap: gapState,
+			justify: justifyState,
+			reversed: reversedState,
+			state: stackState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+				ref_key: "element",
+				ref: element,
+				part: "root",
+				"data-vize-ui": "stack",
+				"data-state": stackState.value,
+				"data-axis": axisState.value,
+				"data-reversed": reversedState.value ? "true" : "false",
+				"data-vize-stack-direction": directionState.value,
+				"data-vize-stack-gap": gapState.value,
+				"data-vize-stack-align": alignState.value,
+				"data-vize-stack-justify": justifyState.value
+			}, intrinsicProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 16, [
+				"data-state",
+				"data-axis",
+				"data-reversed",
+				"data-vize-stack-direction",
+				"data-vize-stack-gap",
+				"data-vize-stack-align",
+				"data-vize-stack-justify"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-ed6c52a7"]]);
+//#endregion
+export { stack_default as t };

package/dist/stack-CPtBckZB.d.mts

@@ -0,0 +1,127 @@
+import { t as PrimitiveAs } from "./primitive-BE2mdUcw.mjs";
+import { ComponentPublicInstance } from "vue";
+
+//#region src/families/layout/stack/stack-types.d.ts
+/** Logical axis used by {@link Stack}. */
+type StackAxis = "block" | "inline";
+/** Native CSS `align-items` values supported by {@link Stack}. */
+type StackAlign = "stretch" | "start" | "center" | "end" | "baseline";
+/** Native CSS `justify-content` values supported by {@link Stack}. */
+type StackJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+/** Native CSS length, percentage, keyword, or custom property used by {@link Stack}. */
+type StackGap = string;
+/** CSS `flex-direction` produced by the logical stack axis. */
+type StackFlexDirection = "column" | "column-reverse" | "row" | "row-reverse";
+/** Rendered data state for {@link Stack}. */
+type StackState = "stacked";
+/** Rendered value exposed by {@link Stack}. */
+type StackElement = Element | ComponentPublicInstance;
+/** State exposed to the default Stack slot. */
+interface StackSlotState {
+  /** Logical axis used for the flex main axis. */
+  readonly axis: StackAxis;
+  /** Whether the selected logical axis is reversed. */
+  readonly reversed: boolean;
+  /** CSS `flex-direction` applied to the rendered host. */
+  readonly direction: StackFlexDirection;
+  /** Native CSS `gap` value between direct children. */
+  readonly gap: StackGap;
+  /** Native CSS `align-items` value for the cross axis. */
+  readonly align: StackAlign;
+  /** Native CSS `justify-content` value for the main axis. */
+  readonly justify: StackJustify;
+  /** Stable state token for styling and tests. */
+  readonly state: StackState;
+}
+/** Inline style hooks applied to the rendered Stack host. */
+interface StackStyle {
+  /** Consumer-overridable gap hook read by the host `gap` declaration. */
+  readonly "--vize-ui-stack-gap": StackGap;
+  /** Consumer-overridable alignment hook read by the host `align-items` declaration. */
+  readonly "--vize-ui-stack-align": StackAlign;
+  /** Consumer-overridable justification hook read by the host `justify-content` declaration. */
+  readonly "--vize-ui-stack-justify": StackJustify;
+  /** Flex layout mode for a single non-wrapping axis. */
+  readonly display: "flex";
+  /** CSS `flex-direction` resolved from `axis` and `reversed`. */
+  readonly flexDirection: StackFlexDirection;
+  /** Native child spacing declaration. */
+  readonly gap: string;
+  /** Native cross-axis alignment declaration. */
+  readonly alignItems: string;
+  /** Native main-axis distribution declaration. */
+  readonly justifyContent: string;
+}
+/** Resolved layout state published by {@link Stack}. */
+interface StackResolvedLayout extends StackSlotState {
+  /** Native flexbox style object applied to the host. */
+  readonly style: StackStyle;
+}
+/** Public instance state exposed by the Stack primitive. */
+interface StackExpose extends StackSlotState {
+  /** Rendered host element or component instance. */
+  readonly element: StackElement | null;
+}
+//#endregion
+//#region src/families/layout/stack/stack.vue.d.ts
+type __VLS_Props = {
+  /**
+   * Native element, custom element, or component to render.
+   *
+   * @default "div"
+   */
+  readonly as?: PrimitiveAs;
+  /**
+   * Logical flex main axis. `block` stacks vertically in the current writing mode;
+   * `inline` follows the document direction, including RTL.
+   *
+   * @default "block"
+   */
+  readonly axis?: StackAxis;
+  /**
+   * Reverse the selected logical main axis without changing DOM order.
+   *
+   * @default false
+   */
+  readonly reversed?: boolean;
+  /**
+   * Native CSS `gap` value between direct children.
+   *
+   * @default "1rem"
+   */
+  readonly gap?: StackGap;
+  /**
+   * Native CSS `align-items` value for the cross axis.
+   *
+   * @default "stretch"
+   */
+  readonly align?: StackAlign;
+  /**
+   * Native CSS `justify-content` value for the main axis.
+   *
+   * @default "start"
+   */
+  readonly justify?: StackJustify;
+};
+type __VLS_Slots = {
+  /** Renders stack children with the resolved logical layout state. */default(props: StackSlotState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  align: import("vue").ComputedRef<StackAlign>;
+  axis: import("vue").ComputedRef<StackAxis>;
+  direction: import("vue").ComputedRef<StackFlexDirection>;
+  element: Readonly<import("vue").ShallowRef<StackElement | null>>;
+  gap: import("vue").ComputedRef<string>;
+  justify: import("vue").ComputedRef<StackJustify>;
+  reversed: import("vue").ComputedRef<boolean>;
+  state: import("vue").ComputedRef<"stacked">;
+}, {}, {}, {}, 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 { StackExpose as a, StackJustify as c, StackState as d, StackStyle as f, StackElement as i, StackResolvedLayout as l, StackAlign as n, StackFlexDirection as o, StackAxis as r, StackGap as s, _default as t, StackSlotState as u };

package/dist/stack.d.mts

@@ -0,0 +1,2 @@
+import { a as StackExpose, c as StackJustify, d as StackState, f as StackStyle, i as StackElement, l as StackResolvedLayout, n as StackAlign, o as StackFlexDirection, r as StackAxis, s as StackGap, t as _default, u as StackSlotState } from "./stack-CPtBckZB.mjs";
+export { _default as Stack, type StackAlign, type StackAxis, type StackElement, type StackExpose, type StackFlexDirection, type StackGap, type StackJustify, type StackResolvedLayout, type StackSlotState, type StackState, type StackStyle };

package/dist/stack.mjs

@@ -0,0 +1,2 @@
+import { t as stack_default } from "./stack-C7DOIxo-.mjs";
+export { stack_default as Stack };

package/dist/status-light-BGWgQRRf.mjs

@@ -0,0 +1,125 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { computed, createBlock, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveDynamicComponent, useTemplateRef, withCtx } from "vue";
+//#endregion
+//#region src/families/feedback/status-light/status-light.vue
+var status_light_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "status-light",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		state: {
+			type: String,
+			required: false,
+			default: "unknown"
+		},
+		tone: {
+			type: String,
+			required: false,
+			default: "neutral"
+		},
+		size: {
+			type: String,
+			required: false,
+			default: "md"
+		},
+		role: {
+			type: String,
+			required: false,
+			default: "img"
+		},
+		atomic: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		ariaHidden: {
+			type: Boolean,
+			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
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const stateValue = computed(() => __props.state);
+		const toneValue = computed(() => __props.tone);
+		const sizeValue = computed(() => __props.size);
+		const roleValue = computed(() => __props.role);
+		const hasAccessibleName = computed(() => hasText(__props.ariaLabel) || hasText(__props.ariaLabelledby));
+		const decorative = computed(() => __props.ariaHidden ?? !hasAccessibleName.value);
+		const ariaState = computed(() => decorative.value ? "decorative" : roleValue.value);
+		const slotState = computed(() => ({
+			ariaState: ariaState.value,
+			decorative: decorative.value,
+			size: sizeValue.value,
+			state: stateValue.value,
+			tone: toneValue.value
+		}));
+		__expose({
+			ariaState,
+			decorative,
+			element,
+			size: sizeValue,
+			state: stateValue,
+			tone: toneValue
+		});
+		function hasText(value) {
+			return value != null && value.trim().length > 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				role: ariaState.value === "decorative" ? void 0 : roleValue.value,
+				"aria-hidden": ariaState.value === "decorative" ? "true" : void 0,
+				"aria-label": ariaState.value === "decorative" ? void 0 : __props.ariaLabel,
+				"aria-labelledby": ariaState.value === "decorative" ? void 0 : __props.ariaLabelledby,
+				"aria-describedby": ariaState.value === "decorative" ? void 0 : __props.ariaDescribedby,
+				"aria-live": ariaState.value === "status" ? "polite" : void 0,
+				"aria-atomic": ariaState.value === "status" ? __props.atomic ? "true" : "false" : void 0,
+				"data-vize-ui": "status-light",
+				part: "root",
+				"data-state": stateValue.value,
+				"data-tone": toneValue.value,
+				"data-size": sizeValue.value,
+				"data-aria-state": ariaState.value,
+				"data-decorative": decorative.value ? "true" : "false"
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"role",
+				"aria-hidden",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-live",
+				"aria-atomic",
+				"data-state",
+				"data-tone",
+				"data-size",
+				"data-aria-state",
+				"data-decorative"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-fc1ca38b"]]);
+//#endregion
+export { status_light_default as t };

package/dist/status-light.d.mts

@@ -0,0 +1,2 @@
+import { C as StatusLightState, S as StatusLightSlotState, _ as StatusLightElement, b as StatusLightRole, g as StatusLightAriaState, h as _default, v as StatusLightExpose, w as StatusLightTone, x as StatusLightSize, y as StatusLightProps } from "./announcer-CuBryPW9.mjs";
+export { _default as StatusLight, type StatusLightAriaState, type StatusLightElement, type StatusLightExpose, type StatusLightProps, type StatusLightRole, type StatusLightSize, type StatusLightSlotState, type StatusLightState, type StatusLightTone };

package/dist/status-light.mjs

@@ -0,0 +1,2 @@
+import { t as status_light_default } from "./status-light-BGWgQRRf.mjs";
+export { status_light_default as StatusLight };