@tenphi/tasty 2.6.4 → 2.7.0

package/dist/{config-BBiyxMCe.js → config-DF2QZQEW.js}

@@ -55,6 +55,223 @@ function canonicalFuncName(lowered) {
 	return CANONICAL_FUNC_CASE.get(lowered) ?? lowered;
 }
 //#endregion
+//#region src/properties/index.ts
+const PROPERTIES_KEY = "@properties";
+/**
+* Valid CSS custom property name pattern (after the -- prefix).
+* Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
+*/
+const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
+/**
+* Validate a CSS custom property name (the part after --).
+* Returns true if the name is valid for use as a CSS custom property.
+*/
+function isValidPropertyName(name) {
+	return VALID_PROPERTY_NAME_PATTERN.test(name);
+}
+/**
+* Check if styles object has local @properties definition.
+* Fast path: single property lookup.
+*/
+function hasLocalProperties(styles) {
+	return PROPERTIES_KEY in styles;
+}
+/**
+* Extract local @properties from styles object.
+* Returns null if no local properties (fast path).
+*/
+function extractLocalProperties(styles) {
+	const properties = styles[PROPERTIES_KEY];
+	if (!properties || typeof properties !== "object") return null;
+	return properties;
+}
+/**
+* Parse a property token name and return the CSS property name and whether it's a color.
+* Supports tasty token syntax and validates the property name.
+*
+* Token formats:
+* - `$name` → { cssName: '--name', isColor: false }
+* - `#name` → { cssName: '--name-color', isColor: true }
+* - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
+* - `name` → { cssName: '--name', isColor: false } (legacy)
+*
+* @param token - The property token to parse
+* @returns Parsed result with cssName, isColor, isValid, and optional error
+*/
+function parsePropertyToken(token) {
+	if (!token || typeof token !== "string") return {
+		cssName: "",
+		isColor: false,
+		isValid: false,
+		error: "Property token must be a non-empty string"
+	};
+	let name;
+	let isColor;
+	if (token.startsWith("$")) {
+		name = token.slice(1);
+		isColor = false;
+	} else if (token.startsWith("#")) {
+		name = token.slice(1);
+		isColor = true;
+	} else if (token.startsWith("--")) {
+		name = token.slice(2);
+		isColor = token.endsWith("-color");
+	} else {
+		name = token;
+		isColor = token.endsWith("-color");
+	}
+	if (!name) return {
+		cssName: "",
+		isColor,
+		isValid: false,
+		error: "Property name cannot be empty"
+	};
+	if (!isValidPropertyName(name)) return {
+		cssName: "",
+		isColor,
+		isValid: false,
+		error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`
+	};
+	let cssName;
+	if (token.startsWith("#")) cssName = `--${name}-color`;
+	else cssName = `--${name}`;
+	return {
+		cssName,
+		isColor,
+		isValid: true
+	};
+}
+/**
+* Normalize a property definition to a consistent string representation.
+* Used for comparing definitions to detect type conflicts.
+*
+* Only `syntax` and `inherits` are compared — `initialValue` is intentionally
+* excluded because different components may set different defaults for the
+* same typed property (e.g. auto-inferred `0px` vs explicit `6px`).
+*
+* Keys are sorted alphabetically to ensure consistent comparison:
+* { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
+*/
+function normalizePropertyDefinition(def) {
+	const normalized = {};
+	if (def.inherits !== void 0) normalized.inherits = def.inherits;
+	if (def.syntax !== void 0) normalized.syntax = def.syntax;
+	return JSON.stringify(normalized);
+}
+/**
+* Get the effective property definition for a token.
+* For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
+*
+* @param token - Property token ($name, #name, --name, or plain name)
+* @param userDefinition - User-provided definition options
+* @returns Effective definition with cssName, definition, isValid, and optional error
+*/
+function getEffectiveDefinition(token, userDefinition) {
+	const parsed = parsePropertyToken(token);
+	if (!parsed.isValid) return {
+		cssName: "",
+		definition: userDefinition,
+		isColor: false,
+		isValid: false,
+		error: parsed.error
+	};
+	if (parsed.isColor) return {
+		cssName: parsed.cssName,
+		definition: {
+			syntax: "<color>",
+			inherits: userDefinition.inherits,
+			initialValue: userDefinition.initialValue ?? "transparent"
+		},
+		isColor: true,
+		isValid: true
+	};
+	return {
+		cssName: parsed.cssName,
+		definition: userDefinition,
+		isColor: false,
+		isValid: true
+	};
+}
+const UNIT_TO_SYNTAX = {};
+const LENGTH_UNITS = [
+	"px",
+	"em",
+	"rem",
+	"vw",
+	"vh",
+	"vmin",
+	"vmax",
+	"ch",
+	"ex",
+	"cap",
+	"ic",
+	"lh",
+	"rlh",
+	"svw",
+	"svh",
+	"lvw",
+	"lvh",
+	"dvw",
+	"dvh",
+	"cqw",
+	"cqh",
+	"cqi",
+	"cqb",
+	"cqmin",
+	"cqmax"
+];
+const ANGLE_UNITS = [
+	"deg",
+	"rad",
+	"grad",
+	"turn"
+];
+const TIME_UNITS = ["ms", "s"];
+for (const u of LENGTH_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<length-percentage>",
+	initialValue: "0px"
+};
+UNIT_TO_SYNTAX["%"] = {
+	syntax: "<length-percentage>",
+	initialValue: "0px"
+};
+for (const u of ANGLE_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<angle>",
+	initialValue: "0deg"
+};
+for (const u of TIME_UNITS) UNIT_TO_SYNTAX[u] = {
+	syntax: "<time>",
+	initialValue: "0s"
+};
+/**
+* Infer CSS @property syntax from a concrete value.
+* Detects numeric types: \<number\>, \<length-percentage\>, \<angle\>, \<time\>.
+* Length and percentage values both map to \<length-percentage\> for maximum flexibility.
+* Color properties are handled separately via the #name token convention
+* (--name-color gets \<color\> syntax automatically in getEffectiveDefinition).
+*
+* @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')
+* @returns Inferred syntax and initial value, or null if not inferable
+*/
+function inferSyntaxFromValue(value) {
+	if (!value || typeof value !== "string") return null;
+	const trimmed = value.trim();
+	if (!trimmed) return null;
+	if (RE_NUMBER.test(trimmed)) {
+		if (parseFloat(trimmed) === 0) return null;
+		return {
+			syntax: "<number>",
+			initialValue: "0"
+		};
+	}
+	const unitMatch = trimmed.match(RE_RAW_UNIT);
+	if (unitMatch) {
+		const mapping = UNIT_TO_SYNTAX[unitMatch[2]];
+		if (mapping) return mapping;
+	}
+	return null;
+}
+//#endregion
 //#region src/parser/lru.ts
 var Lru = class {
 	limit;
@@ -1131,223 +1348,6 @@ function getComponentPropertySyntax() {
 	}
 }
 //#endregion
-//#region src/properties/index.ts
-const PROPERTIES_KEY = "@properties";
-/**
-* Valid CSS custom property name pattern (after the -- prefix).
-* Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.
-*/
-const VALID_PROPERTY_NAME_PATTERN = /^[a-z_][a-z0-9-_]*$/i;
-/**
-* Validate a CSS custom property name (the part after --).
-* Returns true if the name is valid for use as a CSS custom property.
-*/
-function isValidPropertyName(name) {
-	return VALID_PROPERTY_NAME_PATTERN.test(name);
-}
-/**
-* Check if styles object has local @properties definition.
-* Fast path: single property lookup.
-*/
-function hasLocalProperties(styles) {
-	return PROPERTIES_KEY in styles;
-}
-/**
-* Extract local @properties from styles object.
-* Returns null if no local properties (fast path).
-*/
-function extractLocalProperties(styles) {
-	const properties = styles[PROPERTIES_KEY];
-	if (!properties || typeof properties !== "object") return null;
-	return properties;
-}
-/**
-* Parse a property token name and return the CSS property name and whether it's a color.
-* Supports tasty token syntax and validates the property name.
-*
-* Token formats:
-* - `$name` → { cssName: '--name', isColor: false }
-* - `#name` → { cssName: '--name-color', isColor: true }
-* - `--name` → { cssName: '--name', isColor: false } (legacy, auto-detect color by suffix)
-* - `name` → { cssName: '--name', isColor: false } (legacy)
-*
-* @param token - The property token to parse
-* @returns Parsed result with cssName, isColor, isValid, and optional error
-*/
-function parsePropertyToken(token) {
-	if (!token || typeof token !== "string") return {
-		cssName: "",
-		isColor: false,
-		isValid: false,
-		error: "Property token must be a non-empty string"
-	};
-	let name;
-	let isColor;
-	if (token.startsWith("$")) {
-		name = token.slice(1);
-		isColor = false;
-	} else if (token.startsWith("#")) {
-		name = token.slice(1);
-		isColor = true;
-	} else if (token.startsWith("--")) {
-		name = token.slice(2);
-		isColor = token.endsWith("-color");
-	} else {
-		name = token;
-		isColor = token.endsWith("-color");
-	}
-	if (!name) return {
-		cssName: "",
-		isColor,
-		isValid: false,
-		error: "Property name cannot be empty"
-	};
-	if (!isValidPropertyName(name)) return {
-		cssName: "",
-		isColor,
-		isValid: false,
-		error: `Invalid property name "${name}". Must start with a letter or underscore, followed by letters, digits, hyphens, or underscores.`
-	};
-	let cssName;
-	if (token.startsWith("#")) cssName = `--${name}-color`;
-	else cssName = `--${name}`;
-	return {
-		cssName,
-		isColor,
-		isValid: true
-	};
-}
-/**
-* Normalize a property definition to a consistent string representation.
-* Used for comparing definitions to detect type conflicts.
-*
-* Only `syntax` and `inherits` are compared — `initialValue` is intentionally
-* excluded because different components may set different defaults for the
-* same typed property (e.g. auto-inferred `0px` vs explicit `6px`).
-*
-* Keys are sorted alphabetically to ensure consistent comparison:
-* { inherits: true, syntax: '<color>' } === { syntax: '<color>', inherits: true }
-*/
-function normalizePropertyDefinition(def) {
-	const normalized = {};
-	if (def.inherits !== void 0) normalized.inherits = def.inherits;
-	if (def.syntax !== void 0) normalized.syntax = def.syntax;
-	return JSON.stringify(normalized);
-}
-/**
-* Get the effective property definition for a token.
-* For color tokens (#name), auto-sets syntax to '<color>' and defaults initialValue to 'transparent'.
-*
-* @param token - Property token ($name, #name, --name, or plain name)
-* @param userDefinition - User-provided definition options
-* @returns Effective definition with cssName, definition, isValid, and optional error
-*/
-function getEffectiveDefinition(token, userDefinition) {
-	const parsed = parsePropertyToken(token);
-	if (!parsed.isValid) return {
-		cssName: "",
-		definition: userDefinition,
-		isColor: false,
-		isValid: false,
-		error: parsed.error
-	};
-	if (parsed.isColor) return {
-		cssName: parsed.cssName,
-		definition: {
-			syntax: "<color>",
-			inherits: userDefinition.inherits,
-			initialValue: userDefinition.initialValue ?? "transparent"
-		},
-		isColor: true,
-		isValid: true
-	};
-	return {
-		cssName: parsed.cssName,
-		definition: userDefinition,
-		isColor: false,
-		isValid: true
-	};
-}
-const UNIT_TO_SYNTAX = {};
-const LENGTH_UNITS = [
-	"px",
-	"em",
-	"rem",
-	"vw",
-	"vh",
-	"vmin",
-	"vmax",
-	"ch",
-	"ex",
-	"cap",
-	"ic",
-	"lh",
-	"rlh",
-	"svw",
-	"svh",
-	"lvw",
-	"lvh",
-	"dvw",
-	"dvh",
-	"cqw",
-	"cqh",
-	"cqi",
-	"cqb",
-	"cqmin",
-	"cqmax"
-];
-const ANGLE_UNITS = [
-	"deg",
-	"rad",
-	"grad",
-	"turn"
-];
-const TIME_UNITS = ["ms", "s"];
-for (const u of LENGTH_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<length-percentage>",
-	initialValue: "0px"
-};
-UNIT_TO_SYNTAX["%"] = {
-	syntax: "<length-percentage>",
-	initialValue: "0px"
-};
-for (const u of ANGLE_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<angle>",
-	initialValue: "0deg"
-};
-for (const u of TIME_UNITS) UNIT_TO_SYNTAX[u] = {
-	syntax: "<time>",
-	initialValue: "0s"
-};
-/**
-* Infer CSS @property syntax from a concrete value.
-* Detects numeric types: \<number\>, \<length-percentage\>, \<angle\>, \<time\>.
-* Length and percentage values both map to \<length-percentage\> for maximum flexibility.
-* Color properties are handled separately via the #name token convention
-* (--name-color gets \<color\> syntax automatically in getEffectiveDefinition).
-*
-* @param value - The CSS value to infer from (e.g. '10px', '1', '45deg')
-* @returns Inferred syntax and initial value, or null if not inferable
-*/
-function inferSyntaxFromValue(value) {
-	if (!value || typeof value !== "string") return null;
-	const trimmed = value.trim();
-	if (!trimmed) return null;
-	if (RE_NUMBER.test(trimmed)) {
-		if (parseFloat(trimmed) === 0) return null;
-		return {
-			syntax: "<number>",
-			initialValue: "0"
-		};
-	}
-	const unitMatch = trimmed.match(RE_RAW_UNIT);
-	if (unitMatch) {
-		const mapping = UNIT_TO_SYNTAX[unitMatch[2]];
-		if (mapping) return mapping;
-	}
-	return null;
-}
-//#endregion
 //#region src/utils/hash.ts
 /**
 * Fast string hash (djb2) for deduplication keys.
@@ -3783,7 +3783,7 @@ function resetHandlers() {
 	for (const key of Object.keys(STYLE_HANDLER_MAP$1)) delete STYLE_HANDLER_MAP$1[key];
 	for (const key of Object.keys(initialHandlerMapSnapshot)) STYLE_HANDLER_MAP$1[key] = [...initialHandlerMapSnapshot[key]];
 }
-function defineCustomStyle$1(names, handler) {
+function defineCustomStyle(names, handler) {
 	let handlerWithLookup;
 	if (typeof names === "function") {
 		handlerWithLookup = names;
@@ -3798,16 +3798,16 @@ function defineCustomStyle$1(names, handler) {
 		STYLE_HANDLER_MAP$1[name].push(handlerWithLookup);
 	});
 }
-function defineStyleAlias$1(styleName, cssStyleName, converter) {
+function defineStyleAlias(styleName, cssStyleName, converter) {
 	const styleHandler = createStyle(styleName, cssStyleName, converter);
 	if (!STYLE_HANDLER_MAP$1[styleName]) STYLE_HANDLER_MAP$1[styleName] = [];
 	STYLE_HANDLER_MAP$1[styleName].push(styleHandler);
 }
 function predefine() {
-	defineStyleAlias$1("gridAreas", "grid-template-areas");
-	defineStyleAlias$1("gridColumns", "grid-template-columns", columnsConverter);
-	defineStyleAlias$1("gridRows", "grid-template-rows", rowsConverter);
-	defineStyleAlias$1("gridTemplate", "grid-template", (val) => {
+	defineStyleAlias("gridAreas", "grid-template-areas");
+	defineStyleAlias("gridColumns", "grid-template-columns", columnsConverter);
+	defineStyleAlias("gridRows", "grid-template-rows", rowsConverter);
+	defineStyleAlias("gridTemplate", "grid-template", (val) => {
 		if (typeof val !== "string") return;
 		return val.split("/").map((s, i) => (i ? columnsConverter : rowsConverter)(s)).join("/");
 	});
@@ -3833,12 +3833,12 @@ function predefine() {
 		scrollbarStyle,
 		fadeStyle,
 		insetStyle
-	].forEach((handler) => defineCustomStyle$1(handler));
+	].forEach((handler) => defineCustomStyle(handler));
 	captureInitialHandlerState();
 	return {
 		STYLE_HANDLER_MAP: STYLE_HANDLER_MAP$1,
-		defineCustomStyle: defineCustomStyle$1,
-		defineStyleAlias: defineStyleAlias$1
+		defineCustomStyle,
+		defineStyleAlias
 	};
 }
 /**
@@ -3969,7 +3969,7 @@ const styleHandlers = {
 };
 //#endregion
 //#region src/styles/index.ts
-const { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias } = predefine();
+const { STYLE_HANDLER_MAP } = predefine();
 //#endregion
 //#region src/injector/sheet-manager.ts
 const supportsConstructableSheets = typeof CSSStyleSheet !== "undefined" && (() => {
@@ -7442,6 +7442,18 @@ function wrapInIsOrNot(args, negated) {
 	return `${negated ? ":not" : ":is"}(${args.sort().join(", ")})`;
 }
 /**
+* Wrap a non-empty selector fragment in `:where(...)` to zero its
+* specificity. Tasty anchors specificity solely on the doubled class
+* (`.tXX.tXX`) and `data-element` attributes; every stateful selector
+* (modifiers, pseudos, :is()/:not() groups, root/parent context) is wrapped
+* so it contributes nothing to specificity and the cascade is decided by
+* source order alone. Empty input passes through unchanged.
+*/
+function wrapWhere(inner) {
+	if (!inner) return "";
+	return `:where(${inner})`;
+}
+/**
 * Convert a selector group to a CSS selector fragment.
 *
 * Single-branch groups are unwrapped (no :is() wrapper).
@@ -7545,7 +7557,7 @@ function rootGroupsToCSS(groups) {
 	if (optimized.length === 0) return void 0;
 	let prefix = ":root";
 	for (const group of optimized) prefix += selectorGroupToCSS(group);
-	return prefix;
+	return wrapWhere(prefix);
 }
 /**
 * Convert parent groups to CSS selector fragments (for final output).
@@ -7557,7 +7569,8 @@ function parentGroupsToCSS(groups) {
 	for (const group of groups) {
 		const combinator = group.direct ? " > *" : " *";
 		const args = group.branches.map((branch) => branchToCSS(branch) + combinator);
-		result += wrapInIsOrNot(args, group.negated);
+		const inner = group.negated ? `:not(${args.sort().join(", ")})` : args.sort().join(", ");
+		result += wrapWhere(inner);
 	}
 	return result;
 }
@@ -7889,6 +7902,14 @@ function andToCSS(children) {
 	};
 }
 /**
+* Check if a condition involves an `@supports` query (recursively).
+*/
+function branchHasSupports(node) {
+	if (node.kind === "state") return node.type === "supports";
+	if (isCompoundCondition(node)) return node.children.some(branchHasSupports);
+	return false;
+}
+/**
 * Make OR branches within AND children mutually exclusive.
 *
 * For an AND child that is OR(A, B), transforms it to OR(A, B & !A)
@@ -7905,9 +7926,10 @@ function makeOrBranchesExclusive(children) {
 		if (!isCompoundCondition(child) || child.operator !== "OR") return child;
 		if (child.children.length <= 1) return child;
 		if (!branchesProduceDifferentContexts(child.children)) return child;
+		const sortedBranches = [...child.children].sort((a, b) => (branchHasSupports(a) ? 0 : 1) - (branchHasSupports(b) ? 0 : 1));
 		const exclusiveBranches = [];
 		const priorBranches = [];
-		for (const branch of child.children) {
+		for (const branch of sortedBranches) {
 			if (priorBranches.length === 0) exclusiveBranches.push(branch);
 			else {
 				let exclusive = branch;
@@ -8218,6 +8240,21 @@ function buildAtRulesFromVariant(variant) {
 	return atRules;
 }
 //#endregion
+//#region src/pipeline/warnings.ts
+const defaultWarningHandler = (warning) => {
+	console.warn(`[Tasty] ${warning.message}`);
+};
+let warningHandler = defaultWarningHandler;
+/**
+* Emit a structured pipeline warning via the configured handler.
+*/
+function emitWarning(code, message) {
+	warningHandler({
+		code,
+		message
+	});
+}
+//#endregion
 //#region src/pipeline/exclusive.ts
 /**
 * Build exclusive conditions for a list of parsed style entries.
@@ -8246,7 +8283,12 @@ function buildAtRulesFromVariant(variant) {
 function buildExclusiveConditions(entries) {
 	const result = [];
 	const priorConditions = [];
+	const floors = [];
 	for (const entry of entries) {
+		if (entry.floor) {
+			floors.push(entry);
+			continue;
+		}
 		let exclusive = entry.condition;
 		for (const prior of priorConditions) {
 			if (prior.kind === "true") continue;
@@ -8261,6 +8303,10 @@ function buildExclusiveConditions(entries) {
 		});
 		if (entry.condition.kind !== "true") priorConditions.push(entry.condition);
 	}
+	for (const floor of floors) result.push({
+		...floor,
+		exclusiveCondition: floor.condition
+	});
 	return result;
 }
 /**
@@ -8273,19 +8319,85 @@ function buildExclusiveConditions(entries) {
 */
 function parseStyleEntries(styleKey, valueMap, parseCondition) {
 	const entries = [];
-	Object.keys(valueMap).forEach((stateKey, index) => {
+	let floorEntry = null;
+	Object.keys(valueMap).forEach((stateKey) => {
 		const value = valueMap[stateKey];
+		if (stateKey === "_") {
+			floorEntry = {
+				styleKey,
+				stateKey,
+				value,
+				condition: trueCondition(),
+				priority: 0,
+				floor: true
+			};
+			return;
+		}
+		if (isMisusedFallbackKey(stateKey)) {
+			emitWarning("INVALID_FALLBACK_KEY", `Style key "${stateKey}" (in "${styleKey}") combines the fallback "_" with other state logic. "_" can only be used on its own as a map-wide fallback floor. The key has been ignored.`);
+			return;
+		}
 		const condition = stateKey === "" ? trueCondition() : parseCondition(stateKey);
 		entries.push({
 			styleKey,
 			stateKey,
 			value,
 			condition,
-			priority: index
+			priority: 0
 		});
 	});
-	entries.reverse();
-	return entries;
+	if (floorEntry !== null) {
+		const hasOtherStates = entries.some((e) => e.condition.kind !== "true");
+		const hasDefault = entries.some((e) => e.condition.kind === "true");
+		if (!hasOtherStates && hasDefault) {
+			emitWarning("REDUNDANT_DEFAULT_STATE", `Style "${styleKey}" defines both a "_" fallback and a "" default with no other states. The "" default is redundant (always superseded by "_"); the "_" value is used and the "" default is ignored.`);
+			entries.length = 0;
+		}
+	}
+	const normalized = normalizeDefaultStates(entries, styleKey);
+	const ordered = floorEntry !== null ? [floorEntry, ...normalized] : normalized;
+	ordered.forEach((entry, index) => {
+		entry.priority = index;
+	});
+	ordered.reverse();
+	return ordered;
+}
+/**
+* Detect a misused standalone `_` fallback key: a key that is not exactly
+* `_` but contains `_` as a standalone atom among state-logic operators
+* (`&`, `|`, `^`, `,`) or grouping parens. A `_` embedded in a longer token
+* (e.g. a modifier named `_private`) is not a misuse.
+*/
+function isMisusedFallbackKey(stateKey) {
+	if (stateKey === "_" || !stateKey.includes("_")) return false;
+	return /(?:^|[\s&|^,(])_(?:[\s&|^,)]|$)/.test(stateKey);
+}
+/**
+* Resolve the bare `''` default state (`condition.kind === 'true'`) in a
+* style value map.
+*
+* The bare default only behaves correctly as the **first** (lowest-priority)
+* key. When it appears later, `buildExclusiveConditions` processes it first
+* (after the reverse), never adds it to the prior list, and never negates it
+* — so it silently overrides every state authored before it.
+*
+* This function, given entries in authored order, moves a misplaced bare
+* default to the front (lowest priority), preserving the relative order of
+* all other entries, and emits a `MISPLACED_DEFAULT_STATE` warning.
+*
+* The `_` fallback floor is pulled out before this runs (see
+* `parseStyleEntries`), so only the bare `''` default is considered here.
+*/
+function normalizeDefaultStates(entries, styleKey) {
+	const defaultPos = entries.findIndex((e) => e.condition.kind === "true");
+	if (defaultPos <= 0) return entries;
+	const defaultEntry = entries[defaultPos];
+	emitWarning("MISPLACED_DEFAULT_STATE", `Style "${styleKey}" defines the default state "${defaultEntry.stateKey}" after other states. A bare default ("") must be the first key, otherwise it overrides the states above it. It has been moved to the first position. Define default states first.`);
+	return [
+		defaultEntry,
+		...entries.slice(0, defaultPos),
+		...entries.slice(defaultPos + 1)
+	];
 }
 /**
 * Merge parsed entries that share the same value.
@@ -8408,8 +8520,9 @@ function extractCompoundStates(valueMap) {
 	const keys = Object.keys(valueMap);
 	if (keys.length < 3 || !keys.some((k) => k.includes("&"))) return valueMap;
 	const entries = keys.map((key) => {
+		const atoms = splitTopLevelAnd(key);
 		return {
-			atoms: splitTopLevelAnd(key) ?? [key],
+			atoms: atoms === null || atoms.includes("_") ? [key] : atoms,
 			value: valueMap[key]
 		};
 	});
@@ -8600,7 +8713,35 @@ function hasAtRuleContext(node) {
 	return false;
 }
 /**
-* Sort OR branches to prioritize at-rule conditions first.
+* Check if a condition involves an `@supports` query.
+*
+* `@supports` is feature detection: anything ANDed with it (e.g. a
+* `@container scroll-state(...)` query that only exists when
+* `container-type: scroll-state` is supported) becomes *unknown* — not
+* simply false — when the feature is absent. So a negated supports branch
+* must be emitted first (as the bare "feature unsupported" fallback) and
+* every other negated branch must nest inside the supported scope.
+*/
+function hasSupportsContext(node) {
+	if (node.kind === "state") return node.type === "supports";
+	if (node.kind === "compound") return node.children.some(hasSupportsContext);
+	return false;
+}
+/**
+* Rank an OR branch for exclusive expansion ordering. Lower rank is
+* processed first (becomes the more "outer" / less-constrained branch):
+*   0 — branch involves `@supports` (feature-detection guard)
+*   1 — branch involves another at-rule (media / container / starting)
+*   2 — branch is pure selector context (modifiers / pseudos)
+*/
+function orBranchRank(node) {
+	if (hasSupportsContext(node)) return 0;
+	if (hasAtRuleContext(node)) return 1;
+	return 2;
+}
+/**
+* Sort OR branches to prioritize at-rule conditions first, with
+* `@supports` branches ahead of all other at-rules.
 *
 * This is critical for correct CSS generation. For `!A | !B` where A is at-rule
 * and B is modifier, we want:
@@ -8610,15 +8751,18 @@ function hasAtRuleContext(node) {
 * If we process in wrong order (!B first), we'd get:
 *   - Branch 0: !B (modifier negation WITHOUT at-rule context - WRONG!)
 *   - Branch 1: B & !A (at-rule negation with modifier - incomplete coverage)
+*
+* The extra `@supports`-first tier matters when a feature query guards a
+* dependent query. For `!(S & C) = !S | !C` (S = `@supports(...)`, C =
+* `@container scroll-state(...)`), `simplify` sorts the branches
+* alphabetically into `[!C, !S]`. Expanding in that order would emit `!C`
+* as a bare `@container (not scroll-state(...))` — meaningless where the
+* feature is unsupported, so the default would never apply there. Putting
+* `!S` first yields `!S | (S & !C)`: a bare supports fallback plus the
+* dependent negation nested in the supported scope.
 */
 function sortOrBranchesForExpansion(branches) {
-	return [...branches].sort((a, b) => {
-		const aHasAtRule = hasAtRuleContext(a);
-		const bHasAtRule = hasAtRuleContext(b);
-		if (aHasAtRule && !bHasAtRule) return -1;
-		if (!aHasAtRule && bHasAtRule) return 1;
-		return 0;
-	});
+	return [...branches].sort((a, b) => orBranchRank(a) - orBranchRank(b));
 }
 /**
 * Expand ORs in a single entry's exclusive condition
@@ -8683,21 +8827,6 @@ function transformSelectorContent(content) {
 	return content.replace(ELEMENT_NAME_RE, (_, prefix, name) => `${prefix}[data-element="${name}"]`);
 }
 //#endregion
-//#region src/pipeline/warnings.ts
-const defaultWarningHandler = (warning) => {
-	console.warn(`[Tasty] ${warning.message}`);
-};
-let warningHandler = defaultWarningHandler;
-/**
-* Emit a structured pipeline warning via the configured handler.
-*/
-function emitWarning(code, message) {
-	warningHandler({
-		code,
-		message
-	});
-}
-//#endregion
 //#region src/pipeline/parseStateKey.ts
 /**
 * State Key Parser
@@ -9212,7 +9341,17 @@ function runPipeline(styles, parserContext) {
 	const starting = [];
 	for (const rule of dedupedRules) if (rule.startingStyle) starting.push(rule);
 	else normal.push(rule);
-	return normal.concat(starting);
+	return stableSortByOrder(normal).concat(stableSortByOrder(starting));
+}
+/**
+* Stable sort CSS rules by their `order` hint ascending. Rules without an
+* `order` are treated as 0. `Array.prototype.sort` is stable (ES2019+,
+* Node >= 20), so equal-order rules keep their emission order — the `_`
+* fallback floor (low order) stays before the overrides that layer over it.
+*/
+function stableSortByOrder(rules) {
+	if (rules.length <= 1) return rules;
+	return [...rules].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 }
 /**
 * Process styles at a given nesting level.
@@ -9320,7 +9459,8 @@ function invokeHandler(handler, stateSnapshots, selectorSuffix) {
 			for (const suffix of suffixes) computedRules.push({
 				condition: snapshot.condition,
 				declarations,
-				selectorSuffix: suffix
+				selectorSuffix: suffix,
+				order: snapshot.order
 			});
 		}
 	}
@@ -9738,10 +9878,15 @@ function computeStateCombinations(exclusiveByStyle, lookupStyles) {
 		const simplified = simplifyCondition(and(...combo.map((e) => e.exclusiveCondition)));
 		if (simplified.kind === "false") continue;
 		const values = {};
-		for (const entry of combo) values[entry.styleKey] = entry.value;
+		let order = 0;
+		for (const entry of combo) {
+			values[entry.styleKey] = entry.value;
+			if (entry.priority > order) order = entry.priority;
+		}
 		snapshots.push({
 			condition: simplified,
-			values
+			values,
+			order
 		});
 	}
 	return snapshots;
@@ -9789,10 +9934,13 @@ function mergeByValue(rules) {
 	for (const [, groupRules] of groups) if (groupRules.length === 1) merged.push(groupRules[0]);
 	else {
 		const mergedCondition = simplifyCondition(or(...groupRules.map((r) => r.condition)));
+		let order = groupRules[0].order;
+		for (const r of groupRules) if (r.order < order) order = r.order;
 		merged.push({
 			condition: mergedCondition,
 			declarations: groupRules[0].declarations,
-			selectorSuffix: groupRules[0].selectorSuffix
+			selectorSuffix: groupRules[0].selectorSuffix,
+			order
 		});
 	}
 	return merged;
@@ -9802,12 +9950,15 @@ function mergeByValue(rules) {
 */
 function buildSelectorFromVariant(variant, selectorSuffix) {
 	let selector = "";
-	selector += branchToCSS([...variant.modifierConditions, ...variant.pseudoConditions]);
-	for (const group of variant.selectorGroups) selector += selectorGroupToCSS(group);
+	let rootSegment = branchToCSS([...variant.modifierConditions, ...variant.pseudoConditions]);
+	for (const group of variant.selectorGroups) rootSegment += selectorGroupToCSS(group);
+	selector += wrapWhere(rootSegment);
 	if (variant.parentGroups.length > 0) selector += parentGroupsToCSS(variant.parentGroups);
 	selector += selectorSuffix;
 	const ownOptimized = optimizeGroups(variant.ownGroups);
-	for (const group of ownOptimized) selector += selectorGroupToCSS(group);
+	let ownSegment = "";
+	for (const group of ownOptimized) ownSegment += selectorGroupToCSS(group);
+	selector += wrapWhere(ownSegment);
 	return selector;
 }
 /**
@@ -9842,7 +9993,8 @@ function materializeComputedRule(rule) {
 		const selectorFragments = mergeVariantsIntoSelectorGroups(group.variants).map((v) => buildSelectorFromVariant(v, rule.selectorSuffix));
 		const cssRule = {
 			selector: selectorFragments.length === 1 ? selectorFragments[0] : selectorFragments,
-			declarations
+			declarations,
+			order: rule.order
 		};
 		if (group.atRules.length > 0) cssRule.atRules = group.atRules;
 		if (group.rootPrefix) cssRule.rootPrefix = group.rootPrefix;
@@ -10554,6 +10706,6 @@ function resetConfig() {
 	delete storage[GLOBAL_INJECTOR_KEY];
 }
 //#endregion
-export { parseColor as $, StyleInjector as A, strToRgb as At, styleHandlers as B, parseStateKey as C, getColorSpaceFunc as Ct, extractPredefinedStateRefs as D, getRgbValuesFromRgbaString as Dt, extractLocalPredefinedStates as E, getNamedColorHex as Et, fontFaceContentHash as F, CUSTOM_UNITS as G, warn as H, formatFontFaceRule as I, filterMods as J, DIRECTIONS as K, hasLocalFontFace as L, formatCounterStyleRule as M, hasLocalCounterStyle as N, getGlobalPredefinedStates as O, hexToRgb as Ot, extractLocalFontFace as P, normalizeColorTokenValue as Q, SheetManager as R, renderStyles as S, getColorSpaceComponents as St, createStateParserContext as T, getComponentPropertySyntax as Tt, createStyle as U, deprecationWarning as V, PropertyTypeResolver as W, getGlobalParser as X, getGlobalFuncs as Y, getGlobalPredefinedTokens as Z, markStylesGenerated as _, extractLocalProperties as _t, getGlobalCounterStyle as a, okhslPlugin as at, hasPipelineCacheEntry as b, parsePropertyToken as bt, getGlobalKeyframes as c, DEFAULT_NAME_PREFIX as ct, getNamePrefix as d, makeCounterStyleName as dt, parseStyle as et, hasGlobalKeyframes as f, makeKeyframeName as ft, isTestEnvironment as g, hashString as gt, isConfigLocked as h, isDevEnv as ht, getGlobalConfigTokens as i, okhslFunc as it, extractLocalCounterStyle as j, Lru as jt, setGlobalPredefinedStates as k, hslToRgbValues as kt, getGlobalRecipes as l, DEFAULT_ZERO_NAME_PREFIX as lt, hasStylesGenerated as m, validateNamePrefix as mt, getConfig as n, setGlobalPredefinedTokens as nt, getGlobalFontFace as o, StyleParser as ot, hasGlobalRecipes as p, tastyClassRegex as pt, customFunc as q, getEffectiveProperties as r, stringifyStyles as rt, getGlobalInjector as s, Bucket as st, configure as t, resetGlobalPredefinedTokens as tt, getGlobalStyles as u, makeClassName as ut, resetConfig as v, getEffectiveDefinition as vt, camelToKebab as w, getColorSpaceSuffix as wt, isSelector as x, colorInitialValueToComponents as xt, generateTypographyTokens as y, hasLocalProperties as yt, STYLE_HANDLER_MAP as z };
+export { parseColor as $, StyleInjector as A, hasLocalProperties as At, styleHandlers as B, parseStateKey as C, getRgbValuesFromRgbaString as Ct, extractPredefinedStateRefs as D, Lru as Dt, extractLocalPredefinedStates as E, strToRgb as Et, fontFaceContentHash as F, CUSTOM_UNITS as G, warn as H, formatFontFaceRule as I, filterMods as J, DIRECTIONS as K, hasLocalFontFace as L, formatCounterStyleRule as M, hasLocalCounterStyle as N, getGlobalPredefinedStates as O, extractLocalProperties as Ot, extractLocalFontFace as P, normalizeColorTokenValue as Q, SheetManager as R, renderStyles as S, getNamedColorHex as St, createStateParserContext as T, hslToRgbValues as Tt, createStyle as U, deprecationWarning as V, PropertyTypeResolver as W, getGlobalParser as X, getGlobalFuncs as Y, getGlobalPredefinedTokens as Z, markStylesGenerated as _, colorInitialValueToComponents as _t, getGlobalCounterStyle as a, okhslPlugin as at, hasPipelineCacheEntry as b, getColorSpaceSuffix as bt, getGlobalKeyframes as c, DEFAULT_NAME_PREFIX as ct, getNamePrefix as d, makeCounterStyleName as dt, parseStyle as et, hasGlobalKeyframes as f, makeKeyframeName as ft, isTestEnvironment as g, hashString as gt, isConfigLocked as h, isDevEnv as ht, getGlobalConfigTokens as i, okhslFunc as it, extractLocalCounterStyle as j, parsePropertyToken as jt, setGlobalPredefinedStates as k, getEffectiveDefinition as kt, getGlobalRecipes as l, DEFAULT_ZERO_NAME_PREFIX as lt, hasStylesGenerated as m, validateNamePrefix as mt, getConfig as n, setGlobalPredefinedTokens as nt, getGlobalFontFace as o, StyleParser as ot, hasGlobalRecipes as p, tastyClassRegex as pt, customFunc as q, getEffectiveProperties as r, stringifyStyles as rt, getGlobalInjector as s, Bucket as st, configure as t, resetGlobalPredefinedTokens as tt, getGlobalStyles as u, makeClassName as ut, resetConfig as v, getColorSpaceComponents as vt, camelToKebab as w, hexToRgb as wt, isSelector as x, getComponentPropertySyntax as xt, generateTypographyTokens as y, getColorSpaceFunc as yt, STYLE_HANDLER_MAP as z };
 
-//# sourceMappingURL=config-BBiyxMCe.js.map
+//# sourceMappingURL=config-DF2QZQEW.js.map