@tenphi/tasty 0.0.0-snapshot.c8bdaeb → 0.0.0-snapshot.c8c7b2a

package/dist/styles/scrollbar.js

@@ -1,112 +1,51 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { makeEmptyDetails } from "../parser/types.js";
 import { parseStyle } from "../utils/styles.js";
-
+import { warn } from "../utils/warnings.js";
 //#region src/styles/scrollbar.ts
 /**
-* Creates cross-browser compatible scrollbar styles
+* Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,
+* and `scrollbar-gutter`.
+*
+* Width values: `thin` (default), `auto`, `none`
+* Modifiers: `stable`, `both-edges`, `always`
 *
-* Supports both Firefox (scrollbar-width, scrollbar-color) and
-* WebKit/Chromium browsers (::-webkit-scrollbar)
+* Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands
+* in `values` rather than `mods`. Both locations are checked for robustness.
 */
 function scrollbarStyle({ scrollbar, overflow }) {
-	if (!scrollbar && scrollbar !== 0) return;
-	const value = scrollbar === true || scrollbar === "" ? "thin" : scrollbar;
-	const { mods, colors, values } = parseStyle(String(value)).groups[0] ?? makeEmptyDetails();
-	const style = {};
-	function getNested(key) {
-		const v = style[key];
-		if (v && typeof v === "object") return v;
-		return {};
-	}
+	if (!scrollbar) return null;
+	if (typeof scrollbar === "string" && CSS_WIDE_KEYWORDS.has(scrollbar)) return {
+		"scrollbar-width": scrollbar,
+		"scrollbar-color": scrollbar
+	};
+	const { mods, colors, values } = parseStyle(String(scrollbar === true ? "thin" : scrollbar)).groups[0] ?? makeEmptyDetails();
 	const defaultThumbColor = "var(--scrollbar-thumb-color)";
 	const defaultTrackColor = "var(--scrollbar-track-color, transparent)";
-	style["scrollbar-color"] = `${defaultThumbColor} transparent`;
-	const sizeValue = values[0] || "8px";
-	if (mods.includes("thin")) style["scrollbar-width"] = "thin";
-	else if (mods.includes("none")) {
+	const style = {};
+	if (mods.includes("none")) {
+		const ignored = [
+			...mods.filter((m) => m !== "none"),
+			...values,
+			...colors
+		];
+		if (ignored.length) warn(`scrollbar="none" hides the scrollbar; other tokens are ignored: ${ignored.join(", ")}`);
 		style["scrollbar-width"] = "none";
-		delete style["scrollbar-color"];
-		style["&::-webkit-scrollbar"] = {
-			width: "0px",
-			height: "0px",
-			display: "none"
-		};
 		return style;
-	} else if (mods.includes("auto")) style["scrollbar-width"] = "auto";
-	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
-	if (sizeValue) style["&::-webkit-scrollbar"] = {
-		...getNested("&::-webkit-scrollbar"),
-		width: sizeValue,
-		height: sizeValue
-	};
-	const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;
-	const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;
-	const cornerColor = colors && colors[2] ? colors[2] : trackColor;
-	if (colors && colors.length) {
-		style["scrollbar-color"] = `${thumbColor} ${trackColor}`;
-		const webkitScrollbar = getNested("&::-webkit-scrollbar");
-		webkitScrollbar["background"] = trackColor;
-		style["&::-webkit-scrollbar"] = webkitScrollbar;
-		style["&::-webkit-scrollbar-track"] = {
-			...getNested("&::-webkit-scrollbar-track"),
-			background: trackColor
-		};
-		style["&::-webkit-scrollbar-thumb"] = {
-			...getNested("&::-webkit-scrollbar-thumb"),
-			background: thumbColor
-		};
-		style["&::-webkit-scrollbar-corner"] = {
-			...getNested("&::-webkit-scrollbar-corner"),
-			background: cornerColor
-		};
 	}
+	if (mods.includes("auto") || values.includes("auto")) style["scrollbar-width"] = "auto";
+	else style["scrollbar-width"] = "thin";
+	style["scrollbar-color"] = `${colors?.[0] || defaultThumbColor} ${colors?.[1] || defaultTrackColor}`;
+	if (mods.includes("stable") || mods.includes("both-edges")) style["scrollbar-gutter"] = mods.includes("both-edges") ? "stable both-edges" : "stable";
 	if (mods.includes("always")) {
-		style["overflow"] = overflow || "scroll";
-		if (!style["scrollbar-gutter"]) style["scrollbar-gutter"] = "stable";
-		const alwaysScrollbar = getNested("&::-webkit-scrollbar");
-		alwaysScrollbar["display"] = "block";
-		style["&::-webkit-scrollbar"] = alwaysScrollbar;
-	}
-	if (mods.includes("styled")) {
-		const baseTransition = [
-			"background var(--transition)",
-			"border-radius var(--transition)",
-			"box-shadow var(--transition)",
-			"width var(--transition)",
-			"height var(--transition)",
-			"border var(--transition)"
-		].join(", ");
-		style["scrollbar-width"] = style["scrollbar-width"] || "thin";
-		style["scrollbar-color"] = style["scrollbar-color"] || `${defaultThumbColor} ${defaultTrackColor}`;
-		style["&::-webkit-scrollbar"] = {
-			width: sizeValue,
-			height: sizeValue,
-			transition: baseTransition,
-			background: defaultTrackColor,
-			...getNested("&::-webkit-scrollbar")
-		};
-		style["&::-webkit-scrollbar-thumb"] = {
-			"border-radius": "8px",
-			"min-height": "24px",
-			transition: baseTransition,
-			background: defaultThumbColor,
-			...getNested("&::-webkit-scrollbar-thumb")
-		};
-		style["&::-webkit-scrollbar-track"] = {
-			background: defaultTrackColor,
-			transition: baseTransition,
-			...getNested("&::-webkit-scrollbar-track")
-		};
-		style["&::-webkit-scrollbar-corner"] = {
-			background: defaultTrackColor,
-			transition: baseTransition,
-			...getNested("&::-webkit-scrollbar-corner")
-		};
+		const effectiveOverflow = overflow || "scroll";
+		style["overflow"] = effectiveOverflow;
+		if (!style["scrollbar-gutter"] && (effectiveOverflow === "scroll" || effectiveOverflow === "auto")) style["scrollbar-gutter"] = "stable";
 	}
 	return style;
 }
 scrollbarStyle.__lookupStyles = ["scrollbar", "overflow"];
-
 //#endregion
 export { scrollbarStyle };
+
 //# sourceMappingURL=scrollbar.js.map

package/dist/styles/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean | number;\n  overflow?: string;\n}\n\n/**\n * Creates cross-browser compatible scrollbar styles\n *\n * Supports both Firefox (scrollbar-width, scrollbar-color) and\n * WebKit/Chromium browsers (::-webkit-scrollbar)\n */\nexport function scrollbarStyle({ scrollbar, overflow }: ScrollbarStyleProps) {\n  // Check if scrollbar is defined\n  if (!scrollbar && scrollbar !== 0) return;\n\n  // Support true as alias for thin\n  const value = scrollbar === true || scrollbar === '' ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n  type NestedStyle = Record<string, string>;\n  type ScrollbarStyleMap = Record<string, string | NestedStyle>;\n  const style: ScrollbarStyleMap = {};\n\n  function getNested(key: string): NestedStyle {\n    const v = style[key];\n    if (v && typeof v === 'object') return v;\n    return {};\n  }\n\n  // Default colors for scrollbar\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  // Setup default Firefox scrollbar style\n  style['scrollbar-color'] = `${defaultThumbColor} transparent`;\n\n  // Default scrollbar size\n  const defaultSize = '8px';\n  const sizeValue = values[0] || defaultSize;\n\n  // Process modifiers\n  if (mods.includes('thin')) {\n    style['scrollbar-width'] = 'thin';\n  } else if (mods.includes('none')) {\n    style['scrollbar-width'] = 'none';\n    // Remove scrollbar-color as it's not needed when scrollbar is hidden\n    delete style['scrollbar-color'];\n    // Also hide WebKit scrollbars\n    style['&::-webkit-scrollbar'] = {\n      width: '0px',\n      height: '0px',\n      display: 'none',\n    };\n\n    return style;\n  } else if (mods.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  }\n\n  // Handle scrollbar gutter behavior\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    // scrollbar-gutter is supported in newer browsers only\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  // Custom size setup for WebKit\n  if (sizeValue) {\n    style['&::-webkit-scrollbar'] = {\n      ...getNested('&::-webkit-scrollbar'),\n      width: sizeValue,\n      height: sizeValue,\n    };\n  }\n\n  // Extract colors (support up to 3: thumb, track, corner)\n  // These will be used in various places throughout the function\n  const thumbColor = colors && colors[0] ? colors[0] : defaultThumbColor;\n  const trackColor = colors && colors[1] ? colors[1] : defaultTrackColor;\n  const cornerColor = colors && colors[2] ? colors[2] : trackColor;\n\n  // Apply colors if they are specified\n  if (colors && colors.length) {\n    // Firefox\n    style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n    // WebKit - always set these for consistency\n    const webkitScrollbar = getNested('&::-webkit-scrollbar');\n    webkitScrollbar['background'] = trackColor;\n    style['&::-webkit-scrollbar'] = webkitScrollbar;\n\n    style['&::-webkit-scrollbar-track'] = {\n      ...getNested('&::-webkit-scrollbar-track'),\n      background: trackColor,\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      ...getNested('&::-webkit-scrollbar-thumb'),\n      background: thumbColor,\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      ...getNested('&::-webkit-scrollbar-corner'),\n      background: cornerColor,\n    };\n  }\n\n  // Handle 'always' mode: force scrollbars to show\n  if (mods.includes('always')) {\n    style['overflow'] = overflow || 'scroll';\n\n    // Use auto for WebKit browsers since they don't support 'always'\n    // This is closer to the expected behavior\n    if (!style['scrollbar-gutter']) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n\n    // Ensure scrollbars appear in WebKit even with little content\n    const alwaysScrollbar = getNested('&::-webkit-scrollbar');\n    alwaysScrollbar['display'] = 'block';\n    style['&::-webkit-scrollbar'] = alwaysScrollbar;\n  }\n\n  // Enhanced 'styled' mode with better transitions and appearance\n  if (mods.includes('styled')) {\n    const baseTransition = [\n      'background var(--transition)',\n      'border-radius var(--transition)',\n      'box-shadow var(--transition)',\n      'width var(--transition)',\n      'height var(--transition)',\n      'border var(--transition)',\n    ].join(', ');\n\n    // Firefox\n    style['scrollbar-width'] = style['scrollbar-width'] || 'thin';\n    style['scrollbar-color'] =\n      style['scrollbar-color'] || `${defaultThumbColor} ${defaultTrackColor}`;\n\n    // WebKit\n    style['&::-webkit-scrollbar'] = {\n      width: sizeValue,\n      height: sizeValue,\n      transition: baseTransition,\n      background: defaultTrackColor,\n      ...getNested('&::-webkit-scrollbar'),\n    };\n\n    style['&::-webkit-scrollbar-thumb'] = {\n      'border-radius': '8px',\n      'min-height': '24px',\n      transition: baseTransition,\n      background: defaultThumbColor,\n      ...getNested('&::-webkit-scrollbar-thumb'),\n    };\n\n    style['&::-webkit-scrollbar-track'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...getNested('&::-webkit-scrollbar-track'),\n    };\n\n    style['&::-webkit-scrollbar-corner'] = {\n      background: defaultTrackColor,\n      transition: baseTransition,\n      ...getNested('&::-webkit-scrollbar-corner'),\n    };\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,eAAe,EAAE,WAAW,YAAiC;AAE3E,KAAI,CAAC,aAAa,cAAc,EAAG;CAGnC,MAAM,QAAQ,cAAc,QAAQ,cAAc,KAAK,SAAS;CAEhE,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OAAO,MAAM,CAAC,CACA,OAAO,MAAM,kBAAkB;CAG1E,MAAM,QAA2B,EAAE;CAEnC,SAAS,UAAU,KAA0B;EAC3C,MAAM,IAAI,MAAM;AAChB,MAAI,KAAK,OAAO,MAAM,SAAU,QAAO;AACvC,SAAO,EAAE;;CAIX,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;AAG1B,OAAM,qBAAqB,GAAG,kBAAkB;CAIhD,MAAM,YAAY,OAAO,MADL;AAIpB,KAAI,KAAK,SAAS,OAAO,CACvB,OAAM,qBAAqB;UAClB,KAAK,SAAS,OAAO,EAAE;AAChC,QAAM,qBAAqB;AAE3B,SAAO,MAAM;AAEb,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,SAAS;GACV;AAED,SAAO;YACE,KAAK,SAAS,OAAO,CAC9B,OAAM,qBAAqB;AAI7B,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CAExD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAIN,KAAI,UACF,OAAM,0BAA0B;EAC9B,GAAG,UAAU,uBAAuB;EACpC,OAAO;EACP,QAAQ;EACT;CAKH,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,aAAa,UAAU,OAAO,KAAK,OAAO,KAAK;CACrD,MAAM,cAAc,UAAU,OAAO,KAAK,OAAO,KAAK;AAGtD,KAAI,UAAU,OAAO,QAAQ;AAE3B,QAAM,qBAAqB,GAAG,WAAW,GAAG;EAG5C,MAAM,kBAAkB,UAAU,uBAAuB;AACzD,kBAAgB,gBAAgB;AAChC,QAAM,0BAA0B;AAEhC,QAAM,gCAAgC;GACpC,GAAG,UAAU,6BAA6B;GAC1C,YAAY;GACb;AAED,QAAM,gCAAgC;GACpC,GAAG,UAAU,6BAA6B;GAC1C,YAAY;GACb;AAED,QAAM,iCAAiC;GACrC,GAAG,UAAU,8BAA8B;GAC3C,YAAY;GACb;;AAIH,KAAI,KAAK,SAAS,SAAS,EAAE;AAC3B,QAAM,cAAc,YAAY;AAIhC,MAAI,CAAC,MAAM,oBACT,OAAM,sBAAsB;EAI9B,MAAM,kBAAkB,UAAU,uBAAuB;AACzD,kBAAgB,aAAa;AAC7B,QAAM,0BAA0B;;AAIlC,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,iBAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,KAAK,KAAK;AAGZ,QAAM,qBAAqB,MAAM,sBAAsB;AACvD,QAAM,qBACJ,MAAM,sBAAsB,GAAG,kBAAkB,GAAG;AAGtD,QAAM,0BAA0B;GAC9B,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,uBAAuB;GACrC;AAED,QAAM,gCAAgC;GACpC,iBAAiB;GACjB,cAAc;GACd,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,6BAA6B;GAC3C;AAED,QAAM,gCAAgC;GACpC,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,6BAA6B;GAC3C;AAED,QAAM,iCAAiC;GACrC,YAAY;GACZ,YAAY;GACZ,GAAG,UAAU,8BAA8B;GAC5C;;AAGH,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}
+{"version":3,"file":"scrollbar.js","names":[],"sources":["../../src/styles/scrollbar.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\nimport { warn } from '../utils/warnings';\n\ninterface ScrollbarStyleProps {\n  scrollbar?: string | boolean;\n  overflow?: string;\n}\n\n/**\n * Standard CSS scrollbar styling via `scrollbar-width`, `scrollbar-color`,\n * and `scrollbar-gutter`.\n *\n * Width values: `thin` (default), `auto`, `none`\n * Modifiers: `stable`, `both-edges`, `always`\n *\n * Note: `auto` is classified as a VALUE_KEYWORD by the parser, so it lands\n * in `values` rather than `mods`. Both locations are checked for robustness.\n */\nexport function scrollbarStyle({\n  scrollbar,\n  overflow,\n}: ScrollbarStyleProps): Record<string, string> | null {\n  if (!scrollbar) return null;\n\n  if (typeof scrollbar === 'string' && CSS_WIDE_KEYWORDS.has(scrollbar)) {\n    return {\n      'scrollbar-width': scrollbar,\n      'scrollbar-color': scrollbar,\n    };\n  }\n\n  // `true` is treated as `thin` (empty string is falsy, caught by the guard above)\n  const value = scrollbar === true ? 'thin' : scrollbar;\n  const processed = parseStyle(String(value));\n  const { mods, colors, values } = processed.groups[0] ?? makeEmptyDetails();\n\n  const defaultThumbColor = 'var(--scrollbar-thumb-color)';\n  const defaultTrackColor = 'var(--scrollbar-track-color, transparent)';\n\n  const style: Record<string, string> = {};\n\n  if (mods.includes('none')) {\n    const ignored = [...mods.filter((m) => m !== 'none'), ...values, ...colors];\n\n    if (ignored.length) {\n      warn(\n        `scrollbar=\"none\" hides the scrollbar; other tokens are ignored: ${ignored.join(', ')}`,\n      );\n    }\n\n    style['scrollbar-width'] = 'none';\n\n    return style;\n  }\n\n  // `thin` is the default — accepted as a value for readability but always\n  // the fallback when neither `auto` nor `none` is specified.\n  // `auto` is a VALUE_KEYWORD in the parser, so it may land in `values`.\n  if (mods.includes('auto') || values.includes('auto')) {\n    style['scrollbar-width'] = 'auto';\n  } else {\n    style['scrollbar-width'] = 'thin';\n  }\n\n  const thumbColor = colors?.[0] || defaultThumbColor;\n  const trackColor = colors?.[1] || defaultTrackColor;\n  style['scrollbar-color'] = `${thumbColor} ${trackColor}`;\n\n  if (mods.includes('stable') || mods.includes('both-edges')) {\n    style['scrollbar-gutter'] = mods.includes('both-edges')\n      ? 'stable both-edges'\n      : 'stable';\n  }\n\n  if (mods.includes('always')) {\n    const effectiveOverflow = overflow || 'scroll';\n    style['overflow'] = effectiveOverflow;\n\n    // scrollbar-gutter only applies with scroll/auto overflow\n    if (\n      !style['scrollbar-gutter'] &&\n      (effectiveOverflow === 'scroll' || effectiveOverflow === 'auto')\n    ) {\n      style['scrollbar-gutter'] = 'stable';\n    }\n  }\n\n  return style;\n}\n\nscrollbarStyle.__lookupStyles = ['scrollbar', 'overflow'];\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,eAAe,EAC7B,WACA,YACqD;AACrD,KAAI,CAAC,UAAW,QAAO;AAEvB,KAAI,OAAO,cAAc,YAAY,kBAAkB,IAAI,UAAU,CACnE,QAAO;EACL,mBAAmB;EACnB,mBAAmB;EACpB;CAMH,MAAM,EAAE,MAAM,QAAQ,WADJ,WAAW,OADf,cAAc,OAAO,SAAS,UACF,CAAC,CACA,OAAO,MAAM,kBAAkB;CAE1E,MAAM,oBAAoB;CAC1B,MAAM,oBAAoB;CAE1B,MAAM,QAAgC,EAAE;AAExC,KAAI,KAAK,SAAS,OAAO,EAAE;EACzB,MAAM,UAAU;GAAC,GAAG,KAAK,QAAQ,MAAM,MAAM,OAAO;GAAE,GAAG;GAAQ,GAAG;GAAO;AAE3E,MAAI,QAAQ,OACV,MACE,mEAAmE,QAAQ,KAAK,KAAK,GACtF;AAGH,QAAM,qBAAqB;AAE3B,SAAO;;AAMT,KAAI,KAAK,SAAS,OAAO,IAAI,OAAO,SAAS,OAAO,CAClD,OAAM,qBAAqB;KAE3B,OAAM,qBAAqB;AAK7B,OAAM,qBAAqB,GAFR,SAAS,MAAM,kBAEO,GADtB,SAAS,MAAM;AAGlC,KAAI,KAAK,SAAS,SAAS,IAAI,KAAK,SAAS,aAAa,CACxD,OAAM,sBAAsB,KAAK,SAAS,aAAa,GACnD,sBACA;AAGN,KAAI,KAAK,SAAS,SAAS,EAAE;EAC3B,MAAM,oBAAoB,YAAY;AACtC,QAAM,cAAc;AAGpB,MACE,CAAC,MAAM,wBACN,sBAAsB,YAAY,sBAAsB,QAEzD,OAAM,sBAAsB;;AAIhC,QAAO;;AAGT,eAAe,iBAAiB,CAAC,aAAa,WAAW"}

package/dist/styles/shadow.d.ts

@@ -5,7 +5,7 @@ declare function shadowStyle({
   shadow?: string | boolean;
 }): {
   'box-shadow': string;
-} | undefined;
+} | null;
 declare namespace shadowStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/shadow.js

@@ -1,6 +1,6 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { makeEmptyDetails } from "../parser/types.js";
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/shadow.ts
 function toBoxShadow(shadow) {
 	const { values, mods, colors } = parseStyle(shadow).groups[0] ?? makeEmptyDetails();
@@ -13,12 +13,13 @@ function toBoxShadow(shadow) {
 	].join(" ");
 }
 function shadowStyle({ shadow }) {
-	if (!shadow) return;
+	if (!shadow) return null;
 	if (shadow === true) shadow = "var(--shadow)";
+	if (CSS_WIDE_KEYWORDS.has(shadow)) return { "box-shadow": shadow };
 	return { "box-shadow": shadow.split(",").map(toBoxShadow).join(",") };
 }
 shadowStyle.__lookupStyles = ["shadow"];
-
 //#endregion
 export { shadowStyle };
+
 //# sourceMappingURL=shadow.js.map

package/dist/styles/shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"shadow.js","names":[],"sources":["../../src/styles/shadow.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nfunction toBoxShadow(shadow: string): string {\n  const processed = parseStyle(shadow);\n  const { values, mods, colors } = processed.groups[0] ?? makeEmptyDetails();\n  const mod = mods[0] || '';\n  const shadowColor = (colors && colors[0]) ?? '';\n\n  return [mod, ...values, shadowColor].join(' ');\n}\n\nexport function shadowStyle({ shadow }: { shadow?: string | boolean }) {\n  if (!shadow) return;\n\n  if (shadow === true) shadow = 'var(--shadow)';\n\n  return {\n    'box-shadow': shadow.split(',').map(toBoxShadow).join(','),\n  };\n}\n\nshadowStyle.__lookupStyles = ['shadow'];\n"],"mappings":";;;;AAGA,SAAS,YAAY,QAAwB;CAE3C,MAAM,EAAE,QAAQ,MAAM,WADJ,WAAW,OAAO,CACO,OAAO,MAAM,kBAAkB;CAC1E,MAAM,MAAM,KAAK,MAAM;CACvB,MAAM,eAAe,UAAU,OAAO,OAAO;AAE7C,QAAO;EAAC;EAAK,GAAG;EAAQ;EAAY,CAAC,KAAK,IAAI;;AAGhD,SAAgB,YAAY,EAAE,UAAyC;AACrE,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;AAE9B,QAAO,EACL,cAAc,OAAO,MAAM,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,EAC3D;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}
+{"version":3,"file":"shadow.js","names":[],"sources":["../../src/styles/shadow.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { makeEmptyDetails } from '../parser/types';\nimport { parseStyle } from '../utils/styles';\n\nfunction toBoxShadow(shadow: string): string {\n  const processed = parseStyle(shadow);\n  const { values, mods, colors } = processed.groups[0] ?? makeEmptyDetails();\n  const mod = mods[0] || '';\n  const shadowColor = (colors && colors[0]) ?? '';\n\n  return [mod, ...values, shadowColor].join(' ');\n}\n\nexport function shadowStyle({ shadow }: { shadow?: string | boolean }) {\n  if (!shadow) return null;\n\n  if (shadow === true) shadow = 'var(--shadow)';\n\n  if (CSS_WIDE_KEYWORDS.has(shadow)) {\n    return { 'box-shadow': shadow };\n  }\n\n  return {\n    'box-shadow': shadow.split(',').map(toBoxShadow).join(','),\n  };\n}\n\nshadowStyle.__lookupStyles = ['shadow'];\n"],"mappings":";;;;AAIA,SAAS,YAAY,QAAwB;CAE3C,MAAM,EAAE,QAAQ,MAAM,WADJ,WAAW,OAAO,CACO,OAAO,MAAM,kBAAkB;CAC1E,MAAM,MAAM,KAAK,MAAM;CACvB,MAAM,eAAe,UAAU,OAAO,OAAO;AAE7C,QAAO;EAAC;EAAK,GAAG;EAAQ;EAAY,CAAC,KAAK,IAAI;;AAGhD,SAAgB,YAAY,EAAE,UAAyC;AACrE,KAAI,CAAC,OAAQ,QAAO;AAEpB,KAAI,WAAW,KAAM,UAAS;AAE9B,KAAI,kBAAkB,IAAI,OAAO,CAC/B,QAAO,EAAE,cAAc,QAAQ;AAGjC,QAAO,EACL,cAAc,OAAO,MAAM,IAAI,CAAC,IAAI,YAAY,CAAC,KAAK,IAAI,EAC3D;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/shared.js

@@ -0,0 +1,17 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
+//#region src/styles/shared.ts
+/**
+* If the group contains exactly one value that is a CSS-wide keyword
+* and no colors, return the keyword. Otherwise null.
+*
+* Direction mods (top/right/bottom/left) may coexist with the keyword
+* for directional application like `padding="inherit top"`.
+*/
+function extractCSSWideKeyword(group) {
+	if (group.values.length !== 1 || group.colors.length > 0) return null;
+	return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;
+}
+//#endregion
+export { extractCSSWideKeyword };
+
+//# sourceMappingURL=shared.js.map

package/dist/styles/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","names":[],"sources":["../../src/styles/shared.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport type { StyleDetails } from '../parser/types';\n\n/**\n * If the group contains exactly one value that is a CSS-wide keyword\n * and no colors, return the keyword. Otherwise null.\n *\n * Direction mods (top/right/bottom/left) may coexist with the keyword\n * for directional application like `padding=\"inherit top\"`.\n */\nexport function extractCSSWideKeyword(group: StyleDetails): string | null {\n  if (group.values.length !== 1 || group.colors.length > 0) return null;\n  return CSS_WIDE_KEYWORDS.has(group.values[0]) ? group.values[0] : null;\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,sBAAsB,OAAoC;AACxE,KAAI,MAAM,OAAO,WAAW,KAAK,MAAM,OAAO,SAAS,EAAG,QAAO;AACjE,QAAO,kBAAkB,IAAI,MAAM,OAAO,GAAG,GAAG,MAAM,OAAO,KAAK"}

package/dist/styles/transition.d.ts

@@ -5,7 +5,7 @@ declare function transitionStyle({
   transition?: string;
 }): {
   transition: string;
-} | undefined;
+} | null;
 declare namespace transitionStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/transition.js

@@ -1,5 +1,5 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/transition.ts
 const SECOND_FILL_COLOR_PROPERTY = "--tasty-second-fill-color";
 const MAP = {
@@ -99,17 +99,18 @@ function isEasing(token) {
 	return EASING_KEYWORDS.has(token) || token.startsWith("cubic-bezier(") || token.startsWith("steps(") || token.startsWith("linear(");
 }
 function getTiming(name) {
-	return `var(--${name}-transition, var(--transition))`;
+	return `var(${name.startsWith("--") ? `${name}-transition` : `--${name}-transition`}, var(--transition))`;
 }
 function transitionStyle({ transition }) {
-	if (!transition) return;
+	if (!transition) return null;
+	if (CSS_WIDE_KEYWORDS.has(transition)) return { transition };
 	const processed = parseStyle(transition);
 	const tokens = [];
 	processed.groups.forEach((g, idx) => {
 		tokens.push(...g.all);
 		if (idx < processed.groups.length - 1) tokens.push(",");
 	});
-	if (tokens.length === 0) return;
+	if (tokens.length === 0) return null;
 	let tempTransition = [];
 	const transitions = [];
 	tokens.forEach((token) => {
@@ -152,7 +153,7 @@ function transitionStyle({ transition }) {
 	}).join(", ") };
 }
 transitionStyle.__lookupStyles = ["transition"];
-
 //#endregion
 export { transitionStyle };
+
 //# sourceMappingURL=transition.js.map

package/dist/styles/transition.js.map

@@ -1 +1 @@
-{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP: Record<string, string[]> = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nconst EASING_KEYWORDS = new Set([\n  'ease',\n  'ease-in',\n  'ease-out',\n  'ease-in-out',\n  'linear',\n  'step-start',\n  'step-end',\n]);\n\nfunction isEasing(token: string): boolean {\n  return (\n    EASING_KEYWORDS.has(token) ||\n    token.startsWith('cubic-bezier(') ||\n    token.startsWith('steps(') ||\n    token.startsWith('linear(')\n  );\n}\n\nfunction getTiming(name: string): string {\n  return `var(--${name}-transition, var(--transition))`;\n}\n\ntype TransitionEntry = [\n  name: string,\n  easing: string | undefined,\n  timing: string | undefined,\n  delay: string | undefined,\n];\n\nexport function transitionStyle({ transition }: { transition?: string }) {\n  if (!transition) return;\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (tokens.length === 0) return;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition.length) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition.length) {\n    transitions.push(tempTransition);\n  }\n\n  const map: Record<string, TransitionEntry> = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n\n    let timing: string | undefined;\n    let easing: string | undefined;\n    let delay: string | undefined;\n\n    if (transition[1] && isEasing(transition[1])) {\n      easing = transition[1];\n      delay = transition[2];\n    } else {\n      timing = transition[1];\n      easing = transition[2];\n      delay = transition[3];\n    }\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":"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"}
+{"version":3,"file":"transition.js","names":[],"sources":["../../src/styles/transition.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { parseStyle } from '../utils/styles';\n\nconst SECOND_FILL_COLOR_PROPERTY = '--tasty-second-fill-color';\n\nconst MAP: Record<string, string[]> = {\n  fade: ['mask', 'mask-composite'],\n  translate: ['transform', 'translate'],\n  rotate: ['transform', 'rotate'],\n  scale: ['transform', 'scale'],\n  fill: ['background-color', 'background-image', SECOND_FILL_COLOR_PROPERTY],\n  image: [\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  background: [\n    'background-color',\n    'background-image',\n    'background-position',\n    'background-size',\n    'background-repeat',\n    'background-attachment',\n    'background-origin',\n    'background-clip',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  border: [\n    'border',\n    'border-top',\n    'border-right',\n    'border-bottom',\n    'border-left',\n  ],\n  filter: ['filter', 'backdrop-filter'],\n  radius: ['border-radius'],\n  shadow: ['box-shadow'],\n  outline: ['outline', 'outline-offset'],\n  preset: [\n    'font-size',\n    'line-height',\n    'letter-spacing',\n    'font-weight',\n    'font-style',\n  ],\n  text: ['font-weight', 'text-decoration-color'],\n  color: ['color'],\n  opacity: ['opacity'],\n  theme: [\n    'color',\n    'background-color',\n    'background-image',\n    'box-shadow',\n    'border',\n    'border-radius',\n    'outline',\n    'opacity',\n    SECOND_FILL_COLOR_PROPERTY,\n  ],\n  width: ['max-width', 'min-width', 'width'],\n  height: ['max-height', 'min-height', 'height'],\n  gap: ['gap', 'margin'],\n  zIndex: ['z-index'],\n  inset: ['inset', 'top', 'right', 'bottom', 'left'],\n};\n\nexport const DEFAULT_TIMING = 'var(--transition)';\nconst DEFAULT_EASING = 'linear';\n\nconst EASING_KEYWORDS = new Set([\n  'ease',\n  'ease-in',\n  'ease-out',\n  'ease-in-out',\n  'linear',\n  'step-start',\n  'step-end',\n]);\n\nfunction isEasing(token: string): boolean {\n  return (\n    EASING_KEYWORDS.has(token) ||\n    token.startsWith('cubic-bezier(') ||\n    token.startsWith('steps(') ||\n    token.startsWith('linear(')\n  );\n}\n\nfunction getTiming(name: string): string {\n  const varName = name.startsWith('--')\n    ? `${name}-transition`\n    : `--${name}-transition`;\n  return `var(${varName}, var(--transition))`;\n}\n\ntype TransitionEntry = [\n  name: string,\n  easing: string | undefined,\n  timing: string | undefined,\n  delay: string | undefined,\n];\n\nexport function transitionStyle({ transition }: { transition?: string }) {\n  if (!transition) return null;\n\n  if (CSS_WIDE_KEYWORDS.has(transition)) {\n    return { transition };\n  }\n\n  const processed = parseStyle(transition);\n  const tokens: string[] = [];\n  processed.groups.forEach((g, idx) => {\n    tokens.push(...g.all);\n    if (idx < processed.groups.length - 1) tokens.push(',');\n  });\n\n  if (tokens.length === 0) return null;\n\n  let tempTransition: string[] = [];\n  const transitions: string[][] = [];\n\n  tokens.forEach((token) => {\n    if (token === ',') {\n      if (tempTransition.length) {\n        transitions.push(tempTransition);\n        tempTransition = [];\n      }\n    } else {\n      tempTransition.push(token);\n    }\n  });\n\n  if (tempTransition.length) {\n    transitions.push(tempTransition);\n  }\n\n  const map: Record<string, TransitionEntry> = {};\n\n  transitions.forEach((transition) => {\n    const name = transition[0];\n\n    let timing: string | undefined;\n    let easing: string | undefined;\n    let delay: string | undefined;\n\n    if (transition[1] && isEasing(transition[1])) {\n      easing = transition[1];\n      delay = transition[2];\n    } else {\n      timing = transition[1];\n      easing = transition[2];\n      delay = transition[3];\n    }\n\n    const styles = MAP[name] || [name];\n\n    styles.forEach((style) => {\n      map[style] = [name, easing, timing, delay];\n    });\n  });\n\n  const result = Object.entries(map)\n    .map(([style, [name, easing, timing, delay]]) => {\n      let value = `${style} ${timing || getTiming(name)}`;\n      if (easing || delay) {\n        value += ` ${easing || DEFAULT_EASING}`;\n      }\n      if (delay) {\n        value += ` ${delay}`;\n      }\n      return value;\n    })\n    .join(', ');\n\n  return { transition: result };\n}\n\ntransitionStyle.__lookupStyles = ['transition'];\n"],"mappings":"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"}

package/dist/styles/types.d.ts

@@ -1,4 +1,4 @@
-import { KeyframesSteps, PropertyDefinition } from "../injector/types.js";
+import { CounterStyleDescriptors, FontFaceInput, KeyframesSteps, PropertyDefinition } from "../injector/types.js";
 import { CSSProperties } from "../utils/css-types.js";
 import { StyleValue, StyleValueStateMap } from "../utils/styles.js";
 
@@ -40,8 +40,9 @@ type PresetNameKey = Extract<keyof TastyPresetNames, string>;
 type PresetName = [PresetNameKey] extends [never] ? string : PresetNameKey;
 type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type OpaquePercentage = '' | `.${Digit}` | `.${Digit}${Digit}` | '.100';
+type ColorValue = `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `hsl(${string})` | `okhsl(${string})` | `oklch(${string})` | (string & {});
 type NoType = false | null | undefined;
-interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type' | 'gap' | 'padding' | 'margin' | 'width' | 'height' | 'border' | 'transition' | 'placeContent' | 'placeItems'> {
+interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font' | 'outline' | 'type' | 'gap' | 'padding' | 'margin' | 'width' | 'height' | 'border' | 'transition' | 'placeContent' | 'placeItems' | 'scrollMargin' | 'scrollMarginTop' | 'scrollMarginRight' | 'scrollMarginBottom' | 'scrollMarginLeft' | 'scrollMarginBlock' | 'scrollMarginInline'> {
   /**
    * @deprecated Use `flow` style instead.
    */
@@ -57,13 +58,20 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * Set the background color of the element. Shortcut for `background-color` with enhanced support for Tasty color tokens and syntaxes.
    *
+   * Supports double-color syntax: the second color is applied as a foreground overlay via a CSS custom property.
+   *
    * Examples:
    * - `fill="#purple.10"` // purple background with 10% opacity
    * - `fill="#danger"` // danger theme color
    * - `fill="rgb(255 128 0)"` // custom RGB color
+   * - `fill="rgb(255 128 0 / 0.5)"` // RGB with opacity
+   * - `fill="hsl(200 100% 50%)"` // HSL color
+   * - `fill="okhsl(200 100% 50%)"` // perceptually uniform OKHSL color
+   * - `fill="oklch(0.7 0.15 200)"` // OKLCH color
+   * - `fill="#primary #secondary"` // double color (second as foreground overlay)
    * - `fill={true}` // default fill color
    */
-  fill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | (string & {});
+  fill?: ColorValue | boolean;
   /**
    * @deprecated Use `fill` instead.
    */
@@ -92,19 +100,26 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `svgFill="#purple.10"` // purple fill with 10% opacity
    * - `svgFill="#danger"` // danger theme color
    * - `svgFill="rgb(255 128 0)"` // custom RGB color
+   * - `svgFill="hsl(200 100% 50%)"` // HSL color
+   * - `svgFill="okhsl(200 100% 50%)"` // OKHSL color
+   * - `svgFill="oklch(0.7 0.15 200)"` // OKLCH color
    * - `svgFill="currentColor"` // inherit from parent color
    */
-  svgFill?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | (string & {});
+  svgFill?: ColorValue;
   /**
    * Set the text (current) color of the element. Shortcut for `color` with enhanced support for Tasty color tokens and syntaxes.
    *
    * Examples:
    * - `color="#purple"` // purple text color
    * - `color="#danger.6"` // danger color with 60% opacity
+   * - `color="rgb(255 128 0)"` // custom RGB color
+   * - `color="hsl(200 100% 50%)"` // HSL color
+   * - `color="okhsl(200 100% 50%)"` // OKHSL color
+   * - `color="oklch(0.7 0.15 200)"` // OKLCH color
    * - `color="red"` // CSS color name
    * - `color={true}` // currentColor
    */
-  color?: `#${NamedColor}${OpaquePercentage}` | `rgb(${string})` | `rgba(${string})` | boolean | string;
+  color?: ColorValue | boolean;
   /**
    * The fade style applies gradient-based fading masks to the edges of an element. Replaces complex CSS mask gradients with a simple, declarative API.
    *
@@ -128,25 +143,22 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    */
   fade?: 'top' | 'right' | 'bottom' | 'left' | string;
   /**
-   * @deprecated Use `scrollbar` style instead.
-   * Whether the element has styled scrollbar.
-   */
-  styledScrollbar?: boolean;
-  /**
-   * The scrollbar style provides a powerful and flexible way to control the appearance and behavior of scrollbars across browsers. It supports custom sizing, color, visibility, and advanced modifiers for modern UI needs.
+   * Scrollbar styling using standard CSS properties (`scrollbar-width`, `scrollbar-color`, `scrollbar-gutter`).
    *
-   * Syntax: `[modifiers] [size] [color1] [color2] [color3]`
+   * Syntax: `[width] [modifiers...] [thumb-color] [track-color]`
    *
-   * Modifiers: `thin`, `none`, `auto`, `stable`, `both-edges`, `always`, `styled`
+   * Width values: `thin` (default), `auto`, `none`
+   * Modifiers: `stable`, `both-edges`, `always`
    *
    * Examples:
-   * - `scrollbar={true}` // thin scrollbar, default color
-   * - `scrollbar="thin 10px #purple.40 #dark.04"`
-   * - `scrollbar="styled 12px #purple.40 #dark.04 #white.10"`
+   * - `scrollbar={true}` // thin scrollbar, default colors
+   * - `scrollbar="thin #purple.40 #dark.04"`
+   * - `scrollbar="auto #red #blue"`
    * - `scrollbar="none"`
-   * - `scrollbar="always 8px #primary.50 #white.02"`
+   * - `scrollbar="always #primary.50 #white.02"`
+   * - `scrollbar="thin stable #red #blue"`
    */
-  scrollbar?: string | boolean | number;
+  scrollbar?: string | boolean;
   /**
    * Set font weight for bold texts.
    */
@@ -265,7 +277,7 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    *
    * Syntax: `[value] [modifiers]` | `[shape]` | `true`
    *
-   * Shapes: `round` (fully rounded), `ellipse` (50%), `leaf`, `backleaf` (asymmetric)
+   * Shapes: `round` (fully rounded), `ellipse` (50%), `leaf`, `backleaf` (asymmetric), `inherit` (inherit from parent)
    * Directional modifiers: `top`, `right`, `bottom`, `left`
    *
    * Examples:
@@ -274,8 +286,10 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `radius="round"` // fully rounded (9999rem)
    * - `radius="leaf"` // asymmetric leaf shape
    * - `radius="1r top"` // round only top corners
+   * - `radius="inherit"` // inherit border-radius from parent
+   * - `radius="inherit right"` // inherit only right corners (uses longhand properties)
    */
-  radius?: 'round' | 'ellipse' | 'leaf' | 'backleaf' | string | true;
+  radius?: 'round' | 'ellipse' | 'leaf' | 'backleaf' | 'inherit' | string | true;
   /**
    * The flow style is a unified shorthand for controlling layout direction and wrapping in both flex and grid containers. Replaces `flexDirection` and `gridAutoFlow`.
    *
@@ -354,11 +368,13 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
   /**
    * The preset style sets base text settings according to named presets. Affects `font-size`, `line-height`, `letter-spacing`, `font-weight`, and `text-transform`.
    *
+   * Syntax: `name`, `name / modifier`, or `modifier` (shorthand, name defaults to `inherit`).
    * Preset names are project-specific. Augment `TastyPresetNames` to register them for autocomplete.
    *
    * Examples:
    * - `preset="h1"` // heading 1 typography
-   * - `preset="h2 strong"` // bold heading 2
+   * - `preset="h2 / strong"` // bold heading 2
+   * - `preset="bold"` // inherit with bold (shorthand)
    * - `preset="t3"` // text size 3
    */
   preset?: PresetName | (string & {});
@@ -381,12 +397,12 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    */
   justify?: CSSProperties['justifyItems'] | CSSProperties['justifyContent'];
   /**
-   * Shorthand for `place-items` and `place-content`. Sets both properties for unified alignment of both axes in grid/flex layouts.
+   * Shorthand for all placement properties. Sets all 4 longhands: align-items, justify-items, align-content, justify-content.
    *
    * Examples:
-   * - `place="center"` // place-items: center; place-content: center
-   * - `place="start end"` // place-items: start; place-content: end
-   * - `place="stretch"` // place both to stretch
+   * - `place="center"` // all 4 longhands: center
+   * - `place="start end"` // align-*: start; justify-*: end
+   * - `place="stretch"` // all 4 longhands: stretch
    */
   place?: CSSProperties['placeItems'] | CSSProperties['placeContent'] | string;
   /**
@@ -405,6 +421,21 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `placeItems="start end"` // start on block axis, end on inline axis
    */
   placeItems?: CSSProperties['placeItems'];
+  /**
+   * Shorthand for scroll-margin on all sides. Supports custom units and directional modifiers.
+   *
+   * Examples:
+   * - `scrollMargin="2x"` // scroll-margin on all sides: 2x
+   * - `scrollMargin="2x top"` // only top scroll-margin: 2x
+   * - `scrollMargin={true}` // default scroll-margin on all sides
+   */
+  scrollMargin?: CSSProperties['scrollMargin'] | string | boolean;
+  scrollMarginTop?: string | number | boolean;
+  scrollMarginRight?: string | number | boolean;
+  scrollMarginBottom?: string | number | boolean;
+  scrollMarginLeft?: string | number | boolean;
+  scrollMarginBlock?: string | number | boolean;
+  scrollMarginInline?: string | number | boolean;
   /**
    * Shorthand for `top`, `right`, `bottom`, and `left` offsets. Supports custom units, directional modifiers, and positioning.
    *
@@ -438,6 +469,24 @@ interface StylesInterface extends Omit<CSSProperties, 'color' | 'fill' | 'font'
    * - `'@properties': { '#theme': { initialValue: 'purple' } }` // syntax: '<color>' is auto-set
    */
   '@properties'?: Record<string, PropertyDefinition>;
+  /**
+   * Local @font-face definitions for this component.
+   * Keys are font-family names, values are descriptors or arrays of descriptors
+   * (for multiple weights/styles of the same family).
+   *
+   * Examples:
+   * - `'@fontFace': { Icons: { src: 'url("/fonts/icons.woff2") format("woff2")', fontDisplay: 'block' } }`
+   * - `'@fontFace': { 'Brand Sans': [{ src: '...', fontWeight: 400 }, { src: '...', fontWeight: 700 }] }`
+   */
+  '@fontFace'?: Record<string, FontFaceInput>;
+  /**
+   * Local @counter-style definitions for this component.
+   * Keys are counter-style names, values are descriptor objects.
+   *
+   * Examples:
+   * - `'@counterStyle': { thumbs: { system: 'cyclic', symbols: '"👍"', suffix: '" "' } }`
+   */
+  '@counterStyle'?: Record<string, CounterStyleDescriptors>;
   /**
    * Apply one or more predefined style recipes by name.
    * Recipes are defined globally via `configure({ recipes: { ... } })`.
@@ -458,7 +507,7 @@ type SuffixForSelector = '&' | '.' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | '
 type Selector = `${SuffixForSelector}${string}`;
 type NotSelector = Exclude<string, Selector | keyof StylesInterface>;
 /** Special style keys that should not be wrapped in StyleValue/StyleValueStateMap */
-type SpecialStyleKeys = '@keyframes' | '@properties' | 'recipe';
+type SpecialStyleKeys = '@keyframes' | '@properties' | '@fontFace' | '@counterStyle' | 'recipe';
 type StylesWithoutSelectors = { [key in keyof StylesInterface as key extends SpecialStyleKeys ? never : key]?: StyleValue<StylesInterface[key]> | StyleValueStateMap<StylesInterface[key]> };
 /**
  * Index signature for recipe-specific arbitrary keys.
@@ -476,16 +525,20 @@ type RecipeIndexSignature = Record<string, StyleValue<string | number | boolean
 type RecipeStyles = StylesWithoutSelectors & RecipeIndexSignature & {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
 };
 /** Special properties that are not regular style values */
 interface SpecialStyleProperties {
   '@keyframes'?: StylesInterface['@keyframes'];
   '@properties'?: StylesInterface['@properties'];
+  '@fontFace'?: StylesInterface['@fontFace'];
+  '@counterStyle'?: StylesInterface['@counterStyle'];
   recipe?: StylesInterface['recipe'];
 }
 /** Index signature for arbitrary style keys (sub-elements, CSS variables, etc.) */
 interface StylesIndexSignature {
-  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'];
+  [key: string]: StyleValue<string | number | boolean | undefined> | StyleValueStateMap<string | number | boolean | undefined> | Styles | false | StylesInterface['@keyframes'] | StylesInterface['@properties'] | StylesInterface['@fontFace'] | StylesInterface['@counterStyle'];
   /**
    * Selector combinator: `undefined` (descendant, default), `'>'` (child), `'+'` (adjacent), `'~'` (sibling).
    * Can chain with capitalized names: `'> Body > Row >'`. Spaces required around combinators.
@@ -493,6 +546,19 @@ interface StylesIndexSignature {
   $?: string;
 }
 type Styles = StylesWithoutSelectors & SpecialStyleProperties & StylesIndexSignature;
+/**
+ * Value type for design tokens passed to `configure({ tokens })`.
+ * Can be a direct value or a state map for responsive/theme-aware tokens.
+ */
+type ConfigTokenValue = string | number | boolean | Record<string, string | number | boolean | undefined | null | '@inherit'>;
+/**
+ * Design tokens injected as CSS custom properties on `:root`.
+ * Keys must start with `$` (value tokens) or `#` (color tokens).
+ *
+ * - `$name` keys become `--name` CSS custom properties
+ * - `#name` keys become `--name-color` and `--name-color-{colorSpace}` properties
+ */
+type ConfigTokens = Record<`$${string}` | `#${string}`, ConfigTokenValue>;
 //#endregion
-export { NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames };
+export { ConfigTokenValue, ConfigTokens, NoType, NotSelector, RecipeStyles, Selector, Styles, StylesInterface, StylesWithoutSelectors, SuffixForSelector, TastyNamedColors, TastyPresetNames };
 //# sourceMappingURL=types.d.ts.map

package/dist/styles/width.d.ts

@@ -8,7 +8,7 @@ declare function widthStyle({
   width,
   minWidth,
   maxWidth
-}: WidthStyleProps): Record<string, string | string[]> | undefined;
+}: WidthStyleProps): Record<string, string | string[]> | null;
 declare namespace widthStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/width.js

@@ -1,5 +1,4 @@
 import { dimensionStyle } from "./dimension.js";
-
 //#region src/styles/width.ts
 const dimension = dimensionStyle("width");
 function widthStyle({ width, minWidth, maxWidth }) {
@@ -14,7 +13,7 @@ widthStyle.__lookupStyles = [
 	"minWidth",
 	"maxWidth"
 ];
-
 //#endregion
 export { widthStyle };
+
 //# sourceMappingURL=width.js.map

package/dist/styles/width.js.map

@@ -1 +1 @@
-{"version":3,"file":"width.js","names":[],"sources":["../../src/styles/width.ts"],"sourcesContent":["import { dimensionStyle } from './dimension';\n\nconst dimension = dimensionStyle('width');\n\ninterface WidthStyleProps {\n  width?: string | number | boolean;\n  minWidth?: string | number | boolean;\n  maxWidth?: string | number | boolean;\n}\n\nexport function widthStyle({ width, minWidth, maxWidth }: WidthStyleProps) {\n  return dimension({ value: width, min: minWidth, max: maxWidth });\n}\n\nwidthStyle.__lookupStyles = ['width', 'minWidth', 'maxWidth'];\n"],"mappings":";;;AAEA,MAAM,YAAY,eAAe,QAAQ;AAQzC,SAAgB,WAAW,EAAE,OAAO,UAAU,YAA6B;AACzE,QAAO,UAAU;EAAE,OAAO;EAAO,KAAK;EAAU,KAAK;EAAU,CAAC;;AAGlE,WAAW,iBAAiB;CAAC;CAAS;CAAY;CAAW"}
+{"version":3,"file":"width.js","names":[],"sources":["../../src/styles/width.ts"],"sourcesContent":["import { dimensionStyle } from './dimension';\n\nconst dimension = dimensionStyle('width');\n\ninterface WidthStyleProps {\n  width?: string | number | boolean;\n  minWidth?: string | number | boolean;\n  maxWidth?: string | number | boolean;\n}\n\nexport function widthStyle({ width, minWidth, maxWidth }: WidthStyleProps) {\n  return dimension({ value: width, min: minWidth, max: maxWidth });\n}\n\nwidthStyle.__lookupStyles = ['width', 'minWidth', 'maxWidth'];\n"],"mappings":";;AAEA,MAAM,YAAY,eAAe,QAAQ;AAQzC,SAAgB,WAAW,EAAE,OAAO,UAAU,YAA6B;AACzE,QAAO,UAAU;EAAE,OAAO;EAAO,KAAK;EAAU,KAAK;EAAU,CAAC;;AAGlE,WAAW,iBAAiB;CAAC;CAAS;CAAY;CAAW"}