@vizejs/ui 0.387.0 → 0.388.0

package/dist/input-Blyx59CR.mjs

@@ -0,0 +1,256 @@
+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 { useControllableState } from "./controllable-state.mjs";
+import { computed, createElementBlock, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+//#region src/families/form/input/text-input.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"name",
+	"type",
+	"value",
+	"disabled",
+	"readonly",
+	"required",
+	"placeholder",
+	"autocomplete",
+	"inputmode",
+	"enterkeyhint",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-errormessage",
+	"aria-invalid",
+	"data-state",
+	"data-empty",
+	"data-composing"
+];
+//#endregion
+//#region src/families/form/input/text-input.vue
+var text_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "text-input",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		type: {
+			type: String,
+			required: false,
+			default: "text"
+		},
+		modelValue: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: String,
+			required: false,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		autocomplete: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		inputMode: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		enterKeyHint: {
+			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
+		},
+		ariaErrormessage: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaInvalid: {
+			type: [Boolean, String],
+			required: false,
+			default: false
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"compositionStart",
+		"compositionEnd"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const controlId = useDeterministicId({
+			id: () => __props.id,
+			hint: "input"
+		});
+		const composing = ref(false);
+		let compositionInputValue;
+		const state = useControllableState({
+			value: () => __props.modelValue,
+			defaultValue: () => __props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const value = state.value;
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const dataState = computed(() => {
+			if (__props.disabled) return "disabled";
+			return __props.readOnly ? "readonly" : "editable";
+		});
+		const dataEmpty = computed(() => value.value.length === 0 ? "true" : "false");
+		const renderedValue = computed(() => composing.value ? element.value?.value ?? value.value : value.value);
+		function syncNativeValue() {
+			if (composing.value) return;
+			if (element.value === null) return;
+			if (element.value.value !== value.value) element.value.value = value.value;
+		}
+		watchEffect(syncNativeValue);
+		watch(element, (input, _previous, onCleanup) => {
+			const form = input?.form;
+			if (form === void 0 || form === null) return;
+			const onReset = () => {
+				if (!state.controlled.value) state.reset();
+				nextTick(syncNativeValue);
+			};
+			form.addEventListener("reset", onReset);
+			onCleanup(() => form.removeEventListener("reset", onReset));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		function readInputValue(event) {
+			if (!(event.currentTarget instanceof HTMLInputElement)) return void 0;
+			return event.currentTarget.value;
+		}
+		function onInput(event) {
+			const next = readInputValue(event);
+			if (next === void 0) return;
+			if (composing.value) compositionInputValue = next;
+			state.set(next);
+			emit("input", next, event);
+			nextTick(syncNativeValue);
+		}
+		function onChange(event) {
+			const next = readInputValue(event);
+			if (next === void 0) return;
+			state.set(next);
+			emit("change", next, event);
+			nextTick(syncNativeValue);
+		}
+		function onCompositionStart(event) {
+			composing.value = true;
+			compositionInputValue = void 0;
+			emit("compositionStart", value.value, event);
+		}
+		function onCompositionEnd(event) {
+			composing.value = false;
+			const next = readInputValue(event);
+			if (next !== void 0 && next !== compositionInputValue) state.set(next);
+			compositionInputValue = void 0;
+			emit("compositionEnd", next ?? value.value, event);
+			nextTick(syncNativeValue);
+		}
+		/** Move focus to the native input. */
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		/** Select the current native input text. */
+		function select() {
+			element.value?.select();
+		}
+		function setValue(next) {
+			const changed = state.set(next);
+			nextTick(syncNativeValue);
+			return changed;
+		}
+		__expose({
+			composing,
+			element,
+			focus,
+			reset: state.reset,
+			select,
+			setValue,
+			value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				id: unref(controlId),
+				ref_key: "element",
+				ref: element,
+				name: __props.name,
+				type: __props.type,
+				value: renderedValue.value,
+				disabled: __props.disabled,
+				readonly: __props.readOnly,
+				required: __props.required,
+				placeholder: __props.placeholder,
+				autocomplete: __props.autocomplete,
+				inputmode: __props.inputMode,
+				enterkeyhint: __props.enterKeyHint,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-errormessage": ariaInvalidValue.value === void 0 ? void 0 : __props.ariaErrormessage,
+				"aria-invalid": ariaInvalidValue.value,
+				"data-vize-ui": "input",
+				"data-state": dataState.value,
+				"data-empty": dataEmpty.value,
+				"data-composing": composing.value ? "true" : "false",
+				onInput,
+				onChange,
+				onCompositionstart: onCompositionStart,
+				onCompositionend: onCompositionEnd
+			}, null, 40, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-c257c3f5"]]);
+//#endregion
+export { text_input_default as t };

package/dist/input-C0fgeRnS.d.mts

@@ -0,0 +1,159 @@
+//#region src/families/form/input/input-types.d.ts
+/** Text-like native input types handled by the Input primitive. */
+type InputType = "email" | "password" | "search" | "tel" | "text" | "url";
+/** Native virtual-keyboard input modes accepted by the Input primitive. */
+type InputInputMode = "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url";
+/** Native virtual-keyboard enter-key labels accepted by the Input primitive. */
+type InputEnterKeyHint = "done" | "enter" | "go" | "next" | "previous" | "search" | "send";
+/** Values accepted by the native `aria-invalid` attribute. */
+type InputAriaInvalid = boolean | "grammar" | "spelling";
+/** Methods and state exposed by the input component instance. */
+interface InputExpose {
+  /** Whether the native input is currently inside IME composition. */
+  readonly composing: boolean;
+  /** Current controlled or uncontrolled string value. */
+  readonly value: string;
+  /** Move focus to the native input. */
+  readonly focus: (options?: FocusOptions) => void;
+  /** Select the current native input text. */
+  readonly select: () => void;
+  /** Request a value update and report whether it differs. */
+  readonly setValue: (value: string) => boolean;
+  /** Restore the current default value and report whether it changed. */
+  readonly reset: () => boolean;
+}
+//#endregion
+//#region src/families/form/input/text-input.vue.d.ts
+type __VLS_Props = {
+  /**
+   * Consumer-owned control id. `null` and `undefined` select a deterministic fallback.
+   *
+   * @default undefined
+   */
+  readonly id?: string | null;
+  /**
+   * Native form field name.
+   *
+   * @default undefined
+   */
+  readonly name?: string;
+  /**
+   * Text-like native input type.
+   *
+   * @default "text"
+   */
+  readonly type?: InputType;
+  /**
+   * Controlled string value. `undefined` selects uncontrolled behavior.
+   *
+   * @default undefined
+   */
+  readonly modelValue?: string;
+  /**
+   * Initial value for uncontrolled use and the value restored by form reset.
+   *
+   * @default ""
+   */
+  readonly defaultValue?: string;
+  /**
+   * Disable editing, focus, and native form submission.
+   *
+   * @default false
+   */
+  readonly disabled?: boolean;
+  /**
+   * Keep the input focusable while preventing user editing.
+   *
+   * @default false
+   */
+  readonly readOnly?: boolean;
+  /**
+   * Mark the input as required for native constraint validation.
+   *
+   * @default false
+   */
+  readonly required?: boolean;
+  /**
+   * Native placeholder text.
+   *
+   * @default undefined
+   */
+  readonly placeholder?: string;
+  /**
+   * Native autocomplete hint.
+   *
+   * @default undefined
+   */
+  readonly autocomplete?: string;
+  /**
+   * Native virtual-keyboard input mode.
+   *
+   * @default undefined
+   */
+  readonly inputMode?: InputInputMode;
+  /**
+   * Native virtual-keyboard enter key hint.
+   *
+   * @default undefined
+   */
+  readonly enterKeyHint?: InputEnterKeyHint;
+  /**
+   * Accessible name when no label or `aria-labelledby` supplies one.
+   *
+   * @default undefined
+   */
+  readonly ariaLabel?: string;
+  /**
+   * Space-separated ids that label the input.
+   *
+   * @default undefined
+   */
+  readonly ariaLabelledby?: string;
+  /**
+   * Space-separated ids that describe the input.
+   *
+   * @default undefined
+   */
+  readonly ariaDescribedby?: string;
+  /**
+   * Id of the validation error message used while invalid.
+   *
+   * @default undefined
+   */
+  readonly ariaErrormessage?: string;
+  /**
+   * Invalid state announced to assistive technology.
+   *
+   * @default false
+   */
+  readonly ariaInvalid?: InputAriaInvalid;
+};
+/** Move focus to the native input. */
+declare function focus(options?: FocusOptions): void;
+/** Select the current native input text. */
+declare function select(): void;
+declare function setValue(next: string): boolean;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+  composing: import("vue").Ref<boolean, boolean>;
+  element: Readonly<import("vue").ShallowRef<HTMLInputElement | null>>;
+  focus: typeof focus;
+  reset: () => boolean;
+  select: typeof select;
+  setValue: typeof setValue;
+  value: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  input: (value: string, nativeEvent: Event) => any;
+  "update:modelValue": (value: string) => any;
+  change: (value: string, nativeEvent: Event) => any;
+  compositionStart: (value: string, nativeEvent: CompositionEvent) => any;
+  compositionEnd: (value: string, nativeEvent: CompositionEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+  onInput?: (value: string, nativeEvent: Event) => any;
+  "onUpdate:modelValue"?: (value: string) => any;
+  onChange?: (value: string, nativeEvent: Event) => any;
+  onCompositionStart?: (value: string, nativeEvent: CompositionEvent) => any;
+  onCompositionEnd?: (value: string, nativeEvent: CompositionEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { InputInputMode as a, InputExpose as i, InputAriaInvalid as n, InputType as o, InputEnterKeyHint as r, _default as t };

package/dist/input.d.mts

@@ -0,0 +1,2 @@
+import { a as InputInputMode, i as InputExpose, n as InputAriaInvalid, o as InputType, r as InputEnterKeyHint, t as _default } from "./input-C0fgeRnS.mjs";
+export { _default as Input, type InputAriaInvalid, type InputEnterKeyHint, type InputExpose, type InputInputMode, type InputType };

package/dist/input.mjs

@@ -0,0 +1,2 @@
+import { t as text_input_default } from "./input-Blyx59CR.mjs";
+export { text_input_default as Input };

package/dist/{interaction-modality-DOZK0BpZ.mjs → interaction-modality-BHnjtU4S.mjs}

@@ -1,5 +1,5 @@
 import { computed, getCurrentScope, isRef, onScopeDispose, shallowReadonly, shallowRef, toValue, watch } from "vue";
-//#region src/interaction-modality-events.ts
+//#region src/families/accessibility/interaction-modality/interaction-modality-events.ts
 const modifierKeys = new Set([
 	"Alt",
 	"AltGraph",
@@ -39,7 +39,7 @@ function classifyVirtualClick(event, current) {
 	};
 }
 //#endregion
-//#region src/interaction-modality-hub.ts
+//#region src/families/accessibility/interaction-modality/interaction-modality-hub.ts
 const hubs = /* @__PURE__ */ new WeakMap();
 /** Install one capture listener set for all consumers in a document. */
 function createHub(document, initialModality) {
@@ -152,7 +152,7 @@ function publishDocumentModality(document, update) {
 	return hubs.get(document)?.publish(update) ?? false;
 }
 //#endregion
-//#region src/interaction-modality.ts
+//#region src/families/accessibility/interaction-modality/interaction-modality.ts
 const disposedDiagnostic = "VIZE_UI_INTERACTION_MODALITY_DISPOSED";
 const invalidDocumentDiagnostic = "VIZE_UI_INTERACTION_MODALITY_DOCUMENT";
 const setupDiagnostic = "VIZE_UI_INTERACTION_MODALITY_SETUP";

package/dist/{interaction-modality-jgHKjPFB.d.mts → interaction-modality-BTiZ7j98.d.mts}

@@ -1,6 +1,6 @@
 import { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
 
-//#region src/interaction-modality-types.d.ts
+//#region src/families/accessibility/interaction-modality/interaction-modality-types.d.ts
 /**
  * Input family that most recently expressed user intent.
  *
@@ -61,7 +61,7 @@ interface InteractionModalityTracker {
   readonly dispose: () => void;
 }
 //#endregion
-//#region src/interaction-modality.d.ts
+//#region src/families/accessibility/interaction-modality/interaction-modality.d.ts
 /**
  * Create an SSR-safe, document-scoped interaction-modality observer.
  *

package/dist/interaction-modality.d.mts

@@ -1,2 +1,2 @@
-import { a as InteractionModalityChange, c as InteractionModalityTracker, i as InteractionModality, n as isElementFocusVisible, o as InteractionModalityChangeReason, r as useInteractionModality, s as InteractionModalityOptions, t as createInteractionModalityTracker } from "./interaction-modality-jgHKjPFB.mjs";
+import { a as InteractionModalityChange, c as InteractionModalityTracker, i as InteractionModality, n as isElementFocusVisible, o as InteractionModalityChangeReason, r as useInteractionModality, s as InteractionModalityOptions, t as createInteractionModalityTracker } from "./interaction-modality-BTiZ7j98.mjs";
 export { type InteractionModality, type InteractionModalityChange, type InteractionModalityChangeReason, type InteractionModalityOptions, type InteractionModalityTracker, createInteractionModalityTracker, isElementFocusVisible, useInteractionModality };

package/dist/interaction-modality.mjs

@@ -1,2 +1,2 @@
-import { n as isElementFocusVisible, r as useInteractionModality, t as createInteractionModalityTracker } from "./interaction-modality-DOZK0BpZ.mjs";
+import { n as isElementFocusVisible, r as useInteractionModality, t as createInteractionModalityTracker } from "./interaction-modality-BHnjtU4S.mjs";
 export { createInteractionModalityTracker, isElementFocusVisible, useInteractionModality };

package/dist/kbd-sJdXIdIm.mjs

@@ -0,0 +1,66 @@
+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/typography/kbd/kbd.vue
+var kbd_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "kbd",
+	props: {
+		as: {
+			type: null,
+			required: false,
+			default: "kbd"
+		},
+		size: {
+			type: String,
+			required: false,
+			default: "md"
+		},
+		variant: {
+			type: String,
+			required: false,
+			default: "key"
+		},
+		tone: {
+			type: String,
+			required: false,
+			default: "neutral"
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const element = useTemplateRef("element");
+		const sizeState = computed(() => __props.size);
+		const variantState = computed(() => __props.variant);
+		const toneState = computed(() => __props.tone);
+		const slotState = computed(() => ({
+			size: sizeState.value,
+			tone: toneState.value,
+			variant: variantState.value
+		}));
+		__expose({
+			element,
+			size: sizeState,
+			tone: toneState,
+			variant: variantState
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				part: "root",
+				"data-vize-ui": "kbd",
+				"data-size": sizeState.value,
+				"data-variant": variantState.value,
+				"data-tone": toneState.value
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)]),
+				_: 3
+			}, 8, [
+				"data-size",
+				"data-variant",
+				"data-tone"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-b91077e5"]]);
+//#endregion
+export { kbd_default as t };

package/dist/kbd.d.mts

@@ -0,0 +1,2 @@
+import { Gn as KbdSize, Hn as _default, Jn as KbdVariant, Kn as KbdSlotState, Un as KbdElement, Wn as KbdExpose, qn as KbdTone } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Kbd, type KbdElement, type KbdExpose, type KbdSize, type KbdSlotState, type KbdTone, type KbdVariant };

package/dist/kbd.mjs

@@ -0,0 +1,2 @@
+import { t as kbd_default } from "./kbd-sJdXIdIm.mjs";
+export { kbd_default as Kbd };