@tenphi/tasty 2.6.3 → 2.6.5

package/dist/{config-BaxtQMS3.js → config-IzenlK2R.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" && (() => {
@@ -6205,9 +6205,13 @@ function simplifyInner(node) {
 		return node;
 	}
 	if (node.kind === "compound") {
+		const key = getConditionUniqueId(node);
+		const cached = simplifyCache.get(key);
+		if (cached) return cached;
 		const simplifiedChildren = node.children.map((c) => simplifyInner(c));
-		if (node.operator === "AND") return simplifyAnd(simplifiedChildren);
-		else return simplifyOr(simplifiedChildren);
+		const result = node.operator === "AND" ? simplifyAnd(simplifiedChildren) : simplifyOr(simplifiedChildren);
+		simplifyCache.set(key, result);
+		return result;
 	}
 	return node;
 }
@@ -6225,13 +6229,23 @@ function simplifyAnd(children) {
 	if (hasRangeContradiction(terms)) return falseCondition();
 	if (hasAttributeConflict(terms)) return falseCondition();
 	if (hasContainerStyleConflict(terms)) return falseCondition();
-	terms = removeImpliedNegations(terms);
-	terms = deduplicateTerms(terms);
-	terms = mergeRanges(terms);
-	terms = sortTerms(terms);
-	terms = applyAbsorptionAnd(terms);
-	terms = applyConsensusAnd(terms);
-	terms = pruneContradictedOrBranches(terms);
+	const MAX_SIMPLIFY_PASSES = 4;
+	for (let pass = 0; pass < MAX_SIMPLIFY_PASSES; pass++) {
+		const lengthBefore = terms.length;
+		const keyBefore = simplifyTermsKey(terms);
+		terms = removeImpliedNegations(terms);
+		terms = deduplicateTerms(terms);
+		terms = mergeRanges(terms);
+		terms = sortTerms(terms);
+		terms = applyAbsorptionAnd(terms);
+		terms = applyConsensusAnd(terms);
+		terms = pruneContradictedOrBranches(terms);
+		if (terms.length === 0) break;
+		if (terms.length === 1) break;
+		if (hasContradiction(terms)) return falseCondition();
+		if (hasAttributeConflict(terms)) return falseCondition();
+		if (terms.length === lengthBefore && simplifyTermsKey(terms) === keyBefore) break;
+	}
 	if (terms.length === 0) return trueCondition();
 	if (terms.length === 1) return terms[0];
 	return {
@@ -6546,6 +6560,13 @@ function removeImpliedNegations(terms) {
 	const isImplied = buildImpliedNegationCheck(terms);
 	return terms.filter((t) => !isImplied(t));
 }
+/**
+* Build a stable, order-insensitive key for a list of AND terms.
+* Used to detect fixpoint convergence in `simplifyAnd`.
+*/
+function simplifyTermsKey(terms) {
+	return terms.map((t) => getConditionUniqueId(t)).sort().join("&");
+}
 function deduplicateTerms(terms) {
 	const seen = /* @__PURE__ */ new Set();
 	const result = [];
@@ -7868,6 +7889,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)
@@ -7884,9 +7913,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;
@@ -7936,7 +7966,69 @@ function branchesProduceDifferentContexts(branches) {
 * so here we just collect all variants. Any remaining ORs in the condition
 * tree (e.g., from De Morgan expansion) are handled as simple alternatives.
 */
+/**
+* Serialize a single negated own-element selector leaf (modifier or pseudo)
+* to its *positive* selector string, for use inside a combined `:not(...)`.
+*
+* Returns `null` when the node is not a negated, own-element selector leaf
+* (e.g. positive, or a media/container/parent/root/own/supports/starting
+* wrapper, or a compound), which means it cannot participate in De Morgan
+* recombination.
+*/
+function negatedSelectorLeafToPositiveSelector(node) {
+	if (node.kind !== "state" || !node.negated) return null;
+	if (node.type === "modifier") return modifierToCSS({
+		attribute: node.attribute,
+		value: node.value,
+		operator: node.operator,
+		negated: false
+	});
+	if (node.type === "pseudo") {
+		const p = node.pseudo;
+		if ((p.startsWith(":is(") || p.startsWith(":where(")) && !p.includes(",")) {
+			const inner = p.slice(p.indexOf("(") + 1, -1);
+			if (!/\s/.test(inner)) return inner;
+			return `:is(${inner})`;
+		}
+		return p;
+	}
+	return null;
+}
+/**
+* De Morgan recombination for an OR whose every branch is a negated
+* own-element selector leaf:
+*
+*   OR(¬a, ¬b, ¬c)  ≡  ¬(a ∧ b ∧ c)  →  single `:not(a b c)`
+*
+* This keeps the catch-all/default exclusive condition (which has no
+* positive terms to prune against) from exploding into a Cartesian product
+* of OR branches at `andToCSS`. Returns `null` when recombination does not
+* apply, so genuine unions (e.g. `:hover | :focus`) fall through to the
+* normal per-branch materialization.
+*/
+function tryRecombineNegatedSelectorOr(children) {
+	if (children.length < 2) return null;
+	const positiveSelectors = [];
+	for (const child of children) {
+		const sel = negatedSelectorLeafToPositiveSelector(child);
+		if (sel === null) return null;
+		positiveSelectors.push(sel);
+	}
+	positiveSelectors.sort();
+	const compound = positiveSelectors.join("");
+	const v = emptyVariant();
+	v.pseudoConditions.push({
+		pseudo: `:is(${compound})`,
+		negated: true
+	});
+	return {
+		variants: [v],
+		isImpossible: false
+	};
+}
 function orToCSS(children) {
+	const recombined = tryRecombineNegatedSelectorOr(children);
+	if (recombined !== null) return recombined;
 	const allVariants = [];
 	for (const child of children) {
 		const childCSS = conditionToCSSInner(child);
@@ -8165,7 +8257,11 @@ function buildExclusiveConditions(entries) {
 	const priorConditions = [];
 	for (const entry of entries) {
 		let exclusive = entry.condition;
-		for (const prior of priorConditions) if (prior.kind !== "true") exclusive = and(exclusive, not(prior));
+		for (const prior of priorConditions) {
+			if (prior.kind === "true") continue;
+			if (entry.condition.kind !== "true" && simplifyCondition(and(entry.condition, prior)).kind === "false") continue;
+			exclusive = and(exclusive, not(prior));
+		}
 		const simplified = simplifyCondition(exclusive);
 		if (simplified.kind === "false") continue;
 		result.push({
@@ -8513,7 +8609,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:
@@ -8523,15 +8647,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
@@ -8827,7 +8954,15 @@ var Parser = class {
 			return createPseudoCondition(value, false, value);
 		}
 		if (value.startsWith(".")) return createPseudoCondition(value, false, value);
-		if (value.startsWith("[")) return createPseudoCondition(value, false, value);
+		if (value.startsWith("[")) {
+			const attrMatch = /^\[\s*([a-zA-Z_][\w-]*)\s*(?:(=|\^=|\$=|\*=)\s*(?:"([^"]*)"|'([^']*)'|([^\]\s]+)))?\s*\]$/.exec(value);
+			if (attrMatch) {
+				const [, attribute, operator, dq, sq, bare] = attrMatch;
+				if (operator === void 0) return createModifierCondition(attribute, void 0, "=", false, value);
+				return createModifierCondition(attribute, dq ?? sq ?? bare, operator, false, value);
+			}
+			return createPseudoCondition(value, false, value);
+		}
 		if (value.includes("=")) return this.parseValueModifier(value);
 		return this.parseBooleanModifier(value);
 	}
@@ -10459,6 +10594,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-BaxtQMS3.js.map
+//# sourceMappingURL=config-IzenlK2R.js.map