@astryx-vue/core 0.1.3 → 0.2.1

package/dist/Table/index.js

@@ -1,2 +1,2 @@
-import { C as paginateData, D as sortRows, E as resolveColumnWidths, S as generateColumns, T as proportional, _ as useTableColumnSettings, a as _sfc_main$3, b as capitalize, c as _sfc_main, d as useTableSelection, f as useTableSelectionState, g as useTableFiltering, h as useTableFilterState, i as _sfc_main$4, l as useTableSortable, m as applyTableFilters, n as _sfc_main$6, o as _sfc_main$2, p as useTablePagination, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableSortableState, v as useTableColumnSettingsState, w as pixel, x as cellText, y as useTableColumnResize } from "../Table-7qRmlIQd.js";
+import { C as paginateData, D as sortRows, E as resolveColumnWidths, S as generateColumns, T as proportional, _ as useTableColumnSettings, a as _sfc_main$3, b as capitalize, c as _sfc_main, d as useTableSelection, f as useTableSelectionState, g as useTableFiltering, h as useTableFilterState, i as _sfc_main$4, l as useTableSortable, m as applyTableFilters, n as _sfc_main$6, o as _sfc_main$2, p as useTablePagination, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main$7, u as useTableSortableState, v as useTableColumnSettingsState, w as pixel, x as cellText, y as useTableColumnResize } from "../Table-DwehtMap.js";
 export { _sfc_main as Table, _sfc_main$1 as TableBody, _sfc_main$2 as TableCell, _sfc_main$3 as TableFooter, _sfc_main$4 as TableHeader, _sfc_main$5 as TableHeaderCell, _sfc_main$6 as TableRow, _sfc_main$7 as TableSelectionToolbar, applyTableFilters, capitalize, cellText, generateColumns, paginateData, paginateData as paginateTableData, pixel, proportional, resolveColumnWidths, sortRows, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };

package/dist/{Table-7qRmlIQd.js → Table-DwehtMap.js}

@@ -1,11 +1,11 @@
 import { t as _sfc_main$10 } from "./Button-DrqeomlE.js";
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.js";
 import { t as _sfc_main$11 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$12 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$12 } from "./Icon-Bku25g_K.js";
 import { t as _sfc_main$13 } from "./CheckboxInput-CMsEE1_4.js";
 import { t as _sfc_main$14 } from "./Popover-Crhk9PNP.js";
-import { t as _sfc_main$15 } from "./Pagination-DXfgMUKJ.js";
-import { t as _sfc_main$16 } from "./Selector-DlZpQh42.js";
+import { t as _sfc_main$15 } from "./Pagination-BpGXPmc7.js";
+import { t as _sfc_main$16 } from "./Selector-DkJOLZSR.js";
 import { t as _sfc_main$17 } from "./TextInput-BasnjVvy.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx } from "vue";
 import "../styles/table.css";

package/dist/Text/index.d.ts

@@ -1,2 +1,3 @@
-import { a as TextProps, c as TextWeight, i as TextDisplay, n as TextAs, o as TextSize, r as TextColor, s as TextType, t as _default } from "../index-BzqRns96.js";
-export { _default as Text, type TextAs, type TextColor, type TextDisplay, type TextProps, type TextSize, type TextType, type TextWeight };
+import { a as TextSize, c as TextWordBreak, i as TextProps, l as TextWrap, n as TextColor, o as TextType, r as TextDisplay, s as TextWeight, t as TextAs } from "../types-Bt-lSgYX.js";
+import { t as _default } from "../index-Cm_TiLXU.js";
+export { _default as Text, type TextAs, type TextColor, type TextDisplay, type TextProps, type TextSize, type TextType, type TextWeight, type TextWordBreak, type TextWrap };

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Text-CKd7e3gK.js";
+import { t as _sfc_main } from "../Text-BHVghsWo.js";
 export { _sfc_main as Text };

package/dist/{Text-CKd7e3gK.js → Text-BHVghsWo.js}

@@ -8,19 +8,29 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		size: {},
 		color: { default: "primary" },
 		weight: {},
+		textWrap: {},
+		wordBreak: {},
+		hasStrikethrough: { type: Boolean },
+		hasTabularNumbers: { type: Boolean },
 		display: { default: "inline" },
 		as: { default: "span" },
 		maxLines: { default: 0 }
 	},
 	setup(__props) {
 		const props = __props;
+		const weight = computed(() => props.weight === "normal" ? "regular" : props.weight);
+		const isBlock = computed(() => props.display === "block" || props.maxLines > 0);
 		const classes = computed(() => [
 			"astryx-text",
 			`astryx-text--type-${props.type}`,
 			props.size && `astryx-text--size-${props.size}`,
 			`astryx-text--color-${props.color}`,
-			props.weight && `astryx-text--weight-${props.weight}`,
-			props.display === "block" && "astryx-text--block",
+			weight.value && `astryx-text--weight-${weight.value}`,
+			props.textWrap && `astryx-text--wrap-${props.textWrap}`,
+			props.wordBreak && `astryx-text--word-${props.wordBreak}`,
+			props.hasStrikethrough && "astryx-text--strike",
+			props.hasTabularNumbers && "astryx-text--tabular",
+			isBlock.value && "astryx-text--block",
 			props.maxLines === 1 && "astryx-text--truncate-single",
 			props.maxLines > 1 && "astryx-text--truncate-multi"
 		]);

package/dist/TextArea/index.d.ts

@@ -1,2 +1,2 @@
-import { Ct as TextAreaSize, Dt as TextAreaWrap, Et as TextAreaStatusType, St as TextAreaResize, Tt as TextAreaStatus, _t as _default, bt as TextAreaEmits, vt as TextAreaChangeAction, wt as TextAreaSlots, xt as TextAreaProps, yt as TextAreaChangeEvent } from "../index-Df2YvC8o.js";
+import { Ct as TextAreaSize, Dt as TextAreaWrap, Et as TextAreaStatusType, St as TextAreaResize, Tt as TextAreaStatus, _t as _default, bt as TextAreaEmits, vt as TextAreaChangeAction, wt as TextAreaSlots, xt as TextAreaProps, yt as TextAreaChangeEvent } from "../index-DeOftUMq.js";
 export { _default as TextArea, type TextAreaChangeAction, type TextAreaChangeEvent, type TextAreaEmits, type TextAreaProps, type TextAreaResize, type TextAreaSize, type TextAreaSlots, type TextAreaStatus, type TextAreaStatusType, type TextAreaWrap };

package/dist/TextArea/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TextArea-Cv9UVbzS.js";
+import { t as _sfc_main } from "../TextArea-CPwSytdO.js";
 export { _sfc_main as TextArea };

package/dist/{TextArea-Cv9UVbzS.js → TextArea-CPwSytdO.js}

@@ -93,8 +93,9 @@ const _hoisted_3 = [
 	"aria-describedby",
 	"data-autofocus"
 ];
-const _hoisted_4 = {
-	key: 1,
+const _hoisted_4 = ["data-over"];
+const _hoisted_5 = {
+	key: 2,
 	class: "astryx-text-area-end"
 };
 const _sfc_main = /*@__PURE__*/ defineComponent({
@@ -314,9 +315,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							onFocus: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onTooltipPointerEnter && unref(disabledTooltip).onTooltipPointerEnter(...args)),
 							onBlur: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args))
 						}), null, 16, _hoisted_3),
-						_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true),
+						__props.maxlength != null ? (openBlock(), createElementBlock("span", {
+							key: 1,
+							class: "astryx-text-area-count",
+							"data-over": unref(action).value.value.length > Number(__props.maxlength) || void 0
+						}, toDisplayString(unref(action).value.value.length) + " / " + toDisplayString(__props.maxlength), 9, _hoisted_4)) : createCommentVNode("v-if", true),
+						_ctx.$slots.end ? (openBlock(), createElementBlock("span", _hoisted_5, [renderSlot(_ctx.$slots, "end")])) : createCommentVNode("v-if", true),
 						__props.hasClear && unref(action).value.value && !__props.isDisabled && !__props.isReadOnly ? (openBlock(), createBlock(_sfc_main$5, {
-							key: 2,
+							key: 3,
 							class: "astryx-text-area-clear-button",
 							variant: "ghost",
 							size: "sm",
@@ -327,12 +333,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							_: 1
 						}, 8, ["label"])) : createCommentVNode("v-if", true),
 						busy.value ? (openBlock(), createBlock(_sfc_main$2, {
-							key: 3,
+							key: 4,
 							class: "astryx-text-area-spinner",
 							label: __props.loadingLabel
 						}, null, 8, ["label"])) : createCommentVNode("v-if", true),
 						__props.status?.message && __props.statusVariant === "tooltip" ? (openBlock(), createBlock(_sfc_main$6, {
-							key: 4,
+							key: 5,
 							text: __props.status.message,
 							type: __props.status.type
 						}, null, 8, ["text", "type"])) : createCommentVNode("v-if", true)

package/dist/TextInput/index.d.ts

@@ -1,2 +1,2 @@
-import { ct as TextInputChangeAction, dt as TextInputProps, ft as TextInputSize, gt as TextInputType, ht as TextInputStatusType, lt as TextInputChangeEvent, mt as TextInputStatus, pt as TextInputSlots, st as _default, ut as TextInputEmits } from "../index-Df2YvC8o.js";
+import { ct as TextInputChangeAction, dt as TextInputProps, ft as TextInputSize, gt as TextInputType, ht as TextInputStatusType, lt as TextInputChangeEvent, mt as TextInputStatus, pt as TextInputSlots, st as _default, ut as TextInputEmits } from "../index-DeOftUMq.js";
 export { _default as TextInput, type TextInputChangeAction, type TextInputChangeEvent, type TextInputEmits, type TextInputProps, type TextInputSize, type TextInputSlots, type TextInputStatus, type TextInputStatusType, type TextInputType };

package/dist/Theme/index.d.ts

@@ -0,0 +1,2 @@
+import { _ as ThemeSurfaceInput, a as _default$1, c as isDefinedTheme, d as DefineThemeInput, f as MediaThemeMode, g as ThemeProps, h as ThemeMode, i as useMediaTheme, l as neutralTheme, m as ThemeDefinition, n as useTheme, o as _default, p as MediaThemeProps, r as UseMediaThemeReturn, s as defineTheme, t as UseThemeReturn, u as normalizeTokenName, v as ThemeTokenValue, y as ThemeTokens } from "../index-CRizexSC.js";
+export { type DefineThemeInput, _default as MediaTheme, type MediaThemeMode, type MediaThemeProps, _default$1 as Theme, type ThemeDefinition, type ThemeMode, type ThemeProps, type ThemeSurfaceInput, type ThemeTokenValue, type ThemeTokens, type UseMediaThemeReturn, type UseThemeReturn, defineTheme, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };

package/dist/Theme/index.js

@@ -0,0 +1,2 @@
+import { a as defineTheme, c as normalizeTokenName, i as _sfc_main, n as useMediaTheme, o as isDefinedTheme, r as _sfc_main$1, s as neutralTheme, t as useTheme } from "../Theme-BuUiiJNr.js";
+export { _sfc_main as MediaTheme, _sfc_main$1 as Theme, defineTheme, isDefinedTheme, neutralTheme, normalizeTokenName, useMediaTheme, useTheme };

package/dist/Theme-BuUiiJNr.js

@@ -0,0 +1,429 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { i as syntaxThemeStyle } from "./syntaxTheme-ClpWALZX.js";
+import { a as resolveLightDark, i as readColorMode, n as themeContextKey, o as syntaxThemeKey, r as themeNestingKey, t as mediaThemeKey } from "./context-O2Vb8cJl.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, unref, useAttrs, useTemplateRef, watch } from "vue";
+import "../styles/media-theme.css";
+import "../styles/theme.css";
+//#region src/Theme/defineTheme.ts
+const THEME_NAME = /^[a-z0-9][a-z0-9-]*$/i;
+const UNSAFE_TOKEN = /[;{}<>\n\r]/;
+function isDefinedTheme(value) {
+	return !!value && typeof value === "object" && value.__astryxTheme === true;
+}
+/** Accept `--color-accent`, `--astryx-color-accent`, or `color-accent`. */
+function normalizeTokenName(name) {
+	const trimmed = name.trim();
+	if (trimmed.startsWith("--astryx-")) return trimmed;
+	if (trimmed.startsWith("--")) return `--astryx-${trimmed.slice(2)}`;
+	return `--astryx-${trimmed}`;
+}
+function assertTokenValue(value, name) {
+	if (UNSAFE_TOKEN.test(value)) throw new Error(`Theme token ${name} has an unsupported value.`);
+}
+function isTokenPair(value) {
+	return Array.isArray(value);
+}
+function resolveTokenMap(tokens) {
+	const resolved = {};
+	if (!tokens) return resolved;
+	for (const [name, value] of Object.entries(tokens)) {
+		if (value == null) continue;
+		const key = normalizeTokenName(name);
+		if (isTokenPair(value)) {
+			const [light, dark] = value;
+			assertTokenValue(light, key);
+			assertTokenValue(dark, key);
+			resolved[key] = `light-dark(${light}, ${dark})`;
+			continue;
+		}
+		assertTokenValue(value, key);
+		resolved[key] = value;
+	}
+	return resolved;
+}
+/**
+* Create a theme object that `Theme` can apply to a subtree.
+*
+* Token names are the upstream names (`--color-accent`) or this package's
+* prefixed names (`--astryx-color-accent`). A `[light, dark]` tuple becomes
+* `light-dark()`.
+*/
+function defineTheme(input) {
+	if (!THEME_NAME.test(input.name)) throw new Error(`Theme name "${input.name}" must use letters, numbers, and hyphens.`);
+	if (input.extends != null && !isDefinedTheme(input.extends)) throw new Error("defineTheme extends must be a theme returned by defineTheme().");
+	const base = input.extends;
+	return {
+		__astryxTheme: true,
+		name: input.name,
+		tokens: {
+			...base?.tokens,
+			...resolveTokenMap(input.tokens)
+		},
+		onDark: {
+			...base?.onDark,
+			...resolveTokenMap(input.onDark?.tokens)
+		},
+		onLight: {
+			...base?.onLight,
+			...resolveTokenMap(input.onLight?.tokens)
+		},
+		syntax: input.syntax ?? base?.syntax
+	};
+}
+/** Neutral, with no token overrides. Colors come from `@astryx-vue/themes/neutral.css`. */
+const neutralTheme = defineTheme({ name: "neutral" });
+//#endregion
+//#region src/Theme/themeStyle.ts
+/**
+* Aliases declared on `:root` are substituted there. A later override of the
+* semantic token does not flow through that already-substituted value, so the
+* alias has to be written again on the element that sets the semantic token.
+*
+* Card background and border are not aliases: Neutral paints them with its own
+* stops, and they follow the semantic token only when a theme sets one.
+*/
+const COMPONENT_BRIDGES = {
+	"--astryx-color-text-primary": [
+		"--astryx-text-foreground",
+		"--astryx-heading-foreground",
+		"--astryx-button-secondary-foreground",
+		"--astryx-button-ghost-foreground"
+	],
+	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
+	"--astryx-color-accent": ["--astryx-button-primary-background", "--astryx-button-focus"],
+	"--astryx-color-on-accent": ["--astryx-button-primary-foreground"],
+	"--astryx-color-neutral": ["--astryx-button-secondary-background"],
+	"--astryx-color-icon-primary": ["--astryx-icon-primary-foreground"],
+	"--astryx-color-background-card": ["--astryx-card-background"],
+	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
+	"--astryx-color-border": ["--astryx-card-border"]
+};
+/** Surfaces keep their own button treatment. Text aliases still follow onDark and onLight. */
+const SURFACE_BRIDGES = {
+	"--astryx-color-text-primary": ["--astryx-text-foreground", "--astryx-heading-foreground"],
+	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
+	"--astryx-color-background-card": ["--astryx-card-background"],
+	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
+	"--astryx-color-border": ["--astryx-card-border"]
+};
+function bridgeComponentTokens(tokens, bridges = COMPONENT_BRIDGES) {
+	const style = { ...tokens };
+	for (const [source, targets] of Object.entries(bridges)) {
+		const value = tokens[source];
+		if (!value) continue;
+		for (const target of targets) style[target] = value;
+	}
+	return style;
+}
+/** Token bridges for an inverted surface. Button colors stay with MediaTheme. */
+function bridgeSurfaceTokens(tokens) {
+	return bridgeComponentTokens(tokens, SURFACE_BRIDGES);
+}
+/** Inline custom properties for a theme subtree, including syntax colors. */
+function themeStyle(theme) {
+	const style = bridgeComponentTokens(theme.tokens);
+	if (theme.syntax) Object.assign(style, syntaxThemeStyle(theme.syntax));
+	return style;
+}
+//#endregion
+//#region src/Theme/contrast.ts
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+)(%)?)?\s*\)$/i;
+function parseColor(input) {
+	const value = input.trim().toLowerCase();
+	if (value === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	};
+	const hex = HEX.exec(value);
+	if (hex?.[1]) {
+		const raw = hex[1];
+		const expanded = raw.length === 3 ? raw.split("").map((part) => part + part).join("") : raw;
+		const channels = expanded.length === 6 ? `${expanded}ff` : expanded;
+		return {
+			r: Number.parseInt(channels.slice(0, 2), 16),
+			g: Number.parseInt(channels.slice(2, 4), 16),
+			b: Number.parseInt(channels.slice(4, 6), 16),
+			a: Number.parseInt(channels.slice(6, 8), 16) / 255
+		};
+	}
+	const rgb = RGB.exec(value);
+	if (!rgb) return null;
+	const alpha = rgb[4] == null ? 1 : rgb[5] === "%" ? Number.parseFloat(rgb[4]) / 100 : Number.parseFloat(rgb[4]);
+	return {
+		r: Number.parseFloat(rgb[1] ?? "0"),
+		g: Number.parseFloat(rgb[2] ?? "0"),
+		b: Number.parseFloat(rgb[3] ?? "0"),
+		a: alpha
+	};
+}
+function channel(value) {
+	const scaled = value / 255;
+	return scaled <= .04045 ? scaled / 12.92 : ((scaled + .055) / 1.055) ** 2.4;
+}
+function relativeLuminance(color) {
+	return .2126 * channel(color.r) + .7152 * channel(color.g) + .0722 * channel(color.b);
+}
+/** WCAG contrast ratio. 1 is no contrast. */
+function contrastRatio(foreground, background) {
+	const first = relativeLuminance(foreground);
+	const second = relativeLuminance(background);
+	const lighter = Math.max(first, second);
+	const darker = Math.min(first, second);
+	return (lighter + .05) / (darker + .05);
+}
+const ON_DARK = {
+	r: 255,
+	g: 255,
+	b: 255,
+	a: 1
+};
+const ON_LIGHT = {
+	r: 23,
+	g: 23,
+	b: 23,
+	a: 1
+};
+/**
+* Choose a media surface from the painted background.
+*
+* `off` means the ambient text already reads on that background at 3:1, so no
+* inverted context is needed. `null` means the background is too transparent
+* to judge.
+*/
+function pickMediaMode(background, ambientText) {
+	if (background.a < .2) return null;
+	if (contrastRatio(ambientText, background) >= 3) return "off";
+	return contrastRatio(ON_DARK, background) >= contrastRatio(ON_LIGHT, background) ? "dark" : "light";
+}
+//#endregion
+//#region src/Theme/useAutoMediaMode.ts
+function readPaintedBackground(start) {
+	let current = start;
+	for (let depth = 0; current && depth < 6; depth += 1) {
+		const style = getComputedStyle(current);
+		const background = parseColor(style.backgroundColor);
+		if (background && background.a >= .2) return {
+			background,
+			ambient: parseColor(style.color) ?? {
+				r: 23,
+				g: 23,
+				b: 23,
+				a: 1
+			}
+		};
+		current = current.parentElement;
+	}
+	return null;
+}
+/**
+* Measure the element that actually paints behind a `display: contents` media
+* theme. Returns `null` when the surface cannot be read.
+*/
+function useAutoMediaMode(element, enabled) {
+	const detected = ref(null);
+	function measure() {
+		if (!enabled.value || typeof getComputedStyle !== "function") {
+			detected.value = null;
+			return;
+		}
+		const parent = element.value?.parentElement;
+		if (!parent) {
+			detected.value = null;
+			return;
+		}
+		const painted = readPaintedBackground(parent);
+		detected.value = painted ? pickMediaMode(painted.background, painted.ambient) : null;
+	}
+	onMounted(measure);
+	watch(enabled, measure);
+	return detected;
+}
+//#endregion
+//#region src/Theme/MediaTheme.vue
+const _hoisted_1$1 = ["data-astryx-media"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxMediaTheme",
+	inheritAttrs: false,
+	__name: "MediaTheme",
+	props: {
+		mode: {},
+		fallback: { default: "dark" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const theme = inject(themeContextKey, null);
+		const detected = useAutoMediaMode(root, computed(() => props.mode === "auto"));
+		const resolved = computed(() => {
+			if (props.mode === "off") return "off";
+			if (props.mode === "auto") return detected.value ?? props.fallback;
+			return props.mode;
+		});
+		provide(mediaThemeKey, resolved);
+		const rootStyle = computed(() => {
+			const surface = resolved.value === "dark" ? theme?.value.theme.onDark : resolved.value === "light" ? theme?.value.theme.onLight : void 0;
+			if (!surface) return {};
+			return bridgeSurfaceTokens(surface);
+		});
+		__expose({ element: root });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["astryx-media-theme", unref(attrs).class]),
+				"data-astryx-media": resolved.value === "off" ? void 0 : resolved.value,
+				style: normalizeStyle([rootStyle.value, unref(attrs).style])
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Theme/useThemeRootSync.ts
+const entries = [];
+let baseSnapshot = null;
+function capture() {
+	const root = document.documentElement;
+	return {
+		theme: root.getAttribute("data-astryx-theme"),
+		mode: root.getAttribute("data-astryx-color-mode")
+	};
+}
+function writeAttribute(name, value) {
+	const root = document.documentElement;
+	if (value == null) root.removeAttribute(name);
+	else root.setAttribute(name, value);
+}
+function apply(entry) {
+	const root = document.documentElement;
+	root.setAttribute("data-astryx-theme", entry.name());
+	const mode = entry.mode();
+	if (mode === "light" || mode === "dark") root.setAttribute("data-astryx-color-mode", mode);
+	else root.removeAttribute("data-astryx-color-mode");
+}
+function restoreBase() {
+	if (!baseSnapshot) return;
+	writeAttribute("data-astryx-theme", baseSnapshot.theme);
+	writeAttribute("data-astryx-color-mode", baseSnapshot.mode);
+	baseSnapshot = null;
+}
+/**
+* The outermost Theme mirrors its name and mode onto `documentElement`, so
+* portaled UI and browser chrome see the same theme. Nested themes do not.
+*/
+function useThemeRootSync(isNested, themeName, mode) {
+	if (isNested || typeof document === "undefined") return;
+	const entry = {
+		name: themeName,
+		mode
+	};
+	onMounted(() => {
+		if (entries.length === 0) baseSnapshot = capture();
+		entries.push(entry);
+		apply(entry);
+	});
+	watch(() => [themeName(), mode()], () => {
+		if (entries[entries.length - 1] === entry) apply(entry);
+	});
+	onBeforeUnmount(() => {
+		const index = entries.lastIndexOf(entry);
+		if (index >= 0) entries.splice(index, 1);
+		const top = entries[entries.length - 1];
+		if (top) apply(top);
+		else restoreBase();
+	});
+}
+//#endregion
+//#region src/Theme/Theme.vue
+const _hoisted_1 = ["data-astryx-theme", "data-astryx-color-mode"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTheme",
+	inheritAttrs: false,
+	__name: "Theme",
+	props: {
+		theme: {},
+		mode: { default: "system" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const isNested = inject(themeNestingKey, false);
+		const parentSyntax = inject(syntaxThemeKey, null);
+		provide(themeNestingKey, true);
+		provide(themeContextKey, computed(() => ({
+			theme: props.theme,
+			mode: props.mode
+		})));
+		if (parentSyntax || props.theme.syntax) provide(syntaxThemeKey, computed(() => props.theme.syntax ?? parentSyntax?.value ?? null));
+		useThemeRootSync(isNested, () => props.theme.name, () => props.mode);
+		const colorScheme = computed(() => {
+			if (props.mode === "dark") return "dark";
+			if (props.mode === "light") return "light";
+			return "light dark";
+		});
+		const rootStyle = computed(() => ({
+			colorScheme: colorScheme.value,
+			...themeStyle(props.theme)
+		}));
+		__expose({ element: root });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["astryx-theme", unref(attrs).class]),
+				"data-astryx-theme": __props.theme.name,
+				"data-astryx-color-mode": __props.mode === "system" ? void 0 : __props.mode,
+				style: normalizeStyle([rootStyle.value, unref(attrs).style])
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/Theme/useMediaTheme.ts
+/** Read the nearest MediaTheme. Outside one, the mode is `off`. */
+function useMediaTheme() {
+	return { mode: inject(mediaThemeKey, null) ?? computed(() => "off") };
+}
+//#endregion
+//#region src/Theme/useTheme.ts
+function readDocumentToken(name, mode) {
+	if (typeof document === "undefined") return "";
+	const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	return raw ? resolveLightDark(raw, mode) : "";
+}
+/**
+* Read the nearest theme. Outside a `Theme`, the name is `neutral` and tokens
+* are read from the document's custom properties.
+*/
+function useTheme() {
+	const context = inject(themeContextKey, null);
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+	const mode = computed(() => {
+		const requested = context?.value.mode;
+		if (requested === "light" || requested === "dark") return requested;
+		return readColorMode(prefersDark.value);
+	});
+	const name = computed(() => context?.value.theme.name ?? "neutral");
+	const tokens = computed(() => {
+		const source = context?.value.theme.tokens ?? {};
+		const resolved = {};
+		for (const [key, value] of Object.entries(source)) resolved[key] = resolveLightDark(value, mode.value);
+		return resolved;
+	});
+	function token(tokenName) {
+		const key = normalizeTokenName(tokenName);
+		return tokens.value[key] ?? readDocumentToken(key, mode.value);
+	}
+	return {
+		name,
+		mode,
+		token,
+		tokens
+	};
+}
+//#endregion
+export { defineTheme as a, normalizeTokenName as c, _sfc_main$1 as i, useMediaTheme as n, isDefinedTheme as o, _sfc_main as r, neutralTheme as s, useTheme as t };

package/dist/Thumbnail/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Thumbnail-BWVzLLyI.js";
+import { t as _sfc_main } from "../Thumbnail-CAOYds8t.js";
 export { _sfc_main as Thumbnail };

package/dist/{Thumbnail-BWVzLLyI.js → Thumbnail-CAOYds8t.js}

@@ -1,8 +1,8 @@
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
-import { t as _sfc_main$1 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$2 } from "./Icon-5MdZQ18k.js";
-import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$4 } from "./Tooltip-mp0NMh_Y.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.js";
+import { t as _sfc_main$1 } from "./Tooltip-mp0NMh_Y.js";
+import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$3 } from "./Icon-Bku25g_K.js";
+import { t as _sfc_main$4 } from "./Spinner-9cYUCnDy.js";
 import { t as _sfc_main$5 } from "./Skeleton-CrgWxJgr.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, normalizeClass, normalizeStyle, openBlock, ref, unref, watch, withCtx } from "vue";
 import "../styles/thumbnail.css";
@@ -91,7 +91,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("remove", event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$4, {
+			return openBlock(), createBlock(_sfc_main$1, {
 				content: __props.label ?? "",
 				"is-enabled": __props.label != null,
 				"has-hover-indication": false
@@ -120,7 +120,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					}, null, 40, _hoisted_4)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
 						key: 1,
 						radius: 2
-					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(_sfc_main$2, { icon: "image" })])) : createCommentVNode("v-if", true)], 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [showImage.value ? (openBlock(), createElementBlock("img", {
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_5, [createVNode(_sfc_main$3, { icon: "image" })])) : createCommentVNode("v-if", true)], 8, _hoisted_3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [showImage.value ? (openBlock(), createElementBlock("img", {
 						key: 0,
 						class: "astryx-thumbnail__image",
 						src: __props.src,
@@ -131,9 +131,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					}, null, 40, _hoisted_6)) : showSkeleton.value ? (openBlock(), createBlock(_sfc_main$5, {
 						key: 1,
 						radius: 2
-					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$2, { icon: "image" })])) : createCommentVNode("v-if", true)], 64)),
+					})) : showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_7, [createVNode(_sfc_main$3, { icon: "image" })])) : createCommentVNode("v-if", true)], 64)),
 					showImage.value ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("v-if", true),
-					showUpload.value ? (openBlock(), createElementBlock("span", _hoisted_9, [createVNode(_sfc_main$3, {
+					showUpload.value ? (openBlock(), createElementBlock("span", _hoisted_9, [createVNode(_sfc_main$4, {
 						size: "sm",
 						shade: "onMedia"
 					})])) : createCommentVNode("v-if", true),
@@ -141,13 +141,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						key: 4,
 						class: "astryx-thumbnail__remove",
 						"data-reveal": __props.showRemoveOn
-					}, [createVNode(_sfc_main$1, {
+					}, [createVNode(_sfc_main$2, {
 						variant: "secondary",
 						size: "sm",
 						label: unref(messages).thumbnail.remove(accessibleName.value),
 						onClick: onRemove
 					}, {
-						default: withCtx(() => [createVNode(_sfc_main$2, {
+						default: withCtx(() => [createVNode(_sfc_main$3, {
 							icon: "close",
 							size: "sm"
 						})]),

package/dist/{TimeField-l3QzU6vC.js → TimeField-BGbxCoKU.js}

@@ -1,8 +1,8 @@
 import { c as useCoarsePointer, i as parseDisplayTime, o as resolveTimeSurface, r as isTimeInRange, s as shiftTime, t as formatDisplayTime } from "./useTimeValue-DWk6oTAZ.js";
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-DzcK4T_C.js";
 import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
 import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$3 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$3 } from "./Icon-Bku25g_K.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeModels, openBlock, shallowRef, useModel, watch, withCtx } from "vue";
 import "../styles/bordered-control.css";
 import "../styles/time-input.css";

package/dist/TimeInput/index.d.ts

@@ -1,2 +1,2 @@
-import { at as TimeInputProps, it as TimeInputEmits, ot as TimeInputSize, rt as _default } from "../index-Df2YvC8o.js";
+import { at as TimeInputProps, it as TimeInputEmits, ot as TimeInputSize, rt as _default } from "../index-DeOftUMq.js";
 export { _default as TimeInput, type TimeInputEmits, type TimeInputProps, type TimeInputSize };

package/dist/TimeInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../TimeInput-OkgX-xbQ.js";
+import { t as _sfc_main } from "../TimeInput-DJP3l4ZS.js";
 export { _sfc_main as TimeInput };