@tenphi/tasty 1.1.0 → 1.3.0

package/dist/styles/padding.js.map

@@ -1 +1 @@
-{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse a padding value and return the first processed value\n */\nfunction parsePaddingValue(value: string | number | boolean): string | null {\n  if (typeof value === 'number') return `${value}px`;\n  if (!value) return null;\n  if (value === true) value = '1x';\n\n  const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n  return values[0] || 'var(--gap)';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n  values: string[];\n  directions: Direction[];\n} {\n  const { values = [], mods = [] } = group;\n  return {\n    values: values.length ? values : ['var(--gap)'],\n    directions: filterMods(mods, DIRECTIONS) as Direction[],\n  };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\n */\nfunction applyGroup(\n  dirs: Record<Direction, string>,\n  values: string[],\n  directions: Direction[],\n): void {\n  if (!values.length) return;\n\n  if (directions.length === 0) {\n    dirs.top = values[0];\n    dirs.right = values[1] || values[0];\n    dirs.bottom = values[2] || values[0];\n    dirs.left = values[3] || values[1] || values[0];\n  } else {\n    directions.forEach((dir, i) => {\n      dirs[dir] = values[i] ?? values[0];\n    });\n  }\n}\n\n/**\n * Optimize padding output shorthand.\n */\nfunction optimizePadding(dirs: Record<Direction, string>): {\n  padding: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { padding: top };\n  }\n  if (top === bottom && left === right) {\n    return { padding: `${top} ${left}` };\n  }\n  return { padding: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function paddingStyle({\n  padding,\n  paddingBlock,\n  paddingInline,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: {\n  padding?: string | number | boolean;\n  paddingBlock?: string | number | boolean;\n  paddingInline?: string | number | boolean;\n  paddingTop?: string | number | boolean;\n  paddingRight?: string | number | boolean;\n  paddingBottom?: string | number | boolean;\n  paddingLeft?: string | number | boolean;\n}) {\n  if (\n    padding == null &&\n    paddingBlock == null &&\n    paddingInline == null &&\n    paddingTop == null &&\n    paddingRight == null &&\n    paddingBottom == null &&\n    paddingLeft == null\n  ) {\n    return {};\n  }\n\n  const dirs: Record<Direction, string> = {\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n  };\n\n  // Priority 1 (lowest): padding\n  if (padding != null) {\n    if (typeof padding === 'number') {\n      const v = `${padding}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (padding === true) {\n      padding = '1x';\n    }\n\n    if (typeof padding === 'string' && padding) {\n      const processed = parseStyle(padding);\n      const groups = processed.groups ?? [];\n\n      for (const group of groups) {\n        const { values, directions } = extractGroupData(group);\n        applyGroup(dirs, values, directions);\n      }\n    }\n  }\n\n  // Priority 2 (medium): paddingBlock/paddingInline\n  if (paddingBlock != null) {\n    const val = parsePaddingValue(paddingBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (paddingInline != null) {\n    const val = parsePaddingValue(paddingInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (paddingTop != null) {\n    const val = parsePaddingValue(paddingTop);\n    if (val) dirs.top = val;\n  }\n  if (paddingRight != null) {\n    const val = parsePaddingValue(paddingRight);\n    if (val) dirs.right = val;\n  }\n  if (paddingBottom != null) {\n    const val = parsePaddingValue(paddingBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (paddingLeft != null) {\n    const val = parsePaddingValue(paddingLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizePadding(dirs);\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,kBAAkB,OAAiD;AAC1E,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,iBAAiB,OAGxB;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AACnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;;;;AAMH,SAAS,WACP,MACA,QACA,YACM;AACN,KAAI,CAAC,OAAO,OAAQ;AAEpB,KAAI,WAAW,WAAW,GAAG;AAC3B,OAAK,MAAM,OAAO;AAClB,OAAK,QAAQ,OAAO,MAAM,OAAO;AACjC,OAAK,SAAS,OAAO,MAAM,OAAO;AAClC,OAAK,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO;OAE7C,YAAW,SAAS,KAAK,MAAM;AAC7B,OAAK,OAAO,OAAO,MAAM,OAAO;GAChC;;;;;AAON,SAAS,gBAAgB,MAEvB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,SAAS,KAAK;AAEzB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ;AAEtC,QAAO,EAAE,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGzD,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AACD,KACE,WAAW,QACX,gBAAgB,QAChB,iBAAiB,QACjB,cAAc,QACd,gBAAgB,QAChB,iBAAiB,QACjB,eAAe,KAEf,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,WAAW,MAAM;AACnB,MAAI,OAAO,YAAY,SAErB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,QAAQ;WAEZ,YAAY,KACrB,WAAU;AAGZ,MAAI,OAAO,YAAY,YAAY,SAAS;GAE1C,MAAM,SADY,WAAW,QAAQ,CACZ,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,kBAAkB,WAAW;AACzC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,kBAAkB,aAAa;AAC3C,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,iBAAiB,MAAM;EACzB,MAAM,MAAM,kBAAkB,cAAc;AAC5C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,kBAAkB,YAAY;AAC1C,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,gBAAgB,KAAK;;AAG9B,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"padding.js","names":[],"sources":["../../src/styles/padding.ts"],"sourcesContent":["import { processDirectionalStyle } from './directional';\n\nconst PADDING_CONFIG = {\n  property: 'padding',\n  defaultValue: 'var(--gap)',\n  trueValue: '1x',\n  defaultInit: '0',\n} as const;\n\nexport function paddingStyle({\n  padding,\n  paddingBlock,\n  paddingInline,\n  paddingTop,\n  paddingRight,\n  paddingBottom,\n  paddingLeft,\n}: {\n  padding?: string | number | boolean;\n  paddingBlock?: string | number | boolean;\n  paddingInline?: string | number | boolean;\n  paddingTop?: string | number | boolean;\n  paddingRight?: string | number | boolean;\n  paddingBottom?: string | number | boolean;\n  paddingLeft?: string | number | boolean;\n}) {\n  return processDirectionalStyle(PADDING_CONFIG, {\n    main: padding,\n    block: paddingBlock,\n    inline: paddingInline,\n    top: paddingTop,\n    right: paddingRight,\n    bottom: paddingBottom,\n    left: paddingLeft,\n  });\n}\n\npaddingStyle.__lookupStyles = [\n  'padding',\n  'paddingTop',\n  'paddingRight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingBlock',\n  'paddingInline',\n];\n"],"mappings":";;AAEA,MAAM,iBAAiB;CACrB,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACd;AAED,SAAgB,aAAa,EAC3B,SACA,cACA,eACA,YACA,cACA,eACA,eASC;AACD,QAAO,wBAAwB,gBAAgB;EAC7C,MAAM;EACN,OAAO;EACP,QAAQ;EACR,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP,CAAC;;AAGJ,aAAa,iBAAiB;CAC5B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/placement.d.ts

@@ -0,0 +1,37 @@
+//#region src/styles/placement.d.ts
+interface PlacementStyleProps {
+  place?: string | boolean;
+  placeItems?: string | boolean;
+  placeContent?: string | boolean;
+  align?: string | boolean;
+  justify?: string | boolean;
+  alignItems?: string | boolean;
+  alignContent?: string | boolean;
+  justifyItems?: string | boolean;
+  justifyContent?: string | boolean;
+}
+/**
+ * Unified placement handler replacing align, justify, and place.
+ *
+ * Priority (later overrides earlier):
+ * 1. place (lowest) — sets all 4 longhands
+ * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+ * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+ */
+declare function placementStyle({
+  place,
+  placeItems,
+  placeContent,
+  align,
+  justify,
+  alignItems,
+  alignContent,
+  justifyItems,
+  justifyContent
+}: PlacementStyleProps): Record<string, string> | null;
+declare namespace placementStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { placementStyle };
+//# sourceMappingURL=placement.d.ts.map

package/dist/styles/placement.js

@@ -0,0 +1,74 @@
+//#region src/styles/placement.ts
+function str(val) {
+	if (val == null || val === false || val === "") return null;
+	if (val === true) return "center";
+	return String(val);
+}
+/**
+* Unified placement handler replacing align, justify, and place.
+*
+* Priority (later overrides earlier):
+* 1. place (lowest) — sets all 4 longhands
+* 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands
+* 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand
+*/
+function placementStyle({ place, placeItems, placeContent, align, justify, alignItems, alignContent, justifyItems, justifyContent }) {
+	const result = {};
+	const placeVal = str(place);
+	if (placeVal) {
+		const parts = placeVal.split(/\s+/);
+		const first = parts[0];
+		const second = parts[1] || first;
+		result["align-items"] = first;
+		result["justify-items"] = second;
+		result["align-content"] = first;
+		result["justify-content"] = second;
+	}
+	const placeItemsVal = str(placeItems);
+	if (placeItemsVal) {
+		const parts = placeItemsVal.split(/\s+/);
+		result["align-items"] = parts[0];
+		result["justify-items"] = parts[1] || parts[0];
+	}
+	const placeContentVal = str(placeContent);
+	if (placeContentVal) {
+		const parts = placeContentVal.split(/\s+/);
+		result["align-content"] = parts[0];
+		result["justify-content"] = parts[1] || parts[0];
+	}
+	const alignVal = str(align);
+	if (alignVal) {
+		result["align-items"] = alignVal;
+		result["align-content"] = alignVal;
+	}
+	const justifyVal = str(justify);
+	if (justifyVal) {
+		result["justify-items"] = justifyVal;
+		result["justify-content"] = justifyVal;
+	}
+	const alignItemsVal = str(alignItems);
+	if (alignItemsVal) result["align-items"] = alignItemsVal;
+	const alignContentVal = str(alignContent);
+	if (alignContentVal) result["align-content"] = alignContentVal;
+	const justifyItemsVal = str(justifyItems);
+	if (justifyItemsVal) result["justify-items"] = justifyItemsVal;
+	const justifyContentVal = str(justifyContent);
+	if (justifyContentVal) result["justify-content"] = justifyContentVal;
+	if (Object.keys(result).length === 0) return null;
+	return result;
+}
+placementStyle.__lookupStyles = [
+	"place",
+	"placeItems",
+	"placeContent",
+	"align",
+	"justify",
+	"alignItems",
+	"alignContent",
+	"justifyItems",
+	"justifyContent"
+];
+//#endregion
+export { placementStyle };
+
+//# sourceMappingURL=placement.js.map

package/dist/styles/placement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.js","names":[],"sources":["../../src/styles/placement.ts"],"sourcesContent":["interface PlacementStyleProps {\n  place?: string | boolean;\n  placeItems?: string | boolean;\n  placeContent?: string | boolean;\n  align?: string | boolean;\n  justify?: string | boolean;\n  alignItems?: string | boolean;\n  alignContent?: string | boolean;\n  justifyItems?: string | boolean;\n  justifyContent?: string | boolean;\n}\n\nfunction str(val: string | boolean | undefined): string | null {\n  if (val == null || val === false || val === '') return null;\n  if (val === true) return 'center';\n\n  return String(val);\n}\n\n/**\n * Unified placement handler replacing align, justify, and place.\n *\n * Priority (later overrides earlier):\n * 1. place (lowest) — sets all 4 longhands\n * 2. placeItems, placeContent, align, justify (medium) — each sets 2 longhands\n * 3. alignItems, alignContent, justifyItems, justifyContent (highest) — each sets 1 longhand\n */\nexport function placementStyle({\n  place,\n  placeItems,\n  placeContent,\n  align,\n  justify,\n  alignItems,\n  alignContent,\n  justifyItems,\n  justifyContent,\n}: PlacementStyleProps) {\n  const result: Record<string, string> = {};\n\n  const placeVal = str(place);\n\n  if (placeVal) {\n    const parts = placeVal.split(/\\s+/);\n    const first = parts[0];\n    const second = parts[1] || first;\n\n    result['align-items'] = first;\n    result['justify-items'] = second;\n    result['align-content'] = first;\n    result['justify-content'] = second;\n  }\n\n  const placeItemsVal = str(placeItems);\n\n  if (placeItemsVal) {\n    const parts = placeItemsVal.split(/\\s+/);\n\n    result['align-items'] = parts[0];\n    result['justify-items'] = parts[1] || parts[0];\n  }\n\n  const placeContentVal = str(placeContent);\n\n  if (placeContentVal) {\n    const parts = placeContentVal.split(/\\s+/);\n\n    result['align-content'] = parts[0];\n    result['justify-content'] = parts[1] || parts[0];\n  }\n\n  const alignVal = str(align);\n\n  if (alignVal) {\n    result['align-items'] = alignVal;\n    result['align-content'] = alignVal;\n  }\n\n  const justifyVal = str(justify);\n\n  if (justifyVal) {\n    result['justify-items'] = justifyVal;\n    result['justify-content'] = justifyVal;\n  }\n\n  const alignItemsVal = str(alignItems);\n\n  if (alignItemsVal) result['align-items'] = alignItemsVal;\n\n  const alignContentVal = str(alignContent);\n\n  if (alignContentVal) result['align-content'] = alignContentVal;\n\n  const justifyItemsVal = str(justifyItems);\n\n  if (justifyItemsVal) result['justify-items'] = justifyItemsVal;\n\n  const justifyContentVal = str(justifyContent);\n\n  if (justifyContentVal) result['justify-content'] = justifyContentVal;\n\n  if (Object.keys(result).length === 0) return null;\n\n  return result;\n}\n\nplacementStyle.__lookupStyles = [\n  'place',\n  'placeItems',\n  'placeContent',\n  'align',\n  'justify',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n];\n"],"mappings":";AAYA,SAAS,IAAI,KAAkD;AAC7D,KAAI,OAAO,QAAQ,QAAQ,SAAS,QAAQ,GAAI,QAAO;AACvD,KAAI,QAAQ,KAAM,QAAO;AAEzB,QAAO,OAAO,IAAI;;;;;;;;;;AAWpB,SAAgB,eAAe,EAC7B,OACA,YACA,cACA,OACA,SACA,YACA,cACA,cACA,kBACsB;CACtB,MAAM,SAAiC,EAAE;CAEzC,MAAM,WAAW,IAAI,MAAM;AAE3B,KAAI,UAAU;EACZ,MAAM,QAAQ,SAAS,MAAM,MAAM;EACnC,MAAM,QAAQ,MAAM;EACpB,MAAM,SAAS,MAAM,MAAM;AAE3B,SAAO,iBAAiB;AACxB,SAAO,mBAAmB;AAC1B,SAAO,mBAAmB;AAC1B,SAAO,qBAAqB;;CAG9B,MAAM,gBAAgB,IAAI,WAAW;AAErC,KAAI,eAAe;EACjB,MAAM,QAAQ,cAAc,MAAM,MAAM;AAExC,SAAO,iBAAiB,MAAM;AAC9B,SAAO,mBAAmB,MAAM,MAAM,MAAM;;CAG9C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,iBAAiB;EACnB,MAAM,QAAQ,gBAAgB,MAAM,MAAM;AAE1C,SAAO,mBAAmB,MAAM;AAChC,SAAO,qBAAqB,MAAM,MAAM,MAAM;;CAGhD,MAAM,WAAW,IAAI,MAAM;AAE3B,KAAI,UAAU;AACZ,SAAO,iBAAiB;AACxB,SAAO,mBAAmB;;CAG5B,MAAM,aAAa,IAAI,QAAQ;AAE/B,KAAI,YAAY;AACd,SAAO,mBAAmB;AAC1B,SAAO,qBAAqB;;CAG9B,MAAM,gBAAgB,IAAI,WAAW;AAErC,KAAI,cAAe,QAAO,iBAAiB;CAE3C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,gBAAiB,QAAO,mBAAmB;CAE/C,MAAM,kBAAkB,IAAI,aAAa;AAEzC,KAAI,gBAAiB,QAAO,mBAAmB;CAE/C,MAAM,oBAAoB,IAAI,eAAe;AAE7C,KAAI,kBAAmB,QAAO,qBAAqB;AAEnD,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EAAG,QAAO;AAE7C,QAAO;;AAGT,eAAe,iBAAiB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/predefined.d.ts

@@ -1,4 +1,3 @@
-import { alignStyle } from "./align.js";
 import { borderStyle } from "./border.js";
 import { colorStyle } from "./color.js";
 import { displayStyle } from "./display.js";
@@ -8,12 +7,13 @@ import { flowStyle } from "./flow.js";
 import { gapStyle } from "./gap.js";
 import { heightStyle } from "./height.js";
 import { insetStyle } from "./inset.js";
-import { justifyStyle } from "./justify.js";
 import { marginStyle } from "./margin.js";
 import { outlineStyle } from "./outline.js";
 import { paddingStyle } from "./padding.js";
+import { placementStyle } from "./placement.js";
 import { presetStyle } from "./preset.js";
 import { radiusStyle } from "./radius.js";
+import { scrollMarginStyle } from "./scrollMargin.js";
 import { scrollbarStyle } from "./scrollbar.js";
 import { shadowStyle } from "./shadow.js";
 import { transitionStyle } from "./transition.js";
@@ -44,7 +44,6 @@ import { widthStyle } from "./width.js";
  * ```
  */
 declare const styleHandlers: {
-  readonly align: typeof alignStyle;
   readonly border: typeof borderStyle;
   readonly color: typeof colorStyle;
   readonly display: typeof displayStyle;
@@ -55,12 +54,13 @@ declare const styleHandlers: {
   readonly gap: typeof gapStyle;
   readonly height: typeof heightStyle;
   readonly inset: typeof insetStyle;
-  readonly justify: typeof justifyStyle;
   readonly margin: typeof marginStyle;
   readonly outline: typeof outlineStyle;
   readonly padding: typeof paddingStyle;
+  readonly placement: typeof placementStyle;
   readonly preset: typeof presetStyle;
   readonly radius: typeof radiusStyle;
+  readonly scrollMargin: typeof scrollMarginStyle;
   readonly scrollbar: typeof scrollbarStyle;
   readonly shadow: typeof shadowStyle;
   readonly transition: typeof transitionStyle;

package/dist/styles/predefined.js

@@ -1,5 +1,4 @@
 import { isDevEnv } from "../utils/is-dev-env.js";
-import { alignStyle } from "./align.js";
 import { borderStyle } from "./border.js";
 import { createStyle } from "./createStyle.js";
 import { colorStyle } from "./color.js";
@@ -10,17 +9,17 @@ import { flowStyle } from "./flow.js";
 import { gapStyle } from "./gap.js";
 import { heightStyle } from "./height.js";
 import { insetStyle } from "./inset.js";
-import { justifyStyle } from "./justify.js";
 import { marginStyle } from "./margin.js";
 import { outlineStyle } from "./outline.js";
 import { paddingStyle } from "./padding.js";
+import { placementStyle } from "./placement.js";
 import { presetStyle } from "./preset.js";
 import { radiusStyle } from "./radius.js";
+import { scrollMarginStyle } from "./scrollMargin.js";
 import { scrollbarStyle } from "./scrollbar.js";
 import { shadowStyle } from "./shadow.js";
 import { transitionStyle } from "./transition.js";
 import { widthStyle } from "./width.js";
-
 //#region src/styles/predefined.ts
 const devMode = isDevEnv();
 const columnsConverter = (val) => {
@@ -91,9 +90,9 @@ function predefine() {
 		borderStyle,
 		shadowStyle,
 		paddingStyle,
-		alignStyle,
-		justifyStyle,
+		placementStyle,
 		presetStyle,
+		scrollMarginStyle,
 		outlineStyle,
 		scrollbarStyle,
 		fadeStyle,
@@ -136,7 +135,7 @@ function normalizeHandlerDefinition(keyName, definition) {
 */
 function validateHandler(name, handler, lookupStyles) {
 	if (!devMode) return;
-	if (typeof handler !== "function") console.warn(`[Tasty] Handler "${name}" is not a function. Handlers must be functions that return CSSMap, CSSMap[], or void.`);
+	if (typeof handler !== "function") console.warn(`[Tasty] Handler "${name}" is not a function. Handlers must be functions that return CSSMap, CSSMap[], or null.`);
 	if (!lookupStyles || !Array.isArray(lookupStyles) || lookupStyles.length === 0) console.warn(`[Tasty] Handler "${name}" has invalid lookupStyles. Expected non-empty array of style names.`);
 }
 /**
@@ -210,7 +209,6 @@ function wrapHandler(handler) {
 * ```
 */
 const styleHandlers = {
-	align: wrapHandler(alignStyle),
 	border: wrapHandler(borderStyle),
 	color: wrapHandler(colorStyle),
 	display: wrapHandler(displayStyle),
@@ -221,18 +219,19 @@ const styleHandlers = {
 	gap: wrapHandler(gapStyle),
 	height: wrapHandler(heightStyle),
 	inset: wrapHandler(insetStyle),
-	justify: wrapHandler(justifyStyle),
 	margin: wrapHandler(marginStyle),
 	outline: wrapHandler(outlineStyle),
 	padding: wrapHandler(paddingStyle),
+	placement: wrapHandler(placementStyle),
 	preset: wrapHandler(presetStyle),
 	radius: wrapHandler(radiusStyle),
+	scrollMargin: wrapHandler(scrollMarginStyle),
 	scrollbar: wrapHandler(scrollbarStyle),
 	shadow: wrapHandler(shadowStyle),
 	transition: wrapHandler(transitionStyle),
 	width: wrapHandler(widthStyle)
 };
-
 //#endregion
 export { normalizeHandlerDefinition, predefine, registerHandler, resetHandlers, styleHandlers };
+
 //# sourceMappingURL=predefined.js.map

package/dist/styles/predefined.js.map

@@ -1 +1 @@
-{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n  RawStyleHandler,\n  StyleHandler,\n  StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { alignStyle } from './align';\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\n// Note: fontStyle (font.ts) and fontStyleStyle (fontStyle.ts) removed\n// Both font and fontStyle props are now handled by presetStyle\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { justifyStyle } from './justify';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return `${val}px`;\n  }\n\n  return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'minmax(1px, 1fr) '.repeat(val).trim();\n  }\n\n  return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'auto '.repeat(val).trim();\n  }\n\n  return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n  initialHandlerMapSnapshot = {};\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    // Shallow copy the array - handlers themselves are immutable\n    initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n  }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n  if (!initialHandlerMapSnapshot) {\n    // predefine() hasn't been called yet, nothing to reset\n    return;\n  }\n\n  // Clear current map\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    delete STYLE_HANDLER_MAP[key];\n  }\n\n  // Restore initial state\n  for (const key of Object.keys(initialHandlerMapSnapshot)) {\n    STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n  }\n}\n\nexport function defineCustomStyle(\n  names: string[] | StyleHandler,\n  handler?: RawStyleHandler,\n) {\n  let handlerWithLookup: StyleHandler;\n\n  if (typeof names === 'function') {\n    handlerWithLookup = names;\n    names = handlerWithLookup.__lookupStyles;\n  } else if (handler) {\n    handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n  } else {\n    console.warn('Tasty: incorrect custom style definition: ', names);\n    return;\n  }\n\n  if (Array.isArray(names)) {\n    // just to pass type checking\n    names.forEach((name) => {\n      if (!STYLE_HANDLER_MAP[name]) {\n        STYLE_HANDLER_MAP[name] = [];\n      }\n\n      STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n    });\n  }\n}\n\ntype ConverterHandler = (\n  s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n  styleName: string,\n  cssStyleName?: string,\n  converter?: ConverterHandler,\n) {\n  const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n  if (!STYLE_HANDLER_MAP[styleName]) {\n    STYLE_HANDLER_MAP[styleName] = [];\n  }\n\n  STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n  // Style aliases\n  defineStyleAlias('gridAreas', 'grid-template-areas');\n  defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n  defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n  defineStyleAlias(\n    'gridTemplate',\n    'grid-template',\n    (val: string | boolean | number | undefined) => {\n      if (typeof val !== 'string') return;\n\n      return val\n        .split('/')\n        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n        .join('/');\n    },\n  );\n  // Note: outlineOffset is now handled by outlineStyle\n\n  [\n    displayStyle,\n    transitionStyle,\n    fillStyle,\n    svgFillStyle,\n    widthStyle,\n    marginStyle,\n    gapStyle,\n    flowStyle,\n    colorStyle,\n    heightStyle,\n    radiusStyle,\n    borderStyle,\n    shadowStyle,\n    paddingStyle,\n    alignStyle,\n    justifyStyle,\n    presetStyle,\n    outlineStyle,\n    scrollbarStyle,\n    fadeStyle,\n    insetStyle,\n  ]\n    // @ts-expect-error handler type varies across built-in style handlers\n    .forEach((handler) => defineCustomStyle(handler));\n\n  // Capture initial state after all built-in handlers are registered\n  captureInitialHandlerState();\n\n  return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n  keyName: string,\n  definition: StyleHandlerDefinition,\n): StyleHandler {\n  let handler: RawStyleHandler;\n  let lookupStyles: string[];\n\n  if (typeof definition === 'function') {\n    // Function only - lookup styles inferred from key name\n    handler = definition;\n    lookupStyles = [keyName];\n  } else if (Array.isArray(definition)) {\n    const [first, fn] = definition;\n\n    if (typeof fn !== 'function') {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'Tuple must have a function as the second element: [string, function] or [string[], function].',\n      );\n    }\n\n    handler = fn;\n\n    if (typeof first === 'string') {\n      // [string, fn] - single lookup style\n      lookupStyles = [first];\n    } else if (Array.isArray(first)) {\n      // [string[], fn] - multiple lookup styles\n      lookupStyles = first;\n    } else {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'First element must be a string or string array.',\n      );\n    }\n  } else {\n    throw new Error(\n      `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n        'Expected function, [string, function], or [string[], function].',\n    );\n  }\n\n  // Validate handler in dev mode\n  validateHandler(keyName, handler, lookupStyles);\n\n  // Wrap the handler to avoid mutation issues when the same function\n  // is reused for multiple handler definitions. Each registration\n  // gets its own function identity with its own __lookupStyles.\n  const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n  wrappedHandler.__lookupStyles = lookupStyles;\n\n  return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n  name: string,\n  handler: RawStyleHandler,\n  lookupStyles: string[],\n): void {\n  if (!devMode) return;\n\n  if (typeof handler !== 'function') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" is not a function. ` +\n        'Handlers must be functions that return CSSMap, CSSMap[], or void.',\n    );\n  }\n\n  if (\n    !lookupStyles ||\n    !Array.isArray(lookupStyles) ||\n    lookupStyles.length === 0\n  ) {\n    console.warn(\n      `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n        'Expected non-empty array of style names.',\n    );\n  }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n  if (!devMode) return;\n  if (result === undefined || result === null) return; // void is valid\n\n  // Check for empty string (migration from old pattern)\n  if (result === '') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned empty string. ` +\n        'Return void/undefined instead for no output.',\n    );\n    return;\n  }\n\n  // Check result is object (CSSMap or CSSMap[])\n  if (typeof result !== 'object') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n        'Expected CSSMap, CSSMap[], or void.',\n    );\n  }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n  const lookupStyles = handler.__lookupStyles;\n\n  if (!lookupStyles || lookupStyles.length === 0) {\n    if (devMode) {\n      console.warn(\n        '[Tasty] Cannot register handler without __lookupStyles property.',\n      );\n    }\n    return;\n  }\n\n  // Find and remove existing handlers that would conflict\n  // A handler conflicts if it handles any of the same styles as the new handler\n  const handlersToRemove = new Set<StyleHandler>();\n\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      for (const existingHandler of existing) {\n        handlersToRemove.add(existingHandler);\n      }\n    }\n  }\n\n  // Remove conflicting handlers from ALL their lookup styles\n  for (const oldHandler of handlersToRemove) {\n    const oldLookupStyles = oldHandler.__lookupStyles;\n    if (oldLookupStyles) {\n      for (const oldStyleName of oldLookupStyles) {\n        const handlers = STYLE_HANDLER_MAP[oldStyleName];\n        if (handlers) {\n          const filtered = handlers.filter((h) => h !== oldHandler);\n          if (filtered.length === 0) {\n            delete STYLE_HANDLER_MAP[oldStyleName];\n          } else {\n            STYLE_HANDLER_MAP[oldStyleName] = filtered;\n          }\n        }\n      }\n    }\n  }\n\n  // Register the new handler under its lookup styles\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      existing.push(handler);\n    } else {\n      STYLE_HANDLER_MAP[styleName] = [handler];\n    }\n  }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n  const fn = handler as unknown as (props: unknown) => unknown;\n  const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n  wrapped.__lookupStyles = handler.__lookupStyles;\n  return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n *   handlers: {\n *     fill: ({ fill }) => {\n *       if (fill?.startsWith('gradient:')) {\n *         return { background: fill.slice(9) };\n *       }\n *       return styleHandlers.fill({ fill });\n *     },\n *   },\n * });\n * ```\n */\nexport const styleHandlers = {\n  align: wrapHandler(alignStyle),\n  border: wrapHandler(borderStyle),\n  color: wrapHandler(colorStyle),\n  display: wrapHandler(displayStyle),\n  fade: wrapHandler(fadeStyle),\n  fill: wrapHandler(fillStyle),\n  svgFill: wrapHandler(svgFillStyle),\n  flow: wrapHandler(flowStyle),\n  gap: wrapHandler(gapStyle),\n  height: wrapHandler(heightStyle),\n  inset: wrapHandler(insetStyle),\n  justify: wrapHandler(justifyStyle),\n  margin: wrapHandler(marginStyle),\n  outline: wrapHandler(outlineStyle),\n  padding: wrapHandler(paddingStyle),\n  preset: wrapHandler(presetStyle),\n  radius: wrapHandler(radiusStyle),\n  scrollbar: wrapHandler(scrollbarStyle),\n  shadow: wrapHandler(shadowStyle),\n  transition: wrapHandler(transitionStyle),\n  width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"predefined.js","names":[],"sources":["../../src/styles/predefined.ts"],"sourcesContent":["import { isDevEnv } from '../utils/is-dev-env';\nimport type {\n  RawStyleHandler,\n  StyleHandler,\n  StyleHandlerDefinition,\n} from '../utils/styles';\n\nimport { borderStyle } from './border';\nimport { colorStyle } from './color';\nimport { createStyle } from './createStyle';\nimport { displayStyle } from './display';\nimport { fadeStyle } from './fade';\nimport { fillStyle, svgFillStyle } from './fill';\nimport { flowStyle } from './flow';\nimport { gapStyle } from './gap';\nimport { heightStyle } from './height';\nimport { insetStyle } from './inset';\nimport { marginStyle } from './margin';\nimport { outlineStyle } from './outline';\nimport { paddingStyle } from './padding';\nimport { placementStyle } from './placement';\nimport { presetStyle } from './preset';\nimport { radiusStyle } from './radius';\nimport { scrollMarginStyle } from './scrollMargin';\nimport { scrollbarStyle } from './scrollbar';\nimport { shadowStyle } from './shadow';\nimport { transitionStyle } from './transition';\nimport { widthStyle } from './width';\n\nconst devMode = isDevEnv();\n\nconst _numberConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return `${val}px`;\n  }\n\n  return val;\n};\nconst columnsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'minmax(1px, 1fr) '.repeat(val).trim();\n  }\n\n  return;\n};\nconst rowsConverter = (val: string | number | boolean | undefined) => {\n  if (typeof val === 'number') {\n    return 'auto '.repeat(val).trim();\n  }\n\n  return;\n};\n\ntype StyleHandlerMap = Record<string, StyleHandler[]>;\n\nexport const STYLE_HANDLER_MAP: StyleHandlerMap = {};\n\n// Store initial handler state for reset functionality\nlet initialHandlerMapSnapshot: StyleHandlerMap | null = null;\n\n/**\n * Capture a snapshot of the current STYLE_HANDLER_MAP.\n * Called after predefine() to preserve built-in handler state.\n */\nfunction captureInitialHandlerState(): void {\n  initialHandlerMapSnapshot = {};\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    // Shallow copy the array - handlers themselves are immutable\n    initialHandlerMapSnapshot[key] = [...STYLE_HANDLER_MAP[key]];\n  }\n}\n\n/**\n * Reset STYLE_HANDLER_MAP to the initial built-in state.\n * Called by resetConfig() to restore handlers after tests.\n */\nexport function resetHandlers(): void {\n  if (!initialHandlerMapSnapshot) {\n    // predefine() hasn't been called yet, nothing to reset\n    return;\n  }\n\n  // Clear current map\n  for (const key of Object.keys(STYLE_HANDLER_MAP)) {\n    delete STYLE_HANDLER_MAP[key];\n  }\n\n  // Restore initial state\n  for (const key of Object.keys(initialHandlerMapSnapshot)) {\n    STYLE_HANDLER_MAP[key] = [...initialHandlerMapSnapshot[key]];\n  }\n}\n\nexport function defineCustomStyle(\n  names: string[] | StyleHandler,\n  handler?: RawStyleHandler,\n) {\n  let handlerWithLookup: StyleHandler;\n\n  if (typeof names === 'function') {\n    handlerWithLookup = names;\n    names = handlerWithLookup.__lookupStyles;\n  } else if (handler) {\n    handlerWithLookup = Object.assign(handler, { __lookupStyles: names });\n  } else {\n    console.warn('Tasty: incorrect custom style definition: ', names);\n    return;\n  }\n\n  if (Array.isArray(names)) {\n    // just to pass type checking\n    names.forEach((name) => {\n      if (!STYLE_HANDLER_MAP[name]) {\n        STYLE_HANDLER_MAP[name] = [];\n      }\n\n      STYLE_HANDLER_MAP[name].push(handlerWithLookup);\n    });\n  }\n}\n\ntype ConverterHandler = (\n  s: string | boolean | number | undefined,\n) => string | undefined;\n\nexport function defineStyleAlias(\n  styleName: string,\n  cssStyleName?: string,\n  converter?: ConverterHandler,\n) {\n  const styleHandler = createStyle(styleName, cssStyleName, converter);\n\n  if (!STYLE_HANDLER_MAP[styleName]) {\n    STYLE_HANDLER_MAP[styleName] = [];\n  }\n\n  STYLE_HANDLER_MAP[styleName].push(styleHandler);\n}\n\nexport function predefine() {\n  // Style aliases\n  defineStyleAlias('gridAreas', 'grid-template-areas');\n  defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);\n  defineStyleAlias('gridRows', 'grid-template-rows', rowsConverter);\n  defineStyleAlias(\n    'gridTemplate',\n    'grid-template',\n    (val: string | boolean | number | undefined) => {\n      if (typeof val !== 'string') return;\n\n      return val\n        .split('/')\n        .map((s, i) => (i ? columnsConverter : rowsConverter)(s))\n        .join('/');\n    },\n  );\n  // Note: outlineOffset is now handled by outlineStyle\n\n  [\n    displayStyle,\n    transitionStyle,\n    fillStyle,\n    svgFillStyle,\n    widthStyle,\n    marginStyle,\n    gapStyle,\n    flowStyle,\n    colorStyle,\n    heightStyle,\n    radiusStyle,\n    borderStyle,\n    shadowStyle,\n    paddingStyle,\n    placementStyle,\n    presetStyle,\n    scrollMarginStyle,\n    outlineStyle,\n    scrollbarStyle,\n    fadeStyle,\n    insetStyle,\n  ]\n    // @ts-expect-error handler type varies across built-in style handlers\n    .forEach((handler) => defineCustomStyle(handler));\n\n  // Capture initial state after all built-in handlers are registered\n  captureInitialHandlerState();\n\n  return { STYLE_HANDLER_MAP, defineCustomStyle, defineStyleAlias };\n}\n\n// ============================================================================\n// Handler Registration API (for configure())\n// ============================================================================\n\n/**\n * Normalize a handler definition to a StyleHandler with __lookupStyles.\n * - Function only: lookup styles inferred from key name\n * - [string, fn]: single lookup style\n * - [string[], fn]: multiple lookup styles\n */\nexport function normalizeHandlerDefinition(\n  keyName: string,\n  definition: StyleHandlerDefinition,\n): StyleHandler {\n  let handler: RawStyleHandler;\n  let lookupStyles: string[];\n\n  if (typeof definition === 'function') {\n    // Function only - lookup styles inferred from key name\n    handler = definition;\n    lookupStyles = [keyName];\n  } else if (Array.isArray(definition)) {\n    const [first, fn] = definition;\n\n    if (typeof fn !== 'function') {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'Tuple must have a function as the second element: [string, function] or [string[], function].',\n      );\n    }\n\n    handler = fn;\n\n    if (typeof first === 'string') {\n      // [string, fn] - single lookup style\n      lookupStyles = [first];\n    } else if (Array.isArray(first)) {\n      // [string[], fn] - multiple lookup styles\n      lookupStyles = first;\n    } else {\n      throw new Error(\n        `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n          'First element must be a string or string array.',\n      );\n    }\n  } else {\n    throw new Error(\n      `[Tasty] Invalid handler definition for \"${keyName}\". ` +\n        'Expected function, [string, function], or [string[], function].',\n    );\n  }\n\n  // Validate handler in dev mode\n  validateHandler(keyName, handler, lookupStyles);\n\n  // Wrap the handler to avoid mutation issues when the same function\n  // is reused for multiple handler definitions. Each registration\n  // gets its own function identity with its own __lookupStyles.\n  const wrappedHandler = ((props) => handler(props)) as StyleHandler;\n  wrappedHandler.__lookupStyles = lookupStyles;\n\n  return wrappedHandler;\n}\n\n/**\n * Validate a handler definition in development mode.\n */\nfunction validateHandler(\n  name: string,\n  handler: RawStyleHandler,\n  lookupStyles: string[],\n): void {\n  if (!devMode) return;\n\n  if (typeof handler !== 'function') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" is not a function. ` +\n        'Handlers must be functions that return CSSMap, CSSMap[], or null.',\n    );\n  }\n\n  if (\n    !lookupStyles ||\n    !Array.isArray(lookupStyles) ||\n    lookupStyles.length === 0\n  ) {\n    console.warn(\n      `[Tasty] Handler \"${name}\" has invalid lookupStyles. ` +\n        'Expected non-empty array of style names.',\n    );\n  }\n}\n\n/**\n * Validate a handler result in development mode.\n * Call this after invoking a handler to check the return value.\n */\nexport function validateHandlerResult(name: string, result: unknown): void {\n  if (!devMode) return;\n  if (result === undefined || result === null) return; // void is valid\n\n  // Check for empty string (migration from old pattern)\n  if (result === '') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned empty string. ` +\n        'Return null instead for no output.',\n    );\n    return;\n  }\n\n  // Check result is object (CSSMap or CSSMap[])\n  if (typeof result !== 'object') {\n    console.warn(\n      `[Tasty] Handler \"${name}\" returned invalid type: ${typeof result}. ` +\n        'Expected CSSMap, CSSMap[], or null.',\n    );\n  }\n}\n\n/**\n * Register a custom handler, replacing any existing handlers for the same lookup styles.\n * This is called by configure() to process user-defined handlers.\n *\n * When registering a handler for style X, any existing handler that processes X\n * is removed from ALL its lookup styles to prevent double-processing.\n * For example, if gapStyle handles ['display', 'flow', 'gap'] and a new handler\n * is registered for just ['gap'], gapStyle is removed from display and flow too.\n */\nexport function registerHandler(handler: StyleHandler): void {\n  const lookupStyles = handler.__lookupStyles;\n\n  if (!lookupStyles || lookupStyles.length === 0) {\n    if (devMode) {\n      console.warn(\n        '[Tasty] Cannot register handler without __lookupStyles property.',\n      );\n    }\n    return;\n  }\n\n  // Find and remove existing handlers that would conflict\n  // A handler conflicts if it handles any of the same styles as the new handler\n  const handlersToRemove = new Set<StyleHandler>();\n\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      for (const existingHandler of existing) {\n        handlersToRemove.add(existingHandler);\n      }\n    }\n  }\n\n  // Remove conflicting handlers from ALL their lookup styles\n  for (const oldHandler of handlersToRemove) {\n    const oldLookupStyles = oldHandler.__lookupStyles;\n    if (oldLookupStyles) {\n      for (const oldStyleName of oldLookupStyles) {\n        const handlers = STYLE_HANDLER_MAP[oldStyleName];\n        if (handlers) {\n          const filtered = handlers.filter((h) => h !== oldHandler);\n          if (filtered.length === 0) {\n            delete STYLE_HANDLER_MAP[oldStyleName];\n          } else {\n            STYLE_HANDLER_MAP[oldStyleName] = filtered;\n          }\n        }\n      }\n    }\n  }\n\n  // Register the new handler under its lookup styles\n  for (const styleName of lookupStyles) {\n    const existing = STYLE_HANDLER_MAP[styleName];\n    if (existing) {\n      existing.push(handler);\n    } else {\n      STYLE_HANDLER_MAP[styleName] = [handler];\n    }\n  }\n}\n\n// ============================================================================\n// Wrapped Style Handlers Export\n// ============================================================================\n\n/**\n * Create a wrapped handler that can be safely called by users.\n * The wrapper preserves __lookupStyles for proper registration.\n */\nfunction wrapHandler<T extends { __lookupStyles: string[] }>(handler: T): T {\n  const fn = handler as unknown as (props: unknown) => unknown;\n  const wrapped = ((props: unknown) => fn(props)) as unknown as T;\n  wrapped.__lookupStyles = handler.__lookupStyles;\n  return wrapped;\n}\n\n/**\n * Exported object containing wrapped predefined style handlers.\n * Users can import and call these to extend or delegate to built-in behavior.\n *\n * Internal handlers use *Style suffix for searchability.\n * External API uses short names for convenience.\n *\n * @example\n * ```ts\n * import { styleHandlers, configure } from '@tenphi/tasty';\n *\n * configure({\n *   handlers: {\n *     fill: ({ fill }) => {\n *       if (fill?.startsWith('gradient:')) {\n *         return { background: fill.slice(9) };\n *       }\n *       return styleHandlers.fill({ fill });\n *     },\n *   },\n * });\n * ```\n */\nexport const styleHandlers = {\n  border: wrapHandler(borderStyle),\n  color: wrapHandler(colorStyle),\n  display: wrapHandler(displayStyle),\n  fade: wrapHandler(fadeStyle),\n  fill: wrapHandler(fillStyle),\n  svgFill: wrapHandler(svgFillStyle),\n  flow: wrapHandler(flowStyle),\n  gap: wrapHandler(gapStyle),\n  height: wrapHandler(heightStyle),\n  inset: wrapHandler(insetStyle),\n  margin: wrapHandler(marginStyle),\n  outline: wrapHandler(outlineStyle),\n  padding: wrapHandler(paddingStyle),\n  placement: wrapHandler(placementStyle),\n  preset: wrapHandler(presetStyle),\n  radius: wrapHandler(radiusStyle),\n  scrollMargin: wrapHandler(scrollMarginStyle),\n  scrollbar: wrapHandler(scrollbarStyle),\n  shadow: wrapHandler(shadowStyle),\n  transition: wrapHandler(transitionStyle),\n  width: wrapHandler(widthStyle),\n} as const;\n"],"mappings":"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"}

package/dist/styles/preset.d.ts

@@ -43,7 +43,7 @@ declare function presetStyle({
   fontStyle,
   fontFamily,
   font
-}: PresetStyleProps): Styles | undefined;
+}: PresetStyleProps): Styles | null;
 declare namespace presetStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/preset.js

@@ -1,5 +1,5 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { parseStyle } from "../utils/styles.js";
-
 //#region src/styles/preset.ts
 const PRESET_MODIFIERS = new Set([
 	"strong",
@@ -18,7 +18,7 @@ function toCSS(value, isNumeric) {
 }
 function setCSSValue(styles, styleName, presetName, { varOnly, cssOnly } = {}) {
 	const value = (() => {
-		if (presetName === "inherit") return "inherit";
+		if (CSS_WIDE_KEYWORDS.has(presetName)) return presetName;
 		const defaultValue = `var(--default-${styleName}${styleName === "font-family" ? ", var(--font-sans, var(--font-sans-fallback))" : ""})`;
 		const fontSuffix = styleName === "font-family" ? ", var(--font-sans, var(--font-sans-fallback))" : "";
 		if (presetName === "default") return `${defaultValue}${fontSuffix}`;
@@ -68,7 +68,7 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 		const { parts } = parseStyle(preset === true ? "" : String(preset)).groups[0] ?? { parts: [] };
 		const namePart = parts[0];
 		const modPart = parts[1];
-		const nameToken = namePart?.mods[0] ?? "";
+		const nameToken = namePart?.mods[0] ?? namePart?.values[0] ?? "";
 		const isModOnly = PRESET_MODIFIERS.has(nameToken);
 		const name = isModOnly ? "inherit" : nameToken || "inherit";
 		const modifier = isModOnly ? nameToken : modPart?.mods[0] ?? "";
@@ -102,12 +102,12 @@ function presetStyle({ preset, fontSize, lineHeight, textTransform, letterSpacin
 	const fontWeightVal = toCSS(fontWeight, false);
 	if (fontWeightVal) styles["font-weight"] = fontWeightVal;
 	if (fontStyle != null) if (fontStyle === true) styles["font-style"] = "italic";
-	else if (fontStyle !== "inherit") styles["font-style"] = fontStyle ? "italic" : "normal";
-	else styles["font-style"] = "inherit";
+	else if (typeof fontStyle === "string" && CSS_WIDE_KEYWORDS.has(fontStyle)) styles["font-style"] = fontStyle;
+	else styles["font-style"] = fontStyle ? "italic" : "normal";
 	if (textTransform) styles["text-transform"] = textTransform;
 	const fontFamily_ = resolveFontFamily(font, fontFamily);
 	if (fontFamily_) styles["font-family"] = fontFamily_;
-	if (Object.keys(styles).length === 0) return;
+	if (Object.keys(styles).length === 0) return null;
 	return styles;
 }
 presetStyle.__lookupStyles = [
@@ -121,7 +121,7 @@ presetStyle.__lookupStyles = [
 	"fontFamily",
 	"font"
 ];
-
 //#endregion
 export { presetStyle };
+
 //# sourceMappingURL=preset.js.map

package/dist/styles/preset.js.map

@@ -1 +1 @@
-{"version":3,"file":"preset.js","names":[],"sources":["../../src/styles/preset.ts"],"sourcesContent":["import { parseStyle } from '../utils/styles';\n\nimport type { Styles } from './types';\n\nconst PRESET_MODIFIERS = new Set(['strong', 'bold', 'italic', 'icon', 'tight']);\n\n/**\n * Convert a value to CSS, handling numbers as pixels for numeric properties\n */\nfunction toCSS(\n  value: string | number | undefined,\n  isNumeric: boolean,\n): string | null {\n  if (value == null) return null;\n  if (typeof value === 'number') {\n    return isNumeric ? `${value}px` : String(value);\n  }\n  // Parse through style parser to handle custom units like 1x, 2r, etc.\n  const processed = parseStyle(String(value));\n  return processed.groups[0]?.values[0] || String(value);\n}\n\nfunction setCSSValue(\n  styles: Styles,\n  styleName: string,\n  presetName: string,\n  { varOnly, cssOnly }: { varOnly?: boolean; cssOnly?: boolean } = {},\n) {\n  const value = (() => {\n    if (presetName === 'inherit') {\n      return 'inherit';\n    }\n\n    const defaultValue = `var(--default-${styleName}${\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : ''\n    })`;\n    const fontSuffix =\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : '';\n\n    if (presetName === 'default') {\n      return `${defaultValue}${fontSuffix}`;\n    } else {\n      return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;\n    }\n  })();\n\n  if (!cssOnly) {\n    styles[`--${styleName}`] = value;\n  }\n\n  if (!varOnly) {\n    styles[styleName] = value;\n  }\n}\n\ninterface PresetStyleProps {\n  preset?: string | boolean;\n  fontSize?: string | number;\n  lineHeight?: string | number;\n  textTransform?: string;\n  letterSpacing?: string | number;\n  fontWeight?: string | number;\n  fontStyle?: string | boolean;\n  fontFamily?: string;\n  /** Alias for fontFamily with special handling for 'monospace' and boolean */\n  font?: string | boolean;\n}\n\n/**\n * Resolve font/fontFamily value to CSS font-family string.\n *\n * - `font=\"monospace\"` → var(--font-mono, var(--font-mono-fallback))\n * - `font={true}` → var(--font-sans, var(--font-sans-fallback))\n * - `font=\"CustomFont\"` → CustomFont, var(--font-sans, var(--font-sans-fallback))\n * - `fontFamily=\"Arial\"` → Arial (direct, no fallback)\n */\nfunction resolveFontFamily(\n  font: string | boolean | undefined,\n  fontFamily: string | undefined,\n): string | null {\n  // fontFamily takes precedence as a direct value\n  if (fontFamily) {\n    return fontFamily;\n  }\n\n  if (font == null || font === false) {\n    return null;\n  }\n\n  if (font === 'monospace') {\n    return 'var(--font-mono, var(--font-mono-fallback))';\n  }\n\n  if (font === true) {\n    return 'var(--font-sans, var(--font-sans-fallback))';\n  }\n\n  return `${font}, var(--font-sans, var(--font-sans-fallback))`;\n}\n\n/**\n * Handles typography preset and individual font properties.\n *\n * Preset syntax uses `/` to separate name from modifier:\n * - `preset=\"h1\"` — name only\n * - `preset=\"h2 / strong\"` — name + modifier\n * - `preset=\"bold\"` — modifier-only shorthand (name defaults to `inherit`)\n *\n * When `preset` is defined, it sets up CSS custom properties for typography.\n * Individual font props can be used with or without `preset`:\n * - With `preset`: overrides the preset value for that property\n * - Without `preset`: outputs the CSS directly\n *\n * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.\n * fontWeight accepts numbers directly (e.g., 400, 700).\n *\n * font vs fontFamily:\n * - `font` is the recommended prop with special handling (monospace, boolean, fallback)\n * - `fontFamily` is a direct value without special handling\n */\nexport function presetStyle({\n  preset,\n  fontSize,\n  lineHeight,\n  textTransform,\n  letterSpacing,\n  fontWeight,\n  fontStyle,\n  fontFamily,\n  font,\n}: PresetStyleProps) {\n  const styles: Styles = {};\n  const hasPreset = preset != null && preset !== false;\n\n  // Handle preset if defined\n  if (hasPreset) {\n    const presetValue = preset === true ? '' : String(preset);\n\n    const processed = parseStyle(presetValue);\n    const group = processed.groups[0];\n    const { parts } = group ?? { parts: [] };\n\n    // parts[0] = preset name (or a modifier for shorthand like preset=\"bold\")\n    // parts[1] = optional modifier after slash (e.g. \"t3 / bold\")\n    const namePart = parts[0];\n    const modPart = parts[1];\n\n    const nameToken = namePart?.mods[0] ?? '';\n    const isModOnly = PRESET_MODIFIERS.has(nameToken);\n\n    const name = isModOnly ? 'inherit' : nameToken || 'inherit';\n    const modifier = isModOnly ? nameToken : (modPart?.mods[0] ?? '');\n\n    const isStrong = modifier === 'strong' || modifier === 'bold';\n    const isItalic = modifier === 'italic';\n    const isIcon = modifier === 'icon';\n    const isTight = modifier === 'tight';\n\n    // Set preset values for properties not explicitly overridden\n    if (fontSize == null) {\n      setCSSValue(styles, 'font-size', name, { cssOnly: true });\n    }\n    if (lineHeight == null) {\n      setCSSValue(styles, 'line-height', name, { cssOnly: true });\n    }\n    if (letterSpacing == null) {\n      setCSSValue(styles, 'letter-spacing', name, { cssOnly: true });\n    }\n    if (fontWeight == null) {\n      setCSSValue(styles, 'font-weight', name, { cssOnly: true });\n    }\n    if (fontStyle == null) {\n      setCSSValue(styles, 'font-style', name, { cssOnly: true });\n    }\n    if (textTransform == null) {\n      setCSSValue(styles, 'text-transform', name, { cssOnly: true });\n    }\n    if (fontFamily == null && font == null) {\n      setCSSValue(styles, 'font-family', name, { cssOnly: true });\n    }\n\n    setCSSValue(styles, 'bold-font-weight', name, { varOnly: true });\n    setCSSValue(styles, 'icon-size', name, { varOnly: true });\n\n    if (isStrong) {\n      styles['font-weight'] = 'var(--bold-font-weight)';\n    }\n    if (isItalic) {\n      styles['font-style'] = 'italic';\n    }\n    if (isIcon) {\n      styles['font-size'] = 'var(--icon-size)';\n      styles['line-height'] = 'var(--icon-size)';\n    }\n    if (isTight) {\n      styles['line-height'] = '1em';\n    }\n  }\n\n  // Handle individual font properties (work with or without preset)\n  const fontSizeVal = toCSS(fontSize, true);\n  if (fontSizeVal) {\n    styles['font-size'] = fontSizeVal;\n  }\n\n  const lineHeightVal = toCSS(lineHeight, true);\n  if (lineHeightVal) {\n    styles['line-height'] = lineHeightVal;\n  }\n\n  const letterSpacingVal = toCSS(letterSpacing, true);\n  if (letterSpacingVal) {\n    styles['letter-spacing'] = letterSpacingVal;\n  }\n\n  // fontWeight: numbers should NOT get 'px' suffix\n  const fontWeightVal = toCSS(fontWeight, false);\n  if (fontWeightVal) {\n    styles['font-weight'] = fontWeightVal;\n  }\n\n  // fontStyle: handle boolean (true → italic) and string values\n  if (fontStyle != null) {\n    if (fontStyle === true) {\n      styles['font-style'] = 'italic';\n    } else if (fontStyle !== 'inherit') {\n      styles['font-style'] = fontStyle ? 'italic' : 'normal';\n    } else {\n      styles['font-style'] = 'inherit';\n    }\n  }\n\n  if (textTransform) {\n    styles['text-transform'] = textTransform;\n  }\n\n  // Handle font/fontFamily (font has special handling, fontFamily is direct)\n  const fontFamily_ = resolveFontFamily(font, fontFamily);\n  if (fontFamily_) {\n    styles['font-family'] = fontFamily_;\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(styles).length === 0) {\n    return;\n  }\n\n  return styles;\n}\n\npresetStyle.__lookupStyles = [\n  'preset',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n  'fontFamily',\n  'font',\n];\n"],"mappings":";;;AAIA,MAAM,mBAAmB,IAAI,IAAI;CAAC;CAAU;CAAQ;CAAU;CAAQ;CAAQ,CAAC;;;;AAK/E,SAAS,MACP,OACA,WACe;AACf,KAAI,SAAS,KAAM,QAAO;AAC1B,KAAI,OAAO,UAAU,SACnB,QAAO,YAAY,GAAG,MAAM,MAAM,OAAO,MAAM;AAIjD,QADkB,WAAW,OAAO,MAAM,CAAC,CAC1B,OAAO,IAAI,OAAO,MAAM,OAAO,MAAM;;AAGxD,SAAS,YACP,QACA,WACA,YACA,EAAE,SAAS,YAAsD,EAAE,EACnE;CACA,MAAM,eAAe;AACnB,MAAI,eAAe,UACjB,QAAO;EAGT,MAAM,eAAe,iBAAiB,YACpC,cAAc,gBACV,kDACA,GACL;EACD,MAAM,aACJ,cAAc,gBACV,kDACA;AAEN,MAAI,eAAe,UACjB,QAAO,GAAG,eAAe;MAEzB,QAAO,SAAS,WAAW,GAAG,UAAU,IAAI,aAAa,GAAG;KAE5D;AAEJ,KAAI,CAAC,QACH,QAAO,KAAK,eAAe;AAG7B,KAAI,CAAC,QACH,QAAO,aAAa;;;;;;;;;;AAyBxB,SAAS,kBACP,MACA,YACe;AAEf,KAAI,WACF,QAAO;AAGT,KAAI,QAAQ,QAAQ,SAAS,MAC3B,QAAO;AAGT,KAAI,SAAS,YACX,QAAO;AAGT,KAAI,SAAS,KACX,QAAO;AAGT,QAAO,GAAG,KAAK;;;;;;;;;;;;;;;;;;;;;;AAuBjB,SAAgB,YAAY,EAC1B,QACA,UACA,YACA,eACA,eACA,YACA,WACA,YACA,QACmB;CACnB,MAAM,SAAiB,EAAE;AAIzB,KAHkB,UAAU,QAAQ,WAAW,OAGhC;EAKb,MAAM,EAAE,UAFU,WAFE,WAAW,OAAO,KAAK,OAAO,OAAO,CAEhB,CACjB,OAAO,MACJ,EAAE,OAAO,EAAE,EAAE;EAIxC,MAAM,WAAW,MAAM;EACvB,MAAM,UAAU,MAAM;EAEtB,MAAM,YAAY,UAAU,KAAK,MAAM;EACvC,MAAM,YAAY,iBAAiB,IAAI,UAAU;EAEjD,MAAM,OAAO,YAAY,YAAY,aAAa;EAClD,MAAM,WAAW,YAAY,YAAa,SAAS,KAAK,MAAM;EAE9D,MAAM,WAAW,aAAa,YAAY,aAAa;EACvD,MAAM,WAAW,aAAa;EAC9B,MAAM,SAAS,aAAa;EAC5B,MAAM,UAAU,aAAa;AAG7B,MAAI,YAAY,KACd,aAAY,QAAQ,aAAa,MAAM,EAAE,SAAS,MAAM,CAAC;AAE3D,MAAI,cAAc,KAChB,aAAY,QAAQ,eAAe,MAAM,EAAE,SAAS,MAAM,CAAC;AAE7D,MAAI,iBAAiB,KACnB,aAAY,QAAQ,kBAAkB,MAAM,EAAE,SAAS,MAAM,CAAC;AAEhE,MAAI,cAAc,KAChB,aAAY,QAAQ,eAAe,MAAM,EAAE,SAAS,MAAM,CAAC;AAE7D,MAAI,aAAa,KACf,aAAY,QAAQ,cAAc,MAAM,EAAE,SAAS,MAAM,CAAC;AAE5D,MAAI,iBAAiB,KACnB,aAAY,QAAQ,kBAAkB,MAAM,EAAE,SAAS,MAAM,CAAC;AAEhE,MAAI,cAAc,QAAQ,QAAQ,KAChC,aAAY,QAAQ,eAAe,MAAM,EAAE,SAAS,MAAM,CAAC;AAG7D,cAAY,QAAQ,oBAAoB,MAAM,EAAE,SAAS,MAAM,CAAC;AAChE,cAAY,QAAQ,aAAa,MAAM,EAAE,SAAS,MAAM,CAAC;AAEzD,MAAI,SACF,QAAO,iBAAiB;AAE1B,MAAI,SACF,QAAO,gBAAgB;AAEzB,MAAI,QAAQ;AACV,UAAO,eAAe;AACtB,UAAO,iBAAiB;;AAE1B,MAAI,QACF,QAAO,iBAAiB;;CAK5B,MAAM,cAAc,MAAM,UAAU,KAAK;AACzC,KAAI,YACF,QAAO,eAAe;CAGxB,MAAM,gBAAgB,MAAM,YAAY,KAAK;AAC7C,KAAI,cACF,QAAO,iBAAiB;CAG1B,MAAM,mBAAmB,MAAM,eAAe,KAAK;AACnD,KAAI,iBACF,QAAO,oBAAoB;CAI7B,MAAM,gBAAgB,MAAM,YAAY,MAAM;AAC9C,KAAI,cACF,QAAO,iBAAiB;AAI1B,KAAI,aAAa,KACf,KAAI,cAAc,KAChB,QAAO,gBAAgB;UACd,cAAc,UACvB,QAAO,gBAAgB,YAAY,WAAW;KAE9C,QAAO,gBAAgB;AAI3B,KAAI,cACF,QAAO,oBAAoB;CAI7B,MAAM,cAAc,kBAAkB,MAAM,WAAW;AACvD,KAAI,YACF,QAAO,iBAAiB;AAI1B,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"preset.js","names":[],"sources":["../../src/styles/preset.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { parseStyle } from '../utils/styles';\n\nimport type { Styles } from './types';\n\nconst PRESET_MODIFIERS = new Set(['strong', 'bold', 'italic', 'icon', 'tight']);\n\n/**\n * Convert a value to CSS, handling numbers as pixels for numeric properties\n */\nfunction toCSS(\n  value: string | number | undefined,\n  isNumeric: boolean,\n): string | null {\n  if (value == null) return null;\n  if (typeof value === 'number') {\n    return isNumeric ? `${value}px` : String(value);\n  }\n  // Parse through style parser to handle custom units like 1x, 2r, etc.\n  const processed = parseStyle(String(value));\n  return processed.groups[0]?.values[0] || String(value);\n}\n\nfunction setCSSValue(\n  styles: Styles,\n  styleName: string,\n  presetName: string,\n  { varOnly, cssOnly }: { varOnly?: boolean; cssOnly?: boolean } = {},\n) {\n  const value = (() => {\n    if (CSS_WIDE_KEYWORDS.has(presetName)) {\n      return presetName;\n    }\n\n    const defaultValue = `var(--default-${styleName}${\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : ''\n    })`;\n    const fontSuffix =\n      styleName === 'font-family'\n        ? ', var(--font-sans, var(--font-sans-fallback))'\n        : '';\n\n    if (presetName === 'default') {\n      return `${defaultValue}${fontSuffix}`;\n    } else {\n      return `var(--${presetName}-${styleName}, ${defaultValue})${fontSuffix}`;\n    }\n  })();\n\n  if (!cssOnly) {\n    styles[`--${styleName}`] = value;\n  }\n\n  if (!varOnly) {\n    styles[styleName] = value;\n  }\n}\n\ninterface PresetStyleProps {\n  preset?: string | boolean;\n  fontSize?: string | number;\n  lineHeight?: string | number;\n  textTransform?: string;\n  letterSpacing?: string | number;\n  fontWeight?: string | number;\n  fontStyle?: string | boolean;\n  fontFamily?: string;\n  /** Alias for fontFamily with special handling for 'monospace' and boolean */\n  font?: string | boolean;\n}\n\n/**\n * Resolve font/fontFamily value to CSS font-family string.\n *\n * - `font=\"monospace\"` → var(--font-mono, var(--font-mono-fallback))\n * - `font={true}` → var(--font-sans, var(--font-sans-fallback))\n * - `font=\"CustomFont\"` → CustomFont, var(--font-sans, var(--font-sans-fallback))\n * - `fontFamily=\"Arial\"` → Arial (direct, no fallback)\n */\nfunction resolveFontFamily(\n  font: string | boolean | undefined,\n  fontFamily: string | undefined,\n): string | null {\n  // fontFamily takes precedence as a direct value\n  if (fontFamily) {\n    return fontFamily;\n  }\n\n  if (font == null || font === false) {\n    return null;\n  }\n\n  if (font === 'monospace') {\n    return 'var(--font-mono, var(--font-mono-fallback))';\n  }\n\n  if (font === true) {\n    return 'var(--font-sans, var(--font-sans-fallback))';\n  }\n\n  return `${font}, var(--font-sans, var(--font-sans-fallback))`;\n}\n\n/**\n * Handles typography preset and individual font properties.\n *\n * Preset syntax uses `/` to separate name from modifier:\n * - `preset=\"h1\"` — name only\n * - `preset=\"h2 / strong\"` — name + modifier\n * - `preset=\"bold\"` — modifier-only shorthand (name defaults to `inherit`)\n *\n * When `preset` is defined, it sets up CSS custom properties for typography.\n * Individual font props can be used with or without `preset`:\n * - With `preset`: overrides the preset value for that property\n * - Without `preset`: outputs the CSS directly\n *\n * Number values are converted to pixels for fontSize, lineHeight, letterSpacing.\n * fontWeight accepts numbers directly (e.g., 400, 700).\n *\n * font vs fontFamily:\n * - `font` is the recommended prop with special handling (monospace, boolean, fallback)\n * - `fontFamily` is a direct value without special handling\n */\nexport function presetStyle({\n  preset,\n  fontSize,\n  lineHeight,\n  textTransform,\n  letterSpacing,\n  fontWeight,\n  fontStyle,\n  fontFamily,\n  font,\n}: PresetStyleProps) {\n  const styles: Styles = {};\n  const hasPreset = preset != null && preset !== false;\n\n  // Handle preset if defined\n  if (hasPreset) {\n    const presetValue = preset === true ? '' : String(preset);\n\n    const processed = parseStyle(presetValue);\n    const group = processed.groups[0];\n    const { parts } = group ?? { parts: [] };\n\n    // parts[0] = preset name (or a modifier for shorthand like preset=\"bold\")\n    // parts[1] = optional modifier after slash (e.g. \"t3 / bold\")\n    const namePart = parts[0];\n    const modPart = parts[1];\n\n    const nameToken = namePart?.mods[0] ?? namePart?.values[0] ?? '';\n    const isModOnly = PRESET_MODIFIERS.has(nameToken);\n\n    const name = isModOnly ? 'inherit' : nameToken || 'inherit';\n    const modifier = isModOnly ? nameToken : (modPart?.mods[0] ?? '');\n\n    const isStrong = modifier === 'strong' || modifier === 'bold';\n    const isItalic = modifier === 'italic';\n    const isIcon = modifier === 'icon';\n    const isTight = modifier === 'tight';\n\n    // Set preset values for properties not explicitly overridden\n    if (fontSize == null) {\n      setCSSValue(styles, 'font-size', name, { cssOnly: true });\n    }\n    if (lineHeight == null) {\n      setCSSValue(styles, 'line-height', name, { cssOnly: true });\n    }\n    if (letterSpacing == null) {\n      setCSSValue(styles, 'letter-spacing', name, { cssOnly: true });\n    }\n    if (fontWeight == null) {\n      setCSSValue(styles, 'font-weight', name, { cssOnly: true });\n    }\n    if (fontStyle == null) {\n      setCSSValue(styles, 'font-style', name, { cssOnly: true });\n    }\n    if (textTransform == null) {\n      setCSSValue(styles, 'text-transform', name, { cssOnly: true });\n    }\n    if (fontFamily == null && font == null) {\n      setCSSValue(styles, 'font-family', name, { cssOnly: true });\n    }\n\n    setCSSValue(styles, 'bold-font-weight', name, { varOnly: true });\n    setCSSValue(styles, 'icon-size', name, { varOnly: true });\n\n    if (isStrong) {\n      styles['font-weight'] = 'var(--bold-font-weight)';\n    }\n    if (isItalic) {\n      styles['font-style'] = 'italic';\n    }\n    if (isIcon) {\n      styles['font-size'] = 'var(--icon-size)';\n      styles['line-height'] = 'var(--icon-size)';\n    }\n    if (isTight) {\n      styles['line-height'] = '1em';\n    }\n  }\n\n  // Handle individual font properties (work with or without preset)\n  const fontSizeVal = toCSS(fontSize, true);\n  if (fontSizeVal) {\n    styles['font-size'] = fontSizeVal;\n  }\n\n  const lineHeightVal = toCSS(lineHeight, true);\n  if (lineHeightVal) {\n    styles['line-height'] = lineHeightVal;\n  }\n\n  const letterSpacingVal = toCSS(letterSpacing, true);\n  if (letterSpacingVal) {\n    styles['letter-spacing'] = letterSpacingVal;\n  }\n\n  // fontWeight: numbers should NOT get 'px' suffix\n  const fontWeightVal = toCSS(fontWeight, false);\n  if (fontWeightVal) {\n    styles['font-weight'] = fontWeightVal;\n  }\n\n  if (fontStyle != null) {\n    if (fontStyle === true) {\n      styles['font-style'] = 'italic';\n    } else if (\n      typeof fontStyle === 'string' &&\n      CSS_WIDE_KEYWORDS.has(fontStyle)\n    ) {\n      styles['font-style'] = fontStyle;\n    } else {\n      styles['font-style'] = fontStyle ? 'italic' : 'normal';\n    }\n  }\n\n  if (textTransform) {\n    styles['text-transform'] = textTransform;\n  }\n\n  // Handle font/fontFamily (font has special handling, fontFamily is direct)\n  const fontFamily_ = resolveFontFamily(font, fontFamily);\n  if (fontFamily_) {\n    styles['font-family'] = fontFamily_;\n  }\n\n  if (Object.keys(styles).length === 0) {\n    return null;\n  }\n\n  return styles;\n}\n\npresetStyle.__lookupStyles = [\n  'preset',\n  'fontSize',\n  'lineHeight',\n  'letterSpacing',\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n  'fontFamily',\n  'font',\n];\n"],"mappings":"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"}

package/dist/styles/radius.d.ts

@@ -3,9 +3,7 @@ declare function radiusStyle({
   radius
 }: {
   radius?: string | number | boolean;
-}): {
-  'border-radius': string;
-} | undefined;
+}): Record<string, string> | null;
 declare namespace radiusStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/radius.js

@@ -1,16 +1,42 @@
 import { makeEmptyDetails } from "../parser/types.js";
 import { DIRECTIONS, parseStyle } from "../utils/styles.js";
-
+import { extractCSSWideKeyword } from "./shared.js";
 //#region src/styles/radius.ts
 const PROP = "var(--radius)";
 const SHARP = "var(--sharp-radius)";
+const RADIUS_LONGHANDS = [
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius"
+];
 function radiusStyle({ radius }) {
 	if (typeof radius === "number") radius = `${radius}px`;
-	if (!radius) return;
+	if (!radius) return null;
 	if (radius === true) radius = "1r";
-	const processed = parseStyle(radius);
-	const { mods } = processed.groups[0] ?? makeEmptyDetails();
-	let { values } = processed.groups[0] ?? makeEmptyDetails();
+	const group = parseStyle(radius).groups[0] ?? makeEmptyDetails();
+	const { mods } = group;
+	let { values } = group;
+	const keyword = extractCSSWideKeyword(group);
+	const useLonghand = mods.includes("longhand");
+	if (keyword) {
+		const dirMods = mods.filter((m) => DIRECTIONS.includes(m));
+		if (!dirMods.length) {
+			if (useLonghand) return Object.fromEntries(RADIUS_LONGHANDS.map((prop) => [prop, keyword]));
+			return { "border-radius": keyword };
+		}
+		const result = {};
+		const corners = /* @__PURE__ */ new Set();
+		dirMods.forEach((dir) => {
+			const i = DIRECTIONS.indexOf(dir);
+			corners.add(i);
+			corners.add((i + 1) % 4);
+		});
+		corners.forEach((i) => {
+			result[RADIUS_LONGHANDS[i]] = keyword;
+		});
+		return result;
+	}
 	if (mods.includes("round")) values = ["9999rem"];
 	else if (mods.includes("ellipse")) values = ["50%"];
 	else if (!values.length) values = [PROP];
@@ -42,10 +68,16 @@ function radiusStyle({ radius }) {
 		});
 		if (flag) values = arr;
 	}
+	if (useLonghand) return {
+		[RADIUS_LONGHANDS[0]]: values[0],
+		[RADIUS_LONGHANDS[1]]: values[1] || values[0],
+		[RADIUS_LONGHANDS[2]]: values[2] || values[0],
+		[RADIUS_LONGHANDS[3]]: values[3] || values[1] || values[0]
+	};
 	return { "border-radius": values.join(" ") };
 }
 radiusStyle.__lookupStyles = ["radius"];
-
 //#endregion
 export { radiusStyle };
+
 //# sourceMappingURL=radius.js.map

package/dist/styles/radius.js.map

@@ -1 +1 @@
-{"version":3,"file":"radius.js","names":[],"sources":["../../src/styles/radius.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { DIRECTIONS, parseStyle } from '../utils/styles';\n\nconst PROP = 'var(--radius)';\nconst SHARP = 'var(--sharp-radius)';\n\nexport function radiusStyle({\n  radius,\n}: {\n  radius?: string | number | boolean;\n}) {\n  if (typeof radius === 'number') {\n    radius = `${radius}px`;\n  }\n\n  if (!radius) return;\n\n  if (radius === true) radius = '1r';\n\n  const processed = parseStyle(radius);\n  const { mods } = processed.groups[0] ?? makeEmptyDetails();\n  let { values } = processed.groups[0] ?? makeEmptyDetails();\n\n  if (mods.includes('round')) {\n    values = ['9999rem'];\n  } else if (mods.includes('ellipse')) {\n    values = ['50%'];\n  } else if (!values.length) {\n    values = [PROP];\n  }\n\n  if (mods.includes('leaf')) {\n    values = [\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n    ];\n  } else if (mods.includes('backleaf')) {\n    values = [\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n    ];\n  } else if (mods.length) {\n    const arr = ['0', '0', '0', '0'];\n\n    let flag = false;\n\n    DIRECTIONS.forEach((dir, i) => {\n      if (!mods.includes(dir)) return;\n\n      flag = true;\n\n      arr[i] = values[0] || PROP;\n      arr[(i + 1) % 4] = values[0] || PROP;\n    });\n\n    if (flag) {\n      values = arr;\n    }\n  }\n\n  return {\n    'border-radius': values.join(' '),\n  };\n}\n\nradiusStyle.__lookupStyles = ['radius'];\n"],"mappings":";;;;AAGA,MAAM,OAAO;AACb,MAAM,QAAQ;AAEd,SAAgB,YAAY,EAC1B,UAGC;AACD,KAAI,OAAO,WAAW,SACpB,UAAS,GAAG,OAAO;AAGrB,KAAI,CAAC,OAAQ;AAEb,KAAI,WAAW,KAAM,UAAS;CAE9B,MAAM,YAAY,WAAW,OAAO;CACpC,MAAM,EAAE,SAAS,UAAU,OAAO,MAAM,kBAAkB;CAC1D,IAAI,EAAE,WAAW,UAAU,OAAO,MAAM,kBAAkB;AAE1D,KAAI,KAAK,SAAS,QAAQ,CACxB,UAAS,CAAC,UAAU;UACX,KAAK,SAAS,UAAU,CACjC,UAAS,CAAC,MAAM;UACP,CAAC,OAAO,OACjB,UAAS,CAAC,KAAK;AAGjB,KAAI,KAAK,SAAS,OAAO,CACvB,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,SAAS,WAAW,CAClC,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,QAAQ;EACtB,MAAM,MAAM;GAAC;GAAK;GAAK;GAAK;GAAI;EAEhC,IAAI,OAAO;AAEX,aAAW,SAAS,KAAK,MAAM;AAC7B,OAAI,CAAC,KAAK,SAAS,IAAI,CAAE;AAEzB,UAAO;AAEP,OAAI,KAAK,OAAO,MAAM;AACtB,QAAK,IAAI,KAAK,KAAK,OAAO,MAAM;IAChC;AAEF,MAAI,KACF,UAAS;;AAIb,QAAO,EACL,iBAAiB,OAAO,KAAK,IAAI,EAClC;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}
+{"version":3,"file":"radius.js","names":[],"sources":["../../src/styles/radius.ts"],"sourcesContent":["import { makeEmptyDetails } from '../parser/types';\nimport { DIRECTIONS, parseStyle } from '../utils/styles';\nimport { extractCSSWideKeyword } from './shared';\n\nconst PROP = 'var(--radius)';\nconst SHARP = 'var(--sharp-radius)';\n\nconst RADIUS_LONGHANDS = [\n  'border-top-left-radius',\n  'border-top-right-radius',\n  'border-bottom-right-radius',\n  'border-bottom-left-radius',\n];\n\nexport function radiusStyle({\n  radius,\n}: {\n  radius?: string | number | boolean;\n}) {\n  if (typeof radius === 'number') {\n    radius = `${radius}px`;\n  }\n\n  if (!radius) return null;\n\n  if (radius === true) radius = '1r';\n\n  const processed = parseStyle(radius);\n  const group = processed.groups[0] ?? makeEmptyDetails();\n  const { mods } = group;\n  let { values } = group;\n\n  const keyword = extractCSSWideKeyword(group);\n\n  const useLonghand = mods.includes('longhand');\n\n  if (keyword) {\n    const dirMods = mods.filter((m) => DIRECTIONS.includes(m));\n\n    if (!dirMods.length) {\n      if (useLonghand) {\n        return Object.fromEntries(\n          RADIUS_LONGHANDS.map((prop) => [prop, keyword]),\n        );\n      }\n\n      return { 'border-radius': keyword };\n    }\n\n    const result: Record<string, string> = {};\n    const corners = new Set<number>();\n\n    dirMods.forEach((dir) => {\n      const i = DIRECTIONS.indexOf(dir);\n      corners.add(i);\n      corners.add((i + 1) % 4);\n    });\n\n    corners.forEach((i) => {\n      result[RADIUS_LONGHANDS[i]] = keyword;\n    });\n\n    return result;\n  }\n\n  if (mods.includes('round')) {\n    values = ['9999rem'];\n  } else if (mods.includes('ellipse')) {\n    values = ['50%'];\n  } else if (!values.length) {\n    values = [PROP];\n  }\n\n  if (mods.includes('leaf')) {\n    values = [\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n    ];\n  } else if (mods.includes('backleaf')) {\n    values = [\n      values[0] || PROP,\n      values[1] || SHARP,\n      values[0] || PROP,\n      values[1] || SHARP,\n    ];\n  } else if (mods.length) {\n    const arr = ['0', '0', '0', '0'];\n\n    let flag = false;\n\n    DIRECTIONS.forEach((dir, i) => {\n      if (!mods.includes(dir)) return;\n\n      flag = true;\n\n      arr[i] = values[0] || PROP;\n      arr[(i + 1) % 4] = values[0] || PROP;\n    });\n\n    if (flag) {\n      values = arr;\n    }\n  }\n\n  if (useLonghand) {\n    return {\n      [RADIUS_LONGHANDS[0]]: values[0],\n      [RADIUS_LONGHANDS[1]]: values[1] || values[0],\n      [RADIUS_LONGHANDS[2]]: values[2] || values[0],\n      [RADIUS_LONGHANDS[3]]: values[3] || values[1] || values[0],\n    };\n  }\n\n  return {\n    'border-radius': values.join(' '),\n  };\n}\n\nradiusStyle.__lookupStyles = ['radius'];\n"],"mappings":";;;;AAIA,MAAM,OAAO;AACb,MAAM,QAAQ;AAEd,MAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACD;AAED,SAAgB,YAAY,EAC1B,UAGC;AACD,KAAI,OAAO,WAAW,SACpB,UAAS,GAAG,OAAO;AAGrB,KAAI,CAAC,OAAQ,QAAO;AAEpB,KAAI,WAAW,KAAM,UAAS;CAG9B,MAAM,QADY,WAAW,OAAO,CACZ,OAAO,MAAM,kBAAkB;CACvD,MAAM,EAAE,SAAS;CACjB,IAAI,EAAE,WAAW;CAEjB,MAAM,UAAU,sBAAsB,MAAM;CAE5C,MAAM,cAAc,KAAK,SAAS,WAAW;AAE7C,KAAI,SAAS;EACX,MAAM,UAAU,KAAK,QAAQ,MAAM,WAAW,SAAS,EAAE,CAAC;AAE1D,MAAI,CAAC,QAAQ,QAAQ;AACnB,OAAI,YACF,QAAO,OAAO,YACZ,iBAAiB,KAAK,SAAS,CAAC,MAAM,QAAQ,CAAC,CAChD;AAGH,UAAO,EAAE,iBAAiB,SAAS;;EAGrC,MAAM,SAAiC,EAAE;EACzC,MAAM,0BAAU,IAAI,KAAa;AAEjC,UAAQ,SAAS,QAAQ;GACvB,MAAM,IAAI,WAAW,QAAQ,IAAI;AACjC,WAAQ,IAAI,EAAE;AACd,WAAQ,KAAK,IAAI,KAAK,EAAE;IACxB;AAEF,UAAQ,SAAS,MAAM;AACrB,UAAO,iBAAiB,MAAM;IAC9B;AAEF,SAAO;;AAGT,KAAI,KAAK,SAAS,QAAQ,CACxB,UAAS,CAAC,UAAU;UACX,KAAK,SAAS,UAAU,CACjC,UAAS,CAAC,MAAM;UACP,CAAC,OAAO,OACjB,UAAS,CAAC,KAAK;AAGjB,KAAI,KAAK,SAAS,OAAO,CACvB,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,SAAS,WAAW,CAClC,UAAS;EACP,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO,MAAM;EACd;UACQ,KAAK,QAAQ;EACtB,MAAM,MAAM;GAAC;GAAK;GAAK;GAAK;GAAI;EAEhC,IAAI,OAAO;AAEX,aAAW,SAAS,KAAK,MAAM;AAC7B,OAAI,CAAC,KAAK,SAAS,IAAI,CAAE;AAEzB,UAAO;AAEP,OAAI,KAAK,OAAO,MAAM;AACtB,QAAK,IAAI,KAAK,KAAK,OAAO,MAAM;IAChC;AAEF,MAAI,KACF,UAAS;;AAIb,KAAI,YACF,QAAO;GACJ,iBAAiB,KAAK,OAAO;GAC7B,iBAAiB,KAAK,OAAO,MAAM,OAAO;GAC1C,iBAAiB,KAAK,OAAO,MAAM,OAAO;GAC1C,iBAAiB,KAAK,OAAO,MAAM,OAAO,MAAM,OAAO;EACzD;AAGH,QAAO,EACL,iBAAiB,OAAO,KAAK,IAAI,EAClC;;AAGH,YAAY,iBAAiB,CAAC,SAAS"}

package/dist/styles/scrollMargin.d.ts

@@ -0,0 +1,24 @@
+//#region src/styles/scrollMargin.d.ts
+declare function scrollMarginStyle({
+  scrollMargin,
+  scrollMarginBlock,
+  scrollMarginInline,
+  scrollMarginTop,
+  scrollMarginRight,
+  scrollMarginBottom,
+  scrollMarginLeft
+}: {
+  scrollMargin?: string | number | boolean;
+  scrollMarginBlock?: string | number | boolean;
+  scrollMarginInline?: string | number | boolean;
+  scrollMarginTop?: string | number | boolean;
+  scrollMarginRight?: string | number | boolean;
+  scrollMarginBottom?: string | number | boolean;
+  scrollMarginLeft?: string | number | boolean;
+}): Record<string, string> | null;
+declare namespace scrollMarginStyle {
+  var __lookupStyles: string[];
+}
+//#endregion
+export { scrollMarginStyle };
+//# sourceMappingURL=scrollMargin.d.ts.map

package/dist/styles/scrollMargin.js

@@ -0,0 +1,32 @@
+import { processDirectionalStyle } from "./directional.js";
+//#region src/styles/scrollMargin.ts
+const SCROLL_MARGIN_CONFIG = {
+	property: "scroll-margin",
+	defaultValue: "0",
+	trueValue: "1x",
+	defaultInit: "0"
+};
+function scrollMarginStyle({ scrollMargin, scrollMarginBlock, scrollMarginInline, scrollMarginTop, scrollMarginRight, scrollMarginBottom, scrollMarginLeft }) {
+	return processDirectionalStyle(SCROLL_MARGIN_CONFIG, {
+		main: scrollMargin,
+		block: scrollMarginBlock,
+		inline: scrollMarginInline,
+		top: scrollMarginTop,
+		right: scrollMarginRight,
+		bottom: scrollMarginBottom,
+		left: scrollMarginLeft
+	});
+}
+scrollMarginStyle.__lookupStyles = [
+	"scrollMargin",
+	"scrollMarginTop",
+	"scrollMarginRight",
+	"scrollMarginBottom",
+	"scrollMarginLeft",
+	"scrollMarginBlock",
+	"scrollMarginInline"
+];
+//#endregion
+export { scrollMarginStyle };
+
+//# sourceMappingURL=scrollMargin.js.map

package/dist/styles/scrollMargin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollMargin.js","names":[],"sources":["../../src/styles/scrollMargin.ts"],"sourcesContent":["import { processDirectionalStyle } from './directional';\n\nconst SCROLL_MARGIN_CONFIG = {\n  property: 'scroll-margin',\n  defaultValue: '0',\n  trueValue: '1x',\n  defaultInit: '0',\n} as const;\n\nexport function scrollMarginStyle({\n  scrollMargin,\n  scrollMarginBlock,\n  scrollMarginInline,\n  scrollMarginTop,\n  scrollMarginRight,\n  scrollMarginBottom,\n  scrollMarginLeft,\n}: {\n  scrollMargin?: string | number | boolean;\n  scrollMarginBlock?: string | number | boolean;\n  scrollMarginInline?: string | number | boolean;\n  scrollMarginTop?: string | number | boolean;\n  scrollMarginRight?: string | number | boolean;\n  scrollMarginBottom?: string | number | boolean;\n  scrollMarginLeft?: string | number | boolean;\n}) {\n  return processDirectionalStyle(SCROLL_MARGIN_CONFIG, {\n    main: scrollMargin,\n    block: scrollMarginBlock,\n    inline: scrollMarginInline,\n    top: scrollMarginTop,\n    right: scrollMarginRight,\n    bottom: scrollMarginBottom,\n    left: scrollMarginLeft,\n  });\n}\n\nscrollMarginStyle.__lookupStyles = [\n  'scrollMargin',\n  'scrollMarginTop',\n  'scrollMarginRight',\n  'scrollMarginBottom',\n  'scrollMarginLeft',\n  'scrollMarginBlock',\n  'scrollMarginInline',\n];\n"],"mappings":";;AAEA,MAAM,uBAAuB;CAC3B,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACd;AAED,SAAgB,kBAAkB,EAChC,cACA,mBACA,oBACA,iBACA,mBACA,oBACA,oBASC;AACD,QAAO,wBAAwB,sBAAsB;EACnD,MAAM;EACN,OAAO;EACP,QAAQ;EACR,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP,CAAC;;AAGJ,kBAAkB,iBAAiB;CACjC;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}