@astryx-vue/core 0.3.0 → 0.4.0

package/dist/{Chat-Bmna9EOA.js → Chat-BdJW6IX5.js}

@@ -1,16 +1,20 @@
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
 import { t as _sfc_main$24 } from "./VisuallyHidden-C7NN3VEP.js";
-import { t as _sfc_main$25 } from "./Button-B6Hj_O_s.js";
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as _sfc_main$25 } from "./Button-ONOoHdkg.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
 import { r as useChatNewMessages, t as useChatStreamScroll } from "./useChatStreamScroll-oDfybEos.js";
-import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
-import { a as useAstryxLocale, o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-B7cvG-_v.js";
+import { n as isKeyboardModality, r as trackInteractionModality } from "./interactionModality-ACpTMhak.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-DWfi56sq.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { t as _sfc_main$26 } from "./Badge-CjDQPF5g.js";
-import { t as _sfc_main$27 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$28 } from "./Divider-BtwnL18I.js";
-import { t as _sfc_main$29 } from "./HoverCard-ycY50pRN.js";
-import { t as _sfc_main$30 } from "./Spinner-9cYUCnDy.js";
+import { t as _sfc_main$27 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$28 } from "./Divider-mOZ6vIQw.js";
+import { t as _sfc_main$29 } from "./HoverCard-BpJhT0sn.js";
+import { t as _sfc_main$30 } from "./Spinner-DdVUadii.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, reactive, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toValue, unref, useId, useModel, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import "../styles/layer.css";
 import "../styles/popover.css";
 import "../styles/chat.css";
 //#region src/Chat/useChatPasteAsToken.ts
@@ -158,6 +162,10 @@ function groupSearchItems(items) {
 		items: ungrouped
 	}] : named;
 }
+/** Same order as the rendered options: named groups first, ungrouped last. */
+function flattenSearchItems(items) {
+	return groupSearchItems(items).flatMap((group) => group.items);
+}
 //#endregion
 //#region src/Chat/ChatTriggerMenu.vue
 const _hoisted_1$18 = ["id", "aria-label"];
@@ -250,7 +258,7 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 			container: surfaceRef,
 			trigger: anchorWritable,
 			isEnabled: open,
-			enableEscape: computed(() => false),
+			dismissOnEscape: "ignore",
 			onDismiss: () => emit("dismiss")
 		});
 		const groups = computed(() => groupSearchItems(props.items));
@@ -351,13 +359,13 @@ const _sfc_main$21 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/Chat/context.ts
-const chatMessageContextKey = Symbol("astryx-chat-message");
+const chatMessageContextKey = defineLayerScopedKey("astryx-chat-message", void 0);
 function useChatMessageContext() {
-	return inject(chatMessageContextKey, void 0);
+	return readLayerScoped(chatMessageContextKey);
 }
-const chatListContextKey = Symbol("astryx-chat-list");
+const chatListContextKey = defineLayerScopedKey("astryx-chat-list", void 0);
 function useChatListContext() {
-	return inject(chatListContextKey, void 0);
+	return readLayerScoped(chatListContextKey);
 }
 const chatLayoutContextKey = Symbol("astryx-chat-layout");
 function useChatLayoutContext() {
@@ -389,16 +397,6 @@ function wasPropPassed(name) {
 	return Object.hasOwn(props, kebab);
 }
 //#endregion
-//#region src/Chat/ime.ts
-const IME_PROCESSING_KEY_CODE = 229;
-/**
-* Enter and Escape during an IME composition commit the candidate. They are not
-* composer commands. `keyCode` 229 covers engines that have not set `isComposing` yet.
-*/
-function isImeKeyEvent(event) {
-	return event.isComposing === true || event.keyCode === IME_PROCESSING_KEY_CODE;
-}
-//#endregion
 //#region src/Chat/selection.ts
 /**
 * Caret helpers for the contenteditable composer.
@@ -695,8 +693,6 @@ function useComposerHistory(options) {
 		onKeyDown
 	};
 }
-//#endregion
-//#region src/Chat/useTriggerMenu.ts
 function textBeforeCursor(editable) {
 	const selection = window.getSelection();
 	if (!selection || selection.rangeCount === 0 || !selection.getRangeAt(0).collapsed) return null;
@@ -704,22 +700,59 @@ function textBeforeCursor(editable) {
 	if (!editable.contains(range.startContainer) || range.startContainer.nodeType !== Node.TEXT_NODE) return null;
 	return (range.startContainer.textContent ?? "").slice(0, range.startOffset);
 }
-function findActiveTrigger(text, triggers) {
-	for (let index = text.length - 1; index >= 0; index -= 1) {
-		const char = text[index];
-		if (char === " " || char === "\n") return null;
-		for (const trigger of triggers) {
-			if (char !== trigger.character) continue;
-			const previous = index > 0 ? text[index - 1] : null;
-			if (previous === null || previous === " " || previous === "\n") return {
-				trigger,
-				query: text.slice(index + 1),
-				triggerStart: index
-			};
+function caretTextNode(editable) {
+	const selection = window.getSelection();
+	if (!selection || selection.rangeCount === 0) return null;
+	const node = selection.getRangeAt(0).startContainer;
+	return node.nodeType === Node.TEXT_NODE && editable.contains(node) ? node : null;
+}
+function isTriggerBoundary(char) {
+	return char === null || char === " " || char === "	" || char === "\n";
+}
+/**
+* The caret's trigger query.
+* A trigger character starts the text or follows a space, a tab, or a line break.
+* A single-token query ends at a space, a tab, or a line break.
+* A multi-word query ends at a line break, past the length bound, or where the
+* same trigger character starts again. Another trigger's character stays text.
+*/
+function findActiveTrigger(textBefore, triggers) {
+	let active = null;
+	for (let index = 0; index < textBefore.length; index += 1) {
+		const char = textBefore[index];
+		if (char === "\n") {
+			active = null;
+			continue;
+		}
+		if (active && !active.trigger.hasMultiWordQuery) {
+			if (char === " " || char === "	") active = null;
+			continue;
 		}
+		if (active && index - active.triggerStart > 64) active = null;
+		if (!isTriggerBoundary(index > 0 ? textBefore[index - 1] : null)) continue;
+		const trigger = triggers.find((item) => item.character === char);
+		if (!trigger) continue;
+		if (active && trigger.character !== active.trigger.character) continue;
+		active = {
+			trigger,
+			triggerStart: index
+		};
 	}
-	return null;
+	if (!active) return null;
+	const query = textBefore.slice(active.triggerStart + 1);
+	if (active.trigger.hasMultiWordQuery && query.length > 64) return null;
+	return {
+		trigger: active.trigger,
+		query,
+		triggerStart: active.triggerStart
+	};
+}
+/** An unmatched multi-word query hides the menu unless the caller wrote an empty message. */
+function isUnmatchedMultiWordQuery(trigger, items, isLoading) {
+	return trigger?.hasMultiWordQuery === true && trigger.emptySearchText == null && items.length === 0 && !isLoading;
 }
+//#endregion
+//#region src/Chat/useTriggerMenu.ts
 function deleteTriggerText(triggerStart) {
 	const selection = window.getSelection();
 	if (!selection || selection.rangeCount === 0) return;
@@ -739,6 +772,8 @@ function isPromise(value) {
 }
 /**
 * Opens a suggestion list when a trigger character is typed at a word boundary.
+* A trigger may opt into a multi-word query. Results apply only while that
+* query is still the one at the caret.
 */
 function useTriggerMenu(options) {
 	const listboxId = useId();
@@ -748,16 +783,18 @@ function useTriggerMenu(options) {
 		query: "",
 		items: [],
 		highlightedIndex: 0,
-		isLoading: false
+		isLoading: false,
+		isHidden: false
 	});
 	const anchor = ref(null);
 	const keyboardMove = ref(false);
 	let triggerStart = -1;
 	let timer;
 	let requestId = 0;
+	let dismissed = null;
 	const asyncSources = /* @__PURE__ */ new WeakSet();
 	function removeAnchor() {
-		anchor.value?.remove();
+		if (anchor.value?.getAttribute("data-astryx-trigger-anchor") != null) anchor.value.remove();
 		anchor.value = null;
 	}
 	function placeAnchor() {
@@ -792,40 +829,53 @@ function useTriggerMenu(options) {
 		document.body.append(span);
 		anchor.value = span;
 	}
-	function applyItems(items, captured) {
-		if (captured !== requestId) return;
+	function queryStillCurrent(captured, trigger) {
+		if (captured !== requestId) return false;
+		const editable = options.editable.value;
+		const before = editable ? textBeforeCursor(editable) : null;
+		const triggers = options.triggers.value;
+		const found = before == null || !triggers ? null : findActiveTrigger(before, triggers);
+		if (found?.trigger.character !== trigger.character || found.triggerStart !== triggerStart) {
+			reset();
+			return false;
+		}
+		return true;
+	}
+	function applyItems(items, captured, trigger) {
+		if (!queryStillCurrent(captured, trigger)) return;
 		state.items = items;
 		state.highlightedIndex = items.length > 0 ? 0 : -1;
 		state.isLoading = false;
+		state.isHidden = isUnmatchedMultiWordQuery(trigger, items, false);
 	}
-	function runSearch(trigger, query) {
+	function runSearch(trigger, query, captured) {
 		const source = trigger.searchSource;
-		source.cancel?.();
-		const captured = ++requestId;
 		state.isLoading = true;
 		const result = source.search(query);
 		if (isPromise(result)) {
 			asyncSources.add(source);
-			result.then((items) => applyItems(items, captured), () => applyItems([], captured));
+			result.then((items) => applyItems(items, captured, trigger), () => applyItems([], captured, trigger));
 			return;
 		}
-		applyItems(result, captured);
+		applyItems(result, captured, trigger);
 	}
 	function searchItems(trigger, query) {
 		if (timer !== void 0) {
 			clearTimeout(timer);
 			timer = void 0;
 		}
+		const captured = ++requestId;
+		trigger.searchSource.cancel?.();
 		const delay = options.debounceMs?.value ?? 150;
 		if (asyncSources.has(trigger.searchSource) && delay > 0) {
 			state.isLoading = true;
 			timer = setTimeout(() => {
 				timer = void 0;
-				runSearch(trigger, query);
+				runSearch(trigger, query, captured);
 			}, delay);
 			return;
 		}
-		runSearch(trigger, query);
+		runSearch(trigger, query, captured);
 	}
 	function reset() {
 		if (timer !== void 0) {
@@ -836,12 +886,14 @@ function useTriggerMenu(options) {
 		requestId += 1;
 		removeAnchor();
 		triggerStart = -1;
+		dismissed = null;
 		state.isActive = false;
 		state.activeTrigger = null;
 		state.query = "";
 		state.items = [];
 		state.highlightedIndex = 0;
 		state.isLoading = false;
+		state.isHidden = false;
 	}
 	function selectItem(item) {
 		const trigger = state.activeTrigger;
@@ -861,20 +913,28 @@ function useTriggerMenu(options) {
 		if (!triggers || triggers.length === 0 || !editable) return;
 		const before = textBeforeCursor(editable);
 		if (before === null) {
+			dismissed = null;
 			if (state.isActive) reset();
 			return;
 		}
 		const found = findActiveTrigger(before, triggers);
 		if (!found) {
+			dismissed = null;
 			if (state.isActive) reset();
 			return;
 		}
-		if (!state.isActive || state.activeTrigger !== found.trigger) {
+		const remembered = dismissed;
+		if (remembered && remembered.character === found.trigger.character && remembered.triggerStart === found.triggerStart && remembered.textNode !== null && remembered.textNode.isConnected && remembered.textNode === caretTextNode(editable)) {
+			if (found.query.startsWith(remembered.dismissedQuery)) return;
+			dismissed = null;
+		} else dismissed = null;
+		if (!state.isActive || state.activeTrigger?.character !== found.trigger.character || triggerStart !== found.triggerStart) {
 			triggerStart = found.triggerStart;
 			state.isActive = true;
 			state.activeTrigger = found.trigger;
 			state.query = found.query;
 			state.highlightedIndex = 0;
+			state.isHidden = false;
 			placeAnchor();
 			searchItems(found.trigger, found.query);
 			return;
@@ -888,8 +948,33 @@ function useTriggerMenu(options) {
 		keyboardMove.value = true;
 		state.highlightedIndex = next;
 	}
+	function highlightedItem() {
+		return flattenSearchItems(state.items)[state.highlightedIndex];
+	}
+	const isMenuVisible = computed(() => state.isActive && !state.isHidden);
 	function handleKeyDown(event) {
-		if (!state.isActive) return false;
+		if (isImeKeyEvent(event)) return false;
+		if (!isMenuVisible.value) return false;
+		if (event.key === "Escape") {
+			event.preventDefault();
+			const editable = options.editable.value;
+			const nextDismissed = state.activeTrigger ? {
+				character: state.activeTrigger.character,
+				triggerStart,
+				dismissedQuery: state.query,
+				textNode: editable ? caretTextNode(editable) : null
+			} : null;
+			reset();
+			dismissed = nextDismissed;
+			return true;
+		}
+		const hasPickableRows = !state.isLoading && state.items.length > 0;
+		if (!hasPickableRows && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			event.preventDefault();
+			return true;
+		}
+		if (!hasPickableRows) return false;
+		if (event.key === "Enter" && event.shiftKey) return false;
 		const last = state.items.length - 1;
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
@@ -902,17 +987,12 @@ function useTriggerMenu(options) {
 			return true;
 		}
 		if (event.key === "Enter" || event.key === "Tab") {
-			const item = state.items[state.highlightedIndex];
+			const item = highlightedItem();
 			if (!item) return false;
 			event.preventDefault();
 			selectItem(item);
 			return true;
 		}
-		if (event.key === "Escape") {
-			event.preventDefault();
-			reset();
-			return true;
-		}
 		return false;
 	}
 	function highlightOnHover(index) {
@@ -930,6 +1010,7 @@ function useTriggerMenu(options) {
 		anchor,
 		keyboardMove,
 		hasTriggers,
+		isMenuVisible,
 		handleInput,
 		handleKeyDown,
 		selectItem,
@@ -1089,8 +1170,9 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 			getValue: readValue
 		};
 		self.value = handle;
+		const menuOpen = computed(() => menu.isMenuVisible.value);
 		const activeDescendant = computed(() => {
-			if (!menu.state.isActive || menu.state.highlightedIndex < 0) return void 0;
+			if (!menuOpen.value || menu.state.highlightedIndex < 0) return void 0;
 			return `${menu.listboxId}-option-${menu.state.highlightedIndex}`;
 		});
 		const menuLabel = computed(() => menu.state.activeTrigger?.menuLabel ?? messages.value.chat.suggestions);
@@ -1126,6 +1208,7 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 				tokens.clearPortals();
 				editable.textContent = "";
 				isEmpty.value = true;
+				menu.reset();
 				publish("");
 				return;
 			}
@@ -1182,6 +1265,7 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 				editable.textContent = next;
 				if (focused) placeCaretAtEnd(editable);
 				isEmpty.value = next.length === 0;
+				menu.handleInput();
 			} else pendingEcho.value = void 0;
 		});
 		onMounted(() => {
@@ -1214,9 +1298,9 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 					"aria-disabled": disabled.value ? "true" : void 0,
 					role: unref(menu).hasTriggers.value ? "combobox" : "textbox",
 					"aria-multiline": unref(menu).hasTriggers.value ? void 0 : "true",
-					"aria-expanded": unref(menu).hasTriggers.value ? unref(menu).state.isActive : void 0,
-					"aria-controls": unref(menu).hasTriggers.value && unref(menu).state.isActive ? unref(menu).listboxId : void 0,
-					"aria-activedescendant": unref(menu).hasTriggers.value && unref(menu).state.isActive ? activeDescendant.value : void 0,
+					"aria-expanded": unref(menu).hasTriggers.value ? menuOpen.value : void 0,
+					"aria-controls": unref(menu).hasTriggers.value && menuOpen.value ? unref(menu).listboxId : void 0,
+					"aria-activedescendant": unref(menu).hasTriggers.value && menuOpen.value ? activeDescendant.value : void 0,
 					"aria-haspopup": unref(menu).hasTriggers.value ? "listbox" : void 0,
 					onInput,
 					onKeydown: onKeyDown,
@@ -1225,7 +1309,7 @@ const _sfc_main$20 = /*@__PURE__*/ defineComponent({
 					onDrop
 				}, null, 44, _hoisted_3$10),
 				createVNode(_sfc_main$21, {
-					open: unref(menu).state.isActive,
+					open: menuOpen.value,
 					anchor: unref(menu).anchor.value,
 					"listbox-id": unref(menu).listboxId,
 					label: menuLabel.value,
@@ -1332,26 +1416,6 @@ const _sfc_main$19 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
-//#region src/Chat/modality.ts
-let modality = "keyboard";
-let listening = false;
-/** Pointer focus must not draw the keyboard ring. `:focus-visible` is not enough: programmatic focus matches it too. */
-function trackInteractionModality() {
-	if (listening || typeof document === "undefined") return;
-	listening = true;
-	document.addEventListener("pointerdown", () => {
-		modality = "pointer";
-	}, true);
-	document.addEventListener("keydown", (event) => {
-		if (event.metaKey || event.altKey || event.ctrlKey) return;
-		modality = "keyboard";
-	}, true);
-}
-function isKeyboardModality() {
-	trackInteractionModality();
-	return modality === "keyboard";
-}
-//#endregion
 //#region src/Chat/ChatComposer.vue
 const _hoisted_1$16 = ["data-disabled", "data-density"];
 const _hoisted_2$11 = ["data-type", "role"];
@@ -2178,7 +2242,7 @@ const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 			return props.status ? labels[props.status] : "";
 		});
 		const spokenStatus = computed(() => {
-			if (locale.value === "en") return statusLabel.value.toLowerCase();
+			if (locale.value.split("-")[0] === "en") return statusLabel.value.toLowerCase();
 			return statusLabel.value;
 		});
 		const hasContent = computed(() => Boolean(props.timestamp) || Boolean(slots.timestamp) || Boolean(props.footer) || Boolean(slots.footer) || props.status != null);

package/dist/CheckboxIndicator/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../CheckboxIndicator-D37cm2Rh.js";
+import { t as _sfc_main } from "../CheckboxIndicator-fH4d-JE1.js";
 export { _sfc_main as CheckboxIndicator };

package/dist/{CheckboxIndicator-D37cm2Rh.js → CheckboxIndicator-fH4d-JE1.js}

@@ -26,6 +26,8 @@ const _hoisted_1 = [
 	"data-size",
 	"data-disabled"
 ];
+const _hoisted_2 = ["data-size"];
+const _hoisted_3 = ["data-size"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxCheckboxIndicator",
 	inheritAttrs: false,
@@ -49,18 +51,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-state": __props.state,
 				"data-size": props.size,
 				"data-disabled": __props.isDisabled || void 0
-			}), [createCommentVNode("\n      An empty slot, including a spinner hidden by v-if, falls through to the\n      marks. A real element in the slot replaces them.\n    "), renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createElementVNode("svg", {
+			}), [createCommentVNode("\n      An empty slot, including a spinner hidden by v-if, falls through to the\n      marks. A real element in the slot replaces them.\n    "), renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(), createElementBlock("svg", {
 				class: "astryx-checkbox-indicator-check",
+				"data-size": __props.size,
 				viewBox: "0 0 10 10",
 				focusable: "false"
-			}, [createElementVNode("path", {
+			}, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
 				d: "M8.5 2.5L4 7.5L1.5 5",
 				stroke: "currentColor",
 				"stroke-width": "1.5",
 				fill: "none",
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round"
-			})], -1)), _cache[1] || (_cache[1] = createElementVNode("span", { class: "astryx-checkbox-indicator-dash" }, null, -1))])], 16, _hoisted_1);
+			}, null, -1)])], 8, _hoisted_2)), createElementVNode("span", {
+				class: "astryx-checkbox-indicator-dash",
+				"data-size": __props.size
+			}, null, 8, _hoisted_3)])], 16, _hoisted_1);
 		};
 	}
 });

package/dist/CheckboxInput/index.d.ts

@@ -1,2 +1,2 @@
-import { Aa as CheckboxInputProps, Da as CheckboxInputChangeAction, Ea as _default, Ma as CheckboxValue, Oa as CheckboxInputChangeEvent, ja as CheckboxInputSlots, ka as CheckboxInputEmits } from "../index-DUaLJO7l.js";
+import { Aa as CheckboxInputEmits, Da as _default, Ma as CheckboxInputSlots, Na as CheckboxValue, Oa as CheckboxInputChangeAction, ja as CheckboxInputProps, ka as CheckboxInputChangeEvent } from "../index-CpNlPLBF.js";
 export { _default as CheckboxInput, type CheckboxInputChangeAction, type CheckboxInputChangeEvent, type CheckboxInputEmits, type CheckboxInputProps, type CheckboxInputSlots, type CheckboxValue };

package/dist/CheckboxInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../CheckboxInput-BS9J6edf.js";
+import { t as _sfc_main } from "../CheckboxInput-DJHCbwgC.js";
 export { _sfc_main as CheckboxInput };

package/dist/{CheckboxInput-BS9J6edf.js → CheckboxInput-DJHCbwgC.js}

@@ -1,10 +1,11 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { i as useAriaRequired } from "./context-Cfjh8te1.js";
-import { t as _sfc_main$3 } from "./FieldLabel-BNeXRuGH.js";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { i as useAriaRequired } from "./context-Cfml4jaK.js";
+import { t as _sfc_main$3 } from "./FieldLabel-jxIiWgLw.js";
 import { t as _sfc_main$4 } from "./FieldStatus-MjY19ERl.js";
-import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
+import { t as useIndicator } from "./useIndicator-MZmfBWid.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/button.css";
 import "../styles/checkbox-input.css";
@@ -111,7 +112,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {}
 	}, {
 		"modelValue": {
 			type: [Boolean, String],
@@ -146,6 +148,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const blocked = computed(() => props.isDisabled || props.isReadOnly || busy.value);
 		const state = computed(() => action.value.value === "indeterminate" ? "indeterminate" : action.value.value ? "checked" : "unchecked");
 		const CheckboxMark = useIndicator("checkbox");
+		const press = usePressFeedback({ hasOverlay: false });
 		const widthStyle = computed(() => ({ width: typeof props.width === "number" ? `${props.width}px` : props.width }));
 		const element = computed(() => input.value ?? null);
 		function focus(options) {
@@ -190,6 +193,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				busy.value ? loadingId : void 0
 			].filter(Boolean).join(" ") || void 0;
 		}
+		function labelledBy() {
+			const external = attrs["aria-labelledby"];
+			if (typeof external === "string" && external.trim() !== "") return external;
+			return [labelId.value, external].filter(Boolean).join(" ");
+		}
 		function syncNative() {
 			if (input.value) {
 				input.value.checked = action.value.value === true;
@@ -229,11 +237,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-status": __props.status?.type,
 				"data-blocked": blocked.value || void 0
 			}, [
-				createElementVNode("div", {
-					class: normalizeClass(["astryx-checkbox-row", { "astryx-indicator-scope": !blocked.value }]),
+				createElementVNode("div", mergeProps({ class: ["astryx-checkbox-row", { "astryx-indicator-scope": !blocked.value }] }, blocked.value ? void 0 : unref(press).pressableProps, {
 					onPointerenter: _cache[2] || (_cache[2] = (...args) => unref(tooltip).onPointerEnter && unref(tooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[3] || (_cache[3] = (...args) => unref(tooltip).onPointerLeave && unref(tooltip).onPointerLeave(...args))
-				}, [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
+				}), [createElementVNode("span", _hoisted_2, [createElementVNode("input", mergeProps(inputAttrs(), {
 					id: inputId.value,
 					ref_key: "input",
 					ref: input,
@@ -245,7 +252,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					form: showsDisabledMessage.value ? "" : inputAttrs().form,
 					required: __props.isRequired && !__props.isOptional || inputAttrs().required,
 					readonly: __props.isReadOnly || showsDisabledMessage.value,
-					"aria-labelledby": [labelId.value, unref(attrs)["aria-labelledby"]].filter(Boolean).join(" "),
+					"aria-labelledby": labelledBy(),
 					"aria-describedby": describedBy(),
 					"aria-disabled": showsDisabledMessage.value || void 0,
 					"aria-readonly": __props.isReadOnly || void 0,
@@ -278,6 +285,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"is-disabled": __props.isDisabled,
 					"is-optional": __props.isOptional,
 					"is-required": __props.isRequired,
+					"target-class": "astryx-checkbox-label",
 					"label-icon": __props.labelIcon,
 					"label-tooltip": __props.labelTooltip,
 					"optional-label": __props.optionalLabel,
@@ -300,7 +308,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"label-tooltip",
 					"optional-label",
 					"required-label"
-				])], 34),
+				])], 16),
 				createVNode(_sfc_main$4, {
 					id: statusId.value,
 					type: __props.status?.type ?? "success",

package/dist/CheckboxList/index.d.ts

@@ -1,2 +1,2 @@
-import { Ca as CheckboxListItemEmits, Sa as CheckboxListEmits, Ta as CheckboxListProps, ba as _default$1, wa as CheckboxListItemProps, xa as _default } from "../index-DUaLJO7l.js";
+import { Ca as CheckboxListEmits, Ea as CheckboxListProps, Sa as _default, Ta as CheckboxListItemProps, wa as CheckboxListItemEmits, xa as _default$1 } from "../index-CpNlPLBF.js";
 export { _default as CheckboxList, type CheckboxListEmits, _default$1 as CheckboxListItem, type CheckboxListItemEmits, type CheckboxListItemProps, type CheckboxListProps };

package/dist/CheckboxList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../CheckboxList-CX1i_jVP.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../CheckboxList-BdZIP4_J.js";
 export { _sfc_main as CheckboxList, _sfc_main$1 as CheckboxListItem };