@astryx-vue/core 0.3.0 → 0.4.0

package/dist/{CommandPalette-YHsUNg3V.js → CommandPalette-C_MClfAg.js}

@@ -1,28 +1,30 @@
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
 import { n as useAsyncSource } from "./useAsyncSource-Gk0VtE7_.js";
-import { t as _sfc_main$7 } from "./Kbd-BB-Dw6zE.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$8 } from "./Dialog-FGHfDu5M.js";
+import { t as _sfc_main$7 } from "./Kbd-CV3LO2Ge.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$8 } from "./Dialog-fhyxB00e.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$9 } from "./Spinner-9cYUCnDy.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, onMounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { t as _sfc_main$9 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$10 } from "./Spinner-DdVUadii.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/command-palette.css";
 //#region src/CommandPalette/CommandPaletteEmpty.vue
-const _hoisted_1$6 = { class: "astryx-command-palette-empty" };
+const _hoisted_1$5 = { class: "astryx-command-palette-empty" };
 const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteEmpty",
 	__name: "CommandPaletteEmpty",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteFooter.vue
-const _hoisted_1$5 = { class: "astryx-command-palette-footer" };
+const _hoisted_1$4 = { class: "astryx-command-palette-footer" };
 const _hoisted_2$3 = { class: "astryx-command-palette-hint" };
-const _hoisted_3$2 = { class: "astryx-command-palette-hint" };
+const _hoisted_3$1 = { class: "astryx-command-palette-hint" };
 const _hoisted_4 = { class: "astryx-command-palette-hint" };
 const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteFooter",
@@ -30,13 +32,13 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const messages = useAstryxMessages();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default", {}, () => [
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default", {}, () => [
 				createElementVNode("span", _hoisted_2$3, [
 					createVNode(_sfc_main$7, { keys: "up" }),
 					createVNode(_sfc_main$7, { keys: "down" }),
 					createTextVNode(" " + toDisplayString(unref(messages).commandPalette.navigate), 1)
 				]),
-				createElementVNode("span", _hoisted_3$2, [createVNode(_sfc_main$7, { keys: "enter" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.select), 1)]),
+				createElementVNode("span", _hoisted_3$1, [createVNode(_sfc_main$7, { keys: "enter" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.select), 1)]),
 				createElementVNode("span", _hoisted_4, [createVNode(_sfc_main$7, { keys: "escape" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.close), 1)])
 			])]);
 		};
@@ -44,7 +46,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteGroup.vue
-const _hoisted_1$4 = ["aria-label"];
+const _hoisted_1$3 = ["aria-label"];
 const _hoisted_2$2 = {
 	class: "astryx-command-palette-group-heading",
 	"aria-hidden": "true"
@@ -59,7 +61,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				class: "astryx-command-palette-group",
 				role: "group",
 				"aria-label": __props.heading
-			}, [createElementVNode("div", _hoisted_2$2, toDisplayString(__props.heading), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$4);
+			}, [createElementVNode("div", _hoisted_2$2, toDisplayString(__props.heading), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$3);
 		};
 	}
 });
@@ -68,18 +70,20 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 const commandPaletteKey = Symbol("commandPalette");
 //#endregion
 //#region src/CommandPalette/CommandPaletteInput.vue
-const _hoisted_1$3 = { class: "astryx-command-palette-input" };
-const _hoisted_2$1 = [
+const _hoisted_1$2 = [
 	"aria-activedescendant",
+	"aria-autocomplete",
 	"aria-controls",
 	"aria-expanded",
 	"aria-label",
 	"placeholder",
+	"role",
 	"value"
 ];
-const _hoisted_3$1 = { class: "astryx-command-palette-end" };
+const _hoisted_2$1 = { class: "astryx-command-palette-end" };
 const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteInput",
+	inheritAttrs: false,
 	__name: "CommandPaletteInput",
 	props: {
 		placeholder: {},
@@ -96,18 +100,78 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const palette = inject(commandPaletteKey, null);
 		const dialog = inject(DIALOG_CONTEXT_KEY, null);
+		const attrs = useAttrs();
 		const messages = useAstryxMessages();
 		const inputRef = useTemplateRef("input");
+		function hasAttr(name) {
+			return Object.hasOwn(attrs, name);
+		}
+		function attrText(name) {
+			const value = attrs[name];
+			if (typeof value === "string") return value;
+			if (typeof value === "number" || typeof value === "boolean") return String(value);
+		}
 		const placeholder = computed(() => props.placeholder ?? messages.value.commandPalette.placeholder);
-		const label = computed(() => props.label ?? messages.value.commandPalette.inputLabel);
+		const label = computed(() => {
+			const given = attrs["aria-label"];
+			return typeof given === "string" && given !== "" ? given : props.label ?? messages.value.commandPalette.inputLabel;
+		});
 		const value = computed(() => props.value ?? palette?.search.value ?? "");
+		const hasListbox = computed(() => (palette?.items.value.length ?? 0) > 0);
+		const callerOwnsPopup = computed(() => {
+			if (palette != null) return false;
+			const popup = attrs["aria-haspopup"];
+			const declaresPopup = hasAttr("aria-haspopup") && popup !== false && popup !== "false";
+			return attrs.role === "combobox" || hasAttr("aria-expanded") || hasAttr("aria-autocomplete") || hasAttr("aria-controls") || hasAttr("aria-owns") || hasAttr("aria-activedescendant") || declaresPopup;
+		});
+		const role = computed(() => {
+			if (palette != null) return "combobox";
+			if (hasAttr("role")) return attrText("role");
+			return callerOwnsPopup.value ? "combobox" : "searchbox";
+		});
+		const expanded = computed(() => {
+			const given = attrText("aria-expanded");
+			const normalized = given === "true" || given === "false" ? given : void 0;
+			if (palette != null) return hasListbox.value ? "true" : void 0;
+			if (hasAttr("aria-expanded")) return normalized;
+			return callerOwnsPopup.value ? "true" : void 0;
+		});
+		const autocomplete = computed(() => {
+			if (palette != null) return "list";
+			const given = attrs["aria-autocomplete"];
+			if (given === "none" || given === "both" || given === "inline" || given === "list") return given;
+			return callerOwnsPopup.value ? "list" : void 0;
+		});
+		const controls = computed(() => {
+			if (palette != null) return hasListbox.value ? palette.listId : void 0;
+			return attrText("aria-controls");
+		});
 		const activeDescendant = computed(() => {
-			const index = palette?.highlightedIndex.value ?? -1;
-			if (palette == null || index < 0) return void 0;
+			if (palette == null) return attrText("aria-activedescendant");
+			const index = palette.highlightedIndex.value;
+			if (!hasListbox.value || index < 0) return void 0;
 			return `${palette.listId}-item-${index}`;
 		});
+		const inputAttrs = computed(() => {
+			const reserved = /* @__PURE__ */ new Set([
+				"class",
+				"style",
+				"role",
+				"aria-label",
+				"aria-expanded",
+				"aria-autocomplete",
+				"aria-controls",
+				"aria-activedescendant",
+				"onKeydown",
+				"onKeyDown",
+				"onInput"
+			]);
+			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !reserved.has(key)));
+		});
 		const shouldFocus = computed(() => props.hasAutoFocus && dialog?.isInline.value !== true);
 		function onInput(event) {
+			const caller = attrs.onInput;
+			if (typeof caller === "function") caller(event);
 			const next = event.target.value;
 			if (props.value == null) {
 				palette?.setSearch(next);
@@ -116,42 +180,52 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 			emit("valueChange", next);
 			emit("update:value", next);
 		}
+		function onKeyDown(event) {
+			const caller = attrs.onKeydown ?? attrs.onKeyDown;
+			if (typeof caller === "function") caller(event);
+			if (event.defaultPrevented || event.isComposing || event.key === "Process") return;
+			palette?.onKeyDown(event);
+		}
 		onMounted(() => {
 			if (shouldFocus.value) requestAnimationFrame(() => inputRef.value?.focus());
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [
-				_cache[1] || (_cache[1] = createElementVNode("span", {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-command-palette-input", unref(attrs).class]),
+				style: normalizeStyle(unref(attrs).style)
+			}, [
+				createVNode(_sfc_main$9, {
 					class: "astryx-command-palette-search",
-					"aria-hidden": "true"
-				}, null, -1)),
-				createElementVNode("input", {
+					icon: "search",
+					size: "sm"
+				}),
+				createElementVNode("input", mergeProps(inputAttrs.value, {
 					ref: "input",
 					"aria-activedescendant": activeDescendant.value,
-					"aria-autocomplete": "list",
-					"aria-controls": unref(palette) && unref(palette).items.value.length > 0 ? unref(palette).listId : void 0,
-					"aria-expanded": unref(palette) ? true : void 0,
+					"aria-autocomplete": autocomplete.value,
+					"aria-controls": controls.value,
+					"aria-expanded": expanded.value,
 					"aria-label": label.value,
 					class: "astryx-command-palette-field",
 					placeholder: placeholder.value,
-					role: "combobox",
+					role: role.value,
 					type: "text",
 					value: value.value,
 					onInput,
-					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(palette)?.onKeyDown && unref(palette)?.onKeyDown(...args))
-				}, null, 40, _hoisted_2$1),
-				createElementVNode("span", _hoisted_3$1, [unref(palette)?.isBusy.value ? (openBlock(), createBlock(_sfc_main$9, {
+					onKeydown: onKeyDown
+				}), null, 16, _hoisted_1$2),
+				createElementVNode("span", _hoisted_2$1, [unref(palette)?.isBusy.value ? (openBlock(), createBlock(_sfc_main$10, {
 					key: 0,
 					class: "astryx-command-palette-spinner",
 					size: "sm"
 				})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "end", {}, () => [renderSlot(_ctx.$slots, "endContent")])])
-			]);
+			], 6);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteItem.vue
-const _hoisted_1$2 = [
+const _hoisted_1$1 = [
 	"id",
 	"aria-disabled",
 	"aria-selected",
@@ -177,6 +251,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const palette = inject(commandPaletteKey, null);
+		const press = usePressFeedback({ hasOverlay: false });
 		const instance = getCurrentInstance();
 		/**
 		* Vue turns an omitted boolean prop into `false`, so a `??` fallback cannot
@@ -208,24 +283,23 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			if (item != null) palette.selectItem(item);
 		}
 		function highlight() {
-			if (!props.isDisabled && index.value >= 0) palette?.setHighlightedIndex(index.value);
+			if (!props.isDisabled && index.value >= 0) palette?.setHighlightedIndex(index.value, "pointer");
 		}
 		function scrollIntoView(element) {
-			if (!(element instanceof HTMLElement)) return;
-			if (palette?.isInline.value && palette.highlightedIndex.value === index.value && index.value === 0) return;
 			element.scrollIntoView({ block: "nearest" });
 		}
 		watch(isHighlighted, (highlighted, _previous, onCleanup) => {
-			if (!highlighted) return;
-			const id = `${palette?.listId}-item-${index.value}`;
-			const element = document.getElementById(id);
-			if (element == null) return;
-			const frame = requestAnimationFrame(() => scrollIntoView(element));
+			if (!highlighted || typeof document === "undefined") return;
+			if (palette?.highlightCause.value === "pointer") return;
+			if (palette?.highlightCause.value === "sync" && palette.isInline.value) return;
+			const id = palette && index.value >= 0 ? `${palette.listId}-item-${index.value}` : void 0;
+			const node = (id == null ? void 0 : document.getElementById(id)) ?? (instance?.vnode.el instanceof HTMLElement ? instance.vnode.el : null);
+			if (node == null) return;
+			const frame = requestAnimationFrame(() => scrollIntoView(node));
 			onCleanup(() => cancelAnimationFrame(frame));
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: index.value >= 0 && unref(palette) ? `${unref(palette).listId}-item-${index.value}` : void 0,
+			return openBlock(), createElementBlock("div", mergeProps({ id: index.value >= 0 && unref(palette) ? `${unref(palette).listId}-item-${index.value}` : void 0 }, unref(press).pressableProps, {
 				class: "astryx-command-palette-item",
 				role: "option",
 				tabindex: "-1",
@@ -239,17 +313,12 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				onFocus: highlight,
 				onKeydown: onKeyDown,
 				onMouseenter: highlight
-			}, [renderSlot(_ctx.$slots, "default")], 40, _hoisted_1$2);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$1);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteList.vue
-const _hoisted_1$1 = [
-	"id",
-	"role",
-	"aria-label"
-];
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteList",
 	__name: "CommandPaletteList",
@@ -259,18 +328,21 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const palette = inject(commandPaletteKey, null);
 		const messages = useAstryxMessages();
 		const label = computed(() => props.label ?? messages.value.commandPalette.listLabel);
-		/** 没有可选项时它只是个空容器，不再当作 listbox 暴露给读屏。 */
+		/** 没有可选项时它只是个空容器，不再当作 listbox 暴露给读屏。单独使用时始终是 listbox。 */
 		const hasOptions = computed(() => palette == null || palette.items.value.length > 0);
+		const bindings = computed(() => {
+			const result = {};
+			if (palette != null) result.id = palette.listId;
+			if (hasOptions.value) {
+				result.role = "listbox";
+				result["aria-label"] = label.value;
+			}
+			return result;
+		});
 		const listEl = useTemplateRef("list");
 		useScrollbars(listEl);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: unref(palette)?.listId,
-				ref: "list",
-				class: "astryx-command-palette-list",
-				role: hasOptions.value ? "listbox" : void 0,
-				"aria-label": hasOptions.value ? label.value : void 0
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
+			return openBlock(), createElementBlock("div", mergeProps({ ref: "list" }, bindings.value, { class: "astryx-command-palette-list" }), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });
@@ -330,6 +402,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const announce = useAnnounce();
 		const search = ref("");
 		const highlightedIndex = ref(-1);
+		const highlightCause = ref("sync");
 		const listId = `astryx-command-palette-${useId()}`;
 		const enabled = computed(() => props.isOpen);
 		const source = computed(() => props.searchSource);
@@ -379,7 +452,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function setSearch(next) {
 			search.value = next;
 		}
-		function setHighlightedIndex(index) {
+		function setHighlightedIndex(index, cause = "keyboard") {
+			highlightCause.value = cause;
 			highlightedIndex.value = index;
 		}
 		function close() {
@@ -398,8 +472,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function onKeyDown(event) {
 			if (event.isComposing || event.key === "Process") return;
 			if (event.key === "Escape") {
-				event.preventDefault();
-				close();
+				if (props.isInline) {
+					event.preventDefault();
+					close();
+				}
 				return;
 			}
 			if (event.key === " ") return;
@@ -409,16 +485,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (item != null) selectItem(item);
 				return;
 			}
-			const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : event.key === "Home" || event.key === "PageUp" ? "first" : event.key === "End" || event.key === "PageDown" ? "last" : null;
+			if (event.key === "Home" || event.key === "End") return;
+			const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : event.key === "PageUp" ? "first" : event.key === "PageDown" ? "last" : null;
 			if (direction == null) return;
 			event.preventDefault();
-			highlightedIndex.value = moveHighlight(items.value, highlightedIndex.value, direction);
+			setHighlightedIndex(moveHighlight(items.value, highlightedIndex.value, direction), "keyboard");
 		}
 		function onOpenChange(open) {
 			if (!open) close();
 			else emit("openChange", true);
 		}
 		watch(items, (list) => {
+			highlightCause.value = "sync";
 			if (search.value.trim() === "" && value.value) {
 				highlightedIndex.value = list.findIndex((item) => item.id === value.value && !item.disabled);
 				return;
@@ -442,11 +520,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!open) {
 				results.cancel();
 				search.value = "";
+				highlightCause.value = "sync";
 				highlightedIndex.value = -1;
 			}
 		});
 		provide(commandPaletteKey, {
 			highlightedIndex,
+			highlightCause,
 			isBusy,
 			isInline,
 			items,

package/dist/ComplexSelector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ComplexSelectorProps, c as ComplexSelectorState, i as ComplexSelectorHandleRef, l as ComplexSelectorTriggerProps, n as ComplexSelectorEmits, o as ComplexSelectorSlotProps, r as ComplexSelectorHandle, s as ComplexSelectorSlots, t as _default, u as ComplexSelectorVariant } from "../index-Cde5JvtX.js";
+import { a as ComplexSelectorProps, c as ComplexSelectorState, i as ComplexSelectorHandleRef, l as ComplexSelectorTriggerProps, n as ComplexSelectorEmits, o as ComplexSelectorSlotProps, r as ComplexSelectorHandle, s as ComplexSelectorSlots, t as _default, u as ComplexSelectorVariant } from "../index-B-nESNam.js";
 export { _default as ComplexSelector, _default as default, type ComplexSelectorEmits, type ComplexSelectorHandle, type ComplexSelectorHandleRef, type ComplexSelectorProps, type ComplexSelectorSlotProps, type ComplexSelectorSlots, type ComplexSelectorState, type ComplexSelectorTriggerProps, type ComplexSelectorVariant };

package/dist/ComplexSelector/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as ComplexSelector_default } from "../ComplexSelector-DWLdKPGI.js";
+import { n as _sfc_main, t as ComplexSelector_default } from "../ComplexSelector-BeVQaqRf.js";
 export { _sfc_main as ComplexSelector, ComplexSelector_default as default };

package/dist/{ComplexSelector-DWLdKPGI.js → ComplexSelector-BeVQaqRf.js}

@@ -1,10 +1,13 @@
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { n as useDevWarning } from "./useDevWarning-DznOpOHT.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { t as _sfc_main$1 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$2 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$3 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$4 } from "./Popover-DJf8POzL.js";
-import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, normalizeProps, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
+import { t as _sfc_main$1 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$2 } from "./Spinner-DdVUadii.js";
+import { t as _sfc_main$3 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { n as fieldStatusPlacement, t as normalizeTriggerVariant } from "./triggerVariant-BsL8jMHs.js";
+import { t as _sfc_main$4 } from "./Popover-78dFjTb9.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/complex-selector.css";
 //#region src/ComplexSelector/ComplexSelector.vue
 const _hoisted_1 = [
@@ -21,6 +24,7 @@ const _hoisted_1 = [
 const _hoisted_2 = { class: "astryx-complex-selector-value" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxComplexSelector",
+	inheritAttrs: false,
 	__name: "ComplexSelector",
 	props: /*@__PURE__*/ mergeModels({
 		label: {},
@@ -59,7 +63,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		variant: { default: "input" },
 		renderTrigger: {},
 		handleRef: {},
-		changeAction: {}
+		changeAction: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	}, {
 		"modelValue": { required: true },
 		"modelModifiers": {}
@@ -74,6 +106,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "ComplexSelector",
+			props,
+			attrs: new Proxy(attrs, { get(target, key, receiver) {
+				if (key === "class" || key === "style") return void 0;
+				return Reflect.get(target, key, receiver);
+			} }),
+			reservedAttrs: [
+				"id",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup",
+				"aria-busy",
+				"aria-invalid",
+				"aria-required",
+				"disabled"
+			]
+		});
+		const triggerVariant = computed(() => normalizeTriggerVariant(props.variant));
+		const effectiveStatusVariant = computed(() => fieldStatusPlacement(props.variant, props.statusVariant));
 		const model = useModel(__props, "modelValue");
 		const messages = useAstryxMessages();
 		const isOpen = ref(false);
@@ -148,6 +204,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!event.defaultPrevented) emit("keydown", event);
 		}
 		const hasCustomTrigger = computed(() => props.renderTrigger != null || slots.trigger != null);
+		useDevWarning("ComplexSelector", "`containerClass`/`containerStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.containerClass != null || props.containerStyle != null));
+		useDevWarning("ComplexSelector", "`controlClass`/`controlStyle` have no effect on a custom trigger.", () => hasCustomTrigger.value && (props.controlClass != null || props.controlStyle != null));
 		const triggerProps = computed(() => ({
 			"id": triggerId,
 			"onClick": onCustomClick,
@@ -184,8 +242,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		onBeforeUnmount(() => publishHandle(null));
 		__expose(handle);
 		return (_ctx, _cache) => {
-			return hasCustomTrigger.value ? (openBlock(), createBlock(_sfc_main$4, {
-				key: 0,
+			return hasCustomTrigger.value ? (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 0 }, unref(parts).forwardedAttrs(), {
+				class: unref(attrs).class,
+				style: unref(attrs).style,
 				alignment: __props.alignment,
 				"has-auto-focus": true,
 				"has-close-button": false,
@@ -196,7 +255,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				placement: __props.placement,
 				role: "dialog",
 				onOpenChange: setOpen
-			}, {
+			}), {
 				content: withCtx(() => [createElementVNode("div", {
 					id: contentId,
 					ref_key: "contentEl",
@@ -210,7 +269,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				})], 512)]),
 				default: withCtx(() => [renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps(triggerProps.value)), () => [(openBlock(), createBlock(resolveDynamicComponent(triggerView)))])]),
 				_: 3
-			}, 8, [
+			}, 16, [
+				"class",
+				"style",
 				"alignment",
 				"is-enabled",
 				"is-open",
@@ -218,8 +279,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"placement"
 			])) : (openBlock(), createBlock(_sfc_main$3, {
 				key: 1,
-				class: "astryx-complex-selector-field",
-				"data-variant": __props.variant,
+				class: normalizeClass(["astryx-complex-selector-field", [unref(attrs).class, unref(parts).containerClass.value]]),
+				style: normalizeStyle([unref(attrs).style, unref(parts).containerStyle.value]),
+				"data-variant": triggerVariant.value,
 				description: __props.description,
 				"input-id": triggerId,
 				"is-disabled": __props.isDisabled,
@@ -230,7 +292,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"label-id": labelId,
 				"label-tooltip": __props.labelTooltip,
 				status: __props.status,
-				"status-variant": __props.statusVariant,
+				"status-variant": effectiveStatusVariant.value,
 				width: __props.width
 			}, {
 				default: withCtx(() => [createVNode(_sfc_main$4, {
@@ -256,13 +318,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						state: state.value,
 						value: displayValue.value
 					})], 512)]),
-					default: withCtx(() => [createElementVNode("button", {
+					default: withCtx(() => [createElementVNode("button", mergeProps(unref(parts).forwardedAttrs(), {
 						id: triggerId,
-						class: "astryx-complex-selector",
+						class: ["astryx-complex-selector", __props.controlClass],
+						style: __props.controlStyle,
 						"data-placeholder": hasTriggerLabel.value ? void 0 : "",
 						"data-size": __props.size,
-						"data-status": __props.status?.type,
-						"data-variant": __props.variant,
+						"data-status": triggerVariant.value === "input" ? __props.status?.type : void 0,
+						"data-variant": triggerVariant.value,
 						"aria-busy": isBusy.value || void 0,
 						"aria-expanded": isOpen.value,
 						"aria-invalid": __props.status?.type === "error" || void 0,
@@ -272,7 +335,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						type: "button",
 						onClick: onBuiltinClick,
 						onKeydown: onBuiltinKeyDown
-					}, [
+					}), [
 						__props.startIcon ? (openBlock(), createBlock(_sfc_main$1, {
 							key: 0,
 							class: "astryx-complex-selector-start",
@@ -292,7 +355,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							icon: "chevronDown",
 							size: "sm"
 						}, null, 8, ["data-state"])
-					], 40, _hoisted_1)]),
+					], 16, _hoisted_1)]),
 					_: 3
 				}, 8, [
 					"alignment",
@@ -303,6 +366,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				])]),
 				_: 3
 			}, 8, [
+				"class",
+				"style",
 				"data-variant",
 				"description",
 				"is-disabled",

package/dist/ContextMenu/index.d.ts

@@ -1,3 +1,3 @@
-import { $i as ContextMenuItemProps, Bi as _default, Gi as ContextMenuDividerProps, Hi as useContextMenuSize, Ii as _default$7, Ji as ContextMenuGroupProps, Ki as ContextMenuEmits, Li as _default$4, Qi as ContextMenuItemIcon, Ri as _default$3, Ui as ContextMenuCheckboxData, Vi as useContextMenu, Wi as ContextMenuDividerData, Xi as ContextMenuItemData, Yi as ContextMenuGroupSlots, Zi as ContextMenuItemEmits, aa as ContextMenuRadioData, ca as ContextMenuSize, da as ContextMenuSubMenuProps, ea as ContextMenuItemSlots, fa as ContextMenuSubMenuSlots, ha as ContextMenuWidth, ia as ContextMenuProps, la as ContextMenuSlots, ma as ContextMenuVariant, na as ContextMenuOption, oa as ContextMenuRadioOptionData, pa as ContextMenuTriggerElement, qi as ContextMenuEntry, ra as ContextMenuPresentation, sa as ContextMenuSection, ta as ContextMenuItemTarget, ua as ContextMenuSubMenuEmits, zi as _default$2 } from "../index-DUaLJO7l.js";
-import { n as _default$5, r as _default$1, t as _default$6 } from "../DropdownMenuRadioItem.vue-CXEURBcq.js";
+import { $i as ContextMenuItemIcon, Bi as _default$2, Gi as ContextMenuDividerData, Hi as useContextMenu, Ji as ContextMenuEntry, Ki as ContextMenuDividerProps, Li as _default$7, Qi as ContextMenuItemEmits, Ri as _default$4, Ui as useContextMenuSize, Vi as _default, Wi as ContextMenuCheckboxData, Xi as ContextMenuGroupSlots, Yi as ContextMenuGroupProps, Zi as ContextMenuItemData, aa as ContextMenuProps, ca as ContextMenuSection, da as ContextMenuSubMenuEmits, ea as ContextMenuItemProps, fa as ContextMenuSubMenuProps, ga as ContextMenuWidth, ha as ContextMenuVariant, ia as ContextMenuPresentation, la as ContextMenuSize, ma as ContextMenuTriggerElement, na as ContextMenuItemTarget, oa as ContextMenuRadioData, pa as ContextMenuSubMenuSlots, qi as ContextMenuEmits, ra as ContextMenuOption, sa as ContextMenuRadioOptionData, ta as ContextMenuItemSlots, ua as ContextMenuSlots, zi as _default$3 } from "../index-CpNlPLBF.js";
+import { n as _default$5, r as _default$1, t as _default$6 } from "../DropdownMenuRadioItem.vue-Qd-8Rg4Q.js";
 export { _default as ContextMenu, type ContextMenuCheckboxData, _default$1 as ContextMenuCheckboxItem, _default$2 as ContextMenuDivider, type ContextMenuDividerData, type ContextMenuDividerProps, type ContextMenuEmits, type ContextMenuEntry, _default$3 as ContextMenuGroup, type ContextMenuGroupProps, type ContextMenuGroupSlots, _default$4 as ContextMenuItem, type ContextMenuItemData, type ContextMenuItemEmits, type ContextMenuItemIcon, type ContextMenuItemProps, type ContextMenuItemSlots, type ContextMenuItemTarget, type ContextMenuOption, type ContextMenuPresentation, type ContextMenuProps, type ContextMenuRadioData, _default$5 as ContextMenuRadioGroup, _default$6 as ContextMenuRadioItem, type ContextMenuRadioOptionData, type ContextMenuSection, type ContextMenuSize, type ContextMenuSlots, _default$7 as ContextMenuSubMenu, type ContextMenuSubMenuEmits, type ContextMenuSubMenuProps, type ContextMenuSubMenuSlots, type ContextMenuTriggerElement, type ContextMenuVariant, type ContextMenuWidth, useContextMenu, useContextMenuSize };

package/dist/ContextMenu/index.js

@@ -1,3 +1,3 @@
-import { d as useContextMenuSize, i as _sfc_main$1, n as _sfc_main$6, r as _sfc_main$5, u as useContextMenu } from "../useMenuDrillIn-DzKGkTho.js";
-import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$7, r as _sfc_main$4, t as _sfc_main } from "../ContextMenu-Bq9b3Ti5.js";
+import { d as useContextMenuSize, i as _sfc_main$1, n as _sfc_main$6, r as _sfc_main$5, u as useContextMenu } from "../useMenuDrillIn-DhUnPvKs.js";
+import { a as _sfc_main$2, i as _sfc_main$3, n as _sfc_main$7, r as _sfc_main$4, t as _sfc_main } from "../ContextMenu-C6hPYvYz.js";
 export { _sfc_main as ContextMenu, _sfc_main$1 as ContextMenuCheckboxItem, _sfc_main$2 as ContextMenuDivider, _sfc_main$3 as ContextMenuGroup, _sfc_main$4 as ContextMenuItem, _sfc_main$5 as ContextMenuRadioGroup, _sfc_main$6 as ContextMenuRadioItem, _sfc_main$7 as ContextMenuSubMenu, useContextMenu, useContextMenuSize };