@tenphi/tasty 3.10.0 → 3.11.1

package/dist/chunks/{runtime-state-CZ2J5QiZ.js → runtime-state-DEsyUMU-.js}

@@ -1,4 +1,4 @@
-import { z as DEFAULT_PROPERTIES } from "./css-definitions-DAIJxzFY.js";
+import { P as DEFAULT_PROPERTIES, R as indexPropertiesByName } from "./css-definitions-ubrHP97m.js";
 //#region src/config-resources.ts
 let runtimeConfig = null;
 let globalFontFace = null;
@@ -34,6 +34,17 @@ function getEffectiveProperties() {
 		...properties
 	} : DEFAULT_PROPERTIES;
 }
+let effectivePropertyIndex = null;
+function getEffectivePropertiesByName() {
+	const source = globalProperties ?? getFromGlobalThis(GTKEY_PROPERTIES);
+	if (effectivePropertyIndex && effectivePropertyIndex.source === source) return effectivePropertyIndex.index;
+	const index = indexPropertiesByName(getEffectiveProperties());
+	effectivePropertyIndex = {
+		source,
+		index
+	};
+	return index;
+}
 function getGlobalFontFaces() {
 	return globalFontFace ?? getFromGlobalThis(GTKEY_FONT_FACE) ?? null;
 }
@@ -136,6 +147,6 @@ function getRegisteredSSRCollector() {
 	return getter ? getter() : null;
 }
 //#endregion
-export { mergeGlobalProperties as _, getGlobalConfigTokens as a, setRuntimeConfigState as b, getGlobalFunctions as c, getRuntimeConfigState as d, mergeGlobalConfigTokens as f, mergeGlobalKeyframes as g, mergeGlobalFunctions as h, getEffectiveProperties as i, getGlobalKeyframes as l, mergeGlobalFontFaces as m, registerSSRCollectorGetter as n, getGlobalCounterStyles as o, mergeGlobalCounterStyles as p, registerSSRCollectorGetterGlobal as r, getGlobalFontFaces as s, getRegisteredSSRCollector as t, getGlobalStyles as u, mergeGlobalStyles as v, resetConfigResources as y };
+export { mergeGlobalKeyframes as _, getEffectivePropertiesByName as a, resetConfigResources as b, getGlobalFontFaces as c, getGlobalStyles as d, getRuntimeConfigState as f, mergeGlobalFunctions as g, mergeGlobalFontFaces as h, getEffectiveProperties as i, getGlobalFunctions as l, mergeGlobalCounterStyles as m, registerSSRCollectorGetter as n, getGlobalConfigTokens as o, mergeGlobalConfigTokens as p, registerSSRCollectorGetterGlobal as r, getGlobalCounterStyles as s, getRegisteredSSRCollector as t, getGlobalKeyframes as u, mergeGlobalProperties as v, setRuntimeConfigState as x, mergeGlobalStyles as y };
 
-//# sourceMappingURL=runtime-state-CZ2J5QiZ.js.map
+//# sourceMappingURL=runtime-state-DEsyUMU-.js.map

package/dist/chunks/runtime-state-DEsyUMU-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime-state-DEsyUMU-.js","names":[],"sources":["../../src/config-resources.ts","../../src/ssr/ssr-collector-ref.ts"],"sourcesContent":["/**\n * DOM-free storage for configured CSS resources shared by the browser runtime\n * and server collectors.\n *\n * Astro can evaluate middleware and application code in separate module\n * graphs, so resources used by SSR are mirrored on globalThis. Keeping this\n * state outside config.ts lets server-only entrypoints read it without loading\n * StyleInjector and the rest of the browser runtime.\n */\n\nimport type {\n  CounterStyleDescriptors,\n  FontFaceInput,\n  FunctionDefinition,\n  KeyframesSteps,\n  PropertyDefinition,\n} from './injector/types';\nimport type { DeclaredPropertyEntry } from './properties';\nimport { indexPropertiesByName } from './properties';\nimport { DEFAULT_PROPERTIES } from './properties/defaults';\nimport type { ConfigTokens, Styles } from './styles/types';\n\ninterface RuntimeConfigState {\n  namePrefix?: string;\n  nonce?: string;\n}\n\nlet runtimeConfig: RuntimeConfigState | null = null;\nlet globalFontFace: Record<string, FontFaceInput> | null = null;\nlet globalCounterStyle: Record<string, CounterStyleDescriptors> | null = null;\nlet globalFunction: Record<string, FunctionDefinition> | null = null;\nlet globalProperties: Record<string, PropertyDefinition> | null = null;\nlet globalConfigTokens: ConfigTokens | null = null;\nlet globalStyles: Record<string, Styles> | null = null;\nlet globalKeyframes: Record<string, KeyframesSteps> | null = null;\n\nconst GTKEY_TOKENS = '__tasty_cfg_tokens__';\nconst GTKEY_FONT_FACE = '__tasty_cfg_font_face__';\nconst GTKEY_COUNTER_STYLE = '__tasty_cfg_counter_style__';\nconst GTKEY_FUNCTION = '__tasty_cfg_function__';\nconst GTKEY_PROPERTIES = '__tasty_cfg_properties__';\nconst GTKEY_GLOBAL_STYLES = '__tasty_cfg_global_styles__';\nconst GTKEY_KEYFRAMES = '__tasty_cfg_keyframes__';\n\nfunction setOnGlobalThis(key: string, value: unknown): void {\n  (globalThis as Record<string, unknown>)[key] = value;\n}\n\nfunction getFromGlobalThis<T>(key: string): T | undefined {\n  return (globalThis as Record<string, unknown>)[key] as T | undefined;\n}\n\nexport function getRuntimeConfigState(): RuntimeConfigState | null {\n  return runtimeConfig;\n}\n\nexport function setRuntimeConfigState(config: RuntimeConfigState): void {\n  runtimeConfig = config;\n}\n\nexport function getEffectiveProperties(): Record<string, PropertyDefinition> {\n  const properties =\n    globalProperties ??\n    getFromGlobalThis<Record<string, PropertyDefinition>>(GTKEY_PROPERTIES);\n  return properties\n    ? { ...DEFAULT_PROPERTIES, ...properties }\n    : DEFAULT_PROPERTIES;\n}\n\nlet effectivePropertyIndex: {\n  source: Record<string, PropertyDefinition> | null | undefined;\n  index: ReadonlyMap<string, DeclaredPropertyEntry>;\n} | null = null;\n\n/**\n * The effective properties (Tasty's defaults and `configure({ properties })`)\n * keyed by the custom property each one registers — see\n * `indexPropertiesByName()`. Rebuilt only when `configure({ properties })`\n * replaces the set.\n */\nexport function getEffectivePropertiesByName(): ReadonlyMap<\n  string,\n  DeclaredPropertyEntry\n> {\n  const source =\n    globalProperties ??\n    getFromGlobalThis<Record<string, PropertyDefinition>>(GTKEY_PROPERTIES);\n\n  if (effectivePropertyIndex && effectivePropertyIndex.source === source) {\n    return effectivePropertyIndex.index;\n  }\n\n  const index = indexPropertiesByName(getEffectiveProperties());\n  effectivePropertyIndex = { source, index };\n  return index;\n}\n\nexport function getGlobalFontFaces(): Record<string, FontFaceInput> | null {\n  return (\n    globalFontFace ??\n    getFromGlobalThis<Record<string, FontFaceInput>>(GTKEY_FONT_FACE) ??\n    null\n  );\n}\n\nexport function getGlobalCounterStyles(): Record<\n  string,\n  CounterStyleDescriptors\n> | null {\n  return (\n    globalCounterStyle ??\n    getFromGlobalThis<Record<string, CounterStyleDescriptors>>(\n      GTKEY_COUNTER_STYLE,\n    ) ??\n    null\n  );\n}\n\nexport function getGlobalFunctions(): Record<\n  string,\n  FunctionDefinition\n> | null {\n  return (\n    globalFunction ??\n    getFromGlobalThis<Record<string, FunctionDefinition>>(GTKEY_FUNCTION) ??\n    null\n  );\n}\n\nexport function getGlobalConfigTokens(): ConfigTokens | null {\n  return (\n    globalConfigTokens ?? getFromGlobalThis<ConfigTokens>(GTKEY_TOKENS) ?? null\n  );\n}\n\nexport function getGlobalStyles(): Record<string, Styles> | null {\n  return (\n    globalStyles ??\n    getFromGlobalThis<Record<string, Styles>>(GTKEY_GLOBAL_STYLES) ??\n    null\n  );\n}\n\n/**\n * Get global keyframes configuration.\n * Returns null if no keyframes configured (fast path for zero-overhead).\n */\nexport function getGlobalKeyframes(): Record<string, KeyframesSteps> | null {\n  return (\n    globalKeyframes ??\n    getFromGlobalThis<Record<string, KeyframesSteps>>(GTKEY_KEYFRAMES) ??\n    null\n  );\n}\n\nexport function mergeGlobalProperties(\n  properties: Record<string, PropertyDefinition>,\n): void {\n  globalProperties = {\n    ...(globalProperties ?? getFromGlobalThis(GTKEY_PROPERTIES) ?? {}),\n    ...properties,\n  };\n  setOnGlobalThis(GTKEY_PROPERTIES, globalProperties);\n}\n\nexport function mergeGlobalFontFaces(\n  fontFaces: Record<string, FontFaceInput>,\n): void {\n  globalFontFace = { ...(getGlobalFontFaces() ?? {}), ...fontFaces };\n  setOnGlobalThis(GTKEY_FONT_FACE, globalFontFace);\n}\n\nexport function mergeGlobalCounterStyles(\n  counterStyles: Record<string, CounterStyleDescriptors>,\n): void {\n  globalCounterStyle = {\n    ...(getGlobalCounterStyles() ?? {}),\n    ...counterStyles,\n  };\n  setOnGlobalThis(GTKEY_COUNTER_STYLE, globalCounterStyle);\n}\n\nexport function mergeGlobalFunctions(\n  functions: Record<string, FunctionDefinition>,\n): void {\n  globalFunction = { ...(getGlobalFunctions() ?? {}), ...functions };\n  setOnGlobalThis(GTKEY_FUNCTION, globalFunction);\n}\n\nexport function mergeGlobalConfigTokens(styles: ConfigTokens): void {\n  globalConfigTokens = globalConfigTokens\n    ? { ...globalConfigTokens, ...styles }\n    : styles;\n  setOnGlobalThis(GTKEY_TOKENS, globalConfigTokens);\n}\n\nexport function mergeGlobalStyles(styles: Record<string, Styles>): void {\n  if (globalStyles) {\n    for (const [selector, selectorStyles] of Object.entries(styles)) {\n      globalStyles[selector] = globalStyles[selector]\n        ? { ...globalStyles[selector], ...selectorStyles }\n        : selectorStyles;\n    }\n  } else {\n    globalStyles = { ...styles };\n  }\n  setOnGlobalThis(GTKEY_GLOBAL_STYLES, globalStyles);\n}\n\nexport function mergeGlobalKeyframes(\n  keyframes: Record<string, KeyframesSteps>,\n): void {\n  globalKeyframes = { ...(getGlobalKeyframes() ?? {}), ...keyframes };\n  setOnGlobalThis(GTKEY_KEYFRAMES, globalKeyframes);\n}\n\nexport function resetConfigResources(): void {\n  runtimeConfig = null;\n  globalProperties = null;\n  globalFontFace = null;\n  globalCounterStyle = null;\n  globalFunction = null;\n  globalConfigTokens = null;\n  globalStyles = null;\n  globalKeyframes = null;\n\n  const globalState = globalThis as Record<string, unknown>;\n  delete globalState[GTKEY_TOKENS];\n  delete globalState[GTKEY_FONT_FACE];\n  delete globalState[GTKEY_COUNTER_STYLE];\n  delete globalState[GTKEY_FUNCTION];\n  delete globalState[GTKEY_PROPERTIES];\n  delete globalState[GTKEY_GLOBAL_STYLES];\n  delete globalState[GTKEY_KEYFRAMES];\n}\n","/**\n * Global reference to the SSR collector getter function.\n *\n * This indirection avoids importing 'node:async_hooks' in the browser bundle.\n * The SSR entry point sets this ref when loaded on the server. The useStyles\n * hook calls it if set; on the client it stays null and is never called.\n *\n * Uses a module-level variable as the primary mechanism. In Next.js App\n * Router the RSC and SSR module graphs load separate copies of this module,\n * so the getter registered by TastyRegistry (SSR layer) is invisible to\n * server components (RSC layer) — which correctly fall through to inline\n * RSC styles.\n *\n * A globalThis fallback (`registerSSRCollectorGetterGlobal`) is provided\n * for frameworks like Astro where middleware and page components live in\n * different module graphs and must share the getter across them.\n */\n\nimport type { ServerStyleCollector } from './collector';\n\ntype SSRCollectorGetter = () => ServerStyleCollector | null;\n\nconst GETTER_KEY = '__tasty_ssr_collector_getter__';\n\nlet _getSSRCollector: SSRCollectorGetter | null = null;\n\n/**\n * Register the collector getter in the current module graph only.\n * Used by Next.js TastyRegistry.\n */\nexport function registerSSRCollectorGetter(fn: SSRCollectorGetter): void {\n  _getSSRCollector = fn;\n}\n\n/**\n * Register the collector getter on globalThis so it is visible across\n * separate module graphs (e.g. Astro middleware ↔ page components).\n */\nexport function registerSSRCollectorGetterGlobal(fn: SSRCollectorGetter): void {\n  (globalThis as Record<string, unknown>)[GETTER_KEY] = fn;\n}\n\n/**\n * Retrieve the SSR collector: module-level first, globalThis fallback.\n */\nexport function getRegisteredSSRCollector(): ServerStyleCollector | null {\n  if (_getSSRCollector) return _getSSRCollector();\n  const getter = (globalThis as Record<string, unknown>)[GETTER_KEY] as\n    SSRCollectorGetter | undefined;\n  return getter ? getter() : null;\n}\n"],"mappings":";;AA2BA,IAAI,gBAA2C;AAC/C,IAAI,iBAAuD;AAC3D,IAAI,qBAAqE;AACzE,IAAI,iBAA4D;AAChE,IAAI,mBAA8D;AAClE,IAAI,qBAA0C;AAC9C,IAAI,eAA8C;AAClD,IAAI,kBAAyD;AAE7D,MAAM,eAAe;AACrB,MAAM,kBAAkB;AACxB,MAAM,sBAAsB;AAC5B,MAAM,iBAAiB;AACvB,MAAM,mBAAmB;AACzB,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AAExB,SAAS,gBAAgB,KAAa,OAAsB;CAC1D,WAAwC,OAAO;AACjD;AAEA,SAAS,kBAAqB,KAA4B;CACxD,OAAQ,WAAuC;AACjD;AAEA,SAAgB,wBAAmD;CACjE,OAAO;AACT;AAEA,SAAgB,sBAAsB,QAAkC;CACtE,gBAAgB;AAClB;AAEA,SAAgB,yBAA6D;CAC3E,MAAM,aACJ,oBACA,kBAAsD,gBAAgB;CACxE,OAAO,aACH;EAAE,GAAG;EAAoB,GAAG;CAAW,IACvC;AACN;AAEA,IAAI,yBAGO;AAQX,SAAgB,+BAGd;CACA,MAAM,SACJ,oBACA,kBAAsD,gBAAgB;CAExE,IAAI,0BAA0B,uBAAuB,WAAW,QAC9D,OAAO,uBAAuB;CAGhC,MAAM,QAAQ,sBAAsB,uBAAuB,CAAC;CAC5D,yBAAyB;EAAE;EAAQ;CAAM;CACzC,OAAO;AACT;AAEA,SAAgB,qBAA2D;CACzE,OACE,kBACA,kBAAiD,eAAe,KAChE;AAEJ;AAEA,SAAgB,yBAGP;CACP,OACE,sBACA,kBACE,mBACF,KACA;AAEJ;AAEA,SAAgB,qBAGP;CACP,OACE,kBACA,kBAAsD,cAAc,KACpE;AAEJ;AAEA,SAAgB,wBAA6C;CAC3D,OACE,sBAAsB,kBAAgC,YAAY,KAAK;AAE3E;AAEA,SAAgB,kBAAiD;CAC/D,OACE,gBACA,kBAA0C,mBAAmB,KAC7D;AAEJ;AAMA,SAAgB,qBAA4D;CAC1E,OACE,mBACA,kBAAkD,eAAe,KACjE;AAEJ;AAEA,SAAgB,sBACd,YACM;CACN,mBAAmB;EACjB,GAAI,oBAAoB,kBAAkB,gBAAgB,KAAK,CAAC;EAChE,GAAG;CACL;CACA,gBAAgB,kBAAkB,gBAAgB;AACpD;AAEA,SAAgB,qBACd,WACM;CACN,iBAAiB;EAAE,GAAI,mBAAmB,KAAK,CAAC;EAAI,GAAG;CAAU;CACjE,gBAAgB,iBAAiB,cAAc;AACjD;AAEA,SAAgB,yBACd,eACM;CACN,qBAAqB;EACnB,GAAI,uBAAuB,KAAK,CAAC;EACjC,GAAG;CACL;CACA,gBAAgB,qBAAqB,kBAAkB;AACzD;AAEA,SAAgB,qBACd,WACM;CACN,iBAAiB;EAAE,GAAI,mBAAmB,KAAK,CAAC;EAAI,GAAG;CAAU;CACjE,gBAAgB,gBAAgB,cAAc;AAChD;AAEA,SAAgB,wBAAwB,QAA4B;CAClE,qBAAqB,qBACjB;EAAE,GAAG;EAAoB,GAAG;CAAO,IACnC;CACJ,gBAAgB,cAAc,kBAAkB;AAClD;AAEA,SAAgB,kBAAkB,QAAsC;CACtE,IAAI,cACF,KAAK,MAAM,CAAC,UAAU,mBAAmB,OAAO,QAAQ,MAAM,GAC5D,aAAa,YAAY,aAAa,YAClC;EAAE,GAAG,aAAa;EAAW,GAAG;CAAe,IAC/C;MAGN,eAAe,EAAE,GAAG,OAAO;CAE7B,gBAAgB,qBAAqB,YAAY;AACnD;AAEA,SAAgB,qBACd,WACM;CACN,kBAAkB;EAAE,GAAI,mBAAmB,KAAK,CAAC;EAAI,GAAG;CAAU;CAClE,gBAAgB,iBAAiB,eAAe;AAClD;AAEA,SAAgB,uBAA6B;CAC3C,gBAAgB;CAChB,mBAAmB;CACnB,iBAAiB;CACjB,qBAAqB;CACrB,iBAAiB;CACjB,qBAAqB;CACrB,eAAe;CACf,kBAAkB;CAElB,MAAM,cAAc;CACpB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,OAAO,YAAY;AACrB;;;ACpNA,MAAM,aAAa;AAEnB,IAAI,mBAA8C;AAMlD,SAAgB,2BAA2B,IAA8B;CACvE,mBAAmB;AACrB;AAMA,SAAgB,iCAAiC,IAA8B;CAC7E,WAAwC,cAAc;AACxD;AAKA,SAAgB,4BAAyD;CACvE,IAAI,kBAAkB,OAAO,iBAAiB;CAC9C,MAAM,SAAU,WAAuC;CAEvD,OAAO,SAAS,OAAO,IAAI;AAC7B"}

package/dist/chunks/{style-engine-CeKsjtIr.js → style-engine-BX2LshDZ.js}

@@ -1,4 +1,4 @@
-import { M as toSnakeCase, N as CSS_WIDE_KEYWORDS, T as makeEmptyDetails, _ as stringifyStyles, d as parseColor, f as parseStyle, h as resolveCustomProperties, i as DIRECTIONS, j as normalizeDslName, u as normalizeColorTokenValue, w as Lru } from "./dsl-DRhFWQzo.js";
+import { M as toSnakeCase, N as CSS_WIDE_KEYWORDS, T as makeEmptyDetails, _ as stringifyStyles, c as getGlobalParser, d as parseColor, f as parseStyle, h as resolveCustomProperties, i as DIRECTIONS, j as normalizeDslName, u as normalizeColorTokenValue, w as Lru } from "./dsl-DYSJc1-T.js";
 import { a as warnOnceDev, i as warn, n as isSelector, o as isDevEnv } from "./shared-utils-y-HjvPN4.js";
 //#region src/config-state.ts
 let stylesGenerated = false;
@@ -134,8 +134,28 @@ function resolvePredefinedState(stateKey, ctx) {
 function expandDimensionShorthands(condition) {
 	return condition.replace(/\b(?:w|h|is|bs)\b/g, (dimension) => dimension === "w" ? "width" : dimension === "h" ? "height" : dimension === "is" ? "inline-size" : "block-size");
 }
+const RE_QUERY_UNIT_NUMBER = /(?<![\w.-])(?:\d*\.\d+|\d+)([a-z][a-z0-9]*)\b/g;
 function expandTastyUnits(value) {
-	return value.replace(/(\d+(?:\.\d+)?)\s*x\b/g, (_, num) => `calc(var(--gap) * ${num})`);
+	const units = getGlobalParser().getUnits();
+	if (!units) return value;
+	return value.replace(RE_QUERY_UNIT_NUMBER, (token, unit) => {
+		if (!Object.prototype.hasOwnProperty.call(units, unit)) return token;
+		const resolved = parseStyle(token).groups[0]?.values[0] ?? token;
+		if (resolved.includes("var(")) warnOnce(`query-unit-var:${unit}`, `[Tasty] Unit '${unit}' resolves to '${resolved}', which @media and @container conditions cannot read: custom properties are not available there. Write '${token}' as a px, em, or rem length.`);
+		return resolved;
+	});
+}
+const RE_LENGTH_FEATURE = /^(?:min-|max-)?(?:width|height|inline-size|block-size)$/;
+const RE_QUERY_OPERATOR = /<=|>=|<|>|=/;
+const RE_FEATURE_NAME = /^[a-z][a-z-]*$/;
+function expandQueryUnits(condition) {
+	let feature;
+	if (RE_QUERY_OPERATOR.test(condition)) feature = condition.split(RE_QUERY_OPERATOR).map((operand) => operand.trim()).find((operand) => RE_FEATURE_NAME.test(operand));
+	else {
+		const colonIdx = condition.indexOf(":");
+		feature = (colonIdx === -1 ? condition : condition.slice(0, colonIdx)).trim();
+	}
+	return feature && RE_LENGTH_FEATURE.test(feature) ? expandTastyUnits(condition) : condition;
 }
 function findTopLevelComma(s) {
 	let depth = 0;
@@ -179,6 +199,16 @@ const CHUNK_NAMES = {
 };
 const APPEARANCE_CHUNK_STYLES = [
 	"fill",
+	"backgroundColor",
+	"image",
+	"backgroundImage",
+	"backgroundPosition",
+	"backgroundSize",
+	"backgroundRepeat",
+	"backgroundAttachment",
+	"backgroundOrigin",
+	"backgroundClip",
+	"background",
 	"color",
 	"opacity",
 	"border",
@@ -425,6 +455,9 @@ const BORDER_STYLES = [
 ];
 //#endregion
 //#region src/styles/shared.ts
+function resolveDefaultValue(value) {
+	return parseStyle(value).groups[0]?.values[0] ?? value;
+}
 function extractCSSWideKeyword(group) {
 	if (group.values.length !== 1 || group.colors.length > 0) return null;
 	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
@@ -464,9 +497,9 @@ function processGroup$1(group) {
 	else if (mod === "longhand") modFlags |= 16;
 	else if (lineStyle === void 0 && BORDER_STYLES.includes(mod)) lineStyle = mod;
 	const slots = assignLineSlots(values, lineStyle, colors[0]);
-	const width = values[0] || "var(--border-width)";
+	const width = values[0] || resolveDefaultValue("1bw");
 	const style = slots.style || "solid";
-	const color = slots.color || "var(--border-color, currentColor)";
+	const color = slots.color || "var(--border-color)";
 	return {
 		modFlags,
 		width,
@@ -549,7 +582,7 @@ function borderStyle({ border }) {
 	}
 	const result = {};
 	const fallbackStyle = allDirectionsValue?.style || "solid";
-	const fallbackColor = allDirectionsValue?.color || "var(--border-color, currentColor)";
+	const fallbackColor = allDirectionsValue?.color || "var(--border-color)";
 	for (const dir of DIRECTIONS) {
 		const value = directionMap[dir];
 		if (value) result[`border-${dir}`] = formatBorderValue(value);
@@ -560,8 +593,13 @@ function borderStyle({ border }) {
 borderStyle.__lookupStyles = ["border"];
 //#endregion
 //#region src/styles/dimension.ts
-const DEFAULT_MIN_SIZE = "var(--gap)";
+const DEFAULT_MIN_SIZE = "1x";
 const DEFAULT_MAX_SIZE = "100%";
+const STRETCH_FALLBACKS = [
+	"-webkit-fill-available",
+	"-moz-available",
+	"stretch"
+];
 function parseDimensionValue(val) {
 	if (val == null) return null;
 	if (typeof val === "number") return `${val}px`;
@@ -610,7 +648,7 @@ function dimensionStyle(name) {
 			let flag = false;
 			for (const mod of mods) switch (mod) {
 				case "min":
-					styles[minStyle] = values[0] || DEFAULT_MIN_SIZE;
+					styles[minStyle] = values[0] || resolveDefaultValue(DEFAULT_MIN_SIZE);
 					flag = true;
 					break;
 				case "max":
@@ -636,14 +674,7 @@ function dimensionStyle(name) {
 					styles[maxStyle] = values[2];
 				} else styles[name] = values[0] || "auto";
 			}
-			if (styles[name] === "stretch") {
-				if (name === "width") styles[name] = [
-					"stretch",
-					"-webkit-fill-available",
-					"-moz-available"
-				];
-				else styles[name] = "auto";
-			}
+			if (styles[name] === "stretch") styles[name] = STRETCH_FALLBACKS;
 		}
 		const minVal = parseDimensionValue(min);
 		const maxVal = parseDimensionValue(max);
@@ -665,11 +696,12 @@ function blockSizeStyle({ blockSize, minBlockSize, maxBlockSize }) {
 blockSizeStyle.__lookupStyles = [...BLOCK_SIZE_STYLES];
 //#endregion
 //#region src/styles/color.ts
+const RE_HEX_LITERAL = /^#[0-9a-f]+$/i;
 const RE_READS_CURRENT = /var\(--current-color[,)]|currentcolor/i;
 function colorStyle({ color }) {
 	if (!color) return null;
 	if (color === true) color = "currentColor";
-	color = parseColor(color, true).color || resolveCustomProperties(color);
+	color = (RE_HEX_LITERAL.test(color) ? parseStyle(color).groups[0]?.colors[0] : parseColor(color, true).color) || resolveCustomProperties(color);
 	const styles = { color };
 	if (!RE_READS_CURRENT.test(color)) styles["--current-color"] = color;
 	return styles;
@@ -737,7 +769,7 @@ function processGroup(group, isOnlyGroup, gradients) {
 	const { input, values, mods, colors } = group;
 	const transparentColor = colors[0] || DEFAULT_TRANSPARENT_COLOR;
 	const opaqueColor = colors[1] || DEFAULT_OPAQUE_COLOR;
-	const firstSize = values.length ? values[0] : "calc(2 * var(--gap))";
+	const firstSize = values.length ? values[0] : resolveDefaultValue("2x");
 	let namedCount = 0;
 	for (const mod of mods) {
 		const directionIndex = DIRECTIONS.indexOf(mod);
@@ -774,7 +806,8 @@ fadeStyle.__lookupStyles = ["fade"];
 function fillStyle({ fill, backgroundColor, image, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, backgroundAttachment, backgroundOrigin, backgroundClip, background }) {
 	if (background) return { background: parseStyle(background).output || background };
 	const result = {};
-	const colorValue = backgroundColor ?? fill;
+	if (fill === true) warnOnceDev("fill-true", "fill: true has no default color and is ignored. Write a color (fill: '#surface'), or false for no fill.");
+	const colorValue = backgroundColor ?? (typeof fill === "string" ? fill : void 0);
 	if (colorValue) {
 		const parsed = parseStyle(colorValue);
 		const firstColor = parsed.groups[0]?.colors[0];
@@ -889,7 +922,7 @@ function parseSingleValue(val, defaultValue, trueValue) {
 	const strVal = String(val);
 	if (CSS_WIDE_KEYWORDS.has(strVal)) return strVal;
 	const { values } = parseStyle(strVal).groups[0] ?? { values: [] };
-	return values[0] || defaultValue;
+	return values[0] || resolveDefaultValue(defaultValue);
 }
 function directionModFlags(mods, spanModifiers) {
 	let flags = 0;
@@ -907,7 +940,7 @@ function directionModFlags(mods, spanModifiers) {
 	return flags;
 }
 function applyGroup(dirs, group, modFlags, property, defaultValue) {
-	const values = group.values.length ? group.values : [defaultValue];
+	const values = group.values.length ? group.values : [resolveDefaultValue(defaultValue)];
 	const directions = modFlags & DIRECTION_MASK;
 	const span = modFlags & DIRECTION_SPAN;
 	if (directions && values.length > (span ? 2 : 1)) warnExtraGroupValues(property, group.input, span ? 2 : 1);
@@ -1093,7 +1126,7 @@ function logicalAxisStyle({ styleName, cssProperty, defaultValue, trueValue, def
 			const modFlags = logicalModFlags(group.mods);
 			const hasDirection = modFlags & 3;
 			const keyword = extractCSSWideKeyword(group);
-			const values = keyword ? [keyword] : group.values.length ? group.values : [defaultValue];
+			const values = keyword ? [keyword] : group.values.length ? group.values : [resolveDefaultValue(defaultValue)];
 			if (hasDirection && values.length > 1) warnExtraGroupValues(styleName, group.input, 1, LOGICAL_DIRECTIONS);
 			else if (!hasDirection && values.length > 2) warnOnceDev(`extra-logical-axis-values:${styleName}:${group.input}`, `${styleName}="${group.input}": a logical axis takes at most two values in start/end order. The extra values are ignored.`);
 			if (modFlags & LOGICAL_LONGHAND) useLonghand = true;
@@ -1116,7 +1149,7 @@ function logicalAxisStyle({ styleName, cssProperty, defaultValue, trueValue, def
 }
 function zeroBorderValue(value) {
 	const firstSpace = value.indexOf(" ");
-	return firstSpace === -1 ? "0 solid var(--border-color, currentColor)" : `0${value.slice(firstSpace)}`;
+	return firstSpace === -1 ? "0 solid var(--border-color)" : `0${value.slice(firstSpace)}`;
 }
 function logicalBorderStyle(styleName, cssProperty) {
 	const handler = ((styles) => {
@@ -1130,7 +1163,7 @@ function logicalBorderStyle(styleName, cssProperty) {
 			start: null,
 			end: null
 		};
-		let fallback = "0 solid var(--border-color, currentColor)";
+		let fallback = "0 solid var(--border-color)";
 		let useLonghand = false;
 		for (const group of groups) {
 			const borderValue = parseBorderValue(group.input);
@@ -1171,8 +1204,8 @@ function logicalBorderStyles(styleNames) {
 	return Object.fromEntries(styleNames.map((styleName, index) => [styleName, logicalBorderStyle(styleName, `border-${index ? "inline" : "block"}`)]));
 }
 const logicalStyleHandlers = {
-	...logicalAxisStyles(LOGICAL_PADDING_STYLES, "padding", "var(--gap)", "1x", "0"),
-	...logicalAxisStyles(LOGICAL_MARGIN_STYLES, "margin", "var(--gap)", "1x", "0"),
+	...logicalAxisStyles(LOGICAL_PADDING_STYLES, "padding", "1x", "1x", "0"),
+	...logicalAxisStyles(LOGICAL_MARGIN_STYLES, "margin", "1x", "1x", "0"),
 	...logicalAxisStyles(LOGICAL_INSET_STYLES, "inset", "0", "0", "auto"),
 	...logicalAxisStyles(LOGICAL_SCROLL_MARGIN_STYLES, "scroll-margin", "0", "1x", "0"),
 	...logicalAxisStyles(LOGICAL_SCROLL_PADDING_STYLES, "scroll-padding", "0", "1x", "0"),
@@ -1182,7 +1215,7 @@ const logicalStyleHandlers = {
 //#region src/styles/margin.ts
 const MARGIN_CONFIG = {
 	property: "margin",
-	defaultValue: "var(--gap)",
+	defaultValue: "1x",
 	trueValue: "1x",
 	defaultInit: "0"
 };
@@ -1227,7 +1260,7 @@ function outlineStyle({ outline, outlineOffset }) {
 					break;
 				}
 				const slots = assignLineSlots(outlinePart.values, lineStyle, outlinePart.colors[0]);
-				result.outline = `${outlinePart.values[0] || "var(--outline-width)"} ${slots.style || "solid"} ${slots.color || "var(--outline-color)"}`;
+				result.outline = `${outlinePart.values[0] || resolveDefaultValue("1ow")} ${slots.style || "solid"} ${slots.color || "var(--outline-color)"}`;
 				if (offsetPart?.values[0]) result["outline-offset"] = offsetPart.values[0];
 			}
 		}
@@ -1243,7 +1276,7 @@ outlineStyle.__lookupStyles = ["outline", "outlineOffset"];
 //#region src/styles/padding.ts
 const PADDING_CONFIG = {
 	property: "padding",
-	defaultValue: "var(--gap)",
+	defaultValue: "1x",
 	trueValue: "1x",
 	defaultInit: "0"
 };
@@ -1337,6 +1370,7 @@ const PRESET_MODIFIERS = /* @__PURE__ */ new Set([
 	"normal"
 ]);
 const SANS_FONT = "var(--font-sans, var(--font-sans-fallback))";
+const MONO_FONT = "var(--font-mono, var(--font-mono-fallback))";
 function toCSS(value, isNumeric) {
 	if (value == null) return null;
 	if (typeof value === "number") return isNumeric ? `${value}px` : String(value);
@@ -1356,7 +1390,7 @@ function setCSSValue(styles, styleName, presetName, mode) {
 function resolveFontFamily(font, fontFamily) {
 	if (fontFamily) return resolveCustomProperties(fontFamily);
 	if (font == null || font === false) return null;
-	if (font === "monospace") return "var(--font-mono, var(--font-mono-fallback))";
+	if (font === "monospace") return MONO_FONT;
 	if (font === true) return SANS_FONT;
 	return `${resolveCustomProperties(font)}, ${SANS_FONT}`;
 }
@@ -1425,7 +1459,7 @@ presetStyle.__lookupStyles = [
 ];
 //#endregion
 //#region src/styles/radius.ts
-const PROP = "var(--radius)";
+const DEFAULT_RADIUS = "1r";
 const SHARP = "var(--sharp-radius)";
 const RADIUS_LONGHANDS = [
 	"border-top-left-radius",
@@ -1470,19 +1504,20 @@ function radiusStyle({ radius }) {
 		for (const i of corners) result[RADIUS_LONGHANDS[i]] = keyword;
 		return result;
 	}
+	const defaultRadius = resolveDefaultValue(DEFAULT_RADIUS);
 	if (mods.includes("round")) values = ["9999rem"];
 	else if (mods.includes("ellipse")) values = ["50%"];
-	else if (!values.length) values = [PROP];
+	else if (!values.length) values = [defaultRadius];
 	if (mods.includes("leaf")) values = [
 		values[1] || SHARP,
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP,
-		values[0] || PROP
+		values[0] || defaultRadius
 	];
 	else if (mods.includes("backleaf")) values = [
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP,
-		values[0] || PROP,
+		values[0] || defaultRadius,
 		values[1] || SHARP
 	];
 	else if (mods.length) {
@@ -1494,7 +1529,7 @@ function radiusStyle({ radius }) {
 				"0",
 				"0"
 			];
-			for (const i of corners) arr[i] = values[0] || PROP;
+			for (const i of corners) arr[i] = values[0] || defaultRadius;
 			values = arr;
 		}
 	}
@@ -1686,7 +1721,6 @@ const MAP = {
 		"height"
 	],
 	gap: ["gap", "margin"],
-	zIndex: ["z-index"],
 	inset: [
 		"inset",
 		"top",
@@ -1695,6 +1729,7 @@ const MAP = {
 		"left"
 	]
 };
+const NAME_ALIASES = { zindex: "z-index" };
 const DEFAULT_EASING = "linear";
 const EASING_KEYWORDS = new Set("ease ease-in ease-out ease-in-out linear step-start step-end".split(" "));
 function isEasing(token) {
@@ -1711,8 +1746,9 @@ function transitionStyle({ transition }) {
 	const named = /* @__PURE__ */ new Set();
 	for (const group of processed.groups) {
 		const tokens = group.all;
-		const name = tokens[0];
+		let name = tokens[0];
 		if (!name || isTokenNameReference("transition", name)) continue;
+		name = NAME_ALIASES[name] ?? name;
 		let timing;
 		let easing;
 		let delay;
@@ -2054,6 +2090,17 @@ function splitSelectorsSafely(selectorList) {
 }
 //#endregion
 //#region src/pipeline/conditions.ts
+function getRangeUnit(range) {
+	const lower = range.lowerBound && getBoundUnit(range.lowerBound);
+	const upper = range.upperBound && getBoundUnit(range.upperBound);
+	if (lower === null || upper === null) return null;
+	if (lower !== void 0 && upper !== void 0 && lower !== upper) return null;
+	return lower ?? upper ?? null;
+}
+function getBoundUnit(bound) {
+	if (bound.valueNumeric == null) return null;
+	return /[a-z%]*$/i.exec(bound.value)[0].toLowerCase();
+}
 function buildDimensionCondition(dimension, lowerBound, upperBound, emptyDimension = dimension) {
 	if (lowerBound && upperBound) {
 		const lowerOp = lowerBound.inclusive ? "<=" : "<";
@@ -2488,8 +2535,12 @@ function hasRangeContradiction(terms) {
 	const containerByDim = /* @__PURE__ */ new Map();
 	for (const term of terms) {
 		if (term.kind !== "state") continue;
-		if (term.type === "media" && term.subtype === "dimension") {
-			const key = term.dimension || "width";
+		if (term.type !== "media" && term.type !== "container") continue;
+		if (term.subtype !== "dimension") continue;
+		const unit = getRangeUnit(term);
+		if (unit === null) continue;
+		if (term.type === "media") {
+			const key = `${term.dimension || "width"}|${unit}`;
 			let group = mediaByDim.get(key);
 			if (!group) {
 				group = {
@@ -2501,8 +2552,8 @@ function hasRangeContradiction(terms) {
 			if (term.negated) group.negated.push(term);
 			else group.positive.push(term);
 		}
-		if (term.type === "container" && term.subtype === "dimension") {
-			const key = `${term.containerName || "_"}:${term.dimension || "width"}`;
+		if (term.type === "container") {
+			const key = `${term.containerName || "_"}:${term.dimension || "width"}|${unit}`;
 			let group = containerByDim.get(key);
 			if (!group) {
 				group = {
@@ -2697,8 +2748,12 @@ function mergeRanges(terms) {
 	const containerByDim = /* @__PURE__ */ new Map();
 	terms.forEach((term, index) => {
 		if (term.kind !== "state") return;
-		if (term.type === "media" && term.subtype === "dimension" && !term.negated) {
-			const key = term.dimension || "width";
+		if (term.type !== "media" && term.type !== "container") return;
+		if (term.subtype !== "dimension" || term.negated) return;
+		const unit = getRangeUnit(term);
+		if (unit === null) return;
+		if (term.type === "media") {
+			const key = `${term.dimension || "width"}|${unit}`;
 			let group = mediaByDim.get(key);
 			if (!group) {
 				group = {
@@ -2710,8 +2765,8 @@ function mergeRanges(terms) {
 			group.conditions.push(term);
 			group.indices.push(index);
 		}
-		if (term.type === "container" && term.subtype === "dimension" && !term.negated) {
-			const key = `${term.containerName || "_"}:${term.dimension || "width"}`;
+		if (term.type === "container") {
+			const key = `${term.containerName || "_"}:${term.dimension || "width"}|${unit}`;
 			let group = containerByDim.get(key);
 			if (!group) {
 				group = {
@@ -2972,14 +3027,16 @@ function hasMediaContradiction(conditions) {
 		if (existing !== void 0 && existing !== !cond.negated) return true;
 		polarities.set(key, !cond.negated);
 		if (cond.subtype !== "dimension" || cond.negated) continue;
-		const dim = cond.dimension || "width";
-		let bounds = dimensionsByDim.get(dim);
+		const unit = getRangeUnit(cond);
+		if (unit === null) continue;
+		const rangeKey = `${cond.dimension || "width"}|${unit}`;
+		let bounds = dimensionsByDim.get(rangeKey);
 		if (!bounds) {
 			bounds = {
 				lowerBound: null,
 				upperBound: null
 			};
-			dimensionsByDim.set(dim, bounds);
+			dimensionsByDim.set(rangeKey, bounds);
 		}
 		if (cond.lowerBound?.valueNumeric != null) {
 			const value = cond.lowerBound.valueNumeric;
@@ -4362,14 +4419,14 @@ var Parser = class {
 		const content = raw.slice(7, -1);
 		if (!content.trim()) return trueCondition();
 		let condition = expandDimensionShorthands(content);
-		condition = expandTastyUnits(condition);
+		condition = expandQueryUnits(condition);
 		if (condition.includes(":") && !condition.includes("<") && !condition.includes(">") && !condition.includes("=")) {
 			const colonIdx = condition.indexOf(":");
 			return createMediaFeatureCondition(condition.slice(0, colonIdx).trim(), condition.slice(colonIdx + 1).trim(), false, raw);
 		}
 		if (!condition.includes("<") && !condition.includes(">") && !condition.includes("=")) return createMediaFeatureCondition(condition.trim(), void 0, false, raw);
 		const { dimension, lowerBound, upperBound } = this.parseDimensionCondition(condition);
-		if (!dimension) return createPseudoCondition(raw, false, raw);
+		if (!dimension) return createMediaFeatureCondition(condition.trim(), void 0, false, raw);
 		return createMediaDimensionCondition(dimension, lowerBound, upperBound, false, raw);
 	}
 	parseDimensionCondition(condition) {
@@ -4502,9 +4559,9 @@ var Parser = class {
 		}
 		if (/^[a-zA-Z][\w-]*\s*\(/.test(condition)) return createContainerRawCondition(condition, containerName, false, raw);
 		let expandedCondition = expandDimensionShorthands(condition);
-		expandedCondition = expandTastyUnits(expandedCondition);
+		expandedCondition = expandQueryUnits(expandedCondition);
 		const { dimension, lowerBound, upperBound } = this.parseDimensionCondition(expandedCondition);
-		if (!dimension) return createPseudoCondition(raw, false, raw);
+		if (!dimension) return createContainerRawCondition(`(${expandedCondition.trim()})`, containerName, false, raw);
 		return createContainerDimensionCondition(dimension, lowerBound, upperBound, containerName, false, raw);
 	}
 	parsePredefinedState(raw) {
@@ -4669,7 +4726,10 @@ function invokeHandler(handler, stateSnapshots, selectorSuffix) {
 			const declarations = {};
 			for (const [prop, val] of Object.entries(styleProps)) {
 				if (RE_UPPER_CASE.test(prop) && !prop.startsWith("--") && isDevEnv()) emitWarning("HANDLER_CAMEL_CASE_KEY", `A style handler returned "${prop}". CSS property names must be kebab-case ("${toSnakeCase(prop)}"). The declaration was emitted verbatim and the browser will ignore it.`);
-				if (val != null && val !== "") declarations[prop] = String(val);
+				if (Array.isArray(val)) {
+					const chain = val.filter((v) => v != null && v !== "").map((v) => String(v));
+					if (chain.length) declarations[prop] = chain.length === 1 ? chain[0] : chain;
+				} else if (val != null && val !== "") declarations[prop] = String(val);
 			}
 			if (Object.keys(declarations).length === 0) continue;
 			const suffixes = $ ? (Array.isArray($) ? $ : [$]).map((s) => selectorSuffix + normalizeSelectorSuffix(String(s))) : [selectorSuffix];
@@ -5000,7 +5060,7 @@ function buildSelectorFromVariant(variant, selectorSuffix) {
 function materializeComputedRule(rule) {
 	const components = conditionToCSS(rule.condition);
 	if (components.isImpossible || components.variants.length === 0) return [];
-	const declarations = Object.entries(rule.declarations).map(([prop, value]) => `${prop}: ${value};`).join(" ");
+	const declarations = Object.entries(rule.declarations).map(([prop, value]) => Array.isArray(value) ? value.map((v) => `${prop}: ${v};`).join(" ") : `${prop}: ${value};`).join(" ");
 	const byAtRules = /* @__PURE__ */ new Map();
 	for (const variant of components.variants) {
 		const atRules = buildAtRulesFromVariant(variant);
@@ -5403,4 +5463,4 @@ function renderStylesForChunk(styles, chunkName, styleKeys, pipelineCacheKey) {
 //#endregion
 export { styleHandlers as A, STYLE_TO_CHUNK as B, camelToKebab as C, normalizeHandlerDefinition as D, defineHandler as E, DIMENSION_CHUNK_STYLES as F, setGlobalPredefinedStates as G, clearGlobalPredefinedStates as H, DISPLAY_CHUNK_STYLES as I, markStylesGeneratedState as J, hasStylesGenerated as K, FONT_CHUNK_STYLES as L, createStyle as M, APPEARANCE_CHUNK_STYLES as N, registerHandler as O, CHUNK_NAMES as P, LAYOUT_CHUNK_STYLES as R, parseStateKey as S, STYLE_HANDLER_MAP as T, createStateParserContext as U, resetStyleChunks as V, getGlobalPredefinedStates as W, resetStylesGeneratedState as X, resetGlobalPolyfillsState as Y, setGlobalPolyfillsState as Z, POSITION_STYLES as _, registerBaseStyleProps as a, renderStyles as b, BLOCK_INNER_STYLES as c, COLOR_STYLES as d, CONTAINER_STYLES as f, OUTER_STYLES as g, INNER_STYLES as h, baseStylePropsRegistry as i, scanAnimationNames as j, resetHandlers as k, BLOCK_OUTER_STYLES as l, FLOW_STYLES as m, generateChunkCacheKey as n, resetBaseStyleProps as o, DIMENSION_STYLES as p, isFunctionsPolyfillEnabled as q, categorizeStyleKeys as r, BASE_STYLES as s, renderStylesForChunk as t, BLOCK_STYLES as u, TEXT_STYLES as v, splitSelectorsSafely as w, clearParseCache as x, clearPipelineCache as y, POSITION_CHUNK_STYLES as z };
 
-//# sourceMappingURL=style-engine-CeKsjtIr.js.map
+//# sourceMappingURL=style-engine-BX2LshDZ.js.map