@barocss/browser 0.6.0 → 0.8.0

package/dist/cdn/barocss.js

@@ -178,8 +178,12 @@ function clearContextCaches(ctx) {
 }
 const utilityRegistry = [];
 function registerUtility(util, ctx) {
-  utilityRegistry.push(util);
-  {
+  const state = ctx && getContextState(ctx);
+  if (ctx && !state) throw new Error("Utility registration requires a context from createContext");
+  (state?.utilities || utilityRegistry).push(util);
+  if (ctx) {
+    clearContextCaches(ctx);
+  } else {
     parseResultCache.clear();
     utilityCache.clear();
   }
@@ -190,6 +194,7 @@ function getUtility(ctx) {
 const modifierRegistry = [];
 function staticModifier(name, selectors, options = {}, ctx) {
   registerModifier({
+    name,
     match: (mod) => mod === name,
     modifySelector: ({ ..._rest }) => {
       return selectors.map((sel) => ({
@@ -273,7 +278,7 @@ function staticUtility(name, decls, opts, ctx) {
     description: opts?.description,
     category: opts?.category,
     priority: opts?.priority
-  });
+  }, ctx);
 }
 function spacingKeyValue(ctx, key, negative) {
   if (key === "px" || !/^[a-zA-Z][\w-]*$/.test(key) || ctx.theme("spacing", key) == null) return null;
@@ -374,7 +379,7 @@ function functionalUtility(opts, ctx) {
     description: opts.description,
     category: opts.category,
     priority: opts.priority
-  });
+  }, ctx);
 }
 const MATH_FNS = /* @__PURE__ */ new Set(["calc", "min", "max", "clamp"]);
 function expandThemeFunctions(value) {
@@ -493,14 +498,23 @@ function parseClassName(className, ctx) {
   if (cache.has(className)) {
     return cache.get(className);
   }
-  let important = false;
   let realClassName = className;
-  if (className.startsWith("!")) {
+  const classPrefix = ctx ? configuredClassPrefix(ctx) : "";
+  if (classPrefix) {
+    if (!className.startsWith(classPrefix + ":")) {
+      const none = { modifiers: [], utility: null };
+      cache.set(className, none);
+      return none;
+    }
+    realClassName = className.slice(classPrefix.length + 1);
+  }
+  let important = false;
+  if (realClassName.startsWith("!")) {
     important = true;
-    realClassName = className.slice(1);
-  } else if (className.length > 1 && className.endsWith("!")) {
+    realClassName = realClassName.slice(1);
+  } else if (realClassName.length > 1 && realClassName.endsWith("!")) {
     important = true;
-    realClassName = className.slice(0, -1);
+    realClassName = realClassName.slice(0, -1);
   }
   const tokens = tokenize(realClassName);
   const result = parseTokens(tokens, ctx);
@@ -510,6 +524,10 @@ function parseClassName(className, ctx) {
   cache.set(className, result);
   return result;
 }
+function configuredClassPrefix(ctx) {
+  const configured = ctx.config("prefix");
+  return typeof configured === "string" && /^[a-z]+$/.test(configured) ? configured : "";
+}
 function parseTokens(tokens, ctx) {
   const modifiers = [];
   let utility = null;
@@ -1029,24 +1047,41 @@ function animationToCssVars(animations2) {
   }
   return result;
 }
-function keyframesToCss(keyframes2) {
-  if (!keyframes2) return "";
-  let css = "";
-  for (const name in keyframes2) {
-    const frames = keyframes2[name];
-    css += `@keyframes ${name} {
+const COMMENT_OR_BLOCK = /\/\*|\*\/|[{};]/;
+function keyframesBlock(name, frames) {
+  if (!name || COMMENT_OR_BLOCK.test(name) || /\s/.test(name) || !frames || typeof frames !== "object") return "";
+  let body = "";
+  for (const [step, props] of Object.entries(frames)) {
+    if (COMMENT_OR_BLOCK.test(step) || !props || typeof props !== "object") return "";
+    let decls = "";
+    for (const [prop, value] of Object.entries(props)) {
+      const v2 = String(value);
+      if (COMMENT_OR_BLOCK.test(prop) || COMMENT_OR_BLOCK.test(v2)) return "";
+      decls += `    ${prop}: ${v2};
 `;
-    for (const step in frames) {
-      css += `  ${step} {`;
-      const props = frames[step];
-      for (const prop in props) {
-        css += ` ${prop}: ${props[prop]};`;
-      }
-      css += " }\n";
     }
-    css += "}\n";
+    body += `  ${step} {
+${decls}  }
+`;
   }
-  return css;
+  return `@keyframes ${name} {
+${body}}`;
+}
+function referencedKeyframes(css, ctx) {
+  if (!css.includes("animation")) return [];
+  const all = ctx.theme("keyframes");
+  if (!all || typeof all !== "object") return [];
+  const names = /* @__PURE__ */ new Set();
+  for (const m of css.matchAll(/(?:^|[\s;{])animation(?:-name)?\s*:\s*([^;}]+)/g)) {
+    const value = m[1].replace(/var\(--animate-([\w-]+)\)/g, (whole, key) => {
+      const v2 = ctx.theme("animations", key) ?? ctx.theme("animation", key);
+      return typeof v2 === "string" ? v2 : whole;
+    });
+    for (const word of value.split(/[\s,()]+/)) {
+      if (word && Object.prototype.hasOwnProperty.call(all, word)) names.add(word);
+    }
+  }
+  return [...names].map((n) => keyframesBlock(n, all[n])).filter(Boolean);
 }
 function transitionTimingFunctionToCssVars(transition) {
   const result = {};
@@ -1114,11 +1149,13 @@ function themeToCssVarsAll(theme) {
     ...borderRadiusToCssVars(theme.borderRadius),
     ...zIndexToCssVars(theme.zIndex),
     ...opacityToCssVars(theme.opacity),
-    ...animationToCssVars(theme.animations),
+    ...animationToCssVars({ ...theme.animations, ...theme.animation }),
     ...transitionTimingFunctionToCssVars(theme.transitionTimingFunction),
     ...transitionDurationToCssVars(theme.transitionDuration),
     ...transitionDelayToCssVars(theme.transitionDelay),
     ...blurToCssVars(theme.blur),
+    ...Object.fromEntries(Object.entries(theme.textShadow ?? {}).map(([k, v2]) => [`--text-shadow-${escapeKey(k)}`, v2])),
+    ...Object.fromEntries(Object.entries(theme.dropShadow ?? {}).map(([k, v2]) => [`--drop-shadow-${escapeKey(k)}`, v2])),
     ...Object.fromEntries(Object.entries(theme.aspect ?? {}).map(([k, v2]) => [`--aspect-${escapeKey(k)}`, v2]))
     // keyframes handled separately
   };
@@ -1480,6 +1517,7 @@ function generateCssRules(classList, ctx, opts) {
       const css = rootToCss([node]);
       rootCssList.push(css);
     }
+    rootCssList.push(...referencedKeyframes(cssList.join("\n"), ctx));
     return {
       cls,
       ast: allCleanAst,
@@ -1803,7 +1841,7 @@ const colors = {
     "950": "oklch(13% 0.028 261.692)"
   },
   zinc: {
-    "50": "oklch(98.5% 0 0)",
+    "50": "oklch(98.5% 0 none)",
     "100": "oklch(96.7% 0.001 286.375)",
     "200": "oklch(92% 0.004 286.32)",
     "300": "oklch(87.1% 0.006 286.286)",
@@ -1816,17 +1854,17 @@ const colors = {
     "950": "oklch(14.1% 0.005 285.823)"
   },
   neutral: {
-    "50": "oklch(98.5% 0 0)",
-    "100": "oklch(97% 0 0)",
-    "200": "oklch(92.2% 0 0)",
-    "300": "oklch(87% 0 0)",
-    "400": "oklch(70.8% 0 0)",
-    "500": "oklch(55.6% 0 0)",
-    "600": "oklch(43.9% 0 0)",
-    "700": "oklch(37.1% 0 0)",
-    "800": "oklch(26.9% 0 0)",
-    "900": "oklch(20.5% 0 0)",
-    "950": "oklch(14.5% 0 0)"
+    "50": "oklch(98.5% 0 none)",
+    "100": "oklch(97% 0 none)",
+    "200": "oklch(92.2% 0 none)",
+    "300": "oklch(87% 0 none)",
+    "400": "oklch(70.8% 0 none)",
+    "500": "oklch(55.6% 0 none)",
+    "600": "oklch(43.9% 0 none)",
+    "700": "oklch(37.1% 0 none)",
+    "800": "oklch(26.9% 0 none)",
+    "900": "oklch(20.5% 0 none)",
+    "950": "oklch(14.5% 0 none)"
   },
   stone: {
     "50": "oklch(98.5% 0.001 106.423)",
@@ -2061,6 +2099,58 @@ const colors = {
     "800": "oklch(45.5% 0.188 13.697)",
     "900": "oklch(41% 0.159 10.272)",
     "950": "oklch(27.1% 0.105 12.094)"
+  },
+  mauve: {
+    "50": "oklch(98.5% 0 none)",
+    "100": "oklch(96% 0.003 325.6)",
+    "200": "oklch(92.2% 0.005 325.62)",
+    "300": "oklch(86.5% 0.012 325.68)",
+    "400": "oklch(71.1% 0.019 323.02)",
+    "500": "oklch(54.2% 0.034 322.5)",
+    "600": "oklch(43.5% 0.029 321.78)",
+    "700": "oklch(36.4% 0.029 323.89)",
+    "800": "oklch(26.3% 0.024 320.12)",
+    "900": "oklch(21.2% 0.019 322.12)",
+    "950": "oklch(14.5% 0.008 326)"
+  },
+  olive: {
+    "50": "oklch(98.8% 0.003 106.5)",
+    "100": "oklch(96.6% 0.005 106.5)",
+    "200": "oklch(93% 0.007 106.5)",
+    "300": "oklch(88% 0.011 106.6)",
+    "400": "oklch(73.7% 0.021 106.9)",
+    "500": "oklch(58% 0.031 107.3)",
+    "600": "oklch(46.6% 0.025 107.3)",
+    "700": "oklch(39.4% 0.023 107.4)",
+    "800": "oklch(28.6% 0.016 107.4)",
+    "900": "oklch(22.8% 0.013 107.4)",
+    "950": "oklch(15.3% 0.006 107.1)"
+  },
+  mist: {
+    "50": "oklch(98.7% 0.002 197.1)",
+    "100": "oklch(96.3% 0.002 197.1)",
+    "200": "oklch(92.5% 0.005 214.3)",
+    "300": "oklch(87.2% 0.007 219.6)",
+    "400": "oklch(72.3% 0.014 214.4)",
+    "500": "oklch(56% 0.021 213.5)",
+    "600": "oklch(45% 0.017 213.2)",
+    "700": "oklch(37.8% 0.015 216)",
+    "800": "oklch(27.5% 0.011 216.9)",
+    "900": "oklch(21.8% 0.008 223.9)",
+    "950": "oklch(14.8% 0.004 228.8)"
+  },
+  taupe: {
+    "50": "oklch(98.6% 0.002 67.8)",
+    "100": "oklch(96% 0.002 17.2)",
+    "200": "oklch(92.2% 0.005 34.3)",
+    "300": "oklch(86.8% 0.007 39.5)",
+    "400": "oklch(71.4% 0.014 41.2)",
+    "500": "oklch(54.7% 0.021 43.1)",
+    "600": "oklch(43.8% 0.017 39.3)",
+    "700": "oklch(36.7% 0.016 35.7)",
+    "800": "oklch(26.8% 0.011 36.5)",
+    "900": "oklch(21.4% 0.009 43.1)",
+    "950": "oklch(14.7% 0.004 49.3)"
   }
 };
 const spacing = {
@@ -2132,8 +2222,13 @@ const fontSize = {
 };
 const fontFamily = {
   sans: [
-    "ui-sans-serif",
-    "system-ui",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    "Noto Sans",
+    "Arial",
     "sans-serif",
     "Apple Color Emoji",
     "Segoe UI Emoji",
@@ -2276,11 +2371,7 @@ const keyframes = {
     }
   },
   ping: {
-    "75%": {
-      transform: "scale(2)",
-      opacity: "0"
-    },
-    "100%": {
+    "75%, 100%": {
       transform: "scale(2)",
       opacity: "0"
     }
@@ -2290,14 +2381,15 @@ const keyframes = {
       opacity: "0.5"
     }
   },
+  // #274: Tailwind 4.1.13's frames (0%/100% share the up position; 50% is the floor).
   bounce: {
-    "0%": {
+    "0%, 100%": {
       transform: "translateY(-25%)",
-      "animation-timing-function": "cubic-bezier(0.8,0,1,1)"
+      "animation-timing-function": "cubic-bezier(0.8, 0, 1, 1)"
     },
-    "100%": {
+    "50%": {
       transform: "none",
-      "animation-timing-function": "cubic-bezier(0,0,0.2,1)"
+      "animation-timing-function": "cubic-bezier(0, 0, 0.2, 1)"
     }
   }
 };
@@ -2347,6 +2439,21 @@ const blur = {
   "2xl": "40px",
   "3xl": "64px"
 };
+const textShadow = {
+  "2xs": "0px 1px 0px rgb(0 0 0 / 0.15)",
+  xs: "0px 1px 1px rgb(0 0 0 / 0.2)",
+  sm: "0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)",
+  md: "0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)",
+  lg: "0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)"
+};
+const dropShadow = {
+  xs: "0 1px 1px rgb(0 0 0 / 0.05)",
+  sm: "0 1px 2px rgb(0 0 0 / 0.15)",
+  md: "0 3px 3px rgb(0 0 0 / 0.12)",
+  lg: "0 4px 4px rgb(0 0 0 / 0.15)",
+  xl: "0 9px 7px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 25px rgb(0 0 0 / 0.15)"
+};
 const defaultTheme = {
   colors,
   spacing,
@@ -2369,9 +2476,53 @@ const defaultTheme = {
   keyframes,
   animationVars,
   blur,
+  textShadow,
+  dropShadow,
   // Tailwind 4.1.13 --aspect-* (aspect-video → var(--aspect-video))
   aspect: { video: "16 / 9" }
 };
+const customUtilityName = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+const customUtilityProp = /^(--[A-Za-z0-9_-]+|-?[A-Za-z][A-Za-z0-9-]*)$/;
+function validateCustomUtility(name, decls) {
+  if (typeof name !== "string" || !customUtilityName.test(name)) return null;
+  if (!decls || typeof decls !== "object" || Array.isArray(decls)) return null;
+  const out = [];
+  for (const [prop, raw] of Object.entries(decls)) {
+    if (typeof raw !== "string" && typeof raw !== "number") return null;
+    const value = String(raw).trim();
+    if (!customUtilityProp.test(prop) || !value || !isStructureSafeValue(value) || hasCommentDelimiter(value)) return null;
+    out.push([prop, value]);
+  }
+  return out.length ? out : null;
+}
+function registerCustomUtilities(ctx, utilities) {
+  if (!utilities || typeof utilities !== "object" || Array.isArray(utilities)) return;
+  const list = getUtility(ctx);
+  const builtins = [...list];
+  const before = list.length;
+  for (const [name, decls] of Object.entries(utilities)) {
+    const safe = validateCustomUtility(name, decls);
+    if (!safe) {
+      debugWarn(`[BAROCSS] Ignoring invalid custom utility "${name}"`);
+      continue;
+    }
+    const shadowed = builtins.filter((u) => u.match(name));
+    registerUtility({
+      name,
+      category: "custom",
+      match: (className) => className === name,
+      handler: (value, c, token) => {
+        let base = [];
+        for (const reg of shadowed) {
+          base = reg.handler(value, c, token, reg) || [];
+          if (base.length > 0) break;
+        }
+        return [...base, ...safe.map(([prop, v]) => decl(prop, v))];
+      }
+    }, ctx);
+  }
+  if (list.length > before) list.unshift(...list.splice(before));
+}
 const preflightMinimalCSS = `
 /* BaroCSS Preflight - Minimal Reset */
 /* ================================= */
@@ -2503,7 +2654,7 @@ html {
   line-height: 1.15;
   -webkit-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, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+  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);
 }
@@ -2806,7 +2957,7 @@ html {
   -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, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'));
+  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);
 }
@@ -3254,9 +3405,7 @@ function resolveTheme(config) {
 }
 function themeToCssVars(theme) {
   const vars = themeToCssVarsAll(theme);
-  const result = toCssVarsBlock(vars, `
-${keyframesToCss(theme.keyframes || {})}
-`);
+  const result = toCssVarsBlock(vars);
   return result;
 }
 function createContext(configObj) {
@@ -3310,6 +3459,7 @@ function createContext(configObj) {
     }
   };
   initializeContextState(ctx, getUtility(), getModifier());
+  registerCustomUtilities(ctx, configObj.utilities);
   return ctx;
 }
 function parseFraction(input) {
@@ -3708,6 +3858,9 @@ staticUtility("snap-both", [["scroll-snap-type", "both var(--baro-scroll-snap-st
 staticUtility("snap-mandatory", [["--baro-scroll-snap-strictness", "mandatory"]], { category: "interactivity" });
 staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]], { category: "interactivity" });
 [
+  ["mbs", "scroll-margin-block-start"],
+  // #311 (Tailwind 4.3), before `mb`
+  ["mbe", "scroll-margin-block-end"],
   ["mt", "scroll-margin-top"],
   ["mr", "scroll-margin-right"],
   ["mb", "scroll-margin-bottom"],
@@ -3718,6 +3871,8 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
   ["me", "scroll-margin-inline-end"],
   ["m", "scroll-margin"]
 ].forEach(([name, prop]) => {
+  staticUtility(`scroll-${name}-px`, [[prop, "1px"]], { category: "interactivity" });
+  staticUtility(`-scroll-${name}-px`, [[prop, "-1px"]], { category: "interactivity" });
   functionalUtility({
     name: `scroll-${name}`,
     spacingKeys: true,
@@ -3736,6 +3891,9 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
   });
 });
 [
+  ["pbs", "scroll-padding-block-start"],
+  // #311 (Tailwind 4.3), before `pb`
+  ["pbe", "scroll-padding-block-end"],
   ["pt", "scroll-padding-top"],
   ["pr", "scroll-padding-right"],
   ["pb", "scroll-padding-bottom"],
@@ -3752,13 +3910,15 @@ staticUtility("snap-proximity", [["--baro-scroll-snap-strictness", "proximity"]]
     prop,
     supportsArbitrary: true,
     supportsCustomProperty: true,
+    handleBareValue: ({ value }) => value === "px" ? "1px" : /^(\d|\.\d)/.test(value) ? value : null,
     handle: (value, _ctx, token, _extra) => {
-      if (parseNumber(value) || token.negative) {
+      if (token.negative) return [];
+      if (parseNumber(value)) {
         return [decl(prop, `calc(var(--spacing) * ${value})`)];
       }
       return [decl(prop, value)];
     },
-    handleCustomProperty: (value) => [decl(prop, `var(${value})`)],
+    handleCustomProperty: (value, _ctx, token) => token.negative ? [] : [decl(prop, `var(${value})`)],
     description: `scroll-${name} utility (static, arbitrary, custom property supported)`,
     category: "interactivity"
   });
@@ -3789,6 +3949,40 @@ functionalUtility({
   description: "will-change utility (static, arbitrary, custom property supported)",
   category: "interactivity"
 });
+staticUtility("scrollbar-auto", [["scrollbar-width", "auto"]], { category: "interactivity" });
+staticUtility("scrollbar-thin", [["scrollbar-width", "thin"]], { category: "interactivity" });
+staticUtility("scrollbar-none", [["scrollbar-width", "none"]], { category: "interactivity" });
+staticUtility("scrollbar-gutter-auto", [["scrollbar-gutter", "auto"]], { category: "interactivity" });
+staticUtility("scrollbar-gutter-stable", [["scrollbar-gutter", "stable"]], { category: "interactivity" });
+staticUtility("scrollbar-gutter-both", [["scrollbar-gutter", "stable both-edges"]], { category: "interactivity" });
+const SCROLLBAR_COLOR = "var(--baro-scrollbar-thumb) var(--baro-scrollbar-track)";
+const scrollbarProperties = () => atRoot([
+  property("--baro-scrollbar-thumb", "#0000", "<color>"),
+  property("--baro-scrollbar-track", "#0000", "<color>")
+]);
+const stripColorHint = (v) => v.replace(/^color:/, "");
+for (const part of ["thumb", "track"]) {
+  const key = `--baro-scrollbar-${part}`;
+  const compose = (inner) => [scrollbarProperties(), ...inner, decl("scrollbar-color", SCROLLBAR_COLOR)];
+  const withOpacity = (color, opacity2) => opacity2 ? [decl(key, `color-mix(in oklab, ${color} ${opacity2.replace(/^\[(.*)\]$/, "$1").replace(/%$/, "")}%, transparent)`)] : [decl(key, color)];
+  functionalUtility({
+    name: `scrollbar-${part}`,
+    themeKeys: ["colors"],
+    supportsOpacity: true,
+    supportsArbitrary: true,
+    supportsCustomProperty: true,
+    handle: (value, _ctx, token, extra) => {
+      if (extra?.realThemeValue) return compose(withOpacity(`var(--color-${extra.realThemeValue})`, extra.opacity));
+      if (token.arbitrary) return compose(withOpacity(stripColorHint(value), extra?.opacity));
+      if (value === "inherit" || value === "transparent") return compose([decl(key, value)]);
+      if (value === "current") return compose(withOpacity("currentcolor", extra?.opacity));
+      return null;
+    },
+    handleCustomProperty: (value, _ctx, _token, extra) => compose(withOpacity(`var(${stripColorHint(value)})`, extra?.opacity)),
+    description: `scrollbar-color ${part} utility (theme, arbitrary, custom property, opacity)`,
+    category: "interactivity"
+  });
+}
 const defaultTiming = "var(--default-transition-timing-function)";
 const defaultDuration = "var(--default-transition-duration)";
 staticUtility("transition", [
@@ -3907,10 +4101,12 @@ staticUtility("animate-bounce", [["animation", "var(--animate-bounce)"]], { cate
 staticUtility("animate-none", [["animation", "none"]], { category: "transitions" });
 functionalUtility({
   name: "animate",
-  prop: "animation",
+  // #274: theme.animations (and Tailwind's theme.animation) names, e.g. theme.extend.animation.wiggle.
+  themeKeys: ["animations", "animation"],
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, ctx, token) => {
+  handle: (value, ctx, token, extra) => {
+    if (extra?.realThemeValue) return [decl("animation", `var(--animate-${extra.realThemeValue})`)];
     if (token.customProperty) {
       return [decl("animation", `var(${value})`)];
     }
@@ -3924,53 +4120,99 @@ staticUtility("border-collapse", [["border-collapse", "collapse"]], { category:
 staticUtility("border-separate", [["border-collapse", "separate"]], { category: "table" });
 staticUtility("table-auto", [["table-layout", "auto"]], { category: "table" });
 staticUtility("table-fixed", [["table-layout", "fixed"]], { category: "table" });
-functionalUtility({
-  name: "border-spacing-x",
-  prop: "border-spacing",
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  handle: (value, _ctx, _token) => {
-    if (parseNumber(value)) {
-      return [decl("border-spacing", `calc(var(--spacing) * ${value}) var(--baro-border-spacing-y)`)];
-    }
-    return [decl("border-spacing", `${value} var(--baro-border-spacing-y)`)];
-  },
-  handleCustomProperty: (value) => [decl("border-spacing", `var(${value}) var(--baro-border-spacing-y)`)],
-  description: "border-spacing-x utility (static, number, arbitrary, custom property supported)",
-  category: "table"
-});
-functionalUtility({
-  name: "border-spacing-y",
-  prop: "border-spacing",
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  handle: (value, _ctx, _token) => {
-    if (parseNumber(value)) {
-      return [decl("border-spacing", `var(--baro-border-spacing-x) calc(var(--spacing) * ${value})`)];
-    }
-    return [decl("border-spacing", `var(--baro-border-spacing-x) ${value}`)];
-  },
-  handleCustomProperty: (value) => [decl("border-spacing", `var(--baro-border-spacing-x) var(${value})`)],
-  description: "border-spacing-y utility (static, number, arbitrary, custom property supported)",
-  category: "table"
-});
-functionalUtility({
-  name: "border-spacing",
-  prop: "border-spacing",
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  handle: (value, _ctx, _token) => {
-    if (parseNumber(value)) {
-      return [decl("border-spacing", `calc(var(--spacing) * ${value})`)];
-    }
-    return [decl("border-spacing", value)];
-  },
-  handleCustomProperty: (value) => [decl("border-spacing", `var(${value})`)],
-  description: "border-spacing utility (static, number, arbitrary, custom property supported)",
-  category: "table"
+const borderSpacingProperties = () => atRoot([
+  property("--baro-border-spacing-x", "0", "<length>"),
+  property("--baro-border-spacing-y", "0", "<length>")
+]);
+const BORDER_SPACING = "var(--baro-border-spacing-x) var(--baro-border-spacing-y)";
+const borderSpacing = (axes, v) => [
+  borderSpacingProperties(),
+  ...axes.map((a) => decl(`--baro-border-spacing-${a}`, v)),
+  decl("border-spacing", BORDER_SPACING)
+];
+[
+  ["border-spacing-x", ["x"]],
+  ["border-spacing-y", ["y"]],
+  ["border-spacing", ["x", "y"]]
+].forEach(([name, axes]) => {
+  staticUtility(`${name}-px`, [
+    borderSpacingProperties,
+    ...axes.map((a) => [`--baro-border-spacing-${a}`, "1px"]),
+    ["border-spacing", BORDER_SPACING]
+  ], { category: "table" });
+  functionalUtility({
+    name,
+    prop: "border-spacing",
+    supportsArbitrary: true,
+    supportsCustomProperty: true,
+    handle: (value) => borderSpacing(axes, parseNumber(value) ? `calc(var(--spacing) * ${value})` : value),
+    handleCustomProperty: (value) => borderSpacing(axes, `var(${value})`),
+    description: `${name} utility (number, px, arbitrary, custom property supported)`,
+    category: "table"
+  });
 });
 staticUtility("caption-top", [["caption-side", "top"]], { category: "table" });
 staticUtility("caption-bottom", [["caption-side", "bottom"]], { category: "table" });
+function parseAlpha(op) {
+  if (!op) return null;
+  if (/^\d+(\.\d+)?$/.test(op)) return { alpha: `${op}%`, isVar: false };
+  const pct = /^\[(\d+(?:\.\d+)?)%\]$/.exec(op);
+  if (pct) return { alpha: `${pct[1]}%`, isVar: false };
+  const cp = /^\((--[\w-]+)\)$/.exec(op);
+  if (cp) return { alpha: `var(${cp[1]})`, isVar: true };
+  return null;
+}
+function splitTop(value, sep) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of value) {
+    if (ch === "(") depth++;
+    else if (ch === ")") depth--;
+    if (depth === 0 && (sep === " " ? /\s/.test(ch) : ch === sep)) {
+      if (cur.trim()) out.push(cur.trim());
+      cur = "";
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+const LENGTH = /^-?(\d*\.)?\d+([a-z]+|%)?$/i;
+function shadowLayers(value, layer, alpha) {
+  return splitTop(value, ",").map((l) => {
+    const parts = splitTop(l, " ");
+    const i = parts.findIndex((p) => p !== "inset" && !LENGTH.test(p));
+    const c = i < 0 ? "currentcolor" : parts[i];
+    parts[i < 0 ? parts.length : i] = `var(--baro-${layer}-color, ${alpha ? `oklab(from ${c} l a b / ${alpha})` : c})`;
+    return parts.join(" ");
+  });
+}
+function shadowValueDecls(layer, prop, value, opacity2, render = (l) => l.join(", ")) {
+  const a = parseAlpha(opacity2);
+  if (opacity2 && !a) return null;
+  if (!a) return [decl(prop, render(shadowLayers(value, layer)))];
+  const alphaDecl = decl(`--baro-${layer}-alpha`, a.alpha);
+  if (!a.isVar) return [alphaDecl, decl(prop, render(shadowLayers(value, layer, a.alpha)))];
+  return [
+    alphaDecl,
+    decl(prop, render(shadowLayers(value, layer))),
+    atRule("supports", "(color: lab(from red l a b))", [decl(prop, render(shadowLayers(value, layer, a.alpha)))])
+  ];
+}
+function shadowColorDecls(layer, color, opacity2, ref = color) {
+  const key = `--baro-${layer}-color`;
+  if (color === "inherit") return [decl(key, "inherit")];
+  const a = parseAlpha(opacity2);
+  if (opacity2 && !a) return null;
+  const inner = a ? `color-mix(in oklab, ${ref} ${a.alpha}, transparent)` : ref;
+  const fallback = a ? `color-mix(in srgb, ${color} ${a.alpha}, transparent)` : color;
+  return [
+    decl(key, fallback),
+    atRule("supports", "(color: color-mix(in lab, red, red))", [
+      decl(key, `color-mix(in oklab, ${inner} var(--baro-${layer}-alpha), transparent)`)
+    ])
+  ];
+}
 staticUtility("filter-none", [["filter", "none"]], { category: "effects" });
 functionalUtility({
   name: "filter",
@@ -4055,57 +4297,68 @@ functionalUtility({
   description: "contrast filter utility (static, number, arbitrary, custom property supported)",
   category: "effects"
 });
-[
-  ["drop-shadow-xs", "xs", "0 1px 1px var(--baro-drop-shadow-color, #0000001a)"],
-  ["drop-shadow-sm", "sm", "0 1px 2px var(--baro-drop-shadow-color, #0000001a)"],
-  ["drop-shadow-md", "md", "0 3px 3px var(--baro-drop-shadow-color, #0000001a)"],
-  ["drop-shadow-lg", "lg", "0 4px 4px var(--baro-drop-shadow-color, #0000001a)"],
-  ["drop-shadow-xl", "xl", "0 9px 7px var(--baro-drop-shadow-color, #0000001a)"],
-  ["drop-shadow-2xl", "2xl", "0 25px 25px var(--baro-drop-shadow-color, #0000001a)"]
-].forEach(([name, size, sizeValue]) => {
-  staticUtility(name, [
-    decl("--baro-drop-shadow-size", `drop-shadow(${sizeValue})`),
-    decl("--baro-drop-shadow", `var(--drop-shadow-${size})`),
-    filters$1()
-  ]);
-});
-staticUtility("drop-shadow-none", [decl("--baro-drop-shadow", "drop-shadow(0 0 #0000)"), filters$1()]);
-["inherit", "current", "transparent"].forEach((name) => {
-  staticUtility(`drop-shadow-${name}`, [
-    decl("--baro-drop-shadow-color", name === "current" ? "currentColor" : name)
-  ]);
-});
-["black", "white"].forEach((name) => {
-  staticUtility(`drop-shadow-${name}`, [
-    decl("--baro-drop-shadow-color", `var(--color-${name})`)
-  ]);
+const dropShadowProperties = () => atRoot([
+  property("--baro-drop-shadow"),
+  property("--baro-drop-shadow-color"),
+  property("--baro-drop-shadow-alpha", "100%", "<percentage>"),
+  property("--baro-drop-shadow-size")
+]);
+const wrapDropShadow = (layers) => layers.map((l) => `drop-shadow(${l})`).join(" ");
+const DROP_SHADOW_DEFAULT = "0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06)";
+const namedDropShadow = (ctx, name) => {
+  const v = ctx.theme("dropShadow", name);
+  return typeof v === "string" && /^[\w.-]+$/.test(name) ? v : null;
+};
+function dropShadowValue(value, opacity2, named, keepNamed = false) {
+  const decls = shadowValueDecls("drop-shadow", "--baro-drop-shadow-size", value, opacity2, wrapDropShadow);
+  if (!decls) return null;
+  const composed = named !== void 0 && (!opacity2 || keepNamed) ? named : "var(--baro-drop-shadow-size)";
+  return [dropShadowProperties(), ...decls, decl("--baro-drop-shadow", composed), filters$1()];
+}
+staticUtility("drop-shadow-none", [decl("--baro-drop-shadow", " "), filters$1()]);
+registerUtility({
+  name: "drop-shadow",
+  match: (className) => /^drop-shadow(\/.+)?$/.test(className),
+  handler: (value, _ctx, token) => {
+    const full = value ? `${token.prefix}-${value}` : token.prefix;
+    const cut = full.indexOf("/");
+    const opacity2 = cut < 0 ? void 0 : full.slice(cut + 1);
+    const literal = "drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06))";
+    return dropShadowValue(DROP_SHADOW_DEFAULT, opacity2, literal, true) ?? [];
+  },
+  category: "effects"
 });
+const dropShadowColor = (color, opacity2, ref) => {
+  const decls = shadowColorDecls("drop-shadow", color, opacity2, ref);
+  return decls && [dropShadowProperties(), ...decls, decl("--baro-drop-shadow", "var(--baro-drop-shadow-size)")];
+};
 functionalUtility({
   name: "drop-shadow",
   themeKeys: ["colors"],
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value, _ctx, _token, extra) => {
-    if (extra?.realThemeValue) {
-      return [decl("--baro-drop-shadow-color", `var(--color-${extra.realThemeValue})`)];
-    }
-    if (parseColor(value)) {
-      return [decl("--baro-drop-shadow-color", value)];
+  supportsOpacity: true,
+  handleBareValue: ({ value, ctx }) => namedDropShadow(ctx, value) ? value : null,
+  handle: (value, ctx, token, extra) => {
+    const opacity2 = extra?.opacity;
+    const keyword = token.arbitrary ? void 0 : { inherit: "inherit", current: "currentcolor", transparent: "transparent" }[extra?.realThemeValue ?? value];
+    if (keyword) return dropShadowColor(keyword, opacity2);
+    if (extra?.realThemeValue) return dropShadowColor(value, opacity2, `var(--color-${extra.realThemeValue})`);
+    if (token.arbitrary) {
+      if (parseColor(value)) return dropShadowColor(value, opacity2);
+      return dropShadowValue(value, opacity2);
     }
-    return [
-      decl("--baro-drop-shadow-size", `drop-shadow(${value})`),
-      decl("--baro-drop-shadow", `var(--baro-drop-shadow-size)`)
-    ];
+    const named = namedDropShadow(ctx, value);
+    if (named) return dropShadowValue(named, opacity2, `drop-shadow(var(--drop-shadow-${value}))`);
+    return null;
   },
   handleCustomProperty: (value) => {
-    if (value.startsWith("color:")) {
-      return [
-        decl("--baro-drop-shadow-color", `var(${value.replace("color:", "")})`)
-      ];
-    }
+    if (value.startsWith("color:")) return dropShadowColor(`var(${value.slice(6)})`, void 0) ?? [];
     return [
+      dropShadowProperties(),
       decl("--baro-drop-shadow-size", `drop-shadow(var(${value}))`),
-      decl("--baro-drop-shadow", `var(--baro-drop-shadow-size)`)
+      decl("--baro-drop-shadow", `var(--baro-drop-shadow-size)`),
+      filters$1()
     ];
   },
   description: "drop-shadow filter utility (static, arbitrary, custom property supported)",
@@ -4475,166 +4728,119 @@ const ringShadowProperties = () => atRoot([
   property("--baro-ring-offset-width", "0px", "<length>"),
   property("--baro-ring-offset-color", "#fff")
 ]);
-const shadowLayer = (value) => [
-  ringShadowProperties(),
-  decl("--baro-shadow", value),
-  decl("box-shadow", SHADOW_COMPOSITE)
-];
-[
-  ["shadow-2xs", "var(--shadow-2xs)"],
-  ["shadow-xs", "var(--shadow-xs)"],
-  ["shadow-sm", "var(--shadow-sm)"],
-  ["shadow", "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"],
-  ["shadow-md", "var(--shadow-md)"],
-  ["shadow-lg", "var(--shadow-lg)"],
-  ["shadow-xl", "var(--shadow-xl)"],
-  ["shadow-2xl", "var(--shadow-2xl)"],
-  ["shadow-none", "0 0 #0000"]
-].forEach(([name, value]) => {
-  staticUtility(name, [
-    ringShadowProperties,
-    ["--baro-shadow", value],
-    ["box-shadow", SHADOW_COMPOSITE]
-  ], { category: "effects" });
-});
-[
-  ["inset-shadow-2xs", "inset 0 1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-xs", "inset 0 1px 1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-sm", "inset 0 2px 4px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-md", "inset 0 4px 6px -1px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-lg", "inset 0 10px 15px -3px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-xl", "inset 0 20px 25px -5px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-2xl", "inset 0 25px 50px -12px var(--baro-inset-shadow-color, rgb(0 0 0 / 0.05))"],
-  ["inset-shadow-none", "0 0 #0000"]
-].forEach(([name, value]) => {
-  staticUtility(name, [
-    ringShadowProperties,
-    ["--baro-inset-shadow", value],
-    ["box-shadow", SHADOW_COMPOSITE]
-  ], { category: "effects" });
-});
-function createShadowThemeColor(key, main, opacity2, realThemeValue) {
-  let fallbackColor = main;
-  const colorVar = `var(--color-${realThemeValue})`;
-  let colorValue = colorVar;
-  if (opacity2) {
-    colorValue = `color-mix(in oklab, color-mix(in oklab, ${colorVar} ${opacity2}%, transparent) var(--baro-shadow-alpha),transparent)`;
-    if (parseColor(main)) {
-      if (main.startsWith("#")) {
-        const opacityValue = Math.round(Number(opacity2) / 100 * 255);
-        fallbackColor = `${main}${opacityValue.toString(16).padStart(2, "0")}`;
-      } else {
-        fallbackColor = `color-mix(in oklab, ${main} ${opacity2}%, transparent)`;
-      }
-    }
-  }
-  return [
-    atRule("supports", "(color:color-mix(in lab, red, red))", [
-      decl(key, colorValue)
-    ]),
-    decl(key, fallbackColor)
-  ];
+const shadowColorProperties = (layer) => atRoot([
+  property(`--baro-${layer}-color`),
+  property(`--baro-${layer}-alpha`, "100%", "<percentage>")
+]);
+const NAMED_SHADOWS = {
+  "": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  "2xs": "0 1px rgb(0 0 0 / 0.05)",
+  xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
+};
+const NAMED_INSET_SHADOWS = {
+  "2xs": "inset 0 1px rgb(0 0 0 / 0.05)",
+  xs: "inset 0 1px 1px rgb(0 0 0 / 0.05)",
+  sm: "inset 0 2px 4px rgb(0 0 0 / 0.05)"
+};
+const INSET_EXTENSIONS = {
+  md: "inset 0 4px 6px -1px rgb(0 0 0 / 0.05)",
+  lg: "inset 0 10px 15px -3px rgb(0 0 0 / 0.05)",
+  xl: "inset 0 20px 25px -5px rgb(0 0 0 / 0.05)",
+  "2xl": "inset 0 25px 50px -12px rgb(0 0 0 / 0.05)"
+};
+const insetEach = (value) => value.split(/,(?![^(]*\))/).map((l) => `inset ${l.trim()}`).join(", ");
+const own = (table, key) => Object.prototype.hasOwnProperty.call(table, key);
+function boxShadowLayer(layer, value, opacity2) {
+  const decls = shadowValueDecls(layer, `--baro-${layer}`, value, opacity2);
+  if (!decls) return null;
+  return [ringShadowProperties(), shadowColorProperties(layer), ...decls, decl("box-shadow", SHADOW_COMPOSITE)];
+}
+function namedBoxShadow(layer, name, opacity2) {
+  if (layer === "shadow") return own(NAMED_SHADOWS, name) ? boxShadowLayer(layer, NAMED_SHADOWS[name], opacity2) : null;
+  if (own(NAMED_INSET_SHADOWS, name)) return boxShadowLayer(layer, NAMED_INSET_SHADOWS[name], opacity2);
+  if (!opacity2 && own(INSET_EXTENSIONS, name)) return boxShadowLayer(layer, INSET_EXTENSIONS[name], void 0);
+  return null;
 }
-functionalUtility({
+staticUtility("shadow-none", [ringShadowProperties, ["--baro-shadow", "0 0 #0000"], ["box-shadow", SHADOW_COMPOSITE]], { category: "effects" });
+staticUtility("inset-shadow-none", [ringShadowProperties, ["--baro-inset-shadow", "inset 0 0 #0000"], ["box-shadow", SHADOW_COMPOSITE]], { category: "effects" });
+registerUtility({
   name: "shadow",
-  supportsArbitrary: true,
-  supportsCustomProperty: true,
-  supportsOpacity: true,
-  themeKeys: ["colors", "shadows"],
-  handle: (value, ctx, token, extra) => {
-    const main = value;
-    const opacity2 = extra?.opacity;
-    const realThemeValue = extra?.realThemeValue;
-    if (realThemeValue) {
-      return createShadowThemeColor(
-        "--baro-shadow-color",
-        main,
-        opacity2,
-        realThemeValue
-      );
-    }
-    if (main.startsWith("color:")) {
-      const cp = main.replace("color:", "");
-      if (opacity2) {
-        return [
-          decl(
-            "--baro-shadow-color",
-            `color-mix(in oklab, var(${cp}) ${opacity2}%, transparent)`
-          )
-        ];
-      }
-      return [decl("--baro-shadow-color", `var(${cp})`)];
-    }
-    if (token.arbitrary) {
-      if (parseColor(main)) {
-        if (opacity2) {
-          return [
-            decl(
-              "--baro-shadow-color",
-              `color-mix(in oklab, ${main} ${opacity2}%, transparent)`
-            )
-          ];
-        }
-        return [decl("--baro-shadow-color", main)];
-      }
-      return shadowLayer(main);
-    }
-    if (main === "inherit" || main === "current" || main === "transparent") {
-      return [
-        decl("--baro-shadow-color", main === "current" ? "currentColor" : main)
-      ];
-    }
-    return null;
+  match: (className) => /^shadow(\/.+)?$/.test(className),
+  handler: (value, _ctx, token) => {
+    const full = value ? `${token.prefix}-${value}` : token.prefix;
+    const cut = full.indexOf("/");
+    return namedBoxShadow("shadow", "", cut < 0 ? void 0 : full.slice(cut + 1)) ?? [];
   },
-  handleCustomProperty: (value) => shadowLayer(`var(${value})`)
+  category: "effects"
 });
+const KEYWORD_COLORS = { inherit: "inherit", current: "currentcolor", transparent: "transparent" };
+function layerColor(layer, main, opacity2, token, realThemeValue) {
+  const keyword = token.arbitrary ? void 0 : KEYWORD_COLORS[realThemeValue ?? main];
+  if (keyword) return shadowColorDecls(layer, keyword, opacity2);
+  if (realThemeValue) return shadowColorDecls(layer, main, opacity2, `var(--color-${realThemeValue})`);
+  if (main.startsWith("color:")) return shadowColorDecls(layer, `var(${main.slice(6)})`, opacity2);
+  if (token.arbitrary && parseColor(main)) return shadowColorDecls(layer, main, opacity2);
+  return void 0;
+}
+for (const layer of ["shadow", "inset-shadow"]) {
+  functionalUtility({
+    name: layer,
+    supportsArbitrary: true,
+    supportsCustomProperty: true,
+    supportsOpacity: true,
+    themeKeys: ["colors"],
+    handleBareValue: ({ value, extra }) => namedBoxShadow(layer, value, extra?.opacity) ? value : null,
+    handle: (value, _ctx, token, extra) => {
+      const opacity2 = extra?.opacity;
+      const named = !extra?.realThemeValue && !token.arbitrary ? namedBoxShadow(layer, value, opacity2) : null;
+      if (named) return named;
+      const color = layerColor(layer, value, opacity2, token, extra?.realThemeValue);
+      if (color !== void 0) return color;
+      if (token.arbitrary) return boxShadowLayer(layer, layer === "inset-shadow" ? insetEach(value) : value, opacity2);
+      return null;
+    },
+    handleCustomProperty: (value) => value.startsWith("color:") ? shadowColorDecls(layer, `var(${value.slice(6)})`, void 0) ?? [] : [ringShadowProperties(), decl(`--baro-${layer}`, layer === "inset-shadow" ? `inset var(${value})` : `var(${value})`), decl("box-shadow", SHADOW_COMPOSITE)]
+  });
+}
+const textShadowProperties = () => atRoot([
+  property("--baro-text-shadow-color"),
+  property("--baro-text-shadow-alpha", "100%", "<percentage>")
+]);
+const namedTextShadow = (ctx, name) => {
+  const v = ctx.theme("textShadow", name);
+  return typeof v === "string" && /^[\w.-]+$/.test(name) ? v : null;
+};
+const textShadowValue = (value, opacity2) => {
+  const decls = shadowValueDecls("text-shadow", "text-shadow", value, opacity2);
+  return decls ? [textShadowProperties(), ...decls] : null;
+};
+staticUtility("text-shadow-none", [textShadowProperties, ["text-shadow", "none"]], { category: "effects" });
 functionalUtility({
-  name: "inset-shadow",
+  name: "text-shadow",
   supportsArbitrary: true,
   supportsCustomProperty: true,
   supportsOpacity: true,
-  themeKeys: ["colors", "shadows"],
+  themeKeys: ["colors"],
+  handleBareValue: ({ value, ctx }) => namedTextShadow(ctx, value) ? value : null,
   handle: (value, ctx, token, extra) => {
-    const main = value;
     const opacity2 = extra?.opacity;
-    const realThemeValue = extra?.realThemeValue;
-    if (realThemeValue) {
-      return createShadowThemeColor(
-        "--baro-inset-shadow-color",
-        main,
-        opacity2,
-        realThemeValue
-      );
-    }
-    if (main.startsWith("color:")) {
-      const cp = main.replace("color:", "");
-      let colorValue = `var(${cp})`;
-      if (opacity2) {
-        colorValue = `color-mix(in oklab, var(${cp}) ${opacity2}%, transparent)`;
-      }
-      return [decl("--baro-inset-shadow-color", colorValue)];
-    }
-    if (token.arbitrary) {
-      if (parseColor(main)) {
-        let colorValue = main;
-        if (opacity2) {
-          colorValue = `color-mix(in oklab, ${main} ${opacity2}%, transparent)`;
-        }
-        return [decl("--baro-inset-shadow-color", colorValue)];
-      }
-      return [decl("box-shadow", `inset ${main}`)];
-    }
-    if (main === "inherit" || main === "current" || main === "transparent") {
-      return [
-        decl(
-          "--baro-inset-shadow-color",
-          main === "current" ? "currentColor" : main
-        )
-      ];
+    if (!extra?.realThemeValue && !token.arbitrary) {
+      const named = namedTextShadow(ctx, value);
+      if (named) return textShadowValue(named, opacity2);
     }
+    const color = layerColor("text-shadow", value, opacity2, token, extra?.realThemeValue);
+    if (color !== void 0) return color && [textShadowProperties(), ...color];
+    if (token.arbitrary) return textShadowValue(value, opacity2);
     return null;
   },
-  handleCustomProperty: (value) => [decl("box-shadow", `var(${value})`)]
+  handleCustomProperty: (value) => value.startsWith("color:") ? [textShadowProperties(), ...shadowColorDecls("text-shadow", `var(${value.slice(6)})`, void 0) ?? []] : [textShadowProperties(), decl("text-shadow", `var(${value})`)],
+  category: "effects"
 });
 [
   ["ring", "1px"],
@@ -5177,12 +5383,15 @@ staticUtility("not-sr-only", [
 ], { category: "layout" });
 staticUtility("@container", [["container-type", "inline-size"]], { category: "layout" });
 staticUtility("@container-normal", [["container-type", "normal"]], { category: "layout" });
+staticUtility("@container-size", [["container-type", "size"]], { category: "layout" });
+const NAMED_CONTAINER = /^@container(-normal|-size)?\/([a-zA-Z0-9_-]+)$/;
+const CONTAINER_TYPE = { "": "inline-size", "-normal": "normal", "-size": "size" };
 registerUtility({
   name: "@container",
-  match: (className) => /^@container\/[a-zA-Z0-9_-]+$/.test(className),
+  match: (className) => NAMED_CONTAINER.test(className),
   handler: (_value, _ctx, token) => {
-    const name = /^@container\/([a-zA-Z0-9_-]+)$/.exec(`${token.prefix}${token.value ? `-${token.value}` : ""}`)?.[1];
-    return name ? [decl("container-type", "inline-size"), decl("container-name", name)] : null;
+    const m = NAMED_CONTAINER.exec(`${token.prefix}${token.value ? `-${token.value}` : ""}`);
+    return m ? [decl("container-type", CONTAINER_TYPE[m[1] ?? ""]), decl("container-name", m[2])] : null;
   },
   category: "layout"
 });
@@ -5267,6 +5476,11 @@ staticUtility("sticky", [["position", "sticky"]], { category: "layout" });
 [
   ["inset-x", "inset-inline"],
   ["inset-y", "inset-block"],
+  // Tailwind 4.3 logical sides; registered before `inset` so their handler runs first for `inset-s-*` etc.
+  ["inset-s", "inset-inline-start"],
+  ["inset-e", "inset-inline-end"],
+  ["inset-bs", "inset-block-start"],
+  ["inset-be", "inset-block-end"],
   ["inset", "inset"],
   ["start", "inset-inline-start"],
   ["end", "inset-inline-end"],
@@ -5362,6 +5576,15 @@ functionalUtility({
   description: "gap utility (number, arbitrary, custom property supported)",
   category: "layout"
 });
+functionalUtility({
+  name: "zoom",
+  prop: "zoom",
+  supportsArbitrary: true,
+  supportsCustomProperty: true,
+  handleBareValue: ({ value }) => /^\d+$/.test(value) ? `${value}%` : null,
+  description: "zoom utility (integer percent, arbitrary, custom property)",
+  category: "layout"
+});
 staticUtility("basis-full", [["flex-basis", "100%"]], { category: "flex-grid" });
 staticUtility("basis-auto", [["flex-basis", "auto"]], { category: "flex-grid" });
 staticUtility("basis-3xs", [["flex-basis", "var(--container-3xs)"]], { category: "flex-grid" });
@@ -5636,6 +5859,8 @@ functionalUtility({
   // auto-cols-[minmax(0,2fr)]
   supportsCustomProperty: true,
   // auto-cols-(--my-auto-cols)
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
+  // #310: auto-cols-4
   handle: (value) => {
     if (typeof value === "string") return [decl("grid-auto-columns", value)];
     return null;
@@ -5655,6 +5880,8 @@ functionalUtility({
   // auto-rows-[minmax(0,2fr)]
   supportsCustomProperty: true,
   // auto-rows-(--my-auto-rows)
+  handleBareValue: ({ value }) => parseNumber(value) ? `calc(var(--spacing) * ${value})` : null,
+  // #310: auto-rows-12
   handle: (value) => {
     if (typeof value === "string") return [decl("grid-auto-rows", value)];
     return null;
@@ -5857,6 +6084,8 @@ functionalUtility({
   ["py", "padding-block"],
   ["ps", "padding-inline-start"],
   ["pe", "padding-inline-end"],
+  ["pbs", "padding-block-start"],
+  ["pbe", "padding-block-end"],
   ["pt", "padding-top"],
   ["pr", "padding-right"],
   ["pb", "padding-bottom"],
@@ -5880,6 +6109,8 @@ functionalUtility({
   ["my", "margin-block"],
   ["ms", "margin-inline-start"],
   ["me", "margin-inline-end"],
+  ["mbs", "margin-block-start"],
+  ["mbe", "margin-block-end"],
   ["mt", "margin-top"],
   ["mr", "margin-right"],
   ["mb", "margin-bottom"],
@@ -6205,6 +6436,41 @@ functionalUtility({
   description: "max-width utility (spacing, fraction, arbitrary, custom property, static supported)",
   category: "sizing"
 });
+{
+  const containers = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"].map(
+    (k) => [k, `var(--container-${k})`]
+  );
+  const common = [["0", "0px"], ["px", "1px"], ["full", "100%"], ["min", "min-content"], ["max", "max-content"], ["fit", "fit-content"]];
+  const inlineVp = [["screen", "100vw"], ["dvw", "100dvw"], ["lvw", "100lvw"], ["svw", "100svw"]];
+  const blockVp = [["screen", "100vh"], ["dvh", "100dvh"], ["lvh", "100lvh"], ["svh", "100svh"], ["lh", "1lh"]];
+  const families = [
+    ["inline", "inline-size", [...common, ["auto", "auto"], ...inlineVp, ...containers]],
+    ["min-inline", "min-inline-size", [...common, ["auto", "auto"], ...inlineVp, ...containers]],
+    ["max-inline", "max-inline-size", [...common, ["none", "none"], ...inlineVp, ...containers]],
+    ["block", "block-size", [...common, ["auto", "auto"], ...blockVp]],
+    ["min-block", "min-block-size", [...common, ["auto", "auto"], ...blockVp]],
+    ["max-block", "max-block-size", [...common, ["none", "none"], ...blockVp]]
+  ];
+  for (const [name, prop, statics] of families) {
+    for (const [key, value] of statics) staticUtility(`${name}-${key}`, [[prop, value]], { category: "sizing" });
+    functionalUtility({
+      spacingKeys: true,
+      name,
+      prop,
+      supportsArbitrary: true,
+      supportsCustomProperty: true,
+      supportsFraction: true,
+      handleBareValue: ({ value, token }) => {
+        if (token.negative) return null;
+        if (parseNumber(value)) return `calc(var(--spacing) * ${value})`;
+        if (parseFractionOrNumber(value)) return `calc(${value} * 100%)`;
+        return null;
+      },
+      description: `${prop} utility (spacing, fraction, arbitrary, custom property, keywords)`,
+      category: "sizing"
+    });
+  }
+}
 const leadingProperty = () => atRoot([property("--baro-leading")]);
 staticUtility("font-sans", [["font-family", "var(--font-sans)"]], { category: "typography" });
 staticUtility("font-serif", [["font-family", "var(--font-serif)"]], { category: "typography" });
@@ -6235,13 +6501,15 @@ functionalUtility({
   name: "font",
   supportsArbitrary: true,
   supportsCustomProperty: true,
-  handle: (value) => {
+  handle: (value, _ctx, token) => {
+    if (token.prefix !== "font") return null;
     if (parseNumber(value)) {
       return [decl("font-weight", value)];
     }
     return [decl("font-family", value)];
   },
-  handleCustomProperty: (value) => {
+  handleCustomProperty: (value, _ctx, token) => {
+    if (token.prefix !== "font") return null;
     if (value.startsWith("font-name:")) {
       return [decl("font-family", `var(${value.replace("font-name:", "")})`)];
     }
@@ -6540,6 +6808,42 @@ functionalUtility({
   description: "content utility (arbitrary, custom property supported)",
   category: "typography"
 });
+const placeholderColor = (value) => [rule("&::placeholder", [decl("color", value)])];
+staticUtility("placeholder-inherit", placeholderColor("inherit"), { category: "typography" });
+staticUtility("placeholder-current", placeholderColor("currentcolor"), { category: "typography" });
+staticUtility("placeholder-transparent", placeholderColor("transparent"), { category: "typography" });
+functionalUtility({
+  name: "placeholder",
+  themeKeys: ["colors"],
+  supportsArbitrary: true,
+  supportsCustomProperty: true,
+  supportsOpacity: true,
+  handle: (value, _ctx, _token, extra) => {
+    if (extra?.realThemeValue) return [rule("&::placeholder", themeColorDecls("color", value, extra))];
+    if (parseColor(value)) return placeholderColor(value);
+    return null;
+  },
+  handleCustomProperty: (value) => placeholderColor(`var(${value})`),
+  description: "placeholder color utility (theme, alpha, arbitrary, custom property)"
+});
+functionalUtility({
+  name: "font-features",
+  supportsArbitrary: true,
+  supportsCustomProperty: true,
+  handle: (value, _ctx, token) => token.arbitrary ? [decl("font-feature-settings", value)] : null,
+  handleCustomProperty: (value) => [decl("font-feature-settings", `var(${value.replace(/^[a-z-]+:(?=--)/, "")})`)],
+  description: "font-feature-settings utility (arbitrary, custom property)",
+  category: "typography"
+});
+functionalUtility({
+  name: "tab",
+  prop: "tab-size",
+  supportsArbitrary: true,
+  supportsCustomProperty: true,
+  handleBareValue: ({ value }) => /^\d+$/.test(value) ? value : null,
+  description: "tab-size utility (integer, arbitrary, custom property)",
+  category: "typography"
+});
 const gradientStopProperties = () => {
   return atRoot([
     property("--baro-gradient-position"),
@@ -6871,6 +7175,11 @@ const withBorderStyle = (props, width) => [
 [
   ["border-x", ["border-left-width", "border-right-width"]],
   ["border-y", ["border-top-width", "border-bottom-width"]],
+  ["border-bs", ["border-block-start-width"]],
+  ["border-be", ["border-block-end-width"]],
+  ["border-s", ["border-inline-start-width"]],
+  // #311 (Tailwind 4.3)
+  ["border-e", ["border-inline-end-width"]],
   ["border-t", ["border-top-width"]],
   ["border-r", ["border-right-width"]],
   ["border-b", ["border-bottom-width"]],
@@ -6890,6 +7199,7 @@ const withBorderStyle = (props, width) => [
   functionalUtility({
     name,
     themeKeys: ["borderWidth", "colors"],
+    supportsOpacity: true,
     supportsArbitrary: true,
     supportsCustomProperty: true,
     handleBareValue: ({ value }) => {
@@ -7870,9 +8180,10 @@ staticModifier("starting", ["&"], {
   wrap: () => [atRule("starting-style", "", [], "starting")],
   source: "starting"
 });
-function createContainerParams(type, value, name) {
+function createContainerParams(type, value, name, negate = false) {
   const condition = type === "min" ? "width >=" : "width <";
-  return name ? `${name} (${condition} ${value})` : `(${condition} ${value})`;
+  const query = `${negate ? "not " : ""}(${condition} ${value})`;
+  return name ? `${name} ${query}` : query;
 }
 function createContainerRule(params, ast) {
   return {
@@ -8041,17 +8352,17 @@ functionalModifier(
     return result;
   }
 );
-const SIZE_VARIANT = /^@(?:(min|max)-)?(\[[^\]]+\]|[a-zA-Z0-9.]+)(?:\/([a-zA-Z0-9_-]+))?$/;
+const SIZE_VARIANT = /^(not-)?@(?:(min|max)-)?(\[[^\]]+\]|[a-zA-Z0-9.]+)(?:\/([a-zA-Z0-9_-]+))?$/;
 functionalModifier(
-  (mod) => SIZE_VARIANT.test(mod) && !/^@container(?:\/|$)/.test(mod),
+  (mod) => SIZE_VARIANT.test(mod) && !/^(?:not-)?@container(?:\/|$)/.test(mod),
   void 0,
   (mod, context) => {
     const m = SIZE_VARIANT.exec(mod.type);
     if (!m) return [];
-    const [, type, size, name] = m;
+    const [, not, type, size, name] = m;
     const value = size.startsWith("[") ? size.slice(1, -1).replace(/_/g, " ") : context.theme("container." + size);
     if (!value) return [];
-    return [createContainerRule(createContainerParams(type === "max" ? "max" : "min", value, name), [])];
+    return [createContainerRule(createContainerParams(type === "max" ? "max" : "min", value, name, !!not), [])];
   }
 );
 const startsAtRule = (bracket) => /^[\s_]*@/.test(bracket);
@@ -8191,7 +8502,7 @@ functionalModifier(
   }
 );
 functionalModifier(
-  (mod) => /^not-/.test(mod),
+  (mod) => /^not-/.test(mod) && !mod.startsWith("not-@"),
   ({ selector, mod }) => {
     const m = /^not-(.+)$/.exec(mod.type);
     return {
@@ -8258,7 +8569,8 @@ functionalModifier(
   void 0
 );
 functionalModifier(
-  (mod) => mod.startsWith("not-"),
+  (mod) => mod.startsWith("not-") && !mod.startsWith("not-@"),
+  // not-@… is container negation (#311)
   ({ selector, mod }) => {
     const pseudo = mod.type.replace("not-", "");
     if (pseudo.startsWith("[")) {
@@ -9114,7 +9426,7 @@ class ChangeDetector {
 function unescapeCssIdent(s) {
   return s.replace(/\\([0-9a-fA-F]{1,6})\s?|\\(.)/g, (_m, hex, ch) => hex ? String.fromCodePoint(parseInt(hex, 16)) : ch);
 }
-const LEADING_CLASS = /^\s*\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/;
+const LEADING_CLASS = /^\s*(?::(?:where|is)\(\s*)?\.((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w-]|[^\x00-\x7F])+)/;
 function splitTopLevel(sel) {
   const parts = [];
   let depth = 0, start = 0;
@@ -9131,6 +9443,17 @@ function splitTopLevel(sel) {
   parts.push(sel.slice(start));
   return parts;
 }
+function collectKeyframeNames(rules, out = /* @__PURE__ */ new Set()) {
+  for (const rule2 of Array.from(rules)) {
+    if (rule2.type === 7 && typeof rule2.name === "string") {
+      out.add(rule2.name);
+      continue;
+    }
+    const inner = rule2.cssRules;
+    if (inner && inner.length) collectKeyframeNames(inner, out);
+  }
+  return out;
+}
 function collectLeadingClasses(rules, out = /* @__PURE__ */ new Set()) {
   for (const rule2 of Array.from(rules)) {
     const selectorText = rule2.selectorText;
@@ -9254,6 +9577,7 @@ class ClassGc {
     return { trackedClasses: this.counts.size, candidates: this.candidates.size };
   }
 }
+const SSR_STYLE_SELECTOR = "style[data-barocss-ssr]";
 const LAYER_ORDER = "@layer theme, base, components, utilities;";
 class BrowserRuntime {
   constructor(options = {}) {
@@ -9261,10 +9585,14 @@ class BrowserRuntime {
     this.rootCache = /* @__PURE__ */ new Set();
     this.isDestroyed = false;
     this.existing = null;
+    this.existingKeyframes = /* @__PURE__ */ new Set();
     this.existingSheetCount = -1;
     this.pinned = /* @__PURE__ */ new Set();
     this.gc = null;
     this.reclaimedCount = 0;
+    this.ssrRules = [];
+    this.ssrClasses = /* @__PURE__ */ new Set();
+    this.observedOnce = false;
     this.getCategory = (cls) => parseClassName(cls, this.context).utility?.category;
     const defaultConfig = {};
     this.options = {
@@ -9303,6 +9631,44 @@ class BrowserRuntime {
     console.log("[BrowserRuntime] init");
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.adoptSsrSheets();
+  }
+  /**
+   * #268: adopt the class rules of server-rendered `<style data-barocss-ssr>` sheets in <head>, at startup
+   * (constructor and the first observe()). Each rule moves
+   * (same task, so no paint in between) into the partition its class would get if generated here, at
+   * its #254 sorted position, so a later client `sm:` rule lands before a server `lg:` rule. Its classes
+   * are never regenerated and never reclaimed. `:root`, `@property` and `@keyframes` stay in the sheet.
+   */
+  adoptSsrSheets() {
+    if (typeof document === "undefined") return;
+    const adopted = [];
+    if (!document.head) return;
+    for (const el of Array.from(document.head.querySelectorAll(`${SSR_STYLE_SELECTOR}:not([data-barocss-adopted])`))) {
+      const sheet = el.sheet;
+      if (!sheet) continue;
+      el.setAttribute("data-barocss-adopted", "");
+      const moved = [];
+      for (let i = sheet.cssRules.length - 1; i >= 0; i--) {
+        const rule2 = sheet.cssRules[i];
+        const classes = collectLeadingClasses([rule2]);
+        if (classes.size === 0) continue;
+        classes.forEach((cls) => this.ssrClasses.add(cls));
+        moved.unshift({ css: rule2.cssText, cls: classes.values().next().value });
+        sheet.deleteRule(i);
+      }
+      adopted.push(...moved);
+    }
+    if (adopted.length === 0) return;
+    this.ssrRules.push(...adopted);
+    this.insertSsrRules(adopted);
+  }
+  insertSsrRules(rules) {
+    for (const { css, cls } of rules) {
+      const category = this.getCategory(cls);
+      if (category) this.stylePartitionManager.addCategoryRule(css, category);
+      else this.stylePartitionManager.addRule(css);
+    }
   }
   injectPreflightCSS() {
     const level = this.options.config.preflight ?? true;
@@ -9370,6 +9736,7 @@ ${preflightCSS}
       results = [...existingResults, ...results];
       results.forEach((result) => this.incrementalParser.markProcessed(result.cls));
     }
+    if (this.ssrClasses.size > 0) results = results.filter((result) => !this.ssrClasses.has(result.cls));
     if (this.options.skipExisting && results.length > 0 && typeof document !== "undefined") {
       const existing = this.getExistingClasses();
       results = results.filter((result) => !existing.has(result.cls));
@@ -9377,6 +9744,7 @@ ${preflightCSS}
     if (results.length === 0) return;
     const cssRules = [];
     const rootCssRules = [];
+    const pageKeyframes = this.options.skipExisting && typeof document !== "undefined" ? (this.getExistingClasses(), this.existingKeyframes) : null;
     for (const result of results) {
       if (result.css && Array.isArray(result.cssList)) {
         cssRules.push(result);
@@ -9384,6 +9752,10 @@ ${preflightCSS}
       }
       if (result.rootCss && Array.isArray(result.rootCssList)) {
         for (const rootCss of result.rootCssList) {
+          if (pageKeyframes?.size) {
+            const kf = /^\s*@keyframes\s+([^\s{]+)/.exec(rootCss)?.[1];
+            if (kf && pageKeyframes.has(kf)) continue;
+          }
           if (!this.rootCache.has(rootCss)) {
             this.rootCache.add(rootCss);
             rootCssRules.push(rootCss);
@@ -9404,12 +9776,12 @@ ${preflightCSS}
   }
   /** #269: a class that must never be reclaimed. */
   isPermanent(cls) {
-    if (this.pinned.has(cls)) return true;
+    if (this.pinned.has(cls) || this.ssrClasses.has(cls)) return true;
     if (typeof document === "undefined") return true;
     return this.getExistingClasses().has(cls);
   }
   /**
-   * #269: delete the generated rules of classes no live element uses. Root/@property rules stay
+   * #269: delete the generated rules of classes no live element uses. Root/@property/@keyframes rules stay
    * (they are shared and harmless); a rule text another cached class still emits is kept.
    */
   reclaim(classes) {
@@ -9433,14 +9805,15 @@ ${preflightCSS}
   }
   /** Class names defined by the page's own stylesheets (BaroCSS's sheets and cross-origin sheets excluded). */
   getExistingClasses() {
-    const own = new Set(Array.from(document.querySelectorAll("style[data-barocss]"), (s) => s.sheet));
+    const own2 = new Set(Array.from(document.querySelectorAll("style[data-barocss]"), (s) => s.sheet));
     const sheets = Array.from(document.styleSheets).filter((sheet) => {
-      if (own.has(sheet)) return false;
+      if (own2.has(sheet)) return false;
       const owner = sheet.ownerNode;
       return !(owner && typeof owner.hasAttribute === "function" && (owner.hasAttribute("data-barocss") || (owner.id || "").startsWith(this.options.styleId)));
     });
     if (this.existing && sheets.length === this.existingSheetCount) return this.existing;
     const out = /* @__PURE__ */ new Set();
+    const keyframes2 = /* @__PURE__ */ new Set();
     for (const sheet of sheets) {
       let rules;
       try {
@@ -9449,7 +9822,9 @@ ${preflightCSS}
         continue;
       }
       collectLeadingClasses(rules, out);
+      collectKeyframeNames(rules, keyframes2);
     }
+    this.existingKeyframes = keyframes2;
     this.existing = out;
     this.existingSheetCount = sheets.length;
     return out;
@@ -9458,6 +9833,10 @@ ${preflightCSS}
    * MutationObserver instance method to automatically call addClass when class attributes change in DOM
    */
   observe(root = document.body, options) {
+    if (!this.observedOnce) {
+      this.observedOnce = true;
+      this.adoptSsrSheets();
+    }
     return this.changeDetector.observe(root, options);
   }
   normalizeClasses(classes) {
@@ -9509,6 +9888,7 @@ ${preflightCSS}
     this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.insertSsrRules(this.ssrRules);
   }
   reset() {
     if (this.isDestroyed) return;
@@ -9519,6 +9899,7 @@ ${preflightCSS}
     this.stylePartitionManager = new StylePartitionManager(this.getInsertionPoint(), this.options.maxRulesPerPartition, `${this.options.styleId}-partition`, this.getCategory);
     this.injectPreflightCSS();
     this.ensureCssVars();
+    this.insertSsrRules(this.ssrRules);
   }
   updateConfig(newConfig) {
     if (this.isDestroyed) return;
@@ -9661,6 +10042,7 @@ export {
   BrowserRuntime,
   ChangeDetector,
   LAYER_ORDER,
+  SSR_STYLE_SELECTOR,
   StylePartitionManager,
   baroBoot,
   baroStart,