@astryx-vue/core 0.3.0 → 0.4.0

package/dist/DateTimeInput-CAZBwoRe.js

@@ -0,0 +1,562 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { t as _sfc_main$2 } from "./FieldIcon--NTgW5IU.js";
+import { t as _sfc_main$3 } from "./IconButton-DI-XBbtV.js";
+import { o as useAstryxLocale, s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { t as usePendingChange } from "./usePendingChange-ib-h8FZK.js";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
+import { a as parseISOTime, n as formatISOTime, t as formatDisplayTime } from "./useTimeValue-BJd0xBhG.js";
+import { t as _sfc_main$4 } from "./BottomSheet-B4sc3F1S.js";
+import { t as _sfc_main$5 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$6 } from "./Spinner-DdVUadii.js";
+import { t as _sfc_main$7 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as formatInstant } from "./formatInstant-BDWUIxS7.js";
+import { n as _sfc_main$8, t as _sfc_main$9 } from "./DateInput-BjLdmYor.js";
+import { n as _sfc_main$10, t as _sfc_main$11 } from "./TimeField-CpAgja9D.js";
+import { r as effectivePickerPresentation, s as resolvePickerPresentation } from "./inputPresentation-BOyHkCDr.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, normalizeStyle, openBlock, ref, toDisplayString, unref, useAttrs, useId, useModel, watch, withCtx } from "vue";
+import "../styles/date-time-input.css";
+//#region src/DateTimeInput/TouchDateTimeField.vue
+const _hoisted_1$1 = {
+	class: "astryx-date-time-fields",
+	"data-presentation": "bottom-sheet"
+};
+const _hoisted_2$1 = ["disabled", "aria-describedby"];
+const _hoisted_3 = ["data-placeholder"];
+const _hoisted_4 = [
+	"id",
+	"disabled",
+	"aria-label",
+	"aria-describedby"
+];
+const _hoisted_5 = ["data-placeholder"];
+const _hoisted_6 = { class: "astryx-date-time-touch" };
+const _hoisted_7 = ["aria-label"];
+const _hoisted_8 = ["aria-selected"];
+const _hoisted_9 = ["aria-selected"];
+const _hoisted_10 = {
+	key: 1,
+	class: "astryx-date-time-touch-time"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "TouchDateTimeField",
+	props: {
+		label: {},
+		inputId: {},
+		date: { default: null },
+		time: { default: null },
+		describedBy: {},
+		placeholder: {},
+		timePlaceholder: {},
+		timeLabel: {},
+		hourFormat: { default: "12h" },
+		hasSeconds: {
+			type: Boolean,
+			default: false
+		},
+		min: {},
+		max: {},
+		dateConstraints: {},
+		weekStartsOn: {},
+		isDisabled: { type: Boolean }
+	},
+	emits: [
+		"pickDate",
+		"pickTime",
+		"reset"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const locale = useAstryxLocale();
+		const open = ref(false);
+		const panel = ref("date");
+		function datePart(value) {
+			const date = value?.slice(0, 10) ?? "";
+			if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return null;
+			const [year, month, day] = date.split("-").map(Number);
+			return new Date(year, month - 1, day);
+		}
+		const dateText = computed(() => props.date ? formatInstant(props.date, "date_long", locale.value) : "");
+		const timeText = computed(() => props.time ? formatDisplayTime(props.time, props.hourFormat, props.hasSeconds) : "");
+		function clockBound(value) {
+			const parsed = parseISOTime(value?.slice(11) ?? "");
+			return parsed ? formatISOTime(parsed, true) : void 0;
+		}
+		function dateBound(value) {
+			return datePart(value ?? null) ?? void 0;
+		}
+		function show(next) {
+			if (props.isDisabled) return;
+			panel.value = next;
+			open.value = true;
+		}
+		function onDate(value) {
+			if (props.isDisabled) return;
+			emit("pickDate", value);
+		}
+		function onTime(value) {
+			if (props.isDisabled) return;
+			emit("pickTime", value);
+		}
+		function onReset() {
+			if (props.isDisabled) return;
+			emit("reset");
+		}
+		function saveDate() {
+			if (!props.date) return;
+			panel.value = "time";
+		}
+		function close() {
+			open.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("div", _hoisted_1$1, [createElementVNode("button", {
+				type: "button",
+				class: "astryx-date-touch-segment",
+				disabled: __props.isDisabled,
+				"aria-describedby": __props.describedBy,
+				onClick: _cache[0] || (_cache[0] = ($event) => show("date"))
+			}, [createVNode(_sfc_main$5, {
+				class: "astryx-date-time-toggle-icon",
+				icon: "calendar",
+				size: "sm"
+			}), createElementVNode("span", { "data-placeholder": !dateText.value || void 0 }, toDisplayString(dateText.value || __props.placeholder || unref(messages).dateTimeInput.placeholder), 9, _hoisted_3)], 8, _hoisted_2$1), createElementVNode("button", {
+				id: __props.inputId,
+				type: "button",
+				class: "astryx-date-touch-segment",
+				disabled: __props.isDisabled,
+				"aria-label": __props.timeLabel || unref(messages).dateTimeInput.timeLabel,
+				"aria-describedby": __props.describedBy,
+				onClick: _cache[1] || (_cache[1] = ($event) => show("time"))
+			}, [createVNode(_sfc_main$5, {
+				class: "astryx-date-time-clock-icon",
+				icon: "clock",
+				size: "sm"
+			}), createElementVNode("span", { "data-placeholder": !timeText.value || void 0 }, toDisplayString(timeText.value || __props.timePlaceholder || unref(messages).dateTimeInput.timePlaceholder), 9, _hoisted_5)], 8, _hoisted_4)]), createVNode(_sfc_main$4, {
+				"is-open": open.value,
+				"onUpdate:isOpen": _cache[4] || (_cache[4] = ($event) => open.value = $event),
+				label: unref(messages).dateTimeInput.dialogLabel,
+				height: "hug",
+				padding: 0
+			}, {
+				default: withCtx(() => [createElementVNode("div", _hoisted_6, [createElementVNode("div", {
+					class: "astryx-date-time-touch-tabs",
+					role: "tablist",
+					"aria-label": unref(messages).dateTimeInput.pickerMode
+				}, [createElementVNode("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": panel.value === "date",
+					onClick: _cache[2] || (_cache[2] = ($event) => panel.value = "date")
+				}, toDisplayString(unref(messages).dateTimeInput.dateLabel), 9, _hoisted_8), createElementVNode("button", {
+					type: "button",
+					role: "tab",
+					"aria-selected": panel.value === "time",
+					onClick: _cache[3] || (_cache[3] = ($event) => panel.value = "time")
+				}, toDisplayString(unref(messages).dateTimeInput.timeLabel), 9, _hoisted_9)], 8, _hoisted_7), panel.value === "date" ? (openBlock(), createBlock(_sfc_main$8, {
+					key: 0,
+					selected: __props.date,
+					min: dateBound(__props.min),
+					max: dateBound(__props.max),
+					"date-constraints": __props.dateConstraints,
+					"week-starts-on": __props.weekStartsOn,
+					"save-label": unref(messages).dateTimeInput.saveDatePicking,
+					"save-disabled": !__props.date,
+					onPick: onDate,
+					onSave: saveDate,
+					onReset
+				}, null, 8, [
+					"selected",
+					"min",
+					"max",
+					"date-constraints",
+					"week-starts-on",
+					"save-label",
+					"save-disabled"
+				])) : (openBlock(), createElementBlock("div", _hoisted_10, [createVNode(_sfc_main$10, {
+					"model-value": __props.time,
+					"hour-format": __props.hourFormat,
+					"has-seconds": __props.hasSeconds,
+					min: clockBound(__props.min),
+					max: clockBound(__props.max),
+					"onUpdate:modelValue": onTime
+				}, null, 8, [
+					"model-value",
+					"hour-format",
+					"has-seconds",
+					"min",
+					"max"
+				]), createElementVNode("button", {
+					type: "button",
+					class: "astryx-date-touch-save",
+					onClick: close
+				}, toDisplayString(unref(messages).dateInput.savePicking), 1)]))])]),
+				_: 1
+			}, 8, ["is-open", "label"])], 64);
+		};
+	}
+});
+//#endregion
+//#region src/DateTimeInput/DateTimeInput.vue
+const _hoisted_1 = [
+	"data-size",
+	"data-status",
+	"data-disabled",
+	"aria-busy"
+];
+const _hoisted_2 = {
+	key: 1,
+	class: "astryx-date-time-fields"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxDateTimeInput",
+	inheritAttrs: false,
+	__name: "DateTimeInput",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		id: {},
+		description: {},
+		placeholder: {},
+		hourFormat: { default: "12h" },
+		presentation: {},
+		nativePicker: {},
+		hasClear: {
+			type: Boolean,
+			default: false
+		},
+		clearLabel: {},
+		size: { default: "md" },
+		hasSeconds: {
+			type: Boolean,
+			default: false
+		},
+		timeIncrement: { default: 1 },
+		timeOptionInterval: {},
+		timeLabel: {},
+		timePlaceholder: {},
+		disabledMessage: {},
+		min: {},
+		max: {},
+		dateConstraints: {},
+		numberOfMonths: {},
+		weekStartsOn: {},
+		isDisabled: { type: Boolean },
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		changeAction: {},
+		isReadOnly: { type: Boolean },
+		isRequired: { type: Boolean },
+		isOptional: { type: Boolean },
+		isLabelHidden: { type: Boolean },
+		labelHidden: { type: Boolean },
+		labelTooltip: {},
+		status: {},
+		statusVariant: { default: "attached" },
+		width: {},
+		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": { default: null },
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["update:modelValue", "change"], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const model = useModel(__props, "modelValue");
+		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "DateTimeInput",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-required",
+				"aria-busy",
+				"aria-disabled",
+				"aria-invalid"
+			]
+		});
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden);
+		const coarse = useMediaQuery("(pointer: coarse)");
+		const messages = useAstryxMessages();
+		const generatedId = `astryx-date-time-${useId()}`;
+		const draftDate = ref(void 0);
+		const draftTime = ref(void 0);
+		const action = usePendingChange(() => props.changeAction);
+		const busy = computed(() => props.isLoading || action.busy.value);
+		const locked = computed(() => props.isDisabled || busy.value);
+		const sheetLocked = computed(() => locked.value || props.isReadOnly === true);
+		const datePresentation = computed(() => {
+			const value = props.presentation;
+			if (value == null || value === "text-input") return void 0;
+			return value;
+		});
+		const useSheet = computed(() => resolvePickerPresentation(effectivePickerPresentation(datePresentation.value, props.nativePicker), coarse.value) === "sheet");
+		function parseDate(value) {
+			const date = value?.slice(0, 10) ?? "";
+			if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return null;
+			const [year, month, day] = date.split("-").map(Number);
+			return new Date(year, month - 1, day);
+		}
+		function parseTime(value) {
+			const parsed = parseISOTime(value?.slice(11) ?? "");
+			return parsed ? formatISOTime(parsed, props.hasSeconds) : null;
+		}
+		function formatDate(date) {
+			const month = String(date.getMonth() + 1).padStart(2, "0");
+			const day = String(date.getDate()).padStart(2, "0");
+			return `${date.getFullYear()}-${month}-${day}`;
+		}
+		/** 取 ISO 日期时间里的时间部分，给只用时间的那一半做范围限制。 */
+		function timePart(value) {
+			const raw = value?.slice(11) ?? "";
+			const parsed = parseISOTime(raw);
+			return parsed ? formatISOTime(parsed, true) : void 0;
+		}
+		const timeMin = computed(() => timePart(props.min));
+		const timeMax = computed(() => timePart(props.max));
+		const dateValue = computed(() => draftDate.value !== void 0 ? draftDate.value : parseDate(model.value));
+		const timeValue = computed(() => draftTime.value !== void 0 ? draftTime.value : parseTime(model.value));
+		const clearLabel = computed(() => messages.value.dateTimeInput.clear());
+		const resolvedTimeLabel = computed(() => props.timeLabel || messages.value.dateTimeInput.timeLabel);
+		function publish() {
+			const date = dateValue.value;
+			const time = timeValue.value;
+			const next = date && time ? `${formatDate(date)}T${time}` : null;
+			if (next != null) {
+				draftDate.value = void 0;
+				draftTime.value = void 0;
+			}
+			if (next !== model.value) {
+				model.value = next;
+				emit("change", next);
+				action.run(next);
+			}
+		}
+		function onSheetDate(value) {
+			if (sheetLocked.value) return;
+			onDate(value);
+		}
+		function onSheetTime(value) {
+			if (sheetLocked.value) return;
+			onTime(value);
+		}
+		function onSheetReset() {
+			if (sheetLocked.value) return;
+			clear();
+		}
+		function onDate(value) {
+			draftDate.value = value;
+			publish();
+		}
+		function onTime(value) {
+			draftTime.value = value;
+			publish();
+		}
+		function clear() {
+			draftDate.value = null;
+			draftTime.value = null;
+			if (model.value !== null) {
+				model.value = null;
+				emit("change", null);
+				action.run(null);
+			}
+		}
+		watch(model, (value) => {
+			if (value) {
+				draftDate.value = void 0;
+				draftTime.value = void 0;
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$7, {
+				class: normalizeClass(unref(parts).containerClass.value),
+				style: normalizeStyle(unref(parts).containerStyle.value),
+				label: __props.label,
+				"input-id": generatedId,
+				description: __props.description,
+				width: __props.width,
+				"is-label-hidden": unref(hideLabel),
+				"is-disabled": locked.value,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				"label-tooltip": __props.labelTooltip,
+				status: __props.status,
+				"status-variant": __props.statusVariant
+			}, {
+				default: withCtx((field) => [createElementVNode("div", {
+					class: normalizeClass(["astryx-date-time-input", unref(parts).controlClass()]),
+					style: normalizeStyle(unref(parts).controlStyle()),
+					"data-size": __props.size,
+					"data-status": __props.status?.type,
+					"data-disabled": locked.value || void 0,
+					"aria-busy": busy.value || void 0
+				}, [useSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					date: dateValue.value,
+					time: timeValue.value,
+					label: __props.label,
+					"input-id": generatedId,
+					"described-by": [unref(attrs)["aria-describedby"], field.describedBy].filter(Boolean).join(" ") || void 0,
+					placeholder: __props.placeholder,
+					"time-placeholder": __props.timePlaceholder,
+					"time-label": resolvedTimeLabel.value,
+					"hour-format": __props.hourFormat,
+					"has-seconds": __props.hasSeconds,
+					min: __props.min,
+					max: __props.max,
+					"date-constraints": __props.dateConstraints,
+					"week-starts-on": __props.weekStartsOn,
+					"is-disabled": sheetLocked.value,
+					onPickDate: onSheetDate,
+					onPickTime: onSheetTime,
+					onReset: onSheetReset
+				}, null, 8, [
+					"date",
+					"time",
+					"label",
+					"described-by",
+					"placeholder",
+					"time-placeholder",
+					"time-label",
+					"hour-format",
+					"has-seconds",
+					"min",
+					"max",
+					"date-constraints",
+					"week-starts-on",
+					"is-disabled"
+				])) : (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_sfc_main$9, {
+					id: generatedId,
+					"model-value": dateValue.value,
+					label: unref(messages).dateTimeInput.dateLabel,
+					"is-label-hidden": "",
+					placeholder: __props.placeholder,
+					disabled: locked.value,
+					size: __props.size,
+					"described-by": [unref(attrs)["aria-describedby"], field.describedBy].filter(Boolean).join(" ") || void 0,
+					"date-constraints": __props.dateConstraints,
+					"number-of-months": __props.numberOfMonths,
+					"week-starts-on": __props.weekStartsOn,
+					presentation: datePresentation.value,
+					"native-picker": __props.nativePicker,
+					"disabled-message": __props.disabledMessage,
+					"onUpdate:modelValue": onDate
+				}, null, 8, [
+					"model-value",
+					"label",
+					"placeholder",
+					"disabled",
+					"size",
+					"described-by",
+					"date-constraints",
+					"number-of-months",
+					"week-starts-on",
+					"presentation",
+					"native-picker",
+					"disabled-message"
+				]), createVNode(_sfc_main$11, {
+					"model-value": timeValue.value,
+					label: resolvedTimeLabel.value,
+					"described-by": [unref(attrs)["aria-describedby"], field.describedBy].filter(Boolean).join(" ") || void 0,
+					placeholder: __props.timePlaceholder,
+					"hour-format": __props.hourFormat,
+					presentation: __props.presentation,
+					"native-picker": __props.nativePicker,
+					"has-seconds": __props.hasSeconds,
+					increment: __props.timeIncrement,
+					"option-interval": __props.timeOptionInterval,
+					min: timeMin.value,
+					max: timeMax.value,
+					size: __props.size,
+					"is-disabled": locked.value,
+					"is-read-only": __props.isReadOnly,
+					"disabled-message": __props.disabledMessage,
+					status: __props.status,
+					"onUpdate:modelValue": onTime
+				}, null, 8, [
+					"model-value",
+					"label",
+					"described-by",
+					"placeholder",
+					"hour-format",
+					"presentation",
+					"native-picker",
+					"has-seconds",
+					"increment",
+					"option-interval",
+					"min",
+					"max",
+					"size",
+					"is-disabled",
+					"is-read-only",
+					"disabled-message",
+					"status"
+				])])), busy.value ? (openBlock(), createBlock(_sfc_main$6, {
+					key: 2,
+					size: "sm",
+					"aria-label": unref(messages).dateInput.loading
+				}, null, 8, ["aria-label"])) : __props.hasClear && (dateValue.value || timeValue.value) && !locked.value ? (openBlock(), createBlock(_sfc_main$3, {
+					key: 3,
+					class: "astryx-input-clear-button",
+					variant: "ghost",
+					size: "sm",
+					label: clearLabel.value,
+					onClick: clear
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$2, { type: "clear" })]),
+					_: 1
+				}, 8, ["label"])) : createCommentVNode("v-if", true)], 14, _hoisted_1)]),
+				_: 1
+			}, 8, [
+				"class",
+				"style",
+				"label",
+				"description",
+				"width",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"label-tooltip",
+				"status",
+				"status-variant"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Dialog/index.d.ts

@@ -1,2 +1,2 @@
-import { a as _default, c as DialogPadding, d as DialogPurpose, f as DialogVariant, i as _default$1, l as DialogPosition, n as ImperativeDialogReturn, o as DialogBlockPosition, r as useImperativeDialog, s as DialogHeaderProps, t as ImperativeDialogOptions, u as DialogProps } from "../index-CqE4Bf3Q.js";
+import { a as _default, c as DialogPadding, d as DialogPurpose, f as DialogVariant, i as _default$1, l as DialogPosition, n as ImperativeDialogReturn, o as DialogBlockPosition, r as useImperativeDialog, s as DialogHeaderProps, t as ImperativeDialogOptions, u as DialogProps } from "../index-Ds201-d2.js";
 export { _default as Dialog, type DialogBlockPosition, _default$1 as DialogHeader, type DialogHeaderProps, type DialogPadding, type DialogPosition, type DialogProps, type DialogPurpose, type DialogVariant, type ImperativeDialogOptions, type ImperativeDialogReturn, useImperativeDialog };

package/dist/Dialog/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main } from "../Dialog-FGHfDu5M.js";
-import { n as _sfc_main$1, t as useImperativeDialog } from "../Dialog-BiOSKQso.js";
+import { t as _sfc_main } from "../Dialog-fhyxB00e.js";
+import { n as _sfc_main$1, t as useImperativeDialog } from "../Dialog-Dce4Y97V.js";
 export { _sfc_main as Dialog, _sfc_main$1 as DialogHeader, useImperativeDialog };

package/dist/{Dialog-BiOSKQso.js → Dialog-Dce4Y97V.js}

@@ -1,13 +1,14 @@
-import { t as _sfc_main$1 } from "./IconButton-DDNgNl7B.js";
-import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$2 } from "./Dialog-FGHfDu5M.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, h, inject, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderSlot, shallowRef, toDisplayString, useAttrs, useId, useSlots, withCtx } from "vue";
+import { t as _sfc_main$1 } from "./IconButton-DI-XBbtV.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$2 } from "./Dialog-fhyxB00e.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, inject, mergeProps, normalizeClass, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderSlot, shallowRef, toDisplayString, useAttrs, useId, useSlots, withCtx } from "vue";
 import "../styles/dialog-header.css";
 //#region src/Dialog/DialogHeader.vue
 const _hoisted_1 = {
 	key: 0,
-	class: "astryx-dialog-header__actions"
+	class: "astryx-dialog-header__actions astryx-dialog-header-start-content"
 };
-const _hoisted_2 = { class: "astryx-dialog-header__title-block" };
+const _hoisted_2 = { class: "astryx-dialog-header__title-block astryx-dialog-header-title-block" };
 const _hoisted_3 = ["id", "data-dialog-default-focus"];
 const _hoisted_4 = {
 	key: 0,
@@ -24,11 +25,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		endContentEdgeCompensation: { default: void 0 },
 		hasDivider: {
 			type: Boolean,
 			default: false
 		},
-		closeButtonLabel: { default: "Close" }
+		closeButtonLabel: { default: void 0 }
 	},
 	emits: ["openChange"],
 	setup(__props, { emit: __emit }) {
@@ -36,11 +38,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const slots = useSlots();
 		const attrs = useAttrs();
+		const messages = useAstryxMessages();
 		const dialog = inject(DIALOG_CONTEXT_KEY, null);
 		const fallbackTitleId = `astryx-dialog-header-title-${useId()}`;
 		const titleId = computed(() => dialog?.titleId ?? fallbackTitleId);
 		const defaultFocusAttr = computed(() => dialog?.isInline.value ? void 0 : "");
-		const hasSubtitle = computed(() => props.subtitle != null && props.subtitle !== "");
+		const showSubtitle = computed(() => slots.subtitle != null || props.subtitle != null && props.subtitle !== "");
+		const closeLabel = computed(() => props.closeButtonLabel ?? messages.value.dialog.close);
+		const compensateBlock = computed(() => {
+			const axis = props.endContentEdgeCompensation;
+			if (axis == null) return props.hasCloseButton;
+			return axis === "block" || axis === "all";
+		});
+		const compensateInline = computed(() => {
+			const axis = props.endContentEdgeCompensation;
+			if (axis == null) return props.hasCloseButton;
+			return axis === "inline" || axis === "all";
+		});
 		onMounted(() => {
 			dialog?.registerTitle(true);
 		});
@@ -60,19 +74,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					class: "astryx-dialog-header__title",
 					tabindex: "-1",
 					"data-dialog-default-focus": defaultFocusAttr.value
-				}, toDisplayString(__props.title), 9, _hoisted_3), hasSubtitle.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.subtitle), 1)) : createCommentVNode("v-if", true)]),
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 8, _hoisted_3), showSubtitle.value ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "subtitle", {}, () => [createTextVNode(toDisplayString(__props.subtitle), 1)])])) : createCommentVNode("v-if", true)]),
 				slots.endContent || __props.hasCloseButton ? (openBlock(), createElementBlock("div", {
 					key: 1,
-					class: normalizeClass(["astryx-dialog-header__actions", { "astryx-dialog-header__actions--compensated": __props.hasCloseButton }])
+					class: normalizeClass(["astryx-dialog-header__actions astryx-dialog-header-end-content", {
+						"astryx-dialog-header__actions--compensate-block": compensateBlock.value,
+						"astryx-dialog-header__actions--compensate-inline": compensateInline.value
+					}])
 				}, [renderSlot(_ctx.$slots, "endContent"), __props.hasCloseButton ? (openBlock(), createBlock(_sfc_main$1, {
 					key: 0,
 					class: "astryx-dialog-header__close",
 					variant: "ghost",
-					label: __props.closeButtonLabel,
+					label: closeLabel.value,
 					onClick: _cache[0] || (_cache[0] = ($event) => emit("openChange", false))
 				}, {
 					default: withCtx(() => [..._cache[1] || (_cache[1] = [createElementVNode("svg", {
-						class: "astryx-dialog-header__close-icon",
+						class: "astryx-dialog-header__close-icon astryx-dialog-header-close-icon",
 						viewBox: "0 0 20 20",
 						width: "20",
 						height: "20",