@poveste/app 0.14.0 → 0.16.0

package/dist/bundled/components/base/BaseOverflowMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,10 @@
+import BaseDropdown_default from "./BaseDropdown.js";
 import { useResizeObserver } from "@poveste/vendors/vue-use";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, onBeforeUnmount, openBlock, reactive, ref, renderSlot, resolveComponent, unref, withCtx } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, onBeforeUnmount, openBlock, reactive, ref, renderSlot, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
 //#region src/app/components/base/BaseOverflowMenu.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
-	role: "button",
+	"aria-label": "More",
 	class: "cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900 w-8 h-full flex items-center justify-center absolute top-0 right-0"
 };
 var _hoisted_2 = { class: "flex flex-col items-stretch" };
@@ -13,16 +14,16 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	setup(__props) {
 		const el = ref();
 		const availableWidth = ref(0);
-		useResizeObserver(el, (entries) => {
-			const containerWidth = entries[0].contentRect.width;
-			availableWidth.value = containerWidth - overflowButtonWidth;
+		useResizeObserver(el, ([entry]) => {
+			if (!entry) return;
+			availableWidth.value = entry.contentRect.width - overflowButtonWidth;
 		});
 		const children = ref(/* @__PURE__ */ new Map());
 		const visibleChildrenCount = computed(() => {
 			let width = 0;
 			const c = [...children.value.values()].sort((a, b) => a.index - b.index);
-			for (let i = 0; i < c.length; i++) {
-				width += c[i].width;
+			for (const [i, child] of c.entries()) {
+				width += child.width;
 				if (width > availableWidth.value) return i;
 			}
 			return c.length;
@@ -39,10 +40,10 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 					width: 0,
 					index: props.index
 				});
-				useResizeObserver(el, (entries) => {
+				useResizeObserver(el, ([entry]) => {
 					const element = el.value;
-					if (!element) return;
-					const width = entries[0].contentRect.width;
+					if (!element || !entry) return;
+					const width = entry.contentRect.width;
 					if (!children.value.has(element)) children.value.set(element, state);
 					state.width = width;
 				});
@@ -54,25 +55,24 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 				return () => h("div", {
 					ref: el,
 					style: { visibility: visible.value ? "visible" : "hidden" }
-				}, slots.default());
+				}, slots["default"]?.());
 			}
 		};
 		/**
 		* Wraps each child with a <ChildWrapper>
 		*/
-		function ChildrenRender(props, { slots }) {
-			const [fragment] = slots.default();
-			return fragment.children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode]));
+		function ChildrenRender(_props, { slots }) {
+			const children = slots["default"]?.()[0]?.children;
+			return Array.isArray(children) ? children.map((vnode, index) => h(ChildWrapper, { index }, () => [vnode])) : [];
 		}
 		/**
 		* Only renders a part of a children list
 		*/
 		function ChildrenSlice(props, { slots }) {
-			const [fragment] = slots.default();
-			return fragment.children.slice(props.start, props.end);
+			const children = slots["default"]?.()[0]?.children;
+			return Array.isArray(children) ? children.slice(props.start, props.end) : [];
 		}
 		return (_ctx, _cache) => {
-			const _component_VDropdown = resolveComponent("VDropdown");
 			return openBlock(), createElementBlock("div", {
 				ref_key: "el",
 				ref: el,
@@ -80,12 +80,12 @@ var BaseOverflowMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 			}, [createVNode(ChildrenRender, null, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
-			}), visibleChildrenCount.value < children.value.size ? (openBlock(), createBlock(_component_VDropdown, { key: 0 }, {
+			}), visibleChildrenCount.value < children.value.size ? (openBlock(), createBlock(BaseDropdown_default, { key: 0 }, {
 				popper: withCtx(() => [createElementVNode("div", _hoisted_2, [createVNode(ChildrenSlice, { start: visibleChildrenCount.value }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "overflow")]),
 					_: 3
 				}, 8, ["start"])])]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(Icon), {
+				default: withCtx(() => [createElementVNode("button", _hoisted_1, [createVNode(unref(Icon), {
 					icon: "carbon:caret-down",
 					class: "w-4 h-4 opacity-50 group-hover:opacity-100"
 				})])]),

package/dist/bundled/components/base/BaseSelect.js

@@ -1,4 +1,5 @@
 import BaseSelect_vue_vue_type_script_setup_true_lang_default from "./BaseSelect.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                           */
 //#region src/app/components/base/BaseSelect.vue
 var BaseSelect_default = BaseSelect_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/bundled/components/base/BaseSelect.vue_vue_type_script_setup_true_lang.js

@@ -1,57 +1,218 @@
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
+import { refAutoReset } from "@poveste/vendors/vue-use";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, watch, withCtx, withModifiers } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { Dropdown } from "@poveste/vendors/floating-vue";
+import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot, portalTarget } from "@poveste/controls";
 //#region src/app/components/base/BaseSelect.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "cursor-pointer w-full outline-none px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal" };
+var _hoisted_1 = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant"
+];
 var _hoisted_2 = { class: "flex-1 truncate" };
-var _hoisted_3 = { class: "flex flex-col bg-gray-50 dark:bg-gray-700" };
-var _hoisted_4 = ["onClick"];
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = [
+	"id",
+	"aria-selected",
+	"onMousemove",
+	"onClick"
+];
 var BaseSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "BaseSelect",
 	props: {
 		modelValue: {},
-		options: {}
+		options: {},
+		label: {}
 	},
 	emits: ["update:modelValue", "select"],
-	setup(__props, { emit: __emit }) {
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
 		const formattedOptions = computed(() => {
 			if (Array.isArray(props.options)) return Object.fromEntries(props.options.map((value) => [value, value]));
 			return props.options;
 		});
+		const entries = computed(() => Object.entries(formattedOptions.value));
 		const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
-		function selectValue(value, hide) {
-			emit("update:modelValue", value);
-			emit("select", value);
-			hide();
+		const id = useId();
+		const listboxId = `${id}-listbox`;
+		function optionId(index) {
+			return `${id}-option-${index}`;
 		}
+		const combobox = ref();
+		const open = ref(false);
+		const activeIndex = ref(-1);
+		function openList(index) {
+			const selected = entries.value.findIndex(([value]) => value === props.modelValue);
+			activeIndex.value = index ?? Math.max(selected, 0);
+			open.value = true;
+		}
+		const typed = refAutoReset("", 500);
+		function isTypeaheadKey(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) return false;
+			return event.key !== " " || typed.value !== "";
+		}
+		function typeahead(char) {
+			const previous = typed.value;
+			typed.value = previous + char.toLowerCase();
+			const repeated = [...typed.value].every((c) => c === typed.value[0]);
+			const search = repeated ? typed.value.charAt(0) : typed.value;
+			const start = repeated ? activeIndex.value + 1 : Math.max(activeIndex.value, 0);
+			const count = entries.value.length;
+			for (let offset = 0; offset < count; offset++) {
+				const index = (start + offset) % count;
+				if (entries.value[index]?.[1].toLowerCase().startsWith(search)) {
+					activeIndex.value = index;
+					return;
+				}
+			}
+		}
+		function close() {
+			open.value = false;
+		}
+		function choose(index) {
+			const entry = entries.value[index];
+			if (entry) {
+				emit("update:modelValue", entry[0]);
+				emit("select", entry[0]);
+			}
+			close();
+			combobox.value?.focus();
+		}
+		function onKeydown(event) {
+			const last = entries.value.length - 1;
+			if (isTypeaheadKey(event)) {
+				event.preventDefault();
+				if (!open.value) openList();
+				typeahead(event.key);
+				return;
+			}
+			if (!open.value) {
+				if ([
+					"ArrowDown",
+					"ArrowUp",
+					"Enter",
+					" ",
+					"Home",
+					"End"
+				].includes(event.key)) {
+					event.preventDefault();
+					openList(event.key === "Home" ? 0 : event.key === "End" ? last : void 0);
+				}
+				return;
+			}
+			switch (event.key) {
+				case "ArrowDown":
+					event.preventDefault();
+					activeIndex.value = Math.min(activeIndex.value + 1, last);
+					break;
+				case "ArrowUp":
+					event.preventDefault();
+					if (event.altKey) choose(activeIndex.value);
+					else activeIndex.value = Math.max(activeIndex.value - 1, 0);
+					break;
+				case "Home":
+					event.preventDefault();
+					activeIndex.value = 0;
+					break;
+				case "End":
+					event.preventDefault();
+					activeIndex.value = last;
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					choose(activeIndex.value);
+					break;
+				case "Escape":
+					event.preventDefault();
+					close();
+					break;
+				case "Tab": choose(activeIndex.value);
+			}
+		}
+		const target = shallowRef();
+		onMounted(() => {
+			target.value = portalTarget();
+		});
+		function keepOpenOnTheTrigger(event) {
+			if (combobox.value?.contains(event.target)) event.preventDefault();
+		}
+		watch([open, activeIndex], async ([isOpen, index]) => {
+			if (!isOpen || index < 0) return;
+			await nextTick();
+			target.value?.ownerDocument.getElementById(optionId(index))?.scrollIntoView({ block: "nearest" });
+		});
+		__expose({ focus: () => combobox.value?.focus() });
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Dropdown), {
-				class: "poveste-base-select",
-				"auto-size": "",
-				"auto-boundary-max-size": ""
+			return openBlock(), createBlock(unref(PopoverRoot), {
+				open: open.value,
+				"onUpdate:open": _cache[4] || (_cache[4] = ($event) => open.value = $event)
 			}, {
-				popper: withCtx(({ hide }) => [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(formattedOptions.value, (label, value) => {
-					return openBlock(), createElementBlock("div", mergeProps({ ref_for: true }, {
-						..._ctx.$attrs,
-						class: null,
-						style: null
+				default: withCtx(() => [createVNode(unref(PopoverAnchor), {
+					"as-child": "",
+					class: "poveste-base-select"
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "combobox",
+						ref: combobox,
+						role: "combobox",
+						tabindex: "0",
+						"aria-label": __props.label,
+						"aria-haspopup": "listbox",
+						"aria-expanded": open.value,
+						"aria-controls": open.value ? listboxId : void 0,
+						"aria-activedescendant": open.value && activeIndex.value >= 0 ? optionId(activeIndex.value) : void 0,
+						class: "cursor-pointer w-full outline-none focus-visible:border-primary-500 px-2 h-[27px] -my-1 border border-solid border-black/25 dark:border-white/25 hover:border-primary-500 dark:hover:border-primary-500 rounded-sm flex gap-2 items-center leading-normal",
+						onClick: _cache[0] || (_cache[0] = ($event) => open.value ? close() : openList()),
+						onKeydown
+					}, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", { label: selectedLabel.value }, () => [createTextVNode(toDisplayString(selectedLabel.value), 1)])]), createVNode(unref(Icon), {
+						icon: "carbon:chevron-sort",
+						class: "w-4 h-4 flex-none ml-auto"
+					})], 40, _hoisted_1)]),
+					_: 3
+				}), target.value ? (openBlock(), createBlock(unref(PopoverPortal), {
+					key: 0,
+					to: target.value
+				}, {
+					default: withCtx(() => [createVNode(unref(PopoverContent), {
+						class: "poveste-base-select-popper",
+						align: "start",
+						"side-offset": 6,
+						"collision-padding": 8,
+						onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+						onCloseAutoFocus: _cache[3] || (_cache[3] = withModifiers(() => {}, ["prevent"])),
+						onInteractOutside: keepOpenOnTheTrigger
 					}, {
-						key: label,
-						class: ["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", { "bg-primary-200 dark:bg-primary-800": props.modelValue === value }],
-						onClick: ($event) => selectValue(value, hide)
-					}), [renderSlot(_ctx.$slots, "option", {
-						label,
-						value
-					}, () => [createTextVNode(toDisplayString(label), 1)])], 16, _hoisted_4);
-				}), 128))])]),
-				default: withCtx(() => [createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", { label: selectedLabel.value }, () => [createTextVNode(toDisplayString(selectedLabel.value), 1)])]), createVNode(unref(Icon), {
-					icon: "carbon:chevron-sort",
-					class: "w-4 h-4 flex-none ml-auto"
-				})])]),
+						default: withCtx(() => [createElementVNode("div", {
+							id: listboxId,
+							role: "listbox",
+							"aria-label": __props.label,
+							class: "poveste-base-select-options flex flex-col bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, ([value, optionLabel], index) => {
+							return openBlock(), createElementBlock("div", {
+								id: optionId(index),
+								key: value,
+								role: "option",
+								"aria-selected": value === __props.modelValue,
+								class: normalizeClass(["px-2 py-1 cursor-pointer hover:bg-primary-100 dark:hover:bg-primary-700", {
+									"bg-primary-200 dark:bg-primary-800": value === __props.modelValue,
+									"outline outline-2 -outline-offset-2 outline-primary-500": index === activeIndex.value
+								}]),
+								onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"])),
+								onMousemove: ($event) => activeIndex.value = index,
+								onClick: ($event) => choose(index)
+							}, [renderSlot(_ctx.$slots, "option", {
+								label: optionLabel,
+								value
+							}, () => [createTextVNode(toDisplayString(optionLabel), 1)])], 42, _hoisted_4);
+						}), 128))], 8, _hoisted_3)]),
+						_: 3
+					})]),
+					_: 3
+				}, 8, ["to"])) : createCommentVNode("", true)]),
 				_: 3
-			});
+			}, 8, ["open"]);
 		};
 	}
 });

package/dist/bundled/components/base/BaseSplitPane.js

@@ -2,6 +2,6 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import BaseSplitPane_vue_vue_type_script_setup_true_lang_default from "./BaseSplitPane.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                              */
 //#region src/app/components/base/BaseSplitPane.vue
-var BaseSplitPane_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSplitPane_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-1e09b1b3"]]);
+var BaseSplitPane_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSplitPane_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c01bd041"]]);
 //#endregion
 export { BaseSplitPane_default as default };

package/dist/bundled/components/base/BaseSplitPane.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,17 @@
-import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, watch, withModifiers } from "@poveste/vendors/vue";
+import { computed, createCommentVNode, createElementBlock, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, unref, useId, watch, withModifiers } from "@poveste/vendors/vue";
 //#region src/app/components/base/BaseSplitPane.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var _hoisted_2 = [
+	"aria-label",
+	"aria-orientation",
+	"aria-controls",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax"
+];
 var SAVE_PREFIX = "__poveste";
+var STEP = 1;
+var PAGE_STEP = 10;
 var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "BaseSplitPane",
 	props: {
@@ -47,6 +58,16 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 			default: true
 		},
 		/**
+		* What the divider is called to a screen reader.
+		*
+		* Four are on screen at once and they resize different things, so a shared
+		* default would announce four identical separators.
+		*/
+		label: {
+			type: String,
+			default: "Resize panels"
+		},
+		/**
 		* Whether the first pane exists at all.
 		*
 		* Dropping it here rather than at the call site keeps the other slot at one
@@ -149,6 +170,36 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		watch(hasBothPanes, (both) => {
 			if (!both && dragging.value) dragEnd();
 		});
+		function moveBy(amount) {
+			currentSplit.value = Math.min(props.max, Math.max(props.min, boundSplit.value + amount));
+		}
+		function onKeydown(event) {
+			const back = props.orientation === "landscape" ? "ArrowLeft" : "ArrowUp";
+			const forward = props.orientation === "landscape" ? "ArrowRight" : "ArrowDown";
+			switch (event.key) {
+				case back:
+					moveBy(-STEP);
+					break;
+				case forward:
+					moveBy(STEP);
+					break;
+				case "PageUp":
+					moveBy(-PAGE_STEP);
+					break;
+				case "PageDown":
+					moveBy(PAGE_STEP);
+					break;
+				case "Home":
+					currentSplit.value = props.min;
+					break;
+				case "End":
+					currentSplit.value = props.max;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		}
+		const firstPaneId = useId();
 		function removeDragListeners() {
 			window.removeEventListener("mousemove", dragMove);
 			window.removeEventListener("mouseup", dragEnd);
@@ -168,6 +219,7 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				}])
 			}, [__props.showFirst ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				id: unref(firstPaneId),
 				class: normalizeClass(["relative top-0 left-0 z-20", {
 					"pointer-events-none": dragging.value,
 					"border-r border-gray-300/30 dark:border-gray-800": __props.orientation === "landscape" && __props.showDivider && hasBothPanes.value,
@@ -176,14 +228,23 @@ var BaseSplitPane_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				style: normalizeStyle(leftStyle.value)
 			}, [renderSlot(_ctx.$slots, "first", {}, void 0, true), hasBothPanes.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				class: normalizeClass(["dragger absolute z-100 hover:bg-primary-500/50 transition-colors duration-150 delay-150", {
+				role: "separator",
+				tabindex: "0",
+				"aria-label": __props.label,
+				"aria-orientation": __props.orientation === "landscape" ? "vertical" : "horizontal",
+				"aria-controls": unref(firstPaneId),
+				"aria-valuenow": Math.round(boundSplit.value),
+				"aria-valuemin": __props.min,
+				"aria-valuemax": __props.max,
+				class: normalizeClass(["dragger absolute z-100 hover:bg-primary-500/50 focus-visible:bg-primary-500/50 focus-visible:outline-2 focus-visible:outline-primary-500 transition-colors duration-150 delay-150", {
 					"top-0 bottom-0 cursor-ew-resize": __props.orientation === "landscape",
 					"left-0 right-0 cursor-ns-resize": __props.orientation === "portrait",
 					[`dragger-offset-${__props.draggerOffset}`]: true,
 					"bg-primary-500/25": dragging.value
 				}]),
-				onMousedown: withModifiers(dragStart, ["prevent"])
-			}, null, 34)) : createCommentVNode("", true)], 6)) : createCommentVNode("", true), __props.showLast ? (openBlock(), createElementBlock("div", {
+				onMousedown: withModifiers(dragStart, ["prevent"]),
+				onKeydown
+			}, null, 42, _hoisted_2)) : createCommentVNode("", true)], 14, _hoisted_1)) : createCommentVNode("", true), __props.showLast ? (openBlock(), createElementBlock("div", {
 				key: 1,
 				class: normalizeClass(["relative bottom-0 right-0", {
 					"pointer-events-none": dragging.value,

package/dist/bundled/components/command/PromptSelect.vue_vue_type_script_setup_true_lang.js

@@ -60,7 +60,7 @@ var PromptSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 		});
 		const { selectedIndex, selectNext, selectPrevious } = useSelection(formattedOptions);
 		function selectIndex(index) {
-			const result = formattedOptions.value[index].value;
+			const result = formattedOptions.value[index]?.value;
 			if (result) model.value = result;
 		}
 		return (_ctx, _cache) => {

package/dist/bundled/components/panel/ControlsComponentPropItem.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,12 @@
-import { computed, createBlock, createCommentVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDirective, resolveDynamicComponent, unref, withCtx, withDirectives, withModifiers } from "@poveste/vendors/vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDynamicComponent, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
-import { HstCheckbox, HstJson, HstNumber, HstText } from "@poveste/controls";
+import { HstCheckbox, HstJson, HstNumber, HstText, HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentPropItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "flex items-end hover:bg-primary-100 dark:hover:bg-primary-800"
+};
+var _hoisted_2 = ["aria-label", "disabled"];
 var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ControlsComponentPropItem",
 	props: {
@@ -33,26 +38,29 @@ var ControlsComponentPropItem_vue_vue_type_script_setup_true_lang_default = /*@_
 		}
 		const canReset = computed(() => props.variant.state?._hPropState?.[props.component.index] && props.definition.name in props.variant.state._hPropState[props.component.index]);
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return comp.value ? (openBlock(), createBlock(resolveDynamicComponent(comp.value), {
-				key: 0,
+			return comp.value ? (openBlock(), createElementBlock("div", _hoisted_1, [(openBlock(), createBlock(resolveDynamicComponent(comp.value), {
 				modelValue: model.value,
-				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
 				placeholder: model.value === void 0 ? __props.definition?.default : null,
-				class: "poveste-controls-component-prop-item",
+				class: "poveste-controls-component-prop-item grow min-w-0",
 				title: `${__props.definition.name}${canReset.value ? " *" : ""}`
-			}, {
-				actions: withCtx(() => [withDirectives(createVNode(unref(Icon), {
-					icon: "carbon:erase",
-					class: normalizeClass(["cursor-pointer w-4 h-4 hover:text-primary-500 dark:hover:text-primary-400 text-gray-900 dark:text-gray-100", [canReset.value ? "opacity-50 hover:opacity-100" : "opacity-25 pointer-events-none"]]),
-					onClick: _cache[0] || (_cache[0] = withModifiers(($event) => reset(), ["stop"]))
-				}, null, 8, ["class"]), [[_directive_tooltip, "Remove override"]])]),
-				_: 1
-			}, 8, [
+			}, null, 8, [
 				"modelValue",
 				"placeholder",
 				"title"
-			])) : createCommentVNode("", true);
+			])), createVNode(unref(HstTooltip), { content: "Remove override" }, {
+				default: withCtx(() => [createElementVNode("button", {
+					type: "button",
+					"aria-label": `Remove override of ${__props.definition.name}`,
+					disabled: !canReset.value,
+					class: normalizeClass(["flex-none flex mr-2 mb-[10px] p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400", [canReset.value ? "opacity-50 hover:opacity-100 focus-visible:opacity-100" : "opacity-25 pointer-events-none"]]),
+					onClick: _cache[1] || (_cache[1] = ($event) => reset())
+				}, [createVNode(unref(Icon), {
+					icon: "carbon:erase",
+					class: "w-4 h-4"
+				})], 10, _hoisted_2)]),
+				_: 1
+			})])) : createCommentVNode("", true);
 		};
 	}
 });

package/dist/bundled/components/panel/ControlsComponentProps.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import ControlsComponentPropItem_default from "./ControlsComponentPropItem.js";
-import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, resolveDirective, toDisplayString, unref, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, renderList, toDisplayString, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentProps.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-controls-component-props" };
 var _hoisted_2 = { class: "font-mono p-2 flex items-center gap-1" };
@@ -12,11 +13,13 @@ var ControlsComponentProps_vue_vue_type_script_setup_true_lang_default = /*@__PU
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createVNode(unref(Icon), {
-				icon: "carbon:flash",
-				class: "w-4 h-4 text-primary-500 flex-none"
-			}, null, 512), [[_directive_tooltip, "Auto-detected props"]]), createElementVNode("div", null, [
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(HstTooltip), { content: "Auto-detected props" }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:flash",
+					class: "w-4 h-4 text-primary-500 flex-none"
+				})]),
+				_: 1
+			}), createElementVNode("div", null, [
 				_cache[0] || (_cache[0] = createElementVNode("span", { class: "opacity-30" }, "<", -1)),
 				createTextVNode(toDisplayString(__props.definition.name), 1),
 				_cache[1] || (_cache[1] = createElementVNode("span", { class: "opacity-30" }, ">", -1))

package/dist/bundled/components/panel/ControlsComponentState.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
 import ControlsComponentStateItem_default from "./ControlsComponentStateItem.js";
-import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, resolveDirective, unref, withDirectives } from "@poveste/vendors/vue";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, openBlock, renderList, unref, withCtx } from "@poveste/vendors/vue";
 import { Icon } from "@poveste/vendors/iconify";
+import { HstTooltip } from "@poveste/controls";
 //#region src/app/components/panel/ControlsComponentState.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "poveste-controls-component-init-state" };
 var _hoisted_2 = { class: "p-2 flex items-center gap-1" };
@@ -11,11 +12,13 @@ var ControlsComponentState_vue_vue_type_script_setup_true_lang_default = /*@__PU
 		const props = __props;
 		const stateKeys = computed(() => Object.keys(props.variant.state || {}).filter((key) => !key.startsWith("_h")));
 		return (_ctx, _cache) => {
-			const _directive_tooltip = resolveDirective("tooltip");
-			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [withDirectives(createVNode(unref(Icon), {
-				icon: "carbon:data-vis-1",
-				class: "w-4 h-4 text-primary-500 flex-none"
-			}, null, 512), [[_directive_tooltip, "Auto-detected state"]]), _cache[0] || (_cache[0] = createElementVNode("div", null, " State ", -1))]), (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(HstTooltip), { content: "Auto-detected state" }, {
+				default: withCtx(() => [createVNode(unref(Icon), {
+					icon: "carbon:data-vis-1",
+					class: "w-4 h-4 text-primary-500 flex-none"
+				})]),
+				_: 1
+			}), _cache[0] || (_cache[0] = createElementVNode("div", null, " State ", -1))]), (openBlock(true), createElementBlock(Fragment, null, renderList(stateKeys.value, (key) => {
 				return openBlock(), createBlock(ControlsComponentStateItem_default, {
 					key,
 					item: key,

package/dist/bundled/components/panel/PaneTabs.vue_vue_type_script_setup_true_lang.js

@@ -29,7 +29,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: ""
 							}
 						},
-						matched: !_ctx.$route.query.tab
+						matched: !_ctx.$route.query["tab"]
 					}, {
 						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Controls ", -1)])]),
 						_: 1
@@ -42,7 +42,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "docs"
 							}
 						},
-						matched: _ctx.$route.query.tab === "docs",
+						matched: _ctx.$route.query["tab"] === "docs",
 						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode(" Docs ", -1)])]),
@@ -60,7 +60,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "events"
 							}
 						},
-						matched: _ctx.$route.query.tab === "events",
+						matched: _ctx.$route.query["tab"] === "events",
 						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {
@@ -83,7 +83,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: ""
 							}
 						},
-						matched: !_ctx.$route.query.tab
+						matched: !_ctx.$route.query["tab"]
 					}, {
 						default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode(" Controls ", -1)])]),
 						_: 1
@@ -96,7 +96,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "docs"
 							}
 						},
-						matched: _ctx.$route.query.tab === "docs",
+						matched: _ctx.$route.query["tab"] === "docs",
 						class: normalizeClass({ "opacity-70": !unref(renderedDoc) })
 					}, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode(" Docs ", -1)])]),
@@ -114,7 +114,7 @@ var PaneTabs_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 								tab: "events"
 							}
 						},
-						matched: _ctx.$route.query.tab === "events",
+						matched: _ctx.$route.query["tab"] === "events",
 						class: normalizeClass({ "opacity-70": !hasEvents.value })
 					}, {
 						default: withCtx(() => [_cache[2] || (_cache[2] = createTextVNode(" Events ", -1)), unref(eventsStore).unseen ? (openBlock(), createBlock(BaseTag_default, { key: 0 }, {