@barocss/kit 0.7.0 → 0.8.0

package/dist/index.cjs

@@ -251,6 +251,7 @@ function getUtility(ctx) {
 const modifierRegistry = [];
 function staticModifier(name, selectors, options = {}, ctx) {
   registerModifier({
+    name,
     match: (mod) => mod === name,
     modifySelector: ({ ..._rest }) => {
       return selectors.map((sel) => ({
@@ -1217,6 +1218,8 @@ function themeToCssVarsAll(theme) {
     ...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
   };
@@ -2108,7 +2111,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);
 }
@@ -2411,7 +2414,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);
 }
@@ -3490,6 +3493,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"],
@@ -3500,6 +3506,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,
@@ -3518,6 +3526,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"],
@@ -3534,13 +3545,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"
   });
@@ -3571,6 +3584,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, opacity) => opacity ? [decl(key, `color-mix(in oklab, ${color} ${opacity.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", [
@@ -3708,53 +3755,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, opacity, render = (l) => l.join(", ")) {
+  const a = parseAlpha(opacity);
+  if (opacity && !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, opacity, ref = color) {
+  const key = `--baro-${layer}-color`;
+  if (color === "inherit") return [decl(key, "inherit")];
+  const a = parseAlpha(opacity);
+  if (opacity && !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",
@@ -3839,57 +3932,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, opacity, named, keepNamed = false) {
+  const decls = shadowValueDecls("drop-shadow", "--baro-drop-shadow-size", value, opacity, wrapDropShadow);
+  if (!decls) return null;
+  const composed = named !== void 0 && (!opacity || 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 opacity = 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, opacity, literal, true) ?? [];
+  },
+  category: "effects"
 });
+const dropShadowColor = (color, opacity, ref) => {
+  const decls = shadowColorDecls("drop-shadow", color, opacity, 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 opacity = extra?.opacity;
+    const keyword = token.arbitrary ? void 0 : { inherit: "inherit", current: "currentcolor", transparent: "transparent" }[extra?.realThemeValue ?? value];
+    if (keyword) return dropShadowColor(keyword, opacity);
+    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);
     }
-    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, opacity, `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)",
@@ -4259,166 +4363,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, opacity, realThemeValue) {
-  let fallbackColor = main;
-  const colorVar = `var(--color-${realThemeValue})`;
-  let colorValue = colorVar;
-  if (opacity) {
-    colorValue = `color-mix(in oklab, color-mix(in oklab, ${colorVar} ${opacity}%, transparent) var(--baro-shadow-alpha),transparent)`;
-    if (parseColor(main)) {
-      if (main.startsWith("#")) {
-        const opacityValue = Math.round(Number(opacity) / 100 * 255);
-        fallbackColor = `${main}${opacityValue.toString(16).padStart(2, "0")}`;
-      } else {
-        fallbackColor = `color-mix(in oklab, ${main} ${opacity}%, 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, opacity) {
+  const decls = shadowValueDecls(layer, `--baro-${layer}`, value, opacity);
+  if (!decls) return null;
+  return [ringShadowProperties(), shadowColorProperties(layer), ...decls, 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;
 }
-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 opacity = extra?.opacity;
-    const realThemeValue = extra?.realThemeValue;
-    if (realThemeValue) {
-      return createShadowThemeColor(
-        "--baro-shadow-color",
-        main,
-        opacity,
-        realThemeValue
-      );
-    }
-    if (main.startsWith("color:")) {
-      const cp = main.replace("color:", "");
-      if (opacity) {
-        return [
-          decl(
-            "--baro-shadow-color",
-            `color-mix(in oklab, var(${cp}) ${opacity}%, transparent)`
-          )
-        ];
-      }
-      return [decl("--baro-shadow-color", `var(${cp})`)];
-    }
-    if (token.arbitrary) {
-      if (parseColor(main)) {
-        if (opacity) {
-          return [
-            decl(
-              "--baro-shadow-color",
-              `color-mix(in oklab, ${main} ${opacity}%, 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, opacity, token, realThemeValue) {
+  const keyword = token.arbitrary ? void 0 : KEYWORD_COLORS[realThemeValue ?? main];
+  if (keyword) return shadowColorDecls(layer, keyword, opacity);
+  if (realThemeValue) return shadowColorDecls(layer, main, opacity, `var(--color-${realThemeValue})`);
+  if (main.startsWith("color:")) return shadowColorDecls(layer, `var(${main.slice(6)})`, opacity);
+  if (token.arbitrary && parseColor(main)) return shadowColorDecls(layer, main, opacity);
+  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 opacity = extra?.opacity;
+      const named = !extra?.realThemeValue && !token.arbitrary ? namedBoxShadow(layer, value, opacity) : null;
+      if (named) return named;
+      const color = layerColor(layer, value, opacity, token, extra?.realThemeValue);
+      if (color !== void 0) return color;
+      if (token.arbitrary) return boxShadowLayer(layer, layer === "inset-shadow" ? insetEach(value) : value, opacity);
+      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, opacity) => {
+  const decls = shadowValueDecls("text-shadow", "text-shadow", value, opacity);
+  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 opacity = extra?.opacity;
-    const realThemeValue = extra?.realThemeValue;
-    if (realThemeValue) {
-      return createShadowThemeColor(
-        "--baro-inset-shadow-color",
-        main,
-        opacity,
-        realThemeValue
-      );
-    }
-    if (main.startsWith("color:")) {
-      const cp = main.replace("color:", "");
-      let colorValue = `var(${cp})`;
-      if (opacity) {
-        colorValue = `color-mix(in oklab, var(${cp}) ${opacity}%, transparent)`;
-      }
-      return [decl("--baro-inset-shadow-color", colorValue)];
-    }
-    if (token.arbitrary) {
-      if (parseColor(main)) {
-        let colorValue = main;
-        if (opacity) {
-          colorValue = `color-mix(in oklab, ${main} ${opacity}%, 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, opacity);
     }
+    const color = layerColor("text-shadow", value, opacity, token, extra?.realThemeValue);
+    if (color !== void 0) return color && [textShadowProperties(), ...color];
+    if (token.arbitrary) return textShadowValue(value, opacity);
     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"],
@@ -4961,12 +5018,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"
 });
@@ -5051,6 +5111,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"],
@@ -5146,6 +5211,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" });
@@ -5420,6 +5494,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;
@@ -5439,6 +5515,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;
@@ -5641,6 +5719,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"],
@@ -5664,6 +5744,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"],
@@ -5989,6 +6071,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" });
@@ -6019,13 +6136,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:", "")})`)];
     }
@@ -6324,6 +6443,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"),
@@ -6655,6 +6810,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"]],
@@ -6674,6 +6834,7 @@ const withBorderStyle = (props, width) => [
   functionalUtility({
     name,
     themeKeys: ["borderWidth", "colors"],
+    supportsOpacity: true,
     supportsArbitrary: true,
     supportsCustomProperty: true,
     handleBareValue: ({ value }) => {
@@ -7654,9 +7815,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 {
@@ -7825,17 +7987,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);
@@ -7975,7 +8137,7 @@ functionalModifier(
   }
 );
 functionalModifier(
-  (mod) => /^not-/.test(mod),
+  (mod) => /^not-/.test(mod) && !mod.startsWith("not-@"),
   ({ selector, mod }) => {
     const m = /^not-(.+)$/.exec(mod.type);
     return {
@@ -8042,7 +8204,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("[")) {