@tenphi/tasty 1.1.0 → 1.2.0

package/dist/styles/list.d.ts

@@ -1,16 +1,16 @@
 //#region src/styles/list.d.ts
 declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
-declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position"];
+declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin"];
 declare const BLOCK_INNER_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
 declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
 declare const BLOCK_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
 declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
 declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
 declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
-declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
-declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
-declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const FLOW_STYLES: readonly ["flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
+declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "scrollMargin", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
+declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "place", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
 //#endregion
 export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
 //# sourceMappingURL=list.d.ts.map

package/dist/styles/list.js

@@ -19,7 +19,8 @@ const POSITION_STYLES = [
 	"zIndex",
 	"margin",
 	"inset",
-	"position"
+	"position",
+	"scrollMargin"
 ];
 const BLOCK_INNER_STYLES = [
 	"padding",
@@ -57,6 +58,7 @@ const DIMENSION_STYLES = [
 ];
 const FLOW_STYLES = [
 	"flow",
+	"place",
 	"placeItems",
 	"placeContent",
 	"alignItems",
@@ -92,7 +94,7 @@ const INNER_STYLES = [
 	...BLOCK_INNER_STYLES,
 	...FLOW_STYLES
 ];
-
 //#endregion
 export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
+
 //# sourceMappingURL=list.js.map

package/dist/styles/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":[],"sources":["../../src/styles/list.ts"],"sourcesContent":["export const BASE_STYLES = [\n  'display',\n  'font',\n  'preset',\n  'hide',\n  'whiteSpace',\n  'opacity',\n  'transition',\n] as const;\n\nexport const POSITION_STYLES = [\n  'gridArea',\n  'order',\n  'gridColumn',\n  'gridRow',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'zIndex',\n  'margin',\n  'inset',\n  'position',\n] as const;\n\nexport const BLOCK_INNER_STYLES = [\n  'padding',\n  'paddingInline',\n  'paddingBlock',\n  'overflow',\n  'scrollbar',\n  'textAlign',\n] as const;\n\nexport const BLOCK_OUTER_STYLES = [\n  'border',\n  'radius',\n  'shadow',\n  'outline',\n] as const;\n\nexport const BLOCK_STYLES = [\n  ...BLOCK_INNER_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const COLOR_STYLES = ['color', 'fill', 'fade', 'image'] as const;\n\nexport const TEXT_STYLES = [\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n] as const;\n\nexport const DIMENSION_STYLES = [\n  'width',\n  'height',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\nexport const FLOW_STYLES = [\n  'flow',\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align',\n  'justify',\n  'gap',\n  'columnGap',\n  'rowGap',\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n] as const;\n\nexport const CONTAINER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...DIMENSION_STYLES,\n  ...POSITION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n] as const;\n\nexport const OUTER_STYLES = [\n  ...POSITION_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const INNER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...BLOCK_INNER_STYLES,\n  ...FLOW_STYLES,\n] as const;\n"],"mappings":";AAAA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACD;AAED,MAAa,eAAe,CAC1B,GAAG,oBACH,GAAG,mBACJ;AAED,MAAa,eAAe;CAAC;CAAS;CAAQ;CAAQ;CAAQ;AAE9D,MAAa,cAAc;CACzB;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ"}
+{"version":3,"file":"list.js","names":[],"sources":["../../src/styles/list.ts"],"sourcesContent":["export const BASE_STYLES = [\n  'display',\n  'font',\n  'preset',\n  'hide',\n  'whiteSpace',\n  'opacity',\n  'transition',\n] as const;\n\nexport const POSITION_STYLES = [\n  'gridArea',\n  'order',\n  'gridColumn',\n  'gridRow',\n  'placeSelf',\n  'alignSelf',\n  'justifySelf',\n  'zIndex',\n  'margin',\n  'inset',\n  'position',\n  'scrollMargin',\n] as const;\n\nexport const BLOCK_INNER_STYLES = [\n  'padding',\n  'paddingInline',\n  'paddingBlock',\n  'overflow',\n  'scrollbar',\n  'textAlign',\n] as const;\n\nexport const BLOCK_OUTER_STYLES = [\n  'border',\n  'radius',\n  'shadow',\n  'outline',\n] as const;\n\nexport const BLOCK_STYLES = [\n  ...BLOCK_INNER_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const COLOR_STYLES = ['color', 'fill', 'fade', 'image'] as const;\n\nexport const TEXT_STYLES = [\n  'textTransform',\n  'fontWeight',\n  'fontStyle',\n] as const;\n\nexport const DIMENSION_STYLES = [\n  'width',\n  'height',\n  'flexBasis',\n  'flexGrow',\n  'flexShrink',\n  'flex',\n] as const;\n\nexport const FLOW_STYLES = [\n  'flow',\n  'place',\n  'placeItems',\n  'placeContent',\n  'alignItems',\n  'alignContent',\n  'justifyItems',\n  'justifyContent',\n  'align',\n  'justify',\n  'gap',\n  'columnGap',\n  'rowGap',\n  'gridColumns',\n  'gridRows',\n  'gridTemplate',\n  'gridAreas',\n] as const;\n\nexport const CONTAINER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...DIMENSION_STYLES,\n  ...POSITION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n] as const;\n\nexport const OUTER_STYLES = [\n  ...POSITION_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const INNER_STYLES = [\n  ...BASE_STYLES,\n  ...COLOR_STYLES,\n  ...BLOCK_INNER_STYLES,\n  ...FLOW_STYLES,\n] as const;\n"],"mappings":";AAAA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACD;AAED,MAAa,eAAe,CAC1B,GAAG,oBACH,GAAG,mBACJ;AAED,MAAa,eAAe;CAAC;CAAS;CAAQ;CAAQ;CAAQ;AAE9D,MAAa,cAAc;CACzB;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ"}

package/dist/styles/margin.d.ts

@@ -15,7 +15,7 @@ declare function marginStyle({
   marginRight?: string | number | boolean;
   marginBottom?: string | number | boolean;
   marginLeft?: string | number | boolean;
-}): {};
+}): Record<string, string> | null;
 declare namespace marginStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/margin.js

@@ -1,93 +1,21 @@
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
+import { processDirectionalStyle } from "./directional.js";
 //#region src/styles/margin.ts
-/**
-* Parse a margin value and return the first processed value
-*/
-function parseMarginValue(value) {
-	if (typeof value === "number") return `${value}px`;
-	if (!value) return null;
-	if (value === true) value = "1x";
-	const { values } = parseStyle(value).groups[0] ?? { values: [] };
-	return values[0] || "var(--gap)";
-}
-/**
-* Extract values and directions from a single parsed group.
-*/
-function extractGroupData(group) {
-	const { values = [], mods = [] } = group;
-	return {
-		values: values.length ? values : ["var(--gap)"],
-		directions: filterMods(mods, DIRECTIONS)
-	};
-}
-/**
-* Apply a single group's values and directions onto a direction map.
-*/
-function applyGroup(dirs, values, directions) {
-	if (!values.length) return;
-	if (directions.length === 0) {
-		dirs.top = values[0];
-		dirs.right = values[1] || values[0];
-		dirs.bottom = values[2] || values[0];
-		dirs.left = values[3] || values[1] || values[0];
-	} else directions.forEach((dir, i) => {
-		dirs[dir] = values[i] ?? values[0];
-	});
-}
-/**
-* Optimize margin output shorthand.
-*/
-function optimizeMargin(dirs) {
-	const { top, right, bottom, left } = dirs;
-	if (top === right && right === bottom && bottom === left) return { margin: top };
-	if (top === bottom && left === right) return { margin: `${top} ${left}` };
-	return { margin: `${top} ${right} ${bottom} ${left}` };
-}
+const MARGIN_CONFIG = {
+	property: "margin",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
 function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
-	if (margin == null && marginBlock == null && marginInline == null && marginTop == null && marginRight == null && marginBottom == null && marginLeft == null) return {};
-	const dirs = {
-		top: "0",
-		right: "0",
-		bottom: "0",
-		left: "0"
-	};
-	if (margin != null) {
-		if (typeof margin === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${margin}px`;
-		else if (margin === true) margin = "1x";
-		if (typeof margin === "string" && margin) {
-			const groups = parseStyle(margin).groups ?? [];
-			for (const group of groups) {
-				const { values, directions } = extractGroupData(group);
-				applyGroup(dirs, values, directions);
-			}
-		}
-	}
-	if (marginBlock != null) {
-		const val = parseMarginValue(marginBlock);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (marginInline != null) {
-		const val = parseMarginValue(marginInline);
-		if (val) dirs.left = dirs.right = val;
-	}
-	if (marginTop != null) {
-		const val = parseMarginValue(marginTop);
-		if (val) dirs.top = val;
-	}
-	if (marginRight != null) {
-		const val = parseMarginValue(marginRight);
-		if (val) dirs.right = val;
-	}
-	if (marginBottom != null) {
-		const val = parseMarginValue(marginBottom);
-		if (val) dirs.bottom = val;
-	}
-	if (marginLeft != null) {
-		const val = parseMarginValue(marginLeft);
-		if (val) dirs.left = val;
-	}
-	return optimizeMargin(dirs);
+	return processDirectionalStyle(MARGIN_CONFIG, {
+		main: margin,
+		block: marginBlock,
+		inline: marginInline,
+		top: marginTop,
+		right: marginRight,
+		bottom: marginBottom,
+		left: marginLeft
+	});
 }
 marginStyle.__lookupStyles = [
 	"margin",
@@ -98,7 +26,7 @@ marginStyle.__lookupStyles = [
 	"marginBlock",
 	"marginInline"
 ];
-
 //#endregion
 export { marginStyle };
+
 //# sourceMappingURL=margin.js.map

package/dist/styles/margin.js.map

@@ -1 +1 @@
-{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.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 margin value and return the first processed value\n */\nfunction parseMarginValue(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 margin output shorthand.\n */\nfunction optimizeMargin(dirs: Record<Direction, string>): {\n  margin: string;\n} {\n  const { top, right, bottom, left } = dirs;\n  if (top === right && right === bottom && bottom === left) {\n    return { margin: top };\n  }\n  if (top === bottom && left === right) {\n    return { margin: `${top} ${left}` };\n  }\n  return { margin: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function marginStyle({\n  margin,\n  marginBlock,\n  marginInline,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: {\n  margin?: string | number | boolean;\n  marginBlock?: string | number | boolean;\n  marginInline?: string | number | boolean;\n  marginTop?: string | number | boolean;\n  marginRight?: string | number | boolean;\n  marginBottom?: string | number | boolean;\n  marginLeft?: string | number | boolean;\n}) {\n  if (\n    margin == null &&\n    marginBlock == null &&\n    marginInline == null &&\n    marginTop == null &&\n    marginRight == null &&\n    marginBottom == null &&\n    marginLeft == 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): margin\n  if (margin != null) {\n    if (typeof margin === 'number') {\n      const v = `${margin}px`;\n      dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n    } else if (margin === true) {\n      margin = '1x';\n    }\n\n    if (typeof margin === 'string' && margin) {\n      const processed = parseStyle(margin);\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): marginBlock/marginInline\n  if (marginBlock != null) {\n    const val = parseMarginValue(marginBlock);\n    if (val) dirs.top = dirs.bottom = val;\n  }\n  if (marginInline != null) {\n    const val = parseMarginValue(marginInline);\n    if (val) dirs.left = dirs.right = val;\n  }\n\n  // Priority 3 (highest): individual directions\n  if (marginTop != null) {\n    const val = parseMarginValue(marginTop);\n    if (val) dirs.top = val;\n  }\n  if (marginRight != null) {\n    const val = parseMarginValue(marginRight);\n    if (val) dirs.right = val;\n  }\n  if (marginBottom != null) {\n    const val = parseMarginValue(marginBottom);\n    if (val) dirs.bottom = val;\n  }\n  if (marginLeft != null) {\n    const val = parseMarginValue(marginLeft);\n    if (val) dirs.left = val;\n  }\n\n  return optimizeMargin(dirs);\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,iBAAiB,OAAiD;AACzE,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,eAAe,MAEtB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAErC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,UAAU,MAAM;AAClB,MAAI,OAAO,WAAW,SAEpB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,OAAO;WAEX,WAAW,KACpB,UAAS;AAGX,MAAI,OAAO,WAAW,YAAY,QAAQ;GAExC,MAAM,SADY,WAAW,OAAO,CACX,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,eAAe,KAAK;;AAG7B,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import { processDirectionalStyle } from './directional';\n\nconst MARGIN_CONFIG = {\n  property: 'margin',\n  defaultValue: 'var(--gap)',\n  trueValue: '1x',\n  defaultInit: '0',\n} as const;\n\nexport function marginStyle({\n  margin,\n  marginBlock,\n  marginInline,\n  marginTop,\n  marginRight,\n  marginBottom,\n  marginLeft,\n}: {\n  margin?: string | number | boolean;\n  marginBlock?: string | number | boolean;\n  marginInline?: string | number | boolean;\n  marginTop?: string | number | boolean;\n  marginRight?: string | number | boolean;\n  marginBottom?: string | number | boolean;\n  marginLeft?: string | number | boolean;\n}) {\n  return processDirectionalStyle(MARGIN_CONFIG, {\n    main: margin,\n    block: marginBlock,\n    inline: marginInline,\n    top: marginTop,\n    right: marginRight,\n    bottom: marginBottom,\n    left: marginLeft,\n  });\n}\n\nmarginStyle.__lookupStyles = [\n  'margin',\n  'marginTop',\n  'marginRight',\n  'marginBottom',\n  'marginLeft',\n  'marginBlock',\n  'marginInline',\n];\n"],"mappings":";;AAEA,MAAM,gBAAgB;CACpB,UAAU;CACV,cAAc;CACd,WAAW;CACX,aAAa;CACd;AAED,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,QAAO,wBAAwB,eAAe;EAC5C,MAAM;EACN,OAAO;EACP,QAAQ;EACR,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP,CAAC;;AAGJ,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/styles/outline.d.ts

@@ -20,7 +20,7 @@ interface OutlineStyleProps {
 declare function outlineStyle({
   outline,
   outlineOffset
-}: OutlineStyleProps): Record<string, string> | undefined;
+}: OutlineStyleProps): Record<string, string> | null;
 declare namespace outlineStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/outline.js

@@ -1,18 +1,7 @@
+import { CSS_WIDE_KEYWORDS } from "../parser/const.js";
 import { filterMods, parseStyle } from "../utils/styles.js";
-
+import { BORDER_STYLES } from "./const.js";
 //#region src/styles/outline.ts
-const BORDER_STYLES = [
-	"none",
-	"hidden",
-	"dotted",
-	"dashed",
-	"solid",
-	"double",
-	"groove",
-	"ridge",
-	"inset",
-	"outset"
-];
 /**
 * Generates CSS for outline property with optional offset.
 *
@@ -29,7 +18,8 @@ const BORDER_STYLES = [
 */
 function outlineStyle({ outline, outlineOffset }) {
 	const result = {};
-	if (outline != null && outline !== false) {
+	if (outline != null && outline !== false) if (typeof outline === "string" && CSS_WIDE_KEYWORDS.has(outline)) result["outline"] = outline;
+	else {
 		let outlineValue = outline;
 		if (outline === true) outlineValue = "1ow";
 		if (outline === 0) outlineValue = "0";
@@ -55,11 +45,11 @@ function outlineStyle({ outline, outlineOffset }) {
 		const offsetValue = typeof outlineOffset === "number" ? `${outlineOffset}px` : outlineOffset;
 		result["outline-offset"] = parseStyle(offsetValue).groups[0]?.values[0] || offsetValue;
 	}
-	if (Object.keys(result).length === 0) return;
+	if (Object.keys(result).length === 0) return null;
 	return result;
 }
 outlineStyle.__lookupStyles = ["outline", "outlineOffset"];
-
 //#endregion
 export { outlineStyle };
+
 //# sourceMappingURL=outline.js.map

package/dist/styles/outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"outline.js","names":[],"sources":["../../src/styles/outline.ts"],"sourcesContent":["import { filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n  'none',\n  'hidden',\n  'dotted',\n  'dashed',\n  'solid',\n  'double',\n  'groove',\n  'ridge',\n  'inset',\n  'outset',\n];\n\ninterface OutlineStyleProps {\n  outline?: string | boolean | number;\n  outlineOffset?: string | number;\n}\n\n/**\n * Generates CSS for outline property with optional offset.\n *\n * Syntax:\n * - `outline=\"2px solid #red\"` - outline only\n * - `outline=\"2px solid #red / 4px\"` - outline with offset (slash separator)\n * - `outline=\"2px / 4px\"` - width with offset (simpler form)\n * - `outline={true}` - default 1ow solid outline\n * - `outlineOffset=\"4px\"` - offset as separate prop (can be combined with outline)\n *\n * Priority: slash syntax in outline takes precedence over outlineOffset prop\n *\n * @return CSS properties for outline and optionally outline-offset\n */\nexport function outlineStyle({ outline, outlineOffset }: OutlineStyleProps) {\n  const result: Record<string, string> = {};\n\n  // Handle outline (0 is valid - means no outline)\n  if (outline != null && outline !== false) {\n    let outlineValue: string | boolean | number = outline;\n    if (outline === true) outlineValue = '1ow';\n    if (outline === 0) outlineValue = '0';\n\n    const processed = parseStyle(String(outlineValue));\n    const group = processed.groups[0];\n\n    if (group) {\n      const { parts } = group;\n      const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };\n      const offsetPart = parts[1];\n\n      const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);\n\n      const value = outlinePart.values[0] || 'var(--outline-width)';\n      const type = typeMods[0] || 'solid';\n      const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';\n\n      result['outline'] = [value, type, outlineColor].join(' ');\n\n      // Check for offset in second part (after /) - takes precedence\n      if (offsetPart?.values[0]) {\n        result['outline-offset'] = offsetPart.values[0];\n      }\n    }\n  }\n\n  // Handle outlineOffset prop (only if not already set by slash syntax)\n  if (outlineOffset != null && !result['outline-offset']) {\n    const offsetValue =\n      typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;\n    const processed = parseStyle(offsetValue);\n    result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;\n  }\n\n  // Return undefined if no styles to apply\n  if (Object.keys(result).length === 0) {\n    return;\n  }\n\n  return result;\n}\n\noutlineStyle.__lookupStyles = ['outline', 'outlineOffset'];\n"],"mappings":";;;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;AAqBD,SAAgB,aAAa,EAAE,SAAS,iBAAoC;CAC1E,MAAM,SAAiC,EAAE;AAGzC,KAAI,WAAW,QAAQ,YAAY,OAAO;EACxC,IAAI,eAA0C;AAC9C,MAAI,YAAY,KAAM,gBAAe;AACrC,MAAI,YAAY,EAAG,gBAAe;EAGlC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,cAAc,MAAM,MAAM;IAAE,QAAQ,EAAE;IAAE,MAAM,EAAE;IAAE,QAAQ,EAAE;IAAE;GACpE,MAAM,aAAa,MAAM;GAEzB,MAAM,WAAW,WAAW,YAAY,MAAM,cAAc;AAM5D,UAAO,aAAa;IAJN,YAAY,OAAO,MAAM;IAC1B,SAAS,MAAM;IACP,YAAY,OAAO,MAAM;IAEC,CAAC,KAAK,IAAI;AAGzD,OAAI,YAAY,OAAO,GACrB,QAAO,oBAAoB,WAAW,OAAO;;;AAMnD,KAAI,iBAAiB,QAAQ,CAAC,OAAO,mBAAmB;EACtD,MAAM,cACJ,OAAO,kBAAkB,WAAW,GAAG,cAAc,MAAM;AAE7D,SAAO,oBADW,WAAW,YAAY,CACJ,OAAO,IAAI,OAAO,MAAM;;AAI/D,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,aAAa,iBAAiB,CAAC,WAAW,gBAAgB"}
+{"version":3,"file":"outline.js","names":[],"sources":["../../src/styles/outline.ts"],"sourcesContent":["import { CSS_WIDE_KEYWORDS } from '../parser/const';\nimport { filterMods, parseStyle } from '../utils/styles';\nimport { BORDER_STYLES } from './const';\n\ninterface OutlineStyleProps {\n  outline?: string | boolean | number;\n  outlineOffset?: string | number;\n}\n\n/**\n * Generates CSS for outline property with optional offset.\n *\n * Syntax:\n * - `outline=\"2px solid #red\"` - outline only\n * - `outline=\"2px solid #red / 4px\"` - outline with offset (slash separator)\n * - `outline=\"2px / 4px\"` - width with offset (simpler form)\n * - `outline={true}` - default 1ow solid outline\n * - `outlineOffset=\"4px\"` - offset as separate prop (can be combined with outline)\n *\n * Priority: slash syntax in outline takes precedence over outlineOffset prop\n *\n * @return CSS properties for outline and optionally outline-offset\n */\nexport function outlineStyle({ outline, outlineOffset }: OutlineStyleProps) {\n  const result: Record<string, string> = {};\n\n  // Handle outline (0 is valid - means no outline)\n  if (outline != null && outline !== false) {\n    if (typeof outline === 'string' && CSS_WIDE_KEYWORDS.has(outline)) {\n      result['outline'] = outline;\n    } else {\n      let outlineValue: string | boolean | number = outline;\n      if (outline === true) outlineValue = '1ow';\n      if (outline === 0) outlineValue = '0';\n\n      const processed = parseStyle(String(outlineValue));\n      const group = processed.groups[0];\n\n      if (group) {\n        const { parts } = group;\n        const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };\n        const offsetPart = parts[1];\n\n        const typeMods = filterMods(\n          outlinePart.mods,\n          BORDER_STYLES as unknown as string[],\n        );\n\n        const value = outlinePart.values[0] || 'var(--outline-width)';\n        const type = typeMods[0] || 'solid';\n        const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';\n\n        result['outline'] = [value, type, outlineColor].join(' ');\n\n        if (offsetPart?.values[0]) {\n          result['outline-offset'] = offsetPart.values[0];\n        }\n      }\n    }\n  }\n\n  // Handle outlineOffset prop (only if not already set by slash syntax)\n  if (outlineOffset != null && !result['outline-offset']) {\n    const offsetValue =\n      typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;\n    const processed = parseStyle(offsetValue);\n    result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;\n  }\n\n  if (Object.keys(result).length === 0) {\n    return null;\n  }\n\n  return result;\n}\n\noutlineStyle.__lookupStyles = ['outline', 'outlineOffset'];\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,SAAgB,aAAa,EAAE,SAAS,iBAAoC;CAC1E,MAAM,SAAiC,EAAE;AAGzC,KAAI,WAAW,QAAQ,YAAY,MACjC,KAAI,OAAO,YAAY,YAAY,kBAAkB,IAAI,QAAQ,CAC/D,QAAO,aAAa;MACf;EACL,IAAI,eAA0C;AAC9C,MAAI,YAAY,KAAM,gBAAe;AACrC,MAAI,YAAY,EAAG,gBAAe;EAGlC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,cAAc,MAAM,MAAM;IAAE,QAAQ,EAAE;IAAE,MAAM,EAAE;IAAE,QAAQ,EAAE;IAAE;GACpE,MAAM,aAAa,MAAM;GAEzB,MAAM,WAAW,WACf,YAAY,MACZ,cACD;AAMD,UAAO,aAAa;IAJN,YAAY,OAAO,MAAM;IAC1B,SAAS,MAAM;IACP,YAAY,OAAO,MAAM;IAEC,CAAC,KAAK,IAAI;AAEzD,OAAI,YAAY,OAAO,GACrB,QAAO,oBAAoB,WAAW,OAAO;;;AAOrD,KAAI,iBAAiB,QAAQ,CAAC,OAAO,mBAAmB;EACtD,MAAM,cACJ,OAAO,kBAAkB,WAAW,GAAG,cAAc,MAAM;AAE7D,SAAO,oBADW,WAAW,YAAY,CACJ,OAAO,IAAI,OAAO,MAAM;;AAG/D,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC,QAAO;AAGT,QAAO;;AAGT,aAAa,iBAAiB,CAAC,WAAW,gBAAgB"}

package/dist/styles/padding.d.ts

@@ -15,7 +15,7 @@ declare function paddingStyle({
   paddingRight?: string | number | boolean;
   paddingBottom?: string | number | boolean;
   paddingLeft?: string | number | boolean;
-}): {};
+}): Record<string, string> | null;
 declare namespace paddingStyle {
   var __lookupStyles: string[];
 }

package/dist/styles/padding.js

@@ -1,93 +1,21 @@
-import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
-
+import { processDirectionalStyle } from "./directional.js";
 //#region src/styles/padding.ts
-/**
-* Parse a padding value and return the first processed value
-*/
-function parsePaddingValue(value) {
-	if (typeof value === "number") return `${value}px`;
-	if (!value) return null;
-	if (value === true) value = "1x";
-	const { values } = parseStyle(value).groups[0] ?? { values: [] };
-	return values[0] || "var(--gap)";
-}
-/**
-* Extract values and directions from a single parsed group.
-*/
-function extractGroupData(group) {
-	const { values = [], mods = [] } = group;
-	return {
-		values: values.length ? values : ["var(--gap)"],
-		directions: filterMods(mods, DIRECTIONS)
-	};
-}
-/**
-* Apply a single group's values and directions onto a direction map.
-*/
-function applyGroup(dirs, values, directions) {
-	if (!values.length) return;
-	if (directions.length === 0) {
-		dirs.top = values[0];
-		dirs.right = values[1] || values[0];
-		dirs.bottom = values[2] || values[0];
-		dirs.left = values[3] || values[1] || values[0];
-	} else directions.forEach((dir, i) => {
-		dirs[dir] = values[i] ?? values[0];
-	});
-}
-/**
-* Optimize padding output shorthand.
-*/
-function optimizePadding(dirs) {
-	const { top, right, bottom, left } = dirs;
-	if (top === right && right === bottom && bottom === left) return { padding: top };
-	if (top === bottom && left === right) return { padding: `${top} ${left}` };
-	return { padding: `${top} ${right} ${bottom} ${left}` };
-}
+const PADDING_CONFIG = {
+	property: "padding",
+	defaultValue: "var(--gap)",
+	trueValue: "1x",
+	defaultInit: "0"
+};
 function paddingStyle({ padding, paddingBlock, paddingInline, paddingTop, paddingRight, paddingBottom, paddingLeft }) {
-	if (padding == null && paddingBlock == null && paddingInline == null && paddingTop == null && paddingRight == null && paddingBottom == null && paddingLeft == null) return {};
-	const dirs = {
-		top: "0",
-		right: "0",
-		bottom: "0",
-		left: "0"
-	};
-	if (padding != null) {
-		if (typeof padding === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${padding}px`;
-		else if (padding === true) padding = "1x";
-		if (typeof padding === "string" && padding) {
-			const groups = parseStyle(padding).groups ?? [];
-			for (const group of groups) {
-				const { values, directions } = extractGroupData(group);
-				applyGroup(dirs, values, directions);
-			}
-		}
-	}
-	if (paddingBlock != null) {
-		const val = parsePaddingValue(paddingBlock);
-		if (val) dirs.top = dirs.bottom = val;
-	}
-	if (paddingInline != null) {
-		const val = parsePaddingValue(paddingInline);
-		if (val) dirs.left = dirs.right = val;
-	}
-	if (paddingTop != null) {
-		const val = parsePaddingValue(paddingTop);
-		if (val) dirs.top = val;
-	}
-	if (paddingRight != null) {
-		const val = parsePaddingValue(paddingRight);
-		if (val) dirs.right = val;
-	}
-	if (paddingBottom != null) {
-		const val = parsePaddingValue(paddingBottom);
-		if (val) dirs.bottom = val;
-	}
-	if (paddingLeft != null) {
-		const val = parsePaddingValue(paddingLeft);
-		if (val) dirs.left = val;
-	}
-	return optimizePadding(dirs);
+	return processDirectionalStyle(PADDING_CONFIG, {
+		main: padding,
+		block: paddingBlock,
+		inline: paddingInline,
+		top: paddingTop,
+		right: paddingRight,
+		bottom: paddingBottom,
+		left: paddingLeft
+	});
 }
 paddingStyle.__lookupStyles = [
 	"padding",
@@ -98,7 +26,7 @@ paddingStyle.__lookupStyles = [
 	"paddingBlock",
 	"paddingInline"
 ];
-
 //#endregion
 export { paddingStyle };
+
 //# sourceMappingURL=padding.js.map

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;