@barocss/kit 0.8.2 → 0.10.0

package/dist/index.cjs

@@ -436,6 +436,26 @@ function staticUtility(name, decls, opts, ctx) {
 *     category: 'layout',
 *   });
 */
+/**
+* #300: a theme key that no built-in utility names (`theme.extend.borderRadius.card`) still resolves, as in
+* Tailwind 4 where `--radius-card` gives `rounded-card`. Only word keys that start with a letter (numbers stay
+* bare values), never `DEFAULT`; unknown keys return null so the utility emits nothing (#213).
+*/
+function themeKeyEntry(ctx, namespace, key) {
+	if (key === "DEFAULT" || !/^[a-zA-Z][\w-]*$/.test(key) || typeof ctx?.theme !== "function") return void 0;
+	const table = ctx.theme(namespace);
+	if (!table || typeof table !== "object" || !Object.prototype.hasOwnProperty.call(table, key)) return void 0;
+	return table[key] ?? void 0;
+}
+/** #300: the literal value of `theme.<namespace>.<key>` when it is a string, else null. */
+function themeKeyValue(ctx, namespace, key) {
+	const v = themeKeyEntry(ctx, namespace, key);
+	return typeof v === "string" ? v : null;
+}
+/** #300: `var(--<varPrefix>-<key>)` when `theme.<namespace>.<key>` exists (the :root var BaroCSS emits for it), else null. */
+function themeKeyVar(ctx, namespace, key, varPrefix) {
+	return themeKeyEntry(ctx, namespace, key) === void 0 ? null : `var(--${varPrefix}-${key})`;
+}
 /** #261: `var(--spacing-<key>)` for a named (non-numeric) `theme.spacing` key, else null. */
 function spacingKeyValue(ctx, key, negative) {
 	if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
@@ -478,12 +498,18 @@ function functionalUtility(opts, ctx) {
 			}
 			let themeValue;
 			if (opts.themeKey && ctx.theme) themeValue = themeScalar(ctx.theme(opts.themeKey, finalValue));
+			let namespace = themeValue !== void 0 ? opts.themeKey : void 0;
 			if (!themeValue && opts.themeKeys && ctx.theme) for (const key of opts.themeKeys) {
 				themeValue = themeScalar(ctx.theme(key, finalValue));
-				if (themeValue !== void 0) break;
+				if (themeValue !== void 0) {
+					namespace = key;
+					break;
+				}
 			}
 			if (themeValue !== void 0) {
-				extra.realThemeValue = finalValue;
+				extra.themeNamespace = namespace;
+				extra.themeKey = finalValue;
+				if (namespace === "colors" || !(opts.themeKeys ?? [opts.themeKey]).includes("colors")) extra.realThemeValue = finalValue;
 				finalValue = themeValue;
 				if (opts.prop) return [decl(opts.prop, finalValue)];
 				if (opts.handle) {
@@ -1057,7 +1083,13 @@ function parseUtility(value, ctx) {
 //#region src/core/astToCss.ts
 var isSafePrelude = (text) => {
 	const t = String(text ?? "");
-	return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t);
+	return !hasCommentDelimiter(t) && !hasHtmlEndTagOpener(t) && isBalancedPrelude(t) && !/url\s*\(/i.test(t);
+};
+var uniqueDescriptors = (node) => {
+	if (node.type !== "at-rule") return [];
+	if (node.name !== "property") return node.nodes;
+	const seen = /* @__PURE__ */ new Set();
+	return node.nodes.filter((c) => c.type !== "decl" || !seen.has(c.prop) && !!seen.add(c.prop));
 };
 var isSafeDecl = (prop, value) => isStructureSafeValue(String(prop)) && isStructureSafeValue(String(value ?? "")) && !hasHtmlEndTagOpener(String(prop)) && !hasHtmlEndTagOpener(String(value ?? ""));
 var importantPrefix = "!important";
@@ -1153,10 +1185,10 @@ function rootToCss(nodes, opts) {
 			if (isSafeDecl(node.prop, node.value)) list.push(minify ? `${node.prop}:${node.value};` : `${node.prop}: ${node.value};`);
 		} else if (node.type === "at-rule" && isSafePrelude(node.name) && isSafePrelude(node.params)) {
 			if (minify) {
-				const body = node.nodes.filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
+				const body = uniqueDescriptors(node).filter((child) => child.type === "decl" && isSafeDecl(child.prop, child.value)).map((child) => child.type === "decl" ? `${child.prop}:${child.value};` : "").join("");
 				list.push(`@${node.name} ${node.params}{${body}}`);
 			} else list.push(`@${node.name} ${node.params} {
-${node.nodes.map((node) => {
+${uniqueDescriptors(node).map((node) => {
 				if (node.type === "decl" && isSafeDecl(node.prop, node.value)) return `\t${node.prop}: ${node.value};`;
 			}).join("\n")}
 }`);
@@ -1209,6 +1241,14 @@ function boxShadowToCssVars(boxShadow) {
 * fontSize: { xs: ['0.75rem', '1rem'], ... }
 * → { '--text-xs': '0.75rem', '--text-xs--line-height': '1rem' }
 */
+/** The line height of a fontSize tuple: `['4rem', '1.1']` or Tailwind's `['4rem', { lineHeight: '1.1' }]` (#300). */
+function fontSizeLineHeight(value) {
+	if (!Array.isArray(value)) return void 0;
+	const second = value[1];
+	if (typeof second === "string" || typeof second === "number") return String(second);
+	const lh = second?.lineHeight;
+	return lh == null ? void 0 : String(lh);
+}
 function fontSizeToCssVars(fontSize) {
 	if (!fontSize) return {};
 	const result = {};
@@ -1216,7 +1256,8 @@ function fontSizeToCssVars(fontSize) {
 		const value = fontSize[key];
 		if (Array.isArray(value)) {
 			result[`--text-${key}`] = value[0];
-			if (value[1]) result[`--text-${key}--line-height`] = value[1];
+			const lineHeight = fontSizeLineHeight(value);
+			if (lineHeight) result[`--text-${key}--line-height`] = lineHeight;
 		} else result[`--text-${key}`] = value;
 	}
 	return result;
@@ -1702,6 +1743,11 @@ function parseClassToAst(fullClassName, ctx) {
 				variantChain: modifiers,
 				index: i
 			});
+			if (result == null) {
+				debugWarn(`[BAROCSS] Unknown variant: "${variant.type}" in "${fullClassName}"`);
+				failures.add(fullClassName);
+				return [];
+			}
 			if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) continue;
 			if (typeof result === "string" && result.includes("&")) wrappers.push({
 				type: "rule",
@@ -1788,10 +1834,11 @@ function getAstCacheStats(ctx) {
 * @example
 *   const css = generateCss('sm:dark:hover:bg-red-500 sm:focus:bg-blue-500', ctx);
 */
+var CLASS_SEPARATOR = /[ \t\n\f\r]+/;
 function generateCss(classList, ctx, opts) {
 	const seen = /* @__PURE__ */ new Set();
 	const allAtRootNodes = [];
-	const results = classList.split(/\s+/).filter((cls) => {
+	const results = classList.split(CLASS_SEPARATOR).filter((cls) => {
 		if (!cls) return false;
 		if (opts?.dedup) {
 			if (seen.has(cls)) return false;
@@ -1851,7 +1898,7 @@ function generateCss(classList, ctx, opts) {
 */
 function generateCssRules(classList, ctx, opts) {
 	const seen = /* @__PURE__ */ new Set();
-	return classList.split(/\s+/).filter((cls) => {
+	return classList.split(CLASS_SEPARATOR).filter((cls) => {
 		if (!cls) return false;
 		if (opts?.dedup) {
 			if (seen.has(cls)) return false;
@@ -2627,105 +2674,81 @@ textarea {
   resize: vertical;
 }
 `;
+/**
+* Full preflight: a port of Tailwind CSS v4.3.3's preflight.css (MIT), rule for rule (#336).
+* `--theme(--x, fallback)` becomes `var(--x, fallback)`; the default sans/mono families also fall back to
+* `--font-sans`/`--font-mono` so a BaroCSS theme applies. Checked by tests/compat/preflight-336.test.ts.
+*/
 var preflightFullCSS = `
-/* BaroCSS Preflight - Full Reset */
-/* =============================== */
-
-/* Box sizing rules */
+/* BaroCSS Preflight - Full (Tailwind 4.3.3) */
 *,
-*::before,
-*::after {
+::after,
+::before,
+::backdrop,
+::file-selector-button {
   box-sizing: border-box;
-}
-
-/* Remove default margin and padding; reset border to Tailwind v4's universal
-   \`border: 0 solid\` so a bare border/border-t (width set by the utility, style
-   otherwise \`none\`) renders. Width 0 keeps borders invisible until a utility
-   sets one. */
-* {
   margin: 0;
   padding: 0;
   border: 0 solid;
 }
 
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  scroll-behavior: smooth;
-  text-rendering: optimizeSpeed;
+html,
+:host {
   line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Remove list styles on ul, ol elements */
-ul,
-ol {
-  list-style: none;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+  font-family: var(--default-font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+  font-feature-settings: var(--default-font-feature-settings, normal);
+  font-variation-settings: var(--default-font-variation-settings, normal);
+  -webkit-tap-highlight-color: transparent;
 }
 
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-  
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
 }
 
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-  display: block;
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
-/* Additional full resets */
-html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  /* Tailwind 4.1.13 root font (app --default-font-family / --font-sans win) */
-  font-family: var(--default-font-family, var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
-  font-feature-settings: var(--default-font-feature-settings, normal);
-  font-variation-settings: var(--default-font-variation-settings, normal);
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
 }
 
-/* Remove the gray background on active links in IE 10 */
 a {
-  background-color: transparent;
-  text-decoration: none;
   color: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
 }
 
-/* Add the correct font weight in Chrome, Edge, and Safari */
 b,
 strong {
   font-weight: bolder;
 }
 
-/* Prevent sub and sup elements from affecting the line height */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
+  font-feature-settings: var(--default-mono-font-feature-settings, normal);
+  font-variation-settings: var(--default-mono-font-variation-settings, normal);
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
 sub,
 sup {
   font-size: 75%;
@@ -2742,265 +2765,49 @@ sup {
   top: -0.5em;
 }
 
-/* Improve media defaults */
-svg {
-  vertical-align: middle;
-}
-
-/* Remove border on iframe */
-iframe {
-  border: 0;
-}
-
-/* Table defaults */
 table {
+  text-indent: 0;
+  border-color: inherit;
   border-collapse: collapse;
-  border-spacing: 0;
 }
 
-/* Form element defaults */
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
+:-moz-focusring:where(:not(iframe)) {
+  outline: auto;
 }
 
-button,
-select {
-  text-transform: none;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/* Remove the inner border and padding in Firefox */
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/* Restore the focus styles unset by the previous rule */
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/* Correct the padding in Firefox */
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/* Remove padding so developers aren't caught out when they zero out fieldset elements */
-legend {
-  box-sizing: border-box;
-  color: inherit;
-  display: table;
-  max-width: 100%;
-  padding: 0;
-  white-space: normal;
-}
-
-/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
 progress {
   vertical-align: baseline;
 }
 
-/* Remove the default vertical scrollbar in IE */
-textarea {
-  overflow: auto;
-}
-
-/* Correct the cursor style of increment and decrement buttons in Chrome */
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/* Remove the inner padding in Chrome and Safari on macOS */
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-/* Remove the inner padding in Chrome and Safari on macOS */
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/* Remove the default vertical scrollbar in IE */
-textarea {
-  overflow: auto;
-}
-
-/* Correct the cursor style of increment and decrement buttons in Chrome */
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
+summary {
+  display: list-item;
 }
 
-/* Remove the inner padding in Chrome and Safari on macOS */
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-
-/* Remove the inner padding in Chrome and Safari on macOS */
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/* Additional full reset styles */
-abbr[title] {
-  border-bottom: none;
-  text-decoration: underline;
-  text-decoration: underline dotted;
-}
-
-/* Add the correct font size in all browsers */
-small {
-  font-size: 80%;
-}
-
-/* Prevent overflow of the container in all browsers */
-code,
-kbd,
-pre,
-samp {
-  font-family: var(--default-mono-font-family, var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace));
-  font-feature-settings: var(--default-mono-font-feature-settings, normal);
-  font-variation-settings: var(--default-mono-font-variation-settings, normal);
-  font-size: 1em;
+ol,
+ul,
+menu {
+  list-style: none;
 }
 
-/* Add the correct display in IE 9 */
+img,
+svg,
+video,
+canvas,
 audio,
-video {
-  display: inline-block;
-}
-
-/* Add the correct display in IE */
-template {
-  display: none;
-}
-
-/* Hidden attribute */
-[hidden] {
-  display: none;
-}
-
-/* Focus styles */
-:focus {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-}
-
-/* Skip link for accessibility */
-.skip-link {
-  position: absolute;
-  top: -40px;
-  left: 6px;
-  background: #000;
-  color: white;
-  padding: 8px;
-  text-decoration: none;
-  z-index: 100;
-}
-
-.skip-link:focus {
-  top: 6px;
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
 }
 
-/* Print styles */
-@media print {
-  *,
-  *::before,
-  *::after {
-    background: transparent !important;
-    color: #000 !important;
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-  
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-  
-  a[href]:after {
-    content: " (" attr(href) ")";
-  }
-  
-  abbr[title]:after {
-    content: " (" attr(title) ")";
-  }
-  
-  a[href^="#"]:after,
-  a[href^="javascript:"]:after {
-    content: "";
-  }
-  
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-  
-  thead {
-    display: table-header-group;
-  }
-  
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-  
-  img {
-    max-width: 100% !important;
-  }
-  
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-  
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
+img,
+video {
+  max-width: 100%;
+  height: auto;
 }
 
-/* Tailwind 4.1.13 form-control reset: inherit typography and colour, drop native radius/background (#228) */
+/* form-control reset */
 button,
 input,
 select,
@@ -3033,7 +2840,8 @@ textarea,
   opacity: 1;
 }
 
-@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+@supports (not (-webkit-appearance: -apple-pay-button)) or
+  (contain-intrinsic-size: 1px)  {
   ::placeholder {
     color: color-mix(in oklab, currentcolor 50%, transparent);
   }
@@ -3042,6 +2850,58 @@ textarea,
 textarea {
   resize: vertical;
 }
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-date-and-time-value {
+  min-height: 1lh;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
+}
+
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+
+::-webkit-datetime-edit,
+::-webkit-datetime-edit-year-field,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-hour-field,
+::-webkit-datetime-edit-minute-field,
+::-webkit-datetime-edit-second-field,
+::-webkit-datetime-edit-millisecond-field,
+::-webkit-datetime-edit-meridiem-field {
+  padding-block: 0;
+}
+
+::-webkit-calendar-picker-indicator {
+  line-height: 1;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+button,
+input:where([type='button'], [type='reset'], [type='submit']),
+::file-selector-button {
+  appearance: button;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[hidden]:where(:not([hidden='until-found'])) {
+  display: none !important;
+}
 `;
 //#endregion
 //#region src/core/context.ts
@@ -3277,6 +3137,7 @@ function jsonToAst(input, ctx) {
 					variantChain: [],
 					index: i
 				});
+				if (result == null) continue;
 				if (plugin.wrap && (result === "&" || typeof result === "object" && !Array.isArray(result) && result.selector === "&" || Array.isArray(result) && result.length === 1 && result[0].selector === "&")) {} else if (typeof result === "string" && result.includes("&")) wrappers.push({
 					type: "rule",
 					selector: result
@@ -3953,6 +3814,7 @@ functionalUtility({
 	prop: "transition-timing-function",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "transitionTimingFunction", value, "ease") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	handle: (value, _ctx, _token) => {
 		return [decl("transition-timing-function", value)];
 	},
@@ -4137,6 +3999,7 @@ functionalUtility({
 	prop: "filter",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	handle: (value, _ctx, token) => {
 		if (token.customProperty) return [decl("--baro-blur", `blur(var(${value}))`), filters$1()];
 		return [decl("--baro-blur", `blur(${value})`), filters$1()];
@@ -4232,13 +4095,14 @@ functionalUtility({
 			transparent: "transparent"
 		}[extra?.realThemeValue ?? value];
 		if (keyword) return dropShadowColor(keyword, opacity);
+		const key = extra?.realThemeValue ?? value;
+		const named = token.arbitrary ? null : namedDropShadow(ctx, key);
+		if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${key}))`);
 		if (extra?.realThemeValue) return dropShadowColor(value, opacity, `var(--color-${extra.realThemeValue})`);
 		if (token.arbitrary) {
 			if (parseColor(value)) return dropShadowColor(value, opacity);
 			return dropShadowValue(value, opacity);
 		}
-		const named = namedDropShadow(ctx, value);
-		if (named) return dropShadowValue(named, opacity, `drop-shadow(var(--drop-shadow-${value}))`);
 		return null;
 	},
 	handleCustomProperty: (value) => {
@@ -4356,6 +4220,7 @@ functionalUtility({
 	prop: "backdrop-filter",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "blur", value, "blur") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	handle: (value, _ctx, token) => {
 		if (token.customProperty) return [decl("--baro-backdrop-blur", `blur(var(${value}))`), ...filters()];
 		return [decl("--baro-backdrop-blur", `blur(${value})`), ...filters()];
@@ -4511,11 +4376,15 @@ function boxShadowLayer(layer, value, opacity) {
 		decl("box-shadow", SHADOW_COMPOSITE)
 	];
 }
-function namedBoxShadow(layer, name, opacity) {
-	if (layer === "shadow") return own(NAMED_SHADOWS, name) ? boxShadowLayer(layer, NAMED_SHADOWS[name], opacity) : null;
-	if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity);
-	if (!opacity && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
-	return null;
+function namedBoxShadow(layer, name, opacity, ctx) {
+	if (layer === "shadow") {
+		if (own(NAMED_SHADOWS, name)) return boxShadowLayer(layer, NAMED_SHADOWS[name], opacity);
+	} else {
+		if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity);
+		if (!opacity && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
+	}
+	const custom = ctx && name !== "none" ? themeKeyValue(ctx, layer === "shadow" ? "boxShadow" : "insetShadow", name) : null;
+	return custom ? boxShadowLayer(layer, custom, opacity) : null;
 }
 staticUtility("shadow-none", [
 	ringShadowProperties,
@@ -4555,10 +4424,10 @@ for (const layer of ["shadow", "inset-shadow"]) functionalUtility({
 	supportsCustomProperty: true,
 	supportsOpacity: true,
 	themeKeys: ["colors"],
-	handleBareValue: ({ value, extra }) => namedBoxShadow(layer, value, extra?.opacity) ? value : null,
-	handle: (value, _ctx, token, extra) => {
+	handleBareValue: ({ value, ctx, extra }) => namedBoxShadow(layer, value, extra?.opacity, ctx) ? value : null,
+	handle: (value, ctx, token, extra) => {
 		const opacity = extra?.opacity;
-		const named = !extra?.realThemeValue && !token.arbitrary ? namedBoxShadow(layer, value, opacity) : null;
+		const named = !token.arbitrary ? namedBoxShadow(layer, extra?.realThemeValue ?? value, opacity, ctx) : null;
 		if (named) return named;
 		const color = layerColor(layer, value, opacity, token, extra?.realThemeValue);
 		if (color !== void 0) return color;
@@ -4590,8 +4459,8 @@ functionalUtility({
 	handleBareValue: ({ value, ctx }) => namedTextShadow(ctx, value) ? value : null,
 	handle: (value, ctx, token, extra) => {
 		const opacity = extra?.opacity;
-		if (!extra?.realThemeValue && !token.arbitrary) {
-			const named = namedTextShadow(ctx, value);
+		if (!token.arbitrary) {
+			const named = namedTextShadow(ctx, extra?.realThemeValue ?? value);
 			if (named) return textShadowValue(named, opacity);
 		}
 		const color = layerColor("text-shadow", value, opacity, token, extra?.realThemeValue);
@@ -4632,6 +4501,22 @@ function ringShadowValue(width) {
 		["--baro-ring-offset-shadow", `var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)`]
 	], { category: "effects" });
 });
+var ringOffsetWidth = (width) => [decl("--baro-ring-offset-width", width), decl("--baro-ring-offset-shadow", "var(--baro-ring-inset,) 0 0 0 var(--baro-ring-offset-width) var(--baro-ring-offset-color)")];
+functionalUtility({
+	name: "ring-offset",
+	themeKeys: ["ringOffsetWidth", "colors"],
+	supportsArbitrary: true,
+	supportsOpacity: true,
+	handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
+	handle: (value, _ctx, token, extra) => {
+		if (extra?.themeNamespace === "ringOffsetWidth") return ringOffsetWidth(value);
+		if (extra?.realThemeValue) return themeColorDecls("--baro-ring-offset-color", value, extra);
+		if (token.arbitrary) return parseColor(value) ? [decl("--baro-ring-offset-color", value)] : parseLength(value) ? ringOffsetWidth(value) : null;
+		if (/^\d+px$/.test(value)) return ringOffsetWidth(value);
+		return null;
+	},
+	category: "effects"
+});
 [
 	["inset-ring", "1px"],
 	["inset-ring-0", "0px"],
@@ -4663,9 +4548,14 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsOpacity: true,
-	themeKeys: ["colors"],
+	themeKeys: ["colors", "ringWidth"],
 	handle: (value, ctx, token, extra) => {
 		const main = value;
+		if (extra?.themeNamespace === "ringWidth") return [
+			ringShadowProperties(),
+			decl("--baro-ring-shadow", ringShadowValue(value)),
+			decl("box-shadow", SHADOW_COMPOSITE)
+		];
 		const opacity = extra?.opacity;
 		const realThemeValue = extra?.realThemeValue;
 		if (realThemeValue) return createRingColorDecls("--baro-ring-color", main, opacity, realThemeValue);
@@ -4961,6 +4851,7 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsFraction: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "aspect", value, "aspect") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	description: "aspect-ratio utility (theme, arbitrary, custom property, fraction supported)",
 	category: "layout"
 });
@@ -4984,7 +4875,7 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsFraction: true,
-	handleBareValue: ({ value }) => parseNumber(value),
+	handleBareValue: ({ value, ctx }) => parseNumber(value) ?? themeKeyVar(ctx, "container", value, "container"),
 	description: "columns utility (theme, arbitrary, custom property, fraction supported)",
 	category: "layout"
 });
@@ -6033,10 +5924,10 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsFraction: true,
-	handleBareValue: ({ value }) => {
+	handleBareValue: ({ value, ctx }) => {
 		if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
 		if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
-		return null;
+		return themeKeyVar(ctx, "container", value, "container");
 	},
 	description: "max-width utility (spacing, fraction, arbitrary, custom property, static supported)",
 	category: "sizing"
@@ -6146,11 +6037,11 @@ functionalUtility({
 			supportsArbitrary: true,
 			supportsCustomProperty: true,
 			supportsFraction: true,
-			handleBareValue: ({ value, token }) => {
+			handleBareValue: ({ value, token, ctx }) => {
 				if (token.negative) return null;
 				if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
 				if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
-				return null;
+				return name.includes("inline") ? themeKeyVar(ctx, "container", value, "container") : null;
 			},
 			description: `${prop} utility (spacing, fraction, arbitrary, custom property, keywords)`,
 			category: "sizing"
@@ -6176,21 +6067,34 @@ staticUtility("text-6xl", [["font-size", "var(--text-6xl)"], ["line-height", "va
 staticUtility("text-7xl", [["font-size", "var(--text-7xl)"], ["line-height", "var(--baro-leading, var(--text-7xl--line-height))"]], { category: "typography" });
 staticUtility("text-8xl", [["font-size", "var(--text-8xl)"], ["line-height", "var(--baro-leading, var(--text-8xl--line-height))"]], { category: "typography" });
 staticUtility("text-9xl", [["font-size", "var(--text-9xl)"], ["line-height", "var(--baro-leading, var(--text-9xl--line-height))"]], { category: "typography" });
-staticUtility("font-thin", [["font-weight", "var(--font-weight-thin)"]], { category: "typography" });
-staticUtility("font-extralight", [["font-weight", "var(--font-weight-extralight)"]], { category: "typography" });
-staticUtility("font-light", [["font-weight", "var(--font-weight-light)"]], { category: "typography" });
-staticUtility("font-normal", [["font-weight", "var(--font-weight-normal)"]], { category: "typography" });
-staticUtility("font-medium", [["font-weight", "var(--font-weight-medium)"]], { category: "typography" });
-staticUtility("font-semibold", [["font-weight", "var(--font-weight-semibold)"]], { category: "typography" });
-staticUtility("font-bold", [["font-weight", "var(--font-weight-bold)"]], { category: "typography" });
-staticUtility("font-extrabold", [["font-weight", "var(--font-weight-extrabold)"]], { category: "typography" });
-staticUtility("font-black", [["font-weight", "var(--font-weight-black)"]], { category: "typography" });
+function fontWeightUtility(name) {
+	registerUtility({
+		name: `font-${name}`,
+		match: (className) => className === `font-${name}`,
+		handler: (_value, ctx) => {
+			const family = themeKeyVar(ctx, "fontFamily", name, "font");
+			return family ? [decl("font-family", family)] : [decl("font-weight", `var(--font-weight-${name})`)];
+		},
+		category: "typography"
+	});
+}
+fontWeightUtility("thin");
+fontWeightUtility("extralight");
+fontWeightUtility("light");
+fontWeightUtility("normal");
+fontWeightUtility("medium");
+fontWeightUtility("semibold");
+fontWeightUtility("bold");
+fontWeightUtility("extrabold");
+fontWeightUtility("black");
 functionalUtility({
 	name: "font",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "fontFamily", value, "font") ?? themeKeyVar(ctx, "fontWeight", value, "font-weight") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	handle: (value, _ctx, token) => {
 		if (token.prefix !== "font") return null;
+		if (!token.arbitrary && value.startsWith("var(--font-weight-")) return [decl("font-weight", value)];
 		if (parseNumber(value)) return [decl("font-weight", value)];
 		return [decl("font-family", value)];
 	},
@@ -6213,9 +6117,9 @@ staticUtility("tracking-widest", [["letter-spacing", "var(--letter-spacing-wides
 functionalUtility({
 	name: "tracking",
 	prop: "letter-spacing",
-	themeKey: "letterSpacing",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
+	handleBareValue: ({ value, ctx }) => themeKeyVar(ctx, "letterSpacing", value, "letter-spacing") ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	description: "letter-spacing utility (theme, arbitrary, custom property supported)",
 	category: "typography"
 });
@@ -6251,11 +6155,14 @@ staticUtility("leading-loose", [
 ], { category: "typography" });
 functionalUtility({
 	name: "leading",
-	prop: "line-height",
-	themeKey: "lineHeight",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
-	handleBareValue: ({ value }) => parseNumber(value),
+	handleBareValue: ({ value, ctx }) => {
+		const v = themeKeyValue(ctx, "lineHeight", value);
+		if (v != null) return `var(--leading-${value}, ${v})`;
+		const numbered = ctx.theme("lineHeight", value);
+		return typeof numbered === "string" ? numbered : parseNumber(value);
+	},
 	handle: (value) => [
 		decl("--baro-leading", value),
 		decl("line-height", value),
@@ -6312,8 +6219,11 @@ functionalUtility({
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsOpacity: true,
+	handleBareValue: ({ value, ctx, extra }) => (extra?.opacity ? null : themeKeyVar(ctx, "fontSize", value, "text")) ?? (/^(\d|\.\d)/.test(value) ? value : null),
 	handle: (value, ctx, token, extra) => {
 		if (extra?.realThemeValue) return themeColorDecls("color", value, extra);
+		const sizeKey = !token.arbitrary && !token.customProperty ? /^var\(--text-([\w-]+)\)$/.exec(value)?.[1] : void 0;
+		if (sizeKey) return fontSizeLineHeight(ctx.theme("fontSize", sizeKey)) ? [decl("font-size", value), decl("line-height", `var(--baro-leading, var(--text-${sizeKey}--line-height))`)] : [decl("font-size", value)];
 		const kind = textArbitraryKind(value);
 		return [decl(kind.fontSize ? "font-size" : "color", kind.value)];
 	},
@@ -6436,11 +6346,12 @@ functionalUtility({
 });
 functionalUtility({
 	name: "decoration",
-	themeKey: "colors",
+	themeKeys: ["textDecorationThickness", "colors"],
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
+		if (extra?.themeNamespace === "textDecorationThickness") return [decl("text-decoration-thickness", value)];
 		if (extra?.realThemeValue) return themeColorDecls("text-decoration-color", value, extra);
 		return [decl("text-decoration-color", value)];
 	},
@@ -6524,7 +6435,7 @@ functionalUtility({
 	prop: "content",
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
-	handle: (value) => [decl("--baro-content", `"${value}"`), decl("content", "var(--baro-content)")],
+	handle: (value) => [decl("--baro-content", value), decl("content", "var(--baro-content)")],
 	handleCustomProperty: (value) => [decl("--baro-content", `var(${value})`), decl("content", "var(--baro-content)")],
 	description: "content utility (arbitrary, custom property supported)",
 	category: "typography"
@@ -6804,7 +6715,20 @@ staticUtility("rounded-2xl", [["border-radius", "var(--radius-2xl)"]], { categor
 staticUtility("rounded-3xl", [["border-radius", "var(--radius-3xl)"]], { category: "borders" });
 staticUtility("rounded-4xl", [["border-radius", "var(--radius-4xl)"]], { category: "borders" });
 staticUtility("rounded-xs", [["border-radius", "var(--radius-xs)"]], { category: "borders" });
-staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "borders" });
+var FULL = "calc(infinity * 1px)";
+function roundedFull(name, props) {
+	registerUtility({
+		name,
+		match: (className) => className === name,
+		handler: (_value, ctx) => {
+			const own = themeKeyValue(ctx, "borderRadius", "full");
+			const value = own != null && own !== "9999px" && own !== FULL ? "var(--radius-full)" : FULL;
+			return props.map((prop) => decl(prop, value));
+		},
+		category: "borders"
+	});
+}
+roundedFull("rounded-full", ["border-radius"]);
 [
 	["rounded-t", ["border-top-left-radius", "border-top-right-radius"]],
 	["rounded-r", ["border-top-right-radius", "border-bottom-right-radius"]],
@@ -6833,14 +6757,14 @@ staticUtility("rounded-full", [["border-radius", "9999px"]], { category: "border
 	staticUtility(`${name}-3xl`, propList.map((prop) => [prop, "var(--radius-3xl)"]), { category: "borders" });
 	staticUtility(`${name}-4xl`, propList.map((prop) => [prop, "var(--radius-4xl)"]), { category: "borders" });
 	staticUtility(`${name}-xs`, propList.map((prop) => [prop, "var(--radius-xs)"]), { category: "borders" });
-	staticUtility(`${name}-full`, propList.map((prop) => [prop, logical ? "calc(infinity * 1px)" : "9999px"]), { category: "borders" });
+	roundedFull(`${name}-full`, propList);
 	functionalUtility({
 		name,
 		supportsArbitrary: true,
 		supportsCustomProperty: true,
-		handleBareValue: ({ value }) => {
+		handleBareValue: ({ value, ctx }) => {
 			if (!logical && parseNumber(value)) return `calc(var(--spacing) * ${value})`;
-			return null;
+			return themeKeyVar(ctx, "borderRadius", value, "radius");
 		},
 		handle: (value) => propList.map((prop) => decl(prop, value)),
 		description: `${name} utility (spacing, arbitrary, custom property support)`,
@@ -6852,9 +6776,9 @@ functionalUtility({
 	handle: (value, _ctx, token) => token.prefix === "rounded" ? [decl("border-radius", value)] : null,
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
-	handleBareValue: ({ value }) => {
+	handleBareValue: ({ value, ctx }) => {
 		if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
-		return null;
+		return themeKeyVar(ctx, "borderRadius", value, "radius");
 	},
 	description: "border-radius utility (spacing, arbitrary, custom property support)",
 	category: "borders"
@@ -6903,7 +6827,7 @@ var withBorderStyle = (props, width) => [
 	staticUtility(`${name}`, styled("1px"));
 	functionalUtility({
 		name,
-		themeKeys: ["borderWidth", "colors"],
+		themeKeys: ["colors", "borderWidth"],
 		supportsOpacity: true,
 		supportsArbitrary: true,
 		supportsCustomProperty: true,
@@ -6912,6 +6836,7 @@ var withBorderStyle = (props, width) => [
 			return null;
 		},
 		handle: (value, ctx, token, extra) => {
+			if (extra?.themeNamespace === "borderWidth") return withBorderStyle(propList, value);
 			if (extra?.realThemeValue) return propList.flatMap((prop) => themeColorDecls(prop.replace("width", "color"), value, extra));
 			if (parseColor(value)) return propList.map((prop) => decl(prop.replace("width", "color"), value));
 			if (token.arbitrary) return withBorderStyle(propList, value);
@@ -6958,6 +6883,7 @@ Object.entries({
 	staticUtility(`divide-${axis}-reverse`, [rule(":where(& > :not(:last-child))", [decl(rev, "1")])], { category: "borders" });
 	functionalUtility({
 		name: `divide-${axis}`,
+		themeKeys: ["divideWidth", "borderWidth"],
 		supportsArbitrary: true,
 		handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}px` : null,
 		handle: (value) => divide(value),
@@ -6972,6 +6898,7 @@ functionalUtility({
 	supportsCustomProperty: true,
 	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
+		if (extra?.themeNamespace === "borderWidth") return withBorderStyle(["border-width"], value);
 		if (extra?.realThemeValue) return themeColorDecls("border-color", value, extra);
 		if (token.arbitrary) {
 			if (parseLength(value)) return withBorderStyle(["border-width"], value);
@@ -7048,11 +6975,12 @@ functionalUtility({
 });
 functionalUtility({
 	name: "outline",
-	themeKeys: ["colors", "borderWidth"],
+	themeKeys: ["colors", "outlineWidth"],
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	supportsOpacity: true,
 	handle: (value, ctx, token, extra) => {
+		if (extra?.themeNamespace === "outlineWidth") return withOutlineStyle(value);
 		if (extra?.realThemeValue) return themeColorDecls("outline-color", value, extra);
 		if (parseColor(value)) return [decl("outline-color", value)];
 		if (parseNumber(value)) return withOutlineStyle(`${value}px`);
@@ -7525,11 +7453,11 @@ staticUtility("stroke-black", [["stroke", "#000"]], { category: "svg" });
 staticUtility("stroke-white", [["stroke", "#fff"]], { category: "svg" });
 functionalUtility({
 	name: "stroke",
-	themeKeys: ["colors"],
+	themeKeys: ["colors", "strokeWidth"],
 	supportsArbitrary: true,
 	supportsCustomProperty: true,
 	handle: (value, ctx, token, extra) => {
-		if (parseNumber(value)) return [decl("stroke-width", value)];
+		if (parseNumber(value) || extra?.themeNamespace === "strokeWidth") return [decl("stroke-width", value)];
 		if (extra?.realThemeValue) return [decl("stroke", `var(--color-${extra.realThemeValue})`)];
 		return [decl("stroke", value)];
 	},
@@ -7685,7 +7613,7 @@ staticModifier("open", ["&:is([open], :popover-open, :open)"], {
 var withPseudoContent = (ast) => [
 	atRoot([property("--baro-content", "\"\"")]),
 	...ast,
-	decl("content", "var(--baro-content)")
+	...ast.some((n) => n.type === "decl" && n.prop === "content") ? [] : [decl("content", "var(--baro-content)")]
 ];
 staticModifier("before", ["&::before"], {
 	source: "pseudo",
@@ -7695,19 +7623,14 @@ staticModifier("after", ["&::after"], {
 	source: "pseudo",
 	astHandler: withPseudoContent
 });
-staticModifier("placeholder", [
-	"&::placeholder",
-	"&::-webkit-input-placeholder",
-	"&::-moz-placeholder",
-	"&:-ms-input-placeholder"
-], { source: "pseudo" });
-staticModifier("selection", ["&::selection", "&::-moz-selection"], { source: "pseudo" });
-staticModifier("file", ["&::file-selector-button", "&::-webkit-file-upload-button"], { source: "pseudo" });
+staticModifier("placeholder", ["&::placeholder"], { source: "pseudo" });
+staticModifier("selection", ["& *::selection", "&::selection"], { source: "pseudo" });
+staticModifier("file", ["&::file-selector-button"], { source: "pseudo" });
 staticModifier("marker", [
+	"& *::marker",
 	"&::marker",
-	"&::-webkit-details-marker",
-	"&::-moz-list-bullet",
-	"&::-moz-list-number"
+	"& *::-webkit-details-marker",
+	"&::-webkit-details-marker"
 ], { source: "pseudo" });
 staticModifier("details-content", ["&::details-content"], { source: "pseudo" });
 staticModifier("first-line", ["&::first-line"], { source: "pseudo" });
@@ -7765,7 +7688,9 @@ function attributeVariantSelector(variant) {
 		return `[${kind}-${key}=${/^(["']).*\1$/.test(raw) ? raw : `"${decodeArbitrarySelector(raw)}"`}]`;
 	}
 	const bare = /^data-([a-zA-Z0-9_-]+)$/.exec(variant);
-	return bare ? `[data-${bare[1]}]` : void 0;
+	if (bare) return `[data-${bare[1]}]`;
+	const aria = /^aria-([a-zA-Z0-9_-]+)$/.exec(variant);
+	return aria ? `[aria-${aria[1]}="true"]` : void 0;
 }
 /**
 * The argument of a `:has()`/`:not()` built from an arbitrary value: a selector list is wrapped as `*:is(…)`
@@ -7786,6 +7711,80 @@ function hasTopLevelComma(value) {
 	}
 	return false;
 }
+/**
+* #335: the pseudo-class selector (`:hover`, `:first-child`, `:nth-child(odd)`) of a registered static
+* variant, for compounding in not-/group-/peer-/has- forms, or null when the variant is unknown or is not a
+* single pseudo-class (pseudo-elements, at-rules, multi-selector variants). Tailwind 4.3.3 emits nothing
+* for a compound variant whose inner variant it cannot compound (`not-foo`, `group-before`, `peer-has-foo`).
+*/
+function pseudoClassOf(name, ctx) {
+	const plugin = getModifier(ctx).find((p) => p.name === name && p.match(name, ctx));
+	if (!plugin?.modifySelector) return null;
+	const r = plugin.modifySelector({
+		selector: "&",
+		fullClassName: "",
+		mod: { type: name },
+		context: ctx
+	});
+	const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
+	if (list.length !== 1) return null;
+	const m = /^&(:(?!:)[a-zA-Z-]+(?:\(.*\))?)$/.exec(list[0].selector);
+	return m ? m[1] : null;
+}
+/**
+* #352: the selector `not-<v>` / `group-not-<v>` negates: an attribute variant (`data-*`, `aria-*`), a
+* pseudo-class (#335), or a wrap-free `has-*` variant (`has-[…]`, `has-aria-*`), as Tailwind 4.3.3 compounds
+* them. Null when `<v>` is unknown or is not a single compound on `&`.
+*/
+function negatableSelectorOf(name, ctx) {
+	const attr = attributeVariantSelector(name);
+	if (attr) return attr;
+	const pc = pseudoClassOf(name, ctx);
+	if (pc || !name.startsWith("has-")) return pc;
+	const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
+	if (!plugin?.modifySelector || plugin.wrap || plugin.astHandler) return null;
+	const r = plugin.modifySelector({
+		selector: "&",
+		fullClassName: "",
+		mod: { type: name },
+		context: ctx
+	});
+	const list = Array.isArray(r) ? r : r && typeof r === "object" ? [r] : typeof r === "string" ? [{ selector: r }] : [];
+	if (list.length !== 1) return null;
+	const m = /^&(:has\(.+\))$/.exec(list[0].selector);
+	return m && !m[1].includes("&") ? m[1] : null;
+}
+/**
+* #352: `not-<v>` for a wrap-only at-rule variant (`md`, `max-md`, `min-[…]`, `print`, `motion-safe`,
+* `supports-[…]`, `dark` in media mode): the same at-rule with its condition negated (`@media not (…)`,
+* `@supports not (…)`), as Tailwind 4.3.3 emits it. Null for anything else, and for a prelude that is a list
+* or already combines conditions, where a leading `not` would not negate the whole query.
+*/
+function negatedAtRuleOf(name, ctx) {
+	if (name.startsWith("not-")) return null;
+	const plugin = getModifier(ctx).find((p) => p.match(name, ctx));
+	if (!plugin?.wrap || plugin.astHandler) return null;
+	if (plugin.modifySelector) {
+		const r = plugin.modifySelector({
+			selector: "&",
+			fullClassName: "",
+			mod: { type: name },
+			context: ctx
+		});
+		if ((typeof r === "string" ? r : Array.isArray(r) ? r.length === 1 ? r[0].selector : null : r?.selector) !== "&") return null;
+	}
+	const items = plugin.wrap({ type: name }, ctx);
+	if (items.length !== 1) return null;
+	const node = items[0];
+	if (node.type !== "at-rule" || node.name !== "media" && node.name !== "supports" || node.nodes?.length) return null;
+	const params = (node.params ?? "").trim();
+	if (!params || /^not\b|,|\s(and|or)\s/i.test(params)) return null;
+	return {
+		...node,
+		params: `not ${params}`,
+		nodes: []
+	};
+}
 //#endregion
 //#region src/presets/variants/responsive.ts
 functionalModifier((mod, context) => {
@@ -7936,6 +7935,7 @@ function innerCompound(variant, ctx) {
 		mod: { type: variant },
 		context: ctx
 	});
+	if (out == null) return void 0;
 	const list = typeof out === "string" ? [{ selector: out }] : Array.isArray(out) ? out : [out];
 	if (list.length !== 1) return void 0;
 	const sel = list[0].selector;
@@ -8030,6 +8030,10 @@ functionalModifier((mod, ctx) => {
 }, groupHasSelector);
 //#endregion
 //#region src/presets/variants/negation-variants.ts
+functionalModifier((mod, context) => /^not-(?!@)/.test(mod) && !!negatedAtRuleOf(mod.slice(4), context), () => "&", (mod, context) => {
+	const node = negatedAtRuleOf(mod.type.slice(4), context);
+	return node ? [node] : [];
+});
 functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
 	const m = /^not-\[(.+)\]$/.exec(mod.type);
 	if (m) {
@@ -8051,10 +8055,12 @@ functionalModifier((mod) => /^not-\[.*\]$/.test(mod), ({ selector, mod }) => {
 		source: "attribute"
 	};
 });
-functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod }) => {
+functionalModifier((mod) => /^not-/.test(mod) && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
 	const m = /^not-(.+)$/.exec(mod.type);
+	const inner = m ? negatableSelectorOf(m[1], context) : null;
+	if (m && !inner) return null;
 	return {
-		selector: m ? `&:not(:${m[1]})` : selector,
+		selector: inner ? `&:not(${inner})` : selector,
 		flatten: false,
 		wrappingType: "rule",
 		source: "attribute"
@@ -8114,7 +8120,7 @@ functionalModifier((mod) => /^aria-/.test(mod), ({ selector, mod }) => {
 		source: "aria"
 	};
 }, void 0);
-functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod }) => {
+functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"), ({ selector, mod, context }) => {
 	const pseudo = mod.type.replace("not-", "");
 	if (pseudo.startsWith("[")) {
 		const inner = pseudo.slice(1, -1);
@@ -8126,10 +8132,14 @@ functionalModifier((mod) => mod.startsWith("not-") && !mod.startsWith("not-@"),
 			selector: `&:not(${functionalArgument(inner)})`,
 			source: "attribute"
 		};
-	} else return {
-		selector: `&:not(:${pseudo})`,
-		source: "attribute"
-	};
+	} else {
+		const inner = negatableSelectorOf(pseudo, context);
+		if (!inner) return null;
+		return {
+			selector: `&:not(${inner})`,
+			source: "attribute"
+		};
+	}
 }, void 0);
 functionalModifier((mod) => /^data-/.test(mod), ({ selector, mod }) => {
 	const bracket = /^data-\[([a-zA-Z0-9_-]+)(?:=([^\]]+))?\]$/.exec(mod.type);
@@ -8242,11 +8252,13 @@ functionalModifier((mod) => /^(group|peer)-hover(\/[a-zA-Z0-9_-]+)?$/.test(mod),
 		source: kind
 	};
 }, () => [atRule("media", "(hover: hover)", [])]);
-function negated(value) {
+function negated(value, ctx) {
 	const v = value.slice(4);
-	return v.startsWith("[") && v.endsWith("]") ? `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))` : `:not(:${v})`;
+	if (v.startsWith("[") && v.endsWith("]")) return `:not(*:is(${decodeArbitrarySelector(v.slice(1, -1))}))`;
+	const inner = negatableSelectorOf(v, ctx);
+	return inner ? `:not(${inner})` : null;
 }
-functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
+functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
 	const raw = /^group-(.+)$/.exec(mod.type);
 	const [variant, base] = splitGroupName("group", raw?.[1] ?? "");
 	const m = raw ? [raw[0], variant] : null;
@@ -8262,11 +8274,14 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 		wrappingType: "rule",
 		source: "group"
 	};
-	if (m?.[1]?.startsWith("not-")) return {
-		selector: `&:is(${g}${negated(m[1])} *)`,
-		wrappingType: "rule",
-		source: "group"
-	};
+	if (m?.[1]?.startsWith("not-")) {
+		const neg = negated(m[1], context);
+		return neg ? {
+			selector: `&:is(${g}${neg} *)`,
+			wrappingType: "rule",
+			source: "group"
+		} : null;
+	}
 	if (m?.[1]?.startsWith("has-")) {
 		const pattern = /^has-\[([a-zA-Z0-9_-]+)\]$/.exec(m?.[1]);
 		if (pattern) return {
@@ -8292,8 +8307,10 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 			};
 		}
 	}
+	const pc = m ? pseudoClassOf(m[1], context) : null;
+	if (m && !pc) return null;
 	return m ? {
-		selector: `&:is(${g}:${m[1]} *)`,
+		selector: `&:is(${g}${pc} *)`,
 		wrappingType: "rule",
 		source: "group"
 	} : {
@@ -8301,7 +8318,7 @@ functionalModifier((mod) => /^group-(.+)$/.test(mod) && !atRuleHas(mod), ({ sele
 		source: "group"
 	};
 }, void 0);
-functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod }) => {
+functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selector, mod, context }) => {
 	const raw = /^peer-(.+)$/.exec(mod.type);
 	const [variant, base] = splitGroupName("peer", raw?.[1] ?? "");
 	const m = raw ? [raw[0], variant] : null;
@@ -8322,14 +8339,22 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
 		selector: `&:is(${g}:has(${functionalArgument(value.slice(5, -1))}) ~ *)`,
 		source: "peer"
 	};
-	if (value?.startsWith("has-")) return {
-		selector: `&:is(${g}:has(:${value.slice(4)})~*)`,
-		source: "peer"
-	};
-	if (value?.startsWith("not-")) return {
-		selector: `&:is(${g}${negated(value)} ~ *)`,
-		source: "peer"
-	};
+	if (value?.startsWith("has-")) {
+		const pc = pseudoClassOf(value.slice(4), context);
+		if (!pc) return null;
+		return {
+			selector: `&:is(${g}:has(${pc})~*)`,
+			source: "peer"
+		};
+	}
+	if (value?.startsWith("not-")) {
+		const neg = negated(value, context);
+		if (!neg) return null;
+		return {
+			selector: `&:is(${g}${neg} ~ *)`,
+			source: "peer"
+		};
+	}
 	if (value?.startsWith("aria-")) {
 		let pattern = /^aria-([a-zA-Z0-9_]+)$/.exec(value);
 		if (pattern) return {
@@ -8350,8 +8375,10 @@ functionalModifier((mod) => /^peer-(.+)$/.test(mod) && !atRuleHas(mod), ({ selec
 			};
 		}
 	}
+	const pc = m ? pseudoClassOf(value, context) : null;
+	if (m && !pc) return null;
 	return m ? {
-		selector: `&:is(${g}:${value}~*)`,
+		selector: `&:is(${g}${pc}~*)`,
 		source: "peer"
 	} : {
 		selector,
@@ -8400,6 +8427,7 @@ function toPx(n, unit) {
 }
 function preludeKey(kind, prelude) {
 	const container = kind === "container";
+	if (!container && /^\s*not\b/i.test(prelude)) return [0, 0];
 	const min = MIN_W.exec(prelude);
 	if (min) return [container ? 4 : 2, toPx(min[1], min[2])];
 	const max = MAX_W.exec(prelude);
@@ -8499,6 +8527,8 @@ exports.staticModifier = staticModifier;
 exports.staticUtility = staticUtility;
 exports.styleRule = styleRule;
 exports.themeGetter = themeGetter;
+exports.themeKeyValue = themeKeyValue;
+exports.themeKeyVar = themeKeyVar;
 exports.themeToCssVars = themeToCssVars;
 exports.tokenize = tokenize;
 exports.upperBound = upperBound;