@astryx-vue/core 0.1.3 → 0.2.0

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-Dc1UpykG.js";
 export { _sfc_main as Thumbnail };

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

@@ -1,6 +1,6 @@
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.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$2 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
 import { t as _sfc_main$4 } from "./Tooltip-mp0NMh_Y.js";
 import { t as _sfc_main$5 } from "./Skeleton-CrgWxJgr.js";

package/dist/{TimeField-l3QzU6vC.js → TimeField-C7t9Knq9.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-Dbo22sck.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-Dfr4k6-S.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-C6iJwTL0.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-BXxCOY98.js";
 export { _sfc_main as TimeInput };

package/dist/{TimeInput-OkgX-xbQ.js → TimeInput-BXxCOY98.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$1 } from "./Field-8zRxzDHE.js";
-import { t as _sfc_main$2 } from "./TimeField-l3QzU6vC.js";
+import { t as _sfc_main$2 } from "./TimeField-C7t9Knq9.js";
 import { computed, createBlock, createVNode, defineComponent, mergeModels, openBlock, useId, useModel, withCtx } from "vue";
 //#region src/TimeInput/TimeInput.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({

package/dist/Timer/index.d.ts

@@ -0,0 +1,2 @@
+import { a as TimerFormat, i as TimerType, n as TimerColor, o as TimerPresentation, r as TimerProps, s as getPresentation, t as _default } from "../index-BMrggCw-.js";
+export { _default as Timer, type TimerColor, type TimerFormat, type TimerPresentation, type TimerProps, type TimerType, getPresentation };

package/dist/Timer/index.js

@@ -0,0 +1,2 @@
+import { n as getPresentation, t as _sfc_main } from "../Timer-B7GV6hqd.js";
+export { _sfc_main as Timer, getPresentation };

package/dist/Timer-B7GV6hqd.js

@@ -0,0 +1,134 @@
+import { t as _sfc_main$1 } from "./Text-BHVghsWo.js";
+import { computed, createBlock, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/timer.css";
+//#region src/Timer/format.ts
+const ONE_SECOND_MS = 1e3;
+const ONE_MINUTE_MS = 60 * ONE_SECOND_MS;
+const ONE_HOUR_SECONDS = 3600;
+const MAX_TIMEOUT_MS = 2147483647;
+function pad(value) {
+	return String(value).padStart(2, "0");
+}
+function resolveTimerFormat(format) {
+	return format === "clock" ? "clock" : "elapsed";
+}
+function getElapsedMilliseconds(now, startTime) {
+	return Math.max(0, now - startTime);
+}
+function getPresentation(elapsedMilliseconds, format) {
+	const elapsedSeconds = Math.floor(elapsedMilliseconds / ONE_SECOND_MS);
+	if (format === "clock") {
+		const hours = Math.floor(elapsedSeconds / ONE_HOUR_SECONDS);
+		const minutes = Math.floor(elapsedSeconds % ONE_HOUR_SECONDS / 60);
+		const seconds = elapsedSeconds % 60;
+		return {
+			dateTime: `PT${elapsedSeconds}S`,
+			text: hours > 0 ? `${String(hours)}:${pad(minutes)}:${pad(seconds)}` : `${String(minutes)}:${pad(seconds)}`
+		};
+	}
+	if (elapsedSeconds < 60) return {
+		dateTime: `PT${elapsedSeconds}S`,
+		text: `${String(elapsedSeconds)}s`
+	};
+	const totalMinutes = Math.floor(elapsedSeconds / 60);
+	if (totalMinutes < 60) return {
+		dateTime: `PT${elapsedSeconds}S`,
+		text: `${String(totalMinutes)}m ${pad(elapsedSeconds % 60)}s`
+	};
+	return {
+		dateTime: `PT${totalMinutes * 60}S`,
+		text: `${String(Math.floor(totalMinutes / 60))}h ${pad(totalMinutes % 60)}m`
+	};
+}
+function getMillisecondsUntilNextChange(now, startTime, elapsedMilliseconds, format) {
+	if (now < startTime) return Math.min(startTime - now + ONE_SECOND_MS, MAX_TIMEOUT_MS);
+	const precision = format === "elapsed" && elapsedMilliseconds >= ONE_HOUR_SECONDS * ONE_SECOND_MS ? ONE_MINUTE_MS : ONE_SECOND_MS;
+	return precision - elapsedMilliseconds % precision;
+}
+//#endregion
+//#region src/Timer/Timer.vue
+const _hoisted_1 = {
+	ref: "time",
+	class: "astryx-timer__time",
+	datetime: "PT0S"
+};
+const _hoisted_2 = ["data-color"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTimer",
+	inheritAttrs: false,
+	__name: "Timer",
+	props: {
+		startTime: {},
+		format: { default: "elapsed" },
+		type: { default: "supporting" },
+		size: {},
+		color: { default: "secondary" },
+		weight: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const timeEl = useTemplateRef("time");
+		const mountTime = Date.now();
+		let timeoutId;
+		const inheritsType = computed(() => props.type === "inherit");
+		const textColor = computed(() => props.color === "disabled" ? "inherit" : props.color);
+		const textType = computed(() => props.type === "inherit" ? "supporting" : props.type);
+		function stop() {
+			if (timeoutId !== void 0) clearTimeout(timeoutId);
+			timeoutId = void 0;
+		}
+		function tick() {
+			const start = props.startTime !== void 0 && Number.isFinite(props.startTime) ? props.startTime : mountTime;
+			const now = Date.now();
+			const elapsed = getElapsedMilliseconds(now, start);
+			const presentation = getPresentation(elapsed, resolveTimerFormat(props.format));
+			const node = timeEl.value;
+			if (node != null) {
+				if (node.textContent !== presentation.text) node.textContent = presentation.text;
+				if (node.dateTime !== presentation.dateTime) node.dateTime = presentation.dateTime;
+			}
+			timeoutId = setTimeout(tick, getMillisecondsUntilNextChange(now, start, elapsed, resolveTimerFormat(props.format)));
+		}
+		function start() {
+			stop();
+			tick();
+		}
+		onMounted(start);
+		watch(() => [props.startTime, props.format], start);
+		onBeforeUnmount(stop);
+		return (_ctx, _cache) => {
+			return !inheritsType.value ? (openBlock(), createBlock(_sfc_main$1, {
+				key: 0,
+				class: normalizeClass(["astryx-timer", _ctx.$attrs.class]),
+				style: normalizeStyle(_ctx.$attrs.style),
+				type: textType.value,
+				size: __props.size,
+				color: textColor.value,
+				weight: __props.weight,
+				"data-color": __props.color,
+				"data-component": "timer"
+			}, {
+				default: withCtx(() => [createElementVNode("time", _hoisted_1, "0s", 512)]),
+				_: 1
+			}, 8, [
+				"class",
+				"style",
+				"type",
+				"size",
+				"color",
+				"weight",
+				"data-color"
+			])) : (openBlock(), createElementBlock("time", {
+				key: 1,
+				ref: "time",
+				class: normalizeClass(["astryx-timer astryx-timer__time", _ctx.$attrs.class]),
+				style: normalizeStyle(_ctx.$attrs.style),
+				"data-color": __props.color,
+				"data-component": "timer",
+				datetime: "PT0S"
+			}, "0s", 14, _hoisted_2));
+		};
+	}
+});
+//#endregion
+export { getPresentation as n, _sfc_main as t };

package/dist/Timestamp/index.d.ts

@@ -1,2 +1,2 @@
-import { $ as formatRelativeTime, G as _default, J as TimestampProps, K as TimestampColor, Q as formatTooltipLines, X as TimestampTooltipFormat, Y as TimestampTooltipEntry, Z as TimestampTooltipLine, et as FormatInstantOptions, nt as formatInstant, q as TimestampFormat, tt as InstantFormat } from "../index-Df2YvC8o.js";
+import { $ as formatRelativeTime, G as _default, J as TimestampProps, K as TimestampColor, Q as formatTooltipLines, X as TimestampTooltipFormat, Y as TimestampTooltipEntry, Z as TimestampTooltipLine, et as FormatInstantOptions, nt as formatInstant, q as TimestampFormat, tt as InstantFormat } from "../index-C6iJwTL0.js";
 export { type FormatInstantOptions, type InstantFormat, _default as Timestamp, type TimestampColor, type TimestampFormat, type TimestampProps, type TimestampTooltipEntry, type TimestampTooltipFormat, type TimestampTooltipLine, formatInstant, formatRelativeTime, formatTooltipLines };

package/dist/Timestamp/index.js

@@ -1,2 +1,2 @@
-import { i as formatInstant, n as formatTooltipLines, r as formatRelativeTime, t as _sfc_main } from "../Timestamp-DUoP9ari.js";
+import { i as formatInstant, n as formatTooltipLines, r as formatRelativeTime, t as _sfc_main } from "../Timestamp-DlZSmgCJ.js";
 export { _sfc_main as Timestamp, formatInstant, formatRelativeTime, formatTooltipLines };

package/dist/{Timestamp-DUoP9ari.js → Timestamp-DlZSmgCJ.js}

@@ -1,7 +1,7 @@
-import { t as _sfc_main$2 } from "./Text-CKd7e3gK.js";
-import { a as useAstryxMessages, i as useAstryxLocale } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$2 } from "./Text-BHVghsWo.js";
+import { a as useAstryxMessages, i as useAstryxLocale } from "./context-Dbo22sck.js";
 import { t as _sfc_main$3 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$4 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$4 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$5 } from "./HoverCard-EhbWaGOW.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
 import "../styles/timestamp.css";

package/dist/ToggleButton/index.d.ts

@@ -1,2 +1,2 @@
-import { A as ToggleButtonElevation, B as ToggleButtonGroupValue, D as _default$1, F as ToggleButtonGroupOrientation, H as ToggleButtonProps, I as ToggleButtonGroupProps, L as ToggleButtonGroupSingleProps, M as ToggleButtonGroupBaseProps, N as ToggleButtonGroupEmits, O as _default, P as ToggleButtonGroupMultipleProps, R as ToggleButtonGroupSlots, U as ToggleButtonSize, V as ToggleButtonPressedChangeHandler, W as ToggleButtonSlots, j as ToggleButtonEmits, k as ToggleButtonChangeAction, z as ToggleButtonGroupType } from "../index-Df2YvC8o.js";
+import { A as ToggleButtonElevation, B as ToggleButtonGroupValue, D as _default$1, F as ToggleButtonGroupOrientation, H as ToggleButtonProps, I as ToggleButtonGroupProps, L as ToggleButtonGroupSingleProps, M as ToggleButtonGroupBaseProps, N as ToggleButtonGroupEmits, O as _default, P as ToggleButtonGroupMultipleProps, R as ToggleButtonGroupSlots, U as ToggleButtonSize, V as ToggleButtonPressedChangeHandler, W as ToggleButtonSlots, j as ToggleButtonEmits, k as ToggleButtonChangeAction, z as ToggleButtonGroupType } from "../index-C6iJwTL0.js";
 export { _default as ToggleButton, _default as default, type ToggleButtonChangeAction, type ToggleButtonElevation, type ToggleButtonEmits, _default$1 as ToggleButtonGroup, type ToggleButtonGroupBaseProps, type ToggleButtonGroupEmits, type ToggleButtonGroupMultipleProps, type ToggleButtonGroupOrientation, type ToggleButtonGroupProps, type ToggleButtonGroupSingleProps, type ToggleButtonGroupSlots, type ToggleButtonGroupType, type ToggleButtonGroupValue, type ToggleButtonPressedChangeHandler, type ToggleButtonProps, type ToggleButtonSize, type ToggleButtonSlots };

package/dist/Token/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-4FM5lQdV.js";
+import { a as TokenProps, i as TokenEmits, n as TOKEN_COLORS, o as TokenSize, r as TokenColor, s as TokenSlots, t as _default } from "../index-BUXNRekN.js";
 export { TOKEN_COLORS, _default as Token, type TokenColor, type TokenEmits, type TokenProps, type TokenSize, type TokenSlots };

package/dist/Token/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main } from "../Token-C4KD0fZD.js";
+import { t as _sfc_main } from "../Token-wt4e80IM.js";
 import { t as TOKEN_COLORS } from "../Token-BdRzlXzm.js";
 export { TOKEN_COLORS, _sfc_main as Token };

package/dist/{Token-C4KD0fZD.js → Token-wt4e80IM.js}

@@ -1,4 +1,4 @@
-import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, useAttrs, withCtx } from "vue";
 import "../styles/token.css";
 import "../styles/visually-hidden-utility.css";

package/dist/Tokenizer/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TokenizerProps, c as TokenizerStatus, i as TokenizerOverflow, n as TokenizerChange, o as TokenizerSize, r as TokenizerEmits, s as TokenizerSlots, t as _default } from "../index-FEy8qFSD.js";
+import { a as TokenizerProps, c as TokenizerStatus, i as TokenizerOverflow, n as TokenizerChange, o as TokenizerSize, r as TokenizerEmits, s as TokenizerSlots, t as _default } from "../index-BHqRH7QW.js";
 export { _default as Tokenizer, type TokenizerChange, type TokenizerEmits, type TokenizerOverflow, type TokenizerProps, type TokenizerSize, type TokenizerSlots, type TokenizerStatus };