@vizejs/ui 0.386.0 → 0.388.0

package/dist/listbox-IaqaoiRn.mjs

@@ -0,0 +1,549 @@
+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 { createContext } from "./context.mjs";
+import { t as createCollectionRegistry } from "./collection-Cncgrq4U.mjs";
+import { t as createCompositeNavigation } from "./composite-navigation-D6WKS_BY.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createCommentVNode, createElementBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, onUnmounted, openBlock, renderSlot, unref, useTemplateRef, watch } from "vue";
+//#region src/families/selection/listbox/listbox-context.ts
+const listboxContext = createContext("Listbox");
+//#endregion
+//#region src/families/selection/listbox/listbox-value.ts
+const valueDiagnostic = "VIZE_UI_LISTBOX_VALUE";
+/** Normalize consumer-owned values to the active Listbox selection model. */
+function normalizeListboxValue(value, selectionMode) {
+	if (selectionMode === "multiple") return uniqueValues(value);
+	if (isListboxMultipleValue(value)) return value[0] ?? null;
+	if (value === void 0) return null;
+	if (value === null || typeof value === "string") return value;
+	throw new TypeError(`${valueDiagnostic}: single selection values must be strings or null`);
+}
+/** Return selected values as a stable readonly array. */
+function listboxSelectedValues(value) {
+	if (isListboxMultipleValue(value)) return Object.freeze([...value]);
+	return value === null ? Object.freeze([]) : Object.freeze([value]);
+}
+/** Return whether two normalized Listbox values represent the same selection. */
+function areListboxValuesEqual(left, right) {
+	if (Array.isArray(left) || Array.isArray(right)) {
+		const leftValues = listboxSelectedValues(left);
+		const rightValues = listboxSelectedValues(right);
+		return leftValues.length === rightValues.length && leftValues.every((value, index) => value === rightValues[index]);
+	}
+	return Object.is(left, right);
+}
+/** Return a value with the option selected under the current model. */
+function selectListboxValue(current, value, selectionMode) {
+	if (selectionMode === "single") return value;
+	const values = listboxSelectedValues(current);
+	return values.includes(value) ? values : Object.freeze([...values, value]);
+}
+/** Return a value with the option toggled under the current model. */
+function toggleListboxValue(current, value, selectionMode) {
+	if (selectionMode === "single") return value;
+	const values = listboxSelectedValues(current);
+	return values.includes(value) ? Object.freeze(values.filter((candidate) => candidate !== value)) : Object.freeze([...values, value]);
+}
+/** Empty value for the current Listbox selection model. */
+function emptyListboxValue(selectionMode) {
+	return selectionMode === "multiple" ? Object.freeze([]) : null;
+}
+function uniqueValues(value) {
+	const values = isListboxMultipleValue(value) ? value : value === void 0 || value === null ? [] : [value];
+	const unique = [];
+	for (const item of values) {
+		if (typeof item !== "string") throw new TypeError(`${valueDiagnostic}: multiple selection values must be strings`);
+		if (!unique.includes(item)) unique.push(item);
+	}
+	return Object.freeze(unique);
+}
+function isListboxMultipleValue(value) {
+	return Array.isArray(value);
+}
+//#endregion
+//#region src/families/selection/listbox/listbox.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"id",
+	"aria-activedescendant",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-orientation",
+	"aria-multiselectable",
+	"aria-errormessage",
+	"aria-invalid",
+	"aria-disabled",
+	"aria-required",
+	"data-state",
+	"data-disabled",
+	"data-required",
+	"data-invalid",
+	"data-orientation",
+	"data-selection-mode",
+	"data-selection-count",
+	"data-value"
+];
+const listboxRole = "listbox";
+//#endregion
+//#region src/families/selection/listbox/listbox.vue
+var listbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "listbox",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		modelValue: {
+			type: [
+				String,
+				null,
+				Array
+			],
+			required: false,
+			default: () => void 0
+		},
+		defaultValue: {
+			type: [
+				String,
+				null,
+				Array
+			],
+			required: false,
+			default: () => void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		selectionMode: {
+			type: String,
+			required: false,
+			default: "single"
+		},
+		orientation: {
+			type: String,
+			required: false,
+			default: "vertical"
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		loop: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		typeahead: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		typeaheadTimeout: {
+			type: Number,
+			required: false,
+			default: 500
+		},
+		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", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const listboxId = useDeterministicId({
+			id: () => __props.id,
+			hint: "listbox"
+		});
+		const disabledState = computed(() => __props.disabled);
+		const requiredState = computed(() => __props.required);
+		const selectionModeState = computed(() => __props.selectionMode);
+		const orientationState = computed(() => __props.orientation);
+		const directionState = computed(() => __props.direction);
+		const valueState = useControllableState({
+			value: () => __props.modelValue === void 0 ? void 0 : normalizeListboxValue(__props.modelValue, selectionModeState.value),
+			defaultValue: () => normalizeListboxValue(__props.defaultValue, selectionModeState.value),
+			equals: areListboxValuesEqual,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const selectedValue = computed(() => normalizeListboxValue(valueState.value.value, selectionModeState.value));
+		const selectedValues = computed(() => listboxSelectedValues(selectedValue.value));
+		const selectedSet = computed(() => new Set(selectedValues.value));
+		const ariaInvalidValue = computed(() => {
+			if (__props.ariaInvalid === false) return void 0;
+			return __props.ariaInvalid === true ? "true" : __props.ariaInvalid;
+		});
+		const invalid = computed(() => ariaInvalidValue.value !== void 0);
+		const registry = createCollectionRegistry();
+		const navigation = createCompositeNavigation({
+			registry,
+			focusStrategy: "active-descendant",
+			getItemId: ({ value }) => value.id.value,
+			isDisabled: disabledState,
+			orientation: orientationState,
+			direction: directionState,
+			loop: () => __props.loop,
+			typeahead: {
+				isDisabled: () => !__props.typeahead,
+				timeout: () => __props.typeaheadTimeout
+			}
+		});
+		const activeValue = computed(() => registry.activeKey.value ?? registry.navigableItems.value[0]?.key ?? null);
+		const state = computed(() => {
+			if (disabledState.value) return "disabled";
+			return selectedValues.value.length === 0 ? "empty" : "selected";
+		});
+		const slotState = computed(() => ({
+			activeValue: activeValue.value,
+			direction: directionState.value,
+			disabled: disabledState.value,
+			invalid: invalid.value,
+			orientation: orientationState.value,
+			required: requiredState.value,
+			selectedValues: selectedValues.value,
+			selectionMode: selectionModeState.value,
+			state: state.value,
+			value: selectedValue.value
+		}));
+		const containerProps = computed(() => navigation.getContainerProps());
+		const listboxActiveDescendant = computed(() => disabledState.value ? void 0 : containerProps.value["aria-activedescendant"]);
+		const listboxTabindex = computed(() => disabledState.value ? void 0 : containerProps.value.tabindex);
+		const listboxInteractiveProps = computed(() => ({
+			role: listboxRole,
+			...listboxTabindex.value === void 0 ? {} : { tabindex: listboxTabindex.value },
+			onFocus,
+			onKeydown
+		}));
+		const selectionCount = computed(() => selectedValues.value.length);
+		const dataValue = computed(() => selectedValues.value.length === 1 ? selectedValues.value[0] : void 0);
+		watch([selectedSet, registry.navigableItems], () => {
+			if (disabledState.value || registry.activeKey.value !== null) return;
+			const selected = registry.navigableItems.value.find((item) => selectedSet.value.has(item.key));
+			if (selected !== void 0) registry.setActiveKey(selected.key);
+		}, {
+			flush: "sync",
+			immediate: true
+		});
+		function commitSelection(next, nativeEvent) {
+			const normalized = normalizeListboxValue(next, selectionModeState.value);
+			let previous = emptyListboxValue(selectionModeState.value);
+			const changed = valueState.set((current) => {
+				previous = current;
+				return normalized;
+			});
+			if (changed && nativeEvent !== null) emit("change", normalized, previous, nativeEvent);
+			return changed;
+		}
+		function setValue(next) {
+			return commitSelection(next, null);
+		}
+		function selectValue(next, nativeEvent = null) {
+			return commitSelection(selectListboxValue(selectedValue.value, next, selectionModeState.value), nativeEvent);
+		}
+		function toggleValue(next, nativeEvent = null) {
+			return commitSelection(toggleListboxValue(selectedValue.value, next, selectionModeState.value), nativeEvent);
+		}
+		function clear() {
+			return commitSelection(emptyListboxValue(selectionModeState.value), null);
+		}
+		function setActiveValue(next) {
+			if (disabledState.value) return false;
+			if (next !== null && !registry.navigableItems.value.some((item) => item.key === next)) return false;
+			return registry.setActiveKey(next);
+		}
+		function focus(options) {
+			element.value?.focus(options);
+		}
+		function navigate(command, nativeEvent = null) {
+			return navigation.navigate(command, nativeEvent);
+		}
+		function commitActiveSelection(next, nativeEvent) {
+			if (next === null) return false;
+			if (selectionModeState.value === "multiple") toggleValue(next, nativeEvent);
+			else selectValue(next, nativeEvent);
+			return true;
+		}
+		function onFocus(event) {
+			containerProps.value.onFocus(event);
+		}
+		function onKeydown(event) {
+			if (!event.defaultPrevented && !disabledState.value && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+				if (commitActiveSelection(activeValue.value, event)) event.preventDefault();
+				return;
+			}
+			containerProps.value.onKeydown(event);
+		}
+		const context = listboxContext.provide({
+			activeValue,
+			direction: directionState,
+			disabled: disabledState,
+			focus,
+			getItemProps: (value) => navigation.getItemProps(value),
+			id: listboxId,
+			invalid,
+			orientation: orientationState,
+			registerItem: ({ value, id, element, textValue, disabled, order }) => registry.register({
+				key: value,
+				value: {
+					id,
+					value
+				},
+				element,
+				textValue,
+				disabled,
+				order
+			}),
+			required: requiredState,
+			selectedValues: selectedSet,
+			selectionMode: selectionModeState,
+			selectValue,
+			setActiveValue,
+			state,
+			toggleValue,
+			value: selectedValue
+		});
+		__expose({
+			activeValue,
+			clear,
+			direction: directionState,
+			disabled: disabledState,
+			element,
+			focus,
+			id: listboxId,
+			invalid,
+			navigate,
+			orientation: orientationState,
+			required: requiredState,
+			reset: valueState.reset,
+			selectValue,
+			selectedValues,
+			selectionMode: selectionModeState,
+			setActiveValue,
+			setValue,
+			state,
+			toggleValue,
+			value: selectedValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(listboxInteractiveProps.value, {
+				id: unref(context).id.value,
+				ref_key: "element",
+				ref: element,
+				"aria-activedescendant": listboxActiveDescendant.value,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"aria-orientation": orientationState.value,
+				"aria-multiselectable": selectionModeState.value === "multiple" ? "true" : void 0,
+				"aria-errormessage": ariaInvalidValue.value === void 0 ? void 0 : __props.ariaErrormessage,
+				"aria-invalid": ariaInvalidValue.value,
+				"aria-disabled": disabledState.value ? "true" : void 0,
+				"aria-required": requiredState.value ? "true" : void 0,
+				"data-vize-ui": "listbox",
+				part: "root",
+				"data-state": state.value,
+				"data-disabled": disabledState.value ? "true" : void 0,
+				"data-required": requiredState.value ? "true" : void 0,
+				"data-invalid": invalid.value ? "true" : void 0,
+				"data-orientation": orientationState.value,
+				"data-selection-mode": selectionModeState.value,
+				"data-selection-count": selectionCount.value,
+				"data-value": dataValue.value
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true), unref(registry).items.value.length === 0 ? renderSlot(_ctx.$slots, "empty", normalizeProps(mergeProps({ key: 0 }, slotState.value)), void 0, true) : createCommentVNode("v-if", true)], 16, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-6e020058"]]);
+//#endregion
+//#region src/families/selection/listbox/listbox-item.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"aria-selected",
+	"aria-disabled",
+	"aria-label",
+	"aria-labelledby",
+	"aria-describedby",
+	"data-state",
+	"data-value",
+	"data-selected",
+	"data-active",
+	"data-disabled",
+	"data-selection-mode"
+];
+const optionRole = "option";
+//#endregion
+//#region src/families/selection/listbox/listbox-item.vue
+var listbox_item_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "listbox-item",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		textValue: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		order: {
+			type: Number,
+			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 context = listboxContext.use();
+		const element = useTemplateRef("element");
+		const optionId = useDeterministicId({
+			id: () => __props.id,
+			hint: "listbox-option"
+		});
+		const itemDisabled = computed(() => context.disabled.value || __props.disabled);
+		const selected = computed(() => context.selectedValues.value.has(__props.value));
+		const active = computed(() => context.activeValue.value === __props.value && !itemDisabled.value);
+		const itemState = computed(() => {
+			if (itemDisabled.value) return "disabled";
+			return selected.value ? "selected" : "unselected";
+		});
+		const itemSelectionMode = computed(() => context.selectionMode.value);
+		const slotState = computed(() => ({
+			active: active.value,
+			disabled: itemDisabled.value,
+			selected: selected.value,
+			selectionMode: itemSelectionMode.value,
+			state: itemState.value,
+			value: __props.value
+		}));
+		const optionDomId = computed(() => itemProps.value.id ?? optionId.value);
+		const itemInteractiveProps = computed(() => ({
+			role: optionRole,
+			onPointerdown,
+			onClick
+		}));
+		let registration = null;
+		function register() {
+			registration?.unregister();
+			registration = context.registerItem({
+				disabled: itemDisabled,
+				element,
+				id: optionId,
+				order: () => __props.order,
+				textValue: () => __props.textValue,
+				value: __props.value
+			});
+		}
+		watch(() => __props.value, register, {
+			flush: "sync",
+			immediate: true
+		});
+		onUnmounted(() => {
+			registration?.unregister();
+			registration = null;
+		});
+		const itemProps = computed(() => context.getItemProps(__props.value));
+		function onPointerdown(event) {
+			if (itemDisabled.value) return;
+			itemProps.value.onPointerdown(event);
+			context.focus({ preventScroll: true });
+		}
+		function onClick(event) {
+			if (itemDisabled.value) return;
+			if (context.selectionMode.value === "multiple") context.toggleValue(__props.value, event);
+			else context.selectValue(__props.value, event);
+		}
+		function focus(options) {
+			if (context.setActiveValue(__props.value)) context.focus(options);
+		}
+		function select() {
+			return context.selectValue(__props.value, null);
+		}
+		__expose({
+			active,
+			disabled: itemDisabled,
+			element,
+			focus,
+			select,
+			selected,
+			selectionMode: context.selectionMode,
+			state: itemState,
+			value: __props.value
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(itemInteractiveProps.value, {
+				id: optionDomId.value,
+				ref_key: "element",
+				ref: element,
+				"aria-selected": selected.value ? "true" : "false",
+				"aria-disabled": itemDisabled.value ? "true" : void 0,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-describedby": __props.ariaDescribedby,
+				"data-vize-ui": "listbox-item",
+				part: "item",
+				"data-state": itemState.value,
+				"data-value": __props.value,
+				"data-selected": selected.value ? "true" : "false",
+				"data-active": active.value ? "true" : void 0,
+				"data-disabled": itemDisabled.value ? "true" : void 0,
+				"data-selection-mode": itemSelectionMode.value
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true), renderSlot(_ctx.$slots, "indicator", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-de6eb1a2"]]);
+//#endregion
+export { listboxSelectedValues as a, toggleListboxValue as c, emptyListboxValue as i, listbox_default as n, normalizeListboxValue as o, areListboxValuesEqual as r, selectListboxValue as s, listbox_item_default as t };

package/dist/listbox.d.mts

@@ -0,0 +1,2 @@
+import { An as ListboxSelectionMode, Cn as ListboxExpose, Dn as ListboxMultipleValue, En as ListboxItemState, Mn as ListboxSlotState, Nn as ListboxState, On as ListboxOrientation, Pn as ListboxValue, Sn as ListboxDirection, Tn as ListboxItemSlotState, _n as selectListboxValue, bn as _default, gn as normalizeListboxValue, hn as listboxSelectedValues, jn as ListboxSingleValue, kn as ListboxProps, mn as emptyListboxValue, pn as areListboxValuesEqual, vn as toggleListboxValue, wn as ListboxItemExpose, xn as ListboxAriaInvalid, yn as _default$1 } from "./announcer-DGr2Iz0i.mjs";
+export { _default as Listbox, type ListboxAriaInvalid, type ListboxDirection, type ListboxExpose, _default$1 as ListboxItem, type ListboxItemExpose, type ListboxItemSlotState, type ListboxItemState, type ListboxMultipleValue, type ListboxOrientation, type ListboxProps, type ListboxSelectionMode, type ListboxSingleValue, type ListboxSlotState, type ListboxState, type ListboxValue, areListboxValuesEqual, emptyListboxValue, listboxSelectedValues, normalizeListboxValue, selectListboxValue, toggleListboxValue };

package/dist/listbox.mjs

@@ -0,0 +1,2 @@
+import { a as listboxSelectedValues, c as toggleListboxValue, i as emptyListboxValue, n as listbox_default, o as normalizeListboxValue, r as areListboxValuesEqual, s as selectListboxValue, t as listbox_item_default } from "./listbox-IaqaoiRn.mjs";
+export { listbox_default as Listbox, listbox_item_default as ListboxItem, areListboxValuesEqual, emptyListboxValue, listboxSelectedValues, normalizeListboxValue, selectListboxValue, toggleListboxValue };

package/dist/live-region-DYSpwCTk.mjs

@@ -0,0 +1,48 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { n as useLiveRegion } from "./live-region-runtime-DVUch8Lu.mjs";
+import { createElementBlock, createTextVNode, defineComponent, openBlock, renderSlot, toDisplayString, toRef, unref, useTemplateRef } from "vue";
+//#region src/families/accessibility/live-region/live-region.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"aria-live",
+	"aria-atomic",
+	"role"
+];
+//#endregion
+//#region src/families/accessibility/live-region/live-region.vue
+var live_region_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "live-region",
+	props: {
+		politeness: {
+			type: String,
+			required: false,
+			default: "polite"
+		},
+		atomic: {
+			type: Boolean,
+			required: false,
+			default: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const region = useLiveRegion({ politeness: toRef(() => __props.politeness) });
+		const element = useTemplateRef("element");
+		__expose({
+			element,
+			announce: region.announce,
+			clear: region.clear,
+			message: region.message
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "live-region",
+				"aria-live": unref(region).politeness.value,
+				"aria-atomic": __props.atomic ? "true" : "false",
+				role: unref(region).politeness.value === "assertive" ? "alert" : "status"
+			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true), createTextVNode(" " + toDisplayString(unref(region).message.value), 1)], 8, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-6a51a8e0"]]);
+//#endregion
+export { live_region_default as t };

package/dist/live-region-G1iobPK5.d.mts

@@ -0,0 +1,67 @@
+import { MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/families/accessibility/live-region/live-region-types.d.ts
+/** ARIA live politeness used by the announcer. */
+type LiveRegionPoliteness = "assertive" | "polite";
+/** Options shared by {@link createLiveRegion} and {@link useLiveRegion}. */
+interface LiveRegionOptions {
+  /**
+   * Default announcement urgency.
+   *
+   * @default "polite"
+   */
+  readonly politeness?: MaybeRefOrGetter<LiveRegionPoliteness | undefined>;
+}
+/** Stateful live-region announcer with an explicit queue. */
+interface LiveRegionController {
+  /** Text currently exposed to assistive technology. */
+  readonly message: Readonly<ShallowRef<string>>;
+  /** Active politeness for the rendered live region. */
+  readonly politeness: Readonly<ShallowRef<LiveRegionPoliteness>>;
+  /** Queue an announcement. Identical text is re-announced by clearing first. */
+  readonly announce: (text: string, politeness?: LiveRegionPoliteness) => void;
+  /** Clear the current announcement. */
+  readonly clear: () => void;
+  /** Release pending announcements. */
+  readonly dispose: () => void;
+}
+//#endregion
+//#region src/families/accessibility/live-region/live-region-runtime.d.ts
+/** Create an SSR-safe announcement queue for one live region. */
+declare function createLiveRegion(options?: LiveRegionOptions): LiveRegionController;
+/** Create a live-region announcer disposed with the current Vue effect scope. */
+declare function useLiveRegion(options?: LiveRegionOptions): LiveRegionController;
+//#endregion
+//#region src/families/accessibility/live-region/live-region.vue.d.ts
+type __VLS_Props = {
+  /**
+   * Default announcement urgency.
+   *
+   * @default "polite"
+   */
+  readonly politeness?: LiveRegionPoliteness;
+  /**
+   * Whether assistive technology should present the whole region on each update.
+   *
+   * @default true
+   */
+  readonly atomic?: boolean;
+};
+type __VLS_Slots = {
+  /** Optional visible contents rendered alongside the announcer text. */default(): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+  element: Readonly<import("vue").ShallowRef<HTMLDivElement | null>>;
+  announce: (text: string, politeness?: LiveRegionPoliteness) => void;
+  clear: () => void;
+  message: Readonly<import("vue").ShallowRef<string>>;
+}, {}, {}, {}, 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 { LiveRegionOptions as a, LiveRegionController as i, createLiveRegion as n, LiveRegionPoliteness as o, useLiveRegion as r, _default as t };