@astryx-vue/core 0.2.6 → 0.4.0

package/dist/ProgressBar/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ProgressBarVariant, i as ProgressBarSize, n as ProgressBarMark, r as ProgressBarProps, t as _default } from "../index-YKCx03zD.js";
+import { a as ProgressBarVariant, i as ProgressBarSize, n as ProgressBarMark, r as ProgressBarProps, t as _default } from "../index-CdvmnNMH.js";
 export { _default as ProgressBar, type ProgressBarMark, type ProgressBarProps, type ProgressBarSize, type ProgressBarVariant };

package/dist/ProgressBar/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../ProgressBar-CVLzdoBK.js";
+import { t as _sfc_main } from "../ProgressBar-VP4JS7vm.js";
 export { _sfc_main as ProgressBar };

package/dist/{ProgressBar-CVLzdoBK.js → ProgressBar-VP4JS7vm.js}

@@ -1,4 +1,4 @@
-import { t as _sfc_main$1 } from "./Tooltip-C4Vaqd3G.js";
+import { t as _sfc_main$1 } from "./Tooltip-sAM8i1eO.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderList, toDisplayString, unref, useAttrs, useId, withCtx } from "vue";
 import "../styles/visually-hidden.css";
 import "../styles/progress-bar.css";
@@ -44,7 +44,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		min: { default: 0 },
 		max: { default: 100 },
 		size: { default: "md" },
-		variant: { default: "neutral" },
+		variant: { default: "accent" },
 		label: {},
 		isLabelHidden: {
 			type: Boolean,
@@ -70,9 +70,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const rootId = computed(() => attrs.id ?? generatedId);
 		const labelId = computed(() => `${rootId.value}-label`);
 		const descriptionId = computed(() => props.description ? `${rootId.value}-description` : void 0);
-		const min = computed(() => Number(props.min));
-		const max = computed(() => Number(props.max));
-		const value = computed(() => Number(props.value));
+		function finite(value, fallback) {
+			return Number.isFinite(value) ? value : fallback;
+		}
+		const min = computed(() => finite(Number(props.min), 0));
+		const max = computed(() => finite(Number(props.max), 0));
+		const value = computed(() => finite(Number(props.value), 0));
 		const clamped = computed(() => Math.max(min.value, Math.min(max.value, value.value)));
 		const percentage = computed(() => {
 			if (max.value === min.value) return 0;
@@ -126,8 +129,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					role: "progressbar",
 					"aria-labelledby": labelledBy.value,
 					"aria-describedby": describedBy.value,
-					"aria-valuemin": min.value,
-					"aria-valuemax": max.value,
+					"aria-valuemin": __props.isIndeterminate ? void 0 : min.value,
+					"aria-valuemax": __props.isIndeterminate ? void 0 : max.value,
 					"aria-valuenow": __props.isIndeterminate ? void 0 : clamped.value,
 					"aria-valuetext": __props.isIndeterminate ? void 0 : displayValue.value
 				}, [createElementVNode("div", {

package/dist/Radio/index.d.ts

@@ -1,2 +1,2 @@
-import { Ar as RadioChangeEvent, Br as RadioStatus, Fr as RadioOption, Hr as RadioValue, Ir as RadioOrientation, Lr as RadioProps, Mr as RadioGroupProps, Nr as RadioGroupSlots, Or as _default$1, Rr as RadioSize, Vr as RadioStatusType, jr as RadioGroupEmits, kr as _default, zr as RadioSlots } from "../index-CdtZjkmG.js";
+import { Ar as RadioChangeEvent, Br as RadioStatus, Fr as RadioOption, Hr as RadioValue, Ir as RadioOrientation, Lr as RadioProps, Mr as RadioGroupProps, Nr as RadioGroupSlots, Or as _default$1, Rr as RadioSize, Vr as RadioStatusType, jr as RadioGroupEmits, kr as _default, zr as RadioSlots } from "../index-CpNlPLBF.js";
 export { _default as Radio, type RadioChangeEvent, _default$1 as RadioGroup, type RadioGroupEmits, type RadioGroupProps, type RadioGroupSlots, type RadioOption, type RadioOrientation, type RadioProps, type RadioSize, type RadioSlots, type RadioStatus, type RadioStatusType, type RadioValue };

package/dist/Radio/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../RadioGroup-Bfu6JSNV.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../RadioGroup-BIipql-L.js";
 export { _sfc_main as Radio, _sfc_main$1 as RadioGroup };

package/dist/{RadioGroup-Bfu6JSNV.js → RadioGroup-BIipql-L.js}

@@ -1,11 +1,14 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
 import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
-import { t as _sfc_main$3 } from "./Tooltip-C4Vaqd3G.js";
-import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
-import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, inject, mergeModels, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, withCtx } from "vue";
+import { t as _sfc_main$3 } from "./Tooltip-sAM8i1eO.js";
+import { t as useIndicator } from "./useIndicator-MZmfBWid.js";
+import { t as _sfc_main$4 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, withCtx } from "vue";
 import "../styles/radio.css";
 //#region src/Radio/types.ts
-const radioContextKey = Symbol("astryx-radio-context");
+const radioContextKey = defineLayerScopedKey("astryx-radio-context", void 0);
 //#endregion
 //#region src/Radio/Radio.vue
 const _hoisted_1$1 = [
@@ -48,7 +51,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
-		const context = inject(radioContextKey, void 0);
+		const slots = useSlots();
+		const press = usePressFeedback({ hasOverlay: false });
+		const context = readLayerScoped(radioContextKey);
 		const generatedId = `astryx-radio-option-${useId()}`;
 		const inputId = computed(() => props.id ?? generatedId);
 		const name = computed(() => context?.name.value ?? attrs.name ?? inputId.value);
@@ -70,17 +75,24 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		function click(event) {
 			if (explainedByMessage.value) event.preventDefault();
 		}
+		const hasDescription = computed(() => !!props.description || slots.description != null);
 		function describedBy() {
-			return [props.description ? `${inputId.value}-description` : void 0, messageDescriptionId.value].filter(Boolean).join(" ") || void 0;
+			return [hasDescription.value ? `${inputId.value}-description` : void 0, messageDescriptionId.value].filter(Boolean).join(" ") || void 0;
+		}
+		function rowClick(event) {
+			const target = event.target;
+			if (target instanceof Element && target.closest("a, button, select, textarea, [role=\"button\"], [role=\"link\"]")) event.preventDefault();
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 标签包住整行。点到链接时取消标签的默认选中，键盘仍由单选框处理。 "), createElementVNode("label", mergeProps({
 				for: inputId.value,
-				class: normalizeClass(["astryx-radio", { "astryx-indicator-scope": !isDisabled.value }]),
+				class: ["astryx-radio", { "astryx-indicator-scope": !isDisabled.value }]
+			}, isDisabled.value ? void 0 : unref(press).pressableProps, {
 				"data-size": indicatorSize.value,
 				"data-disabled": isDisabled.value || void 0,
-				"data-readonly": isReadOnly.value || void 0
-			}, [
+				"data-readonly": isReadOnly.value || void 0,
+				onClick: rowClick
+			}), [
 				createElementVNode("input", {
 					id: inputId.value,
 					class: "astryx-radio-native",
@@ -105,13 +117,13 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"size",
 					"is-disabled"
 				])),
-				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(__props.label), 1), __props.description ? (openBlock(), createElementBlock("span", {
+				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "label", {}, () => [createTextVNode(toDisplayString(__props.label), 1)])]), hasDescription.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					id: `${inputId.value}-description`,
 					class: "astryx-radio-description"
-				}, toDisplayString(__props.description), 9, _hoisted_5)) : createCommentVNode("v-if", true)]),
+				}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 8, _hoisted_5)) : createCommentVNode("v-if", true)]),
 				_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true)
-			], 10, _hoisted_1$1);
+			], 16, _hoisted_1$1)], 2112);
 		};
 	}
 });
@@ -120,6 +132,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxRadioGroup",
+	inheritAttrs: false,
 	__name: "RadioGroup",
 	props: /*@__PURE__*/ mergeModels({
 		id: {},
@@ -141,7 +154,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {},
+		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": {}
@@ -150,6 +192,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "RadioList",
+			props,
+			attrs,
+			reservedAttrs: [
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-invalid",
+				"aria-required"
+			]
+		});
 		const model = useModel(__props, "modelValue");
 		const generatedName = `astryx-radio-${useId()}`;
 		const groupName = computed(() => props.name ?? generatedName);
@@ -160,6 +214,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const disabledMessage = computed(() => props.disabledMessage?.trim() || void 0);
 		const disabledMessageId = computed(() => disabledMessage.value ? `${inputId.value}-disabled` : void 0);
 		__expose({ element: group });
+		function groupDescribedBy(fieldDescribed) {
+			return [
+				attrs["aria-describedby"],
+				fieldDescribed,
+				props.isDisabled ? disabledMessageId.value : void 0
+			].filter(Boolean).join(" ") || void 0;
+		}
 		function select(value, event) {
 			if (props.isDisabled || props.isReadOnly) return;
 			const changeEvent = new CustomEvent("change", {
@@ -186,10 +247,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(_sfc_main$4, {
-				ref_key: "group",
-				ref: group,
-				class: "astryx-radio-group",
-				style: normalizeStyle(style.value),
+				class: normalizeClass(["astryx-radio-group", [unref(attrs).class, unref(parts).containerClass.value]]),
+				style: normalizeStyle([
+					style.value,
+					unref(attrs).style,
+					unref(parts).containerStyle.value
+				]),
 				"data-orientation": __props.orientation,
 				label: __props.label,
 				"input-id": inputId.value,
@@ -213,12 +276,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"focus-trigger": "always",
 					placement: "above"
 				}, {
-					default: withCtx(() => [createElementVNode("div", {
-						class: "astryx-radio-group-list",
-						role: "radiogroup",
-						"aria-labelledby": field.labelId,
-						"aria-describedby": [field.describedBy, __props.isDisabled ? disabledMessageId.value : void 0].filter(Boolean).join(" ") || void 0
-					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+					default: withCtx(() => [createElementVNode("div", mergeProps({
+						ref_key: "group",
+						ref: group,
+						class: ["astryx-radio-group-list", __props.controlClass],
+						style: __props.controlStyle,
+						role: "radiogroup"
+					}, unref(parts).forwardedAttrs(), {
+						"aria-labelledby": [field.labelId, unref(attrs)["aria-labelledby"]].filter(Boolean).join(" ") || void 0,
+						"aria-describedby": groupDescribedBy(field.describedBy)
+					}), [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
 						return openBlock(), createBlock(_sfc_main$1, {
 							key: option.value,
 							value: option.value,
@@ -231,7 +298,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"description",
 							"is-disabled"
 						]);
-					}), 128)), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)]),
+					}), 128)), renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)]),
 					_: 2
 				}, 1032, ["content", "is-enabled"]), __props.isDisabled && disabledMessageId.value ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
@@ -246,6 +313,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				fn: withCtx(() => [renderSlot(_ctx.$slots, "labelIcon")]),
 				key: "0"
 			} : void 0]), 1032, [
+				"class",
 				"style",
 				"data-orientation",
 				"label",

package/dist/RadioList/index.d.ts

@@ -1,2 +1,2 @@
-import { Dr as _default, Er as RadioListItemProps, Pr as RadioListProps, Tr as _default$1 } from "../index-CdtZjkmG.js";
+import { Dr as _default, Er as RadioListItemProps, Pr as RadioListProps, Tr as _default$1 } from "../index-CpNlPLBF.js";
 export { _default as RadioList, _default$1 as RadioListItem, type RadioListItemProps, type RadioListProps };

package/dist/RadioList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-xY1cwLdZ.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../RadioList-GyhgBg4j.js";
 export { _sfc_main as RadioList, _sfc_main$1 as RadioListItem };

package/dist/{RadioList-xY1cwLdZ.js → RadioList-GyhgBg4j.js}

@@ -1,4 +1,4 @@
-import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-Bfu6JSNV.js";
+import { n as _sfc_main$3, t as _sfc_main$2 } from "./RadioGroup-BIipql-L.js";
 import { createBlock, createSlots, defineComponent, mergeModels, openBlock, renderSlot, useModel, withCtx } from "vue";
 //#region src/Radio/RadioList.vue
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
@@ -24,7 +24,36 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		labelIcon: {},
 		labelTooltip: {},
 		optionalLabel: {},
-		requiredLabel: {}
+		requiredLabel: {},
+		targetClass: {},
+		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": {}
@@ -55,6 +84,10 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				options: __props.options,
 				size: __props.size,
 				orientation: __props.orientation,
+				"container-class": __props.containerClass,
+				"container-style": __props.containerStyle,
+				"control-class": __props.controlClass,
+				"control-style": __props.controlStyle,
 				onChange: _cache[1] || (_cache[1] = (value, event) => emit("change", value, event))
 			}, createSlots({
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -82,7 +115,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"name",
 				"options",
 				"size",
-				"orientation"
+				"orientation",
+				"container-class",
+				"container-style",
+				"control-class",
+				"control-style"
 			]);
 		};
 	}
@@ -107,11 +144,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				description: __props.description,
 				"is-disabled": __props.isDisabled,
 				"is-read-only": __props.isReadOnly
-			}, createSlots({ _: 2 }, [_ctx.$slots.end ? {
-				name: "end",
-				fn: withCtx(() => [renderSlot(_ctx.$slots, "end")]),
-				key: "0"
-			} : void 0]), 1032, [
+			}, createSlots({ _: 2 }, [
+				_ctx.$slots.label ? {
+					name: "label",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "label")]),
+					key: "0"
+				} : void 0,
+				_ctx.$slots.description ? {
+					name: "description",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "description")]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots.end ? {
+					name: "end",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "end")]),
+					key: "2"
+				} : void 0
+			]), 1032, [
 				"value",
 				"label",
 				"description",

package/dist/Resizable/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ResizePillPlacement, i as ResizeHandleSlots, n as ResizeDirection, o as ResizePosition, r as ResizeHandleProps, t as _default } from "../index-BPYzIIYn.js";
+import { a as ResizePillPlacement, i as ResizeHandleSlots, n as ResizeDirection, o as ResizePosition, r as ResizeHandleProps, t as _default } from "../index-BZKgbyN9.js";
 export { type ResizeDirection, _default as ResizeHandle, type ResizeHandleProps, type ResizeHandleSlots, type ResizePillPlacement, type ResizePosition };

package/dist/Resizable/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../ResizeHandle-q4nD_586.js";
+import { t as _sfc_main } from "../ResizeHandle-TPlUCAHD.js";
 export { _sfc_main as ResizeHandle };

package/dist/{ResizeHandle-q4nD_586.js → ResizeHandle-TPlUCAHD.js}

@@ -1,6 +1,72 @@
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, useAttrs, useTemplateRef } from "vue";
+import { t as devWarn } from "./useDevWarning-DznOpOHT.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { n as getEffectiveMaxPx, t as getCollapseControls } from "./resizableChannel-3vivrEcT.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, useAttrs, useTemplateRef, watch } from "vue";
 import "../styles/resize-handle.css";
+//#region src/Resizable/resizeKeyboard.ts
+const KEYBOARD_STEP = 10;
+const KEYBOARD_LARGE_STEP = 50;
+function gesture(resizable, delta) {
+	resizable._onResizeStart();
+	resizable._onResizeMove(delta);
+	resizable._onResizeEnd();
+}
+/** 折叠时展开回之前的尺寸。没有登记控制函数时，收到最小值。 */
+function toggleCollapse(resizable) {
+	const controls = getCollapseControls(resizable);
+	if (controls) {
+		if (resizable._isCollapsed) controls.expand();
+		else controls.collapse();
+		return;
+	}
+	gesture(resizable, resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
+}
+function grows(key, rtl, sign, isHorizontal) {
+	return (key === "ArrowRight" || key === "ArrowDown" ? 1 : key === "ArrowLeft" || key === "ArrowUp" ? -1 : 0) * (isHorizontal ? rtl : 1) * sign > 0;
+}
+function adjacentSnap(resizable, direction, count) {
+	const ceiling = Number.isFinite(resizable._maxSizePx) ? resizable._maxSizePx : Number.POSITIVE_INFINITY;
+	const points = [...new Set(resizable._snaps.map((point) => Math.min(ceiling, Math.max(resizable._minSizePx, point))))].sort((left, right) => left - right);
+	const ahead = direction > 0 ? points.filter((point) => point > resizable._size) : points.filter((point) => point < resizable._size).reverse();
+	if (ahead.length === 0) return resizable._size;
+	return ahead[Math.min(count, ahead.length) - 1] ?? resizable._size;
+}
+/**
+* 分隔条上的方向键、Home、End、Enter。
+* 使用者自己的 keydown 要在调用本函数之前先跑。
+*/
+function handleResizeKey(event, resizable, sign, rtl, isHorizontal) {
+	const step = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+	const key = event.key;
+	if (key === "ArrowRight" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowUp") {
+		event.preventDefault();
+		if (resizable._isCollapsed) {
+			if (grows(key, rtl, sign, isHorizontal)) gesture(resizable, Math.max(resizable._minSizePx + step, resizable._collapsedSize));
+			return;
+		}
+		if (resizable._snaps.length > 0) {
+			gesture(resizable, adjacentSnap(resizable, grows(key, rtl, sign, isHorizontal) ? 1 : -1, event.shiftKey ? 2 : 1) - resizable._size);
+			return;
+		}
+		gesture(resizable, (key === "ArrowRight" || key === "ArrowDown" ? 1 : -1) * step * (isHorizontal ? rtl : 1) * sign);
+		return;
+	}
+	if (key === "Home") {
+		event.preventDefault();
+		gesture(resizable, resizable._minSizePx - resizable._size);
+		return;
+	}
+	if (key === "End") {
+		event.preventDefault();
+		if (Number.isFinite(resizable._maxSizePx)) gesture(resizable, resizable._maxSizePx - resizable._size);
+		return;
+	}
+	if (key === "Enter") {
+		event.preventDefault();
+		if (resizable._collapsible) toggleCollapse(resizable);
+	}
+}
+//#endregion
 //#region src/Resizable/ResizeHandle.vue
 const _hoisted_1 = [
 	"aria-orientation",
@@ -18,7 +84,8 @@ const _hoisted_1 = [
 	"data-active",
 	"data-resizing"
 ];
-const _hoisted_2 = ["data-hidden"];
+const _hoisted_2 = ["data-bias"];
+const _hoisted_3 = ["data-hidden"];
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxResizeHandle",
 	inheritAttrs: false,
@@ -61,7 +128,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const collapsed = computed(() => props.resizable?._isCollapsed ?? false);
 		const active = computed(() => hovered.value || focused.value || dragging.value);
 		const pillSide = computed(() => resolveSide(props.pillPlacement, props.isReversed, collapsed.value));
-		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style" && key !== "onKeydown")));
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style" && key !== "onKeydown" && key !== "onKeyDown")));
 		const rootClass = computed(() => ["astryx-resize-handle", attrs.class]);
 		const rootStyle = computed(() => attrs.style);
 		const ariaNow = computed(() => {
@@ -70,19 +137,28 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return collapsed.value ? Math.max(resizable._size, resizable._minSizePx) : resizable._size;
 		});
 		const ariaMax = computed(() => {
-			const max = props.resizable?._maxSizePx;
-			return max != null && max !== Number.POSITIVE_INFINITY ? max : void 0;
+			const resizable = props.resizable;
+			if (resizable == null) return void 0;
+			const reported = getEffectiveMaxPx(resizable);
+			if (reported != null && Number.isFinite(reported)) return reported;
+			const max = resizable._maxSizePx;
+			return max != null && Number.isFinite(max) ? max : void 0;
 		});
+		let warnedAxis = false;
+		watch(() => [props.direction, props.resizable?._direction], ([direction, hookDirection]) => {
+			if (warnedAxis || hookDirection == null || hookDirection === direction) return;
+			warnedAxis = true;
+			devWarn("ResizeHandle", `direction="${direction}" but its useResizable region is "${hookDirection}". They must match: the hook measures one axis and the handle drags the other.`);
+		}, { immediate: true });
 		const ariaText = computed(() => collapsed.value && props.resizable ? messages.value.layout.collapsed : void 0);
-		const pillStyle = computed(() => offsetStyle(props.direction, pillSide.value, true));
-		const hitStyle = computed(() => offsetStyle(props.direction, pillSide.value, false));
+		const pillStyle = computed(() => offsetStyle(props.direction, pillSide.value));
 		function resolveSide(placement, reversed, isCollapsed) {
 			if (placement !== "auto") return placement;
 			const panelSide = reversed ? "end" : "start";
 			if (isCollapsed) return panelSide === "start" ? "end" : "start";
 			return panelSide;
 		}
-		function offsetStyle(direction, side, pill) {
+		function offsetStyle(direction, side) {
 			const dir = side === "center" ? 0 : side === "start" ? -1 : 1;
 			const gap = "var(--astryx-spacing-1, 4px)";
 			if (direction === "horizontal") {
@@ -90,27 +166,26 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					insetInlineStart: "50%",
 					transform: "translateX(-50%)"
 				};
-				if (pill) return {
-					insetInlineStart: "0",
-					transform: `translate(calc(${dir} * (100% + ${gap})), -50%)`
-				};
 				return {
 					insetInlineStart: "0",
-					transform: `translateX(calc(${dir} * (3px + ${gap}) - 6.5px))`
+					transform: `translate(calc(${dir} * (100% + ${gap})), -50%)`
 				};
 			}
 			if (side === "center") return {
 				insetBlockStart: "50%",
 				transform: "translateY(-50%)"
 			};
-			if (pill) return {
+			return {
 				top: "0",
 				transform: `translate(-50%, calc(${dir} * (100% + ${gap})))`
 			};
-			return {
-				insetBlockStart: "0",
-				transform: `translateY(calc(${dir} * (3px + ${gap}) - 6.5px))`
-			};
+		}
+		function callKeydown(handler, event) {
+			if (Array.isArray(handler)) {
+				for (const item of handler) callKeydown(item, event);
+				return;
+			}
+			if (typeof handler === "function") handler(event);
 		}
 		function rtlMultiplier() {
 			if (props.direction !== "horizontal" || root.value == null) return 1;
@@ -172,39 +247,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			clearDrag();
 			props.resizable?._onResizeCancel?.();
 		}
-		function keydown(event) {
+		function onRootKeyDown(event) {
+			callKeydown(attrs.onKeydown, event);
+			if (attrs.onKeyDown !== attrs.onKeydown) callKeydown(attrs.onKeyDown, event);
 			const resizable = props.resizable;
 			if (props.isDisabled || resizable == null) return;
-			const step = event.shiftKey ? 50 : 10;
-			const rtl = rtlMultiplier();
-			const move = (delta) => {
-				resizable._onResizeStart();
-				resizable._onResizeMove(delta);
-				resizable._onResizeEnd();
-			};
-			if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-				event.preventDefault();
-				move(step * rtl * sign.value);
-			} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-				event.preventDefault();
-				move(-step * rtl * sign.value);
-			} else if (event.key === "Home") {
-				event.preventDefault();
-				move(resizable._minSizePx - resizable._size);
-			} else if (event.key === "End" && resizable._maxSizePx !== Number.POSITIVE_INFINITY) {
-				event.preventDefault();
-				move(resizable._maxSizePx - resizable._size);
-			} else if (event.key === "Enter" && resizable._collapsible) {
-				event.preventDefault();
-				move(resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
-			}
+			handleResizeKey(event, resizable, sign.value, rtlMultiplier(), props.direction === "horizontal");
 		}
 		function doubleClick() {
 			const resizable = props.resizable;
 			if (props.isDisabled || resizable == null || !resizable._collapsible) return;
-			resizable._onResizeStart();
-			resizable._onResizeMove(resizable._isCollapsed ? resizable._minSizePx : -resizable._size);
-			resizable._onResizeEnd();
+			toggleCollapse(resizable);
 		}
 		onBeforeUnmount(() => {
 			if (frame) {
@@ -235,13 +288,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"data-disabled": __props.isDisabled || void 0,
 				"data-active": active.value || void 0,
 				"data-resizing": dragging.value || void 0,
-				onKeydown: keydown,
+				onKeydown: onRootKeyDown,
 				onDblclick: doubleClick,
 				onFocus: _cache[2] || (_cache[2] = ($event) => focused.value = true),
 				onBlur: _cache[3] || (_cache[3] = ($event) => focused.value = false)
 			}), [createElementVNode("div", {
 				class: "astryx-resize-handle__hit",
-				style: normalizeStyle(hitStyle.value),
+				"data-bias": pillSide.value,
 				onPointerdown: pointerDown,
 				onPointermove: pointerMove,
 				onPointerup: pointerUp,
@@ -249,11 +302,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				onLostpointercapture: pointerCancel,
 				onPointerenter: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
 				onPointerleave: _cache[1] || (_cache[1] = ($event) => hovered.value = dragging.value)
-			}, null, 36), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+			}, null, 40, _hoisted_2), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
 				class: "astryx-resize-handle-pill",
 				"data-hidden": __props.isAlwaysVisible ? void 0 : true,
 				style: normalizeStyle(pillStyle.value)
-			}, null, 12, _hoisted_2)])], 16, _hoisted_1)], 2112);
+			}, null, 12, _hoisted_3)])], 16, _hoisted_1)], 2112);
 		};
 	}
 });

package/dist/ScrollableArea/index.d.ts

@@ -1,2 +1,2 @@
-import { Cr as ScrollableAreaProps, Sr as _default, wr as ScrollableAreaSlots } from "../index-CdtZjkmG.js";
+import { Cr as ScrollableAreaProps, Sr as _default, wr as ScrollableAreaSlots } from "../index-CpNlPLBF.js";
 export { _default as ScrollableArea, type ScrollableAreaProps, type ScrollableAreaSlots };

package/dist/ScrollableArea/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../ScrollableArea-CJiaALHm.js";
+import { t as _sfc_main } from "../ScrollableArea-0u6RWtGG.js";
 export { _sfc_main as ScrollableArea };