@barocss/kit 0.8.2 → 0.9.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) {
@@ -1209,6 +1235,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 +1250,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;
@@ -2627,105 +2662,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 +2753,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;
-}
-
-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;
+:-moz-focusring:where(:not(iframe)) {
+  outline: auto;
 }
 
-/* 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;
-}
-
-/* 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%;
+summary {
+  display: list-item;
 }
 
-/* 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 +2828,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 +2838,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
@@ -3953,6 +3801,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 +3986,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 +4082,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 +4207,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 +4363,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 +4411,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 +4446,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 +4488,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 +4535,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 +4838,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 +4862,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 +5911,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 +6024,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 +6054,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 +6104,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 +6142,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 +6206,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 +6333,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 +6422,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 +6702,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 +6744,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 +6763,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 +6814,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 +6823,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 +6870,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 +6885,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 +6962,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 +7440,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 +7600,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",
@@ -8499,6 +8414,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;